/* ============================================================================
   BREAKBONE — THE DESIGN SYSTEM (locked 15 Jun 2026)
   ----------------------------------------------------------------------------
   Swiss Style spine (a real modular grid, hard rules, HN type, big numerals,
   asymmetry, generous whitespace) FUSED with Britpop/Oasis heat (the red+yellow
   supersonic offset, the slightly-askew flyposter tab, Big Break poster lineage)
   and the Y2k indie-magazine nerve of Antidismal / ixaras / MSCHF MAG.

   Black text on white for all reading. Black fields, white-knockout blocks,
   red and the yellow-offset are for hero/section moments only, never long copy.

   Grounded in Mick's REAL Fable cover templates (ASSETS/src/html): the knockout
   line-blocks, the rotated red PART tab, the HN96I boxed wordmark with the red
   text-shadow, the 3px hard rules and full-width red bands all come from there.

   ONE accent: Breakbone red #CE161E. Yellow #FFF200 only as the Oasis offset
   shadow paired with red on a hero. No third colour. No rounded corners. No
   gradients except a deliberate print/halftone texture.

   Mick's 15 Jun corrections honoured: HN96I (BLACK Italic) is the wordmark,
   NOT bold; headers use the Black WEIGHT, never CSS faux-bold.
   ============================================================================ */

/* ---- @font-face — the 7 real Helvetica Neue LT Pro OTFs in /fonts/ ---------
   (kept from the prior styles.css; the HN96I wordmark weight is load-bearing) */
@font-face{font-family:'HN55';src:url('fonts/Helvetica Neue LT Pro 55 Roman.otf');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'HN75';src:url('fonts/Helvetica Neue LT Pro 75 Bold.otf');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'HN76I';src:url('fonts/HelveticaNeueLTProBdIt.otf');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'HN96I';src:url('fonts/HelveticaNeueLTProBlkIt.otf');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'HN95';src:url('fonts/HelveticaNeueLTProBlk.otf');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'HN97';src:url('fonts/HelveticaNeueLTProBlkCn.otf');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'HN77';src:url('fonts/HelveticaNeueLTProBdCn.otf');font-weight:normal;font-style:normal;font-display:swap;}

:root{
  /* --- colour roles (locked) --- */
  --black:#0a0a0a;        /* section bands, hero, footer, rules, display ink */
  --paper:#ffffff;        /* the reading ground */
  --ink:#141414;          /* body text on paper */
  --red:#CE161E;          /* THE one hot accent */
  --yellow:#FFF200;       /* Oasis offset shadow only, paired with red on a hero */
  --muted:#5e5e5e;        /* standfirsts, meta, captions on white */
  --muted-dk:#9a9a9a;     /* meta on black */
  --rule:#0a0a0a;         /* hard rule colour = black */
  --hair:#d6d6d6;         /* light hairline between sub-items on white */

  /* --- type families (each does the reference role noted) --- */
  --display:'HN95','Helvetica Neue',Helvetica,Arial,sans-serif;     /* 95 Black — display alt / small heads */
  --cond:'HN97','HN95','Helvetica Neue',Helvetica,Arial,sans-serif; /* 97 Black Condensed — the big words, numerals */
  --kick:'HN77','HN95','Helvetica Neue',Helvetica,Arial,sans-serif; /* 77 Bold Condensed — kickers/labels/nav/buttons */
  --body:'HN55','Helvetica Neue',Helvetica,Arial,sans-serif;        /* 55 Roman — reading */
  --wm:'HN96I','Helvetica Neue',Helvetica,Arial,sans-serif;         /* 96 BLACK Italic — the boxed wordmark (Mick 15 Jun: NOT bold) */

  /* --- the grid + rhythm (Swiss; 8px base unit) --- */
  --maxw:1320px;          /* outer page frame */
  --read:760px;           /* long-form reading measure (~66ch) */
  --gutter:24px;          /* column gutter / page side padding */
  --rule-hard:3px;        /* major section divider */
  --rule-sub:1.5px;       /* sub-divider */
  --u:8px;                /* base spacing unit */
}

/* ============================================================================
   RESET + BASE
   ============================================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ============================================================================
   LAYOUT PRIMITIVES — the Swiss spine
   ----------------------------------------------------------------------------
   .frame   = outer max-width wrapper with side gutters (the page margin)
   .grid12  = the 12-column modular grid; children span with .col-N
   .bleed   = full-viewport-width section (breaks the frame for hero/photo bands)
   ============================================================================ */
.frame{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

.grid12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:0}
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}

.bleed{width:100%}

/* ---- HARD RULES (the single loudest Swiss signal) ----
   .rule  = a full-bleed 3px black horizontal divider between major sections
   .rule.sub = 1.5px sub-divider
   .vr    = a vertical 1.5px black rule between columns / meta cells          */
.rule{border:0;border-top:var(--rule-hard) solid var(--rule);width:100%}
.rule.sub{border-top:var(--rule-sub) solid var(--rule)}
.rule.red{border-top-color:var(--red)}
.vr{border-left:var(--rule-sub) solid var(--rule);align-self:stretch}

/* ============================================================================
   KNOCKOUT BLOCKS — the 2024 cover's signature (from Mick's real templates)
   ----------------------------------------------------------------------------
   White text inside a hard black rectangle, ranged left, tight. The bottom
   padding is heavier than the top (optical correction for the cap-height sit),
   lifted directly from .lockup .line in his Fable cover CSS.
   ============================================================================ */
.knock{display:inline-block;background:var(--black);color:#fff;padding:3px 16px 9px;line-height:1}
.knock.red{background:var(--red)}
.knock.paper{background:var(--paper);color:var(--black)}   /* inverted knockout, the ADD-YOUR-CHAPTER move */

/* ============================================================================
   THE WORDMARK — boxed lowercase 'breakbone', HN96I BLACK Italic in a keyline
   ----------------------------------------------------------------------------
   TYPESET, never an image. Asymmetric padding hugs the italic lean (more right
   than left, more bottom than top) exactly as his cover .wordmark span does.
   ============================================================================ */
.wordmark{
  display:inline-block;
  font-family:var(--wm);font-style:italic;
  font-size:20px;line-height:1;letter-spacing:-.3px;
  color:var(--black);
  border:2.5px solid var(--black);
  padding:4px 17px 8px 12px;     /* T R B L — heavier right + bottom for the lean */
}
.wordmark.invert{color:#fff;border-color:#fff}   /* on black bands / footer */

/* ============================================================================
   THE LOGO LOCKUP — the real hammer-and-bone mark (img/logo.png, logo_offset.png)
   ----------------------------------------------------------------------------
   .mark        = the clean red mark (img/logo.png)
   .mark-offset = the red + yellow Oasis drop-shadow mark (img/logo_offset.png),
                  hero/black-field use only
   .lockup-mark = mark + boxed wordmark sitting together (nav, footer, hero)
   ============================================================================ */
.mark{display:block;height:40px;width:auto}
.mark-offset{display:block;width:auto}
.lockup-mark{display:flex;align-items:center;gap:13px}
.lockup-mark .mark{height:34px}

/* ============================================================================
   NAV — fixed top bar: logo-mark + wordmark left, HN77 caps links right
   (Antidismal / ixaras "clean label nav vs messy hero" tension)
   ============================================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:11px var(--gutter);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(2px);
  border-bottom:var(--rule-hard) solid var(--black);
}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{
  font-family:var(--kick);font-size:13px;letter-spacing:2px;text-transform:uppercase;
  color:var(--black);position:relative;padding:2px 0;transition:color .16s;
}
.nav-links a:hover{color:var(--red)}
.nav-links a[aria-current="page"]{color:var(--red)}
.nav-links a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--red)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-family:var(--kick);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--black)}

/* ============================================================================
   THE COVER / HERO — black band, the masthead lockup, the supersonic word,
   a B&W-treated hero photo. The one place a black field is allowed.
   ----------------------------------------------------------------------------
   .hero            wrapper (full-bleed black)
   .hero-photo      the background image layer (treated to 1-bit-ish B&W)
   .hero-inner      the framed content over it
   .hero .lockup    the knockout-block masthead (the cover title)
   .hero .tab       the rotated red PART/era flyposter tab
   .hero .supersonic the big HN96I word with the red (or red+yellow) offset
   .hero .standfirst the white standfirst under it
   ============================================================================ */
.hero{position:relative;background:var(--black);color:#fff;border-bottom:var(--rule-hard) solid var(--black);overflow:hidden}
.hero-photo{
  position:absolute;inset:0;background-size:cover;background-position:center top;
  filter:grayscale(1) contrast(1.22) brightness(.82);
  opacity:.5;
}
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.78) 78%,#0a0a0a 100%)}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:148px var(--gutter) 84px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}

.hero .lockup{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hero .lockup .knock{font-family:var(--display);font-size:clamp(20px,3vw,40px);padding:5px 16px 11px}

.hero .tab{position:absolute;top:148px;right:var(--gutter);transform:rotate(2deg);transform-origin:top right;text-align:center;z-index:3}
.hero .tab .part{display:block;font-family:var(--display);font-size:clamp(20px,2.2vw,34px);color:#fff;background:var(--red);padding:9px 18px 12px;letter-spacing:1px}
.hero .tab .era{display:block;font-family:var(--kick);font-size:clamp(13px,1.4vw,20px);letter-spacing:2px;color:#fff;background:var(--black);border:2px solid #fff;border-top:0;padding:7px 14px 9px}

.hero .supersonic{font-family:var(--wm);font-style:italic;font-size:clamp(64px,15vw,210px);line-height:.9;letter-spacing:-3px;margin:5vh 0 0;color:#fff;text-shadow:.06em .06em 0 var(--red)}
.hero .supersonic.oasis{color:var(--yellow);text-shadow:.06em .06em 0 var(--red)}   /* the full Oasis homage: yellow on red offset */

.hero h1{font-family:var(--cond);font-size:clamp(72px,16vw,224px);line-height:.86;letter-spacing:-2px;text-transform:uppercase;margin:4vh 0 0;color:#fff}

.hero .standfirst{font-family:var(--body);font-size:clamp(18px,2.2vw,27px);line-height:1.5;color:#fff;margin-top:4vh;max-width:680px;border-left:4px solid var(--red);padding-left:20px}
.hero .standfirst em{font-family:var(--wm);font-style:italic;color:var(--yellow)}

.hero .hero-actions{margin-top:6vh;display:flex;flex-wrap:wrap;gap:16px}

.scrollcue{position:absolute;left:var(--gutter);bottom:24px;z-index:3;font-family:var(--kick);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted-dk)}

/* ============================================================================
   SECTION SCAFFOLD — every major section opens with a kicker + big head over
   a hard rule, MSCHF "VOLUME 04 / NEW!" style.
   ----------------------------------------------------------------------------
   .section          vertical rhythm wrapper (on paper)
   .section.dark     a black-field section moment
   .section-head     the row: kicker left, meta right, sitting on a rule
   .kicker           HN77 caps label
   .section-title    HN97 big condensed head
   .lede             a standfirst-style intro paragraph
   ============================================================================ */
.section{padding:11vh 0}
.section.tight{padding:7vh 0}
.section.dark{background:var(--black);color:#fff}
.section.dark .section-title,.section.dark .kicker{color:#fff}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:var(--rule-hard) solid var(--rule);padding-top:18px;margin-bottom:6vh}
.section.dark .section-head{border-top-color:#fff}
.kicker{font-family:var(--kick);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--black)}
.kicker.red{color:var(--red)}
.section-meta{font-family:var(--kick);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);text-align:right;white-space:nowrap}
.section-title{font-family:var(--cond);font-size:clamp(40px,7vw,96px);line-height:.9;letter-spacing:-1.5px;text-transform:uppercase;color:var(--black)}
.lede{font-family:var(--body);font-size:clamp(18px,2vw,23px);line-height:1.5;color:var(--muted);max-width:640px;margin-top:3vh}
.section.dark .lede{color:#cfcfcf}

/* ============================================================================
   THE CAMPAIGN-DROP HUB — the index's core: cards linking the drop's pages.
   ----------------------------------------------------------------------------
   A real modular grid of bordered cards; a lead card spans wide (image-left/
   text-right, MSCHF product-row), the rest tile. Hard black borders, invert-on-
   hover, big numerals, a red star/index tag. Scatter WITHIN the grid.
   ============================================================================ */
.hub{display:grid;grid-template-columns:repeat(12,1fr);gap:0;border-top:var(--rule-hard) solid var(--black);border-left:var(--rule-hard) solid var(--black)}
/* every card carries its own right+bottom hard rule so the grid reads as ruled cells */
.card{
  grid-column:span 6;position:relative;display:flex;flex-direction:column;
  border-right:var(--rule-hard) solid var(--black);border-bottom:var(--rule-hard) solid var(--black);
  background:var(--paper);min-height:300px;transition:background .2s,color .2s;
}
.card.lead{grid-column:span 12}
.card.third{grid-column:span 4}
.card-link{display:flex;flex-direction:column;height:100%;padding:30px 28px 26px;color:inherit}
.card.lead .card-link{flex-direction:row;gap:34px;align-items:stretch;padding:0}
.card-figure{position:relative;overflow:hidden;background:var(--black)}
.card.lead .card-figure{flex:0 0 46%;min-height:380px}
.card-figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25);transition:transform .5s ease,filter .3s}
.card-body{display:flex;flex-direction:column;flex:1}
.card.lead .card-body{padding:34px 32px 30px}
.card-num{font-family:var(--cond);font-size:clamp(40px,5vw,76px);line-height:.8;color:var(--black);letter-spacing:-2px}
.card-kicker{font-family:var(--kick);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.card-title{font-family:var(--cond);font-size:clamp(30px,3.6vw,54px);line-height:.92;letter-spacing:-1px;text-transform:uppercase;color:var(--black);margin:10px 0 12px}
.card-desc{font-family:var(--body);font-size:16.5px;line-height:1.55;color:var(--muted);margin-bottom:auto;max-width:46ch}
.card-go{font-family:var(--kick);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--black);margin-top:22px;display:inline-flex;align-items:center;gap:10px}
.card-go .arr{display:inline-block;transition:transform .2s}
/* hover: the whole card flips to black, the photo punches up, the arrow slides */
.card:hover{background:var(--black)}
.card:hover .card-num,.card:hover .card-title,.card:hover .card-go{color:#fff}
.card:hover .card-desc{color:#cfcfcf}
.card:hover .card-figure img{transform:scale(1.04);filter:grayscale(1) contrast(1.35) brightness(1.05)}
.card:hover .card-go .arr{transform:translateX(6px)}
.card-status{position:absolute;top:0;right:0;font-family:var(--kick);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff;background:var(--black);padding:6px 12px 8px;z-index:2}
.card-status.live{background:var(--red)}
.card-status.soon{background:var(--black);color:var(--muted-dk)}

/* ============================================================================
   STARBURST BADGE — spiky red sticker overlapping a cover/figure (MSCHF + poster)
   ============================================================================ */
.starburst{
  position:absolute;z-index:4;display:grid;place-items:center;
  width:118px;height:118px;background:var(--red);color:#fff;
  font-family:var(--kick);font-size:14px;letter-spacing:1px;text-transform:uppercase;text-align:center;line-height:1.05;
  clip-path:polygon(50% 0,61% 12%,76% 6%,75% 23%,92% 24%,82% 38%,98% 47%,82% 56%,93% 71%,75% 70%,76% 88%,61% 80%,50% 97%,39% 80%,24% 88%,25% 70%,7% 71%,18% 56%,2% 47%,18% 38%,8% 24%,25% 23%,24% 6%,39% 12%);
  transform:rotate(-9deg);
}

/* ============================================================================
   BUTTONS — hard-edge rectangles, invert on hover (MSCHF). No radius, ever.
   ----------------------------------------------------------------------------
   .btn          filled red primary -> inverts to black
   .btn.outline  outlined secondary -> fills black on hover
   .btn.ghost-light  outlined white (on black fields) -> fills white
   ============================================================================ */
.btn{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:1px;font-size:16px;line-height:1;color:#fff;background:var(--red);padding:16px 30px;border:var(--rule-hard) solid var(--red);transition:background .18s,color .18s,border-color .18s;cursor:pointer}
.btn:hover{background:var(--black);border-color:var(--black);color:#fff}
.btn.outline{background:transparent;color:var(--black);border-color:var(--black)}
.btn.outline:hover{background:var(--black);color:#fff}
.btn.ghost-light{background:transparent;color:#fff;border-color:#fff}
.btn.ghost-light:hover{background:#fff;color:var(--black)}

/* ============================================================================
   READING — the long-form chapter view (black on white). MUST stay readable:
   never uppercase, never mono, never on a dark field for long passages.
   Used by history.html, gig-review.html.
   ============================================================================ */
.chapter{max-width:var(--read);margin:0 auto;padding:13vh var(--gutter) 11vh;border-bottom:var(--rule-sub) solid var(--hair)}
.chapter .knum{font-family:var(--kick);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#fff;background:var(--red);display:inline-block;padding:4px 12px 6px;margin-bottom:16px}
.chapter h2{font-family:var(--cond);font-size:clamp(44px,8vw,104px);line-height:.9;letter-spacing:-1.5px;text-transform:uppercase;margin-bottom:6vh;color:var(--black)}
.chapter p{font-size:18.5px;line-height:1.74;margin-bottom:1.4em;color:var(--ink)}
.chapter p:first-of-type::first-letter{font-family:var(--cond);float:left;font-size:88px;line-height:.66;padding:9px 14px 0 0;color:var(--red)}
.chapter em{font-style:italic}
.standfirst{font-family:var(--body);font-size:23px;line-height:1.5;color:var(--muted);margin-bottom:6vh!important;border-left:4px solid var(--red);padding-left:20px}

/* pull quote — big condensed caps, red emphasis word */
.pull{font-family:var(--cond);text-transform:uppercase;font-size:clamp(30px,5vw,58px);line-height:.98;letter-spacing:-1px;margin:8vh 0;color:var(--black);max-width:var(--read);margin-left:auto;margin-right:auto;padding:0 var(--gutter)}
.pull span{color:var(--red)}

/* a full-bleed B&W photo break between reading blocks, with a white keyline caption */
.photoband{position:relative;width:100%;height:62vh;min-height:380px;overflow:hidden;background:var(--black);border-top:var(--rule-hard) solid var(--black);border-bottom:var(--rule-hard) solid var(--black)}
.photoband img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3)}
.photoband .caption{position:absolute;left:24px;bottom:24px;font-family:var(--kick);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#fff;border:1.5px solid #fff;padding:7px 13px 9px;background:rgba(10,10,10,.35)}

/* ============================================================================
   GENERIC PAGE (about, add-your-chapter, receipts intro) — black on white
   ============================================================================ */
.page{max-width:var(--read);margin:0 auto;padding:16vh var(--gutter) 12vh}
.page h1{font-family:var(--cond);font-size:clamp(48px,9vw,116px);line-height:.88;letter-spacing:-2px;text-transform:uppercase;margin-bottom:3vh;color:var(--black)}
.page .sub{font-family:var(--body);font-size:22px;line-height:1.5;color:var(--muted);margin-bottom:7vh;max-width:640px}
.page h2{font-family:var(--display);font-size:23px;letter-spacing:.4px;text-transform:uppercase;margin:6vh 0 1.5vh;color:var(--black)}
.page h3{font-family:var(--kick);font-size:15px;letter-spacing:2px;text-transform:uppercase;margin:3.5vh 0 1vh;color:var(--red)}
.page p{font-size:17.5px;line-height:1.72;margin-bottom:1.3em;color:var(--ink)}
.page ul.dash{margin:0 0 1.5em 0}
.page ul.dash li{font-size:16.5px;line-height:1.6;margin-bottom:.7em;color:#2a2a2a;padding-left:22px;position:relative}
.page ul.dash li::before{content:'';position:absolute;left:0;top:.62em;width:11px;height:3px;background:var(--red)}
.page a.inline{color:var(--red);border-bottom:1.5px solid var(--red)}
.page a.inline:hover{background:var(--red);color:#fff}

/* ============================================================================
   RECEIPTS — the credibility artifact: a clean source-tier key + per-chapter
   claim->source rows. Authoritative, never a raw dump. Used by receipts.html.
   ============================================================================ */
.tierkey{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:var(--rule-hard) solid var(--black);border-left:var(--rule-hard) solid var(--black);margin:4vh 0 8vh}
.tier{border-right:var(--rule-hard) solid var(--black);border-bottom:var(--rule-hard) solid var(--black);padding:18px 18px 22px}
.tier .tag{font-family:var(--kick);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#fff;background:var(--black);display:inline-block;padding:4px 10px 6px;margin-bottom:12px}
.tier .tag.v{background:var(--red)}
.tier .name{font-family:var(--display);font-size:16px;text-transform:uppercase;letter-spacing:.5px;color:var(--black);margin-bottom:7px}
.tier p{font-size:14.5px;line-height:1.5;color:var(--muted)}
.claimrow{display:grid;grid-template-columns:1fr;border-top:var(--rule-sub) solid var(--hair);padding:3.5vh 0}
.claimrow h3{font-family:var(--cond);font-size:clamp(26px,3.4vw,40px);line-height:.95;letter-spacing:-.5px;text-transform:uppercase;color:var(--black);margin-bottom:1.4vh}
.claimrow p{font-size:16.5px;line-height:1.66;color:var(--ink)}

/* ============================================================================
   CTA — the recurring "add your chapter" call (bordered block, ranged centre)
   ============================================================================ */
.cta{border:var(--rule-hard) solid var(--black);padding:8vh var(--gutter);text-align:center;max-width:var(--maxw);margin:0 auto}
.cta .kicker{margin-bottom:3vh}
.cta h2{font-family:var(--cond);font-size:clamp(40px,8vw,98px);line-height:.9;letter-spacing:-1px;text-transform:uppercase;margin-bottom:3vh;color:var(--black)}
.cta p{color:var(--muted);max-width:520px;margin:0 auto 4vh;font-size:18px;line-height:1.5}

/* ============================================================================
   MARQUEE / TICKER — one reusable strip. Hero version = big condensed word on
   black; footer version = gig dates / motto. translateX(0 -> -50%) on a doubled
   track for a seamless loop.
   ============================================================================ */
.ticker{overflow:hidden;white-space:nowrap;background:var(--black);color:#fff;border-top:var(--rule-hard) solid var(--black);border-bottom:var(--rule-hard) solid var(--black)}
.ticker.red{background:var(--red)}
.ticker-track{display:inline-flex;will-change:transform;animation:bb-marquee 34s linear infinite}
.ticker-track span{font-family:var(--cond);font-size:clamp(26px,4vw,52px);text-transform:uppercase;letter-spacing:1px;padding:14px 0;line-height:1;display:inline-block}
.ticker-track .dot{color:var(--red);padding:0 26px}
.ticker.red .ticker-track .dot{color:#fff}
@keyframes bb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================================
   FOOTER — black band: hammer-bone mark + motto, mono-caps link columns,
   location/contact labels, the boxed wordmark sign-off.
   ============================================================================ */
.foot{border-top:var(--rule-hard) solid var(--black);background:var(--black);color:#fff;padding:8vh var(--gutter) 5vh}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.foot .motto{font-family:var(--wm);font-style:italic;font-size:clamp(22px,3.4vw,42px);max-width:520px;line-height:1.1}
.foot .motto .mark{height:30px;margin-bottom:18px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col .lbl{font-family:var(--kick);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-dk);margin-bottom:4px}
.foot-col a{font-family:var(--kick);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#ddd;transition:color .16s}
.foot-col a:hover{color:var(--red)}
.foot-col span.val{font-family:var(--kick);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#ddd}
.foot-base{max-width:var(--maxw);margin:6vh auto 0;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1.5px solid #2a2a2a;padding-top:24px}
.foot-fine{font-family:var(--kick);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-dk);max-width:560px;line-height:1.6}

/* ============================================================================
   SCROLL-REVEAL HOOKS — vanilla IntersectionObserver toggles .is-in.
   Default state is hidden+offset; .is-in animates to resting. The .reveal
   class is the hook; data-reveal-delay (set inline) staggers via transition-delay.
   ============================================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.is-in{opacity:1;transform:none}
.reveal-rule{transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-rule.is-in{transform:scaleX(1)}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media(max-width:980px){
  .card.lead .card-link{flex-direction:column}
  .card.lead .card-figure{flex-basis:auto;min-height:300px}
  .card.third{grid-column:span 6}
}
@media(max-width:680px){
  :root{--gutter:18px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:fixed;top:56px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:var(--rule-hard) solid var(--black);padding:0}
  .nav-links.open a{width:100%;padding:16px var(--gutter);border-bottom:1.5px solid var(--hair);font-size:15px}
  .nav-toggle{display:inline-block}
  .card,.card.lead,.card.third{grid-column:span 12}
  .hero .tab{position:static;transform:rotate(2deg);display:inline-block;margin-bottom:4vh}
  .hero-inner{padding-top:120px}
  .section-head{flex-direction:column;align-items:flex-start;gap:10px}
  .section-meta{text-align:left}
  .chapter,.page{padding-left:18px;padding-right:18px}
  .chapter p:first-of-type::first-letter{font-size:66px}
  .foot-base{flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   REDUCED MOTION — kill the marquee and all reveals; show resting state.
   ============================================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
  .reveal,.reveal-rule{opacity:1;transform:none;transition:none}
  .card-figure img,.card-go .arr{transition:none}
}