/* Orrery v4.
   Layout: full-bleed bands that alternate white paper and black sky. The hero splits the screen in two:
   paper on the left with the wordmark, the instrument on black at the right. Content sits on a 5/7 grid.
   Type: one family, Archivo, at three widths. 125 to display, 112 to label, 100 to read.
   v4 adds depth and motion on the same construction (the last section of this file): light across every band,
   objects with weight, drawings that move, and headlines, rules and rows that arrive as they scroll into view.
   All of it stops for prefers-reduced-motion, and nothing is hidden when scripts are off. */

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

:root {
  --paper: #FFFFFF;
  --ink: #000000;
  --steel: #5B5F65;         /* secondary text on paper */
  --steel-l: #A5A9AF;       /* secondary text on black */
  --rule: #DCDEE1;          /* hairline on paper */
  --rule-strong: #B4B8BD;
  --rule-d: #2A2D31;        /* hairline on black */
  --rule-d-strong: #4D5157;
  --tick: #6A6E74;          /* instrument ticks */
  --tick-dim: #202226;      /* instrument orbits */
  --sky-fg: #FFFFFF;
  --f: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  --gl-wide: max(16px, env(safe-area-inset-left, 0px), 4vw);
  --gr-wide: max(16px, env(safe-area-inset-right, 0px), 4vw);
  /* band-local tokens, flipped by .dark and .light */
  --bg: var(--paper);
  --fg: var(--ink);
  --mute: var(--steel);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  color-scheme: light;
}
.dark, .endcap { --bg: var(--ink); --fg: var(--paper); --mute: var(--steel-l); --line: var(--rule-d); --line-strong: var(--rule-d-strong); }
.light { --bg: var(--paper); --fg: var(--ink); --mute: var(--steel); --line: var(--rule); --line-strong: var(--rule-strong); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--f); font-size: 17px; line-height: 1.6; font-weight: 400; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.band, .dark, .light, .hero-l, .phero-l { background: var(--bg); color: var(--fg); }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.2vw, 80px); font-stretch: 125%; line-height: 1; letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 3.1vw, 44px); font-stretch: 125%; line-height: 1.1; letter-spacing: -0.005em; }
h3 { font-size: 18px; font-stretch: 112%; font-weight: 600; line-height: 1.3; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
.lead { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.mute { color: var(--mute); }
.sel { user-select: all; font-weight: 500; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 200; background: var(--paper); color: var(--ink); padding: 10px 14px; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 1px solid var(--fg); background: transparent; color: var(--fg);
  font-family: var(--f); font-size: 12.5px; line-height: 1.2; font-weight: 500; font-stretch: 125%;
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn.solid { background: var(--fg); color: var(--bg); }
.btn.solid:hover { background: transparent; color: var(--fg); }
.btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: transparent; color: var(--fg); }
.btn.solid[aria-disabled="true"]:hover { background: var(--fg); color: var(--bg); }
.link { font-size: 15px; text-underline-offset: 4px; }

/* ---------- header ---------- */
.hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px;
  padding-left: var(--gl-wide); padding-right: var(--gr-wide); border-bottom: 1px solid var(--rule); background: var(--paper);
}
.home .hdr { position: absolute; top: 0; left: 0; right: 0; z-index: 10; border-bottom: 0; background: transparent; }
.home .hdr .brand { visibility: hidden; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }
.mark { width: 22px; height: 22px; flex: none; }
.nav { display: flex; gap: clamp(18px, 2vw, 32px); }
.nav a { font-size: 12px; font-weight: 500; font-stretch: 125%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding-block: 8px; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.home .nav a { color: var(--sky-fg); }
.menu-btn, .menu-close {
  appearance: none; background: none; border: 1px solid currentColor; color: var(--ink); cursor: pointer;
  font-family: var(--f); font-size: 12px; line-height: 1; font-weight: 500; font-stretch: 125%; letter-spacing: 0.1em; text-transform: uppercase;
  min-height: 44px; padding: 0 16px;
}
.menu-btn { display: none; }
.home .menu-btn { color: var(--sky-fg); }
.menu {
  position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--paper); overflow-y: auto;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  padding-left: var(--gl-wide); padding-right: var(--gr-wide);
}
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.menu .brand, .menu-close { color: var(--paper); }
.menu nav { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid var(--rule-d); }
.menu nav a { font-size: clamp(26px, 7vw, 40px); font-weight: 500; font-stretch: 125%; color: var(--paper); text-decoration: none; padding-block: 14px; border-bottom: 1px solid var(--rule-d); }
body.menu-open { overflow: hidden; }

/* ---------- home hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-l {
  container-type: inline-size; display: flex; flex-direction: column; justify-content: center; gap: 32px;
  padding-block: 128px 72px; padding-left: var(--gl-wide); padding-right: clamp(16px, 4vw, 72px);
}
.wm { font-size: clamp(52px, 17.3cqi, 168px); font-weight: 500; font-stretch: 125%; letter-spacing: 0.02em; line-height: .86; text-transform: uppercase; margin-left: -0.045em; }
.hero-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 34ch; }
.hero-r {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding-block: 112px 44px; padding-left: clamp(16px, 4vw, 64px); padding-right: var(--gr-wide);
}
.dial { width: min(600px, 100%); height: auto; display: block; }
.dial .o { fill: none; stroke: var(--tick-dim); }
.dial .t { fill: none; stroke: var(--tick); }
.dial .s, .dial .m circle { fill: var(--sky-fg); }
.dial .m line { stroke: var(--sky-fg); }
.readout { width: min(600px, 100%); display: grid; gap: 6px; font-size: 13.5px; line-height: 1.55; color: var(--mute); }

/* ---------- bands and grids ---------- */
.band { padding-block: clamp(72px, 9vw, 136px); padding-left: var(--gl); padding-right: var(--gr); }
.rule-top { border-top: 1px solid var(--line); }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: clamp(0px, 3vw, 40px); }
.sec-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.flow { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.flow > .actions { margin-top: 6px; }
.sec-h { margin-bottom: 48px; }
.fine { font-size: 13.5px; line-height: 1.55; color: var(--mute); max-width: 80ch; }
.wrap > .fine { margin-top: 48px; }
.soon { margin-top: 36px; font-size: 14px; color: var(--mute); }

/* what Orrery is */
.tiers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: 16px; }
.tier { display: flex; flex-direction: column; gap: 18px; border-top: 2px solid var(--fg); padding-top: 18px; }
.tier .actions { margin-top: auto; padding-top: 6px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.list li { position: relative; padding-left: 20px; line-height: 1.5; }
.list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--fg); }

/* six rings */
.rings { list-style: none; margin: 64px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rings li { display: grid; grid-template-columns: 52px minmax(0, 2.1fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; padding-block: 26px; border-bottom: 1px solid var(--line); }
.rings h3 { font-size: clamp(22px, 2vw, 28px); font-stretch: 125%; font-weight: 500; }
.rings .src { font-size: 14px; color: var(--mute); }
.glyph { width: 52px; height: 52px; display: block; }
.glyph circle { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.glyph .on { stroke: var(--fg); stroke-width: 1.8; }
.glyph .c { fill: var(--fg); stroke: none; }

/* standards */
.std { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px clamp(24px, 4vw, 64px); }
.std > div, .cols3 > div, .rule, .offer { border-top: 2px solid var(--fg); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.std h3, .cols3 h3, .offer h3, .rule h3 { font-size: 22px; font-stretch: 125%; font-weight: 500; }
.std p, .cols3 p, .rule p { color: var(--mute); }

/* definition rows */
.parts { display: grid; border-top: 1px solid var(--line); }
.parts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.parts dt { font-weight: 600; font-stretch: 112%; }
.parts dd { color: var(--mute); }

/* the sample sheet */
.sheet { background: var(--bg); color: var(--fg); padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; line-height: 1.55; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 2px solid var(--fg); font-size: 12px; font-weight: 500; font-stretch: 125%; letter-spacing: 0.08em; text-transform: uppercase; }
.brand-sm { display: inline-flex; align-items: center; gap: 8px; }
.brand-sm .mark { width: 16px; height: 16px; }
.sect { font-size: 13px; font-weight: 600; font-stretch: 112%; color: var(--mute); }
.sheet .sect { margin-top: 14px; }
.sheet h3 { font-size: 20px; line-height: 1.25; }
.srcline { font-size: 13px; color: var(--mute); }
.minicalls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.minicalls span { display: flex; flex-direction: column; padding-block: 10px; font-size: 12px; color: var(--mute); }
.minicalls b { font-size: 18px; color: var(--fg); font-weight: 600; font-stretch: 112%; font-variant-numeric: tabular-nums; }

/* ledger boards */
.boards { display: grid; gap: 64px; }
.board { border-top: 2px solid var(--fg); }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.board-head span { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; text-align: right; }
.board table, .score-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board th, .score-t th { font-size: 13px; font-weight: 500; color: var(--mute); text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); }
.board td, .score-t td { padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.board th:last-child, .board td:last-child { text-align: right; }
.num { font-weight: 600; font-stretch: 112%; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; font-size: 12px; font-weight: 500; line-height: 1; padding: 6px 9px; border: 1px solid var(--line-strong); color: var(--fg); white-space: nowrap; }
.chip.hit { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip.close { border-style: dashed; border-color: var(--fg); }
.chip.miss { text-decoration: line-through; color: var(--mute); }
.board-note { font-size: 13.5px; color: var(--mute); padding-top: 12px; }
.claims .claim { padding-right: 20px; font-size: 15px; color: var(--mute); }
.claims .claim b { display: block; margin-bottom: 4px; color: var(--fg); font-weight: 600; }
.claims .due { padding-right: 16px; font-size: 14px; white-space: nowrap; }
.open-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.open-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.open-list b { font-weight: 600; }
.open-list span:not(.chip) { grid-column: 1; font-size: 14px; color: var(--mute); }
.open-list .chip { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* league */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); margin-top: 64px; }
.league-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.league-foot > div:first-child { display: grid; gap: 10px; max-width: 64ch; }
.league-foot p { color: var(--mute); }
.score-t caption { text-align: left; font-size: 14px; color: var(--mute); padding-bottom: 12px; }
.score-t th:not(:first-child), .score-t td:not(:first-child) { text-align: right; }
.score-t td { font-size: 20px; font-stretch: 112%; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); grid-row: 1 / span 2; font-size: 28px; font-weight: 500; font-stretch: 125%; line-height: 1.05; font-variant-numeric: tabular-nums; }
.steps h3, .steps p { grid-column: 2; }
.steps p { color: var(--mute); }

/* membership */
.pt-wrap { margin-top: 56px; }
.pt { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pt thead th { vertical-align: bottom; text-align: left; font-weight: 400; padding: 0 20px 24px; border-bottom: 2px solid var(--fg); }
.pt thead th:first-child { width: 34%; padding-left: 0; }
.pt .pn { display: block; font-size: 20px; font-weight: 500; font-stretch: 125%; }
.pt .pp { display: block; margin-top: 10px; font-size: clamp(34px, 3.3vw, 48px); font-weight: 500; font-stretch: 125%; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pt .per { display: block; margin: 6px 0 14px; font-size: 13.5px; color: var(--mute); }
.fd { display: block; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.fd b { color: var(--fg); font-weight: 600; }
.pt .fd { margin-bottom: 18px; min-height: 2.9em; }
.pt .btn { width: 100%; padding-inline: 12px; }
.pt tbody th { text-align: left; font-weight: 400; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); }
.pt tbody th b { display: block; font-weight: 600; }
.pt tbody th span { display: block; font-size: 14px; color: var(--mute); }
.pt td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.yes { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--fg); }
.no { display: inline-block; width: 14px; height: 1px; background: var(--line-strong); vertical-align: middle; }
.pm { display: none; }
.pm-plan { display: flex; flex-direction: column; gap: 12px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.pm-plan h3 { font-size: 22px; font-stretch: 125%; font-weight: 500; }
.pm-plan .pp { font-size: 40px; font-weight: 500; font-stretch: 125%; line-height: 1; font-variant-numeric: tabular-nums; }
.pm-plan .pp span { font-size: 14px; font-weight: 400; font-stretch: 100%; color: var(--mute); }
.pm-note { font-size: 15px; color: var(--mute); }
.pm-all { font-size: 14px; font-weight: 600; margin-top: 6px; }
.pm-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pm-plan li { position: relative; padding-left: 20px; }
.pm-plan li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--fg); }
.pm-plan li b { display: block; font-weight: 600; }
.pm-plan li span { display: block; font-size: 14px; color: var(--mute); }
.offers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: 72px; }
.offer .actions { margin-top: auto; padding-top: 8px; }

/* questions */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: 20px; font-size: 18px; font-weight: 500; font-stretch: 112%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq .ans { padding: 0 48px 22px 0; color: var(--mute); max-width: 68ch; }

/* inner page hero */
.phero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.phero-l { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding-block: clamp(56px, 8vw, 128px); padding-left: var(--gl-wide); padding-right: clamp(16px, 4vw, 72px); }
.phero-r { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding-block: clamp(40px, 6vw, 88px); padding-left: clamp(16px, 4vw, 64px); padding-right: var(--gr-wide); }
.phero-r .btn { align-self: flex-start; }
.big { font-size: clamp(56px, 7.2vw, 112px); font-weight: 500; font-stretch: 125%; line-height: .92; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.big.s { font-size: clamp(44px, 5vw, 80px); }
.big-sub { font-size: 18px; font-weight: 600; font-stretch: 112%; }
.facts { margin-top: 12px; display: grid; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts dt { color: var(--mute); }
.stepdown h2 { font-size: clamp(24px, 2.4vw, 32px); }
.dive-when { font-size: 14px; color: var(--mute); }
.dive-title { font-size: clamp(24px, 2.4vw, 32px); font-stretch: 125%; font-weight: 500; }

/* rules */
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 48px); margin-top: 64px; }
.grades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* sample issue */
.issue { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(28px, 5vw, 96px); }
.issue > * { grid-column: 2; }
.issue-toc { grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: 24px; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.issue-toc li { display: grid; gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.issue-toc a { text-decoration: none; font-weight: 500; line-height: 1.35; }
.issue-toc a:hover { text-decoration: underline; }
.item { display: flex; flex-direction: column; gap: 16px; max-width: 68ch; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.item h2 { font-size: clamp(26px, 2.5vw, 36px); }
.note { border-left: 2px solid var(--fg); padding-left: 18px; display: grid; gap: 6px; }
.srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.srcs a { color: var(--mute); }
.dots { display: grid; gap: 4px; padding-top: 28px; }
.dot-row, .dot-axis { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; }
.dot-row { height: 44px; }
.nm { font-size: 14px; }
.dot-track { position: relative; height: 1px; background: var(--line-strong); }
.dot-track i { position: absolute; top: -6px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--fg); }
.dot-track em { position: absolute; top: -27px; transform: translateX(-50%); font-style: normal; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.dot-track .ext { position: absolute; top: -1px; height: 0; border-top: 2px dashed var(--fg); }
.dot-axis > div { position: relative; height: 26px; border-top: 1px solid var(--line); }
.dot-axis > div span { position: absolute; top: 6px; transform: translateX(-50%); font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.endcap { background: var(--bg); color: var(--fg); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3vw, 40px); }
.endcap h2 { font-size: clamp(24px, 2.4vw, 32px); }
.endcap p { color: var(--mute); }
.issue > .fine { margin-top: 24px; }

/* legal */
.legal { max-width: 72ch; display: flex; flex-direction: column; gap: 16px; }
.legal h2 { font-size: 24px; margin-top: 28px; scroll-margin-top: 24px; }
.legal h3 { font-size: 17px; margin-top: 6px; }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.legal .toc { list-style: none; padding: 0 0 24px; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px 22px; border-bottom: 1px solid var(--line); font-size: 14px; }

/* deep dive confirmation states */
.dt .st { display: none; }
.dt[data-state="ok"] .st-ok, .dt[data-state="manual"] .st-manual,
.dt[data-state="missing"] .st-bad, .dt[data-state="unpaid"] .st-bad, .dt[data-state="error"] .st-err { display: block; }
.dt[data-dive="0"] .if-dive, .dt[data-dive="1"] .if-nodive, .dt[data-credit="0"] .if-credit, .dt[data-credit="1"] .if-nocredit { display: none; }
.dt .st-ok > * + * { margin-top: 18px; }
.code { font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; font-stretch: 125%; letter-spacing: 0.06em; line-height: 1.1; user-select: all; overflow-wrap: anywhere; }

/* footer */
.ftr { padding-block: clamp(64px, 8vw, 112px) max(32px, env(safe-area-inset-bottom, 0px)); padding-left: var(--gl); padding-right: var(--gr); background: var(--bg); color: var(--fg); }
.ftr-wm { font-size: clamp(64px, 14vw, 216px); font-weight: 500; font-stretch: 125%; line-height: .84; letter-spacing: 0.01em; text-transform: uppercase; margin-left: -0.05em; }
.ftr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.ftr h2 { font-size: 13px; font-weight: 600; font-stretch: 112%; color: var(--mute); margin-bottom: 14px; letter-spacing: 0; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a { text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr-mail { color: var(--mute); user-select: all; overflow-wrap: anywhere; }
.ftr-disc { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 12px; max-width: 110ch; }
.ftr-disc p { font-size: 13px; line-height: 1.6; color: var(--mute); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}
@media (max-width: 980px) {
  .hero, .phero { grid-template-columns: minmax(0, 1fr); }
  .home .menu-btn { color: var(--ink); }
  .hero-l { padding-block: 104px 56px; padding-right: var(--gr-wide); }
  .hero-r { padding-block: 48px 40px; padding-left: var(--gl-wide); }
  .phero-l { padding-right: var(--gr-wide); }
  .phero-r { padding-left: var(--gl-wide); justify-content: flex-start; }
  .sec-grid, .split, .issue { grid-template-columns: minmax(0, 1fr); }
  .issue-toc { position: static; grid-row: auto; margin-bottom: 40px; }
  .issue > *, .issue-toc { grid-column: 1; }
  .cols3, .rules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rings li { grid-template-columns: 52px minmax(0, 1fr); row-gap: 8px; align-items: start; }
  .rings li .glyph { grid-row: 1 / span 3; }
  .rings li > :not(.glyph) { grid-column: 2; }
}
@media (max-width: 860px) {
  .pt-wrap { display: none; }
  .pm { display: grid; margin-top: 32px; border-top: 2px solid var(--fg); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .tiers, .std, .cols3, .rules, .offers, .ftr-cols, .league-foot { grid-template-columns: minmax(0, 1fr); }
  .parts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .minicalls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dot-row, .dot-axis { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .claims .due { white-space: normal; }
  .faq .ans { padding-right: 0; }
}

/* ---------- v4: depth and motion ---------- */
:root { --ease: cubic-bezier(.2, .7, .2, 1); --tile: 1200px; }

/* Light. One window-light pattern lies over the whole page (site.js lines each band up with it), so the light runs
   straight across the seams. Paper takes the shade between the windows. Black takes the light itself. */
.band, .hero-l, .hero-r, .phero-l, .phero-r, .ftr { position: relative; isolation: isolate; }
.band::before, .hero-l::before, .hero-r::before, .phero-l::before, .phero-r::before, .ftr::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #000; opacity: .06;
  -webkit-mask: url(img/shd.webp) var(--x, 0px) var(--y, 0px) / var(--tile) auto repeat; mask: url(img/shd.webp) var(--x, 0px) var(--y, 0px) / var(--tile) auto repeat;
  animation: breathe 9s ease-in-out infinite alternate;
}
.band.dark::before, .hero-r::before, .phero-r.dark::before, .ftr::before {
  background: #fff; opacity: .1;
  -webkit-mask-image: url(img/lit.webp); mask-image: url(img/lit.webp);
}
@keyframes breathe { from { filter: opacity(.72); } to { filter: opacity(1); } }
/* black takes paper's shadow along its top edge */
.band.dark, .ftr { box-shadow: inset 0 26px 30px -26px rgba(255, 255, 255, .13); }
.band:not(.dark) { box-shadow: inset 0 -34px 40px -36px rgba(0, 0, 0, .12); }

/* Weight. Solid things cast two shadows on paper and catch a rim of light on black. */
.band:not(.dark) .btn.solid, .hero-l .btn.solid, .phero-l .btn.solid { box-shadow: 1.5px 3px 2.4px rgba(0, 0, 0, .2), 7px 14px 20px rgba(0, 0, 0, .16); }
.btn { transition: background-color .15s ease, color .15s ease, transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn:not([aria-disabled="true"]):hover { transform: translateY(-2px); }
.btn:not([aria-disabled="true"]):active { transform: translateY(1px); box-shadow: none; }
.band:not(.dark) .board { background: var(--paper); padding: 0 clamp(16px, 2vw, 26px) 18px; box-shadow: -1px -1px .5px rgba(255, 255, 255, .9), 1.5px 3px 2.4px rgba(0, 0, 0, .09), 9px 20px 34px rgba(0, 0, 0, .11); }
.sheet { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 34px 70px -26px rgba(255, 255, 255, .2); }
.endcap { box-shadow: 1.5px 3px 2.4px rgba(0, 0, 0, .16), 9px 20px 34px rgba(0, 0, 0, .16); }
.chip { background: var(--bg); }

/* The instrument. The tick rings drift very slowly, each at its own pace. The markers stay where today puts them. */
.dial .t { transform-origin: 500px 500px; animation: spin 900s linear infinite; }
.dial .t:nth-of-type(2n) { animation-duration: 1300s; animation-direction: reverse; }
.dial .t:nth-of-type(3n) { animation-duration: 1700s; }
.dial .s { transform-origin: 500px 500px; animation: pulse 3.6s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { from { transform: scale(.86); } to { transform: scale(1.22); } }

/* Drawings. The same hand as the Reels: one even line, square ends, flat fills. */
.art { display: block; line-height: 0; }
.art svg { display: block; overflow: visible; max-width: none; }
.a-biology svg { overflow: hidden; }
.rings li { grid-template-columns: 52px minmax(0, 2.1fr) minmax(0, 4fr) minmax(0, 3fr) 150px; }
.rings .art { justify-self: end; }
.rings li { transition: background-color .25s ease; }
.rings li:hover .glyph .on { stroke-width: 2.8; }
.a-bk-c0, .a-bk-c1, .a-bk-c2, .a-bk-c3 { animation: colfill 3.2s steps(1) infinite; }
.a-bk-c1 { animation-delay: .4s; } .a-bk-c2 { animation-delay: .8s; } .a-bk-c3 { animation-delay: 1.2s; }
@keyframes colfill { 0%, 100% { fill: #000; } 30%, 80% { fill: #fff; } }
.a-rk-led { animation: blink 1.7s ease-in-out infinite; }
.a-rk-led1 { animation-delay: .25s; } .a-rk-led2 { animation-delay: .9s; } .a-rk-led3 { animation-delay: .5s; } .a-rk-led4 { animation-delay: 1.2s; } .a-rk-led5 { animation-delay: .7s; }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.a-so-ray { transform-origin: 146px 50px; animation: spin 26s linear infinite; }
.a-hx-run { animation: slide 7s linear infinite; }
@keyframes slide { to { transform: translateX(-100px); } }
.a-st-wl { transform-origin: 132px 75px; } .a-st-wr { transform-origin: 188px 75px; }
.a-orbit svg { animation: bob 6s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-5px) rotate(-2.5deg); } to { transform: translateY(5px) rotate(2deg); } }
.a-sw-r0, .a-sw-r1, .a-sw-r2 { transform-origin: 100px 100px; animation: spin 16s linear infinite; }
.a-sw-r1 { animation-duration: 26s; animation-direction: reverse; } .a-sw-r2 { animation-duration: 40s; }
/* league */
.cols3 .art { height: 96px; display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.a-sd-kn { transition: transform 1.3s var(--ease) .5s; transform: translateX(78px); }
.a-score { font-size: 54px; font-weight: 500; font-stretch: 125%; line-height: 1; font-variant-numeric: tabular-nums; }
.a-score b, .a-score i { display: block; font-style: normal; font-weight: 500; padding: 14px 16px 12px; border: 2px solid var(--fg); }
.a-score b { background: var(--fg); color: var(--bg); }
.a-bd-in, .a-bg-in { transform-origin: 100px 100px; animation: spin 18s linear infinite; }
/* the calls on one line */
.callsline { display: block; width: 100%; height: auto; margin-top: 18px; }
.callsline .cl { fill: none; stroke: var(--fg); stroke-width: 2; }
.callsline .ct { fill: none; stroke: var(--mute); stroke-width: 1.5; }
.callsline .cq { fill: var(--bg); stroke: var(--fg); stroke-width: 2.5; }
.callsline text { font-family: var(--f); font-size: 13px; font-weight: 500; fill: var(--mute); font-variant-numeric: tabular-nums; }

/* Arrivals. Only when scripts are on (pre.js sets html.js before the first paint). */
html.js .rv { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .7s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), filter .8s var(--ease) var(--d, 0s); }
html.js .rv.in { opacity: 1; transform: none; filter: none; }
/* headlines slide up out of a mask */
/* (the mask is on an inner span that site.js adds, because an element that clips itself away is never seen arriving) */
html.js .rv.mk { opacity: 1; filter: none; transform: none; }
html.js .rv.mk > .mki { display: block; transform: translateY(.6em); clip-path: inset(0 -1em 108% -1em); transition: transform .95s var(--ease) var(--d, 0s), clip-path .95s var(--ease) var(--d, 0s); }
html.js .rv.mk.in > .mki { transform: none; clip-path: inset(-.3em -1em -.45em -1em); }
/* objects land: a little big and turned, then settle */
html.js .rv.ld { filter: none; transform: translateY(36px) rotate(-1.5deg) scale(1.035); }
html.js .rv.ld.in { transform: none; }
/* ruled blocks: the rule draws, then the block arrives */
.tier, .std > div, .cols3 > div, .rule, .offer { border-top-color: transparent; background: linear-gradient(var(--fg), var(--fg)) 0 0 / 100% 2px no-repeat; }
html.js .rv.ln { background-size: 0% 2px; transition: opacity .7s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), filter .8s var(--ease) var(--d, 0s), background-size .9s var(--ease) calc(var(--d, 0s) + .15s); }
html.js .rv.ln.in { background-size: 100% 2px; }
/* chips are stamped on after their row lands */
html.js .rv .chip, html.js .rv.chip { opacity: 0; transform: scale(1.4); transition: opacity .25s ease calc(var(--d, 0s) + .45s + var(--i, 0) * .09s), transform .3s var(--ease) calc(var(--d, 0s) + .45s + var(--i, 0) * .09s); }
html.js .rv.in .chip, html.js .rv.in.chip { opacity: 1; transform: none; }
/* drawings wait for their row */
html.js .rv:not(.in) .a-st-wl, html.js .rv:not(.in) .a-st-wr { transform: scaleX(.04); }
html.js .rv .a-st-wl, html.js .rv .a-st-wr { transition: transform 1.1s var(--ease) calc(var(--d, 0s) + .5s); }
html.js .rv:not(.in) .a-sd-kn { transform: translateX(0); }
html.js .rv .cq { opacity: 0; transform: translateY(-16px); transition: opacity .3s ease calc(.5s + var(--i, 0) * .12s), transform .45s var(--ease) calc(.5s + var(--i, 0) * .12s); }
html.js .rv.in .cq { opacity: 1; transform: none; }
html.js .rv .cl { stroke-dasharray: 560; stroke-dashoffset: 560; transition: stroke-dashoffset 1s var(--ease) .2s; }
html.js .rv.in .cl { stroke-dashoffset: 0; }

@media (max-width: 980px) {
  .rings li { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .rings li > p:not(.glyph):not(.art) { grid-column: 2 / 4; }
  .rings li > h3 { align-self: center; }
  .rings li > .art { grid-column: 3; grid-row: 1; align-self: center; }
  .rings .art svg { height: 54px; width: auto; }
  .rings .a-biology svg { width: 104px; height: auto; }
  .rings .a-frontier svg { height: 78px; margin-block: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .rv, html.js .rv.mk > .mki, html.js .rv.ld, html.js .rv .chip, html.js .rv.chip, html.js .rv .cq { opacity: 1; transform: none; filter: none; clip-path: none; }
  html.js .rv.ln { background-size: 100% 2px; }
  html.js .rv .cl { stroke-dashoffset: 0; }
  html.js .rv:not(.in) .a-st-wl, html.js .rv:not(.in) .a-st-wr { transform: none; }
}