:root{
  --cobalt:#1d3cff;
  --yellow:#ffe600;
  --ink:#000;
  --paper:#f7f5f0;
  --pink:#ff3ea5;
  --light-text:#f7f5f0;
  --dark-text:#000;
  --sh:8px 8px 0 #000;
  --sh-m:5px 5px 0 #000;
  --sh-s:4px 4px 0 #000;
  --display:"Arial Black","Helvetica Neue",Helvetica,"Nimbus Sans",Arial,"Liberation Sans",sans-serif;
  --grot:"Helvetica Neue",Helvetica,Arial,"Nimbus Sans","Liberation Sans",sans-serif;
  --mono:"SF Mono",Menlo,Consolas,"DejaVu Sans Mono","Nimbus Mono PS","Liberation Mono",monospace;
  --gut:24px;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#151414; --ink:#f3efe8; }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
@supports (overflow-x:clip){html{overflow-x:clip}}
body{
  margin:0;position:relative;overflow-x:clip;
  color:var(--ink);font:400 17px/1.5 var(--grot);
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(128,128,128,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,128,128,.16) 1px,transparent 1px);
  background-size:32px 32px;
  background-position:-1px -1px;
}
::selection{background:var(--pink);color:#000}
a{color:inherit}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em}
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--gut)}

.topbar{background:#000;color:var(--light-text);border-bottom:4px solid #000}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:46px}
.tb-id{font:700 13px/1 var(--mono);letter-spacing:.08em;white-space:nowrap}
a.tb-id{text-decoration:none}
a.tb-id:hover b{background:var(--pink)}
.tb-id b{background:var(--yellow);color:#000;padding:4px 6px;margin-right:8px}
.tb-nav{margin-left:auto;display:flex;gap:2px;font:700 12px/1 var(--mono);letter-spacing:.08em}
.tb-nav a{text-decoration:none;padding:8px 10px;border:2px solid transparent;white-space:nowrap}
.tb-nav a:hover,.tb-nav a[aria-current="page"]{border-color:var(--yellow);color:var(--yellow)}

.mast{padding:28px 0 12px;position:relative}
.halftone{position:absolute;background-image:radial-gradient(currentColor 1.3px,transparent 1.6px);background-size:9px 9px;pointer-events:none;opacity:.5}
.mast .halftone{right:2%;top:4px;width:22%;height:130px;transform:rotate(-3deg);color:var(--ink)}
.kicker{margin:0 0 12px;font:700 12px/1 var(--mono);letter-spacing:.14em;display:flex;gap:10px;align-items:center}
.kicker b{background:#000;color:var(--light-text);padding:5px 8px}
.kicker::after{content:"";flex:1;height:3px;background:#000}
.mast-title{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.04em;font-size:clamp(30px,5.6vw,60px);position:relative;max-width:16ch}
.mast-title .of{display:inline-block;background:var(--cobalt);color:var(--light-text);border:4px solid #000;box-shadow:var(--sh-s);padding:.05em .16em .02em;transform:rotate(-1.4deg);margin:0 .12em}
.mast-title .dirs{color:var(--pink);-webkit-text-stroke:.03em #000}
.mast-title.small{font-size:clamp(24px,3.6vw,36px);max-width:22ch}
.mast p.sub{margin:14px 0 0;font-size:14px;line-height:1.5;max-width:48ch;font-weight:500}
.mast p.sub b{background:var(--yellow);color:var(--dark-text);padding:0 .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mast p.sub a{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:2px}

.feature{margin:0 0 36px;border:4px solid #000;box-shadow:var(--sh);background:#000;color:var(--light-text);padding:30px 28px;position:relative;overflow:hidden;transform:rotate(-.4deg);transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s cubic-bezier(.3,.7,.4,1)}
.feature .halftone{right:-30px;top:-30px;width:220px;height:170px;color:var(--light-text);opacity:.14;transform:rotate(5deg)}
.feature .tag{background:var(--pink);color:#000}
.feature h2{margin:0;font:900 clamp(26px,5vw,46px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.02em;position:relative}
.feature h2 .accent{color:var(--yellow)}
.feature p{margin:14px 0 0;font-size:15.5px;line-height:1.6;max-width:58ch;position:relative}
.feature .cta-row{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;position:relative}
.feature .btn{background:var(--yellow);color:#000}
.feature .btn:hover{background:var(--pink)}
.feature .claim-link{font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--light-text);opacity:.65;text-decoration:underline;text-underline-offset:3px}
.feature .claim-link:hover{opacity:1;color:var(--yellow)}
@media (hover:hover){.feature:hover{transform:translate(2px,2px) rotate(-.4deg);box-shadow:5px 5px 0 #000}}

.sec{padding:28px 0 60px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{position:relative;border:4px solid #000;box-shadow:var(--sh);background:var(--paper);padding:22px 22px 20px;transform:rotate(var(--r,0deg));transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s cubic-bezier(.3,.7,.4,1);text-decoration:none;display:block;color:inherit}
.card:hover,.card:focus-visible{transform:translate(3px,3px) rotate(var(--r,0deg));box-shadow:5px 5px 0 #000;outline:none}
.card.c-y{background:var(--yellow);color:var(--dark-text)}
.card.c-p{background:var(--pink);color:var(--dark-text)}
.card.c-b{background:var(--cobalt);color:var(--light-text)}
.card .tag{position:absolute;right:-4px;top:-14px;font:700 11px/1 var(--mono);letter-spacing:.08em;background:#000;color:var(--yellow);padding:6px 8px;transform:rotate(3deg)}
.card h2{margin:0;font:900 clamp(22px,2.6vw,30px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.card h2 .arrow{color:var(--pink)}
.card.c-b h2 .arrow,.card.c-p h2 .arrow{color:#000}
.card p{margin:12px 0 0;font-size:15px;line-height:1.5}
.card .stat{margin-top:14px;display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.08em;border:2px solid #000;padding:5px 7px}

.quote{margin-top:48px;background:#000;color:var(--light-text);border:4px solid #000;box-shadow:8px 8px 0 var(--pink);padding:30px 32px;transform:rotate(-.6deg);position:relative;overflow:hidden}
.quote p{margin:0;font:900 clamp(20px,2.6vw,34px)/1.05 var(--display);text-transform:uppercase;letter-spacing:-.02em;position:relative}
.quote p mark{background:var(--yellow);color:#000;padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.quote footer{margin-top:14px;font:700 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;position:relative}

.signup{margin-top:48px;border:4px solid #000;box-shadow:var(--sh);background:var(--yellow);color:var(--dark-text);padding:26px 28px;transform:rotate(.5deg);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.signup p{margin:0;font:700 13px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;max-width:38ch}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border:3px solid #000;background:var(--light-text);color:var(--dark-text);padding:13px 16px;box-shadow:var(--sh-s);cursor:pointer;transition:transform .09s ease,box-shadow .09s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}

footer.foot{margin-top:60px;border-top:4px solid #000;background:#000;color:var(--light-text)}
footer.foot .wrap{padding:20px var(--gut);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font:700 11px/1.4 var(--mono);letter-spacing:.08em}
footer.foot a{text-decoration:underline}

/* ---------- prose / context pages ---------- */
.entry{border:4px solid #000;box-shadow:var(--sh);background:var(--paper);padding:26px 28px;margin-bottom:28px;transform:rotate(var(--r,0deg))}
.entry:nth-child(even){transform:rotate(var(--r,-.4deg))}
.entry h2{margin:0 0 10px;font:900 clamp(20px,2.4vw,28px)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.entry h2 .no{display:inline-block;background:#000;color:var(--yellow);padding:4px 8px;margin-right:10px;font:700 13px/1 var(--mono)}
.entry p{margin:0 0 10px;font-size:15.5px;line-height:1.6}
.entry p:last-child{margin-bottom:0}
.entry ul{margin:0 0 10px;padding-left:1.2em;font-size:15.5px;line-height:1.6}
.entry code{font:700 13px var(--mono);background:var(--yellow);color:var(--dark-text);padding:0 .3em;border:2px solid #000}
.entry.c-b{background:var(--cobalt);color:var(--light-text)}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}