/* jonathangu.com, drawn in ink: warm paper, brown-black ink, hand-drawn frames, pill buttons with offset shadows.
   Every frame is a CSS box pushed through the page's wobble filter (#wob in the inline sprite), so it reads as
   inked by hand; rules and underlines are hand-drawn SVG paths that draw themselves in. */

@font-face{font-family:"Shantell Sans";src:url(/assets/fonts/shantell-sans-latin.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Shantell Sans";src:url(/assets/fonts/shantell-sans-italic-latin.woff2) format("woff2");font-weight:300 800;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  --paper:#f2efe7; --panel:#f8f6f0; --ink:#231e16; --muted:#5f574a; --rule:#ddd6c8; --soft:#ebe6da;
  --accent:#f4b829; --accent-d:#d49c1f; --tomato:#ef6a4c; --mint:#93d3b0; --cobalt:#76a0e2; --blush:#f3a6bb; --shadow:#41538f;
  --link:#2f4f9a;
  --hand:"Shantell Sans","Comic Sans MS","Chalkboard SE","Segoe Print",cursive;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1240px; --gut:clamp(16px,4vw,40px);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .39  0 0 0 0 .33  .16 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  --blot:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .48  0 0 0 0 .36  .10 0 0 0 -.02'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
  --wave:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M1 3.4C30 2 60 4.6 100 3.2S170 2.2 199 3.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>");
  --arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'><path d='M3 13.2C17.6 10.1 33.8 15.4 52.5 11.4M44.4 4.6C47.8 7.2 50.8 9.4 54.2 11.2C50.4 13.4 47.2 16.3 44.1 19.9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  color-scheme:light;
}
html[data-theme="night"]{
  --paper:#16223b; --panel:#1d2b49; --ink:#f3ead7; --muted:#cfc5ae; --rule:#3b4b6e; --soft:#22335a; --link:#a9c4f5;
  color-scheme:dark;
}
/* the drawings and their frames stay on lit paper at night, like cards under a desk lamp */
.plate,.print,.thumb,.lit{--paper:#f2efe7;--panel:#f8f6f0;--ink:#231e16;--muted:#5f574a;--rule:#ddd6c8;--soft:#ebe6da;--link:#2f4f9a}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;overflow-x:clip;background-color:var(--paper);background-image:var(--grain),var(--blot);color:var(--ink);
  font:400 16.5px/1.6 var(--hand);transition:background-color .5s ease,color .5s ease}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--hand);font-weight:800;letter-spacing:-.01em;line-height:1.02}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:16px;top:-90px;z-index:90;background:var(--ink);color:var(--paper);font:700 14px/1 var(--mono);padding:15px 18px;border-radius:999px;text-decoration:none;min-height:44px}
.skip-link:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.js .no-js{display:none!important}
html:not(.js) .js-only,html:not(.js) .hero .ask{display:none!important}
.i{width:1.05em;height:1.05em;vertical-align:-.16em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- hand-drawn frames: the box is drawn by ::before and pushed through the wobble filter ---------- */
.inked,.btn,.plate,.ask,.item,.print a,.ask-fig,.console{position:relative;isolation:isolate}
.inked::before,.btn::before,.plate::before,.ask::before,.item::before,.ask-fig::before,.console::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border:2px solid var(--ink);border-radius:var(--r,16px);background:var(--frame-bg,var(--panel));
  box-shadow:var(--sh,4px 4px 0) var(--sh-c,var(--ink));filter:url(#wob)}

/* ---------- pill buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;min-width:52px;padding:0 20px;border:0;background:none;cursor:pointer;
  font:700 14px/1.15 var(--mono);letter-spacing:.01em;color:var(--ink);text-decoration:none;white-space:nowrap;
  --r:999px;--sh:2.5px 2.5px 0;--frame-bg:var(--paper);transition:transform .12s ease}
.btn:hover{transform:translate(-1px,-1px);--sh:4px 4px 0;--frame-bg:color-mix(in srgb,var(--accent) 34%,var(--paper))}
.btn:active{transform:translate(2px,2px);--sh:0 0 0}
.btn:focus-visible{outline-offset:5px;border-radius:999px}
.btn.primary{color:var(--paper);--frame-bg:var(--ink);--sh-c:var(--accent);--sh:3px 3px 0}
.btn.primary:hover{--frame-bg:var(--ink);--sh:5px 5px 0}
.btn.small{min-height:44px;padding:0 15px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:default;transform:none}

/* ---------- figure buttons on these pages: the same hand-inked pill as the page's own buttons ---------- */
.ink-btn,.ink-chip{position:relative;isolation:isolate;border-color:transparent;background:none;box-shadow:none}
.ink-btn::before,.ink-chip::before{content:"";position:absolute;inset:-1.6px;z-index:-1;pointer-events:none;border:1.8px solid var(--ink);border-radius:inherit;
  background:var(--b,var(--paper));box-shadow:2px 2px 0 var(--ink);filter:url(#wob)}
.ink-btn:hover,.ink-btn:active,.ink-chip:hover,.ink-chip.current{background:none;box-shadow:none}
.ink-btn:hover::before{--b:color-mix(in srgb,var(--accent) 34%,var(--paper));box-shadow:3.5px 3.5px 0 var(--ink)}
.ink-btn:active::before{box-shadow:0 0 0 var(--ink)}
.ink-chip:hover::before{--b:var(--accent)}
.ink-chip.current{color:var(--paper)}
.ink-chip.current::before{--b:var(--ink)}
.ink-chips{border-color:transparent;box-shadow:none;background:none;isolation:isolate}
.ink-chips::before{content:"";position:absolute;inset:-2px;z-index:-1;border:2px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);filter:url(#wob)}

/* ---------- masthead ---------- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding-top:18px;padding-bottom:6px;flex-wrap:wrap}
.monogram{position:relative;display:inline-grid;place-items:center;width:92px;height:62px;text-decoration:none;color:var(--ink);flex:none}
.mono-blob{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mono-blob path{fill:var(--accent);stroke:none;filter:url(#wob)}
.mono-blob .mono-line{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.mono-text{position:relative;font:800 31px/1 var(--hand);letter-spacing:-.02em;color:#231e16;transform:rotate(-4deg)}
.mono-dot{color:var(--tomato);-webkit-text-stroke:1px #231e16}
.monogram:hover .mono-text{animation:hop .5s ease}
.topnav{display:flex;flex-wrap:wrap;gap:2px 4px;font:600 14px/1 var(--mono)}
.topnav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;text-decoration:none;border-radius:999px;position:relative}
.topnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:6px;background:var(--ink);
  -webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.topnav a:hover::after,.topnav a:focus-visible::after{transform:scaleX(1)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"title title" "copy fig" "ask fig" "figs figs";gap:22px 48px;align-items:start;padding-top:14px;padding-bottom:30px;position:relative}
.hero-title{grid-area:title;position:relative;min-width:0}
.hero-copy{grid-area:copy;position:relative;min-width:0}
.plate-hero{grid-area:fig}
.hero .ask{grid-area:ask}
.hero .ask-figs{grid-area:figs}
.eyebrow{display:flex;align-items:center;gap:9px;font:600 12.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.eyebrow .dot{width:11px;height:11px;border-radius:50%;background:var(--tomato);box-shadow:0 0 0 2px var(--ink);flex:none}
h1{font-size:clamp(56px,10.4vw,152px);line-height:.92;letter-spacing:-.035em;margin:0;font-weight:800}
.boil{filter:url(#boil-1)}
.lead{font:600 clamp(23px,2.5vw,31px)/1.25 var(--hand);letter-spacing:-.01em;margin-bottom:18px;max-width:22em}
.hl{position:relative;white-space:nowrap;z-index:0;font-style:normal}
.hl-ink{position:absolute;left:-4px;right:-6px;bottom:-.22em;width:calc(100% + 10px);height:.95em;z-index:-1;overflow:visible}
.hl-ink path{fill:none;stroke:var(--accent);stroke-width:15;stroke-linecap:round;opacity:.85}
.bio{font-size:17.5px;line-height:1.6;max-width:31em;margin-bottom:12px}
.inline{color:var(--link);font-weight:700;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-style:wavy;text-decoration-color:color-mix(in srgb,var(--link) 60%,transparent);padding-block:12px}
.hero-note{font:500 13px/1.5 var(--mono);color:var(--muted);max-width:36em}
.hero-curl{position:absolute;right:10px;top:62px;width:96px;height:150px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(78deg);pointer-events:none}
.hero-aside{position:absolute;right:0;top:-6px;font:600 18px/1.2 var(--hand);color:var(--muted);transform:rotate(-4deg);text-align:right;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* ---------- plates (figure frames) ---------- */
.plate{margin:0;padding:16px 18px 18px;color:var(--ink);--r:22px;--sh:5px 5px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.plate-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-right:4px}
.fig-no{display:inline-flex;align-items:center;font:800 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:#fff4d6;
  box-shadow:0 0 0 1.6px var(--ink),2px 2px 0 1.6px var(--ink);transform:rotate(-2deg);align-self:center}
.plate-title{font:800 clamp(21px,2vw,26px)/1.1 var(--hand);letter-spacing:-.01em;margin:0}
.plate-line{flex-basis:100%;font:500 13px/1.4 var(--mono);color:var(--muted);margin:0}
.plate-note{font-size:15.5px;line-height:1.55;color:var(--ink);max-width:40em}
.plate-hero{--r:26px;--sh:6px 6px 0}

/* ---------- figure slots ---------- */
.ink-slot{position:relative;scroll-margin-top:110px;min-width:0}
.ink-mount{position:relative;min-width:0}
.ink-mount>img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.js .ink-mount:not(.ink-fig){padding-top:56px}
.ink-mount:not(.ink-fig){background:var(--ph) center 62%/72% auto no-repeat}
.ink-mount{--ph:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'><g fill='none' stroke='%23231e16' stroke-linecap='round' stroke-linejoin='round' opacity='.22'><path d='M200 30L330 95L200 160L70 95Z' stroke-width='3'/><path d='M70 95L70 170L200 236L330 170L330 95M200 160L200 236' stroke-width='3'/><path d='M120 120L120 160M280 120L280 160' stroke-width='2' stroke-dasharray='6 9'/></g></svg>")}
.ink-mount.snap-missing>img{visibility:hidden}
.ink-mount.ink-fig{padding-top:0;background:none}
.ink-fig .ink-svg{transition:none}
.ink-slot.near .ink-svg{will-change:transform}
.ink-slot .ink-svg{transform:translateY(calc(var(--bob,0) * 1px)) rotate(calc(var(--bob,0) * .045deg))}
.ink-mount.failed{outline:0}

/* ---------- ask the page ---------- */
.ask{padding:20px 20px 18px;--r:22px;--sh:5px 5px 0;--frame-bg:var(--panel)}
.ask-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:14px}
.ask-head h2{font-size:clamp(28px,3vw,36px)}
.ask-sub{font:600 13px/1.4 var(--mono);color:var(--muted)}
.ask-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ask-btn{position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 14px 8px 10px;border:0;background:none;cursor:pointer;text-align:left;
  font:700 14.5px/1.2 var(--mono);color:var(--ink);transition:transform .12s ease}
.ask-btn::before{content:"";position:absolute;inset:0;z-index:-1;border:2px solid var(--ink);border-radius:18px;background:var(--btn-c,var(--paper));box-shadow:3px 3px 0 var(--ink);filter:url(#wob2);transition:background-color .15s}
.ask-btn:hover{transform:translate(-1px,-2px) rotate(-.6deg)}
.ask-btn:hover::before{box-shadow:5px 5px 0 var(--ink)}
.ask-btn:active{transform:translate(2px,2px)}
.ask-btn:active::before{box-shadow:0 0 0 var(--ink)}
.ask-btn:focus-visible{outline-offset:4px;border-radius:18px}
.ask-btn .ico{width:38px;height:38px;flex:none;fill:none;stroke:#231e16;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;padding:3px;border-radius:12px;background:#fffdf6;box-shadow:0 0 0 1.6px #231e16}
.ask-btn .ico .fill-a{fill:var(--accent)} .ask-btn .ico .fill-b{fill:var(--tomato)} .ask-btn .ico .fill-c{fill:var(--cobalt)} .ask-btn .ico .fill-d{fill:var(--mint)} .ask-btn .ico .dot{fill:#231e16;stroke:none}
.ask-btn[data-do="recommend"]{--btn-c:color-mix(in srgb,var(--accent) 55%,#f2efe7)}
.ask-btn[data-do="music"]{--btn-c:color-mix(in srgb,var(--mint) 60%,#f2efe7)}
.ask-btn[data-do="night"]{--btn-c:color-mix(in srgb,var(--cobalt) 50%,#f2efe7)}
.ask-btn[data-do="confetti"]{--btn-c:color-mix(in srgb,var(--blush) 62%,#f2efe7)}
.ask-btn[data-do="wiggle"]{--btn-c:color-mix(in srgb,var(--tomato) 42%,#f2efe7)}
.ask-btn[data-do="recolor"]{--btn-c:color-mix(in srgb,var(--accent) 30%,#f2efe7)}
.ask-btn.surprise{grid-column:1/-1;justify-content:center;--btn-c:var(--ink);color:var(--paper)}
.ask-btn.surprise::before{box-shadow:3px 3px 0 var(--accent)}
.ask-btn.surprise:hover::before{box-shadow:5px 5px 0 var(--accent)}
.ask-btn.on{--btn-c:var(--ink);color:var(--paper)}
.ask-btn.busy .ico{animation:spin 1s linear infinite}
.ask-status{min-height:1.5em;margin-top:12px;font:600 13.5px/1.45 var(--mono);color:var(--ink)}
.ask-status a{color:var(--link);font-weight:800;padding-block:12px}
.ask-figs{display:flex;align-items:center;gap:10px 16px;min-width:0}
.ask-figs-label{font:800 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:none;max-width:7em}
.ask-row{display:flex;flex-wrap:wrap;gap:10px 10px;min-width:0;padding:4px 6px 8px 2px}
.ask-fig{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px 0 12px;font:700 13px/1 var(--mono);color:var(--ink);text-decoration:none;white-space:nowrap;
  --r:999px;--sh:2px 2px 0;--frame-bg:var(--paper);transition:transform .12s ease}
.ask-fig::after{content:"";order:-1;width:10px;height:10px;border-radius:50%;background:var(--chip,var(--cobalt));box-shadow:0 0 0 1.5px var(--ink)}
.ask-fig[data-ask="balance"],.ask-fig[data-ask="boats"],.ask-fig[data-ask="wheels"],.ask-fig[data-ask="bedtime"],.ask-fig[data-ask="languages"],.ask-fig[data-ask="pancakes"]{--chip:var(--blush)}
.ask-fig[data-ask="arcade"],.ask-fig[data-ask="mailbox"]{--chip:var(--accent)}
.ask-fig:hover{transform:translate(-1px,-1px);--sh:3.5px 3.5px 0;--frame-bg:color-mix(in srgb,var(--chip,var(--cobalt)) 40%,var(--paper))}
.ask-fig:active{transform:translate(2px,2px);--sh:0 0 0}
.ask-fig:focus-visible{outline-offset:4px;border-radius:999px}

/* the floating "ask" pill and its pop-up sheet (built by site.js) */
.ask-float{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:70;display:inline-flex;align-items:center;gap:8px;
  min-height:52px;padding:0 18px 0 12px;border:0;background:none;cursor:pointer;font:800 14px/1 var(--mono);color:var(--paper);
  transform:translateY(140%);transition:transform .3s ease;isolation:isolate}
.ask-float::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;background:var(--ink);box-shadow:3px 3px 0 var(--accent);filter:url(#wob)}
.ask-float .ico{width:30px;height:30px;fill:none;stroke:#231e16;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;background:var(--accent);border-radius:50%;padding:2px}
.ask-float.show{transform:none}
.ask-pop{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 64px);z-index:71;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 110px);overflow:auto;
  padding:16px;--r:22px;--sh:5px 5px 0;--frame-bg:var(--panel);isolation:isolate;position:fixed}
.ask-pop::before{content:"";position:absolute;inset:0;z-index:-1;border:2px solid var(--ink);border-radius:22px;background:var(--panel);box-shadow:5px 5px 0 var(--ink);filter:url(#wob)}
.ask-pop[hidden]{display:none}
.ask-pop h2{font-size:24px;margin:0 0 12px}
.ask-pop .ask-main{grid-template-columns:1fr}
.ask-pop .ask-btn{min-height:52px}

/* ---------- section bands ---------- */
.band{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(40px,6vw,80px)}
.band>.wrap,.credo>.wrap{position:relative;z-index:1}
.sec-head{max-width:860px;margin-bottom:clamp(28px,4vw,46px);position:relative}
.kicker{font:700 12.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.sec-head h2{font-size:clamp(38px,5.4vw,66px);line-height:.98;letter-spacing:-.025em}
.rule{display:block;width:min(100%,560px);height:16px;margin:12px 0 18px;overflow:visible}
.rule path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.sub{font:700 clamp(19px,2vw,24px)/1.3 var(--hand);margin-bottom:12px}
.intro{font-size:17.5px;line-height:1.62;max-width:46em}

/* draw-in: rules, highlights and meter bars draw themselves when scrolled to */
.js .draw path{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.05,.3,1)}
.js .draw.drawn path{stroke-dashoffset:0}
.js .hl-ink.draw path{transition-duration:.9s;transition-delay:.35s}

/* ---------- margin doodles ---------- */
.margins{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.doodle{position:absolute;display:block;width:52px;height:52px;pointer-events:auto;cursor:pointer;color:var(--ink);--df:var(--accent);
  animation:drift var(--dur,11s) ease-in-out infinite alternate;animation-delay:var(--del,0s);touch-action:manipulation}
.doodle svg{width:100%;height:100%;overflow:visible;fill:var(--df);stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;filter:url(#wob)}
.doodle .trail{fill:none;stroke-dasharray:3 5}
.doodle.boing{animation:boing .75s cubic-bezier(.3,1.6,.5,1) both}
.d-a{left:max(10px,calc(50% - 704px));top:120px;--df:var(--accent);--dur:9s}
.d-b{right:max(6px,calc(50% - 712px));top:42%;width:66px;height:34px;--df:none;--dur:12s;--del:-3s}
.d-c{left:max(16px,calc(50% - 690px));bottom:16%;width:38px;height:38px;--df:var(--blush);--dur:8s;--del:-2s}
.d-d{right:max(4px,calc(50% - 714px));top:110px;width:70px;height:48px;--df:#fffdf6;--dur:13s}
.d-e{left:max(10px,calc(50% - 702px));top:34%;--df:none;--dur:10s;--del:-4s}
.d-f{right:max(12px,calc(50% - 700px));top:64%;width:40px;height:40px;--df:var(--tomato);--dur:9s;--del:-1s}
.d-g{left:max(6px,calc(50% - 712px));bottom:12%;width:66px;height:34px;--df:none;--dur:14s}
.d-h{right:max(8px,calc(50% - 706px));top:100px;--df:var(--ink);--dur:7s}
.d-i{left:max(12px,calc(50% - 700px));top:46%;width:44px;height:44px;--df:var(--ink);--dur:9s;--del:-2s}
.d-j{right:max(14px,calc(50% - 694px));bottom:18%;width:40px;height:40px;--df:var(--mint);--dur:8s}
.d-k{left:max(10px,calc(50% - 704px));top:110px;--df:var(--accent);--dur:8s}
.d-l{right:max(10px,calc(50% - 704px));top:40%;--df:var(--cobalt);--dur:10s;--del:-3s}
.d-m{left:max(14px,calc(50% - 696px));bottom:14%;width:36px;height:36px;--df:var(--tomato);--dur:7s}
.d-n{right:max(8px,calc(50% - 706px));top:110px;--df:var(--tomato);--dur:9s}
.d-o{left:max(8px,calc(50% - 708px));top:28%;width:58px;height:58px;--df:var(--accent);--dur:16s}
.d-p{right:max(16px,calc(50% - 694px));top:58%;width:36px;height:36px;--df:var(--blush);--dur:8s;--del:-3s}
.d-q{left:max(6px,calc(50% - 712px));bottom:10%;width:66px;height:34px;--df:none;--dur:12s}
.d-r{left:max(10px,calc(50% - 680px));top:24%;--df:var(--accent);--dur:9s}
.d-s{right:max(10px,calc(50% - 680px));bottom:22%;width:44px;height:44px;--df:var(--mint);--dur:11s}
@media (max-width:1279px){
  .doodle{width:36px;height:36px}
  .d-b,.d-c,.d-e,.d-f,.d-g,.d-i,.d-j,.d-l,.d-m,.d-o,.d-p,.d-q{display:none}
  .d-a,.d-d,.d-h,.d-k,.d-n{left:auto;right:max(10px,calc(50% - 610px));top:clamp(48px,7vw,92px)}
  .d-d{width:52px;height:36px}
  .d-r{left:10px;top:18px}.d-s{right:10px;bottom:18px}
}
.spark{position:fixed;z-index:80;width:10px;height:10px;pointer-events:none;border-radius:50%;background:var(--ink)}

/* ---------- your shelf ---------- */
.shelf-status{display:flex;align-items:center;gap:10px;font:600 13.5px/1.45 var(--mono);margin-bottom:18px;min-height:22px}
.live{width:10px;height:10px;border-radius:50%;background:#43c25c;box-shadow:0 0 0 2px var(--ink);flex:none}
.js .live{animation:pulse 2.4s ease-in-out infinite}
.shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 16px}
.shelf li{min-width:0}
.item{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"thumb" "name" "line" "why";align-content:start;gap:6px;height:100%;padding:10px 11px 12px;text-decoration:none;color:var(--ink);
  --r:16px;--sh:3px 3px 0;--frame-bg:var(--panel);transition:transform .15s ease}
.item:hover{transform:translate(-2px,-2px) rotate(-.6deg);--sh:5px 5px 0}
.item:active{transform:translate(1px,1px);--sh:1px 1px 0}
.item:focus-visible{outline-offset:4px;border-radius:16px}
.thumb{grid-area:thumb;display:block;aspect-ratio:4/3;border-radius:11px;background:#f2efe7 var(--ph) center/70% auto no-repeat;overflow:hidden;box-shadow:inset 0 0 0 1.5px #ddd6c8}
.thumb{--ph:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'><g fill='none' stroke='%23231e16' stroke-linecap='round' stroke-linejoin='round' opacity='.22'><path d='M200 30L330 95L200 160L70 95Z' stroke-width='5'/><path d='M70 95L70 170L200 236L330 170L330 95M200 160L200 236' stroke-width='5'/></g></svg>")}
.thumb img{display:block;width:100%;height:100%;object-fit:contain}
.thumb.snap-missing img{visibility:hidden}
.rank{position:absolute;left:-9px;top:-10px;z-index:2;display:inline-grid;place-items:center;min-width:38px;height:34px;padding:0 6px;font:800 14px/1 var(--mono);border-radius:50% 46% 52% 44%;
  box-shadow:0 0 0 2px #231e16,2px 2px 0 2px #231e16;background:#fff4d6;color:#231e16;transform:rotate(-6deg)}
.item[data-rank="1"] .rank{background:var(--accent)}
.item.moved .rank{background:var(--mint)}
.name{grid-area:name;font:800 16px/1.15 var(--hand);min-width:0;overflow-wrap:break-word;margin-top:2px}
.line{grid-area:line;font:500 12px/1.4 var(--mono);color:var(--muted)}
.why{grid-area:why;justify-self:start;align-self:end;font:700 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:3px 8px;border-radius:999px;box-shadow:0 0 0 1.3px var(--rule)}
.item.moved .why{color:#231e16;background:color-mix(in srgb,var(--accent) 55%,transparent)}
.shelf-more{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(22px,3vw,36px);margin-top:clamp(36px,5vw,56px);align-items:start}
.console{padding:20px 20px 18px;--r:20px;--sh:5px 5px 0;display:flex;flex-direction:column;gap:12px}
.console-title{font:800 21px/1.15 var(--hand)}
.meter{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.meter li{display:grid;grid-template-columns:1fr 46px;grid-template-areas:"label value" "bar bar";gap:2px 8px;align-items:end}
.meter .label{grid-area:label;font:600 13px/1.2 var(--mono)}
.meter .value{grid-area:value;text-align:right;font:800 14px/1 var(--mono);font-variant-numeric:tabular-nums}
.meter .bar{grid-area:bar;display:block;height:16px}
.meter svg{display:block;width:100%;height:100%;overflow:visible}
.meter .track{fill:none;stroke:var(--rule);stroke-width:9;stroke-linecap:round}
.meter .fill{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--v,.2));transition:stroke-dashoffset .7s cubic-bezier(.5,0,.2,1)}
.meter li[data-topic="ml"] .fill{--v:.38}.meter li[data-topic="platform"] .fill{--v:.2}
.meter li[data-topic="experiments"] .fill,.meter li[data-topic="play"] .fill,.meter li[data-topic="learning"] .fill{--v:.14}
.meter li.up .value{color:var(--link)}
.console-note{font:500 12.5px/1.5 var(--mono);color:var(--muted)}
.console-foot{font:700 12.5px/1.4 var(--mono)}
.console-actions{display:flex;flex-wrap:wrap;gap:10px}
.compare{padding:22px 22px 14px;--r:20px;--sh:5px 5px 0}
.compare h3{font:800 clamp(22px,2.4vw,28px)/1.1 var(--hand);margin-bottom:12px}
.table-wrap{overflow-x:auto}
.compare table{width:100%;border-collapse:collapse;font:500 13.5px/1.45 var(--mono);min-width:520px}
.compare th,.compare td{text-align:left;vertical-align:top;padding:11px 12px 11px 0}
.compare thead th{font:800 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.compare tbody th{font:700 15px/1.3 var(--hand);width:24%}
.compare tbody td,.compare tbody th{position:relative}
.compare tbody tr>*::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ink);opacity:.35;-webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat}

/* ---------- workshop ---------- */
.plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.5vw,44px) clamp(22px,3vw,40px)}
.loop{margin-top:clamp(40px,6vw,64px);padding:22px 24px;--r:20px;--sh:5px 5px 0;--frame-bg:color-mix(in srgb,var(--mint) 30%,var(--panel))}
.loop-title{font:800 24px/1.1 var(--hand);margin-bottom:12px}
.loop-steps{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0}
.loop-steps li{display:inline-flex;align-items:center;font:700 13.5px/1.2 var(--mono);white-space:nowrap}
.loop-steps li+li::before{content:"";display:inline-block;width:40px;height:16px;margin:0 6px;background:var(--ink);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.loop-end span{background:var(--accent);color:#231e16;padding:5px 11px;border-radius:999px;box-shadow:0 0 0 1.6px var(--ink),2px 2px 0 1.6px var(--ink)}
.loop p{font-size:16px;max-width:52em}

/* ---------- side A ---------- */
.side-a-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.5vw,44px);align-items:start}
.side-a-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.show:empty{display:none}
.tracks{list-style:none;margin:0;padding:12px 18px;--r:18px;--sh:4px 4px 0}
.tracks li{display:grid;grid-template-columns:36px 1fr auto;grid-template-areas:"num title len" "num for for";gap:2px 10px;padding:12px 0;position:relative;align-items:center}
.js .tracks li:has(.t-play){grid-template-columns:48px 1fr auto;grid-template-areas:"play title len" "play for for"}
.js .tracks li:has(.t-play) .t-num{display:none}
.t-play{grid-area:play;position:relative;isolation:isolate;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center;color:#231e16}
.t-play::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;border:2px solid var(--ink);background:var(--accent);box-shadow:2px 2px 0 var(--ink);filter:url(#wob)}
.t-play:hover{transform:translate(-1px,-1px)}
.t-play:active{transform:translate(1px,1px)}
.t-play:focus-visible{outline-offset:3px;border-radius:50%}
.t-play svg{width:22px;height:22px;fill:#231e16;stroke:#231e16;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.t-play .bars{display:none;fill:none;stroke-width:3.4}
.t-play.on .tri{display:none}
.t-play.on .bars{display:inline}
.tracks li.playing{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,transparent),transparent)}
.tracks li+li::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ink);opacity:.4;-webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat}
.t-num{grid-area:num;font:800 13px/1.6 var(--mono);color:var(--muted)}
.t-title{grid-area:title;font:800 19px/1.2 var(--hand)}
.t-for{grid-area:for;font:500 12.5px/1.4 var(--mono);color:var(--muted)}
.t-len{grid-area:len;font:700 13px/1.6 var(--mono);font-variant-numeric:tabular-nums}
.tracks li.playing .t-title{text-decoration:underline wavy var(--accent) 2px;text-underline-offset:5px}
.tracks-audio{display:grid;gap:6px;font:600 13px/1.4 var(--mono)}
.tracks-audio audio{width:100%}
.side-note{font:500 12.5px/1.5 var(--mono);color:var(--muted)}

/* ---------- arcade ---------- */
.arcade-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,3.5vw,48px);align-items:start}
.arcade-copy{display:flex;flex-direction:column;gap:26px;min-width:0}
.game{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.game .kicker{margin-bottom:0}
.game-title{font:800 clamp(32px,3.6vw,46px)/1 var(--hand);letter-spacing:-.02em}
.game-sub{font:700 19px/1.3 var(--hand)}
.game p:not([class]){font-size:16.5px;line-height:1.6}
.game-note{font:600 12.5px/1.4 var(--mono);color:var(--muted)}
.ticket{padding:20px 22px 22px;--r:18px;--sh:4px 4px 0;--frame-bg:color-mix(in srgb,var(--blush) 26%,var(--panel));transform:rotate(-.6deg)}

/* ---------- family ---------- */
.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(160px,.55fr);gap:clamp(18px,3vw,40px);align-items:center;margin-bottom:clamp(40px,6vw,72px)}
.print{margin:0;position:relative;display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px;color:var(--ink)}
.print::before{content:"";position:absolute;inset:0;z-index:-1;border:2px solid var(--ink);border-radius:6px;background:#fffdf7;box-shadow:5px 5px 0 var(--ink);filter:url(#wob)}
.print-a{transform:rotate(-1.6deg)}
.print-b{transform:rotate(1.4deg) translateY(18px)}
.print a{display:block;border-radius:3px;overflow:hidden}
.print img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.print-b img{aspect-ratio:4/5}
.print figcaption{font:700 18px/1.2 var(--hand);text-align:center}
.print::after{content:"";position:absolute;top:-14px;left:50%;width:96px;height:28px;margin-left:-48px;background:color-mix(in srgb,var(--accent) 62%,transparent);transform:rotate(-4deg);
  clip-path:polygon(2% 10%,8% 0,20% 8%,34% 0,48% 9%,62% 1%,76% 8%,90% 0,98% 9%,100% 90%,92% 100%,78% 92%,64% 100%,50% 91%,36% 100%,22% 92%,8% 100%,0 90%)}
.print-b::after{background:color-mix(in srgb,var(--mint) 70%,transparent);transform:rotate(5deg)}
.spread-note{font:700 clamp(20px,2vw,26px)/1.3 var(--hand);transform:rotate(-3deg)}
.spread-heart{display:block;width:44px;height:44px;margin-top:8px;fill:var(--tomato);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;filter:url(#wob)}
.pull{margin:clamp(44px,6vw,72px) auto 0;max-width:820px;text-align:center;position:relative}
.pull p{font:700 clamp(22px,2.6vw,32px)/1.35 var(--hand)}
.pull::before{content:"“";display:block;font:800 80px/0.6 var(--hand);color:var(--accent);-webkit-text-stroke:2px var(--ink);margin-bottom:6px}

/* ---------- credo ---------- */
.credo{position:relative;padding:clamp(70px,10vw,130px) 0;text-align:center}
.credo-text{font:800 clamp(30px,4.6vw,60px)/1.18 var(--hand);letter-spacing:-.02em;max-width:18em;margin:0 auto}
.credo-text em{font-style:italic}
.credo-note{margin-top:20px;font:600 13.5px/1.4 var(--mono);color:var(--muted)}

/* ---------- footer ---------- */
.footer{padding:clamp(30px,5vw,60px) 0 clamp(40px,6vw,70px);position:relative}
.footer-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center}
.footer-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer-name{font:800 clamp(38px,5vw,60px)/1 var(--hand);letter-spacing:-.025em}
.footer-sub{font:600 14px/1.4 var(--mono);color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:12px}
.dedication{font:700 italic 22px/1.3 var(--hand)}
.credit{font:500 12.5px/1.6 var(--mono);color:var(--muted);max-width:40em}
.credit a{color:var(--link);font-weight:700;padding-block:14px}

/* ---------- night ---------- */
html[data-theme="night"] body{background-image:var(--grain)}
html[data-theme="night"] .plate::before,html[data-theme="night"] .print::before{box-shadow:6px 6px 0 #0b1426,0 0 0 1px rgba(243,234,215,.15),0 0 60px rgba(244,184,41,.16)}
html[data-theme="night"] .item{--frame-bg:var(--panel)}
html[data-theme="night"] .mono-text{color:#231e16}
html[data-theme="night"] .hl-ink path{opacity:.55}
html[data-theme="night"] .hl{color:var(--ink)}
html[data-theme="night"] .ask-btn{color:#231e16}
html[data-theme="night"] .ask-btn::before{border-color:#231e16;box-shadow:3px 3px 0 #0b1426}
html[data-theme="night"] .ask-fig{color:#231e16;--frame-bg:#f2efe7}
html[data-theme="night"] .ask-fig::before{border-color:#231e16;box-shadow:2px 2px 0 #0b1426}
html[data-theme="night"] .ask-btn.surprise,html[data-theme="night"] .ask-btn.on{color:#231e16;--btn-c:var(--accent)}
html[data-theme="night"] .doodle{--df:none}
html[data-theme="night"] .fig-no{color:#231e16}
.stars-night{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .8s}
html[data-theme="night"] .stars-night{opacity:1}

/* ---------- motion ---------- */
@keyframes boil{0%{filter:url(#boil-1)}33%{filter:url(#boil-2)}66%{filter:url(#boil-3)}100%{filter:url(#boil-1)}}
@keyframes drift{0%{transform:translate(0,0) rotate(-7deg)}50%{transform:translate(7px,-11px) rotate(4deg)}100%{transform:translate(-4px,4px) rotate(9deg)}}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.45) rotate(-20deg)}60%{transform:scale(.85) rotate(200deg)}100%{transform:scale(1) rotate(360deg)}}
@keyframes hop{0%,100%{transform:rotate(-4deg)}40%{transform:translateY(-6px) rotate(3deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px var(--ink)}50%{box-shadow:0 0 0 2px var(--ink),0 0 0 6px rgba(67,194,92,.25)}}
@keyframes jiggle{0%,100%{transform:none}25%{transform:rotate(-1.2deg) translateY(-2px)}75%{transform:rotate(1.2deg) translateY(1px)}}
@media (prefers-reduced-motion:no-preference){
  .boil:hover,.boil.boiling{animation:boil .42s steps(1,end) infinite}
  html.wiggling .boil,html.wiggling .btn::before,html.wiggling .ask-btn::before,html.wiggling .item::before{animation:boil .3s steps(1,end) infinite}
  html.wiggling .doodle{animation-duration:.5s}
  html.wiggling .ink-mount:not(.ink-fig)>img,html.wiggling .print,html.wiggling .thumb{animation:jiggle .28s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body{transition:none}
  .doodle,.doodle.boing,.js .live,.monogram:hover .mono-text,.ask-btn.busy .ico{animation:none}
  .js .draw path,.meter .fill{transition:none;stroke-dashoffset:0}
  .meter .fill{stroke-dashoffset:calc(1 - var(--v,.2))}
  .btn,.ask-btn,.ask-fig,.item,.ask-float,.topnav a::after{transition:none}
  .ink-slot .ink-svg{transform:none}
}

/* ---------- layout: tablet and phone ---------- */
@media (max-width:1100px){
  .hero-aside,.hero-curl{display:none}
  .shelf{grid-template-columns:repeat(4,minmax(0,1fr))}
  .shelf-more{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "lead" "fig" "bio" "note" "ask" "figs";gap:16px}
  .hero-copy{display:contents}
  .hero .lead{grid-area:lead;margin:0}.hero .bio{grid-area:bio;margin:4px 0 0}.hero .hero-note{grid-area:note}
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plates{grid-template-columns:minmax(0,1fr)}
  .side-a-grid,.arcade-grid,.footer-grid{grid-template-columns:minmax(0,1fr)}
  .spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .spread-note{grid-column:1/-1;text-align:center;transform:rotate(-1.5deg)}
  .spread-heart{margin:8px auto 0}
  .ask-figs{flex-direction:column;align-items:stretch;gap:8px}
  .ask-figs-label{max-width:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .masthead{padding-top:8px;gap:2px 12px}
  .monogram{width:66px;height:46px}
  .mono-text{font-size:23px}
  .topnav{width:100%;justify-content:space-between;gap:0;margin:0 -8px;font-size:13px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{padding:0 8px;flex:none}
  h1{font-size:clamp(44px,15.3vw,74px)}
  .eyebrow{font-size:11px;margin-bottom:8px;letter-spacing:.08em}
  .lead{font-size:21px}
  .plate-title{font-size:20px}
  .bio{font-size:16.5px}
  .plate{padding:12px 10px 14px;--sh:4px 4px 0;gap:10px}
  .plate-head{padding:0 4px}
  .plate-note{padding:0 4px;font-size:15px}
  .ask{padding:16px 12px 14px}
  .ask-main{gap:10px}
  .ask-btn{min-height:56px;font-size:13.5px;padding:8px 10px 8px 8px;gap:8px}
  .ask-btn .ico{width:34px;height:34px}
  .ask-row{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 14px 10px 2px;margin-right:calc(-1 * var(--gut));
    -webkit-mask:linear-gradient(90deg,#000 86%,transparent);mask:linear-gradient(90deg,#000 86%,transparent);scrollbar-width:none}
  .ask-row::-webkit-scrollbar{display:none}
  .ask-fig{scroll-snap-align:start}
  .js .ink-mount:not(.ink-fig){padding-top:108px}
  .shelf{grid-template-columns:minmax(0,1fr);gap:14px}
  .item{grid-template-columns:100px minmax(0,1fr);grid-template-areas:"thumb name" "thumb line" "thumb why";gap:3px 12px;padding:9px 10px 9px 9px;align-items:center}
  .thumb{align-self:stretch;aspect-ratio:4/3;height:auto}
  .rank{min-width:32px;height:28px;font-size:12.5px;left:-7px;top:-8px}
  .name{font-size:16.5px;margin:0}
  .line{font-size:12px}
  .console{padding:16px 14px}
  .compare{padding:16px 14px 8px}
  .loop{padding:18px 16px}
  .loop-steps li{font-size:12.5px}
  .loop-steps li+li::before{width:28px;margin:0 4px}
  .tracks{padding:6px 14px}
  .print-a{transform:rotate(-1.4deg)}
  .print-b{transform:rotate(1.4deg) translateY(10px)}
  .print{padding:8px 8px 10px}
  .print figcaption{font-size:15px}
  .print::after{width:64px;margin-left:-32px;height:22px}
  .footer-links .btn{padding:0 16px}
  .credo-text{font-size:clamp(23px,7.2vw,30px)}
  .ask-float{padding:0;width:56px;justify-content:center}
  .ask-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ask-float .ico{width:34px;height:34px}
  .ask-status:empty{margin-top:0;min-height:0}
}
@media (max-width:360px){
  .ask-main{grid-template-columns:minmax(0,1fr)}
  .topnav{font-size:12px}
  .topnav a{padding:0 6px}
}

/* print: plain ink on paper */
@media print{
  body{background:#fff}
  .ask,.ask-figs,.margins,.ask-float,.ask-pop,.trail-layer,.ink-btns,.console-actions{display:none!important}
}

/* ---------- small pages: résumé and 404 ---------- */
.page-small{display:flex;flex-direction:column;min-height:100vh}
.page-small main{flex:1}
.page-small>.wrap{width:100%}
.small-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(16px,4vw,48px);padding-bottom:clamp(30px,5vw,60px)}
.page-404 .small-grid{min-height:100vh}
.small-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.small-copy .kicker{margin:0}
.small-copy h1{font-size:clamp(48px,7.4vw,104px);line-height:.95;letter-spacing:-.035em}
.page-404 .small-copy h1{font-size:clamp(42px,6vw,84px)}
.small-lead{font-size:18.5px;line-height:1.6;max-width:30em}
.small-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.small-foot{padding-bottom:28px}
@media (max-width:900px){.small-grid{grid-template-columns:minmax(0,1fr)}.page-404 .small-grid{min-height:0;padding-top:28px}}

/* a hand-drawn squiggle with a star between sections */
.band::before{content:"";position:absolute;top:clamp(10px,2vw,26px);left:50%;width:min(300px,64%);height:26px;transform:translateX(-50%);background:var(--ink);opacity:.8;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26'><g fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14C14 6 22 6 30 14S46 22 54 14S70 6 78 14S94 22 102 14S118 6 126 13'/><path d='M174 13C182 6 190 6 198 14S214 22 222 14S238 6 246 14S262 22 270 14S286 6 296 13'/><path d='M150 2.5L153.2 10L161 10.6L155 15.5L157 23L150 18.8L143 23L145 15.5L139 10.6L146.8 10Z'/></g></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26'><g fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14C14 6 22 6 30 14S46 22 54 14S70 6 78 14S94 22 102 14S118 6 126 13'/><path d='M174 13C182 6 190 6 198 14S214 22 222 14S238 6 246 14S262 22 270 14S286 6 296 13'/><path d='M150 2.5L153.2 10L161 10.6L155 15.5L157 23L150 18.8L143 23L145 15.5L139 10.6L146.8 10Z'/></g></svg>") center/100% 100% no-repeat}
.fig-no{transition:transform .2s ease}
.plate:hover .fig-no,.plate:focus-within .fig-no{transform:rotate(3deg) translateY(-1px)}
@media (prefers-reduced-motion:reduce){.fig-no{transition:none}}