/* v4 design (2026-11-10, "quiet premium", owner picked A of 3 live directions; see DESIGN.md). v3 broadsheet, v2 case file.
   Near-white paper, true black ink, one oxblood accent. Newsreader (display + body), Schibsted Grotesk (UI). No decoration. */
:root{
  --paper:#FBFAF7; --surface:#FFFFFF; --ink:#111111; --muted:#3F3F3F; --rule:#CFCBC3;
  --ox:#8C1C28; --ox-soft:#F4E7E8; --brass:#8A6A2C; --navy:#111111; --ok:#2F5D50; --on-ox:#FFFFFF;
  --display:Newsreader,Georgia,serif; --serif:Newsreader,Georgia,serif; --sans:'Schibsted Grotesk',Arial,sans-serif;
  --ui:'Schibsted Grotesk',Arial,sans-serif; --mono:'Schibsted Grotesk',Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#121212; --surface:#1B1B1B; --ink:#ECEAE5; --muted:#A3A09A; --rule:#2E2D2B;
  --ox:#E0848F; --ox-soft:#2A1C1E; --brass:#CFAE6E; --navy:#0B0B0B; --ok:#86C2A8; --on-ox:#1B0E10;}}
:root[data-theme="dark"]{--paper:#121212; --surface:#1B1B1B; --ink:#ECEAE5; --muted:#A3A09A; --rule:#2E2D2B;
  --ox:#E0848F; --ox-soft:#2A1C1E; --brass:#CFAE6E; --navy:#0B0B0B; --ok:#86C2A8; --on-ox:#1B0E10;}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 19px/1.65 var(--serif);overflow-x:hidden}
a{color:var(--ox);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:9}.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3,.btn,nav,.logo,.crumbs,.meta,.row-meta,.box-t,.toc summary,.num,.lb span,.muted,.foot-links,.fine{font-family:var(--sans)}
h1{font-size:clamp(32px,4.6vw,48px);line-height:1.08;font-weight:800;font-stretch:80%;letter-spacing:-.01em;margin-bottom:18px}
h2{font-size:clamp(24px,3.6vw,32px);line-height:1.15;font-weight:800;font-stretch:85%;margin:48px 0 14px}
h3{font-size:19px;line-height:1.3;font-weight:700;margin:26px 0 8px}
p{margin:0 0 18px}
.lead{font-size:clamp(20px,2.4vw,23px);line-height:1.5;color:var(--muted)}
.muted{color:var(--muted);font-size:15px;line-height:1.5}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.wrap-text{max-width:720px;margin:0 auto;padding:0 16px}

/* header / footer */
header.site{border-bottom:1px solid var(--rule);background:var(--surface)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;min-height:64px;padding-top:10px;padding-bottom:10px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-stretch:85%;font-size:19px}
.mark{width:22px;height:16px;fill:var(--ox)}
nav{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center;font-size:15px;font-weight:500}
nav a{color:var(--ink);text-decoration:none}nav a:hover{color:var(--ox)}
.nav-cta{border:1.5px solid var(--ox);color:var(--ox)!important;padding:5px 12px;border-radius:6px;font-weight:700}
footer.site{margin-top:80px;background:var(--navy);color:#C9CFDA;padding:48px 0 24px}
footer.site .wrap:first-child{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer.site .logo{color:#fff}footer.site .mark{fill:#E0848F}
footer.site p{font-size:16px;margin-top:10px}
.foot-links{display:flex;flex-direction:column;gap:6px;font-size:15px}
.foot-links a{color:#C9CFDA;text-decoration:none}.foot-links a:hover{color:#fff}
.foot-links b{color:#fff}
.fine{font-size:13px;color:#8C95A8;margin-top:36px}

/* buttons */
.btn{display:inline-block;background:var(--ox);color:var(--on-ox);font-weight:700;font-size:17px;padding:13px 22px;border-radius:8px;border:0;cursor:pointer;text-decoration:none;margin:4px 8px 4px 0}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost{color:var(--ink)}

/* lever bar: the signature element */
.leverbar{display:flex;gap:6px;align-items:flex-end;height:44px;margin:18px 0}
.leverbar.big{height:120px;gap:10px}
.lb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:22px;text-decoration:none}
.leverbar.big .lb{width:clamp(18px,4vw,34px)}
.lb i{display:block;width:100%;height:28%;background:var(--rule);border-radius:3px;transition:height .25s}
.lb span{font-size:11px;color:var(--muted);margin-top:4px;line-height:1}
.lb.on i{height:72%;background:var(--brass)}
.lb.primary i{height:100%;background:var(--ox)}
.lb:hover i{background:var(--ox);opacity:.8}
@media (prefers-reduced-motion:reduce){.lb i{transition:none}}

/* home */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:56px}
.hero h1{font-size:clamp(44px,7vw,84px);line-height:1}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.num{position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--ox);color:var(--on-ox);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
h1 .num{position:static;display:inline-flex;width:.9em;height:.9em;font-size:.8em;vertical-align:.05em;margin-right:6px}

/* rows (article lists) */
.rows{list-style:none;border-top:1px solid var(--rule)}
.row{border-bottom:1px solid var(--rule)}
.row a{display:grid;grid-template-columns:150px 1fr;gap:2px 20px;padding:16px 0;text-decoration:none;color:var(--ink)}
.row-meta{grid-row:span 2;font-size:13px;font-weight:600;color:var(--brass);padding-top:4px}
.row-t{font-family:var(--sans);font-weight:700;font-size:19px;line-height:1.3}
.row-d{font-size:16px;color:var(--muted);line-height:1.45}
.row a:hover .row-t{color:var(--ox)}
.split .row a{grid-template-columns:1fr}.split .row-meta{grid-row:auto;padding:0}

/* article */
.art-head{padding-top:48px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:14px}.crumbs a{color:var(--muted)}
.meta{font-size:14px;color:var(--muted);margin:0}
.art-grid{display:grid;grid-template-columns:1fr minmax(0,720px) 1fr;gap:0 32px;margin-top:24px}
.art-side{grid-column:1;justify-self:end;width:100%;max-width:260px}
.art-grid .prose{grid-column:2;padding:0 16px;width:100%}
.toc{font-family:var(--sans);font-size:15px;border-top:2px solid var(--ink);padding-top:10px;position:sticky;top:20px}
.toc summary{font-weight:700;cursor:pointer;margin-bottom:8px}
.toc ol{padding-left:20px;color:var(--muted)}.toc li{margin:6px 0;line-height:1.35}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--ox)}
.prose ul,.prose ol{padding-left:24px;margin:0 0 18px}.prose li{margin:6px 0}
.prose blockquote{padding:0 0 0 22px;font-style:italic;font-size:21px;color:var(--ink);margin:0 0 18px}
.prose h2{scroll-margin-top:16px}
.tablewrap{overflow-x:auto;margin:0 0 22px}
table{border-collapse:collapse;width:100%;font-size:16px;font-family:var(--sans)}
th,td{border-bottom:1px solid var(--rule);padding:9px 10px;text-align:left;vertical-align:top}
th{font-weight:700;border-bottom:2px solid var(--ink)}
.sources{font-size:15px;color:var(--muted);border-top:1px solid var(--rule);padding-top:14px;margin-top:32px}

/* boxes: no side stripes. Each kind has its own form; a mono tag names it. */
.tag{display:inline-block;font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:10px;vertical-align:2px}
.box{margin:30px 0;padding:18px 20px 6px;background:var(--surface);border:1px solid var(--rule);font-size:18px}
.box-t{font-weight:800;font-size:20px;line-height:1.35;margin-bottom:12px}
.box-t .tag{display:block;margin:0 0 6px;font-size:13px}   /* owner 2026-11-10: label on its own row above the title */
.box ul,.box ol{padding-left:22px}
.box-verdict{background:var(--navy);color:#E9ECF2;border:0;padding:22px 24px 8px}
.box-verdict .tag{color:#E0B66A}.box-verdict a{color:#F0A5AE}.box-verdict strong{color:#fff}
.box-verdict ul{list-style:none;padding:0}.box-verdict li{padding:8px 0;border-top:1px solid #34405A}
.pips{display:inline-flex;gap:4px;margin-right:8px;vertical-align:1px}.pips i{width:10px;height:10px;border-radius:50%;border:1.5px solid #E0B66A}.pips i.on{background:#E0B66A}
.box-example{background:transparent;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0 4px}
.box-example .tag{color:var(--ink)}
.say,.nosay{display:inline-block;font:600 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;margin-right:6px;vertical-align:2px}
.say{background:var(--ok);color:#fff}.nosay{background:var(--rule);color:var(--ink);text-decoration:line-through}
.box-trap{display:grid;grid-template-columns:150px 1fr;gap:0 20px;background:var(--ox-soft);border:0;padding:16px 20px 4px}
.box-trap .box-t{grid-row:span 9;margin:2px 0 12px}.box-trap .tag{color:var(--ox);line-height:1.5;white-space:normal}
.box-trap > :not(.box-t){grid-column:2}
.box-dark{background:var(--ink);color:var(--paper);border:0;padding:22px 24px 8px}.box-dark .tag{color:#E0848F}
.box-dark a{color:var(--ox-soft)}
.box-clean{background:transparent;border:0;border-top:1px solid var(--ok);border-bottom:1px solid var(--ok);padding:16px 0 4px}
.box-clean .tag{color:var(--ok)}
.box-note{background:transparent;border:0;padding:0;font-style:italic;font-size:20px;color:var(--ink)}
.box-note .tag{font-style:normal;color:var(--ox)}
.box-drill{border:1.5px dashed var(--brass);background:transparent}.box-drill .tag{color:var(--brass)}
.box-drill ol,.box-drill ul{list-style:none;padding:0}.box-drill li{margin:8px 0}
.box-drill label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.box-drill input{width:22px;height:22px;margin-top:4px;accent-color:var(--ok);flex:none}
.box-drill input:checked + span{color:var(--muted);text-decoration:line-through}

/* after article */
.trains{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:18px 0;margin-top:40px}
.trains p{margin:0 0 4px;font-size:17px}.trains .leverbar{margin:0}
/* FAQ (owner 2026-11-10 "make it nicer"): numbered rows, +/- marker, answer indented under the question */
.faq{margin-top:48px;border-top:2px solid var(--ink)}
.faq h2{margin:18px 0 6px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;display:grid;grid-template-columns:36px 1fr 24px;gap:0 12px;align-items:baseline;
  padding:16px 0;font:700 18px/1.45 var(--sans);cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--sans);color:var(--ox);text-align:right;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover .faq-q{color:var(--ox)}
.faq-n{font:600 13px/1 var(--mono);letter-spacing:.06em;color:var(--ox)}
.faq details p{margin:0 0 18px 48px;color:var(--muted);font-size:18px;max-width:60ch}
@media (max-width:600px){.faq summary{grid-template-columns:28px 1fr 20px;gap:0 8px}.faq details p{margin-left:36px}}
.related h2{margin-top:40px}
.cta{margin:56px 0 0;padding:28px;background:var(--navy);color:#E9ECF2}.cta h2{color:#fff}.cta p{color:#C9CFDA}
.cta h2{margin:0 0 8px}
.cta form{display:flex;gap:8px;flex-wrap:wrap}
.cta input{flex:1 1 220px;padding:12px;font-size:17px;border:1.5px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink)}
.hub{padding-top:48px}
.lever-page,.idea{padding-top:48px}

/* quiz */
.quiz{padding-top:56px;min-height:60vh}
.quiz .bar{height:6px;background:var(--rule);border-radius:3px;margin:8px 0 24px;overflow:hidden}
.quiz .bar i{display:block;height:100%;background:var(--ox)}
.opt{display:block;width:100%;text-align:left;font:inherit;font-size:18px;padding:14px 16px;margin:10px 0;background:var(--surface);color:var(--ink);border:1.5px solid var(--rule);border-radius:8px;cursor:pointer}
.opt:hover{border-color:var(--ox)}
.kicker{font-family:var(--sans);font-weight:700;color:var(--brass);font-size:15px;margin-bottom:6px}
.do{background:var(--surface);border:1px solid var(--rule);padding:14px 16px;margin:18px 0}
.meter{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:center;font-family:var(--sans);font-size:15px}
.meter .bar{margin:6px 0}

/* responsive */
@media (max-width:1100px){
  .art-grid{grid-template-columns:minmax(0,720px);justify-content:center}
  .art-side{grid-column:1;max-width:none;justify-self:stretch;padding:0 16px}
  .art-grid .prose{grid-column:1}
  .toc{position:static;margin-bottom:8px}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:24px;padding-top:44px}
  .topics{grid-template-columns:1fr}.spectrum{grid-template-columns:1fr;gap:18px;padding-top:0}.sp-line,.sp-stop::before{display:none}
  .lever-index{columns:1}
  .split{grid-template-columns:1fr;gap:0}
  footer.site .wrap:first-child{grid-template-columns:1fr 1fr}
  .row a{grid-template-columns:1fr}.row-meta{grid-row:auto;padding:0}
}
@media (max-width:520px){
  body{font-size:18px}
  .box-trap{grid-template-columns:1fr}.box-trap .box-t{grid-row:auto}.box-trap > :not(.box-t){grid-column:1}
  footer.site .wrap:first-child{grid-template-columns:1fr}
  .trains{grid-template-columns:1fr}
  nav{gap:4px 14px;font-size:14px}
}

/* diagram box */
.box-diagram{padding:18px 20px 14px;margin:30px 0}
.box-diagram .dg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto;color:var(--ink)}
.box-diagram figcaption{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:10px}
.dg-list{font-family:var(--sans);font-size:15px;margin:10px 0 0;padding-left:22px}.dg-list li{margin:4px 0}

/* scenario box */
.box-scenario{padding:18px 20px;margin:26px 0}
.box-scenario .sc-q{font-weight:600;margin:0 0 12px}
.sc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sc-choice{display:block;width:100%;text-align:left;font:inherit;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--ox);border-radius:6px;padding:10px 12px;cursor:pointer}
.sc-choice:hover,.sc-choice:focus-visible{background:var(--ox-soft)}
.sc-fb{font-family:var(--sans);font-size:15px;margin:6px 2px 0;color:var(--muted)}
.sc-fb b{color:var(--ink)}
.sc-js .sc-fb{display:none}
.sc-js .sc-item.open .sc-fb{display:block}
.sc-js .sc-item.open.sc-best .sc-choice{border-color:var(--ok);background:var(--ox-soft)}

/* scenario: lettered choices */
.sc-list{counter-reset:sc}
.box-scenario .sc-choice{position:relative;padding-left:44px;border:1px solid var(--ink);border-radius:2px}
.box-scenario .sc-choice::before{counter-increment:sc;content:counter(sc,upper-alpha);position:absolute;left:14px;top:10px;font:600 13px/1.5 var(--mono);color:var(--ox)}

/* home v2 */
.hero-case .box-scenario{margin:0;background:var(--surface);border:1px solid var(--ink);padding:22px 22px 16px}
.case-more{font-family:var(--sans);font-size:15px;font-weight:700;margin:14px 0 0}
.spectrum-sec{padding-top:24px;padding-bottom:16px}
.spectrum{position:relative;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:28px;padding-top:40px}
.sp-line{position:absolute;left:0;right:0;top:15px;height:2px;background:var(--rule)}
.sp-stop{position:relative;font-size:17px;color:var(--muted)}
.sp-stop::before{content:"";position:absolute;top:-31px;left:0;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--muted)}
.sp-stop b{display:block;font-family:var(--sans);color:var(--ink);font-size:19px;margin-bottom:4px}
.sp-ours{color:var(--ink)}.sp-ours::before{width:20px;height:20px;top:-35px;background:var(--ox);border-color:var(--ox)}.sp-ours b{color:var(--ox)}
.topics{display:grid;grid-template-columns:1.1fr 1fr;gap:0 56px;border-top:2px solid var(--ink)}
.topic{padding:18px 0;border-bottom:1px solid var(--rule)}
.topic h3{margin:0 0 4px;font-size:22px}.topic h3 a{color:var(--ink);text-decoration:none}.topic h3 a:hover{color:var(--ox)}
.topic-main h3{font-size:clamp(28px,3.4vw,38px);font-stretch:85%}
.count{font:600 13px/1 var(--mono);color:var(--muted);vertical-align:middle;margin-left:6px}
.topic p{font-size:17px;color:var(--muted);margin-bottom:8px}
.topic ul{list-style:none;font-family:var(--sans);font-size:16px}.topic li{padding:5px 0}
.topic li a{color:var(--ink);text-decoration:none}.topic li a:hover{color:var(--ox);text-decoration:underline}
.topic-main{border-bottom:0}.topic-main ul{font-size:18px}
.topic-rest .topic:last-child{border-bottom:0}
.lever-index{list-style:none;columns:2;column-gap:56px;border-top:2px solid var(--ink);margin-bottom:24px}
.lever-index li{break-inside:avoid;border-bottom:1px solid var(--rule)}
.lever-index a{display:grid;grid-template-columns:44px 1fr;gap:0 10px;padding:12px 0;text-decoration:none;color:var(--ink)}
.li-n{grid-row:span 2;font:600 15px/1.6 var(--mono);color:var(--ox)}
.li-name{font-family:var(--sans);font-weight:700;font-size:18px}.li-line{font-size:16px;color:var(--muted);line-height:1.45}
.lever-index a:hover .li-name{color:var(--ox)}
/* article signature strip */
.lever-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 0 0;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lever-strip .leverbar{margin:0;height:36px}
.lever-strip p{margin:0;font-family:var(--sans);font-size:15px;font-weight:600}
.lever-strip p a{color:var(--ink)}
/* v2 mobile (must stay last: overrides the v2 home blocks above) */
@media (max-width:860px){
  .spectrum{grid-template-columns:1fr;gap:18px;padding-top:0}.sp-line,.sp-stop::before{display:none}
  .sp-stop{padding-left:16px;border-left:0}.sp-ours{background:var(--ox-soft);padding:12px 16px}
  .topics{grid-template-columns:1fr}
  .topic-main{border-bottom:1px solid var(--rule)}
  .lever-index{columns:1}
  .hero-case .box-scenario{padding:18px 16px 14px}
}
.box .sc-list{padding:0}

/* v2.1 header illustrations (DESIGN.md Imagery; ink-and-oxblood linocut, approved 2026-11-10) */
.art-fig,.home-fig{margin:28px 0 4px}
.art-fig img,.home-fig img{display:block;width:100%;height:auto;border-radius:2px;background:var(--surface)}
.home-fig{margin:8px auto 56px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .art-fig img,:root:not([data-theme="light"]) .home-fig img{filter:brightness(.92)}}
:root[data-theme="dark"] .art-fig img,:root[data-theme="dark"] .home-fig img{filter:brightness(.92)}

/* ================= v4 quiet premium layer (must stay after v2 rules) ================= */
body{font-size:20px;background-image:none;font-optical-sizing:auto}
h1,h2,h3,.logo,.row-t,.li-name,.topic h3,.sp-stop b,.box-t,.faq summary{font-family:var(--display);font-stretch:normal;font-weight:500;letter-spacing:-.015em}
h1{line-height:1.05}
.hero h1{font-size:clamp(52px,7vw,96px);font-weight:400;letter-spacing:-.03em;line-height:1}
.art-head{max-width:960px}
.art-head h1{font-size:clamp(40px,5.4vw,64px);font-weight:400;letter-spacing:-.025em;line-height:1.04}
.lead{font-size:clamp(21px,2.4vw,25px);color:var(--muted)}
.crumbs,.meta,.row-meta,.kicker,.lever-strip p,.case-more,.toc summary,.tag,.count,.li-n,.say,.nosay{font-family:var(--ui);letter-spacing:.01em;text-transform:none;font-weight:600}
.crumbs,.meta{font-size:14px}.crumbs a{color:var(--ox);text-decoration:none}
.tag{font-size:13px}.say,.nosay{font-size:12px}
.lever-strip{border:0;padding:6px 0}.lever-strip p{font-size:14px}.lever-strip p a{font-weight:600}
header.site{background:transparent;border-bottom:1px solid var(--rule)}
.mast{max-width:1160px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.mast-name .logo{font:600 24px/1 var(--display);letter-spacing:-.01em;gap:10px}
.mast nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 26px;font:600 15px/1.4 var(--ui)}
.nav-cta{border:1px solid var(--ox);border-radius:4px;padding:4px 12px}
section.wrap > h2,.related h2,.faq h2{border-top:1px solid var(--ink);padding-top:14px;font-size:clamp(26px,3.2vw,34px)}
.topics,.lever-index,.rows{border-top:1px solid var(--ink)}
.topic-rest{border-left:1px solid var(--rule);padding-left:28px}
.art-fig{margin:40px 0 8px}.art-fig img,.home-fig img{border:0;border-radius:0}
.prose h2{font-size:clamp(26px,3.2vw,34px)}
.row-t{font-size:22px}.li-name{font-size:20px}
.btn{border-radius:4px;font:600 16px/1 var(--ui);padding:14px 24px}
.btn.ghost{border:1px solid var(--ink)}
.opt,.cta input,.sc-choice{border-radius:4px}
.box-verdict,.cta{color:#EDEBE6}.box-verdict strong,.cta h2{color:#fff}.cta p{color:#CFCCC6}
footer.site{background:#111;color:#CFCCC6;border-top:0}
.foot-links a{color:#CFCCC6}.fine{color:#8E8B85}
@media (max-width:860px){.topic-rest{border-left:0;padding-left:0}.mast nav{justify-content:flex-start;gap:4px 18px}}

/* v3 nav dropdown: Articles -> topics (owner 2026-11-10) */
.navdd{position:relative}
.navdd summary{list-style:none;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:6px;padding:2px 0}
.navdd summary::-webkit-details-marker{display:none}
.navdd summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease-out}
.navdd[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.navdd summary:hover{color:var(--ox)}
.navdd-panel{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 12px);z-index:20;width:min(560px,92vw);background:var(--surface);border:1px solid var(--ink);padding:8px 20px 14px;text-align:left;text-transform:none;letter-spacing:0}
.navdd-panel ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.navdd-panel li a{display:block;padding:10px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.navdd-panel li b{display:block;font:500 19px/1.25 var(--display)}
.navdd-panel li span{display:block;font:400 14px/1.4 var(--serif);color:var(--muted);margin-top:2px}
.navdd-panel li a:hover b{color:var(--ox)}
.navdd-panel p{margin:12px 0 0;display:flex;gap:18px;flex-wrap:wrap;font:600 14px/1.4 var(--ui)}
.navdd-panel p a{color:var(--ox)}
@media (max-width:620px){.navdd-panel ul{grid-template-columns:1fr}.navdd-panel{position:fixed;left:4vw;right:4vw;width:auto;transform:none;top:auto;margin-top:12px}}
@media (prefers-reduced-motion:reduce){.navdd summary::after{transition:none}}
/* v3 start-here (owner 2026-11-10) */
.sh-hero{padding-top:44px;padding-bottom:8px}
.sh-hero h1{font-size:clamp(40px,6.4vw,76px);line-height:1;max-width:19ch}
.sh-hero .lead{max-width:62ch}
.sh-outs{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:28px 0 24px}
.sh-outs li{padding:14px 0 16px}
.sh-outs li + li{border-left:1px solid var(--rule);padding-left:28px}
.sh-outs b{display:block;font:500 21px/1.2 var(--display);margin-bottom:6px}
.sh-outs span{display:block;font-size:16px;line-height:1.45;color:var(--muted)}
.sh-intro{max-width:62ch;color:var(--muted)}
.sh-text{max-width:66ch}
.road{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink);counter-reset:none}
.stage{padding:16px 22px 18px 0}
.stage + .stage{border-left:1px solid var(--rule);padding-left:22px}
.stage-n{font:600 13px/1 var(--ui);color:var(--ox)}
.stage h3{font-size:24px;margin:8px 0 8px}
.stage p{font-size:16px;line-height:1.5;margin-bottom:10px}
.stage-lv .leverbar{height:28px;margin:4px 0 6px;gap:3px}.stage-lv .lb{width:12px}.stage-lv .lb span{display:none}
.stage-lv > span{display:block;font:600 13px/1.5 var(--ui);color:var(--muted)}
.stage-lv > span a{color:var(--ink)}
.probs{list-style:none;border-top:1px solid var(--ink)}
.prob{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:start}
.prob img{display:block;width:100%;height:auto;border:1px solid var(--ink)}
.prob h3{margin:0 0 6px;font-size:24px}
.prob p{font-size:17px;color:var(--muted);margin-bottom:8px}
.prob ol{padding-left:22px;font-size:17px}.prob li{margin:4px 0}
.sh-trust{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--ink)}
.sh-trust li{padding:16px 0;border-bottom:1px solid var(--rule)}
.sh-trust b{font:500 21px/1.25 var(--display)}.sh-trust p{font-size:17px;margin:6px 0 0;color:var(--muted)}
.sh-quiz{background:var(--navy);color:#EDE6D8;padding-top:8px;padding-bottom:28px;margin-top:56px}
.sh-quiz h2{color:#fff;border-top-color:#EDE6D8}.sh-quiz p{max-width:60ch}
.sh-who .sh-text{font-style:italic}
@media (max-width:860px){
  .sh-outs,.road{grid-template-columns:1fr 1fr}
  .sh-outs li:nth-child(3){border-left:0;padding-left:0}
  .stage:nth-child(3){border-left:0;padding-left:0}
  .prob{grid-template-columns:1fr;gap:12px}
  .sh-trust{grid-template-columns:1fr}
}
@media (max-width:520px){
  .sh-outs,.road{grid-template-columns:1fr}
  .sh-outs li + li,.stage + .stage{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
}

/* Thai side (/th/, 2026-11-10): Newsreader has no Thai glyphs. Latin stays Newsreader / Schibsted; Thai letters fall
   through to Noto Serif Thai (reading) and IBM Plex Sans Thai (UI). Same sizes; taller lines for tone marks;
   no tracking or uppercase (Thai has no case and no word spaces). */
:lang(th){--display:Newsreader,'Noto Serif Thai',Georgia,serif;--serif:Newsreader,'Noto Serif Thai',Georgia,serif;
  --sans:'Schibsted Grotesk','IBM Plex Sans Thai',Arial,sans-serif;--ui:'Schibsted Grotesk','IBM Plex Sans Thai',Arial,sans-serif;
  --mono:'Schibsted Grotesk','IBM Plex Sans Thai',Arial,sans-serif}
body:lang(th){line-height:1.75;word-break:normal;line-break:auto}
:lang(th) *{letter-spacing:0!important;text-transform:none!important}
:lang(th) h1,:lang(th) h2,:lang(th) h3,:lang(th) .hero h1,:lang(th) .art-head h1{line-height:1.3}
:lang(th) .lead,:lang(th) .muted,:lang(th) .row-t,:lang(th) .li-line,:lang(th) .sc-fb,:lang(th) .navdd-panel li b{line-height:1.6}
:lang(th) .tag,:lang(th) .say,:lang(th) .nosay{font-size:13px;line-height:1.5}
.langsw{font:600 14px/1.4 var(--ui);color:var(--muted);white-space:nowrap}
.langsw b{color:var(--ink);font-weight:700}
.langsw a{color:var(--muted)}.langsw a:hover{color:var(--ox)}
/* Thai headings (owner 2026-11-10: headings wrong size, colours too pale) - smaller, bolder, darker */
:lang(th) h1,:lang(th) .art-head h1{font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1.3;letter-spacing:0}
:lang(th) .hero h1{font-size:clamp(36px,5vw,56px);font-weight:700}
:lang(th) h2,:lang(th) .prose h2,:lang(th) section.wrap > h2,:lang(th) .faq h2,:lang(th) .related h2{font-size:clamp(23px,2.6vw,28px);font-weight:700;line-height:1.35}
:lang(th) .prose h2{margin-top:56px}
:lang(th) h3,:lang(th) .box-t{font-size:20px;font-weight:700}
:lang(th) .lead{color:var(--ink);opacity:.82}
/* Example boxes get their own tinted panel so readers see "this is an example" (owner 2026-11-10) */
:root{--tint:#F1ECE2}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tint:#201E1B}}
:root[data-theme="dark"]{--tint:#201E1B}
.box-example{background:var(--tint);border:0;padding:22px 26px 10px;border-radius:4px}
/* Thai box labels bigger (owner 2026-11-10) */
:lang(th) .box .tag{font-size:17px;font-weight:700;line-height:1.4}
:lang(th) .say,:lang(th) .nosay{font-size:14px}

/* Thai articles: book titles (English, italic) in the accent colour; lever names without a Thai page = bold, no link */
em.book{color:var(--ox);font-weight:600}
strong.lv{font-weight:700}

/* B2 (owner 2026-11-10): no more near-black blocks. Ink card + offset shadow, soft red header, the page's own picture. */
:root{--shadow:#111111}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--shadow:#000000}}
:root[data-theme="dark"]{--shadow:#000000}
.box-dark{background:var(--surface);color:var(--ink);border:1.5px solid var(--ink);padding:0 24px 10px;box-shadow:6px 6px 0 var(--shadow);margin:36px 6px 36px 0}
.box-dark .box-t{margin:0 -24px 20px;padding:18px 24px 16px;background:var(--ox-soft);border-bottom:1.5px solid var(--ink);font:700 24px/1.3 var(--display)}
.box-dark .tag{display:table;color:var(--ox);border:1.5px solid var(--ox);padding:5px 9px 4px;margin:0 0 10px;font-size:12px}
.box-dark strong{color:var(--ink)}.box-dark a{color:var(--ox)}
.box-dark .q{padding-left:18px;font-style:italic;color:var(--ox)}
.cta{background:var(--surface);color:var(--ink);border:1.5px solid var(--ink);border-top:6px solid var(--ox);padding:0;
  display:grid;grid-template-columns:1fr 1fr;box-shadow:6px 6px 0 var(--shadow);margin:56px 6px 0 0}
.cta img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block;border-right:1.5px solid var(--ink)}
.cta .ct{padding:28px 26px 22px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.cta h2{color:var(--ink);font:700 30px/1.25 var(--display);margin:0 0 10px}
.cta p{color:var(--muted)}
.cta .kick{font:600 13px/1.3 var(--sans);letter-spacing:.04em;color:var(--ox);margin:0 0 14px}
.cta .mini{width:40px;height:12px;margin-right:10px;vertical-align:-1px}.cta .mini rect{fill:var(--rule)}.cta .mini .on{fill:var(--ox)}
.cta .btn span{display:inline-block;transition:transform .2s}.cta .btn:hover span{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.cta .btn span{transition:none}}
@media (max-width:640px){.cta{grid-template-columns:1fr}.cta img{min-height:0;max-height:220px;border-right:0;border-bottom:1.5px solid var(--ink)}
  .cta h2{font-size:26px}.box-dark .box-t{font-size:21px}}

/* Example + trap boxes (owner 2026-11-10 "make these boxes nicer"), same family as the B2 dark box */
:root{--ok-soft:#E6EFEB}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ok-soft:#18251F}}
:root[data-theme="dark"]{--ok-soft:#18251F}
.box-example{background:var(--surface);border:1.5px solid var(--ink);border-radius:0;padding:0 24px 12px;margin:36px 0}
.box-example .box-t,.box-trap .box-t{font:700 22px/1.3 var(--display)}
.box-example .box-t{margin:0 -24px 18px;padding:18px 24px 16px;border-bottom:1px solid var(--rule)}
.box-example .tag,.box-trap .tag{display:table;border:1.5px solid currentColor;padding:5px 9px 4px;margin:0 0 10px;font-size:12px}
.box-example .tag{color:var(--ink)}
.box-example .sb{padding:14px 16px 2px;border-radius:6px;margin:0 0 14px}
.box-example .sb p{margin:0 0 12px}
.box-example .sb-say{background:var(--ok-soft)}
.box-example .sb-nosay{background:var(--paper);border:1px dashed var(--rule);color:var(--muted)}
.box-example .say,.box-example .nosay{display:table;margin:0 0 6px;padding:3px 9px;border-radius:3px;text-decoration:none}
.box-example .say{background:var(--ok);color:var(--surface)}
.box-example .nosay{background:var(--ox-soft);color:var(--ox)}
.box-example .say::before{content:"\2713\00a0"}.box-example .nosay::before{content:"\2717\00a0"}
.box-trap{display:block;background:var(--ox-soft);border:1.5px solid var(--ox);padding:18px 24px 8px;margin:36px 0}
.box-trap .box-t{margin:0 0 12px}
.box-trap .tag{color:var(--ox);display:flex;width:max-content;align-items:center;gap:8px}
.box-trap .tag::before{content:"!";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ox);color:var(--on-ox);font:700 12px/1 var(--sans)}
@media (max-width:640px){.box-example,.box-trap{padding-left:18px;padding-right:18px}.box-example .box-t{margin:0 -18px 16px;padding:16px 18px 14px}
  .box-example .box-t,.box-trap .box-t{font-size:20px}}

/* Dark box v3 (owner 2026-11-10: "black tone, not too black, more art"): warm charcoal, the page's picture as a
   white-line engraving in the header, red offset shadow. Example box: warm paper tint instead of white. */
:root{--dk:#1F1C1B;--dk-ink:#EEE8E2;--dk-muted:#C9C1BA;--dk-acc:#EE9AA3;--dk-rule:#3A3533}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dk:#262120;--dk-rule:#433C3A}}
:root[data-theme="dark"]{--dk:#262120;--dk-rule:#433C3A}
.box-dark{background:var(--dk);color:var(--dk-ink);border:0;box-shadow:6px 6px 0 var(--ox);position:relative;overflow:hidden}
.box-dark .box-t{background:transparent;border-bottom:1px solid var(--dk-rule);color:#fff;position:relative;z-index:1}
.box-dark .tag{color:var(--dk-acc);border-color:var(--dk-acc)}
.box-dark strong{color:#fff}.box-dark a{color:var(--dk-acc)}
.box-dark .q{color:var(--dk-acc)}
.box-dark.has-art .box-t{min-height:190px;border-bottom:0;display:flex;flex-direction:column;justify-content:flex-end;padding-right:42%}
.box-dark .dk-art{position:absolute;top:0;right:0;width:62%;height:auto;aspect-ratio:768/422;object-fit:cover;
  filter:grayscale(1) invert(1) contrast(1.15);mix-blend-mode:screen;opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%),linear-gradient(#000 45%,transparent 92%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 45%),linear-gradient(#000 45%,transparent 92%);mask-composite:intersect;pointer-events:none}
.box-example{background:var(--tint);border-color:var(--ink)}
.box-example .sb-nosay{background:var(--surface)}
@media (max-width:640px){.box-dark.has-art .box-t{min-height:150px;padding-right:18px}.box-dark .dk-art{width:100%;opacity:.28}}
.box-dark .tag{font-size:16px;padding:6px 12px 5px;letter-spacing:.03em}   /* owner 2026-11-10: bigger label */
.box-dark .box-t{font-size:27px}
@media (max-width:640px){.box-dark .tag{font-size:15px}.box-dark .box-t{font-size:23px}}

/* Dark box art v2 (owner 2026-11-10: picture B1, bigger, on the right of the card) */
.box-dark.has-art .box-t{min-height:330px;padding-right:50%}
.box-dark .dk-art{width:60%;aspect-ratio:auto;height:auto;filter:none;mix-blend-mode:lighten;opacity:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(#000 60%,transparent 98%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(#000 60%,transparent 98%)}
@media (max-width:640px){.box-dark.has-art .box-t{min-height:260px;padding-right:18px;justify-content:flex-end}
  .box-dark .dk-art{width:100%;opacity:.4}}
.box-dark.has-art .tag{align-self:flex-start}

/* Dark box v4 (owner 2026-11-10): cut-out puppet master stands ON the box - hood above, workers' feet on the top edge,
   label + title on the paper to its left, the charcoal box below is the stage. */
.box-dark.has-hood{overflow:visible;margin-top:330px;padding-top:22px}
.box-dark .dk-hood{position:absolute;bottom:100%;right:30px;width:230px;height:auto;pointer-events:none}
.box-dark.has-hood .box-t{position:absolute;bottom:calc(100% + 22px);left:0;right:290px;margin:0;padding:0;
  background:none;border:0;color:var(--ink);font:700 30px/1.25 var(--display)}
.box-dark.has-hood .tag{color:var(--ox);border-color:var(--ox);margin-bottom:12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .box-dark .dk-hood{filter:drop-shadow(0 0 1px #ECEAE5) drop-shadow(0 0 1px #ECEAE5)}}
:root[data-theme="dark"] .box-dark .dk-hood{filter:drop-shadow(0 0 1px #ECEAE5) drop-shadow(0 0 1px #ECEAE5)}
@media (max-width:640px){.box-dark.has-hood{margin-top:250px}.box-dark .dk-hood{width:160px;right:14px}
  .box-dark.has-hood .box-t{right:184px;font-size:22px}.box-dark.has-hood .tag{font-size:14px}}

/* Clean box stage (owner 2026-11-11): cut strings, workers walk free on top of a soft green box; title on the left */
.box-clean.has-free{position:relative;background:var(--ok-soft);border:1.5px solid var(--ok);padding:22px 24px 8px;margin:250px 0 36px}
.box-clean .cl-free{position:absolute;bottom:100%;right:24px;width:270px;height:auto;pointer-events:none}
.box-clean.has-free .box-t{position:absolute;bottom:calc(100% + 22px);left:0;right:320px;margin:0;font:700 30px/1.25 var(--display);color:var(--ink)}
.box-clean.has-free .tag{display:table;color:var(--ok);border:1.5px solid var(--ok);padding:6px 12px 5px;margin:0 0 12px;font-size:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .box-clean .cl-free{filter:drop-shadow(0 0 1px #ECEAE5)}}
:root[data-theme="dark"] .box-clean .cl-free{filter:drop-shadow(0 0 1px #ECEAE5)}
@media (max-width:640px){.box-clean.has-free{margin-top:230px;padding:18px 18px 6px}.box-clean .cl-free{width:180px;right:10px}
  .box-clean.has-free .box-t{right:200px;font-size:22px}.box-clean.has-free .tag{font-size:14px}}
