@font-face{font-family:Fraunces;src:url(/oina/assets/fonts/fraunces-normal-latin.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;src:url(/oina/assets/fonts/fraunces-normal-latin-ext.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";src:url(/oina/assets/fonts/source-serif-4-normal-latin.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url(/oina/assets/fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:italic;src:url(/oina/assets/fonts/source-serif-4-italic-latin.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;src:url(/oina/assets/fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";src:url(/oina/assets/fonts/IBMPlexSans-latin.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";src:url(/oina/assets/fonts/IBMPlexSans-latin-ext.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f6f0e1;--bg2:#ece3cc;--ink:#1c1a14;--muted:#4b463a;--soft:#554e40;--line:rgba(28,26,20,.26);--line-soft:rgba(28,26,20,.12);
  --accent:#17582f;--accent-ink:#f4faf2;--leather:#7a3f14;--paper:#fbf6e8;--paper-ink:#1c1a14;
  --l-record:#124a27;--l-report:#173e75;--l-trad:#5a3800;--l-myth:#86160a;
  --l-record-bg:rgba(18,74,39,.08);--l-report-bg:rgba(23,62,117,.08);--l-trad-bg:rgba(90,56,0,.08);--l-myth-bg:rgba(134,22,10,.08);
  --serif:"Source Serif 4",Georgia,serif;--display:Fraunces,Georgia,serif;--sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --sr-line:#4b463a;--sr-ink:#1c1a14;--sr-acc:#17582f;--sr-ok:#17582f;
  color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12170f;--bg2:#1a2116;--ink:#f1ecdc;--muted:#c8c2ae;--soft:#bdb69f;--line:rgba(241,236,220,.26);--line-soft:rgba(241,236,220,.12);
  --accent:#8fd29a;--accent-ink:#0b2412;--leather:#e0a36a;--paper:#1e2619;--paper-ink:#f1ecdc;
  --l-record:#a2dcac;--l-report:#b0cff9;--l-trad:#f5cf75;--l-myth:#ffb5a5;
  --l-record-bg:rgba(162,220,172,.09);--l-report-bg:rgba(176,207,249,.09);--l-trad-bg:rgba(245,207,117,.09);--l-myth-bg:rgba(255,181,165,.09);
  --sr-line:#c8c2ae;--sr-ink:#f1ecdc;--sr-acc:#8fd29a;--sr-ok:#8fd29a;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12170f;--bg2:#1a2116;--ink:#f1ecdc;--muted:#c8c2ae;--soft:#bdb69f;--line:rgba(241,236,220,.26);--line-soft:rgba(241,236,220,.12);
  --accent:#8fd29a;--accent-ink:#0b2412;--leather:#e0a36a;--paper:#1e2619;--paper-ink:#f1ecdc;
  --l-record:#a2dcac;--l-report:#b0cff9;--l-trad:#f5cf75;--l-myth:#ffb5a5;
  --l-record-bg:rgba(162,220,172,.09);--l-report-bg:rgba(176,207,249,.09);--l-trad-bg:rgba(245,207,117,.09);--l-myth-bg:rgba(255,181,165,.09);
  --sr-line:#c8c2ae;--sr-ink:#f1ecdc;--sr-acc:#8fd29a;--sr-ok:#8fd29a;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:56px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.62 var(--serif);text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent);text-underline-offset:.18em}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.5rem 1rem;z-index:50}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;height:44px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));background:var(--bg);background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);font:500 .82rem/1 var(--sans)}
.home{text-decoration:none;display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.home svg{width:18px;height:18px;color:var(--accent)}
.topnav{display:flex;gap:1rem;margin-left:auto;overflow:hidden}
.topnav a{text-decoration:none;color:var(--muted);white-space:nowrap}
.topnav a:hover{color:var(--ink)}
.langs{display:flex;gap:.3rem;margin-left:.4rem}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 .4rem;border-radius:13px;border:1px solid var(--line);text-decoration:none;color:var(--muted);font-size:.74rem}
.chip[aria-current]{color:var(--ink);border-color:var(--ink)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:860px){.topnav{display:none}.langs{margin-left:auto}}

/* layout */
main{display:block}
section{padding:4.5rem max(18px,env(safe-area-inset-left)) 4.5rem}
.wrap{max-width:41rem;margin:0 auto}
.wide{max-width:70rem;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:580;letter-spacing:-.01em;line-height:1.12}
h1{font-size:clamp(1.9rem,4.2vw,3.3rem);margin:.3rem 0 .9rem;text-wrap:balance}
h2{font-size:clamp(1.55rem,3.3vw,2.4rem);margin:0 0 1rem;max-width:24ch;text-wrap:balance}
h3{font-size:1.2rem;margin:1.8rem 0 .4rem}
p{margin:0 0 1.05rem}
.eyebrow{font:600 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .6rem}
.deck{font-size:1.14rem;line-height:1.55;color:var(--muted);margin:0 0 1.2rem}
.note{font:400 .92rem/1.5 var(--sans);color:var(--muted)}
section+section{border-top:1px solid var(--line-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.7rem 1.25rem;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:600 .95rem/1 var(--sans);cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent)}
.rowbtn{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.lead{font-size:1.28rem;line-height:1.5;color:var(--ink)}
.k{font-family:var(--sans);font-size:.82em;font-weight:600;letter-spacing:.01em}
cite{font-style:italic}

/* hero */
#joc{padding:1.4rem max(14px,env(safe-area-inset-left)) 3.4rem;background:radial-gradient(120% 70% at 80% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%)}
.hero{--sh:min(calc(100svh - 96px),920px);--sw:calc(var(--sh) * .6667);display:grid;gap:1.4rem;align-items:start}
@media (min-width:960px){.hero{grid-template-columns:minmax(0,1fr) var(--sw);gap:3.4rem;align-items:center;min-height:calc(100svh - 110px)}}
.intro{max-width:34rem}
.facts{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin:1.1rem 0 0;padding:0;list-style:none}
.facts li{font:500 .8rem/1 var(--sans);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.5rem .8rem}
.facts b{color:var(--ink);font-weight:700}
.stagecol{margin:0 auto;width:min(100%,var(--sw))}
.stagewrap{position:relative;border-radius:22px;overflow:hidden;background:#244a2c;box-shadow:0 34px 70px -40px rgba(0,0,0,.75),0 0 0 1px var(--line-soft);aspect-ratio:2/3;width:100%;outline-offset:4px;touch-action:pan-y}
#stage{display:block;width:100%;height:100%;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.playing #stage{touch-action:none}
.score{position:absolute;left:10px;top:10px;display:flex;gap:6px;font:600 .74rem/1 var(--sans);color:#fff;pointer-events:none}
.score span{background:rgba(12,20,10,.66);padding:.45rem .65rem;border-radius:999px;display:flex;gap:.45rem;align-items:center}
.score b{font-size:1rem;min-width:.7em;text-align:center}
.score i{width:9px;height:9px;border-radius:50%;display:inline-block}
.score .sb i{background:#ff5e50}.score .sf i{background:#6fa6ff}
#cap{position:absolute;left:10px;right:10px;top:50px;background:rgba(12,20,10,.78);color:#fff;font:500 .92rem/1.35 var(--sans);padding:.6rem .8rem;border-radius:12px;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none}
#cap[data-on="1"]{opacity:1;transform:none}
.palm{position:absolute;right:12px;bottom:12px;width:76px;height:76px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(12,20,10,.62);color:#fff;font:700 .8rem/1 var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation;--cd:0;overflow:hidden}
.palm::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.28);transform-origin:50% 100%;transform:scaleY(var(--cd))}
.palm[data-on="1"]{background:#ffe15a;color:#1c1a14}
.palm span{position:relative;z-index:1}
.card{position:absolute;left:50%;top:9%;transform:translateX(-50%);width:min(90%,27rem);max-height:84%;overflow:auto;background:var(--paper);color:var(--paper-ink);border-radius:18px;padding:1.1rem 1.2rem 1.2rem;box-shadow:0 20px 50px -18px rgba(0,0,0,.6);font:400 1rem/1.5 var(--sans)}
.card .kicker{font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
.card .ctitle{font:600 1.45rem/1.15 var(--display);margin:0 0 .5rem}
.card p{margin:0 0 .6rem}
.card .rl-h{font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:.9rem 0 .3rem}
.card ul{margin:0;padding:0 0 0 1.1rem;font-size:.86rem;color:var(--muted)}
.card li{margin:.15rem 0}.card li b{color:var(--ink);font-family:var(--sans)}
.card .btn{min-height:46px}
#hint-line{font:400 .9rem/1.45 var(--sans);color:var(--muted);margin:.7rem 0 0;text-align:center;max-width:36rem}
.stagecol .share{margin-top:.8rem}

/* rules */
.pitchfig{margin:1.6rem 0 0;display:grid;gap:1.6rem;align-items:start}
@media (min-width:900px){.pitchfig{grid-template-columns:minmax(260px,330px) 1fr}}
.pitchfig svg{width:100%;height:auto;display:block;max-height:760px}
.pitchfig figcaption{font:400 .86rem/1.5 var(--sans);color:var(--muted);margin-top:.6rem}
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.steps li{counter-increment:s;position:relative;padding:.1rem 0 0 3rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font:700 .95rem/1 var(--sans)}
.steps h3{margin:.05rem 0 .15rem;font-size:1.12rem}
.steps p{margin:0;color:var(--muted);font-size:1.02rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1.8rem 0 0}
.tile{border:1px solid var(--line);border-radius:14px;padding:.8rem .9rem;background:var(--bg2)}
.tile b{display:block;font:600 1.5rem/1.1 var(--display);color:var(--ink)}
.tile span{font:400 .84rem/1.35 var(--sans);color:var(--muted)}
dl.gloss{display:grid;grid-template-columns:minmax(8.5rem,max-content) 1fr;gap:.55rem 1.1rem;margin:1rem 0 0;font-size:1rem}
dl.gloss dt{font:600 .95rem/1.4 var(--sans);color:var(--ink)}
dl.gloss dd{margin:0;color:var(--muted)}
@media (max-width:560px){dl.gloss{grid-template-columns:1fr}dl.gloss dd{margin-bottom:.5rem}}

/* ladder */
.layers{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 1.4rem}
.fchip{font:600 .84rem/1 var(--sans);padding:.65rem .95rem;border-radius:999px;border:1.5px solid var(--line);background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fchip .n{font-weight:700;opacity:.8}
.mark{display:inline-block;width:.85em;height:.85em;border-radius:50%;vertical-align:-.08em;flex:none}
.mark.record{background:var(--l-record)}
.mark.report{border:2.5px solid var(--l-report)}
.mark.trad{border:2.5px dashed var(--l-trad)}
.mark.myth{background:linear-gradient(45deg,transparent 42%,var(--l-myth) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--l-myth) 42% 58%,transparent 58%);border:2px solid var(--l-myth)}
ol.ladder{list-style:none;margin:0;padding:0;position:relative}
ol.ladder::before{content:"";position:absolute;left:5.6rem;top:.4rem;bottom:.4rem;width:2px;background:var(--line)}
.rung{display:grid;grid-template-columns:5.6rem 1fr;gap:0 1.5rem;position:relative;padding:.6rem 0}
.rung[hidden]{display:none}
.rung .yr{font:600 1.15rem/1.2 var(--display);text-align:right;padding:.85rem 1.1rem 0 0;color:var(--ink)}
.rung .yr small{display:block;font:500 .72rem/1.2 var(--sans);color:var(--muted);letter-spacing:.02em;margin-top:.15rem}
.rung::before{content:"";position:absolute;left:calc(5.6rem - 6px);top:1.35rem;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--line);z-index:1}
.rung[data-l="record"]::before{background:var(--l-record);border-color:var(--l-record)}
.rung[data-l="report"]::before{border-color:var(--l-report)}
.rung[data-l="trad"]::before{border-style:dashed;border-color:var(--l-trad)}
.rung[data-l="myth"]::before{border-color:var(--l-myth);background:var(--l-myth-bg)}
.rcard{border-radius:14px;border:1px solid var(--line-soft);border-left:5px solid var(--line);background:var(--paper);padding:.9rem 1.1rem 1rem;margin-left:.9rem;font:400 1rem/1.5 var(--sans)}
.rung[data-l="record"] .rcard{border-left-color:var(--l-record)}
.rung[data-l="report"] .rcard{border-left-color:var(--l-report)}
.rung[data-l="trad"] .rcard{border-left-color:var(--l-trad);border-left-style:dashed}
.rung[data-l="myth"] .rcard{border-left-color:var(--l-myth)}
.tag{display:inline-flex;align-items:center;gap:.4rem;font:700 .7rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:.34rem .55rem;border-radius:6px;margin:0 0 .5rem}
.rung[data-l="record"] .tag{color:var(--l-record);background:var(--l-record-bg)}
.rung[data-l="report"] .tag{color:var(--l-report);background:var(--l-report-bg)}
.rung[data-l="trad"] .tag{color:var(--l-trad);background:var(--l-trad-bg)}
.rung[data-l="myth"] .tag{color:var(--l-myth);background:var(--l-myth-bg)}
.rcard h3{font:600 1.15rem/1.25 var(--display);margin:0 0 .35rem}
.rcard p{margin:0 0 .5rem;color:var(--muted);font-size:.98rem}
.rcard blockquote{margin:.3rem 0 .6rem;padding:.1rem 0 .1rem .8rem;border-left:2px solid var(--line);font:italic 400 .98rem/1.5 var(--serif);color:var(--ink)}
.rcard .qsrc{display:block;font:400 .78rem/1.4 var(--sans);font-style:normal;color:var(--muted);margin-top:.15rem}
.chain{display:flex;flex-wrap:wrap;gap:.35rem .45rem;align-items:center;margin:.4rem 0 .2rem;font:500 .8rem/1.3 var(--sans);color:var(--muted)}
.chain .st{border:1px solid var(--line);border-radius:7px;padding:.25rem .5rem;background:var(--bg)}
.chain .ar{opacity:.6}
.chain .gap{border-style:dashed;color:var(--l-myth)}
.rcard .links{font:500 .82rem/1.5 var(--sans);margin:.3rem 0 0}
@media (max-width:620px){
  ol.ladder::before{left:.55rem}
  .rung{grid-template-columns:1fr;padding-left:1.8rem}
  .rung::before{left:calc(.55rem - 6px);top:.95rem}
  .rung .yr{text-align:left;padding:0 0 .25rem}
  .rcard{margin-left:0}}

/* word, cousins, history, today */
.names{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.names li{border:1px solid var(--line);border-radius:999px;padding:.45rem .8rem;font:500 .92rem/1.2 var(--sans);background:var(--bg2)}
.names li small{color:var(--muted);margin-left:.3rem}
.cgrid{overflow-x:auto;margin:1.4rem -.4rem 0;padding:0 .4rem}
table.cmp{border-collapse:separate;border-spacing:0;min-width:56rem;width:100%;font:400 .9rem/1.4 var(--sans)}
.cmp th,.cmp td{padding:.6rem .7rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.cmp thead th{position:sticky;top:0;background:var(--bg);font:600 .72rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line)}
.cmp tbody th{font:600 .95rem/1.3 var(--display);width:9rem;position:sticky;left:0;background:var(--bg);z-index:1}
.cmp tr.me th,.cmp tr.me td{background:var(--l-record-bg)}
.cmp td.hl{font-weight:600;color:var(--ink)}
.cmp td a{font-size:.8em}
.tl{list-style:none;margin:1.6rem 0 0;padding:0;border-left:2px solid var(--line);margin-left:.4rem}
.tl li{position:relative;padding:0 0 1.3rem 1.5rem}
.tl li::before{content:"";position:absolute;left:-7px;top:.5rem;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.tl b{font:600 1.05rem/1.3 var(--display)}
.tl p{margin:.15rem 0 0;color:var(--muted);font-size:1rem}
.finder{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.2rem 0}
select,input[type=search]{font:500 1rem/1.2 var(--sans);padding:.7rem .9rem;min-height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);max-width:100%}
.clubs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem}
.clubs li{border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;background:var(--paper);font:400 .95rem/1.4 var(--sans)}
.clubs li b{display:block;font:600 1rem/1.3 var(--display)}
.clubs li span{color:var(--muted);font-size:.86rem}
.sources{font:400 .92rem/1.55 var(--sans);padding-left:1.4rem}
.sources li{margin:.45rem 0}
.sources .lay{font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-right:.4rem}
figure.photo{margin:1.6rem 0;display:grid;gap:.5rem}
figure.photo img{width:100%;height:auto;border-radius:14px;display:block;background:var(--bg2)}
figure.photo figcaption{font:400 .86rem/1.5 var(--sans);color:var(--muted)}
.foot{padding:2.4rem max(18px,env(safe-area-inset-left));border-top:1px solid var(--line-soft);font:400 .9rem/1.5 var(--sans);color:var(--muted);text-align:center}
.callout{border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;background:var(--bg2);margin:1.4rem 0;font:400 1rem/1.55 var(--sans)}
.callout b{font-family:var(--display);font-size:1.08rem}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

figure.photo.tall img{max-width:30rem;margin:0 auto}
.cmp98 td,.cmp98 th{vertical-align:top}.cmp98 thead th:first-child{width:9rem}
table.cmp98{min-width:40rem}

/* phone: the game comes before the long intro */
@media (max-width:959px){
  .intro{display:contents}
  .hero{gap:.9rem}
  .intro .eyebrow{order:0;margin:0}
  .intro h1{order:1;font-size:clamp(1.7rem,7.2vw,2.3rem);margin:0}
  .stagecol{order:2}
  .intro .deck{order:3;margin:.4rem 0 0}
  .intro .facts{order:4;margin:.2rem 0 0}
  .intro #hint-line{order:5;text-align:left;margin:0}
  #joc{padding-top:.9rem}
}

/* phone: comparison tables become stacked cards */
@media (max-width:700px){
  .cgrid{overflow:visible;margin:1.2rem 0 0;padding:0}
  table.cmp,table.cmp98{min-width:0;display:block}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cmp tbody{display:grid;gap:.8rem}
  .cmp tr{display:block;border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:.7rem .9rem}
  .cmp tr.me{background:var(--l-record-bg)}
  .cmp tbody th{position:static;display:block;width:auto;background:transparent;border:0;padding:0 0 .4rem;font-size:1.05rem}
  .cmp td{display:block;border:0;padding:.3rem 0}
  .cmp td::before{content:attr(data-label);display:block;font:600 .68rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.1rem}
  .cmp tr.me th,.cmp tr.me td{background:transparent}
}

/* pitch drawing and small blocks (no inline styles, so the page needs no style-src exception) */
.pitchfig .pz{font:600 10px var(--sans);fill:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.pitchfig .pc{font:700 11px var(--sans);fill:var(--ink)}
.pitchfig .pk{font:600 11px var(--sans);fill:var(--accent);letter-spacing:.05em;text-transform:uppercase}
.pitchfig .dm line{stroke:var(--muted);stroke-width:1}
.pitchfig .dm text{font:600 11px var(--sans);fill:var(--muted)}
ul.defs{list-style:none;padding:0;display:grid;gap:.35rem;max-width:46rem}
.note.after{margin-top:1rem}
.sources .lay-record{color:var(--l-record)}.sources .lay-report{color:var(--l-report)}.sources .lay-trad{color:var(--l-trad)}.sources .lay-myth{color:var(--l-myth)}

.watch{font:400 .92rem/1.5 var(--sans);color:var(--muted);margin:.7rem 0 0;max-width:34rem}
.cross{margin:1.4rem 0 0;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:14px;background:var(--bg2);font:400 .98rem/1.5 var(--sans)}
.cross h3{margin:0 0 .5rem;font-size:1.05rem}
.cross dl{display:grid;grid-template-columns:minmax(9rem,max-content) 1fr;gap:.35rem 1rem;margin:0}
.cross dt{font-weight:600}.cross dd{margin:0;color:var(--muted)}
@media (max-width:560px){.cross dl{grid-template-columns:1fr}.cross dd{margin-bottom:.4rem}}
@media (max-width:959px){.intro .watch{order:6;margin:0}}
@media (min-width:900px){.pitchfig{grid-template-columns:minmax(320px,400px) 1fr}}


/* share row (standards/v2/tools/share_row.py) */
.share-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.share-row .lab{font-size:.95rem;margin-inline-end:.3rem}
.share-row a,.share-row button{display:inline-grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid var(--sr-line,color-mix(in srgb,currentColor 28%,transparent));background:transparent;color:var(--sr-ink,inherit);text-decoration:none;cursor:pointer;font:inherit;transition:color .15s,border-color .15s}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--sr-acc,inherit);border-color:var(--sr-acc,currentColor)}
.share-row [hidden]{display:none}
@media (pointer:coarse){.share-row a,.share-row button{width:2.75rem;height:2.75rem}}
@media (max-width:30rem){.share-row .lab{flex-basis:100%;margin:0 0 .15rem}}
.share-status{font-size:.92rem;color:var(--sr-ok,inherit);min-height:1.2em;margin:.4rem 0 0}
.share-status:empty{display:none}
.share-field{display:block;width:100%;max-width:36rem;margin-top:.4rem;font:inherit;font-size:.9rem}