:root {
  --paper: #e9e2d3;
  --ink: #1e1b16;
  --muted: #554f45;
  --accent: #7a3418;
  --media: #14120f;
  --backing: #2b2823;
  --card: #f2ede3;
  --line: rgba(30, 27, 22, 0.24);
  --wire: rgba(30, 27, 22, 0.5);
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --gut: 1rem;
  --gap: 1.5rem;
  --spine: 68rem;
  --measure: 40rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--serif);
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); border: 2px solid var(--ink); padding: 0.5rem 0.75rem; z-index: 2; }

/* Type: display, chapter numeral, heading, lede, body, caption */
h1, h2, h3 { font-weight: 700; margin: 0; }
h1 {
  font-size: clamp(2.25rem, 5.6vw, 4.25rem); line-height: 1.06; letter-spacing: -0.012em;
  max-width: 17ch; margin: 0 0 1.5rem;
}
h2 { font-size: clamp(1.75rem, 3.4vw, 2.625rem); line-height: 1.12; letter-spacing: -0.008em; }
h3 { font-size: 1.25rem; line-height: 1.3; }
.lede, .why p, .direction-text { font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.5; }
figcaption, .note, .direction-src, .sub-note { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
figcaption strong, .note strong { color: var(--ink); font-weight: 700; }
.kicker {
  margin: 0 0 1.25rem; font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.num {
  margin: 0 0 0.5rem; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; font-weight: 700;
  color: var(--accent); font-variant-numeric: lining-nums tabular-nums;
}
.sound { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* One spine: every block starts on the same gutter; text keeps a reading measure */
.nav-inner, main, .credit {
  max-width: calc(var(--spine) + 2 * var(--gut)); margin: 0 auto;
  padding-left: var(--gut); padding-right: var(--gut);
}
.nav-inner {
  padding-top: 1.1rem; padding-bottom: 1.1rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.9375rem;
}
.nav a { text-decoration: none; }
.nav a:first-child { font-weight: 700; }
.nav a:hover { text-decoration: underline; }

.intro { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.lede, .note, .head > *, figcaption, .sub-note { max-width: var(--measure); }
.lede { margin: 0; }
.lede + .lede { margin-top: 1rem; }
.note { margin: 1rem 0 0; }

/* Chapters: a full-width rule, numeral, title, then media on the same edge */
.chapter { margin-top: clamp(4.5rem, 9vw, 7.5rem); }
.why { margin-top: clamp(2.75rem, 6vw, 5rem); }
.why .head > div > p { margin: 0.75rem 0 0; }
.chapter > * + * { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.head { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.head > p:not(.num) { margin: 0.75rem 0 0; }
.head > .direction { margin-top: 1.25rem; }

.sub > * { margin: 0; }
.sub > * + * { margin-top: 1rem; }
.sub h3 { border-top: 1px solid var(--line); padding-top: 0.75rem; }

/* Media: equal frames in a row share size and top edge */
figure { margin: 0; }
figcaption { margin-top: 0.65rem; }
.row { display: grid; gap: 2rem var(--gap); align-items: start; }
.frame { background: var(--media); aspect-ratio: 16 / 9; }
.frame video { width: 100%; height: 100%; object-fit: contain; background: var(--media); }
.still { aspect-ratio: 4 / 5; background: var(--media); }
.still img { width: 100%; height: 100%; object-fit: contain; }
.still--ref { background: var(--backing); padding: 1rem; }
.still--wide { aspect-ratio: 16 / 9; }
/* Native plates: the full image at its own proportions, no backing or crop */
.plate { width: 100%; height: auto; }
.watch { color: var(--ink); white-space: nowrap; }
.fallback { display: block; margin-top: 0.35rem; color: var(--ink); }

.direction { padding-left: 1rem; border-left: 2px solid var(--accent); }
.direction-src { margin: 0 0 0.35rem; }
.direction-text { margin: 0; font-style: italic; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0; }
.button {
  display: inline-block; padding: 0.75rem 1.15rem; border: 2px solid var(--ink);
  font: 700 1rem/1.4 var(--serif); text-decoration: none;
  background: none; color: var(--ink); cursor: pointer; text-align: left;
}
.button:hover { background: var(--ink); color: var(--paper); }

/* Organisation chart: tiers read top to bottom; every connector is decorative */
.org {
  --link: 2.5rem; --stub: 1.5rem; --tgap: 2.5rem;
  max-width: 56rem; margin-left: auto; margin-right: auto;
}
.org-chain, .teams, .subs { list-style: none; margin: 0; padding: 0; }
.org-chain { font-size: 1rem; line-height: 1.4; text-align: center; }
.node { position: relative; margin: 0 auto; padding: 0.7rem 0.9rem; background: var(--card); border: 1px solid var(--line); }
.node strong, .group-head strong { display: block; font-weight: 700; }
.node span, .group-head span { display: block; font-size: 0.875rem; color: var(--muted); }
.node--role { width: min(20rem, 100% - 6rem); }
.node--aaron { border: 2px solid var(--ink); }

.link { display: block; width: 1rem; height: var(--link); margin: 0 auto; overflow: visible; }
.link path, .lat path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.link path { stroke: var(--ink); }

.group { border: 1px solid var(--line); padding: 1rem; }
.group-head { margin: 0 0 1.25rem; }
.teams { display: grid; gap: var(--tgap); }
.team { width: 100%; max-width: 20rem; margin: 0 auto; }

/* Lead to sub-workers: a stem, then a bracket over the two columns */
.subs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; padding-top: 1rem; }
.subs::before, .subs::after { content: ""; position: absolute; border: 0 solid var(--wire); }
.subs::after { top: 0; left: 50%; height: 0.5rem; border-left-width: 1px; }
.subs::before { top: 0.5rem; height: 0.5rem; left: calc(25% - 0.125rem); right: calc(25% - 0.125rem); border-width: 1px 1px 0; }
.subs li { padding: 0.35rem 0.25rem; font-size: 0.875rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); }

/* Lateral coordination between leads: dashed, double-headed */
.lat {
  position: absolute; width: var(--tgap); height: 0.75rem; overflow: visible;
  left: calc(50% - var(--tgap) / 2); top: calc(var(--tgap) / -2 - 0.375rem); transform: rotate(90deg);
}
.lat path { stroke: var(--muted); }
.lat-line { stroke-dasharray: 3 3; }

/* Return path: from the manager, up past the assistant manager, into the teams */
.node--asst::before, .node--asst::after, .node--mgr::after { content: ""; position: absolute; }
.node--asst::after {
  left: calc(100% + var(--stub)); top: calc(-1 * var(--link) - 1px); bottom: -1px;
  border-left: 2px dashed var(--accent); transform-origin: bottom;
}
.node--asst::before {
  left: calc(100% + var(--stub) + 1px - 0.375rem); top: calc(-1 * var(--link) - 1px);
  border-style: solid; border-color: transparent transparent var(--accent); border-width: 0 0.375rem 0.5rem;
}
.node--mgr::after {
  left: 100%; width: calc(var(--stub) + 2px);
  top: calc(-1 * var(--link) - 1px); height: calc(var(--link) + 1px + 50%);
  border-right: 2px dashed var(--accent); border-bottom: 2px dashed var(--accent);
}

.path-note { margin: 1rem auto 0; max-width: 30rem; font-size: 0.9375rem; color: var(--muted); }
.key { display: inline-block; width: 1.75rem; margin-right: 0.5rem; vertical-align: middle; border-top: 2px dashed var(--muted); }
.key--return { border-top-color: var(--accent); }
.org figcaption { margin: 1.5rem auto 0; text-align: center; }

/* One pass of arrow motion when the chart first appears; done in under 4 seconds */
.org-chain > li:nth-child(3) { --d: 1.1s; }
.org-chain > li:nth-child(4) { --d: 1.6s; }
.org-chain > li:nth-child(5) { --d: 2.1s; }
@keyframes org-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes org-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes org-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: no-preference) {
  .org.is-armed .link-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .org.is-armed .link-head, .org.is-armed .lat,
  .org.is-armed .node--mgr::after, .org.is-armed .node--asst::before { opacity: 0; }
  .org.is-armed .node--asst::after { transform: scaleY(0); }
  .org.is-live .link-line { animation: org-draw 0.6s ease-out var(--d, 0s) both; }
  .org.is-live .link-head { animation: org-show 0.25s ease-out calc(var(--d, 0s) + 0.45s) both; }
  .org.is-live .lat { animation: org-show 0.6s ease-out 0.7s both; }
  .org.is-live .node--mgr::after { animation: org-show 0.4s ease-out 2.6s both; }
  .org.is-live .node--asst::after { animation: org-rise 0.6s ease-out 2.9s both; }
  .org.is-live .node--asst::before { animation: org-show 0.25s ease-out 3.4s both; }
}

.credit { margin-top: clamp(4.5rem, 9vw, 7.5rem); padding-top: 0; padding-bottom: 3rem; font-size: 0.875rem; color: var(--muted); }
.credit p { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }

@media (min-width: 30rem) { :root { --gut: 1.5rem; } }
@media (min-width: 40rem) {
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why figure { grid-column: 1; grid-row: 1; }
  /* Columns in the ratio 555/525 : 1280/720 (333 : 560) give both plates one height */
  .pair--native { grid-template-columns: minmax(0, 333fr) minmax(0, 560fr); }
}
@media (min-width: 48rem) {
  :root { --gut: 2.5rem; --gap: 2rem; }
  .org { --stub: 2rem; --tgap: 3rem; }
  .group { padding: 1.25rem 1.5rem 1.5rem; }
  .teams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team { max-width: none; }
  .lat { left: calc(-1 * var(--tgap)); top: calc(50% - 0.375rem); transform: none; }
}
@media (min-width: 56rem) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.hero-origin { margin: 0; max-width: 32rem; }