/* Relational: shared styles for every page (the Founder Door at / and /founders/, the Patron Door at /patrons/,
   About, the zine at /zine/, Hold the Door at /door/, Keep It Moving at /loop/ and the 404).
   A riso-printed world. Deep color fields (night, cream paper, apricot, forest, brick) meet on torn
   paper edges; every surface carries visible speckle and a fine grain lies over the whole page.
   Paper pieces (cards, tickets, the zine insert, the menu) sit on the fields with hard, off-register
   spot-color shadows. The noodle folk live inside it: stepping across section edges, standing on lit
   plates, drifting a little as you scroll.
   Headlines: Fraunces, upright, heavy and soft, one color per headline.
   Motion (reveals, drift, lamplight) is driven by site.js and switched off for reduced motion. */
:root{
  --paper:#F5E6CB;
  --cover:#FCF3E0;
  --ink:#26150F;
  --body:#4A3226;
  --muted:#75594A;
  --night:#1E110D;
  --forest:#1F3D2B;
  --apricot:#EEA85F;
  --brick:#A63C22;
  --cream:#FBF1DD;
  --cream-soft:rgba(251,241,221,.86);
  --lime:#B6E23E;
  --lime-hi:#D6F27C;
  --lime-deep:#7C9F1D;
  --pink:#F5A3C7;
  --sky:#8EC7EE;
  --sun:#F6C33B;
  --tomato:#E8452C;
  --lavender:#B9A7F0;
  --cobalt:#2340C8;
  --rule:rgba(38,21,15,.2);
  --rule-dark:rgba(251,241,221,.24);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"DM Mono", ui-monospace, Menlo, monospace;
  --gutter-l:max(clamp(18px,4.5vw,64px), env(safe-area-inset-left,0px));
  --gutter-r:max(clamp(18px,4.5vw,64px), env(safe-area-inset-right,0px));
  /* Speckle: dark flecks for light surfaces, light flecks for dark ones. */
  --speck-dark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='s' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .16  0 0 0 0 .08  0 0 0 -3.2 1.12'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  --speck-light:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='s' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .93  0 0 0 0 .8  0 0 0 -3 1.08'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  --tear:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='24' viewBox='0 0 720 24'><path d='M0 24V12L18 9L36 13L54 8L72 11L90 6L108 10L126 12L144 7L162 9L180 14L198 10L216 6L234 9L252 12L270 8L288 5L306 9L324 13L342 10L360 7L378 11L396 8L414 12L432 15L450 11L468 7L486 10L504 6L522 9L540 13L558 9L576 11L594 7L612 10L630 14L648 10L666 8L684 11L702 7L720 12V24Z'/></svg>");
  --star:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'><path d='M0 -10C1.5 -3 3 -1.5 10 0C3 1.5 1.5 3 0 10C-1.5 3 -3 1.5 -10 0C-3 -1.5 -1.5 -3 0 -10Z'/></svg>");
  --dots:radial-gradient(circle,rgba(38,21,15,.17) 1.2px,transparent 1.7px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--night)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:19px;line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* Fine grain over everything, illustrations included, so the page prints as one sheet. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.17;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
p{margin:0;text-wrap:pretty}
strong{font-weight:650}

/* One headline treatment: Fraunces upright, heavy, soft, a single color. */
h1,h2,h3,h4{font-family:var(--serif);font-style:normal;font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.022em;font-variation-settings:"SOFT" 100,"WONK" 1}
h1 em,h2 em,h3 em,h4 em{font-style:normal}
h1{font-size:clamp(48px,7vw,112px);line-height:.94;letter-spacing:-.03em}
h2{font-size:clamp(40px,6.2vw,88px);line-height:.96;letter-spacing:-.028em}
h3{font-size:clamp(27px,3vw,38px);line-height:1.04}
h4{font-size:clamp(22px,2.2vw,26px);line-height:1.1;font-weight:600}
.hl{font-style:normal;color:inherit;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 86% / 100% 36%}
.sand .hl,.insert .hl,.dossier .hl,section:not([class]) .hl{color:var(--ink)}

.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.col{max-width:860px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}

/* ---------- Sections: color fields with speckle, joined on torn edges ---------- */
section,footer{position:relative;background-color:var(--bg);background-image:var(--tex)}
section{--bg:var(--paper);--tex:var(--speck-dark);--p:0;padding-block:clamp(72px,9vw,128px)}
section::before{content:"";position:absolute;left:0;right:0;top:-23px;height:24px;pointer-events:none;background-color:var(--bg);background-image:var(--tex);
  -webkit-mask:var(--tear) repeat-x 50% 0 / 720px 24px;mask:var(--tear) repeat-x 50% 0 / 720px 24px}
.sand{--bg:var(--apricot)}
.forest{--bg:var(--forest);--tex:var(--speck-light);color:var(--cream)}
#menu{--bg:var(--brick);--tex:var(--speck-light);color:var(--cream)}
.close,footer{--bg:var(--night);--tex:var(--speck-light);color:var(--cream)}
/* Spot-color discs printed into the paper sections; they slide a little as the section passes. */
#now{background-image:var(--tex),
  radial-gradient(circle at 93% calc(34% + var(--p) * 9%),rgba(246,195,59,.5) 0 clamp(80px,12vw,180px),transparent calc(clamp(80px,12vw,180px) + 1.5px)),
  radial-gradient(circle at 3% calc(80% - var(--p) * 12%),rgba(245,163,199,.5) 0 clamp(56px,8vw,124px),transparent calc(clamp(56px,8vw,124px) + 1.5px))}
#logic,#ways{background-image:var(--tex),
  radial-gradient(circle at 6% calc(16% + var(--p) * 10%),rgba(142,199,238,.5) 0 clamp(70px,10vw,150px),transparent calc(clamp(70px,10vw,150px) + 1.5px)),
  radial-gradient(circle at 96% calc(88% - var(--p) * 10%),rgba(182,226,62,.5) 0 clamp(60px,9vw,136px),transparent calc(clamp(60px,9vw,136px) + 1.5px))}
.sand:not(#menu){background-image:var(--tex),radial-gradient(60% 50% at 50% calc(8% + var(--p) * 6%),rgba(252,226,154,.55),transparent 70%)}
.forest{background-image:var(--tex),radial-gradient(46% 38% at 50% calc(20% + var(--p) * 6%),rgba(182,226,62,.2),transparent 72%)}
#menu{background-image:var(--tex),radial-gradient(70% 55% at 50% 60%,rgba(232,69,44,.4),transparent 75%)}

/* ---------- Buttons: stickers you can press ---------- */
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 14px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:17.5px;font-weight:650;line-height:1.25;text-decoration:none;text-align:center;
  padding:16px 28px;border-radius:999px;border:2px solid currentColor;cursor:pointer;transition:translate .18s cubic-bezier(.3,1.5,.5,1),box-shadow .18s,background-color .2s}
.btn-lime{background:var(--lime);color:var(--ink);border-color:var(--lime);box-shadow:0 6px 0 var(--lime-deep),0 22px 34px -14px rgba(182,226,62,.55)}
.btn-lime:hover{background:var(--lime-hi);border-color:var(--lime-hi);translate:0 -2px;box-shadow:0 8px 0 var(--lime-deep),0 26px 38px -14px rgba(182,226,62,.6)}
.btn-lime:active{translate:0 5px;box-shadow:0 1px 0 var(--lime-deep)}
.btn-ink{background:var(--ink);color:var(--cream);border-color:var(--ink);box-shadow:0 6px 0 #000}
.btn-ink:hover{translate:0 -2px;box-shadow:0 8px 0 #000}
.btn-ink:active{translate:0 5px;box-shadow:0 1px 0 #000}
.btn-ghost{background:rgba(251,241,221,.04);color:var(--cream);border-color:rgba(251,241,221,.55)}
.btn-ghost:hover{background:rgba(251,241,221,.12);border-color:var(--cream);translate:0 -2px}
.textlink{font-size:16.5px;font-weight:600;color:var(--cream);text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--lime)}
.aside-link{font-size:16.5px;color:rgba(251,241,221,.74)}
.aside-link a{color:var(--cream);text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--lime);white-space:nowrap}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;color:var(--cream);display:flex;align-items:center;justify-content:space-between;gap:10px 28px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter-r) 14px var(--gutter-l);
  background:rgba(30,17,13,0);box-shadow:0 1px 0 rgba(251,241,221,0);transition:background-color .3s,box-shadow .3s}
.nav.scrolled{background:rgba(30,17,13,.94);box-shadow:0 1px 0 rgba(251,241,221,.14)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:25px;letter-spacing:-.02em;line-height:1;text-decoration:none;color:var(--cream);flex:none}
.logo svg{width:44px;height:28px;display:block}
.doors{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);list-style:none;margin:0;padding:0}
.doors a{font-size:15px;font-weight:500;text-decoration:none;color:rgba(251,241,221,.78);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.doors a:hover{color:var(--cream)}
.doors a[aria-current]{color:var(--cream);border-bottom-color:var(--lime)}

/* ---------- Hero: a dark room, one lit door ---------- */
.hero{position:relative;--p:0;overflow:hidden;color:var(--cream);background-color:var(--night);
  background-image:var(--speck-light),
    radial-gradient(52% 60% at 74% 46%,rgba(232,69,44,.34),transparent 72%),
    radial-gradient(60% 50% at 10% 100%,rgba(35,64,200,.3),transparent 70%),
    radial-gradient(40% 40% at 100% 0%,rgba(185,167,240,.16),transparent 70%);
  min-height:max(88svh,680px);display:flex;align-items:center;
  padding-block:calc(env(safe-area-inset-top,0px) + 100px) clamp(72px,7vw,104px)}
.hero .col{position:relative;width:100%;max-width:1240px;align-items:flex-start;text-align:left;gap:clamp(20px,2.2vw,28px)}
.hero .col > :not(.door){max-width:min(660px,54%)}
.hero .lede{font-size:clamp(19px,1.75vw,23px);line-height:1.5;color:var(--cream-soft)}
.hero .lede strong{color:var(--cream)}
.hero h1.long{font-size:clamp(38px,5vw,78px);line-height:.98;letter-spacing:-.026em}
/* The long headline gets a wider measure on desktop so it sets in three lines, not four. */
@media (min-width:900px){.hero .col > h1.long{max-width:min(780px,62%)}}
.hero .pitch{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:500;font-size:clamp(21px,2vw,27px);line-height:1.18;letter-spacing:-.012em;color:var(--cream);text-wrap:balance}
.hero .btns{justify-content:flex-start;margin-top:8px}
/* The door stands large on the right, in its own pool of lamplight. */
.door{position:absolute;right:max(var(--gutter-r),5%);top:50%;width:min(420px,34vw);aspect-ratio:300/360;translate:0 calc(-50% + var(--p) * -70px)}
.door.double{width:min(470px,38vw)}
/* Founder hero art: a cut-out crew in place of the drawn door (raising the arch; the tour table on phones). */
.door.pic{aspect-ratio:1094/1348;width:min(500px,36vw,calc(70svh * .8116))}
.door.pic picture,.door.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.door.pic img{animation:art-in 1s cubic-bezier(.2,.7,.2,1) .2s both,art-float 7s ease-in-out 1.2s infinite}
@keyframes art-in{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes art-float{50%{transform:translateY(-8px)}}
@media (max-width:899px){.door.pic{aspect-ratio:760/951;width:min(380px,86vw,calc(56svh * .7992))}}
.door::before{content:"";position:absolute;inset:-22% -30% -14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(252,226,154,.34),rgba(246,195,59,.16) 46%,transparent 72%);animation:breathe 7s ease-in-out infinite}
.door svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.door .arch{fill:none;stroke:var(--c);stroke-width:16;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.3s cubic-bezier(.5,0,.2,1) both;animation-delay:calc(var(--i) * 140ms)}
.door .floor{fill:rgba(251,241,221,.08)}
.door .spill{fill:url(#spillg);opacity:0;animation:glow 1.4s ease 1.9s forwards}
.door .spark{fill:var(--c);transform-box:fill-box;transform-origin:center;transform:scale(0);
  animation:pop .5s cubic-bezier(.3,1.6,.5,1) forwards,twinkle 2.8s ease-in-out infinite;animation-delay:calc(2.5s + var(--i) * .18s),calc(3.2s + var(--i) * .5s)}
.opening{position:absolute;left:33.33%;width:33.33%;top:27.78%;height:55.56%;border-radius:50% 50% 0 0 / 25% 25% 0 0;
  background:radial-gradient(120% 90% at 50% 92%,#FFF6DE 0%,#FCE29A 45%,#F6C33B 100%);overflow:hidden;perspective:520px;transform-origin:50% 100%;animation:rise .8s cubic-bezier(.3,.7,.2,1) .7s both}
.opening .who{position:absolute;left:var(--x,50%);bottom:-2px;height:70%;width:auto;max-width:none;transform-origin:50% 100%;
  transform:translate(-50%,105%);animation:peek .9s cubic-bezier(.3,1.5,.5,1) 2.1s forwards,sway 4.5s ease-in-out 3.1s infinite}
.leaf{position:absolute;inset:0;border-radius:inherit;background:var(--cobalt);transform-origin:0 50%;
  box-shadow:inset 0 0 0 9px #2E4FD6,inset 0 -40px 60px -30px rgba(0,0,20,.25);transform:rotateY(0deg);animation:swing 1.5s cubic-bezier(.45,0,.2,1) 1.3s both}
.leaf::after{content:"";position:absolute;right:13%;top:56%;width:11%;aspect-ratio:1;border-radius:50%;background:var(--sun)}
.door.double .opening{left:28.33%;width:43.33%;top:24.44%;height:58.89%;border-radius:50% 50% 0 0 / 30.7% 30.7% 0 0;perspective:640px}
.door.double .opening .who{height:auto;width:94%}
.door:not(.double) .opening .who{--x:60%}
.door.double .leaf{width:50%;right:auto;border-radius:0;animation-name:swing-l}
.door.double .leaf.r{left:50%;transform-origin:100% 50%;animation-name:swing-r;background:var(--tomato);box-shadow:inset 0 0 0 9px #F05A40,inset 0 -40px 60px -30px rgba(40,0,0,.25)}
.door.double .leaf.r::after{right:auto;left:13%}
/* Motes drifting in the lamplight. */
.motes{position:absolute;inset:0;pointer-events:none}
.motes i{position:absolute;left:var(--x);top:var(--y);width:var(--s,12px);aspect-ratio:1;background:var(--c,var(--sun));opacity:.3;
  -webkit-mask:var(--star) center / contain no-repeat;mask:var(--star) center / contain no-repeat;animation:drift var(--t,14s) ease-in-out var(--dl,0s) infinite}
.motes i:nth-child(1){--x:6%;--y:20%;--s:16px;--c:var(--lime);--t:13s}
.motes i:nth-child(2){--x:22%;--y:86%;--s:10px;--c:var(--pink);--t:17s;--dl:-4s}
.motes i:nth-child(3){--x:44%;--y:14%;--s:9px;--c:var(--sky);--t:15s;--dl:-9s}
.motes i:nth-child(4){--x:57%;--y:72%;--s:14px;--c:var(--sun);--t:19s;--dl:-2s}
.motes i:nth-child(5){--x:63%;--y:24%;--s:8px;--c:var(--pink);--t:12s;--dl:-6s}
.motes i:nth-child(6){--x:92%;--y:18%;--s:18px;--c:var(--sun);--t:16s;--dl:-11s}
.motes i:nth-child(7){--x:96%;--y:62%;--s:10px;--c:var(--lime);--t:14s;--dl:-3s}
.motes i:nth-child(8){--x:86%;--y:88%;--s:13px;--c:var(--sky);--t:18s;--dl:-8s}
.motes i:nth-child(9){--x:36%;--y:93%;--s:8px;--c:var(--lime);--t:13s;--dl:-5s}
.motes i:nth-child(10){--x:2%;--y:64%;--s:11px;--c:var(--lavender);--t:20s;--dl:-12s}
.motes i:nth-child(11){--x:74%;--y:8%;--s:11px;--c:var(--lavender);--t:15s;--dl:-7s}
.motes i:nth-child(12){--x:14%;--y:44%;--s:7px;--c:var(--sun);--t:16s;--dl:-1s}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes swing{from{transform:rotateY(0deg)}to{transform:rotateY(72deg)}}
@keyframes swing-l{from{transform:rotateY(0deg)}to{transform:rotateY(74deg)}}
@keyframes swing-r{from{transform:rotateY(0deg)}to{transform:rotateY(-74deg)}}
@keyframes glow{to{opacity:1}}
@keyframes peek{from{transform:translate(-50%,105%)}to{transform:translate(-50%,0)}}
@keyframes sway{0%,100%{transform:translate(-50%,0) rotate(0deg)}30%{transform:translate(-50%,0) rotate(-2.5deg)}70%{transform:translate(-50%,0) rotate(2deg)}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes breathe{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0deg) scale(.8);opacity:.18}50%{transform:translate(16px,-38px) rotate(45deg) scale(1.15);opacity:.85}}

/* ---------- Illustrations ---------- */
.art{display:block;margin-inline:auto;translate:0 calc(var(--p) * var(--drift,-22px))}
.art-wide{width:min(900px,100%)}
.art-mid{width:min(700px,100%)}
/* On the apricot field the folk stand on a lit cream plate and can lean past its edge. */
.sand .art{background:radial-gradient(ellipse 49% 47% at 50% 54%,var(--cover) 0 98.5%,transparent 100%);padding:clamp(18px,3.4vw,48px) clamp(26px,5.5vw,80px)}

/* ---------- Editorial column ---------- */
.essay{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:24px;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.essay h2{text-align:center;margin-bottom:12px}
.essay p{color:var(--body)}
.essay p strong{color:var(--ink)}
.essay .lead{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:450;font-size:clamp(24px,2.7vw,33px);line-height:1.24;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.essay .turn{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:600;font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-.022em;color:var(--ink);text-align:center;margin-top:18px;text-wrap:balance}
.turn em{font-style:normal}
/* The first illustration steps up out of the paper and into the dark above it. */
#now{padding-top:1px}
#now .art{position:relative;z-index:2;--drift:-20px;margin-top:calc(-1 * clamp(56px,7vw,110px));margin-bottom:clamp(14px,2.4vw,30px)}
/* The Founder Door's circle of folk runs smaller than the Patron Door's blind-spot drawing. */
#now .art.art-small{width:min(440px,78%)}
/* A small drawing with no plate that sits across the torn edge at the top of its section (the Patron Door's ROI). */
.art.art-edge{position:relative;z-index:2;width:min(440px,74%);margin-top:calc(-1 * clamp(72px,9vw,128px) - min(440px,74vw) * .2);margin-bottom:clamp(20px,3vw,36px)}
.sand .art.art-edge{background:none;padding:0}
/* The section above leaves room for the part of the drawing that climbs over the edge. */
section:has(+ section .art-edge){padding-bottom:calc(clamp(72px,9vw,128px) + min(440px,74vw) * .2)}
/* Bullets are the site's four-point star, a different color each. */
.essay .bullets,.prose .bullets{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px;color:var(--body)}
.essay .bullets li,.prose .bullets li{position:relative;padding-left:2.1em}
.essay .bullets li::before,.prose .bullets li::before{content:"";position:absolute;left:0;top:.08em;width:1.35em;aspect-ratio:1;background:var(--c,var(--tomato));
  -webkit-mask:var(--star) center / contain no-repeat;mask:var(--star) center / contain no-repeat}
.essay .bullets li:nth-child(2),.prose .bullets li:nth-child(2){--c:var(--cobalt)}
.essay .bullets li:nth-child(3),.prose .bullets li:nth-child(3){--c:var(--sun)}

/* ---------- Two columns on apricot ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(40px,6vw,88px);align-items:start}
.art-wide + .split{margin-top:clamp(40px,6vw,72px)}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split h3{font-size:clamp(31px,3.7vw,48px);line-height:1;margin-bottom:20px}
.split p{color:var(--body)}
.split p + p,.split ul + p,.split p + ul,.split p + ol{margin-top:16px}
.split p strong{color:var(--ink)}
.split .art{width:100%;aspect-ratio:4/3;object-fit:contain;margin-bottom:clamp(18px,2.6vw,30px);padding:clamp(22px,3vw,40px) clamp(22px,3.4vw,46px);
  background:radial-gradient(ellipse 50% 46% at 50% 50%,var(--cover) 0 98.5%,transparent 100%)}
.marks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.marks li{position:relative;padding-left:30px;color:var(--body)}
.marks li::before{content:"";position:absolute;left:0;top:.36em;width:16px;height:16px;background:var(--c,var(--tomato));-webkit-mask:var(--star) center / contain no-repeat;mask:var(--star) center / contain no-repeat}
.marks li:nth-child(3n+2){--c:var(--cobalt)}
.marks li:nth-child(3n+3){--c:var(--forest)}
.medium{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:500;font-size:clamp(23px,2.5vw,30px);line-height:1.2;letter-spacing:-.012em;color:var(--ink)!important;margin-top:24px!important}
/* The three headwinds are paper tickets, each with its own off-register color. */
.traps{list-style:none;margin:24px 0 0!important;padding:0;counter-reset:trap;display:flex;flex-direction:column;gap:20px}
.traps li{counter-increment:trap;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;padding:20px 22px 22px;border-radius:20px;
  background-color:var(--cover);background-image:var(--speck-dark);box-shadow:7px 7px 0 var(--c,var(--tomato));rotate:var(--r,-.6deg)}
.traps li:nth-child(2){--c:var(--cobalt);--r:.5deg}
.traps li:nth-child(3){--c:var(--forest);--r:-.3deg}
.traps li::before{content:counter(trap);grid-row:span 2;align-self:start;width:38px;height:38px;border-radius:50%;background:var(--c,var(--tomato));
  font-family:var(--serif);font-weight:600;font-size:21px;line-height:38px;text-align:center;color:var(--cream)}
.traps p{font-size:16.5px;line-height:1.5;margin:0!important}
.pull{max-width:1000px;margin:clamp(64px,9vw,128px) auto 0;padding:0;text-align:center;font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:600;
  font-size:clamp(32px,5.2vw,74px);line-height:1;letter-spacing:-.028em;text-wrap:balance;color:var(--ink)}
.pull em{font-style:normal}
.inquote{margin:24px 0;padding:18px 24px 20px;border-radius:20px;background-color:var(--cover);background-image:var(--speck-dark);box-shadow:7px 7px 0 var(--tomato);rotate:-.7deg;
  font-family:var(--serif);font-style:italic;font-weight:450;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(22px,2.4vw,29px);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.split > div:nth-child(2) .inquote{box-shadow:7px 7px 0 var(--cobalt);rotate:.6deg}

/* ---------- Cards: riso prints on paper ---------- */
.cards{list-style:none;margin:clamp(48px,6vw,80px) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,44px)}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px}
.card{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 16px 30px;border-radius:28px;color:var(--ink);
  background-color:var(--cover);background-image:var(--speck-dark);rotate:calc(var(--tilt,0deg) * 1.7);box-shadow:10px 10px 0 var(--pop,var(--pink));
  transition:translate .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s cubic-bezier(.3,1.5,.5,1)}
.cards > li:nth-child(4n+1){--pop:var(--pink)}
.cards > li:nth-child(4n+2){--pop:var(--sky)}
.cards > li:nth-child(4n+3){--pop:var(--sun)}
.cards > li:nth-child(4n+4){--pop:var(--lavender)}
.card:hover{translate:-4px -6px;box-shadow:16px 18px 0 var(--pop,var(--pink))}
.card > :not(.art){padding-inline:14px}
.card .art{order:-1;translate:none;width:100%;aspect-ratio:5/4;object-fit:contain;padding:clamp(14px,2vw,24px);border-radius:16px;margin-bottom:10px;
  background:var(--dots) 0 0 / 11px 11px,color-mix(in srgb,var(--pop,var(--pink)) 46%,var(--cover))}
.card-no{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.card h3{font-size:clamp(26px,2.35vw,30px);line-height:1.02;text-wrap:pretty}
.card-lead{font-family:var(--serif);font-style:italic;font-weight:450;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:21px;line-height:1.2;color:var(--ink)}
.card p:not(.card-lead):not(.card-no){font-size:16.5px;line-height:1.55;color:var(--body)}
.card p strong{color:var(--ink)}
.card.dark{background-color:var(--forest);background-image:var(--speck-light);color:var(--cream);--pop:var(--lime)}
.card.dark .art{background:radial-gradient(circle,rgba(251,241,221,.16) 1.2px,transparent 1.7px) 0 0 / 11px 11px,color-mix(in srgb,var(--lime) 20%,var(--forest))}
.card.dark .card-no{color:var(--lime)}
.card.dark p:not(.card-lead):not(.card-no){color:var(--cream-soft)}
#logic .col,#ways .col{max-width:980px}

/* ---------- The incubator on forest: the three parts as prints ---------- */
#incubator .col{max-width:900px}
#incubator .col > p,#logic .col > p{max-width:58ch;font-size:clamp(19px,1.7vw,21px)}
#incubator .col > p{color:var(--cream-soft)}
#incubator .col > p strong{color:var(--cream)}
#logic .col > p{color:var(--body)}

/* ---------- Who's in the room: three tickets on apricot ---------- */
/* The walking crew sits about as wide as the rings text above and straddles the torn edge,
   half on the paper and half on apricot, so it bridges the two sections. */
/* Extra room at the bottom of the section above Who: the walking crew stands on its lower edge. */
section:has(+ #who){padding-bottom:calc(min(600px,100vw - 32px) * .56 + 64px)}
/* The walking crew: no cream plate. They walk along the torn edge as if it were the horizon: boots on the
   line, bodies on the paper above. The drawing's own small sun is trimmed off the top (the top 23.5% holds only
   the sun) and redrawn larger from the same file, up in the "sky" above their heads. --w is the figure's width;
   the drawing is 1400 x 641, so its height is --w * .4579 and the boots end 12px into the apricot. */
.crew{--w:min(600px,100vw - 32px);position:relative;z-index:2;width:var(--w);margin:calc(-1 * clamp(72px,9vw,128px) - var(--w) * .4579 + 12px) auto clamp(36px,4vw,56px)}
.crew img{display:block;width:100%;height:auto;clip-path:inset(23.5% 0 0 0)}
.crew-sun{position:absolute;left:49.6%;bottom:86%;width:16%;aspect-ratio:125 / 119;translate:-50% 0;
  background:url(/images/noodle/together.webp) 49.57% 3.26% / 1120% auto no-repeat}
.crew-doodles{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.crew-sparks path{fill:var(--c)}
.crew-lines path{fill:none;stroke:var(--sun);stroke-width:7;stroke-linecap:round;opacity:.9}
@media (max-width:719px){.crew-lines{display:none}}
#who .col{max-width:900px}
#who .col > p{color:var(--body);font-size:clamp(19px,1.7vw,21px)}
.fits{list-style:none;margin:clamp(40px,5vw,60px) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,34px)}
.fits li{position:relative;padding:46px 24px 26px;border-radius:22px;background-color:var(--cover);background-image:var(--speck-dark);box-shadow:7px 7px 0 var(--c,var(--tomato));rotate:var(--r,-.6deg);
  color:var(--body);font-size:17px;line-height:1.5}
.fits li:nth-child(2){--c:var(--cobalt);--r:.5deg}
.fits li:nth-child(3){--c:var(--forest);--r:-.3deg}
.fits li::before{content:"";position:absolute;top:-20px;left:20px;width:46px;height:46px;background:var(--c,var(--tomato));-webkit-mask:var(--star) center / contain no-repeat;mask:var(--star) center / contain no-repeat}
.fits strong{display:block;margin-bottom:8px;font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:600;font-size:clamp(22px,2.1vw,26px);line-height:1.08;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}

/* ---------- Every layer of how we relate: three nested discs (pair, block, scenes) with a color key beside them ---------- */
#rings .col{max-width:900px}
#rings .col > p{max-width:58ch;font-size:clamp(19px,1.7vw,21px);color:var(--body)}
.rings{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px);align-items:center;max-width:1040px;margin:clamp(44px,6vw,76px) auto 0}
.rings-fig{margin:0;width:100%;max-width:460px;justify-self:center;rotate:-2deg;filter:drop-shadow(9px 9px 0 rgba(38,21,15,.16))}
.rings-fig svg{display:block;width:100%;height:auto;overflow:visible}
.rings-fig .route{transform-origin:220px 220px;animation:ring-turn 120s linear infinite}
@keyframes ring-turn{to{transform:rotate(360deg)}}
.rings-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(22px,2.8vw,34px)}
.rings-list li{position:relative;padding-left:48px}
.rings-list li::before{content:"";position:absolute;left:0;top:.12em;width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:3px 3px 0 var(--ink)}
.rings-list h3{font-size:clamp(24px,2.4vw,30px);line-height:1.05;margin-bottom:8px}
.rings-list p{color:var(--body);font-size:17.5px;line-height:1.55}
.rings-close{max-width:44ch;margin:clamp(48px,6vw,84px) auto 0;text-align:center;font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:450;
  font-size:clamp(23px,2.6vw,31px);line-height:1.22;letter-spacing:-.012em;color:var(--body);text-wrap:balance}
.rings-close strong{color:var(--ink);font-weight:600}
/* A long link in an aside line may wrap */
.aside-link a.soft{white-space:normal}
.aside-link + .aside-link{margin-top:-10px}
@media (max-width:820px){
  .rings{grid-template-columns:minmax(0,1fr);max-width:520px}
  .rings-fig{max-width:330px}
}

/* ---------- The zine shelf: zines as prints, posts as a dispatch list ---------- */
.shelf{text-align:center;font-size:clamp(27px,3vw,38px);margin-top:clamp(52px,6.5vw,84px)}
.shelf + .zines,.shelf + .posts{margin-top:clamp(30px,3.6vw,46px)}
.posts :is(h3,h4) a{color:inherit;text-decoration:none}
.posts :is(h3,h4) a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.posts :is(h3,h4) a:focus-visible{outline:none}
.posts li:has(a:focus-visible){outline:3px solid var(--lime);outline-offset:4px}
.posts{list-style:none;max-width:960px;margin-inline:auto;padding:clamp(8px,1.6vw,16px) clamp(20px,4vw,48px);border-radius:16px;color:var(--ink);
  background-color:var(--cover);background-image:var(--speck-dark);box-shadow:12px 12px 0 var(--lavender);rotate:.4deg}
.posts li{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) auto;gap:6px clamp(18px,3vw,36px);align-items:baseline;padding:22px 0;border-top:2px dashed var(--rule);border-radius:6px}
.posts li:first-child{border-top:0}
.posts li::after{content:"→";font-weight:650;font-size:22px;line-height:1;transition:translate .2s}
.posts li:hover::after{translate:5px 0}
.posts :is(h3,h4){font-size:clamp(22px,2.3vw,27px);line-height:1.1;font-weight:600}
.posts p{font-size:16.5px;line-height:1.5;color:var(--body)}

/* ---------- Zines as booklets: a folded, stapled cover with the pages showing at the edge.
   Used as links on the Founder Door shelf and as the object in each zine page's hero. ---------- */
.zines{list-style:none;max-width:1020px;margin-inline:auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,5vw,68px)}
.zines > li{--pop:var(--pink);position:relative;display:flex;flex-direction:column;gap:30px;perspective:1100px}
.zines > li:nth-child(3n+2){--pop:var(--sky)}
.zines > li:nth-child(3n+3){--pop:var(--sun)}
.zines > li:nth-child(4){--pop:var(--lavender)}
.zines > li:nth-child(5){--pop:var(--lime)}
/* the first inside page, seen when the cover lifts */
.zines .cover,.zines > li::before{rotate:calc(var(--tilt,0deg) * 2.4)}
.zines > li::before{content:"";position:absolute;top:0;left:0;right:0;aspect-ratio:3/4;transform-origin:0 50%;border-radius:3px 6px 6px 3px;background-color:var(--cover);
  background-image:var(--speck-dark),repeating-linear-gradient(180deg,transparent 0 21px,rgba(38,21,15,.16) 21px 23px);background-size:auto,62% 100%;background-position:0 0,62% 34px;background-repeat:repeat,no-repeat}
.zines > li > p{font-size:16.5px;line-height:1.5;color:var(--body);padding-inline:4px}
.cover{--fold:26px;position:relative;z-index:1;display:flex;flex-direction:column;text-align:left;aspect-ratio:3/4;padding:16px 18px 18px calc(var(--fold) + 6px);color:var(--ink);text-decoration:none;border-radius:3px 6px 6px 3px;
  background:
    linear-gradient(90deg,rgba(38,21,15,.26) 0,rgba(38,21,15,.05) 9px,rgba(255,255,255,.3) 10px,rgba(255,255,255,0) 15px),
    var(--speck-dark),
    var(--dots) 0 0 / 11px 11px,
    color-mix(in srgb,var(--pop,var(--pink)) 70%,var(--cover));
  /* the page stack: three sheets peeking out, then the booklet's shadow on the table */
  box-shadow:2px 2px 0 var(--cover),3px 3px 0 rgba(38,21,15,.34),5px 5px 0 var(--cover),6px 6px 0 rgba(38,21,15,.34),8px 8px 0 var(--cover),9px 9px 0 rgba(38,21,15,.34),20px 22px 0 rgba(38,21,15,.14);
  transform-origin:0 50%;transition:transform .5s cubic-bezier(.3,1.25,.5,1)}
/* two staples on the fold */
.cover::before,.cover::after{content:"";position:absolute;left:4px;width:5px;height:clamp(20px,9%,30px);border-radius:3px;background:linear-gradient(90deg,#FBF8F0,#A39B8D);box-shadow:1px 1px 0 rgba(38,21,15,.4)}
.cover::before{top:19%}
.cover::after{bottom:19%}
.cover-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.cover .art{flex:1;min-height:0;width:100%;object-fit:contain;margin:10px 0 8px;padding:0;background:none;translate:none}
.cover-title{display:block;margin:0;font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-size:clamp(25px,2.9vw,38px);line-height:.94;letter-spacing:-.03em;text-wrap:balance;
  /* the cream plate printed slightly off-register */
  text-shadow:2.5px 2.5px 0 rgba(252,243,224,.7)}
a.cover:hover,a.cover:focus-visible{transform:rotateY(-17deg)}
a.cover:focus-visible{outline:3px solid var(--lime);outline-offset:6px}

/* ---------- Reading pages (/zine/...), laid out like blog posts: one column on paper.
   Title, dek and a line of meta; a featured illustration; the piece; more to read; a small call to action. ---------- */
.post{background-color:var(--paper);background-image:var(--speck-dark)}
.post .nav,.on-paper .nav{background:rgba(30,17,13,.96);box-shadow:0 1px 0 rgba(251,241,221,.14)}
.article,.more{max-width:calc(720px + var(--gutter-l) + var(--gutter-r));margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.article{padding-top:calc(env(safe-area-inset-top,0px) + clamp(116px,12vw,164px));padding-bottom:clamp(56px,7vw,88px)}
.article-head{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px);margin-bottom:clamp(28px,4vw,44px)}
.article-head h1{font-size:clamp(38px,5.6vw,68px);line-height:.97;letter-spacing:-.03em}
.dek{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:450;font-size:clamp(21px,2.3vw,27px);line-height:1.24;letter-spacing:-.01em;color:var(--body)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:clamp(14px,1.8vw,20px);border-top:2px solid var(--ink);font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.meta a{margin-left:auto;color:var(--body);text-underline-offset:4px;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px}
.feature{margin:0 0 clamp(32px,4.6vw,56px);padding:clamp(18px,3.2vw,40px);border-radius:22px;background:var(--dots) 0 0 / 11px 11px,color-mix(in srgb,var(--pop,var(--pink)) 56%,var(--cover));box-shadow:9px 9px 0 rgba(38,21,15,.16)}
.feature .art,.prose .art{translate:none}
.feature .art{width:100%;max-height:min(440px,62vh);object-fit:contain}
.prose{color:var(--body);font-size:clamp(18px,1.55vw,19.5px);line-height:1.68}
.prose > * + *{margin-top:1.15em}
.prose strong{color:var(--ink)}
.prose h2{font-size:clamp(29px,3.6vw,42px);line-height:1;color:var(--ink)}
.prose > * + h2{margin-top:1.7em}
.prose h2 + *{margin-top:.8em}
.prose .lead{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:450;font-size:clamp(22px,2.4vw,27px);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
/* the lines that carry the piece: set as pulled quotes on a lime bar */
.prose .turn,.prose .claim,.prose .pull,.prose .medium{max-width:none;margin:1.5em 0;padding:2px 0 2px 22px;border-left:6px solid var(--lime);text-align:left;
  font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:600;font-size:clamp(25px,3.1vw,35px);line-height:1.08;letter-spacing:-.022em;color:var(--ink)!important;text-wrap:balance}
.prose .claim strong{font-weight:inherit}
.prose .hl{color:var(--ink)}
.prose .marks{gap:10px}
.prose .marks li{color:var(--body)}
.prose .traps{margin-top:1.4em!important}
.prose .traps li{rotate:none}
.prose .insert{max-width:none;margin:1.8em 0 0;rotate:none;border-radius:16px;box-shadow:9px 9px 0 var(--pop,var(--sky));padding:clamp(20px,3vw,34px) clamp(12px,3vw,34px) clamp(18px,2.6vw,28px)}
.prose .shift th{font-size:clamp(19px,2.2vw,25px)}
.prose .shift td{font-size:clamp(17px,2.1vw,23px)}
.prose figure.inline{margin:1.8em 0}
.prose figure.inline .art{width:100%}
.inline-link{color:var(--ink);font-weight:650;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--lime-deep)}
.more{padding-bottom:clamp(56px,7vw,88px)}
.back{margin-top:clamp(26px,3.4vw,36px);font-size:16.5px}
/* a small end-of-post call to action instead of the full-screen close */
section.cta{--bg:var(--night);max-width:980px;margin:0 auto clamp(72px,9vw,120px);padding:clamp(40px,6vw,72px) clamp(22px,5vw,64px);border-radius:28px;color:var(--cream);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,20px);
  background-color:var(--night);background-image:var(--speck-light),radial-gradient(70% 90% at 50% 0%,rgba(232,69,44,.3),transparent 72%),radial-gradient(60% 60% at 50% 110%,rgba(182,226,62,.2),transparent 72%)}
section.cta::before{display:none}
.cta h2{font-size:clamp(34px,5vw,60px);line-height:.96}
.cta p{max-width:52ch;color:var(--cream-soft)}
.cta .btns{margin-top:10px}
.post footer::before{content:"";position:absolute;left:0;right:0;top:-23px;height:24px;pointer-events:none;background-color:var(--bg);background-image:var(--tex);
  -webkit-mask:var(--tear) repeat-x 50% 0 / 720px 24px;mask:var(--tear) repeat-x 50% 0 / 720px 24px}

/* ---------- About: a personal essay in chapters, each on its own color field,
   with small drawn graphics set between the paragraphs. Text reuses the .prose rules above. ---------- */
.brick{--bg:var(--brick);--tex:var(--speck-light);color:var(--cream);background-image:var(--tex),radial-gradient(70% 55% at 50% 60%,rgba(232,69,44,.4),transparent 75%)}
.chapter{padding-block:clamp(84px,10vw,150px)}
.story{max-width:calc(720px + var(--gutter-l) + var(--gutter-r));margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.story h2{font-size:clamp(38px,5.8vw,74px);line-height:.95;letter-spacing:-.03em}
.chapter:is(.brick,.forest) .prose{color:var(--cream-soft)}
.chapter:is(.brick,.forest) .prose :is(h2,strong,.lead){color:var(--cream)}
.chapter:is(.brick,.forest) .prose .turn{color:var(--cream)!important}
/* On the dark chapters a highlighted phrase in a turn is set in lime instead of sitting on a lime bar. */
.chapter:is(.brick,.forest) .prose em.hl{color:var(--lime);background:none}
.chapter:is(.brick,.forest) .prose strong.hl{color:var(--ink);background-size:100% 100%;background-position:0 0;padding:.02em .14em .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Kristen in the doorway: the same candy arch as the doors, with a photograph inside it */
/* The About page opens on paper: the hero and the first chapter share one cream field,
   so the portrait and the opening paragraphs read as a single spread with no edge between them. */
/* A hero with less in it (the Patron Door) gets a shorter block, so the words don't float in empty night. */
@media (min-width:900px){.hero.short{min-height:max(72svh,620px)}}
.hero.paper{min-height:clamp(540px,76svh,700px);padding-bottom:clamp(20px,2.6vw,40px);color:var(--ink);background-color:var(--paper);
  background-image:var(--speck-dark),radial-gradient(44% 54% at 74% 50%,rgba(246,195,59,.42),transparent 72%)}
.hero.paper .lede{color:var(--body)}
.hero.paper .motes i{opacity:.5}
.chapter.flush{padding-top:clamp(20px,2.6vw,40px)}
section.flush::before{display:none}
.portrait{position:absolute;right:max(var(--gutter-r),5%);top:50%;width:min(400px,33vw);aspect-ratio:300/380;translate:0 calc(-50% + var(--p) * -60px)}
.portrait::before{content:"";position:absolute;inset:-18% -28% -10%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(246,195,59,.34),rgba(245,163,199,.2) 50%,transparent 72%);animation:breathe 7s ease-in-out infinite}
.portrait svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.portrait .photo{position:absolute;left:20%;top:13.16%;width:60%;height:83.3%;max-width:none;object-fit:cover;object-position:50% 14%;border-radius:50% 50% 0 0 / 28.5% 28.5% 0 0;animation:develop 1.1s ease .9s both}
.portrait .arch{fill:none;stroke:var(--c);stroke-width:16;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.3s cubic-bezier(.5,0,.2,1) both;animation-delay:calc(var(--i) * 140ms)}
.portrait .spark{fill:var(--c);transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .5s cubic-bezier(.3,1.6,.5,1) forwards,twinkle 2.8s ease-in-out infinite;animation-delay:calc(1.9s + var(--i) * .18s),calc(2.6s + var(--i) * .5s)}
@keyframes develop{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
/* the hero's drifting motes become semicolons */
.semis i{width:auto;aspect-ratio:auto;background:none;-webkit-mask:none;mask:none;font:normal 700 calc(var(--s,12px) * 3.2)/1 var(--serif);color:var(--c,var(--sun))}
.semirow{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;overflow:hidden;padding:.25em 0;margin:1.5em 0;font-family:var(--serif);font-weight:700;font-size:clamp(34px,5vw,46px);line-height:1.05;color:var(--tomato)}
.semirow span:nth-child(4n+2){color:var(--cobalt)}
.semirow span:nth-child(4n+3){color:var(--pink)}
.semirow span:nth-child(4n+4){color:var(--forest)}
.semirow span:nth-child(3n){font-size:1.4em;rotate:9deg}
.semirow span:nth-child(5n){font-size:.7em;rotate:-12deg}
.semirow span:nth-child(7n){translate:0 -9px;color:var(--lime-deep)}
/* the two lenses from social work, as two small prints side by side */
.lenses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,30px);margin-top:1.6em!important}
.lens{padding:22px 22px 24px;border-radius:22px;background-color:var(--cover);background-image:var(--speck-dark);box-shadow:7px 7px 0 var(--tomato);rotate:-.6deg}
.lens + .lens{box-shadow:7px 7px 0 var(--cobalt);rotate:.5deg}
.lens svg{display:block;width:100%;max-width:240px;height:auto;margin:0 auto 14px;overflow:visible}
.lens h3{font-size:clamp(23px,2.4vw,28px);line-height:1.05;color:var(--ink);margin-bottom:8px}
.lens p{font-size:16.5px;line-height:1.55;color:var(--body)}
@media (max-width:640px){.lenses{grid-template-columns:minmax(0,1fr)}}
/* the number, printed as large as it deserves */
.bignum{display:block;margin:.3em 0 .1em;font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-size:clamp(44px,8.4vw,100px);line-height:.9;letter-spacing:-.04em;text-shadow:4px 4px 0 rgba(30,17,13,.5);text-wrap:balance}
.bignum span{display:block;margin-top:.35em;font-size:.34em;line-height:1;letter-spacing:-.02em;font-weight:600;color:var(--lime);text-shadow:none}
.gfx{margin:clamp(30px,4.4vw,52px) 0}
.gfx svg{display:block;width:100%;height:auto;overflow:visible}
.gfx text{font-family:var(--mono);font-size:11px;font-weight:500;fill:var(--ink)}
.gfx.plate .art{width:100%;background:radial-gradient(ellipse 49% 47% at 50% 54%,var(--cover) 0 98.5%,transparent 100%);padding:clamp(18px,3.4vw,44px) clamp(26px,5.5vw,72px)}
.beside{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center}
.beside .gfx{margin:0;rotate:-3deg}
.beside > div > * + *{margin-top:1.15em}
.moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(20px,4vw,44px)}
.move{display:flex;flex-direction:column;gap:8px;padding:18px 22px 16px;border-radius:20px;background-color:var(--cover);background-image:var(--speck-dark);box-shadow:7px 7px 0 var(--cobalt);rotate:-.6deg}
.move + .move{box-shadow:7px 7px 0 var(--tomato);rotate:.5deg}
.move span{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-size:clamp(26px,3.2vw,36px);line-height:1;letter-spacing:-.025em;color:var(--ink)}
.move:first-child span{text-align:right}
/* lines marked .draw are drawn in the first time their graphic scrolls into view */
.draw{stroke-dasharray:1;stroke-dashoffset:0}
.rv .draw{stroke-dashoffset:1}
.rv.in .draw{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1) .35s}
@media (min-width:1000px){
  .gfx.wide{margin-inline:-80px}
}

/* ---------- The language shift: a zine insert ---------- */
.insert{position:relative;max-width:940px;margin:clamp(44px,6vw,72px) auto 0;color:var(--ink);background-color:var(--cover);background-image:var(--speck-dark);border-radius:14px;rotate:-.6deg;
  box-shadow:14px 14px 0 rgba(30,17,13,.42);padding:clamp(24px,4vw,48px) clamp(14px,4vw,52px) clamp(22px,3.4vw,40px)}
.shift{width:100%;border-collapse:collapse}
.shift th{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(20px,2.5vw,30px);line-height:1.05;letter-spacing:-.02em;text-align:left;padding:0 0 18px;width:50%;vertical-align:bottom}
.shift th small,.shift td small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;margin-top:6px;color:var(--muted)}
.shift th:first-child,.shift td:first-child{text-align:right;padding-right:clamp(12px,3.4vw,40px);color:var(--muted)}
.shift th:last-child,.shift td:last-child{padding-left:clamp(12px,3.4vw,40px);border-left:2px dashed var(--rule)}
.shift td{font-family:var(--serif);font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:clamp(19px,2.5vw,29px);line-height:1.1;letter-spacing:-.015em;padding:16px 0;border-top:1px solid var(--rule);vertical-align:top}
.shift td:first-child span{text-decoration:line-through;text-decoration-thickness:2.5px;text-decoration-color:var(--tomato)}
.shift td:last-child small{color:var(--body)}
.shift th:last-child span{display:inline-flex;align-items:center;gap:10px}
.shift th:last-child span::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--lime);flex:none}

/* ---------- The reciprocity loop on forest ---------- */
.loop .col{max-width:900px}
.loop .col > .art{width:min(400px,80%)}
.steps{list-style:none;margin:clamp(64px,7vw,92px) auto 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px clamp(18px,2.2vw,28px);counter-reset:step}
.steps li{counter-increment:step;position:relative;display:flex;flex-direction:column;gap:8px;padding:44px 22px 26px;border-radius:24px;background:rgba(251,241,221,.07);border:2px dashed rgba(251,241,221,.26)}
.steps li::before{content:counter(step);position:absolute;top:-26px;left:20px;width:52px;height:52px;border-radius:50%;background:var(--c,var(--lime));color:var(--ink);
  font-family:var(--serif);font-weight:600;font-size:28px;line-height:52px;text-align:center;box-shadow:4px 4px 0 rgba(0,0,0,.28);rotate:-6deg}
/* The Patron Door's loop as a journey: no boxes, bigger numbers on one row, and a hand-drawn
   dashed trail (drawn by site.js through the numbers) that loops once between each stop. */
.steps.journey{position:relative;gap:40px clamp(26px,3vw,44px)}
.steps.journey li{padding:0;border:0;border-radius:0;background:none;z-index:1}
.steps.journey li > .guy + h3{margin-top:0}
.steps.journey li::before{position:relative;top:auto;left:auto;display:block;width:60px;height:60px;line-height:60px;font-size:32px;margin-bottom:34px}
.steps.journey li:nth-child(even)::before{rotate:5deg}
.journey-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.journey-path .trail{fill:none;stroke:var(--lime);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:0 11}
/* A little noodle guy stands on top of each number. */
.steps.journey{margin-top:clamp(220px,19vw,250px);margin-bottom:72px}
.steps.journey .guy{position:absolute;left:-10px;bottom:calc(100% - 6px);height:172px;width:auto;pointer-events:none}
.steps.journey li:first-child .guy{height:196px}
.steps li:nth-child(2){--c:var(--pink)}
.steps li:nth-child(3){--c:var(--sky)}
.steps li:nth-child(4){--c:var(--sun)}
.steps h3{font-size:clamp(23px,2.1vw,28px);line-height:1.04}
/* A small dotted cycle arrow after "It comes back around". */
.steps .cycle{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-left:.1em;overflow:visible}
.steps .cycle path{fill:none;stroke:var(--lime);stroke-linecap:round;stroke-linejoin:round}
.steps .cycle .ring{stroke-width:3.4}
.steps .cycle .tip{stroke-width:3.4}
.steps p:not(.tag){font-size:16.5px;line-height:1.55;color:var(--cream-soft)}
.steps p strong{color:var(--cream)}

/* ---------- The support menu: a menu card laid on brick, the host leaning over the top ---------- */
#menu{padding-top:clamp(150px,19vw,250px)}
.dossier{position:relative;max-width:860px;margin:0 auto;color:var(--ink);background-color:var(--cover);background-image:var(--speck-dark);border-radius:22px;rotate:.4deg;
  box-shadow:inset 0 0 0 10px var(--cover),inset 0 0 0 12px rgba(38,21,15,.5),16px 16px 0 rgba(30,17,13,.42);
  padding:0 clamp(26px,6vw,72px) clamp(40px,6vw,64px)}
.dossier-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.dossier-head img{width:clamp(150px,21vw,220px);margin-top:calc(-1 * clamp(74px,11vw,116px));position:relative;z-index:1}
.dossier h2{font-size:clamp(34px,5vw,62px)}
.dossier-note{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(18px,1.9vw,21px);line-height:1.4;color:var(--body);max-width:56ch}
/* The menu's three courses (the three ways to participate): a small drawing, a number and the course name, then its items. */
.course{margin-top:clamp(40px,5.6vw,64px)}
.course-head{display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);padding-bottom:clamp(14px,2vw,20px);border-bottom:3px solid var(--ink)}
.course-head img{flex:none;width:clamp(92px,11vw,128px);height:auto}
.course-no{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--tomato);margin-bottom:6px}
.course-head h3{font-size:clamp(28px,3.6vw,42px);line-height:1}
.course-note{margin-top:8px;font-family:var(--serif);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(17px,1.7vw,19px);color:var(--body)}
.fare{list-style:none;margin:0;padding:0}
.fare li{padding:22px 0;border-top:2px dashed var(--rule)}
.fare li:first-child{border-top:0}
.fare li:last-child{padding-bottom:6px}
.fare-top{display:flex;align-items:baseline;gap:12px}
.fare-top h4{font-size:clamp(22px,2.4vw,28px);line-height:1.06}
.fare-top i{flex:1;min-width:20px;border-bottom:3px dotted var(--ink);opacity:.3;transform:translateY(-5px)}
.price{flex:none;font-weight:650;font-size:clamp(16px,1.6vw,18px);line-height:1;padding:9px 16px 10px;border-radius:999px;background:var(--lime);box-shadow:4px 4px 0 var(--lime-deep);rotate:2deg;white-space:nowrap}
.fare p{margin-top:10px;font-size:16.5px;line-height:1.55;color:var(--body);max-width:62ch}
/* A short bulleted list inside a menu item, with the site's star as the bullet. */
.fare .fare-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:16.5px;line-height:1.45;color:var(--body)}
.fare .fare-list li{position:relative;padding:0 0 0 1.6em;border:0}
.fare .fare-list li::before{content:"";position:absolute;left:0;top:.2em;width:1em;aspect-ratio:1;background:var(--tomato);-webkit-mask:var(--star) center / contain no-repeat;mask:var(--star) center / contain no-repeat}
.fare .fare-note{font-family:var(--serif);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--ink)}
/* "How we partner" is a pink note pinned under the menu card, tilted the other way. */
.partner{position:relative;max-width:700px;margin:clamp(48px,6vw,72px) auto 0;padding:clamp(26px,3.6vw,40px) clamp(26px,4vw,48px);border-radius:20px;
  background-color:var(--pink);background-image:var(--speck-dark);color:var(--ink);rotate:-1deg;box-shadow:10px 10px 0 rgba(30,17,13,.45)}
.partner h3{font-size:clamp(28px,3.4vw,38px);line-height:1;margin-bottom:12px}
.partner p{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--ink);text-wrap:pretty}
.dossier-foot{margin-top:clamp(30px,4.4vw,44px);display:flex;justify-content:center}

/* ---------- Close: back into the dark, with everyone arriving ---------- */
.close{padding-bottom:0;background-image:var(--tex),
  radial-gradient(46% 24% at 50% 80%,rgba(182,226,62,.24),transparent 76%),
  radial-gradient(60% 50% at 50% calc(10% + var(--p) * 8%),rgba(232,69,44,.26),transparent 72%)}
.close .col{max-width:1040px}
.close h2{font-size:clamp(48px,9vw,136px);line-height:.9;letter-spacing:-.035em}
.close .col > p{color:var(--cream-soft);max-width:54ch;font-size:clamp(19px,1.7vw,21px)}
.frieze{padding-top:clamp(48px,7vw,96px)}
.frieze img{display:block;width:100%;height:auto;translate:0 calc(var(--p) * 30px)}
#table .frieze img{width:min(1280px,94%);margin:0 auto}
/* One-line invite that opens the dark footer. */
footer .invite{text-align:center;font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.35;color:var(--cream);max-width:none;margin:0 auto;padding:clamp(56px,7vw,88px) var(--gutter-r) clamp(8px,1.5vw,16px) var(--gutter-l);text-wrap:balance}
footer .invite a{white-space:nowrap;color:var(--lime);text-decoration-color:var(--lime)}
footer .wrap{display:flex;justify-content:center;gap:12px 32px;flex-wrap:wrap;padding-block:30px;font-size:15px;font-weight:500}
footer a{text-underline-offset:4px;text-decoration-color:rgba(251,241,221,.4)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--lime);display:inline-block;margin-right:30px;box-shadow:11px 0 0 var(--pink),22px 0 0 var(--sky)}

/* ---------- Small comforts: skip link, a copyable address under the big buttons ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:12px;z-index:60;padding:10px 16px;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:650;font-size:15px;text-decoration:none;translate:0 -80px}
.skip:focus{translate:none}
main:focus,section:focus,.made:focus{outline:none}
.mailline{font-size:15.5px;color:rgba(251,241,221,.72)}
.mailline button{font:inherit;color:var(--cream);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--lime);text-underline-offset:5px}
.mailline span{color:var(--lime)}

/* ---------- The zine index (/zine/): both shelves on one paper page ---------- */
.index-head{padding-top:calc(env(safe-area-inset-top,0px) + clamp(116px,12vw,164px))}
.index-head h1{font-size:clamp(52px,8vw,112px)}
.index-head .dek{max-width:34em}
.index-shelves{padding-bottom:clamp(64px,8vw,104px)}
.index-shelves .back{text-align:center;margin-top:clamp(40px,5vw,60px)}
#logic .back{text-align:center;margin-top:clamp(34px,4.4vw,52px)}

/* ---------- Hero art in other shapes: square (Hold the Door) and landscape (the 404) ---------- */
.door.pic.sq{aspect-ratio:640/647;width:min(480px,36vw,calc(66svh * .989))}
.door.pic.land{aspect-ratio:1200/798;width:min(560px,40vw)}
@media (max-width:899px){
  .door.pic.sq{aspect-ratio:640/647;width:min(300px,72vw)}
  .door.pic.land{aspect-ratio:1200/798;width:min(420px,88vw)}
}

/* ---------- Hold the Door (/door/). One page, two views:
   compose (write a note to someone who belongs in the scene) and receive (the door that note opens).
   The names and the note travel in the link's hash; door.js switches the view. ---------- */
html:not(.rx) [data-view="receive"],html.rx [data-view="compose"]{display:none!important}
html:not([data-door="p"]) [data-door-only="p"],html[data-door="p"] [data-door-only="f"]{display:none!important}
/* the nameplate on their door */
.doortag{position:absolute;left:50%;top:5%;z-index:3;max-width:92%;padding:.3em .8em .36em;border-radius:999px;background:var(--cover);color:var(--ink);
  font-family:var(--serif);font-weight:650;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(18px,2vw,26px);line-height:1.05;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:4px 4px 0 var(--tomato);translate:-50% 0;rotate:-4deg;animation:tag-in .6s cubic-bezier(.3,1.6,.5,1) 1.8s both}
@keyframes tag-in{from{opacity:0;scale:.4}}
#write,#read{padding-top:clamp(84px,10vw,140px)}
#write .col,#read .col{margin-bottom:clamp(36px,5vw,56px)}
#write .col > p,#read .col > p,.behind .col > p,#how .col > p{max-width:56ch;font-size:clamp(19px,1.7vw,21px)}
#write .col > p,#read .col > p{color:var(--body)}
.behind .col > p,#how .col > p{color:var(--cream-soft)}
/* the note: a card you write on, and the same card when it arrives */
.notecard{position:relative;max-width:780px;margin:0 auto;padding:clamp(34px,5vw,58px) clamp(20px,5vw,60px) clamp(28px,4.4vw,48px);border-radius:26px;color:var(--ink);
  background-color:var(--cover);background-image:var(--speck-dark);box-shadow:12px 12px 0 var(--tomato);rotate:-.5deg;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px)}
.notecard::before{content:"";position:absolute;top:-24px;right:clamp(20px,6vw,56px);width:54px;height:54px;background:var(--cobalt);-webkit-mask:var(--star) center / contain no-repeat;mask:var(--star) center / contain no-repeat;rotate:12deg}
.line{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(27px,3.7vw,44px);line-height:1.14;letter-spacing:-.024em}
.blank{font:inherit;letter-spacing:inherit;color:var(--ink);background:transparent;border:0;border-bottom:3px dashed rgba(38,21,15,.45);border-radius:0;margin:0;padding:0 .06em .02em;min-width:4ch;max-width:100%;field-sizing:content}
.blank::placeholder{color:var(--muted);opacity:.7}
.blank:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--ink);background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 100% / 100% 40%}
.ask,.which legend{display:block;padding:0;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(21px,2.3vw,26px);line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.ask{margin-bottom:-6px}
.pad{display:block;width:100%;min-height:158px;resize:vertical;font-family:var(--sans);font-size:clamp(18px,1.7vw,20px);line-height:34px;color:var(--ink);padding:9px 16px 11px;border:0;border-radius:12px;
  background:repeating-linear-gradient(180deg,transparent 0 33px,rgba(38,21,15,.15) 33px 34px) 0 9px local,#F6E7CC}
.pad::placeholder{color:var(--muted);opacity:.85}
.count{margin-top:-10px;text-align:right;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sign{text-align:right}
.which{border:0;margin:0;padding:0;min-width:0}
.which legend{margin-bottom:14px}
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pick{position:relative;display:block;cursor:pointer;--c:var(--sky)}
.pick + .pick{--c:var(--pink)}
.pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick-face{position:relative;display:block;height:100%;padding:15px 18px 17px 54px;border-radius:18px;border:2px dashed rgba(38,21,15,.34);font-size:16px;line-height:1.45;color:var(--body);transition:box-shadow .2s,background-color .2s}
.pick-face::before{content:"";position:absolute;left:17px;top:15px;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);background:var(--cover)}
.pick-face strong{display:block;margin-bottom:3px;font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-size:21px;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.pick input:checked + .pick-face{border-style:solid;border-color:var(--ink);background-color:color-mix(in srgb,var(--c) 34%,var(--cover));box-shadow:5px 5px 0 var(--c)}
.pick input:checked + .pick-face::before{background:var(--lime);box-shadow:inset 0 0 0 4px var(--cover)}
.pick input:focus-visible + .pick-face{outline:3px solid var(--lime-deep);outline-offset:3px}
.notecard .err{font-weight:650;font-size:16.5px;color:var(--brick)}
.notecard .broken{padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--sun) 40%,var(--cover));font-size:16px;font-weight:600}
.notecard .btn{align-self:center;border:2px solid var(--ink)}
.notecard button.btn{font-family:var(--sans)}
/* after the link is made */
.made{outline:none}
.made h2{font-size:clamp(34px,5vw,58px)}
.made > p{color:var(--body)}
.linkrow{display:flex;gap:12px;align-items:stretch}
.linkrow input{flex:1;min-width:0;font-family:var(--mono);font-size:14px;color:var(--ink);padding:14px 16px;border-radius:14px;border:2px dashed rgba(38,21,15,.34);background:#F6E7CC}
.linkrow .btn{flex:none;align-self:auto}
.made .btns{justify-content:flex-start;align-items:center;gap:14px 22px}
.made .btns .btn{align-self:auto}
.made .inline-link{font-size:16.5px;font-weight:600}
.said{min-height:1.5em;font-weight:650;color:var(--forest)}
.linkbtn{font:inherit;font-size:16.5px;font-weight:600;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--lime-deep);text-underline-offset:5px}
.fine{max-width:54ch;margin:clamp(30px,4vw,44px) auto 0;padding-inline:var(--gutter-l);text-align:center;font-size:15.5px;line-height:1.5;color:var(--body)}
/* the note as it arrives */
.notecard.read{margin:0 auto}
.notecard.read blockquote{margin:0;font-family:var(--serif);font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:clamp(25px,3.4vw,40px);line-height:1.17;letter-spacing:-.018em;white-space:pre-line;overflow-wrap:anywhere}
.notecard.read figcaption{text-align:right;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(23px,2.6vw,30px);letter-spacing:-.02em;overflow-wrap:anywhere}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px}
.fits.four{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
.fits.four li:nth-child(4){--c:var(--brick);--r:.4deg}
.behind .fits li:nth-child(3){--c:var(--sun)}   /* forest would vanish into the forest field */
.behind .btns{margin-top:clamp(40px,5vw,60px)}
.behind .textlink{display:block;width:fit-content;margin:22px auto 0}
.close .aside-link{margin-top:-6px}
@media (max-width:980px){
  .steps.three{grid-template-columns:minmax(0,1fr);max-width:460px}
  .fits.four{grid-template-columns:minmax(0,1fr);max-width:520px}
}
@media (max-width:640px){
  .notecard{box-shadow:7px 7px 0 var(--tomato);border-radius:22px}
  .picks{grid-template-columns:minmax(0,1fr)}
  .linkrow{flex-direction:column}
  .sign{text-align:left}
}

/* ---------- Keep It Moving (/loop/). A one-minute game: pass a gift round a circle of noodle folk.
   loop.js places the folk and the gift (it sets their transform) and runs the clock; everything it
   toggles here is a class or a custom property: --n (people in the circle), --g (how much the gift
   has grown this round), --f (how much time the holder has left, 1 to 0). ---------- */
.hero.game{min-height:0;display:block;padding-block:calc(env(safe-area-inset-top,0px) + 84px) clamp(120px,13vw,200px);
  background-image:var(--speck-light),
    radial-gradient(46% 44% at 50% 44%,rgba(232,69,44,.32),transparent 72%),
    radial-gradient(60% 50% at 6% 100%,rgba(35,64,200,.3),transparent 70%),
    radial-gradient(40% 40% at 100% 0%,rgba(185,167,240,.16),transparent 70%)}
.hero.game .col{max-width:1040px;align-items:center;text-align:center;gap:clamp(36px,4.6vw,60px)}
.hero.game .col > .board,.hero.game .col > .howto{max-width:none}
/* The game is one centred column: the title (or the score bar), the circle, the options.
   loop.js sets data-state on .board: ready (title screen), play, over (it wilted), done. */
.board{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(640px,100%);outline:none}
.marquee{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.hero.game h1{font-size:clamp(40px,5.6vw,70px);line-height:.96;letter-spacing:-.03em}
.slot{display:grid;width:100%;min-height:64px;align-items:center;justify-items:center}
.slot > *{grid-area:1/1;transition:opacity .25s,visibility .25s}
.intro{display:flex;flex-direction:column;align-items:center}
.hero.game .lede{font-size:clamp(17px,1.6vw,20px);line-height:1.4}
.board:not([data-state="ready"]) .intro,[data-state="ready"] .hud{opacity:0;visibility:hidden}
/* the score bar: which round, what the gift has become so far, and the number to beat */
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:min(100%,500px)}
.stat{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.stat:last-child{align-items:flex-end}
.stat strong{font-family:var(--serif);font-weight:650;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(30px,3.6vw,40px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;transition:color .2s}
.stat span{margin-top:6px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:rgba(251,241,221,.7)}
.stat.beaten strong{color:var(--lime)}
.track{list-style:none;margin:0;padding:6px 8px;display:flex;gap:clamp(4px,1vw,8px);border-radius:999px;background:rgba(251,241,221,.08);border:2px dashed rgba(251,241,221,.22)}
.track li{width:clamp(28px,4.4vw,38px);aspect-ratio:1;border-radius:50%;background:var(--cover);opacity:.2;transition:opacity .3s,scale .4s cubic-bezier(.3,1.7,.5,1),box-shadow .3s}
.track img{display:block;width:100%;height:100%;object-fit:contain;padding:8%}
.track .done{opacity:.62}
.track .now{opacity:1;scale:1.18;box-shadow:0 0 0 3px var(--lime)}
/* the circle and the game-over card share one spot: the card lands on top of the dimmed circle */
.arena{display:grid;width:100%;justify-items:center;align-items:center}
.arena > *{grid-area:1/1}
.table{width:100%;transition:opacity .4s,filter .4s}
.board.ended .table{opacity:.34;filter:saturate(.5) blur(1.5px);pointer-events:none}
.options{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px}
.howto{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.howto h2{font-size:clamp(26px,2.8vw,34px);line-height:1;letter-spacing:-.02em}
.rules{list-style:none;margin:0;padding:0;counter-reset:rule;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;text-align:left}
.rules li{counter-increment:rule;display:flex;align-items:flex-start;gap:12px;padding:15px 16px 16px;border-radius:20px;background:rgba(251,241,221,.07);border:2px dashed rgba(251,241,221,.24);font-size:16.5px;line-height:1.4;color:var(--cream-soft)}
.rules li::before{content:counter(rule);flex:none;display:grid;place-items:center;width:32px;height:32px;padding-bottom:2px;border-radius:50%;background:var(--c,var(--lime));color:var(--ink);font-family:var(--serif);font-weight:650;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:18px;line-height:1}
.rules li:nth-child(2){--c:var(--pink)}
.rules li:nth-child(3){--c:var(--sky)}
.rules strong{color:var(--cream)}
.keys{max-width:62ch;font-size:15.5px;line-height:1.5;color:rgba(251,241,221,.7)}
.dare{padding:.5em .95em .56em;border-radius:16px;background:var(--cover);color:var(--ink);font-size:17px;line-height:1.35;box-shadow:5px 5px 0 var(--tomato);rotate:-1deg}
.table{display:flex;flex-direction:column;align-items:center;gap:10px}
.ring{position:relative;width:max(min(280px,100%),min(600px,100%,100svh - 392px));aspect-ratio:1;margin-block:14px 44px;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* the sun in the middle, which keeps the count */
.ring::before{content:"";position:absolute;left:50%;top:50%;width:31%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:var(--lime);
  box-shadow:0 0 0 clamp(7px,1.3vw,13px) rgba(182,226,62,.17),0 0 80px 18px rgba(182,226,62,.26);transition:scale .5s cubic-bezier(.3,1.7,.5,1)}
.ring.came::before{scale:1.2}
[data-state="ready"] .ring::before{animation:sun 1.7s ease-in-out infinite}
@keyframes sun{50%{scale:1.08;box-shadow:0 0 0 clamp(12px,2vw,20px) rgba(182,226,62,.2),0 0 100px 30px rgba(182,226,62,.36)}}
/* on the title screen the sun is the Play button */
.go{position:absolute;left:50%;top:50%;z-index:3;width:31%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;padding:0 0 .08em;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;
  font-family:var(--serif);font-weight:650;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(30px,5vw,54px);line-height:1;letter-spacing:-.035em;-webkit-tap-highlight-color:transparent;transition:scale .2s cubic-bezier(.3,1.7,.5,1)}
.go:hover{scale:1.07}
.go:active{scale:.94}
.board:not([data-state="ready"]) .go,[data-state="ready"] .hub{display:none}
/* a word that pops up over the circle: "Go!", "A zine!", "Wilted." */
.flash{position:absolute;left:50%;top:50%;z-index:1500;translate:-50% -50%;rotate:-4deg;margin:0;padding:.16em .46em .22em;border-radius:.4em;background:var(--cover);color:var(--ink);box-shadow:6px 6px 0 var(--tomato);
  font-family:var(--serif);font-weight:650;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(30px,5.2vw,58px);line-height:1;letter-spacing:-.03em;white-space:nowrap;pointer-events:none;opacity:0}
.flash.on{animation:flash 1.2s cubic-bezier(.3,1.4,.5,1) both}
@keyframes flash{0%{opacity:0;scale:.4}14%{opacity:1;scale:1.1}26%,76%{opacity:1;scale:1}100%{opacity:0;scale:1.2}}
.tally strong.bump{animation:bump .26s cubic-bezier(.3,1.7,.5,1)}
@keyframes bump{0%{scale:1.32}}
[data-state="over"] .ring{animation:quake .4s linear}
@keyframes quake{20%,60%{translate:-7px 0}40%,80%{translate:7px 0}}
.hub{position:absolute;left:50%;top:50%;width:31%;aspect-ratio:1;translate:-50% -50%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;color:var(--ink);pointer-events:none}
.tally strong{display:block;font-family:var(--serif);font-weight:650;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(40px,6.4vw,78px);line-height:.86;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums}
.tally span{display:block;margin-top:5px;font-family:var(--mono);font-size:clamp(9.5px,1vw,12px);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.stage{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(14px,1.6vw,20px);line-height:1.05;letter-spacing:-.01em}
/* the folk: each one is a button. They shrink a little as the circle fills up. */
.folk{position:absolute;left:0;top:0;translate:-50% -50%;height:calc(45% - var(--n,5) * 1.9%);aspect-ratio:225/473;padding:0;margin:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;will-change:transform}
.folk img{position:relative;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transform-origin:50% 100%}
.folk:focus-visible{outline-offset:-2px}
/* a lime sun rises behind anyone who has had the gift this round */
.folk::before{content:"";position:absolute;left:50%;top:6%;width:104%;aspect-ratio:1;border-radius:50%;translate:-50% 0;background:var(--lime);scale:0;opacity:0;transition:scale .35s cubic-bezier(.3,1.7,.5,1),opacity .2s}
.folk.lit::before{scale:1;opacity:.95}
.folk.home::before{background:var(--sun)}
.ripe .folk.home::before{scale:1;opacity:1;animation:call-home .7s ease-in-out infinite}
.folk .tag{position:absolute;left:50%;top:100%;translate:-50% -2px;padding:.3em .7em .34em;border-radius:999px;background:var(--cover);color:var(--ink);font-family:var(--mono);font-size:clamp(9.5px,1vw,11.5px);font-weight:500;letter-spacing:.07em;line-height:1;text-transform:uppercase;white-space:nowrap;box-shadow:2px 2px 0 var(--tomato);pointer-events:none}
.ripe .folk .tag{background:var(--lime);box-shadow:2px 2px 0 var(--lime-deep)}
[data-state="ready"] .folk:not(.home) img{animation:ready-bob 1.6s ease-in-out calc(var(--k,0) * -.3s) infinite}
.folk.got img{animation:got .42s cubic-bezier(.3,1.6,.5,1)}
.folk.no img{animation:no .34s ease-in-out}
.folk.new{animation:join .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ready-bob{50%{transform:translateY(-3.5%)}}
@keyframes got{0%{transform:scale(1.16,.88)}55%{transform:scale(.95,1.07)}100%{transform:none}}
@keyframes no{20%,60%{transform:translateX(-6%) rotate(-4deg)}40%,80%{transform:translateX(6%) rotate(4deg)}}
@keyframes join{from{scale:0;opacity:0}}
@keyframes call-home{50%{scale:1.14}}
/* the gift, with its clock running round it */
.gift{position:absolute;left:0;top:0;translate:-50% -50%;width:calc(11% * var(--g,1));aspect-ratio:1;pointer-events:none;will-change:transform}
.gift img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;transform-origin:50% 85%;rotate:calc((1 - var(--f,1)) * 16deg);filter:saturate(calc(.4 + var(--f,1) * .6));transition:scale .3s cubic-bezier(.3,1.7,.5,1)}
.came .gift img{scale:1.5}
.gift .clock{position:absolute;inset:-9%;width:118%;height:118%;rotate:-90deg;overflow:visible;filter:drop-shadow(3px 3px 0 rgba(30,17,13,.35))}
.gift .clock circle{fill:var(--cover);stroke:var(--ink);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.gift.low .clock circle{stroke:var(--tomato)}
.gift.low{animation:shiver .16s linear infinite}
[data-state="ready"] .gift .clock circle{stroke:none}
.gift.wilted{animation:none}
.gift.wilted img{rotate:58deg;filter:saturate(0) brightness(.62);translate:0 26%;transition:rotate .7s cubic-bezier(.5,0,.6,1.4),translate .7s ease-in,filter .7s}
.gift.wilted .clock{opacity:0}
[data-state="over"] .folk img{filter:saturate(.55);transition:filter .6s}
@keyframes shiver{0%,100%{rotate:-3deg}50%{rotate:3deg}}
.say{min-height:3em;max-width:46ch;text-align:center;font-size:16.5px;line-height:1.45;color:var(--cream-soft);text-wrap:balance}
.ease{display:inline-flex;align-items:center;gap:9px;font-size:15px;color:rgba(251,241,221,.74);cursor:pointer}
.ease input{width:18px;height:18px;margin:0;accent-color:var(--lime)}
/* the end of a round */
.tallycard{z-index:2;width:min(100%,540px);scroll-margin-top:44px;rotate:.6deg;margin-block:44px 8px;text-align:left;gap:clamp(14px,1.8vw,20px);padding-top:clamp(34px,4.4vw,48px);outline:none}
.tallycard .kept{position:absolute;right:clamp(14px,4vw,34px);top:-36px;width:clamp(84px,11vw,118px);height:auto;rotate:10deg;filter:drop-shadow(4px 4px 0 rgba(38,21,15,.18))}
.tallycard::before{display:none}
.tallycard h2{font-size:clamp(46px,6vw,76px);padding-right:22%;font-variant-numeric:lining-nums}
.tallycard > p{color:var(--body);font-size:17.5px;line-height:1.5}
.tallycard .versus{padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--sun) 40%,var(--cover));color:var(--ink);font-weight:600}
.tallycard .btns{justify-content:flex-start}
.tallycard .btn{align-self:auto}
.darebox{display:flex;flex-direction:column;gap:12px;padding-top:clamp(14px,1.8vw,20px);border-top:2px dashed rgba(38,21,15,.26)}
.darebox .ask{margin:0}
.darebox .linkrow input{font-family:var(--sans);font-size:16px}
.darebox .said{min-height:0}
.darebox .said:empty,.darebox .btns:has([hidden]){display:none}
.tallycard .fork{font-size:16px}
.tallycard .fork a{white-space:nowrap;margin-left:.2em}
.morelink{display:block;width:fit-content;margin:clamp(34px,4vw,48px) auto 0}
@media (max-width:899px){
  .board{width:min(100%,460px)}
  .ring{aspect-ratio:1/1.1;margin-block:16px 40px}
  .rules{grid-template-columns:minmax(0,1fr);max-width:460px}
  .folk{height:calc(41% - var(--n,5) * 1.6%)}
  .ring::before,.hub{width:33%}
  .tallycard{box-shadow:7px 7px 0 var(--tomato)}
}

/* ---------- Scroll reveals (classes are added by site.js, so without it nothing is hidden) ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.art.rv,.frieze.rv{transform:translateY(46px) scale(.95);transition-timing-function:cubic-bezier(.3,1.3,.5,1);transition-duration:1s}
.rv.in{opacity:1;transform:none}
.card.rv{transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s cubic-bezier(.3,1.5,.5,1)}

@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .steps.journey{row-gap:230px;margin-top:230px}
  .cards{grid-template-columns:minmax(0,1fr);max-width:500px}
  .cards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px}
  .fits{grid-template-columns:minmax(0,1fr);max-width:520px;gap:38px}
}
@media (max-width:760px){
  .zines{grid-template-columns:minmax(0,1fr);max-width:320px;gap:56px}
}
@media (min-width:761px){
  /* Five zines: three in the first row, two centered under them. */
  .zines.five{grid-template-columns:repeat(6,minmax(0,1fr))}
  .zines.five > li{grid-column:span 2}
  .zines.five > li:nth-child(4){grid-column:2 / span 2}
}
@media (max-width:899px){
  /* The hero stacks: door on top, words centered beneath. */
  .hero{min-height:0;display:block;padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
  .hero .col{align-items:center;text-align:center}
  .hero .col > :not(.door){max-width:660px}
  .hero .btns{justify-content:center}
  .door{position:relative;right:auto;top:auto;width:min(300px,66vw);margin:0 auto 4px;translate:0 calc(var(--p) * -24px)}
  .door.double{width:min(340px,76vw)}
  .portrait{position:relative;right:auto;top:auto;width:min(270px,62vw);margin:0 auto 10px;translate:0 calc(var(--p) * -24px)}
  .hero.paper{min-height:0;background-image:var(--speck-dark),radial-gradient(80% 34% at 50% 30%,rgba(246,195,59,.4),transparent 72%)}
  .motes i:nth-child(n+7),.motes i:nth-child(2),.motes i:nth-child(4){display:none}
  .hero{background-image:var(--speck-light),
    radial-gradient(70% 36% at 50% 22%,rgba(232,69,44,.34),transparent 72%),
    radial-gradient(70% 40% at 0% 100%,rgba(35,64,200,.3),transparent 70%)}
}
@media (max-width:820px){
  .split,.split.even{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
  .split > div + div{margin-top:8px}
}
@media (max-width:640px){
  .cards.two{grid-template-columns:minmax(0,1fr);max-width:500px}
  .steps{grid-template-columns:minmax(0,1fr);max-width:460px}
  .meta a{margin-left:0}
  .feature{box-shadow:6px 6px 0 rgba(38,21,15,.16)}
  .posts li{grid-template-columns:minmax(0,1fr) auto}
  .posts li p{grid-column:1;grid-row:2}
  .posts li::after{grid-column:2;grid-row:1}
  .posts{box-shadow:6px 6px 0 var(--lavender)}
  .fits li{box-shadow:6px 6px 0 var(--c,var(--tomato))}
  .semirow span:nth-child(n+17){display:none}
  .gfx text{display:none}
  .beside{grid-template-columns:minmax(0,1fr)}
  .beside .gfx{width:min(190px,56%);margin:0 auto}
  .moves{grid-template-columns:minmax(0,1fr)}
  .move:first-child span{text-align:left}
  .fare-top{flex-wrap:wrap}
  .fare-top i{display:none}
  .fare-top h4{flex:1 1 100%}
  .card,.traps li,.inquote{box-shadow:6px 6px 0 var(--pop,var(--c,var(--tomato)))}
  .split > div:nth-child(2) .inquote{box-shadow:6px 6px 0 var(--cobalt)}
  .insert{box-shadow:8px 8px 0 rgba(30,17,13,.42)}
  .dossier{box-shadow:inset 0 0 0 7px var(--cover),inset 0 0 0 9px rgba(38,21,15,.5),8px 8px 0 rgba(30,17,13,.42)}
}
@media (max-width:560px){
  body{font-size:17.5px}
  .nav{flex-direction:column;align-items:center;gap:0;padding-bottom:6px}
  .logo{font-size:23px}
  .doors{gap:20px}
  .doors a{font-size:14px;padding:9px 2px 7px}
  .hero{padding-top:calc(env(safe-area-inset-top,0px) + 118px)}
  html{scroll-padding-top:110px}
  .btn{padding:15px 22px;font-size:17px}
  .shift th small,.shift td small{font-size:11px;letter-spacing:.02em}
}
@media (prefers-reduced-motion:reduce){
  .door .arch,.opening,.leaf,.door .spill,.door .spark,.opening .who,.door::before,.motes i,.door.pic img,.portrait .arch,.portrait .spark,.portrait .photo,.portrait::before,.rings-fig .route{animation:none}
  .portrait .spark{transform:none}
  .leaf{transform:rotateY(72deg)}
  .door.double .leaf{transform:rotateY(74deg)}.door.double .leaf.r{transform:rotateY(-74deg)}
  .door .spill{opacity:1}.door .spark{transform:none}
  .opening .who{transform:translate(-50%,0)}
  .btn,.nav,.doors a,.card,.posts li::after,.cover{transition:none}
  a.cover:hover,a.cover:focus-visible{transform:none}
  .btn:hover,.btn:active,.card:hover{translate:none}
  .rv{opacity:1;transform:none;transition:none}
  .doortag{animation:none}
  .pick-face{transition:none}
  .folk img,.folk.new,.folk::before,.gift.low,.ripe .folk.home::before{animation:none!important;transition:none}
  .ring::before,.gift img{transition:none}
  .ring::before,.ring,.tally strong.bump{animation:none!important}
  .flash.on{animation:none;opacity:1}
  .go,.track li,.slot > *,.table{transition:none}
  html{scroll-behavior:auto}
}
/* On paper: everything visible (reveals never fire in print), no fixed bar, no grain. */
@media print{
  body::after,.nav,.motes,.skip,.mailline{display:none!important}
  .rv{opacity:1!important;transform:none!important}
  .hero{min-height:0}
}

/* Little noodle folk that stand beside a chapter's big line on the About page: one alone, or two together. */
.prose .cameo{float:right;display:flex;align-items:flex-end;gap:2px;margin:-18px 0 8px clamp(14px,2.4vw,28px);pointer-events:none}
.prose .cameo img{display:block;height:clamp(92px,11vw,128px);width:auto}
.prose .cameo.wide img{height:clamp(80px,9vw,108px)}
.prose .cameo.pair img:last-child{margin-left:-14px}
@media (max-width:640px){.prose .cameo{margin-top:-8px}.prose .cameo img{height:84px}.prose .cameo.wide img{height:72px}}
/* Star bullets on the dark chapters use the bright stars. */
.chapter:is(.brick,.forest) .prose .bullets li{--c:var(--pink);color:rgba(251,241,221,.86)}
.chapter:is(.brick,.forest) .prose .bullets li:nth-child(2){--c:var(--sky)}
.chapter:is(.brick,.forest) .prose .bullets li:nth-child(3){--c:var(--sun)}
/* A cameo that closes a section sits on its own line at the right. */
.prose .cameo.end{float:none;justify-content:flex-end;margin:clamp(12px,2vw,24px) 0 0}
/* Two small tilted cards that close a page instead of one button. */
.close .asks{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,3vw,32px);margin:clamp(28px,4vw,40px) auto 0;max-width:720px}
.close .ask{flex:1 1 260px;max-width:330px;display:flex;flex-direction:column;gap:6px;padding:22px 24px 20px;text-align:left;text-decoration:none;color:var(--ink);border-radius:18px;background-image:var(--speck-dark);box-shadow:8px 8px 0 rgba(0,0,0,.45);transition:transform .2s ease,box-shadow .2s ease}
.close .ask.lime{background-color:var(--lime);rotate:-1.5deg}
.close .ask.pink{background-color:var(--pink);rotate:1.5deg}
.close .ask strong{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(22px,2.2vw,26px);line-height:1.1;letter-spacing:-.015em}
.close .ask span{font-family:var(--sans);font-size:15.5px;line-height:1.4;color:rgba(38,21,15,.78)}
.close .ask:hover,.close .ask:focus-visible{transform:translate(-2px,-3px);box-shadow:11px 12px 0 rgba(0,0,0,.45)}
/* A hero that sizes to its content instead of the screen. */
.hero.fit{min-height:0}
/* Support Menu as one ask: the total up top, then what it resources. */
.ask-total{display:flex;flex-direction:column;align-items:center;gap:14px;margin:clamp(26px,3vw,38px) 0 clamp(34px,4vw,48px);text-align:center}
.price.big{font-size:clamp(26px,3.4vw,40px);padding:14px 28px 16px;box-shadow:6px 6px 0 var(--lime-deep);rotate:-1.5deg}
.ask-total p{margin:0;font-size:clamp(17px,1.6vw,19px);color:var(--body)}
.uses-title{font-size:clamp(24px,2.6vw,30px);padding-bottom:12px;border-bottom:2px solid var(--ink)}
.uses{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px 36px}
@media (min-width:760px){.uses{grid-template-columns:1fr 1fr}}
.uses li{position:relative;padding-left:1.7em;font-size:16.5px;line-height:1.5;color:var(--body)}
.uses li::before{content:"";position:absolute;left:0;top:.2em;width:1.05em;aspect-ratio:1;background:var(--tomato);-webkit-mask:var(--star) center / contain no-repeat;mask:var(--star) center / contain no-repeat}
.uses li:nth-child(3n+2)::before{background:var(--sky)}
.uses li:nth-child(3n)::before{background:var(--sun)}
.uses strong{color:var(--ink)}
.in-kind{margin:clamp(28px,3.4vw,40px) 0 0;padding-top:22px;border-top:2px dashed var(--rule);font-family:var(--serif);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(17px,1.7vw,19px);line-height:1.45;color:var(--ink)}
.in-kind .inline-link{font-family:var(--sans);font-style:normal;white-space:nowrap}
/* Join page: the Tally form sits on a cream card. */
.join-card{position:relative;width:100%;max-width:720px;box-sizing:border-box;margin:0 auto;padding:68px clamp(16px,3.4vw,44px) clamp(12px,2vw,24px);border-radius:22px;background-color:var(--paper);background-image:var(--speck-dark);box-shadow:10px 10px 0 rgba(30,17,13,.35)}
.join-card iframe{display:block;width:100%;border:0}
@media (min-width:900px){.join-hero .col > h1.long{max-width:min(560px,50%)}}
.join-close{position:absolute;top:14px;right:14px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--cream);box-shadow:3px 3px 0 rgba(30,17,13,.3);transition:transform .15s ease,background-color .15s ease}
.join-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.join-close:hover,.join-close:focus-visible{background:var(--tomato);transform:rotate(90deg)}
/* A closing line under a row of cards, tying them back to the section's idea. */
/* Your Hosts: the porch photo in a tilted print frame beside two short intros. */
.hosts{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,88px);align-items:center;max-width:1000px;margin:0 auto}
.hosts-photo{margin:0;justify-self:center;width:100%;max-width:400px;padding:12px 12px 14px;background:#FFFBF2;border-radius:6px;rotate:-2deg;box-shadow:10px 10px 0 rgba(38,21,15,.16)}
.hosts-photo img{display:block;width:100%;height:auto;border-radius:3px}
.hosts-text{display:flex;flex-direction:column;gap:18px;text-align:left}
.hosts-text h2{margin-bottom:4px}
.hosts-text p{margin:0;color:var(--body);font-size:clamp(18px,1.6vw,20px);line-height:1.55;max-width:46ch}
.hosts-text strong{color:var(--ink)}
@media (max-width:760px){
  .hosts{grid-template-columns:minmax(0,1fr)}
  .hosts-photo{max-width:300px}
  .hosts-text{text-align:center;align-items:center}
}

/* ---------- The 4 Relational Knots zine: one block per knot, and who's working it loose ---------- */
.prose .knot{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(22px,4vw,44px);align-items:start;margin-top:2.6em}
.prose .knot:nth-of-type(even) > figure{order:2;rotate:1.5deg}
.prose .knot > figure{margin:0;background:var(--pop);border-radius:28px;padding:clamp(14px,2vw,22px);rotate:-1.5deg}
.prose .knot > figure .art{display:block;width:100%;height:auto}
.prose .knot > div > * + *{margin-top:.8em}
.prose .knot h2{margin-top:0}
.prose .loose{margin-top:1.2em!important;background:var(--cover);border-radius:16px;padding:16px 18px 18px;box-shadow:6px 6px 0 var(--pop)}
.prose .loose h3{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0;color:var(--ink)}
.prose .loose ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:12px}
.prose .loose li{display:flex;gap:12px;align-items:center;margin:0;padding:0;font-size:16px;line-height:1.35}
.prose .loose li::before{content:none}
.prose .loose li > span:last-child{display:flex;flex-direction:column;gap:2px}
.prose .loose a,.prose .loose strong{font-weight:650;color:var(--ink)}
.prose .loose small{font-size:14.5px;color:var(--muted)}
.face{flex:none;width:44px;height:44px;border-radius:50%;display:block;background:var(--pop,var(--pink));color:var(--ink);font:700 18px/1 var(--sans);object-fit:cover;box-shadow:0 0 0 3px #FFFBF2}
@media (max-width:760px){
  .prose .knot{grid-template-columns:minmax(0,1fr)}
  .prose .knot > figure,.prose .knot:nth-of-type(even) > figure{order:0;max-width:340px}
}

/* ---------- Already in the Scene (Founders page) ---------- */
#hosts + #served{padding-top:0}
#served h2{text-align:center}
.served{list-style:none;padding:0;margin:clamp(32px,4vw,52px) auto 0;max-width:1000px;columns:2 320px;column-gap:clamp(24px,3vw,40px)}
.served > li{break-inside:avoid;display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:0 0 clamp(26px,3vw,40px);padding:clamp(22px,2.6vw,30px);background:#FFFBF2;border-radius:18px;rotate:var(--tilt,0deg);box-shadow:8px 8px 0 var(--pop);text-align:left}
.served-head{display:flex;gap:14px;align-items:center}
.served h3{font-size:clamp(22px,2.2vw,26px);line-height:1.05;color:var(--ink)}
.served .by{margin:3px 0 0;font-size:14.5px;font-weight:650;color:var(--brick)}
.served p{margin:0;color:var(--body);font-size:17px;line-height:1.55}
.served .face{width:56px;height:56px;font-size:22px}
.served .inline-link{font-size:16px}

/* Logo ticker in Already in the Scene: every logo in one color (ink), set at slightly different heights and tilts, drifting slowly; full strength on hover. */
.ticker{overflow:hidden;margin:clamp(14px,2vw,24px) 0 0;padding-block:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 70s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{display:flex;align-items:center;gap:clamp(52px,6vw,84px);margin:0;padding:0 clamp(52px,6vw,84px) 0 0;list-style:none}
.ticker li{display:flex;align-items:center;flex:none}
.ticker li:nth-child(5n+1){translate:0 -6px;rotate:-2deg}
.ticker li:nth-child(5n+2){translate:0 7px;rotate:1.5deg}
.ticker li:nth-child(5n+3){translate:0 -3px;rotate:-1deg}
.ticker li:nth-child(5n+4){translate:0 6px;rotate:2deg}
.ticker li:nth-child(5n+5){translate:0 -5px}
.logo{display:block;height:var(--h);aspect-ratio:var(--r);background:var(--ink);
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.logo,.logo-type{opacity:.7;transition:opacity .2s}
.ticker li:hover .logo,.ticker li:hover .logo-type{opacity:1}
.logo-type{font:700 21px/1 var(--sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.logo-type.eraser{font:500 20px/1 var(--serif);padding:9px 16px 10px;border:2.5px solid var(--ink);border-radius:9px;rotate:-4deg}
.logo-type.eraser em{font-style:italic}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .ticker-track{width:auto;justify-content:center}
  .ticker ul{flex-wrap:wrap;justify-content:center;row-gap:24px;padding:0 16px}
  .ticker ul[aria-hidden],.ticker ul > li:nth-child(n+6){display:none}
}

/* Text links on dark sections: cream, with the lime underline. */
.forest .inline-link,.brick .inline-link,.close .inline-link,.hero .inline-link{color:var(--cream)}
.btns > .inline-link{align-self:center;margin-left:10px;font-weight:600}

/* ---------- Questions Patrons Ask (Patrons page) ---------- */
.faq{max-width:780px;margin:clamp(30px,4vw,48px) auto 0;display:flex;flex-direction:column;gap:14px;text-align:left}
.faq details{background:#FFFBF2;border-radius:16px;box-shadow:6px 6px 0 var(--pop,var(--lime));transition:box-shadow .2s}
.faq details:nth-child(4n+2){--pop:var(--pink)}
.faq details:nth-child(4n+3){--pop:var(--sky)}
.faq details:nth-child(4n+4){--pop:var(--sun)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px clamp(18px,3vw,28px);
  font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:600;font-size:clamp(19px,2vw,23px);line-height:1.25;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pop,var(--lime));
  font:600 22px/1 var(--sans);color:var(--ink);transition:rotate .2s}
.faq details[open] summary::after{rotate:45deg}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:16px}
.faq details > p{margin:0;padding:0 clamp(18px,3vw,28px) 22px;color:var(--body);font-size:17.5px;line-height:1.6;max-width:62ch}