@charset "UTF-8";
:root {
  --font1: "Newsreader", serif;
  --font2: "Spline Sans Mono", sans-serif;
  --font-code: "Spline Sans Mono", sans-serif;
  --f1: 50px;
  --f2: 39px;
  --f3: 31px;
  --f4: 24px;
  --f5: 19px;
  --f6: 15px;
  --g1: 74px;
  --g2: 59px;
  --g3: 48px;
  --g4: 38px;
  --g5: 31px;
  --g6: 25px;
  --x1: 50px;
  --x2: 31px;
  --x3: 19px;
  --x4: 12px;
  --x5: 7px;
  --x6: 4px;
  --phi: 1.6180339887;
  --w-content: 672px;
  --w-total: 1216px;
  --gutter-full: 31px;
  --gutter-mobile: 19px;
  --bg1: #F7F2E9FF;
  --bg2: #F0E9DBFF;
  --c1: #1C1814FF;
  --c2: #575046FF;
  --ca: #6E2B25FF;
  --border1: 1px solid #1C181422;
  --border2: 1px solid #1C1814FF;
  --border3: 3px double #1C1814FF;
  --bg-header: #1C1814FF;
  --c-header: #F7F2E9FF;
  --bg-footer: #1C1814FF;
  --c-footer: #F7F2E9FF;
  --c-menu: #F7F2E9FF;
  --font-menu: "Spline Sans Mono", sans-serif;
  --text-menu: uppercase;
  --m-menu-spacing: 32px;
  --font-byline: "Spline Sans Mono", sans-serif;
  --c-byline: #575046FF;
  --font-caption: "Spline Sans Mono", sans-serif;
  --c-caption: #575046FF;
  --m-caption: -26px;
  --c-drop-cap: #6E2B25FF;
  --font-impact: "Newsreader", Georgia, serif;
  --c-impact: #6E2B25FF;
  --bg-highlight: #F0E9DBFF;
  --bg-callout: #F0E9DBFF;
  --c-callout: #111111;
  --p-callout: 20px;
  --bg-callout-note: #F0E9DBFF;
  --c-callout-note: #111111;
  --bg-callout-alert: #6E2B25FF;
  --c-callout-alert: #FFFFFF;
  --bg-pre: #F0E9DBFF;
  --c-pre: #1C1814FF;
  --p-pre: 20px;
  --font-label: "Spline Sans Mono", sans-serif;
  --c-required: #6E2B25FF;
  --p-input: 12px;
  --b-input: 1px solid #1C1814FF;
  --p-textarea: 12px;
  --b-textarea: 1px solid #1C1814FF;
  --b-select: 1px solid #1C1814FF;
  --bg-button: #6E2B25FF;
  --c-button: #FFFFFF;
  --p-button-x: 32px;
  --p-button-y: 20px;
  --bg-button-save: #6E2B25FF;
  --c-button-save: #FFFFFF;
  --bg-button-delete: #1C1814FF;
  --c-button-delete: #FFFFFF;
  --bg-button-action: #F7F2E9FF;
  --c-button-action: #111111;
  --bg-button-update: #F0E9DBFF;
  --c-button-update: #111111;
  --list-style: disc;
  --list-margin: 19px;
  --list-item-margin: 12px;
  --list-nested-margin: 19px;
  --sheet: #FDFAF3FF;
  --rose: #D8A08EFF;
  --c-soft: #57504699;
  --dark-dim: #F7F2E9D9;
  --dark-faint: #F7F2E999;
  --border-light: 1px solid #F7F2E92E;
  --link-underline: #6E2B2566;
  --sheet-shadow: 0 1px 0 #1C181410, 0 24px 50px -38px #1C181466;
  --sheet-pad: clamp(1.6rem, 6vw, 5.4rem);
  --bar: calc((var(--w-total) - var(--w-content)) / 2);
}

*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4 {
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  word-break: normal;
}

img, fieldset {
  border: 0;
}

abbr {
  text-decoration: none;
}

sub, sup {
  line-height: 0.5em;
  color: var(--c2);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

iframe, video, embed, object {
  display: block;
  max-width: 100%;
}

.left, .right, .center {
  display: block;
}

.center {
  float: none;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

button, input[type=submit] {
  cursor: pointer;
  overflow: visible;
}

html {
  font-size: var(--f5);
}

body {
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background-color: var(--bg1);
  overflow-x: hidden;
}

::selection {
  background-color: rgba(110, 43, 37, 0.1490196078);
}

.container {
  box-sizing: border-box;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
@media all and (min-width: 710px) {
  .container {
    max-width: var(--w-content);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 734px) {
  .container {
    max-width: 100%;
    padding-left: var(--gutter-full);
    padding-right: var(--gutter-full);
    margin-left: 0;
    margin-right: 0;
  }
}
@media all and (min-width: 1278px) {
  .container {
    max-width: var(--w-total);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

.text {
  max-width: var(--w-content);
}

h1 {
  font-family: var(--font1);
  font-size: var(--f2);
  line-height: var(--g2);
  font-weight: 500;
  letter-spacing: -0.015em;
}

h2 {
  font-family: var(--font1);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--font1);
  font-size: var(--f4);
  line-height: var(--g4);
  font-weight: 600;
}

h4 {
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: var(--g5);
  font-weight: 600;
}

a {
  color: var(--ca);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

address {
  font-style: normal;
  line-height: 1.75;
}

blockquote {
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: var(--g5);
  color: rgba(28, 24, 20, 0.8509803922);
  font-style: italic;
  border-left: 2px solid #6e2b25;
  padding: var(--x5) 0 var(--x5) var(--x3);
}
blockquote > :last-child {
  margin-bottom: 0;
}
blockquote cite {
  display: block;
  margin-top: var(--x4);
  font-style: normal;
  font-family: var(--font2);
  font-size: 0.66rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-soft);
}

code, pre, kbd {
  font-family: var(--font-code);
  font-size: var(--f6);
  line-height: var(--g6);
}

code {
  line-height: 1em;
  background-color: rgba(28, 24, 20, 0.0784313725);
  padding: var(--x6);
  margin: 0 1px;
}
strong code {
  font-weight: normal;
}

pre {
  color: var(--c-pre);
  background-color: var(--bg-pre);
  padding: var(--p-pre);
  border-left: 2px solid #6e2b25;
  overflow: auto;
  word-wrap: normal;
  tab-size: 4;
}

hr {
  border: var(--border1);
  border-width: 0 0 1px 0;
  margin: var(--x2) 0;
}

.drop-cap {
  font-family: var(--font1);
  font-size: 3.6em;
  line-height: 0.8;
  font-weight: 600;
  color: var(--c-drop-cap);
  margin-right: var(--x5);
  padding-top: 0.08em;
  float: left;
}

.small {
  font-family: var(--font-caption);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c-caption);
}

.callout {
  color: var(--c-callout);
  background-color: var(--bg-callout);
  padding: var(--p-callout);
  border-top: var(--border1);
  border-bottom: var(--border1);
  font-style: italic;
}
.callout b, .callout strong {
  font-style: normal;
  font-weight: 600;
  color: var(--ca);
}
.callout.alert {
  color: var(--c-callout-alert);
  background-color: var(--bg-callout-alert);
}
.callout.alert b, .callout.alert strong {
  color: var(--rose);
}
.callout.note {
  color: var(--c-callout-note);
  background-color: var(--bg-callout-note);
}
.callout > :last-child {
  margin-bottom: 0;
}

.highlight {
  background-color: var(--bg-highlight);
  padding: var(--x6) 0;
}

.impact {
  font-family: var(--font-impact);
  font-size: var(--f4);
  line-height: 1.32;
  font-style: italic;
  font-weight: 500;
  color: var(--c-impact);
}

.pop {
  box-shadow: 0 0 var(--x4) rgba(28, 24, 20, 0.4);
}

.caption {
  font-family: var(--font-caption);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c-caption);
}
.center + .caption {
  text-align: center;
}

.kicker {
  font-family: var(--font2);
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca);
}

.fleuron {
  display: block;
  color: var(--ca);
  margin-bottom: var(--x2);
}
.fleuron svg {
  width: 1.6rem;
  height: 1.6rem;
}

.endmark::after {
  content: " ❦";
  color: var(--ca);
}

@media all and (min-width: 710px) {
  h1 {
    font-size: var(--f1);
    line-height: var(--g1);
  }
  h2 {
    font-size: var(--f2);
    line-height: var(--g2);
  }
  h3 {
    font-size: var(--f3);
    line-height: var(--g3);
  }
  h4 {
    font-size: var(--f4);
    line-height: var(--g4);
  }
  .impact {
    font-size: var(--f3);
    line-height: 1.32;
  }
  .left:not(.bar) {
    float: left;
    clear: both;
    margin-right: var(--x2);
  }
  .right:not(.bar) {
    float: right;
    clear: both;
    margin-left: var(--x2);
  }
}
.page-container + .page-container {
  margin-top: var(--x1);
}

.page-container, .headline-area, .page-content {
  display: flow-root;
}

.page-container {
  margin-left: auto;
  margin-right: auto;
}

.page-content {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}
.page-content form {
  margin-bottom: calc(var(--x2) * var(--phi));
}
.page-content h1 {
  margin-bottom: var(--x2);
}
.page-content h2 {
  font-size: 1.62rem;
  line-height: 1.22;
  margin-top: calc(var(--x2) * var(--phi));
  margin-bottom: var(--x3);
}
.page-content h2::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 3px;
  background-color: var(--ca);
  margin-bottom: var(--x2);
}
.page-content h3 {
  font-size: 1.18rem;
  line-height: 1.3;
  margin-top: var(--x2);
  margin-bottom: var(--x3);
}
.page-content h4 {
  margin-bottom: var(--x4);
}
.page-content h1 + h2, .page-content h2 + h3, .page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child, .page-content hr + h2 {
  margin-top: 0;
}
.page-content > :last-child {
  margin-bottom: 0;
}
.page-content a {
  color: var(--c1);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.page-content a:hover {
  color: var(--ca);
  text-decoration-color: var(--ca);
}
.page-content ul {
  list-style-type: var(--list-style);
}
.page-content ul, .page-content ol {
  margin-left: var(--list-margin);
}
.page-content ul ul, .page-content ul ol, .page-content ol ul, .page-content ol ol {
  margin-top: var(--list-item-margin);
  margin-bottom: 0;
  margin-left: var(--list-nested-margin);
}
.page-content li {
  margin-bottom: var(--list-item-margin);
}
.page-content li::marker {
  color: var(--ca);
}
.page-content li:last-child {
  margin-bottom: 0;
}
.page-content ol li::marker {
  font-style: italic;
  font-weight: 500;
}
.page-content .caption {
  margin-top: var(--m-caption);
}
.page-content .pullquote {
  margin: calc(var(--x2) * var(--phi)) 0;
  text-align: center;
}
.page-content .pullquote .impact {
  font-size: 1.55rem;
  line-height: 1.32;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}
.page-content .pullquote .impact em {
  color: var(--ca);
}
.page-content .pullquote .fleuron {
  margin-bottom: var(--x3);
}
.page-content .pullquote .fleuron svg {
  width: 1.2rem;
  height: 1.2rem;
}
.page-content p, .page-content ul, .page-content ol, .page-content blockquote, .page-content pre, .page-content img, .page-content .callout, .page-content .caption {
  margin-bottom: var(--x2);
}
.page-content p:last-child, .page-content ul:last-child, .page-content ol:last-child, .page-content blockquote:last-child, .page-content pre:last-child, .page-content img:last-child, .page-content .callout:last-child, .page-content .caption:last-child {
  margin-bottom: 0;
}
.page-content figure.plate {
  margin: calc(var(--x2) * var(--phi)) 0;
  border: var(--border2);
  outline: var(--border2);
  outline-offset: 4px;
  background-color: var(--bg2);
  padding: var(--x3);
}
.page-content figure.plate .frame {
  aspect-ratio: 16/9;
  background: repeating-linear-gradient(135deg, rgba(28, 24, 20, 0.0470588235) 0 3px, transparent 3px 9px), linear-gradient(180deg, #f2eadc, #e6dac6);
  border: 1px solid rgba(28, 24, 20, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-content figure.plate figcaption {
  margin-top: var(--x4);
  font-style: italic;
  text-align: center;
}
.page-content figure.portrait {
  float: right;
  width: 50%;
  margin: 0.35rem 0 1.3rem var(--x2);
  border: var(--border2);
  outline: var(--border2);
  outline-offset: 4px;
  background-color: var(--bg2);
  padding: var(--x4) var(--x4) var(--x3);
}
.page-content figure.portrait .frame {
  background: repeating-linear-gradient(135deg, rgba(28, 24, 20, 0.0470588235) 0 3px, transparent 3px 9px), linear-gradient(180deg, #f2eadc, #e6dac6);
  border: 1px solid rgba(28, 24, 20, 0.2);
  overflow: hidden;
}
.page-content figure.portrait .frame img {
  width: 100%;
  display: block;
  mix-blend-mode: multiply;
}
.page-content figure.portrait figcaption {
  margin-top: var(--x5);
  font-style: italic;
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
}
.page-content .lede {
  text-align: justify;
  hyphens: auto;
}

.page-title a {
  color: var(--bg1);
}
.page-title a:hover {
  color: var(--rose);
}

.page-title:has(+ .byline) {
  margin-bottom: 0;
}

.byline {
  font-family: var(--font-byline);
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-byline);
  margin-top: var(--x3);
  display: flex;
  gap: var(--x2);
  flex-wrap: wrap;
}

.page-content + .modular-content {
  margin-top: var(--x2);
}
.modular-content > :last-child {
  margin-bottom: 0;
}

label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.64rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28, 24, 20, 0.7019607843);
  margin-bottom: var(--x5);
}
label .required {
  font-weight: normal;
  color: var(--c-required);
}

input, textarea, select {
  display: block;
  width: 85%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: 1em;
  font-weight: inherit;
  color: var(--c1);
  background-color: var(--sheet);
  padding: var(--p-input);
  border: var(--b-input);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ca);
  box-shadow: 0 0 0 1px var(--ca);
}
input::placeholder, textarea::placeholder, select::placeholder {
  color: var(--c-soft);
  font-style: italic;
}

input[type=checkbox], input[type=radio], input[type=image], input[type=submit], select {
  width: auto;
}

input[type=checkbox], input[type=radio] {
  display: inline-block;
}
input[type=checkbox] + label, input[type=radio] + label {
  display: inline;
  font-weight: normal;
  margin-left: var(--x6);
  user-select: none;
}

textarea {
  line-height: inherit;
  resize: vertical;
  padding: var(--p-textarea);
  border: var(--b-textarea);
}

select {
  border: var(--b-select);
}

button, input[type=submit], .button {
  display: inline-block;
  width: auto;
  font-family: var(--font2);
  font-size: 0.72rem;
  font-weight: normal;
  line-height: 1em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: top;
  white-space: nowrap;
  color: var(--c-button);
  text-decoration: none;
  background-color: var(--bg-button);
  padding: var(--p-button-y) var(--p-button-x);
  border: none;
  cursor: pointer;
  user-select: none;
}
button:hover, button:active, input[type=submit]:hover, input[type=submit]:active, .button:hover, .button:active {
  text-decoration: none;
  color: var(--bg1);
  background-color: var(--c1);
}

button.save, .button.save {
  color: var(--c-button-save);
  background-color: var(--bg-button-save);
}
button.delete, .button.delete {
  color: var(--c-button-delete);
  background-color: var(--bg-button-delete);
}
button.action, .button.action {
  color: var(--c-button-action);
  background-color: var(--bg-button-action);
  border: var(--border2);
}
button.action:hover, button.action:active, .button.action:hover, .button.action:active {
  color: var(--bg1);
  background-color: var(--c1);
}
button.update, .button.update {
  color: var(--c-button-update);
  background-color: var(--bg-button-update);
}

#header {
  color: var(--c-header);
  background-color: var(--bg-header);
}
#header .site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--x3);
  padding-bottom: var(--x3);
  border-bottom: var(--border-light);
}
#header .wordmark {
  font-family: var(--font1);
  font-weight: 600;
  font-size: var(--f5);
  line-height: 1.6;
  color: var(--c-header);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
#header .wordmark em {
  font-style: italic;
  font-weight: 400;
}
#header .wordmark img {
  display: block;
  height: 1.5rem;
  width: auto;
}
#header .wordmark img.logo-dark {
  display: none;
}
#header .nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: var(--x5) 0;
  cursor: pointer;
}
#header .nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--c-header);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
#header .nav-toggle span + span {
  margin-top: 6px;
}
#header .nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--m-menu-spacing);
  margin-bottom: 0;
  margin-left: 0;
}
#header .nav-menu a:not(.button) {
  font-family: var(--font-menu);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: var(--text-menu);
  color: var(--c-menu);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
#header .nav-menu a:not(.button):hover {
  color: var(--rose);
  border-bottom-color: var(--rose);
  text-decoration: none;
}
#header .nav-menu .nav-cta {
  padding: 0.75rem 1.4rem;
}
#header .nav-menu .nav-cta:hover {
  color: var(--c1);
  background-color: var(--bg1);
}

@media all and (max-width: 860px) {
  #header .nav-toggle {
    display: block;
  }
  #header .nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--x4);
  }
  #header .nav-menu li {
    border-top: var(--border1);
  }
  #header .nav-menu li:first-child {
    border-top: none;
  }
  #header .nav-menu li:last-child {
    border-top: none;
    padding: var(--x3) 0 var(--x5);
  }
  #header .nav-menu a:not(.button) {
    display: block;
    padding: var(--x3) 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--c1);
  }
  #header .nav-menu a:not(.button):hover {
    color: var(--ca);
    border-bottom-color: transparent;
  }
  #header .nav-menu .nav-cta {
    display: block;
    text-align: center;
  }
  body.nav-open {
    overflow: hidden;
  }
  body.nav-open #header .nav-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: var(--bg1);
    margin: 0;
    padding: 5rem var(--gutter-mobile) var(--x2);
    overflow-y: auto;
  }
  body.nav-open #header .nav-toggle {
    position: relative;
    z-index: 60;
  }
  body.nav-open #header .nav-toggle span {
    background-color: var(--c1);
  }
  body.nav-open #header .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  body.nav-open #header .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.nav-open #header .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  body.nav-open #header .wordmark {
    position: relative;
    z-index: 60;
    color: var(--c1);
  }
  body.nav-open #header .wordmark img.logo-light {
    display: none;
  }
  body.nav-open #header .wordmark img.logo-dark {
    display: block;
  }
}
#footer {
  color: var(--c-footer);
  background-color: var(--bg-footer);
  padding-top: calc(var(--x2) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
}
#footer > .container > .kicker {
  display: block;
  color: var(--rose);
  margin-bottom: var(--x2);
}
#footer .colophon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--x2);
}
#footer .colophon-grid dt {
  font-family: var(--font2);
  font-size: 0.62rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-faint);
  margin-bottom: var(--x5);
}
#footer .colophon-grid dd {
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--dark-dim);
}
#footer .colophon-grid dd em {
  color: var(--rose);
}
#footer .colophon-sig {
  margin-top: calc(var(--x2) * var(--phi));
  padding-top: var(--x3);
  border-top: var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--x3);
}
#footer .colophon-sig .kicker {
  color: var(--dark-faint);
}
#footer .colophon-sig .kicker a {
  color: var(--dark-dim);
  text-decoration: none;
}
#footer .colophon-sig .kicker a:hover {
  color: var(--rose);
}

#hero {
  color: var(--c-header);
  background-color: var(--bg-header);
  padding-top: calc(var(--x1) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
}
#hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: calc(var(--x2) * var(--phi));
  align-items: center;
}
#hero .title-rules {
  border-top: 3px double #f7f2e9;
  padding-top: var(--x3);
  margin-bottom: var(--x2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#hero .title-rules .kicker {
  color: var(--rose);
}
#hero .title-rules .kicker.est {
  color: var(--dark-faint);
}
#hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.07;
  max-width: 18ch;
}
#hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--rose);
}
#hero .standfirst {
  margin-top: var(--x2);
  max-width: var(--w-content);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--dark-dim);
}
#hero .drop-cap {
  font-size: 3.4em;
  color: var(--rose);
}
#hero .cta-row {
  margin-top: calc(var(--x2) * var(--phi));
  display: flex;
  align-items: center;
  gap: var(--x2);
  flex-wrap: wrap;
}
#hero .aside-link {
  font-style: italic;
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c-header);
  text-decoration: none;
  border-bottom: var(--border-light);
}
#hero .aside-link:hover {
  color: var(--rose);
  border-bottom-color: var(--rose);
  text-decoration: none;
}
#hero .button:hover {
  color: var(--c1);
  background-color: var(--bg1);
}
#hero .portrait {
  border: 1px solid #f7f2e9;
  outline: 1px solid #f7f2e9;
  outline-offset: 5px;
  background-color: var(--bg2);
  padding: var(--x3) var(--x3) var(--x3);
}
#hero .portrait .frame {
  aspect-ratio: 4/5;
  background: radial-gradient(ellipse at 50% 42%, rgba(110, 43, 37, 0.1490196078) 0%, transparent 60%), repeating-linear-gradient(135deg, rgba(28, 24, 20, 0.0470588235) 0 3px, transparent 3px 9px), linear-gradient(180deg, #f2eadc, #e6dac6);
  border: 1px solid rgba(28, 24, 20, 0.2);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
#hero .portrait .frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  mix-blend-mode: multiply;
}
#hero .portrait figcaption {
  margin-top: var(--x4);
  font-style: italic;
  color: var(--c1);
  text-align: center;
  font-family: var(--font1);
}

.frame-note {
  display: block;
  font-family: var(--font2);
  font-size: 0.6rem;
  line-height: 2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(28, 24, 20, 0.5490196078);
  text-align: center;
  align-self: center;
  padding: var(--x3);
}

.numbered-section {
  padding-top: calc(var(--x1) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
}
.numbered-section .section-grid {
  display: grid;
  gap: 0 calc(var(--x2) * 0.8);
}
.numbered-section .essay-grid {
  grid-template-columns: 4.5rem minmax(0, var(--w-content)) 1fr;
}
.numbered-section .plates-grid {
  grid-template-columns: 4.5rem minmax(0, 1fr);
}
.numbered-section .side-no {
  font-family: var(--font1);
  font-size: 4.6rem;
  line-height: 0.9;
  font-weight: 500;
  font-style: italic;
  color: var(--ca);
  text-align: right;
  padding-top: var(--x5);
}
.numbered-section .section-kicker {
  display: block;
  margin-bottom: var(--x3);
}
.numbered-section h2 {
  font-size: 1.95rem;
  line-height: 1.2;
  margin-bottom: var(--x3);
}
.numbered-section h2 em {
  font-style: italic;
  font-weight: 400;
}
.numbered-section p + p {
  margin-top: var(--x3);
}

#argument .marginalia {
  padding-top: 4.2rem;
  max-width: 15rem;
  justify-self: end;
}
#argument .margin-note {
  font-size: 0.82rem;
  line-height: 1.55;
  font-style: italic;
  color: rgba(28, 24, 20, 0.7490196078);
  border-top: var(--border1);
  padding-top: var(--x4);
}
#argument .margin-note b {
  font-style: normal;
  font-weight: 600;
  color: var(--ca);
}
#argument .margin-note + .margin-note {
  margin-top: var(--x2);
}

#evidence {
  border-top: var(--border1);
}
#evidence .plates-head {
  max-width: var(--w-content);
  margin-bottom: calc(var(--x2) * var(--phi));
}
#evidence .plates-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--x2) * var(--phi));
  align-items: start;
}
#evidence .plate-fig {
  border: var(--border2);
  outline: var(--border2);
  outline-offset: 4px;
  background-color: var(--bg2);
  padding: var(--x3);
}
#evidence .plate-fig .shot {
  border: 1px solid rgba(28, 24, 20, 0.2);
  background-color: white;
}
#evidence .plate-fig .bar-strip {
  height: 15px;
  background-color: rgba(28, 24, 20, 0.1019607843);
  display: flex;
  gap: 4px;
  padding: 5px 7px;
}
#evidence .plate-fig .bar-strip i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(28, 24, 20, 0.2509803922);
}
#evidence .plate-fig figcaption {
  margin-top: var(--x3);
  font-family: var(--font1);
  font-size: var(--f6);
  line-height: var(--g6);
  font-style: italic;
  color: var(--c1);
}
#evidence .plate-fig figcaption b {
  font-style: normal;
  font-family: var(--font2);
  font-size: 0.64rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca);
  display: block;
  margin-bottom: var(--x5);
}
#evidence .plate-fig figcaption .stats {
  display: block;
  font-style: normal;
  font-family: var(--font2);
  font-size: 0.62rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--c-soft);
  margin-top: var(--x5);
}
#evidence .fig-before .canvas {
  padding: 9px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
#evidence .fig-before .canvas div {
  background-color: rgba(28, 24, 20, 0.0784313725);
}
#evidence .fig-before .canvas .banner {
  grid-column: 1/-1;
  height: 36px;
  background: repeating-linear-gradient(45deg, rgba(110, 43, 37, 0.1882352941) 0 8px, rgba(28, 24, 20, 0.1254901961) 8px 16px);
}
#evidence .fig-before .canvas .blob {
  height: 28px;
}
#evidence .fig-before .canvas .popup {
  grid-column: 1/-1;
  height: 32px;
  background-color: rgba(110, 43, 37, 0.1647058824);
  border: 1px dashed rgba(110, 43, 37, 0.5333333333);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font2);
  font-size: 0.56rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ca);
  text-transform: uppercase;
}
#evidence .fig-after .canvas {
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#evidence .fig-after .canvas .headline {
  height: 15px;
  width: 70%;
  background-color: rgba(28, 24, 20, 0.8784313725);
}
#evidence .fig-after .canvas .line {
  height: 6px;
  background-color: rgba(28, 24, 20, 0.1803921569);
}
#evidence .fig-after .canvas .line.short {
  width: 55%;
}
#evidence .fig-after .canvas .cta {
  height: 13px;
  width: 34%;
  background-color: var(--ca);
  margin-top: 5px;
}

ol.contents {
  list-style: none;
  margin-top: calc(var(--x2) * var(--phi));
  margin-left: 0;
  margin-bottom: 0;
}

ol.contents a {
  display: block;
  padding: 1.6rem 0;
  text-decoration: none;
  color: var(--c1);
  border-top: var(--border1);
}
ol.contents a:hover {
  text-decoration: none;
}
ol.contents a:hover .t {
  color: var(--ca);
}

ol.contents li:last-child a {
  border-bottom: var(--border1);
}

.contents .t {
  font-size: 1.32rem;
  line-height: 1.3;
  font-weight: 500;
}
.contents .t em {
  font-style: italic;
  font-weight: 400;
}

.contents .x {
  display: block;
  margin-top: var(--x5);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--c1);
  opacity: 0.75;
}

.contents .folio {
  display: block;
  margin-top: var(--x4);
  font-family: var(--font2);
  font-size: 0.66rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c1);
  opacity: 0.6;
}

#contents {
  border-top: var(--border1);
  padding-top: calc(var(--x1) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
}
#contents .toc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(var(--x2) * var(--phi));
}
#contents .toc-head h2 {
  font-size: 1.95rem;
  line-height: 1.2;
}
#contents .toc-head .all-link {
  color: var(--ca);
  font-style: italic;
  text-decoration: none;
}
#contents .toc-head .all-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contents .contents {
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;
}
#contents .contents a {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: start;
  gap: var(--x3);
  padding: var(--x3) 0;
  text-decoration: none;
  color: var(--c1);
  border-top: var(--border1);
}
#contents .contents a:hover {
  text-decoration: none;
}
#contents .contents a:hover .t {
  color: var(--ca);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contents .contents li:last-child a {
  border-bottom: var(--border1);
}
#contents .contents .marker {
  color: var(--ca);
  font-family: var(--font2);
  line-height: 1.3;
}
#contents .contents .t {
  font-size: 1.32rem;
  line-height: 1.3;
  font-weight: 500;
}
#contents .contents .t em {
  font-style: italic;
  font-weight: 400;
}
#contents .contents .folio {
  font-family: var(--font2);
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-soft);
  white-space: nowrap;
}

#audit-section {
  border-top: var(--border1);
  padding-top: calc(var(--x1) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
}

.audit-plate, .optin-plate {
  background-color: var(--c1);
  color: var(--bg1);
  padding: calc(var(--x2) * var(--phi)) calc(var(--x2) * var(--phi)) var(--x2);
}
.audit-plate .kicker, .optin-plate .kicker {
  display: block;
  color: var(--rose);
  margin-bottom: var(--x3);
}
.audit-plate h2, .optin-plate h2 {
  margin-bottom: var(--x3);
}
.audit-plate h2 em, .optin-plate h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--rose);
}
.audit-plate p, .optin-plate p {
  max-width: var(--w-content);
  color: var(--dark-dim);
}
.audit-plate .audit-form, .optin-plate .audit-form {
  margin-top: var(--x2);
  display: flex;
  max-width: var(--w-content);
}
.audit-plate .audit-form input[type=url], .optin-plate .audit-form input[type=url] {
  flex: 1;
  min-width: 0;
  font-family: var(--font2);
  font-size: 0.8rem;
  line-height: 1em;
  padding: var(--x3) var(--x3);
  border: 1px solid #f7f2e9;
  border-right: none;
  background-color: var(--bg1);
  color: var(--c1);
}
.audit-plate .audit-form input[type=url]:focus, .optin-plate .audit-form input[type=url]:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 1px var(--rose);
}
.audit-plate .audit-form button, .optin-plate .audit-form button {
  padding-top: 0;
  padding-bottom: 0;
}
.audit-plate .audit-form button:hover, .optin-plate .audit-form button:hover {
  color: var(--c1);
  background-color: var(--bg1);
}
.audit-plate .fine, .optin-plate .fine {
  margin-top: var(--x3);
  font-style: italic;
  color: var(--dark-faint);
}

.audit-plate {
  outline: var(--border2);
  outline-offset: 5px;
  max-width: 46rem;
  margin: 0 auto;
}
.audit-plate h2 {
  font-size: 2.2rem;
  line-height: 1.15;
}

.optin-plate {
  margin: calc(var(--x2) * var(--phi)) calc(-1 * var(--sheet-pad)) -4.4rem;
  padding-left: var(--sheet-pad);
  padding-right: var(--sheet-pad);
}
.optin-plate h2 {
  font-size: 1.85rem;
  line-height: 1.15;
}
.optin-plate .optin-inner {
  max-width: var(--w-content);
  margin: 0 auto;
}

.interlude {
  border-top: var(--border1);
  background-color: var(--bg2);
  padding-top: calc(var(--x1) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
  text-align: center;
}
.interlude .impact {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.25;
  max-width: 24ch;
  margin: 0 auto;
}
.interlude .impact em {
  color: var(--ca);
}

#content {
  word-break: break-word;
  padding-top: 0;
  padding-bottom: calc(var(--x1) * var(--phi));
  background-color: var(--bg1);
  color: var(--c1);
}

.title-bleed {
  background-color: var(--c1);
  color: var(--bg1);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--x2) calc(50vw - 50%) calc(var(--x1) + var(--x3));
}
.title-bleed .crumb {
  display: block;
  color: var(--rose);
  margin-bottom: var(--x2);
}
.title-bleed .crumb a {
  color: var(--rose);
  text-decoration: none;
}
.title-bleed .crumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.title-bleed .page-title {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.09;
  max-width: 22ch;
  margin-bottom: calc(var(--x2) * var(--phi));
  color: var(--bg1);
}
.title-bleed .page-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--rose);
}
.title-bleed .standfirst {
  margin-top: var(--x3);
  max-width: var(--w-content);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--dark-dim);
}

.sheet {
  background-color: var(--sheet);
  border: var(--border1);
  max-width: 46rem;
  margin: calc(-1 * var(--x2) - var(--x4)) auto 0;
  padding: 4.2rem var(--sheet-pad) 4.4rem;
  box-shadow: var(--sheet-shadow);
  position: relative;
}

@media all and (max-width: 860px) {
  #hero .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--x2);
  }
  #hero .portrait {
    max-width: 22rem;
    margin: 0 auto;
  }
  .numbered-section .section-grid {
    grid-template-columns: 1fr;
  }
  .numbered-section .side-no {
    text-align: left;
    font-size: 3.2rem;
    line-height: 0.9;
    padding-top: 0;
    margin-bottom: var(--x3);
  }
  #argument .marginalia {
    padding-top: var(--x2);
    max-width: var(--w-content);
    justify-self: start;
    margin-top: var(--x2);
  }
  #evidence .plates-figures {
    grid-template-columns: 1fr;
  }
  .page-content figure.portrait {
    float: none;
    width: 100%;
    max-width: 16rem;
    margin: 0 auto var(--x3);
  }
  .audit-plate {
    padding: var(--x2) var(--x3);
  }
  .audit-plate .audit-form, .optin-plate .audit-form {
    flex-direction: column;
  }
  .audit-plate .audit-form input[type=url], .optin-plate .audit-form input[type=url] {
    border-right: 1px solid #f7f2e9;
  }
  .audit-plate .audit-form button, .optin-plate .audit-form button {
    padding-top: var(--x3);
    padding-bottom: var(--x3);
  }
  .sheet {
    margin-top: calc(-1 * var(--x2));
  }
}