@font-face{font-family:'Moms Typewriter';src:url('fonts/moms-typewriter.ttf');font-display:swap}
@font-face{font-family:'MCR Emo';src:url('fonts/mcr-emo.ttf');font-display:swap}
/* BREAKBONE V3.2, the design system. Greenfield, 2 Jul 2026, evening pass.
   Law: D:\_FABLE_JUL2026\BREAKBONE_DESIGN_BIBLE.md + ZINE_DESIGN_LANGUAGE.md devices.
   Direction: THE FLYPOSTER WALL, now with the wall's depth; pasted layers, torn
   black bands, dymo binding gadget, ransom headings, xerox and duotone photo
   treatments, wheat-paste stains. Real LT Pro + Bootzy embedded from his files.
   NOTE licence: LT Pro desktop licences rarely cover public web embedding; fine
   for the staged/local build; at public deploy either add a web licence or swap
   the url() sources for the fallback stack. */

/* ---------- faces (his real files; exact PostScript names as local() keys) ---------- */
@font-face{font-family:'BB Blk';src:local('HelveticaNeueLTPro-Blk'),url('fonts/HelveticaNeueLTProBlk.otf') format('opentype');font-display:swap}
@font-face{font-family:'BB BlkCn';src:local('HelveticaNeueLTPro-BlkCn'),url('fonts/HelveticaNeueLTProBlkCn.otf') format('opentype');font-display:swap}
@font-face{font-family:'BB Roman';src:local('HelveticaNeueLTPro-Roman'),url('fonts/Helvetica Neue LT Pro 55 Roman.otf') format('opentype');font-display:swap}
@font-face{font-family:'Bootzy';src:local('Bootzy Condensed TM Regular'),url('fonts/BootzyCondensedTM-Regular-66cee2fc.ttf') format('truetype');font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* THE INK WORLD (9 Jul 2026, his rebrand order: the beige wall read old-fashioned;
     the scene demographic lives on black). Dark wall, dark sheets, paper-bright type;
     the red untouched. The paper world is one revert away: restore the three paper
     values + delete the DARK THEME PATCHES block at the foot of this file. */
  --paper:#141414;--paper-deep:#0d0d0d;--paper-bright:#1b1b1b;
  --ink:#e8e4dc;--ink-soft:#9e9b96;
  --red:#ff0f0f;--red-deep:#9e1015;
  --gut:clamp(16px,4vw,56px);--mx:1240px;
  --blk:'BB Blk','Arial Black',sans-serif;
  --cond:'BB BlkCn','BB Blk','Arial Narrow',sans-serif;
  --body:'BB Roman','Helvetica Neue',Arial,sans-serif;
  --boot:'Bootzy','BB BlkCn',sans-serif;
  --mono:'Moms Typewriter','Consolas','Courier New',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper-deep);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- the wall: paste-stains + ghost posters UNDER everything ---------- */
.wall{position:relative;min-height:100svh;
  background:
    radial-gradient(900px 480px at 15% 4%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(700px 520px at 88% 30%, rgba(122,98,64,.14), transparent 55%),
    radial-gradient(500px 400px at 30% 80%, rgba(122,98,64,.10), transparent 60%),
    repeating-linear-gradient(92deg, transparent 0 170px, rgba(80,66,48,.06) 170px 172px),
    var(--paper-deep);}
.underwall{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.underwall .ghost{position:absolute;font-family:var(--boot);text-transform:uppercase;
  color:rgba(63,54,44,.13);line-height:.9;white-space:nowrap;user-select:none}
.grain{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- sheets, tape, torn bands ---------- */
.sheet{position:relative;background:var(--paper);color:var(--ink);z-index:1;
  box-shadow:0 1px 2px rgba(40,30,20,.3),0 14px 34px rgba(40,30,20,.22);
  padding:clamp(18px,3vw,34px)}
.sheet--bright{background:var(--paper-bright)}
.sheet--red{background:var(--red);color:var(--paper-bright)}
.sheet--ink{background:var(--ink);color:var(--paper)}
.sheet--tl{transform:rotate(-1.2deg)}.sheet--tr{transform:rotate(.9deg)}
.sheet--torn{clip-path:none;background:transparent}
.sheet--torn::before{content:"";position:absolute;inset:0;background:var(--paper);clip-path:polygon(0 1.4%,4% .2%,27% 1%,52% 0,78% 1.2%,100% .3%,99.5% 98%,73% 99.2%,44% 98.4%,16% 100%,0 98.4%);z-index:0}
.sheet--torn.sheet--bright::before{background:var(--paper-bright)}
.sheet--torn.sheet--red::before{background:var(--red)}
.sheet--torn.sheet--ink::before{background:var(--ink)}
.sheet--torn>*{position:relative;z-index:1}
.sheet::before{content:"";position:absolute;inset:0 0 auto 0;height:16px;
  background:linear-gradient(rgba(255,255,255,.4),transparent);pointer-events:none}
.tape{position:absolute;width:104px;height:26px;background:url('photos/tape-a.png') center/100% 100% no-repeat;
  filter:drop-shadow(0 2px 3px rgba(40,30,20,.35));transform:rotate(-4deg);top:-13px;left:26px;z-index:2}
.tape--tr{left:auto;right:26px;transform:rotate(5deg);background-image:url('photos/tape-b.png')}
.tape--mid{left:50%;margin-left:-52px;transform:rotate(-1deg);background-image:url('photos/tape-c.png')}
.band{position:relative;background:var(--ink);color:var(--paper-bright);padding:.1em .18em;line-height:1;
  clip-path:polygon(0 6%,1.5% 0,98.5% 1.5%,100% 9%,99.2% 92%,97.5% 100%,2.5% 98.5%,0 90%);display:inline-block;transform:rotate(-.8deg)}
.band--red{background:var(--red)}
/* tape on torn sheets sits INSIDE the clip (over the tear) so the clip-path cannot decapitate it */
.sheet--torn .tape{top:-13px;z-index:2}
.sheet--torn .tape--tr{top:-13px;z-index:2}
::selection{background:var(--red);color:var(--paper-bright)}
.pull{overflow:visible}

/* ---------- type voices ---------- */
.masthead{font-family:var(--blk);text-transform:lowercase;letter-spacing:-.05em;line-height:.76;
  font-size:clamp(54px,13.5vw,208px);color:var(--paper-bright)}
.masthead .bone{color:var(--red)}
/* headings that go somewhere carry the link themselves (the named complaint, fixed at the type layer) */
h1 a,h2 a{color:inherit;text-decoration:none}
h1 a:hover,h2 a:hover{color:var(--red);text-shadow:2px 2px 0 rgba(22,20,18,.18)}
.sheet--red h1 a:hover,.sheet--red h2 a:hover{color:var(--paper-bright);text-shadow:3px 3px 0 var(--red-deep)}
.sheet--red .kick{color:#fff}
.stamp:active{transform:rotate(-.6deg) translateY(2px);box-shadow:0 0 0 rgba(40,30,20,.4)}
.ransom .rw{white-space:nowrap;display:inline-block}
.pull .w{display:inline-block}
h1,h2,h3{font-family:var(--cond);text-transform:uppercase;letter-spacing:-.015em;line-height:.86}
.h-poster{font-size:clamp(38px,7vw,102px)}
.h-mid{font-size:clamp(26px,4.2vw,54px)}
.boot{font-family:var(--boot);text-transform:uppercase;letter-spacing:.01em}
.kick{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.kick b{color:var(--red)}
.lede{font-size:clamp(16px,1.9vw,20px);max-width:60ch}
.dymo{display:inline-block;font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--ink);color:var(--paper-bright);padding:4px 11px 3px;
  transform:rotate(-.6deg);box-shadow:inset 0 -1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4)}
.dymo--red{background:var(--red)}
.dymo--tilt{transform:rotate(1.4deg)}

/* ransom headings: cut-paper tiles BAKED at build time by gen_pages.py. each letter's
   rotation, offset and size ride inline custom props (--r/--y/--s), so a phone renders
   exactly what a desktop renders and no client JS is involved; the old runtime wrapper's
   per-word nth-child styling reshuffled on mobile reflow, the longstanding bug. */
.ransom .rl{display:inline-block;background:var(--paper-bright);border:1.5px solid var(--ink);
  padding:.04em .14em;margin:0 .05em .08em 0;box-shadow:1.5px 2px 0 rgba(40,30,20,.4);
  font-size:calc(1em*var(--s,1));transform:rotate(var(--r,0deg)) translateY(var(--y,0em))}
.ransom .rl--paper{background:var(--paper)}
.ransom .rl--ink{background:var(--ink);color:var(--paper-bright)}
.ransom .rl--red{background:var(--red);color:var(--paper-bright)}

/* ---------- photo treatments ---------- */
.ph{display:block;width:100%;height:auto}
.ph--duored{filter:url(#duored) contrast(1.05)}
.ph--xerox{filter:url(#xerox)}
.polaroid{background:var(--paper-bright);padding:10px 10px 14px;box-shadow:0 2px 4px rgba(40,30,20,.3),0 14px 30px rgba(40,30,20,.25);position:relative}
.polaroid .cap{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}
.polaroid .cap b{color:var(--red)}

/* stamp (rubber) */
.stampmark{display:inline-grid;place-items:center;width:96px;height:96px;border:3px double var(--red);
  border-radius:50%;color:var(--red);font-family:var(--boot);font-size:14px;text-align:center;line-height:1.05;
  transform:rotate(-12deg);opacity:.85;mix-blend-mode:multiply}

/* doodles */
.squiggle{height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M2 8 Q 12 0 22 8 T 42 8 T 62 8 T 82 8 T 102 8 T 122 8' fill='none' stroke='%23161412' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;opacity:.8}
.star{color:var(--red);font-size:20px;line-height:1}
.margin-note{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);
  border-left:2px solid var(--red);padding-left:10px;max-width:36ch;transform:rotate(-.4deg)}
.arrow-note{font-family:var(--boot);font-size:16px;color:var(--ink);transform:rotate(-2deg);display:inline-block}
.arrow-note::after{content:" →"}

/* chant wallpaper */
.chantwall{position:relative;overflow:hidden}
.chantwall::before{content:"";position:absolute;inset:-20%;opacity:.08;transform:rotate(-8deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='60'%3E%3Ctext x='0' y='42' font-family='Impact,Arial Black' font-size='40' fill='%23ff0f0f'%3EBELIEVE BELIEF BEYOND%3C/text%3E%3C/svg%3E") repeat}
.chantwall>*{position:relative}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:3px solid var(--ink);
  display:flex;align-items:center;gap:14px;padding:9px var(--gut);flex-wrap:wrap}
.nav .wordmark{font-family:var(--blk);font-size:25px;letter-spacing:-.045em;text-transform:lowercase;color:var(--ink);text-decoration:none}
.nav .wordmark span{color:var(--red)}
.nav-links{display:flex;gap:3px;flex-wrap:wrap;margin-left:auto}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:6px 9px;border:1.5px solid transparent}
.nav-links a:hover,.nav-links a[aria-current]{border-color:var(--ink);background:var(--paper-bright)}
.nav-links a.now{background:var(--red);color:var(--paper-bright);font-weight:700}

/* ---------- layout ---------- */
.wallgrid{position:relative;z-index:1;max-width:var(--mx);margin:0 auto;padding:clamp(26px,5vh,60px) var(--gut);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px);align-items:start}
.s12{grid-column:span 12}.s8{grid-column:span 8}.s7{grid-column:span 7}.s6{grid-column:span 6}.s5{grid-column:span 5}.s4{grid-column:span 4}
@media (max-width:860px){.s8,.s7,.s6,.s5,.s4{grid-column:span 12}.sheet--tl,.sheet--tr{transform:rotate(-.4deg)}}

/* hero photo sheet */
.heroph{position:relative;overflow:hidden;padding:0;background:var(--ink)}
.heroph img{display:block;width:100%;height:clamp(380px,62vh,640px);object-fit:cover}
.heroph .over{position:absolute;inset:auto 0 0 0;padding:clamp(16px,3vw,36px)}
.heroph .topstrip{position:absolute;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap}

/* drops list */
.drop{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1.5px solid rgba(22,20,18,.28);text-decoration:none;color:var(--ink)}
.drop:hover{background:rgba(255,15,15,.06)}
.drop .no{font-family:var(--mono);font-size:13px;color:var(--red)}
.drop .ttl{font-family:var(--cond);font-size:clamp(20px,3vw,34px);text-transform:uppercase;line-height:.9}
.drop .st{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.drop .st.live{color:var(--red);font-weight:700}

.stamp{display:inline-block;font-family:var(--boot);text-transform:uppercase;font-size:19px;letter-spacing:.02em;
  background:var(--ink);color:var(--paper-bright);padding:10px 18px 8px;text-decoration:none;
  transform:rotate(-.6deg);box-shadow:2px 3px 0 rgba(40,30,20,.4)}
.stamp--red{background:var(--red)}
.stamp:hover{transform:rotate(-.6deg) translateY(-2px)}

/* reading page (part-1) */
.read{max-width:760px;margin:0 auto;padding:clamp(26px,5vh,60px) var(--gut);position:relative;z-index:1}
.read .sheet{padding:clamp(24px,4vw,52px)}
.read p{margin:0 0 1.05em;font-size:18.5px;line-height:1.62}
.read .dc::first-letter{font-family:var(--blk);font-size:3.6em;float:left;line-height:.8;padding:2px 8px 0 0;color:var(--red)}
.read .pull{margin:1.6em 0;padding:14px 18px;background:var(--ink);color:var(--paper-bright);
  font-family:var(--cond);font-size:clamp(20px,3vw,30px);text-transform:uppercase;line-height:.95;
  clip-path:polygon(0 6%,2% 0,99% 3%,100% 14%,98% 92%,96% 100%,2% 97%,0 86%);transform:rotate(-.5deg)}
.read .datemark{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--red);text-transform:uppercase;margin:1.4em 0 .6em}

/* footer */
.foot{position:relative;z-index:1;background:var(--ink);color:var(--paper);margin-top:clamp(40px,8vh,90px)}
.foot .in{max-width:var(--mx);margin:0 auto;padding:32px var(--gut);display:flex;flex-wrap:wrap;gap:20px;align-items:baseline;justify-content:space-between}
.foot .mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#cfc8ba}
.foot a{color:var(--paper);text-decoration:none;border-bottom:1.5px solid var(--red)}
.foot .bb{font-family:var(--blk);font-size:32px;text-transform:lowercase;letter-spacing:-.045em}
.foot .bb span{color:var(--red)}

.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* mobile overflow law (3 Jul; live-site screenshots): rotated sheets and nowrap columns
   were pushing text past the viewport edge; at phone width, rotation calms down,
   status columns stack, and long kickers wrap instead of running off the paper */
.sheet{overflow-wrap:break-word}
@media (max-width:680px){
  .polaroid{transform:rotate(.4deg)!important}
  .sheet--tl,.sheet--tr{transform:rotate(-.3deg)}
  .drop{grid-template-columns:auto 1fr}
  .drop .st{grid-column:2;white-space:normal;margin-top:2px}
  .kick{letter-spacing:.08em;font-size:12px}
  .heroph img{height:clamp(320px,52vh,460px)}
}

/* ============================================================
   CONTENT BEATS DECORATION, the z-index law (Opus, 4 Jul 2026)
   Root cause of the tape-over-text bug AND the mobile grey box:
   .tape is position:absolute z-index:2 while text inside .sheet
   carried no stacking order, so on torn sheets (where
   .sheet--torn .tape drops to top:8px, i.e. INSIDE the content)
   the wheat tape rectangle painted OVER the first line, the
   kicker on the subpages and the lede's 'The Brisbane' on the
   phone. Permanent fix, two parts: (1) real content always
   outranks decoration, so text can never be occluded again even
   if tape geometry regresses; (2) torn sheets reserve a clean
   top strip so the tape lands on paper margin, not on the words.
   Reverse: delete this whole block. Guard: mobile_qa check.
   ============================================================ */
.kick,.lede,.band,.masthead,.drop,.margin-note,.cap,.dymo,.stamp,
.arrow-note,.read p,.read .datemark,.read .pull,h1,h2,h3,.pull{
  position:relative;z-index:3}
.sheet--torn{padding-top:clamp(40px,6vw,52px)}
/* kill the mobile tap-highlight flash; the red ::selection stays */
html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}

/* ============================================================
   ROUND 2, the design lift (4 Jul; Fable session, ausify + Microdot cues
   mapped through the Design Bible; every effect transform/opacity only)
   ============================================================ */
/* fluid root scale: type resizes continuously, no breakpoint jumps */
html{font-size:clamp(15px,calc(15px + .2vw),18px)}
/* the underline that grows from the left; nav + in-copy links */
.nav-links a,.read a:not(.stamp),.margin-note a{position:relative;text-decoration:none}
.nav-links a::after,.read a:not(.stamp)::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav-links a:hover::after,.read a:not(.stamp):hover::after{transform:scaleX(1)}
/* the chant marquee: the wallpaper made alive; pauses for a reader's eye */
.marquee{overflow:hidden;background:#161412;border-block:2px solid var(--red,#ff0f0f);padding:10px 0}
.marquee .mq{display:inline-block;white-space:nowrap;font-family:'Moms Typewriter',Consolas,monospace;letter-spacing:.3em;
  text-transform:uppercase;font-size:14px;color:#ff0f0f;animation:mq 38s linear infinite}
.marquee:hover .mq{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* full-bleed billboard plate for the gut-punch lines on reading pages */
.bill{background:#161412;color:#f4f0e4;padding:clamp(40px,7vw,84px) clamp(20px,5vw,64px);margin:26px 0;
  clip-path:polygon(0 3%,2% 0,98% 1%,100% 5%,99.4% 96%,98% 100%,2% 99%,0 95%)}
.bill p{font-family:'BB BlkCn','Helvetica Neue LT Pro',sans-serif;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,64px);line-height:.95;letter-spacing:-.01em;max-width:22ch}
.bill p b{color:#ff0f0f;font-weight:inherit}
/* document-texture rest stop: a real printed object between paragraphs, never over them */
.docfig{margin:30px auto;max-width:520px;background:#f7f5ef;padding:12px 12px 0;transform:rotate(-1.2deg);
  box-shadow:0 3px 6px rgba(30,25,18,.3),0 20px 40px rgba(30,25,18,.22);position:relative}
.docfig.rot-r{transform:rotate(1.4deg)}
.docfig img{display:block;width:100%;height:auto}
.docfig figcaption{font-family:'Moms Typewriter',Consolas,monospace;font-size:12.5px;letter-spacing:.08em;color:#33302a;
  padding:10px 4px 13px;text-align:center}
.docfig .tape{top:-15px}
/* photobooth strip: three real frames, one strip, warmth without costume */
.booth{display:flex;flex-direction:column;gap:0;background:#111;padding:10px;max-width:230px;
  transform:rotate(1.8deg);box-shadow:0 18px 36px rgba(0,0,0,.35)}
.booth img{display:block;width:100%;height:150px;object-fit:cover;filter:grayscale(1) contrast(1.2);border-bottom:8px solid #111}
.booth .cap{font-family:'Moms Typewriter',Consolas,monospace;font-size:11px;letter-spacing:.14em;color:#e7e1d4;text-transform:uppercase;padding:6px 2px 2px;text-align:center}
/* edge-fade on the drops shelf: the list bleeds off the page instead of stopping */
.fade-rail{position:relative}
.fade-rail::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(244,240,228,.9))}
/* phone hardening: the 390px floor the 680px pass never reached */
@media (max-width:480px){
  :root{--gut:14px}
  .stampmark,.stamp-mark{transform:scale(.72) rotate(-12deg)}
  .h-poster{font-size:clamp(28px,9vw,38px);overflow-wrap:break-word}
  .tape{width:110px;height:30px}
  .bill p{font-size:clamp(26px,8vw,38px)}
  .docfig{max-width:100%}
  .booth{max-width:180px}.booth img{height:120px}
}
@media (prefers-reduced-motion:reduce){
  .marquee .mq{animation:none}
  .nav-links a::after,.read a:not(.stamp)::after{transition:none}
}
/* round-2 reading page spacing: multiple sheets + billboards stack with air */
.read .sheet{margin-bottom:22px}
.read .bill{margin:22px 0}

/* THE VENUE HERO (4 Jul): the PITP film, Knebworth-doc grade, cut with printed duored
   frames; the moments-of-consciousness flicker, 2 flashes per 5.6s cycle, seizure-safe */
.herofilm{position:relative}
.herofilm video{display:block;width:100%;height:clamp(380px,62vh,640px);object-fit:cover;filter:saturate(.9) contrast(1.06)}
.herofallback{display:none}
.flick{position:absolute;inset:0;pointer-events:none}
.flick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.flick img:nth-child(1){animation:flk1 5.6s steps(1) infinite}
.flick img:nth-child(2){animation:flk2 5.6s steps(1) infinite}
@keyframes flk1{0%,33%{opacity:0}33.5%,35.5%{opacity:1}36%,100%{opacity:0}}
@keyframes flk2{0%,71%{opacity:0}71.5%,73.5%{opacity:1}74%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.herofilm video,.flick{display:none}.herofallback{display:block}}
@media (max-width:680px){.herofilm video{height:clamp(320px,52vh,460px)}}

/* ============ THE CINEMA (4 Jul evening round; the venue world proper) ============
   Placement law from the research pass: film sits UNDER a scrimmed sticky nav,
   88vh so the paper world's edge shows (no false floor), title lockup is DOM on
   the film, poster graded identically, mobile gets the still + flicker. */
.venue .nav{position:sticky;top:0;z-index:60;background:#0B0A09;border-bottom:1px solid rgba(231,225,212,.12)}
.venue .nav a{color:#f4f0e4}
.venue .nav .nav-links a:hover{color:#fff}
.cinema{position:relative;height:88vh;min-height:480px;background:#0B0A09;overflow:hidden}
.cinema video,.cinema-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.08) saturate(.82) brightness(.98) sepia(.12) hue-rotate(-6deg)}
.cinema-poster{display:none}
.cinema .flick{position:absolute;inset:0;pointer-events:none}
.cinema .flick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.cinema-grade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,9,.25) 0%,transparent 30%,transparent 62%,rgba(11,10,9,.82) 100%)}
.cinema-top{position:absolute;top:76px;left:clamp(16px,4vw,44px);display:flex;gap:8px;flex-wrap:wrap;z-index:3}
.cinema-lock{position:absolute;left:clamp(16px,4vw,44px);bottom:clamp(28px,6vh,64px);z-index:3}
.cinema-sub{font-family:'Moms Typewriter',Consolas,monospace;font-size:clamp(11px,1.4vw,14px);letter-spacing:.3em;color:#e7e1d4;margin-top:10px}
.cinema-cue{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);color:#ff0f0f;font-size:13px;z-index:3;
  animation:cuebob 2.4s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
.foot{background-color:#161412;background-image:linear-gradient(rgba(22,20,18,.86),rgba(22,20,18,.86)),url('photos/art-venue-wall.jpg');background-size:cover;background-position:center}
.artband{display:block;width:100%;height:auto;margin:0 0 18px}
.kisscorner{position:absolute;right:-30px;bottom:-24px;width:170px;opacity:.9;transform:rotate(4deg);pointer-events:none}
@media (max-width:680px){
  .cinema{height:62vh;min-height:380px}
}
@media (prefers-reduced-motion:reduce){
  .cinema video,.cinema .flick,.cinema-cue{display:none}
  .cinema-poster{display:block}
}
@media (max-width:680px){.cinema-sub{white-space:normal;letter-spacing:.16em;max-width:88vw}}

/* ============ POLISH ROUND (4 Jul night; the approved constellation calls) ============ */
/* the mark joins the wordmark; stamps in on load like ink hitting paper */
.wm-mark{height:1.12em;width:auto;vertical-align:-16%;margin-right:7px;display:inline-block;
  animation:stampin .38s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes stampin{0%{transform:scale(1.6) rotate(-14deg);opacity:0}60%{transform:scale(.94) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.mast-mark{height:.92em;width:auto;vertical-align:-8%;margin-right:14px;display:inline-block}
/* the marquee goes emo; the one loud face, one job */
.marquee .mq{font-family:'MCR Emo','Moms Typewriter',Consolas,monospace;font-size:17px;letter-spacing:.18em;color:#e7e1d4}
.marquee .mq b{color:#ff0f0f;font-weight:inherit}
/* the jagged burst: one hand-slapped authority stamp per surface, never centred */
.burst{position:absolute;z-index:5;display:grid;place-items:center;width:132px;height:132px;
  background:#ff0f0f;color:#faf7ef;font-family:'Moms Typewriter',Consolas,monospace;font-size:14px;
  line-height:1.15;text-align:center;text-transform:uppercase;letter-spacing:.04em;
  transform:rotate(-11deg);padding:16px;
  clip-path:polygon(50% 0,58% 12%,71% 4%,73% 18%,88% 15%,84% 29%,100% 32%,90% 43%,99% 55%,85% 58%,91% 73%,76% 71%,76% 87%,62% 80%,55% 95%,47% 82%,33% 92%,32% 76%,17% 79%,23% 64%,7% 60%,18% 49%,4% 39%,19% 34%,12% 19%,28% 22%,29% 6%,42% 13%)}
.burst b{display:block;font-size:17px}
/* the door list: five slots, hand-picked weekly; top-8 energy without the costume */
.doorlist{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.doorlist .dl{display:inline-flex;align-items:baseline;gap:7px;background:#161412;color:#e7e1d4;
  padding:7px 12px 6px;transform:rotate(-.4deg)}
.doorlist .dl:nth-child(even){transform:rotate(.5deg)}
.doorlist .dl b{font-family:'Moms Typewriter',Consolas,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#ff0f0f}
.doorlist .dl span{font-size:14.5px}

/* wordmark surfaces are overflow-proof on every engine. ROOT CAUSE (9 Jul): negative
   letter-spacing also subtracts after the FINAL glyph, so the terminal 'e' paints past
   its own layout box and clips against .cinema's overflow:hidden at some widths/zooms;
   the clamps below never addressed that. The fix is trailing padding >= the tracking,
   on every negative-tracked wordmark surface. */
.masthead{padding-right:.07em}
.nav .wordmark{padding-right:.055em}
.foot .bb{font-size:clamp(26px,7vw,40px);max-width:100%;overflow-wrap:anywhere;padding-right:.055em}
.cinema-lock{right:clamp(16px,4vw,44px)}
.cinema-lock .band{max-width:100%}
.cinema-lock .masthead{font-size:clamp(44px,12.5vw,190px);white-space:nowrap}

.drop--soon{cursor:default}
.drop--soon:hover{background:inherit}

/* the Sources and Notes apparatus (part 5); two quiet columns of receipts */
.srclist{columns:2;column-gap:40px;margin:8px 0 0;padding-left:18px;max-width:70rem}
.srclist li{font-size:14.5px;line-height:1.5;margin-bottom:7px;break-inside:avoid}
@media (max-width:720px){.srclist{columns:1}}

/* THE SETLIST WALL: real scanned matter, visible (his 4 Jul callout) */
.setwall{background:#0f0d0c;padding:clamp(30px,6vw,64px) var(--gut);display:flex;gap:clamp(14px,3vw,36px);justify-content:center;align-items:flex-start;flex-wrap:wrap}
.setwall img{width:clamp(150px,26vw,300px);height:auto;background:#f4f0e4;padding:8px;box-shadow:0 3px 8px rgba(0,0,0,.6),0 18px 40px rgba(0,0,0,.45)}
.setwall-cap{width:100%;text-align:center;font-family:'Moms Typewriter','Consolas',monospace;font-size:12.5px;letter-spacing:.16em;color:#8f887b;text-transform:uppercase;margin-top:6px}

/* ============ CONSTELLATION ROUND 2 (5 Jul; one loud thing per surface, each device rationed) ============ */
/* Large Mirage warm grade; unifies gig-gallery lighting into one 70s-stock tone */
.ph--grade{filter:saturate(.92) contrast(1.06) sepia(.10) brightness(1.02)}
/* emo glitter dust; ONE headline on ONE page, never site-wide (MySpace legacy, rationed) */
.glitter{position:relative;display:inline-block}
.glitter::after{content:"";position:absolute;inset:-10px -16px;background:url('photos/glitter.png') center/cover no-repeat;opacity:.38;pointer-events:none;mix-blend-mode:screen}
/* Nessa lace texture; DORMANT until a femme-profile feature activates it (fusion, never a parallel girls palette) */
.lace-under{position:relative}
.lace-under::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:radial-gradient(circle 8px at 12px 12px,transparent 6px,var(--ink) 6.5px,transparent 7.5px),radial-gradient(circle 5px at 34px 30px,transparent 3px,var(--ink) 3.5px,transparent 4.5px);background-size:44px 40px}
/* MSCHF two-glyph content-tier code; first live use arrives with the mixed-tier archive shelf */
.mk-std::before{content:"»3";color:var(--red);margin-right:8px}
.mk-x::before{content:"+";color:var(--red);font-weight:800;margin-right:8px}
/* Artemas one-grit detail; a single high-contrast object bleeding off a plain sheet corner.
   THE VERMINATE FIX (6 Jul, his named bug): .grit-corner is absolute against the article,
   so on a long-text sheet it floated over wherever the last line happened to land and
   clipped the 'Nights In Venice' paragraph's line-ends. Fix has two parts: (1) every sheet
   that carries the device gets a reserved bottom-right clearance so body text word-wraps
   AROUND the corner's footprint instead of running under it, sized with margin past the
   image's own rotated bounding box; (2) the rule is scoped to .grit-host, applied only to
   the one article that carries the device today, so a future short-sheet use of the same
   device is never forced into clearance it does not need. Reverse: delete .grit-host block. */
.grit-corner{position:absolute;right:-14px;bottom:-20px;width:132px;transform:rotate(6.5deg);filter:grayscale(1) contrast(1.55);box-shadow:0 6px 18px rgba(40,30,20,.4);z-index:2;pointer-events:none}
/* clearance sized past the ROTATED bounding box (a 132px square tilted 6.5deg measures
   ~148x166px), not the unrotated width, so the reserved gap never reads short at any
   breakpoint; verified by measuring .grit-corner's own getBoundingClientRect, not guessed */
.grit-host{padding-bottom:200px}
.grit-host>p:last-of-type{max-width:calc(100% - 170px)}
@media (max-width:680px){.grit-host{padding-bottom:190px}.grit-host>p:last-of-type{max-width:calc(100% - 150px)}}
@media (max-width:480px){.grit-host{padding-bottom:170px}.grit-host>p:last-of-type{max-width:100%}}

/* ============ CONSTELLATION ROUND 3 (6 Jul; the three loud-thing gap devices plus the two
   interactive features named repeatedly and never built: torch and stagelight. one device per
   surface, every one reduced-motion guarded, none can touch page layout by construction) ============ */

/* club-76 back room; a LIVE oil-and-water light show (7 Jul rebuild, Iggy's word: the
   static psych-oil.png read bland, overt and dead, with no interaction). #psychcanvas
   paints animated, pointer-pushed oil blobs in the house palette (the engine ships on the
   page itself). this gradient mesh is the reduced-motion / no-JS ground so the room is
   never a flat box; the grain ::after keeps the painted-not-vector edge. red-forward, one
   surface only. the old home-page .psych-band is gone (it stole the cinema film's attention).
   9 Jul: purple/teal/cool-pink stops replaced with reds, ambers and a warm-white bloom, his
   AI-purple call; the stop list now actually delivers the red-forward the line above claims. */
.psych-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  min-height:86vh;display:flex;align-items:center;
  background:
    radial-gradient(46% 60% at 18% 20%, #ff6a1f, transparent 62%),
    radial-gradient(42% 55% at 84% 24%, #ffd23e, transparent 60%),
    radial-gradient(54% 66% at 80% 84%, #d81e3c, transparent 64%),
    radial-gradient(50% 62% at 16% 86%, #ff9e2c, transparent 64%),
    radial-gradient(62% 72% at 50% 52%, #ffe3b8, transparent 70%),
    linear-gradient(135deg, #400a0d, #7a0f16)}
.psych-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}
.psych-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.4;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23pn)' opacity='.5'/%3E%3C/svg%3E")}
.psych-hero>.psych-inset{position:relative;z-index:3}  /* scope to the inset only; a bare >* here has equal specificity to .psych-canvas and was demoting the canvas to position:relative, making it a flex item that shoved the copy off-screen */
.psych-inset{background:rgba(11,10,9,.5);backdrop-filter:blur(3px);padding:clamp(24px,4vw,44px);border:1px solid rgba(255,255,255,.14)}
/* the back-room sign-in; instant conversion, two fields, house type on translucent ink */
.c76-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:stretch}
.c76-in{font-family:var(--mono);font-size:15px;letter-spacing:.04em;color:#f4efe2;
  background:rgba(11,10,9,.55);border:1.5px solid rgba(244,240,228,.4);padding:12px 14px;min-width:210px;flex:1 1 210px}
.c76-in::placeholder{color:rgba(244,240,228,.55)}
.c76-in:focus{outline:none;border-color:var(--red);background:rgba(11,10,9,.75)}
@media (max-width:560px){.c76-form{flex-direction:column}.c76-in{min-width:0;flex:0 0 auto}}
.stagelights{display:none}
@media(prefers-reduced-motion:reduce){.psych-canvas{display:none}}

/* BEYOND.; two-colour press misregistration. the red pass and the black pass sit a hair
   off-register, like a hand-fed zine cover run slightly hot. static by design; the old
   animated conic 'foil' cycled a purple stop, the exact AI hue the house bans.
   em offsets so the slip scales with the clamp() heading size; the ink pass is near-solid
   so it reads as a second plate, not a drop shadow (the 9 Jul critique's catch). */
.misreg{color:var(--red);text-shadow:.048em .022em 0 rgba(11,10,9,.85),-.022em -.014em 0 rgba(242,233,220,.55)}

/* MSCHF / BRAT; the hammer-and-bone mark becomes a window into a real gig crowd. the mark PNG alpha
   masks a real Breakbone crowd photo. cover/hero only, one surface (the History masthead). the mask
   is raster for now; a crisp single-path SVG mark is the noted follow-up. */
.mark-fill{display:block;width:100%;aspect-ratio:1/1;
  background:url('photos/hero-crowd.jpg') center/cover no-repeat;
  filter:grayscale(.14) contrast(1.08) brightness(1.02);
  -webkit-mask:url('photos/mark-red.png') center/contain no-repeat;
  mask:url('photos/mark-red.png') center/contain no-repeat}

/* TORCH (his named feature, built so it CANNOT break layout: a fixed, pointer-events:none overlay
   dimming the wall to a spotlight that follows the cursor). toggled by the switch, off by default;
   the spotlight centre is driven by --tx/--ty set on pointermove; touch drags it too. */
/* TORCH REMOVED 9 Jul 2026, his verdict: fixed-position on mobile, not user-friendly,
   serves no purpose. The button, layer, script and rules are gone from index.html. */

/* STAGELIGHT (his named feature): two coloured beams sweep the hero, pointed down at the masthead,
   like a stage rig. pure overlay inside .cinema, pointer-events:none, screen-blended so it only
   adds light and can never shift layout. off for reduced-motion. */
.stagelights{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.5}
.stagelights span{position:absolute;top:-46%;left:42%;width:15%;height:190%;transform-origin:top center;
  background:linear-gradient(to bottom,rgba(255,15,15,.55),rgba(255,15,15,0) 72%);filter:blur(7px)}
.stagelights span:nth-child(1){animation:sweepL 9s ease-in-out infinite alternate}
.stagelights span:nth-child(2){left:44%;background:linear-gradient(to bottom,rgba(245,197,24,.5),rgba(245,197,24,0) 72%);animation:sweepR 11s ease-in-out infinite alternate}
@keyframes sweepL{from{transform:translateX(-150%) rotate(-15deg)}to{transform:translateX(-30%) rotate(10deg)}}
@keyframes sweepR{from{transform:translateX(30%) rotate(15deg)}to{transform:translateX(150%) rotate(-10deg)}}
@media(prefers-reduced-motion:reduce){.stagelights span{animation:none}}

/* ============ TYPOGRAPHY PASS (7 Jul; the 50+4 Rules of Type applied site-wide, CSS-only so his
   verbatim prose is never touched: real kerning and ligatures, legibility rendering, balanced
   heading line-breaks, pretty body wrapping that kills rivers and orphans, hanging punctuation,
   and the readable 66 to 75 character measure the guide sets as optimal) ============ */
html{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1}
.wall{hanging-punctuation:first allow-end last}
h1,h2,h3,.h-poster,.h-mid,.lede{text-wrap:balance}
.read p,.sheet p,.body p,article p,.lede{text-wrap:pretty;orphans:2;widows:2}
.read p,.sheet--bright p,.sheet--ink p,article p{max-width:70ch}

/* ============ DARK THEME PATCHES (9 Jul 2026, the ink world) ============
   The handful of rules whose light-paper assumptions the :root swap alone would
   break. Delete this block + restore the :root paper values to revert. */
.wall{background:
  radial-gradient(900px 480px at 15% 4%, rgba(255,244,220,.05), transparent 60%),
  radial-gradient(700px 520px at 88% 30%, rgba(255,15,15,.06), transparent 55%),
  radial-gradient(500px 400px at 30% 80%, rgba(255,15,15,.04), transparent 60%),
  repeating-linear-gradient(92deg, transparent 0 170px, rgba(255,255,255,.025) 170px 172px),
  var(--paper-deep)}
.underwall .ghost{color:rgba(236,228,212,.05)}
.grain{background-image:url('photos/grain-tile.png');background-size:256px 256px;opacity:.8}
.sheet{box-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.42)}
.sheet::before{background:linear-gradient(rgba(255,255,255,.05),transparent)}
.sheet--red{color:#faf7ef}
.sheet--red .kick{color:#fff}
.sheet--ink{background:#0c0a09;color:var(--ink)}
.sheet--torn.sheet--ink::before{background:#0c0a09}
.band{background:#0c0a09;color:#faf7ef}
.masthead{color:#faf7ef}
.dymo{background:#0b0a08;color:#f4ead8;box-shadow:inset 0 -1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(244,234,216,.16)}
.dymo--red{background:var(--red);box-shadow:none}
.polaroid{background:#faf7ef}
.polaroid .cap{color:#3d3a35}
.polaroid .cap b{color:var(--red)}
.ransom .rl{background:#efe7d8;border-color:#0c0a09;color:#161412}
.ransom .rl--paper{background:#d9d0bd;color:#161412}
.ransom .rl--ink{background:#0c0a09;color:#efe7d8;border-color:#efe7d8}
.ransom .rl--red{background:var(--red);color:#faf7ef;border-color:#0c0a09}
.misreg{text-shadow:.045em .02em 0 rgba(242,233,220,.4),-.02em -.012em 0 rgba(0,0,0,.65)}
.stamp{box-shadow:0 0 0 1px rgba(244,234,216,.14),0 2px 6px rgba(0,0,0,.5)}
.foot{background-color:#0b0a08}
.setwall-cap{color:var(--ink-soft)}
/* redteam round (9 Jul ~03:00): the var-flip breakages the cold audit caught */
.foot{color:var(--ink)}
.foot a{color:var(--ink)}
.foot .bb{color:#faf7ef}
.sheet:not(.sheet--red) .stampmark{mix-blend-mode:normal;background:transparent}
.sheet--red h1 a:hover,.sheet--red h2 a:hover{color:#faf7ef}
.cam__lbl{color:#efe7d8}
.psych-inset{background:rgba(11,10,9,.62)}
.wallgrid input[type=text],.wallgrid input[type=email],.wallgrid textarea{
  font-family:var(--mono);font-size:15px;background:var(--paper-deep);color:var(--ink);
  border:1.5px solid var(--ink-soft);padding:11px 13px}
.wallgrid input[type=text]:focus,.wallgrid input[type=email]:focus,.wallgrid textarea:focus{outline:none;border-color:var(--red)}
/* fade-rail faded to PAPER (the ugly white bar on his 10:17 screenshot, THE FIVE PARTS
   sheet); on the ink world it fades to the dark sheet tone instead. */
.fade-rail::after{background:linear-gradient(180deg,transparent,rgba(33,29,24,.92))}
/* ransom tiles, mobile glyph-clip fix (9 Jul 03:20, his three live screenshots): the
   h1/h2 line-height of .86 leaked into the tile line boxes and Android Chrome crops
   what desktop forgives; tiles now own their line box and give the glyphs real air. */
.ransom .rl{line-height:1.08;padding:.09em .15em .11em}