/* SpitePDF, website v2: "An invention of Augustus Skipworth".
   Visual language borrowed from skipwire.app (cream stock, ink rules, hard offset shadows,
   slab display, script flourishes, typewriter labels), with SpitePDF red as the house accent. */
:root{
  --ink:#2b2118; --cream:#f6ead0; --paper:#fbf4e2; --bg:#efe0bd; --bg-2:#f6ead0;
  --teal:#2e7c76; --teal-d:#1f5955; --orange:#d8622a; --mustard:#e3a92f;
  --red:#b8262a; --velvet:#8a1c1c; --velvet-d:#4f0d0d;
  --text:#2b2118; --muted:#6b5843; --rule:#2b2118; --on-dark:#f6ead0;
  --shadow:6px 6px 0 var(--rule); --shadow-sm:4px 4px 0 var(--rule);
  --burst:rgba(216,98,42,.16); --grain:.14;
  --display:"Rockwell Extra Bold","Rockwell",Georgia,serif;
  --script:"Yellowtail","Brush Script MT",cursive;
  --type:"Special Elite","American Typewriter","Courier New",monospace;
  --body:Futura,"Futura PT","Century Gothic","Avenir Next",Avenir,"Trebuchet MS",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#f1e3c4; --cream:#2a2119; --paper:#2f251c; --bg:#1d1712; --bg-2:#251d16;
  --teal:#5fb3aa; --teal-d:#3f8c84; --orange:#ec7a42; --mustard:#e9b545;
  --red:#e0574c; --velvet:#6b1616; --velvet-d:#3a0b0b;
  --text:#f1e3c4; --muted:#bba98d; --rule:#0b0806; --on-dark:#f6ead0;
  --burst:rgba(236,122,66,.12); --grain:.08; color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#f1e3c4; --cream:#2a2119; --paper:#2f251c; --bg:#1d1712; --bg-2:#251d16;
  --teal:#5fb3aa; --teal-d:#3f8c84; --orange:#ec7a42; --mustard:#e9b545;
  --red:#e0574c; --velvet:#6b1616; --velvet-d:#3a0b0b;
  --text:#f1e3c4; --muted:#bba98d; --rule:#0b0806; --on-dark:#f6ead0;
  --burst:rgba(236,122,66,.12); --grain:.08; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
main{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:var(--teal-d)}
:root[data-theme="dark"] a{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a{color:var(--teal)}}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;line-height:1.02;text-wrap:balance}
p{margin:0}
.wrap{max-width:72rem;margin:0 auto;padding-inline:16px}
@media (min-width:700px){.wrap{padding-inline:28px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--mustard);color:#2b2118;padding:8px 14px;z-index:200}
.skip:focus{left:8px}

/* header */
header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:3px double var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0}
.brand img{width:40px;height:40px;filter:drop-shadow(2px 2px 0 var(--rule))}
.brand b{display:block;font:800 1.25rem/1 var(--display);letter-spacing:-.01em}
.brand b span{color:var(--red)}
.brand small{display:block;font:.62rem/1.3 var(--type);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
nav.main{display:flex;gap:20px;font:.86rem var(--type)}
nav.main a{color:var(--text);text-decoration:none;border-bottom:1px dashed transparent;white-space:nowrap}
nav.main a:hover{border-bottom-color:currentColor}
@media (max-width:1140px){nav.main{display:none}}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
.theme{width:34px;height:34px;border-radius:50%;border:2px solid var(--rule);background:var(--paper);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:15px;line-height:1}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#2b2118;font:800 .95rem/1 var(--display);padding:12px 18px;border:2px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rule)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--rule)}
.btn.alt{background:var(--paper);color:var(--text)}
.btn.sm{padding:9px 14px;font-size:.85rem}
:root a.btn,:root a.btn:visited{color:#2b2118}
:root a.btn.alt,:root a.btn.alt:visited{color:var(--text)}
@media (max-width:520px){.brand small{display:none}}
:root .brand,:root nav.main a{color:var(--text)}

/* reels */
.reel{padding-block:96px 0;position:relative}
.reel-tag{display:inline-block;font:.78rem/1 var(--type);letter-spacing:.16em;text-transform:uppercase;border:2px solid var(--teal);color:var(--teal-d);padding:7px 12px;outline:1px solid var(--teal);outline-offset:3px;background:var(--paper)}
:root[data-theme="dark"] .reel-tag{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .reel-tag{color:var(--teal)}}
.head{display:grid;gap:16px;justify-items:center;text-align:center;max-width:46rem;margin:0 auto 48px}
.head h2{font-size:clamp(2rem,5.4vw,3.4rem)}
.head h2 .script{display:block;font:400 .62em/1 var(--script);color:var(--orange);letter-spacing:0;margin-bottom:.1em}
.head p{color:var(--muted);font-size:1.08rem;text-wrap:pretty}
hr.rule{border:0;border-top:3px double var(--rule);margin:96px 0 0;opacity:.6}

/* hero */
.hero{text-align:center;padding-top:56px;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-40px -40vw auto;height:720px;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 62%,var(--burst) 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(closest-side at 50% 62%,#000 30%,transparent 100%);mask:radial-gradient(closest-side at 50% 62%,#000 30%,transparent 100%)}
.presents{font:.8rem/1.6 var(--type);letter-spacing:.24em;text-transform:uppercase;margin:22px auto 10px;max-width:40rem}
.hero h1{display:grid;justify-items:center;gap:0}
.hero h1 .s1{font:400 clamp(2.4rem,7vw,4.6rem)/1 var(--script);color:var(--orange);transform:rotate(-4deg);margin-bottom:-.04em;position:relative;z-index:1}
.hero h1 .big{font:800 clamp(4.2rem,22vw,11rem)/.92 var(--display);letter-spacing:-.02em;color:var(--text);
  text-shadow:3px 3px 0 var(--mustard),6px 6px 0 var(--teal)}
.hero h1 .s2{font:400 clamp(1.8rem,5vw,3.2rem)/1 var(--script);color:var(--red);justify-self:end;margin-right:6%;transform:rotate(-6deg)}
.hero .lede{max-width:40rem;margin:26px auto 0;font-size:clamp(1.05rem,2.2vw,1.22rem);text-wrap:pretty}
.hero .claim{margin:34px auto 0;font:800 clamp(1.6rem,4.6vw,2.6rem)/1.1 var(--display)}
.hero .claim em{font-style:normal;color:var(--red)}
.hero .claim i{font-style:normal;color:var(--teal)}
.hero .sub{max-width:36rem;margin:14px auto 0;font:.95rem/1.6 var(--type);color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
.badges{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;margin-top:22px}
.badges img{height:46px;width:auto}

/* ticker */
.specs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:48px auto 0;padding:14px 0;border-block:2px solid var(--rule);font:.84rem var(--type);letter-spacing:.06em;text-transform:uppercase}
.specs b{color:var(--teal-d);font-weight:400;margin-right:8px}
:root[data-theme="dark"] .specs b{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .specs b{color:var(--teal)}}

/* narrator + interjection */
.narr{max-width:44rem;margin:56px auto 0;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:26px 28px;font:1.12rem/1.55 var(--type)}
.narr cite{display:block;margin-top:14px;font:400 1.3rem var(--script);color:var(--red);font-style:normal}
.gus{max-width:40rem;margin:-6px auto 0;transform:translateX(min(6vw,60px)) rotate(-.6deg);position:relative;background:var(--mustard);color:#2b2118;border:2px solid #2b2118;border-radius:14px;box-shadow:6px 6px 0 #2b2118;padding:20px 22px 18px;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start}
.gus{text-align:left}
.gus .avatar{width:64px;height:64px;border-radius:50%;background:#2e7c76;border:3px solid #2b2118;box-shadow:0 0 0 3px #e3a92f}
.gus p{font-size:1rem;line-height:1.5}
.gus p b{font-family:var(--body);font-weight:700}
.gus cite{display:block;margin-top:8px;font:400 1.15rem var(--script);color:#8a1c1c;font-style:normal}
@media (max-width:560px){.gus{transform:none;grid-template-columns:48px 1fr;gap:12px}.gus .avatar{width:48px;height:48px;border-width:2px;box-shadow:none}}

/* the memo */
.memo{max-width:46rem;margin:0 auto;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:clamp(24px,5vw,56px);position:relative;
  background-image:repeating-linear-gradient(transparent 0 31px,color-mix(in srgb,var(--teal) 16%,transparent) 31px 32px);background-position:0 18px}
.memo::before{content:"";position:absolute;left:clamp(14px,3vw,34px);top:0;bottom:0;border-left:2px solid color-mix(in srgb,var(--red) 45%,transparent)}
.memo .lh{text-align:center;border-bottom:3px double var(--rule);padding-bottom:16px;margin-bottom:26px}
.memo .lh .from{font:.78rem var(--type);letter-spacing:.26em;text-transform:uppercase}
.memo .lh .who{font:800 clamp(1.4rem,4vw,2rem)/1.1 var(--display);margin-top:6px}
.memo .lh .of{font:400 1.3rem var(--script);color:var(--orange)}
.memo p{font:1.04rem/1.95 var(--type);margin-top:1em;padding-left:clamp(6px,2vw,14px)}
.memo p.said{font-size:1.18rem;color:var(--red);padding-left:clamp(18px,4vw,40px)}
.memo .sig{margin-top:28px;font:400 2.2rem/1 var(--script);color:var(--velvet);padding-left:clamp(6px,2vw,14px)}
:root[data-theme="dark"] .memo .sig{color:var(--red)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .memo .sig{color:var(--red)}}
.memo .sig small{display:block;font:.78rem var(--type);color:var(--muted);letter-spacing:.08em;margin-top:6px}
.stamp{position:absolute;right:clamp(10px,3vw,30px);top:clamp(16px,3vw,28px);transform:rotate(11deg);border:3px solid var(--red);color:var(--red);font:800 .86rem/1.15 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;text-align:center;opacity:.82;border-radius:6px}
@media (max-width:620px){.stamp{position:static;display:inline-block;margin:0 0 10px;transform:rotate(-3deg)}}

/* booth excerpt */
.excerpt{max-width:44rem;margin:0 auto 32px;padding:4px 0 4px 20px;border-left:4px solid var(--red);font:1.02rem/1.7 var(--type)}
.excerpt p+p{margin-top:8px}
.excerpt .said{color:var(--red)}
.excerpt a{display:inline-block;margin-top:10px;font:.9rem var(--type)}

/* archives accordion (after skipwire.app) */
.archive{margin-top:56px;display:grid;gap:18px}
.arch{background:var(--paper);border:3px solid var(--rule);box-shadow:var(--shadow);scroll-margin-top:80px}
.arch summary{list-style:none;cursor:pointer;display:grid;gap:4px;padding:22px 70px 22px 26px;position:relative}
.arch summary::-webkit-details-marker{display:none}
.arch summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font:800 36px/1 var(--display);color:var(--orange);transition:transform .2s}
.arch[open] summary::after{transform:translateY(-50%) rotate(45deg)}
@media (prefers-reduced-motion:reduce){.arch summary::after{transition:none}}
@media (max-width:560px){.arch summary{padding:18px 56px 18px 18px}.arch summary::after{right:18px}}
.arch[open] summary{border-bottom:3px double var(--rule)}
.arch-reel{font:.74rem var(--type);letter-spacing:.18em;text-transform:uppercase;color:var(--teal-d)}
:root[data-theme="dark"] .arch-reel{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .arch-reel{color:var(--teal)}}
.arch-title{font:800 clamp(1.3rem,3.4vw,1.8rem)/1.1 var(--display)}
.arch-sub{font:.84rem var(--type);color:var(--muted)}
.arch-body{padding:clamp(16px,4vw,40px) clamp(10px,3vw,32px) clamp(24px,4vw,40px)}

/* refusals */
.refusals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:1000px){.refusals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.refusals{grid-template-columns:1fr}}
.plaque{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:22px;display:grid;gap:10px;align-content:start}
.plaque .no{font:.74rem var(--type);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.plaque h3{font-size:1.45rem}
.plaque h3 s{text-decoration-color:var(--red);text-decoration-thickness:4px;color:var(--muted)}
.plaque p{color:var(--muted);font-size:.98rem;text-wrap:pretty}
.plaque .vow{font:400 1.25rem var(--script);color:var(--red);margin-top:auto}

/* the pencil */
.pencil-stage{max-width:56rem;margin:0 auto 40px;transform:rotate(-3deg)}
.pencil-svg{width:100%;height:auto;display:block;filter:drop-shadow(6px 6px 0 var(--rule))}
.steps-pencil{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
@media (max-width:900px){.steps-pencil{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps-pencil{grid-template-columns:1fr}}
.steps-pencil li{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow-sm);padding:18px;display:grid;gap:6px;align-content:start}
.steps-pencil .n{font:800 1.4rem/1 var(--display);color:var(--orange)}
.steps-pencil h3{font-size:1.2rem}
.steps-pencil p{color:var(--muted);font-size:.95rem}
.steps-pencil li.end{background:var(--red);color:#fbf4e2}
.steps-pencil li.end .n{color:#e3a92f}
.steps-pencil li.end p{color:rgba(251,244,226,.85)}
.pencil-pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,48px);align-items:center;margin-top:48px}
@media (max-width:820px){.pencil-pair{grid-template-columns:1fr}}
.pencil-plus{background:var(--paper);border:2px dashed var(--muted);padding:22px;transform:rotate(-1.2deg);position:relative}
.pencil-plus::after{content:"Ludicrous";position:absolute;right:14px;top:16px;transform:rotate(12deg);border:3px solid var(--red);color:var(--red);font:800 .9rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em;padding:6px 8px;border-radius:6px;opacity:.85}
.pencil-plus .no{display:block;padding-right:7.5rem;font:.72rem var(--type);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pencil-plus h3{font-size:1.6rem;margin-top:6px;color:var(--muted)}
.pencil-plus ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:.95rem}
.pencil-plus li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted color-mix(in srgb,var(--rule) 35%,transparent);padding-bottom:6px}
.pencil-plus li b{font:.85rem var(--type);white-space:nowrap}
.pencil-plus .fine{margin-top:12px;font:.78rem var(--type);color:var(--muted)}
.pencil-gus{margin:0;max-width:none}

/* exhibits */
.exhibit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:40px;border-top:2px dashed color-mix(in srgb,var(--rule) 40%,transparent)}
.exhibit.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.exhibit.flip .copy{order:2}
@media (max-width:820px){.exhibit,.exhibit.flip{grid-template-columns:1fr}.exhibit.flip .copy{order:0}}
.exhibit .copy{display:grid;gap:12px}
.exhibit .tag{font:.78rem var(--type);letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.exhibit h3{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.exhibit p{color:var(--muted);text-wrap:pretty}
.exhibit ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.exhibit li{position:relative;padding-left:24px;font-size:.98rem}
.exhibit li::before{content:"☞";position:absolute;left:0;top:0;color:var(--red)}
.exhibit .aside{font:400 1.2rem/1.3 var(--script);color:var(--teal-d);margin-top:4px}
:root[data-theme="dark"] .exhibit .aside{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .exhibit .aside{color:var(--teal)}}
.frame{margin:0;background:var(--cream);border:2px solid var(--rule);box-shadow:var(--shadow);padding:12px;position:relative}
.frame img{width:100%;height:auto;border:1px solid var(--rule)}
.frame figcaption{font:.78rem var(--type);letter-spacing:.08em;text-align:center;margin-top:10px;color:var(--muted)}
.frame.phone{max-width:250px;margin-inline:auto;border-radius:28px;padding:10px}
.frame.phone img{border-radius:20px}
.pair{display:flex;gap:18px;align-items:flex-end;justify-content:center}
.pair .frame.phone{flex:0 1 220px}
.label{position:absolute;top:-14px;left:16px;background:var(--mustard);color:#2b2118;border:2px solid #2b2118;font:.72rem/1 var(--type);letter-spacing:.14em;text-transform:uppercase;padding:5px 8px}

/* booth comparison */
.booth{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);overflow-x:auto}
.booth table{width:100%;min-width:560px;border-collapse:collapse}
.booth th,.booth td{padding:13px 16px;border-top:1px solid color-mix(in srgb,var(--rule) 30%,transparent);text-align:left;vertical-align:top;font-size:.98rem}
.booth thead th{border-top:0;font:800 1rem var(--display);background:var(--bg-2);border-bottom:2px solid var(--rule)}
.booth thead th.us{background:var(--red);color:#fbf4e2}
.booth tbody th{font:.82rem var(--type);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;width:22%}
.booth td.them{color:var(--muted)}
.booth td.us{font-weight:600}

/* ledger */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:26px;align-items:stretch}
.rate{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;gap:12px;position:relative}
.rate.feature{background:var(--cream);outline:3px solid var(--red);outline-offset:-9px}
.rate .ribbon{position:absolute;top:-15px;right:18px;background:var(--red);color:#fbf4e2;font:.72rem/1 var(--type);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border:2px solid var(--rule)}
.rate h3{font-size:1.6rem}
.rate .for{font:.82rem var(--type);color:var(--muted);letter-spacing:.04em}
.rate .amt{font:800 3.4rem/1 var(--display);letter-spacing:-.03em}
.rate .amt sup{font-size:.4em;vertical-align:.95em;margin-right:2px}
.rate .amt small{font:.8rem var(--type);letter-spacing:.06em;margin-left:6px;color:var(--muted)}
.rate .then{font:.8rem var(--type);color:var(--muted)}
.rate ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:7px;font-size:.96rem}
.rate li{padding-left:24px;position:relative}
.rate li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:800}
.rate .foot{margin-top:auto;padding-top:14px;border-top:2px dashed color-mix(in srgb,var(--rule) 35%,transparent);font:400 1.15rem var(--script);color:var(--teal-d)}
:root[data-theme="dark"] .rate .foot{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rate .foot{color:var(--teal)}}
.ledger-note{max-width:48rem;margin:30px auto 0;text-align:center;font:.9rem/1.7 var(--type);color:var(--muted)}

.arith{max-width:52rem;margin:56px auto 0;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:24px 26px;display:grid;gap:14px}
.arith h3{font-size:1.3rem}
.arith .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center}
.arith .row span{grid-column:1/-1;font:.82rem var(--type);color:var(--muted);letter-spacing:.04em}
.arith .bar{height:16px;border:2px solid var(--rule);width:var(--w)}
.arith .bar.them{background:repeating-linear-gradient(45deg,var(--muted) 0 6px,transparent 6px 10px)}
.arith .bar.us{background:var(--red)}
.arith .val{font:800 1.2rem var(--display);font-variant-numeric:tabular-nums}
.arith .fine{font:.78rem var(--type);color:var(--muted)}

/* FAQ */
.faq{max-width:50rem;margin:0 auto;display:grid;gap:14px}
.faq details{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow-sm);padding:16px 20px}
.faq summary{cursor:pointer;font:800 1.08rem/1.3 var(--display);list-style:none;display:flex;gap:12px;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--type);color:var(--orange);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--muted)}
.faq details p b{color:var(--text)}

/* founder */
.founder{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,60px);align-items:center}
@media (max-width:760px){.founder{grid-template-columns:1fr}}
.founder figure{margin:0;justify-self:center;max-width:320px}
.founder figure img{width:100%;height:auto;filter:drop-shadow(6px 6px 0 rgba(43,33,24,.35))}
.founder figure figcaption{margin-top:10px;text-align:center;font:.78rem var(--type);letter-spacing:.08em;color:var(--muted)}
.inventions{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.inventions li{display:grid;grid-template-columns:5.2rem 1fr;gap:12px;font-size:.98rem;border-bottom:1px dashed color-mix(in srgb,var(--rule) 35%,transparent);padding-bottom:8px}
.inventions li b{font:.8rem/1.6 var(--type);letter-spacing:.06em;color:var(--muted);font-weight:400}
.inventions li.now{font-weight:700}
.inventions li.now b{color:var(--red)}

/* mailing list gag */
.mailing{max-width:40rem;margin:0 auto;text-align:center;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:28px 24px}
.mailing h3{font-size:1.5rem}
.mailing p.small{color:var(--muted);font-size:.95rem;margin-top:8px}
.mailing form{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.mailing input{flex:1 1 15rem;min-width:0;font:1rem var(--type);padding:12px 14px;border:2px solid var(--rule);background:var(--cream);color:var(--text);border-radius:6px}
.mailing input:disabled{opacity:.55;cursor:not-allowed;text-decoration:line-through}
.mailing button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
.refusal{margin:18px auto 0;max-width:30rem;display:grid;grid-template-columns:48px 1fr;gap:12px;text-align:left;align-items:start;background:var(--mustard);color:#2b2118;border:2px solid #2b2118;border-radius:12px;box-shadow:4px 4px 0 #2b2118;padding:14px 16px;animation:pop .28s cubic-bezier(.2,1.6,.4,1)}
.refusal .avatar{width:48px;height:48px;border-radius:50%;background:#2e7c76;border:2px solid #2b2118}
.refusal cite{display:block;margin-top:4px;font:400 1.05rem var(--script);color:#8a1c1c;font-style:normal}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.refusal{animation:none}.btn{transition:none}}

/* footer */
footer.bottom{margin-top:110px;background:#2b2118;color:#f6ead0;padding-block:52px 40px;border-top:6px double #e3a92f}
footer.bottom a{color:#e3a92f}
footer.bottom .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:28px}
footer.bottom h4{margin:0 0 10px;font:.78rem var(--type);letter-spacing:.2em;text-transform:uppercase;color:#e3a92f;font-weight:400}
footer.bottom ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.95rem}
footer.bottom .sign{font:400 1.8rem/1 var(--script);color:#ec7a42}
footer.bottom .legal{margin-top:36px;padding-top:20px;border-top:1px solid rgba(246,234,208,.2);font:.78rem/1.7 var(--type);color:rgba(246,234,208,.7)}

/* receipt page */
.receipt-page{min-height:100vh;display:grid;place-items:center;padding:40px 16px}
.receipt{width:min(100%,25rem);background:#fbf4e2;color:#2b2118;padding:30px 26px 34px;font:15px/1.6 var(--type);box-shadow:0 30px 60px -30px rgba(0,0,0,.5);position:relative;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 12px) no-repeat,radial-gradient(circle at 8px 12px,transparent 7px,#000 7.5px) bottom/16px 12px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 12px) no-repeat,radial-gradient(circle at 8px 12px,transparent 7px,#000 7.5px) bottom/16px 12px repeat-x}
.receipt .c{text-align:center}
.receipt .shop{font:800 1.3rem/1.1 var(--display)}
.receipt .shop span{color:#b8262a}
.receipt hr{border:0;border-top:2px dashed #2b2118;margin:16px 0;opacity:.55}
.receipt .line{display:flex;justify-content:space-between;gap:10px}
.receipt .big{font:800 1.4rem/1.25 var(--display);text-align:center;margin:20px 0 6px}
.receipt .script{font:400 1.6rem/1 "Yellowtail",cursive;color:#d8622a;text-align:center;margin-top:8px}
.receipt .bar{height:46px;margin:22px 0 6px;background:repeating-linear-gradient(90deg,#2b2118 0 2px,transparent 2px 4px,#2b2118 4px 7px,transparent 7px 9px,#2b2118 9px 10px,transparent 10px 13px)}
.receipt .close{display:block;width:100%;margin-top:20px;justify-content:center}
.moral{text-align:center;margin:56px auto 0;max-width:46rem;font:800 clamp(1.5rem,4vw,2.4rem)/1.15 var(--display);text-wrap:balance}
.moral em{font-style:normal;color:var(--red)}
.moral i{font-style:normal;color:var(--teal)}
.hero h1 .s2{margin-right:18%}
/* exhibits: tablet frame, video, pro note, also-in-core */
.frame.tablet{max-width:360px;margin-inline:auto;border-radius:22px;padding:10px}
.frame.tablet img{border-radius:14px}
.frame video{display:block;width:100%;height:auto;border:1px solid var(--rule);background:#fff;pointer-events:none}
.frame.phone video{border-radius:20px}
.frame.phone figcaption,.frame.tablet figcaption{text-wrap:balance}
.exhibit .pro-note{font:.9rem/1.6 var(--type);color:var(--text);border-left:3px solid var(--mustard);padding-left:12px}
.also{margin-top:48px;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:clamp(20px,4vw,36px)}
.also h3{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:18px}
.also h3 .script{display:block;font:400 .66em/1 var(--script);color:var(--orange);margin-bottom:.15em}
.also ul{list-style:none;margin:0;padding:0;columns:2 18rem;column-gap:36px}
.also li{break-inside:avoid;position:relative;padding:0 0 9px 24px;font-size:.98rem}
.also li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:800}
/* Pro workbenches */
.benches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:24px;align-items:start}
.bench{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:22px;display:grid;gap:9px}
.bench .no{font:.72rem var(--type);letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.bench h3{font-size:1.7rem}
.bench .who{font:.82rem/1.45 var(--type);color:var(--muted)}
.bench .pitch{font-weight:600}
.bench .runs{justify-self:start;font:.72rem/1 var(--type);letter-spacing:.06em;border:1.5px solid var(--teal);color:var(--teal-d);padding:5px 8px}
:root[data-theme="dark"] .bench .runs{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bench .runs{color:var(--teal)}}
.bench ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px;font-size:.95rem}
.bench li{position:relative;padding-left:22px}
.bench li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:800}
.bench .core{font-size:.88rem;color:var(--muted);border-top:2px dashed color-mix(in srgb,var(--rule) 30%,transparent);padding-top:10px}
.bench .caveat{font:.8rem/1.5 var(--type);color:var(--muted)}
.bench.summary{background:var(--cream);outline:3px solid var(--red);outline-offset:-9px;padding:26px}
.bench.summary .btn{justify-self:start;margin-top:6px}
.bench .aside{font:400 1.15rem/1.3 var(--script);color:var(--teal-d)}
:root[data-theme="dark"] .bench .aside{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bench .aside{color:var(--teal)}}
/* Reel 2 scene */
.scene{max-width:46rem;margin:0 auto;background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:clamp(20px,4vw,36px);display:grid;gap:12px;font:1.02rem/1.75 var(--type)}
.scene .setting{font:.74rem var(--type);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);border-bottom:3px double var(--rule);padding-bottom:10px}
.scene .line{display:grid;grid-template-columns:7.5rem 1fr;gap:12px}
.scene .line span{font:.72rem/2.2 var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.scene .gus-line{color:var(--red);font-size:1.2rem}
.scene a{font:.9rem var(--type);margin-top:4px}
@media (max-width:520px){.scene .line{grid-template-columns:1fr;gap:0}}
.bridge{text-align:center;max-width:40rem;margin:44px auto 32px;font:400 1.5rem/1.3 var(--script);color:var(--teal-d)}
:root[data-theme="dark"] .bridge{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bridge{color:var(--teal)}}

/* review pass: narrator corrections, subheads, reel dividers */
.narr-note{max-width:44rem;margin:22px auto 0;padding:12px 16px;border:1.5px dashed var(--muted);font:.92rem/1.6 var(--type);color:var(--muted);transform:rotate(.4deg)}
.narr-note b{display:block;font:400 1.15rem/1 var(--script);color:var(--red);margin-bottom:4px}
.subhead{text-align:center;font-size:clamp(1.5rem,3.6vw,2.2rem);margin:72px 0 24px}
.subhead .script{display:block;font:400 .62em/1 var(--script);color:var(--orange);margin-bottom:.15em}
.disputed{font:.78rem var(--type);font-style:normal;color:var(--red)}
.reel{margin-top:96px;padding-top:72px;border-top:3px double color-mix(in srgb,var(--rule) 45%,transparent)}
.reel::before{content:"✦";position:absolute;left:50%;top:-.85em;transform:translateX(-50%);background:var(--bg);color:var(--orange);padding:0 14px;font-size:1.1rem;line-height:1.5}
/* archives: pencil collection */
.archive{margin-top:0}
.arch .founder{align-items:start}
.pencils{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:22px}
.pencils figure{margin:0;text-align:center}
.pencils img{width:120px;height:120px;margin:0 auto;filter:drop-shadow(4px 4px 0 rgba(43,33,24,.45))}
.pencils figcaption{margin-top:10px;font-size:.9rem;color:var(--muted);text-wrap:balance}
.pencils figcaption b{display:block;font:800 1rem/1.2 var(--display);color:var(--text);margin-bottom:2px}