/* ============================================================
   PURPLE MIND STUDIO — remote desk service · mockup v0.4
   "Underground 1980": a black brick wall lit by a real neon
   sign, a wheat-pasted xerox flyer, ditto-printed studio forms,
   typewriter ribbon, ballpoint + felt-tip, Dymo labels,
   masking tape on the channel strips.
   Previous look lives in _backup-v0.3/.
   ============================================================ */

:root{
  /* night + wall */
  --night:      #07050b;
  --night-2:    #0d0913;
  --night-3:    #140f1b;

  /* papers */
  --xerox:      #ebe8df;
  --paper:      #ece3c9;   /* aged form stock */
  --paper-pink: #f3d6d6;   /* NCR customer copy */
  --card:       #f8f4e8;   /* index card */
  --postit:     #fbf07e;
  --tape:       rgba(222,208,168,.86);

  /* inks */
  --toner:      #121110;
  --ribbon:     #1c1916;   /* typewriter black ribbon */
  --ditto:      #5b3fa8;   /* spirit-duplicator violet */
  --ballpoint:  #1f3590;
  --pen-red:    #b8231a;
  --pen-purple: #5a2a9c;
  --sharpie:    #161414;
  --hilite:     #ff66b8;   /* fluorescent marker */
  --hilite-y:   #f4ff5a;

  /* neon */
  --n-purple:   #b64dff;
  --n-purple-c: #f6e4ff;
  --n-pink:     #ff2f8e;
  --n-pink-c:   #ffe3f0;
  --n-red:      #ff3b2f;

  /* type */
  --f-neon:   "Tilt Neon", "Trebuchet MS", sans-serif;
  --f-display:"Anton", "Impact", "Arial Narrow", sans-serif;
  --f-type:   "Special Elite", "Courier Prime", "Courier New", monospace;
  --f-mono:   "Courier Prime", "Courier New", monospace;
  --f-pen:    "Reenie Beanie", "Bradley Hand", cursive;
  --f-marker: "Permanent Marker", "Marker Felt", cursive;
  --f-eng:    "Just Another Hand", "Reenie Beanie", cursive;   /* engineer caps on a track sheet */

  --grain: 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='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  /* paper fibres: long streaks + fine tooth */
  --fibres: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.28' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.27  0 0 0 0 0.16  0 0 0 -0.9 0.55'/></filter><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.24  0 0 0 0 0.15  0 0 0 -1.1 0.62'/></filter><rect width='400' height='400' filter='url(%23f)' opacity='0.35'/><rect width='400' height='400' filter='url(%23t)' opacity='0.45'/></svg>");
  /* xerox toner specks */
  --toner-specks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='1' seed='17' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.06  11 0 0 0 -7.9'/></filter><rect width='300' height='300' filter='url(%23s)' opacity='0.7'/></svg>");
  /* Dirty Mind: the upturned box-spring behind him on the cover */
  --springs: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'><g fill='none' stroke='%23312838' stroke-width='2'><path d='M0 1H96M1 0V96'/><ellipse cx='48' cy='48' rx='30' ry='30'/><ellipse cx='48' cy='48' rx='22' ry='22'/><ellipse cx='48' cy='48' rx='13' ry='13'/><path d='M1 1L26 26M95 1L70 26M1 95L26 70M95 95L70 70' stroke-width='1.4'/></g></svg>");
  /* painted-black brick, a little uneven */
  --bricks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80'><rect width='240' height='80' fill='%23060409'/><g fill='%23171120'><rect x='1' y='1' width='58' height='18' rx='1.5'/><rect x='121' y='1' width='58' height='18' rx='1.5'/><rect x='31' y='21' width='58' height='18' rx='1.5'/><rect x='151' y='21' width='58' height='18' rx='1.5'/><rect x='1' y='41' width='58' height='18' rx='1.5'/><rect x='181' y='41' width='58' height='18' rx='1.5'/><rect x='91' y='61' width='58' height='18' rx='1.5'/></g><g fill='%23130e1a'><rect x='61' y='1' width='58' height='18' rx='1.5'/><rect x='181' y='1' width='58' height='18' rx='1.5'/><rect x='91' y='21' width='58' height='18' rx='1.5'/><rect x='61' y='41' width='58' height='18' rx='1.5'/><rect x='121' y='41' width='58' height='18' rx='1.5'/><rect x='31' y='61' width='58' height='18' rx='1.5'/><rect x='151' y='61' width='58' height='18' rx='1.5'/></g><g fill='%231b1424'><rect x='-29' y='21' width='58' height='18' rx='1.5'/><rect x='211' y='21' width='58' height='18' rx='1.5'/><rect x='-29' y='61' width='58' height='18' rx='1.5'/><rect x='211' y='61' width='58' height='18' rx='1.5'/></g></svg>");
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
img{ max-width:100%; display:block; }
body{
  background:var(--night);
  color:#e9e2d2;
  font-family:var(--f-mono);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--n-pink); color:#12040b; }
a{ color:inherit; }
:focus-visible{ outline:2px dashed var(--n-pink); outline-offset:3px; }
section{ scroll-margin-top:70px; }
.fx-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* film grain over everything — the room is dusty */
body::after{
  content:""; position:fixed; inset:0; z-index:3000; pointer-events:none;
  background-image:var(--grain); opacity:.075; mix-blend-mode:overlay;
}

/* ============================================================
   INK — how every mark on paper is made
   ============================================================ */
.typed{ font-family:var(--f-type); color:var(--ribbon); filter:url(#fx-type); }
.ditto{ color:var(--ditto); filter:url(#fx-ditto); }
.hw{
  font-family:var(--f-pen); font-weight:400; font-size:1.6rem; line-height:1.02;
  color:var(--ballpoint); filter:url(#fx-ink); letter-spacing:.01em;
}
.hw-blue{ color:var(--ballpoint); }
.hw-red{ color:var(--pen-red); }
.hw-purple{ color:var(--pen-purple); }
.hw-sharpie{ font-family:var(--f-marker); color:var(--sharpie); filter:url(#fx-marker); font-size:1.1rem; }
.hw-pink{ font-family:var(--f-marker); color:#e8157a; filter:url(#fx-marker); font-size:1.2rem; }
.hw-chalk{ color:#e9e1cf; filter:url(#fx-marker); }
/* per-letter wobble (site.js wraps letters in .ch) */
.ch{ display:inline-block; white-space:pre; transform:translateY(var(--dy,0)) rotate(var(--rot,0deg)); opacity:var(--ink,1); }
.wd{ display:inline-block; white-space:nowrap; }

.tbc{
  font-style:italic; opacity:.72;
  border-bottom:1.5px dashed currentColor;
}

/* ============================================================
   SHARED OBJECTS — tape, dymo, stamps, buttons
   ============================================================ */

/* masking tape: translucent, fibrous, torn ends */
.tape{
  position:absolute; z-index:8; width:130px; height:30px;
  background:
    linear-gradient(100deg, rgba(255,255,250,.35), rgba(255,255,250,0) 30%, rgba(0,0,0,.05) 70%, rgba(255,255,250,.15)),
    var(--fibres),
    var(--tape);
  background-size:auto, 260px 260px, auto;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  mix-blend-mode:multiply;
  clip-path:polygon(0 6%, 3% 0, 5% 9%, 8% 2%, 10% 0, 90% 3%, 92% 0, 95% 8%, 97% 1%, 100% 5%,
                    99% 30%, 100% 52%, 98% 74%, 100% 96%, 96% 100%, 93% 93%, 90% 100%,
                    10% 98%, 7% 92%, 4% 100%, 1% 94%, 2% 70%, 0 48%, 2% 26%);
}
.tape-top{ top:-14px; left:50%; transform:translateX(-50%) rotate(-1.8deg); width:180px; }
.tape-corner{ width:96px; height:26px; }
.tape-tl{ top:-10px; left:-26px; transform:rotate(-38deg); }
.tape-tr{ top:-10px; right:-26px; transform:rotate(36deg); }
.tape-br{ bottom:-8px; right:-24px; transform:rotate(-36deg); }

/* Dymo embossed label tape */
.dymo{
  display:inline-block; position:relative;
  font-family:var(--f-mono); font-weight:700; font-size:.78rem; line-height:1;
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  color:#f1efe9;
  padding:.42em .8em .38em .95em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%, rgba(0,0,0,.25) 100%),
    var(--dymo-bg, #121112);
  text-shadow:0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.28);
  box-shadow:0 2px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  clip-path:polygon(0 0, 100% 0, 98.5% 50%, 100% 100%, 0 100%, 1.5% 50%);
  transform:rotate(var(--dymo-r, -1deg));
  transition:transform .12s ease, filter .12s ease;
}
.dymo-tilt{ --dymo-r:1.4deg; }
.dymo-red{ --dymo-bg:#b3161b; }
.dymo-sm{ font-size:.66rem; }
a.dymo:hover{ transform:rotate(0) translateY(-2px); filter:brightness(1.25); }

/* rubber stamp */
.stamp{
  position:absolute; z-index:9;
  font-family:var(--f-display); font-weight:400; font-size:1.05rem; line-height:1.05;
  letter-spacing:.16em; text-align:center; text-transform:uppercase;
  color:rgba(186,28,28,.9); border:3px solid rgba(186,28,28,.85); border-radius:6px;
  outline:1.5px solid rgba(186,28,28,.75); outline-offset:3px;
  padding:.45rem .85rem .4rem;
  filter:url(#fx-stamp); mix-blend-mode:multiply;
  pointer-events:none;
}
.stamp-purple{ color:rgba(91,63,168,.95); border-color:rgba(91,63,168,.85); outline-color:rgba(91,63,168,.7); }

/* buttons — flyer-black blocks with offset-print pink misregistration */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none;
  font-family:var(--f-mono); font-weight:700; font-size:.84rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:1rem 1.6rem .95rem;
  border:2px solid var(--toner);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
}
.btn-solid{
  background:var(--toner); color:#f5efe2;
  box-shadow:5px 5px 0 var(--n-pink);
}
.btn-solid:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--n-pink); background:#000; }
.btn-solid:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--n-pink); }
.btn-ghost{ background:transparent; color:var(--toner); }
.btn-ghost:hover{ background:var(--toner); color:#f5efe2; }
.btn-ghost-dark{ background:transparent; color:var(--ditto); border-color:var(--ditto); }
.btn-ghost-dark:hover{ background:var(--ditto); color:#fff; }

/* section headings — offset print, pink plate slightly off register */
.kicker{
  font-family:var(--f-mono); font-size:.72rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:#cfa2ff; margin-bottom:.8rem;
}
.section-head{ max-width:1180px; margin:0 auto 2.8rem; position:relative; }
.section-head h2{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem, 7vw, 5.4rem); line-height:.92; letter-spacing:.005em;
  color:#efe7d6;
  text-shadow:.045em .03em 0 rgba(255,47,142,.55);
}
.section-scrawl{ margin-top:.8rem; transform:rotate(-1.6deg); font-size:1.7rem; opacity:.85; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem clamp(1rem, 4vw, 2.5rem);
  background:rgba(7,5,11,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(182,77,255,.22);
}
.wordmark{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--f-neon); font-size:clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing:.08em;
  text-decoration:none; white-space:nowrap;
}
.wm-dot{
  width:9px; height:9px; border-radius:50%; background:var(--n-pink);
  box-shadow:0 0 6px var(--n-pink), 0 0 14px var(--n-pink);
}
.wm-a{ color:var(--n-purple-c); text-shadow:0 0 4px var(--n-purple), 0 0 12px var(--n-purple); }
.wm-b{ color:var(--n-pink-c); text-shadow:0 0 4px var(--n-pink), 0 0 12px var(--n-pink); margin-left:.35em; }
.wordmark-sub{
  font-family:var(--f-mono); font-size:.58rem; font-weight:700;
  letter-spacing:.3em; color:#9d8bb0; margin-left:.6rem;
}
.topnav{ display:flex; gap:1rem; margin-left:auto; margin-right:1rem; align-items:center; }

/* illuminated console push-button */
.lamp-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.2em;
  text-decoration:none; color:#ffd9ea;
  padding:.55rem .95rem;
  background:linear-gradient(180deg, #25121d, #140910);
  border:1px solid rgba(255,47,142,.55); border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px -6px rgba(255,47,142,.8);
  transition:background .15s ease, box-shadow .15s ease, color .15s ease;
}
.lamp{
  width:10px; height:10px; border-radius:2px; background:var(--n-pink);
  box-shadow:0 0 6px var(--n-pink), 0 0 14px rgba(255,47,142,.8);
  animation:lamp 2.4s steps(1) infinite;
}
@keyframes lamp{ 0%,62%{opacity:1} 63%,100%{opacity:.25} }
.lamp-btn:hover{
  background:linear-gradient(180deg, #ff4a9f, #d8146f); color:#1a0310;
  box-shadow:0 0 22px rgba(255,47,142,.8), 0 0 50px rgba(255,47,142,.35);
}
.lamp-btn:hover .lamp{ background:#fff; animation:none; }

/* ============================================================
   HERO — the wall
   ============================================================ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 9vh, 7rem);
  background:var(--night);
}
.wall{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.wall-bricks{
  position:absolute; inset:0;
  background:var(--grain), var(--bricks);
  background-size:220px 220px, 240px 80px;
  -webkit-mask-image:radial-gradient(ellipse 70% 58% at 50% 22%, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.12) 75%, transparent 100%);
          mask-image:radial-gradient(ellipse 70% 58% at 50% 22%, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.12) 75%, transparent 100%);
}
/* the light the sign throws on the bricks */
.wall-light{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 42% 30% at 40% 17%, rgba(182,77,255,.34), transparent 70%),
    radial-gradient(ellipse 34% 26% at 62% 33%, rgba(255,47,142,.3), transparent 70%),
    radial-gradient(ellipse 80% 55% at 50% 25%, rgba(120,40,170,.18), transparent 75%);
  mix-blend-mode:screen;
  opacity:var(--glow, 1);
  transition:opacity .05s linear;
}
.hero.is-dark .wall-light{ opacity:0; }

/* torn old posters, barely lit */
.scrap{
  position:absolute; font-family:var(--f-display); text-transform:uppercase; line-height:.95;
  color:#15120f; padding:.6rem .8rem;
  background:var(--toner-specks), #cfcabd;
  opacity:.16; filter:url(#fx-torn);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.scrap-1{ left:-1.5rem; top:46%; font-size:1.6rem; transform:rotate(-7deg); width:13rem; }
.scrap-2{ right:-1rem; top:9%; font-size:2.2rem; transform:rotate(5deg); background:var(--toner-specks), #d1a19a; }
.scrap-3{ left:4%; bottom:5%; font-size:3rem; transform:rotate(3deg); opacity:.1; }

/* ============================================================
   THE NEON SIGN — PURPLE / MIND
   ============================================================ */
.neon-sign{
  position:relative; z-index:2;
  display:grid; justify-content:center; align-items:center;
  grid-template-columns:auto;
  margin:0 auto clamp(1.5rem, 4vh, 3rem);
  padding-top:clamp(.5rem, 3vh, 2rem);
  font-family:var(--f-neon); font-weight:400;
  font-size:clamp(4.1rem, 14.2vw, 13.2rem);
  line-height:.86; user-select:none;
  width:max-content; max-width:100%;
}
.neon-word{ position:relative; display:block; white-space:nowrap; letter-spacing:.045em; }
.neon-purple{ grid-row:1; grid-column:1; justify-self:start;
  --hue:var(--n-purple); --core:var(--n-purple-c); --glass:#2a1c38; --glass-hi:rgba(214,170,255,.13);
  --hue-a:rgba(182,77,255,.55); --hue-b:rgba(182,77,255,.3); }
.neon-pink{ grid-row:2; grid-column:1; justify-self:end; margin-top:.02em; margin-right:-.12em;
  --hue:var(--n-pink); --core:var(--n-pink-c); --glass:#35192a; --glass-hi:rgba(255,160,205,.13);
  --hue-a:rgba(255,47,142,.55); --hue-b:rgba(255,47,142,.3); }
.neon-studio{
  grid-row:2; grid-column:1; justify-self:start; align-self:center;
  font-family:var(--f-mono); font-weight:700; font-size:clamp(.62rem, 1.05vw, .9rem);
  letter-spacing:.55em; color:#b9a8c9; margin-left:.35em;
  text-shadow:0 0 12px rgba(182,77,255,.45);
}

/* each letter = a glass tube (unlit) with its lit gas on top */
.tube{
  position:relative; display:inline-block;
  color:var(--glass);
  -webkit-text-stroke:.012em var(--glass-hi);
  text-shadow:.04em .06em .03em rgba(0,0,0,.6);
}
.tube::after{
  content:attr(data-t);
  position:absolute; left:0; top:0;
  color:var(--core);
  -webkit-text-stroke:.016em var(--hue);
  text-shadow:
    0 0 .012em #fff,
    0 0 .035em var(--core),
    0 0 .08em var(--hue),
    0 0 .16em var(--hue),
    0 0 .32em var(--hue-a),
    0 0 .62em var(--hue-b);
  will-change:opacity;
  animation:ignite 1.5s both;
  animation-delay:calc(var(--i) * 120ms + 350ms);
}
/* glass standoff clip under each letter */
.tube::before{
  content:""; position:absolute; left:46%; bottom:.1em;
  width:.05em; height:.05em; border-radius:50%;
  background:rgba(255,255,255,.12); box-shadow:0 0 .015em rgba(255,255,255,.25);
}
.tube.is-off::after{ opacity:.05 !important; animation:none; }
.tube.is-dim::after{ opacity:.55 !important; animation:none; }

/* blacked-out jumper tube between letters (how real signs are wired) */
.neon-word::before{
  content:""; position:absolute; z-index:-1;
  left:.25em; right:.35em; top:.47em; height:.028em; border-radius:.02em;
  background:linear-gradient(180deg, #2b2330, #09070c);
  box-shadow:0 .01em .03em rgba(0,0,0,.8);
}

/* power-on sputter: discrete jumps, like gas catching */
@keyframes ignite{
  0%   { opacity:0; }
  10%  { opacity:.85; }
  12%  { opacity:.06; }
  21%  { opacity:1; }
  24%  { opacity:.15; }
  31%  { opacity:.8; }
  35%  { opacity:.3; }
  46%  { opacity:1; }
  100% { opacity:1; }
}
.tube::after{ animation-timing-function:steps(1, end); }

/* transformer + cable */
.neon-wire{
  position:absolute; right:-4%; top:-40vh; width:3px; height:calc(40vh + 1.1em);
  background:linear-gradient(90deg, #050406, #2a2530 45%, #050406);
  border-radius:2px; z-index:-1;
}
.neon-box{
  position:absolute; right:calc(-4% - .23em); top:.95em; z-index:0;
  width:.5em; height:.3em; border-radius:.02em;
  background:linear-gradient(180deg, #2b2830, #121015);
  box-shadow:inset 0 .01em 0 rgba(255,255,255,.12), 0 .03em .06em rgba(0,0,0,.8);
  display:grid; place-items:center;
}
.neon-box i{
  font-style:normal; font-family:var(--f-mono); font-weight:700; font-size:.045em;
  letter-spacing:.12em; color:#ffcc3d; background:#1b1400; padding:.15em .4em;
  border:1px solid #ffcc3d;
}

/* ============================================================
   HERO — the flyer + the side objects
   ============================================================ */
.hero-inner{
  position:relative; z-index:3;
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
}

.flyer{ position:relative; transform:rotate(-1.1deg); }
.tape-a{ top:-12px; left:12%; transform:rotate(-4deg); }
.tape-b{ top:-10px; right:10%; transform:rotate(3deg); width:110px; }
.flyer-paper{
  position:relative; color:var(--toner);
  padding:clamp(1.6rem, 3.6vw, 2.8rem) clamp(1.3rem, 3.4vw, 2.8rem) 0;
}
/* the paper itself, on its own layer so its edge can tear */
.flyer-paper::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    /* wheat-paste wrinkles */
    linear-gradient(96deg, transparent 21%, rgba(0,0,0,.05) 22%, rgba(255,255,255,.25) 23.2%, transparent 25%),
    linear-gradient(83deg, transparent 63%, rgba(0,0,0,.045) 64%, rgba(255,255,255,.22) 65.5%, transparent 67%),
    linear-gradient(178deg, transparent 38%, rgba(0,0,0,.04) 39%, rgba(255,255,255,.18) 40%, transparent 42%),
    /* copier drum streaks */
    repeating-linear-gradient(90deg, transparent 0 57px, rgba(0,0,0,.022) 57px 59px, transparent 59px 140px),
    radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(60,50,30,.16) 100%),
    var(--toner-specks),
    var(--fibres),
    var(--xerox);
  background-size:auto, auto, auto, auto, auto, 300px 300px, 400px 400px, auto;
  filter:url(#fx-torn-soft);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85), 0 0 80px -30px rgba(182,77,255,.45);
}
.flyer-kicker{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.1rem;
  border-bottom:2px solid var(--toner); padding-bottom:.6rem;
}
.flyer-kicker b{ font-weight:400; color:var(--n-pink); }
.flyer-title{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem, 5.6vw, 5rem); line-height:.9; letter-spacing:.005em;
  color:var(--toner);
  filter:url(#fx-type);
}
.flyer-title > span{ display:block; }
.ft-1{ font-size:1.12em; }
.ft-2{ display:flex !important; align-items:baseline; flex-wrap:wrap; gap:.18em; }
/* ransom-note cut letters */
.ransom{ display:inline-flex; gap:.04em; font-size:.8em; transform:translateY(-.04em); }
.ransom i{
  font-style:normal; display:inline-block; line-height:1;
  padding:.06em .1em .02em; background:var(--tile, #f3efe4); color:var(--ink, #111);
  box-shadow:1px 2px 2px rgba(0,0,0,.35);
  transform:rotate(var(--r, -2deg)) translateY(var(--y, 0));
  clip-path:polygon(3% 5%, 97% 0, 100% 93%, 0 100%);
}
.ransom i:nth-child(1){ --tile:#141210; --ink:#f0e9dc; --r:-4deg; font-family:var(--f-display); }
.ransom i:nth-child(2){ --tile:#ffe24a; --r:3deg; --y:.05em; font-family:Georgia, "Times New Roman", serif; font-weight:700; }
.ransom i:nth-child(3){ --tile:#f0ebe0; --r:-2deg; font-family:var(--f-type); }
.ransom i:nth-child(4){ --tile:var(--n-pink); --ink:#fff; --r:5deg; --y:-.03em; font-family:var(--f-display); }
.ransom i:nth-child(5){ --tile:#e6e1d4; --r:-3deg; font-family:Georgia, serif; font-style:italic; font-weight:700; }
.ransom i:nth-child(6){ --tile:#7a3fd1; --ink:#fff; --r:2deg; --y:.04em; font-family:var(--f-display); }
.ransom i:nth-child(7){ background:none; box-shadow:none; clip-path:none; font-family:var(--f-display); padding:0; }
.ransom i:nth-child(8){ --tile:#f5f1e6; --r:-5deg; font-family:"Courier New", monospace; font-weight:700; }

/* fluorescent highlighter swipe */
.hilite{
  position:relative; display:inline-block; padding:0 .12em;
  background:
    linear-gradient(100deg, transparent 0 1%, rgba(255,102,184,.9) 2% 97%, transparent 98%) 0 58% / 100% 62% no-repeat;
  mix-blend-mode:multiply;
}
.flyer-note{ margin:.9rem 0 1rem .2rem; transform:rotate(-2.5deg); font-size:1.45rem; }
.flyer-sub{
  max-width:36rem; font-size:.95rem; line-height:1.75; color:#1b1916;
  border-left:3px solid var(--toner); padding-left:1rem;
}
.flyer-sub strong{ background:rgba(0,0,0,.08); padding:0 .15em; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem 1.2rem; margin-top:1.7rem; }
.flyer-fine{ margin-top:1.3rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }

/* tear-off tabs at the bottom of the flyer */
.tabs{
  display:grid; grid-template-columns:repeat(8, 1fr);
  margin:1.6rem calc(-1 * clamp(1.3rem, 3.4vw, 2.8rem)) 0;
  border-top:1.5px dashed rgba(0,0,0,.45);
}
.tabs span{
  height:112px; display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--f-mono); font-weight:700; font-size:.6rem; letter-spacing:.14em;
  border-left:1.5px dashed rgba(0,0,0,.4);
  background:var(--toner-specks), var(--xerox);
  background-size:300px 300px, auto;
}
.tabs span:last-child{ border-left:none; }
.tabs span.gone{ visibility:hidden; }
.tabs span:nth-child(4){ transform:rotate(180deg) translateX(-2px) skewY(2deg); }

/* hero side — pasted print + tape-box label */
.hero-side{ display:grid; gap:2.2rem; position:relative; padding-top:1rem; }

/* ============================================================
   PHOTO SLOTS — prints, halftone placeholders
   ============================================================ */
.photo-slot{ position:relative; margin:0; }
.photo-inner{ position:relative; overflow:hidden; background:#1a1720; }
.photo-slot img{
  width:100%; aspect-ratio:var(--ar, 4 / 3); object-fit:cover;
  filter:grayscale(1) contrast(1.25) brightness(.95);
}
/* halftone screen over real photos too */
.photo-inner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle, rgba(0,0,0,.28) 32%, transparent 36%) 0 0 / 4px 4px;
  mix-blend-mode:multiply; opacity:.55;
}
.photo-slot .ph{ display:none; }
.photo-slot.is-empty img{ display:none; }
.photo-slot.is-empty .ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; aspect-ratio:var(--ar, 4 / 3); padding:1rem; text-align:center;
  color:#f1ece1;
  font-family:var(--f-mono); font-size:.8rem; font-weight:700; letter-spacing:.24em; line-height:1.9;
  background:
    radial-gradient(circle, #0c0b0e 38%, transparent 42%) 0 0 / 6px 6px,
    radial-gradient(ellipse 60% 70% at 38% 42%, #8d8794, #3b3741 60%, #121015);
  text-shadow:0 1px 0 #000, 0 0 12px #000;
}
.ph-tag{
  position:absolute; bottom:.6rem; left:.6rem; z-index:2;
  background:var(--n-pink); color:#1a0410; text-shadow:none;
  font-size:.58rem; letter-spacing:.24em; padding:.22rem .5rem; font-weight:700;
}
.ph-path{ font-size:.62rem; letter-spacing:.08em; opacity:.8; font-style:italic; text-transform:none; }

/* a glossy print, taped to the wall */
.print-photo{
  background:#f2efe7; padding:10px 10px 12px;
  box-shadow:0 26px 50px -18px rgba(0,0,0,.9), 0 0 60px -25px rgba(255,47,142,.5);
  transform:rotate(1.6deg);
}
.print-photo .photo-inner::before{  /* gloss */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,.14), transparent 35%, transparent 70%, rgba(255,255,255,.06));
}
.sticker{
  position:absolute; bottom:-14px; left:-14px; z-index:9;
  font-family:var(--f-mono); font-weight:700; font-size:.66rem; letter-spacing:.18em;
  background:var(--n-pink); color:#1a0410; padding:.5rem .75rem;
  transform:rotate(-4deg);
  box-shadow:0 4px 10px rgba(0,0,0,.5);
  clip-path:polygon(0 3%, 100% 0, 99% 100%, 1% 96%);
}

/* 2-inch tape box label */
.tapebox{
  position:relative; color:var(--ribbon);
  background:
    var(--fibres),
    linear-gradient(180deg, #f3ecd9, #e4d9bd);
  background-size:400px 400px, auto;
  border-radius:3px;
  padding:0 0 .9rem;
  transform:rotate(-1.4deg);
  box-shadow:0 22px 44px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.12), inset 0 0 40px rgba(120,90,40,.18);
}
.tapebox-head{
  display:flex; flex-direction:column; gap:.2rem;
  background:linear-gradient(180deg, #b3161b, #8e1014);
  color:#fff2e6; padding:.55rem .9rem;
  font-family:var(--f-display); letter-spacing:.14em; font-size:.8rem;
  border-bottom:4px solid #141210;
  border-radius:3px 3px 0 0;
}
.tb-brand{ font-size:1.05rem; letter-spacing:.2em; }
.tb-model{ font-family:var(--f-mono); font-weight:700; font-size:.6rem; letter-spacing:.16em; opacity:.85; }
.tapebox-title{
  font-family:var(--f-mono); font-weight:700; font-size:.66rem; letter-spacing:.3em;
  margin:.8rem .9rem .3rem; color:#6b5f4d;
}
.spec-rows{ margin:0 .9rem; }
.spec-rows div{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.34rem 0; border-bottom:1px solid rgba(29,23,16,.2);
}
.spec-rows dt{ font-family:var(--f-mono); font-weight:700; font-size:.6rem; letter-spacing:.22em; color:#7a6d58; }
.spec-rows dd{ text-align:right; font-size:.86rem; letter-spacing:.04em; }
.spec-flag{ display:block; font-size:1.25rem; margin-top:-.15rem; transform:rotate(-3deg); }
.spec-foot{ margin:.7rem .9rem 0; font-family:var(--f-mono); font-size:.62rem; font-weight:700; letter-spacing:.16em; color:#6b5f4d; }
.live-dot{
  display:inline-block; width:8px; height:8px; margin-right:.45rem; vertical-align:middle;
  background:#e51d4e; border-radius:50%;
  box-shadow:0 0 6px #ff2f6a;
  animation:lamp 1.6s steps(1) infinite;
}

/* ============================================================
   SCRIBBLE STRIP — masking tape across the channel strips
   ============================================================ */
.scribble{
  position:relative; overflow:hidden;
  padding:1.3rem 0 1.2rem;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #221c24, #121014 40%, #0b090d);
  border-top:1px solid #2f2833; border-bottom:1px solid #000;
  box-shadow:inset 0 10px 30px -10px rgba(0,0,0,.9);
}
.scribble-tape{
  list-style:none; position:relative;
  width:calc(100% - clamp(1.2rem, 4vw, 3rem)); min-width:1060px; margin:0 auto;
  display:grid; grid-template-columns:repeat(16, 1fr);
  background:
    linear-gradient(180deg, rgba(255,255,250,.3), rgba(255,255,250,0) 35%, rgba(0,0,0,.06)),
    var(--fibres),
    #dccfae;
  background-size:auto, 300px 300px, auto;
  transform:rotate(-.35deg);
  box-shadow:0 2px 4px rgba(0,0,0,.6);
  clip-path:polygon(0 8%, .5% 0, 99.4% 4%, 100% 20%, 99.6% 50%, 100% 88%, 99.3% 100%, .4% 96%, 0 70%, .3% 40%);
}
.scribble-tape li{
  position:relative; text-align:center; padding:.35rem .2rem .45rem;
  border-left:1px solid rgba(60,45,20,.18);
}
.scribble-tape li:first-child{ border-left:none; }
.scribble-tape b{
  display:block; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.1em; color:#8b7c5c;
}
.scribble-tape span{
  display:block; font-family:var(--f-marker); font-size:1rem; line-height:1.15;
  color:#141212; filter:url(#fx-marker);
  transform:rotate(calc((var(--n, 0) - 1) * 1.2deg));
}
.scribble-tape li:nth-child(3n) span{ --n:2; }
.scribble-tape li:nth-child(3n+1) span{ --n:0; }
.scribble-tape li:nth-child(4n) span{ --n:1.5; }
.scribble-tape li.you span{ color:#e8157a; font-size:1.06rem; }
/* knobs under the strip */
.scribble::after{
  content:""; display:block; height:26px; margin:.9rem auto 0;
  width:calc(100% - clamp(1.2rem, 4vw, 3rem)); min-width:1060px;
  background:
    radial-gradient(circle at 50% 50%, #3a3440 0 6px, #0d0b0f 7px 10px, transparent 11px) 0 0 / calc(100% / 16) 26px repeat-x;
  opacity:.85;
}

/* ============================================================
   PAPER — the base for the log, index card, work order
   ============================================================ */
.sheet-wrap{ max-width:1020px; margin:0 auto; position:relative; }
.paper{ position:relative; isolation:isolate; }
.paper-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    /* fold crease, a third down */
    linear-gradient(180deg, transparent calc(33% - 2px), rgba(0,0,0,.06) 33%, rgba(255,255,255,.4) calc(33% + 1px), rgba(0,0,0,.02) calc(33% + 3px), transparent calc(33% + 6px)),
    /* foxing */
    radial-gradient(circle at 12% 88%, rgba(150,100,40,.16) 0 .6%, transparent 2.2%),
    radial-gradient(circle at 86% 14%, rgba(150,100,40,.12) 0 .4%, transparent 1.6%),
    radial-gradient(circle at 71% 63%, rgba(150,100,40,.1) 0 .3%, transparent 1.2%),
    /* age at the edges */
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(135,95,35,.22) 100%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 30%),
    var(--fibres),
    var(--paper-color, var(--paper));
  background-size:auto, auto, auto, auto, auto, auto, 400px 400px, auto;
  filter:url(#fx-torn-soft);
  box-shadow:0 40px 70px -28px rgba(0,0,0,.85), 0 2px 3px rgba(0,0,0,.3);
}
.paper-pink{ --paper-color:var(--paper-pink); }
.paper-card{ --paper-color:var(--card); }

/* ============================================================
   ARCHIVE — ditto-printed tape log
   ============================================================ */
.sheet-section{
  position:relative;
  padding:clamp(4rem, 10vh, 7rem) clamp(1rem, 4vw, 2.5rem) clamp(4.5rem, 11vh, 7.5rem);
  background:
    radial-gradient(50% 40% at 85% 10%, rgba(182,77,255,.1), transparent 60%),
    radial-gradient(45% 40% at 8% 90%, rgba(232,56,12,.08), transparent 65%),
    var(--night-2);
}
.sheet-section::before{
  content:""; position:absolute; inset:0;
  background:url("images/red-backer.jpg") center/cover;
  opacity:.1; pointer-events:none; mix-blend-mode:screen;
}

.sheet{
  color:var(--ribbon);
  padding:clamp(1.8rem, 4vw, 3rem) clamp(1.3rem, 4.5vw, 3.2rem) clamp(2rem, 4vw, 2.8rem) clamp(5.2rem, 10vw, 7rem);
  transform:rotate(-.6deg);
}
.holes{
  position:absolute; top:0; bottom:0; left:12px; width:36px; z-index:2;
  background:
    radial-gradient(circle at 50% 14%, #0a0710 0 7px, rgba(0,0,0,.35) 7.5px 8.5px, transparent 9px),
    radial-gradient(circle at 50% 50%, #0a0710 0 7px, rgba(0,0,0,.35) 7.5px 8.5px, transparent 9px),
    radial-gradient(circle at 50% 86%, #0a0710 0 7px, rgba(0,0,0,.35) 7.5px 8.5px, transparent 9px);
}
/* coffee ring */
.coffee{
  position:absolute; right:6%; bottom:9%; width:190px; height:190px; z-index:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='3' seed='7'/><feDisplacementMap in='SourceGraphic' scale='9'/></filter><g filter='url(%23r)' fill='none'><circle cx='100' cy='100' r='78' stroke='%23874d1a' stroke-width='4' stroke-opacity='0.55'/><circle cx='100' cy='100' r='75' stroke='%23874d1a' stroke-width='9' stroke-opacity='0.12'/><path d='M40 60 A78 78 0 0 1 150 40' stroke='%236b3a10' stroke-width='2' stroke-opacity='0.45'/></g></svg>") center/contain no-repeat;
  mix-blend-mode:multiply; opacity:.55; transform:rotate(20deg);
  pointer-events:none;
}
.sheet > .stamp{ top:clamp(1.4rem, 3vw, 2.2rem); right:clamp(1rem, 5vw, 3rem); transform:rotate(-9deg); }

/* printed form header */
.form-head{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap;
  border-bottom:3px solid currentColor; padding-bottom:.7rem; margin-bottom:1.3rem;
}
.fh-studio{ font-family:var(--f-mono); font-weight:700; font-size:.66rem; letter-spacing:.42em; }
.fh-title{
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem, 3.6vw, 2.5rem);
  letter-spacing:.04em; line-height:1; text-transform:uppercase;
}
.fh-meta{ display:flex; gap:1.2rem; font-family:var(--f-mono); font-weight:700; font-size:.6rem; letter-spacing:.2em; margin-right:clamp(7rem, 14vw, 10rem); }
.fh-meta b{ font-size:.95rem; letter-spacing:0; padding:0 .15em; }
.fh-no b{ color:var(--pen-red); font-family:var(--f-type); font-weight:400; }

/* metadata boxes */
.meta-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border:1.5px solid rgba(91,63,168,.6); margin-bottom:1.6rem;
}
.meta-grid > div{
  display:flex; flex-direction:column; gap:.1rem; padding:.5rem .8rem .55rem;
  border:.75px solid rgba(91,63,168,.45);
}
.meta-grid dt{ font-family:var(--f-mono); font-size:.56rem; font-weight:700; letter-spacing:.24em; }
.meta-grid dd{ font-size:1rem; }
.meta-grid dd .hw{ font-size:1.35rem; margin-left:.3rem; }

/* the log — typed entries on printed rules */
.sheet-body{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.62fr .88fr; gap:1.6rem 2.6rem; align-items:start;
}
.log{ list-style:none; border-top:1.5px solid rgba(91,63,168,.55); }
.log-row{
  position:relative;
  display:grid; grid-template-columns:2rem 7.4rem 1fr; gap:.2rem .9rem; align-items:baseline;
  padding:.75rem 0 .8rem;
  border-bottom:1px solid rgba(91,63,168,.38);
}
.log-no{ font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.06em; }
.log-date{ font-family:var(--f-eng); font-size:1.75rem; line-height:1; letter-spacing:.02em; }
.log-text{ font-size:.93rem; line-height:1.62; }
.sheet .typed, .xref .typed{ font-family:var(--f-mono); }
.meta-grid dd.typed, .meta-grid dd .typed{ font-size:1.02rem; }
.log-margin{
  grid-column:3; justify-self:end; font-size:1.45rem; margin-top:-.2rem; transform:rotate(-3deg);
}
.log-now .log-text{
  background:linear-gradient(100deg, transparent 0 .5%, rgba(244,255,90,.75) 1.5% 98%, transparent 99%);
  mix-blend-mode:multiply; padding:0 .2rem;
}

/* red felt-tip circle around a date */
.mark-circle{ position:relative; display:inline-block; padding:0 .2em; }
.mark-circle::after{
  content:""; position:absolute; inset:-.35em -.45em -.3em -.4em;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'><path d='M160 9 C 120 1, 40 2, 14 20 C -4 34, 20 55, 95 55 C 165 55, 199 42, 190 24 C 183 10, 150 4, 118 6' fill='none' stroke='%23b8231a' stroke-width='3.2' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  filter:url(#fx-marker); pointer-events:none;
}

.sheet-side{ display:grid; gap:1.8rem; padding-top:.2rem; }

/* polaroid SX-70 */
.polaroid{
  width:88%; justify-self:center;
  background:linear-gradient(180deg, #f6f4ee, #ebe7dc);
  padding:6% 6% 0;
  box-shadow:0 20px 34px -14px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.25);
  transform:rotate(3deg);
}
.polaroid .photo-inner{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.tape-polaroid{ top:-13px; left:50%; transform:translateX(-50%) rotate(3deg); width:100px; height:26px; }
.polaroid-cap{ text-align:center; padding:.8rem 0 1.1rem; font-size:1.05rem; }
.polaroid-cap .tbc{ font-family:var(--f-pen); font-size:1.2rem; border:0; opacity:.6; }

/* index card, stapled */
.xref{ padding:1.1rem 1.1rem 1rem; transform:rotate(.9deg); }
.xref .paper-bg{
  background:
    linear-gradient(180deg, transparent 3.5rem, rgba(200,40,40,.55) 3.5rem, rgba(200,40,40,.55) calc(3.5rem + 1.5px), transparent calc(3.5rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 calc(1.45rem - 1px), rgba(70,120,190,.3) calc(1.45rem - 1px) 1.45rem) 0 3.5rem / 100% calc(100% - 3.5rem) no-repeat,
    var(--fibres),
    var(--card);
  background-size:auto, 100% calc(100% - 3.5rem), 400px 400px, auto;
  filter:none;
  box-shadow:0 18px 30px -14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.25);
}
.staple{
  position:absolute; top:10px; left:18px; width:34px; height:5px; z-index:3;
  background:linear-gradient(180deg, #e8e8ea, #8d8f94 60%, #5d5f64);
  border-radius:1px; transform:rotate(-14deg);
  box-shadow:0 1px 1px rgba(0,0,0,.45);
}
.xref-head{ font-size:.68rem; letter-spacing:.12em; line-height:1.35; margin:0 0 1.05rem 2.6rem; min-height:2.2rem; }
.xref ul{ list-style:none; }
.xref li{ font-size:.76rem; line-height:1.45rem; padding-left:1rem; position:relative; }
.xref li::before{ content:"—"; position:absolute; left:0; }
.xref b{ font-weight:400; text-decoration:underline; text-underline-offset:2px; }
.xref .hw{ font-size:1.3rem; line-height:1; display:inline-block; transform:rotate(-3deg); }
/* settled item: typed strike-over + pen note */
.resolved .struck .ch{ background:linear-gradient(transparent 50%, rgba(28,25,22,.85) 50% 58%, transparent 58%); }
.resolved .struck{ opacity:.7; }
.resolved .hw{ display:block; margin:.1rem 0 .2rem; }

.scrawl-tag{
  position:absolute; right:clamp(1rem, 6vw, 3rem); bottom:3.4rem; z-index:2;
  font-size:1.8rem; color:var(--pen-purple); transform:rotate(-6deg); opacity:.85;
}
.sources-strip{
  position:relative; z-index:1;
  margin-top:1.8rem; padding-top:.9rem;
  border-top:1.5px dashed rgba(91,63,168,.55);
  font-size:.66rem; letter-spacing:.08em; line-height:1.9; text-transform:uppercase;
  max-width:78%;
}

/* ============================================================
   HOW IT WORKS — neon numbers on the dark
   ============================================================ */
.how-section{
  position:relative; overflow:hidden;
  padding:clamp(4rem, 10vh, 7rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 10vh, 6.5rem);
  background:
    radial-gradient(40% 35% at 15% 30%, rgba(182,77,255,.09), transparent 70%),
    radial-gradient(40% 35% at 85% 30%, rgba(255,194,61,.06), transparent 70%),
    var(--night);
}
.how-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--grain), var(--springs);
  background-size:220px 220px, 96px 96px;
  opacity:.6;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
}
.how-section > *{ position:relative; }

.path{
  list-style:none; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem 2.4rem;
}
/* patch cable running behind the numbers */
.path::before{
  content:""; position:absolute; top:5.1rem; left:0; right:3%; height:5px; border-radius:3px; z-index:-1;
  background:linear-gradient(180deg, #3b3342, #0c0a0e);
  box-shadow:0 3px 6px rgba(0,0,0,.6);
}
.path-step{ position:relative; }
.path-num{
  display:inline-block; position:relative;
  font-family:var(--f-neon); font-size:4.4rem; line-height:1; letter-spacing:.04em;
  padding:0 .1em 0 0;
  margin-bottom:1rem;
  color:var(--c-core);
  -webkit-text-stroke:.016em var(--c);
  text-shadow:
    0 0 .012em #fff,
    0 0 .04em var(--c-core),
    0 0 .1em var(--c),
    0 0 .22em var(--c),
    0 0 .5em color-mix(in srgb, var(--c) 45%, transparent);
}
.js .path-step:not(.lit) .path-num{
  color:#241b2b; -webkit-text-stroke:.012em rgba(255,255,255,.08);
  text-shadow:.04em .06em .03em rgba(0,0,0,.6);
}
.js .path-step.lit .path-num{ animation:ignite-num 1.1s steps(1, end) both; }
@keyframes ignite-num{
  0%{opacity:.2} 12%{opacity:1} 16%{opacity:.25} 30%{opacity:1} 34%{opacity:.4} 50%,100%{opacity:1}
}
.path-step h3{ display:block; width:max-content; max-width:100%; margin-bottom:.9rem; font-size:.74rem; }
.path-step:nth-child(2) h3{ --dymo-r:1.2deg; }
.path-step:nth-child(3) h3{ --dymo-r:-.4deg; --dymo-bg:#b3161b; }
.path-step:nth-child(4) h3{ --dymo-r:1.8deg; }
.path-step p{ font-size:.85rem; line-height:1.75; color:#c4b9d2; max-width:17rem; }
.path-step .tbc{ color:#a693c9; }

.how-photo{ max-width:840px; margin:3.6rem auto 0; transform:rotate(-.8deg); }
.how-fineprint{
  max-width:840px; margin:1.8rem auto 0; text-align:center;
  font-size:.72rem; letter-spacing:.12em; color:#9d90ad;
}

/* ============================================================
   BOOKING — red wall + pink carbon work order
   ============================================================ */
.book-section{
  position:relative;
  padding:clamp(4rem, 10vh, 6.5rem) clamp(1rem, 4vw, 2.5rem) clamp(4.5rem, 11vh, 7rem);
  background:
    radial-gradient(55% 45% at 15% 5%, rgba(182,77,255,.12), transparent 60%),
    radial-gradient(45% 40% at 90% 60%, rgba(255,47,142,.09), transparent 65%),
    var(--night-2);
}
.book-head{ max-width:1020px; margin:0 auto 3rem; }
.book-band{
  position:relative; overflow:hidden;
  background:
    linear-gradient(rgba(150,10,10,.25), rgba(150,10,10,.25)),
    url("images/red-backer.jpg") 70% center/cover;
  color:#fbeee0;
  padding:clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.3rem, 3.5vw, 2.4rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  transform:rotate(-.7deg);
  box-shadow:0 30px 60px -22px rgba(200,20,20,.55);
}
.kicker-band{ color:#ffd8cf; margin-bottom:.4rem; }
.book-title{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.2rem, 6vw, 4.6rem); line-height:.95;
  text-shadow:.05em .04em 0 rgba(0,0,0,.55);
}
/* the red "recording" lamp housing */
.rec-light{
  flex:none; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-weight:700; font-size:.78rem; letter-spacing:.3em;
  color:#ffe9e4; background:#140a0a; padding:.55rem .8rem .55rem .65rem; border-radius:4px;
  border:2px solid #2b1d1d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.rec-light i{
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffb3a8, #ff2a1a 55%, #8f0b04);
  box-shadow:0 0 8px #ff2a1a, 0 0 22px rgba(255,42,26,.7);
  animation:lamp 1.8s steps(1) infinite;
}

.book-sheet{ padding-left:clamp(1.3rem, 4.5vw, 3.2rem); transform:rotate(.4deg); }
.book-sheet .form-head{ margin-right:0; }
.book-sheet .fh-meta{ margin-right:0; }

/* Post-it (they turned up in shops in 1980) */
.postit{
  position:absolute; z-index:9; top:-2.2rem; right:clamp(.5rem, 4vw, 2.5rem);
  width:11.5rem; padding:1.1rem .9rem 1rem;
  font-size:1.45rem; line-height:1.05;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), transparent 18%),
    var(--fibres), var(--postit);
  background-size:auto, 300px 300px, auto;
  box-shadow:0 14px 18px -10px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.15);
  transform:rotate(4deg);
  clip-path:polygon(0 0, 100% 0, 100% 97%, 96% 100%, 0 100%);
}
.postit em{ display:block; margin-top:.4rem; font-style:normal; color:var(--pen-red); font-size:1.3rem; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.2rem; position:relative; z-index:1; }
.field{ display:flex; flex-direction:column; gap:.25rem; }
.field-wide{ grid-column:1 / -1; }
.field label{ font-family:var(--f-mono); font-size:.62rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.req{ color:var(--pen-red); }
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,.18); border:0; border-radius:0;
  border-bottom:1.5px solid rgba(91,63,168,.75);
  font-family:var(--f-type); font-size:1.02rem; color:var(--ribbon);
  padding:.45rem .35rem .35rem;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(28,25,22,.38); font-style:normal; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; background:rgba(255,255,255,.4); border-bottom-color:var(--n-pink);
  box-shadow:0 8px 10px -8px rgba(255,47,142,.6);
}
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235b3fa8' stroke-width='2'/></svg>");
  background-repeat:no-repeat; background-position:right .4rem center;
}
.field textarea{
  resize:vertical; line-height:2rem; min-height:8rem; padding-top:.1rem;
  background:repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), rgba(91,63,168,.35) calc(2rem - 1px) 2rem);
  border-bottom:none;
}
.form-foot{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:2rem;
  padding-top:1.4rem; border-top:3px solid rgba(91,63,168,.7);
}
.form-fineprint{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#5a4c4c; }

.form-confirmed{ position:relative; z-index:1; text-align:center; padding:2.5rem 1rem 1.5rem; }
.form-confirmed .stamp{ position:relative; display:inline-block; transform:rotate(-6deg); margin-bottom:1.8rem; font-size:1.5rem; }
.mono-print{ font-size:.86rem; letter-spacing:.08em; line-height:2; margin-bottom:1.6rem; text-transform:uppercase; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;
  background:var(--night);
  border-top:1px solid #1d1624;
  padding:clamp(3rem, 8vh, 4.5rem) clamp(1rem, 4vw, 2.5rem) 2.2rem;
  text-align:center; overflow:hidden;
}
/* studio "IN SESSION" warning light */
.onair{
  display:inline-block; margin-bottom:2.6rem;
  padding:7px; border-radius:6px;
  background:linear-gradient(180deg, #2c2730, #121015);
  box-shadow:0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.onair span{
  display:block; padding:.6rem 1.5rem;
  font-family:var(--f-display); font-size:1.3rem; letter-spacing:.28em;
  color:#fff3ee; border-radius:3px;
  background:radial-gradient(ellipse at 50% 40%, #ff5a45, #d5170c 60%, #7c0802);
  text-shadow:0 0 6px rgba(255,220,210,.9), 0 0 18px rgba(255,90,60,.8);
  box-shadow:0 0 24px rgba(255,40,20,.6), 0 0 70px rgba(255,40,20,.35), inset 0 0 12px rgba(0,0,0,.4);
}
.footer-grid{
  max-width:920px; margin:0 auto 2.6rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem;
  text-align:left; font-size:.8rem; letter-spacing:.06em;
}
.lbl-foot{ font-size:.62rem; font-weight:700; letter-spacing:.3em; color:#ff7ab8; margin-bottom:.7rem; }
.footer-line{ margin-bottom:.35rem; color:#cfc5d8; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:.8rem; }
.footer-fineprint{
  font-size:.66rem; letter-spacing:.1em; line-height:2; color:#857a92;
  border-top:1px solid rgba(240,231,208,.1); padding-top:1.4rem; max-width:920px; margin:0 auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-side{ grid-template-columns:1fr 1fr; align-items:start; }
  .path{ grid-template-columns:1fr 1fr; gap:2.6rem 1.8rem; }
  .path::before{ display:none; }
  .path-step p{ max-width:none; }
  .sheet-body{ grid-template-columns:1fr; }
  .sheet-side{ grid-template-columns:1fr 1fr; align-items:start; }
  .polaroid{ width:92%; }
  .sources-strip{ max-width:none; }
}
@media (max-width: 760px){
  .topnav{ display:none; }
  .wordmark-sub{ display:none; }
  .lamp-btn{ font-size:.64rem; letter-spacing:.14em; padding:.5rem .7rem; }

  .neon-sign{ font-size:clamp(3.4rem, 21vw, 7rem); }
  .neon-studio{ font-size:.55rem; letter-spacing:.4em; }
  .neon-box, .neon-wire{ display:none; }
  .scrap{ display:none; }

  .flyer{ transform:rotate(-.6deg); }
  .flyer-title{ font-size:clamp(2.4rem, 13vw, 3.6rem); }
  .ransom{ font-size:.72em; }
  .tabs{ grid-template-columns:repeat(5, 1fr); }
  .tabs span:nth-child(n+6){ display:none; }
  .tabs span:nth-child(5){ border-left:1.5px dashed rgba(0,0,0,.4); }
  .hero-side{ grid-template-columns:1fr; }
  .print-photo{ transform:rotate(1deg); }

  .sheet{ padding:1.6rem 1.1rem 2rem 3.1rem; transform:none; }
  .holes{ left:4px; width:26px;
    background:
      radial-gradient(circle at 50% 10%, #0a0710 0 5px, rgba(0,0,0,.35) 5.5px 6.5px, transparent 7px),
      radial-gradient(circle at 50% 50%, #0a0710 0 5px, rgba(0,0,0,.35) 5.5px 6.5px, transparent 7px),
      radial-gradient(circle at 50% 90%, #0a0710 0 5px, rgba(0,0,0,.35) 5.5px 6.5px, transparent 7px);
  }
  .sheet > .stamp{ top:auto; bottom:5.5rem; right:1rem; font-size:.8rem; }
  .fh-meta{ margin-right:0; gap:.8rem; flex-wrap:wrap; }
  .meta-grid{ grid-template-columns:1fr 1fr; }
  .log-row{ grid-template-columns:1.8rem 1fr; }
  .log-date{ grid-column:2; }
  .log-text{ grid-column:2; }
  .log-margin{ grid-column:2; }
  .sheet-side{ grid-template-columns:1fr; }
  .polaroid{ width:min(270px, 86%); }
  .coffee{ width:130px; height:130px; right:2%; bottom:30%; }
  .scrawl-tag{ display:none; }

  .path{ grid-template-columns:1fr; }
  .path-num{ font-size:3.4rem; }

  .book-band{ flex-direction:row; }
  .book-sheet{ padding:3.4rem 1.1rem 2rem; transform:none; }
  .postit{ top:-2.6rem; right:.4rem; width:9.8rem; font-size:1.25rem; padding:.8rem .7rem; }
  .form-grid{ grid-template-columns:1fr; }

  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .footer-nav{ justify-content:center; }
}
@media (max-width: 420px){
  .meta-grid{ grid-template-columns:1fr; }
  .rec-light{ font-size:.62rem; letter-spacing:.2em; }
}

/* ============================================================
   REDUCED MOTION — the sign is simply on
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   1980 DETAILS — pinholes, pin badge, spray paint
   ============================================================ */
/* flyer pinned to the wall, club-flyer style */
.pin{
  position:absolute; z-index:9; top:14px; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0 12%, #ff4f9e 30%, #a0105a 75%);
  box-shadow:2px 3px 3px rgba(0,0,0,.45);
}
.pin-l{ left:18px; }
.pin-r{ right:18px; top:18px; background:radial-gradient(circle at 35% 30%, #fff 0 12%, #bfa2ff 30%, #4b1f9a 75%); }

/* pinback button */
.badge{
  position:absolute; z-index:10; right:-26px; top:34%;
  width:88px; height:88px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:700; font-size:.54rem; letter-spacing:.16em; color:#fff;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 32%),
    radial-gradient(circle, #111 0 58%, var(--n-pink) 59% 72%, #111 73%);
  box-shadow:0 8px 14px rgba(0,0,0,.55), inset 0 -3px 6px rgba(0,0,0,.5);
  transform:rotate(14deg);
}
.badge b{ font-family:var(--f-display); font-weight:400; font-size:1.9rem; line-height:.9; letter-spacing:0; color:#ffd1e6; }

/* spray paint on the wall — like the track list on the back of Dirty Mind */
.spray{
  position:relative; display:inline-block;
  font-family:var(--f-marker) !important; text-transform:none !important;
  font-size:clamp(2.6rem, 7.4vw, 5.6rem) !important; line-height:1.05 !important;
  color:#ff5aa8 !important;
  text-shadow:0 0 .06em rgba(255,90,168,.9), 0 0 .18em rgba(255,47,142,.45) !important;
  filter:url(#fx-marker) blur(.4px);
  transform:rotate(-2deg);
}
.spray::after{   /* drips */
  content:""; position:absolute; left:6%; right:10%; top:78%; height:.75em; pointer-events:none;
  background:
    linear-gradient(#ff5aa8, rgba(255,90,168,0)) 4% 0 / 3px 62% no-repeat,
    linear-gradient(#ff5aa8, rgba(255,90,168,0)) 23% 0 / 2px 38% no-repeat,
    linear-gradient(#ff5aa8, rgba(255,90,168,0)) 47% 0 / 3px 80% no-repeat,
    linear-gradient(#ff5aa8, rgba(255,90,168,0)) 71% 0 / 2px 44% no-repeat,
    linear-gradient(#ff5aa8, rgba(255,90,168,0)) 92% 0 / 3px 58% no-repeat;
  opacity:.85;
}
@media (max-width: 760px){
  .badge{ width:70px; height:70px; right:-6px; top:190px; font-size:.46rem; }
  .badge b{ font-size:1.5rem; }
}