@font-face{font-family:'Archivo Black';src:url('fonts/archivo-black-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cabin';src:url('fonts/cabin-latin-wght-normal.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabin';src:url('fonts/cabin-latin-wght-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}

:root {
  /* Flavour colour on plain cloth (dna1) */
  --cloth: #e2e3de;
  --ink: #121312;
  --flavour: #d6ff2e;
  --frame: #23241f;
  --lamp: #c8793f;
  --steel: #8c8f87;
  --ink-soft: #3f413b;
  --paper: #f1f2ee;

  /* Stacked label capitals over a plain humanist text (dna2) */
  --label: 'Archivo Black', 'Arial Black', sans-serif;
  --text: 'Cabin', 'Gill Sans', sans-serif;
  --code: ui-monospace, Consolas, 'Courier New', monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cloth);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--flavour); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* Label type */
.label-type {
  font-family: var(--label);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.02em;
}
.flavour {
  background: var(--flavour);
  color: var(--ink);
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Top bar */
/* The top bar is a strip of tape measure: ticks along its lower edge, the wordmark on the dark end tab. */
.topbar {
  display: flex; align-items: stretch; justify-content: space-between; gap: 24px;
  background-color: var(--flavour);
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 60px);
  background-size: 100% 10px, 100% 22px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 0 var(--gutter) 0 0;
  min-height: 70px;
}
.mark {
  font-family: var(--label); font-size: 24px; text-decoration: none; letter-spacing: -.02em;
  background: var(--ink); color: var(--flavour);
  display: flex; align-items: center; padding: 0 22px 0 var(--gutter);
}
.topbar nav { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; padding-top: 12px; }
.topbar nav a {
  font-weight: 700; font-size: 15px; text-decoration: none;
  background: var(--flavour); padding: 0 4px;
  border-bottom: 2px solid transparent; transition: border-color .25s var(--ease-soft);
}
.topbar nav a:hover, .topbar nav a:focus-visible { border-bottom-color: var(--ink); }

/* Opening */
.opening {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(48px, 6vw, 96px);
}
.kicker { font-weight: 700; font-size: 15px; margin-bottom: 22px; color: var(--ink-soft); }
.opening h1 { font-size: clamp(58px, 10vw, 150px); line-height: .86; }
.opening h1 .line { display: block; white-space: nowrap; }
.opening h1 .line + .line { margin-top: .08em; }
.opening h1 .flavour { display: inline-block; line-height: 1; padding: .02em .08em 0; }
.opening h1 .line-small { font-size: .4em; margin-top: .3em; line-height: .95; }
.lede { font-size: clamp(19px, 1.6vw, 23px); max-width: 36em; margin-top: 30px; }
.lede-2 { font-weight: 700; font-size: 19px; margin-top: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn {
  display: inline-block; padding: 14px 22px; font-weight: 700; font-size: 17px;
  text-decoration: none; border: 3px solid var(--ink); border-radius: 0;
  transition: transform .2s var(--ease-soft), background-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.btn-flavour { background: var(--flavour); box-shadow: 5px 5px 0 var(--ink); }
.actions { align-items: center; }
.aside-link { font-weight: 600; }
.aside-link a { text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: var(--lamp); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

/* Tape measure (dna6) */
.opening-figure { margin: 0; }
#tape-measure { width: 100%; height: auto; display: block; }
#tape-measure .piece { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
#tape-measure .grain { stroke: var(--steel); stroke-width: 2; stroke-dasharray: 10 8; }
#tape-measure .chalk { fill: none; stroke: var(--lamp); stroke-width: 3; stroke-linecap: round; }
#tape-measure .chalk-dot { fill: var(--lamp); }
#tape-measure .tape {
  fill: none; stroke: var(--flavour); stroke-width: 30; stroke-linecap: butt;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: tape-unroll 2.8s var(--ease-soft) .3s forwards;
}
#tape-measure .tape-ticks {
  fill: none; stroke: var(--ink); stroke-width: 12; stroke-dasharray: 2 14;
  opacity: 0; animation: ticks-in .9s ease 2.6s forwards;
}
#tape-measure .tape-tab { fill: var(--ink); }
#tape-measure .tape-case { fill: var(--ink); }
#tape-measure .tape-hub { fill: var(--frame); stroke: var(--steel); stroke-width: 3; }
#tape-measure .tape-pin { fill: var(--flavour); }

@keyframes tape-unroll { to { stroke-dashoffset: 0; } }
@keyframes ticks-in { to { opacity: 1; } }

/* Cold open (dna4, dna5, dna7) */
.cold-open { background: var(--ink); color: var(--paper); padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(56px, 7vw, 104px); }
.frame { background: #000; padding: clamp(18px, 3vw, 44px) 0; }
.picture { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; background: var(--frame); }
#kitchen-table { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 62% 70%; }
.cold-open.is-in #kitchen-table { animation: push-in 14s cubic-bezier(.25,.1,.25,1) both; }
#kitchen-table .wall { fill: var(--frame); }
#kitchen-table .window { fill: #2e302a; stroke: #3a3c35; stroke-width: 6; }
#kitchen-table .mullion { stroke: #3a3c35; stroke-width: 6; }
#kitchen-table .cord { stroke: #0c0d0b; stroke-width: 4; }
#kitchen-table .shade { fill: #0c0d0b; }
#kitchen-table .table { fill: #34352e; }
#kitchen-table .table-edge { fill: #44463d; }
#kitchen-table .notebook { fill: #d9d9d1; }
#kitchen-table .notebook-line { stroke: #9a9b92; stroke-width: 3; }
#kitchen-table .pencil { stroke: var(--lamp); stroke-width: 8; stroke-linecap: round; }
#kitchen-table .envelope { fill: #e9e8e0; }
#kitchen-table .flap { fill: none; stroke: #a8a79c; stroke-width: 3; }
#kitchen-table .seal { fill: var(--flavour); }
#kitchen-table .mug { fill: var(--steel); }
#kitchen-table .mug-handle { fill: none; stroke: var(--steel); stroke-width: 12; }
#kitchen-table .shelf { fill: #2e302a; }
#kitchen-table .jar { fill: #3a3c35; }
.picture::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to bottom, rgba(18,19,18,0), rgba(18,19,18,.82) 55%, rgba(18,19,18,.92));
  pointer-events: none;
}
.subtitles { z-index: 1; }
#kitchen-table .steam { fill: none; stroke: #6d6f66; stroke-width: 4; stroke-linecap: round; opacity: .7; }

.subtitles {
  position: absolute; left: 0; right: 0; bottom: 6%;
  display: grid; justify-items: center; gap: 4px; padding: 0 6%;
  text-align: center;
}
.sub {
  font-family: var(--text); font-weight: 600;
  font-size: clamp(15px, 1.7vw, 26px); line-height: 1.3;
  color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.9);
  max-width: 34em;
}
.js .cold-open .sub { opacity: 0; }
.cold-open.is-in .sub { animation: subtitle-rise 1.8s cubic-bezier(.22,.61,.36,1) both; }
.cold-open.is-in .sub:nth-child(2) { animation-delay: .3s; }
.cold-open.is-in .sub:nth-child(3) { animation-delay: .6s; }

@keyframes subtitle-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes push-in {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}

.title-card { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); text-align: center; }
.title-word { font-size: clamp(64px, 12vw, 200px); color: var(--paper); }
.title-meta { margin-top: 18px; color: var(--steel); font-weight: 600; font-size: 17px; }

.tally { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 64px); border-top: 4px solid var(--paper); padding-top: clamp(28px, 4vw, 48px); }
.big-number { font-size: clamp(72px, 9vw, 150px); margin-bottom: 22px; }
.big-number .of { color: var(--paper); font-size: .5em; }
.tally-big p:last-child { font-size: 19px; max-width: 34em; color: #d4d5cf; }
.tally-big strong { color: var(--paper); }
.bench-title { font-family: var(--label); font-size: 24px; line-height: 1.05; text-transform: uppercase; margin-bottom: 10px; }
.tally-bench > p { color: #d4d5cf; }
.bench-bars { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.bench-bars li { display: grid; grid-template-columns: 7.5em 1fr 3.5em; align-items: center; gap: 12px; font-weight: 700; }
.bench-bar { height: 22px; background: #2d2f29; position: relative; }
.bench-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 10%); background: var(--flavour); transform-origin: left; transition: transform 1.6s var(--ease-soft) .3s; }
.js .cold-open:not(.is-in) .bench-bar::after { transform: scaleX(0); }
.bench-val { text-align: right; font-family: var(--label); }

/* Section heads: documentary chapter cards, one heavy title on a dark band with a small line under it. */
.section-head {
  background: var(--ink); color: var(--paper);
  margin: 0 calc(-1 * var(--gutter)) clamp(32px, 4vw, 56px);
  padding: clamp(28px, 4vw, 52px) var(--gutter) clamp(22px, 3vw, 34px);
  border-left: clamp(14px, 2vw, 28px) solid var(--flavour);
}
.section-head h2 { font-size: clamp(46px, 7vw, 112px); }
.section-intro { font-size: 18px; max-width: 36em; font-weight: 600; margin-top: 16px; color: #c9cac3; }
.training-log, .evidence, .ensemble, .the-try { padding-top: 0 !important; }
.the-try .section-head { background: var(--frame); }

/* Training log (dna8) */
.training-log { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.log { list-style: none; margin: 0; padding: 0; border-top: 4px solid var(--ink); }
.entry {
  display: grid;
  grid-template-columns: 44px 9em minmax(0, 1fr) 15em;
  gap: 24px; align-items: start;
  padding: 26px 0; border-bottom: 2px solid var(--ink);
}
.tick { width: 30px; height: 30px; border: 3px solid var(--ink); position: relative; margin-top: 4px; background: var(--paper); }
.tick::after {
  content: ""; position: absolute; left: 7px; top: 1px; width: 9px; height: 17px;
  border: solid var(--ink); border-width: 0 5px 5px 0; transform: rotate(45deg) scale(1);
  transition: transform .5s var(--ease-soft);
}
.js .entry:not(.is-in) .tick::after { transform: rotate(45deg) scale(0); }
.session { font-weight: 700; color: var(--ink-soft); padding-top: 6px; }
.entry h3 { font-family: var(--label); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 38px); line-height: .95; letter-spacing: -.01em; margin-bottom: 10px; }
.entry-body p { max-width: 38em; }
.note {
  font-style: italic; font-size: 16px; color: var(--ink-soft);
  border-left: 3px solid var(--lamp); padding-left: 14px; padding-top: 4px;
}

/* Evidence facts (dna3) */
.evidence { padding: clamp(64px, 8vw, 120px) var(--gutter); background: var(--paper); border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }
.facts-panel {
  max-width: 920px; margin: 0 auto;
  border: 4px solid var(--ink);
  background: #fff;
  padding: 18px 22px 22px;
}
.facts-head { font-family: var(--label); font-size: clamp(40px, 6vw, 76px); line-height: .9; letter-spacing: -.02em; }
.facts-sub { font-weight: 700; padding: 6px 0 10px; border-bottom: 2px solid var(--ink); }
.bar-thick { height: 14px; background: var(--ink); margin: 6px 0 0; }
.fact {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px;
  padding: 14px 0 16px; border-bottom: 2px solid var(--ink);
}
.fact:last-of-type { border-bottom: 0; }
.fact h3 { font-family: var(--label); font-weight: 400; font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.fact-value { font-family: var(--label); font-size: 22px; text-align: right; white-space: nowrap; }
.fact-value { background: var(--flavour); padding: 0 6px; align-self: start; }
.fact-text { grid-column: 1 / -1; margin-top: 8px; font-size: 17px; }
.fine { grid-column: 1 / -1; margin-top: 8px; font-size: 14px; font-weight: 700; }
.fine::before { content: "* "; }
.facts-foot { font-size: 14px; padding-top: 12px; }

/* Ensemble (dna9) */
.ensemble { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.cast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lower-third { display: grid; align-content: start; }
.name-bar {
  font-family: var(--label); text-transform: uppercase; font-size: clamp(26px, 2.6vw, 38px); line-height: 1;
  background: var(--ink); color: var(--paper); padding: 14px 18px 12px;
  border-left: 14px solid var(--flavour);
}
.role-line { background: var(--paper); padding: 10px 18px; font-weight: 600; border: 2px solid var(--ink); border-top: 0; }
.lower-third pre {
  margin: 14px 0 0; padding: 14px 16px; background: var(--frame); color: var(--paper);
  font-family: var(--code); font-size: 14px; line-height: 1.6; overflow-x: auto; white-space: pre;
}

/* Try */
.the-try { padding: clamp(64px, 8vw, 120px) var(--gutter); background: var(--ink); color: var(--paper); }
.the-try .section-intro { color: #d4d5cf; }
.try-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 4vw, 64px); }
.try-main { background: var(--flavour); color: var(--ink); padding: clamp(22px, 3vw, 40px); }
.try-main h3, .try-side h3 { font-family: var(--label); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1; margin-bottom: 10px; }
.try-side h3 + p { margin-bottom: 28px; color: #d4d5cf; }
.splits { margin: 22px 0; display: grid; gap: 12px; }
.splits div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; border-top: 3px solid var(--ink); padding-top: 10px; }
.splits dt { font-weight: 700; }
.splits dd { margin: 0; }
.small { font-size: 15px; margin-top: 8px; }
.try-main .btn { margin-top: 22px; background: var(--ink); color: var(--flavour); box-shadow: 5px 5px 0 var(--paper); border-color: var(--ink); }
.try-main .btn:hover { box-shadow: 7px 7px 0 var(--paper); }

/* Ingredients */
.the-build { padding: clamp(56px, 7vw, 100px) var(--gutter); }
.ingredients { max-width: 920px; margin: 0 auto; border: 4px solid var(--ink); padding: 18px 22px; background: var(--paper); }
.ingredients-head { font-family: var(--label); font-weight: 400; font-size: 28px; text-transform: uppercase; line-height: 1; margin-bottom: 8px; display: inline; }
.ingredients-head::after { content: ": "; }
.ingredients p { display: inline; font-size: 17px; }

/* About this page */
.this-page { padding: 0 var(--gutter) clamp(64px, 8vw, 110px); max-width: 1100px; }
.this-page h2 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 22px; }
.this-page p + p { margin-top: 12px; }
.this-page p { max-width: 44em; }

/* Footer */
.footer { background: var(--flavour); padding: clamp(36px, 5vw, 64px) var(--gutter); border-top: 4px solid var(--ink); }
.footer-mark { font-size: clamp(72px, 14vw, 220px); }
.footer p + p { margin-top: 10px; font-weight: 600; }

/* Entrances: content is never hidden; rows only settle a few pixels into place. */
.js .entry.is-in, .js .fact.is-in, .js .lower-third.is-in { animation: settle .6s var(--ease-soft) both; }
@keyframes settle { from { transform: translateY(10px); } to { transform: none; } }

/* Responsive */
@media (max-width: 980px) {
  .opening { grid-template-columns: 1fr; }
  .opening-figure { max-width: 420px; }
  .entry { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 16px; }
  .entry .session { grid-column: 2; padding-top: 4px; }
  .entry .entry-body, .entry .note { grid-column: 2; }
  .entry .tick { grid-row: 1; }
  .cast { grid-template-columns: 1fr; }
  .try-grid, .tally { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .topbar nav { display: none; }
  .picture { aspect-ratio: 4 / 5; }
  #kitchen-table { transform-origin: 66% 72%; }
  .subtitles { bottom: 5%; }
  .sub { font-size: 17px; }
  .bench-bars li { grid-template-columns: 6.2em 1fr 3.2em; gap: 8px; }
  .fact { grid-template-columns: 1fr; }
  .fact-value { text-align: left; justify-self: start; margin-top: 6px; white-space: normal; }
  .splits div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #tape-measure .tape { stroke-dashoffset: 0; }
  #tape-measure .tape-ticks { opacity: 1; }
  .js .cold-open .sub { opacity: 1; }
  .js .cold-open:not(.is-in) .bench-bar::after { transform: none; }
  .js .entry:not(.is-in) .tick::after { transform: rotate(45deg); }
}