/* ============================================================================
   BREAKBONE, ARTICLE DEVICE LAYER (V3 build, 2 Jul 2026)
   Loaded AFTER styles.css + feature.css + craft.css on every GENERATED reading
   page (the template). Carries the devices proven page-scoped on gig-review.html,
   promoted here so every archive piece gets the full stack with zero inline CSS:
   the paper read surface, the drop cap, the printed photo, wide marginalia,
   the binding divider, the roving red accent, the full-page type quote, the red
   chant wallpaper, the foot billboard, the torn scrap note, AA small-red fixes.
   House law throughout; one red #CE161E; reduced-motion guarded.
   ============================================================================ */

/* AA small-red fixes (from the gig-review excellence layer, now global here) */
.feature__tag .tick{color:var(--red-on-black)}
.feature__tag .drop{color:var(--red-on-black)}
.upnext__phase{color:var(--red-on-black)}
.foot__legal{color:var(--muted-d)}
.prose{max-width:min(66ch,680px)}
.upnext{background-color:var(--black);
  background-image:radial-gradient(120% 90% at 50% 0%,#121212 0%,#0c0c0c 42%,var(--black) 78%);
  background-repeat:no-repeat}
.feature__bg{will-change:auto}
.feature__mark{will-change:auto}

/* 1. REAL SURFACE: the reading layer reads as printed paper, not flat white. */
.read{position:relative;background:#f3f1ea url('/assets/paper-grain.png') repeat;background-size:300px}
.read::before{content:'';position:absolute;left:0;right:0;top:0;height:64px;
  background:linear-gradient(180deg,rgba(0,0,0,.07),transparent);pointer-events:none;z-index:0}
.read > *{position:relative;z-index:1}

/* 2. DROP CAP: the entry mark. HN Black, dropped three lines, the one red hit. */
.prose--lead > p:first-of-type::first-letter{
  font-family:var(--cond,var(--disp,sans-serif));font-weight:900;
  float:left;font-size:4.7em;line-height:.74;padding:8px 14px 0 0;margin:6px 4px 0 0;
  color:var(--red,#CE161E)}

/* 3. PRINTED PHOTO: a real object on the page. White border, slight tilt, a tape
   tab, a Dymo-label caption. One bleeds wider than the column (the loud beat). */
figure.shot{margin:38px auto;position:relative;max-width:680px}
figure.shot img{display:block;width:100%;height:auto;border:7px solid #fff;
  box-shadow:0 16px 34px rgba(0,0,0,.26);filter:contrast(1.06) saturate(1.05)}
figure.shot--tilt img{transform:rotate(-1.3deg)}
figure.shot--bleed{max-width:min(112%,860px)}
figure.shot .tape{position:absolute;top:-13px;left:42px;width:78px;height:26px;
  background:rgba(206,196,166,.6);transform:rotate(-4deg);
  box-shadow:0 1px 2px rgba(0,0,0,.16);mix-blend-mode:multiply}
figure.shot figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:#3a3a3a;margin-top:11px;display:flex;gap:10px;align-items:baseline}
figure.shot figcaption b{background:var(--ink,#141414);color:#fff;padding:2px 7px;letter-spacing:.09em;flex:none}

/* 4. MARGINALIA: a hand side-note in the outer margin on wide screens. */
.read__wrap,.run{position:relative}
@media(min-width:1120px){
  .read__wrap .mnote,.run .mnote{position:absolute;top:0;left:calc(50% + 360px);width:188px;margin:0}
}

/* 5. THE BINDING GADGET: a small red device divides consecutive runs. */
.run + .run::before,.run + .read__wrap::before,.read__wrap + .run::before{
  content:'/ / /';display:block;text-align:center;font-family:var(--mono);
  letter-spacing:.55em;color:var(--red,#CE161E);font-size:13px;margin:6px 0 28px;opacity:.85}

/* 6. MICRO-TYPE FINISH: break widows and runts. */
.prose p{text-wrap:pretty}

/* 7. ROVING RED ACCENT: single words lifted to red through the black body. */
.prose .ra{color:var(--red,#CE161E);font-weight:600}

/* 8. FULL-PAGE TYPE QUOTE on black, type only, one red phrase. */
.bigquote{background:var(--black,#0a0a0a);color:#fff;
  padding:clamp(64px,12vh,140px) var(--gut,7vw);margin:0;position:relative;isolation:isolate}
.bigquote__q{font-family:var(--cond);font-weight:900;font-size:clamp(33px,6.2vw,84px);
  line-height:.99;letter-spacing:-.015em;max-width:17ch}
.bigquote__q .red{color:var(--red,#CE161E)}
.bigquote__cite{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:#9a9a9a;margin-top:26px;display:block}

/* 9. RED CHANT WALLPAPER: a line repeated as a wall. */
.chant{background:var(--red,#CE161E);color:#fff;
  padding:clamp(40px,8vh,92px) var(--gut,7vw);overflow:hidden}
.chant__row{font-family:var(--cond);font-weight:900;font-size:clamp(27px,5vw,62px);line-height:1.05;
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;opacity:.9;margin:0}
.chant__row:nth-child(even){opacity:.6;transform:translateX(7%)}
.chant__row--loud{opacity:1;font-size:clamp(33px,6.2vw,80px)}

/* 10. FOOT BILLBOARD: the close detonates into one giant red word off the bottom edge. */
.billboard{background:var(--black,#0a0a0a);overflow:hidden;padding:clamp(34px,6vh,80px) var(--gut,7vw) 0}
.billboard__word{font-family:var(--cond);font-weight:900;color:var(--red,#CE161E);
  font-size:clamp(74px,25vw,400px);line-height:.72;letter-spacing:-.035em;text-transform:uppercase;
  margin:0;transform:translateY(13%)}

/* 11. TEG-COLLAGE SCRAP: one torn-paper note, rationed to one per piece. */
.scrap-note{position:relative;width:min(300px,84%);margin:34px auto;background:#f6f4ec;color:#161616;
  padding:22px 24px;font-family:var(--mono);font-size:14px;line-height:1.5;transform:rotate(-1.5deg)!important;
  box-shadow:3px 5px 0 rgba(0,0,0,.3);
  -webkit-mask:radial-gradient(8px at 0 50%,transparent 96%,#000) 0 0/14px 24px repeat-y,radial-gradient(8px at 100% 50%,transparent 96%,#000) 100% 0/14px 24px repeat-y,linear-gradient(#000,#000) 7px 0/calc(100% - 14px) 100% no-repeat;
          mask:radial-gradient(8px at 0 50%,transparent 96%,#000) 0 0/14px 24px repeat-y,radial-gradient(8px at 100% 50%,transparent 96%,#000) 100% 0/14px 24px repeat-y,linear-gradient(#000,#000) 7px 0/calc(100% - 14px) 100% no-repeat}
.scrap-note b{color:var(--red,#CE161E);font-weight:700}
.scrap-note .scrap-note__pin{position:absolute;top:-10px;left:50%;width:60px;height:22px;
  background:rgba(206,196,166,.6);transform:translateX(-50%) rotate(3deg);mix-blend-mode:multiply}

/* 12. ARCHIVE PROVENANCE NOTE: the from-the-archive endnote strip on generated pieces. */
.provenance{max-width:var(--mx);margin:clamp(40px,7vh,72px) auto 0;padding-top:22px;border-top:1px solid var(--rule)}
.provenance p{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);line-height:1.8;max-width:72ch}
.provenance b{color:var(--ink)}

/* 13. CONSENT STAGING STRIP: visible gate on pieces awaiting his consent pass. */
.consent-strip{background:var(--red,#CE161E);color:#fff;padding:12px var(--gut,7vw);
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.consent-strip b{background:#0a0a0a;color:#fff;padding:3px 9px;flex:none}

@media (prefers-reduced-motion:reduce){
  figure.shot--tilt img{transform:none}
  .billboard__word{transform:none}
  .chant__row:nth-child(even){transform:none}
}