/* ==============================================================
   PAD THAI PADEL CHAMPIONSHIP — DOCUMENTATION HUB STYLESHEET
   Built on the Pad Thai Padel Championship design system.
   Achromatic by design. Square corners. Flat cards. No emoji.
   Edit this one file to re-style every page in the bundle.
   ============================================================== */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Pinyon+Script&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;1,300;1,400;1,600&display=swap");

/* ---------- tokens/colors.css ---------- */
:root{
  --ink-900:#111111;--ink-800:#1c1c1c;--ink-700:#2a2a2a;--ink-600:#3a3a3a;
  --ink-500:#474747;--ink-400:#6b6b6b;--ink-300:#949494;--ink-200:#c4c4c4;
  --ink-100:#e4e2de;--paper-100:#f4f1ea;--paper-000:#ffffff;
  --bone:#fffdf7;
  --veil-strong:rgba(17,17,17,.72);--veil:rgba(17,17,17,.55);--veil-soft:rgba(17,17,17,.28);

  /* ---------- Semantic layer — DARK (the default surface) ----------
     Only these flip between themes. The base palette above never changes,
     so both themes are drawn from the same achromatic ink ramp. */
  --surface-page:var(--ink-900);--surface-card:var(--ink-800);--surface-raised:var(--ink-700);
  --text-primary:var(--bone);--text-secondary:var(--ink-200);--text-muted:var(--ink-300);
  --rule:rgba(255,253,247,.28);--rule-strong:rgba(255,253,247,.55);
  --accent:var(--bone);--accent-contrast:var(--ink-900);
  --photo-filter:grayscale(1) contrast(1.06);
  --grain-blend:overlay;--grain-opacity:.045;
  --zebra:rgba(255,253,247,.022);

  /* ---------- tokens/typography.css ---------- */
  --font-display:"Playfair Display",Georgia,serif;
  --font-script:"Pinyon Script","Playfair Display",cursive;
  --font-editorial:"Cormorant Garamond",Georgia,serif;
  --font-body:"Poppins","Helvetica Neue",Arial,sans-serif;

  --fs-display-xl:96px;--fs-display-l:64px;--fs-display-m:44px;--fs-display-s:32px;
  --fs-heading-xl:56px;--fs-heading-l:40px;--fs-heading-m:30px;--fs-heading-s:22px;
  --fs-body-l:20px;--fs-body-m:16px;--fs-body-s:14px;--fs-caption:12px;

  --lh-tight:1.02;--lh-snug:1.18;--lh-normal:1.5;--lh-loose:1.7;
  --ls-normal:0;--ls-wide:.08em;--ls-ultra:.24em;
  --fw-thin:200;--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-black:900;

  /* ---------- tokens/spacing.css ---------- */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --margin-poster:10%;--maxw-prose:62ch;--maxw-page:1080px;--maxw-doc:820px;
  --radius-none:0;--radius-pill:999px;
  --border-hair:1px;--border-thick:2px;

  /* ---------- tokens/motion.css ---------- */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --dur-fast:120ms;--dur-base:220ms;--dur-reveal:700ms;
  --hover-opacity:.72;--press-opacity:.55;
  --transition-hover:opacity var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard);

  /* ---------- tokens/elevation.css ---------- */
  /* The house veil: left-weighted, so the copy column sits in the darkest
     part of the frame and the photograph still reads on the right. */
  --veil-gradient-left:linear-gradient(90deg,rgba(17,17,17,.95) 0%,rgba(17,17,17,.88) 38%,rgba(17,17,17,.5) 78%,rgba(17,17,17,.34) 100%);
  --veil-gradient-down:linear-gradient(180deg,rgba(17,17,17,.72) 0%,rgba(17,17,17,.88) 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  /* ---------- Legacy variable bridge ----------------------------------
     The twelve document pages carry inline style="background:var(--s3)"
     and similar on their badges. Those variables are redefined here in
     ink rather than removed, so no document HTML needs editing.
     -------------------------------------------------------------------- */
  --green:var(--ink-900);--green-2:var(--ink-800);--lime:var(--bone);
  --cream:var(--bone);--ink:var(--bone);--muted:var(--ink-300);
  --card:var(--ink-800);--border:var(--rule);
  --s1:var(--ink-600);--s2:var(--ink-600);--s3:var(--ink-600);
}

/* ---------- Semantic layer — LIGHT ----------------------------------
   The printed-page surface the system already defines: paper tint, ink
   type, and the paper hairline. No hue is introduced — every value is
   from the same ramp, just reversed.
   -------------------------------------------------------------------- */
:root[data-theme="light"]{
  --surface-page:var(--paper-100);--surface-card:var(--bone);--surface-raised:#ebe7dd;
  --text-primary:var(--ink-900);--text-secondary:var(--ink-600);--text-muted:var(--ink-500);
  --rule:rgba(17,17,17,.18);--rule-strong:rgba(17,17,17,.42);
  --accent:var(--ink-900);--accent-contrast:var(--bone);
  --photo-filter:grayscale(1) contrast(1.02) brightness(1.06);
  --grain-blend:multiply;--grain-opacity:.06;
  --zebra:rgba(17,17,17,.028);
  /* The veil turns to paper so the photograph sits under light, not ink. */
  --veil-gradient-left:linear-gradient(90deg,rgba(244,241,234,.96) 0%,rgba(244,241,234,.9) 38%,rgba(244,241,234,.58) 78%,rgba(244,241,234,.4) 100%);
  --veil-gradient-down:linear-gradient(180deg,rgba(244,241,234,.74) 0%,rgba(244,241,234,.9) 100%);
  /* Legacy bridge, inverted, so summary.html's inline badge stays readable. */
  --lime:var(--ink-900);--green:var(--bone);--green-2:var(--bone);
  --cream:var(--ink-900);--ink:var(--ink-900);--card:var(--bone);
  --s1:var(--ink-200);--s2:var(--ink-200);--s3:var(--ink-200);
}

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

body{
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
  font:var(--fw-light) var(--fs-body-m)/var(--lh-normal) var(--font-body);
  background:var(--surface-page);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--text-primary);color:var(--surface-page);}

a{color:var(--text-primary);}

/* Film grain over the whole surface — the poster system's signature. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  background-image:var(--grain);opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
}

.wrap{max-width:var(--maxw-page);margin:0 auto;padding:0 var(--space-6) var(--space-10);}

/* ==============================================================
   SHARED PRIMITIVES
   ============================================================== */

.label,.kicker,.type,.tag,.crumb,.eyebrow{
  font-family:var(--font-body);font-weight:var(--fw-medium);
  font-size:var(--fs-caption);line-height:1.2;
  letter-spacing:var(--ls-ultra);text-transform:uppercase;
}

.script{font-family:var(--font-script);letter-spacing:0;text-transform:none;}

hr,.rule{border:0;height:1px;background:var(--rule);margin:var(--space-7) 0;}

/* ==============================================================
   HUB — HERO
   ============================================================== */

header.hub{
  position:relative;overflow:hidden;
  padding:var(--space-10) var(--space-6) var(--space-9);
  border-bottom:var(--border-hair) solid var(--rule);
  isolation:isolate;
}
header.hub::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("assets/hero.jpg") 50% 62% / cover no-repeat;
  filter:var(--photo-filter);
}
header.hub::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--veil-gradient-left);
}
header.hub .inner{max-width:var(--maxw-page);margin:0 auto;}

.wordmark{display:block;width:min(420px,72vw);margin-bottom:var(--space-6);}
/* The supplied wordmark is white artwork on transparency. On the paper
   surface it is inverted to ink rather than re-typeset — the artwork itself
   is never redrawn, which is the system's rule for the wordmark. */
:root[data-theme="light"] .wordmark{filter:invert(1);}

header.hub .kicker{
  display:block;color:var(--text-muted);margin-bottom:var(--space-5);
}
header.hub h1{
  font-family:var(--font-editorial);font-weight:var(--fw-light);
  font-size:clamp(38px,6.2vw,var(--fs-heading-xl));
  line-height:var(--lh-snug);letter-spacing:var(--ls-normal);
  max-width:18ch;margin-bottom:var(--space-4);
}
header.hub h1 em{
  display:block;font-family:var(--font-script);font-style:normal;
  font-size:clamp(34px,5.4vw,52px);line-height:1.25;color:var(--text-primary);
}
header.hub p{
  max-width:56ch;color:var(--text-secondary);
  font-size:var(--fs-body-m);line-height:var(--lh-loose);font-weight:var(--fw-light);
}
.hero-rule{height:1px;background:var(--rule-strong);width:180px;margin:var(--space-6) 0;}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--space-6);
  margin-top:var(--space-6);color:var(--text-muted);
}
.hero-meta span{font-size:var(--fs-body-s);font-weight:var(--fw-light);}
.hero-meta b{
  display:block;font-family:var(--font-editorial);font-weight:var(--fw-regular);
  font-size:var(--fs-heading-s);color:var(--text-primary);letter-spacing:var(--ls-normal);
}

/* ==============================================================
   HUB — SECTIONS
   ============================================================== */

section{margin-top:var(--space-9);}

.section-head{margin-bottom:var(--space-6);}
.section-head .eyebrow{display:block;color:var(--text-muted);margin-bottom:var(--space-3);}
h2,.section-head h2{
  font-family:var(--font-editorial);font-weight:var(--fw-light);
  font-size:clamp(28px,3.4vw,var(--fs-heading-l));
  line-height:var(--lh-snug);letter-spacing:var(--ls-normal);
}
.section-head p{
  margin-top:var(--space-4);max-width:var(--maxw-prose);
  color:var(--text-secondary);line-height:var(--lh-loose);font-weight:var(--fw-light);
}

.overview p{
  max-width:var(--maxw-prose);color:var(--text-secondary);
  line-height:var(--lh-loose);margin-bottom:var(--space-4);font-weight:var(--fw-light);
}
.overview p b,.season-sum b{color:var(--text-primary);font-weight:var(--fw-medium);}

.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-4);margin-top:var(--space-7);
}
.fact{
  background:var(--surface-card);
  border:var(--border-hair) solid var(--rule);
  padding:var(--space-5) var(--space-5) var(--space-6);
}
.fact b{
  display:block;font-family:var(--font-editorial);font-weight:var(--fw-regular);
  font-size:var(--fs-heading-s);line-height:1.25;margin-bottom:var(--space-2);
}
.fact span{
  display:block;font-size:var(--fs-body-s);color:var(--text-muted);
  font-weight:var(--fw-light);line-height:var(--lh-normal);
}

/* ---------- Start here / reading order ---------- */
.start-here{
  border:var(--border-hair) solid var(--rule);
  background:var(--surface-card);padding:var(--space-7);
}
.start-here h2{font-size:var(--fs-heading-m);margin-bottom:var(--space-2);}
.start-here .eyebrow{display:block;color:var(--text-muted);margin-bottom:var(--space-3);}
.start-here > p{color:var(--text-muted);font-size:var(--fs-body-s);margin-bottom:var(--space-6);max-width:var(--maxw-prose);}
.start-here ol{list-style:none;counter-reset:step;}
.start-here li{
  counter-increment:step;position:relative;
  padding:var(--space-4) 0 var(--space-4) var(--space-8);
  border-top:var(--border-hair) solid var(--rule);
  font-weight:var(--fw-light);color:var(--text-secondary);font-size:var(--fs-body-s);
}
.start-here li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:var(--space-4);
  font-family:var(--font-editorial);font-size:var(--fs-heading-s);
  color:var(--text-muted);font-weight:var(--fw-regular);
}
.start-here li a{
  display:block;color:var(--text-primary);text-decoration:none;
  font-family:var(--font-editorial);font-size:var(--fs-heading-s);
  font-weight:var(--fw-regular);line-height:1.3;margin-bottom:2px;
  transition:opacity var(--dur-fast) var(--ease-standard);
}
.start-here li a:hover{opacity:var(--hover-opacity);}

/* ==============================================================
   HUB — SEASONS
   ============================================================== */

.season{margin-top:var(--space-9);}
.season-head{
  display:flex;align-items:baseline;gap:var(--space-5);flex-wrap:wrap;
  padding-bottom:var(--space-4);border-bottom:var(--border-hair) solid var(--rule-strong);
}
.season-head h2{font-size:clamp(30px,4vw,var(--fs-heading-l));}
.season-head .dates{
  margin-left:auto;color:var(--text-muted);
  font-size:var(--fs-body-s);font-weight:var(--fw-light);
}
.season-sum{
  margin:var(--space-5) 0 var(--space-7);max-width:var(--maxw-prose);
  color:var(--text-secondary);line-height:var(--lh-loose);font-weight:var(--fw-light);
}

/* The season badge — square, hairline, tracked. Inline background
   colours on document pages resolve through the legacy bridge above. */
.badge{
  display:inline-block;flex-shrink:0;
  font-family:var(--font-body);font-weight:var(--fw-medium);
  font-size:var(--fs-caption);line-height:1;letter-spacing:var(--ls-ultra);
  text-transform:uppercase;
  padding:8px 12px 7px;border-radius:var(--radius-none);
  border:var(--border-hair) solid var(--rule-strong);
  background:transparent;color:var(--text-primary);
}

/* Season change-log list */
.changes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-4);margin-bottom:var(--space-7);
}
.change{
  background:var(--surface-card);
  border:var(--border-hair) solid var(--rule);
  padding:var(--space-5);
}
.change .type{display:block;color:var(--text-muted);margin-bottom:var(--space-3);}
.change p{font-size:var(--fs-body-s);color:var(--text-secondary);font-weight:var(--fw-light);line-height:var(--lh-loose);}

/* ==============================================================
   HUB — DOCUMENT CARDS
   ============================================================== */

.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4);}

/* Sub-heading inside a section — the editorial italic "division line". */
.sub{
  font-family:var(--font-editorial);font-style:italic;font-weight:var(--fw-regular);
  font-size:var(--fs-heading-s);line-height:var(--lh-snug);
  margin:var(--space-6) 0 var(--space-4);
}

.doc{
  display:flex;flex-direction:column;
  background:var(--surface-card);
  border:var(--border-hair) solid var(--rule);
  border-radius:var(--radius-none);
  padding:var(--space-6) var(--space-5) var(--space-5);
  text-decoration:none;color:var(--text-primary);
  transition:opacity var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.doc:hover{opacity:var(--hover-opacity);border-color:var(--rule-strong);}
.doc:active{opacity:var(--press-opacity);}

.doc .type{display:block;color:var(--text-muted);margin-bottom:var(--space-4);}
.doc h3{
  font-family:var(--font-editorial);font-weight:var(--fw-regular);
  font-size:var(--fs-heading-s);line-height:1.25;
  margin-bottom:var(--space-3);letter-spacing:var(--ls-normal);
}
.doc p{
  font-size:var(--fs-body-s);color:var(--text-muted);
  font-weight:var(--fw-light);line-height:var(--lh-loose);
}
.doc .tag{
  display:inline-block;margin-top:var(--space-5);
  color:var(--text-muted);border-top:var(--border-hair) solid var(--rule);
  padding-top:var(--space-3);
}
.doc.warn{border-style:dashed;opacity:.6;}
.doc.warn:hover{opacity:.6;cursor:default;}

/* ==============================================================
   TABLES — used on the hub and inside every document
   ============================================================== */

.table-scroll{overflow-x:auto;margin:var(--space-6) 0 var(--space-7);}

table{
  width:100%;border-collapse:collapse;
  font-family:var(--font-body);font-size:var(--fs-body-s);font-weight:var(--fw-light);
  background:transparent;
}
th{
  text-align:left;vertical-align:bottom;
  font-weight:var(--fw-medium);font-size:var(--fs-caption);
  letter-spacing:var(--ls-ultra);text-transform:uppercase;
  color:var(--text-muted);background:transparent;
  padding:var(--space-3) var(--space-4);
  border-bottom:var(--border-hair) solid var(--rule-strong);
}
td{
  padding:var(--space-4);vertical-align:top;
  border-bottom:var(--border-hair) solid var(--rule);
  color:var(--text-secondary);line-height:var(--lh-normal);
}
td b{color:var(--text-primary);font-weight:var(--fw-medium);}
tr:nth-child(even) td{background:var(--zebra);}

/* ==============================================================
   DOCUMENT PAGES
   ============================================================== */

.topbar{
  display:flex;align-items:center;gap:var(--space-5);
  padding:var(--space-4) var(--space-6);
  background:var(--surface-page);
  border-bottom:var(--border-hair) solid var(--rule);
  position:sticky;top:0;z-index:8;
}
.topbar a{
  color:var(--text-primary);text-decoration:none;
  font-family:var(--font-body);font-weight:var(--fw-medium);
  font-size:var(--fs-caption);letter-spacing:var(--ls-wide);text-transform:uppercase;
  transition:opacity var(--dur-fast) var(--ease-standard);
}
.topbar a:hover{opacity:var(--hover-opacity);text-decoration:none;}
.topbar .crumb{margin-left:auto;color:var(--text-muted);}

/* ---------- Theme toggle — square, hairline, tracked like every label ---- */
.theme-toggle{
  flex-shrink:0;margin-left:var(--space-4);
  font-family:var(--font-body);font-weight:var(--fw-medium);
  font-size:var(--fs-caption);line-height:1;letter-spacing:var(--ls-ultra);
  text-transform:uppercase;
  padding:9px 14px 8px;border-radius:var(--radius-none);
  border:var(--border-hair) solid var(--rule-strong);
  background:transparent;color:var(--text-primary);cursor:pointer;
  transition:var(--transition-hover);
}
.theme-toggle:hover{opacity:var(--hover-opacity);}
.theme-toggle:active{opacity:var(--press-opacity);}
.theme-toggle:focus-visible{outline:var(--border-thick) solid var(--text-primary);outline-offset:2px;}
.topbar .crumb + .theme-toggle{margin-left:var(--space-5);}
/* On the hub the toggle floats over the photograph. */
.hub-toggle{position:absolute;top:var(--space-5);right:var(--space-6);z-index:3;}

.doc-head{
  position:relative;overflow:hidden;isolation:isolate;
  padding:var(--space-9) var(--space-6) var(--space-8);
  margin-bottom:var(--space-8);
  background:var(--surface-page);
  border-bottom:var(--border-hair) solid var(--rule);
  color:var(--text-primary);
}
/* Flat ink for every season — the system has no gradients as decoration. */
.doc-head.s1,.doc-head.s2,.doc-head.s3{background:var(--surface-page);}
.doc-head::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("assets/plate-b.jpg") center 35% / cover no-repeat;
  filter:var(--photo-filter);
}
.doc-head.s1::before{background-image:url("assets/hero.jpg");}
.doc-head.s2::before{background-image:url("assets/plate-a.jpg");}
.doc-head::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--veil-gradient-left),var(--veil-gradient-down);
}
.doc-head .inner{max-width:var(--maxw-doc);margin:0 auto;}
.doc-head .badge{margin-bottom:var(--space-5);}
.doc-head h1{
  font-family:var(--font-editorial);font-weight:var(--fw-light);
  font-size:clamp(32px,5vw,var(--fs-heading-xl));
  line-height:var(--lh-snug);letter-spacing:var(--ls-normal);
  margin-bottom:var(--space-4);max-width:20ch;
}
.doc-head .meta{
  color:var(--text-muted);font-size:var(--fs-body-s);
  font-weight:var(--fw-light);max-width:var(--maxw-prose);line-height:var(--lh-loose);
}

.doc-body{max-width:var(--maxw-doc);margin:0 auto;padding:0 var(--space-6) var(--space-10);}
.doc-body h2{
  font-family:var(--font-editorial);font-weight:var(--fw-light);
  font-size:clamp(26px,3.2vw,var(--fs-heading-m));
  line-height:var(--lh-snug);color:var(--text-primary);
  margin:var(--space-9) 0 var(--space-5);
  padding-bottom:var(--space-3);
  border-bottom:var(--border-hair) solid var(--rule-strong);
}
.doc-body h2:first-child{margin-top:0;}
.doc-body h3{
  font-family:var(--font-editorial);font-style:italic;font-weight:var(--fw-regular);
  font-size:var(--fs-heading-s);line-height:var(--lh-snug);
  color:var(--text-primary);margin:var(--space-7) 0 var(--space-4);
}
.doc-body p{
  margin-bottom:var(--space-4);color:var(--text-secondary);
  font-weight:var(--fw-light);line-height:var(--lh-loose);max-width:var(--maxw-prose);
}
.doc-body ul,.doc-body ol{
  margin:0 0 var(--space-5) var(--space-5);
  color:var(--text-secondary);font-weight:var(--fw-light);
}
.doc-body li{margin-bottom:var(--space-2);line-height:var(--lh-loose);padding-left:var(--space-2);}
.doc-body li::marker{color:var(--text-muted);}
.doc-body b{color:var(--text-primary);font-weight:var(--fw-medium);}
.doc-body i{color:var(--text-secondary);}
.doc-body a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-strong);}
.doc-body a:hover{opacity:var(--hover-opacity);}
.doc-body table{margin:var(--space-5) 0 var(--space-7);}

/* A short "Label:" line from the source that introduces a nested block. */
.doc-body .lbl{
  font-family:var(--font-body);font-weight:var(--fw-medium);
  font-size:var(--fs-caption);letter-spacing:var(--ls-ultra);text-transform:uppercase;
  color:var(--text-muted);margin:var(--space-6) 0 var(--space-3);
}
.doc-body ul ul{margin:var(--space-2) 0 var(--space-2) var(--space-5);}

/* Link back to the original PDF the page was converted from. */
.doc-head .source{
  margin-top:var(--space-5);font-size:var(--fs-caption);
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  font-weight:var(--fw-medium);color:var(--text-muted);
}
.doc-head .source a{color:var(--text-primary);text-decoration:none;
  border-bottom:var(--border-hair) solid var(--rule-strong);padding-bottom:2px;}
.doc-head .source a:hover{opacity:var(--hover-opacity);}

/* ==============================================================
   COMPLETE DOCUMENT INDEX (end of the one-pager)
   ============================================================== */

.index-season{margin-top:var(--space-7);}
.index-season > .eyebrow{
  display:block;color:var(--text-muted);
  padding-bottom:var(--space-3);margin-bottom:0;
  border-bottom:var(--border-hair) solid var(--rule-strong);
}
.index-list{list-style:none;}
.index-list li{border-bottom:var(--border-hair) solid var(--rule);}
.index-row{
  display:grid;grid-template-columns:1fr auto auto;
  align-items:baseline;gap:var(--space-5);
  padding:var(--space-4) 0;text-decoration:none;color:var(--text-primary);
  transition:opacity var(--dur-fast) var(--ease-standard);
}
.index-row:hover{opacity:var(--hover-opacity);}
.index-row .n{
  font-family:var(--font-editorial);font-size:var(--fs-heading-s);
  font-weight:var(--fw-regular);line-height:1.2;
}
.index-row .n small{
  display:block;font-family:var(--font-body);font-size:var(--fs-body-s);
  font-weight:var(--fw-light);color:var(--text-muted);
  letter-spacing:var(--ls-normal);text-transform:none;margin-top:var(--space-1);
}
.index-row .pages{color:var(--text-muted);white-space:nowrap;}
.index-row .pdf{
  color:var(--text-muted);white-space:nowrap;
  border-bottom:var(--border-hair) solid var(--rule);padding-bottom:2px;
}
.index-list li.gone .index-row{opacity:.5;cursor:default;}

.callout{
  background:var(--surface-card);
  border:var(--border-hair) solid var(--rule);
  border-left:var(--border-thick) solid var(--rule-strong);
  border-radius:var(--radius-none);
  padding:var(--space-5) var(--space-6);
  margin:var(--space-6) 0;
  font-size:var(--fs-body-s);color:var(--text-secondary);
  font-weight:var(--fw-light);line-height:var(--lh-loose);
}
.callout b{color:var(--text-primary);}
.callout.alert{border-left-color:var(--text-primary);background:var(--surface-raised);}

footer{
  color:var(--text-muted);font-size:var(--fs-caption);
  letter-spacing:var(--ls-wide);text-align:center;
  padding:var(--space-8) var(--space-6) var(--space-9);
  border-top:var(--border-hair) solid var(--rule);
  margin-top:var(--space-9);font-weight:var(--fw-light);line-height:var(--lh-loose);
}
footer a{color:var(--text-secondary);}
footer .script{
  display:block;font-size:22px;letter-spacing:0;text-transform:none;
  color:var(--text-primary);margin-bottom:var(--space-4);
}

/* ==============================================================
   MOTION — fades and slow reveals only
   ============================================================== */

/* House rule: fades and slow reveals only — no bounce, no spring, no scale-in.
   Interactive state changes are opacity-only, defined on each component. */

/* ==============================================================
   RESPONSIVE
   ============================================================== */

@media (max-width:640px){
  .wrap{padding:0 var(--space-5) var(--space-8);}
  header.hub{padding:var(--space-8) var(--space-5) var(--space-7);}
  /* Narrow screens have no room for a left-weighted veil — go top-to-bottom,
     through the theme token so light mode stays on paper, not ink. */
  header.hub::after{background:var(--veil-gradient-down);}
  .hub-toggle{top:var(--space-4);right:var(--space-5);}
  .season-head{gap:var(--space-3);}
  .season-head .dates{margin-left:0;width:100%;}
  .start-here{padding:var(--space-5);}
  .doc-head{padding:var(--space-7) var(--space-5) var(--space-6);}
  .doc-body{padding:0 var(--space-5) var(--space-8);}
  .topbar{padding:var(--space-3) var(--space-5);}
  .topbar .crumb{display:none;}
  .hero-meta{gap:var(--space-5);}
  /* Wide data tables scroll inside themselves rather than the page. */
  .doc-body table{display:block;overflow-x:auto;white-space:nowrap;}
  .doc-body td,.doc-body th{white-space:normal;min-width:120px;}
}