/* BREAKBONE V4 LAYER, 18 Jul 2026. Loads AFTER breakbone.css and changes only
   what DESIGN_SYSTEM_V3_18JUL.md rules: the reading face (Charter in, 55 Roman
   out of body duty), true italic and bold semantics, and the V4 interaction
   layer (reading progress, resume chip, page-turn, ink hovers, the 3D masthead
   scene chrome). Every motion rule obeys the section 4 restraint law: depth is
   paper order, hover is ink, arrival once, scroll never hijacked, reduced
   motion first class, transforms and opacity only. Zero em-dashes in this file. */

/* ---------- the reading face: Charter (Matthew Carter, Bitstream, 1987) ----------
   Cut for 300dpi laser printers and photocopier abuse, the machine this zine
   lives on. local() hits the bundled copies on Apple platforms free of download.
   Licence ships beside the files: assets/fonts/Charter-LICENCE.txt */
@font-face{font-family:'Charter';src:local('Charter'),url('fonts/charter_regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Charter';src:local('Charter Italic'),url('fonts/charter_italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Charter';src:local('Charter Bold'),url('fonts/charter_bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Charter';src:local('Charter Bold Italic'),url('fonts/charter_bold_italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}

/* ---------- THE SYNTHETIC-BOLD KILL (redteam 18 Jul; the ransom mechanism, cause 1) ----------
   The base @font-face set registers each display face at a single weight, so the
   UA's font-weight:700 on h1/h2 made every engine synthesise bold over glyphs
   that are already Black; subtle on Windows DirectWrite, destructive on Android
   FreeType (his 09:08 and 12:26 real-phone screenshots). Re-declared here with
   the full weight range so ANY requested weight maps to the real file and no
   engine ever synthesises anything. font-synthesis:none below is the backstop. */
@font-face{font-family:'BB Blk';src:local('HelveticaNeueLTPro-Blk'),url('fonts/HelveticaNeueLTProBlk.otf') format('opentype');font-weight:100 900;font-display:swap}
@font-face{font-family:'BB BlkCn';src:local('HelveticaNeueLTPro-BlkCn'),url('fonts/HelveticaNeueLTProBlkCn.otf') format('opentype');font-weight:100 900;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-weight:100 900;font-display:swap}
@font-face{font-family:'Moms Typewriter';src:url('fonts/moms-typewriter.ttf');font-weight:100 900;font-display:swap}
@font-face{font-family:'Bootzy';src:local('Bootzy Condensed TM Regular'),url('fonts/BootzyCondensedTM-Regular-66cee2fc.ttf') format('truetype');font-weight:100 900;font-display:swap}

/* the Android autosizer opt-out, unprefixed (base css carries -webkit- only),
   and the root overflow clip that kills sideways pan under every deliberate
   bleed device (burst, ghost, kiss-cut, grit) at one stroke; the bleeds still
   bleed visually, the page no longer wobbles under a thumb (redteam finding 4). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{overflow-x:hidden;overflow-x:clip}

/* the roster, one line: Blk shouts, Charter speaks, the Typewriter labels,
   Bootzy scrawls; nobody swaps jobs. 55 Roman survives only as neutral utility
   where prose is not being read (the camera label already opts out via ui-monospace). */
:root{--body:'Charter',Georgia,'Times New Roman',serif}
body{font-size:17.5px;line-height:1.6}
/* the reading page: the section 2 site scale; measure 70ch, leading 1.6 */
.read p{font-size:17.5px;line-height:1.6;max-width:70ch}
/* true italics for record, song, zine and film titles; true bold for emphasis.
   font-synthesis off so no engine ever fakes a slant again. */
body{font-synthesis:none}
em,cite,i{font-style:italic}
strong,b{font-weight:700}
/* Charter never sets display above 24px on the site; its authority lives at
   text sizes. Headings stay BlkCn/Blk per breakbone.css; nothing to override. */

/* ---------- THE RANSOM TILES, METRIC-PROOF (redteam 18 Jul; structural, CSS-only) ----------
   The words stay baked into the HTML as .rw spans at build time, so wrapping
   between words is guaranteed by markup alone and no runtime JS exists to fail.
   The tile glyph is centred by FLEX GEOMETRY instead of baseline font metrics,
   so no platform's metric resolution (cause 2, the Android tall-box clip) can
   crop it or float it; the per-cluster autosizer opt-outs kill cause 3. */
.ransom{-webkit-text-size-adjust:100%;text-size-adjust:100%;max-height:999999px;text-wrap:normal}
.ransom .rw{white-space:nowrap;display:inline-block;max-width:100%;max-height:999999px}
.ransom .rl{display:inline-flex;align-items:center;justify-content:center;
  line-height:1;height:1.16em;min-width:.68em;padding:0 .11em;margin:0 .05em .1em 0;
  vertical-align:middle;overflow:visible}

/* the store till at phone width (redteam finding 3): the select's intrinsic
   option width defeated the old 560px patch; the column is now deterministic. */
@media(max-width:560px){
  .c76-form .c76-in,.c76-form select.c76-in{width:100%;min-width:0;max-width:100%;flex:0 0 auto}
  .c76-form .stamp{max-width:100%}
}

/* ---------- READING PROGRESS (serves reading; scroll-linked position, not decoration) ----------
   A 3px red press-rule under the nav on reading pages; scaleX driven by scroll.
   Reduced motion keeps it: it is a position indicator, not an animation. */
.v4-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;pointer-events:none;
  background:var(--red);transform:scaleX(0);transform-origin:left;opacity:0}
.v4-progress.on{opacity:1}

/* ---------- RESUME CHIP (the site remembers where you stopped) ---------- */
.v4-resume{position:fixed;left:50%;bottom:18px;transform:translate(-50%,0);z-index:81;
  display:flex;align-items:center;gap:10px;background:#0b0a08;color:#f4ead8;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 14px;box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.14);
  border:0;cursor:pointer}
.v4-resume b{color:var(--red)}
.v4-resume .x{opacity:.6;padding:2px 6px;cursor:pointer}
.v4-resume .x:hover{opacity:1;color:var(--red)}
@media(max-width:480px){.v4-resume{width:calc(100% - 28px);justify-content:space-between}}

/* ---------- PAGE-TURN (the issue pages feel like paper turning) ----------
   A paper sheet sweeps across on part-to-part navigation; 340ms, the house
   curve, transform and opacity only; reduced motion skips it entirely (JS). */
.v4-turn{position:fixed;inset:0;z-index:200;pointer-events:none;background:var(--paper-bright);
  box-shadow:-30px 0 60px rgba(0,0,0,.5);transform:translateX(102%) skewX(-2deg);opacity:0}
.v4-turn.go{transition:transform .34s cubic-bezier(.2,.72,.16,1),opacity .1s;transform:translateX(0) skewX(0);opacity:1}
.v4-turn .fold{position:absolute;left:0;top:0;bottom:0;width:44px;
  background:linear-gradient(90deg,rgba(0,0,0,.45),transparent)}

/* ---------- INK HOVERS (hover is ink: wash, bleed, press; never zoom or lift over 2px) ---------- */
/* pick the photo up: the polaroid straightens under the hand */
@media(hover:hover){
  .polaroid{transition:transform .3s cubic-bezier(.2,.72,.16,1)}
  .wallgrid .polaroid:hover{transform:rotate(0deg) translateY(-2px)!important}
  /* the drop row: the number presses in and the title bleeds red */
  .drop{transition:background .18s}
  a.drop:hover .no{color:var(--red);transform:translateX(2px)}
  a.drop .no{transition:transform .18s,color .18s;display:inline-block}
  a.drop:hover .ttl{color:var(--red)}
  /* docfig caption: the red word answers the hover */
  .docfig:hover figcaption{color:#161412}
}
/* stamp press-in already lives in breakbone.css .stamp:active; keyboard parity */
.stamp:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- THE HERO, FILM ONLY (18 Jul evening, his verdict: the hammer over the
   film blocked the view, and the pinned 178vh scene read as empty scroll space on
   desktop; the 3D strike is retired from index). The cinema hero runs on the base
   V3 geometry in breakbone.css (.cinema, 88vh, band, dymos); the hammer survives
   only as the printed mark inside the band. No pin, no scroll toll, no three.js. */

/* ---------- shared V4 UI bits ---------- */
/* the desk and arcade pages use the house form voice on dark paper */
.v4-field{display:grid;gap:6px;margin-top:12px}
.v4-field>span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.v4-field input[type=text],.v4-field 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;width:100%}
.v4-field input[type=text]:focus,.v4-field textarea:focus{outline:none;border-color:var(--red)}
.v4-chips{display:flex;flex-wrap:wrap;gap:8px}
.v4-chip{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--paper-deep);color:var(--ink);border:1.5px solid var(--ink-soft);padding:9px 12px;cursor:pointer}
.v4-chip[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.v4-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}