/* ============================================================================
   BREAKBONE, SHARED COLLAGE + CRAFT LAYER (brandwide)
   Built 29 Jun 2026. The Helter Skelter brief made site-wide: the hand-craft of
   the Your Pals / Wasted Opportunities scene zines (real torn-paper surfaces,
   ransom-cut and hard-stamped headers, red-duotone / halftone photo treatment,
   sparing hand marks, the printed-photo object, a binding gadget) brought onto
   Breakbone's disciplined grid and clean micro-type, so EVERY page out-crafts the
   rough zines AND out-finishes them, not just the gig review.

   Loaded AFTER styles.css (and after feature.css where present) so it can lift
   shared elements. Everything stays inside the locked house law:
     - Helvetica Neue LT Pro: Black/Black-Condensed display, 55 Roman body, Bootzy accent
     - black ink on warm off-white paper for reading; white knockout on solid black/red for impact
     - ONE red #CE161E, rationed to about five per cent of the surface
     - A4-portrait feel, tight measure, no SaaS polish
   Page-tuned hooks live at the foot of each page's own <style> block.
   Additive, transform/opacity-only motion, reduced-motion guarded, WCAG-AA.
   Zero em-dashes by rule.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. TOKENS the craft layer leans on. All harmless duplicates of the styles.css
   values, declared here so the layer is self-contained if a page is ever
   rendered without the global :root edit. --paper-warm is the off-white reading
   stock (matches the gig-review .read), one tone warmer than #fff.
   ---------------------------------------------------------------------------- */
:root{
  --red-on-black:#F4313A;     /* brand red brightened ONLY for small text on black (>=4.5:1) */
  --paper-warm:#f3f1ea;       /* warm off-white reading stock */
  --ink-soft:#1a1a1a;         /* near-black body ink */
  --tape:rgba(206,196,166,.6);/* the scanned masking-tape tab colour */
}

/* ============================================================================
   1. THE REAL SURFACE. Any reading area gets the scanned paper-grain stock with
   a soft top shadow, so it reads printed, not flat-white digital. Brandwide
   version of the gig-review .read surface. Add class 'paper' to a light section.
   ============================================================================ */
.paper{position:relative;background-color:var(--paper-warm);
  background-image:url('assets/paper-grain.png');background-repeat:repeat;background-size:300px}
.paper::before{content:'';position:absolute;left:0;right:0;top:0;height:60px;
  background:linear-gradient(180deg,rgba(0,0,0,.06),transparent);pointer-events:none;z-index:0}
.paper > *{position:relative;z-index:1}
/* AA on warm stock: the off-white paper (#f3f1ea) is one tone darker than #fff,
   so the global --muted #6f6f6f drops from 5.2:1 to 4.45:1 (just under the 4.5:1
   floor) on it. Re-point --muted INSIDE a .paper section to an AA-safe grey
   (~4.75:1 on the warm stock) so secondary labels keep clearing AA. Only on paper. */
.paper{--muted:#676767}
/* a faint toner-speckle wash for BLACK fields, so they read xeroxed not painted.
   Sits under the .gritty grain. Add 'toner' to a dark section. */
.toner{position:relative}
.toner::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url('assets/paper-grain.png');background-size:300px;mix-blend-mode:soft-light}
.toner > *{position:relative;z-index:1}

/* ============================================================================
   2. RANSOM-CUT SECTION HEADER. The Your Pals signature: a heading built from
   mismatched cut-out letters on little off-white tiles, mixed sizes and tilts,
   on a torn dark band. Use for section labels (CONTENTS, THE DROPS, FIVE PARTS).
   Markup: <span class="ransom"><b>D</b><b>R</b><b>O</b><b>P</b>...</span>
   Each <b> is one clipped letter tile. Kept LEGIBLE (the exceed): real letters,
   readable order, only the tiles and angles vary.
   ============================================================================ */
.ransom{display:inline-flex;flex-wrap:wrap;gap:5px 4px;align-items:flex-end;line-height:1}
.ransom b{display:inline-block;font-family:var(--cond,sans-serif);font-weight:900;
  font-size:clamp(20px,3.4vw,40px);line-height:.8;letter-spacing:-.01em;
  background:#f4f1ea;color:#141414;padding:5px 8px 4px;
  box-shadow:1px 2px 0 rgba(0,0,0,.32);transform:rotate(var(--rr,0deg))}
.ransom b:nth-child(3n){background:#141414;color:#fff;transform:rotate(var(--rr,1.5deg))}
.ransom b:nth-child(4n){font-size:clamp(17px,2.9vw,33px);transform:rotate(var(--rr,-2deg))}
.ransom b:nth-child(5n){background:var(--red,#CE161E);color:#fff}
.ransom b:nth-child(2n){transform:rotate(var(--rr,-1.5deg)) translateY(-2px)}
/* a word-gap tile: transparent, no tile/shadow, just opens a space between words */
.ransom b.sp{background:none!important;box-shadow:none!important;padding:0;width:clamp(10px,1.6vw,20px)}

/* ============================================================================
   3. THE HARD STAMP. A label-maker / rubber-stamp strip: white knockout caps in
   a solid red or black block, slightly rotated, the issue-binding gadget. Use
   for eyebrows, part-marks, status flags. Brandwide of the Dymo move.
   Markup: <span class="stampmark">Drop 01 · live</span>
   ============================================================================ */
.stampmark{display:inline-block;font-family:var(--mono,sans-serif);font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink,#141414);color:#fff;padding:5px 11px 6px;transform:rotate(-1.4deg);
  box-shadow:2px 2px 0 rgba(0,0,0,.22)}
.stampmark--red{background:var(--red,#CE161E)}
.stampmark--ko{background:#f4f1ea;color:#141414}     /* knockout: dark ink on the cut tile */
/* a hand-stamped framed mark, like an inked rubber stamp, rotated and outlined */
.rubber{display:inline-flex;align-items:center;gap:9px;font-family:var(--cond,sans-serif);
  font-weight:900;font-size:clamp(17px,2vw,23px);letter-spacing:.02em;text-transform:uppercase;
  color:var(--red,#CE161E);border:2.5px solid var(--red,#CE161E);padding:8px 14px 10px;
  transform:rotate(-3deg)}

/* ============================================================================
   4. HAND MARKS. Sparing, the brief's 'circled word, hand arrow, underline
   scrawl'. SVG-stroke marks so they read drawn, not typeset. Used at most once
   or twice per page. The one red hit each.
   ============================================================================ */
/* a hand-scrawled underline under an inline word: <span class="scrawl">word</span> */
.scrawl{position:relative;display:inline-block}
.scrawl::after{content:'';position:absolute;left:-3%;right:-3%;bottom:-.18em;height:.42em;
  background:no-repeat center/100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18'%3E%3Cpath d='M3 11 C40 4 70 14 100 8 S160 3 197 9' fill='none' stroke='%23CE161E' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events:none}
/* a circled word, drawn loop: <span class="circled">word</span> */
.circled{position:relative;display:inline-block;padding:.04em .42em}
.circled::after{content:'';position:absolute;inset:-.22em -.1em;
  background:no-repeat center/100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cpath d='M104 6 C44 2 12 20 10 44 C8 70 60 86 110 84 C168 82 196 60 192 38 C188 14 150 6 104 7 C100 7 96 8 92 9' fill='none' stroke='%23CE161E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events:none}
/* a hand-drawn arrow, points to a target. <span class="handarrow" aria-hidden="true"></span> */
.handarrow{display:inline-block;width:64px;height:30px;vertical-align:middle;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath d='M2 16 C18 10 40 12 56 15' fill='none' stroke='%23CE161E' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M47 7 L58 15 L46 23' fill='none' stroke='%23CE161E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ============================================================================
   5. THE BINDING GADGET. One recurring red device, the / / / divider, carries a
   whole page. Brandwide of the gig-review .run divider. Add 'gadget' to a block
   to print the divider above it, or use .gadget-rule as a standalone hr.
   ============================================================================ */
.gadget-rule{border:0;text-align:center;font-family:var(--mono,sans-serif);
  letter-spacing:.55em;color:var(--red,#CE161E);font-size:13px;margin:clamp(28px,5vh,52px) 0;opacity:.85}
.gadget-rule::before{content:'/ / /'}

/* ============================================================================
   6. THE PRINTED PHOTO as an object. White border, slight tilt, a tape tab, a
   Dymo caption, one variant bleeding wide. Brandwide of the gig-review figure.shot.
   Add class 'snap' to a <figure>; 'snap--tilt', 'snap--bleed' as modifiers.
   ============================================================================ */
figure.snap{margin:clamp(28px,5vh,42px) auto;position:relative;max-width:680px}
figure.snap img{display:block;width:100%;height:auto;border:7px solid #fff;
  box-shadow:0 16px 34px rgba(0,0,0,.26)}
figure.snap--tilt img{transform:rotate(-1.3deg)}
figure.snap--bleed{max-width:min(108%,820px)}
figure.snap .tape{position:absolute;top:-13px;left:42px;width:78px;height:26px;
  background:var(--tape);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.16);mix-blend-mode:multiply}
figure.snap figcaption{font-family:var(--mono,sans-serif);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:#3a3a3a;margin-top:11px;display:flex;gap:10px;align-items:baseline}
figure.snap figcaption b{background:var(--ink,#141414);color:#fff;padding:2px 7px;letter-spacing:.09em;flex:none}

/* ============================================================================
   7. HOUSE PHOTO MODES. The two print grades, used as utility filters on any
   <img>. red-duotone (red shadow, paper highlight, midtones killed) and 2-bit
   xerox crush. Rationed per the house law. Pair 'halftone-dots' for a copier screen.
   ============================================================================ */
.duo-red{filter:grayscale(1) contrast(1.5) brightness(1.04) sepia(1) hue-rotate(-22deg) saturate(4.2)}
.xerox{filter:grayscale(1) contrast(2.6) brightness(1.12)}
.halftone-dots{position:relative}
.halftone-dots::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.5) 1px,transparent 1.5px);background-size:4px 4px;
  mix-blend-mode:multiply;opacity:.4}

/* ============================================================================
   8. MARGINALIA. A hand side-note in the outer margin on wide screens; stacks
   inline on narrow screens. Brandwide of the gig-review .mnote.
   Place a <p class="mnote"> inside a position:relative wrapper at >=1120px.
   ============================================================================ */
.mnote{font-family:var(--mono,sans-serif);font-size:13px;line-height:1.55;color:#454545;
  border-left:2px solid var(--red,#CE161E);padding-left:13px;margin:22px 0;max-width:60ch}
.mnote b{color:var(--ink,#141414)}

/* ============================================================================
   9. TORN-PAPER SCRAP NOTE. A stuck-down collage note, white-halo, tilted, hard
   offset shadow (reads as paper, not a soft card). Rationed, one per page.
   Brandwide of the gig-review .scrap-note. Markup:
     <aside class="scrapnote"><span class="scrapnote__pin"></span> ...text... </aside>
   ============================================================================ */
.scrapnote{position:relative;width:min(320px,86%);margin:clamp(28px,5vh,40px) auto;
  background:#f6f4ec;color:#161616;padding:22px 24px;
  font-family:var(--mono,sans-serif);font-size:14px;line-height:1.5;
  transform:rotate(-1.5deg);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}
.scrapnote b{color:var(--red,#CE161E);font-weight:700}
.scrapnote--dark{background:#f4f1ea}
.scrapnote__pin{position:absolute;top:-10px;left:50%;width:60px;height:22px;
  background:var(--tape);transform:translateX(-50%) rotate(3deg);mix-blend-mode:multiply}

/* ============================================================================
   10. MICRO-TYPE FINISH (the legibility that beats the rough zines). A tighter
   reading measure (~66ch), pretty wrap to kill widows and runts, hung nothing in
   the gutter. Add 'measure' to a text container to cap it at the comfort column.
   ============================================================================ */
.measure{max-width:min(66ch,680px)}
.measure p{text-wrap:pretty}
.tightlead{line-height:1.55}

/* ============================================================================
   REDUCED MOTION, the craft layer's only motion is the figure tilt and the
   scrapnote/stamp rotations, all static rest states; nothing animates here. The
   global guard in styles.css already neutralises page animations. Settle the
   tilts flat for users who ask for no motion, for steadiness.
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  figure.snap--tilt img{transform:none}
}