/* ============================================================
   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-dymo:   "Fredoka", "Nunito", "Arial Rounded MT Bold", sans-serif;   /* the embosser wheel: rounded bold caps */
  --f-eng:    "Just Another Hand", "Reenie Beanie", cursive;   /* engineer caps on a track sheet */


  /* pre-rendered textures (rasterised once, then just tiled — cheap in every
     browser, unlike live SVG filters which Safari/Firefox recompute on scroll) */
  --m-wear:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.4 0 0 0 2.25'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --m-ink:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.6 0 0 0 1.75'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --m-marker:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.2 0 0 0 2.3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --m-ditto:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.4' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.3 0 0 0 1.45'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --edge-t:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='10'><path d='M0 10 L0 1.54 L3 1.59 L6 2.22 L9 1.72 L12 1.25 L15 2.32 L18 3.30 L21 2.27 L24 1.12 L27 0.91 L30 1.12 L33 1.15 L36 2.32 L39 4.13 L42 2.85 L45 0.78 L48 0.52 L51 0.89 L54 1.36 L57 1.53 L60 1.21 L63 0.94 L66 1.00 L69 1.17 L72 1.45 L75 3.04 L78 4.44 L81 3.11 L84 1.58 L87 1.31 L90 1.16 L93 1.27 L96 1.84 L99 1.96 L102 1.56 L105 1.42 L108 1.27 L111 0.88 L114 0.70 L117 1.31 L120 3.16 L123 3.92 L126 2.44 L129 1.69 L132 1.54 L135 1.95 L138 4.39 L141 5.12 L144 2.80 L147 1.25 L150 1.02 L153 1.43 L156 1.94 L159 2.03 L162 2.13 L165 1.88 L168 2.11 L171 3.29 L174 3.67 L177 2.75 L180 1.76 L183 1.20 L186 1.27 L189 2.48 L192 2.87 L195 1.84 L198 1.39 L201 1.24 L204 0.90 L207 0.89 L210 1.16 L213 1.22 L216 1.30 L219 1.54 L222 1.30 L225 0.78 L228 0.88 L231 1.51 L234 1.66 L237 1.81 L240 1.54 L240 10 Z'/></svg>");
  --edge-b:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='10'><path d='M0 0 L0 8.46 L3 8.19 L6 8.34 L9 8.49 L12 9.12 L15 9.22 L18 8.70 L21 8.46 L24 8.70 L27 8.78 L30 8.84 L33 9.11 L36 9.10 L39 8.76 L42 8.61 L45 8.16 L48 7.13 L51 7.52 L54 8.73 L57 8.80 L60 8.24 L63 7.25 L66 6.33 L69 6.71 L72 7.89 L75 8.12 L78 7.87 L81 7.97 L84 8.06 L87 8.57 L90 8.98 L93 8.75 L96 7.20 L99 4.88 L102 5.61 L105 8.05 L108 8.46 L111 8.31 L114 7.56 L117 6.08 L120 6.84 L123 8.69 L126 9.30 L129 9.12 L132 8.73 L135 8.58 L138 8.44 L141 8.04 L144 8.16 L147 8.73 L150 8.84 L153 8.69 L156 8.42 L159 6.89 L162 5.56 L165 6.96 L168 8.55 L171 8.83 L174 9.00 L177 9.06 L180 8.79 L183 8.47 L186 8.64 L189 9.11 L192 9.48 L195 9.22 L198 7.15 L201 5.87 L204 7.68 L207 8.85 L210 8.88 L213 9.09 L216 8.88 L219 7.73 L222 6.70 L225 7.68 L228 8.75 L231 8.28 L234 7.78 L237 8.41 L240 8.46 L240 0 Z'/></svg>");
  --edge-l:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='240'><path d='M10 0 L1.49 0 L1.02 3 L0.84 6 L1.12 9 L0.98 12 L1.58 15 L2.39 18 L1.88 21 L1.39 24 L1.07 27 L0.96 30 L1.35 33 L1.98 36 L2.51 39 L1.86 42 L1.03 45 L0.82 48 L1.20 51 L2.55 54 L2.82 57 L2.52 60 L3.23 63 L2.63 66 L2.04 69 L2.39 72 L1.64 75 L1.62 78 L2.37 81 L1.69 84 L1.42 87 L1.88 90 L1.72 93 L1.78 96 L1.50 99 L1.09 102 L1.53 105 L1.87 108 L1.85 111 L1.50 114 L0.96 117 L0.78 120 L0.68 123 L0.89 126 L1.40 129 L1.52 132 L1.40 135 L1.33 138 L1.51 141 L1.39 144 L1.09 147 L1.25 150 L1.48 153 L1.54 156 L1.45 159 L1.22 162 L1.02 165 L1.10 168 L1.37 171 L1.39 174 L1.14 177 L1.00 180 L1.08 183 L1.24 186 L1.33 189 L1.33 192 L1.32 195 L1.26 198 L0.86 201 L0.72 204 L0.89 207 L0.85 210 L1.06 213 L1.46 216 L1.56 219 L2.09 222 L2.48 225 L1.73 228 L1.24 231 L1.02 234 L0.76 237 L1.49 240 L10 240 Z'/></svg>");
  --edge-r:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='240'><path d='M0 0 L8.51 0 L9.24 3 L8.98 6 L8.76 9 L8.27 12 L7.52 15 L7.91 18 L8.44 21 L8.54 24 L8.94 27 L9.15 30 L9.11 33 L9.28 36 L9.14 39 L8.74 42 L8.68 45 L8.67 48 L8.67 51 L8.76 54 L8.92 57 L9.00 60 L8.86 63 L8.61 66 L8.63 69 L8.90 72 L8.98 75 L8.78 78 L8.55 81 L8.46 84 L8.52 87 L8.75 90 L8.91 93 L8.61 96 L8.49 99 L8.67 102 L8.60 105 L8.48 108 L8.60 111 L9.11 114 L9.32 117 L9.22 120 L9.04 123 L8.50 126 L8.15 129 L8.13 132 L8.47 135 L8.91 138 L8.50 141 L8.22 144 L8.28 147 L8.12 150 L8.58 153 L8.31 156 L7.63 159 L8.38 162 L8.36 165 L7.61 168 L7.96 171 L7.37 174 L6.77 177 L7.48 180 L7.18 183 L7.45 186 L8.80 189 L9.18 192 L8.97 195 L8.14 198 L7.49 201 L8.02 204 L8.65 207 L9.04 210 L8.93 213 L8.61 216 L8.12 219 L7.61 222 L8.42 225 L9.02 228 L8.88 231 L9.16 234 L8.98 237 L8.51 240 L0 240 Z'/></svg>");
  --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='420' height='420'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' seed='19' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.33  0 0 0 0 0.25  0 0 0 0 0.14  0 0 0 -1.3 0.78'/></filter><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.018' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.26  0 0 0 0 0.12  0 0 0 -0.55 0.42'/></filter><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='0.005 0.35' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.22  0 0 0 0 0.12  0 0 0 -0.9 0.5'/></filter><rect width='420' height='420' filter='url(%23m)' opacity='0.5'/><rect width='420' height='420' filter='url(%23l)' opacity='0.16'/><rect width='420' height='420' filter='url(%23t)' opacity='0.55'/></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;
  position:relative;
}
::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:.05;
}

/* ============================================================
   INK — how every mark on paper is made
   ============================================================ */
.typed{
  font-family:var(--f-type); color:var(--ribbon);
  text-shadow:0 0 .5px rgba(28,25,22,.5);                       /* ink spreading into the fibres */
  -webkit-mask:var(--m-wear) 0 0 / 180px 180px; mask:var(--m-wear) 0 0 / 180px 180px;   /* worn ribbon */
}
.ditto{
  color:var(--ditto);
  text-shadow:0 0 .8px rgba(91,63,168,.75);
  -webkit-mask:var(--m-ditto) 0 0 / 400px 400px; mask:var(--m-ditto) 0 0 / 400px 400px;
}
.hw{
  font-family:var(--f-pen); font-weight:400; font-size:1.6rem; line-height:1.02;
  color:var(--ballpoint); letter-spacing:.01em;
  text-shadow:0 0 .4px currentColor;
  -webkit-mask:var(--m-ink) 0 0 / 160px 160px; mask:var(--m-ink) 0 0 / 160px 160px;
}
.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); font-size:1.1rem; text-shadow:0 0 .7px currentColor; -webkit-mask:var(--m-marker) 0 0 / 160px 160px; mask:var(--m-marker) 0 0 / 160px 160px; }
.hw-pink{ font-family:var(--f-marker); color:#e8157a; font-size:1.2rem; text-shadow:0 0 .7px currentColor; -webkit-mask:var(--m-marker) 0 0 / 160px 160px; mask:var(--m-marker) 0 0 / 160px 160px; }
.hw-chalk{ color:#e9e1cf; text-shadow:0 0 .7px currentColor; -webkit-mask:var(--m-marker) 0 0 / 160px 160px; mask:var(--m-marker) 0 0 / 160px 160px; }
/* 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 1px rgba(0,0,0,.18), 0 3px 5px -1px rgba(0,0,0,.35);
  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-dymo); font-weight:600; font-size:.8rem; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:#f3f1ec;
  padding:.46em .85em .4em 1.02em;
  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:.55rem clamp(1rem, 4vw, 2.5rem);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #16121c, #0c0a11 60%, #09070d);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(0,0,0,.9), 0 12px 30px -18px rgba(0,0,0,.95);
}
/* the logo: a small neon sign. The name in tubes, the address as a thin
   lit line under it, and one delicate tube running round with rounded bends. */
.wordmark{
  position:relative; display:inline-block;
  padding:.42rem .85rem .45rem;
  font-family:var(--f-neon); font-size:clamp(1.05rem, 2vw, 1.3rem); letter-spacing:.08em;
  text-decoration:none; white-space:nowrap; line-height:1;
  border-radius:12px;
  box-shadow:
    inset 0 0 0 1px rgba(240,224,255,.85),
    inset 0 0 3px 1px rgba(182,77,255,.55),
    0 0 2px rgba(182,77,255,.9),
    0 0 10px rgba(182,77,255,.45),
    0 0 26px rgba(182,77,255,.18);
}
.wm-lockup{ display:inline-flex; flex-direction:column; gap:.3em; line-height:1; }
.wm-name{ display:block; margin-right:-.08em; }   /* cancel the trailing letter-space so both lines share one right edge */
.wm-a{ color:var(--n-purple-c); text-shadow:0 0 2px #fff, 0 0 5px var(--n-purple), 0 0 14px var(--n-purple), 0 0 26px rgba(182,77,255,.5); }
.wm-b{ color:var(--n-pink-c); text-shadow:0 0 2px #fff, 0 0 5px var(--n-pink), 0 0 14px var(--n-pink), 0 0 26px rgba(255,47,142,.5); margin-left:.35em; }
.wordmark-sub{
  display:block;
  font-family:var(--f-mono); font-size:.44rem; font-weight:700; letter-spacing:.1em;
  margin-right:-.1em;
  color:#c3b8d0; text-shadow:0 1px 0 rgba(0,0,0,.6);   /* printed on the plate, not lit */
  text-align:justify; text-align-last:justify;
}
.topnav{ display:flex; gap:1.1rem; margin-left:auto; margin-right:1.3rem; align-items:center; }
/* the menu: the same condensed headline as the section titles, cream with the pink offset */
.nav-head{
  display:inline-block; text-decoration:none; white-space:nowrap;
  font-family:var(--f-display); font-weight:400; font-size:1.2rem; line-height:1;
  letter-spacing:.03em; text-transform:uppercase;
  color:#efe7d6;
  text-shadow:.06em .045em 0 rgba(255,47,142,.7);
  transition:color .12s ease, text-shadow .12s ease, transform .12s ease;
}
.nav-head:hover{ color:#fff; text-shadow:.09em .07em 0 var(--n-pink); transform:translateY(-1px); }
/* the call to action: inverted, pink with the cream offset */
.nav-cta{
  font-size:1.3rem; color:var(--n-pink);
  text-shadow:.06em .045em 0 rgba(239,231,214,.75);
}
.nav-cta:hover{ color:#ff5fac; text-shadow:.09em .07em 0 #fff; }

/* illuminated console push-button: machined bezel, dark cap, engraved
   label, a glass lamp lens. The whole cap lights pink when pressed (hover). */
.lamp-btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-weight:700; font-size:.7rem; letter-spacing:.2em;
  text-decoration:none; color:#f1dfe8;
  padding:.5rem .95rem .5rem .8rem;
  border-radius:4px;
  background:linear-gradient(180deg, #2b2029, #1a1219 55%, #130c12);
  border:1px solid #0a0609;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.05), 0 0 0 3px #1c171f, 0 0 0 4px rgba(255,255,255,.06),   /* bezel */
    0 3px 8px rgba(0,0,0,.7);
  text-shadow:0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
  transition:background .15s ease, box-shadow .15s ease, color .15s ease, transform .08s ease;
}
.lamp{
  width:11px; height:11px; border-radius:2.5px; flex:none;
  background:radial-gradient(circle at 35% 30%, #ffd4e6 0, var(--n-pink) 45%, #a3125a 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 5px var(--n-pink), 0 0 12px rgba(255,47,142,.7);
  animation:lamp 2.4s steps(1) infinite;
}
@keyframes lamp{ 0%,62%{opacity:1} 63%,100%{opacity:.3} }
.lamp-btn:hover{
  background:linear-gradient(180deg, #ff5fac, #e8207c 60%, #c2105f); color:#1e0511;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.08), 0 0 0 3px #1c171f, 0 0 0 4px rgba(255,255,255,.08),
    0 0 18px rgba(255,47,142,.8), 0 0 46px rgba(255,47,142,.35);
}
.lamp-btn:hover .lamp{ background:#fff; box-shadow:0 0 6px #fff, 0 0 14px #fff; animation:none; }
.lamp-btn:active{ transform:translateY(1px); }

/* ============================================================
   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,.42), transparent 70%),
    radial-gradient(ellipse 34% 26% at 62% 33%, rgba(255,47,142,.37), transparent 70%),
    radial-gradient(ellipse 80% 55% at 50% 25%, rgba(120,40,170,.22), transparent 75%);
  mix-blend-mode:screen;
  opacity:var(--glow, 1);
  transition:opacity .05s linear;
}
.hero.is-dark .wall-light{ opacity:0; }
/* the wall breathing with the gas — comes on with the sign */
.wall-breath{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 36% 24% at 40% 18%, rgba(200,110,255,.22), transparent 70%),
    radial-gradient(ellipse 28% 20% at 60% 34%, rgba(255,70,160,.19), transparent 70%);
  animation:ignite 1.5s steps(1, end) .35s both, breathe 6.1s ease-in-out 1.85s infinite;
}

/* 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;
  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;
  /* a white script tube, bent by hand, lit just after MIND */
  font-family:"Neonderthaw", "Brush Script MT", cursive; font-weight:400;
  font-size:clamp(2.1rem, 5vw, 4.8rem); line-height:1; letter-spacing:.01em;
  margin-left:.3em; transform:rotate(-5deg);
  color:#fff;
  text-shadow:
    0 0 .04em #fff,
    0 0 .1em #fff,
    0 0 .22em rgba(236,226,255,.9),
    0 0 .45em rgba(205,175,255,.6),
    0 0 .9em rgba(182,77,255,.35);
  animation:ignite 1.4s steps(1, end) both;
  animation-delay:1.95s;
}

/* 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);
  /* glass standoff clip under each letter */
  background:radial-gradient(circle, rgba(255,255,255,.14) 0 30%, transparent 45%) no-repeat 46% calc(100% - .08em) / .07em .07em;
}
.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);
}
/* living halo: its own layer, so it can breathe without touching
   the letters' power-on or their in/out flicker (it follows both) */
.tube::before{
  content:attr(data-t);
  position:absolute; left:0; top:0; z-index:-1;
  color:transparent; -webkit-text-stroke:0 transparent;
  text-shadow:
    0 0 .1em var(--hue),
    0 0 .24em var(--hue),
    0 0 .5em var(--hue-a),
    0 0 1em var(--hue-b);
  animation:ignite 1.5s steps(1, end) both, breathe var(--bd, 4.8s) ease-in-out infinite;
  animation-delay:calc(var(--i) * 120ms + 350ms), calc(var(--i) * 120ms + 1850ms);
}
.tube:nth-child(2n)::before{ --bd:5.7s; }
.tube:nth-child(3n)::before{ --bd:6.4s; }
.neon-pink .tube::before{ --bd:5.2s; }
.hero.is-offscreen .tube::before, .hero.is-offscreen .wall-breath,
.sn-seg.is-offscreen .sn-lit{ animation-play-state:running, paused; }
/* hold the whole power-on until the page is actually visible (site.js adds .power-on) */
.js:not(.power-on) .tube::after, .js:not(.power-on) .tube::before,
.js:not(.power-on) .neon-word::after, .js:not(.power-on) .wall-breath,
.js:not(.power-on) .sn-lit, .js:not(.power-on) .sn-wash, .js:not(.power-on) .neon-studio{ animation-play-state:paused; }
.is-scrolling .tube::before, .is-scrolling .wall-breath{ animation-play-state:running, paused; }
@keyframes breathe{
  0%, 100% { opacity:1; }
  19% { opacity:.7; }
  37% { opacity:.96; }
  54% { opacity:.78; }
  73% { opacity:1; }
  86% { opacity:.85; }
}
.tube.is-off::after{ opacity:.05 !important; animation:none; }
.tube.is-dim::after{ opacity:.55 !important; animation:none; }
.tube.is-off::before{ opacity:0 !important; animation:none; }
.tube.is-dim::before{ opacity:.45 !important; animation:none; }

/* soft bloom behind each word — dips with the wall when a tube drops */
.neon-word::after{
  content:""; position:absolute; z-index:-2;
  left:-6%; right:-6%; top:0; bottom:0; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, var(--hue-a), transparent 68%);
  filter:blur(26px);
  opacity:calc(.55 * var(--glow, 1));
  transition:opacity .06s linear;
  animation:bloom-on 1.9s steps(1, end) backwards;
  animation-delay:var(--bloom-d, .45s);
  pointer-events:none;
}
.neon-pink::after{ --bloom-d:1.25s; }
@keyframes bloom-on{
  0% { opacity:0; } 22% { opacity:.25; } 26% { opacity:0; } 44% { opacity:.38; }
  49% { opacity:.1; } 68% { opacity:.45; } 100% { opacity:.55; }
}

/* 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: a 1980s neon-sign transformer bolted to the wall.
   HV terminal on each end — left feeds the sign, right feeds the cable
   to the side tube (both cables drawn by site.js). Sizes are in em of
   the sign, so it scales with it. */
.neon-box{
  position:absolute; left:calc(100% + .2em); top:.6em; z-index:0;
  width:.9em; height:.38em; border-radius:.016em;
  background:
    linear-gradient(180deg, rgba(150,70,30,.4), rgba(150,70,30,0)) 88% 62% / .012em .12em no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.1), transparent 16%, transparent 80%, rgba(0,0,0,.42)),
    var(--toner-specks) 0 0 / 160px 160px,
    linear-gradient(90deg, #25222a, #3b3742 40%, #2f2b35 70%, #1c1a20);
  box-shadow:
    inset .012em 0 .025em rgba(255,70,160,.38),
    inset 0 .005em 0 rgba(255,255,255,.14),
    0 .035em .07em rgba(0,0,0,.85);
}
/* end caps */
.neon-box::before{
  content:""; position:absolute; inset:0 .075em; pointer-events:none;
  border-left:.006em solid rgba(0,0,0,.6); border-right:.006em solid rgba(0,0,0,.6);
  box-shadow:inset .004em 0 0 rgba(255,255,255,.08), inset -.004em 0 0 rgba(255,255,255,.08);
}
/* four screws */
.neon-box::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  --screw:radial-gradient(circle, #b3b0b8 0 20%, #5a5660 28%, #2a272e 42%, transparent 50%);
  background:
    var(--screw) .02em .022em / .034em .034em no-repeat,
    var(--screw) calc(100% - .02em) .022em / .034em .034em no-repeat,
    var(--screw) .02em calc(100% - .022em) / .034em .034em no-repeat,
    var(--screw) calc(100% - .02em) calc(100% - .022em) / .034em .034em no-repeat;
}
/* mounting feet, bolted to the bricks */
.nb-foot{
  position:absolute; bottom:-.045em; width:.13em; height:.05em;
  background:
    radial-gradient(circle, #050406 0 18%, #6d6973 24%, transparent 32%) 50% 55% / .05em .05em no-repeat,
    linear-gradient(180deg, #34303a, #1a181d);
  border-radius:0 0 .01em .01em;
  box-shadow:0 .012em .02em rgba(0,0,0,.7);
}
.nb-foot-l{ left:.02em; } .nb-foot-r{ right:.02em; }
/* porcelain high-voltage terminals */
.nb-term{
  position:absolute; top:50%; width:.075em; height:.1em; margin-top:-.05em; border-radius:.014em;
  background:
    repeating-linear-gradient(180deg, transparent 0 .014em, rgba(0,0,0,.2) .014em .019em),
    linear-gradient(90deg, #b9ae95, #f3eee0 42%, #d9d1bd 70%, #9f947c);
  box-shadow:0 .01em .02em rgba(0,0,0,.6);
}
.nb-term::after{    /* the brass cap nut the cable screws onto */
  content:""; position:absolute; top:50%; width:.03em; height:.04em; margin-top:-.02em; border-radius:.006em;
  background:linear-gradient(180deg, #e2c36f, #8d6b22);
}
.nb-term-l{ left:-.07em; } .nb-term-l::after{ left:-.022em; }
.nb-term-r{ right:-.07em; } .nb-term-r::after{ right:-.022em; }
.neon-box.is-arcing .nb-term-l{ box-shadow:0 0 .03em #fff, 0 0 .09em #b9ccff, 0 0 .22em rgba(150,180,255,.85); }
/* rating plate */
.nb-plate{
  position:absolute; left:.1em; right:.1em; top:.048em;
  font-family:var(--f-mono); font-size:.04em; line-height:1.2; letter-spacing:.06em;
  text-align:center; color:#1d1a16;
  padding:.35em .4em .3em;
  background:var(--toner-specks) 0 0 / 120px 120px, linear-gradient(180deg, #ece4cc, #d8cdb0);
  border-radius:.2em;
  box-shadow:inset 0 0 0 .08em rgba(0,0,0,.45), 0 .05em .1em rgba(0,0,0,.4);
  transform:rotate(-.5deg);
}
.nb-plate b{ display:block; font-weight:700; }
.nb-plate small{ display:block; font-size:.78em; opacity:.8; }
/* hazard strip */
.nb-warn{
  position:absolute; left:.1em; right:.1em; bottom:.05em; height:.058em;
  display:grid; place-items:center;
  background:repeating-linear-gradient(-45deg, #f0c22e 0 .012em, #141414 .012em .024em);
  border-radius:.006em;
}
.nb-warn i{
  font-style:normal; font-family:var(--f-mono); font-weight:700; font-size:.03em; letter-spacing:.12em;
  color:#111; background:#f0c22e; padding:.1em .6em;
}

/* ============================================================
   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);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85), 0 0 80px -30px rgba(182,77,255,.45);
  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, 420px 420px, auto;
  filter:drop-shadow(0 0 .6px rgba(255,255,255,.5));
  -webkit-mask:
    linear-gradient(#000, #000) center / calc(100% - 18px) calc(100% - 18px) no-repeat,
    var(--edge-t) top left / 240px 10px repeat-x, var(--edge-b) bottom left / 240px 10px repeat-x,
    var(--edge-l) top left / 10px 240px repeat-y, var(--edge-r) top right / 10px 240px repeat-y;
          mask:
    linear-gradient(#000, #000) center / calc(100% - 18px) calc(100% - 18px) no-repeat,
    var(--edge-t) top left / 240px 10px repeat-x, var(--edge-b) bottom left / 240px 10px repeat-x,
    var(--edge-l) top left / 10px 240px repeat-y, var(--edge-r) top right / 10px 240px repeat-y;
}
.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);
  -webkit-mask:var(--m-wear) 0 0 / 240px 240px; mask:var(--m-wear) 0 0 / 240px 240px;
}
.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 .6rem .2rem; transform:rotate(-2.5deg); font-size:1.45rem; }
.flyer-lead{ font-size:1.05rem; font-weight:700; letter-spacing:.02em; margin:0 0 .8rem; color:var(--toner); }
.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%; height:auto; 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 colour print (the 1980s grade is baked into the file): no xerox treatment */
.color-print img{ filter:none; }
.color-print .photo-inner::after{ display: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 .9rem;
  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);
}
/* the strip is now a photo: masking tape on the channel strips, real knobs */
.scribble.scribble-photo{ padding:0; background:#0a080c; border:0; box-shadow:none; }
@media (max-width: 760px){ .scribble.scribble-photo{ --strip-inset:calc(var(--sn-x) + var(--sn-w) + 20px); } }
.scribble-photo{ --strip-inset:calc(var(--sn-x) + var(--sn-w) + 40px); }  /* clear of the side tube + its cable loop */
.scribble-photo img{
  display:block; height:auto;
  margin-left:var(--strip-inset); width:calc(100% - var(--strip-inset));
  min-width:1100px;                                            /* on phones: the first channels, cropped right */
}
.scribble-photo::after{   /* the panel's edges melt into the wall above and below */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, var(--night), rgba(7,5,11,0) 30%),
    linear-gradient(0deg, var(--night-2), rgba(13,9,19,0) 30%);
}

/* ============================================================
   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: shadow above the fold, light below it */
    linear-gradient(180deg, transparent calc(33% - 9px), rgba(60,40,10,.07) calc(33% - 1px), rgba(255,255,255,.55) 33%, rgba(255,255,255,.2) calc(33% + 2px), rgba(60,40,10,.035) calc(33% + 5px), transparent calc(33% + 14px)),
    /* the sheet lifts a little at the bottom-right corner */
    radial-gradient(ellipse 30% 18% at 100% 100%, rgba(50,30,5,.16), transparent 70%),
    linear-gradient(180deg, transparent 88%, rgba(50,30,5,.06) 100%),
    /* 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, auto, auto, 420px 420px, auto;
  filter:drop-shadow(0 0 .6px rgba(255,255,255,.55));   /* fibrous light rim along the torn edge */
  -webkit-mask:
    linear-gradient(#000, #000) center / calc(100% - 18px) calc(100% - 18px) no-repeat,
    var(--edge-t) top left / 240px 10px repeat-x, var(--edge-b) bottom left / 240px 10px repeat-x,
    var(--edge-l) top left / 10px 240px repeat-y, var(--edge-r) top right / 10px 240px repeat-y;
          mask:
    linear-gradient(#000, #000) center / calc(100% - 18px) calc(100% - 18px) no-repeat,
    var(--edge-t) top left / 240px 10px repeat-x, var(--edge-b) bottom left / 240px 10px repeat-x,
    var(--edge-l) top left / 10px 240px repeat-y, var(--edge-r) top right / 10px 240px repeat-y;
}
.sheet.paper{ box-shadow:0 40px 70px -28px rgba(0,0,0,.85), 0 2px 3px rgba(0,0,0,.3), 0 10px 14px -10px rgba(0,0,0,.6); }
.xref .paper-bg{ -webkit-mask:none; mask:none; }
.paper-pink{ --paper-color:var(--paper-pink); }
.paper-card{ --paper-color:var(--card); }

/* ============================================================
   ARCHIVE — ditto-printed tape log
   ============================================================ */
.sheet-section{
  position:relative; overflow:hidden;
  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; left:0; right:0; top:0; height:220px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, #0a080c, transparent);
}

/* the box-spring pattern starts fading in under the tape log (480px = 5 tiles,
   so the rows line up exactly with the pattern in the next section) */
.sheet-section::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:480px; z-index:0; pointer-events:none;
  background:var(--grain), var(--springs);
  background-size:220px 220px, 96px 96px;
  opacity:.6;
  -webkit-mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.9));
          mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.9));
}
/* the real desk (images/amek-desk-neon.webp), a big dim print in the dark
   behind the heading and the top of the log — lit from the side tube */
.desk-ghost{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  top:clamp(5rem, 10vh, 8rem); right:-4%;
  width:min(1180px, 94vw); height:auto;
  opacity:.46;
  transform:rotate(-1.4deg);
  -webkit-mask-image:radial-gradient(ellipse 68% 66% at 50% 50%, #000 24%, rgba(0,0,0,.5) 56%, transparent 80%);
          mask-image:radial-gradient(ellipse 68% 66% at 50% 50%, #000 24%, rgba(0,0,0,.5) 56%, transparent 80%);
}
.sheet-section .section-head, .sheet-section .sheet-wrap{ z-index:1; }

.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;
  --hole:radial-gradient(circle, #07050b 0 6.2px, #2a2230 6.6px 7px, rgba(0,0,0,.45) 7.2px 8px, rgba(255,255,255,.55) 8.2px 8.8px, rgba(120,90,40,.25) 9px 9.6px, transparent 10.2px);
  background:var(--hole) 50% 14% / 22px 22px no-repeat, var(--hole) 50% 50% / 22px 22px no-repeat, var(--hole) 50% 86% / 22px 22px no-repeat;
}
/* 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); }
/* a Polaroid is colour instant film: no xerox treatment, just the print's gloss
   (the faded SX-70 colour is baked into images/desk-detail.jpg) */
.polaroid .photo-slot img, .polaroid img{ filter:none; }
.polaroid .photo-inner::after{
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 72%, rgba(255,255,255,.07));
  mix-blend-mode:normal; opacity:1;
}
.polaroid-2{ transform:rotate(-3.5deg); margin-top:.4rem; }
.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:.1em; }
.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 0; transform:rotate(-1.5deg); transform-origin:left center; }
.resolved{ padding-bottom:.9rem; }

.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%;
}

/* ============================================================
   THE CLOTHES: faint, tilted overlays ghosted into the background
   behind paper and text (like the desk behind the tape log). No nails,
   no shadows: a layer, not an object.
   ============================================================ */
.sheet-section, .how-section, .book-section, .footer{ isolation:isolate; }
.bg-garment{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  opacity:.5;
  /* soft edges: the light falls off the fabric into the dark */
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 35%, rgba(0,0,0,.6) 65%, transparent 100%);
          mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 35%, rgba(0,0,0,.6) 65%, transparent 100%);
}
.bg-garment img{ display:block; width:100%; height:auto; }
/* oversized, a natural part of each showing: shoulder and lapel, neckline, studs */
.bg-garment-coat{ left:-14%; top:30%; width:58vw; transform:rotate(-10deg); }
.book-section{
  position:relative; overflow:hidden;
  padding:clamp(4rem, 10vh, 6.5rem) clamp(1rem, 4vw, 2.5rem) clamp(4.5rem, 11vh, 7rem);
  /* the room after the session: lamp on, cassettes on the table */
  background:
    linear-gradient(180deg, #0d0913 0, rgba(13,9,19,.75) 8%, rgba(7,5,11,.2) 26%, rgba(7,5,11,.25) 70%, rgba(7,5,11,.85) 92%, #07050b 100%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 45%, rgba(7,5,11,.6) 100%),
    url("images/booking-room.jpg") 62% 55% / cover no-repeat,
    var(--night);
}
@media (max-width: 760px){
  .bg-garment{ opacity:.38; }
  .bg-garment-coat{ left:-34%; top:40%; width:110vw; }
      }

/* the red bandana, hung on the flyer's pin like it was tossed there after the session */
.bandana{
  position:absolute; z-index:10; pointer-events:none;
  top:-14px; right:-58px; width:150px; height:auto;
  transform:rotate(7deg); transform-origin:50% 4%;   /* hangs from the knot, on the pin */
  filter:drop-shadow(-6px 10px 10px rgba(0,0,0,.6));
}
@media (max-width: 760px){ .bandana{ width:104px; right:-36px; top:-10px; } }

/* ============================================================
   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;
  /* eases in from the section above, holds, then fades out towards the bottom */
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9) 0, rgba(0,0,0,.9) 38%, transparent 74%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.9) 0, rgba(0,0,0,.9) 38%, transparent 74%);
}
/* and the wall colour steps down softly instead of at a hard line */
.how-section::after{
  content:""; position:absolute; left:0; right:0; top:0; height:220px; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, var(--night-2), transparent);
}
.how-section > :not(.bg-garment){ position:relative; }

/* the studio's approach, said plainly on the wall before the steps */
.how-lead{ max-width:46rem; margin-top:1.6rem; }
.how-lead p{ font-family:var(--f-mono); font-size:.98rem; line-height:1.78; color:#d8cfe3; margin-bottom:.9rem; }
.how-lead p:first-child::first-line{ color:#efe7d6; }
.how-section .section-head{ margin-bottom:3rem; }

.path{
  list-style:none; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem 2.4rem;
}
.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:.35rem;
  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;
}

/* ============================================================
   RATE CARD: typed, taped to the wall under the steps
   ============================================================ */
.ratecard{
  position:relative; max-width:820px; margin:3.2rem auto 0;
  padding:1.6rem clamp(1.2rem, 4vw, 2.4rem) 1.4rem;
  color:var(--ribbon); transform:rotate(.5deg);
}
.ratecard .paper-bg{ -webkit-mask:none; mask:none; box-shadow:0 30px 50px -22px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.3); }
.rc-head{ font-size:.66rem; letter-spacing:.3em; border-bottom:3px double var(--ribbon); padding-bottom:.6rem; margin-bottom:.4rem; color:#5a4d3c; }
.rc-rows > div{
  display:grid; grid-template-columns:1fr auto; gap:.15rem 1.5rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px dotted rgba(28,25,22,.45);
}
.rc-rows dt{ font-size:.92rem; letter-spacing:.14em; }
.rc-price{ font-size:1.5rem; letter-spacing:.02em; text-align:right; white-space:nowrap; }
.rc-price small{ font-size:.58rem; letter-spacing:.18em; margin-left:.4rem; color:#6b5f4d; }
.rc-note{ grid-column:1 / -1; font-size:.88rem; line-height:1.65; color:#2e2820; }
.rc-foot{ margin-top:1rem; font-size:.74rem; line-height:1.7; letter-spacing:.02em; color:#4e4436; }
.rc-scrawl{ position:absolute; right:1.4rem; bottom:-1.1rem; font-size:1.5rem; transform:rotate(-4deg); }

/* plain, straight typewriter for the longer texts on the cards (no wear, no wobble) */
.plain{ font-family:var(--f-mono); color:var(--ribbon); }

/* why €650: Kris's note, taped under the rate card */
.whycard{
  position:relative; max-width:720px; margin:2.6rem auto 0;
  padding:1.7rem clamp(1.2rem, 4vw, 2.2rem) 1.3rem;
  color:var(--ribbon); transform:rotate(-.7deg);
}
.whycard .paper-bg{ -webkit-mask:none; mask:none; box-shadow:0 30px 50px -22px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.3); }
.why-title{ font-size:1.9rem; line-height:1; margin:0 0 .9rem; transform:rotate(-1.5deg); transform-origin:left; }
.whycard .plain{ font-size:.92rem; line-height:1.72; margin-bottom:.85rem; }
.why-sign{ font-size:1.7rem; text-align:right; margin:.2rem .4rem 0 0; transform:rotate(-3deg); }

/* ============================================================
   ABOUT KRIS: a press sheet
   ============================================================ */
.kris-section{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(4rem, 10vh, 7rem) clamp(1rem, 4vw, 2.5rem) clamp(4.5rem, 11vh, 7.5rem);
  background:
    radial-gradient(50% 40% at 15% 20%, rgba(182,77,255,.1), transparent 60%),
    radial-gradient(45% 40% at 90% 85%, rgba(255,47,142,.07), transparent 65%),
    var(--night-2);
}
.kris-section::before{
  content:""; position:absolute; left:0; right:0; top:0; height:240px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, var(--night), transparent);
}
.kris-body{ position:relative; z-index:1; display:grid; grid-template-columns:1.5fr .8fr; gap:1.4rem 2.6rem; align-items:start; }
.kris-text .typed{ font-size:.95rem; line-height:1.7; margin-bottom:1rem; }
.kris-text b{ font-weight:400; text-decoration:underline; text-underline-offset:3px; }
.labels{ display:flex; flex-wrap:wrap; gap:.7rem .8rem; margin-top:1.3rem; }
.labels .dymo{ font-size:.7rem; }
.kris-section .polaroid{ margin-top:.4rem; }

.form-intro{ position:relative; z-index:1; font-size:.92rem; line-height:1.7; margin:0 0 1.6rem; max-width:44rem; }
/* ============================================================
   BOOKING — red wall + pink carbon work order
   ============================================================ */

.book-sheet{ padding-left:clamp(1.3rem, 4.5vw, 3.2rem); transform:rotate(.4deg); }
.book-sheet .paper-bg{ box-shadow:0 50px 80px -30px rgba(0,0,0,.95), 0 2px 3px rgba(0,0,0,.4); }
.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; }
.postit small{ display:block; font-size:.86em; line-height:1.05; overflow-wrap:anywhere; }

.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:transparent; 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,.22); 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);
}
.field-trap{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-failed{ position:relative; z-index:1; margin-top:1rem; font-size:1.35rem; line-height:1.15; }
.form-failed a{ color:inherit; }
.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);
  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){
  .book-sheet .form-head > div:first-child{ padding-right:12.5rem; }
  .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-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){
  .desk-ghost{ width:170vw; right:-45vw; top:1rem; opacity:.38; }
  .book-sheet .form-head > div:first-child{ padding-right:10.5rem; }
  .kris-body{ grid-template-columns:1fr; }
  .kris-section .polaroid{ width:min(270px, 86%); justify-self:center; }
  .kris-section .sheet{ padding:1.6rem 1.1rem 2.6rem 3.1rem; transform:none; }
  .rc-rows > div{ grid-template-columns:1fr; }
  .rc-price{ text-align:left; }
  .topnav{ 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:2rem; letter-spacing:.01em; }
  .neon-box{ 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-size:18px 18px; }
  .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-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; }
}

/* ============================================================
   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, Dymo heading
   ============================================================ */
/* 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; }

@media (max-width: 760px){
  .badge{ width:70px; height:70px; right:-6px; top:190px; font-size:.46rem; }
  .badge b{ font-size:1.5rem; }
}

/* ============================================================
   SIDE NEON — a tube down the left of the whole site, one
   section per part of the page, wired together with GTO cable.
   Segments, cables and plugs are placed by site.js.
   ============================================================ */
:root{ --sn-x:14px; --sn-w:6px; }
.wiring{ position:absolute; left:0; top:0; width:100%; height:0; z-index:850; pointer-events:none; }
.cables{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; }
.cable{ fill:none; stroke:#09070b; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.cable-hi{ fill:none; stroke:rgba(214,170,255,.2); stroke-width:1; stroke-linecap:round; transform:translate(-.7px, -.9px); }
.plug{ fill:#1b1820; stroke:#3d3644; stroke-width:1; }

.sn-seg{
  position:absolute; left:var(--sn-x); width:var(--sn-w);
  --hue:var(--n-purple); --core:var(--n-purple-c);
}
.sn-glass, .sn-lit{ position:absolute; inset:0; border-radius:99px; }
.sn-glass{
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(230,210,255,.16) 50%, rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.sn-lit{
  background:linear-gradient(90deg, var(--hue) 0%, var(--core) 30%, #fff 50%, var(--core) 70%, var(--hue) 100%);
  box-shadow:
    0 0 2px var(--hue), 0 0 6px var(--hue), 0 0 14px var(--hue),
    0 0 30px rgba(182,77,255,.75), 0 0 70px rgba(182,77,255,.42);
  will-change:opacity;
  animation:ignite 1.4s steps(1, end) both, breathe var(--sb, 5.4s) ease-in-out infinite;
  animation-delay:var(--sd, .55s), calc(var(--sd, .55s) + 1.4s);
}
.sn-cap{
  position:absolute; left:50%; width:calc(var(--sn-w) + 5px); height:15px; transform:translateX(-50%);
  border-radius:2px; background:linear-gradient(90deg, #121015, #4b4552 45%, #17141b);
  box-shadow:0 2px 4px rgba(0,0,0,.6);
}
.sn-cap-top{ top:-14px; }
.sn-cap-bot{ bottom:-14px; }
.sn-clip{
  position:absolute; left:50%; width:calc(var(--sn-w) + 10px); height:4px; transform:translateX(-50%);
  border-radius:2px; background:rgba(235,225,255,.28); box-shadow:0 0 3px rgba(255,255,255,.3);
}

/* the light it throws across the page */
.sn-wash{
  position:fixed; left:0; top:0; bottom:0; width:min(420px, 55vw); z-index:840; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 0% 50%, rgba(182,77,255,.15), transparent 70%),
    linear-gradient(90deg, rgba(182,77,255,.14), rgba(182,77,255,.04) 28%, transparent 65%);
  animation:ignite 1.4s steps(1, end) .55s both, breathe 5.4s ease-in-out 1.95s infinite;
}
html:not(.js) .sn-wash{ display:none; }

/* electric sparks (drawn by site.js) */
.sparks{ position:fixed; inset:0; width:100%; height:100%; z-index:1100; pointer-events:none; }

@media (max-width: 760px){
  :root{ --sn-x:4px; --sn-w:4px; }
  .sn-wash{
    width:65vw;
    background:
      radial-gradient(ellipse 70% 60% at 0% 50%, rgba(182,77,255,.16), transparent 70%),
      linear-gradient(90deg, rgba(182,77,255,.14), transparent 45%);
  }
  .sn-cap{ height:11px; }
  .sn-cap-top{ top:-10px; } .sn-cap-bot{ bottom:-10px; }
}