/* ===========================================================
   SBS BRAND TOKENS – edit colours here, everything else follows
   =========================================================== */
:root{
  --yellow:#F5C400; --yellow-deep:#E0B000;
  --black:#000000; --red:#D11F1F; --red-deep:#A61414;
  --paper:#FFFFFF; --paper-2:#F3EFE4; --ink:#000000; --ink-soft:#4A4A4A; --line:#D8D2C2;
  --font-display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --font-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111111; --paper-2:#1C1A14; --ink:#F6F2E6; --ink-soft:#C9C3B2; --line:#3A362C; color-scheme:dark;
  }
}
:root[data-theme="dark"]{ --paper:#111111; --paper-2:#1C1A14; --ink:#F6F2E6; --ink-soft:#C9C3B2; --line:#3A362C; color-scheme:dark; }

*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:.95;letter-spacing:.01em;margin:0 0 .4em;text-transform:uppercase}
h1{font-size:clamp(3.2rem,9vw,7.5rem)}
h2{font-size:clamp(2.2rem,5.5vw,4.2rem)}
h3{font-size:clamp(1.5rem,3vw,2.2rem)}
p{margin:0 0 1em;max-width:62ch}
.wrap{width:min(1140px,100% - 2.5rem);margin-inline:auto}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- the red "cover" highlight used throughout ---- */
.hl{display:inline-block;background:var(--red);color:#fff;padding:.02em .18em .06em;transform:rotate(-1.5deg);line-height:.95}
.hl.y{background:var(--yellow);color:var(--black)}
.hl.k{background:var(--black);color:var(--yellow)}

/* ---- sfx: motion ---- */
@keyframes stamp{0%{transform:scale(2.4) rotate(-14deg);opacity:0}60%{transform:scale(.9) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(-1.5deg)}}
@keyframes splat{0%{transform:scale(0) rotate(0);opacity:1}60%{transform:scale(1.15) rotate(25deg);opacity:1}100%{transform:scale(1.05) rotate(25deg);opacity:0}}
@keyframes viewin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-6px,2px) rotate(-1deg)}40%{transform:translate(6px,-2px) rotate(1deg)}60%{transform:translate(-4px,1px)}80%{transform:translate(4px,-1px)}}
@keyframes heroin{from{opacity:0;transform:translateY(50px) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes coverin{from{opacity:0;transform:rotate(14deg) translateX(80px)}to{opacity:1;transform:rotate(3deg)}}
@keyframes hlwipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.view.is-active{animation:viewin .35s ease-out both}
.hero h1>span{animation:heroin .55s cubic-bezier(.2,.9,.3,1.2) both}
.hero h1>span:nth-child(2){animation-delay:.12s}.hero h1>span:nth-child(3){animation-delay:.24s}
.hero .hl{animation:hlwipe .45s .55s ease-out both}
.hero .book{animation:coverin .7s .3s cubic-bezier(.2,.9,.3,1.1) both}
.sag button.stamped{animation:stamp .32s cubic-bezier(.2,.9,.3,1.3)}
.q{position:relative}
.q.shake{animation:shake .4s}
.splat-fx{position:absolute;width:130px;height:130px;pointer-events:none;z-index:2;animation:splat .9s ease-out forwards}
.verdict h2 .hl{animation:stamp .5s .15s cubic-bezier(.2,.9,.3,1.3) both;transform-origin:center}
.verdict .count{animation:viewin .4s .4s both}.verdict .count:nth-child(2){animation-delay:.55s}.verdict .count:nth-child(3){animation-delay:.7s}
.chip,.plan-item{animation:viewin .35s both}
.flash{position:fixed;inset:0;background:var(--red);pointer-events:none;z-index:50;animation:flash .5s ease-out forwards}
.bar i.pop{animation:pop .3s}
.btn.ready{animation:pop .5s 2}

/* ---- sfx: icons, ticker, bursts, reveals ---- */
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) scale(1.08)}75%{transform:rotate(7deg) scale(1.08)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes confetti{0%{transform:translateY(-10vh) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
@keyframes rain{0%{transform:translateY(-20vh) scale(.5) rotate(0);opacity:1}85%{opacity:1}100%{transform:translateY(105vh) scale(1.2) rotate(40deg);opacity:0}}
@keyframes reveal{0%{opacity:0;transform:scale(1.5) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
.sag button:hover{animation:wobble .4s}
.ticker{background:var(--black);color:var(--yellow);overflow:hidden;border-top:4px solid var(--red);border-bottom:4px solid var(--red);font-family:var(--font-display);text-transform:uppercase;font-size:1.25rem;padding:.55rem 0;white-space:nowrap}
.ticker div{display:inline-block;animation:marquee 45s linear infinite}
.ticker:hover div{animation-play-state:paused}
.ticker span{padding:0 1.4rem}
.ticker span::after{content:"";display:inline-block;width:.55em;height:.55em;background:var(--red);border-radius:50% 40% 55% 45%;margin-left:2.8rem;vertical-align:middle}
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.fx-layer i{position:absolute;top:0;display:block;animation:confetti linear forwards}
.fx-layer i.c{width:12px;height:18px}
.fx-layer i.r{width:80px;height:80px;animation-name:rain}
.ico{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.q .ico{width:46px;height:46px;color:var(--red);margin-bottom:.4rem}
.q.done .ico{animation:bob 1.2s ease-in-out}
.sag-card .ico{width:56px;height:56px;float:right;margin:0 0 .5rem 1rem;color:var(--red)}
.sag-card.A .ico{color:var(--ink)}.sag-card.G .ico{color:var(--black)}
.chip .ico{width:22px;height:22px;flex:none;color:var(--ink-soft)}
.plan-item .ico{width:30px;height:30px;color:var(--red);margin-bottom:.3rem}
.ticks li .ico{position:absolute;left:0;top:.1em;width:1.3em;height:1.3em;color:var(--red)}
.ticks li.i::before{display:none}
.sec.black .ticks li .ico{color:var(--yellow)}
.rv{opacity:0}.rv.in{animation:reveal .45s cubic-bezier(.2,.9,.3,1.2) both}
.hero .cover.tilt{transition:transform .12s ease-out}

/* ---- opening book (hero) ---- */
.book{position:relative;max-width:380px;margin-inline:auto;perspective:1600px;transform:rotate(3deg);cursor:pointer;outline-offset:6px}
.book .page{position:absolute;inset:0;background:#fff;color:#000;border:3px solid var(--black);box-shadow:14px 14px 0 var(--black);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.6rem;padding:1.4rem;background-image:repeating-linear-gradient(transparent 0 26px,#E6E1D0 26px 27px);background-position:0 8px}
.book .page .k{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:0}
.book .page h3{font-size:clamp(1.9rem,4vw,2.6rem);margin:0}
.book .page p{font-size:1rem;margin:0 0 .6rem;max-width:22ch}
.book .page .btn{font-size:1.1rem;transform:rotate(-2deg)}
.book .leaf{position:relative;transform-origin:left center;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.45,0,.2,1)}
.book:hover .leaf,.book.open .leaf,.book:focus-within .leaf{transform:rotateY(-162deg)}
.book .page .btn{opacity:0;transform:rotate(-2deg) scale(.8);transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.3,1.3)}
.book:hover .page .btn,.book.open .page .btn,.book:focus-within .page .btn{opacity:1;transform:rotate(-2deg) scale(1);transition-delay:.5s}
.book .cover{max-width:100%;margin:0;transform:none;box-shadow:none;backface-visibility:hidden}
.book .inside{position:absolute;inset:0;background:var(--yellow);border:3px solid var(--black);transform:rotateY(180deg);backface-visibility:hidden;display:grid;place-items:center;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1;text-align:center;padding:1rem;color:var(--black)}
.book .inside span{transform:rotate(-4deg);display:block}
@media (max-width:800px){.book{max-width:280px;margin-top:1rem}.book .page{padding:1rem}.book .page p{display:none}}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--font-display);text-transform:uppercase;font-size:1.25rem;letter-spacing:.03em;padding:.75em 1.4em .8em;border:3px solid var(--black);background:var(--yellow);color:var(--black);text-decoration:none;cursor:pointer;line-height:1;box-shadow:5px 5px 0 var(--black);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--black)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--black)}
.btn.red{background:var(--red);color:#fff}
.btn.black{background:var(--black);color:var(--yellow)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:5px 5px 0 var(--black)}
.btn-row{display:flex;flex-wrap:wrap;gap:1.2rem 1.4rem;margin-top:1.6rem}

/* ---- header ---- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--black);z-index:10}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--black);color:var(--yellow);border-bottom:4px solid var(--yellow)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:1rem}
.logo{font-family:var(--font-display);font-size:1.6rem;text-decoration:none;text-transform:uppercase;display:flex;align-items:center;gap:.5rem;line-height:1}
.logo b{background:var(--yellow);color:var(--black);padding:.12em .3em .14em;font-weight:400}
.nav{display:flex;gap:.2rem;align-items:center}
.nav a{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1rem;text-decoration:none;padding:.55em .8em;color:var(--yellow);border-bottom:3px solid transparent}
.nav a.on{border-bottom-color:var(--red)}
.nav a.cta{background:var(--red);color:#fff;margin-left:.4rem;border:0}
.burger{display:none;background:none;border:2px solid var(--yellow);color:var(--yellow);font-family:var(--font-display);font-size:1rem;padding:.4em .7em;text-transform:uppercase;cursor:pointer}
@media (max-width:760px){
  .logo{font-size:1.3rem;white-space:nowrap}
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--black);flex-direction:column;align-items:stretch;padding:.6rem 1rem 1rem;border-bottom:4px solid var(--yellow)}
  .nav.open{display:flex}
  .nav a{font-size:1.3rem;padding:.6em .4em}
  .nav a.cta{margin:.4rem 0 0;text-align:center}
}

/* ---- sections ---- */
.sec{padding:clamp(3rem,7vw,6rem) 0}
.sec.yellow{background:var(--yellow);color:var(--black)}
.sec.black{background:var(--black);color:#fff}
.sec.black h2{color:var(--yellow)}
.sec.red{background:var(--red);color:#fff}
.sec.paper{background:var(--paper-2)}
.lead{font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:600}
.two{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr;align-items:center}
@media (max-width:800px){.two{grid-template-columns:1fr}}

/* hero */
.hero{background:var(--yellow);color:var(--black);overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center;padding:clamp(2.5rem,6vw,5rem) 0}
.hero h1{margin-bottom:.35em}
.hero h1 span{display:block}
.hero .kicker{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.95rem,1.6vw,1.15rem);margin-bottom:1.2rem}
.cover{max-width:380px;margin-inline:auto;transform:rotate(3deg);box-shadow:14px 14px 0 var(--black);border:3px solid var(--black)}
.splat{position:absolute;right:-40px;bottom:-30px;width:220px;opacity:.9;pointer-events:none}
@media (max-width:800px){.hero .wrap{grid-template-columns:1fr}.cover{max-width:280px;margin-top:1rem}.splat{display:none}}

/* lists */
.ticks{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.5rem}
.ticks li{padding-left:2.2rem;position:relative;max-width:62ch}
.ticks li::before{content:"";position:absolute;left:0;top:.25em;width:1.1em;height:1.1em;background:var(--red);clip-path:polygon(14% 44%,0 60%,40% 100%,100% 18%,86% 4%,40% 72%)}
.sec.black .ticks li::before{background:var(--yellow)}
.cols-2{columns:2;column-gap:3rem}
@media (max-width:700px){.cols-2{columns:1}}

/* SAG explainer */
.sag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.5rem}
@media (max-width:760px){.sag-grid{grid-template-columns:1fr}}
.sag-card{border:3px solid var(--black);background:var(--paper);color:var(--ink);padding:1.4rem 1.4rem 1.2rem;box-shadow:8px 8px 0 var(--black)}
.sag-card .letter{font-family:var(--font-display);font-size:4rem;line-height:1;display:inline-block;padding:.05em .25em;margin-bottom:.4rem}
.S .letter{background:var(--red);color:#fff}.A .letter{background:var(--black);color:var(--yellow)}.G .letter{background:var(--yellow);color:var(--black);border:3px solid var(--black)}
.sag-card h3{margin-bottom:.3em}
.sag-card p{font-size:1rem;margin:0}

/* contents */
.toc{display:grid;gap:.4rem 2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0;padding:0;list-style:none}
.toc li{border-top:2px solid var(--line);padding:.8rem 0}
.toc .pt{font-family:var(--font-display);text-transform:uppercase;font-size:1.3rem;display:block;margin-bottom:.25rem}
.toc .ch{display:block;font-size:.95rem;color:var(--ink-soft)}
.toc .bl{font-size:1.02rem;margin:.5rem 0 0;max-width:46ch}

/* quotes */
.quote{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,4vw,3rem);line-height:1.05;max-width:22ch;margin:0}
.quote small{display:block;font-family:var(--font-body);text-transform:none;font-size:1rem;margin-top:1rem;font-weight:600}

/* ===== assessment ===== */
.rules{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin:1.5rem 0 0}
@media (max-width:760px){.rules{grid-template-columns:1fr}}
.rule{background:var(--black);color:#fff;padding:1.2rem}
.rule h3{color:var(--yellow);font-size:1.4rem;margin-bottom:.3em}
.rule p{font-size:1rem;margin:0}

.progress{position:sticky;top:calc(68px + 4px + env(safe-area-inset-top,0px));z-index:5;background:var(--yellow);color:var(--black);border-bottom:3px solid var(--black);padding:.55rem 0}
.progress .wrap{display:flex;align-items:center;gap:1rem;font-family:var(--font-display);text-transform:uppercase;font-size:1.05rem}
.bar{flex:1;height:14px;background:#fff;border:2px solid var(--black)}
.bar i{display:block;height:100%;background:var(--red);width:0;transition:width .2s}

.q{border:3px solid var(--ink);margin:0 0 1.4rem;background:var(--paper);display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:center;padding:1.3rem 1.4rem}
.q.done{border-color:var(--black);box-shadow:6px 6px 0 var(--black)}
.q .num{font-family:var(--font-display);font-size:1rem;letter-spacing:.06em;color:var(--red);text-transform:uppercase}
.q h3{font-size:clamp(1.5rem,3vw,2rem);margin:.1em 0 .3em}
.q p{font-size:1.02rem;margin:0;color:var(--ink-soft);max-width:56ch}
.q .ask{color:var(--ink);font-weight:600}
.sag{display:flex;gap:.7rem}
.sag button{font-family:var(--font-display);font-size:1.7rem;width:62px;height:62px;border:3px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;line-height:1;transition:transform .08s}
.sag button:hover{transform:translateY(-2px)}
.sag button[aria-pressed="true"].S{background:var(--red);color:#fff;border-color:var(--red)}
.sag button[aria-pressed="true"].A{background:var(--black);color:var(--yellow);border-color:var(--black)}
.sag button[aria-pressed="true"].G{background:var(--yellow);color:var(--black);border-color:var(--black)}
.sag-key{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.95rem;color:var(--ink-soft);margin:0 0 1.5rem}
@media (max-width:640px){.q{grid-template-columns:1fr}.sag{justify-content:flex-start}.sag button{width:56px;height:56px}}

/* results */
.verdict{background:var(--black);color:#fff;padding:clamp(2rem,5vw,4rem) 0}
.verdict .label{font-family:var(--font-display);text-transform:uppercase;color:var(--yellow);letter-spacing:.05em;font-size:1.1rem}
.verdict h2{font-size:clamp(2.6rem,8vw,6rem);color:#fff;margin:.1em 0 .3em}
.verdict h2 .hl{display:inline-block}
.counts{display:flex;gap:1rem;flex-wrap:wrap;margin:1.2rem 0}
.count{border:3px solid var(--yellow);padding:.6rem 1rem;font-family:var(--font-display);font-size:1.1rem;text-transform:uppercase;display:flex;gap:.6rem;align-items:baseline}
.count b{font-size:2.4rem;font-weight:400;line-height:1}
.count.S b{color:var(--red)}.count.A b{color:#fff}.count.G b{color:var(--yellow)}
.verdict p{max-width:66ch}

.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem;margin:1.2rem 0 0}
.chip{display:flex;align-items:center;gap:.8rem;border:2px solid var(--line);padding:.55rem .7rem;font-weight:600;font-size:.98rem;background:var(--paper)}
.chip .l{font-family:var(--font-display);font-size:1.4rem;width:40px;height:40px;display:grid;place-items:center;flex:none}
.chip.S .l{background:var(--red);color:#fff}.chip.A .l{background:var(--black);color:var(--yellow)}.chip.G .l{background:var(--yellow);color:var(--black);border:2px solid var(--black)}

.plan{display:grid;gap:1rem;margin-top:1.4rem}
.plan-item{border:3px solid var(--ink);background:var(--paper);padding:1.2rem 1.3rem;display:grid;grid-template-columns:auto 1fr;gap:1rem 1.2rem;align-items:start;cursor:pointer;position:relative}
.plan-item .l{font-family:var(--font-display);font-size:2rem;width:54px;height:54px;display:grid;place-items:center}
.plan-item.S .l{background:var(--red);color:#fff}.plan-item.A .l{background:var(--black);color:var(--yellow)}
.plan-item h3{font-size:1.5rem;margin:0 0 .2em}
.plan-item p{margin:0;font-size:1.02rem}
.plan-item .focus{display:none;position:absolute;top:-14px;right:12px;background:var(--yellow);color:var(--black);border:3px solid var(--black);font-family:var(--font-display);text-transform:uppercase;padding:.2em .6em;font-size:.95rem;transform:rotate(2deg)}
.plan-item.is-focus{box-shadow:8px 8px 0 var(--black);border-color:var(--black)}
.plan-item.is-focus .focus{display:block}
.plan-item .pick{font-size:.9rem;color:var(--ink-soft);margin-top:.4rem}
.plan-item .ref{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;color:var(--red);margin-top:.6rem}

.less-shit{border:3px solid var(--ink);padding:1.4rem;margin-top:1.4rem;background:var(--paper-2)}
.less-shit label{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:1rem;margin:1rem 0 .3rem}
.less-shit label:first-of-type{margin-top:0}
.less-shit input,.less-shit textarea{width:100%;font:inherit;font-size:1rem;padding:.6rem .7rem;border:2px solid var(--ink);background:var(--paper);color:var(--ink);resize:vertical}
.less-shit .mini{color:var(--ink-soft);font-size:.9rem;margin:.2rem 0 0}

.share{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;align-items:center}
.toast{font-weight:600;color:var(--red)}

/* footer */
.ftr{background:var(--black);color:#fff;padding:2.5rem 0;font-size:.95rem}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.ftr a{color:var(--yellow)}
.ftr nav{display:flex;gap:1.2rem;flex-wrap:wrap}

/* print */
@media print{
  .hdr,.ftr,.progress,.no-print,.share,.btn{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .verdict{background:#fff;color:#000;border:3px solid #000;padding:1rem}
  .verdict h2,.verdict .label{color:#000}
  .count{border-color:#000}.count b{color:#000!important}
  .hl{background:#000!important;color:#fff!important;transform:none}
  .plan-item,.chip,.less-shit{break-inside:avoid;border-color:#000}
  .less-shit input,.less-shit textarea{border:1px solid #000;min-height:3.5em}
  .plan-item.is-focus{box-shadow:none}.plan-item .pick{display:none}
  .chips{grid-template-columns:repeat(3,1fr)}
}

/* ---- WordPress wrapper ---- */
body.sbs{margin:0}
body.sbs .wrap p{max-width:62ch}
#wpadminbar{position:fixed}