/* ==========================================================================
   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;
  /* Duration is derived, never chosen: it must make this track travel at
     ~41.4px/s, the measured scroll speed of #ticker, so the two bands read as
     one system. Formula: duration = one-set-width / 41.4.

     Was 26.3s for nine logos (1098px set). The Putnam Arts Council logo was
     removed, dropping the set by its ~40px width plus one 56px gap to
     ~1002px, hence 24.2s. This value is CALCULATED, not measured — the build
     could not be run when it changed, so re-measure
     (`trackWidth/2 / animationDuration`) and correct it if it is off. */
  animation: logo-scroll 24.2s 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);
}
/* Three across rather than one full-width row per category. As a single
   stacked column the six categories ran 162px each — ~970px of items and
   1442px of section, nearly two full screens for what is really an index.
   Three columns turns that into two compact rows. */
.discover-rows {
  perspective: 1200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.discover-row {
  display: grid;
  /* The old auto/1fr/auto put number, text and thumbnail on ONE line, which
     needs the full page width. In a third-width column the text would be
     squeezed to ~120px between the number and the 96px chip, so the card is
     restacked: number and thumbnail share the top line, name + description
     span the full width beneath them. */
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num  chip"
    "main main";
  align-items: center;
  align-content: start;
  gap: clamp(.75rem, 1.5vw, 1.1rem) 1rem;
  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-num { grid-area: num; }
.row-main { grid-area: main; display: flex; flex-direction: column; gap: .35rem; }
.row-chip { grid-area: chip; justify-self: end; }
.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); }

/* Three across only where there is room for it. Below ~1040px a third of the
   container is too narrow for the category names, so step down to two, then
   to the original single column on phones. */
@media (max-width: 1040px) {
  .discover-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .discover-rows { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .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;
}
/* These were dashed "[Logo slot]" placeholder boxes. They now hold real
   partner logos and are links, so the dashed outline is gone — a dashed
   border reads as "nothing here yet". Width is a max rather than fixed so
   wide and square marks both sit on the same optical baseline. */
.press-logo-slot {
  max-width: 150px;
  height: 52px;
  padding: 0 .5rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* Match the marquee treatment: slightly muted at rest so no single logo
     shouts, full strength on hover/focus. */
  opacity: .82;
  filter: saturate(.85);
  transition: opacity .25s var(--ease-out), filter .25s var(--ease-out),
              transform .25s var(--ease-out);
}
.press-logo-slot img {
  max-height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.press-logo-slot:hover,
.press-logo-slot:focus-visible {
  opacity: 1;
  filter: saturate(1);
  transform: translateY(-2px);
}

/* ==========================================================================
   Palatka murals tour (visual-art-murals category page)
   ========================================================================== */
.murals-section {
  background: var(--canvas);
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--line);
}
.mural-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: mural;
}
@media (max-width: 820px) {
  .mural-list { grid-template-columns: 1fr; }
}
.mural-item { counter-increment: mural; }
.mural-link {
  display: block;
  height: 100%;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out),
              border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.mural-link:hover,
.mural-link:focus-visible {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.mural-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: .35rem;
}
/* Numbered to match the walking-tour ordering on the committee's own map. */
.mural-title::before {
  content: counter(mural) ". ";
  color: var(--pink);
}
.mural-note {
  display: inline-block;
  margin-left: .5rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: middle;
  white-space: nowrap;
}
.mural-meta {
  font-size: .82rem;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.mural-link:hover .mural-meta,
.mural-link:focus-visible .mural-meta { color: rgba(247,245,240,.75); }
.mural-artist { font-weight: 600; }
.mural-sep { margin: 0 .4rem; color: var(--pink); }
.mural-blurb { font-size: .92rem; line-height: 1.5; }
.mural-credit {
  margin-top: 1.75rem;
  font-size: .88rem;
  color: var(--ink-soft);
  max-width: 68ch;
}
.mural-credit a { 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; }

/* Organization logo variant (/venues/). The default above is built for artist
   PORTRAITS: a 3/4 box with object-fit:cover. Feeding a wide 207x96 logo into
   that upscaled it 3.7x and cropped it to portrait — blurry, with the
   wordmarks sliced off. A logo must be contained and never enlarged past its
   native size, on a light ground, in a box that is not portrait. */
.artist-card-media.is-logo {
  /* 4/3 rather than 16/10 so the logo has more vertical room to sit in. */
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tighter than before so more of the box is logo and less is empty margin. */
  padding: 1rem 1.15rem;
  background: #fff;
}
.artist-card-media.is-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  /* The logo assets are now exported at their full native trimmed size
     (up to 350x180 — the ceiling of the source art in company-logos/), rather
     than the 96px the marquee needed. 150px keeps a little headroom under
     that native height so nothing is ever interpolated upward. Raising this
     past ~180 would start upscaling and go soft again. */
  max-height: 150px;
  object-fit: contain;
}
.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;
}