:root{--paper:#f6f1e7;--ink:#1d1b18;--mute:#6b645a;--orange:#fbba64;--hot:#ff6900;--teal:#708f8f;--line:#1d1b18;
--serif:"Fraunces",Georgia,serif;--cond:"Roboto Condensed","Arial Narrow",sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--cond);
background-image:radial-gradient(rgba(29,27,24,.06) 1px,transparent 1px);background-size:4px 4px}
a{color:inherit}img{max-width:100%;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:9}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
/* masthead */
.mast{border-bottom:3px double var(--line)}
.mast .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.7rem;font:600 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.mast nav{display:flex;gap:1.2rem;flex-wrap:wrap}.mast nav a{text-decoration:none}.mast nav a:hover{color:var(--hot)}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.ring{width:28px;height:28px;border-radius:50%;border:3px solid #d9d2c3;border-top-color:var(--ink);animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* hero */
.hero{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(1.5rem,4vw,4rem);padding-block:clamp(2rem,6vw,5rem);align-items:center}
.kicker{font:600 .8rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--hot)}
h1{font:900 clamp(2.8rem,8vw,6.4rem)/.92 var(--serif);letter-spacing:-.03em;margin:.4rem 0 1.2rem;font-variation-settings:"SOFT" 100,"WONK" 1}
h1 em{font-style:italic;font-weight:300;color:var(--teal)}
h1 .dots span{animation:blink 1.4s infinite both}h1 .dots span:nth-child(2){animation-delay:.2s}h1 .dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:0}40%{opacity:1}}
.lede{font-size:1.25rem;max-width:34ch;margin:0 0 1.6rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:700 1rem var(--cond);text-transform:uppercase;letter-spacing:.06em;padding:.9rem 1.4rem;border:2px solid var(--ink);background:var(--orange);color:var(--ink);text-decoration:none;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.btn.ghost{background:transparent;box-shadow:none}
.actions{display:flex;gap:1rem;flex-wrap:wrap}
/* fake browser */
.browser{background:#fff;border:2px solid var(--ink);box-shadow:12px 12px 0 var(--orange);transform:rotate(1.5deg)}
.bar{display:flex;gap:.4rem;align-items:center;padding:.55rem .7rem;border-bottom:2px solid var(--ink);background:#efe9dc}
.bar i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink)}
.url{flex:1;margin-left:.4rem;font:.78rem var(--mono);background:#fff;border:1.5px solid var(--ink);padding:.25rem .6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen{padding:2.4rem 1.5rem;text-align:center}
.bigring{width:84px;height:84px;margin:0 auto 1.2rem;border-radius:50%;border:7px solid #eee;border-top-color:var(--hot);animation:spin 1s linear infinite}
.prog{height:12px;border:2px solid var(--ink);margin:1rem auto .5rem;max-width:280px;overflow:hidden}
.prog b{display:block;height:100%;width:99%;background:repeating-linear-gradient(45deg,var(--orange) 0 8px,var(--hot) 8px 16px);animation:crawl 9s ease-out infinite}
@keyframes crawl{0%{width:3%}60%{width:97%}100%{width:99%}}
.screen small{font:.8rem var(--mono);color:var(--mute)}
.sticker{position:absolute;font:800 .8rem/1.1 var(--cond);text-transform:uppercase;background:var(--ink);color:var(--paper);padding:.7rem;border-radius:50%;width:92px;height:92px;display:grid;place-items:center;text-align:center;transform:rotate(-12deg)}
.heroart{position:relative}.heroart .sticker{right:12px;top:-38px;z-index:2}
/* ticker */
.ticker{border-block:2px solid var(--ink);background:var(--ink);color:var(--paper);overflow:hidden;font:600 .9rem var(--mono);white-space:nowrap}
.ticker div{display:inline-block;padding:.6rem 0;animation:tick 40s linear infinite}
.ticker span{margin-right:2.5rem}.ticker span::before{content:"✦ ";color:var(--orange)}
@keyframes tick{to{transform:translateX(-50%)}}
/* sections */
section{padding-block:clamp(3rem,7vw,6rem)}
.sechead{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:1rem;margin-bottom:2rem}
h2{font:800 clamp(2rem,5vw,3.6rem)/1 var(--serif);letter-spacing:-.02em;margin:0}h2 em{font-weight:300;color:var(--hot)}
.filters{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{font:600 .8rem var(--mono);text-transform:uppercase;border:2px solid var(--ink);background:transparent;padding:.45rem .8rem;border-radius:99px;cursor:pointer;color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.6rem}
.card{background:#fff;border:2px solid var(--ink);display:flex;flex-direction:column;position:relative;transition:transform .2s}
.card:hover{transform:rotate(-.6deg) translateY(-4px)}
.card:nth-child(3n+2):hover{transform:rotate(.6deg) translateY(-4px)}
.card figure{margin:0;border-bottom:2px solid var(--ink);aspect-ratio:16/10;overflow:hidden;background:#e9e3d6}
.card img{width:100%;height:100%;object-fit:cover;object-position:top}
.card .body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.cat{font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--teal)}
.card h3{font:700 1.45rem/1.1 var(--serif);margin:0}.card h3 a{text-decoration:none}.card h3 a::after{content:"";position:absolute;inset:0}
.card p{margin:0;color:var(--mute)}
.card .row{margin-top:auto;display:flex;gap:.5rem;align-items:center;position:relative;z-index:1}
.copy{font:600 .78rem var(--mono);border:1.5px solid var(--ink);background:var(--paper);padding:.45rem .6rem;cursor:pointer;flex:1;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)}
.copy:hover{background:var(--orange)}
.badge{position:absolute;top:-12px;left:12px;z-index:2;background:var(--hot);color:#fff;font:700 .72rem var(--mono);text-transform:uppercase;padding:.25rem .5rem;border:2px solid var(--ink)}
.card[hidden]{display:none}
/* how-to */
.how{background:var(--orange);border-block:3px solid var(--ink)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:1rem}
.steps li::before{content:counter(s,decimal-leading-zero);font:900 4.5rem/1 var(--serif);display:block;-webkit-text-stroke:2px var(--ink);color:transparent}
.steps h3{font:700 1.5rem var(--serif);margin:.4rem 0}
.note{margin-top:2rem;font:600 .9rem var(--mono);background:var(--paper);border:2px dashed var(--ink);padding:1rem}
/* quotes */
.quotes{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center}
blockquote{margin:0;font:italic 300 clamp(1.6rem,3.5vw,2.6rem)/1.2 var(--serif)}
blockquote cite{display:block;margin-top:1rem;font:600 .85rem var(--mono);font-style:normal;text-transform:uppercase;color:var(--mute)}
/* faq */
.faq{display:grid;grid-template-columns:1fr 2fr;gap:2rem}
details{border-bottom:2px solid var(--ink);padding:1.1rem 0}
summary{font:700 1.25rem var(--serif);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-family:var(--mono)}details[open] summary::after{content:"–"}
summary::-webkit-details-marker{display:none}details p{margin:.7rem 0 0;max-width:60ch}
/* share */
.share{text-align:center}.share .row{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
/* footer */
.foot{background:var(--ink);color:var(--paper);padding-block:3rem 2rem}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.foot h4{font:600 .8rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--orange);margin:0 0 .8rem}
.foot ul{list-style:none;padding:0;margin:0;line-height:1.9}.foot a{text-decoration:none}.foot a:hover{color:var(--orange)}
.foot .big{font:800 2rem/1.05 var(--serif)}.fine{grid-column:1/-1;border-top:1px solid #444;padding-top:1rem;font:.8rem var(--mono);color:#a9a196}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%,150%);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;font:600 .85rem var(--mono);border:2px solid var(--orange);transition:transform .25s;z-index:10}
.toast.on{transform:translate(-50%,0)}
@media (max-width:860px){.hero,.quotes,.faq,.foot .wrap{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.mast nav{display:none}.heroart{margin:1rem .5rem 0}}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}
/* v2 additions */
.hot{color:var(--hot)}.ink{color:var(--ink)!important}.small{font-size:.9rem;color:var(--mute)}
.est{white-space:nowrap}
.almost{font:700 1.4rem var(--serif)}
.crumbs{font:600 .75rem var(--mono);text-transform:uppercase;letter-spacing:.08em;padding-top:1.2rem}.crumbs a{color:var(--mute)}
.hero h1{overflow-wrap:break-word}
.linkbox{margin:0 0 1.4rem;max-width:560px}
.linkbox label{display:block;font:600 .75rem var(--mono);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}
.lb{display:flex;gap:.6rem}.lb input{flex:1;min-width:0;font:.95rem var(--mono);padding:.8rem;border:2px solid var(--ink);background:#fff;color:var(--ink)}
.alts{margin-top:.6rem;font:.85rem var(--mono)}.alts summary{cursor:pointer;text-decoration:underline}.alts ul{list-style:none;padding:0;margin:.5rem 0 0}.alts li{display:flex;gap:.6rem;align-items:center;margin:.3rem 0}
.copy.mini{flex:0;padding:.2rem .5rem}
.heroart{margin:0}.heroart img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.sharebar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border-block:2px solid var(--ink);padding:.8rem 0;font:600 .8rem var(--mono);text-transform:uppercase}
.sharebar+.actions{padding:.8rem 0}
.share-row{display:flex;gap:.5rem;flex-wrap:wrap}.share .share-row{justify-content:center;margin-top:1.5rem}
.sbtn{font:600 .78rem var(--mono);text-transform:uppercase;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:.45rem .8rem;text-decoration:none;cursor:pointer}
.sbtn:hover{background:var(--orange)}.sbtn.native{background:var(--ink);color:var(--paper)}
.steps p{font-size:1.1rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.ticks{list-style:none;padding:0;margin:1.2rem 0 0}.ticks li{padding:.7rem 0 .7rem 2rem;border-bottom:1px dashed var(--ink);position:relative;font-size:1.1rem}
.ticks li::before{content:"✓";position:absolute;left:0;font:800 1.2rem var(--serif);color:var(--hot)}
.reveal{background:#fff;border:2px solid var(--ink);padding:1.6rem;box-shadow:8px 8px 0 var(--teal)}.reveal p{font-size:1.1rem}
.ruled{border-top:2px solid var(--ink)}.share{background:#fff}
.adwrap{margin:2rem auto;max-width:970px;text-align:center}.adwrap .adsbygoogle{min-height:280px;background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(29,27,24,.04) 10px 20px);border:1px dashed #cfc6b5}
.adlabel{display:block;font:600 .65rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin-bottom:.4rem}
@media (max-width:860px){.two{grid-template-columns:1fr}.lb{flex-direction:column}.adwrap .adsbygoogle{min-height:250px}}
.foot .btn,.foot .btn:hover{color:var(--ink)}
.hero.solo{grid-template-columns:1fr}.tgroup{padding-block:3rem}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.tq{font-size:1.25rem;background:#fff;border:2px solid var(--ink);padding:1.3rem;box-shadow:6px 6px 0 var(--orange)}
.filters a.chip{text-decoration:none}
/* v3 fixes */
.toast[hidden]{display:none}
.toast{visibility:hidden;opacity:0;pointer-events:none}
.toast.on{visibility:visible;opacity:1}
.alts ul{border:2px solid var(--ink);background:#fff;margin-top:.6rem}
.alts li{justify-content:space-between;margin:0;padding:.45rem .5rem .45rem .8rem;border-bottom:1px dashed var(--ink)}
.alts li:last-child{border-bottom:0}
.alts code{font:.9rem var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-copy{display:inline-flex;align-items:center;gap:.35rem;flex:none;font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--orange);border:2px solid var(--ink);padding:.35rem .65rem;box-shadow:2px 2px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.sl-copy:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.sl-copy:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink)}
.sl-copy.done{background:var(--ink);color:var(--paper)}.sl-copy.done span{display:none}.sl-copy.done::after{content:"Copied!"}
.ic{vertical-align:-2px;flex:none}
/* v5 */
.lede.center{margin:1rem auto 0;max-width:46ch}
.qrbox{border:2px solid var(--ink);background:var(--paper);box-shadow:10px 10px 0 var(--orange);padding:1.6rem;text-align:center;max-width:320px}
.qrbox::backdrop{background:rgba(29,27,24,.55)}
.qrbox img{margin:.6rem auto;background:#fff;border:2px solid var(--ink);padding:8px;width:240px;height:240px;image-rendering:pixelated}
.qrbox .btn{margin-top:.6rem}