/* ============================================================================
   PsyShift — View-specific layout
   Only rules that are genuinely unique to one screen live here; anything
   reusable belongs in components.css.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   Shared grids
   ───────────────────────────────────────────────────────────────────────── */
.grid-festivals {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
}
.grid-list { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.grid-artists {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.grid-stats {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Horizontal rail — upcoming festivals on the dashboard, mobile-first swipe. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80vw, 300px);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

@media (min-width: 1024px) {
  /* Desktop has room: the rail becomes a plain grid, no hidden content. */
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  /* Tighter vertically on phones: the hero must not consume the whole first
     screen, or the product looks like a landing page instead of an app. */
  padding: clamp(var(--s-6), 5vw, var(--s-16)) clamp(var(--s-5), 4vw, var(--s-12));
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(110% 130% at 8% 0%,   rgba(124,92,255,.34), transparent 58%),
    radial-gradient(90% 120% at 92% 12%,  rgba(46,211,183,.20), transparent 60%),
    radial-gradient(80% 100% at 60% 118%, rgba(255,77,143,.16), transparent 64%),
    linear-gradient(150deg, #171B2E, #0D1020);
  box-shadow: var(--e-3);
}

/* Fine concentric rings behind the hero copy: the brand's "pulse" motif. */
.hero::before {
  content: "";
  position: absolute;
  top: 50%; right: -14%;
  translate: 0 -50%;
  width: 620px; height: 620px;
  background: repeating-radial-gradient(circle,
    transparent 0 22px, rgba(255,255,255,.055) 22px 23px);
  mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  pointer-events: none;
  animation: hero-spin 90s linear infinite;
}
@keyframes hero-spin { to { rotate: 360deg; } }

.hero__inner { position: relative; z-index: 1; max-width: 640px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding: 5px 12px 5px 8px;
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-text-soft);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
}

.hero h1 {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.02;
}
/* Only the second line takes the gradient — a single accent moment. */
.hero h1 em {
  display: block;
  font-style: normal;
  background: linear-gradient(100deg, var(--c-accent-bright) 10%, var(--c-second) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { margin-top: var(--s-3); font-size: clamp(.98rem, .92rem + .3vw, 1.12rem); color: var(--c-text-soft); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 420px) {
  .hero__cta { gap: var(--s-2); }
  .hero__cta .btn--lg { --btn-h: 46px; padding-inline: var(--s-5); flex: 1 1 auto; }
}

/* A fixed grid rather than a wrapping flex row: the facts stay on one line
   at any width instead of orphaning the last figure onto its own row. */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, auto));
  justify-content: start;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.hero__fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hero__fact span { font-size: var(--t-2xs); color: var(--c-text-faint); letter-spacing: .04em; }

/* Countdown strip to the user's next saved festival. */
.nextup {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  align-items: center;
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-second);
  border-radius: var(--r-md);
}
@media (min-width: 720px) { .nextup { grid-template-columns: 1fr auto; } }
.nextup__days {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-second);
  font-variant-numeric: tabular-nums;
}
.nextup__days span { font-size: var(--t-xs); font-weight: 600; color: var(--c-text-faint); letter-spacing: var(--track-caps); text-transform: uppercase; }

/* Compact festival row used in recommendations & trips. */
.frow {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  transition: background var(--dur-2) var(--ease);
}
.frow:hover { background: rgba(255,255,255,.045); }
.frow + .frow { border-top: 1px solid var(--c-line); }
.frow__art {
  position: relative;
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.frow__art .poster { position: absolute; inset: 0; }
.frow__text { min-width: 0; flex: 1; }
.frow__text strong { display: block; font-size: var(--t-sm); font-weight: 600; }
.frow__text span { font-size: var(--t-2xs); color: var(--c-text-muted); }
.frow__why {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: var(--t-2xs);
  color: var(--c-accent-bright);
}
.frow__why svg { width: 11px; height: 11px; }
.frow__side { text-align: right; flex-shrink: 0; font-size: var(--t-xs); }

.discover__bar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  margin-bottom: var(--s-5);
  background: linear-gradient(180deg, var(--c-bg) 62%, rgba(10,12,19,0));
}

.searchfield {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 260px;
  height: 46px;
  padding-inline: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.searchfield:focus-within { border-color: var(--c-line-accent); box-shadow: 0 0 0 4px var(--c-accent-wash); }
.searchfield svg { width: 18px; height: 18px; color: var(--c-text-faint); flex-shrink: 0; }
.searchfield input { flex: 1; min-width: 0; font-size: var(--t-sm); }
.searchfield input::-webkit-search-cancel-button { display: none; }

.filterbtn { position: relative; }
.filterbtn__badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--c-accent);
  border: 2px solid var(--c-bg);
  border-radius: var(--r-full);
}

/* Desktop filter rail sits beside the results. */
.discover__layout { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.discover__layout > * { min-width: 0; }
@media (min-width: 1180px) {
  .discover__layout { grid-template-columns: 244px 1fr; align-items: start; }
  .discover__aside { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
  .filterbtn { display: none; }
}
.discover__aside { display: none; }
@media (min-width: 1180px) { .discover__aside { display: block; } }

.filtergroup + .filtergroup { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.filtergroup__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.filtergroup__value { color: var(--c-accent-bright); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-size: var(--t-xs); }

.resultbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}
.activefilters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.activefilters .chip { cursor: pointer; }
.activefilters .chip:hover { border-color: var(--c-hot); color: var(--c-hot); }

/* ═════════════════════════════════════════════════════════════════════════
   CALENDAR — the season timeline
   ═══════════════════════════════════════════════════════════════════════ */
.season { display: flex; flex-direction: column; gap: var(--s-2); }

.season__ruler {
  position: sticky;
  top: var(--topbar-h);
  z-index: 30;
  display: none;
  grid-template-columns: 92px 1fr;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  background: linear-gradient(180deg, var(--c-bg) 70%, rgba(10,12,19,0));
}
.season__ruler-track { display: grid; grid-template-columns: repeat(31, 1fr); }
.season__ruler-track span {
  font-size: 9px;
  color: var(--c-text-faint);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .season__ruler { display: grid; } }

.month {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-md);
  transition: background var(--dur-2) var(--ease);
}
.month:hover { background: rgba(255,255,255,.02); }
.month.is-empty { opacity: .45; }
.month.is-current { background: var(--c-accent-wash); box-shadow: inset 0 0 0 1px var(--c-line-accent); }

.month__label {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.month__label h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.month.is-empty .month__label h3 { color: var(--c-text-faint); }
.month__count { font-size: var(--t-2xs); color: var(--c-text-faint); }

/* Track: on mobile it is a simple stacked list; from 900px it becomes a real
   proportional timeline where x-position maps to day-of-month. */
.month__track { display: flex; flex-direction: column; gap: var(--s-2); }

.tbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid hsl(var(--h1) 80% 60%);
  border-radius: var(--r-sm);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.tbar:hover {
  background: var(--c-surface-2);
  box-shadow: var(--e-2);
  z-index: 5;
}
/* The festival name is the only thing that must always survive. Each bar is
   its own query container, so the secondary metadata simply steps aside on
   short bars instead of squeezing the name down to an ellipsis. */
.tbar { container-type: inline-size; }
.tbar__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbar__meta {
  display: none;
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--t-2xs);
  color: var(--c-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container (min-width: 210px) { .tbar__meta { display: block; } }
.tbar.is-saved { border-color: var(--c-second); box-shadow: inset 0 0 0 1px rgba(46,211,183,.28); }

@media (min-width: 900px) {
  .month { grid-template-columns: 92px 1fr; align-items: start; }
  .month__label { flex-direction: column; gap: 2px; padding-top: 6px; }
  .month__track {
    position: relative;
    display: block;
    min-height: 46px;
    padding-block: 3px;
    /* Faint day gridlines every ~1/31 of the width. */
    background-image: repeating-linear-gradient(90deg,
      var(--c-line) 0 1px, transparent 1px calc(100% / 31));
    background-size: calc(100% / 31 * 31) 100%;
    border-radius: var(--r-xs);
  }
  /* Festivals are absolutely positioned bars — overlaps become visible,
     which is exactly the "when is the season busy" answer users want. */
  .tbar {
    position: absolute;
    left: var(--x); width: var(--w);
    min-width: 84px;
    top: calc(var(--lane) * 44px);
    margin: 0;
  }
  /* Grows leftwards from the month's right edge, so the minimum width can
     never push the timeline wider than its container. */
  .tbar[data-anchor="right"] { left: auto; right: var(--r); }
  .tbar:hover { transform: translateY(-2px) scale(1.015); }
  .month__track { height: calc(var(--lanes, 1) * 44px + 6px); }
}

/* Density heatmap under the year header. */
.heatstrip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.heatstrip__cell {
  height: 30px;
  border-radius: var(--r-xs);
  background: color-mix(in oklab, var(--c-accent) calc(var(--d) * 100%), var(--c-surface-2));
  transition: transform var(--dur-2) var(--ease-out);
  position: relative;
}
.heatstrip__cell:hover { transform: scaleY(1.18); }
.heatstrip__cell span {
  position: absolute;
  inset: auto 0 -18px;
  font-size: 9px;
  text-align: center;
  color: var(--c-text-faint);
  letter-spacing: .04em;
}

/* ═════════════════════════════════════════════════════════════════════════
   FESTIVAL DETAIL
   ═══════════════════════════════════════════════════════════════════════ */
.fhero {
  position: relative;
  min-height: clamp(320px, 42vw, 460px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-3);
}
.fhero .poster { position: absolute; inset: 0; }
.fhero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(var(--s-5), 3vw, var(--s-10));
}
.fhero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.fhero h1 {
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.55);
}
.fhero__sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: rgba(255,255,255,.86);
}
.fhero__sub span { display: inline-flex; align-items: center; gap: 6px; }
.fhero__sub svg { width: 15px; height: 15px; opacity: .8; }
.fhero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* The rating (2026-09-25, production only): one row of five stars filled to the
   members' average (--w, data), the average and the count beside. For a member
   attending, that row rates it too: its stars are buttons, laid out first-to-last
   from last-to-first markup, so a hovered star and those before it light up while
   the average's fill steps aside. */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.stars { position: relative; display: inline-flex; line-height: 0; }
.stars__base, .stars__fill { display: inline-flex; gap: 2px; }
.stars__base { color: rgba(255, 255, 255, .22); }
.stars__fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); overflow: hidden; color: var(--c-warn); pointer-events: none; transition: opacity var(--dur-1) var(--ease); }
.stars svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.stars--rate .stars__base { flex-direction: row-reverse; }
.stars__pick { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; color: inherit; cursor: pointer; transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.stars--rate:hover .stars__fill { opacity: 0; }
.stars__pick:hover, .stars__pick:hover ~ .stars__pick { color: var(--c-warn); }
.stars__pick:hover { transform: scale(1.18); }
.stars__pick:focus-visible { outline: 2px solid var(--c-accent-bright); outline-offset: 2px; border-radius: 2px; }
.stars--rate:focus-within .stars__fill { opacity: 0; }
.stars__pick:focus-visible, .stars__pick:focus-visible ~ .stars__pick { color: var(--c-warn); }
.rating__value { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.rating__count { font-size: var(--t-sm); color: rgba(255, 255, 255, .72); }
.rating__mine { font-size: var(--t-sm); font-weight: 600; color: var(--c-warn); }
.rating__mine:empty { display: none; }
.rating__hint { font-size: var(--t-xs); color: rgba(255, 255, 255, .6); }

.detail-layout { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); margin-top: var(--s-6); }
.detail-layout > * { min-width: 0; }
@media (min-width: 1100px) {
  .detail-layout { grid-template-columns: 1fr 372px; align-items: start; }
  .detail-aside { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
}
.detail-aside { display: flex; flex-direction: column; gap: var(--s-4); }

/* Lineup, grouped by stage. */
.stage + .stage { margin-top: var(--s-6); }
.stage__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.stage__name {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-accent-bright);
}
.stage__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-line-accent), transparent); }

/* Headliners get a poster treatment; the rest are compact tokens. */
.headliners {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  margin-bottom: var(--s-4);
}
.hl {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: var(--s-3);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-out);
}
.hl:hover { transform: translateY(-4px); }
.hl .poster { position: absolute; inset: 0; transition: transform var(--dur-4) var(--ease-out); }
.hl:hover .poster { transform: scale(1.08); }
.hl__text { position: relative; z-index: 3; }
.hl__text strong { display: block; font-family: var(--font-display); font-size: var(--t-body); font-weight: 700; color: #fff; }
.hl__text span { font-size: var(--t-2xs); color: rgba(255,255,255,.78); }
/* When the artist plays (2026-09-25): the set's day and time, once published. */
.hl__text .hl__set, .atoken__set, .frow__set { display: block; font-variant-numeric: tabular-nums; }
.hl__text .hl__set { margin-top: 2px; font-weight: 600; color: #fff; }
.atoken__set { font-size: var(--t-2xs); font-weight: 600; color: var(--c-accent-bright); }
.frow__set { margin-top: 2px; font-size: var(--t-xs); font-weight: 600; color: var(--c-accent-bright); }

.tokenwrap { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* The bell: follow an artist at this festival, the app reminds you before the set
   (2026-09-25, production only). On a headliner's poster, at its top right; beside a
   token; at the end of a set's row. Accent-filled once on, as in the app. */
.remindbtn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.remindbtn svg { width: 15px; height: 15px; }
.remindbtn:hover { border-color: var(--c-line-accent); color: var(--c-text); }
.remindbtn:focus-visible { outline: 2px solid var(--c-accent-bright); outline-offset: 2px; }
.remindbtn.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.remindwrap { position: relative; display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
.headliners > .remindwrap { display: grid; }
.headliners > .remindwrap > .remindbtn { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 4; background: rgba(10,12,19,.55); border-color: rgba(255,255,255,.22); color: #fff; }
.headliners > .remindwrap > .remindbtn.is-on { background: var(--c-accent); border-color: var(--c-accent); }
.remindhint { display: flex; align-items: center; gap: var(--s-2); margin: calc(var(--s-2) * -1) 0 var(--s-4); font-size: var(--t-xs); color: var(--c-text-faint); }
.remindhint svg { width: 14px; height: 14px; color: var(--c-accent-bright); flex-shrink: 0; }

/* Set times, day by day (festival XML import — not in docs/design, recorded deviation). */
.timetable { list-style: none; margin: 0; padding: var(--s-2) var(--s-4); }
.timetable__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: var(--t-sm);
}
.timetable__row + .timetable__row { border-top: 1px solid var(--c-line); }
.timetable__row:has(.remindbtn) { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
.timetable__time { font-variant-numeric: tabular-nums; color: var(--c-text-muted); white-space: nowrap; }
.timetable__plus { margin-left: 2px; font-size: var(--t-2xs); color: var(--c-text-faint); }
.timetable__artist { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.timetable__artist:hover { color: var(--c-accent-bright); }
@media (max-width: 520px) {
  .timetable__row { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .timetable__row:has(.remindbtn) { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
}
/* A day's sets, stage by stage (the console's "Stages & set times"), and the
   chips that narrow the section to one stage. */
.timetable__filter { gap: var(--s-2); margin-bottom: var(--s-5); }
.timetable__stage-name {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--c-text-muted);
}
.timetable__stage-name svg { width: 14px; height: 14px; color: var(--c-accent-bright); }

.tmode {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease);
}
.tmode:active { transform: scale(.98); }
.tmode.is-active {
  border-color: var(--c-accent);
  background: var(--c-accent-wash);
  box-shadow: 0 0 0 1px var(--c-accent), 0 10px 30px -14px var(--c-accent);
}

/* Practical info grid. */
/* Practical info is a spec sheet, not a ledger: in columns this narrow the
   key/value pair stacks and stays left-aligned, otherwise long values wrap
   into a ragged right-aligned block. */
.infogrid {
  display: grid;
  gap: 0 var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.infogrid .dlist__row {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  padding: var(--s-3) 0;
}
.infogrid .dlist__val {
  text-align: left;
  font-size: var(--t-sm);
  color: var(--c-text);
}

/* ═════════════════════════════════════════════════════════════════════════
   TRIP PLANNER
   ═══════════════════════════════════════════════════════════════════════ */
.planner { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.planner > * { min-width: 0; }
@media (min-width: 1100px) { .planner { grid-template-columns: 1fr 380px; align-items: start; } }

.steps { display: flex; flex-direction: column; gap: var(--s-4); }

.step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease);
}
.step.is-done { border-color: rgba(46,211,183,.28); }
/* Connector line between steps. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--s-5) + 17px);
  top: calc(var(--s-5) + 34px);
  bottom: calc(var(--s-4) * -1);
  width: 1px;
  background: linear-gradient(180deg, var(--c-line-strong), transparent);
}

/* Side-by-side transport comparison table. */
.compare {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.assumption__val { font-weight: 600; color: var(--c-accent-bright); font-variant-numeric: tabular-nums; }

/* ═════════════════════════════════════════════════════════════════════════
   MY TRIPS
   ═══════════════════════════════════════════════════════════════════════ */
.tripmonth + .tripmonth { margin-top: var(--s-8); }
.tripmonth__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.tripmonth__head h3 {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.tripmonth__rule { flex: 1; height: 1px; background: var(--c-line); }

.trip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.trip + .trip { margin-top: var(--s-3); }
.trip:hover { border-color: var(--c-line-accent); transform: translateY(-2px); }
@media (min-width: 780px) { .trip { grid-template-columns: 116px 1fr 210px; align-items: center; } }

.trip__art {
  position: relative;
  height: 92px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.trip__art .poster { position: absolute; inset: 0; }
.trip__dates {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  padding: var(--s-2);
  font-size: var(--t-2xs);
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.trip__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.trip__fact { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--c-text-muted); }
.trip__fact svg { width: 14px; height: 14px; color: var(--c-text-faint); }
.trip__side { display: flex; flex-direction: column; gap: var(--s-2); }
.trip__cost { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.trip__cost strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.trip__actions { display: flex; gap: var(--s-2); }

/* Readiness checklist. */
.ready { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-2xs); color: var(--c-text-faint); }

/* ═════════════════════════════════════════════════════════════════════════
   ARTISTS
   ═══════════════════════════════════════════════════════════════════════ */
.spotlight {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  padding: var(--s-5);
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(255,77,143,.14), transparent 60%),
    var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
@media (min-width: 860px) {
  .spotlight { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
}
.spotlight__art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
}
.spotlight__art .poster { position: absolute; inset: 0; }
.spotlight__art .acard__initials { font-size: clamp(2rem, 6vw, 3rem); }

/* ═════════════════════════════════════════════════════════════════════════
   Page header, shared by secondary views
   ═══════════════════════════════════════════════════════════════════════ */
.pagehead { margin-bottom: var(--s-6); }
.pagehead__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
}
.pagehead h1 { margin-top: var(--s-1); }
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-text-muted);
  transition: color var(--dur-2) var(--ease), gap var(--dur-2) var(--ease);
}
.backlink:hover { color: var(--c-text); gap: 10px; }
.backlink svg { width: 15px; height: 15px; }

/* ═════════════════════════════════════════════════════════════════════════
   Forum — topic list, one topic, composer
   -------------------------------------------------------------------------
   There is no category column because there are no categories. The space it
   would have taken goes to the two things that actually help someone pick a
   thread out of a flat list: what it is about, and whether it is still alive.
   ═══════════════════════════════════════════════════════════════════════ */
.topiclist {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* One line per topic (2026-09-27, the product owner): the title, then the reply and
   view counts, then the last poster on the right — no avatar, no "started by" line,
   no excerpt (they stay in the markup, the reference's, and the thread shows them).
   Every topic is a thin line, pinned ones included (2026-09-28, the product owner);
   only an announcement is taller. The counts look the same on every row. */
.topic {
  display: grid;
  gap: 0 var(--s-4);
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  padding: 4px var(--s-4);
  border-top: 1px solid var(--c-line);
  transition: background var(--dur-2) var(--ease);
}
.topic.is-announcement { padding: var(--s-2) var(--s-4); }
.topic:first-child { border-top: none; }
.topic:hover { background: rgba(255,255,255,.022); }

/* Pinned threads keep the list's rhythm but declare themselves on the edge. */
.topic.is-pinned { box-shadow: inset 3px 0 0 var(--c-accent-dim); }
/* Announcements (2026-09-27) come above everything, and look it: a warmer edge and ground. */
.topic.is-announcement { background: var(--c-hot-wash); box-shadow: inset 3px 0 0 var(--c-hot); }
.topic.is-announcement:hover { background: rgba(255, 77, 143, .16); }
.topic__title .topic__announce { margin: 0 var(--s-2) 0 0; }

/* The topic page's moderation bar (admins and moderators): pin, announce, lock. */
.modbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
}
.modbar form { display: contents; }
.modbar__title { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-text-faint); }
.modbar__title svg { width: 15px; height: 15px; }

.topic__avatar, .topic__meta, .topic__excerpt { display: none; }

/* Block, not flex: a flag or a chip in front of the title must sit on the
   same line as the first word, not become a column of its own. */
.topic__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}
.topic__title a { color: var(--c-text); }
.topic__title a:hover { color: var(--c-accent-bright); }
.topic__flag {
  display: inline-flex;
  margin-right: 3px;
  vertical-align: -2px;
  color: var(--c-text-faint);
}
.topic__flag svg { width: 14px; height: 14px; }
.topic__title .chip { margin-left: var(--s-2); vertical-align: 1px; }

/* The counts: plain figures, the same on every row. */
.topic__count, .topic__views {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  width: 92px;          /* fixed: the columns line up from row to row */
  line-height: 1.2;
  white-space: nowrap;
}
.topic__count strong, .topic__views strong { font-family: var(--font-display); font-size: var(--t-sm); }
.topic__count span, .topic__views span { font-size: 10px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--c-text-faint); }

/* The last poster, on the right: one line, a small avatar. */
.topic__last { display: flex; align-items: center; gap: var(--s-2); width: 230px; }
.topic__last .avatar { width: 22px; height: 22px; font-size: 9px; }
.topic__lasttext { display: flex; gap: 6px; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.3; }
.topic__lasttext strong { font-size: var(--t-xs); font-weight: 600; }
.topic__lasttext em { font-size: var(--t-2xs); font-style: normal; color: var(--c-text-faint); }

/* Narrower: the last poster goes; the title keeps the room, the counts stay right. */
@media (max-width: 899px) {
  .topic { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 var(--s-3); }
  .topic__last { display: none; }
  .topic__title { font-size: .95rem; }
  /* Each count stacks, figure over label: narrower, so the title keeps the width. */
  .topic__count, .topic__views { flex-direction: column; align-items: center; gap: 0; width: 48px; }
  .topic__count span, .topic__views span { font-size: 9px; }
}

/* ── One topic ─────────────────────────────────────────────────────────── */
.topichead { margin-bottom: var(--s-6); }
.topichead__flags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.topichead h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
.topichead__meta {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
}
.topichead__meta strong { color: var(--c-text-soft); font-weight: 600; }

.postlist { display: flex; flex-direction: column; gap: var(--s-4); }

.post {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
/* The opening post is the same object, one hairline louder. */
.post--opener { border-color: var(--c-line-accent); background: linear-gradient(180deg, var(--c-accent-wash), var(--c-surface) 42%); }

.post__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.post__name { font-family: var(--font-display); font-size: var(--t-body); font-weight: 600; }
.post__authormeta { font-size: var(--t-2xs); color: var(--c-text-faint); }

.post__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  font-size: var(--t-2xs);
  color: var(--c-text-faint);
}
.post__num { margin-left: auto; font-family: var(--font-mono); }
.post__tag {
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.05);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: 9px;
  font-weight: 700;
}

.post__body { max-width: 74ch; font-size: var(--t-body); }
.post__body > * + * { margin-top: var(--s-3); }
/* Members' marks (docs/features/rich-text-editor): long links and code wrap. */
.post__body { overflow-wrap: anywhere; }
.post__body code { white-space: normal; }
.post__body blockquote > :first-child { margin-top: 0; }

.post__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}

.likebtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--c-text-muted);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease);
}
.likebtn svg { width: 14px; height: 14px; }
.likebtn:hover { color: var(--c-text); border-color: var(--c-line-accent); }
.likebtn.is-on { color: var(--c-hot); border-color: rgba(255,77,143,.4); background: var(--c-hot-wash); }
.likebtn.is-on svg { animation: pop var(--dur-3) var(--ease-out); }

/* On a wide screen the author becomes a column, the way a forum has looked
   since forums existed. The markup does not change. */
@media (min-width: 760px) {
  .post { grid-template-columns: 186px minmax(0, 1fr); gap: var(--s-6); }
  .post__author {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding-bottom: 0;
    padding-right: var(--s-5);
    border-bottom: none;
    border-right: 1px solid var(--c-line);
  }
}

.topicfoot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* ── Composer (new topic, and reply) ───────────────────────────────────── */
.composer {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line-accent);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
}
.composer__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}
.composer__who strong { color: var(--c-text); }
.composer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* ═════════════════════════════════════════════════════════════════════════
   PRODUCTION ADDITIONS (server-rendered pages)
   The reference wrote these rules as style="…" attributes from JavaScript.
   Templates may not (root CLAUDE.md: no CSS inside HTML), so each one becomes
   a class here. Same declarations, same result — only the carrier changes.
   A value that is *data* (a hue, a fill ratio, a segment's share) still
   arrives as a custom property: --h1, --fill, --w, --seg.
   ═══════════════════════════════════════════════════════════════════════ */

/* Discovery — filter panel */
.pillrow--wrap { flex-wrap: wrap; overflow: visible; }
.filterpanel__head { margin-bottom: var(--s-4); }
.filterpanel__head strong { font-size: var(--t-sm); }
.filterpanel__reset,
.filterpanel__apply { margin-top: var(--s-5); }
.select--sort { width: auto; min-width: 158px; }

/* Discovery — result bar and month groups */
.resultbar__count { color: var(--c-text); }
.faint--xs { font-size: var(--t-2xs); }

/* Season calendar */
.lede--tight { margin-top: var(--s-2); }
.grid-stats--spaced { margin-bottom: var(--s-6); }
.heatstrip--spaced { margin-bottom: var(--s-8); }
.month__none { font-size: var(--t-2xs); padding-left: var(--s-2); }
.tbar__saved { margin-left: auto; }

/* Dashboard */
.hero__avatar { width: 22px; height: 22px; font-size: 9px; }
.nextup--top { margin-top: var(--s-5); }
.row--gap4 { gap: var(--s-4); }
.grow--min0 { min-width: 0; }
.nextup__name { display: block; }
.muted--xs { font-size: var(--t-xs); }
.grid-stats--spaced4 { margin-bottom: var(--s-4); }

/* Artists */
.searchfield--narrow { max-width: 320px; }
/* The directory's sort and filters (2026-09-25), the /festivals bar without its search. */
.artists__bar { position: static; justify-content: flex-end; padding-block: 0; background: none; }
.opt .flag { margin-right: var(--s-2); vertical-align: -1px; }
.section--flush { margin-top: 0; }
.spotlight__name { margin: var(--s-2) 0 var(--s-3); }
.spotlight__chips { gap: var(--s-2); margin-top: var(--s-4); }
.spotlight__playing { margin-top: var(--s-5); }
.spotlight__list { margin-top: var(--s-2); }
.spotlight__more { margin-top: var(--s-3); }
.focuspanel { margin-bottom: var(--s-8); border-color: var(--c-line-accent); }
.focuspanel__head { gap: var(--s-4); align-items: flex-start; }
.focuspanel__art {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
}
.focuspanel__initials { font-size: 1.6rem; }
.focuspanel__chips { gap: var(--s-2); margin-top: var(--s-2); }
.focuspanel__section { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.focuspanel__list { margin-top: var(--s-2); }
.muted--sm { font-size: var(--t-sm); }

/* Festival sheet */
.festival__onhold { margin: var(--s-6) 0 0; }
.lede--prose { max-width: 70ch; margin-bottom: var(--s-4); }
.festival__genres { gap: var(--s-2); margin-top: var(--s-2); }
.panel--clip { overflow: hidden; }
.locmap__facts { padding-block: var(--s-4); }
.costpanel__head { margin-bottom: var(--s-4); }
.costpanel__title { font-size: var(--t-h3); }
.costpanel__action { margin-top: var(--s-5); }
.costpanel__note { font-size: var(--t-2xs); margin-top: var(--s-3); text-align: center; }

.pillrow--visible { overflow: visible; }
.select--forumsort { width: auto; min-width: 170px; }
.topic__locked { margin-top: var(--s-6); }
.composer__note { font-size: var(--t-2xs); }

/* My Trips */
.grid-stats--spaced8 { margin-bottom: var(--s-8); }
.nextup--bottom { margin-bottom: var(--s-8); }
.empty__actions { gap: var(--s-3); justify-content: center; }
.trip__chips { gap: var(--s-2); margin-bottom: var(--s-2); }
.trip__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }

.grid-stats--pair { margin-top: var(--s-5); grid-template-columns: 1fr 1fr; }

/* Profile & settings */
.switch--top { align-items: flex-start; }
.account__head { gap: var(--s-4); margin-bottom: var(--s-5); }
.account__name { display: block; font-size: 1.05rem; }
.account__email { display: block; font-size: var(--t-sm); }
.account__field { margin-top: var(--s-4); }
.account__submit { margin-top: var(--s-4); }
.account__submit-tight { margin-top: var(--s-2); }
.account__hint { margin-bottom: var(--s-4); }
.account__hint-top { margin-top: var(--s-3); }
.account__meter { gap: var(--s-3); align-items: center; margin-top: var(--s-2); }
.account__meterlabel { font-size: var(--t-2xs); min-width: 72px; text-align: right; }
.account__feedback { margin-top: var(--s-3); }
.account__switch { margin-bottom: var(--s-4); }
.account__switch-top { margin-top: var(--s-5); }
.account__switches { gap: var(--s-4); }
.account__device { align-items: flex-start; }
.account__danger { margin-top: var(--s-5); }

/* Language picker (docs/features/i18n) — shown once a second language exists. */
.localepicker { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.localepicker__label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-text-muted); }
.localepicker__select { width: auto; min-width: 0; }

/* Footer — "Cookie choices" is a form button dressed as the footer's links */
.appfoot__choices { padding: 0; font-size: inherit; }

/* Festival sheet — the ticket-sale banner under the hero (Phase 10b): the days
   left, big, on the right; what they count down to on the left. Stacks on a phone. */
.ticketsale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow count" "date count";
  align-items: center;
  column-gap: var(--s-8);
  row-gap: var(--s-1);
  margin: var(--s-6) 0 0;
  padding: var(--s-6) clamp(var(--s-5), 1rem + 3vw, var(--s-12));
  border: 1px solid var(--c-line-accent);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 180% at 100% 50%, rgba(124, 92, 255, .34), transparent 62%),
    linear-gradient(100deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
  box-shadow: var(--e-glow);
  overflow: hidden;
}
.ticketsale__eyebrow {
  grid-area: eyebrow;
  align-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-accent-bright);
}
.ticketsale__eyebrow svg { flex: none; width: 18px; height: 18px; }
.ticketsale__date {
  grid-area: date;
  align-self: start;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--c-text);
}
.ticketsale__count {
  grid-area: count;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
  line-height: 1;
}
.ticketsale__count strong {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2rem + 6vw, 6rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
  background: linear-gradient(180deg, var(--c-text) 20%, var(--c-accent-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ticketsale__count span {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  color: var(--c-text-soft);
}
/* The day itself: the accent turns to the "go" colour. */
.ticketsale.is-today {
  border-color: rgba(46, 211, 183, .42);
  background:
    radial-gradient(90% 180% at 100% 50%, rgba(46, 211, 183, .28), transparent 62%),
    linear-gradient(100deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
  box-shadow: 0 0 0 1px rgba(46, 211, 183, .3), 0 18px 48px -20px rgba(46, 211, 183, .55);
}
.ticketsale.is-today .ticketsale__eyebrow { color: var(--c-second); }
.ticketsale.is-today .ticketsale__count strong { background-image: linear-gradient(180deg, var(--c-text) 20%, var(--c-second)); }
@media (max-width: 560px) {
  .ticketsale {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "count" "date";
    row-gap: var(--s-3);
  }
}

/* Festival sheet — the site map and the member's private pins (Phase 10b).
   A pin's place arrives as data: --x and --y, percentages of the image. */
.sitemap { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2); }
.sitemap__img { display: block; width: 100%; height: auto; }
.sitemap__img[data-action] { cursor: crosshair; }
.sitemap__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -100%;
  display: grid;
  place-items: center;
  color: var(--c-hot);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6));
  pointer-events: none;
}
.sitemap__pin svg { width: 30px; height: 30px; }
.sitemap__tag {
  position: absolute;
  top: 5px;
  min-width: 16px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
}
.sitemap__tag--inline {
  position: static;
  display: inline-block;
  margin-right: var(--s-2);
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--c-hot);
}
.sitemap__form { margin-top: var(--s-4); }
.sitemap__label { max-width: 360px; }
.sitemap__hint { margin-top: var(--s-2); font-size: var(--t-xs); }
.sitemap__list { margin-top: var(--s-4); }
.sitemap__list form { margin: 0; }
/* Several maps (2026-09-28): one after the other, each with its name, pins and form. */
.sitemap__block + .sitemap__block { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--c-line); }
.sitemap__name { margin: 0 0 var(--s-3); font-size: var(--t-sm); font-weight: 600; color: var(--c-text-soft); }
.sitemap__private { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--t-xs); }
.sitemap__private svg { width: 14px; height: 14px; }

/* Festival sheet — photographers' galleries hosted elsewhere, under the photos
   (Phase 10b): one card per gallery, opening the photographer's own site. */
.gallery + .extgals { margin-top: var(--s-8); }
.extgals__title { margin: 0; font-size: var(--t-h3); }
.extgals__sub { margin: var(--s-1) 0 var(--s-4); font-size: var(--t-sm); }
.extgals__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--s-3);
}
.extgal {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  color: var(--c-text);
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.extgal:hover { border-color: var(--c-line-accent); background: var(--c-surface-2); }
.extgal:focus-visible { outline: 2px solid var(--c-accent-bright); outline-offset: 2px; }
.extgal__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--c-accent-bright);
  background: var(--c-accent-wash);
  border-radius: var(--r-sm);
}
.extgal__icon svg { width: 20px; height: 20px; }
.extgal__body { display: grid; flex: 1; min-width: 0; }
.extgal__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extgal__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--c-text-muted); }
.extgal > svg { flex: none; width: 16px; height: 16px; color: var(--c-text-muted); }

/* Festival sheet — social media (Phase 10b): official accounts, then the
   community's, each a row of outline buttons with the platform's mark. */
.socials + .socials { margin-top: var(--s-6); }
.socials__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.socials__title svg { width: 16px; height: 16px; color: var(--c-accent-bright); }
.socials__note { margin: calc(var(--s-2) * -1) 0 var(--s-3); font-size: var(--t-sm); }
.socials__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sociallink { max-width: 100%; min-width: 0; }
.sociallink > span:not(.bmark, .sr-only) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sociallink__label { color: var(--c-text-muted); font-weight: 400; }
.sociallink__label::before { content: "·"; margin-right: var(--s-2); }

/* Suggest a festival (Phase 10c): the forum's composer, on a page of its own. */
.suggest { max-width: 760px; }
.suggest__lede { margin: 0 0 var(--s-4); color: var(--c-text-soft); }
.suggest .alert { margin-bottom: var(--s-4); }
.suggest .composer__note { display: inline-flex; align-items: center; gap: var(--s-2); }
.suggest .composer__note svg { flex: none; width: 15px; height: 15px; }

/* Forum — "Report" under a post (docs/features/forum, "Reporting a post"). A
   disclosure pushed to the end of the post's footer; open, its form takes the
   footer's whole width. Quiet on purpose: it is there, not advertised. */
.post__foot { flex-wrap: wrap; }
.reportpost { margin-left: auto; min-width: 0; }
.reportpost[open] { flex-basis: 100%; margin-left: 0; }
.reportpost__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  font-size: var(--t-2xs);
  color: var(--c-text-faint);
  cursor: pointer;
  list-style: none;
}
.reportpost__toggle::-webkit-details-marker { display: none; }
.reportpost__toggle svg { width: 13px; height: 13px; }
.reportpost__toggle:hover,
.reportpost[open] .reportpost__toggle { color: var(--c-text-muted); }
.reportpost__form {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
}
.reportpost__reasons { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.reportpost__reasons legend { padding: 0; margin-bottom: var(--s-1); }
.reportpost__reason { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); cursor: pointer; }
.reportpost__reason input { flex: none; accent-color: var(--c-accent); }
.reportpost__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--t-2xs); }
.reportpost__foot .faint { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.reportpost__foot svg { width: 13px; height: 13px; flex: none; }
.reportpost__done { margin-left: auto; }

/* Festival sheet — the Google map (console key, 2026-09-22) in place of the drawn
   one, same frame; and the "Directions" link under the location's facts. */
.locmap__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--c-surface-2); }

/* ── Home hero with photographs (production only, docs/features/dashboard) ──
   The console's background images, one after the other: a slow cross-fade,
   a slow push-in on the one showing, and a veil that keeps the copy readable
   — darkest where the text sits, lighter where the picture can breathe. The
   rings stay on top, faint, so the hero keeps its signature. */
.hero--photo { background: #0B0D16; }
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.04;
  transition: opacity 1.8s var(--ease-in-out);
}
.hero__slide.is-on {
  opacity: 1;
  animation: hero-push calc(var(--hero-seconds, 7s) + 2s) linear both;
}
@keyframes hero-push {
  from { scale: 1.04; translate: 0 0; }
  to   { scale: 1.13; translate: -1.5% -1%; }
}
.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,12,19,.93) 0%, rgba(10,12,19,.78) 38%, rgba(10,12,19,.34) 72%, rgba(10,12,19,.2) 100%),
    linear-gradient(0deg, rgba(10,12,19,.75) 0%, transparent 45%),
    radial-gradient(90% 120% at 0% 0%, rgba(124,92,255,.32), transparent 60%),
    radial-gradient(70% 90% at 100% 100%, rgba(46,211,183,.16), transparent 60%);
}
@media (max-width: 639px) {
  .hero__slides::after {
    background:
      linear-gradient(180deg, rgba(10,12,19,.55) 0%, rgba(10,12,19,.82) 55%, rgba(10,12,19,.95) 100%),
      radial-gradient(90% 70% at 0% 0%, rgba(124,92,255,.3), transparent 60%);
  }
}
.hero--photo::before { z-index: 1; opacity: .7; }
.hero--photo .hero__inner { z-index: 2; }
.hero--photo h1,
.hero--photo p { text-shadow: 0 2px 24px rgba(0,0,0,.45); }

/* Which image is showing, and how long it has left. */
.hero__dots {
  position: absolute;
  right: clamp(var(--s-4), 3vw, var(--s-8));
  bottom: clamp(var(--s-4), 3vw, var(--s-8));
  z-index: 2;
  display: flex;
  gap: 6px;
}
.hero__dots span {
  position: relative;
  width: 26px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.22);
}
.hero__dots span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--c-accent-bright), var(--c-second));
  transform: scaleX(0);
  transform-origin: left;
}
.hero__dots span.is-on::after { animation: hero-dot var(--hero-seconds, 7s) linear both; }
@keyframes hero-dot { to { transform: scaleX(1); } }
@media (max-width: 639px) { .hero__dots { top: var(--s-4); bottom: auto; } }

/* ── Legal pages (production, docs/features/legal) ────────────────────────── */
.legal__tabs { margin-bottom: var(--s-5); }
.legal { max-width: 78ch; }
.legal h2 { margin-top: var(--s-8); font-size: var(--t-h3); }
.legal__updated { color: var(--c-text-faint); font-size: var(--t-xs); }
.legal__block { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--c-line-accent); color: var(--c-text); }
.legal__facts { margin-top: var(--s-4); }
.legal .table-wrap { margin-top: var(--s-4); }
.legal .table td { white-space: normal; min-width: 9ch; }
.legal .table td:first-child { white-space: nowrap; }

/* ── Calendar: month and week views (production, docs/features/calendar) ────
   Outlook's layout, in the product's colours: a toolbar, then the month as a
   grid of equal day cells with festivals as solid bars across their days, or
   the week as day columns — an all-day band for festivals, a time grid for
   their set times. */
.calviews { margin-right: var(--s-2); }
/* The page head's button row gains the switcher: let it wrap on phones. */
.row:has(> .calviews) { flex-wrap: wrap; }

.outlook {
  margin-top: var(--s-6);
  overflow: hidden;
  background: rgba(255,255,255,.012);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.caltool {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.caltool__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--c-text-muted);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.caltool__arrow:hover { background: var(--c-surface-2); color: var(--c-text); }
.caltool__arrow svg { width: 16px; height: 16px; }
.caltool__title { margin-left: var(--s-2); font-size: var(--t-h3); font-weight: 600; min-width: 0; }

/* Month: seven columns of equal day cells. */
.outlook__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--c-line);
}
.outlook__weekdays span {
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-text-muted);
}
.mweek {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 30px repeat(var(--lanes), 24px) minmax(22px, 1fr);
  min-height: 128px;
  border-bottom: 1px solid var(--c-line);
}
.outlook__weeks .mweek:last-child { border-bottom: 0; }
.mday {
  grid-column: var(--c);
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 8px;
  border-left: 1px solid var(--c-line);
  transition: background var(--dur-2) var(--ease);
}
.mday:nth-child(1) { border-left: 0; }
a.mday:hover { background: rgba(255,255,255,.03); }
.mday.is-out { background: rgba(0,0,0,.18); }
.mday.is-out .mday__num { color: var(--c-text-faint); }
.mday__num { font-size: var(--t-xs); font-weight: 600; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.mday.is-today { background: var(--c-accent-wash); box-shadow: inset 0 0 0 1px var(--c-line-accent); }
.mday.is-today .mday__num { color: var(--c-accent-bright); }
.mday__more { font-size: var(--t-2xs); font-weight: 600; color: var(--c-text-muted); }

/* An event: the year view's bar — a card with a stripe in the festival's hue,
   its flag, its name, and the teal tick when you attend. */
.calevent {
  position: relative;
  z-index: 1;
  grid-column: var(--c) / span var(--s);
  grid-row: calc(var(--l) + 2);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 1px 4px;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid hsl(var(--h1) 80% 60%);
  border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.calevent:hover { background: var(--c-surface-2); box-shadow: var(--e-2); z-index: 5; }
.calevent__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.calevent.is-saved { border-color: var(--c-second); box-shadow: inset 0 0 0 1px rgba(46,211,183,.28); }
.calevent__saved { flex-shrink: 0; margin-left: auto; padding: 1px 5px; }
.calevent__saved svg { width: 10px; height: 10px; }
.calevent.is-before { margin-left: 0; border-left: 1px dashed var(--c-line-strong); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.calevent.is-after { margin-right: 0; border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Week: one row of seven tall day columns, the same bars in more detail. */
.outlook__weekdays--dated span { display: flex; align-items: baseline; gap: 6px; }
.outlook__weekdays--dated strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--c-text); }
.outlook__weekdays--dated .is-today,
.outlook__weekdays--dated .is-today strong { color: var(--c-accent-bright); }
.mweek--week { grid-template-rows: 10px repeat(var(--lanes), 52px) minmax(40px, 1fr); min-height: 420px; border-bottom: 0; }
.mweek--week .mday { padding: 0; }
.mweek--week .mday.is-today { background: var(--c-accent-wash); }
.calevent--week { margin: 4px 5px; padding: 0 var(--s-3); gap: var(--s-3); line-height: 1.3; }
.calevent__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.calevent__text strong { font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; }
.calevent__text span { font-size: var(--t-2xs); font-weight: 500; color: var(--c-text-faint); overflow: hidden; text-overflow: ellipsis; }
.outlook__note { padding: var(--s-3) var(--s-4); font-size: var(--t-xs); color: var(--c-text-faint); border-top: 1px solid var(--c-line); }

@media (max-width: 639px) {
  .caltool { padding: var(--s-2) var(--s-3); }
  .caltool__title { font-size: var(--t-body); }
  .outlook__weekdays span { padding: 6px 2px; text-align: center; }
  .mweek { grid-template-rows: 26px repeat(var(--lanes), 20px) minmax(16px, 1fr); min-height: 96px; }
  .mday { padding: 4px; align-items: center; }
  .mday__more { font-size: 10px; }
  .calevent { margin-inline: 1px; padding-inline: 4px; font-size: 10px; }
  .calevent { gap: 4px; }
  .calevent__saved { display: none; }
  .outlook__weekdays--dated span { flex-direction: column; align-items: center; gap: 0; }
  .outlook__weekdays--dated strong { font-size: 1.05rem; }
  .mweek--week { grid-template-rows: 8px repeat(var(--lanes), 40px) minmax(24px, 1fr); min-height: 300px; }
  .calevent--week { padding-inline: 5px; }
  .calevent__text span { display: none; }
}

/* ── Artist sheet: Listen & follow (production, docs/features/artist-sheet) ── */
.artistlinks__list { display: flex; flex-direction: column; gap: 2px; margin-inline: calc(var(--s-2) * -1); }
.artistlink {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-md);
  transition: background var(--dur-2) var(--ease);
}
.artistlink:hover { background: var(--c-surface-2); }
.artistlink__icon,
.artistlink .bmark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
}
.artistlink__icon { background: var(--bg); color: var(--fg); }
.artistlink__icon svg { width: 17px; height: 17px; }
.artistlink__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.artistlink__text strong { font-size: var(--t-sm); font-weight: 600; }
.artistlink__text span { font-size: var(--t-2xs); color: var(--c-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artistlink > .ico,
.artistlink > svg { width: 14px; height: 14px; color: var(--c-text-faint); flex-shrink: 0; }
.artistlinks__none { font-size: var(--t-sm); color: var(--c-text-faint); }
/* About spans its column like the Gallery below it; .prose would cap it at 68ch. */
.artistabout { max-width: none; }

/* Flyers (2026-09-25, docs/features/festival-sheet): the side column's first box.
   A strip that snaps flyer by flyer — scrolled sideways without JavaScript,
   turned by flyers.js with it. A flyer is never cropped: it is fitted whole
   into a box short enough for the ticket box to stay in view under it. */
.flyers { display: flex; flex-direction: column; gap: var(--s-3); }
.flyers__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-md);
  background: var(--c-bg-deep);
}
.flyers__track::-webkit-scrollbar { display: none; }
.flyers__slide {
  flex: 0 0 100%;
  height: min(420px, 40vh);
  scroll-snap-align: center;
  cursor: zoom-in;
}
.flyers__slide img { width: 100%; height: 100%; object-fit: contain; }
.flyers__dots { display: flex; justify-content: center; gap: var(--s-2); }
.flyers__dot {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: var(--r-full);
  background: var(--c-line-strong);
  transition: background var(--dur-2) var(--ease), width var(--dur-2) var(--ease);
}
.flyers__dot.is-on { width: 20px; background: var(--c-accent); }
.download-once { max-width: 40rem; }

/* Festival sheet — its editions (2026-09-29, docs/features/festival-editions): a
   pill per edition under the hero, the one shown marked; on another edition's
   page, a note pointing to the current one. */
.editions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
}
.editions__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-right: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text-muted);
}
.editions__label svg { width: 16px; height: 16px; }
.editions__pill {
  padding: 6px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text-soft);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.editions__pill:hover { color: var(--c-text); border-color: var(--c-line-accent); }
.editions__pill.is-on { color: var(--c-text); border-color: var(--c-accent); background: var(--c-accent-wash); }
.editions__past { margin-top: var(--s-4); }
/* More than four editions: the rest sit in a small popover behind a "•••" pill (a
   <details>, so it opens without JavaScript; app.js closes it on a click elsewhere). */
.editions__more { position: relative; }
.editions__dots { list-style: none; cursor: pointer; letter-spacing: 1px; line-height: 1.2; }
.editions__dots::-webkit-details-marker { display: none; }
.editions__more[open] > .editions__dots { color: var(--c-text); border-color: var(--c-line-accent); }
.editions__dots:focus-visible, .editions__item:focus-visible { outline: 2px solid var(--c-accent-bright); outline-offset: 2px; }
.editions__panel {
  position: absolute;
  top: calc(100% + var(--s-2));
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 11rem;
  max-width: calc(100vw - 2 * var(--s-4));
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.editions__item {
  padding: 10px var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text-soft);
}
.editions__item:hover { background: var(--c-accent-wash); color: var(--c-text); }