/* MediaBias.fyi — v1.0 "Signal" — Kestrel Exams LLC
   Direction C, approved 2026-09-02. Near-black ground, one electric yellow,
   Bricolage Grotesque display over Public Sans body, poster scale, evidence as UI.

   THREE THINGS THAT ARE LOAD-BEARING, DO NOT "TIDY" THEM AWAY:
   1. Fonts are SELF-HOSTED in /fonts/. The `_headers` CSP forbids external
      origins, so an @import or a <link> to fonts.googleapis.com renders nothing.
   2. LOGICAL PROPERTIES ONLY. No left:/right:/margin-left/padding-right/text-align:left.
      Arabic is RTL and a `left:-9999px` skip link once made those pages 11,179px wide.
   3. Bricolage Grotesque and Public Sans cover latin + latin-ext ONLY. Arabic,
      Devanagari, Chinese and Cyrillic fall back to system faces by design; the
      :lang() stacks below name them so those pages get a chosen face, not a default. */

/* ── fonts ────────────────────────────────────────────────── */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/fonts/bricolage-grotesque-latin-wght.woff2) format("woff2-variations");
  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:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/fonts/bricolage-grotesque-latin-ext-wght.woff2) format("woff2-variations");
  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:"Public Sans";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/public-sans-latin-wght.woff2) format("woff2-variations");
  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:"Public Sans";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/public-sans-latin-ext-wght.woff2) format("woff2-variations");
  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}

/* ── tokens ───────────────────────────────────────────────── */
:root{
  --ink:#f3f2ec; --ink-2:#b6b9c2; --ink-3:#7c808a;
  --bg:#0b0d12; --surface:#14171f; --surface-2:#1b1f29; --line:#262a33;
  --accent:#f2e34a; --accent-ink:#0b0d12; --accent-dim:#5c5717; --accent-soft:#1e1f14;
  --good:#6ee7a8; --bad:#ff8f7d;
  --radius:14px; --radius-lg:18px; --pill:999px;
  --maxw:1200px; --read:68ch;
  --body:"Public Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:"Bricolage Grotesque","Arial Narrow","Segoe UI",Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
/* Scripts the two webfonts do not cover. Named on purpose, see note 3 above. */
:lang(ar){--body:"Segoe UI","Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;--disp:var(--body)}
:lang(hi){--body:"Nirmala UI","Noto Sans Devanagari","Mangal",sans-serif;--disp:var(--body)}
:lang(zh-hans),:lang(zh){--body:"Microsoft YaHei","PingFang SC","Noto Sans SC","Hiragino Sans GB",sans-serif;--disp:var(--body)}
:lang(ru){--body:"Segoe UI","Noto Sans",Roboto,Helvetica,Arial,sans-serif;--disp:var(--body)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
:lang(ar),:lang(hi),:lang(zh-hans){line-height:1.85}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
a{color:var(--accent)}
a:hover{color:#fff}
h1,h2,h3{font-family:var(--disp);line-height:1.05;letter-spacing:-.03em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.6rem,6.2vw,5.4rem);font-weight:800;letter-spacing:-.04em;text-wrap:pretty}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800}
h3{font-size:1.3rem}
p{margin:0 0 1em}
strong{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.skip{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;inset-inline-start:12px;inset-block-start:12px;width:auto;height:auto;
  clip-path:none;z-index:99;background:var(--accent);color:var(--accent-ink);padding:12px 18px;
  border-radius:var(--pill);font-weight:700;text-decoration:none}

/* ── masthead ─────────────────────────────────────────────
   .mast and .mainnav are separate elements in the markup; matching grounds and
   trimmed padding make them read as one two-line header bar. */
.mast{background:var(--bg);border-block-end:1px solid var(--line);padding:18px 0 14px}
.mast .wrap{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark::before{content:"";width:14px;height:14px;background:var(--accent);rotate:45deg;flex:none}
.mark-box{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.35rem,2.6vw,1.6rem);color:var(--ink);text-transform:none}
.mark-w{text-transform:capitalize}
.mark-d{color:var(--accent)}
.mast-tag{margin:0;color:var(--ink-3);font-size:.9rem}

.mainnav{background:var(--bg);padding:0 0 4px}
.mainnav .wrap{display:flex;flex-wrap:wrap;gap:2px}
.mainnav a{color:var(--ink);text-decoration:none;font-size:.94rem;font-weight:600;
  padding:9px 13px;border-radius:8px;border-block-end:2px solid transparent}
.mainnav a:hover{color:var(--accent)}
.mainnav a.here{color:var(--accent);border-block-end-color:var(--accent)}
.subnav{background:var(--bg);padding:0 0 12px;border-block-end:1px solid var(--line)}
.subnav .wrap{display:flex;flex-wrap:wrap;gap:2px}
.subnav a{color:var(--ink-3);text-decoration:none;font-size:.84rem;font-weight:500;padding:5px 11px;border-radius:var(--pill)}
.subnav a:hover{color:var(--ink)}
.subnav a.here{background:var(--surface);color:var(--ink)}

.langbar{background:var(--bg);border-block-end:1px solid var(--line);padding:10px 0;font-size:.86rem}
.langbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.langlbl{color:var(--ink-3);margin-inline-end:8px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.langbar a{color:var(--ink-2);text-decoration:none;padding:5px 11px;border-radius:var(--pill);font-weight:600}
.langbar a:hover{background:var(--surface);color:var(--ink)}
.langbar a.on{background:var(--accent);color:var(--accent-ink)}

.reviewbar{background:var(--accent-soft);color:var(--accent);font-size:.88rem;padding:10px 0;
  text-align:center;border-block-end:1px solid var(--accent-dim)}

/* ── hero ─────────────────────────────────────────────────── */
.hero{background:var(--bg);border-block-end:1px solid var(--line);padding:76px 0 68px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset-inline-end:-140px;inset-block-start:-90px;
  width:560px;height:560px;border-radius:50%;opacity:.3;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 0 40px var(--bg),inset 0 0 0 42px var(--accent),
             inset 0 0 0 100px var(--bg),inset 0 0 0 102px var(--accent)}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:13ch;margin-block-end:.3em}
.hero .hl{color:var(--accent);display:block}
.hero .lede{font-family:var(--disp);font-size:clamp(1.3rem,2.6vw,2.05rem);line-height:1.18;
  font-weight:500;color:var(--accent);max-width:24ch}
.eyebrow{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:.9em}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:var(--read)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  border-radius:var(--pill);text-decoration:none;font-weight:700;font-size:1rem;
  border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--surface);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:#fff;border-color:#fff;color:var(--accent-ink)}

.page-head{padding:64px 0 10px}
.page-head .lede{font-size:1.2rem;max-width:52ch}
.band{padding:34px 0 52px}
.note{color:var(--ink-2);font-size:.97rem;max-width:var(--read)}
.small{font-size:.88rem}

/* ── cards ────────────────────────────────────────────────── */
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:24px;text-decoration:none;color:inherit}
.card:hover{border-color:var(--accent);background:var(--surface-2);color:inherit}
.card-tag{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.card h3{font-family:var(--disp);margin:0;font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.card p{color:var(--ink-2);font-size:.95rem;margin:0}
.card-go{margin-block-start:auto;padding-block-start:6px;font-weight:700;font-size:.9rem;color:var(--accent)}

/* ── the evidence ledger (was .stats) ─────────────────────
   Every figure sits over a named source. The v0.3 markup packs source, date and
   sample into one .src string, so this renders as a stacked row, not five columns. */
.stats{display:grid;gap:0;grid-template-columns:1fr;margin-bottom:26px;border-block-start:2px solid var(--accent)}
.stat{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:baseline;
  background:transparent;border:0;border-block-end:1px solid var(--line);border-radius:0;padding:20px 0}
.stat .n{display:block;font-family:var(--disp);font-size:clamp(2.4rem,4.4vw,3.5rem);font-weight:800;
  letter-spacing:-.05em;line-height:.95;color:var(--ink);white-space:nowrap}
.stat p{font-size:1rem;color:var(--ink-2);margin:0}
.src{display:block;margin-top:9px;font-size:.72rem;color:var(--ink-3);
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}

/* ── the four moves, as a check sheet ─────────────────────── */
.moves{list-style:none;padding:0;margin:0;display:grid;gap:0;border-block-start:1px solid var(--line)}
.moves li{position:relative;background:transparent;border:0;border-block-end:1px solid var(--line);
  border-radius:0;padding:38px 0 38px 150px;display:grid;gap:12px}
[dir=rtl] .moves li{padding:38px 150px 38px 0}
.move-n{position:absolute;inset-inline-start:0;inset-block-start:32px;width:auto;height:auto;
  display:block;border-radius:0;background:none;color:var(--accent);
  font-family:var(--disp);font-size:clamp(3.6rem,7vw,6rem);font-weight:800;letter-spacing:-.05em;line-height:.85}
/* the markup numbers these 1-4; the design sets them 01-04 */
.move-n::before{content:"0"}
.moves h2{font-size:clamp(1.5rem,2.8vw,2.15rem);margin:0 0 .1em;font-weight:700}
.moves p{color:var(--ink-2);font-size:1.02rem;margin:0;max-width:60ch}
/* the "ask yourself" line: a box you tick, not a blockquote */
.ask{color:var(--ink)!important;font-weight:600;font-size:1rem!important;
  border:1px solid var(--accent);border-radius:var(--radius);padding:16px 18px 16px 52px;
  margin:6px 0 0!important;position:relative;max-width:52ch}
[dir=rtl] .ask{padding:16px 52px 16px 18px}
.ask::before{content:"";position:absolute;inset-inline-start:18px;inset-block-start:17px;
  width:22px;height:22px;border:1.5px solid var(--accent);border-radius:3px}
/* At desktop the "ask yourself" box sits beside the move, in a second column.
   Absolute, not a grid cell: the li's rows are auto-sized, so a spanning grid item
   redistributes its own height into them and opens a gap under the heading.
   This block MUST stay after the .ask rule above, which sets position:relative. */
@media(min-width:900px){
  .moves li{padding-inline-end:404px;min-height:212px}
  .moves .ask{position:absolute;inset-inline-end:0;inset-block-start:34px;width:360px;
    margin:0!important;max-width:none}
}

.callout{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-lg);
  padding:38px 34px;margin-bottom:44px}
.callout h2{margin-top:0;color:var(--accent-ink)}
.callout p{color:#2a2914}
.callout em{color:var(--accent-ink);font-style:italic}
.callout .btn{border-color:var(--accent-ink);color:var(--accent-ink)}
.callout .btn:hover{background:rgba(11,13,18,.08);color:var(--accent-ink)}
.callout .btn.primary{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--accent)}
.callout .btn.primary:hover{background:#000;border-color:#000;color:var(--accent)}
.callout a{color:var(--accent-ink)}

/* ── explainers ───────────────────────────────────────────── */
.prose-wide{max-width:820px}
.ex-sec{margin-bottom:44px}
.ex-sec h2{margin-bottom:.5em;padding-bottom:0;border-bottom:0;font-size:clamp(1.5rem,2.8vw,2.1rem)}
.ex-sec p{color:#d2d4da;font-size:1.12rem;line-height:1.7}
.ex-sec strong{color:var(--ink)}
.ex-sec em{color:var(--ink)}
.takeaway{background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--radius-lg);
  padding:28px 30px;margin:44px 0 28px}
.tk-l{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--accent-dim);margin-bottom:.6em}
.takeaway p:last-child{margin:0;font-family:var(--disp);font-size:1.5rem;line-height:1.25;
  font-weight:700;letter-spacing:-.02em;color:var(--accent-ink)}
.ex-next{border-top:1px solid var(--line);padding-top:22px;margin-bottom:48px}
.ex-next p{color:var(--ink-2);font-size:.98rem;margin:0}

/* ── myths, tactics, resources ────────────────────────────── */
.myths{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.myth{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.m-l,.m-r{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-bottom:.4em}
.m-l{color:var(--bad)}
.m-r{color:var(--good);margin-top:1.1em}
.myth h2{font-family:var(--disp);font-size:1.2rem;margin-bottom:0;font-weight:700}
.myth p:last-child{color:var(--ink-2);font-size:.95rem;margin:0}
.tactics,.reslist{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tactic,.res{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.tactic h2,.res h2{font-family:var(--disp);font-size:1.2rem;margin-bottom:.45em;font-weight:700}
.tactic p,.res p{font-size:.95rem;color:var(--ink-2);margin-bottom:.7em}
.t-tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:.5em}
.res-url,.contactline{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.res-url{font-size:.82rem;color:var(--ink-3)}
.contactline{font-size:1.05rem;font-weight:700;color:var(--accent-ink);background:var(--accent);
  padding:13px 18px;border-radius:var(--pill);display:inline-block}
.res-fund{font-size:.85rem;color:var(--ink-3);margin-bottom:0}
.tactic{scroll-margin-top:24px}
a.anchor{color:inherit;text-decoration:none}
a.anchor:hover{color:var(--accent)}
.tactic:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.prose{max-width:var(--read)}
.prose ul{color:var(--ink-2);padding-inline-start:22px}
.prose li{margin-bottom:.45em}

/* ── the challenge, the headline test, the study ──────────── */
.quiz{max-width:820px}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;overflow:hidden}
.qmeta{display:flex;justify-content:space-between;align-items:center;font-size:.83rem;color:var(--ink-3);margin-bottom:14px;gap:16px}
.qtag{font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);font-size:.7rem}
.qbar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:22px}
.qbar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.qtext{font-family:var(--disp);font-size:1.45rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin-bottom:20px}
.opts{display:grid;gap:10px;margin-bottom:20px}
.opt{text-align:start;min-height:48px;padding:14px 17px;border:1.5px solid var(--line);border-radius:12px;
  background:transparent;color:var(--ink-2);font:inherit;font-size:.98rem;cursor:pointer}
.opt:hover{border-color:var(--accent);color:var(--ink)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.opt.correct{border-color:var(--good);background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--ink)}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--ink)}
.opt:disabled{cursor:default}
.heads .head{font-family:var(--disp);font-size:1.15rem;font-weight:700;line-height:1.25;padding:18px}
.defect{font-size:.97rem;color:var(--ink-2);margin-bottom:.8em}
.conf{border-top:1px solid var(--line);padding-top:20px}
.conf label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-weight:600;font-size:.97rem;margin-bottom:10px}
.conf input[type=range]{width:100%;accent-color:var(--accent);height:24px}
.confval{font-family:var(--disp);font-variant-numeric:tabular-nums;font-size:1.7rem;font-weight:800;
  letter-spacing:-.03em;color:var(--accent)}
.verdict{font-family:var(--disp);font-size:1.15rem;font-weight:700;margin-bottom:.5em}
.verdict.ok{color:var(--good)}
.verdict.no{color:var(--bad)}
.why{background:var(--surface-2);border-inline-start:3px solid var(--accent);border-radius:12px;
  padding:18px 20px;font-size:.97rem;color:#d2d4da}
.why p{margin:0}
.scorewrap{display:grid;gap:0;grid-template-columns:1fr 1fr;margin:22px 0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media(max-width:520px){.scorewrap{grid-template-columns:1fr}}
.scorebox{background:transparent;border:0;border-inline-end:1px solid var(--line);border-radius:0;padding:26px 24px;text-align:start}
.scorebox:last-child{border-inline-end:0}
@media(max-width:520px){.scorebox{border-inline-end:0;border-block-end:1px solid var(--line)}}
.scorebox .n{display:block;font-family:var(--disp);font-size:clamp(3rem,7vw,4.6rem);font-weight:800;
  letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.scorebox:nth-child(2) .n{color:var(--accent)}
.scorebox .l{font-size:.72rem;color:var(--ink-3);letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.gapline{border:0;background:var(--accent);color:var(--accent-ink);padding:22px 24px;
  border-radius:var(--radius-lg);margin-bottom:22px;font-weight:500}
.gapline p{color:var(--accent-ink)}
.picks{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pickcard{display:block;text-align:start;min-height:48px;padding:20px;border:1.5px solid var(--line);
  border-radius:var(--radius-lg);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.pickcard:hover{border-color:var(--accent);background:var(--surface)}
.pickcard strong{display:block;font-family:var(--disp);font-size:1.2rem;font-weight:700;margin:6px 0 6px;letter-spacing:-.02em}
.pick-n{font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.pick-b{font-size:.9rem;color:var(--ink-2);line-height:1.5}
.codebox{font-family:var(--disp);font-size:clamp(2.4rem,8vw,4rem);font-weight:800;letter-spacing:.02em;
  text-align:center;color:var(--accent-ink);background:var(--accent);border-radius:var(--radius-lg);
  padding:26px 18px;margin:8px 0 22px}
ul.plain{padding-inline-start:22px;color:var(--ink-2);font-size:.97rem}
ul.plain li{margin-bottom:.55em}
ul.plain strong{color:var(--ink)}

/* ── footer ───────────────────────────────────────────────── */
.site-foot{background:var(--bg);border-block-start:1px solid var(--line);color:var(--ink-2);
  margin-top:56px;padding:34px 0;text-align:start}
.foot-lead{font-weight:600;color:var(--ink);margin-bottom:.6em}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.92rem}
.foot-links a{color:var(--ink-2);text-decoration:none;font-weight:600}
.foot-links a:hover{color:var(--accent)}
.foot-fine{font-size:.8rem;color:var(--ink-3);margin:16px 0 0}

/* ── print sheets ─────────────────────────────────────────
   On screen these follow the dark design; @media print inverts the whole page,
   because a near-black flood fill is unusable on paper. */
.sheets{max-width:880px;margin:0 auto;padding:0 40px}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:38px 34px;margin-bottom:28px}
.sh-kicker{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:.5em}
.sh-h{font-family:var(--disp);font-size:2rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.7em}
.sh-moves{padding-inline-start:24px;margin:0 0 20px}
.sh-moves li{margin-bottom:.8em;color:var(--ink-2)}
.sh-moves strong{color:var(--ink)}
.sh-grid{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sh-grid li{border-inline-start:3px solid var(--accent);padding-inline-start:13px}
.sh-grid strong{display:block;font-size:.97rem}
.sh-grid span{font-size:.87rem;color:var(--ink-3)}
.sh-script{padding-inline-start:24px;margin:0 0 18px}
.sh-script li{margin-bottom:.85em;color:var(--ink-2)}
.sh-script strong{color:var(--ink)}
.sh-note{background:var(--surface-2);border-inline-start:3px solid var(--accent);border-radius:12px;
  padding:15px 17px;font-size:.95rem;color:var(--ink-2)}
.sh-foot{font-size:.8rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px;margin:20px 0 0}

@media print{
  .noprint,.mast,.mainnav,.subnav,.langbar,.reviewbar,.site-foot,.hero::after{display:none!important}
  html,body{background:#fff!important;color:#000!important;font-size:12pt}
  *{color:#000!important;background:transparent!important;box-shadow:none!important}
  .sheets{max-width:none;padding:0}
  .sheet{border:none;padding:0;margin:0;page-break-after:always;break-after:page}
  .sheet:last-child{page-break-after:auto;break-after:auto}
  .sh-kicker,.sh-grid li,.sh-moves li,.sh-script li,.sh-grid span,.sh-foot{color:#000!important}
  .sh-grid li{border-inline-start:3px solid #000}
  .sh-note{background:#f2f2f2!important;border-inline-start:3px solid #000}
  .ask::before{border-color:#000}
  .ask,.takeaway,.callout,.gapline,.codebox{border:1px solid #000!important}
  a{color:#000!important;text-decoration:none}
}

/* ── narrow ───────────────────────────────────────────────── */
@media(max-width:820px){
  .wrap{padding:0 20px}
  .sheets{padding:0 20px}
  .hero{padding:48px 0 44px}
  .hero::after{width:340px;height:340px;inset-inline-end:-160px}
  .page-head{padding:40px 0 6px}
  .stat{grid-template-columns:1fr;gap:8px}
  .moves li{padding:26px 0}
  [dir=rtl] .moves li{padding:26px 0}
  .move-n{position:static;font-size:3.4rem}
  .cta-row .btn{flex:1 1 100%}
  .qcard,.sheet{padding:22px 20px}
  .callout{padding:26px 22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}