/* Fourselves — the journal kit (D-40). Shared by the lookbook and the prototype.
   The page is paper and ink; colour arrives on the objects. Construction after CHANI (docs/handoff-2026-09-26-journal.md §4):
   grid paper, torn edges, crumpled sheets, tape, pins, cut-outs with a scissor halo, stickers, handwriting, ransom letters,
   typewriter mono, hollow outlined headings, a pink glow. */

:root{
  --paper:#F7F6F4;        /* the page */
  --paper-2:#FBFAF8;      /* a sheet stuck on the page */
  --grid-bg:#ECEBE8;      /* grey grid paper */
  --grid-line:#D4D5D2;
  --line-bg:#FAF7EE;      /* lined diary paper */
  --line-rule:#C9D6E8;
  --line-margin:#E8A9A9;
  --ink:#1B1B1B;
  --ink-2:#2A2A2B;
  --ink-soft:#5A5955;
  --pink:#FF5FA6;
  --pink-soft:#FFC3E2;
  --glow:rgba(255,150,220,.55);
  --gold:#D9A62A;
  --orange:#F0612B;
  --yellow:#F6D33B;
  --teal:#2BB3AC;
  --black-paper:#111111;
  --foil-a:#F6C9DD; --foil-b:#CFE6F6; --foil-c:#F8EFC2; --foil-d:#D3EFD6; --foil-e:#E9D0F3;
  --mono:"Courier Prime","IBM Plex Mono",Consolas,"Courier New",monospace;
  --sans:"Outfit","Poppins","Segoe UI",Arial,sans-serif;
  --serif:"Fraunces","Playfair Display",Georgia,serif;
  --hand:"Homemade Apple","Nothing You Could Do","Segoe Script",cursive;
  --hand-2:"Nothing You Could Do","Homemade Apple","Segoe Script",cursive;
  --marker:"Anton","Impact","Arial Narrow",sans-serif;
  --shadow-cut:0 10px 14px -8px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.12);
  --shadow-sheet:0 16px 30px -18px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.08);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.wrap-n{max-width:820px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
[hidden]{display:none!important}

/* ---------- paper ---------- */
.grid-paper{
  background-color:var(--grid-bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:28px 28px;
  position:relative;
}
.grid-paper::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.grid-paper > *{position:relative;z-index:1}
.lined-paper{
  background-color:var(--line-bg);
  background-image:linear-gradient(transparent 27px, var(--line-rule) 27px, var(--line-rule) 28px, transparent 28px), linear-gradient(90deg, transparent 56px, var(--line-margin) 56px, var(--line-margin) 57px, transparent 57px);
  background-size:100% 28px, 100% 100%;
  line-height:28px;
}
.plain-paper{background:var(--paper)}
.noise{position:relative}
.noise::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .55 0 0 0 0 .55 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* torn edges: an SVG displacement filter roughens the alpha of whatever it is applied to (defined once in the page).
   On a .sheet the filter goes on a background layer (::after), never on the text. */
.torn:not(.sheet){filter:url(#torn)}
.torn-soft:not(.sheet){filter:url(#torn-soft)}
.sheet.torn,.sheet.torn-soft{background:transparent;box-shadow:none}
.sheet.torn::after,.sheet.torn-soft::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--sheet-bg,var(--paper-2));box-shadow:var(--shadow-sheet)}
.sheet.torn::after{filter:url(#torn)}
.sheet.torn-soft::after{filter:url(#torn-soft)}
/* a strip that ends a grid section with a rip */
.rip{position:relative;height:38px;margin-top:-1px}
.rip::before{content:"";position:absolute;inset:0;background:inherit}
.rip svg{position:absolute;inset:0;width:100%;height:100%}

/* a sheet stuck onto the page */
.sheet{position:relative;isolation:isolate;background:var(--sheet-bg,var(--paper-2));color:var(--ink);padding:clamp(20px,4vw,44px);box-shadow:var(--shadow-sheet)}
.sheet.crumpled{--sheet-bg:
  linear-gradient(112deg, rgba(0,0,0,.05) 0 18%, transparent 18.5% 46%, rgba(0,0,0,.04) 46.5% 52%, transparent 52.5% 71%, rgba(255,255,255,.55) 71.5% 73%, transparent 73.5%),
  linear-gradient(203deg, transparent 0 32%, rgba(0,0,0,.045) 32.5% 41%, transparent 41.5% 63%, rgba(0,0,0,.035) 63.5% 67%, transparent 67.5%),
  linear-gradient(28deg, rgba(0,0,0,.03) 0 22%, transparent 22.5% 58%, rgba(255,255,255,.6) 58.5% 60%, transparent 60.5%),
  var(--paper-2)}
.sheet.tilt-l{transform:rotate(-1.4deg)} .sheet.tilt-r{transform:rotate(1.1deg)}
.sheet.notepad{background:
  linear-gradient(transparent 27px, #D9E1EC 27px, #D9E1EC 28px, transparent 28px) 0 12px/100% 28px repeat-y, #FFFDF7;
  border-top:14px solid #E9E2D2}
.sheet.notepad::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:
  radial-gradient(circle at 12px 7px, #7a7a7a 0 3px, transparent 3.5px) 0 0/26px 14px repeat-x}
.sheet.black{background:var(--black-paper);color:#F3F1EC}

/* ---------- fasteners ---------- */
.tape{position:absolute;width:112px;height:30px;left:50%;top:-14px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,255,255,.55);
  background-image:radial-gradient(circle, rgba(0,0,0,.85) 1.6px, transparent 1.9px);background-size:11px 11px;
  box-shadow:0 1px 2px rgba(0,0,0,.18);opacity:.9;
  clip-path:polygon(0 8%,3% 0,6% 10%,9% 2%,12% 9%,100% 0,100% 100%,94% 92%,91% 100%,88% 90%,85% 100%,0 100%)}
.tape.plain{background-image:none;background:rgba(255,246,218,.7)}
.tape.pink{background-image:none;background:rgba(255,160,210,.6)}
.tape.tl{left:14px;top:-12px;transform:rotate(-38deg);width:90px}
.tape.tr{left:auto;right:-26px;top:-8px;transform:rotate(36deg);width:90px}
.tape.bottom{top:auto;bottom:-14px;transform:translateX(-50%) rotate(2deg)}
.pin{position:absolute;width:26px;height:34px;left:50%;top:-16px;transform:translateX(-50%)}
.pin svg{width:100%;height:100%;overflow:visible}
.clip{position:absolute;left:24px;top:-26px;width:64px;height:66px}
.clip svg{width:100%;height:100%}

/* ---------- cut-outs ---------- */
.cut{filter:drop-shadow(0 10px 8px rgba(0,0,0,.28)) drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.cut img{display:block}
.cut.halo{filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 10px 8px rgba(0,0,0,.28))}
.rot-l1{transform:rotate(-6deg)} .rot-l2{transform:rotate(-3deg)} .rot-r1{transform:rotate(4deg)} .rot-r2{transform:rotate(8deg)}
.glow{position:relative}
.glow::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side, var(--glow), rgba(255,150,220,0));z-index:-1;filter:blur(6px)}
.glow-box::before{border-radius:22px;inset:-8%}
.polaroid{background:#FCFBF9;padding:12px 12px 40px;box-shadow:var(--shadow-cut);display:inline-block;position:relative}
.polaroid img{display:block;width:100%;filter:contrast(1.05)}
.polaroid .cap{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--hand-2);font-size:15px;color:var(--ink-2)}

/* ---------- type ---------- */
.outline{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.6px var(--ink);paint-order:stroke fill;line-height:1.02}
.outline.big{font-size:clamp(34px,6.4vw,76px)}
.outline.mid{font-size:clamp(26px,4vw,44px)}
.outline-it{font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;color:transparent;-webkit-text-stroke:1.4px var(--ink);paint-order:stroke fill;line-height:1.05}
.outline-it.big{font-size:clamp(40px,7vw,84px)}
.outline-it.mid{font-size:clamp(28px,4.4vw,52px)}
.hand{font-family:var(--hand);font-size:clamp(20px,2.6vw,28px);line-height:1.5;color:var(--ink)}
.hand-2{font-family:var(--hand-2);font-size:clamp(17px,2.2vw,22px);color:var(--ink-2)}
.hand.title{text-align:center;display:block;margin:0 auto .6em}
.caps{font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(15px,1.6vw,19px);line-height:1.3}
.mono{font-family:var(--mono)}
.mono-caps{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:12px}
/* the wordmark (D-45): soft, papery. Fraunces on its soft axis, italic, on a cream label with a pinked edge and a pink running stitch */
.wm{font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 96;font-size:32px;letter-spacing:-.005em;color:var(--ink);line-height:1;display:inline-block;text-decoration:none;white-space:nowrap}
.wm.paper{position:relative;background:#FBF7EE;color:#2A2522;padding:.42em .95em .4em;transform:rotate(-1.5deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.16));isolation:isolate}
.wm.paper::before{content:"";position:absolute;inset:7px 8px;border:1.5px dashed #D9A0B8;border-radius:2px;pointer-events:none}
.wm.paper.pink::before{border-color:#E88AB8}
.wm.paper.grey::before{border-color:#9A928A}
.wm.paper.hem::before{inset:auto 8px 6px 8px;border-width:0 0 1.5px 0;border-radius:0}
.wm.paper.plain::before{display:none}
.wm.stitch{font-style:normal;font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;letter-spacing:.01em;color:transparent;
  background:repeating-linear-gradient(45deg,#E4739F 0 1.7px,transparent 1.7px 5.2px),repeating-linear-gradient(-45deg,#E4739F 0 1.7px,transparent 1.7px 5.2px),#F7D9E6;
  -webkit-background-clip:text;background-clip:text}
.linen{display:inline-block;padding:.6em 1.1em;background:
  linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px) 0 0/4px 4px,linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px) 0 0/4px 4px,#F4EEE3;
  transform:rotate(1.5deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.16))}
.wm.script{font-family:"Yellowtail","Kaushan Script",cursive;font-style:normal;font-weight:400;font-size:40px;font-variation-settings:normal;letter-spacing:0}
.wm.script-2{font-family:"Sacramento",cursive;font-style:normal;font-weight:400;font-size:50px;font-variation-settings:normal;letter-spacing:.01em}
.round-sticker{display:inline-grid;place-items:center;width:150px;height:150px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 6px rgba(0,0,0,.08),0 8px 12px -8px rgba(0,0,0,.5);transform:rotate(-6deg);text-align:center;padding:12px}
/* the rejected felt patch, kept for the record (D-45) */
.wordmark{font-family:var(--marker);font-size:34px;letter-spacing:.01em;text-transform:uppercase;line-height:1;filter:url(#rough);display:inline-block}
.wordmark.patch{background:#141414;color:#EFEDE8;padding:.28em .45em .22em;transform:rotate(-2deg);box-shadow:0 8px 12px -8px rgba(0,0,0,.6);border-radius:3px;position:relative}
.wordmark.patch::before{content:"";position:absolute;inset:4px;border:1.5px dashed rgba(255,255,255,.35);border-radius:2px;pointer-events:none}
.squiggle{position:relative;display:inline-block}
.squiggle::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.22em;height:.42em;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'><path d='M1 8 Q8 1 15 8 T29 8 T43 8 T57 8 T71 8 T85 8 T99 8 T113 8 T119 8' fill='none' stroke='%231B1B1B' stroke-width='2.2' stroke-linecap='round'/></svg>") repeat-x;background-size:auto 100%}
.scribble-under{background:linear-gradient(transparent 62%, rgba(255,95,166,.55) 62%, rgba(255,95,166,.55) 88%, transparent 88%)}
.pen-circle{position:relative;display:inline-block;padding:.1em .4em}
.pen-circle::after{content:"";position:absolute;inset:-.25em -.4em;border:2.4px solid var(--ink);border-radius:50% 45% 55% 48%/60% 50% 55% 45%;transform:rotate(-2deg);pointer-events:none}

/* buttons after CHANI: thin outlined rectangles in mono caps; the primary is black */
.btn{display:inline-block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:13px;padding:.85em 1.6em;border:1.5px solid var(--ink);border-radius:5px;background:var(--paper-2);color:var(--ink);text-decoration:none;cursor:pointer;line-height:1.1;transition:transform .08s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:#F5F3EE}
.btn.glowing{box-shadow:0 0 26px 6px var(--glow)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---------- ransom letters ---------- */
.ransom{display:inline-flex;flex-wrap:wrap;align-items:flex-end;justify-content:inherit;gap:.16em .42em;line-height:1;font-size:var(--rs, clamp(28px,5vw,60px));vertical-align:baseline;max-width:100%}
.ransom .w{display:inline-flex;align-items:flex-end;gap:.05em;white-space:nowrap}
.ransom .l{display:inline-block;padding:.02em .16em .06em;line-height:1;box-shadow:0 2px 3px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.05);position:relative;top:0;white-space:pre}
.center .ransom{justify-content:center}
/* the papers the letters are cut from: soft (D-45), one dark for contrast */
.ransom .l.p0{background:#FBFAF6;color:#1E1C1A}
.ransom .l.p1{background:#F7E3EC;color:#2A1F26}
.ransom .l.p2{background:#1F1D1B;color:#F4F1EA}
.ransom .l.p3{background:#FBF0C6;color:#2A2415}
.ransom .l.p4{background:#F2D3E1;color:#2A1A22}
.ransom .l.p5{background:#DDEFE4;color:#16261C}
.ransom .l.p6{background:#E8DFF4;color:#231A2E}
.ransom .l.p7{background:#DCE9F5;color:#101820}
.ransom.small{--rs:clamp(18px,2.6vw,26px)}
.ransom.tiny{--rs:15px}

/* ---------- stickers, badges, labels ---------- */
.sticker-round{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:0 6px 10px -6px rgba(0,0,0,.5),inset 0 0 0 5px #fff,inset 0 0 0 6px rgba(0,0,0,.06);background:var(--yellow);transform:rotate(-8deg)}
.sticker-round svg{width:100%;height:100%;position:absolute;inset:0}
.badge{display:inline-grid;place-items:center;width:132px;height:132px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #fff 0 8%, #F5F0E6 40%, #E7E0D0);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 -8px 12px rgba(0,0,0,.12),0 8px 12px -8px rgba(0,0,0,.55);font-family:var(--marker);text-transform:uppercase;font-size:22px;line-height:.95;text-align:center;color:#1A1A1A;transform:rotate(6deg)}
.badge .heart{color:#E3262F;font-size:30px;display:block}
.torn-circle{position:relative;display:inline-grid;place-items:center;width:150px;height:150px;border-radius:50%;background:var(--orange);color:#111;font-family:var(--mono);font-weight:700;font-size:30px;transform:rotate(-4deg);
  clip-path:polygon(50% 0,58% 2%,66% 1%,74% 5%,82% 10%,90% 18%,96% 28%,99% 38%,100% 50%,98% 62%,94% 74%,86% 84%,76% 93%,64% 98%,50% 100%,38% 98%,26% 92%,16% 84%,9% 74%,3% 62%,0 50%,2% 38%,6% 26%,12% 16%,20% 9%,30% 4%,40% 1%)}
/* a wax seal, made here (D-32): dark red wax with an irregular edge and an embossed initial */
.seal-wax{position:absolute;width:58px;height:58px;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"opsz" 48;font-size:26px;color:rgba(255,220,220,.55);text-shadow:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(255,255,255,.25);z-index:2;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));transform:rotate(-8deg)}
.seal-wax::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#C8434A 0,#9E1F2B 45%,#6E1119 100%);box-shadow:inset 0 0 0 3px rgba(0,0,0,.12),inset 0 0 8px rgba(0,0,0,.35);filter:url(#torn-soft);z-index:-1}
.seal-wax::after{content:"";position:absolute;inset:11px;border-radius:50%;border:1.5px solid rgba(0,0,0,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.burst{position:relative;display:inline-block;padding:26px}
.burst svg.zig{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.label{display:inline-block;background:#FFF8DC;border:1px solid rgba(0,0,0,.25);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:.35em .7em;box-shadow:0 2px 3px rgba(0,0,0,.18);transform:rotate(-1.5deg)}
.label.pink{background:#FFD5EA}
.label.typed{text-transform:none;letter-spacing:.02em;font-size:14px}
.price-tag{display:inline-block;position:relative;background:#F4EEDC;border:1px solid rgba(0,0,0,.35);font-family:var(--mono);font-size:14px;padding:.5em .9em .5em 1.6em;clip-path:polygon(14% 0,100% 0,100% 100%,14% 100%,0 50%);transform:rotate(3deg)}
.price-tag::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.4);transform:translateY(-50%)}
.star{position:absolute;width:26px;height:26px;color:var(--gold)}
.star svg{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.star.pink{color:var(--pink)} .star.black{color:var(--ink)} .star.teal{color:var(--teal)}

/* the paper mask (Claude-made, D-32): white paper, two eye holes, taped */
.paper-mask{position:absolute;width:100%;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.paper-mask svg{width:100%;height:auto;display:block;overflow:visible}

/* the foil glass laid over a mirror (the Mirror's material, P-24) */
.foil{background:conic-gradient(from 210deg at 50% 45%, var(--foil-a), var(--foil-b), var(--foil-c), var(--foil-d), var(--foil-e), var(--foil-b), var(--foil-a));}
.foil.sheen{animation:sheen 9s linear infinite}
@keyframes sheen{to{filter:hue-rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.foil.sheen{animation:none}}

/* ---------- ticker, nav, footer ---------- */
.ticker{border-bottom:1px solid rgba(0,0,0,.35);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;white-space:nowrap;overflow:hidden;padding:.55em 0;background:var(--paper)}
.ticker .track{display:inline-flex;gap:3.2em;padding-left:1.5em;animation:tick 42s linear infinite}
.ticker u{text-underline-offset:3px}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:22px 0 8px;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:.6em;border:1.5px solid var(--ink);border-radius:999px;padding:.55em 1.1em;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);min-width:220px;background:var(--paper-2)}
.nav{display:flex;gap:clamp(1rem,3vw,2.6rem);font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;flex-wrap:wrap;padding:8px 0 22px}
.nav a{text-decoration:none;padding:.3em 0;border-bottom:2px solid transparent}
.nav a[aria-current="page"],.nav a:hover{border-bottom-color:var(--ink)}
.footer{border-top:1.5px solid rgba(0,0,0,.6);margin-top:60px;padding:40px 0 30px;font-family:var(--mono);font-size:13px}
.footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr);gap:2rem}
.footer h4{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:14px;margin-bottom:.9em}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
.footer a{text-decoration:none}
.footer .sub{display:flex;gap:.8em;align-items:end;flex-wrap:wrap}
.footer .sub input{font-family:var(--mono);font-size:14px;border:0;border-bottom:1.5px solid var(--ink);background:transparent;padding:.4em 0;min-width:200px;color:var(--ink)}
.footer .bottom{text-align:center;margin-top:46px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.legal{font-size:12px;color:var(--ink-soft);max-width:70ch}
@media (max-width:760px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer .cols{grid-template-columns:1fr}}

/* ---------- layout helpers ---------- */
.section{padding-block:clamp(40px,7vw,96px)}
.center{text-align:center}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media (max-width:820px){.cards3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cards3{grid-template-columns:1fr}}
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.6vw,34px)}
@media (max-width:900px){.cards4{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cards4{grid-template-columns:1fr}}
.card{display:grid;gap:18px;justify-items:center;text-align:center;align-content:start}
.card .art{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center}
.card .art img{max-height:100%;width:auto;max-width:86%}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:760px){.two-col{grid-template-columns:1fr}}
.stack{display:grid;gap:14px}
.muted{color:var(--ink-soft)}
.small{font-size:13px}
.proto{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px dashed rgba(0,0,0,.4);padding:.2em .55em;border-radius:3px;display:inline-block;vertical-align:middle}
.scene{position:relative}
.scene .abs{position:absolute}
/* a cut-out that hangs off the right edge of a sheet; tucked in on a phone */
@media (max-width:600px){.overhang{right:4px!important}}
.pen{font-family:var(--hand-2);font-size:17px;color:var(--ink-2)}
.arrow{position:absolute;width:64px;height:48px}
.arrow svg{width:100%;height:100%;overflow:visible}
.tally{font-family:var(--hand-2);letter-spacing:.05em;font-size:22px;line-height:1}
.code{font-family:var(--mono);font-size:.9em;letter-spacing:.04em}
.kbd{font-family:var(--mono);font-size:12px;border:1px solid rgba(0,0,0,.3);padding:.1em .4em;border-radius:3px}