/* ============================================================
   Arkansas Podcast Collaborative — OVERPRINT design system
   Two inks, one state. Every rule here answers to Design Brief.md.
   Chrome is strictly paper + press black + two spot inks + their
   20% screens + the overprint. The members are the color.

   Z-index tiers:
     Content:        1-10
     Badges/stamps:  6
     Marquees:       auto
     Fixed nav:      10002
     Mobile menu:    10001
     Modals:         10010
     Grain overlay:  10050 (pointer-events: none)
   ============================================================ */

/* ============================================================
   FONTS — self-hosted, variable, font-display: swap
   ============================================================ */


@font-face {
  font-family: 'Libre Franklin';
  src: url('/assets/fonts/libre-franklin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* Size-adjusted local fallbacks so the swap does not shift layout */

@font-face {
  font-family: 'Libre Franklin Fallback';
  src: local('Arial');
  size-adjust: 99%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}


/* ============================================================
   TOKENS — the whole chrome. No third ink, ever.
   ============================================================ */

:root {
  /* two-ink letterpress system, Arkansas flag seeded */
  --paper:     #131019;  /* page base, Ozark limestone cream */
  --ink:       #F2EFF7;  /* press black, body text */
  --scarlet:   #9A6BFF;  /* spot ink 1, Ozark Scarlet: primary CTAs, seal, active states */
  --navy:      #2DD4BF;  /* spot ink 2, Flag Navy: stamps, reversed blocks, secondary */
  --tint-r:    #261C48;  /* 20% scarlet halftone screen, tint panels, card bg */
  --tint-n:    #103430;  /* 20% navy halftone screen, alternate tint panels */
  --magenta:   #FF2D78;  /* spot ink 3, the hot plate: heat only (hovers, actives, stamps, ticker) */
  --tint-m:    #3A1228;  /* deep magenta surface */
  --overprint: #05040A;  /* where the inks multiply: hovers, ink shadows, active */
  --scarlet-text: #B392FF; /* text-tier violet: running text (eyebrows, labels) ON TINT PANELS only.
                               #9A6BFF fails AA (4.41:1 on --tint-r, 3.8:1 on --tint-n); this clears 5:1+
                               on both. Large display/borders keep --scarlet. */

  --font-display: 'Clash Display', 'Clash Display Fallback', 'Arial Black', sans-serif;
  --font-body:    'Libre Franklin', 'Libre Franklin Fallback', Helvetica, Arial, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;
  /* --font-slab retired 2026-07-13 per Design Brief ("Alfa Slab One retired. Never running text.").
     Alfa Slab One / Big Shoulders woff2s deleted (orphaned, 70KB dead weight). The slab-styled
     elements (.slabline, .bicon, step numerals) now ride Clash Display so nothing in the markup
     that still reads var(--font-slab) needs to change. */
  --font-slab:    var(--font-display);

  --nav-h: 72px;
  --topbar-h: 34px;
  --container: 1200px;
}


@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/clash-display-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/clash-display-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/clash-display-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* size-adjust measured 2026-07-13 via headless comparison render against the real Clash Display
   500 across the 360-430px .herometa line-wrap danger zone: 100% keeps the fallback's wrap point
   aligned with the real font at every tested breakpoint, killing the swap-triggered CLS on the
   homepage hero. Clash Display is a wide grotesque (per Design Brief) so the Arial fallback needs
   scaling UP to match, not down. */
@font-face { font-family: 'Clash Display Fallback'; src: local('Arial'); size-adjust: 100%; ascent-override: 94%; descent-override: 22%; line-gap-override: 0%; }

/* ============================================================
   RESET + BASE
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--topbar-h) + 12px);
}

body {
  background: var(--paper); /* solid base: mix-blend-mode children multiply against this */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  padding-top: calc(var(--nav-h) + var(--topbar-h)); /* top bar + nav are fixed */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--magenta); color: #fff; }

/* one ring, everywhere: teal, 2px, 2px offset. Keyboard focus should never
   be ambiguous about which plate it belongs to. */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* honeypot field: off-canvas, never display:none (bots check) */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   GRAIN OVERLAY — one tiling noise PNG, multiply, whisper quiet
   ============================================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url('/assets/images/grain.png');
  background-repeat: repeat;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.container--wide { max-width: 1400px; }

.section { padding: 5rem 0; }
.section--tight { padding: 3rem 0; }
.section--flush { padding: 0; }
.section--tint-r { background: var(--tint-r); }
.section--tint-n { background: var(--tint-n); }
/* running violet text on a tint panel needs the text-tier value (WCAG AA):
   #9A6BFF is 4.41:1 on --tint-r / 3.8:1 on --tint-n, both fail. --scarlet-text clears 5:1+. */
.section--tint-r .eyebrow, .section--tint-n .eyebrow { color: var(--scarlet-text); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .eyebrow { color: var(--tint-r); }
.section--ink .sechead { color: var(--paper); }
.section--ink .lede { color: rgba(19, 16, 25, .82); }
/* the sitewide teal focus ring is 1.6:1 on this section's light (--ink) background,
   fails the 3:1 focus-indicator minimum. Swap to scarlet here only (3.1:1 pass). */
.section--ink :focus-visible { outline-color: var(--scarlet); }
.section--ink .btn-paper { color: var(--overprint); border-color: var(--overprint); box-shadow: 3px 3px 0 rgba(5, 4, 10, .35); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.split {
  display: flex; flex-wrap: wrap; gap: 3rem; align-items: center;
}
.split > * { flex: 1 1 320px; min-width: 280px; }

/* CTA rows: hero button pair, section closers */
.heroctas, .stack-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.heroctas { justify-content: center; margin: 1.8rem auto 3rem; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .95;
  color: var(--navy);
}

/* poster-wall display size, the loudest voice on any page */
.display-xl { font-size: clamp(3rem, 9vw, 8.5rem); line-height: .85; }
.display-lg { font-size: clamp(2.6rem, 7vw, 6rem); line-height: .88; }

.sechead { font-size: clamp(2.4rem, 6vw, 4.6rem); margin-bottom: 1rem; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin-bottom: .6rem;
}

.lede { max-width: 62ch; font-size: 1.05rem; margin-bottom: 2.4rem; }

/* slash-coded meta line: LITTLE ROCK // NWA // EST. 2023 */
.metaline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(.72rem, 1.6vw, .92rem);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.metaline b, .metaline .sl { color: var(--scarlet); font-weight: 500; }

/* Alfa Slab: the second wood-type case. One line per wall, never running text. */
.slabline {
  font-family: var(--font-slab);
  font-weight: 400;
  text-transform: none;
  color: var(--scarlet);
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  line-height: 1.15;
}

/* ============================================================
   THE SIGNATURE — two-ink overprint with registration snap.
   data-text MUST mirror the element's visible text exactly.
   Parent stacking contexts must carry a solid background so
   the multiply has real paper to sink into (body supplies it).
   ============================================================ */

.op {
  position: relative;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .92;
}
.op::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--scarlet);
  mix-blend-mode: screen;
  transform: translate(4px, 3px);
}
.op:hover::before { transform: translate(0, 0); }

/* reversed variant for ink/tint sections: navy stays legible, scarlet still multiplies */
.section--ink .op { color: var(--navy); filter: saturate(2.2) brightness(.55); }
.section--ink .op::before { color: var(--scarlet); mix-blend-mode: multiply; transform: translate(3px, 2px); }

/* fountain variant: white pull with an ink under-pass, per the art-QA'd ARKAST lockup */
.fountain .op { color: #fff; }
.fountain .op::before { color: rgba(5, 4, 10, .55); }

/* ============================================================
   SQUEEGEE REVEAL — .sq wipes in left to right.
   Scroll-driven where supported, IntersectionObserver .in fallback.
   Without JS and without animation-timeline, content just shows.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .op::before { transition: transform .35s ease; }

  html.js .sq {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .7s cubic-bezier(.65, 0, .2, 1);
  }
  html.js .sq.in { clip-path: inset(0 0 0 0); }

  @supports (animation-timeline: view()) {
    html.js .sq {
      transition: none;
      animation: sq-wipe linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 65%;
    }
  }
  @keyframes sq-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
}

/* ============================================================
   BUTTONS — ink-shadow registration. The shadow is the second
   pull of the press; hover snaps the print into register.
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  text-align: center;
  padding: .8rem 1.5rem .7rem;
  border: 3px solid var(--ink);
  cursor: pointer;
  line-height: 1.2;
}
.btn-solid {
  background: var(--scarlet);
  /* #fff on --scarlet is 3.54:1, fails WCAG AA. --overprint clears 5.9:1. */
  color: var(--overprint);
  border-color: var(--scarlet);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
  box-shadow: 3px 3px 0 var(--tint-n);
}
.btn-paper { /* for ink sections and the split-fountain band */
  background: transparent;
  color: #fff;
  border-color: #fff;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
}
.btn-sm { font-size: .85rem; padding: .55rem 1rem .5rem; }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .25s ease, box-shadow .25s ease; }
  .btn:hover, .btn:focus-visible { transform: translate(3px, 3px); box-shadow: 0 0 0 transparent; }
  /* press state: one more pixel into the register than hover, snappy not eased */
  .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 transparent; transition-duration: .08s; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:focus-visible { box-shadow: 0 0 0 transparent; transform: translate(3px, 3px); }
  .btn:active { box-shadow: 0 0 0 transparent; transform: translate(4px, 4px); }
}

/* ADMIT ONE ticket stub: perforated left edge via radial-gradient mask */
.ticket {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  background: var(--navy);
  color: #fff;
  padding: .55rem .9rem .5rem 1.15rem;
  transform: rotate(-3deg);
  -webkit-mask-image: radial-gradient(circle 4px at 4px 8px, transparent 4px, #000 4.5px);
  -webkit-mask-size: 100% 16px;
  -webkit-mask-repeat: repeat-y;
  mask-image: radial-gradient(circle 4px at 4px 8px, transparent 4px, #000 4.5px);
  mask-size: 100% 16px;
  mask-repeat: repeat-y;
}
.ticket small { display: block; font-weight: 500; font-size: .6rem; letter-spacing: .22em; opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .ticket { transition: transform .25s ease; }
}
.ticket:hover, .ticket:focus-visible { transform: rotate(0deg); }

/* ============================================================
   NAV — fixed press masthead. Paper, one ink rule, dual CTA.
   ============================================================ */

.nav {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  z-index: 10002;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.nav-logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav-logo img { height: 46px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 1.3rem; margin-left: .5rem; }
.nav-links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 3px solid transparent;
  padding: .35rem 0 2px;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--scarlet); }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.nav-cta .btn { font-size: .82rem; padding: .5rem .9rem .45rem; }

/* mobile toggle: three ink bars that register into an X */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
  margin-left: .25rem;
}
.mobile-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-toggle span { transition: transform .25s ease, opacity .2s ease; }
}
.mobile-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* mobile panel: fullscreen paper sheet. main.js moves .nav-links to <body>
   and adds .is-open (stacking-context escape, V1-proven, iOS-safe). */
.nav-links.is-open {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .4rem;
  margin: 0;
  padding: calc(var(--nav-h) + 1.5rem) 2rem 2.5rem;
  overflow-y: auto;
  border-top: 3px solid var(--ink);
}
.nav-links.is-open a {
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 700;
  padding: .45rem 0;
  border-bottom: none;
  color: var(--navy);
}
.nav-links.is-open a:hover { color: var(--scarlet); }
.nav-links.is-open .nav-mobile-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
}
.nav-mobile-cta { display: none; } /* only visible inside the open panel */
.nav-links.is-open .nav-mobile-cta a {
  font-size: 1rem;
  font-weight: 700;
  color: inherit;
  padding: .8rem 1.5rem .7rem;
}
body.mobile-nav-open { overflow: hidden; }

/* ============================================================
   BREADCRUMBS — slash-coded, print-shop shorthand
   ============================================================ */

.breadcrumbs {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1.1rem 0 0;
}
.breadcrumbs a { text-decoration: none; color: var(--ink); }
.breadcrumbs a:hover { color: var(--scarlet); text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs .sep { color: var(--scarlet); padding: 0 .45rem; }
.breadcrumbs [aria-current="page"] { color: var(--navy); }

/* ============================================================
   MARQUEES — press sheets rolling off the line.
   Track content is duplicated once in the HTML (second half
   aria-hidden) so the -50% loop is seamless. Pause on hover.
   ============================================================ */

/* cover shelf: full-color member squares on an ink band */
.shelf {
  overflow: hidden;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--ink);
  padding: 10px 0;
}
.shelf-track { display: flex; gap: 10px; width: max-content; }
.shelf-track img { width: 110px; height: 110px; flex: 0 0 auto; }

/* show-name ticker: thin scarlet band of live directory links */
.ticker { background: var(--magenta); overflow: hidden; padding: .5rem 0; }
.ticker-track { display: flex; width: max-content; align-items: center; }
/* #fff on --magenta is 3.56:1, fails WCAG AA at this size. --overprint clears 5.9:1. */
.ticker-track .d, .ticker-track .tick-sep { color: var(--overprint); margin: 0 .9rem; font-size: .7rem; }
.ticker-track a {
  color: var(--overprint);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ticker-track a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .shelf-track { animation: marquee-loop 80s linear infinite; }
  .ticker-track { animation: marquee-loop 36s linear infinite; }
  .shelf:hover .shelf-track,
  .ticker:hover .ticker-track,
  .shelf.is-paused .shelf-track,
  .ticker.is-paused .ticker-track { animation-play-state: paused; }
}
@keyframes marquee-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   POSTER WALL — the members are the color.
   nth-child paste-up jitter, offset overprint shadow,
   hover straighten + caption slip.
   ============================================================ */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  grid-auto-flow: dense;
}

.wall-card {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 6px;
  box-shadow: 4px 4px 0 var(--overprint);
  overflow: hidden;
}
.wall-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* paste-up jitter: real hands hung these */
.wall > .wall-card:nth-child(3n) { transform: rotate(1.2deg); }
.wall > .wall-card:nth-child(4n) { transform: rotate(-1deg); }
.wall > .wall-card:nth-child(7n) { transform: rotate(.6deg); }

/* caption slips up on hover: SHOW NAME // GENRE */
.wall-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(32, 27, 22, .92) 40%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1.6rem .6rem .5rem;
  transform: translateY(100%);
}
@media (prefers-reduced-motion: no-preference) {
  .wall-card { transition: transform .25s ease, box-shadow .25s ease; }
  .wall-cap { transition: transform .25s ease; }
}
.wall > .wall-card:hover,
.wall > .wall-card:focus-visible {
  transform: rotate(0) translateY(-4px);
  box-shadow: 7px 7px 0 var(--overprint);
  z-index: 5;
}
.wall-card:hover .wall-cap,
.wall-card:focus-visible .wall-cap { transform: translateY(0); }

/* 2x2 feature slot: Today's Pull and deliberate grid breaks */
.wall-card--feature { grid-column: span 2; grid-row: span 2; }

/* curator note under the featured cover */
.wall-note {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .85rem;
  color: var(--ink);
  padding: .55rem .3rem .1rem;
}

/* hand-set quote card: two-ink type on a tint, breaks the image rhythm */
.wall-card--quote {
  grid-column: span 2;
  background: var(--tint-r);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4rem 1.3rem;
  transform: rotate(0) !important;
  cursor: default;
}
.wall-card--quote .qmark {
  font-family: var(--font-slab);
  font-size: 3rem;
  color: var(--scarlet);
  line-height: .6;
  margin-bottom: .6rem;
}
.wall-card--quote p { font-style: italic; font-size: .88rem; color: inherit; }
.wall-card--quote .attr {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: .7rem;
}

/* FRESH INK stamp: hand-inked double rule, riding the frame edge */
.badge-fresh {
  position: absolute;
  top: 14px; left: -8px;
  z-index: 6;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta);
  border: 3px double var(--scarlet);
  background: rgba(244, 237, 220, .9);
  padding: .3rem .8rem .2rem;
  transform: rotate(-6deg);
}

/* NEW rosette: navy prize seal, auto-expires via JS after 30 days of data-joined */
.badge-new {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 6;
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  outline: 2px dashed rgba(244, 237, 220, .8);
  outline-offset: -5px;
  transform: rotate(8deg);
}
.badge-new[hidden] { display: none; }

/* wall tools: search + underlined text filter chips, no dropdowns */
.wall-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin: 0 0 1.6rem;
}
.wall-search {
  flex: 1 1 260px;
  max-width: 380px;
  font-family: var(--font-body);
  font-size: .95rem;
  background: transparent;
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: .6rem .9rem;
  box-shadow: 3px 3px 0 var(--tint-n);
}
.wall-search::placeholder { color: rgba(242, 239, 247, .5); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.chip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: .2rem solid transparent;
  padding-bottom: 2px;
}
.chip:hover { border-bottom-color: var(--navy); }
.chip.active, .chip[aria-current="true"] { color: var(--scarlet); border-bottom-color: var(--magenta); }

/* ============================================================
   STAT STRIP — exact numbers only. 170, never "170+".
   ============================================================ */

.stat-strip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 3vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  margin-top: 2.6rem;
}
.stat-strip .d { color: var(--scarlet); font-size: .7em; }
.stat-strip .n { color: var(--navy); font-variant-numeric: tabular-nums; }
.stat-foot { font-style: italic; font-size: .85rem; margin-top: .4rem; color: rgba(242, 239, 247, .72); }

/* ============================================================
   DATE-BLOCK EVENT CARDS — Big Ears grammar, per-card ink rotation
   ============================================================ */

.event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

.event-card {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--overprint);
  display: flex;
}
.event-date {
  flex: 0 0 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem .6rem;
  border-right: 3px solid var(--ink);
  text-align: center;
  background: var(--scarlet);
  color: #fff;
}
.event-card[data-theme="navy"] .event-date { background: var(--navy); }
.event-date .day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: .85;
  text-transform: uppercase;
}
.event-date .mon {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: .35rem;
}
.event-body { padding: 1.3rem 1.4rem; flex: 1; }
.event-body h3 {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--navy);
}
.event-body .event-city {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--scarlet);
  margin: .3rem 0 .6rem;
}
.event-body p { font-size: .94rem; margin-bottom: .9rem; }
.event-card[data-theme="navy"] .event-body .btn-solid { background: var(--navy); border-color: var(--navy); }

/* honest placeholder slug: dashed frame, italic, unmistakably unfinished */
.slug {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .82rem;
  color: var(--overprint);
  background: rgba(255, 255, 255, .5);
  border: 1px dashed var(--overprint);
  padding: .3rem .6rem;
  display: inline-block;
  margin-bottom: 1rem;
}

/* ============================================================
   BENTO — member value lockups, alternating 20% screens
   ============================================================ */

.bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.bento-card {
  border: 3px solid var(--ink);
  padding: 1.7rem 1.4rem 1.6rem;
  box-shadow: 6px 6px 0 var(--overprint);
  position: relative;
}
.bento-card:nth-child(odd) { background: var(--tint-r); }
.bento-card:nth-child(even) { background: var(--tint-n); }
.bento-card .bicon { font-family: var(--font-slab); font-size: 1.5rem; color: var(--scarlet); line-height: 1; }
.bento-card:nth-child(even) .bicon { color: var(--navy); }
.bento-card h3 { font-size: 1.75rem; color: var(--ink); margin: .5rem 0 .4rem; line-height: .95; }
.bento-card p { font-size: .95rem; }

/* press-run numbered step cards (join path) */
.step-card {
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 1.6rem 1.4rem 1.5rem;
  box-shadow: 6px 6px 0 var(--overprint);
  position: relative;
}
.step-card--stub { background: var(--tint-r); }
.step-card .num {
  font-family: var(--font-slab);
  font-size: 2.4rem;
  color: var(--tint-r);
  -webkit-text-stroke: 1.5px var(--scarlet);
  line-height: 1;
}
.step-card--stub .num { color: var(--paper); }
.step-card h3 { font-size: 1.9rem; margin: .5rem 0 .4rem; }
.step-card p { font-size: .98rem; }
.pricetag {
  display: inline-block;
  margin-top: .8rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--scarlet);
  color: #fff;
  padding: .25rem .7rem .2rem;
  transform: rotate(-2deg);
}

/* ============================================================
   PRESS QUOTES — oversized pull quotes, real member words only
   ============================================================ */

.pressquote { max-width: 60ch; }
.pressquote .qm {
  font-family: var(--font-slab);
  font-size: 3.4rem;
  color: var(--scarlet);
  line-height: .5;
  display: block;
  margin-bottom: 1rem;
}
.pressquote p, .pressquote blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.45;
}
.pressquote .who {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--navy);
}
.section--ink .pressquote .who { color: var(--tint-r); }
.section--ink .pressquote .who b { color: #fff; }

/* spotlight spread: pasted cover + quote, for ink sections */
.spot {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.4rem 0;
  border-bottom: 2px dashed rgba(244, 237, 220, .25);
}
.spot:last-of-type { border-bottom: none; }
.spot-cover {
  position: relative;
  transform: rotate(-2.5deg);
  border: 6px solid var(--paper);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .5);
}
.spot:nth-of-type(even) .spot-cover { transform: rotate(2deg); }
.spot-cover img { width: 100%; height: auto; }

/* paste-up tape strips for photo corners */
.tape {
  position: absolute;
  width: 110px;
  height: 30px;
  background: rgba(239, 197, 164, .75);
  border-left: 1px solid rgba(59, 26, 28, .15);
  border-right: 1px solid rgba(59, 26, 28, .15);
  pointer-events: none;
}
.tape.tl { top: -14px; left: 8%; transform: rotate(-8deg); }
.tape.tr { top: -14px; right: 8%; transform: rotate(6deg); }

/* ============================================================
   HALFTONE PLACEHOLDER FRAME — honest empty photo slots
   ============================================================ */

.photoframe {
  border: 3px solid var(--ink);
  background-color: var(--paper); /* solid base under the dot screen */
  background-image: radial-gradient(circle at 2px 2px, rgba(35, 74, 115, .35) 1px, transparent 1.6px);
  background-size: 8px 8px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  position: relative;
  box-shadow: 6px 6px 0 var(--overprint);
  padding: 2rem 1.5rem;
}
.photoframe .stamped {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  border: 3px solid var(--navy);
  padding: .35rem .9rem .25rem;
  transform: rotate(-3deg);
  opacity: .85;
}

/* duotone board headshots (pre-processed navy-ink webps in /assets/images/people-ink/) */
.ink-photo {
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 6px;
  box-shadow: 4px 4px 0 var(--overprint);
}
.ink-photo img { width: 100%; height: auto; }
.ink-photo figcaption {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--navy);
  text-align: center;
  padding-top: .55rem;
}

/* ============================================================
   SPLIT-FOUNTAIN BAND — scarlet fades into navy on one pass.
   ARKAST wears this loudest. Optional scroll drift where the
   browser can drive animation from scroll; static otherwise.
   ============================================================ */

.fountain {
  background: linear-gradient(105deg, var(--scarlet) 0%, var(--magenta) 48%, var(--navy) 100%);
  color: #fff;
  position: relative;
}
.fountain .eyebrow { color: rgba(255, 255, 255, .88); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fountain {
      background: linear-gradient(105deg, var(--scarlet) 0%, var(--magenta) 40%, var(--navy) 80%, var(--scarlet) 100%);
      background-size: 160% 100%;
      animation: fountain-drift linear both;
      animation-timeline: view();
    }
  }
  @keyframes fountain-drift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
  }
}

/* ARKAST year plate + festival meta */
.arkyear {
  display: inline-block;
  background: var(--paper);
  color: var(--scarlet);
  font-family: var(--font-slab);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  padding: .35rem 1.1rem .25rem;
  margin: .6rem 0;
  transform: rotate(-1.5deg);
}
.arkmeta {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .82rem;
  margin: 1rem 0 1.6rem;
  opacity: .95;
}

/* one-color print stamp frame (astronaut, sponsor marks) */
.stamp-frame {
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 10px 10px 14px;
  transform: rotate(2deg);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .35);
  position: relative;
}
.stamp-frame img { width: 100%; height: auto; }
.stamp-frame figcaption {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--navy);
  text-align: center;
  padding-top: .6rem;
}

/* navy one-color press filter: stopgap for photos awaiting a true
   one-color redraw (astronaut mark). Remove once real plates land. */
.ink-filter { filter: grayscale(1) brightness(1.05) sepia(1) hue-rotate(175deg) saturate(2.2) contrast(1.05); }

/* generic rotated ink stamp for badges and callouts */
.stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--navy);
  border: 3px solid var(--navy);
  background: transparent;
  padding: .35rem .9rem .25rem;
  transform: rotate(-3deg);
}
.stamp--scarlet { color: var(--scarlet); border-color: var(--scarlet); }

/* ============================================================
   FORMS — paper stock, ink rules, scarlet focus
   ============================================================ */

.form-field { margin-bottom: 1.2rem; }
.form-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: .35rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  background: transparent;
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: .75rem 1rem;
  box-shadow: 3px 3px 0 var(--tint-n);
  border-radius: 0;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(242, 239, 247, .45); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
/* was --overprint (near-black): 1.1:1 on --paper, 1.5:1 on --tint-n, both
   invisible. This is the same muted-cream treatment the footer already
   uses on dark backgrounds (8.2:1 / 6.5:1 on the two contexts .form-micro
   actually appears in). */
.form-micro { font-size: .85rem; font-style: italic; margin-top: 1rem; color: rgba(244, 237, 220, .7); }

/* ============================================================
   COPY LINK — mono-label chip, clipboard + "COPIED" stamp feedback.
   Wired on the homepage press-list band today (main.js); other
   pages adopt the same markup as they need it.
   ============================================================ */
.copylink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  padding: .4rem .8rem .35rem;
  margin-left: .3rem;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--overprint);
  vertical-align: middle;
}
.copylink:hover { border-color: var(--navy); color: var(--navy); }
.copylink.is-copied { border-color: var(--navy); color: var(--paper); background: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .copylink { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease; }
  .copylink:hover, .copylink:focus-visible { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--overprint); }
  .copylink:active { transform: translate(2px, 2px); box-shadow: 0 0 0 transparent; }
}

/* one-field press-list band */
.pressform {
  display: flex;
  justify-content: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}
.pressform input {
  font-family: var(--font-body);
  font-size: 1rem;
  background: transparent;
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: .75rem 1rem;
  width: min(360px, 80vw);
  box-shadow: 3px 3px 0 var(--tint-n);
  border-radius: 0;
}
.pressform input:focus { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ============================================================
   FAQ ACCORDION — one open at a time (main.js toggles .is-open)
   ============================================================ */

.faq-item { border: 3px solid var(--ink); border-bottom-width: 0; background: var(--paper); }
.faq-item:last-child { border-bottom-width: 3px; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--navy);
  padding: 1.1rem 1.25rem 1rem;
}
.faq-q::after {
  content: "\25C6"; /* diamond lozenge */
  color: var(--scarlet);
  font-size: .7rem;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .faq-q::after { transition: transform .25s ease; }
  .faq-a-wrap { transition: grid-template-rows .3s ease; }
}
.faq-item.is-open .faq-q::after { transform: rotate(135deg); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; }
.faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; }
.faq-a > * { padding: 0 1.25rem 1.15rem; max-width: 70ch; }

/* ============================================================
   PROSE — long-form body copy, 65ch measure
   ============================================================ */

.prose { max-width: 65ch; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.15rem; }
.prose h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 2.2rem 0 .8rem; }
.prose h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 1.8rem 0 .6rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose li::marker { color: var(--scarlet); }
.prose a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(45, 212, 191, .55);
  text-underline-offset: 3px;
}
.prose a:hover, .prose a:focus-visible { color: var(--scarlet); text-decoration-color: var(--scarlet); }
.prose blockquote {
  border-left: 4px solid var(--scarlet);
  padding: .3rem 0 .3rem 1.2rem;
  font-style: italic;
  color: rgba(242, 239, 247, .85);
  margin: 1.5rem 0;
}
.prose img { border: 3px solid var(--ink); }

/* ============================================================
   BLOG POST LAYOUT — content + sidebar
   ============================================================ */

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3.5rem;
  align-items: start;
}
.post-hero { border: 6px solid var(--ink); background: var(--tint-n); padding: 6px; margin-bottom: 2rem; }
.post-hero img { width: 100%; height: auto; }
.post-meta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin-bottom: .8rem;
}
.post-sidebar > * + * { margin-top: 2rem; }
.post-sidebar .side-box {
  border: 3px solid var(--ink);
  padding: 1.4rem 1.3rem;
  box-shadow: 4px 4px 0 var(--overprint);
  background: var(--paper);
}
.post-sidebar .side-box--tint { background: var(--tint-n); }
.post-sidebar h4 {
  font-size: 1.05rem;
  letter-spacing: .1em;
  margin-bottom: .8rem;
}
.post-sidebar ul { list-style: none; }
.post-sidebar li { margin-bottom: .55rem; font-size: .92rem; }
.post-sidebar li::before {
  content: "\25C6";
  color: var(--scarlet);
  font-size: .5rem;
  margin-right: .55rem;
  vertical-align: .15em;
}
.post-sidebar a { text-decoration: none; }
.post-sidebar a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--scarlet); }

/* tag pills: always live links to /blog/tag/{slug}/, never spans */
.post-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.post-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: .3rem .7rem .22rem;
}
.post-tag:hover { color: #fff; background: var(--navy); }

/* blog index cards */
.post-card {
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--overprint);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.post-card img { width: 100%; height: auto; border-bottom: 3px solid var(--ink); }
.post-card .post-card-body { padding: 1.2rem 1.2rem 1.4rem; }
.post-card h3 { font-size: 1.5rem; line-height: 1; margin: .4rem 0 .5rem; }
.post-card p { font-size: .92rem; }
@media (prefers-reduced-motion: no-preference) {
  .post-card { transition: transform .25s ease, box-shadow .25s ease; }
}
.post-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--overprint); }

/* ============================================================
   FADE REVEAL — quiet default for non-headline content
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  html.js .fade-up { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  html.js .fade-up.is-in { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FOOTER — reversed block, full link taxonomy, colophon
   ============================================================ */

.footer { background: var(--overprint); color: var(--ink); padding: 4rem 0 2.5rem; border-top: 3px solid var(--tint-r); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand img { width: 210px; height: auto; }
.footer-brand p { font-size: .85rem; margin-top: 1rem; max-width: 34ch; color: rgba(242, 239, 247, .72); }
.footer h4, .footer .foot-head {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .9rem;
  color: var(--scarlet-text);
  margin-bottom: .9rem;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: .45rem; font-size: .9rem; }
.footer li::before {
  content: "\25C6";
  color: var(--scarlet);
  font-size: .5rem;
  margin-right: .55rem;
  vertical-align: .15em;
}
.footer a { text-decoration: none; color: var(--ink); }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--scarlet); }
.colophon {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(242, 239, 247, .18);
  text-align: center;
  font-style: italic;
  font-size: .8rem;
  color: rgba(242, 239, 247, .62);
}
.colophon a { color: var(--navy); }

/* ============================================================
   FORM OVERLAY MODAL (deferred iframe pattern from main.js)
   ============================================================ */

.form-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(32, 27, 22, .8);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.form-overlay.open { display: flex; }
.form-box {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--overprint);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 1rem;
}
.form-close {
  position: absolute;
  top: .4rem; right: .6rem;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ink);
  padding: .3rem .5rem;
}
.form-close:hover { color: var(--scarlet); }

/* ============================================================
   RESPONSIVE — 1024 / 768 / 480 / 375
   ============================================================ */

@media (max-width: 1180px) {
  .nav-cta .ticket { display: none; }
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-links.is-open { display: flex; }
  .mobile-toggle { display: flex; }
  .nav-cta .btn-outline { display: none; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .post-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  .section { padding: 3.5rem 0; }
  .section--tight { padding: 2.25rem 0; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split { gap: 2rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .spot { grid-template-columns: 1fr; }
  .spot-cover { max-width: 200px; }

  .event-date { flex-basis: 96px; }
  .event-date .day { font-size: 2.5rem; }

  .shelf-track img { width: 92px; height: 92px; }

  .wall { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .heroctas { gap: .7rem; }
  .hero .heroctas { margin-bottom: 2rem; padding: 0 1.25rem; }
  .pod-rack--compact { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .pod-rack--compact .pod-cap { flex-basis: 44px; }
  .pod-rack--compact .pod-cap svg { width: 22px; height: 22px; }
  .pod-rack--compact .pod-name { font-size: .82rem; }
  .pod-rack--compact .pod-meta, .pod-rack--compact .pod-go { display: none; }
  .pod-rack--compact .pod-body { padding: .45rem .5rem .45rem .55rem; }
  .mobile-toggle { height: auto; min-height: 44px; padding: 6px 8px; gap: 4px; }
  .mobile-toggle span { flex: 0 0 3px; }
  .mobile-toggle::after { content: "MENU"; font-family: var(--font-mono); font-size: 8px; letter-spacing: .18em; color: var(--ink); line-height: 1; margin-top: 2px; }
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-inner { gap: .55rem; }
  .nav-cta { gap: .5rem; }
  .nav-cta .btn { font-size: .66rem; padding: .42rem .55rem .36rem; white-space: nowrap; }
  .nav-logo img { height: 34px; }
  .onair { font-size: 9px; letter-spacing: .14em; padding: 4px 7px 3px; gap: 6px; }
  .mobile-toggle { flex: 0 0 44px; margin-left: 0; }

  .heroctas .btn, .stack-ctas .btn { width: 100%; }

  .event-card { flex-direction: column; }
  .event-date { flex-basis: auto; flex-direction: row; gap: .6rem; border-right: none; border-bottom: 3px solid var(--ink); padding: .8rem; }
  .event-date .mon { margin-top: 0; }

  .pressform { flex-direction: column; align-items: stretch; }
  .pressform input { width: 100%; }

  .wall-card--feature { grid-column: span 2; }
  .badge-fresh { font-size: .68rem; }
}

@media (max-width: 375px) {
  .wall { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .wall-card--quote { grid-column: span 2; }
  .shelf-track img { width: 84px; height: 84px; }
  .ticker-track a { font-size: .85rem; }
  .stat-strip { font-size: 1.05rem; }
}

/* ============================================================
   PRINT — kill the chrome, keep the words
   ============================================================ */

@media print {
  body::after { display: none; }
  .nav, .footer, .ticker, .shelf { display: none; }
  body { padding-top: 0; }
}

/* blog typographic hero plates */
.post-hero-plate { display: grid; place-items: center; gap: 10px; aspect-ratio: 16/9; background: var(--navy); color: var(--paper); margin-bottom: 36px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--overprint); padding: 24px; text-align: center; }
.post-hero-plate--tint { background: var(--tint-n); color: var(--navy); }
.post-hero-plate .plate-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 10vw, 140px); line-height: 1; }
.post-hero-plate .plate-line { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.post-hero-plate .plate-line--big { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 5vw, 64px); letter-spacing: .02em; }

/* type walls: glyph overshoot must never clip */
.typewall svg, svg.twline, .revblock svg { overflow: visible; }

.nav-logo .logo-dark { display: none; }
.nav-logo .logo-light { display: inline-block; }

/* ============================================================
   NEON LAYER — the light is on
   ============================================================ */
.glow-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(560px circle at var(--gx, 50%) var(--gy, 38%), rgba(154,107,255,.20), rgba(45,212,191,.08) 42%, transparent 68%);
  transition: opacity .6s ease; }
.glow-host { position: relative; }
.glow-host.glow-on .glow-field { opacity: 1; }
.glow-host > *:not(.glow-field) { position: relative; z-index: 1; }

.onair { display: inline-flex; white-space: nowrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; letter-spacing: .22em; color: var(--magenta); border: 1px solid rgba(255,45,120,.5);
  border-radius: 3px; padding: 5px 10px 4px; text-transform: uppercase;
  box-shadow: 0 0 14px rgba(255,45,120,.25), inset 0 0 8px rgba(255,45,120,.12); }
.onair i { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta); }
@media (prefers-reduced-motion: no-preference) {
  .onair i { animation: onair-pulse 2.6s ease-in-out infinite; }
  @keyframes onair-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 8px var(--magenta); } 50% { opacity: .35; box-shadow: 0 0 2px var(--magenta); } }
}

.btn-solid:hover, .nav .btn-solid:hover { box-shadow: 3px 3px 0 var(--scarlet), 0 0 24px rgba(45,212,191,.35); }
.wall-card:hover { box-shadow: 4px 4px 0 var(--overprint), 0 0 22px rgba(154,107,255,.28); }
.bento-card:hover { box-shadow: 4px 4px 0 var(--overprint), 0 0 22px rgba(45,212,191,.22); transform: translateY(-3px); transition: transform .2s ease, box-shadow .2s ease; }
.event-card:hover { box-shadow: 4px 4px 0 var(--overprint), 0 0 20px rgba(255,45,120,.2); }
.twline .ink-r { filter: drop-shadow(0 0 18px rgba(45,212,191,.28)); }
.revblock { box-shadow: 0 0 34px rgba(154,107,255,.3); }
.ticker { box-shadow: 0 0 26px rgba(255,45,120,.3); }

/* ============================================================
   MOBILE MENU — the signal booth
   ============================================================ */
@media (max-width: 1024px) {
  .nav-links { background: radial-gradient(480px circle at 80% 0%, rgba(154,107,255,.18), transparent 60%),
               radial-gradient(420px circle at 10% 100%, rgba(45,212,191,.12), transparent 60%), #0B0912; }
  .nav-links.is-open > a { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 8.5vw, 44px);
    text-transform: uppercase; color: var(--ink); letter-spacing: .01em;
    text-shadow: 3px 3px 0 rgba(154,107,255,.55); padding: 6px 0; }
  .nav-links.is-open > a:active { color: var(--navy); }
  .nav-links.is-open a { opacity: 0; transform: translateY(14px); }
  @media (prefers-reduced-motion: no-preference) {
    .nav-links.is-open a { animation: menu-in .45s cubic-bezier(.2,.7,.2,1) forwards; }
    .nav-links.is-open a:nth-child(1) { animation-delay: .05s; } .nav-links.is-open a:nth-child(2) { animation-delay: .1s; }
    .nav-links.is-open a:nth-child(3) { animation-delay: .15s; } .nav-links.is-open a:nth-child(4) { animation-delay: .2s; }
    .nav-links.is-open a:nth-child(5) { animation-delay: .25s; } .nav-links.is-open a:nth-child(6) { animation-delay: .3s; }
    .nav-links.is-open a:nth-child(7) { animation-delay: .35s; } .nav-links.is-open a:nth-child(8) { animation-delay: .4s; }
    .nav-links.is-open a:nth-child(9) { animation-delay: .45s; }
    @keyframes menu-in { to { opacity: 1; transform: translateY(0); } }
  }
  @media (prefers-reduced-motion: reduce) { .nav-links.is-open a { opacity: 1; transform: none; } }
  .nav-links .onair-menu { position: absolute; top: 22px; left: 20px; }
}

/* ============================================================
   VIEW TRANSITIONS (cross-document, MPA) — shared sheet covers
   every page so the opt-in applies site-wide from one file.
   Progressive enhancement only: unsupported browsers (Firefox,
   Samsung Internet) get a normal instant navigation, no breakage.
   Wrapped in prefers-reduced-motion so motion-sensitive users
   never get the crossfade.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: 180ms ease-out both vt-fade-out; }
::view-transition-new(root) { animation: 220ms ease-out both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* Cover morph: the clicked poster-wall card grows into the show-page
   hero cover. Grid page names the clicked card at pageswap time (see
   the head script in every page); the show-page hero carries the name
   unconditionally. Both sides are 600x600 (square-to-square) so Safari
   doesn't stutter on aspect-ratio mismatch. */
.show-coverwrap img { view-transition-name: cover; }
::view-transition-old(cover), ::view-transition-new(cover) {
  object-fit: cover;
  overflow: hidden;
}

/* ON AIR chip is a real switch */
button.onair { cursor: pointer; background: transparent; }
.onair:hover { box-shadow: 0 0 22px rgba(255,45,120,.45), inset 0 0 10px rgba(255,45,120,.18); }
.onair:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.onair.is-live { background: var(--magenta); color: #131019; box-shadow: 0 0 26px rgba(255,45,120,.55); }
.onair.is-live i { background: #131019; box-shadow: none; animation: none; }

/* ============================================================
   FORM STATUS — one rule for every form on the site (apc-form.js)
   ============================================================ */
.form-status { margin-top: 1.2rem; font-weight: 600; border: 3px solid var(--navy); padding: .8rem 1rem; background: var(--tint-n); }
.form-status--error { border-color: var(--magenta); background: var(--tint-m); }
.form-status[hidden] { display: none; }

/* consent checkbox row (10DLC copy): plain body text, real checkbox */
.form-field--check label { font-family: var(--font-body); font-size: .85rem; text-transform: none; letter-spacing: 0; font-weight: 400; display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45; color: rgba(242, 239, 247, .85); }
.form-field--check input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; padding: 0; border: 2px solid var(--navy); background: var(--paper); accent-color: var(--scarlet); }
.form-field--check a { color: var(--navy); }

/* ============================================================
   PODS — capsules. Two halves on a magenta core; hover cracks the
   capsule open and the heat plate shows through the seam.
   Plate rotation: data-plate="r" violet cap, "n" teal cap.
   ============================================================ */
.pod-rack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.4rem; }
.pod-rack--compact { grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.pod-capsule {
  display: flex; align-items: stretch; text-decoration: none; color: var(--ink);
  background: var(--magenta); border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: 5px 5px 0 var(--overprint); min-height: 84px; overflow: hidden; position: relative;
}
.pod-cap {
  flex: 0 0 88px; display: grid; place-items: center; background: var(--scarlet); color: var(--overprint);
  border-right: 3px dashed rgba(5, 4, 10, .55);
}
.pod-capsule[data-plate="n"] .pod-cap { background: var(--navy); }
.pod-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: .7rem 1.2rem .7rem 1rem; background: var(--paper); }
.pod-num { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--scarlet-text); }
.pod-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: .95; text-transform: uppercase; color: var(--navy); }
.pod-meta { font-size: .8rem; color: rgba(242, 239, 247, .72); }
.pod-meta b { color: var(--magenta); font-weight: 400; }
.pod-go { flex: 0 0 auto; align-self: center; padding: 0 1.1rem 0 .2rem; background: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--navy); }
.pod-capsule .pod-go { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .8; }
.pod-rack--compact .pod-go, .pod-rack--compact .pod-meta { display: none; }
.pod-rack--compact .pod-body { justify-content: center; }
.pod-hero-labels { display: flex; justify-content: space-between; max-width: 980px; margin: 2rem auto 0; padding: 0 1.4rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--scarlet-text); }
.pod-hero { margin-top: .6rem; }
.pod-jump { margin: -.8rem 0 1.4rem; }
.pod-jump .chip { border: 2px solid var(--scarlet); border-radius: 999px; padding: .35rem .8rem .3rem; font-size: .78rem; color: var(--ink); }
.pod-jump .chip:hover { background: var(--scarlet); color: var(--overprint); }
.pod-hero-cap { text-align: center; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 239, 247, .6); margin-top: .9rem; }
.pod-go small { display: block; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .2em; color: rgba(242, 239, 247, .6); text-align: center; }
.slug--note { font-size: .72rem; opacity: .8; }
.chip--paper { color: #fff; border-color: rgba(255,255,255,.6); }
.chip--paper:hover { color: #fff; border-color: #fff; }
.pod-seats { margin-bottom: 1.6rem; }
.hero-micro { text-align: center; margin: -1.8rem auto 2.4rem; max-width: 60ch; }
.herometa--offer { margin-top: .5rem; color: var(--navy); }
.presslist-or { text-align: center; margin-top: 2rem; }
.pod-rack--compact .pod-capsule { min-height: 64px; box-shadow: 4px 4px 0 var(--overprint); }
.pod-rack--compact .pod-cap { flex-basis: 58px; }
.pod-rack--compact .pod-body { padding: .5rem .8rem .5rem .7rem; }
.pod-rack--compact .pod-name { font-size: .95rem; }
.pod-rack--compact .pod-meta { font-size: .72rem; }
@media (prefers-reduced-motion: no-preference) {
  .pod-cap, .pod-body { transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
  .pod-capsule { transition: box-shadow .28s ease; }
}
.pod-capsule:hover .pod-cap, .pod-capsule:focus-visible .pod-cap { transform: translateX(-7px); }
.pod-capsule:hover .pod-body, .pod-capsule:focus-visible .pod-body { transform: translateX(7px); }
.pod-capsule:hover, .pod-capsule:focus-visible { box-shadow: 5px 5px 0 var(--overprint), 0 0 28px rgba(255, 45, 120, .35); }
.pod-capsule[data-plate="n"]:hover { box-shadow: 5px 5px 0 var(--overprint), 0 0 28px rgba(45, 212, 191, .3); }

/* hub hero: one big capsule filled with real member covers (the members are the color) */
.pod-hero {
  display: flex; align-items: stretch; margin: 2.2rem auto 0; max-width: 980px; border: 4px solid var(--ink);
  border-radius: 999px; overflow: hidden; background: var(--magenta); transform: rotate(-2deg);
  box-shadow: 8px 8px 0 var(--overprint), 0 0 46px rgba(154, 107, 255, .32);
}
.pod-hero-half { flex: 1 1 0; display: flex; background: var(--paper); }
.pod-hero-half img { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.pod-seam { flex: 0 0 14px; background: var(--magenta); box-shadow: 0 0 22px var(--magenta); }
.pod-badge {
  display: inline-flex; align-items: center; gap: .8rem; margin-top: 1.4rem; padding: .7rem 1.4rem .7rem .9rem;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--scarlet); color: var(--overprint);
  font-family: var(--font-mono); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem;
  box-shadow: 4px 4px 0 var(--overprint), 0 0 26px rgba(154, 107, 255, .35);
}
.pod-badge[data-plate="n"] { background: var(--navy); box-shadow: 4px 4px 0 var(--overprint), 0 0 26px rgba(45, 212, 191, .35); }

/* rotation strip + leader card */
.pod-rotation { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin-bottom: 1.2rem; }
.pod-slot {
  border: 3px solid var(--ink); padding: .7rem .6rem .6rem; text-align: center; background: var(--paper);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .85rem; line-height: 1.05; color: var(--navy);
  box-shadow: 3px 3px 0 var(--overprint);
}
.pod-slot[data-plate="r"] { color: var(--scarlet); }
.pod-slot small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .6rem; letter-spacing: .16em; color: rgba(242, 239, 247, .6); margin-top: .35rem; }
.pod-slot--arkast { background: linear-gradient(105deg, var(--scarlet), var(--magenta) 55%, var(--navy)); color: #fff; }
.pod-slot--arkast small { color: rgba(255, 255, 255, .8); }
.pod-leader-card { border: 3px solid var(--ink); background: var(--tint-r); padding: 1.6rem 1.5rem; max-width: 640px; box-shadow: 6px 6px 0 var(--overprint); }
.pod-leader-card .stamp { margin-bottom: 1rem; }
.pod-leader-card p { margin-bottom: 1rem; }
.pod-leader-card .slug { display: block; }
@media (max-width: 1024px) { .pod-rack--compact { grid-template-columns: repeat(3, 1fr); } .pod-rotation { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .pod-rack, .pod-rack--compact { grid-template-columns: 1fr; } .pod-rack .pod-capsule { min-height: 68px; } .pod-rack .pod-cap { flex-basis: 64px; } .pod-rack .pod-body { padding: .5rem .8rem .5rem .8rem; } .pod-rack .pod-meta { font-size: .74rem; } .pod-hero-half img:nth-child(n+5) { display: none; } .pod-rotation { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .pod-hero { transform: none; border-radius: 40px; box-shadow: 5px 5px 0 var(--overprint), 0 0 30px rgba(154, 107, 255, .3); } .pod-hero-half img:nth-child(n+4) { display: none; } .pod-seam { flex-basis: 9px; } .pod-rotation { grid-template-columns: repeat(2, 1fr); } }

/* ON AIR chip: say what it does (Cody 2026-09-08) */
.onair-sub { font-weight: 400; letter-spacing: .12em; color: rgba(242, 239, 247, .75); border-left: 1px solid rgba(255,45,120,.45); padding-left: 8px; }
@media (max-width: 1180px) { .nav .onair-sub { display: none; } }
/* mission: prose + the board as duotone plates */
.mission-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; }
.board-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-decoration: none; color: var(--ink); align-content: start; margin-top: .4rem; }
.board-strip img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--overprint); background: var(--tint-n); }
.board-strip img:nth-child(even) { transform: rotate(1.2deg); }
.board-strip img:nth-child(odd) { transform: rotate(-1deg); }
.board-cap { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 239, 247, .7); margin-top: .6rem; }
.board-cap b { color: var(--magenta); font-weight: 400; }
.board-strip:hover img { transform: none; box-shadow: 4px 4px 0 var(--overprint), 0 0 18px rgba(45, 212, 191, .25); }
@media (prefers-reduced-motion: no-preference) { .board-strip img { transition: transform .25s ease, box-shadow .25s ease; } }
@media (max-width: 900px) { .mission-split { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 480px) { .board-strip { grid-template-columns: repeat(5, 1fr); gap: 5px; } .board-strip img { border-width: 2px; box-shadow: 2px 2px 0 var(--overprint); } }

/* ============================================================
   TOP BAR — the thin strip above the masthead: ON AIR left,
   upcoming-events ticker right (data: assets/js/upcoming.js)
   ============================================================ */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10003; height: var(--topbar-h); background: var(--overprint); border-bottom: 1px solid rgba(154, 107, 255, .35); }
.topbar-inner { max-width: 1400px; margin: 0 auto; height: 100%; padding: 0 1.25rem; display: flex; align-items: center; gap: 1rem; }
.topbar .onair { flex: 0 0 auto; font-size: 10px; padding: 4px 9px 3px; }
.topbar-events { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(242, 239, 247, .75); display: flex; align-items: center; gap: .8rem; }
.topbar-events a { color: var(--ink); text-decoration: none; }
.topbar-events a:hover { color: var(--navy); }
.topbar-label { flex: 0 0 auto; color: var(--scarlet-text); font-weight: 700; letter-spacing: .2em; }
.topbar-events.is-live { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.topbar-track { display: inline-flex; align-items: center; white-space: nowrap; width: max-content; }
.topbar-track a { padding-right: .2rem; }
.topbar-track a b { font-weight: 700; color: var(--navy); }
.topbar-track a i { font-style: normal; color: var(--magenta); }
.topbar-track .d { color: var(--magenta); font-size: .55rem; margin: 0 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .topbar-events.is-live .topbar-track { animation: topbar-scroll 60s linear infinite; }
  .topbar-events.is-live:hover .topbar-track, .topbar-events.is-paused .topbar-track { animation-play-state: paused; }
  @keyframes topbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}
@media (max-width: 1180px) { .topbar .onair-sub { display: inline; } }
@media (max-width: 600px) {
  .topbar-inner { gap: .6rem; padding: 0 .9rem; }
  .topbar .onair-sub { display: none; }
  .topbar-events { font-size: 10px; }
  .topbar-label { display: none; }
}
.nav-links.is-open { top: var(--topbar-h); }

/* Real event photography inside the paper frames (added 2026-09-15, launch photo pass) */
.photoframe.has-photo { padding: 14px 14px 12px; gap: .5rem; min-height: 0; }
.photoframe.has-photo img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.photoframe.has-photo .stamped { transform: none; opacity: 1; border: 0; padding: 0; font-size: .68rem; letter-spacing: .14em; color: var(--navy); }
.photoframe.has-photo .photo-cap { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin: 0; text-align: center; }
.proof-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; margin-top: 2rem; }
@media (max-width: 600px) { .proof-strip { gap: 1.2rem; } }

/* ============================================================
   HOMEPAGE PASS — 2026-09-15
   Appended block. Everything here is a homepage override or a
   new homepage component; nothing above this line was changed.
     1. Round logo mark in the nav and the footer
     2. Hero cover mosaic
     3. Board strip: narrow 2 x 5 tile stack
     4. ARKAST venue photo + mini row
     5. Meetup photo grid
     6. Podshelf cover marquee + featured card
     7. Photo grid: 3 x 3
     8. Footer colophon
   ============================================================ */

/* --- 1. LOGO MARK ------------------------------------------ */
/* matched on the file name so any page still carrying the wordmark keeps its
   own sizing; every page that swapped to the round mark picks these up */
.nav-logo img[src*="logo-mark"] { height: 52px; }
.footer-brand img[src*="logo-mark"] { height: 64px; width: auto; }
@media (max-width: 900px) { .nav-logo img[src*="logo-mark"] { height: 40px; } }

/* --- 2. HERO COVER MOSAIC ----------------------------------
   Member cover art, shuffled on every load, sitting behind the
   type wall at 14% on a grayscale-plus-teal wash. A radial
   vignette pulls it back to paper at the edges so the headline
   never competes with a tile. home.js fills the grid and drifts
   it against the pointer; touch and reduced-motion get it
   static. -------------------------------------------------- */
.hero.has-mosaic { position: relative; overflow: hidden; }
.hero.has-mosaic > *:not(.hero-mosaic) { position: relative; z-index: 1; }

.hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--paper);
}
.hero-mosaic-grid {
  position: absolute;
  inset: -34px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: 120px;
  gap: 4px;
  opacity: 0;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-mosaic-grid { transition: opacity 1s ease; }
}
.hero-mosaic.is-on .hero-mosaic-grid { opacity: .14; }
.hero-mosaic-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.72) contrast(.88) sepia(.35) hue-rotate(118deg) saturate(1.55);
}
.hero-mosaic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 66% at 50% 42%,
    rgba(19, 16, 25, 0) 0%,
    rgba(19, 16, 25, .5) 52%,
    var(--paper) 86%);
}
@media (max-width: 700px) {
  .hero-mosaic-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); grid-auto-rows: 80px; }
}

/* --- 3. BOARD STRIP: 2 COLUMNS, 5 ROWS ----------------------
   Narrow fixed column on the right so the ten tiles stack 2 x 5
   at about 140px each and finish level with the prose. Under
   900px the columns stack, text first, and the strip turns on
   its side: 5 across, 2 down, so it stays a band on a phone
   instead of a long ladder. ------------------------------- */
/* the eyebrow and the heading run full width above this row, so the two
   columns below hold only the prose and the tile stack and finish at
   roughly the same line */
.mission-split { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 2rem; }
.mission-copy { min-width: 0; }
.mission-copy > .prose { margin-top: 1.6rem; }
.board-strip { grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 100%; justify-self: end; width: 100%; }
.board-strip img:nth-child(even),
.board-strip img:nth-child(odd) { transform: none; }
.board-strip:hover img { transform: none; }
.board-cap { margin-top: .9rem; }
@media (max-width: 900px) {
  .mission-split { grid-template-columns: 1fr; }
  .board-strip { grid-template-columns: repeat(3, 1fr); max-width: 100%; justify-self: start; }
}
@media (max-width: 480px) {
  .board-strip { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .board-strip img { border-width: 2px; box-shadow: 3px 3px 0 var(--overprint); }
}

/* --- 4. ARKAST: VENUE PHOTO + MINI ROW ---------------------- */
.arkast-col .stamp-frame { margin: 0; }
.arkmeta b { font-weight: 400; opacity: .65; }
.arkast-minis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 2rem;
}
.arkast-minis img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
}
@media (max-width: 600px) { .arkast-minis { gap: 8px; margin-top: 1.5rem; } }

/* --- 5. MEETUP PHOTO GRID ----------------------------------
   Six bare photos, no frame and no caption. Same ink border and
   offset shadow the rest of the page uses. ---------------- */
.meetup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.meetup-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--overprint);
}
/* a near-square source in a 3/2 slot: hold the crop high so the speaker stays in */
.meetup-grid img.crop-upper { object-position: center 40%; }
@media (max-width: 700px) { .meetup-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- 6. PODSHELF: COVER MARQUEE, THEN THE FEATURED CARD -----
   The marquee runs first, under the lede. The dated tag line
   below it reads as a daily pick, and home.js writes the date
   in and unhides the pair. -------------------------------- */
/* A strip of masking tape laid across the cover art, plus the two corner
   pieces the old .photoframe used, so the daily pick reads as something a
   hand stuck to the wall. home.js moves the strip into the card and writes
   the date. The section clips the overhang so a phone never picks up a
   horizontal scroll from the angle. */
#directory { overflow: hidden; }
.featured-pick { position: relative; z-index: 1; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin: 2.6rem 0 .6rem;; margin-top: 3.2rem; }
.featured-pick[hidden] { display: none; }
.featured-card { flex: 0 0 clamp(200px, 32vw, 300px); max-width: 100%; position: relative; overflow: visible; }
.feature-tape {
  position: absolute;
  top: 0;
  left: -6%;
  width: 112%;
  transform-origin: center;
  translate: 0 -50%;
  z-index: 2;
  margin: 0;
  padding: .5rem .5rem .45rem;
  transform: rotate(-4deg);
  background: rgba(239, 197, 164, .92);
  border-top: 1px solid rgba(59, 26, 28, .18);
  border-bottom: 1px solid rgba(59, 26, 28, .18);
  color: var(--overprint);
  text-align: center;
  line-height: 1.15;
  pointer-events: none;
}
.feature-tape[hidden] { display: none; }
.feature-tape-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.78rem, 1.05vw, .98rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.feature-tape-date {
  font-family: var(--font-mono);
  font-size: clamp(.62rem, .8vw, .76rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.featured-meta { flex: 1 1 260px; min-width: 0; }
.featured-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  margin: 0 0 1.2rem;
}
.wall[hidden] { display: none; }
.shelf--picks { margin-top: 0; }
.shelf--picks .shelf-track a { flex: 0 0 auto; display: block; line-height: 0; text-decoration: none; }
.shelf--picks .shelf-track img { width: 110px; height: 110px; object-fit: cover; }
.shelf--picks .shelf-track a:hover img,
.shelf--picks .shelf-track a:focus-visible img { outline: 3px solid var(--magenta); outline-offset: -3px; }
@media (max-width: 600px) {
  .featured-pick { gap: 1.2rem; }
  .shelf--picks .shelf-track img { width: 88px; height: 88px; }
  /* smaller type and a shorter overhang on a phone */
  .feature-tape { left: -4%; width: 108%; padding: .4rem .35rem .35rem; translate: 0 -50%; }
  .feature-tape-line { font-size: .72rem; }
  .feature-tape-date { font-size: .58rem; letter-spacing: .1em; }
  .featured-card .tape { display: none; }
}

/* --- 7. PHOTO GRID: 3 x 3 --------------------------------- */
.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.room-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--overprint);
}
@media (max-width: 700px) { .room-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

/* --- 8. FOOTER COLOPHON ------------------------------------ */
.colophon { font-style: normal; }
.poweredby { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: inherit; text-decoration: none; }
.poweredby img { height: 14px; width: auto; }
.colophon a.poweredby { color: inherit; }
.colophon a.poweredby:hover { color: var(--navy); }
.featured-card .tape { display: none; }
/* stacked press form (membership waitlist, 2026-09-15) */
.pressform--stack { display: block; }
.pressform--stack .form-field { margin-bottom: 1rem; }
.pressform--stack .btn { margin-top: .4rem; }
/* body links read teal, violet on hover (Cody 2026-09-15) */
.tier-body a, .lede a, .form-micro a, .hero-tag a, .event-body a, .bento-card a, .step-card a, .drawer-card a, .faq-a a { color: var(--navy); text-decoration-color: rgba(45,212,191,.55); }
.tier-body a:hover, .lede a:hover, .form-micro a:hover, .hero-tag a:hover, .event-body a:hover, .bento-card a:hover, .step-card a:hover, .drawer-card a:hover, .faq-a a:hover { color: var(--scarlet); }
/* show pages: latest-episode player (2026-09-15) */
.ep-player audio { display: block; width: 100%; max-width: 720px; margin: .8rem 0 .6rem; }
.ep-player .metaline { margin-top: .4rem; }
/* random-episode bar: big round close on the right (Cody 2026-09-15) */
.needle-player { padding-right: 84px !important; }
.needle-player-inner { position: static; }
.needle-player-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); color: var(--overprint); font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; box-shadow: 3px 3px 0 var(--overprint); }
.needle-player-close:hover, .needle-player-close:focus-visible { background: var(--magenta); color: #fff; }
@media (max-width: 600px) { .needle-player { padding-right: 60px !important; } .needle-player-close { width: 38px; height: 38px; right: 10px; } }
/* random-episode player (moved from the homepage inline block so every page pins the bar, 2026-09-15) */


/* ============================================================
   HERO ENERGY — 2026-09-15
   Appended block. Homepage hero only. The cover wall is a grid
   of whole square covers, softened and slowed; a sharp copy of
   the same wall rides on top, masked to a circle that follows
   the pointer, so several covers come fully readable wherever
   you point. A canvas draws a rolling field of glowing
   lines over it, and a slow violet to magenta pulse sits
   behind the headline under a scrim that keeps the type wall at
   full contrast. Nothing above this line was changed.
     1. The cover grid: whole covers, square cells
     2. Blurred base wall + hue drift
     3. Sharp pointer-focus wall
     4. Wave field canvas
     5. Glow pulse + type scrim
     6. Reduced motion
   ============================================================ */

/* the focus spot, in the mosaic grid's own coordinate space.
   home.js rewrites these on every frame; the defaults are the
   fixed centred spot reduced-motion visitors keep. */
.hero-mosaic { --fx: 50%; --fy: 44%; }

/* --- 1. THE COVER GRID ------------------------------------
   Bigger cells and square rows so every tile is a whole cover,
   not a slice of one. The sources are all 600x600, so a square
   cell crops nothing. Rows are sized by the art itself
   (aspect-ratio on the image, auto rows) rather than a fixed
   grid-auto-rows, which is what left the old 120px cells a few
   pixels off square. ---------------------------------------- */
.hero.has-mosaic .hero-mosaic-grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  grid-auto-rows: auto;
  gap: 6px;
  align-content: start;
}
.hero.has-mosaic .hero-mosaic-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* --- 2. BLURRED BASE WALL ---------------------------------- */
.hero.has-mosaic .hero-mosaic-grid--base {
  filter: blur(3px);
  animation: apcWallDrift 30s ease-in-out infinite alternate,
             apcWallHue 40s ease-in-out infinite alternate;
}
.hero-mosaic.is-on .hero-mosaic-grid--base { opacity: .30; }

/* small enough that the rows never visibly slide out of line */
@keyframes apcWallDrift {
  from { translate: -2.5px -2px; }
  to   { translate: 2.5px 2px; }
}
/* a 15 degree swing, so a cover still looks like its own artwork.
   The blur has to be restated here: the hue animation owns the
   whole filter property once it runs. */
@keyframes apcWallHue {
  from { filter: blur(3px) hue-rotate(-7deg); }
  to   { filter: blur(3px) hue-rotate(8deg); }
}

/* --- 3. SHARP POINTER-FOCUS WALL ---------------------------
   Same slugs, same order, same DOM, same grid, built by the
   same loop in home.js, so the two layers sit pixel on pixel.
   Only the mask and the un-washed art differ. --------------- */
.hero.has-mosaic .hero-mosaic-grid--sharp {
  animation: apcWallDrift 30s ease-in-out infinite alternate;
  -webkit-mask-image: radial-gradient(circle 340px at var(--fx) var(--fy), #000 0, #000 52%, transparent 100%);
          mask-image: radial-gradient(circle 340px at var(--fx) var(--fy), #000 0, #000 52%, transparent 100%);
}
.hero-mosaic.is-on .hero-mosaic-grid--sharp { opacity: .7; }
/* the base wall keeps the teal wash; the focus circle shows the
   real cover art, which is the whole point of the reveal */
.hero-mosaic-grid--sharp img { filter: saturate(1.1) contrast(1.02); }

/* --- 4. WAVE FIELD CANVAS ---------------------------------- */
.hero.has-mosaic > .hero-waves {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- 5. GLOW PULSE + TYPE SCRIM ---------------------------- */
.hero.has-mosaic > .hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-glow::before,
.hero-glow::after { content: ""; position: absolute; inset: 0; }
.hero-glow::before {
  background: radial-gradient(ellipse 54% 42% at 50% 46%,
    rgba(154, 107, 255, .30) 0%,
    rgba(255, 45, 120, .16) 48%,
    rgba(255, 45, 120, 0) 74%);
  mix-blend-mode: screen;
  animation: apcGlowPulse 8s ease-in-out infinite;
}
/* painted after the glow so the headline never loses contrast.
   The wall runs brighter now, so this carries more of the load. */
.hero-glow::after {
  background: radial-gradient(ellipse 68% 54% at 50% 44%,
    rgba(5, 4, 10, .70) 0%,
    rgba(5, 4, 10, .42) 56%,
    rgba(5, 4, 10, 0) 82%);
}
@keyframes apcGlowPulse {
  0%, 100% { opacity: .40; transform: scale(.94); }
  50%      { opacity: .92; transform: scale(1.06); }
}

/* a phone gets smaller cells and a tighter focus circle */
@media (max-width: 700px) {
  .hero.has-mosaic .hero-mosaic-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  .hero.has-mosaic .hero-mosaic-grid--sharp {
    -webkit-mask-image: radial-gradient(circle 200px at var(--fx) var(--fy), #000 0, #000 52%, transparent 100%);
            mask-image: radial-gradient(circle 200px at var(--fx) var(--fy), #000 0, #000 52%, transparent 100%);
  }
}

/* --- 6. REDUCED MOTION ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero.has-mosaic .hero-mosaic-grid--base,
  .hero.has-mosaic .hero-mosaic-grid--sharp { animation: none; translate: none; }
  .hero.has-mosaic .hero-mosaic-grid--base { filter: blur(3px); }
  .hero-glow::before { animation: none; opacity: .5; }
  /* the field still draws, it just never rolls (home.js paints one
     frame and stops), so the hero keeps its shape */
}