/* win27.info — Draw sheet: a printed mobile-esports tournament bracket.
   Seeds, connector elbows, rounds, grand-final stage. */
:root{
 --paper:#EFEEE9;--paper-2:#E4E3DC;--card:#FAFAF6;--ink:#13161B;--ink-2:#2A2F36;--muted:#4B5058;
 --line:#C8C9C2;--line-2:#9DA099;--volt:#D4F53C;--volt-2:#BFE21F;--green:#0F5A43;--green-2:#0A3F2F;
 --coral:#F0492B;--coral-ink:#B3311A;--stage:#0C1411;--stage-2:#131E1A;--stage-line:rgba(212,245,60,.16);
 --font-head:'Tourney','Arial Narrow',system-ui,sans-serif;--font-body:'Inclusive Sans',system-ui,-apple-system,'Segoe UI',sans-serif,'Noto Color Emoji';
 --font-num:'Jersey 10','Courier New',monospace;
 /* game runtime defaults */
 --primary:var(--green);--primary-contrast:#fff;--accent:var(--volt);--surface:var(--card);--surface-2:var(--paper-2);--border:var(--line);--heading:var(--ink);--text:var(--ink-2);
 --gut:clamp(16px,4vw,40px);--bw:2px;
 --grid:linear-gradient(rgba(19,22,27,.055) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgba(19,22,27,.055) 1px,transparent 1px) 0 0/28px 100%;
 --brk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='44' fill='none' stroke='%2313161B' stroke-width='1.5'%3E%3Cpath d='M0 6h34v32H0M34 22h34M68 22h32M100 6h34v32h-34M134 22h34'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:92px}
body{margin:0;background:var(--paper);color:var(--ink-2);font:400 17px/1.65 var(--font-body);overflow-x:clip;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--green);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--green-2);text-decoration-color:var(--volt-2)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.ftr :focus-visible,.stage :focus-visible,.final :focus-visible{outline-color:var(--volt)}
h1,h2,h3{color:var(--ink);font-family:var(--font-head);margin:0}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:99;background:var(--volt);color:var(--ink);padding:12px 16px;font-weight:700;border:var(--bw) solid var(--ink)}
.skip:focus{top:12px}

/* ---------- brand ---------- */
.brand{display:inline-flex;align-items:stretch;text-decoration:none;color:var(--ink);min-height:44px;flex:none}
.brand .bw{font:italic 900 26px/1 var(--font-head);font-stretch:87.5%;text-transform:uppercase;letter-spacing:-.01em;display:flex;align-items:center;padding:0 8px 0 0}
.brand .bs{font:400 30px/1 var(--font-num);background:var(--ink);color:var(--volt);display:flex;align-items:center;padding:4px 9px 2px;min-width:46px;justify-content:center;position:relative}
.brand .bs::after{content:"";position:absolute;right:-7px;top:50%;width:7px;border-top:var(--bw) solid var(--ink)}
.brand .btag{align-self:center;margin-left:14px;font:700 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1.5px solid var(--line-2);padding:5px 7px}
.brand:hover{color:var(--ink)}
.brand-inv{color:var(--paper)}.brand-inv:hover{color:#fff}
.brand-inv .bs{background:var(--volt);color:var(--ink)}
.brand-inv .bs::after{border-color:var(--volt)}
.brand-inv .btag{color:#B9BDB3;border-color:#555B55}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hdr-in{display:flex;align-items:center;gap:12px;min-height:68px;position:relative}
.hdr-rule{height:6px;border-top:var(--bw) solid var(--ink);border-bottom:1px solid var(--line-2);background:linear-gradient(90deg,var(--volt) 0 64px,transparent 64px)}
.menu-btn{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:46px;min-width:46px;padding:0 14px;background:var(--card);color:var(--ink);border:var(--bw) solid var(--ink);font:700 15px/1 var(--font-body);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.menu-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.mb-ic{display:grid;gap:4px;width:20px}
.mb-ic i{display:block;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.mb-ic i:nth-child(2){width:70%}
.menu-btn[aria-expanded=true]{background:var(--ink);color:var(--volt)}
.menu-btn[aria-expanded=true] .mb-ic i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] .mb-ic i:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] .mb-ic i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hdr-cta{display:none}
.nav{display:none}
.nav-l{list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;color:var(--ink)}
.nn{font:400 20px/1 var(--font-num);display:inline-grid;place-items:center;min-width:34px;height:30px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);padding-top:2px}
.nav a[aria-current=page] .nn{background:var(--ink);color:var(--volt);border-color:var(--ink)}
.nav a[aria-current=page] .nl{font-weight:700}
/* mobile sheet: the menu is a bracket — every seed runs into one rail */
.nav-open .nav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:var(--bw) solid var(--ink);box-shadow:0 18px 30px rgba(19,22,27,.14);padding:14px var(--gut) 20px;max-height:calc(100dvh - 76px);overflow-y:auto}
.nav-open .nav-l{position:relative;display:grid;gap:8px;padding-right:44px}
.nav-open .nav-l::after{content:"";position:absolute;right:20px;top:26px;bottom:26px;border-right:var(--bw) solid var(--ink)}
.nav-open .nav-l li{position:relative}
.nav-open .nav-l li::after{content:"";position:absolute;left:100%;top:50%;width:24px;border-top:var(--bw) solid var(--ink)}
.nav-open .nav-l a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 12px 0 8px;background:var(--card);border:1.5px solid var(--ink);font-size:17px}
.nav-open .nav-l a[aria-current=page]{background:var(--volt)}
.nav-play{display:flex;align-items:center;justify-content:center;margin-top:16px;min-height:52px;background:var(--ink);color:var(--volt)!important;font:italic 800 17px/1 var(--font-head);text-transform:uppercase;letter-spacing:.02em}
.lsw{display:flex;gap:4px}
.lsw a{min-height:44px;min-width:44px;display:grid;place-items:center;padding:0 8px;border:1.5px solid var(--ink);text-decoration:none;color:var(--ink);font-weight:700;font-size:14px}
.lsw a[aria-current=true]{background:var(--ink);color:var(--volt)}
@media (max-width:420px){.brand .btag{display:none}}
@media (min-width:640px){
 .hdr-cta{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;background:var(--volt);color:var(--ink);border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);text-decoration:none;font:italic 800 15px/1 var(--font-head);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;order:5}
 .hdr-cta:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
 .menu-btn{order:4}
 .lsw{order:3;margin-left:auto}
 .lsw~.menu-btn{margin-left:0}
}
@media (min-width:1180px){
 .menu-btn{display:none}
 .hdr-in{gap:20px}
 .nav{display:flex!important;align-items:center;position:static!important;margin-left:auto;padding:0!important;border:0!important;box-shadow:none!important;background:none!important;order:2}
 .nav-l{display:flex;gap:2px}
 .nav-l a{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 10px;font-size:15.5px;position:relative;white-space:nowrap}
 .nav-l a::after{content:"";position:absolute;left:10px;right:10px;bottom:-11px;height:5px;background:transparent}
 .nav-l a:hover .nn{background:var(--volt)}
 .nav-l a[aria-current=page]::after{background:var(--ink)}
 .nav-play{display:none}
 .lsw{margin-left:0}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:var(--bw) solid var(--ink);font:italic 800 16px/1.1 var(--font-head);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;text-align:center;transition:transform .15s,box-shadow .15s,background .15s}
.btn-volt{background:var(--volt);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-volt:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}

/* ---------- home hero ---------- */
.hero{position:relative;background:var(--grid),var(--paper);border-bottom:var(--bw) solid var(--ink);padding:clamp(28px,5vw,64px) 0 clamp(36px,6vw,72px)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:44px;background:var(--brk) 0 0/168px 44px repeat-x;opacity:.16;pointer-events:none}
.hero-g{display:grid;gap:clamp(28px,5vw,56px);position:relative;z-index:1}
.tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 12px;background:var(--ink);color:var(--paper);font:700 13px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.tag-d{width:10px;height:10px;background:var(--volt);flex:none}
.hero h1{font:italic 900 clamp(2.35rem,1.5rem + 4.4vw,4.9rem)/.94 var(--font-head);font-stretch:80%;text-transform:uppercase;letter-spacing:-.005em;margin:0 0 22px;text-wrap:balance;overflow-wrap:break-word}
.lead{font-size:clamp(17px,1rem + .35vw,19.5px);line-height:1.62;color:var(--ink-2);max-width:62ch}
.lead p:last-child{margin-bottom:0}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 30px}
.seeds{list-style:none;margin:0;padding:0 44px 0 0;display:grid;gap:8px;position:relative;max-width:520px}
.seeds li{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 14px 6px 0;background:var(--card);border:var(--bw) solid var(--ink);font:700 15px/1.3 var(--font-body);color:var(--ink)}
.seeds li::after{content:"";position:absolute;left:100%;top:50%;width:22px;margin-left:var(--bw);border-top:var(--bw) solid var(--ink);transform-origin:left}
.seeds .sd{align-self:stretch;margin:-6px 0;display:grid;place-items:center;min-width:40px;background:var(--ink);color:var(--volt);font:400 24px/1 var(--font-num)}
.seeds::before{content:"";position:absolute;right:20px;top:24px;bottom:24px;border-right:var(--bw) solid var(--ink)}
.seeds::after{content:"";position:absolute;right:-6px;top:calc(50% - 6px);width:28px;height:12px;background:linear-gradient(var(--ink),var(--ink)) 0 50%/100% 2px no-repeat,linear-gradient(var(--volt),var(--volt)) 100% 50%/12px 12px no-repeat;outline:0}
@media (min-width:980px){
 .hero-g{grid-template-columns:minmax(0,1fr) minmax(420px,560px);align-items:start}
 .hero-c{padding-top:8px}
 .seeds{max-width:none;padding-right:0;margin-right:calc(-1 * clamp(28px,5vw,56px))}
 .seeds li{width:min(100% - 92px,400px)}
 .seeds::before{right:auto;left:calc(min(100% - 92px,400px) + 24px)}
 .seeds::after{right:0;left:calc(min(100% - 92px,400px) + 24px);width:auto;background:linear-gradient(var(--ink),var(--ink)) 0 50%/100% 2px no-repeat,linear-gradient(var(--volt),var(--volt)) 100% 50%/12px 12px no-repeat}
 .seeds li::after{width:24px}
}

/* ---------- stage (grand final) ---------- */
.stage{position:relative;background:var(--stage);color:#EEF3E6;border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--ink);container-type:inline-size;scroll-margin-top:84px;min-width:0}
.stage::before{content:"";position:absolute;inset:8px;pointer-events:none;z-index:2;
 background:linear-gradient(var(--volt),var(--volt)) 0 0/18px 2px,linear-gradient(var(--volt),var(--volt)) 0 0/2px 18px,
 linear-gradient(var(--volt),var(--volt)) 100% 0/18px 2px,linear-gradient(var(--volt),var(--volt)) 100% 0/2px 18px,
 linear-gradient(var(--volt),var(--volt)) 0 100%/18px 2px,linear-gradient(var(--volt),var(--volt)) 0 100%/2px 18px,
 linear-gradient(var(--volt),var(--volt)) 100% 100%/18px 2px,linear-gradient(var(--volt),var(--volt)) 100% 100%/2px 18px;background-repeat:no-repeat}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 12px 22px;border-bottom:1px solid var(--stage-line);background:linear-gradient(90deg,rgba(212,245,60,.09),transparent 60%)}
.st-t{font:italic 800 15px/1.2 var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--volt);display:flex;align-items:center;gap:10px}
.st-t::before{content:"";width:9px;height:9px;background:var(--coral);flex:none;animation:live 1.6s steps(2,jump-none) infinite}
.st-s{font:400 30px/1 var(--font-num);color:var(--ink);background:var(--volt);padding:3px 10px 1px;min-width:48px;text-align:center}
.stage-in{padding:4px 4px 6px}
@keyframes live{50%{opacity:.25}}

/* ---------- inner page head ---------- */
.phead{background:var(--grid),var(--paper);border-bottom:var(--bw) solid var(--ink);padding:clamp(20px,4vw,44px) 0 clamp(28px,5vw,52px);position:relative}
.phead-g{display:grid;gap:28px}
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:15px}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:22px;height:12px;margin:0 8px;border-top:var(--bw) solid var(--ink);border-right:var(--bw) solid var(--ink);transform:translateY(5px)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);text-decoration:none;font-weight:700}
.crumbs a:hover{background:var(--volt)}
.crumbs span{color:var(--muted);font-weight:600;padding:6px 0}
.phead h1{font:italic 900 clamp(2rem,1.3rem + 3.3vw,3.9rem)/.98 var(--font-head);font-stretch:80%;text-transform:uppercase;margin:0 0 18px;text-wrap:balance;overflow-wrap:break-word;max-width:20ch}
.nm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;gap:0;max-width:520px}
.pnum{font:400 clamp(64px,8vw,100px)/.8 var(--font-num);color:var(--ink);background:var(--volt);border:var(--bw) solid var(--ink);display:grid;place-items:center;padding:10px 14px 4px;min-width:1.6em}
.nm-card{background:var(--card);border:var(--bw) solid var(--ink);border-left:0;padding:16px 18px;position:relative}
.nm-t{font:italic 800 18px/1.15 var(--font-head);text-transform:uppercase;color:var(--ink);margin:0 0 6px}
.nm-p{font-size:15.5px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.nm .btn{min-height:48px;padding:0 14px;font-size:14px;white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}
@media (min-width:980px){
 .phead-g{grid-template-columns:minmax(0,1fr) 440px;align-items:end;gap:48px}
 .nm{grid-template-columns:auto 1fr}
}

/* ---------- body / article ---------- */
.body{padding:clamp(36px,6vw,72px) 0 clamp(40px,6vw,80px)}
.body-g{display:grid;gap:40px}
.art{min-width:0;container-type:inline-size;max-width:780px}
.intro-rest{margin-bottom:36px}
.rd{position:relative;margin:0 0 clamp(40px,5vw,60px)}
.rd-head{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;margin-bottom:18px}
.rd-n{display:grid;place-items:center;height:48px;border:var(--bw) solid var(--ink);background:var(--ink);color:var(--volt);font:400 30px/1 var(--font-num);padding-top:3px;position:relative}
.rd-n::after{content:"";position:absolute;left:100%;top:50%;width:14px;margin-left:var(--bw);border-top:var(--bw) solid var(--ink)}
.rd-f{background:var(--volt);color:var(--ink)}
.rd h2,.faq h2{font:italic 800 clamp(1.5rem,1.1rem + 1.6vw,2.2rem)/1.06 var(--font-head);font-stretch:87.5%;text-transform:uppercase;padding:6px 0 10px;border-bottom:var(--bw) solid var(--ink);text-wrap:balance;overflow-wrap:break-word}
.rd-body{min-width:0}
.rd-body>:last-child{margin-bottom:0}
.rd-body h3{font:italic 800 1.2rem/1.2 var(--font-head);text-transform:uppercase;margin:1.4em 0 .5em}
.rd-body strong{color:var(--ink)}
.rd-body ul,.rd-body ol{margin:0 0 1.2em;padding:0;list-style:none;display:grid;gap:10px}
.rd-body ul li{position:relative;padding-left:26px}
.rd-body ul li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:8px;border:var(--bw) solid var(--ink);border-left:0;background:linear-gradient(var(--volt),var(--volt)) 0 0/100% 100%}
.rd-body ol{counter-reset:s}
.rd-body ol li{counter-increment:s;position:relative;padding-left:48px;min-height:34px}
.rd-body ol li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.05em;width:36px;height:30px;display:grid;place-items:center;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font:400 22px/1 var(--font-num);padding-top:2px}
.tbl{overflow-x:auto;margin:0 0 1.4em;border:var(--bw) solid var(--ink);background:var(--card);-webkit-overflow-scrolling:touch}
.tbl table{border-collapse:collapse;width:100%;min-width:480px;font-size:15.5px;line-height:1.45}
.tbl th{background:var(--ink);color:var(--paper);text-align:left;font:700 13.5px/1.3 var(--font-body);letter-spacing:.05em;text-transform:uppercase;padding:12px 14px}
.tbl td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.tbl tr:nth-child(even) td{background:rgba(19,22,27,.03)}
@container (min-width:600px){
 .rd,.faq{padding-left:66px}
 .rd-head{margin-left:-66px;grid-template-columns:52px minmax(0,1fr)}
 .rd::before{content:"";position:absolute;left:25px;top:58px;bottom:6px;width:22px;border-left:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink)}
 .rd::after{content:"";position:absolute;left:43px;bottom:1px;width:12px;height:12px;background:var(--volt);border:var(--bw) solid var(--ink)}
}

/* FAQ = match cards */
.faq{margin-top:clamp(40px,5vw,64px)}
.faq-l{display:grid;gap:12px}
.mc{background:var(--card);border:var(--bw) solid var(--ink)}
.mc summary{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;min-height:60px;padding:8px 8px 8px 0;cursor:pointer;list-style:none;font:700 17px/1.35 var(--font-body);color:var(--ink)}
.mc summary::-webkit-details-marker{display:none}
.mc-n{align-self:stretch;margin:-8px 0;display:grid;place-items:center;border-right:var(--bw) solid var(--ink);font:400 24px/1 var(--font-num);color:var(--ink);background:var(--paper-2);padding-top:2px}
.mc-x{width:44px;height:44px;border:1.5px solid var(--ink);position:relative;justify-self:end}
.mc-x::before,.mc-x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:currentColor;translate:-50% -50%;transition:rotate .2s}
.mc-x::after{rotate:90deg}
.mc summary:hover .mc-x{background:var(--volt)}
.mc[open] summary{background:var(--ink);color:var(--paper)}
.mc[open] .mc-n{background:var(--volt);color:var(--ink);border-color:var(--ink)}
.mc[open] .mc-x{border-color:var(--volt);color:var(--volt)}
.mc[open] .mc-x::after{rotate:0deg}
.mc-a{padding:16px 18px 4px 58px;border-top:var(--bw) solid var(--ink)}
.mc-a p{margin-bottom:.8em}

/* page-end CTA = final */
.final{margin-top:clamp(40px,5vw,64px);background:var(--ink);color:var(--paper);border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--volt-2);position:relative;overflow:hidden}
.final::before{content:"";position:absolute;right:-20px;top:0;bottom:0;width:180px;background:var(--brk) 0 50%/168px 44px repeat-y;filter:invert(1);opacity:.12}
.final-in{position:relative;display:grid;gap:18px;padding:24px 22px 26px;border-left:10px solid var(--volt)}
.final p{font:italic 800 clamp(1.25rem,1rem + 1vw,1.7rem)/1.18 var(--font-head);text-transform:uppercase;margin:0;color:#fff;max-width:30ch}
.final .btn{justify-self:start;box-shadow:4px 4px 0 var(--volt-2);border-color:var(--volt)}

/* ---------- side TOC = bracket ladder ---------- */
.side{min-width:0}
.toc-h{margin:0 0 12px;font:italic 800 14px/1.2 var(--font-head);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);display:flex;align-items:center;gap:10px}
.toc-h::before{content:"";width:22px;height:10px;background:var(--volt);border:var(--bw) solid var(--ink)}
.toc ol{list-style:none;margin:0;padding:0 34px 0 0;display:grid;gap:8px;position:relative}
.toc ol::before{content:"";position:absolute;right:14px;top:24px;bottom:24px;border-right:var(--bw) solid var(--ink)}
.toc li{position:relative}
.toc li::after{content:"";position:absolute;left:100%;top:50%;width:18px;margin-left:var(--bw);border-top:var(--bw) solid var(--ink)}
.toc a{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:stretch;min-height:48px;background:var(--card);border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font-size:15px;line-height:1.3;transition:background .15s}
.tn{display:grid;place-items:center;border-right:1.5px solid var(--ink);font:400 22px/1 var(--font-num);padding-top:2px;background:var(--paper-2)}
.tl{padding:8px 10px;align-self:center}
.toc a:hover{background:#fff}
.toc a.done .tn{background:var(--ink);color:var(--volt)}
.toc a[aria-current=true]{background:var(--volt)}
.toc a[aria-current=true] .tn{background:var(--ink);color:var(--volt)}
@media (max-width:979px){
 .side{order:-1}
 .toc ol{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));padding:0}
 .toc ol::before,.toc li::after{display:none}
}
@media (min-width:980px){
 .body-g{grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
 .body-g.no-side{grid-template-columns:minmax(0,1fr)}
 .side{position:sticky;top:96px;max-height:calc(100vh - 110px);overflow-y:auto;padding:4px 4px 8px 0}
}

/* ---------- related ---------- */
.rel{background:var(--paper-2);border-top:var(--bw) solid var(--ink);padding:clamp(40px,6vw,72px) 0}
.rel-h{font:italic 900 clamp(1.7rem,1.2rem + 2vw,2.6rem)/1 var(--font-head);font-stretch:80%;text-transform:uppercase;margin:0 0 26px;display:flex;align-items:center;gap:14px}
.rel-h::after{content:"";flex:1;height:14px;border-top:var(--bw) solid var(--ink);border-right:var(--bw) solid var(--ink);transform:translateY(7px)}
.rel-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:18px 30px}
.rc{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto 1fr;height:100%;background:var(--card);border:var(--bw) solid var(--ink);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.rc-n{grid-row:1/3;display:grid;place-items:start center;padding-top:14px;background:var(--ink);color:var(--volt);font:400 26px/1 var(--font-num)}
.rc strong{font:italic 800 19px/1.15 var(--font-head);text-transform:uppercase;padding:14px 16px 10px;border-bottom:1.5px solid var(--line)}
.rc-d{padding:10px 16px 16px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.rc-a{position:absolute;right:-18px;top:22px;width:16px;border-top:var(--bw) solid var(--ink)}
.rc-a::after{content:"";position:absolute;right:-5px;top:-6px;width:10px;height:10px;background:var(--volt);border:var(--bw) solid var(--ink)}
.rc:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.rc:hover strong{background:var(--volt)}
.rel-g li{min-width:0}
@media (max-width:640px){.rc-a{display:none}}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#C9CDC4;padding:0 0 28px;position:relative;font-size:15.5px}
.ftr::before{content:"";display:block;height:44px;background:var(--brk) 0 0/168px 44px repeat-x;filter:invert(1);opacity:.22;border-bottom:1px solid #2C3137;margin-bottom:clamp(28px,5vw,48px)}
.ftr-g{display:grid;gap:32px}
.ftr-b p{margin:18px 0 0;line-height:1.6;max-width:52ch}
.ftr h2{font:italic 800 15px/1.2 var(--font-head);text-transform:uppercase;letter-spacing:.08em;color:var(--volt);margin:0 0 10px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li a{display:flex;align-items:center;min-height:44px;color:#EEF0EA;text-decoration:none;border-bottom:1px solid #2C3137}
.ftr li a::before{content:"";width:10px;height:2px;background:var(--volt);margin-right:12px;transition:width .15s}
.ftr li a:hover{color:var(--volt)}
.ftr li a:hover::before{width:18px}
.ftr-bot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:36px;padding-top:18px;border-top:var(--bw) solid #3A4047;color:#B5BAB0}
.age{display:inline-grid;place-items:center;min-width:48px;height:44px;padding:4px 8px 0;background:var(--coral);color:var(--ink);font:400 26px/1 var(--font-num)}
@media (min-width:760px){.ftr-g{grid-template-columns:1.4fr 1fr 1fr;gap:48px}}

/* ---------- 404 ---------- */
.hdr-nf{justify-content:flex-start}
.nf{padding:clamp(48px,10vw,120px) 0;min-height:50vh;background:var(--grid),var(--paper)}
.nf .pnum{display:inline-grid;margin-bottom:20px}
.nf h1{font:italic 900 clamp(2.2rem,6vw,4rem)/1 var(--font-head);text-transform:uppercase;margin:0 0 14px}

/* ---------- motion (decoration only; content is never hidden) ---------- */
@media (prefers-reduced-motion:no-preference){
 .seeds li::after{animation:wire .7s cubic-bezier(.2,.7,.2,1) both}
 .seeds li:nth-child(2)::after{animation-delay:.12s}.seeds li:nth-child(3)::after{animation-delay:.24s}
 .seeds::after{animation:wire .6s .36s cubic-bezier(.2,.7,.2,1) both;transform-origin:left}
 .brand .bs{animation:seed .9s .1s ease both}
 @keyframes wire{from{transform:scaleX(0)}to{transform:scaleX(1)}}
 @keyframes seed{0%{background:var(--volt);color:var(--ink)}100%{}}
 .brand-inv .bs{animation:none}
 html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.hdr,.side,.rel,.stage,.final{display:none}}