/* Envyes — envyes.band v4 · light by default, dark by choice · no external resources
   Perfect imperfection: a few things are deliberately a degree off; everything else sits on the grid. */
:root{
  color-scheme:light;
  /* one theme: a flyer on goldenrod copy paper, one black ink, one spot colour (tape blue). No white. No dark. */
  --paper:#e4b85f; --paper-deep:#d6a747; --paper-soft:#ecc87c; --ink:#15110c; --muted:#4b3a1c; --line:#b58e3b; --line-soft:#c89f45;
  --spot:#1f3d5c; --spot-deep:#13293f; --spot-soft:#2d5178; --spot-ink:#eadfca;
  --green:#5a6a3a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI","Avenir Next",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --r:4px; --wrap:1040px; --tilt:-1deg; --track:0px;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0} a{color:var(--spot)} a:hover{color:var(--ink)}
::selection{background:var(--ink);color:var(--paper)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.skip{position:absolute;left:-999px;top:0;background:var(--paper-soft);padding:8px 12px;border:1px solid var(--line)} .skip:focus{left:8px;top:8px;z-index:30}
.hidden{display:none !important}
.link{background:none;border:0;padding:0;font:inherit;color:var(--spot);text-decoration:underline;cursor:pointer} .link:hover{color:var(--ink)}
.dim{color:var(--muted);font-size:13px}
.q{border-bottom:1px dashed var(--muted);cursor:help}

/* grain — the paper */
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:repeating-radial-gradient(circle at 17% 29%,rgba(21,17,12,.04) 0 1px,transparent 1px 3px),repeating-radial-gradient(circle at 73% 61%,rgba(21,17,12,.03) 0 1px,transparent 1px 4px)}
.top,.hero,main,footer{position:relative;z-index:1}

/* top bar + VCR counter */
.top{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:2px solid var(--ink)}
.top .row{min-height:58px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);transform:rotate(var(--tilt));transform-origin:left center}
.mark{width:30px;height:30px;color:var(--ink)} .mark .tallies{transition:stroke-width .2s}
.word{font:600 14px var(--mono);letter-spacing:.22em}
.links{display:flex;gap:4px 18px;flex-wrap:wrap}
.links a{font:600 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent}
.links a:hover{color:var(--ink);border-color:var(--ink)}
.vcr{display:flex;align-items:center;gap:6px;font:600 13px var(--mono);color:var(--muted);padding:2px 8px;border:1px solid var(--ink);border-radius:4px;background:var(--paper-soft)}
.vbtn{background:none;border:0;color:var(--muted);font:600 10px var(--mono);cursor:pointer;padding:4px} .vbtn:hover{color:var(--spot)}
.counter{min-width:46px;text-align:center;letter-spacing:.12em;color:var(--ink)}
.btn{display:inline-block;min-height:42px;line-height:40px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--r);background:transparent;color:var(--ink);font:600 13px var(--mono);letter-spacing:.04em;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--spot);color:var(--spot)}
.btn.solid{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:rotate(-.6deg)} .btn.solid:hover{background:var(--spot);border-color:var(--spot);color:var(--spot-ink);transform:rotate(0)}
.btn:focus-visible{outline:2px solid var(--spot);outline-offset:2px}
.stamp{font:600 10.5px var(--mono);letter-spacing:.14em;color:var(--spot);border:1.5px solid var(--spot);border-radius:3px;padding:4px 8px;transform:rotate(-2deg);user-select:none;cursor:pointer;white-space:nowrap}
.stamp.inked{background:var(--spot);color:var(--spot-ink)}

/* tally mark — four strokes, one of them a little off, on purpose */
.tally{display:inline-block;width:22px;height:14px;margin-right:10px;vertical-align:-1px;cursor:pointer;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 6px);background-size:22px 14px;background-repeat:no-repeat;transform:skewX(-6deg)}
.tally.lit{background:repeating-linear-gradient(90deg,var(--spot) 0 2px,transparent 2px 6px);background-size:22px 14px;background-repeat:no-repeat}
.tally.five{position:relative} .tally.five::after{content:"";position:absolute;left:-3px;top:6px;width:28px;height:2px;background:var(--ink);transform:rotate(-20deg)}

/* hero */
.hero{padding:56px 0 40px;border-bottom:2px solid var(--ink)}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.eyebrow{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{font:400 clamp(60px,11vw,116px)/0.92 var(--serif);letter-spacing:-.025em;margin:10px 0 2px;position:relative;cursor:default;
  text-shadow:1.5px 0 0 rgba(31,61,92,.45),-1.5px 0 0 rgba(21,17,12,.18)}
h1:hover{animation:track .9s steps(6) infinite}
@keyframes track{0%{text-shadow:1.5px 0 0 rgba(31,61,92,.45),-1.5px 0 0 rgba(21,17,12,.18)}50%{text-shadow:3px 0 0 rgba(184,83,42,.35),-3px 0 0 rgba(31,78,121,.35);transform:translateX(1px)}100%{text-shadow:1.5px 0 0 rgba(31,61,92,.45),-1.5px 0 0 rgba(21,17,12,.18)}}
.underline{display:block;width:min(320px,70%);height:14px;margin:0 0 14px 4px} .underline path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.4s .3s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.lead{max-width:540px;font-size:18px;line-height:1.55}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.now{margin-top:18px;font:13px var(--mono);color:var(--muted)} .now strong{color:var(--ink);font-weight:600}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--spot);margin-right:8px;vertical-align:1px;cursor:pointer;animation:blink 2.4s infinite}
@keyframes blink{0%,60%{opacity:1}80%{opacity:.25}100%{opacity:1}}
.tape{text-align:center;transform:rotate(.8deg)} .tape svg{width:100%;max-width:400px;height:auto;cursor:pointer}
.tape figcaption{margin-top:8px;font:12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;max-width:calc(100% - 170px)}
.shell{fill:var(--spot);stroke:var(--ink);stroke-width:1.5} .label{fill:var(--paper-soft)} .label-line{stroke:var(--line);stroke-width:1}
.t-small{font:600 11px var(--mono);letter-spacing:.12em;fill:var(--muted)} .t-title{font:italic 34px var(--serif);fill:var(--ink)}
.window{fill:var(--paper);stroke:var(--line)} .spool{fill:none;stroke:var(--muted);stroke-width:5;transform-box:fill-box;transform-origin:center} .spool path{stroke-width:3}
.hub{fill:var(--ink);cursor:pointer} .tape-line{stroke:var(--muted);stroke-width:2}
.foot{fill:var(--spot-ink);opacity:.35} .screw{fill:var(--spot-ink);opacity:.6;cursor:pointer}
.sticker rect{fill:var(--paper);stroke:var(--ink);stroke-width:1} .sticker text{font:600 10px var(--mono);letter-spacing:.14em;fill:var(--ink)} .sticker{transform:rotate(6deg);transform-box:fill-box;transform-origin:center;cursor:pointer}
.playing .spool{animation:spin 2.2s linear infinite} .playing #spoolR{animation-duration:1.6s} .rewinding .spool{animation:spin .5s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* sections */
.sec{padding:48px 0} .sec.alt{background:var(--paper-deep);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sec h2{font:400 clamp(28px,5vw,40px)/1.1 var(--serif);letter-spacing:-.01em}
.sub{margin-top:6px;color:var(--muted);font-size:15px}
.two{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}

/* releases — tilted sleeves that straighten under the hand, with a side B */
.sleeves{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;margin-top:24px}
.rel:nth-child(odd) .sleeve-wrap{transform:rotate(-1deg)} .rel:nth-child(even) .sleeve-wrap{transform:rotate(.7deg)} .rel:nth-child(3) .sleeve-wrap{transform:rotate(1.3deg)}
.rel:hover .sleeve-wrap{transform:rotate(0)}
.sleeve-wrap{position:relative;aspect-ratio:1/1;perspective:900px;transition:transform .25s}
.sleeve,.sleeve-back{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.sleeve{display:flex;flex-direction:column;justify-content:space-between;padding:14px;text-decoration:none;color:var(--ink);overflow:hidden;border:1px solid var(--ink)}
.sleeve::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 4px);mix-blend-mode:multiply}
.sleeve-back{display:flex;flex-direction:column;gap:4px;justify-content:center;padding:14px;transform:rotateY(180deg);background:var(--paper-soft);border:1px solid var(--ink);font:12px/1.5 var(--mono);color:var(--muted)}
.sleeve-back .b-h{font:600 11px var(--mono);letter-spacing:.14em;color:var(--spot);margin-bottom:4px}
.rel.flipped .sleeve{transform:rotateY(180deg)} .rel.flipped .sleeve-back{transform:rotateY(0)}
.s-top{font:600 10.5px var(--mono);letter-spacing:.14em} .s-type{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;align-self:flex-end}
.s-title{font:italic 30px/1.05 var(--serif)}
.s-blow{background:linear-gradient(180deg,var(--ink) 0 62%,var(--paper-deep) 62%)} .s-blow .s-top,.s-blow .s-title{color:var(--paper)}
.s-dime{background:linear-gradient(180deg,var(--spot) 0 62%,var(--paper-soft) 62%)} .s-dime .s-top,.s-dime .s-title{color:var(--spot-ink)}
.s-cuck{background:linear-gradient(180deg,var(--paper-deep) 0 62%,var(--paper-soft) 62%)}
.s-wind{background:linear-gradient(180deg,var(--paper-soft) 0 62%,var(--spot-deep) 62%)} .s-wind .s-type{color:var(--spot-ink)}
.s-bless{background:linear-gradient(180deg,var(--spot-deep) 0 62%,var(--ink) 62%)} .s-bless .s-top,.s-bless .s-title,.s-bless .s-type{color:var(--spot-ink)}
.rel h3{margin-top:12px;font:400 20px var(--serif)} .meta{font:12.5px var(--mono);color:var(--muted);margin-top:2px}
.tracks{list-style:none;padding:0;margin:8px 0 0;font-size:14px} .tracks li{display:flex;justify-content:space-between;border-bottom:1px dotted var(--line);padding:3px 0} .tracks span{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.note{margin-top:8px;font-size:13.5px;color:var(--muted)}
.stores{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.stores a{font:600 12px var(--mono);text-decoration:none;padding:4px 9px;border:1px solid var(--ink);border-radius:3px;color:var(--ink);background:var(--paper-soft)} .stores a:hover{background:var(--ink);color:var(--paper)}

/* shows — a xeroxed flyer */
.shows{list-style:none;padding:0;margin:0;border-top:3px double var(--ink)}
.shows li{display:grid;grid-template-columns:120px 1fr auto;gap:8px 16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.shows .date{font:600 13px var(--mono);color:var(--spot)} .shows .bill{font-size:15.5px;text-transform:uppercase;letter-spacing:.02em} .shows .bill strong{color:var(--spot)} .shows li a{font:600 12.5px var(--mono);text-decoration:none}
.shows .next .date{color:var(--muted);cursor:pointer} .shows .next .bill{text-transform:none;letter-spacing:0}

/* scene map (flat, three families + gray) */
.map{margin-top:22px} .map svg{width:100%;max-width:760px;height:auto;display:block;margin:0 auto}
.m-edge path{stroke:var(--ink);stroke-width:1;fill:none;stroke-dasharray:4 4}
.m-node{cursor:pointer} .m-node rect{fill:var(--paper-soft);stroke:var(--ink);stroke-width:1;transition:stroke .2s} .m-node:hover rect,.m-node.lit rect{stroke:var(--spot);stroke-width:2}
.m-core rect{fill:var(--spot);stroke:var(--ink);stroke-width:1.5} .m-core{cursor:pointer}
.m-h{font:600 14px var(--sans);fill:var(--ink)} .m-s{font:10.5px var(--mono);fill:var(--muted)} .m-core .m-h,.m-core .m-s{fill:var(--spot-ink)}
.map figcaption{margin-top:10px;text-align:center;font:12.5px var(--mono);color:var(--muted)}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.room{padding:14px 16px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper-soft);cursor:pointer;transition:border-color .2s} .room:hover,.room.lit{border-color:var(--spot);box-shadow:inset 0 0 0 1px var(--spot)}
.room h3{font:400 19px var(--serif)} .room p{margin-top:4px;font-size:14.5px;color:var(--muted)} .room em{color:var(--ink);font-style:italic}
.creed{max-width:70ch;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font:italic 17px/1.5 var(--serif)}

/* about · watch · press · listen · contact */
.prose p{max-width:62ch;font-size:16.5px} .prose p+p{margin-top:12px}
blockquote{margin:18px 0;padding:14px 18px;border-left:3px solid var(--ink);background:var(--paper-deep);font:italic 19px/1.45 var(--serif);transform:rotate(-.4deg)}
blockquote cite{display:block;margin-top:8px;font:12.5px var(--mono);font-style:normal;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .tags span{font:600 12px var(--mono);padding:4px 9px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);cursor:pointer} .tags span:hover,.tags span.lit{background:var(--spot);border-color:var(--spot);color:var(--spot-ink)}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px}
.vid{display:block;position:relative;padding:22px 16px 16px;min-height:150px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper-soft);text-decoration:none;color:var(--ink)}
.vid:hover{border-color:var(--spot);box-shadow:inset 0 0 0 1px var(--spot)}
.play{display:block;width:44px;height:44px;border-radius:50%;background:var(--spot);position:relative;margin-bottom:34px}
.play::after{content:"";position:absolute;left:17px;top:13px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--spot-ink)}
.v-title{display:block;font:400 22px var(--serif)} .v-meta{display:block;font:12.5px var(--mono);color:var(--muted);margin-top:2px}
.press{list-style:none;padding:0;margin:0}
.press li{padding:12px 0;border-bottom:1px solid var(--line)} .press li:first-child{border-top:1px solid var(--line)}
.press a{font:600 16px var(--serif);text-decoration:none} .press span{display:block;font-size:14px;color:var(--muted)}
.platforms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:22px}
.platforms a{display:block;padding:14px 12px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper-soft);text-decoration:none;color:var(--ink);font:600 14px var(--sans)}
.platforms a:hover{background:var(--ink);color:var(--paper)}
.mail a{font:400 clamp(22px,4.5vw,34px) var(--serif);text-decoration:none;word-break:break-all} .mail span{display:block;font:12.5px var(--mono);color:var(--muted);margin-top:6px}
footer{border-top:2px solid var(--ink);padding:18px 0 40px;font:12.5px var(--mono);color:var(--muted)}
.eggbtn{font:600 12.5px var(--mono);color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:8px} .eggbtn:hover{color:var(--spot)}
.egg-tally{display:inline-block;width:18px;height:12px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 6px);background-size:18px 12px;background-repeat:no-repeat;transform:skewX(-6deg)}
.eggpanel{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.eggpanel ul{list-style:none;padding:0;margin:10px 0 0;columns:3;column-gap:24px;font:12.5px var(--mono)} .eggpanel li{break-inside:avoid;padding:2px 0;color:var(--muted)} .eggpanel li.on{color:var(--ink)} .eggpanel li.on::before{content:"✓ ";color:var(--spot)} .eggpanel li::before{content:"· "}
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);opacity:0;z-index:20;max-width:min(92vw,520px);padding:10px 14px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper-soft);color:var(--ink);font:13px/1.45 var(--mono);box-shadow:3px 3px 0 var(--ink);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* modes unlocked by eggs — temporary, Esc clears; the paper stays goldenrod unless an egg swaps the stock */
body.vhs{--track:2px} body.vhs h1{animation:track .7s steps(5) infinite}
body.vhs::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,rgba(21,17,12,.12) 0 2px,transparent 2px 5px)}
body.xerox{filter:grayscale(1) contrast(1.35)}
body.night{--paper:#b98f36;--paper-deep:#a67d2a;--paper-soft:#c79b3f}        /* after the show: the same flyer under a streetlight */
body.flash{--paper:#f0a58f;--paper-deep:#e08f77;--paper-soft:#f5b7a4;--line:#b56a52}  /* salmon stock */
body.green{--paper:#b9d39a;--paper-deep:#a6c484;--paper-soft:#c9dfae;--line:#7f9a5c}   /* astro-green stock */
body.mirror main{transform:scaleX(-1)} body.mirror main .sec{transform:scaleX(-1)}
body.lefty .hero-grid{direction:rtl} body.lefty .hero-text{direction:ltr}
body.slow *{transition-duration:3s !important}
body.wide{--wrap:1400px}
body.tiny{font-size:13px}
body.upside .tape{transform:rotate(180.8deg)}
body.quiet .grain{display:none}
body.loud .sleeve::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px)}
body.shake{animation:shake .4s 3} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
body.found-all .egg-tally{color:var(--spot)} body.found-all footer{border-top-color:var(--spot)}

@media (max-width:760px){
  .hero{padding:36px 0 28px} .hero-grid{grid-template-columns:1fr;gap:22px} .tape{order:-1} .tape svg{max-width:300px}
  .two{grid-template-columns:1fr;gap:12px} .links{display:none} .vcr{display:none}
  .shows li{grid-template-columns:1fr;gap:4px} .sec{padding:36px 0}
  .sleeves{grid-template-columns:repeat(2,1fr);gap:12px} .s-title{font-size:22px} .sleeve{padding:10px} .rel h3{font-size:17px}
  .map svg{display:none} .map figcaption{text-align:left;margin-top:0} .rooms{grid-template-columns:1fr}
  .eggpanel ul{columns:1}
}
@media (min-width:761px) and (max-width:980px){ .rooms{grid-template-columns:repeat(2,1fr)} .eggpanel ul{columns:2} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} .underline path{stroke-dashoffset:0} }
@media print{  .btn,.top,.vcr,.toast,.eggpanel,.grain{display:none} body{filter:grayscale(1) contrast(1.2)} }
.h1-sm{font-size:clamp(40px,8vw,72px)}

/* ===================== v6 — photographs, printed in one ink ===================== */
/* every photograph prints as ink on the stock: grayscale + multiply. Hover/hold/#color brings the colour back */
.inkph, .frame img, .pin img, .vid > img, .polaroid .pol-front img, .print img, .sleeve img{display:block;width:100%;height:100%;object-fit:cover}
.frame img, .pin img, .vid > img, .polaroid .pol-front img{filter:grayscale(1) contrast(1.22) brightness(1.04);mix-blend-mode:multiply;transition:filter .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.frame:hover img, .frame.held img, .pin:hover img, .vid:hover > img, .polaroid:hover .pol-front img, .polaroid.flipped .pol-front img, body.color .frame img, body.color .pin img, body.color .vid > img, body.color .polaroid .pol-front img{filter:none;mix-blend-mode:normal}
.print img{filter:contrast(1.08) sepia(.15);mix-blend-mode:multiply}
.sleeve img{position:absolute;inset:0;filter:contrast(1.04);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rel:hover .sleeve img{transform:scale(1.03)}
/* sleeve labels become price stickers on the art */
.sleeve .s-top, .sleeve .s-type{position:absolute;z-index:2;background:var(--paper);color:var(--ink);padding:3px 7px;border:1px solid var(--ink);border-radius:2px;box-shadow:1px 1px 0 var(--ink)}
.sleeve .s-top{top:8px;left:8px;transform:rotate(-2deg)} .sleeve .s-type{right:8px;bottom:8px;transform:rotate(1.5deg)}
.sleeve .s-blow .s-top,.s-dime .s-top,.s-cuck .s-top,.s-wind .s-top,.s-bless .s-top,.s-dime .s-type,.s-wind .s-type,.s-bless .s-type,.s-blow .s-type{color:var(--ink)}
.sleeve::after{z-index:3}

/* tape — translucent strips, stuck on at slightly wrong angles */
.tape-strip{position:absolute;width:74px;height:22px;background:rgba(234,223,202,.55);border:1px solid rgba(21,17,12,.12);box-shadow:0 1px 0 rgba(21,17,12,.08);pointer-events:none;z-index:4;mix-blend-mode:multiply}
.tape-strip.a{top:-10px;left:14px;transform:rotate(-7deg)} .tape-strip.b{top:-9px;right:12px;transform:rotate(5deg)} .tape-strip.c{bottom:-9px;left:40%;transform:rotate(-3deg)} .tape-strip.d{top:38%;left:-30px;transform:rotate(88deg)}

/* polaroid in the hero */
.tape{position:relative}
.polaroid{position:absolute;right:-6px;bottom:-62px;width:160px;margin:0;z-index:5;cursor:pointer;perspective:800px;transform:rotate(-7deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.polaroid:hover{transform:rotate(-3deg) translateY(-4px)}
.polaroid:focus-visible{outline:2px solid var(--spot);outline-offset:4px}
.pol-in{position:relative;width:100%;aspect-ratio:1/1.22;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.polaroid.flipped .pol-in{transform:rotateY(180deg)}
.pol-front,.pol-back{position:absolute;inset:0;backface-visibility:hidden;background:#eadfca;border:1px solid var(--ink);box-shadow:3px 4px 0 rgba(21,17,12,.35);padding:9px 9px 0}
.pol-front img{aspect-ratio:1/1;height:auto;border:1px solid rgba(21,17,12,.35)}
.pol-cap{display:block;font:italic 13px/1.2 var(--serif);color:var(--ink);padding:9px 2px;transform:rotate(-1.5deg)}
.pol-back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 12px;font:italic 13.5px/1.35 var(--serif);color:var(--ink)}
.pol-sig{font:600 12px var(--mono);letter-spacing:.14em;color:var(--spot);align-self:flex-end}
.polaroid::before{content:"";position:absolute;top:-8px;left:50%;width:60px;height:18px;margin-left:-30px;background:rgba(234,223,202,.6);border:1px solid rgba(21,17,12,.12);transform:rotate(-2deg);z-index:6;pointer-events:none}

/* stills — a strip of frames that drifts with the page */
.stills{padding-bottom:40px;overflow:hidden}
.strip-wrap{margin-top:22px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:24px 0 30px}
.strip-wrap::-webkit-scrollbar{display:none}
.strip{display:flex;gap:26px;padding:0 max(24px,calc((100vw - var(--wrap)) / 2));width:max-content;will-change:transform}
.frame{position:relative;flex:0 0 auto;width:292px;margin:0;background:#eadfca;border:1px solid var(--ink);padding:10px 10px 8px;box-shadow:3px 4px 0 rgba(21,17,12,.32);scroll-snap-align:center;cursor:pointer;transform:rotate(var(--tilt,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.frame:hover{transform:rotate(0deg) translateY(-6px);box-shadow:5px 8px 0 rgba(21,17,12,.32);z-index:2}
.frame img{aspect-ratio:4/3;height:auto;border:1px solid rgba(21,17,12,.4)}
.frame.held{box-shadow:5px 8px 0 var(--spot)} .frame.held::after{content:"HELD";position:absolute;top:-10px;right:14px;font:600 10px var(--mono);letter-spacing:.14em;color:var(--spot-ink);background:var(--spot);padding:3px 7px;transform:rotate(3deg)}
.frame figcaption{display:flex;flex-direction:column;gap:2px;padding:8px 2px 2px;font:italic 13px/1.25 var(--serif);color:var(--ink)}
.frame .tc{font:600 10.5px var(--mono);letter-spacing:.14em;color:var(--spot);font-style:normal}
/* sprocket holes */
.frame::before{content:"";position:absolute;left:0;right:0;top:3px;height:4px;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(21,17,12,.28) 10px 16px);pointer-events:none}
.strip-note{margin-top:0;font:12.5px var(--mono);color:var(--muted)}
body.color .strip-note::after{content:" · in colour now."}

/* pinned photos in the scene */
.pins{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:30px auto 26px;max-width:720px}
.pin{position:relative;margin:0;background:#eadfca;border:1px solid var(--ink);padding:10px 10px 6px;box-shadow:3px 4px 0 rgba(21,17,12,.32);transform:rotate(var(--tilt,0deg))}
.pin:nth-child(2){margin-top:34px}
.pin img{aspect-ratio:3/2;height:auto;border:1px solid rgba(21,17,12,.4)}
.pin figcaption{padding:8px 2px 4px;font:italic 13.5px var(--serif);color:var(--ink)}
.pin::before{content:"";position:absolute;top:-9px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--spot);border:2px solid var(--spot-deep);box-shadow:1px 2px 0 rgba(21,17,12,.4);z-index:3}

/* the mark, printed as a sticker in the About column */
.print{margin:18px 0 0;width:150px;position:relative;transform:rotate(-4deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.print:hover{transform:rotate(0)}
.print img{aspect-ratio:1/1;height:auto;border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.print figcaption{margin-top:8px;font:600 10.5px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

/* watch — thumbnails behind the play button */
.vid{overflow:hidden;min-height:0;padding:0;aspect-ratio:16/9;display:grid;grid-template-rows:1fr auto}
.vid > img{position:absolute;inset:0;z-index:0}
.vid .play{position:absolute;left:14px;top:14px;z-index:2}
.vid .v-title,.vid .v-meta{position:relative;z-index:2}
.vid .v-title{align-self:end;margin:0 14px;background:var(--paper);display:inline-block;width:max-content;max-width:calc(100% - 28px);padding:4px 8px;border:1px solid var(--ink);transform:rotate(-1.2deg)}
.vid .v-meta{margin:6px 14px 12px;background:var(--paper-soft);display:inline-block;width:max-content;padding:2px 7px;border:1px solid var(--ink);font:600 11px var(--mono);letter-spacing:.1em}

/* credits */
.credits{margin-top:14px;font:12.5px/1.6 var(--mono);color:var(--muted)} .credits summary{cursor:pointer;color:var(--ink)} .credits ul{margin:8px 0 0;padding-left:18px} .credits a{color:var(--spot)}

/* ===================== motion — perfect imperfection ===================== */
/* reveal: things arrive slightly crooked and settle (almost) straight */
[data-rv]{opacity:0;transform:translateY(22px) rotate(calc(var(--tilt,0deg) * 3));transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
[data-rv].in{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg))}
.frame[data-rv],.pin[data-rv]{transform:translateY(22px) rotate(calc(var(--tilt,0deg) * 3))} .frame[data-rv].in,.pin[data-rv].in{transform:translateY(0) rotate(var(--tilt,0deg))}
.frame[data-rv].in:hover{transform:rotate(0deg) translateY(-6px)}
/* headings: a hand-drawn rule that draws itself when the section arrives */
h2{position:relative} h2::after{content:"";position:absolute;left:34px;right:auto;bottom:-6px;width:0;height:2px;background:var(--ink);border-radius:2px;transform:rotate(-.6deg);transition:width .9s cubic-bezier(.2,.8,.2,1) .15s;opacity:.9}
h2.in::after{width:118px}
/* misregistration: the spot colour sits a hair off the ink on headings (riso) */
h2{text-shadow:.7px .5px 0 rgba(31,61,92,.55)} h1{text-shadow:1.2px .8px 0 rgba(31,61,92,.5)}
/* wow & flutter: fast scrolling wobbles the name like a tape with a bad capstan */
body.flutter h1{animation:flutter .55s ease-in-out infinite}
@keyframes flutter{0%,100%{transform:skewX(0) translateX(0)}30%{transform:skewX(-1.6deg) translateX(1px)}70%{transform:skewX(1.1deg) translateX(-1px)}}
/* grain drifts; a tracking band sweeps now and then */
.grain{animation:grainwalk 1.6s steps(6) infinite}
@keyframes grainwalk{0%{background-position:0 0,0 0}20%{background-position:-7px 4px,5px -3px}40%{background-position:5px -9px,-4px 6px}60%{background-position:-3px 8px,7px 2px}80%{background-position:8px -2px,-6px -5px}100%{background-position:0 0,0 0}}
body::after{content:"";position:fixed;left:0;right:0;top:-12%;height:9%;pointer-events:none;z-index:6;background:linear-gradient(180deg,transparent,rgba(31,61,92,.07) 40%,rgba(234,223,202,.14) 55%,transparent);mix-blend-mode:multiply;animation:trackband 19s linear infinite;opacity:.9}
@keyframes trackband{0%,86%{top:-12%}100%{top:106%}}
/* spools turn with the scroll (set from JS as --spin) */
.spool{transform-box:fill-box;transform-origin:center;transform:rotate(var(--spin,0deg))}
.tape.playing .spool{animation:none}
/* parallax layers get their offset from JS */
[data-px]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1;transform:none;transition:none} .frame[data-rv],.pin[data-rv]{transform:rotate(var(--tilt,0deg))}
  .grain,body::after{animation:none} body::after{display:none} body.flutter h1{animation:none} h2::after{transition:none} h2.in::after{width:118px}
  .frame,.pin,.polaroid,.print,.sleeve img{transition:none}
}
@media (max-width:760px){
  .tape figcaption{text-align:center;max-width:none}
  .polaroid{position:relative;right:auto;bottom:auto;top:auto;width:150px;margin:18px auto 6px;transform:rotate(-4deg)}
  .frame{width:230px} .pins{grid-template-columns:1fr;max-width:420px} .pin:nth-child(2){margin-top:0}
  .print{width:120px;margin:12px 0 0}
  .strip{gap:18px;padding:0 20px}
}
@media (min-width:761px) and (max-width:1040px){ .polaroid{right:0;bottom:-40px} }