
@font-face {
  font-family: "Archivo";
  src: url("/assets/world/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  
  --paper: #F4F5F2;
  --roll: #E4E6E0;
  --ink: #141414;
  --ink-2: #4A4E48;
  --flash: #C8221A; 
  --on-flash: #FFFFFF;

  
  --face: "Archivo", "Archivo Fallback", sans-serif;
  --display-stretch: 70%;
  --display-stretch-tight: 62%;
  --display-weight: 860;
  --text-stretch: 100%;
  --text-weight: 400;
  --text-strong: 600;
  --data-stretch: 87.5%;
  --data-weight: 600;
  --data-tracking: 0.06em;

  
  --step--1: 0.875rem;
  --step-0: 1.0625rem;   
  --step-1: 1.1875rem;   
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --step-4: clamp(1.875rem, 0.9rem + 3.6vw, 4rem);
  --measure: 68ch;
  --leading: 1.55;

  
  --s-1: 0.25rem;
  --s0: 0.5rem;
  --s1: 0.75rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4.5rem;
  --gutter: 1rem;
  --frame: 80rem;

  --rule: 1px solid var(--ink);
  --hair: 1px solid color-mix(in srgb, var(--ink) 22%, var(--paper));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}


@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 88%;
  descent-override: 21%;
}



*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face);
  font-size: var(--step-0);
  font-stretch: var(--text-stretch);
  font-weight: var(--text-weight);
  line-height: var(--leading);
  font-kerning: normal;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 var(--s2); }
h1, h2, h3 {
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: var(--step-3); margin-bottom: var(--s2); }
h3 { font-size: var(--step-2); line-height: 1.12; }

a { color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
a, button, [tabindex] { scroll-margin-block: 1rem; }

.skip { position: absolute; left: var(--s2); top: -4rem; z-index: 10; background: var(--paper); padding: var(--s0) var(--s1); border: var(--rule); }
.skip:focus { top: var(--s1); }
.bar { margin: 0; padding: var(--s0) var(--gutter); background: var(--roll); font-size: var(--step--1); }


.take__meta, .take__mark, .feed__num, .gap__field, .advisory__kind, .record dt, .nte__head, .feed__divider, .crumbs, .head__nav, .head__menu, .foot__links, .byline__note {
  font-stretch: var(--data-stretch);
  font-weight: var(--data-weight);
  font-variant-numeric: tabular-nums lining-nums;
}
.take__meta, .take__mark, .advisory__kind, .record dt, .nte__head, .feed__divider, .head__nav, .head__menu {
  text-transform: uppercase;
  letter-spacing: var(--data-tracking);
}


.head { background: var(--paper); border-bottom: var(--rule); }
.head__bar {
  max-width: var(--frame); margin: 0 auto; padding: 0.5rem var(--gutter);
  min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2);
}
.head__id, .head__menu { grid-row: 1; }
.head__nav { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 800px) {
  .head__bar { grid-template-columns: auto minmax(0, 1fr); }
  .head__nav { grid-column: 2; grid-row: 1; justify-self: end; }
}
.head__id { display: inline-flex; align-items: center; gap: var(--s0); text-decoration: none; margin-right: auto; }
.head__name { font-stretch: 75%; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.005em; line-height: 1; }
.mark__tape { fill: var(--flash); }
.mark__holes circle { fill: var(--paper); }
.head__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s3); font-size: 0.8125rem; }
.head__nav a { text-decoration: none; padding: var(--s0) 0; display: inline-block; }
.head__nav a:hover, .head__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.head__menu {
  font: inherit; font-size: 0.8125rem; color: var(--ink); background: transparent;
  border: var(--rule); border-radius: 0; padding: 0.375rem 0.75rem; min-height: 40px; cursor: pointer;
}
@media (max-width: 799px) {
  [data-head][data-menu] .head__menu { display: inline-block; }
  [data-head][data-menu="closed"] .head__nav { display: none; }
  [data-head][data-menu] .head__nav { flex-basis: 100%; padding-bottom: var(--s1); }
  [data-head][data-menu] .head__nav ul { flex-direction: column; gap: 0; }
  [data-head][data-menu] .head__nav a { padding: 0.625rem 0; }
  .head__nav ul { flex-wrap: wrap; gap: var(--s1) var(--s2); }
}
@media (min-width: 800px) { .head__menu { display: none !important; } }


.tape { position: relative; height: 32px; overflow: hidden; background: var(--paper); border-bottom: var(--rule); }
.tape__run { position: absolute; inset: 0 auto 0 0; }
.tape__run svg { max-width: none; width: auto; height: 32px; }
.tape__band { fill: var(--flash); }
.tape__holes circle { fill: var(--paper); }
.tape__glyphs text { fill: var(--paper); font-family: var(--face); font-stretch: 87.5%; font-weight: 700; font-size: 6.6px; text-anchor: middle; letter-spacing: 0; }
.tape__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; }
@media (min-width: 1024px) {
  .tape { height: 40px; }
  .tape__run svg { height: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tape--feed .tape__run { animation: tape-feed 900ms var(--ease-out) both; }
}
@keyframes tape-feed { from { transform: translateX(-62%); } to { transform: translateX(0); } }


.frame { max-width: var(--frame); margin: 0 auto; padding: 0 var(--gutter); }
main { display: block; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s0); margin: var(--s2) 0 0; padding: 0; font-size: var(--step--1); color: var(--ink-2); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--s0); }

.take { padding: var(--s5) 0 var(--s4); border-top: var(--hair); }
.take:first-child { border-top: 0; }
.take__body > h2 + *, .take__answer { margin-top: 0; }
.take__answer { font-weight: var(--text-strong); }
.take__mark { margin: var(--s3) 0 0; font-size: 0.75rem; color: var(--ink-2); }
.take__mark--ends { color: var(--flash); font-size: 0.875rem; }
.take__meta {
  margin: var(--s3) 0 0; padding-top: var(--s0); border-top: var(--hair);
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s2); font-size: 0.6875rem; color: var(--ink-2);
}
.take__body { max-width: none; }
.take__body > :where(h2, h3, p, ul, .quote, .intro, .advisory, .stylebook, .actions, .empty) { max-width: var(--measure); }
.take__aside { margin-top: var(--s3); }
.take__aside > :first-child { margin-top: 0; }
@media (min-width: 1024px) {
  .take { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); column-gap: var(--s4); }
  .take__body { grid-column: 2 / span 2; grid-row: 1; }
  .take--aside .take__body { grid-column: 2; }
  .take__aside { grid-column: 3; grid-row: 1; margin-top: 0; padding-top: 0.4rem; }
  .take__aside .quote [data-verbatim] { font-size: var(--step-0); }
  .take__meta {
    grid-column: 1; grid-row: 1; align-self: start; margin: 0; border-top: 0;
    background: var(--roll); padding: var(--s1) var(--s1); flex-direction: column; gap: var(--s-1);
  }
}


.lead { padding: var(--s3) 0 var(--s4); }
.lead__main { display: grid; grid-template-columns: minmax(0, 1fr) 110px; column-gap: var(--s1); align-items: start; }
.lead h1 { grid-column: 1; grid-row: 1; font-size: 1.875rem; font-stretch: var(--display-stretch-tight); font-weight: 900; line-height: 1.02; letter-spacing: -0.012em; }
.lead__cover { grid-column: 2; grid-row: 1; margin: 0.2rem 0 0; }
.lead__cover img { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ink) 55%, transparent); }
.lead__text { grid-column: 1 / -1; grid-row: 2; padding-top: var(--s2); }
.lead .byline { margin: var(--s2) 0 0; }
.lead .publine { margin: 0 0 var(--s2); }
.lead .proof { margin: var(--s2) 0 0; font-size: var(--step--1); }
.lead .proof q { font-weight: var(--text-strong); quotes: "\201C" "\201D"; }
.lead .take__mark { margin-top: var(--s2); }
@media (min-width: 1024px) {
  .lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); column-gap: var(--s4); padding-top: var(--s5); }
  .lead__main { display: contents; }
  .lead h1 { grid-column: 2; grid-row: 1; font-size: clamp(2.5rem, 1.2rem + 2.6vw, 3.5rem); font-stretch: var(--display-stretch); }
  .lead__cover { grid-column: 3; grid-row: 1 / span 2; width: 100%; max-width: 300px; margin: 0; justify-self: end; }
  .lead__text { grid-column: 2; grid-row: 2; padding-top: var(--s3); }
  .lead .take__meta { grid-column: 1; grid-row: 1; }
}


.intro { position: relative; padding: var(--s1) var(--s2); margin: 0 0 var(--s1); }
.intro p { margin: 0; font-size: var(--step-1); line-height: 1.45; }
.tick { position: absolute; width: 14px; height: 14px; }
.tick--tl { top: 0; left: 0; border-top: 2px solid var(--flash); border-left: 2px solid var(--flash); }
.tick--tr { top: 0; right: 0; border-top: 2px solid var(--flash); border-right: 2px solid var(--flash); }
.tick--bl { bottom: 0; left: 0; border-bottom: 2px solid var(--flash); border-left: 2px solid var(--flash); }
.tick--br { bottom: 0; right: 0; border-bottom: 2px solid var(--flash); border-right: 2px solid var(--flash); }
@media (min-width: 1024px) { .intro p { font-size: 1.25rem; } }


.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin: var(--s2) 0 0; }
.buy {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25rem;
  background: var(--flash); color: var(--on-flash); font-weight: var(--text-strong); font-size: 1.0625rem;
  text-decoration: none; border: 2px solid var(--flash); border-radius: 0;
}
.buy:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.buy:active { transform: translateY(1px); }
.buy--gap { background: transparent; color: var(--ink); border: 2px dashed var(--ink); cursor: default; }
.buy--gap:hover { text-decoration: none; }
.buy--gap .gap { border: 0; }
.buy--gap .gap__field { font-stretch: var(--text-stretch); font-weight: var(--text-strong); text-transform: none; letter-spacing: 0; color: var(--ink); }
.buy--gap .gap__state { color: var(--ink); text-decoration: none; }
.action { font-weight: var(--text-strong); }
.action--box { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25rem; border: 2px solid var(--ink); text-decoration: none; }
.action--box:hover { text-decoration: underline; }


.gap__field { color: var(--ink); }
.gap__state { color: var(--ink-2); text-decoration: underline dashed 1px; text-underline-offset: 0.2em; }


.byline { font-size: var(--step-0); }
.byline a { font-weight: var(--text-strong); }
.byline__note { color: var(--ink-2); font-size: 0.875rem; }
.contacts { display: grid; gap: var(--s3); margin-top: var(--s3); }
.contact { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s2); align-items: start; padding-top: var(--s2); border-top: var(--hair); }
.contact .portrait { margin: 0; }
.contact .portrait img { width: 72px; height: auto; }
.contact__name { font-size: 1.25rem; margin-bottom: var(--s-1); }
.contact__name a { text-decoration: none; }
.contact__name a:hover { text-decoration: underline; }
.contact p { margin: 0 0 var(--s0); }
.contact__home { font-size: var(--step--1); }
@media (min-width: 768px) { .contacts { grid-template-columns: 1fr 1fr; column-gap: var(--s4); } }


.record { margin: var(--s2) 0; border-top: var(--rule); }
.record__row { display: grid; grid-template-columns: minmax(7.5rem, 32%) minmax(0, 1fr); gap: var(--s2); padding: var(--s0) 0; border-bottom: var(--hair); }
.record dt { font-size: 0.75rem; color: var(--ink-2); padding-top: 0.2rem; }
.record dd { margin: 0; }
.record .gap__field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.record .gap__state { color: var(--ink); }


.feed { list-style: none; margin: var(--s2) 0; padding: 0; border-top: var(--rule); }
.feed__row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--s1); padding: var(--s0) 0; border-bottom: var(--hair); }
.feed__num { font-size: 0.875rem; color: var(--ink-2); padding-top: 0.1rem; }
.feed__title { font-weight: var(--text-strong); }
.feed__title a { text-decoration: none; }
.feed__title a:hover { text-decoration: underline; }
.feed__open { grid-column: 2; color: var(--ink-2); font-size: var(--step--1); }
.feed__divider { padding: var(--s2) 0 var(--s0); border-bottom: var(--rule); font-size: 0.75rem; }


.stylebooks { display: grid; gap: var(--s2); margin-top: var(--s2); }
@media (min-width: 1024px) { .stylebooks { grid-template-columns: 1fr 1fr; column-gap: var(--s4); } }
.stylebook { padding-top: var(--s1); border-top: var(--hair); }
.stylebook__term { margin: 0 0 var(--s-1); font-weight: 700; }
.stylebook__term a { text-decoration-thickness: 1px; }
.stylebook__def { margin: 0 0 var(--s-1); }
.stylebook__credit { margin: 0; color: var(--ink-2); font-size: var(--step--1); }


.quote { margin: var(--s3) 0; padding: 0; }
.quote blockquote { margin: 0; }
.quote [data-verbatim] { font-size: var(--step-1); font-weight: 500; line-height: 1.45; margin: 0; }
.quote [data-verbatim]::before { content: "\201C"; }
.quote [data-verbatim]::after { content: "\201D"; }
.quote figcaption { margin-top: var(--s0); color: var(--ink-2); font-size: var(--step--1); }
.note { color: var(--ink-2); font-size: var(--step--1); }
.advisory { margin: var(--s2) 0; padding: var(--s1) 0; border-top: var(--rule); border-bottom: var(--rule); }
.advisory p { margin: 0; }
.advisory__kind { font-size: 0.75rem; margin-right: var(--s0); }
.advisory__src { margin-top: var(--s0) !important; color: var(--ink-2); font-size: var(--step--1); }
.nte { background: var(--roll); padding: var(--s3); margin: var(--s4) 0 0; }
.nte__head { font-size: 0.875rem; font-stretch: var(--data-stretch); font-weight: var(--data-weight); text-transform: uppercase; letter-spacing: var(--data-tracking); margin: 0 0 var(--s2); line-height: 1.3; }
.nte h3 { font-size: 1.125rem; margin: var(--s3) 0 var(--s0); }
.nte .record { border-top-color: var(--ink); }
@media (min-width: 1024px) { .nte { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); column-gap: var(--s4); } .nte > * { grid-column: 2; } .nte > .nte__head { grid-column: 1; } }
.list { padding-left: 1.25rem; }
.list--plain { list-style: none; padding: 0; }
.list li + li { margin-top: var(--s0); }
.lede { font-size: var(--step-1); }
.empty { padding: var(--s3) 0; }
.empty__title { font-weight: 700; }


.foot { margin-top: var(--s5); border-top: var(--rule); background: var(--paper); }
.foot__inner { max-width: var(--frame); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s5); display: grid; gap: var(--s1); }
.foot__id { display: inline-flex; align-items: center; gap: var(--s0); text-decoration: none; font-stretch: 75%; font-weight: 800; font-size: 1.0625rem; }
.foot__title { margin: 0; color: var(--ink-2); font-size: var(--step--1); max-width: var(--measure); }
.foot__pub { margin: 0; }
.foot__links { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s0) var(--s3); font-size: 0.875rem; }
.foot__links a { display: inline-block; padding: 0.25rem 0; }

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}
@media (min-width: 1440px) {
  :root { --gutter: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


.slip { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s2); align-items: start; margin: var(--s4) 0 0; padding: var(--s3) 0 0; border-top: var(--rule); }
.slip figure { margin: 0; }
.slip img { width: 72px; height: auto; }
.slip__title { font-stretch: var(--display-stretch); font-weight: 800; font-size: 1.25rem; line-height: 1.1; margin: 0 0 var(--s0); max-width: var(--measure); }
.slip .byline { font-size: var(--step--1); margin: 0; }
.slip .actions { margin-top: var(--s1); }
@media (min-width: 1024px) {
  .slip { grid-template-columns: minmax(0, 2fr) 96px minmax(0, 9fr); column-gap: var(--s4); }
  .slip figure { grid-column: 2; }
  .slip img { width: 96px; }
  .slip__text { grid-column: 3; }
}


.page-head { padding: var(--s4) 0 var(--s2); }
.page-head h1 { font-size: var(--step-4); max-width: 22ch; }
.page-head .intro, .page-head .lede { margin-top: var(--s2); max-width: var(--measure); }
@media (min-width: 1024px) {
  .page-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); column-gap: var(--s4); }
  .page-head > * { grid-column: 2 / span 2; }
  .page-head h1 { font-size: clamp(2.25rem, 1.2rem + 2.2vw, 3.25rem); }
}
.page-head__lede { font-size: var(--step-1); line-height: 1.45; margin: var(--s2) 0 0; max-width: var(--measure); }
.page-head .actions { margin-top: var(--s2); }
.portrait--lead { margin: var(--s2) 0 0; }
.portrait--lead img { width: 140px; height: auto; }


.take__body > h1 + * { margin-top: var(--s2); }
.stance { margin: var(--s3) 0 0; max-width: var(--measure); font-stretch: var(--display-stretch); font-weight: 800; font-size: 1.375rem; line-height: 1.2; }
.stance q { quotes: "\201C" "\201D"; }
.stance__src { display: block; margin-top: var(--s0); font-stretch: var(--text-stretch); font-weight: var(--text-weight); font-size: var(--step--1); color: var(--ink-2); }
.wire-slip { font-size: var(--step--1); }
.wire-slip__head { font-stretch: var(--data-stretch); font-weight: var(--data-weight); text-transform: uppercase; letter-spacing: var(--data-tracking); font-size: 0.75rem; color: var(--ink-2); margin: 0 0 var(--s0); }
.wire-slip ul { list-style: none; padding: 0; margin: 0 0 var(--s2); }
.wire-slip li + li { margin-top: var(--s0); }
.wire-slip p { margin: 0 0 var(--s1); }
.take__aside .portrait img, .take__aside figure img { max-width: 220px; }
.take__aside figure { margin: 0 0 var(--s1); }


@media (max-width: 1023px) {
  .wire-slip--cover, .take__aside:has(> .wire-slip--cover:only-child) { display: none; }
}


@media (max-width: 1023px) { .take__mark--desk { display: none; } }
@media (min-width: 1024px) { .take__mark--one { display: none; } }


.page-head__more { margin-top: var(--s1); } 
.page-head__more > :first-child { margin-top: 0; }
