:root{--ink:#F1E9E2;--muted:#A89B94;--bg:#0B0909;--blood:#B3122A;--blood-2:#7A1020;--brass:#C9A24B;--brass-2:#E3C071;--glass:rgba(255,255,255,.05);--glass-line:rgba(201,162,75,.35);--line:rgba(201,162,75,.22);--radius:22px;--shadow:0 12px 36px rgba(0,0,0,.55);color-scheme:dark;--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;background:radial-gradient(900px 620px at 92% 0,#3A0D14,transparent 60%),radial-gradient(800px 600px at 6% 100%,#2A0A10,transparent 62%),radial-gradient(700px 500px at 50% 45%,#150C0D,transparent 70%),var(--bg);background-attachment:fixed}
a{color:var(--brass-2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
.wrap{width:min(1120px,92vw);margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.site-header{margin:14px auto 0}
.site-header .bar{display:flex;align-items:center;gap:18px;padding:6px 22px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.brand{display:inline-flex;align-items:center;gap:16px;font-weight:800;font-size:32px;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{display:block;width:156px;height:108px}
.age{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:28px;padding:0 10px;border:2px solid var(--brass);border-radius:999px;color:var(--brass-2);font-weight:800;font-size:14px;background:rgba(0,0,0,.3)}
main{display:block;padding:26px 0 40px}
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:center;padding:clamp(22px,4vw,44px);overflow:hidden;position:relative}
.eyebrow{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2)}
.hero h1{margin:0 0 12px;font-size:clamp(34px,6vw,64px);background:linear-gradient(90deg,#E8C26E,#E2525F);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:0;font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:560px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:800;font-size:15px;border:0;text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{color:#F1E9E2;background:linear-gradient(90deg,var(--blood),var(--blood-2));box-shadow:0 8px 22px rgba(179,18,42,.45);border:1px solid rgba(227,192,113,.4)}
.btn-ghost{color:var(--brass-2);background:transparent;border:1px solid var(--brass)}
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.6;pointer-events:none}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.card{padding:22px;transition:transform .2s ease,box-shadow .2s ease;transform-style:preserve-3d;will-change:transform}
.card h2{margin:12px 0 6px;font-size:22px}
.card p{margin:0;color:var(--muted)}
.card .pill{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;background:rgba(201,162,75,.14);color:var(--brass-2);font-weight:800;font-size:13px;border:1px solid rgba(201,162,75,.35)}
.ico{display:inline-grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:46px;height:46px;border-radius:12px;padding:7px;box-sizing:border-box;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.ico i{display:block;width:70%;height:70%;margin:auto;border-radius:50%}
.ico i.o{background:#F1E9E2}.ico.brass i.o{background:#1B1209}
.note{margin-top:22px;padding:16px 22px}
.age-note{display:flex;align-items:center;gap:12px;margin:0}
footer{margin:10px auto 26px}
footer .inner{padding:18px 26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px}
.article-header h1{font-size:clamp(30px,5vw,52px);margin:0 0 10px}
.article-content{max-width:780px;font-size:18px;line-height:1.75}
.article-content h2{margin:1.8em 0 .5em;font-size:clamp(22px,3vw,30px)}
.article-content a{text-decoration:underline;text-underline-offset:3px}
.article-content li::marker{color:var(--brass)}
.article-figure{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);margin:0 0 24px;border:1px solid var(--glass-line)}
.article-figure img{display:block;width:100%;height:auto}
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.in{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:10px}
@media(max-width:860px){.hero{grid-template-columns:1fr}.dice-box{order:-1}.cats{grid-template-columns:1fr}.brand{font-size:24px}.brand-mark{width:108px;height:75px}.site-header .bar{padding:6px 16px}}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1!important;transform:none!important;transition:none!important}.card,.btn{transition:none}}

/* dice stage */
.dice-box{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.dice-stage{--s:92px;position:relative;width:min(340px,100%);height:270px;perspective:900px;cursor:pointer;outline-offset:6px;-webkit-tap-highlight-color:transparent}
.world{position:absolute;left:50%;top:62%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-26deg) rotateY(-22deg)}
.die-wrap{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.die{position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);transform-style:preserve-3d}
.dface{position:absolute;inset:0;border-radius:18%;background:linear-gradient(145deg,#F7EFDF,#CDBFA3);box-shadow:inset 0 0 18px rgba(90,60,30,.3);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:15%;box-sizing:border-box;backface-visibility:hidden}
.dface i{display:block;width:74%;height:74%;margin:auto;border-radius:50%}
.dface i.o{background:radial-gradient(circle at 35% 30%,#C21A33,#5A0A16);box-shadow:inset 0 -2px 3px rgba(0,0,0,.35)}
.fa1{transform:translateZ(calc(var(--s)/2))}.fa6{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}.fa3{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}.fa4{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}.fa5{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}.fa2{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.floor-sh{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.floor-sh i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.75),rgba(0,0,0,0) 68%);transform:rotateX(90deg)}
.mat{position:absolute;left:-190px;top:-190px;width:380px;height:380px;border-radius:50%;transform:rotateX(90deg);background:radial-gradient(circle,rgba(122,16,32,.38),rgba(122,16,32,0) 66%);pointer-events:none}
.dice-result{margin:0;min-height:1.6em;font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--brass-2);text-align:center}
.dice-result small{display:block;font-weight:600;color:var(--muted);font-size:12px;letter-spacing:0}
.roll{font-size:14px;padding:9px 18px}
/* extras */
.hero::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(115deg,transparent 35%,rgba(227,192,113,.95) 50%,transparent 65%);background-size:260% 100%;animation:sweep 7s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
@keyframes sweep{from{background-position:130% 0}to{background-position:-130% 0}}
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(227,192,113,.16),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.card:hover::before{opacity:1}
.pips{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pips i{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(227,192,113,.5),rgba(122,16,32,.25));animation:drift linear infinite}
@keyframes drift{from{transform:translate3d(0,105vh,0)}to{transform:translate3d(var(--dx,20px),-12vh,0)}}
@media(prefers-reduced-motion:reduce){.hero::after,.pips i{animation:none}}
.world{transition:transform .25s ease}
@media(max-width:520px){.dice-stage{--s:72px;height:230px}.dice-stage .mat{transform:rotateX(90deg) scale(.8)}}

/* header search */
.search-btn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--glass-line);color:var(--ink);font:700 14px var(--font);cursor:pointer}
.search-btn:hover{border-color:var(--brass);color:var(--brass-2)}
.search-btn kbd{font:700 12px var(--font);padding:1px 7px;border-radius:6px;border:1px solid var(--glass-line);color:var(--muted)}
/* hero layers */
.hero .layer{position:absolute;pointer-events:none;will-change:transform;z-index:0}
.hero .layer-cup{left:-34px;bottom:-40px;width:250px;opacity:.14;filter:saturate(.6)}
.hero .layer-star{color:var(--brass-2);font-size:20px;opacity:.7;text-shadow:0 0 14px rgba(227,192,113,.7)}
.hero .layer-pip{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E3C071,#7A1020);opacity:.6}
.hero-copy,.dice-box{position:relative;z-index:1}
/* stats */
.stats-panel{margin-top:22px;padding:clamp(18px,3vw,30px)}
.stats-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.stats-head h2{margin:2px 0 6px;font-size:clamp(22px,3vw,30px)}
.stats-head .lead.sm{font-size:15px;max-width:560px}
.stats-actions{display:flex;flex-wrap:wrap;gap:10px}
.stats-actions .btn{font-size:13px;padding:8px 16px}
.hist{display:flex;align-items:stretch;gap:8px;height:190px;margin-top:22px}
.hcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.bars{position:relative;flex:1}
.theory{position:absolute;left:0;right:0;bottom:0;border:1px dashed rgba(227,192,113,.75);border-bottom:0;border-radius:8px 8px 0 0;background:rgba(227,192,113,.08)}
.mine{position:absolute;left:20%;right:20%;bottom:0;height:0;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#E2525F,#7A1020);box-shadow:0 0 14px rgba(179,18,42,.5);transition:height .55s cubic-bezier(.2,.9,.3,1.25)}
.hcol.seven .theory{border-color:var(--brass-2);background:rgba(227,192,113,.16)}
.hlab{margin-top:6px;text-align:center;font-weight:800;font-size:13px;color:var(--muted)}
.hcol.seven .hlab{color:var(--brass-2)}
.hist-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:14px;color:var(--muted);font-size:14px}
.hist-foot .legend{display:flex;gap:16px;align-items:center}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.sw.t{border:1px dashed rgba(227,192,113,.9);background:rgba(227,192,113,.15)}.sw.m{background:linear-gradient(180deg,#E2525F,#7A1020)}
.hist-row{display:flex;gap:6px;flex-wrap:wrap;min-height:34px}
.dot{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;border:1.5px solid var(--glass-line);color:var(--ink);background:rgba(255,255,255,.05);animation:pop .35s ease}
.dot.sev{background:var(--brass);color:#1B1209;border-color:var(--brass-2)}
.dot.dbl{background:var(--blood-2);border-color:var(--blood)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
/* table zone */
.table{position:relative;margin-top:22px;padding:30px clamp(16px,3vw,34px);background:radial-gradient(ellipse at 50% 20%,rgba(179,18,42,.3),rgba(50,5,12,.55) 72%),rgba(255,255,255,.03);overflow:hidden}
.table::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(201,162,75,.5);border-radius:calc(var(--radius) - 8px);pointer-events:none}
.table .cats{margin-top:0;position:relative;z-index:1}
.poker-chip{position:absolute;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle,#7A1020 0 50%,transparent 51%),repeating-conic-gradient(#F1E9E2 0 11deg,#B3122A 11deg 30deg);box-shadow:inset 0 0 0 5px rgba(0,0,0,.28),0 8px 16px rgba(0,0,0,.55);opacity:.85;pointer-events:none}
.poker-chip::after{content:"";position:absolute;inset:16px;border-radius:50%;border:2px dashed rgba(227,192,113,.8)}
.poker-chip.c1{right:-14px;top:-14px;transform:rotate(18deg)}.poker-chip.c2{left:-16px;bottom:-16px;transform:rotate(-12deg) scale(.9)}.poker-chip.c3{right:70px;bottom:-26px;transform:rotate(30deg) scale(.7)}
/* command palette */
.cmd-ov{position:fixed;inset:0;z-index:30000;background:rgba(5,3,3,.72);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;animation:fadein .2s ease}
.cmd{width:min(580px,100%);background:rgba(20,12,13,.94);border:1px solid var(--glass-line);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.7);overflow:hidden}
.cmd input{width:100%;padding:18px 22px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:600 18px var(--font);outline:none}
.cmd ul{list-style:none;margin:0;padding:8px;max-height:50vh;overflow:auto}
.cmd li a,.cmd li button{display:flex;width:100%;text-align:left;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;text-decoration:none}
.cmd li a small,.cmd li button small{color:var(--muted);font-size:13px}
.cmd li .on,.cmd li a:hover,.cmd li button:hover{background:rgba(201,162,75,.14);text-decoration:none}
.cmd .hint{padding:10px 16px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* chapter bar */
.chapter{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9000;width:min(640px,92vw);padding:10px 18px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.chapter .ct{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.chapter .ct b{color:var(--brass-2);white-space:nowrap}
.chapter .track{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.1)}
.chapter .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--blood),var(--brass));width:0}
.chapter .mk{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:6px;background:#F4ECDC;box-shadow:0 3px 8px rgba(0,0,0,.5);display:grid;place-items:center;font-size:11px;font-weight:800;color:#7A1020;left:0;transition:left .2s}
@media(max-width:860px){.hist{height:150px;gap:5px}.stats-head{align-items:flex-start}.poker-chip{width:48px;height:48px}.hero .layer-cup{width:170px}}
@media(prefers-reduced-motion:reduce){.mine{transition:none}.dot{animation:none}.cmd-ov{animation:none}}

/* navigation + footer (task 4) */
.tagline{margin:0;color:var(--muted);font-size:15px;max-width:340px;line-height:1.4}
.site-header .bar{justify-content:space-between}
.nav-pill{position:sticky;top:10px;z-index:9000;margin:14px auto 0}
.nav-inner{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(14,9,10,.82);border:1px solid var(--glass-line);box-shadow:var(--shadow);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.nav-inner ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex:1;min-width:0}
.nav-inner li{min-width:0}
.nav-item{display:block;padding:8px 14px;border-radius:999px;font:700 14px var(--font);color:var(--ink);white-space:nowrap;text-decoration:none;border:1px solid transparent}
a.nav-item:hover{background:rgba(201,162,75,.14);color:var(--brass-2);text-decoration:none}
.nav-item[aria-current=page]{background:linear-gradient(90deg,var(--blood),var(--blood-2));border-color:rgba(227,192,113,.5);color:#F1E9E2}
.nav-item.is-soon{color:var(--muted);cursor:default;opacity:.72}
.menu-toggle{display:none;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid var(--glass-line);background:rgba(255,255,255,.06);color:var(--ink);font:800 14px var(--font);cursor:pointer}
.menu-toggle .bars{display:inline-block;width:16px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.nav-inner .age{margin-left:auto}
.nav-inner .search-btn{margin-left:0}
footer .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px;padding:28px 30px}
.f-brand p{margin:10px 0 0;color:var(--muted);font-size:15px;max-width:380px}
.f-brand .f-logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px}
.f-brand img{width:78px;height:54px}
.f-col h3{margin:0 0 10px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-2)}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.f-col a{color:var(--ink)}
.f-col a:hover{color:var(--brass-2)}
.f-col .is-soon{color:var(--muted);cursor:default}
footer .footer-18{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 26px;font-size:14px;color:var(--muted);border-color:rgba(179,18,42,.55);background:linear-gradient(90deg,rgba(122,16,32,.35),rgba(255,255,255,.04))}
.footer-18 p{margin:0;flex:1;min-width:240px}
.footer-18 .age{flex:none;font-size:16px;height:34px;min-width:50px}
.footer-18 .copy{white-space:nowrap}
@media(max-width:1020px){.nav-item{padding:7px 10px;font-size:13px}}
@media(max-width:860px){
 .menu-toggle{display:inline-flex}
 .nav-inner ul{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;gap:2px;padding:10px;border-radius:20px;background:rgba(14,9,10,.96);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
 .nav-inner ul.open{display:flex}
 .nav-inner .age{margin-left:auto}
 .tagline{display:none}
 footer .footer-grid{grid-template-columns:1fr;padding:22px}
}

/* home sections (task 5) */
html{scroll-padding-top:90px}
.intro{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:22px}
.intro-lead{padding:26px 28px}
.intro-lead h2,.sec-head h2,.tool h2,.about-copy h2,.rg h2{margin:0 0 8px;font-size:clamp(22px,3vw,30px)}
.intro-lead p,.tool p,.about-copy p,.rg p{margin:0;color:var(--muted)}
.intro-list,.about-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.intro-list li,.about-list li{padding:14px 18px;display:grid;gap:2px}
.intro-list strong,.about-list strong{color:var(--brass-2)}
.intro-list span,.about-list span{color:var(--muted);font-size:15px}
.guides-wrap{margin-top:30px}
.sec-head{margin-bottom:16px}
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.guide{padding:22px;position:relative;overflow:hidden}
.guide h3{margin:10px 0 8px;font-size:20px}
.guide p{margin:0;color:var(--muted)}
.guide .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-2)}
.guide .pill{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;background:rgba(201,162,75,.14);color:var(--brass-2);font-weight:800;font-size:13px;border:1px solid rgba(201,162,75,.35)}
.tool{margin-top:22px;padding:22px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.tool .pill{padding:4px 12px;border-radius:999px;background:rgba(201,162,75,.14);color:var(--brass-2);font-weight:800;font-size:13px;border:1px solid rgba(201,162,75,.35)}
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:22px}
.about-copy{padding:26px 28px}
.rg{margin-top:22px;padding:22px 28px;display:flex;gap:18px;align-items:center;border-color:rgba(179,18,42,.55);background:linear-gradient(90deg,rgba(122,16,32,.35),rgba(255,255,255,.04))}
.rg .age{flex:none;font-size:18px;height:40px;min-width:58px}
@media(max-width:860px){.intro,.about,.guides{grid-template-columns:1fr}.rg{flex-direction:column;align-items:flex-start}}

/* service pages (task 6) */
.crumbs{display:flex;gap:8px;align-items:center;margin:4px 0 14px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--brass-2)}
.page{padding:clamp(22px,4vw,44px)}
.page-head h1{margin:0 0 10px;font-size:clamp(30px,5vw,52px)}
.page-head .lead{max-width:680px}
.page-content{max-width:780px;font-size:18px;line-height:1.75;margin-top:10px}
.page-content h2{margin:1.7em 0 .5em;font-size:clamp(22px,3vw,28px)}
.page-content a{text-decoration:underline;text-underline-offset:3px}
.page-content li{margin:.3em 0}
.page-content li::marker{color:var(--brass)}

/* articles (task 7) */
.page-head .meta{margin:12px 0 0;font-size:14px;color:var(--muted)}
.tbl-wrap{overflow-x:auto;margin:1.1em 0;border:1px solid var(--glass-line);border-radius:16px;background:rgba(255,255,255,.03)}
.tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.tbl th,.tbl td{padding:10px 14px;text-align:left;border-bottom:1px solid rgba(201,162,75,.18);white-space:nowrap}
.tbl th{color:var(--brass-2);font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:rgba(201,162,75,.08)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(255,255,255,.04)}
.callout{margin:1.8em 0 .4em;padding:16px 20px;border-radius:16px;border:1px solid rgba(179,18,42,.55);background:linear-gradient(90deg,rgba(122,16,32,.32),rgba(255,255,255,.03));font-size:16px;line-height:1.6;color:var(--muted)}
.callout strong{color:var(--ink)}
.rel{margin:0;padding-left:1.2em}
.guide a.stretch{color:inherit;text-decoration:none}
.guide a.stretch::after{content:"";position:absolute;inset:0}
.guide a.stretch:hover{color:var(--brass-2)}
.guide .pill.go{background:linear-gradient(90deg,var(--blood),var(--blood-2));color:#F1E9E2;border-color:rgba(227,192,113,.5)}

/* glossary + lead-sm (task 10) */
.page-content .lead-sm{color:var(--muted);margin:0 0 .4em}
.gloss{margin:.8em 0 0;display:grid;gap:0}
.gloss dt{font-weight:800;color:var(--brass-2);margin-top:1em;scroll-margin-top:90px}
.gloss dd{margin:.1em 0 0;color:var(--ink)}
.gloss dt:target{background:rgba(201,162,75,.14);border-radius:8px;padding:2px 8px;margin-left:-8px}

/* hubs + section nav (task 13) */
.nav-item.is-section{border-color:rgba(201,162,75,.55);color:var(--brass-2)}
.page-content .more{margin-top:.8em;color:var(--muted);font-size:16px}
.hub-more{margin:22px 0 0;color:var(--muted)}
.hub-more a{color:var(--brass-2)}
.page + .guides-wrap{margin-top:26px}

/* card thumbnails (home) */
.guide .thumb{display:block;margin:-22px -22px 14px;aspect-ratio:3/2;overflow:hidden;position:relative;z-index:0}
.guide .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.guide:hover .thumb img{transform:scale(1.05)}

/* task 18: age gate, dock, toc, progress, tooltips, tldr, chips */
.age-gate{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(6,3,4,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.age-box{max-width:460px;width:100%;padding:30px 26px;text-align:center;border-radius:22px;border:1px solid var(--glass-line);background:linear-gradient(160deg,rgba(44,17,22,.97),rgba(14,9,10,.99));box-shadow:var(--shadow)}
.age-box h2{margin:14px 0 8px;font-size:26px}
.age-box p{margin:0 0 20px;color:var(--muted)}
.age-box .age{font-size:20px;height:38px;min-width:64px}
.age-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.age-actions .btn{cursor:pointer}
body.lock{overflow:hidden}
.dock{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:8500;display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:999px;background:rgba(14,9,10,.82);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.dock button{width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.dock button:hover,.dock button[aria-expanded=true]{border-color:var(--brass);color:var(--brass-2)}
.dock button[hidden]{display:none}
.dock svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toc-pop{position:fixed;right:78px;top:50%;transform:translateY(-50%);z-index:8501;width:min(330px,76vw);max-height:70vh;overflow:auto;padding:16px;border-radius:18px;background:rgba(14,9,10,.97);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.toc-pop h3{margin:0 0 10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-2)}
.toc-pop ol{margin:0;padding-left:1.3em;display:grid;gap:7px;font-size:15px}
.toc-pop a{color:var(--ink);text-decoration:none}
.toc-pop a:hover{color:var(--brass-2)}
.toc-pop a.on{color:var(--brass-2);font-weight:800}
.rprog{position:fixed;left:0;top:0;height:3px;width:0;z-index:9500;background:linear-gradient(90deg,var(--blood),var(--brass));pointer-events:none}
.tip{position:fixed;z-index:100001;max-width:300px;padding:10px 14px;border-radius:12px;background:rgba(14,9,10,.97);border:1px solid var(--glass-line);box-shadow:var(--shadow);font-size:14px;line-height:1.5;color:var(--ink);pointer-events:none}
.tip b{display:block;color:var(--brass-2);margin-bottom:2px}
.tldr{margin:0 0 1.4em;padding:16px 20px;border-radius:16px;border:1px solid rgba(201,162,75,.35);background:rgba(255,255,255,.04)}
.tldr strong{display:block;color:var(--brass-2);text-transform:uppercase;letter-spacing:.12em;font-size:13px;margin-bottom:6px}
.tldr ul{margin:0;padding-left:1.1em}
.tldr li{margin:.25em 0;font-size:17px;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chips button{padding:8px 16px;border-radius:999px;border:1px solid var(--glass-line);background:rgba(255,255,255,.05);color:var(--ink);font:800 14px var(--font);cursor:pointer}
.chips button:hover{border-color:var(--brass)}
.chips button[aria-pressed=true]{background:linear-gradient(90deg,var(--blood),var(--blood-2));border-color:rgba(227,192,113,.6)}
.guide[hidden]{display:none}
@media(max-width:860px){.dock{right:8px;padding:6px;gap:6px}.dock button{width:40px;height:40px}.toc-pop{right:62px}}