/* ==========================================================================
   Creative Coast Buzz — "Wet Paint"
   Static homepage styles. Palette/type tokens per BUILD-SPEC.md §2.
   ========================================================================== */

:root {
  --canvas: #F7F5F0;
  --ink: #141414;
  --ink-soft: #2A2A2A;
  --pink: #F25477;
  --cobalt: #2B4BF2;
  --gold: #E8A33D;
  --line: rgba(20, 20, 20, .12);
  --line-on-ink: rgba(247, 245, 240, .16);

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;

  /* Shared row height for BOTH marquee bands (#ticker under the hero and
     #partners under The Buzz), so they stay exactly the same height at every
     viewport width. The 1.5 is body's line-height, which is what gives the
     ticker's text row its height; the clamp is the ticker's own font-size. */
  --marquee-row: calc(clamp(1.1rem, 2.4vw, 1.6rem) * 1.5);

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  background: var(--pink);
  color: var(--canvas);
  padding: .75rem 1.25rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
}

/* visible focus everywhere */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: .6rem;
}
h2.section-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.section-sub {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.dashed-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border: 1.5px dashed var(--pink);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pink);
  white-space: nowrap;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease-out), background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid {
  background: var(--pink);
  color: var(--canvas);
}
.btn-solid:hover { background: #d83e63; }
.btn-ghost {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.btn-ghost:hover { background: rgba(20,20,20,.06); }
[data-theme-ink] .btn-ghost:hover,
.on-ink .btn-ghost:hover { background: rgba(247,245,240,.12); }
.btn-ghost.is-placeholder {
  opacity: .8;
  cursor: default;
}

/* ==========================================================================
   Paint-stroke signature element (scroll-scrubbed)
   ========================================================================== */
.paint-stroke {
  position: fixed;
  top: 0;
  right: 4px;
  width: 34px;
  height: 100vh;
  height: 100dvh;
  z-index: 40;
  pointer-events: none;
}
.paint-stroke path {
  fill: none;
  stroke: url(#paintGradient);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 640px) {
  .paint-stroke { width: 18px; right: 0; opacity: .8; }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--canvas);
  background: transparent;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out),
              backdrop-filter .35s var(--ease-out), border-color .35s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-nav.is-stuck {
  background: rgba(247, 245, 240, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}
.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
}
.brand-mark .swoosh {
  fill: none;
  stroke: var(--pink);
  stroke-width: 7;
  stroke-linecap: round;
}
.site-nav.is-stuck .brand-mark .swoosh { stroke: var(--pink); }
.site-nav:not(.is-stuck) .brand-mark .swoosh { stroke: var(--canvas); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-weight: 600;
  font-size: .95rem;
}
.nav-links a {
  text-decoration: none;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-cta { flex: none; }

/* Hamburger toggle — hidden on desktop, shown under the mobile breakpoint */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer — toggled via the `hidden` attribute in main.js */
.mobile-menu[hidden] { display: none; }
.mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: 5.5rem var(--gutter) 2rem;
  background: var(--canvas);
  overflow-y: auto;
}
.mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.mobile-menu a {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
}
.mobile-menu-cta { align-self: flex-start; }
body.menu-open { overflow: hidden; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  /* No-JS fallback: the toggle can't work without JS, so give mobile
     visitors a reachable (if plainer) link list instead of nothing. */
  .no-js .nav-toggle { display: none; }
  .no-js .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    position: static;
  }
}
@media (max-width: 420px) {
  .brand { font-size: .92rem; white-space: nowrap; }
  .nav-cta { padding: .7rem 1.15rem; font-size: .85rem; }
}

/* ==========================================================================
   Hero — 5.2
   ========================================================================== */
#hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--ink);
  color: var(--canvas);
}
.hero-pin-space {
  position: relative;
}
.hero-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(20,20,20,.94) 0%, rgba(20,20,20,.78) 30%, rgba(20,20,20,.4) 58%, rgba(20,20,20,.22) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 6rem);
}
.hero-h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 7rem);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0 0 1.5rem;
}
.hero-h1 .line { display: block; }
.hero-h1 .line-solid { color: var(--canvas); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-h1 .line-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--canvas);
  text-stroke: 1.5px var(--canvas);
  filter: drop-shadow(0 2px 18px rgba(0,0,0,.45));
}
.hero-h1 .line-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--pink);
  letter-spacing: -.01em;
}
.hero-sub {
  max-width: 42ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(247,245,240,.86);
  margin-bottom: 2.25rem;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hero-ctas .btn-ghost { border-color: var(--canvas); color: var(--canvas); }

.hero-captions {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  display: none;
}
[data-hero-mode="scrub"] .hero-captions { display: block; }
.hero-caption {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  position: absolute;
  bottom: 0;
  left: 0;
  white-space: nowrap;
}
.hero-caption.is-active { opacity: 1; transform: translateY(0); }

.ai-note {
  position: absolute;
  right: var(--gutter);
  bottom: 1.25rem;
  z-index: 2;
  font-size: .74rem;
  color: rgba(247,245,240,.65);
  text-align: right;
  max-width: 220px;
  line-height: 1.35;
}
.ai-note::before {
  content: "◆ ";
  color: var(--gold);
}

/* reduced motion / no-pin hero */
[data-hero-mode="loop"] .hero-captions,
.reduced-motion .hero-captions { display: none; }

/* ==========================================================================
   Ticker — 5.3
   ========================================================================== */
#ticker {
  background: var(--ink);
  color: var(--canvas);
  overflow: hidden;
  padding: 1rem 0;
  border-top: 1px solid var(--line-on-ink);
  border-bottom: 1px solid var(--line-on-ink);
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: ticker-scroll 28s linear infinite;
}
#ticker:hover .ticker-track,
#ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-track .ticker-set {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-right: .9rem;
  flex: none;
}
.ticker-track span {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  /* Explicit rather than inherited, so this row and the #partners logo row are
     driven by the same value and cannot drift apart. This is the height it
     already computed to (body line-height 1.5), so nothing moves. */
  line-height: var(--marquee-row);
  text-transform: lowercase;
  letter-spacing: .01em;
  white-space: nowrap;
}
.ticker-track .sep { color: var(--pink); }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.reduced-motion .ticker-track { animation: none; }

/* ==========================================================================
   Partner logo marquee — sits between The Buzz and Discover
   --------------------------------------------------------------------------
   Deliberately the same 72px band height as #ticker (1rem padding + 38px of
   content + 1px borders top and bottom), so the two marquees read as the same
   component. It uses the cream canvas rather than the ticker's ink because
   eight of the nine partner logos are dark artwork on transparency; on ink
   they would be invisible.
   ========================================================================== */
#partners {
  background: var(--canvas);
  overflow: hidden;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logo-track {
  display: flex;
  width: max-content;
  /* 26.3s is not arbitrary: one set measures 1091px, and 1091 / 26.3 ≈ 41.4
     px/s — the exact scroll speed of #ticker, so the two bands feel like one
     system. Re-derive if the logo count or gap changes:
     duration = one-set-width / 41.4. */
  animation: logo-scroll 26.3s linear infinite;
}
#partners:hover .logo-track,
#partners:focus-within .logo-track { animation-play-state: paused; }
.logo-set {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  padding-right: clamp(2rem, 4.5vw, 3.5rem);
  flex: none;
  margin: 0;
  padding-block: 0;
  padding-left: 0;
  list-style: none;
}
.logo-set li { display: flex; align-items: center; }
.logo-set img {
  /* Shared with #ticker (see --marquee-row) so the two bands are the same
     height at EVERY width by construction, not by coincidence. Hard-coding
     38px here made them 72px vs 60px on a phone. */
  height: var(--marquee-row);
  width: auto;
  display: block;
  /* Supplied logos vary wildly in weight and saturation. A light desaturation
     keeps one very bright mark from shouting over the rest without flattening
     them to silhouettes, and full colour returns on hover. */
  filter: saturate(.85);
  opacity: .82;
  transition: opacity .3s var(--ease-out), filter .3s var(--ease-out);
}
.logo-set img:hover,
#partners:hover .logo-set img { opacity: 1; filter: saturate(1); }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.reduced-motion .logo-track { animation: none; }
/* No-JS: the .reduced-motion class is applied by main.js, so make sure the
   marquee is still a readable static row when scripts never run. */
.no-js .logo-track { animation: none; }

/* ==========================================================================
   The Buzz — 5.4
   ========================================================================== */
#buzz {
  background: var(--canvas);
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.buzz-pin {
  position: relative;
}
.buzz-viewport {
  overflow: hidden;
}
.buzz-viewport.is-snap {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--gutter) * -1);
  padding: .5rem var(--gutter) 1.5rem;
}
.buzz-track {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2rem);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}
.buzz-viewport.is-snap .buzz-track {
  padding-inline: 0;
}
/* Real calendar events have wildly variable title/blurb lengths, unlike the
   hand-tuned sample cards. Making each <li> a flex box lets the card inside
   stretch to the tallest card in the row, so the bottom edges stay aligned
   instead of going ragged. */
.buzz-track > li {
  display: flex;
}
.buzz-card {
  scroll-snap-align: start;
  flex: none;
  width: min(78vw, 340px);
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,20,20,.04);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.buzz-card:nth-child(odd) { --tilt: -1.2deg; }
.buzz-card:nth-child(even) { --tilt: 1.2deg; }
.buzz-card:hover,
.buzz-card:focus-within {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 18px 34px rgba(20,20,20,.14);
}
/* Same rationale as .frame-media above: cap image height so the card's
   text content always has room within the pinned viewport. */
/* width:100% required alongside aspect-ratio + max-height — see the
   matching comment on .frame-media. */
/* <picture> wrappers must not introduce a box of their own — display:contents
   makes the <img> inside lay out exactly as it did when it was a direct child,
   so every existing `.x img` rule keeps working untouched. */
picture { display: contents; }
.buzz-card-media { width: 100%; position: relative; aspect-ratio: 4/3; max-height: 42vh; overflow: hidden; }
.buzz-card-media img { width: 100%; height: 100%; object-fit: cover; }
.buzz-date-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .75rem;
  line-height: 1.1;
  text-align: center;
  padding: .4rem .55rem;
  border-radius: 8px;
  transform: rotate(-6deg);
  box-shadow: 0 4px 10px rgba(20,20,20,.18);
}
.buzz-card-body { padding: 1.25rem 1.3rem 1.4rem; }
.buzz-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: 1.2rem;
  margin-bottom: .5rem;
  line-height: 1.15;
}
.buzz-card-blurb {
  font-size: .92rem;
  color: var(--ink-soft);
  margin-bottom: .9rem;
}
.buzz-card-a11y {
  font-size: .74rem;
  color: var(--pink);
  border-top: 1px dashed var(--line);
  padding-top: .65rem;
  margin-bottom: .8rem;
}
.buzz-card-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  color: var(--cobalt);
}
.buzz-card-link .arrow { transition: transform .2s var(--ease-out); }
.buzz-card:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   Discover — 5.5
   ========================================================================== */
#discover {
  background: var(--canvas);
  padding-block: clamp(4rem, 9vw, 7rem);
}
.discover-rows {
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.discover-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transform-style: preserve-3d;
  transform-origin: top center;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s;
  will-change: transform, opacity;
}
.row-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--pink);
  min-width: 2.4ch;
}
.row-main { display: flex; flex-direction: column; gap: .35rem; }
.row-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.1;
}
.row-desc { color: var(--ink-soft); font-size: .95rem; max-width: 52ch; }
.discover-row:hover .row-desc,
.discover-row:focus-visible .row-desc { color: rgba(247,245,240,.78); }
.row-chip {
  width: clamp(64px, 9vw, 96px);
  height: clamp(64px, 9vw, 96px);
  border-radius: 14px;
  overflow: hidden;
  flex: none;
  transition: transform .35s var(--ease-out);
}
.row-chip img { width: 100%; height: 100%; object-fit: cover; }
.discover-row:hover,
.discover-row:focus-visible {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
}
.discover-row:hover .row-desc { color: rgba(247,245,240,.8); }
.discover-row:hover .row-chip,
.discover-row:focus-visible .row-chip { transform: scale(1.08); }

@media (max-width: 700px) {
  .discover-row { grid-template-columns: auto 1fr; }
  .row-chip { display: none; }
}

/* ==========================================================================
   Featured story — 5.6
   ========================================================================== */
#featured {
  background: var(--ink);
  color: var(--canvas);
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
#featured .eyebrow { color: var(--gold); }
#featured .section-sub { color: rgba(247,245,240,.72); }
.featured-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  gap: 0;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.featured-media {
  position: relative;
  min-height: 340px;
  border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden;
}
.featured-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.featured-card {
  background: var(--canvas);
  color: var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-left: clamp(-2.5rem, -4vw, -1.5rem);
  margin-top: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: clamp(1.5rem, 5vw, 3rem);
  position: relative;
  z-index: 2;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, var(--pink), var(--cobalt), var(--gold)) 1;
}
.featured-kicker {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--pink);
  margin-bottom: .6rem;
  display: block;
}
.featured-copy {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}
.featured-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--cobalt);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.stat-value.is-visible { opacity: 1; transform: translateY(0); }
.stat-label { font-size: .78rem; color: var(--ink-soft); }

@media (max-width: 820px) {
  .featured-grid { grid-template-columns: 1fr; }
  .featured-media { border-radius: var(--radius); min-height: 260px; }
  .featured-card { margin: -2.5rem 0 0; border-radius: var(--radius); }
}
@media (max-width: 520px) {
  .featured-stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Artist spotlight — 5.7 (gallery glide)
   ========================================================================== */
#artist-spotlight {
  background: var(--canvas);
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.spotlight-cta {
  text-align: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.gallery-pin { position: relative; }
.gallery-viewport {
  perspective: 1400px;
  overflow: hidden;
}
.gallery-track {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  width: max-content;
  align-items: flex-end;
  padding-block: 1rem;
}
.frame {
  flex: none;
  width: clamp(230px, 30vw, 380px);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px rgba(20,20,20,.12);
  transform: translateZ(0);
}
.frame.depth-near { transform: translateZ(0) scale(1); }
.frame.depth-mid { transform: translateZ(-60px) scale(.94); margin-top: 2rem; }
.frame.depth-far { transform: translateZ(-120px) scale(.88); margin-top: 3.5rem; }
.frame.depth-farther { transform: translateZ(-180px) scale(.82); margin-top: 5rem; }
/* Cap image height so the name/caption below it always has room. Without
   this, a tall/narrow browser window can make the card (image + caption)
   taller than the visible space below the fixed nav while pinned — and
   since scrolling drives the horizontal scrub instead of revealing more of
   the page, that overflow is permanently invisible, not just off-screen. */
/* width:100% is required alongside aspect-ratio + max-height: without an
   explicit width, the browser solves aspect-ratio using the CAPPED height
   and shrinks the width to match the 3:4 ratio, instead of keeping full
   width and simply cropping the height. */
.frame-media { width: 100%; aspect-ratio: 3/4; max-height: 46vh; overflow: hidden; position: relative; }
.frame-media img { width: 100%; height: 100%; object-fit: cover; }
.frame-slot {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--canvas), var(--canvas) 10px, #ece8de 10px, #ece8de 20px);
  border: 1.5px dashed var(--line);
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}
.frame-body { padding: 1.1rem 1.2rem 1.4rem; }
.frame-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: 1.05rem;
  margin-bottom: .35rem;
}
.frame .ai-note {
  position: static;
  color: var(--ink-soft);
  max-width: none;
  text-align: left;
  margin-top: .4rem;
}
.frame .ai-note::before { color: var(--pink); }
.frame-quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  color: var(--ink);
  margin-top: .5rem;
}

@media (max-width: 760px) {
  .gallery-track { flex-direction: column; width: 100%; }
  .frame { width: 100%; transform: none !important; margin: 0 !important; }
}

/* ==========================================================================
   Get involved — 5.8
   ========================================================================== */
#get-involved {
  background: var(--canvas);
  padding-block: clamp(4rem, 9vw, 7rem);
  position: relative;
}
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  position: relative;
}
.doors::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 50%;
  width: 3px;
  background: linear-gradient(180deg, var(--pink), var(--cobalt), var(--gold));
  border-radius: 3px;
  opacity: .55;
}
.door h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.1;
  margin-bottom: .75rem;
}
.door p {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  max-width: 40ch;
}
@media (max-width: 760px) {
  .doors { grid-template-columns: 1fr; }
  .doors::before { display: none; }
}

/* ==========================================================================
   Press strip — 5.9
   ========================================================================== */
#press {
  background: var(--canvas);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.press-quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  max-width: 46ch;
  margin: 0 auto 2rem;
  color: var(--ink-soft);
}
.press-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.press-logo-slot {
  width: 130px;
  height: 52px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ==========================================================================
   Footer — 5.10
   ========================================================================== */
#footer {
  background: var(--ink);
  color: var(--canvas);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--line-on-ink);
}
.footer-brand .brand { color: var(--canvas); font-size: 1.2rem; margin-bottom: .9rem; }
.footer-brand .brand-mark .swoosh { stroke: var(--canvas); }
.footer-tagline {
  color: rgba(247,245,240,.72);
  max-width: 34ch;
  font-size: .95rem;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col a,
.footer-col span {
  text-decoration: none;
  color: rgba(247,245,240,.82);
  font-size: .95rem;
}
.footer-col a:hover { color: var(--pink); }
.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(247,245,240,.55);
}
.footer-fineprint { max-width: 62ch; }
.footer-org { color: rgba(247,245,240,.7); }

@media (max-width: 820px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Reveal utility (fade-up, used for reduced-motion + mobile fallbacks)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reduced-motion .reveal,
.no-js .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* JS-disabled fallback: everything visible, no reliance on scroll state */
.no-js .buzz-track { flex-wrap: nowrap; overflow-x: auto; }
.no-js .buzz-viewport { overflow-x: auto; }
.no-js .discover-row { transform: none !important; opacity: 1 !important; }
.no-js .gallery-track { flex-direction: column; width: 100%; }
.no-js .frame { width: 100%; transform: none !important; margin: 0 !important; }
.no-js .stat-value { opacity: 1 !important; transform: none !important; }
.no-js .hero-captions { display: none; }
.no-js #buzz .buzz-pin { height: auto !important; }

/* ==========================================================================
   Auth / dashboard forms — login, join, artist profile editing.
   Shares the marketing-page design tokens (canvas/ink/pink/line/radius)
   rather than introducing a second visual language for the logged-in area.
   ========================================================================== */
.wrap-narrow {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.auth-section,
.dashboard-section {
  padding-block: clamp(6rem, 12vw, 9rem) clamp(4rem, 9vw, 6rem);
  min-height: 60vh;
}
.auth-form,
.dashboard-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 480px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.auth-label,
.form-row label {
  font-weight: 600;
  font-size: .9rem;
}
.form-hint {
  font-size: .8rem;
  color: var(--ink-soft);
}
.auth-input,
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row input[type="file"],
.form-row textarea,
.form-row select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  color: var(--ink);
  width: 100%;
}
.auth-input:focus,
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
  border-color: var(--cobalt);
}
.form-row textarea { resize: vertical; min-height: 8rem; }
.auth-status {
  min-height: 1.2rem;
  font-size: .9rem;
  color: var(--ink-soft);
}
.auth-alt {
  margin-top: 2rem;
  font-size: .9rem;
  color: var(--ink-soft);
}
.auth-alt a { color: var(--pink); font-weight: 600; }

.dashboard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.dashboard-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-soft);
  padding-bottom: .3rem;
  border-bottom: 2px solid transparent;
}
.dashboard-nav a.is-active,
.dashboard-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--pink);
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.tier-badge.tier-free { background: var(--line); color: var(--ink-soft); }
.tier-badge.tier-supporter { background: rgba(43,75,242,.12); color: var(--cobalt); }
.tier-badge.tier-pro { background: rgba(242,84,119,.12); color: var(--pink); }

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.image-grid figure {
  margin: 0;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}
.image-grid img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Artist directory — /artists/, /artists/category/[slug]/, /artists/[slug]/
   ========================================================================== */
.directory-section,
.artist-profile-section {
  padding-block: clamp(6rem, 12vw, 9rem) clamp(4rem, 9vw, 6rem);
  min-height: 60vh;
}
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.5rem 0 2.5rem;
}
.category-chip {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .2s, border-color .2s, color .2s;
}
.category-chip:hover { border-color: var(--pink); }
.category-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--canvas);
}
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}
.artist-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.artist-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(20,20,20,.1);
}
.artist-card-media {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  background: var(--line);
}
.artist-card-media img { width: 100%; height: 100%; object-fit: cover; }
.artist-card-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(135deg, var(--canvas), var(--canvas) 10px, #ece8de 10px, #ece8de 20px);
}
.artist-card-badge {
  position: absolute;
  top: .7rem;
  right: .7rem;
}
.artist-card-body { padding: 1rem 1.2rem 1.3rem; }
.artist-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 .2rem;
}
.artist-card-tagline { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .2rem; }
.artist-card-town { font-size: .8rem; color: var(--ink-soft); margin: 0; }
.directory-empty {
  padding: 3rem 0;
  color: var(--ink-soft);
  text-align: center;
}
.directory-empty a { color: var(--pink); font-weight: 600; }

.breadcrumb {
  font-size: .85rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--ink-soft); }
.artist-profile-grid {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 760px) {
  .artist-profile-grid { grid-template-columns: 1fr; }
}
.artist-profile-media {
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
.artist-profile-media img { width: 100%; height: 100%; object-fit: cover; }
.artist-profile-tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.3rem;
  margin: .5rem 0;
}
.artist-profile-town { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1rem; }
.artist-profile-bio { margin: 1.5rem 0; max-width: 60ch; white-space: pre-wrap; }
.artist-profile-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.5rem;
}
.artist-gallery { margin-top: clamp(3rem, 7vw, 5rem); }
.artist-gallery-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Tier pricing — /join/
   ========================================================================== */
.tier-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
  margin: 2rem 0;
}
.tier-card { display: flex; flex-direction: column; gap: .6rem; }
.tier-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  margin: .3rem 0 0;
}
.tier-price-period { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.tier-features {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.tier-features li::before { content: "✓ "; color: var(--pink); font-weight: 700; }

/* ==========================================================================
   Newsletter embed — Beehiiv when configured, mailto fallback otherwise
   ========================================================================== */
.newsletter-embed {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.newsletter-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 0 .4rem;
}
.newsletter-copy { color: var(--ink-soft); margin: 0 0 1rem; }

/* ==========================================================================
   Events — /events/, /events/[slug]/, /events/submit/, admin review queue
   ========================================================================== */
.event-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.event-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background-color .2s;
}
.event-row:hover { background: var(--canvas); }
.event-row-date {
  flex: none;
  width: 90px;
  display: flex;
  flex-direction: column;
}
.event-row-date-main { font-weight: 700; font-size: .9rem; }
.event-row-time { font-size: .78rem; color: var(--ink-soft); }
.event-row-body { flex: 1; min-width: 0; }
.event-row-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 .2rem;
}
.event-row-meta { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.event-row-category { color: var(--pink); }
.event-row-arrow { flex: none; color: var(--ink-soft); }
@media (max-width: 560px) {
  .event-row { gap: 1rem; padding: 1rem; flex-wrap: wrap; }
  .event-row-date { width: auto; flex-direction: row; gap: .5rem; }
}

.admin-queue { display: flex; flex-direction: column; gap: 1.25rem; }
.admin-queue-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.admin-queue-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}