/* THE STORE ROOM — storeroom.kaditay.com
   Two themes, one system. Light is a design, not an inversion. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ---------------------------------------------------------- THE ROOM
     Dark is the default, not a theme. The archive opens in the dark and the
     cursor is the light — the same lantern kaditay.com runs on ("Kadi means
     light"). Turning the lights on is a deliberate act, so LIGHT is the
     variant here and DARK is :root. Every token is declared in this block. */
  color-scheme:dark;
  --bg:#0A0B0C; --bg2:#111315; --surface:#16191B; --sunk:#050607;
  --fg:#F2EFE9; --fg2:#ADA79D; --fg3:#888178;
  --rule:rgba(242,239,233,.12); --rule2:rgba(242,239,233,.24);

  /* the bulb. This is LIGHT, not an accent — never use it as a text colour
     on --bg, and never give a component its own copy of it. */
  --bulb:#FFB25C;
  --beam:rgba(255,178,92,.20);
  --beam2:rgba(255,178,92,.06);

  /* one accent per collection. --accent is what components read; each
     collection re-points it on its own pages and worlds. */
  --oxide:#FF5B2E;            /* SR·001 · NSMQ */
  --brass:#E8B14C;            /* SR·002 · GMA  */
  --accent:var(--oxide);
  --oxide-ink:#0A0B0C;
  --accent-ink:#0A0B0C;

  --amber:#E8B14C; --slate:#7FA8C4; --moss:#5FBF93;
  --gold:#E8B14C; --silver:#B9BCC2; --bronze:#C98A56;
  --gold-fill:#E8B14C; --silver-fill:#B9BCC2; --bronze-fill:#C98A56;
  --glow:rgba(255,91,46,.09); --glow2:rgba(127,168,196,.07);

  /* each collection's world ground — used when a collection takes the viewport */
  --world-nsmq:#0C2A55;
  --world-gma:#180B26;

  --display:'Archivo',Impact,'Haettenschweiler',sans-serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(20px,5vw,64px); --wrap:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------ LIGHTS ON
   The light theme is the same room with the lights turned on: paper, not an
   inversion. --oxide and --amber are deliberately darker here because small
   text sits on them. Do not "unify" them with the dark values. */
/* The room opens dark, always.  kaditay.com does the same thing — the site is
   a lantern, and "it opens in darkness" is the idea, not a default that an OS
   preference gets to overrule.  Light is a switch the reader throws, and the
   choice persists in localStorage.  That is why there is no
   prefers-color-scheme:light block here; do not add one back. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F4EC; --bg2:#FFFDF7; --surface:#FFFFFF; --sunk:#EEE8DA;
  --fg:#16140F; --fg2:#474334; --fg3:#635D4D;
  --rule:rgba(22,20,15,.14); --rule2:rgba(22,20,15,.26);
  --bulb:#B26A12; --beam:rgba(178,106,18,.10); --beam2:rgba(178,106,18,.04);
  --oxide:#AF3410; --brass:#7C5406; --oxide-ink:#FFFFFF; --accent-ink:#FFFFFF;
  --amber:#7C5406; --slate:#2F6285; --moss:#1F6B4A;
  --gold:#9A7212; --silver:#6B6E74; --bronze:#8A5327;
  --gold-fill:#D9AE3A; --silver-fill:#A9ADB4; --bronze-fill:#B5763F;
  --glow:rgba(175,52,16,.07); --glow2:rgba(47,98,133,.06);
}

/* a collection re-points --accent once, and every component follows. */
[data-collection="nsmq"]{--accent:var(--oxide)}
[data-collection="gma"]{--accent:var(--brass)}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* THE BULB — one light in the room, and it follows the pointer. app.js sets
   --mx/--my; with no pointer (touch, no-JS, reduced motion) it stays where it
   hangs, upper right, and the page still reads. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(58% 46% at var(--mx,80%) var(--my,2%),var(--beam),transparent 64%),
             radial-gradient(90% 64% at 10% 104%,var(--beam2),transparent 62%)}
/* dust in the beam */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.42;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
:root[data-theme="light"] body::after{opacity:.2}
main,header.site,footer.site{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.measure{max-width:64ch}

/* ---------------------------------------------------------------- type */
.d{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.87;letter-spacing:-.028em}
h1.d{font-size:clamp(2.35rem,6.1vw,5.1rem)}
h2.d{font-size:clamp(1.9rem,4.6vw,3.5rem)}
h3{font-family:var(--body);font-size:1.08rem;font-weight:600;letter-spacing:-.006em;line-height:1.25}
.accent{color:var(--accent)}
.lede{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--fg2);line-height:1.62;max-width:52ch}
p{max-width:66ch}
.meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
.mark{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--fg3);white-space:nowrap}
.mark s{text-decoration:none;color:var(--accent)}

/* ---------------------------------------------------------------- chrome
   One floating pill. The old header + lensbar + subnav + crumbs stack put
   four bands of 10.5px mono between the top of the window and the first
   word of content; that wall is why the site read as a template. */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px var(--gut) 0;
  display:flex;justify-content:center;pointer-events:none}
header.site .wrap{display:flex;align-items:center;gap:clamp(9px,1.5vw,20px);max-width:100%;
  padding:8px 9px 8px 17px;pointer-events:auto;
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--rule2);border-radius:999px;
  box-shadow:0 14px 40px -20px rgba(0,0,0,.6)}
body{padding-top:66px}

.brand{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.035em;
  display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bulb);flex:none;
  box-shadow:0 0 12px 2px var(--beam);transition:box-shadow .3s}
.brand:hover::before{box-shadow:0 0 18px 4px var(--beam)}
header.site nav{display:flex;gap:clamp(8px,1.4vw,18px);align-items:center}
header.site nav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);padding:3px 0;position:relative;transition:color .2s}
header.site nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:var(--accent);transition:right .25s var(--ease)}
header.site nav a:hover{color:var(--fg)}
header.site nav a:hover::after,header.site nav a[aria-current]::after{right:0}
header.site nav a[aria-current]{color:var(--fg)}
@media (max-width:900px){header.site nav .hidesm{display:none}}

.tools{display:flex;gap:6px;align-items:center}
.iconbtn{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule2);
  background:transparent;color:var(--fg2);cursor:pointer;font-family:var(--mono);font-size:11px;
  transition:border-color .2s,color .2s}
.iconbtn:hover{border-color:var(--bulb);color:var(--bulb);background:transparent;transform:none}
.iconbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
/* the lantern: sun shows when the lights are off (dark), moon when they are on */
.moon{display:none}
[data-theme="light"] .sun{display:none}[data-theme="light"] .moon{display:block}

/* the collection strip — only on a collection's own pages, and it carries
   that collection's accent so you always know which room you are in. */
.subnav{position:sticky;top:60px;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.subnav .wrap{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap;
  padding-top:11px;padding-bottom:11px}
.subnav .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap}
.subnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);
  transition:color .2s}
.subnav a:hover,.subnav a[aria-current]{color:var(--fg)}

.crumbs{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);
  padding:20px 0 0;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{color:var(--rule2)}

footer.site{border-top:1px solid var(--rule);margin-top:96px;background:var(--sunk)}
footer.site .wrap{padding-top:40px;padding-bottom:56px}
.unofficial{border:1px solid var(--rule2);border-left:2px solid var(--accent);padding:15px 18px;
  font-size:13.5px;color:var(--fg2);max-width:66ch;margin-bottom:34px}
.unofficial b{color:var(--fg);font-weight:600}
.fcols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));font-size:13.5px;color:var(--fg3)}
.fcols a{color:var(--fg2);border-bottom:1px solid var(--rule2);transition:color .18s,border-color .18s}
.fcols a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.fcols p{margin-top:9px;line-height:1.6}

/* ------------------------------------------------- RECORD / RECEIPTS / GAPS */
.lens{display:flex;gap:2px;background:color-mix(in srgb,var(--sunk) 60%,transparent);
  border:1px solid var(--rule);border-radius:999px;padding:3px}
.lens button{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  background:transparent;color:var(--fg3);border:0;border-radius:999px;padding:6px 11px;
  cursor:pointer;transition:background .2s,color .2s}
.lens button:hover{color:var(--fg);background:transparent;transform:none}
.lens button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
@media (max-width:1080px){header.site .lens{display:none}}

/* below 1080 the lens moves to a rail at the bottom of the window, where a
   thumb can reach it, instead of a third band at the top of the page. */
.lensbar{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:58}
.lensbar .wrap{display:flex;align-items:center;gap:10px;padding:5px;max-width:calc(100vw - 24px);
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--rule2);border-radius:999px;box-shadow:0 14px 40px -18px rgba(0,0,0,.6)}
.lensbar .meta{display:none}
@media (max-width:1080px){.lensbar{display:block}.lensbar .lens{display:flex;border:0;background:transparent;padding:0}}

/* receipt markers — only visible in receipts lens */
.cite{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--accent);
  border:1px solid var(--accent);padding:0 4px;margin-left:6px;cursor:pointer;vertical-align:2px;
  background:transparent;line-height:1.5}
.cite:hover{background:var(--accent);color:var(--accent-ink)}
[data-lens="receipts"] .cite{display:inline-block}
[data-lens="receipts"] [data-sourced]{background:color-mix(in srgb,var(--accent) 9%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 9%,transparent)}

/* gap highlighting — only in gaps lens */
[data-lens="gaps"] [data-missing]{background:color-mix(in srgb,var(--amber) 8%,transparent);
  outline:1px dashed var(--amber);outline-offset:1px}
[data-lens="gaps"] [data-disputed]{background:color-mix(in srgb,var(--oxide) 8%,transparent);
  outline:1px dashed var(--oxide);outline-offset:1px}
[data-lens="gaps"] .dimmable{opacity:.42;transition:opacity .25s}
.gapflag{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);background:var(--amber);border:0;padding:3px 7px;margin-left:8px;white-space:nowrap}
[data-lens="gaps"] .gapflag{display:inline-block}

/* drawer */
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(430px,92vw);background:var(--bg2);
  border-left:1px solid var(--rule2);z-index:200;transform:translateX(101%);transition:transform .34s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.22)}
.drawer[data-open]{transform:none}
.drawer header{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--rule)}
.drawer header .meta{flex:1}
.drawer .body{padding:22px;overflow:auto;flex:1}
.drawer h3{margin-bottom:6px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim[data-open]{opacity:1;pointer-events:auto}

/* ================================================================== ROOM
   The homepage opener. Dark, one bulb, and a wordmark that is only fully lit
   where the light falls on it. */
.room{position:relative;padding:clamp(30px,5vw,56px) 0 0;overflow:hidden}
.room .kick{margin-bottom:clamp(14px,2vw,22px)}
.claim{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.75rem,4.2vw,3.15rem);line-height:.92;letter-spacing:-.035em;max-width:17ch;
  text-wrap:balance;margin:0}
.claim em{font-style:normal;display:block;color:var(--fg3)}

/* the wordmark, edge to edge, clipped by the window on purpose */
.wordmark{position:relative;margin:clamp(22px,3.4vw,44px) 0 0;line-height:.74;
  user-select:none;-webkit-user-select:none}
.wordmark span{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3.4rem,17.5vw,14.5rem);letter-spacing:-.055em;white-space:nowrap;margin-left:-.055em}
.wordmark .dim{color:transparent;-webkit-text-stroke:1px var(--rule2)}
/* the lit copy sits on top of the dim one and is masked to the bulb */
.wordmark .lit{position:absolute;inset:0;color:var(--fg);
  -webkit-mask-image:radial-gradient(38% 150% at var(--mx,80%) var(--my,50%),#000 0,#000 28%,transparent 72%);
          mask-image:radial-gradient(38% 150% at var(--mx,80%) var(--my,50%),#000 0,#000 28%,transparent 72%)}
/* no-JS and reduced-motion: light the whole thing rather than hide it */
@media (prefers-reduced-motion:reduce){.wordmark .lit{-webkit-mask-image:none;mask-image:none}}
html:not(.js) .wordmark .lit{-webkit-mask-image:none;mask-image:none}

.roomfoot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,56px);
  align-items:end;margin-top:clamp(22px,3.4vw,40px)}
@media (max-width:880px){.roomfoot{grid-template-columns:1fr;align-items:start}}

/* ------------------------------------------------------------- the ticker
   Real figures, moving. Every number here is computed by the build. */
.ticker{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;
  margin-top:clamp(26px,4vw,46px);background:color-mix(in srgb,var(--sunk) 50%,transparent)}
.ticker > div{display:flex;gap:30px;width:max-content;padding:11px 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2);
  animation:tick 48s linear infinite}
.ticker b{font-weight:500;color:var(--fg)}
.ticker i{font-style:normal;color:var(--accent)}
.ticker:hover > div{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker > div{animation:none;flex-wrap:wrap;width:auto}}

/* ---------------------------------------------------------------- band */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));border-top:1px solid var(--rule);margin-top:clamp(34px,6vw,68px)}
.band>div{padding:20px 22px 4px;border-right:1px solid var(--rule)}
.band>div:last-child{border-right:0}.band>div:first-child{padding-left:0}
.band b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.band .meta{display:block;margin-top:9px;line-height:1.4;max-width:21ch}
.band .hot b{color:var(--accent)}
@media (max-width:640px){.band>div{padding-left:0;border-right:0;border-bottom:1px solid var(--rule)}}

/* ======================================================= THE EDITION WALL
   Every edition of every collection, as one wall you can scan. This is the
   part that should make you want to open one. Tiles are generated from the
   data, so a year with no record renders as an unlit tile and says so. */
.wall{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));margin-top:clamp(22px,3vw,34px)}
.wtile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  min-height:104px;padding:12px;border:1px solid var(--rule);background:color-mix(in srgb,var(--sunk) 45%,transparent);
  overflow:hidden;transition:border-color .22s var(--ease),transform .22s var(--ease),background .22s}
.wtile::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.wtile:hover{border-color:var(--rule2);transform:translateY(-2px);
  background:color-mix(in srgb,var(--accent) 7%,transparent)}
.wtile:hover::before{transform:scaleX(1)}
.wtile .y{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--fg3);font-variant-numeric:tabular-nums}
.wtile:hover .y{color:var(--accent)}
.wtile .w{font-size:12.5px;font-weight:600;line-height:1.24;letter-spacing:-.005em}
.wtile .w s{display:block;text-decoration:none;font-weight:400;font-size:11px;color:var(--fg3);margin-top:4px}
/* a year nobody recorded — unlit, and it stays unlit until someone fills it */
.wtile.none{border-style:dashed;background:transparent}
.wtile.none .w{color:var(--fg3);font-weight:400;font-style:italic}
.wtile.none::before{background:var(--amber)}
.wallnote{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);margin-top:14px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.wallnote i{font-style:normal;display:inline-flex;align-items:center;gap:7px}
.wallnote i::before{content:"";width:9px;height:9px;border:1px solid var(--rule2);display:block}
.wallnote i.none::before{border-style:dashed}
.wallnote i.has::before{background:var(--accent);border-color:var(--accent)}

/* ====================================================== COLLECTION WORLDS
   Each collection takes the full width of the window and brings its own
   ground, so SR·001 and SR·002 are visibly different editions of the same
   archive. --accent is re-pointed by [data-collection] on the section. */
.world{position:relative;padding:clamp(50px,7.5vw,104px) 0;overflow:hidden;color:#F2EFE9;
  --rule:rgba(242,239,233,.15);--rule2:rgba(242,239,233,.28);
  --fg:#F5F2EC;--fg2:rgba(245,242,236,.76);--fg3:rgba(245,242,236,.58)}
/* A world band is dark in both themes, so it pins its own ground AND its own
   accent. Inheriting --accent here put light theme's darkened #AF3410 on navy
   at 1.83:1. The ground has to be pinned too: the old light grounds were
   lighter, and even the dark accent only reached 3.74:1 on them. */
.world.nsmq{background:var(--world-nsmq);--accent:#FF5B2E;--accent-ink:#0A0B0C}
.world.gma{background:var(--world-gma);--accent:#E8B14C;--accent-ink:#0A0B0C}
.world::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.world .wrap{position:relative;z-index:1}
.wtop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wtop .ref{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--accent)}
.wtop .state{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg3);border:1px solid var(--rule2);border-radius:999px;padding:3px 10px}
.world h2.d{font-size:clamp(2.3rem,8vw,6.4rem);margin:clamp(12px,1.8vw,22px) 0 0;letter-spacing:-.042em;line-height:.86}
.world .wsub{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-top:14px;display:block}
.wbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,60px);
  align-items:start;margin-top:clamp(26px,3.6vw,48px)}
@media (max-width:900px){.wbody{grid-template-columns:1fr}}
.wbody p{color:var(--fg2);font-size:15px;line-height:1.65;max-width:58ch}
.wfigs{display:flex;flex-wrap:wrap;gap:clamp(18px,3.2vw,44px);margin-top:clamp(24px,3.2vw,38px);
  border-top:1px solid var(--rule);padding-top:20px}
.wfigs > div{display:flex;flex-direction:column;gap:7px}
.wfigs b{font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,2.5vw,2rem);line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.wfigs .pop b{color:var(--accent)}
.wfigs span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}

/* The object standing in each world.  Drawn here from scratch: both the NSMQ
   trophy and the GMA trophy are their owners' marks and this archive is
   unofficial, so nothing here reproduces either one.  SR·001 gets a cup,
   SR·002 gets the plates — real years, real Artistes of the Year. */
.object{display:grid;place-items:center;padding:clamp(8px,1.6vw,20px) 0}
.cup{width:clamp(160px,18vw,224px);height:auto;display:block;overflow:visible;
  animation:hover 7.5s ease-in-out infinite;filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.cup .body{fill:var(--accent)}
.cup .shade{fill:rgba(0,0,0,.26)}
.cup .sheen{fill:rgba(255,255,255,.34)}
.cup .ring{fill:none;stroke:var(--accent);stroke-width:7}
.cup .etch{fill:none;stroke:rgba(0,0,0,.3);stroke-width:2}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.cup,.plates figure{animation:none}}

/* SR·002 — three plates, floating, each one a real Artiste of the Year */
.plates{position:relative;width:min(340px,84vw);height:clamp(180px,20vw,236px);perspective:900px}
.plates figure{position:absolute;width:clamp(150px,17vw,196px);padding:13px 15px;
  background:rgba(0,0,0,.34);border:1px solid var(--accent);border-radius:2px;
  box-shadow:0 24px 44px -20px rgba(0,0,0,.8);animation:hover 8s ease-in-out infinite;
  transform-style:preserve-3d}
.plates figure:nth-child(1){left:0;top:4%;transform:rotateY(15deg) rotateZ(-3deg);animation-delay:0s}
.plates figure:nth-child(2){left:22%;top:34%;transform:rotateY(15deg) rotateZ(2deg);animation-delay:-2.6s;z-index:2}
.plates figure:nth-child(3){left:44%;top:8%;transform:rotateY(15deg) rotateZ(-1.5deg);animation-delay:-5.2s}
.plates .yr{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--accent);display:block}
.plates .nm{font-size:14px;font-weight:600;line-height:1.22;margin-top:8px;display:block;color:var(--fg)}
.plates .aw{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);margin-top:8px;display:block}
@media (max-width:620px){.plates{height:auto;display:flex;flex-direction:column;gap:10px;perspective:none}
  .plates figure{position:relative;left:auto;top:auto;transform:none;width:100%;animation:none}}

.objcap{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);text-align:center;margin-top:16px;max-width:30ch;line-height:1.6}

/* ---------------------------------------------------------------- sections */
section{padding:clamp(46px,7vw,92px) 0}
section+section{border-top:1px solid var(--rule)}
.shead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,3vw,40px);align-items:start;margin-bottom:clamp(26px,4vw,44px)}
.shead .mark{padding-top:.55em}
.shead p{margin-top:14px;color:var(--fg2);font-size:15px}
@media (max-width:640px){.shead{grid-template-columns:1fr;gap:10px}.shead .mark{padding-top:0}}

/* ---------------------------------------------------------------- medals */
.medal{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;font-family:var(--mono);
  font-size:max(10.5px,.68em);font-weight:500;color:#1a1408;flex:none;line-height:1}
.medal.g{background:var(--gold-fill)}
.medal.s{background:var(--silver-fill)}
.medal.b{background:var(--bronze-fill)}
[data-theme="dark"] .medal,:root:not([data-theme="light"]) .medal{color:#0A0A0C}
.medalrow{display:flex;gap:6px;align-items:center}
.tallybar{display:flex;gap:3px;flex-wrap:wrap;align-items:center}
.tallybar i{width:13px;height:13px;border-radius:50%;background:var(--gold-fill);display:block}
.tallybar i.dim{background:var(--rule2)}

/* school colour marks */
.sc{display:inline-flex;gap:0;height:.85em;width:1.7em;vertical-align:-.05em;margin-right:.5em;flex:none;
  border:1px solid var(--rule2);overflow:hidden;border-radius:1px}
.sc i{display:block;flex:1}
.sc.none{background:repeating-linear-gradient(45deg,var(--rule),var(--rule) 2px,transparent 2px,transparent 5px)}
.scbar{height:3px;display:flex;width:100%}
.scbar i{flex:1;display:block}

/* ---------------------------------------------------------- shelf & refs */
.shelf{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);
  border-top:1px solid var(--rule2);padding-top:26px}
@media (max-width:860px){.shelf{grid-template-columns:1fr}}
.shelf .ref{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent)}
.shelf h2{margin:10px 0 6px}
.shelf .sub{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3)}
.shelf p{color:var(--fg2);margin-top:18px;font-size:15.5px}
.shelf .figs{display:flex;gap:30px;flex-wrap:wrap;margin-top:26px}
.shelf .figs b{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums}
.shelf .figs span{display:block;margin-top:4px}

.refs{border-top:1px solid var(--rule2)}
.refrow{display:grid;grid-template-columns:76px minmax(0,1.15fr) minmax(0,1fr) auto;gap:clamp(12px,2.4vw,28px);
  align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule);transition:background .2s}
.refrow:hover{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.refrow .ref{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--fg3);padding-top:5px}
.refrow:hover .ref{color:var(--accent)}
.refrow h3{font-size:1.22rem;font-weight:600}
.refrow .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);margin-top:6px;display:block}
.refrow p{font-size:14px;color:var(--fg2);margin:0}
.refrow .n{font-family:var(--mono);font-size:12px;color:var(--fg2);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.refrow .n s{display:block;text-decoration:none;color:var(--fg3);font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-top:5px}
.refrow .n::after{content:"↗";display:inline-block;margin-left:8px;color:var(--fg3);transition:color .2s,transform .2s}
.refrow:hover .n::after{color:var(--accent);transform:translate(2px,-2px)}
@media (max-width:860px){.refrow{grid-template-columns:64px minmax(0,1fr);row-gap:8px}
  .refrow p,.refrow .n{grid-column:2}.refrow .n{text-align:left}}

.boxes{border-top:1px solid var(--rule2)}
.boxrow{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:clamp(12px,2.4vw,28px);align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--rule)}
.boxrow .ref{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--fg3)}
.boxrow h3{font-size:1rem;font-weight:500;color:var(--fg2)}
.boxrow .c{font-size:13.5px;color:var(--fg3);margin-top:5px}
.boxrow .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);
  border:1px solid var(--rule2);padding:4px 9px;white-space:nowrap}
@media (max-width:640px){.boxrow{grid-template-columns:1fr;row-gap:6px}}

/* ---------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 10px;border:1px solid var(--rule2);color:var(--fg2);white-space:nowrap}
.chip::before{content:"";width:5px;height:5px;background:currentColor}
.chip.verified{color:var(--moss)}
.chip.partial{color:var(--amber)}
.chip.disputed{color:var(--oxide)}
.chip.missing{color:var(--fg3)}
.chip.plain{color:var(--fg3)}.chip.plain::before{display:none}
button.chip{cursor:pointer;background:transparent;transition:border-color .2s}
button.chip:hover{border-color:currentColor;transform:none}

/* -------------------------------------------------------- contest index */
.rows{border-top:1px solid var(--rule2)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 26px;align-items:center;padding:17px 0;
  border-bottom:1px solid var(--rule);transition:background .2s,padding-left .2s;position:relative}
.row:hover{background:color-mix(in srgb,var(--fg) 3%,transparent);padding-left:10px}
.row .who{font-size:16px;font-weight:600;letter-spacing:-.008em;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.row .who i{font-style:normal;color:var(--fg3);font-weight:400;padding:0 4px}
.row .m{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);margin-top:6px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row .m .tv{color:var(--accent)}
.row .sc-score{font-family:var(--mono);font-size:13px;color:var(--fg3);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  display:flex;gap:7px;align-items:center;justify-content:flex-end}
.row .sc-score b{color:var(--fg);font-weight:500}
@media (max-width:600px){.row{grid-template-columns:1fr}.row .sc-score{justify-content:flex-start}}

/* ---------------------------------------------------------- scoreboard */
.board{border:1px solid var(--rule2);background:var(--bg2)}
.bscroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{padding:13px 15px;text-align:right;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;font-size:15px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);
  font-weight:400;vertical-align:bottom;line-height:1.5;background:var(--sunk);cursor:default}
th s{display:block;text-decoration:none;color:var(--fg3);font-size:10px;letter-spacing:.1em;margin-top:4px;opacity:.85}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--bg2);z-index:1}
th:first-child{background:var(--sunk)}
tbody tr:last-child td{border-bottom:0}
td.sch{font-weight:600;min-width:210px}
td.sch .nm{display:flex;align-items:center}
td.sch s{display:block;text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg3);font-weight:400;margin-top:4px}
td.sch a{border-bottom:1px solid transparent;transition:border-color .2s}
td.sch a:hover{border-bottom-color:var(--accent)}
td u{display:block;text-decoration:none;font-family:var(--mono);font-size:11px;color:var(--fg3);margin-top:3px}
td.tot{font-weight:600;font-size:17px;background:color-mix(in srgb,var(--fg) 4%,transparent)}
tr.win td{background:color-mix(in srgb,var(--accent) 8%,transparent)}
tr.win td:first-child{background:color-mix(in srgb,var(--accent) 8%,transparent)}
tr.win td.tot{background:color-mix(in srgb,var(--accent) 17%,transparent);color:var(--accent)}
td.na{color:var(--rule2)}
th.rnd{cursor:pointer;transition:background .18s,color .18s}
th.rnd:hover,th.rnd[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg)}
td.hl{background:color-mix(in srgb,var(--accent) 11%,transparent)!important}

.chart{padding:24px 18px 12px;border-top:1px solid var(--rule);background:var(--sunk)}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .lead{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;fill:var(--fg3)}
.key{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.key i{display:inline-block;width:18px;height:2px;vertical-align:middle;margin-right:8px}
.roundnote{padding:14px 18px;border-top:1px solid var(--rule);background:var(--bg2);font-size:14px;color:var(--fg2);min-height:52px}
.roundnote b{color:var(--fg)}

/* ---------------------------------------------------------------- video */
.watch{border:1px solid var(--rule2);background:var(--bg2);overflow:hidden}
.facade{position:relative;width:100%;aspect-ratio:16/9;background:var(--sunk);cursor:pointer;border:0;padding:0;display:block;
  transition:none}
.facade:hover{transform:none;background:var(--sunk)}
.facade img{width:100%;height:100%;object-fit:cover;display:block}
.facade .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(0,0,0,.12) 38%,rgba(0,0,0,.65))}
.facade .play span{width:66px;height:66px;border-radius:50%;background:var(--accent);display:grid;place-items:center;
  transition:transform .22s cubic-bezier(.22,1,.36,1)}
.facade:hover .play span{transform:scale(1.09)}
.facade .play svg{width:22px;height:22px;fill:var(--accent-ink);margin-left:3px}
.facade .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;text-align:left;
  background:rgba(0,0,0,.58);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#F3EFE6;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.watch iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.watch .wmeta{padding:13px 16px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.watch .wmeta a{color:var(--fg2);border-bottom:1px solid var(--rule2)}
.watch .wmeta a:hover{color:var(--accent)}

/* ------------------------------------------------------------ river (bracket) */
.river{display:grid;gap:0;border-top:1px solid var(--rule2)}
.stage{padding:22px 0;border-bottom:1px solid var(--rule)}
.stage>.meta{margin-bottom:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stage>.meta span+span::before{content:"\00b7";margin-right:10px;color:var(--rule2)}
.heats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.heat{border:1px solid var(--rule);background:var(--bg2);padding:12px 13px;transition:border-color .2s,transform .2s;display:block}
.heat:hover{border-color:var(--accent);transform:translateY(-2px)}
.heat .hm{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);
  display:flex;justify-content:space-between;gap:8px;margin-bottom:9px}
.heat .hm .tv{color:var(--accent)}
.heat ol{list-style:none;display:grid;gap:5px}
.heat li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13.5px}
.heat li .n{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg3);font-size:12.5px}
.heat li.adv{font-weight:600}
.heat li.adv .n{color:var(--accent)}
.heat li.out{color:var(--fg3)}

/* ---------------------------------------------------------------- prose */
.prose h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1;margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--fg2);margin-bottom:1.05em;max-width:64ch}
.prose b,.prose strong{color:var(--fg);font-weight:600}
.callout{border-left:2px solid var(--accent);padding:4px 0 4px 20px;color:var(--fg2);font-size:15.5px;max-width:64ch}
.callout a{color:var(--fg);border-bottom:1px solid var(--accent)}

/* --------------------------------------------------------------- sources */
ol.src{list-style:none;counter-reset:s;border-top:1px solid var(--rule2)}
ol.src li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:16px 0;
  border-bottom:1px solid var(--rule);font-size:14.5px}
ol.src li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;color:var(--accent);padding-top:4px}
ol.src a{border-bottom:1px solid var(--rule2);word-break:break-word}
ol.src a:hover{border-bottom-color:var(--accent)}
ol.src .pub{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);margin-top:6px}
ol.src .nb{font-size:13px;color:var(--fg2);margin-top:7px;max-width:70ch}

/* -------------------------------------------------------------- timeline */
.tl{border-top:1px solid var(--rule2)}
.tlr{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--rule)}
.tlr .y{font-family:var(--mono);font-size:12.5px;color:var(--fg3);font-variant-numeric:tabular-nums}
.tlr .c{font-size:15.5px;font-weight:500;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tlr .c a{border-bottom:1px solid transparent;transition:border-color .2s}
.tlr .c a:hover{border-bottom-color:var(--accent)}
.tlr .c s{text-decoration:none;color:var(--fg3);font-weight:400;font-size:13.5px}
.tlr .x{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg3)}
.tlr.none .c{color:var(--fg3);font-weight:400;font-style:italic}
.tlr.now .y{color:var(--accent)}
@media (max-width:640px){.tlr{grid-template-columns:62px minmax(0,1fr)}.tlr .x{display:none}}

/* ---------------------------------------------------------------- tally */
.tally{border-top:1px solid var(--rule2)}
.tr{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--rule);font-size:15px}
.tr a{border-bottom:1px solid transparent;transition:border-color .2s;display:flex;align-items:center}
.tr a:hover{border-bottom-color:var(--accent)}
.tr .n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;color:var(--fg2);font-size:13px;min-width:26px}
@media (max-width:700px){.tr{grid-template-columns:minmax(120px,1fr) auto;font-size:13.5px}.tr .tallybar{grid-column:1/-1}}

/* ----------------------------------------------------------------- gaps */
.gaps{border-top:1px solid var(--rule2)}
.gap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:start;padding:22px 0;
  border-bottom:1px solid var(--rule)}
.gap h3{font-size:1.06rem;font-weight:600}
.gap p{font-size:14.5px;color:var(--fg2);margin-top:8px;max-width:72ch}
.gap .act{margin-top:12px}

/* --------------------------------------------------------------- search */
.searchwrap{position:fixed;inset:0;z-index:210;display:none;padding:12vh 20px 20px;background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px)}
.searchwrap[data-open]{display:block}
.searchbox{max-width:660px;margin:0 auto;background:var(--bg2);border:1px solid var(--rule2);box-shadow:0 30px 80px rgba(0,0,0,.38)}
.searchbox input{border:0;border-bottom:1px solid var(--rule);font-size:19px;padding:19px 20px;background:transparent}
.searchbox input:focus{outline:none;border-color:var(--rule)}
.results{max-height:52vh;overflow:auto}
.results a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:13px 20px;border-bottom:1px solid var(--rule);align-items:center}
.results a:hover,.results a[data-on]{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.results .t{font-weight:600;font-size:15px;display:flex;align-items:center}
.results .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);margin-top:4px}
.results .r{font-family:var(--mono);font-size:11.5px;color:var(--fg3);white-space:nowrap;font-variant-numeric:tabular-nums}
.searchfoot{padding:11px 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);
  display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rule)}
.empty{padding:26px 20px;color:var(--fg3);font-size:14.5px}

/* ----------------------------------------------------------------- form */
form.cf{display:grid;gap:20px;max-width:660px}
label{display:grid;gap:8px}
label>span{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--fg3)}
input,textarea,select{font:inherit;font-size:15.5px;color:var(--fg);background:var(--bg2);border:1px solid var(--rule2);
  padding:13px 14px;width:100%;border-radius:0;transition:border-color .18s}
input:hover,textarea:hover,select:hover{border-color:var(--fg3)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
textarea{min-height:150px;resize:vertical;line-height:1.55}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg3) 50%),linear-gradient(135deg,var(--fg3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat}
button{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;background:var(--accent);
  color:var(--accent-ink);border:0;padding:16px 30px;cursor:pointer;transition:background .18s,transform .18s}
form.cf button{justify-self:start}
button:hover{background:var(--fg);color:var(--bg);transform:translateY(-1px)}
button[disabled]{opacity:.45;cursor:default;transform:none}
#fm{font-size:14.5px;padding:14px 16px;border:1px solid var(--rule2);color:var(--fg2)}
#fm.ok{border-color:var(--moss);color:var(--moss)}
#fm.err{border-color:var(--accent);color:var(--accent)}
.fine{font-size:13px;color:var(--fg3);max-width:62ch;line-height:1.6}
.fine a{color:var(--fg2);border-bottom:1px solid var(--rule2)}
.fine a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ----------------------------------------------------------------- bits */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;padding:13px 21px;border:1px solid var(--rule2);
  border-radius:999px;color:var(--fg);background:transparent;cursor:pointer;white-space:nowrap;
  transition:border-color .22s,color .22s,background .22s,transform .22s var(--ease)}
.btn:hover{border-color:var(--accent);color:var(--accent);background:transparent;transform:translateY(-1px)}
.btn.hot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.hot:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.sm{padding:9px 15px;font-size:10px}
.btn i{font-style:normal;transition:transform .25s var(--ease)}
.btn:hover i{transform:translateX(4px)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--rule2);
  padding:6px 12px;color:var(--fg2);display:inline-flex;align-items:center;gap:7px;transition:border-color .2s,color .2s}
a.tag:hover{border-color:var(--accent);color:var(--accent)}
.mt{margin-top:30px}.mt-s{margin-top:16px}
.center-note{color:var(--fg3);font-size:13.5px;margin-top:14px}
.center-note a{color:var(--fg2);border-bottom:1px solid var(--rule2)}
.center-note a:hover{color:var(--accent)}

/* personal note — a different voice inside the same system */
.personal{max-width:46ch}
.personal h2{font-family:var(--display);font-weight:800;text-transform:none;letter-spacing:-.028em;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.04;margin:16px 0 26px}
.personal p{font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.62;color:var(--fg2);margin-bottom:1.1em}
.personal p.last{color:var(--fg);font-weight:500}
.personal p.sig{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg3);margin-top:30px;padding-top:18px;border-top:1px solid var(--rule)}

/* ============================================================ COLLECTIONS NAV */
.navdrop{position:relative}
.navdrop>button{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--fg3);background:transparent;border:0;padding:3px 0;cursor:pointer;display:flex;align-items:center;gap:6px;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.navdrop>button:hover,.navdrop[data-open]>button{color:var(--fg);border-bottom-color:var(--accent);background:transparent;transform:none}
.navdrop>button svg{width:8px;height:8px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .22s}
.navdrop[data-open]>button svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 14px);left:-18px;min-width:296px;background:var(--bg2);
  border:1px solid var(--rule2);box-shadow:0 24px 60px rgba(0,0,0,.28);padding:6px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:70}
.navdrop[data-open] .menu{opacity:1;visibility:visible;transform:none}
.menu .grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);
  padding:13px 14px 7px}
.menu a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;
  transition:background .16s}
.menu a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.menu a .t{font-weight:600;font-size:14.5px;display:flex;align-items:center}
.menu a .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin-top:3px}
.menu a .go{font-family:var(--mono);font-size:11px;color:var(--fg3)}
.menu a:hover .go{color:var(--accent)}
.menu .dim{padding:10px 14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;
  color:var(--fg3);font-size:13.5px}
.menu .dim .r{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em}
.menu hr{border:0;border-top:1px solid var(--rule);margin:6px 0}
@media (max-width:860px){
  .menu{position:fixed;left:0;right:0;top:60px;min-width:0;border-left:0;border-right:0;
    max-height:calc(100dvh - 60px);overflow:auto}
  header.site nav a:nth-of-type(n+2){display:none}
}
@media (max-width:420px){header.site .wrap{gap:8px}.navdrop>button{font-size:10px;letter-spacing:.12em}}

.subnav{border-bottom:1px solid var(--rule);background:var(--bg2)}
.subnav .wrap{display:flex;gap:clamp(14px,2.4vw,28px);align-items:center;overflow-x:auto;padding-top:12px;padding-bottom:12px}
.subnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);
  white-space:nowrap;padding-bottom:3px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.subnav a:hover,.subnav a[aria-current]{color:var(--fg);border-bottom-color:var(--accent)}
.subnav .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  white-space:nowrap;padding-right:4px}

/* ========================================================= CHAMPIONSHIP HERO */
.champ{padding:clamp(38px,6vw,76px) 0 clamp(26px,4vw,44px);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.champ .kick{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:clamp(20px,3vw,34px)}
.champ .colours{display:flex;height:4px;width:clamp(90px,18vw,190px);margin-bottom:20px}
.champ .colours i{flex:1}
.champ .winner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,3vw,40px);align-items:center}
@media (max-width:720px){.champ .winner{grid-template-columns:1fr;gap:4px}}
.champ .wname{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.035em;
  line-height:.84;font-size:clamp(2.6rem,9vw,7.2rem)}
.champ .wscore{font-family:var(--display);font-weight:900;letter-spacing:-.05em;line-height:.76;color:var(--accent);
  font-size:clamp(5rem,17vw,13rem);font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:720px){.champ .wscore{text-align:left}}
.champ .rest{margin-top:clamp(22px,3.4vw,38px);border-top:1px solid var(--rule2);max-width:640px}
.champ .rest div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--rule);font-size:clamp(1rem,1.7vw,1.22rem)}
.champ .rest .n{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.9rem);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg2)}
.champ .title-badge{display:inline-flex;align-items:center;gap:11px;margin-top:clamp(24px,3.4vw,38px);
  border:1px solid var(--gold);color:var(--gold);padding:11px 18px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase}
.champ .title-badge b{font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em;line-height:1;font-weight:800}
.champ .facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* ======================================================= SCORE PROGRESSION */
.prog{border:1px solid var(--rule2);background:var(--bg2)}
.prog .plot{padding:clamp(18px,3vw,30px) clamp(14px,2.4vw,26px) 6px}
.prog svg{width:100%;height:auto;display:block;overflow:visible}
.prog .axis{font-family:var(--mono);font-size:11px;fill:var(--fg3);letter-spacing:.06em}
.prog .pname{font-family:var(--mono);font-size:12px;letter-spacing:.04em;font-weight:500}
.prog .band{fill:var(--accent);opacity:0}
.prog .band.on{opacity:.09}
.prog .hit{fill:transparent;cursor:pointer}
.prog path.trace{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.prog circle.pt{transition:r .18s}
.prog .flag text{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;fill:var(--accent)}
.prog .flag line{stroke:var(--accent);stroke-dasharray:2 3;opacity:.75}
.progbar{display:flex;gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.progbar button{flex:1;background:transparent;color:var(--fg3);border:0;border-right:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:13px 6px;cursor:pointer;
  transition:background .18s,color .18s}
.progbar button:last-child{border-right:0}
.progbar button:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--fg);transform:none}
.progbar button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.progcap{padding:clamp(16px,2.6vw,24px);min-height:104px;font-size:15.5px;color:var(--fg2);line-height:1.6}
.progcap b{color:var(--fg)}
.progcap .rk{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.progcap .rk span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--fg2)}
.progcap .rk s{text-decoration:none;font-variant-numeric:tabular-nums;color:var(--fg3)}

/* ================================================================= GALLERY */
.gallery{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--sunk);border:1px solid var(--rule)}
.gallery img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:opacity .3s;background:var(--sunk)}
.gallery img[data-broken]{opacity:.15}
.gallery figure:first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:640px){.gallery figure:first-child{grid-column:span 1;grid-row:span 1}}
.credit{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg3)}
.credit a{color:var(--fg2);border-bottom:1px solid var(--rule2)}
.credit a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ========================================================== HOME: ASSEMBLE */
.assemble{position:relative;margin-top:clamp(30px,5vw,58px);min-height:clamp(220px,32vw,330px)}
.frag{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule2);background:var(--bg2);color:var(--fg3);padding:7px 11px;white-space:nowrap;
  will-change:transform,opacity}
.frag.gap{color:var(--amber);border-color:var(--amber)}
.frag.src{color:var(--accent);border-color:var(--accent)}
.assembled{position:relative;z-index:2;border:1px solid var(--rule2);background:var(--bg2);max-width:560px;
  margin:clamp(56px,9vw,110px) auto 0}
.assembled .top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg3)}
.assembled .top s{text-decoration:none;color:var(--moss)}
.assembled ol{list-style:none}
.assembled li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--rule);font-size:15px}
.assembled li:last-child{border-bottom:0}
.assembled li .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--fg2)}
.assembled li.w{font-weight:600}
.assembled li.w .n{color:var(--accent)}
.assembled .foot{padding:11px 16px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg3);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.frag{display:none}}

/* ============================================================ RECENTLY ADDED */
.recent{border-top:1px solid var(--rule2)}
.recent .r{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule)}
.recent .d{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--fg3);text-transform:uppercase}
.recent .t{font-size:15px;font-weight:500}
.recent .t s{text-decoration:none;color:var(--fg3);font-weight:400}
@media (max-width:560px){.recent .r{grid-template-columns:1fr;row-gap:5px}}

/* ============================================================== PEOPLE */
.people{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.team{border:1px solid var(--rule2);background:var(--bg2);display:flex;flex-direction:column}
.team .bar{height:4px;display:flex}
.team .bar i{flex:1}
.team .hd{padding:16px 18px 12px;border-bottom:1px solid var(--rule)}
.team .hd .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);
  display:flex;align-items:center;gap:8px;margin-bottom:8px}
.team .hd h3{font-size:1.05rem;font-weight:600}
.team ul{list-style:none;padding:6px 0;flex:1}
.team li{padding:12px 18px;display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule)}
.team li:last-child{border-bottom:0}
.team li .nm{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1}
.team li .rk{font-family:var(--mono);font-size:10.5px;color:var(--fg3);margin-left:auto;white-space:nowrap}
.team .ft{padding:12px 18px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.team .ft a{color:var(--fg2);border-bottom:1px solid var(--rule2)}
.team .ft a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.named-note{margin-top:22px}

/* season playlist links in the champions timeline */
.tlr .watch{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tlr .watch:hover{border-bottom:1px solid var(--accent)}

/* contests whose result was never written down */
.lineup{display:grid}
.lu{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;
  border-bottom:1px solid var(--rule);font-size:16px}
.lu:last-child{border-bottom:0}
.lu.won{background:color-mix(in srgb,var(--accent) 8%,transparent);font-weight:600}
.lu .n{display:flex;align-items:center}
.lu .n a{border-bottom:1px solid transparent}
.lu .n a:hover{border-bottom-color:var(--accent)}
.lu .anote{font-size:13px;line-height:1.5;color:var(--fg3);max-width:70ch}
.lu .v{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);text-align:right}
.lu.won .v{color:var(--accent)}
i.unk{font-style:normal;display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;
  border:1px dashed var(--rule2);color:var(--fg3);font-family:var(--mono);font-size:max(10.5px,.68em)}
.wscore.unk{color:var(--fg3);font-size:clamp(3.5rem,11vw,8rem)}
/* advanced: deduced from the next round, so it is marked, never medalled */
i.adv{font-style:normal;display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:max(10.5px,.78em);line-height:1}
i.out{font-style:normal;color:var(--fg3)}
.lu.adv{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.lu.adv .v,.lu .v a{color:var(--accent)}
.lu .v a{border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.heat li.unk .n{color:var(--fg3)}
.fixture{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:1.04;
  font-size:clamp(1.5rem,3.5vw,2.7rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em}
.fixture i{font-style:normal;font-family:var(--mono);font-size:max(10.5px,.38em);letter-spacing:.14em;color:var(--fg3);
  text-transform:uppercase;transform:translateY(-.18em)}
.fixture .on{color:var(--accent)}
.codename{display:inline-flex;align-items:baseline;gap:12px;margin-top:clamp(20px,3vw,30px);flex-wrap:wrap;
  border-left:2px solid var(--accent);padding-left:16px}
.codename b{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.02em;
  text-transform:none;color:var(--accent)}
.cn{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--accent);border:1px solid var(--accent);
  padding:2px 7px;white-space:nowrap;text-transform:none}

/* ── SR·002 category genealogy ───────────────────────────────────────────
 * Scoped to .gene-* so it cannot reach SR·001. Spans reuse .tallybar. */
.gene-lin{border-left:2px solid var(--rule2);padding-left:clamp(14px,3vw,24px);margin:0 0 38px}
.gene-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:14px}
.gene-hd b{font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,2.4vw,1.45rem);
  letter-spacing:-.015em;color:var(--fg);line-height:1.15}
.gene-node{padding:10px 0}
.gene-node+.gene-node{border-top:1px solid var(--rule)}
.gene-node .tallybar{margin:9px 0 2px}
.gene-step{font-size:14px;color:var(--fg2);line-height:1.55;padding:9px 0 2px}
.gene-step .ar{color:var(--accent);font-weight:700;margin-right:8px}
.gene-step b{color:var(--fg)}
.gene-note{display:block;color:var(--fg3);font-size:13.5px;margin-top:3px;max-width:62ch}
.gene-resp{margin-top:14px;border-top:1px solid var(--rule);padding-top:10px}
.gene-resp summary{font-size:13.5px;color:var(--fg3);cursor:pointer;padding:4px 0;list-style:none}
.gene-resp summary::-webkit-details-marker{display:none}
.gene-resp summary::before{content:"+ ";color:var(--accent);font-weight:700}
.gene-resp[open] summary::before{content:"– "}
.gene-resp summary:hover{color:var(--fg2)}
section.yr{padding-top:0;padding-bottom:0}
section.yr .gene-lin{margin-bottom:30px}