/* ==========================================================
   MusicFestGuide — unified stylesheet
   MFG Brand System v1.1

   ONE sheet, TWO themes, switched live by the data-theme
   attribute on <html>:

       <html data-theme="night">   black, lasers, stars
       <html data-theme="day">     paper, print, hard shadows

   Everything that differs between them is a token below.
   Component rules read tokens and never hard-code a colour,
   which is why the toggle works without a reload.
   ========================================================== */

:root {
  /* Brand palette — identical in both themes, never overridden */
  --black:        #0A0A0A;
  --charcoal:     #121212;
  --navy:         #0F172A;
  --silver:       #CBD5E1;
  --soft-silver:  #E2E8F0;
  --soft-white:   #F8FAFC;
  --teal:         #0D9488;
  --teal-bright:  #14B8A6;
  --cyan:         #22D3EE;
  --neon-green:   #39FF14;
  --neon-pink:    #FF2D95;

  --wrap:    1180px;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
}

/* ---------- NIGHT (default) ----------
   Violet-black ground with a laser gradient running pink →
   violet → cyan. Text sits in the lavender family rather than
   neutral grey, which is what keeps the whole thing feeling
   lit rather than merely dark.
   ---------------------------------------------------------- */
:root, :root[data-theme="night"] {
  --bg:          #0B0713;   /* violet-black */
  --bg-2:        #140C22;
  --bg-3:        #1D1330;
  --surface:     #140C22;
  --ink:         #F6F2FF;   /* warm white, faint violet cast */
  --ink-soft:    #B9A7DC;   /* lavender body copy */
  --muted:       #8A79AD;
  --line:        #2E2145;
  --line-soft:   #221838;
  --accent:      #38D9F0;

  /* the laser gradient — the signature of this theme */
  --lz-pink:     #FF4D9D;
  --lz-violet:   #8B5CF6;
  --lz-cyan:     #38D9F0;
  --laser:       linear-gradient(90deg, #FF4D9D 0%, #8B5CF6 50%, #38D9F0 100%);

  --border-w:    1px;
  --radius:      14px;
  --radius-lg:   22px;
  --shadow:      0 18px 44px rgba(0,0,0,.72);
  --shadow-sm:   0 8px 22px rgba(0,0,0,.52);
  --lift:        translateY(-3px);
  --lift-shadow: 0 14px 34px rgba(0,0,0,.62);

  --btn-bg:      #F6F2FF;
  --btn-fg:      #0B0713;
  --logo-filter: none;
  --paper-grain: .09;
  --blend:       screen;
}

/* ---------- DAY ---------- */
:root[data-theme="day"] {
  --bg:          #FBFAF7;
  --bg-2:        #FFFFFF;
  --bg-3:        #FFFFFF;
  --surface:     #FFFFFF;
  --ink:         #0A0A0A;
  --ink-soft:    #3D4451;
  --muted:       #6B7280;
  --line:        #0A0A0A;
  --line-soft:   #DCD9D2;
  --accent:      #FF2D95;

  --border-w:    2px;
  --radius:      4px;
  --radius-lg:   6px;
  --shadow:      5px 5px 0 #0A0A0A;
  --shadow-sm:   3px 3px 0 #0A0A0A;
  --lift:        translate(-3px, -3px);
  --lift-shadow: 6px 6px 0 #0A0A0A;

  --btn-bg:      #0A0A0A;
  --btn-fg:      #FBFAF7;
  --logo-filter: invert(1);
  --paper-grain: .16;
  --blend:       multiply;
}

/* Colour-scheme hint so form controls and scrollbars follow */
:root, :root[data-theme="night"] { color-scheme: dark; }
:root[data-theme="day"]          { color-scheme: light; }

/* Smooth the switch, but never animate on first paint */
:root.theme-ready body,
:root.theme-ready .site-header,
:root.theme-ready .card,
:root.theme-ready .side-card,
:root.theme-ready .stub {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

* { box-sizing: border-box; }

/* Safety net, deliberately near the top of the file: nothing may
   render at its natural size and blow the layout apart. If anything
   later in this stylesheet fails to load, this still holds. */
img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}
.teddy-paws svg { width: 46px; height: 46px; }
.rating-icon svg, .acc-icon svg { width: 16px; height: 16px; }
.nav-caret { width: 8px; height: 8px; }
.util-btn svg, .util-search svg { width: 15px; height: 15px; }
.fx-btn svg { width: 17px; height: 17px; }
.theme-toggle button svg { width: 15px; height: 15px; }
.brand-logo { width: clamp(200px, 22vw, 272px); height: auto; }
.footer-logo img { width: 236px; height: auto; }
.teddy-badge img { width: 58px; height: 58px; }
.news-thumb img { height: 168px; object-fit: cover; }
.feat-card img { max-height: 200px; object-fit: cover; }
.article-lead img { width: 100%; height: auto; }
.tablet-screen iframe, .tablet-screen video { height: 100%; }
.video-embed iframe { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--cyan); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--cyan); color: var(--bg);
  padding: 10px 16px; z-index: 200; font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 68px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-icon { width: 38px; height: 38px; display: block; flex-shrink: 0; }
.brand-text {
  font-family: var(--display); font-weight: 700;
  font-size: 1rem; letter-spacing: .01em;
  text-transform: uppercase; color: var(--ink);
  line-height: 1.05;
}
.brand-text small {
  display: block; font-size: .58rem; letter-spacing: .3em;
  color: var(--muted); font-weight: 500;
}

/* Nav with dropdowns */
.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: 8px;
  font-family: var(--display); font-weight: 500;
  font-size: .86rem; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-soft);
  background: none; border: 0; cursor: pointer;
  font-family: var(--display);
}
.nav-link:hover, .nav-item:focus-within > .nav-link { color: var(--cyan); background: var(--surface); }
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-caret { width: 8px; height: 8px; opacity: .6; }

.nav-panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 208px; padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 120;
}
.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-panel a {
  display: block; padding: 9px 12px; border-radius: 7px;
  font-size: .88rem; color: var(--ink-soft);
  font-family: var(--body);
}
.nav-panel a:hover { background: var(--navy); color: var(--cyan); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  color: var(--ink-soft); border-radius: 8px; padding: 8px 12px;
  font-family: var(--display); font-size: .8rem; cursor: pointer;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 120% at 50% -10%, var(--navy) 0%, var(--bg) 60%);
  border-bottom: 1px solid var(--line);
  border-image: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--teal-bright) 70%, transparent) 1;
  border-top: 0; border-left: 0; border-right: 0;
  border-bottom-width: 1px; border-bottom-style: solid;
}

.hero-inner { padding: 60px 22px 52px; }
.hero-home .hero-inner { padding: 96px 22px 84px; }

/* Grain sits above the beams so the light picks up texture.
   On dark it also kills gradient banding, which is the usual
   giveaway that a hero is CSS rather than artwork. */
.hero::after {
  content: ""; display: block;
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; opacity: .09;
  background-image: none;
  background-size: 220px 220px;
  height: auto; left: 0; right: 0; bottom: 0; top: 0;
}


.hero-inner { position: relative; z-index: 4; }

.crumbs {
  font-family: var(--display); font-size: .78rem;
  color: var(--muted); margin-bottom: 20px; letter-spacing: .02em;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--cyan); }
.crumbs span { margin: 0 6px; }

.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--cyan); margin: 0 0 14px;
}

.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: 1.06; letter-spacing: -.025em;
  margin: 0 0 16px; max-width: 18ch; color: var(--ink);
}
.home-h1 { max-width: 15ch; }
.home-h1 em {
  font-style: normal; color: var(--cyan);
}

.hero-sub {
  color: var(--ink-soft); font-size: 1.06rem;
  max-width: 62ch; margin: 0 0 26px;
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft);
  background: var(--surface);
}
.tag:hover { border-color: var(--cyan); color: var(--cyan); }

.hero-logo { max-width: 120px; height: auto; margin-bottom: 20px; display: block; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block; padding: 13px 26px;
  border-radius: 8px; cursor: pointer;
  font-family: var(--display); font-weight: 600;
  font-size: .9rem; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn-primary {
  background: var(--ink); color: var(--bg);
}
.btn-primary:hover {
  color: var(--bg); background: var(--cyan);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(34,211,238,.28);
}
.btn-ghost { border-color: var(--line); color: var(--ink-soft); background: transparent; }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* Shock CTA — neon, used sparingly per brand rules */
.btn-shock {
  background: var(--neon-green); color: var(--bg);
  box-shadow: 0 0 0 rgba(57,255,20,0);
}
.btn-shock:hover {
  color: var(--bg); transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(57,255,20,.34);
}

/* ---------- Ticket stub (signature element) ----------
   A real ticket is printed on light stock. On a black page that
   contrast IS the design — the stub reads as a physical object
   laid on the page rather than another dark panel among many.
*/

.stub-wrap { margin: -34px auto 0; position: relative; z-index: 20; }

.stub {
  display: flex; align-items: stretch;
  background:
    linear-gradient(168deg, #FFFFFF 0%, var(--ink) 42%, #ECF1F6 100%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  /* lift off the page: deep drop + a cyan bloom underneath */
  box-shadow:
    0 26px 60px rgba(0,0,0,.72),
    0 8px 22px rgba(0,0,0,.5),
    0 0 46px -10px rgba(34,211,238,.42);
}

/* printed top rule, like a ticket header band */
.stub::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--cyan) 0%, var(--teal-bright) 38%, var(--neon-pink) 100%);
  z-index: 2;
}

.stub-main {
  flex: 1; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(134px, 1fr));
  gap: 0; padding: 0;
}
.stub-item {
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  border-right: 1px solid rgba(10,10,10,.09);
}
.stub-item:last-child { border-right: 0; }

.stub-label {
  font-family: var(--display); font-size: .63rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .19em;
  color: #6B7A8C; margin-bottom: 7px;
}
.stub-value {
  font-family: var(--display); font-weight: 700;
  font-size: 1.05rem; color: var(--bg); line-height: 1.26;
  letter-spacing: -.02em;
}
.stub-sub { font-size: .8rem; color: #6B7A8C; margin-top: 3px; font-weight: 500; }

/* perforation — punched through light stock, so the notch reads dark */
.stub-perf {
  width: 2px; flex: 0 0 2px;
  background-image: radial-gradient(circle, rgba(10,10,10,.34) 0 2.5px, transparent 3px);
  background-size: 2px 13px; background-repeat: repeat-y;
}

/* the tear-off end, printed in brand colour */
.stub-end {
  flex: 0 0 116px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 11px;
  padding: 22px 12px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--bg) 100%);
  position: relative;
}
.stub-end::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--neon-pink);
}
.barcode {
  width: 58px; height: 46px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 14px);
  opacity: .92;
}
.stub-serial {
  font-family: var(--display); font-size: .56rem; font-weight: 600;
  color: #CBD5E1; letter-spacing: .14em;
  writing-mode: vertical-rl; max-height: 86px; overflow: hidden;
  text-transform: uppercase;
}

.stub-cta { margin-top: 22px; }

/* ---------- Layout ---------- */

.cols {
  display: grid; grid-template-columns: minmax(0,1fr) 296px;
  gap: 48px; align-items: start;
  padding-top: 46px; padding-bottom: 62px;
}
.col-main { min-width: 0; }
.col-side { position: sticky; top: 94px; }

.block { margin: 0 0 44px; }
.block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.block-link {
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  color: var(--cyan); text-transform: uppercase; letter-spacing: .08em;
}

h2 {
  font-family: var(--display); font-weight: 500;
  font-size: 1.5rem; letter-spacing: -.015em;
  margin: 0 0 16px; color: var(--ink);
}
h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.02rem; margin: 0 0 12px; color: var(--ink);
}
p { margin: 0 0 16px; }

.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 26px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 18px; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--ink); font-weight: 600; }
.col-main > .block p { color: var(--ink-soft); }

.updated {
  font-family: var(--display); font-size: .78rem;
  color: var(--muted); border-top: 1px solid var(--line);
  padding-top: 16px; margin-top: 34px;
}

/* ---------- Sidebar ---------- */

.side-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
.side-card h3 {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--muted); font-weight: 600;
}
.side-link {
  display: block; padding: 9px 0; font-size: .92rem;
  color: var(--ink-soft); border-bottom: 1px solid var(--line-soft);
}
.side-link:last-child { border-bottom: 0; }
.side-link:hover { color: var(--cyan); }

/* ---------- Cards ---------- */

.card-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  margin-top: 22px;
}
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover {
  transform: translateY(-3px); border-color: var(--cyan); color: var(--ink);
}
.card-date {
  font-family: var(--display); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--cyan); margin-bottom: 9px;
}
.card-name {
  font-family: var(--display); font-weight: 700;
  font-size: 1.1rem; letter-spacing: -.015em;
  margin: 0 0 6px; line-height: 1.28;
}
.card-place { font-size: .86rem; color: var(--muted); margin: 0 0 12px; }
.card-blurb { font-size: .91rem; color: var(--ink-soft); margin: 0 0 16px; flex: 1; }
.card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: var(--display); font-size: .76rem; color: var(--muted);
  border-top: 1px solid var(--line-soft); padding-top: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.card-price { color: var(--ink); font-weight: 700; }

/* ---------- Filters ---------- */

.filters {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-top: 28px;
}
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label {
  font-family: var(--display); font-size: .66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
}
.filter-field select {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 13px; font-family: var(--body); font-size: .91rem;
  min-width: 154px;
}
.filter-reset {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 8px; padding: 10px 18px; cursor: pointer;
  font-family: var(--display); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.filter-reset:hover { border-color: var(--neon-pink); color: var(--neon-pink); }

.result-count {
  font-family: var(--display); font-size: .78rem; color: var(--muted);
  margin: 18px 0 0; text-transform: uppercase; letter-spacing: .12em;
}
.empty-state { color: var(--ink-soft); text-align: center; padding: 46px 0 70px; }

/* ---------- Chips ---------- */

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--display); font-size: .83rem; color: var(--ink-soft);
}
.chip:hover { border-color: var(--cyan); color: var(--cyan); }
.chip-count { color: var(--muted); margin-left: 7px; font-size: .76rem; }

/* ---------- Ratings panel ---------- */

.ratings {
  display: grid; gap: 14px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.rating {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px 20px;
}
.rating-safety     { border-top-color: var(--cyan); }
.rating-comfort    { border-top-color: var(--teal-bright); }
.rating-complexity { border-top-color: var(--neon-pink); }

.rating-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.rating-kind {
  font-family: var(--display); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
}
.rating-axis {
  font-family: var(--display); font-size: .6rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  opacity: .75;
}
.rating-verdict {
  font-family: var(--display); font-weight: 700;
  font-size: 1.32rem; letter-spacing: -.02em;
  line-height: 1.15; margin: 0 0 12px; color: var(--ink);
}
.rating-safety     .rating-verdict { color: var(--cyan); }
.rating-comfort    .rating-verdict { color: var(--teal-bright); }
.rating-complexity .rating-verdict { color: var(--neon-pink); }

.pips { display: flex; gap: 5px; margin-bottom: 13px; }
.pip {
  width: 26px; height: 4px; border-radius: 2px;
  background: var(--line);
}
.rating-safety     .pip.is-on { background: var(--cyan); }
.rating-comfort    .pip.is-on { background: var(--teal-bright); }
.rating-complexity .pip.is-on { background: var(--neon-pink); }

.rating-note {
  font-size: .87rem; color: var(--ink-soft); margin: 0; line-height: 1.55;
}
.ratings-foot {
  font-size: .82rem; color: var(--muted); margin: 16px 0 0;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.ratings-block { margin-bottom: 40px; }

@media (max-width: 520px) {
  .pip { width: 100%; }
  .pips { gap: 4px; }
}

/* ---------- Lineup ---------- */

.lineup { display: flex; flex-wrap: wrap; gap: 9px; }
.artist {
  font-family: var(--display); font-size: .88rem;
  padding: 8px 15px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
}
.artist-head {
  color: var(--ink); font-weight: 700;
  border-color: var(--teal); background: var(--navy);
}

/* ---------- FAQ ---------- */

.faq-item { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item h3 { margin-bottom: 6px; font-size: 1rem; }
.faq-item p { color: var(--ink-soft); margin: 0; font-size: .94rem; }

/* ---------- Gallery / contact ---------- */

.gallery {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.gallery img {
  width: 100%; height: 140px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); display: block;
}
.contact-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.contact-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px;
}
.contact-card span {
  display: block; font-family: var(--display); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); margin-bottom: 5px;
}

/* ---------- News ---------- */

.news-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  margin-top: 24px;
}
.news-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  transition: transform .15s ease, border-color .15s ease;
}
.news-card:hover { transform: translateY(-3px); border-color: var(--cyan); }
.news-kicker {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 11px;
}
.cat-badge {
  font-family: var(--display); font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  padding: 4px 10px; border-radius: 4px;
  background: var(--navy); color: var(--cyan); border: 1px solid var(--line);
}
.cat-music   { color: var(--cyan); }
.cat-fashion { color: var(--neon-pink); }
.cat-gadgets { color: var(--neon-green); }
.cat-tickets { color: var(--teal-bright); }
.cat-media   { color: var(--ink-soft); }
.news-date {
  font-family: var(--display); font-size: .7rem;
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
}
.news-title {
  font-family: var(--display); font-weight: 700; font-size: 1.08rem;
  line-height: 1.32; margin: 0 0 8px; letter-spacing: -.015em;
}
.news-standfirst { font-size: .91rem; color: var(--ink-soft); margin: 0; flex: 1; }

/* ---------- New / Now / Next ---------- */

.nnn-grid {
  display: grid; gap: 20px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.nnn-col {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 24px;
  border-top: 3px solid var(--line);
}
.nnn-col.is-new  { border-top-color: var(--neon-green); }
.nnn-col.is-now  { border-top-color: var(--cyan); }
.nnn-col.is-next { border-top-color: var(--neon-pink); }

.nnn-head {
  font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 4px;
  text-transform: uppercase;
}
.is-new  .nnn-head { color: var(--neon-green); }
.is-now  .nnn-head { color: var(--cyan); }
.is-next .nnn-head { color: var(--neon-pink); }

.nnn-def {
  font-family: var(--display); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); margin: 0 0 20px;
}
.nnn-entry {
  border-top: 1px solid var(--line-soft); padding: 14px 0;
}
.nnn-entry:last-child { padding-bottom: 0; }
.nnn-entry h4 {
  font-family: var(--display); font-size: .96rem; font-weight: 600;
  margin: 0 0 4px; color: var(--ink);
}
.nnn-entry p { font-size: .87rem; color: var(--ink-soft); margin: 0; }

.issue-meta {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-family: var(--display); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
}

/* ---------- Space Bear ---------- */

.bear-hero { text-align: center; }
.bear-hero h1 { margin-left: auto; margin-right: auto; }
.bear-hero .hero-sub { margin-left: auto; margin-right: auto; }
.bear-orbit {
  width: 118px; height: 118px; margin: 0 auto 26px;
  border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, var(--navy), var(--bg));
  position: relative;
}
.bear-orbit::before {
  content: ""; position: absolute; inset: -14px;
  border-radius: 50%; border: 1px dashed var(--line);
  animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bear-orbit img {
  width: 76px; height: 76px; display: block;
  /* the bear drifts in his helmet, the way you would in zero g */
  animation: bear-float 9s ease-in-out infinite alternate;
}

/* Logo usage grid */
.logo-grid {
  display: grid; gap: 14px; margin: 24px 0 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.logo-swatch {
  margin: 0; padding: 22px 16px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-align: center;
}
.logo-swatch.is-dark  { background: var(--bg); }
.logo-swatch.is-light { background: var(--ink); }
.logo-swatch img { width: 88px; height: 88px; object-fit: contain; display: block; margin: 0 auto 14px; }
.logo-swatch figcaption {
  font-family: var(--display); font-size: .64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.logo-swatch.is-light figcaption { color: #64748B; }

/* Space Bear on the homepage hero */
.hero-bear-mark {
  position: absolute; right: 4%; top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 26vw, 320px); height: auto;
  opacity: .13; z-index: 1; pointer-events: none;
}
.hero-home .hero-inner { position: relative; z-index: 3; }

/* Footer host line */
.footer-host {
  display: flex; align-items: center; gap: 11px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.footer-host img { width: 34px; height: 34px; }
.footer-host span {
  font-family: var(--display); font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
}

.principle-list { counter-reset: p; margin-top: 26px; }
.principle {
  border-top: 1px solid var(--line); padding: 20px 0;
  display: grid; grid-template-columns: 46px 1fr; gap: 18px;
}
.principle::before {
  counter-increment: p; content: counter(p, decimal-leading-zero);
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  color: var(--cyan); padding-top: 2px;
}
.principle h3 { margin-bottom: 5px; }
.principle p { color: var(--ink-soft); margin: 0; font-size: .94rem; }

/* ---------- Contact ---------- */

.contact-split {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px;
  padding: 46px 0 62px; align-items: start;
}
.contact-route {
  border-top: 1px solid var(--line); padding: 20px 0;
}
.contact-route h3 { margin-bottom: 5px; }
.contact-route p { color: var(--ink-soft); font-size: .93rem; margin: 0 0 8px; }
.contact-route a { color: var(--cyan); font-family: var(--display); font-size: .9rem; }

.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px;
}
.field { margin-bottom: 16px; }
.field label {
  display: block; font-family: var(--display); font-size: .68rem;
  font-weight: 500; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; font-family: var(--body); font-size: .94rem;
}
.field textarea { min-height: 122px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--cyan); outline: none;
}
.form-note { font-size: .8rem; color: var(--muted); margin: 14px 0 0; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface); margin-top: 44px;
}
.footer-inner {
  display: grid; gap: 34px;
  grid-template-columns: 1.9fr 1fr 1fr 1fr; padding: 48px 22px 32px;
}
.footer-brand {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  text-transform: uppercase; display: block; margin-bottom: 10px;
  letter-spacing: .02em;
}
.footer-note { color: var(--muted); font-size: .89rem; max-width: 40ch; }
.footer-col h4 {
  font-family: var(--display); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted); margin: 0 0 13px;
}
.footer-col a { display: block; color: var(--ink-soft); font-size: .9rem; padding: 5px 0; }
.footer-col a:hover { color: var(--cyan); }
.footer-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  border-top: 1px solid var(--line); padding: 18px 22px 28px;
  font-family: var(--display); font-size: .74rem; color: var(--muted);
  letter-spacing: .04em;
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px 16px 20px;
    max-height: 78vh; overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-header { position: relative; }
  .nav-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 8px 14px; min-width: 0;
  }
  .nav-panel a { padding: 7px 0; }
  .nav-caret { display: none; }
}

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; gap: 30px; }
  .col-side { position: static; }
  .contact-split { grid-template-columns: 1fr; gap: 30px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero-bear-mark { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .bear-orbit { width: 96px; height: 96px; }
  .bear-orbit img { width: 60px; height: 60px; }
  .hero-inner { padding: 42px 22px 38px; }
  .hero-home .hero-inner { padding: 62px 22px 54px; }
  .stub { flex-direction: column; }
  .stub-item { border-right: 0; border-bottom: 1px solid rgba(10,10,10,.09); }
  .stub-perf {
    width: 100%; height: 2px; flex: 0 0 2px;
    background-image: radial-gradient(circle, rgba(10,10,10,.34) 0 2.5px, transparent 3px);
    background-size: 13px 2px; background-repeat: repeat-x;
  }
  .stub-end { flex: none; flex-direction: row; padding: 16px; gap: 16px; }
  .stub-end::before { display: none; }
  .stub-serial { writing-mode: horizontal-tb; max-height: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 26px; }
  .filter-field { flex: 1 1 140px; }
  .filter-field select { min-width: 0; width: 100%; }
  .principle { grid-template-columns: 34px 1fr; gap: 12px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .stagelights, .stagelights::after, .bear-orbit::before { animation: none; }
  html { scroll-behavior: auto; }
  .card:hover, .news-card:hover, .btn-primary:hover, .btn-shock:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}


/* ==========================================================
   DAY THEME — structural overrides
   Colour comes from the tokens above. These rules cover the
   things a token can't express: print rules, hard shadows,
   tinted fields, rotation, halftone.
   ========================================================== */

[data-theme="day"] body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='.4'/%3E%3C/svg%3E"),
    radial-gradient(circle at 1px 1px, rgba(10,10,10,.03) 1px, transparent 0);
  background-size: 180px 180px, 5px 5px;
}

[data-theme="day"] .site-header { background: var(--bg); border-bottom-width: 2px; }
[data-theme="day"] .brand-icon,
[data-theme="day"] .footer-host img,
[data-theme="day"] .bear-orbit img,
[data-theme="day"] .hero-bear-mark { filter: invert(1); }

[data-theme="day"] .nav-link { border: 2px solid transparent; font-weight: 600; }
[data-theme="day"] .nav-link:hover,
[data-theme="day"] .nav-item:focus-within > .nav-link {
  background: var(--neon-green); color: var(--ink); border-color: var(--ink);
}
[data-theme="day"] .nav-panel {
  background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow);
}
[data-theme="day"] .nav-panel a:hover { background: var(--cyan); color: var(--ink); }
[data-theme="day"] .nav-toggle { background: var(--neon-green); box-shadow: var(--shadow-sm); font-weight: 700; }

/* Hero: colour fields + halftone instead of glow */
[data-theme="day"] .hero {
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  border-image: none;
}
[data-theme="day"] .hero-home::before { opacity: .62; filter: none; }

[data-theme="day"] .hero::after { mix-blend-mode: multiply; opacity: .16; }
[data-theme="day"] .hero-bear-mark { mix-blend-mode: multiply; opacity: 1; transform: translateY(-50%) rotate(-7deg); }

[data-theme="day"] .eyebrow {
  display: inline-block; color: var(--ink); background: var(--neon-green);
  border: 2px solid var(--ink); padding: 4px 11px; transform: rotate(-1.2deg);
}
[data-theme="day"] .hero h1 { font-size: clamp(2.3rem, 7vw, 5rem); line-height: .96; letter-spacing: -.045em; }
[data-theme="day"] .home-h1 em {
  color: var(--ink);
  background: linear-gradient(transparent 62%, var(--neon-pink) 62% 96%, transparent 96%);
  padding: 0 .06em;
}
[data-theme="day"] .tag { border: 2px solid var(--ink); background: var(--surface); }
[data-theme="day"] .tag:nth-child(3n+1):hover { background: var(--cyan); color: var(--ink); }
[data-theme="day"] .tag:nth-child(3n+2):hover { background: var(--neon-green); color: var(--ink); }
[data-theme="day"] .tag:nth-child(3n+3):hover { background: var(--neon-pink); color: var(--ink); }

/* Buttons: hard offset, press-down */
[data-theme="day"] .btn { border: 2px solid var(--ink); box-shadow: var(--shadow); border-radius: 0; }
[data-theme="day"] .btn:active { transform: translate(5px,5px); box-shadow: 0 0 0 var(--ink); }
[data-theme="day"] .btn-primary { background: var(--ink); color: var(--bg); }
[data-theme="day"] .btn-primary:hover { background: var(--ink); color: var(--bg); transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--neon-pink); }
[data-theme="day"] .btn-ghost { background: var(--surface); color: var(--ink); }
[data-theme="day"] .btn-ghost:hover { background: var(--cyan); color: var(--ink); transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }
[data-theme="day"] .btn-shock { background: var(--neon-green); color: var(--ink); }
[data-theme="day"] .btn-shock:hover { color: var(--ink); transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }

/* Ticket: printed band, tinted cells, neon tear-off */
[data-theme="day"] .stub {
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink); border-radius: 0; transform: rotate(-.55deg);
}
[data-theme="day"] .stub::before {
  height: 7px;
  background: linear-gradient(90deg, var(--cyan) 0 33%, var(--neon-green) 33% 66%, var(--neon-pink) 66% 100%);
  border-bottom: 2px solid var(--ink);
}
[data-theme="day"] .stub-main { padding-top: 9px; }
[data-theme="day"] .stub-item { border-right: 2px solid var(--ink); }
[data-theme="day"] .stub-item:last-child { border-right: 0; }
[data-theme="day"] .stub-item:nth-child(even) { background: color-mix(in srgb, var(--cyan) 9%, var(--surface)); }
[data-theme="day"] .stub-item:nth-child(odd)  { background: color-mix(in srgb, var(--neon-green) 7%, var(--surface)); }
[data-theme="day"] .stub-value { color: var(--ink); letter-spacing: -.028em; }
[data-theme="day"] .stub-perf {
  width: 3px; flex: 0 0 3px;
  background-image: radial-gradient(circle, var(--ink) 0 3px, transparent 3.2px);
  background-size: 3px 14px;
}
[data-theme="day"] .stub-end { background: var(--neon-pink); border-left: 2px solid var(--ink); }
[data-theme="day"] .stub-end::before { display: none; }
[data-theme="day"] .barcode {
  background-image: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px,
    transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 14px);
  opacity: 1;
}
[data-theme="day"] .stub-serial { color: var(--ink); font-weight: 700; }

/* Surfaces: hard shadows, square corners, black rules */
[data-theme="day"] .card,
[data-theme="day"] .news-card,
[data-theme="day"] .side-card,
[data-theme="day"] .rating,
[data-theme="day"] .contact-card,
[data-theme="day"] .form-card,
[data-theme="day"] .filters,
[data-theme="day"] .chip,
[data-theme="day"] .nnn-col,
[data-theme="day"] .logo-swatch,
[data-theme="day"] .artist,
[data-theme="day"] .gallery img {
  border: 2px solid var(--ink); border-radius: 0; box-shadow: var(--shadow-sm);
}
[data-theme="day"] .card:hover,
[data-theme="day"] .news-card:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--cyan); }
[data-theme="day"] .card-grid > .card:nth-child(3n+2):hover { box-shadow: 6px 6px 0 var(--neon-pink); }
[data-theme="day"] .card-grid > .card:nth-child(3n+3):hover { box-shadow: 6px 6px 0 var(--neon-green); }
[data-theme="day"] .card-date {
  color: var(--ink); background: var(--cyan);
  display: inline-block; align-self: flex-start;
  padding: 3px 8px; border: 1.5px solid var(--ink);
}
[data-theme="day"] .card-foot { border-top: 2px solid var(--ink); }

[data-theme="day"] .block-head { border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
[data-theme="day"] .block-link { border-bottom: 2px solid var(--neon-pink); color: var(--ink); }
[data-theme="day"] .prose h2 { border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
[data-theme="day"] .prose li::marker { color: var(--neon-pink); }
[data-theme="day"] .updated { border-top: 2px solid var(--ink); }
[data-theme="day"] .side-card h3 { border-bottom: 2px solid var(--ink); padding-bottom: 8px; color: var(--ink); }
[data-theme="day"] .chip:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); color: var(--ink); }
[data-theme="day"] .chip-row > .chip:nth-child(4n+1):hover { background: var(--cyan); }
[data-theme="day"] .chip-row > .chip:nth-child(4n+2):hover { background: var(--neon-green); }
[data-theme="day"] .chip-row > .chip:nth-child(4n+3):hover { background: var(--neon-pink); }
[data-theme="day"] .chip-row > .chip:nth-child(4n+4):hover { background: var(--teal-bright); }

[data-theme="day"] .filter-field select,
[data-theme="day"] .field input,
[data-theme="day"] .field select,
[data-theme="day"] .field textarea {
  background: var(--bg); border: 2px solid var(--ink); border-radius: 0; color: var(--ink);
}
[data-theme="day"] .filter-reset {
  background: var(--neon-pink); border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm); color: var(--ink); border-radius: 0;
}
[data-theme="day"] .result-count { color: var(--ink); }

/* Ratings: tinted fields instead of coloured top rules */
[data-theme="day"] .rating-safety     { background: color-mix(in srgb, var(--cyan) 14%, var(--surface)); }
[data-theme="day"] .rating-comfort    { background: color-mix(in srgb, var(--teal-bright) 13%, var(--surface)); }
[data-theme="day"] .rating-complexity { background: color-mix(in srgb, var(--neon-pink) 11%, var(--surface)); }
[data-theme="day"] .rating-top { border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
[data-theme="day"] .rating-verdict { color: var(--ink); }
[data-theme="day"] .rating-kind { color: var(--ink); }
[data-theme="day"] .pip { height: 7px; border: 1.5px solid var(--ink); background: transparent; }
[data-theme="day"] .ratings-foot { border-top: 2px solid var(--ink); }

[data-theme="day"] .artist-head { background: var(--neon-green); color: var(--ink); box-shadow: var(--shadow-sm); }
[data-theme="day"] .faq-item:first-of-type { border-top: 2px solid var(--ink); }
[data-theme="day"] .cat-badge { border: 2px solid var(--ink); color: var(--ink); }
[data-theme="day"] .cat-music   { background: var(--cyan); }
[data-theme="day"] .cat-fashion { background: var(--neon-pink); }
[data-theme="day"] .cat-gadgets { background: var(--neon-green); }
[data-theme="day"] .cat-tickets { background: var(--teal-bright); }
[data-theme="day"] .cat-media   { background: var(--soft-silver); }

[data-theme="day"] .nnn-col.is-new  { background: color-mix(in srgb, var(--neon-green) 13%, var(--surface)); }
[data-theme="day"] .nnn-col.is-now  { background: color-mix(in srgb, var(--cyan) 14%, var(--surface)); }
[data-theme="day"] .nnn-col.is-next { background: color-mix(in srgb, var(--neon-pink) 11%, var(--surface)); }
[data-theme="day"] .nnn-col { padding: 0 24px 26px; box-shadow: var(--shadow); }
[data-theme="day"] .nnn-col:nth-child(2) { transform: translateY(-14px); }
[data-theme="day"] .nnn-head {
  color: var(--ink); font-size: 2.6rem; letter-spacing: -.055em;
  margin: 0 -24px 0; padding: 20px 24px 12px;
  border-bottom: 2px solid var(--ink);
}
[data-theme="day"] .nnn-def { margin: 16px 0 18px; }
[data-theme="day"] .issue-meta { border-top: 2px solid var(--ink); color: var(--ink); }

[data-theme="day"] .bear-orbit { background: var(--neon-green); border: 2px solid var(--ink); }
[data-theme="day"] .bear-orbit::before { border: 2px dashed var(--ink); }
[data-theme="day"] .principle { border-top: 2px solid var(--ink); grid-template-columns: 58px 1fr; }
[data-theme="day"] .principle::before { color: var(--neon-pink); font-size: 1.5rem; letter-spacing: -.05em; }
[data-theme="day"] .logo-swatch.is-dark { background: var(--black); }
[data-theme="day"] .logo-swatch.is-light { background: var(--surface); }
[data-theme="day"] .contact-route { border-top: 2px solid var(--ink); }
[data-theme="day"] .contact-route a { color: var(--ink); border-bottom: 2px solid var(--neon-pink); }

[data-theme="day"] .site-footer { border-top: 2px solid var(--ink); background: var(--surface); }
[data-theme="day"] .footer-col h4 { border-bottom: 2px solid var(--ink); padding-bottom: 7px; color: var(--ink); }
[data-theme="day"] .footer-host { border-top: 2px solid var(--ink); }
[data-theme="day"] .footer-host span { color: var(--ink); }
[data-theme="day"] .footer-legal { border-top: 2px solid var(--ink); }
[data-theme="day"] .skip-link { background: var(--neon-green); color: var(--ink); border: 2px solid var(--ink); }
[data-theme="day"] a:hover { color: var(--neon-pink); }

@media (max-width: 900px) {
  [data-theme="day"] .nnn-col:nth-child(2) { transform: none; }
}
@media (max-width: 640px) {
  [data-theme="day"] .stub { transform: none; box-shadow: 5px 5px 0 var(--ink); }
  [data-theme="day"] .stub-item { border-right: 0; border-bottom: 2px solid var(--ink); }
  [data-theme="day"] .stub-item:last-child { border-bottom: 0; }
  [data-theme="day"] .stub-perf {
    width: 100%; height: 3px;
    background-image: radial-gradient(circle, var(--ink) 0 3px, transparent 3.2px);
    background-size: 14px 3px; background-repeat: repeat-x;
  }
  [data-theme="day"] .stub-end { border-left: 0; border-top: 2px solid var(--ink); }
  [data-theme="day"] .nnn-head { font-size: 2rem; }
}


/* ==========================================================
   THEME TOGGLE
   ========================================================== */

.theme-toggle {
  display: inline-flex; align-items: center; gap: 0;
  border: var(--border-w) solid var(--line);
  border-radius: 999px; padding: 3px; background: var(--surface);
  flex-shrink: 0; margin-left: 4px;
}
[data-theme="day"] .theme-toggle { border-radius: 0; border-width: 2px; box-shadow: var(--shadow-sm); }

.theme-toggle button {
  display: grid; place-items: center;
  width: 30px; height: 26px; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 999px;
  color: var(--muted);
  transition: background .18s ease, color .18s ease;
}
[data-theme="day"] .theme-toggle button { border-radius: 0; }
.theme-toggle button svg { width: 15px; height: 15px; }
.theme-toggle button:hover { color: var(--ink); }

.theme-toggle button[aria-pressed="true"] { color: var(--black); background: var(--cyan); }
[data-theme="day"] .theme-toggle button[aria-pressed="true"] { background: var(--neon-green); color: var(--ink); }

@media (max-width: 1020px) {
  .theme-toggle { margin-left: auto; margin-right: 8px; }
}

/* ==========================================================
   NIGHT SKY — starfield, lasers, grain
   Three parallax star layers with independent drift and
   twinkle, plus an occasional shooting star. Night only.
   ========================================================== */

.stars { display: none; }

[data-theme="night"] .stars {
  display: block;
  position: absolute; inset: 0; z-index: 1;
  /* sky occupies the upper two-thirds; the lower third is
     where beam haze pools, so stars fade out into it */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 86%);
  pointer-events: none; overflow: hidden;
}

/* Each layer is one tiny dot repeated by box-shadow — cheap,
   crisp at any DPI, and no image request. */
[data-theme="night"] .stars::before,
[data-theme="night"] .stars::after,
[data-theme="night"] .stars i {
  content: ""; position: absolute; top: 0; left: 0;
  border-radius: 50%; background: transparent;
}

/* far layer: many small, slow */
[data-theme="night"] .stars::before {
  width: 1px; height: 1px;
  box-shadow: 1703px 913px rgba(255,255,255,0.55), 1633px 513px rgba(255,255,255,0.4), 1643px 258px rgba(255,255,255,0.28), 809px 431px rgba(255,255,255,1.0), 902px 856px rgba(255,255,255,0.55), 702px 125px rgba(255,255,255,0.85), 1536px 586px rgba(255,255,255,0.28), 1617px 518px rgba(255,255,255,0.7), 736px 1022px rgba(255,255,255,0.28), 568px 275px rgba(255,255,255,0.85), 713px 468px rgba(255,255,255,0.28), 2274px 513px rgba(255,255,255,0.28), 1359px 99px rgba(255,255,255,0.85), 17px 730px rgba(255,255,255,1.0), 1636px 501px rgba(255,255,255,0.4), 81px 501px rgba(255,255,255,1.0), 328px 271px rgba(255,255,255,0.85), 1892px 292px rgba(255,255,255,0.55), 1293px 483px rgba(255,255,255,0.7), 988px 1099px rgba(255,255,255,0.7), 1747px 749px rgba(255,255,255,0.4), 3px 577px rgba(255,255,255,0.7), 1186px 622px rgba(255,255,255,0.7), 800px 578px rgba(255,255,255,0.4), 1233px 951px rgba(255,255,255,0.55), 1052px 391px rgba(255,255,255,0.28), 1907px 661px rgba(255,255,255,0.7), 888px 364px rgba(255,255,255,0.28), 1330px 770px rgba(255,255,255,0.4), 1536px 285px rgba(255,255,255,0.85), 716px 602px rgba(255,255,255,0.85), 148px 367px rgba(255,255,255,0.55), 2210px 521px rgba(255,255,255,0.28), 1699px 695px rgba(255,255,255,0.28), 2171px 1305px rgba(255,255,255,0.28), 387px 566px rgba(255,255,255,0.55), 2190px 167px rgba(255,255,255,0.7), 1747px 1119px rgba(255,255,255,0.28);
  animation: star-drift 240s linear infinite, twinkle-a 5.5s ease-in-out infinite alternate;
  opacity: .62;
}

/* mid layer */
[data-theme="night"] .stars::after {
  width: 1.6px; height: 1.6px;
  box-shadow: 669px 1347px rgba(255,255,255,0.8), 203px 58px rgba(255,255,255,0.35), 1014px 480px rgba(255,255,255,0.65), 478px 159px rgba(255,255,255,0.8), 402px 111px rgba(255,255,255,0.35), 1595px 875px rgba(255,255,255,0.5), 690px 929px rgba(255,255,255,0.8), 15px 1362px rgba(255,255,255,0.65), 1282px 1311px rgba(255,255,255,0.5), 632px 607px rgba(255,255,255,1.0), 365px 348px rgba(255,255,255,0.8), 619px 841px rgba(255,255,255,0.8), 1268px 143px rgba(255,255,255,1.0), 418px 358px rgba(255,255,255,0.65), 1679px 97px rgba(255,255,255,0.35), 347px 379px rgba(255,255,255,1.0), 1361px 516px rgba(255,255,255,0.5), 1981px 829px rgba(255,255,255,0.65), 1406px 363px rgba(255,255,255,0.8), 320px 1260px rgba(255,255,255,0.5), 348px 1317px rgba(255,255,255,1.0), 434px 1187px rgba(255,255,255,0.65), 1662px 929px rgba(255,255,255,0.8), 1807px 623px rgba(255,255,255,0.35), 382px 545px rgba(255,255,255,0.5), 1067px 179px rgba(255,255,255,1.0), 499px 1001px rgba(255,255,255,0.8), 1378px 1371px rgba(255,255,255,0.65), 1976px 286px rgba(255,255,255,1.0), 1798px 815px rgba(255,255,255,0.35), 1624px 742px rgba(255,255,255,1.0), 532px 1355px rgba(255,255,255,0.35), 1047px 509px rgba(255,255,255,0.65), 1974px 841px rgba(255,255,255,0.8), 889px 1224px rgba(255,255,255,0.35), 823px 730px rgba(255,255,255,0.65), 1301px 563px rgba(255,255,255,0.8), 1568px 326px rgba(255,255,255,0.65), 588px 866px rgba(255,255,255,0.35), 164px 1260px rgba(255,255,255,0.5), 671px 679px rgba(255,255,255,0.8), 1715px 941px rgba(255,255,255,0.5), 767px 67px rgba(255,255,255,0.8), 1430px 297px rgba(255,255,255,0.5), 1766px 681px rgba(255,255,255,0.8), 1804px 86px rgba(255,255,255,0.65), 1967px 1303px rgba(255,255,255,1.0), 1166px 546px rgba(255,255,255,0.5), 528px 642px rgba(255,255,255,1.0), 162px 1268px rgba(255,255,255,0.35), 758px 943px rgba(255,255,255,0.35), 1085px 289px rgba(255,255,255,0.65), 841px 831px rgba(255,255,255,0.8), 505px 1080px rgba(255,255,255,0.5), 126px 471px rgba(255,255,255,0.8), 1777px 1369px rgba(255,255,255,0.35), 1130px 726px rgba(255,255,255,0.5), 1788px 121px rgba(255,255,255,0.35), 1845px 564px rgba(255,255,255,0.8), 386px 642px rgba(255,255,255,0.8), 801px 242px rgba(255,255,255,0.5), 424px 824px rgba(255,255,255,1.0), 1206px 414px rgba(255,255,255,0.65), 485px 1009px rgba(255,255,255,0.35), 1809px 563px rgba(255,255,255,1.0), 148px 133px rgba(255,255,255,0.35), 1984px 1083px rgba(255,255,255,0.35), 1506px 476px rgba(255,255,255,0.8), 898px 410px rgba(255,255,255,1.0), 257px 39px rgba(255,255,255,0.8);
  animation: star-drift 150s linear infinite, twinkle-b 3.8s ease-in-out infinite alternate;
  opacity: .78;
}

/* near layer: few, larger, fastest — gives real parallax */
[data-theme="night"] .stars i {
  display: block; width: 2.2px; height: 2.2px;
  filter: drop-shadow(0 0 2.5px rgba(255,255,255,.55));
  box-shadow: 348px 830px rgba(255,255,255,0.5), 1936px 520px rgba(255,255,255,1.0), 1352px 1301px rgba(255,255,255,0.8), 746px 704px rgba(255,255,255,0.8), 1394px 561px rgba(255,255,255,0.8), 109px 488px rgba(255,255,255,0.8), 39px 222px rgba(255,255,255,0.35), 1966px 590px rgba(255,255,255,1.0), 225px 672px rgba(255,255,255,1.0), 1227px 861px rgba(255,255,255,0.65), 908px 1199px rgba(255,255,255,0.8), 1574px 95px rgba(255,255,255,0.8), 1120px 951px rgba(255,255,255,1.0), 82px 816px rgba(255,255,255,1.0), 40px 883px rgba(255,255,255,0.5), 1633px 871px rgba(255,255,255,0.5), 1338px 775px rgba(255,255,255,0.35), 1498px 627px rgba(255,255,255,0.8), 434px 783px rgba(255,255,255,0.8), 1282px 1374px rgba(255,255,255,0.65), 1281px 886px rgba(255,255,255,0.5), 1005px 428px rgba(255,255,255,1.0), 766px 741px rgba(255,255,255,0.65), 1320px 1280px rgba(255,255,255,1.0), 1401px 1214px rgba(255,255,255,0.5), 1508px 1239px rgba(255,255,255,0.35), 34px 419px rgba(255,255,255,0.65), 992px 981px rgba(255,255,255,0.8);
  animation: star-drift 92s linear infinite, twinkle-c 2.6s ease-in-out infinite alternate;
  opacity: .95;
}

@keyframes star-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1000px, 0, 0); }
}
@keyframes twinkle-a { 0% { opacity: .30; } 100% { opacity: .78; } }
@keyframes twinkle-b { 0% { opacity: .40; } 100% { opacity: 1; } }
@keyframes twinkle-c {
  0%   { opacity: .45; }
  100% { opacity: 1; }
}

/* Shooting star — long pause, brief streak. Runs on the .stars b */
/* ---- shooting stars ----
   Seven, each on its own track, angle and cycle. The long
   durations mean most are dormant at any moment — you catch
   one every few seconds, never a stream. */

[data-theme="night"] .stars b {
  position: absolute;
  width: 120px; height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff 62%, var(--lz-cyan));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px rgba(56,217,240,.9));
  opacity: 0;
  will-change: transform, opacity;
}

[data-theme="night"] .stars b:nth-of-type(1) {
  top: 9%;  left: -12%; width: 134px;
  animation: shoot-a 13s ease-in infinite;
}
[data-theme="night"] .stars b:nth-of-type(2) {
  top: 26%; left: -12%; width: 98px;
  background: linear-gradient(90deg, transparent, #fff 62%, var(--lz-pink));
  filter: drop-shadow(0 0 6px rgba(255,77,157,.85));
  animation: shoot-b 19s ease-in infinite; animation-delay: 4s;
}
[data-theme="night"] .stars b:nth-of-type(3) {
  top: 4%;  left: -12%; width: 76px;
  background: linear-gradient(90deg, transparent, #fff 70%, var(--teal-bright));
  filter: drop-shadow(0 0 5px rgba(20,184,166,.8));
  animation: shoot-c 23s ease-in infinite; animation-delay: 11s;
}
[data-theme="night"] .stars b:nth-of-type(4) {
  top: 38%; left: -12%; width: 148px;
  animation: shoot-a 29s ease-in infinite; animation-delay: 7s;
}
[data-theme="night"] .stars b:nth-of-type(5) {
  top: 17%; left: -12%; width: 88px;
  background: linear-gradient(90deg, transparent, #fff 66%, #C4B5FD);
  filter: drop-shadow(0 0 6px rgba(196,181,253,.85));
  animation: shoot-b 17s ease-in infinite; animation-delay: 14s;
}
[data-theme="night"] .stars b:nth-of-type(6) {
  top: 31%; left: -12%; width: 64px;
  animation: shoot-c 31s ease-in infinite; animation-delay: 2s;
}
[data-theme="night"] .stars b:nth-of-type(7) {
  top: 12%; left: -12%; width: 112px;
  background: linear-gradient(90deg, transparent, #fff 64%, var(--lz-violet));
  filter: drop-shadow(0 0 6px rgba(139,92,246,.85));
  animation: shoot-a 37s ease-in infinite; animation-delay: 21s;
}

/* three trajectories, three angles */
@keyframes shoot-a {
  0%   { transform: translate3d(0,0,0) rotate(14deg); opacity: 0; }
  1.5% { opacity: 1; }
  8%   { transform: translate3d(128vw, 30vh, 0) rotate(14deg); opacity: 0; }
  100% { transform: translate3d(128vw, 30vh, 0) rotate(14deg); opacity: 0; }
}
@keyframes shoot-b {
  0%   { transform: translate3d(0,0,0) rotate(24deg); opacity: 0; }
  2%   { opacity: 1; }
  9%   { transform: translate3d(122vw, 52vh, 0) rotate(24deg); opacity: 0; }
  100% { transform: translate3d(122vw, 52vh, 0) rotate(24deg); opacity: 0; }
}
@keyframes shoot-c {
  0%   { transform: translate3d(0,0,0) rotate(7deg); opacity: 0; }
  1.2% { opacity: 1; }
  6.5% { transform: translate3d(130vw, 16vh, 0) rotate(7deg); opacity: 0; }
  100% { transform: translate3d(130vw, 16vh, 0) rotate(7deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="night"] .stars::before,
  [data-theme="night"] .stars::after,
  [data-theme="night"] .stars i,
  [data-theme="night"] .stars b { animation: none; }
  [data-theme="night"] .stars b { opacity: 0; }
}


.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;
}

/* ==========================================================
   STAGE RIG — beams from the floor
   Reference: arena lighting rig. Beams originate BELOW the
   frame and climb, fanning slightly, brightest at the base,
   dissolving into haze at the top.

   Built from a conic-gradient whose origin sits under the
   hero — that puts the convergence point where a real rig
   would be. A mask fades the tops so light dissipates the
   way it does through haze instead of stopping at an edge.
   ========================================================== */

.stagelights {
  position: absolute; left: -26%; right: -26%; top: -6%; bottom: 0;
  z-index: 2; pointer-events: none;
  transform-origin: 50% 100%;
}

[data-theme="night"] .stagelights {
  /* parent carries only the slow wind drift; the fans live on the
     pseudo-elements, so the two transforms compose and never repeat */
  mix-blend-mode: screen;
  opacity: .34;
  animation: wind-drift 67s cubic-bezier(.4,0,.5,1) infinite alternate;
}

[data-theme="night"] .stagelights::before {
  content: ""; position: absolute; inset: 0;
  transform-origin: 50% 100%;
  filter: blur(.7px);
  opacity: .9;
  background: conic-gradient(from -31deg at 50% 118%,
      transparent 0.00deg 0.49deg,
      rgba(255,255,255,0.87) 0.49deg 1.14deg,
      transparent 1.14deg 2.29deg,
      rgba(232,247,252,0.59) 2.29deg 2.96deg,
      transparent 2.96deg 4.32deg,
      rgba(232,247,252,0.47) 4.32deg 4.66deg,
      transparent 4.66deg 6.34deg,
      rgba(34,211,238,0.75) 6.34deg 6.96deg,
      transparent 6.96deg 8.71deg,
      rgba(232,247,252,0.8) 8.71deg 9.35deg,
      transparent 9.35deg 10.39deg,
      rgba(255,255,255,0.92) 10.39deg 10.96deg,
      transparent 10.96deg 13.23deg,
      rgba(34,211,238,0.41) 13.23deg 13.94deg,
      transparent 13.94deg 15.23deg,
      rgba(20,184,166,0.65) 15.23deg 15.87deg,
      transparent 15.87deg 16.78deg,
      rgba(20,184,166,0.46) 16.78deg 17.31deg,
      transparent 17.31deg 19.33deg,
      rgba(34,211,238,0.54) 19.33deg 19.89deg,
      transparent 19.89deg 21.09deg,
      rgba(255,255,255,0.41) 21.09deg 21.69deg,
      transparent 21.69deg 23.62deg,
      rgba(255,255,255,0.59) 23.62deg 24.02deg,
      transparent 24.02deg 25.00deg,
      rgba(255,255,255,0.86) 25.00deg 25.74deg,
      transparent 25.74deg 27.53deg,
      rgba(34,211,238,0.77) 27.53deg 27.87deg,
      transparent 27.87deg 29.62deg,
      rgba(255,255,255,0.78) 29.62deg 30.47deg,
      transparent 30.47deg 31.21deg,
      rgba(232,247,252,0.49) 31.21deg 31.49deg,
      transparent 31.49deg 33.43deg,
      rgba(232,247,252,0.89) 33.43deg 33.86deg,
      transparent 33.86deg 35.48deg,
      rgba(232,247,252,0.49) 35.48deg 36.03deg,
      transparent 36.03deg 37.72deg,
      rgba(255,255,255,0.59) 37.72deg 38.22deg,
      transparent 38.22deg 39.65deg,
      rgba(255,255,255,0.86) 39.65deg 39.90deg,
      transparent 39.90deg 41.51deg,
      rgba(34,211,238,0.91) 41.51deg 41.82deg,
      transparent 41.82deg 44.08deg,
      rgba(20,184,166,0.4) 44.08deg 44.63deg,
      transparent 44.63deg 45.84deg,
      rgba(255,255,255,0.66) 45.84deg 46.10deg,
      transparent 46.10deg 47.70deg,
      rgba(255,255,255,0.54) 47.70deg 48.05deg,
      transparent 48.05deg 49.98deg,
      rgba(255,255,255,0.51) 49.98deg 50.68deg,
      transparent 50.68deg 52.21deg,
      rgba(232,247,252,0.79) 52.21deg 53.02deg,
      transparent 53.02deg 54.06deg,
      rgba(20,184,166,0.82) 54.06deg 54.57deg,
      transparent 54.57deg 55.97deg,
      rgba(34,211,238,0.71) 55.97deg 56.63deg,
      transparent 56.63deg 58.66deg,
      rgba(20,184,166,0.45) 58.66deg 59.03deg,
      transparent 59.03deg 60.55deg,
      rgba(255,255,255,0.75) 60.55deg 61.08deg,
      transparent 61.08deg 360deg);
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,.35) 0%, #000 12%, rgba(0,0,0,.92) 44%,
    rgba(0,0,0,.42) 74%, transparent 97%);
  mask-image: linear-gradient(to top,
    rgba(0,0,0,.35) 0%, #000 12%, rgba(0,0,0,.92) 44%,
    rgba(0,0,0,.42) 74%, transparent 97%);
  animation: rig-breathe 29s cubic-bezier(.37,0,.45,1) infinite alternate,
             beam-flicker 7.3s steps(1,end) infinite;
}

/* second rig behind the first — wider fan, dimmer, slower */
[data-theme="night"] .stagelights::after {
  content: ""; position: absolute; inset: 0;
  transform-origin: 50% 100%;
  background:
    conic-gradient(from -42deg at 50% 118%,
      transparent 0.00deg 1.18deg,
      rgba(232,247,252,0.21) 1.18deg 1.84deg,
      transparent 1.84deg 4.67deg,
      rgba(255,255,255,0.27) 4.67deg 5.00deg,
      transparent 5.00deg 8.69deg,
      rgba(34,211,238,0.3) 8.69deg 9.34deg,
      transparent 9.34deg 13.10deg,
      rgba(20,184,166,0.39) 13.10deg 13.33deg,
      transparent 13.33deg 15.56deg,
      rgba(255,255,255,0.4) 15.56deg 16.01deg,
      transparent 16.01deg 19.50deg,
      rgba(34,211,238,0.29) 19.50deg 20.08deg,
      transparent 20.08deg 24.23deg,
      rgba(232,247,252,0.23) 24.23deg 24.57deg,
      transparent 24.57deg 28.36deg,
      rgba(255,45,149,0.23) 28.36deg 29.05deg,
      transparent 29.05deg 30.81deg,
      rgba(255,255,255,0.34) 30.81deg 31.31deg,
      transparent 31.31deg 34.83deg,
      rgba(255,255,255,0.36) 34.83deg 35.51deg,
      transparent 35.51deg 39.65deg,
      rgba(20,184,166,0.21) 39.65deg 39.93deg,
      transparent 39.93deg 43.19deg,
      rgba(255,255,255,0.22) 43.19deg 43.61deg,
      transparent 43.61deg 46.38deg,
      rgba(255,45,149,0.45) 46.38deg 46.83deg,
      transparent 46.83deg 49.85deg,
      rgba(255,45,149,0.29) 49.85deg 50.56deg,
      transparent 50.56deg 54.22deg,
      rgba(232,247,252,0.31) 54.22deg 54.63deg,
      transparent 54.63deg 58.30deg,
      rgba(255,255,255,0.31) 58.30deg 58.64deg,
      transparent 58.64deg 61.34deg,
      rgba(232,247,252,0.29) 61.34deg 61.92deg,
      transparent 61.92deg 66.42deg,
      rgba(20,184,166,0.27) 66.42deg 66.84deg,
      transparent 66.84deg 69.22deg,
      rgba(20,184,166,0.36) 69.22deg 69.49deg,
      transparent 69.49deg 73.15deg,
      rgba(20,184,166,0.34) 73.15deg 73.67deg,
      transparent 73.67deg 76.78deg,
      rgba(34,211,238,0.48) 76.78deg 77.43deg,
      transparent 77.43deg 80.96deg,
      rgba(255,45,149,0.35) 80.96deg 81.46deg,
      transparent 81.46deg 360deg);
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,.3) 0%, #000 16%, rgba(0,0,0,.6) 52%, transparent 92%);
  mask-image: linear-gradient(to top,
    rgba(0,0,0,.3) 0%, #000 16%, rgba(0,0,0,.6) 52%, transparent 92%);
  animation: rig-drift 43s cubic-bezier(.42,0,.5,1) infinite alternate,
             beam-flicker-b 11.7s steps(1,end) infinite;
  opacity: .55;
}

/* Volumetric haze pooling at the base, where the beams are densest */
[data-theme="night"] .hero::before {
  background:
    radial-gradient(60% 46% at 50% 104%, rgba(246,242,255,.26) 0, transparent 70%),
    radial-gradient(40% 36% at 20% 100%, rgba(255,77,157,.30) 0, transparent 72%),
    radial-gradient(40% 36% at 80% 100%, rgba(56,217,240,.26) 0, transparent 72%),
    radial-gradient(46% 38% at 50% 92%, rgba(139,92,246,.22) 0, transparent 76%),
    radial-gradient(52% 40% at 50% 2%, rgba(11,7,19,.85) 0, transparent 80%);
  filter: blur(22px);
  z-index: 1;
}

/* Taller rigs on the homepage hero */
[data-theme="night"] .hero-home .stagelights { opacity: .42; }

@media (prefers-reduced-motion: reduce) {
  .stagelights, .stagelights::before, .stagelights::after { animation: none; }
}

/* ==========================================================
   DAY RIG — the same stage beams, washed into the paper
   Bright hues at low opacity with multiply blending, so the
   colour tints the page rather than sitting on top of it.
   Two layers:
     body::before   page-wide, fixed, behind ALL content
     .stagelights   hero only, stronger
   ========================================================== */

/* Page-wide wash — fixed, so copy scrolls over a steady field
   of light instead of dragging the beams along with it. */
[data-theme="day"] body::before {
  content: ""; position: fixed; inset: -10% -10% 0;
  z-index: 0; pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .16;
  filter: blur(2.5px);
  transform-origin: 50% 100%;
  background:
    conic-gradient(from -26deg at 50% 118%,
      transparent 0.00deg 0.82deg,
      rgba(20,184,166,0.79) 0.82deg 1.78deg,
      transparent 1.78deg 3.99deg,
      rgba(57,255,20,0.74) 3.99deg 4.71deg,
      transparent 4.71deg 7.15deg,
      rgba(20,184,166,0.5) 7.15deg 8.28deg,
      transparent 8.28deg 10.64deg,
      rgba(255,45,149,0.78) 10.64deg 11.71deg,
      transparent 11.71deg 13.37deg,
      rgba(20,184,166,0.5) 13.37deg 14.02deg,
      transparent 14.02deg 16.51deg,
      rgba(20,184,166,0.68) 16.51deg 17.50deg,
      transparent 17.50deg 19.81deg,
      rgba(255,45,149,0.67) 19.81deg 20.51deg,
      transparent 20.51deg 23.96deg,
      rgba(255,45,149,0.76) 23.96deg 24.64deg,
      transparent 24.64deg 26.85deg,
      rgba(255,45,149,0.54) 26.85deg 28.05deg,
      transparent 28.05deg 30.36deg,
      rgba(139,92,246,0.63) 30.36deg 31.46deg,
      transparent 31.46deg 33.47deg,
      rgba(57,255,20,0.59) 33.47deg 34.06deg,
      transparent 34.06deg 36.67deg,
      rgba(139,92,246,0.61) 36.67deg 37.74deg,
      transparent 37.74deg 40.09deg,
      rgba(255,45,149,0.53) 40.09deg 41.14deg,
      transparent 41.14deg 42.84deg,
      rgba(20,184,166,0.67) 42.84deg 43.57deg,
      transparent 43.57deg 46.10deg,
      rgba(20,184,166,0.64) 46.10deg 46.73deg,
      transparent 46.73deg 49.29deg,
      rgba(139,92,246,0.53) 49.29deg 50.31deg,
      transparent 50.31deg 360deg);
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,.5) 0%, #000 18%, rgba(0,0,0,.55) 58%, transparent 94%);
  mask-image: linear-gradient(to top,
    rgba(0,0,0,.5) 0%, #000 18%, rgba(0,0,0,.55) 58%, transparent 94%);
  animation: day-wash 44s ease-in-out infinite alternate;
}

/* Everything above the wash */
[data-theme="day"] .site-header,
[data-theme="day"] main,
[data-theme="day"] .site-footer { position: relative; z-index: 1; }

/* Hero rig — same floor geometry as night, brighter and denser */
/* Day has no beams. Rays belong to a night rig; in daylight the
   sky, the sun bloom and the confetti carry it. */
[data-theme="day"] .stagelights { display: none; }
[data-theme="day"] .stagelights::after { display: none; }


@keyframes sun-drift {
  0%   { transform: rotate(-1.4deg) scale(1);    opacity: .13; }
  100% { transform: rotate(1.6deg)  scale(1.06); opacity: .2; }
}

[data-theme="day"] .hero::before {
  background:
    radial-gradient(50% 44% at 84% 2%, rgba(255,214,120,.5) 0, transparent 70%),
    radial-gradient(56% 40% at 50% 100%, rgba(34,211,238,.26) 0, transparent 74%),
    radial-gradient(34% 30% at 14% 96%, rgba(255,45,149,.2) 0, transparent 76%),
    radial-gradient(circle at 1px 1px, rgba(10,10,10,.07) 1px, transparent 0);
  background-size: auto, auto, auto, 6px 6px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  filter: none; opacity: .66; mix-blend-mode: multiply; z-index: 1;
}

/* the old page-wide beam wash is retired in favour of sky + confetti */
[data-theme="day"] body::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="day"] .stars::before,
  [data-theme="day"] .stars::after,
  [data-theme="day"] .stars i,
  [data-theme="day"] .stagelights { animation: none; }
}

/* Mobile: keep the sky, drop the two heavier confetti layers */
@media (max-width: 640px) {
  [data-theme="day"] .stars::before,
  [data-theme="day"] .stars i { display: none; }
  [data-theme="day"] .stars { opacity: .4; }
}


[data-theme="day"] .site-header,
[data-theme="day"] main,
[data-theme="day"] .site-footer { position: relative; z-index: 2; }

/* ==========================================================
   CANOPY — the fabric fronds strung above the crowd
   Hand-drawn SVG: tapered blades radiating from a stem,
   ragged split tips, each blade its own colour. Hangs from
   the top edge of every hero and sways.

   Day   — full colour, multiply, like fabric lit from behind
   Night — dark silhouette with lit edges, catching the rig
   ========================================================== */

.canopy {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(130px, 22vw, 240px);
  z-index: 3; pointer-events: none; overflow: hidden;
  transform-origin: 50% 0%;
  /* the gust: slow, wide, shared by both rows */
  animation: canopy-gust 53s cubic-bezier(.4,0,.5,1) infinite alternate;
}
.canopy::before, .canopy::after {
  content: ""; position: absolute; top: 0; left: -6%; right: -6%; bottom: 0;
  background-repeat: repeat-x;
  transform-origin: 50% 0%;
}
/* back row: smaller, slower, dimmer — gives the canopy depth */
.canopy::before {
  background-size: auto 78%;
  background-position: 18% top;
  opacity: .55;
  animation: canopy-sway-b 37s cubic-bezier(.38,0,.48,1) infinite alternate;
}
.canopy::after {
  background-size: auto 100%;
  background-position: 0 top;
  animation: canopy-sway 23s cubic-bezier(.42,0,.5,1) infinite alternate;
}

/* ---- DAY ---- */
[data-theme="day"] .canopy::before,
[data-theme="day"] .canopy::after {
  background-image: none;
  mix-blend-mode: multiply;
}
[data-theme="day"] .canopy::after { opacity: .34; }
[data-theme="day"] .canopy::before { opacity: .2; }
[data-theme="day"] .canopy {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%);
}

/* ---- NIGHT ---- */
[data-theme="night"] .canopy::before,
[data-theme="night"] .canopy::after {
  background-image: none;
}
[data-theme="night"] .canopy::after { opacity: .6; }
[data-theme="night"] .canopy::before { opacity: .3; }
[data-theme="night"] .canopy {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.6));
}

/* Homepage hero is taller, so the canopy can hang lower */
.hero-home .canopy { height: clamp(170px, 26vw, 300px); }

@media (prefers-reduced-motion: reduce) {
  .canopy::before, .canopy::after { animation: none; }
}
@media (max-width: 640px) {
  .canopy::before { display: none; }
  .canopy { height: clamp(90px, 30vw, 140px); }
}


/* ==========================================================
   BRAND MARK — MFG logo, top left
   Two stacked images (night chrome / day navy) so the mark
   stays legible on either ground. Only one is ever visible.

   Rotation: a slow turn on the Y axis, like a badge catching
   light as it pivots. Deliberately NOT a continuous spin —
   it holds facing forward for most of the cycle, turns once,
   and settles. A logo spinning nonstop reads as a loading
   state and pulls the eye away from the page.
   ========================================================== */

.brand-mark {
  display: block; width: 46px; height: 46px;
  position: relative; flex-shrink: 0;
  perspective: 420px;
}
.brand-icon {
  position: absolute; inset: 0;
  width: 46px; height: 46px; display: block;
  transform-style: preserve-3d;
  backface-visibility: visible;
  animation: mark-turn 14s cubic-bezier(.45,.05,.3,1) infinite;
}

/* the right variant for the ground it sits on */
.brand-icon.is-day   { display: none; }
[data-theme="day"] .brand-icon.is-night { display: none; }
[data-theme="day"] .brand-icon.is-day   { display: block; }

/* night: the chrome gets a faint halo, like it's catching the rig */
[data-theme="night"] .brand-icon {
  filter: drop-shadow(0 0 7px rgba(139,152,255,.35));
}
[data-theme="day"] .brand-icon {
  filter: drop-shadow(0 1px 2px rgba(10,10,10,.18));
}

@keyframes mark-turn {
  0%,  58%  { transform: rotateY(0deg); }
  78%       { transform: rotateY(180deg); }
  82%,100%  { transform: rotateY(360deg); }
}

/* Hovering the logo turns it on demand */
.brand:hover .brand-icon {
  animation: mark-turn-fast 1.5s cubic-bezier(.45,.05,.3,1);
}
@keyframes mark-turn-fast {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

.brand:hover .brand-text { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .brand-icon, .brand:hover .brand-icon { animation: none; }
}

@media (max-width: 640px) {
  .brand-mark, .brand-icon { width: 40px; height: 40px; }
}


/* ==========================================================
   DIGITAL WIND
   Nothing here oscillates evenly. Each layer gets an odd,
   non-harmonic duration and irregularly spaced keyframes, so
   when the layers compose the result wanders instead of
   ticking. Durations are deliberately coprime-ish: 29 / 43 /
   67 never line up inside a session.
   ========================================================== */

@keyframes wind-drift {
  0%   { transform: translate3d(-1.1%, 0, 0) rotate(-.5deg); }
  23%  { transform: translate3d(.4%, 0, 0)   rotate(.3deg); }
  41%  { transform: translate3d(-.6%, 0, 0)  rotate(-.2deg); }
  68%  { transform: translate3d(1.3%, 0, 0)  rotate(.6deg); }
  86%  { transform: translate3d(.2%, 0, 0)   rotate(.1deg); }
  100% { transform: translate3d(-.8%, 0, 0)  rotate(-.4deg); }
}

@keyframes rig-breathe {
  0%   { transform: rotate(-1.5deg) scaleY(.97);  opacity: .78; }
  17%  { transform: rotate(-.2deg)  scaleY(1.02); opacity: .95; }
  34%  { transform: rotate(-1.1deg) scaleY(.99);  opacity: .7; }
  56%  { transform: rotate(.9deg)   scaleY(1.05); opacity: 1; }
  73%  { transform: rotate(.1deg)   scaleY(1.01); opacity: .82; }
  91%  { transform: rotate(1.6deg)  scaleY(1.03); opacity: .9; }
  100% { transform: rotate(.6deg)   scaleY(1);    opacity: .75; }
}

@keyframes rig-drift {
  0%   { transform: rotate(2deg)    scaleY(1.01); opacity: .5; }
  21%  { transform: rotate(.7deg)   scaleY(.98);  opacity: .72; }
  44%  { transform: rotate(1.4deg)  scaleY(1.04); opacity: .44; }
  62%  { transform: rotate(-1.1deg) scaleY(1);    opacity: .8; }
  83%  { transform: rotate(-2.2deg) scaleY(1.03); opacity: .52; }
  100% { transform: rotate(-1.4deg) scaleY(.99);  opacity: .66; }
}


/* ---- canopy in the wind ----
   Fabric doesn't pivot, it bends. Each row gets rotation AND a
   small skew, so the blades lean before the whole frond follows.
   23 / 37 / 53 second cycles never resolve into a pattern. */

@keyframes canopy-gust {
  0%   { transform: translate3d(-.8%, 0, 0) rotate(-.35deg); }
  27%  { transform: translate3d(.5%, 0, 0)  rotate(.25deg); }
  49%  { transform: translate3d(-.3%, 0, 0) rotate(-.15deg); }
  71%  { transform: translate3d(1%, 0, 0)   rotate(.4deg); }
  100% { transform: translate3d(-.5%, 0, 0) rotate(-.28deg); }
}

@keyframes canopy-sway {
  0%   { transform: rotate(-.55deg) skewX(.5deg)  translateX(-7px); }
  19%  { transform: rotate(.2deg)   skewX(-.3deg) translateX(4px); }
  38%  { transform: rotate(-.3deg)  skewX(.35deg) translateX(-3px); }
  57%  { transform: rotate(.65deg)  skewX(-.6deg) translateX(9px); }
  79%  { transform: rotate(.1deg)   skewX(.15deg) translateX(2px); }
  100% { transform: rotate(.5deg)   skewX(-.4deg) translateX(6px); }
}

@keyframes canopy-sway-b {
  0%   { transform: rotate(.45deg)  skewX(-.4deg) translateX(9px); }
  22%  { transform: rotate(-.15deg) skewX(.25deg) translateX(-4px); }
  46%  { transform: rotate(.3deg)   skewX(-.3deg) translateX(6px); }
  68%  { transform: rotate(-.5deg)  skewX(.45deg) translateX(-8px); }
  100% { transform: rotate(-.25deg) skewX(.2deg)  translateX(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .canopy { animation: none; }
}


/* ---- beam flicker ----
   Real rigs stutter: a lamp dips, a hazer gusts, a beam catches
   and drops. steps(1,end) makes each change a hard cut rather
   than a fade, which is what makes it read as flicker and not
   a pulse. Odd durations keep it off-beat from the sway. */

@keyframes beam-flicker {
  0%, 11%   { opacity: .92; }
  12%, 13%  { opacity: .55; }
  14%, 38%  { opacity: 1; }
  39%, 40%  { opacity: .4; }
  41%, 42%  { opacity: .86; }
  43%, 61%  { opacity: .97; }
  62%, 63%  { opacity: .62; }
  64%, 79%  { opacity: 1; }
  80%, 81%  { opacity: .48; }
  82%, 100% { opacity: .9; }
}

@keyframes beam-flicker-b {
  0%, 19%   { opacity: .8; }
  20%, 21%  { opacity: .34; }
  22%, 47%  { opacity: .95; }
  48%, 49%  { opacity: .5; }
  50%, 72%  { opacity: .86; }
  73%, 74%  { opacity: .3; }
  75%, 100% { opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="night"] .stagelights::before,
  [data-theme="night"] .stagelights::after { animation: none; }
}


/* ---- Space Bear ----
   Smaller, and moving. The orbit ring turns, the bear drifts
   inside it on a different cycle, and the whole badge rises
   and falls — three unsynced motions so he never looks pinned.
   9 / 14 / 30 second cycles don't resolve. */

@keyframes bear-float {
  0%   { transform: translate3d(-3px, 2px, 0) rotate(-3deg); }
  50%  { transform: translate3d(2px, -3px, 0) rotate(2deg); }
  100% { transform: translate3d(3px, 1px, 0)  rotate(4deg); }
}

.bear-orbit {
  animation: bear-bob 14s ease-in-out infinite alternate;
}
@keyframes bear-bob {
  0%   { transform: translateY(-5px); }
  100% { transform: translateY(6px); }
}

/* footer host mark gets a gentler version of the same drift */
.footer-host img {
  animation: bear-float 13s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .bear-orbit, .bear-orbit img, .footer-host img { animation: none; }
}


/* ==========================================================
   NIGHT — laser identity
   ========================================================== */

/* Hero: magenta on the left bleeding to teal on the right,
   the way two rigs of different colour temperature overlap. */
[data-theme="night"] .hero {
  background:
    linear-gradient(107deg,
      #2A1140 0%,
      #1E1233 26%,
      #14182F 52%,
      #0E2233 76%,
      #0B0713 100%);
  border-bottom: 1px solid var(--line);
  border-image: var(--laser) 1;
  border-top: 0; border-left: 0; border-right: 0;
}
[data-theme="night"] .hero-home {
  background:
    radial-gradient(70% 90% at 12% 18%, rgba(255,77,157,.16) 0, transparent 62%),
    radial-gradient(64% 86% at 88% 26%, rgba(56,217,240,.14) 0, transparent 60%),
    linear-gradient(107deg, #2A1140 0%, #1E1233 26%, #14182F 52%, #0E2233 76%, #0B0713 100%);
}

/* Brand wordmark picks up the gradient on the middle word */
[data-theme="night"] .brand-text small { color: var(--muted); }

/* Primary button: gradient pill with a bloom under it */
[data-theme="night"] .btn { border-radius: 999px; }
[data-theme="night"] .btn-primary {
  background: var(--laser);
  color: #0B0713;
  border-color: transparent;
  box-shadow: 0 6px 26px rgba(255,77,157,.30);
}
[data-theme="night"] .btn-primary:hover {
  color: #0B0713;
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(255,77,157,.44);
}
[data-theme="night"] .btn-ghost {
  border-color: var(--line); color: var(--ink-soft); background: transparent;
}
[data-theme="night"] .btn-ghost:hover { border-color: var(--lz-pink); color: var(--ink); }
[data-theme="night"] .btn-shock {
  background: var(--neon-green); color: #0B0713; border-color: transparent;
}

/* Accents: cyan for data, pink for interaction */
[data-theme="night"] .eyebrow,
[data-theme="night"] .card-date,
[data-theme="night"] .block-link,
[data-theme="night"] .safety-body a { color: var(--lz-cyan); }
[data-theme="night"] a:hover,
[data-theme="night"] .side-link:hover,
[data-theme="night"] .footer-col a:hover,
[data-theme="night"] .crumbs a:hover { color: var(--lz-pink); }

[data-theme="night"] .card:hover { border-color: var(--lz-violet); }
[data-theme="night"] .news-card:hover { border-color: var(--lz-violet); }
[data-theme="night"] .chip:hover,
[data-theme="night"] .tag:hover { border-color: var(--lz-pink); color: var(--ink); }
[data-theme="night"] .filter-reset:hover { border-color: var(--lz-pink); color: var(--lz-pink); }

/* Ratings keep their own hues but on the violet ground */
[data-theme="night"] .rating-safety     { border-top-color: var(--lz-cyan); }
[data-theme="night"] .rating-comfort    { border-top-color: var(--teal-bright); }
[data-theme="night"] .rating-complexity { border-top-color: var(--lz-pink); }
[data-theme="night"] .rating-safety .rating-verdict     { color: var(--lz-cyan); }
[data-theme="night"] .rating-complexity .rating-verdict { color: var(--lz-pink); }
[data-theme="night"] .rating-safety .pip.is-on     { background: var(--lz-cyan); }
[data-theme="night"] .rating-complexity .pip.is-on { background: var(--lz-pink); }
[data-theme="night"] .safety { border-left-color: var(--lz-cyan); }

/* New / Now / Next column rules follow the laser */
[data-theme="night"] .nnn-col.is-new  { border-top-color: var(--neon-green); }
[data-theme="night"] .nnn-col.is-now  { border-top-color: var(--lz-cyan); }
[data-theme="night"] .nnn-col.is-next { border-top-color: var(--lz-pink); }
[data-theme="night"] .is-now .nnn-head  { color: var(--lz-cyan); }
[data-theme="night"] .is-next .nnn-head { color: var(--lz-pink); }

[data-theme="night"] .artist-head {
  border-color: var(--lz-violet);
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
}
[data-theme="night"] .theme-toggle button[aria-pressed="true"] {
  background: var(--laser); color: #0B0713;
}
[data-theme="night"] .cat-badge { background: var(--bg-3); color: var(--lz-cyan); }

/* Ticket stub keeps its light stock, but the header band and
   tear-off end move to the laser palette */
[data-theme="night"] .stub::before { background: var(--laser); }
[data-theme="night"] .stub-end {
  background: linear-gradient(160deg, #1D1330 0%, #0B0713 100%);
}
[data-theme="night"] .stub-end::before { background: var(--lz-pink); }
[data-theme="night"] .stub {
  box-shadow:
    0 26px 60px rgba(0,0,0,.72),
    0 8px 22px rgba(0,0,0,.5),
    0 0 46px -10px rgba(139,92,246,.45);
}

[data-theme="night"] .site-header { background: rgba(11,7,19,.86); }
[data-theme="night"] .site-footer { background: var(--bg-2); }
[data-theme="night"] .brand-icon { filter: drop-shadow(0 0 8px rgba(139,92,246,.45)); }


/* ==========================================================
   Canopy retired. The fronds hung from the top edge as
   tapered blades, which read as a second set of rays coming
   down and fought the floor rig. One rig, from below.
   To bring them back: delete this rule.
   ========================================================== */
.canopy { display: none !important; }

/* ---- rays fainter still ---- */
[data-theme="night"] .stagelights { opacity: .2; }
[data-theme="night"] .hero-home .stagelights { opacity: .26; }
[data-theme="night"] .stagelights::before { opacity: .72; }
[data-theme="night"] .stagelights::after  { opacity: .34; }
[data-theme="night"] .hero::before { opacity: .78; }


/* ==========================================================
   SPACE BEAR — smaller, and genuinely rotating
   The badge is round, so a full in-plane spin works without
   ever appearing upside down. Slow, continuous, with the
   orbit ring counter-rotating so the two don't lock.
   ========================================================== */

.bear-orbit {
  width: 108px; height: 108px;
  border: 1px solid var(--line);
  animation: orbit-ring 26s linear infinite;
}
.bear-orbit::before { inset: -13px; }
.bear-orbit img {
  width: 76px; height: 76px; display: block;
  animation: bear-spin 18s linear infinite;
}

@keyframes bear-spin  { to { transform: rotate(360deg); } }
@keyframes orbit-ring { to { transform: rotate(-360deg); } }

/* the footer mark turns too, slower */
.footer-host img {
  width: 28px; height: 28px;
  animation: bear-spin 34s linear infinite;
  filter: none;
}
[data-theme="day"] .footer-host img { filter: none; }

/* logo swatches show the new artwork at a readable size */
.logo-swatch img { width: 94px; height: 94px; }

@media (max-width: 640px) {
  .bear-orbit { width: 88px; height: 88px; }
  .bear-orbit img { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .bear-orbit, .bear-orbit img, .footer-host img { animation: none; }
}


/* ==========================================================
   SPACE BEAR — day / night artwork
   Colour badge on the violet ground, silver on paper. Both
   spin; neither is ever inverted, since the new artwork is
   already built for its own background.
   ========================================================== */

.bear-art.is-day { display: none; }
[data-theme="day"] .bear-art.is-night { display: none; }
[data-theme="day"] .bear-art.is-day   { display: block; }

.bear-orbit .bear-art,
.footer-host .bear-art {
  animation: bear-spin 18s linear infinite;
  filter: none !important;
}
.footer-host .bear-art { animation-duration: 34s; }

/* day orbit: paper ring rather than a neon disc */
[data-theme="day"] .bear-orbit {
  background: #FFFFFF;
  border: 2px solid var(--ink);
}
[data-theme="day"] .bear-orbit::before { border: 2px dashed var(--ink); }

/* the orbit ring itself keeps counter-rotating */
[data-theme="day"] .bear-orbit,
[data-theme="night"] .bear-orbit { animation: orbit-ring 26s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .bear-orbit .bear-art, .footer-host .bear-art { animation: none; }
}

/* ==========================================================
   DAY — confetti turned up
   ========================================================== */

[data-theme="day"] .stars { opacity: .78; }
[data-theme="day"] .stars::before { opacity: .72; }
[data-theme="day"] .stars::after  { opacity: .85; }
[data-theme="day"] .stars i       { opacity: .95; }

/* larger tiles read as nearer confetti without redrawing them */
[data-theme="day"] .stars i       { background-size: 400px 400px; }
[data-theme="day"] .stars::after  { background-size: 330px 330px; }
[data-theme="day"] .stars::before { background-size: 270px 270px; }


/* ==========================================================
   RAYS — longer reach, lower intensity
   The beams now start further below the frame and are masked
   to fade much higher up, so they travel the full height of
   the hero instead of dying halfway. Lower opacity keeps the
   extra length from adding weight.
   ========================================================== */

.stagelights {
  left: -30%; right: -30%; top: -34%; bottom: 0;
}

[data-theme="night"] .stagelights { opacity: .15; }
[data-theme="night"] .hero-home .stagelights { opacity: .2; }
[data-theme="night"] .stagelights::before,
[data-theme="night"] .stagelights::after {
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,.2) 0%, #000 8%, rgba(0,0,0,.9) 52%,
    rgba(0,0,0,.6) 82%, rgba(0,0,0,.2) 96%, transparent 100%);
  mask-image: linear-gradient(to top,
    rgba(0,0,0,.2) 0%, #000 8%, rgba(0,0,0,.9) 52%,
    rgba(0,0,0,.6) 82%, rgba(0,0,0,.2) 96%, transparent 100%);
}

/* ---- day: long, very faint floor beams ----
   Not the old overhead sun rays. Same floor rig as night,
   pushed down to a wash that tints the paper. */
[data-theme="day"] .stagelights {
  display: block;
  mix-blend-mode: multiply;
  opacity: .085;
  filter: blur(2.2px);
  transform-origin: 50% 100%;
  background:
    conic-gradient(from -35deg at 50% 122%,
      transparent 0.00deg 0.95deg,
      rgba(57,255,20,0.94) 0.95deg 1.83deg,
      transparent 1.83deg 3.97deg,
      rgba(255,45,149,0.79) 3.97deg 4.33deg,
      transparent 4.33deg 5.95deg,
      rgba(139,92,246,0.7) 5.95deg 6.31deg,
      transparent 6.31deg 10.03deg,
      rgba(34,211,238,0.52) 10.03deg 10.43deg,
      transparent 10.43deg 12.17deg,
      rgba(57,255,20,0.84) 12.17deg 12.50deg,
      transparent 12.50deg 15.10deg,
      rgba(57,255,20,0.77) 15.10deg 15.89deg,
      transparent 15.89deg 17.71deg,
      rgba(34,211,238,0.88) 17.71deg 18.12deg,
      transparent 18.12deg 20.88deg,
      rgba(57,255,20,0.5) 20.88deg 21.56deg,
      transparent 21.56deg 24.22deg,
      rgba(34,211,238,0.96) 24.22deg 24.60deg,
      transparent 24.60deg 27.25deg,
      rgba(255,45,149,0.59) 27.25deg 27.96deg,
      transparent 27.96deg 29.25deg,
      rgba(255,45,149,0.67) 29.25deg 29.87deg,
      transparent 29.87deg 32.35deg,
      rgba(20,184,166,0.82) 32.35deg 32.85deg,
      transparent 32.85deg 35.79deg,
      rgba(34,211,238,0.88) 35.79deg 36.18deg,
      transparent 36.18deg 38.34deg,
      rgba(255,45,149,0.56) 38.34deg 38.96deg,
      transparent 38.96deg 41.14deg,
      rgba(139,92,246,0.53) 41.14deg 41.48deg,
      transparent 41.48deg 44.05deg,
      rgba(34,211,238,0.96) 44.05deg 44.50deg,
      transparent 44.50deg 47.07deg,
      rgba(139,92,246,0.54) 47.07deg 47.84deg,
      transparent 47.84deg 49.94deg,
      rgba(57,255,20,0.72) 49.94deg 50.77deg,
      transparent 50.77deg 53.69deg,
      rgba(34,211,238,0.89) 53.69deg 54.17deg,
      transparent 54.17deg 56.56deg,
      rgba(139,92,246,0.7) 56.56deg 57.19deg,
      transparent 57.19deg 59.22deg,
      rgba(57,255,20,0.86) 59.22deg 59.89deg,
      transparent 59.89deg 61.37deg,
      rgba(34,211,238,0.86) 61.37deg 62.02deg,
      transparent 62.02deg 65.00deg,
      rgba(57,255,20,0.57) 65.00deg 65.60deg,
      transparent 65.60deg 68.02deg,
      rgba(139,92,246,0.93) 68.02deg 68.49deg,
      transparent 68.49deg 360deg);
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,.25) 0%, #000 10%, rgba(0,0,0,.7) 55%,
    rgba(0,0,0,.4) 84%, transparent 99%);
  mask-image: linear-gradient(to top,
    rgba(0,0,0,.25) 0%, #000 10%, rgba(0,0,0,.7) 55%,
    rgba(0,0,0,.4) 84%, transparent 99%);
  animation: rig-breathe 34s cubic-bezier(.37,0,.45,1) infinite alternate;
}
[data-theme="day"] .stagelights::after { display: none; }
[data-theme="day"] .hero-home .stagelights { opacity: .11; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="day"] .stagelights { animation: none; }
}


/* ==========================================================
   DAY — no rays. Confetti only.
   Beams are a night rig. On paper the page stays white and
   the only thing in the air is falling confetti.
   ========================================================== */

[data-theme="day"] .stagelights,
[data-theme="day"] .stagelights::before,
[data-theme="day"] .stagelights::after { display: none !important; }

/* the hero loses the beam-landing colour pools; the halftone
   screen stays, so the paper keeps its print texture */
[data-theme="day"] .hero::before {
  background: radial-gradient(circle at 1px 1px, rgba(10,10,10,.06) 1px, transparent 0);
  background-size: 6px 6px;
  background-repeat: repeat;
  filter: none;
  opacity: .5;
  mix-blend-mode: multiply;
}

/* sky wash pulled right back so the ground reads as white */
[data-theme="day"] body::after {
  opacity: .22;
  background:
    radial-gradient(44% 34% at 88% 2%, rgba(255,214,120,.30) 0, transparent 70%),
    linear-gradient(to bottom,
      rgba(34,211,238,.12) 0%,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,0) 100%);
}

[data-theme="day"] .hero { background: var(--bg); }
[data-theme="day"] .hero-home { background: var(--bg); }


/* ==========================================================
   CARD CORNERS
   Festival cards get a generous radius in both themes. The
   news cards follow, since the two sit side by side on the
   homepage and mixing square with round reads as a mistake
   rather than a choice.
   ========================================================== */

.card, .news-card { border-radius: 18px; }

/* Day runs square-ish everywhere else by design, so the cards
   are rounded explicitly rather than by changing --radius,
   which would soften the whole poster treatment. */
[data-theme="day"] .card,
[data-theme="day"] .news-card { border-radius: 16px; }

/* the date chip inside the card follows suit */
.card-date { border-radius: 999px; }
[data-theme="day"] .card-date { border-radius: 999px; }


/* ==========================================================
   ACCESSIBILITY PANEL
   Three rows, each with its own icon. Stacked rather than
   gridded: these are read one at a time by someone checking
   the one that applies to them, not scanned as a set.
   ========================================================== */

.access {
  border: var(--border-w) solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
}
[data-theme="day"] .access {
  border-width: 2px; box-shadow: var(--shadow-sm); border-radius: 16px;
}

.acc-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.acc-row:last-child { border-bottom: 0; }
[data-theme="day"] .acc-row { border-bottom-color: var(--line); }
[data-theme="day"] .acc-row:last-child { border-bottom: 0; }

.acc-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: var(--border-w) solid var(--line);
  background: var(--bg);
}
[data-theme="day"] .acc-icon { border-width: 2px; background: #FFFFFF; }
.acc-icon svg { width: 26px; height: 26px; }

.acc-hearing  .acc-icon { color: var(--cyan); }
.acc-vision   .acc-icon { color: var(--teal-bright); }
.acc-mobility .acc-icon { color: var(--neon-pink); }
[data-theme="night"] .acc-hearing  .acc-icon { color: var(--lz-cyan); }
[data-theme="night"] .acc-mobility .acc-icon { color: var(--lz-pink); }

.acc-body { min-width: 0; }
.acc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 9px;
}
.acc-label {
  font-family: var(--display); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
}
[data-theme="day"] .acc-label { color: var(--ink); }
.acc-verdict {
  font-family: var(--display); font-weight: 700;
  font-size: 1.12rem; letter-spacing: -.02em; color: var(--ink);
}
.acc-hearing  .acc-verdict { color: var(--cyan); }
.acc-vision   .acc-verdict { color: var(--teal-bright); }
.acc-mobility .acc-verdict { color: var(--neon-pink); }
[data-theme="night"] .acc-hearing  .acc-verdict { color: var(--lz-cyan); }
[data-theme="night"] .acc-mobility .acc-verdict { color: var(--lz-pink); }
[data-theme="day"] .acc-verdict { color: var(--ink); }

.acc-hearing  .pip.is-on { background: var(--cyan); }
.acc-vision   .pip.is-on { background: var(--teal-bright); }
.acc-mobility .pip.is-on { background: var(--neon-pink); }
[data-theme="night"] .acc-hearing  .pip.is-on { background: var(--lz-cyan); }
[data-theme="night"] .acc-mobility .pip.is-on { background: var(--lz-pink); }

.acc-note {
  font-size: .89rem; color: var(--ink-soft); margin: 0; line-height: 1.56;
}
.access-block { margin-bottom: 42px; }

@media (max-width: 520px) {
  .acc-row { grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 16px; }
  .acc-icon { width: 40px; height: 40px; }
  .acc-icon svg { width: 21px; height: 21px; }
}


/* ==========================================================
   CONFETTI — page level
   Lives directly under <body>, NOT inside the hero. The hero
   sets overflow:hidden, which clips a fixed-position child to
   its own box — that's why the confetti only ever appeared at
   the top of the page and vanished once the day hero got an
   opaque background.

   Sits behind all content at z-index 0; header, main and
   footer sit at 2 with transparent backgrounds, so it shows
   through the whole page while cards stay opaque.
   ========================================================== */

.confetti { display: none; }

[data-theme="day"] .confetti {
  display: block;
  position: fixed; inset: -18% 0 -12%;
  z-index: 0; pointer-events: none; overflow: hidden;
  opacity: .8;
}
[data-theme="day"] .confetti::before,
[data-theme="day"] .confetti::after,
[data-theme="day"] .confetti i {
  content: ""; position: absolute; inset: 0; display: block;
  background-repeat: repeat;
}
[data-theme="day"] .confetti::before {
  background-image: none;
  background-size: 270px 270px;
  opacity: .7;
  animation: fall-far 38s linear infinite;
}
[data-theme="day"] .confetti::after {
  background-image: none;
  background-size: 330px 330px;
  opacity: .85;
  animation: fall-mid 26s linear infinite;
}
[data-theme="day"] .confetti i {
  background-image: none;
  background-size: 400px 400px;
  opacity: .95;
  animation: fall-near 17s linear infinite;
}

/* the old in-hero copy is retired so we don't draw it twice */
[data-theme="day"] .stars { display: none !important; }

/* content floats above the confetti; surfaces stay opaque */
[data-theme="day"] .site-header,
[data-theme="day"] main,
[data-theme="day"] .site-footer { position: relative; z-index: 2; background-color: transparent; }
[data-theme="day"] .site-header { background-color: rgba(255,255,255,.90); }
[data-theme="day"] .site-footer { background-color: rgba(255,255,255,.88); }
[data-theme="day"] .hero,
[data-theme="day"] .hero-home { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="day"] .confetti::before,
  [data-theme="day"] .confetti::after,
  [data-theme="day"] .confetti i { animation: none; }
}
@media (max-width: 640px) {
  [data-theme="day"] .confetti::before { display: none; }
  [data-theme="day"] .confetti { opacity: .62; }
}


/* ==========================================================
   BRAND LOCKUPS
   Header: horizontal icon + MFG + url.
   Footer: horizontal icon + full MUSIC FEST GUIDE wordmark.
   Two files each — silver for night, deep metallic for day,
   because chrome on white paper disappears.
   ========================================================== */

.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo {
  display: block; height: auto;
  width: clamp(190px, 21vw, 258px);
}
.brand-logo.is-day { display: none; }
[data-theme="day"] .brand-logo.is-night { display: none; }
[data-theme="day"] .brand-logo.is-day   { display: block; }

[data-theme="night"] .brand-logo { filter: drop-shadow(0 0 10px rgba(139,92,246,.30)); }
[data-theme="day"]   .brand-logo { filter: drop-shadow(0 1px 2px rgba(10,10,10,.15)); }

.brand:hover .brand-logo { filter: brightness(1.08); }

/* the old text wordmark and standalone mark are retired */
.brand-mark, .brand-icon, .brand-text { display: none !important; }

/* header needs a little more room for a wider lockup */
.header-inner { min-height: 76px; }

/* ---- footer ---- */
.footer-logo { display: block; margin: 0 0 14px; }
.footer-logo img { display: block; width: 228px; height: auto; }
.footer-logo .is-day { display: none; }
[data-theme="day"] .footer-logo .is-night { display: none; }
[data-theme="day"] .footer-logo .is-day   { display: block; }
[data-theme="night"] .footer-logo img { filter: drop-shadow(0 0 8px rgba(139,92,246,.22)); }

@media (max-width: 640px) {
  .brand-logo { width: 176px; }
  .header-inner { min-height: 66px; }
  .footer-logo img { width: 200px; }
}


/* ==========================================================
   DAY — plain white, confetti only
   No beams, no sun bloom, no colour pooling. The gold burst
   in the top corner was the last thing radiating; it is gone.
   ========================================================== */

[data-theme="day"] .stagelights,
[data-theme="day"] .stagelights::before,
[data-theme="day"] .stagelights::after,
[data-theme="day"] .hero::before,
[data-theme="day"] .hero::after { display: none !important; }

[data-theme="day"] body::after {
  background: none !important;
  opacity: 0 !important;
}

[data-theme="day"] body {
  background-color: #FFFFFF;
  background-image: none;
}

[data-theme="day"] .hero,
[data-theme="day"] .hero-home { background: transparent !important; }

/* confetti is the only thing in the air */
[data-theme="day"] .confetti { display: block; opacity: .8; }


/* ==========================================================
   CONFETTI — real image tiles
   The generated SVG version clustered its pieces into
   starburst shapes. These are flat PNG tiles, drawn to wrap
   at every edge so they repeat without a seam.
   ========================================================== */

[data-theme="day"] .confetti::before,
[data-theme="day"] .confetti::after,
[data-theme="day"] .confetti i,
[data-theme="day"] .stars::before,
[data-theme="day"] .stars::after,
[data-theme="day"] .stars i {
  background-image: none !important;
}

[data-theme="day"] .confetti::before {
  background-image: url("/assets/img/brand/confetti-far.png") !important;
  background-size: 300px 300px !important;
  background-repeat: repeat;
  opacity: .55;
}
[data-theme="day"] .confetti::after {
  background-image: url("/assets/img/brand/confetti-mid.png") !important;
  background-size: 340px 340px !important;
  background-repeat: repeat;
  opacity: .75;
}
[data-theme="day"] .confetti i {
  background-image: url("/assets/img/brand/confetti-near.png") !important;
  background-size: 400px 400px !important;
  background-repeat: repeat;
  opacity: .9;
}

/* fall distances must match each tile height, or the loop jumps */
@keyframes fall-far  { from { background-position: 0 0; }   to { background-position: -60px 300px; } }
@keyframes fall-mid  { from { background-position: 0 0; }   to { background-position: 90px 340px; } }
@keyframes fall-near { from { background-position: 0 0; }   to { background-position: -130px 400px; } }

[data-theme="day"] .confetti { opacity: .85; }

/* header sized for the wide lockup */
.brand-logo { width: clamp(200px, 22vw, 272px); }
.footer-logo img { width: 236px; }
@media (max-width: 640px) {
  .brand-logo { width: 178px; }
  .footer-logo img { width: 200px; }
}

/* ==========================================================
   HOMEPAGE — headline beside a featured story
   ========================================================== */

.home-split {
  display: grid; grid-template-columns: 1.35fr .9fr;
  gap: 52px; align-items: center;
}
.home-copy { min-width: 0; }

.home-featured { min-width: 0; }
.feat-kicker {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--muted); margin: 0 0 10px;
}
.feat-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: 18px; padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, border-color .15s ease;
}
[data-theme="day"] .feat-card {
  border-width: 2px; border-radius: 16px; background: #fff;
  box-shadow: 6px 6px 0 var(--ink);
}
.feat-card:hover { transform: translateY(-3px); color: var(--ink); }
[data-theme="night"] .feat-card:hover { border-color: var(--lz-violet); }
[data-theme="day"] .feat-card:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }

.feat-card .cat-badge { align-self: flex-start; }
.feat-title {
  font-family: var(--display); font-weight: 700;
  font-size: 1.32rem; line-height: 1.22; letter-spacing: -.028em;
  color: var(--ink);
}
.feat-standfirst { font-size: .94rem; color: var(--ink-soft); }
.feat-date {
  font-family: var(--display); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.feat-fest {
  display: inline-block; margin-top: 12px;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); border-bottom: 2px solid var(--accent);
}

@media (max-width: 900px) {
  .home-split { grid-template-columns: 1fr; gap: 36px; }
}

/* ==========================================================
   FESTIVAL — hero photo, logo, rating icons
   ========================================================== */

.hero-festival.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-photo);
  background-size: cover; background-position: center;
  opacity: .30; filter: saturate(.9);
}
[data-theme="day"] .hero-festival.has-photo::before { opacity: .18; }
/* a scrim so the headline stays readable over any photo */
.hero-festival.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 42%,
    color-mix(in srgb, var(--bg) 28%, transparent) 100%);
  opacity: 1; mix-blend-mode: normal;
}

.hero-logo {
  max-width: 150px; height: auto; margin-bottom: 22px; display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
[data-theme="day"] .hero-logo { filter: drop-shadow(0 2px 6px rgba(10,10,10,.18)); }

.rating-icon {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: var(--border-w) solid var(--line);
  background: var(--bg); margin-right: 2px;
}
[data-theme="day"] .rating-icon { border-width: 2px; background: #fff; }
.rating-icon svg { width: 16px; height: 16px; }
.rating-safety     .rating-icon { color: var(--accent); }
.rating-comfort    .rating-icon { color: var(--teal-bright); }
.rating-complexity .rating-icon { color: var(--neon-pink); }
[data-theme="night"] .rating-safety     .rating-icon { color: var(--lz-cyan); }
[data-theme="night"] .rating-complexity .rating-icon { color: var(--lz-pink); }

.rating-top { align-items: center; }
.rating-kind { margin-right: auto; }

.ad-feat { color: #B45309; font-size: .8rem; font-weight: 700; }

/* second hero paragraph sits a touch quieter than the first */
.hero-sub-2 { font-size: .98rem; opacity: .82; margin-top: -6px; }
@media (max-width: 640px) { .hero-sub-2 { font-size: .94rem; } }


/* ==========================================================
   CONFETTI — final word
   The starbursts were the old inline-SVG tiles. They are gone.
   These three PNG layers are the only thing that renders.
   ========================================================== */

.stars { display: none; }
[data-theme="night"] .stars { display: block; }
[data-theme="day"] .stars,
[data-theme="day"] .stars::before,
[data-theme="day"] .stars::after,
[data-theme="day"] .stars i,
[data-theme="day"] .stars b { display: none !important; }

.confetti { display: none; }
[data-theme="day"] .confetti {
  display: block !important;
  position: fixed; inset: -18% 0 -12%;
  z-index: 0; pointer-events: none; overflow: hidden;
  opacity: .85;
}
[data-theme="day"] .confetti::before,
[data-theme="day"] .confetti::after,
[data-theme="day"] .confetti i {
  content: ""; position: absolute; inset: 0; display: block;
  background-repeat: repeat;
}
[data-theme="day"] .confetti::before {
  background-image: url("/assets/img/brand/confetti-far.png") !important;
  background-size: 300px 300px; opacity: .6;
  animation: fall-far 38s linear infinite;
}
[data-theme="day"] .confetti::after {
  background-image: url("/assets/img/brand/confetti-mid.png") !important;
  background-size: 340px 340px; opacity: .8;
  animation: fall-mid 26s linear infinite;
}
[data-theme="day"] .confetti i {
  background-image: url("/assets/img/brand/confetti-near.png") !important;
  background-size: 400px 400px; opacity: .95;
  animation: fall-near 17s linear infinite;
}

@keyframes fall-far  { from { background-position: 0 0; } to { background-position: -60px 300px; } }
@keyframes fall-mid  { from { background-position: 0 0; } to { background-position: 90px 340px; } }
@keyframes fall-near { from { background-position: 0 0; } to { background-position: -130px 400px; } }

@media (prefers-reduced-motion: reduce) {
  [data-theme="day"] .confetti::before,
  [data-theme="day"] .confetti::after,
  [data-theme="day"] .confetti i { animation: none; }
}
@media (max-width: 640px) {
  [data-theme="day"] .confetti::before { display: none; }
  [data-theme="day"] .confetti { opacity: .65; }
}

/* ==========================================================
   SKIP THE LINE CLUB
   ========================================================== */

.nav-join { color: var(--accent) !important; font-weight: 700; }
[data-theme="day"] .nav-join {
  background: var(--neon-green); color: var(--ink) !important;
  border-color: var(--ink) !important;
}

.join-form {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: 18px; padding: 26px; margin-bottom: 34px;
}
[data-theme="day"] .join-form {
  border-width: 2px; border-radius: 16px;
  background: #fff; box-shadow: var(--shadow);
}
.join-form label {
  display: block; font-family: var(--display); font-size: .68rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); margin-bottom: 10px;
}
.join-row { display: flex; gap: 12px; flex-wrap: wrap; }
.join-row input {
  flex: 1 1 240px; min-width: 0;
  background: var(--bg); color: var(--ink);
  border: var(--border-w) solid var(--line);
  border-radius: 999px; padding: 14px 20px;
  font-family: var(--body); font-size: 1rem;
}
[data-theme="day"] .join-row input { border-width: 2px; border-radius: 0; background: #fff; }
.join-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.join-row .btn { flex: 0 0 auto; }
.join-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join-note { font-size: .84rem; color: var(--muted); margin: 14px 0 0; }
.join-ok, .join-err {
  padding: 14px 18px; border-radius: 12px; margin: 0 0 22px;
  font-weight: 600;
}
.join-ok  { background: color-mix(in srgb, var(--teal-bright) 18%, var(--surface)); color: var(--ink); }
.join-err { background: color-mix(in srgb, var(--neon-pink) 18%, var(--surface)); color: var(--ink); }
[data-theme="day"] .join-ok  { border: 2px solid var(--ink); background: #ECFDF5; }
[data-theme="day"] .join-err { border: 2px solid var(--ink); background: #FEF2F2; }


/* ==========================================================
   FEATURED — two stacked slots, Music above Festivals
   ========================================================== */

.home-featured { display: flex; flex-direction: column; gap: 16px; }

.feat-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 20px 22px;
}
.feat-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.feat-title {
  font-size: 1.12rem; line-height: 1.26;
}
.feat-standfirst { font-size: .89rem; }
.feat-fest {
  display: inline-block; margin-top: 4px;
  font-family: var(--display); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); border: 0;
}

/* ---- category badges: readable in both themes ---- */
.cat-badge {
  font-family: var(--display); font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 4px 10px; border-radius: 4px; white-space: nowrap;
}
[data-theme="night"] .cat-badge {
  background: var(--bg-3); border: 1px solid var(--line);
}
[data-theme="night"] .cat-music     { color: #38D9F0; }
[data-theme="night"] .cat-festivals { color: #C4B5FD; }
[data-theme="night"] .cat-fashion   { color: #FF4D9D; }
[data-theme="night"] .cat-gadgets   { color: #39FF14; }
[data-theme="night"] .cat-tickets   { color: #14B8A6; }
[data-theme="night"] .cat-media     { color: #E2E8F0; }

/* day: solid fill, black rule, dark text — always legible */
[data-theme="day"] .cat-badge {
  border: 2px solid #0A0A0A; color: #0A0A0A; border-radius: 0;
}
[data-theme="day"] .cat-music     { background: #22D3EE; }
[data-theme="day"] .cat-festivals { background: #C4B5FD; }
[data-theme="day"] .cat-fashion   { background: #FF2D95; }
[data-theme="day"] .cat-gadgets   { background: #39FF14; }
[data-theme="day"] .cat-tickets   { background: #14B8A6; }
[data-theme="day"] .cat-media     { background: #E2E8F0; }

/* headline: stop "another." stranding on its own line */
.home-h1 { max-width: 15ch; letter-spacing: -.04em; }
@media (min-width: 901px) {
  .home-split { grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: start; }
  .home-copy { padding-top: 8px; }
}

/* ==========================================================
   TEDDY BADGE — homepage
   Sits under the featured stack. The outline ring gives the
   artwork an edge so it reads as a deliberate object rather
   than a sticker dropped on the page.
   ========================================================== */

.teddy-badge {
  display: flex; align-items: center; gap: 16px;
  margin-top: 4px; padding: 14px 20px 14px 14px;
  border: var(--border-w) solid var(--line);
  border-radius: 999px; background: var(--surface);
  align-self: flex-start;
  transition: transform .16s ease, border-color .16s ease;
}
[data-theme="day"] .teddy-badge {
  border-width: 2px; border-color: var(--ink);
  background: #fff; box-shadow: var(--shadow-sm);
}
.teddy-badge img {
  width: 58px; height: 58px; flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(56,217,240,.45));
}
[data-theme="day"] .teddy-badge img { filter: drop-shadow(0 2px 5px rgba(10,10,10,.28)); }
.teddy-badge span {
  font-family: var(--display); font-weight: 700; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink);
}
.teddy-badge:hover { transform: translateY(-2px); color: var(--ink); }
[data-theme="night"] .teddy-badge:hover { border-color: var(--lz-cyan); }
[data-theme="day"] .teddy-badge:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }

/* ==========================================================
   MEET TEDDY — story page
   ========================================================== */

.hero-teddy { overflow: hidden; }
.teddy-hero {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 40px; align-items: center;
}
.teddy-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02;
  max-width: none; margin-bottom: 18px;
}
.teddy-sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5; max-width: 26ch; margin-bottom: 30px;
}
.teddy-hero-art img {
  width: 100%; max-width: 400px; height: auto; display: block;
  margin-left: auto;
  filter: drop-shadow(0 0 46px rgba(56,217,240,.34));
  animation: teddy-drift 12s ease-in-out infinite alternate;
}
[data-theme="day"] .teddy-hero-art img { filter: drop-shadow(0 12px 30px rgba(10,10,10,.2)); }
@keyframes teddy-drift {
  from { transform: translateY(-10px) rotate(-1.5deg); }
  to   { transform: translateY(10px) rotate(1.5deg); }
}

/* glowing paw prints, drifting across the hero */
.teddy-paws { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.teddy-paws .paw {
  position: absolute; width: 46px; height: 46px;
  fill: var(--accent); opacity: .16;
  filter: drop-shadow(0 0 12px currentColor);
}
[data-theme="night"] .teddy-paws .paw { fill: #38D9F0; opacity: .22; }
[data-theme="day"] .teddy-paws .paw { fill: #8B5CF6; opacity: .14; }
.paw-1 { left: 7%;  top: 62%; transform: rotate(-18deg); animation: paw-glow 5s ease-in-out infinite; }
.paw-2 { left: 21%; top: 26%; width: 34px; transform: rotate(14deg); animation: paw-glow 5s ease-in-out infinite .9s; }
.paw-3 { left: 46%; top: 76%; width: 28px; transform: rotate(-6deg); animation: paw-glow 5s ease-in-out infinite 1.8s; }
@keyframes paw-glow { 0%,100% { opacity: .08; } 50% { opacity: .28; } }

/* ---- the story ---- */
.teddy-story { padding: 64px 0 90px; }
.teddy-story .wrap { max-width: 760px; }
.teddy-story p {
  font-size: 1.14rem; line-height: 1.78; color: var(--ink-soft);
  margin: 0 0 26px;
}
.teddy-story em { color: var(--ink); font-style: italic; }
.story-lede {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem) !important;
  line-height: 1.24 !important; letter-spacing: -.03em;
  color: var(--ink) !important; margin-bottom: 30px !important;
}
.teddy-story h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  margin: 52px 0 20px; letter-spacing: -.028em;
}
.story-pull {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.65rem) !important;
  line-height: 1.34 !important; letter-spacing: -.028em;
  color: var(--ink) !important;
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 26px; margin: 40px 0 !important;
}
[data-theme="day"] .story-pull { border-left-color: var(--neon-pink); }

.story-art {
  margin: 10px 0 26px; max-width: 250px;
}
.story-art img { width: 100%; height: auto; display: block; }
[data-theme="night"] .story-art img { filter: drop-shadow(0 0 28px rgba(139,92,246,.3)); }
.story-art figcaption {
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  color: var(--muted); margin-top: 10px; line-height: 1.5;
  text-align: center;
}
.story-art-right { float: right; margin-left: 38px; }
.story-art-left  { float: left;  margin-right: 38px; }

.story-sign {
  font-family: var(--display); font-weight: 600;
  font-size: 1.16rem !important; color: var(--ink) !important;
  border-top: var(--border-w) solid var(--line);
  padding-top: 30px; margin-top: 46px !important;
}
[data-theme="day"] .story-sign { border-top-width: 2px; }

.story-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 34px 0 0; clear: both; }

.story-mark {
  text-align: center; margin: 70px auto 0; padding-top: 40px;
  border-top: var(--border-w) solid var(--line);
}
[data-theme="day"] .story-mark { border-top-width: 2px; }
.story-mark img { width: 210px; height: auto; margin: 0 auto 12px; display: block; }
.story-mark .is-day { display: none; }
[data-theme="day"] .story-mark .is-night { display: none; }
[data-theme="day"] .story-mark .is-day   { display: block; }
.story-mark p {
  font-family: var(--display); font-size: .74rem !important; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted) !important; margin: 0 !important;
}

@media (max-width: 860px) {
  .teddy-hero { grid-template-columns: 1fr; gap: 28px; }
  .teddy-hero-art img { max-width: 260px; margin: 0 auto; }
  .story-art { float: none !important; margin: 30px auto !important; max-width: 220px; }
  .teddy-story { padding: 44px 0 66px; }
  .teddy-story p { font-size: 1.06rem; }
}

@media (prefers-reduced-motion: reduce) {
  .teddy-hero-art img, .teddy-paws .paw { animation: none; }
}

/* ==========================================================
   UTILITY BAR — back + search, every page
   ========================================================== */

.utility-bar {
  border-bottom: var(--border-w) solid var(--line);
  background: var(--surface);
  position: relative; z-index: 3;
}
[data-theme="day"] .utility-bar { border-bottom-width: 2px; background: #fff; }
.utility-inner {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; flex-wrap: wrap;
}
.util-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: var(--border-w) solid var(--line);
  color: var(--ink-soft); border-radius: 999px;
  padding: 7px 15px 7px 11px; cursor: pointer;
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
[data-theme="day"] .util-btn { border-width: 2px; border-radius: 0; color: var(--ink); }
.util-btn svg { width: 15px; height: 15px; }
.util-btn:hover { color: var(--ink); border-color: var(--accent); }

.util-search {
  display: flex; align-items: center; gap: 9px;
  margin-left: auto; flex: 0 1 380px; min-width: 210px;
  border: var(--border-w) solid var(--line);
  border-radius: 999px; padding: 4px 5px 4px 14px;
  background: var(--bg);
}
[data-theme="day"] .util-search { border-width: 2px; border-radius: 0; background: #fff; }
.util-search svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.util-search input {
  flex: 1; min-width: 0; background: none; border: 0;
  color: var(--ink); font-family: var(--body); font-size: .9rem; padding: 6px 0;
}
.util-search input:focus { outline: none; }
.util-search button {
  border: 0; cursor: pointer; border-radius: 999px;
  background: var(--accent); color: var(--btn-fg);
  padding: 7px 15px; font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
[data-theme="day"] .util-search button {
  border-radius: 0; background: var(--ink); color: #fff;
}

.search-body { padding: 38px 0 70px; }
.search-form { max-width: 620px; margin-bottom: 26px; }
.search-form label {
  display: block; font-family: var(--display); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 9px;
}
.search-row { display: flex; gap: 10px; flex-wrap: wrap; }
.search-row input {
  flex: 1 1 260px; min-width: 0; padding: 13px 18px;
  border: var(--border-w) solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-family: var(--body); font-size: 1rem;
}
[data-theme="day"] .search-row input { border-width: 2px; border-radius: 0; background: #fff; }
.search-hint { color: var(--muted); font-size: .92rem; }

@media (max-width: 560px) {
  .util-search { flex-basis: 100%; margin-left: 0; }
  .utility-inner { padding-top: 10px; padding-bottom: 10px; }
}

/* ==========================================================
   FESTIVAL — forum & merch
   ========================================================== */

.fx-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.fx-btn {
  display: inline-flex; align-items: center; gap: 9px;
  border: var(--border-w) solid var(--line);
  border-radius: 999px; padding: 11px 20px;
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink); background: var(--surface);
}
[data-theme="day"] .fx-btn { border-width: 2px; border-radius: 0; box-shadow: var(--shadow-sm); background: #fff; }
.fx-btn svg { width: 17px; height: 17px; }
.fx-merch:hover { border-color: var(--accent); color: var(--accent); }
.fx-forum:hover { border-color: var(--accent); color: var(--accent); }
.fx-btn.is-soon { opacity: .55; cursor: default; }
.fx-btn.is-soon:hover { border-color: var(--line); color: var(--ink); }
.fx-btn em {
  font-style: normal; font-size: .68rem; font-weight: 600;
  color: var(--muted); letter-spacing: .1em;
}

/* ==========================================================
   TEDDY — the tablet
   ========================================================== */

.teddy-hero-centred { text-align: center; }
.teddy-hero-centred h1 { margin-left: auto; margin-right: auto; max-width: 16ch; }
.teddy-hero-centred .teddy-sub,
.teddy-hero-centred p { margin-left: auto; margin-right: auto; }
.teddy-hero-centred .teddy-sub { max-width: 30ch; }

.teddy-video-wrap { padding: 0 22px 80px; margin-top: -30px; position: relative; z-index: 4; }

.tablet { max-width: 900px; margin: 0 auto 40px; }
.tablet-shell {
  position: relative;
  background: linear-gradient(160deg, #2A2A32, #101014);
  border-radius: 26px; padding: 22px 22px 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
}
[data-theme="day"] .tablet-shell {
  background: linear-gradient(160deg, #3A3A44, #16161C);
  box-shadow: 10px 10px 0 var(--ink), inset 0 0 0 1px rgba(255,255,255,.1);
  border: 2px solid var(--ink);
}
.tablet-cam {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: #05050a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.tablet-screen {
  position: relative; aspect-ratio: 16 / 10;
  border-radius: 8px; overflow: hidden; background: #000;
}
.tablet-screen iframe,
.tablet-screen video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; object-fit: cover;
}
.tablet-empty {
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, #1A1A24, #06060A);
  padding: 30px;
}
.tablet-empty p {
  color: #8A94A8; font-family: var(--display); font-size: .92rem;
  font-weight: 600; margin: 0;
}
.tablet-empty .tablet-hint { font-size: .76rem; font-weight: 500; margin-top: 8px; }

@media (max-width: 640px) {
  .tablet-shell { padding: 12px; border-radius: 18px; }
  .teddy-video-wrap { margin-top: -10px; padding-bottom: 54px; }
}

/* ==========================================================
   TICKET STUB — more ticket, less panel
   ========================================================== */

.stub { position: relative; }
/* punched holes at the perforation, top and bottom */
.stub::after {
  content: ""; position: absolute; top: -9px; bottom: -9px;
  right: 116px; width: 18px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, var(--bg) 0 9px, transparent 9.5px) top center / 18px 18px no-repeat,
    radial-gradient(circle at 50% 50%, var(--bg) 0 9px, transparent 9.5px) bottom center / 18px 18px no-repeat;
  z-index: 3;
}
/* faint printed guilloche lines, like security paper */
.stub-main {
  background-image:
    repeating-linear-gradient(90deg, rgba(10,10,10,.028) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(10,10,10,.022) 0 1px, transparent 1px 7px);
}
.stub-end::after {
  content: "ADMIT ONE";
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: .5rem; font-weight: 700;
  letter-spacing: .22em; color: rgba(255,255,255,.42); white-space: nowrap;
}
[data-theme="day"] .stub-end::after { color: rgba(10,10,10,.5); }

@media (max-width: 640px) {
  .stub::after { display: none; }
}

/* ==========================================================
   ARTICLES — lead image, embedded video, source note
   ========================================================== */

.article-lead { margin: 0 0 32px; }
.article-lead img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: var(--border-w) solid var(--line);
}
[data-theme="day"] .article-lead img {
  border-width: 2px; border-radius: 0; box-shadow: var(--shadow);
}

/* keeps any embed at 16:9 on every screen size */
.video-embed {
  position: relative; aspect-ratio: 16 / 9;
  margin: 32px 0; border-radius: 14px; overflow: hidden;
  background: #000; border: var(--border-w) solid var(--line);
}
[data-theme="day"] .video-embed {
  border-width: 2px; border-radius: 0; box-shadow: var(--shadow);
}
.video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.source-note {
  font-size: .84rem !important; color: var(--muted) !important;
  border-top: var(--border-w) solid var(--line);
  padding-top: 16px; margin-top: 34px !important;
}
[data-theme="day"] .source-note { border-top-width: 2px; }

/* news cards with a picture */
.news-card.has-thumb { padding: 0; overflow: hidden; }
.news-card.has-thumb > .news-kicker,
.news-card.has-thumb > .news-title,
.news-card.has-thumb > .news-standfirst { padding-left: 20px; padding-right: 20px; }
.news-card.has-thumb > .news-kicker { padding-top: 18px; }
.news-card.has-thumb > .news-standfirst { padding-bottom: 20px; }
.news-thumb { display: block; }
.news-thumb img {
  width: 100%; height: 168px; object-fit: cover; display: block;
  border-bottom: var(--border-w) solid var(--line);
}
[data-theme="day"] .news-thumb img { border-bottom-width: 2px; }


/* ==========================================================
   DAY CONTRAST — nothing may be light-on-light
   --silver and --soft-white are fixed brand colours, not theme
   tokens. Using them for text meant white-on-white in day mode.
   These catch anything that slips through.
   ========================================================== */

[data-theme="day"] .side-link,
[data-theme="day"] .footer-col a,
[data-theme="day"] .nav-panel a,
[data-theme="day"] .card-blurb,
[data-theme="day"] .news-standfirst,
[data-theme="day"] .feat-standfirst,
[data-theme="day"] .prose p,
[data-theme="day"] .prose li,
[data-theme="day"] .faq-item p,
[data-theme="day"] .rating-note,
[data-theme="day"] .acc-note,
[data-theme="day"] .principle p,
[data-theme="day"] .contact-route p,
[data-theme="day"] .nnn-entry p,
[data-theme="day"] .empty-state,
[data-theme="day"] .hero-sub,
[data-theme="day"] .teddy-story p,
[data-theme="day"] .chip,
[data-theme="day"] .tag,
[data-theme="day"] .artist,
[data-theme="day"] .btn-ghost,
[data-theme="day"] .util-btn { color: #1E293B; }

[data-theme="day"] .side-card h3,
[data-theme="day"] .footer-col h4,
[data-theme="day"] .card-place,
[data-theme="day"] .news-date,
[data-theme="day"] .feat-date,
[data-theme="day"] .feat-kicker,
[data-theme="day"] .stub-label,
[data-theme="day"] .rating-kind,
[data-theme="day"] .rating-axis,
[data-theme="day"] .acc-label,
[data-theme="day"] .crumbs,
[data-theme="day"] .crumbs a,
[data-theme="day"] .updated,
[data-theme="day"] .source-note,
[data-theme="day"] .result-count,
[data-theme="day"] .join-note,
[data-theme="day"] .story-mark p { color: #475569; }

[data-theme="day"] .card-name,
[data-theme="day"] .news-title,
[data-theme="day"] .feat-title,
[data-theme="day"] .brand-text,
[data-theme="day"] h1, [data-theme="day"] h2,
[data-theme="day"] h3, [data-theme="day"] h4 { color: #0A0A0A; }

[data-theme="day"] a { color: #0A0A0A; }
[data-theme="day"] a:hover { color: #C81E6B; }
[data-theme="day"] .block-link { color: #0A0A0A; }

/* the dark tear-off end keeps its light text in both themes */
[data-theme="day"] .stub-end .stub-serial { color: #CBD5E1; }

/* ==========================================================
   SPACING — tightened throughout
   ========================================================== */

.hero-inner { padding: 44px 22px 40px; }
.hero-home .hero-inner { padding: 60px 22px 56px; }
.teddy-story { padding: 44px 0 64px; }
.block { margin: 0 0 34px; }
.cols { gap: 40px; padding-top: 34px; padding-bottom: 46px; }
.card-grid, .news-grid { gap: 16px; margin-top: 18px; }
.teddy-story h2 { margin: 38px 0 16px; }
.teddy-story p { margin: 0 0 20px; line-height: 1.7; }
.prose h2 { margin-top: 30px; }
.prose p { margin: 0 0 15px; }
.hero h1 { margin: 0 0 13px; }
.hero-sub { margin: 0 0 20px; }
.home-split { gap: 34px; }
.ratings, .access { gap: 12px; }
.acc-row { padding: 16px 20px; }
.rating { padding: 16px 18px 18px; }
.card { padding: 18px; }
.news-card { padding: 18px; }
.news-card.has-thumb > .news-kicker { padding-top: 15px; }
.side-card { padding: 17px; margin-bottom: 14px; }
.footer-inner { padding: 38px 22px 26px; gap: 28px; }
.stub-item { padding: 17px 18px 15px; }
.filters { padding: 16px 18px; margin-top: 22px; }
.section-gap, .ratings-block, .access-block { margin-bottom: 32px; }
.article-lead { margin: 0 0 24px; }
.video-embed { margin: 24px 0; }
.story-mark { margin-top: 48px; padding-top: 30px; }
.principle { padding: 17px 0; }
.faq-item { padding: 14px 0; }

@media (max-width: 640px) {
  .hero-inner { padding: 32px 20px 30px; }
  .hero-home .hero-inner { padding: 40px 20px 38px; }
  .cols { gap: 26px; padding-top: 26px; padding-bottom: 34px; }
  .block { margin: 0 0 26px; }
}


/* ==========================================================
   FINAL: legibility over decoration
   Successive patches left three competing confetti rules and
   several text colours that were fine on black and invisible
   on paper. This block is last in the file and settles both.
   ========================================================== */

/* confetti sits BEHIND everything, and quieter */
[data-theme="day"] .confetti {
  z-index: -1 !important;
  opacity: .42 !important;
}
[data-theme="day"] .confetti::before { opacity: .5 !important; }
[data-theme="day"] .confetti::after  { opacity: .62 !important; }
[data-theme="day"] .confetti i       { opacity: .72 !important; }

/* content sits above it, on solid ground */
[data-theme="day"] main,
[data-theme="day"] .site-header,
[data-theme="day"] .site-footer,
[data-theme="day"] .utility-bar { position: relative; z-index: 2; }

/* reading surfaces are opaque so nothing shows through the copy */
[data-theme="day"] .cols,
[data-theme="day"] .col-main,
[data-theme="day"] .teddy-story .wrap { position: relative; z-index: 2; }

/* ---- text, forced dark ---- */
[data-theme="day"] body,
[data-theme="day"] p,
[data-theme="day"] li,
[data-theme="day"] .hero-sub,
[data-theme="day"] .card-blurb,
[data-theme="day"] .news-standfirst,
[data-theme="day"] .feat-standfirst,
[data-theme="day"] .rating-note,
[data-theme="day"] .acc-note,
[data-theme="day"] .faq-item p,
[data-theme="day"] .principle p,
[data-theme="day"] .nnn-entry p,
[data-theme="day"] .contact-route p,
[data-theme="day"] .teddy-story p,
[data-theme="day"] .prose p,
[data-theme="day"] .prose li,
[data-theme="day"] .empty-state { color: #1E293B !important; }

[data-theme="day"] h1, [data-theme="day"] h2,
[data-theme="day"] h3, [data-theme="day"] h4,
[data-theme="day"] .card-name,
[data-theme="day"] .news-title,
[data-theme="day"] .feat-title,
[data-theme="day"] .rating-verdict,
[data-theme="day"] .acc-verdict,
[data-theme="day"] .stub-value,
[data-theme="day"] .story-lede,
[data-theme="day"] .story-pull { color: #0A0A0A !important; }

[data-theme="day"] .side-link,
[data-theme="day"] .footer-col a,
[data-theme="day"] .nav-panel a,
[data-theme="day"] .block-link,
[data-theme="day"] .nav-link,
[data-theme="day"] .chip,
[data-theme="day"] .tag,
[data-theme="day"] .artist,
[data-theme="day"] .btn-ghost,
[data-theme="day"] .util-btn,
[data-theme="day"] .fx-btn { color: #0F172A !important; }

[data-theme="day"] .side-link:hover,
[data-theme="day"] .footer-col a:hover,
[data-theme="day"] a:hover { color: #C81E6B !important; }

/* labels and metadata: mid-grey, still comfortably readable */
[data-theme="day"] .crumbs,
[data-theme="day"] .crumbs a,
[data-theme="day"] .card-place,
[data-theme="day"] .news-date,
[data-theme="day"] .feat-date,
[data-theme="day"] .feat-kicker,
[data-theme="day"] .stub-label,
[data-theme="day"] .stub-sub,
[data-theme="day"] .rating-kind,
[data-theme="day"] .rating-axis,
[data-theme="day"] .acc-label,
[data-theme="day"] .side-card h3,
[data-theme="day"] .footer-col h4,
[data-theme="day"] .updated,
[data-theme="day"] .source-note,
[data-theme="day"] .result-count,
[data-theme="day"] .join-note,
[data-theme="day"] .ratings-foot,
[data-theme="day"] .footer-note,
[data-theme="day"] .footer-legal,
[data-theme="day"] .story-mark p { color: #475569 !important; }

/* the dark tear-off end of the ticket keeps its light text */
[data-theme="day"] .stub-end,
[data-theme="day"] .stub-end .stub-serial { color: #CBD5E1 !important; }

/* artist chips: headliners keep the green fill, the rest go white */
[data-theme="day"] .artist { background: #fff; }
[data-theme="day"] .artist-head { background: var(--neon-green); color: #0A0A0A !important; }

/* cards and panels stay fully opaque */
[data-theme="day"] .card,
[data-theme="day"] .news-card,
[data-theme="day"] .side-card,
[data-theme="day"] .feat-card,
[data-theme="day"] .rating,
[data-theme="day"] .access,
[data-theme="day"] .acc-row,
[data-theme="day"] .stub,
[data-theme="day"] .filters,
[data-theme="day"] .join-form,
[data-theme="day"] .form-card,
[data-theme="day"] .contact-card,
[data-theme="day"] .nnn-col { background-color: #FFFFFF; }
[data-theme="day"] .rating-safety     { background-color: #EAFBFE; }
[data-theme="day"] .rating-comfort    { background-color: #E9FAF7; }
[data-theme="day"] .rating-complexity { background-color: #FFEDF5; }
[data-theme="day"] .nnn-col.is-new  { background-color: #F0FFEC; }
[data-theme="day"] .nnn-col.is-now  { background-color: #EAFBFE; }
[data-theme="day"] .nnn-col.is-next { background-color: #FFEDF5; }


/* ==========================================================
   CONFETTI — visible again, still behind the words
   z-index:-1 put it behind the page background, which hid it
   completely. Back to 0, with the content layered above and
   reading surfaces kept opaque. Same result, visible confetti.
   ========================================================== */

[data-theme="day"] body { background-color: #FFFFFF; }

[data-theme="day"] .confetti {
  display: block !important;
  position: fixed; inset: -18% 0 -12%;
  z-index: 0 !important;
  opacity: .55 !important;
  pointer-events: none; overflow: hidden;
}
[data-theme="day"] .confetti::before { opacity: .55 !important; }
[data-theme="day"] .confetti::after  { opacity: .7 !important; }
[data-theme="day"] .confetti i       { opacity: .8 !important; }

/* everything you read sits above it */
[data-theme="day"] .site-header,
[data-theme="day"] .utility-bar,
[data-theme="day"] main,
[data-theme="day"] .site-footer {
  position: relative; z-index: 2;
}

/* heroes stay see-through so confetti falls behind the headline,
   but any block of body copy gets an opaque card under it */
[data-theme="day"] .hero,
[data-theme="day"] .hero-home,
[data-theme="day"] .hero-listing { background: transparent !important; }

[data-theme="day"] .col-main > .block,
[data-theme="day"] .teddy-story .wrap,
[data-theme="day"] .prose {
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 18px 22px;
}
[data-theme="day"] .col-main > .block.ratings-block,
[data-theme="day"] .col-main > .block.access-block {
  background: transparent; padding: 0;
}

/* ==========================================================
   MEET SPACE BEAR — badge under the featured cards
   Half the width it was, with a much larger mark. The logo
   does the work; the label just names it.
   ========================================================== */

.home-side { display: flex; flex-direction: column; gap: 16px; }
.home-side .home-featured { margin: 0; }

.teddy-badge {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  width: auto; max-width: 50%;
  margin: 0; padding: 6px 16px 6px 6px;
  border: var(--border-w) solid var(--line);
  border-radius: 999px; background: var(--surface);
  transition: transform .16s ease, border-color .16s ease;
}
[data-theme="day"] .teddy-badge {
  border-width: 2px; border-color: var(--ink);
  background: #fff; box-shadow: var(--shadow-sm);
}
.teddy-badge img {
  width: 76px; height: 76px; flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(56,217,240,.5));
}
[data-theme="day"] .teddy-badge img { filter: drop-shadow(0 2px 6px rgba(10,10,10,.3)); }
.teddy-badge span {
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .09em;
  line-height: 1.2; white-space: nowrap;
}
.teddy-badge:hover { transform: translateY(-2px); }
[data-theme="night"] .teddy-badge:hover { border-color: var(--lz-cyan); }
[data-theme="day"] .teddy-badge:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }

@media (max-width: 900px) {
  .teddy-badge { max-width: none; }
}
@media (max-width: 460px) {
  .teddy-badge img { width: 62px; height: 62px; }
  .teddy-badge span { font-size: .72rem; white-space: normal; }
}


/* ==========================================================
   NIGHT SKY — denser stars, scattered shooting stars,
   twinklier beams
   ========================================================== */

[data-theme="night"] .stars::before {
  box-shadow: 2047px 595px rgba(255,255,255,0.45), 2147px 861px rgba(255,255,255,0.75), 220px 640px rgba(255,255,255,1.0), 1791px 388px rgba(255,255,255,0.9), 826px 816px rgba(255,255,255,0.9), 1346px 467px rgba(255,255,255,0.9), 708px 777px rgba(255,255,255,0.45), 2039px 1141px rgba(255,255,255,0.9), 453px 190px rgba(255,255,255,1.0), 1256px 839px rgba(255,255,255,0.45), 1182px 1041px rgba(255,255,255,0.75), 2048px 539px rgba(255,255,255,0.6), 1175px 627px rgba(255,255,255,0.6), 1768px 591px rgba(255,255,255,0.45), 931px 326px rgba(255,255,255,0.3), 2175px 930px rgba(255,255,255,0.75), 479px 876px rgba(255,255,255,0.75), 2196px 570px rgba(255,255,255,0.3), 2000px 276px rgba(255,255,255,0.3), 1548px 260px rgba(255,255,255,0.3), 174px 130px rgba(255,255,255,0.45), 2174px 1009px rgba(255,255,255,0.3), 2082px 466px rgba(255,255,255,0.9), 252px 890px rgba(255,255,255,0.9), 1479px 1100px rgba(255,255,255,0.75), 986px 569px rgba(255,255,255,0.6), 1640px 906px rgba(255,255,255,0.3), 1940px 489px rgba(255,255,255,1.0), 1105px 514px rgba(255,255,255,0.9), 2302px 500px rgba(255,255,255,0.3), 1719px 436px rgba(255,255,255,0.45), 1091px 1094px rgba(255,255,255,0.9), 266px 445px rgba(255,255,255,0.3), 673px 370px rgba(255,255,255,0.3), 1193px 746px rgba(255,255,255,0.45), 1306px 686px rgba(255,255,255,0.75), 2086px 762px rgba(255,255,255,0.3), 2301px 1353px rgba(255,255,255,0.3), 588px 485px rgba(255,255,255,0.3), 1315px 1205px rgba(255,255,255,0.75), 1153px 885px rgba(255,255,255,0.3), 917px 508px rgba(255,255,255,0.3), 2238px 294px rgba(255,255,255,0.6), 1197px 139px rgba(255,255,255,0.9), 2270px 1117px rgba(255,255,255,0.9), 1934px 537px rgba(255,255,255,1.0), 2026px 253px rgba(255,255,255,0.75), 1935px 492px rgba(255,255,255,1.0), 418px 370px rgba(255,255,255,0.45), 117px 784px rgba(255,255,255,1.0), 2340px 369px rgba(255,255,255,0.3), 294px 1275px rgba(255,255,255,0.9), 867px 797px rgba(255,255,255,1.0), 1914px 345px rgba(255,255,255,0.45), 1147px 600px rgba(255,255,255,0.6), 2167px 540px rgba(255,255,255,0.45), 544px 206px rgba(255,255,255,0.9), 667px 806px rgba(255,255,255,0.45), 939px 1284px rgba(255,255,255,0.45), 1771px 573px rgba(255,255,255,1.0), 1955px 465px rgba(255,255,255,0.9), 373px 532px rgba(255,255,255,0.6), 399px 1258px rgba(255,255,255,1.0), 267px 401px rgba(255,255,255,0.45), 1068px 690px rgba(255,255,255,0.3), 298px 1164px rgba(255,255,255,0.6), 1568px 1046px rgba(255,255,255,0.75), 1663px 740px rgba(255,255,255,0.6), 1601px 1151px rgba(255,255,255,0.75), 1172px 757px rgba(255,255,255,0.6), 656px 674px rgba(255,255,255,1.0), 1794px 911px rgba(255,255,255,0.75), 2069px 283px rgba(255,255,255,0.75), 958px 896px rgba(255,255,255,0.6), 1213px 103px rgba(255,255,255,0.75), 1673px 1127px rgba(255,255,255,0.3), 1664px 489px rgba(255,255,255,0.6), 97px 547px rgba(255,255,255,0.6), 2110px 434px rgba(255,255,255,1.0), 926px 698px rgba(255,255,255,0.9), 1311px 1268px rgba(255,255,255,0.9), 2135px 337px rgba(255,255,255,1.0), 1171px 1164px rgba(255,255,255,1.0), 1317px 635px rgba(255,255,255,0.9), 2158px 274px rgba(255,255,255,0.9), 1379px 499px rgba(255,255,255,0.45), 2348px 419px rgba(255,255,255,0.9), 677px 431px rgba(255,255,255,1.0), 2396px 834px rgba(255,255,255,1.0), 1897px 383px rgba(255,255,255,0.45), 697px 487px rgba(255,255,255,0.45), 2228px 569px rgba(255,255,255,0.6), 2059px 1013px rgba(255,255,255,0.3), 291px 834px rgba(255,255,255,1.0), 1713px 792px rgba(255,255,255,0.45), 1974px 507px rgba(255,255,255,0.6), 1392px 419px rgba(255,255,255,0.9), 953px 1111px rgba(255,255,255,0.75), 1941px 611px rgba(255,255,255,1.0), 1058px 327px rgba(255,255,255,0.75), 1016px 413px rgba(255,255,255,0.3), 1499px 561px rgba(255,255,255,1.0), 702px 441px rgba(255,255,255,0.3), 2040px 381px rgba(255,255,255,0.75), 2034px 588px rgba(255,255,255,0.6), 218px 820px rgba(255,255,255,1.0), 557px 295px rgba(255,255,255,1.0), 738px 732px rgba(255,255,255,0.45), 1104px 903px rgba(255,255,255,0.75), 1589px 546px rgba(255,255,255,0.75), 2324px 365px rgba(255,255,255,1.0), 783px 696px rgba(255,255,255,1.0), 239px 1017px rgba(255,255,255,0.6), 492px 795px rgba(255,255,255,0.3), 2177px 959px rgba(255,255,255,0.6), 790px 960px rgba(255,255,255,0.45), 1249px 659px rgba(255,255,255,0.9), 1904px 362px rgba(255,255,255,0.9), 115px 563px rgba(255,255,255,1.0), 1576px 383px rgba(255,255,255,0.75), 2118px 245px rgba(255,255,255,1.0), 78px 215px rgba(255,255,255,0.45), 2344px 268px rgba(255,255,255,0.75), 1542px 845px rgba(255,255,255,1.0), 2083px 1144px rgba(255,255,255,0.75), 1360px 782px rgba(255,255,255,0.6), 886px 492px rgba(255,255,255,1.0), 378px 830px rgba(255,255,255,1.0), 391px 355px rgba(255,255,255,1.0), 1971px 1102px rgba(255,255,255,0.75), 1329px 119px rgba(255,255,255,1.0), 181px 199px rgba(255,255,255,1.0), 1504px 875px rgba(255,255,255,1.0), 1751px 554px rgba(255,255,255,0.9), 1745px 587px rgba(255,255,255,0.45), 444px 927px rgba(255,255,255,0.3), 1433px 215px rgba(255,255,255,1.0), 503px 356px rgba(255,255,255,0.45), 1217px 737px rgba(255,255,255,0.9), 480px 562px rgba(255,255,255,0.9), 1868px 890px rgba(255,255,255,0.6), 1819px 411px rgba(255,255,255,0.6), 1383px 1384px rgba(255,255,255,0.6), 2150px 654px rgba(255,255,255,0.45), 1283px 887px rgba(255,255,255,0.9), 1651px 427px rgba(255,255,255,0.3), 1790px 518px rgba(255,255,255,0.9), 2393px 428px rgba(255,255,255,0.9), 1167px 1267px rgba(255,255,255,0.6), 1309px 798px rgba(255,255,255,0.75), 411px 391px rgba(255,255,255,1.0), 596px 387px rgba(255,255,255,1.0), 14px 816px rgba(255,255,255,0.75), 1904px 1035px rgba(255,255,255,0.75), 2313px 1017px rgba(255,255,255,0.3), 1480px 495px rgba(255,255,255,0.3), 1271px 586px rgba(255,255,255,0.9), 1237px 309px rgba(255,255,255,0.45), 122px 117px rgba(255,255,255,0.3), 366px 460px rgba(255,255,255,0.9), 1428px 509px rgba(255,255,255,0.45), 2054px 824px rgba(255,255,255,0.45), 1083px 1081px rgba(255,255,255,0.9), 124px 912px rgba(255,255,255,0.75), 1087px 417px rgba(255,255,255,0.45), 418px 507px rgba(255,255,255,0.6), 1415px 576px rgba(255,255,255,1.0), 1712px 1059px rgba(255,255,255,0.9), 2060px 429px rgba(255,255,255,0.9), 2162px 1185px rgba(255,255,255,0.9), 961px 216px rgba(255,255,255,0.75), 1144px 296px rgba(255,255,255,1.0), 276px 329px rgba(255,255,255,0.3), 1188px 864px rgba(255,255,255,0.3), 422px 547px rgba(255,255,255,0.9), 585px 870px rgba(255,255,255,0.45), 1364px 1085px rgba(255,255,255,0.75), 1348px 520px rgba(255,255,255,1.0), 303px 528px rgba(255,255,255,1.0), 841px 456px rgba(255,255,255,1.0), 755px 428px rgba(255,255,255,1.0), 381px 425px rgba(255,255,255,1.0), 2201px 413px rgba(255,255,255,0.6), 970px 681px rgba(255,255,255,0.45), 1387px 356px rgba(255,255,255,0.6), 2125px 691px rgba(255,255,255,0.45), 202px 391px rgba(255,255,255,0.3), 19px 790px rgba(255,255,255,0.9), 889px 1148px rgba(255,255,255,1.0), 673px 338px rgba(255,255,255,0.9), 2153px 728px rgba(255,255,255,1.0), 1363px 648px rgba(255,255,255,0.75), 1269px 105px rgba(255,255,255,0.6), 144px 275px rgba(255,255,255,0.75), 959px 817px rgba(255,255,255,0.75), 2320px 841px rgba(255,255,255,1.0), 643px 811px rgba(255,255,255,0.75), 663px 332px rgba(255,255,255,0.45), 1643px 182px rgba(255,255,255,0.75), 1526px 349px rgba(255,255,255,0.45), 1307px 287px rgba(255,255,255,0.9), 112px 314px rgba(255,255,255,0.9), 1880px 1034px rgba(255,255,255,0.75), 1144px 1151px rgba(255,255,255,0.9), 1163px 313px rgba(255,255,255,0.3), 1866px 644px rgba(255,255,255,0.6), 812px 510px rgba(255,255,255,0.9), 1429px 874px rgba(255,255,255,1.0), 1342px 172px rgba(255,255,255,0.3), 353px 401px rgba(255,255,255,1.0), 2304px 930px rgba(255,255,255,1.0), 822px 705px rgba(255,255,255,0.6), 740px 1098px rgba(255,255,255,0.3), 364px 488px rgba(255,255,255,0.45), 2389px 555px rgba(255,255,255,1.0), 410px 871px rgba(255,255,255,0.9), 2134px 406px rgba(255,255,255,0.75), 600px 417px rgba(255,255,255,0.75), 504px 558px rgba(255,255,255,0.6), 1085px 445px rgba(255,255,255,0.3), 1541px 877px rgba(255,255,255,0.75), 1090px 330px rgba(255,255,255,0.9), 389px 800px rgba(255,255,255,0.75), 958px 584px rgba(255,255,255,0.6), 301px 506px rgba(255,255,255,0.45), 2094px 324px rgba(255,255,255,0.45), 558px 240px rgba(255,255,255,0.6), 1977px 360px rgba(255,255,255,0.3), 93px 613px rgba(255,255,255,0.75), 1432px 468px rgba(255,255,255,0.45), 1613px 736px rgba(255,255,255,1.0), 413px 768px rgba(255,255,255,0.75), 2102px 450px rgba(255,255,255,0.75), 1430px 583px rgba(255,255,255,0.9), 1300px 48px rgba(255,255,255,0.75), 63px 665px rgba(255,255,255,0.3), 1179px 1000px rgba(255,255,255,0.75), 389px 181px rgba(255,255,255,0.75), 473px 250px rgba(255,255,255,0.3), 278px 745px rgba(255,255,255,0.3), 1987px 667px rgba(255,255,255,0.75), 297px 671px rgba(255,255,255,0.45), 1383px 437px rgba(255,255,255,0.9), 526px 563px rgba(255,255,255,0.9), 497px 1362px rgba(255,255,255,0.3), 1867px 1340px rgba(255,255,255,0.9), 139px 875px rgba(255,255,255,0.6), 69px 233px rgba(255,255,255,0.45), 1543px 433px rgba(255,255,255,0.6), 58px 602px rgba(255,255,255,0.75), 326px 1103px rgba(255,255,255,0.75), 2350px 508px rgba(255,255,255,0.9), 1757px 1273px rgba(255,255,255,0.75), 2038px 1096px rgba(255,255,255,0.45), 1929px 557px rgba(255,255,255,0.75), 1766px 709px rgba(255,255,255,0.45), 1474px 760px rgba(255,255,255,0.9), 1995px 809px rgba(255,255,255,0.9), 1171px 317px rgba(255,255,255,0.75), 872px 648px rgba(255,255,255,0.6), 2383px 1175px rgba(255,255,255,0.75), 1211px 1040px rgba(255,255,255,1.0), 1661px 1170px rgba(255,255,255,0.45), 2228px 1271px rgba(255,255,255,1.0), 1902px 1214px rgba(255,255,255,0.6), 811px 168px rgba(255,255,255,0.3), 332px 948px rgba(255,255,255,0.75), 1743px 426px rgba(255,255,255,0.6), 2248px 701px rgba(255,255,255,1.0), 893px 873px rgba(255,255,255,0.45), 991px 775px rgba(255,255,255,1.0), 1031px 657px rgba(255,255,255,0.6), 1285px 539px rgba(255,255,255,0.6), 1175px 196px rgba(255,255,255,0.9), 471px 907px rgba(255,255,255,1.0), 1269px 236px rgba(255,255,255,0.3), 275px 647px rgba(255,255,255,1.0), 1237px 410px rgba(255,255,255,0.75), 2183px 460px rgba(255,255,255,0.6), 1978px 867px rgba(255,255,255,0.75), 1777px 471px rgba(255,255,255,0.75), 774px 413px rgba(255,255,255,0.75), 601px 445px rgba(255,255,255,0.6), 1076px 379px rgba(255,255,255,0.9), 553px 530px rgba(255,255,255,0.3), 2066px 271px rgba(255,255,255,0.45), 823px 610px rgba(255,255,255,0.45), 2007px 158px rgba(255,255,255,1.0), 1275px 850px rgba(255,255,255,0.45), 2353px 637px rgba(255,255,255,0.75), 1631px 376px rgba(255,255,255,0.3), 1329px 543px rgba(255,255,255,0.3), 2226px 530px rgba(255,255,255,0.45), 168px 719px rgba(255,255,255,0.3), 1081px 811px rgba(255,255,255,0.6), 939px 829px rgba(255,255,255,0.45), 328px 697px rgba(255,255,255,0.9), 2073px 453px rgba(255,255,255,0.9), 1285px 435px rgba(255,255,255,0.3), 2116px 1142px rgba(255,255,255,0.75), 639px 473px rgba(255,255,255,0.75), 1080px 878px rgba(255,255,255,0.6), 91px 442px rgba(255,255,255,0.75), 17px 563px rgba(255,255,255,1.0), 450px 98px rgba(255,255,255,0.45), 1881px 724px rgba(255,255,255,0.6), 2382px 903px rgba(255,255,255,1.0), 2084px 119px rgba(255,255,255,0.3), 1060px 552px rgba(255,255,255,0.9), 426px 908px rgba(255,255,255,0.6), 1632px 693px rgba(255,255,255,1.0), 467px 208px rgba(255,255,255,0.45), 2157px 174px rgba(255,255,255,0.45), 2369px 379px rgba(255,255,255,0.6), 1393px 389px rgba(255,255,255,0.6), 1189px 770px rgba(255,255,255,0.9), 2334px 216px rgba(255,255,255,0.45), 26px 481px rgba(255,255,255,0.9), 1849px 641px rgba(255,255,255,0.9), 2183px 1331px rgba(255,255,255,1.0), 938px 341px rgba(255,255,255,0.45), 807px 472px rgba(255,255,255,0.6), 1284px 974px rgba(255,255,255,0.45), 1723px 290px rgba(255,255,255,0.6), 1434px 442px rgba(255,255,255,0.3), 2321px 490px rgba(255,255,255,0.6), 1365px 831px rgba(255,255,255,0.6), 213px 340px rgba(255,255,255,0.9), 1803px 584px rgba(255,255,255,0.9), 2202px 560px rgba(255,255,255,0.75), 250px 542px rgba(255,255,255,1.0), 1467px 426px rgba(255,255,255,0.75), 381px 480px rgba(255,255,255,0.9), 1579px 452px rgba(255,255,255,0.9), 1748px 762px rgba(255,255,255,1.0), 2111px 455px rgba(255,255,255,0.3), 863px 449px rgba(255,255,255,0.9), 1935px 293px rgba(255,255,255,0.6), 1538px 585px rgba(255,255,255,0.75), 2084px 480px rgba(255,255,255,0.6), 1426px 809px rgba(255,255,255,0.75), 2101px 615px rgba(255,255,255,1.0), 1641px 583px rgba(255,255,255,0.75), 2282px 615px rgba(255,255,255,0.45), 2120px 793px rgba(255,255,255,0.45), 1075px 1003px rgba(255,255,255,0.45), 215px 503px rgba(255,255,255,1.0), 493px 308px rgba(255,255,255,0.45), 884px 569px rgba(255,255,255,0.3), 1781px 747px rgba(255,255,255,0.45), 699px 1270px rgba(255,255,255,0.45), 1187px 1003px rgba(255,255,255,0.45), 1357px 289px rgba(255,255,255,0.9), 1795px 728px rgba(255,255,255,0.6), 1665px 366px rgba(255,255,255,0.45), 2057px 1035px rgba(255,255,255,0.6), 779px 700px rgba(255,255,255,0.3), 130px 396px rgba(255,255,255,0.75), 2130px 264px rgba(255,255,255,0.75), 730px 545px rgba(255,255,255,0.75), 2186px 989px rgba(255,255,255,0.6), 844px 366px rgba(255,255,255,1.0), 506px 474px rgba(255,255,255,0.3), 598px 454px rgba(255,255,255,1.0), 1007px 542px rgba(255,255,255,0.9), 2377px 564px rgba(255,255,255,0.3), 26px 641px rgba(255,255,255,0.45), 1027px 623px rgba(255,255,255,0.3), 1719px 1096px rgba(255,255,255,1.0), 2072px 815px rgba(255,255,255,0.3), 693px 698px rgba(255,255,255,0.75), 505px 869px rgba(255,255,255,0.3), 122px 568px rgba(255,255,255,0.3), 511px 918px rgba(255,255,255,1.0), 181px 916px rgba(255,255,255,0.75), 980px 142px rgba(255,255,255,0.6), 1983px 592px rgba(255,255,255,0.3), 235px 1079px rgba(255,255,255,0.6), 1274px 891px rgba(255,255,255,0.75), 1146px 513px rgba(255,255,255,0.9), 1404px 1180px rgba(255,255,255,0.45), 1099px 563px rgba(255,255,255,0.9), 1137px 838px rgba(255,255,255,0.45), 971px 736px rgba(255,255,255,1.0), 647px 181px rgba(255,255,255,0.6), 215px 730px rgba(255,255,255,1.0), 1953px 147px rgba(255,255,255,0.45), 1452px 445px rgba(255,255,255,0.45), 133px 951px rgba(255,255,255,0.75), 1993px 474px rgba(255,255,255,0.75), 1998px 1167px rgba(255,255,255,0.6), 1051px 900px rgba(255,255,255,0.9), 602px 985px rgba(255,255,255,0.6), 2132px 1279px rgba(255,255,255,0.6), 1731px 396px rgba(255,255,255,0.3), 1990px 1135px rgba(255,255,255,0.6), 1151px 500px rgba(255,255,255,0.6), 1316px 631px rgba(255,255,255,0.6), 2348px 517px rgba(255,255,255,0.6), 2392px 865px rgba(255,255,255,0.9), 1832px 269px rgba(255,255,255,0.9), 1778px 886px rgba(255,255,255,0.3), 833px 227px rgba(255,255,255,1.0), 2232px 685px rgba(255,255,255,0.6), 1424px 597px rgba(255,255,255,0.45), 270px 444px rgba(255,255,255,0.9), 44px 880px rgba(255,255,255,0.45), 1799px 718px rgba(255,255,255,0.6), 2051px 923px rgba(255,255,255,0.3), 1361px 484px rgba(255,255,255,0.6), 917px 601px rgba(255,255,255,0.75), 1319px 687px rgba(255,255,255,0.9), 1671px 991px rgba(255,255,255,0.3), 480px 1291px rgba(255,255,255,0.9), 2041px 655px rgba(255,255,255,0.3), 917px 611px rgba(255,255,255,0.75), 359px 975px rgba(255,255,255,0.45), 959px 134px rgba(255,255,255,0.75), 2297px 541px rgba(255,255,255,0.9), 1495px 765px rgba(255,255,255,0.75), 905px 678px rgba(255,255,255,0.9), 2126px 891px rgba(255,255,255,0.75), 2190px 750px rgba(255,255,255,0.75), 190px 731px rgba(255,255,255,0.45), 1528px 656px rgba(255,255,255,0.9), 2150px 283px rgba(255,255,255,0.9), 440px 937px rgba(255,255,255,0.45), 973px 235px rgba(255,255,255,0.45), 939px 1408px rgba(255,255,255,0.9), 703px 911px rgba(255,255,255,0.3), 896px 640px rgba(255,255,255,0.6), 1830px 313px rgba(255,255,255,0.45), 2234px 410px rgba(255,255,255,1.0), 902px 563px rgba(255,255,255,0.3), 1111px 349px rgba(255,255,255,0.3), 734px 244px rgba(255,255,255,1.0), 2383px 232px rgba(255,255,255,0.75), 2068px 796px rgba(255,255,255,0.75), 133px 1038px rgba(255,255,255,0.3), 202px 567px rgba(255,255,255,1.0), 133px 502px rgba(255,255,255,1.0), 1084px 1458px rgba(255,255,255,0.6), 1483px 419px rgba(255,255,255,0.3), 671px 704px rgba(255,255,255,0.9), 676px 850px rgba(255,255,255,0.6), 1387px 1279px rgba(255,255,255,0.45), 2322px 443px rgba(255,255,255,0.9), 1261px 797px rgba(255,255,255,1.0), 2151px 485px rgba(255,255,255,0.6), 1729px 262px rgba(255,255,255,0.75), 2252px 859px rgba(255,255,255,1.0), 1174px 336px rgba(255,255,255,0.3), 480px 575px rgba(255,255,255,1.0), 803px 1020px rgba(255,255,255,1.0), 1550px 1277px rgba(255,255,255,1.0), 1990px 1043px rgba(255,255,255,0.6), 2197px 249px rgba(255,255,255,0.45), 2147px 468px rgba(255,255,255,0.3), 1312px 937px rgba(255,255,255,0.3), 99px 371px rgba(255,255,255,1.0), 69px 684px rgba(255,255,255,0.6), 548px 269px rgba(255,255,255,0.6), 709px 287px rgba(255,255,255,1.0), 3px 610px rgba(255,255,255,0.45), 1246px 430px rgba(255,255,255,0.3), 1989px 1171px rgba(255,255,255,0.75), 879px 270px rgba(255,255,255,0.45), 1081px 828px rgba(255,255,255,0.45), 2017px 1164px rgba(255,255,255,0.75), 1938px 516px rgba(255,255,255,0.6), 2393px 569px rgba(255,255,255,0.45), 1494px 390px rgba(255,255,255,0.75), 1303px 887px rgba(255,255,255,0.75), 1073px 879px rgba(255,255,255,0.3), 1195px 449px rgba(255,255,255,0.3), 76px 1220px rgba(255,255,255,0.6), 2072px 210px rgba(255,255,255,1.0), 1977px 1032px rgba(255,255,255,0.3), 37px 602px rgba(255,255,255,0.6), 106px 167px rgba(255,255,255,0.3), 604px 215px rgba(255,255,255,0.6), 2232px 444px rgba(255,255,255,0.6), 355px 416px rgba(255,255,255,0.3), 1108px 617px rgba(255,255,255,0.75), 2312px 368px rgba(255,255,255,0.3), 2243px 511px rgba(255,255,255,0.9), 8px 449px rgba(255,255,255,0.3), 154px 987px rgba(255,255,255,1.0), 1698px 599px rgba(255,255,255,0.75), 2255px 987px rgba(255,255,255,1.0), 1712px 524px rgba(255,255,255,0.45), 136px 729px rgba(255,255,255,0.6), 1847px 178px rgba(255,255,255,0.75), 919px 917px rgba(255,255,255,0.9), 1186px 1021px rgba(255,255,255,0.75), 1048px 559px rgba(255,255,255,0.45), 2164px 952px rgba(255,255,255,0.75), 2169px 459px rgba(255,255,255,1.0), 2303px 388px rgba(255,255,255,0.9), 2060px 1231px rgba(255,255,255,0.6), 2042px 531px rgba(255,255,255,0.6), 344px 424px rgba(255,255,255,0.6), 1507px 424px rgba(255,255,255,0.9), 2159px 529px rgba(255,255,255,0.45), 1148px 604px rgba(255,255,255,0.6), 909px 472px rgba(255,255,255,0.3), 1635px 1041px rgba(255,255,255,0.9), 960px 1032px rgba(255,255,255,0.9), 185px 1016px rgba(255,255,255,0.45), 2065px 577px rgba(255,255,255,0.45), 1001px 674px rgba(255,255,255,1.0), 1827px 489px rgba(255,255,255,0.3), 1905px 560px rgba(255,255,255,0.6), 728px 964px rgba(255,255,255,1.0), 2300px 437px rgba(255,255,255,0.75), 1459px 663px rgba(255,255,255,0.6), 1216px 894px rgba(255,255,255,0.3), 353px 896px rgba(255,255,255,0.75), 198px 578px rgba(255,255,255,0.45), 2236px 429px rgba(255,255,255,0.75) !important;
  width: 1px; height: 1px;
  animation: star-drift 240s linear infinite, twinkle-a 4.2s ease-in-out infinite alternate !important;
}
[data-theme="night"] .stars::after {
  box-shadow: 1475px 524px rgba(255,255,255,0.3), 649px 757px rgba(255,255,255,0.75), 972px 783px rgba(255,255,255,0.9), 2332px 838px rgba(255,255,255,0.9), 1732px 186px rgba(255,255,255,0.75), 567px 301px rgba(255,255,255,0.6), 103px 918px rgba(255,255,255,0.45), 1265px 521px rgba(255,255,255,0.3), 1894px 425px rgba(255,255,255,1.0), 1991px 1010px rgba(255,255,255,0.9), 1062px 337px rgba(255,255,255,0.3), 2012px 1404px rgba(255,255,255,0.9), 1025px 482px rgba(255,255,255,0.45), 758px 490px rgba(255,255,255,0.75), 383px 705px rgba(255,255,255,0.6), 2214px 192px rgba(255,255,255,0.9), 799px 348px rgba(255,255,255,0.45), 2120px 1417px rgba(255,255,255,0.3), 1016px 749px rgba(255,255,255,1.0), 2184px 308px rgba(255,255,255,0.9), 2125px 238px rgba(255,255,255,0.3), 1161px 358px rgba(255,255,255,1.0), 1704px 500px rgba(255,255,255,0.45), 1763px 952px rgba(255,255,255,0.3), 1043px 539px rgba(255,255,255,0.45), 999px 371px rgba(255,255,255,0.75), 17px 579px rgba(255,255,255,1.0), 2190px 607px rgba(255,255,255,1.0), 500px 474px rgba(255,255,255,0.3), 1693px 732px rgba(255,255,255,1.0), 1164px 599px rgba(255,255,255,0.45), 2045px 1333px rgba(255,255,255,0.45), 1243px 266px rgba(255,255,255,0.6), 990px 818px rgba(255,255,255,1.0), 177px 1091px rgba(255,255,255,0.6), 1941px 970px rgba(255,255,255,1.0), 845px 569px rgba(255,255,255,1.0), 67px 144px rgba(255,255,255,0.3), 694px 923px rgba(255,255,255,0.75), 44px 1158px rgba(255,255,255,0.9), 1690px 907px rgba(255,255,255,0.75), 1670px 1172px rgba(255,255,255,0.6), 385px 809px rgba(255,255,255,0.6), 818px 254px rgba(255,255,255,0.75), 272px 183px rgba(255,255,255,0.3), 2158px 480px rgba(255,255,255,0.75), 578px 468px rgba(255,255,255,0.9), 1846px 853px rgba(255,255,255,0.6), 2347px 1024px rgba(255,255,255,0.75), 1399px 736px rgba(255,255,255,0.6), 2300px 362px rgba(255,255,255,0.9), 1868px 817px rgba(255,255,255,0.3), 980px 892px rgba(255,255,255,0.45), 36px 597px rgba(255,255,255,1.0), 1332px 722px rgba(255,255,255,0.6), 2234px 415px rgba(255,255,255,0.45), 693px 1435px rgba(255,255,255,0.75), 79px 601px rgba(255,255,255,1.0), 2190px 1142px rgba(255,255,255,0.6), 471px 479px rgba(255,255,255,0.45), 336px 1226px rgba(255,255,255,0.6), 129px 663px rgba(255,255,255,0.75), 741px 478px rgba(255,255,255,1.0), 498px 302px rgba(255,255,255,0.3), 2039px 829px rgba(255,255,255,0.3), 836px 451px rgba(255,255,255,0.75), 1488px 879px rgba(255,255,255,0.45), 1710px 1279px rgba(255,255,255,1.0), 886px 785px rgba(255,255,255,0.3), 2219px 1029px rgba(255,255,255,0.3), 1902px 1004px rgba(255,255,255,1.0), 803px 406px rgba(255,255,255,0.3), 880px 754px rgba(255,255,255,0.6), 1523px 1245px rgba(255,255,255,0.3), 195px 410px rgba(255,255,255,0.75), 1771px 1107px rgba(255,255,255,0.9), 1661px 770px rgba(255,255,255,0.3), 1883px 1061px rgba(255,255,255,0.3), 1013px 573px rgba(255,255,255,0.45), 573px 1043px rgba(255,255,255,0.9), 1113px 791px rgba(255,255,255,0.9), 1698px 828px rgba(255,255,255,1.0), 1339px 455px rgba(255,255,255,1.0), 800px 944px rgba(255,255,255,0.45), 229px 1017px rgba(255,255,255,0.9), 271px 346px rgba(255,255,255,0.45), 587px 320px rgba(255,255,255,1.0), 1852px 997px rgba(255,255,255,0.6), 464px 478px rgba(255,255,255,0.3), 1153px 676px rgba(255,255,255,0.45), 619px 758px rgba(255,255,255,0.3), 559px 1208px rgba(255,255,255,0.6), 2182px 1341px rgba(255,255,255,1.0), 463px 439px rgba(255,255,255,0.6), 2119px 1125px rgba(255,255,255,0.75), 1306px 1231px rgba(255,255,255,0.45), 169px 489px rgba(255,255,255,1.0), 2221px 271px rgba(255,255,255,0.3), 145px 144px rgba(255,255,255,0.45), 350px 1029px rgba(255,255,255,1.0), 555px 337px rgba(255,255,255,0.45), 299px 984px rgba(255,255,255,0.9), 663px 811px rgba(255,255,255,0.3), 465px 344px rgba(255,255,255,0.9), 1852px 986px rgba(255,255,255,0.75), 1653px 520px rgba(255,255,255,0.9), 1064px 517px rgba(255,255,255,0.6), 1846px 865px rgba(255,255,255,1.0), 1772px 413px rgba(255,255,255,0.9), 46px 1099px rgba(255,255,255,0.75), 1105px 368px rgba(255,255,255,0.9), 2299px 532px rgba(255,255,255,0.9), 1454px 1129px rgba(255,255,255,0.75), 876px 295px rgba(255,255,255,0.3), 2008px 452px rgba(255,255,255,0.6), 2288px 1147px rgba(255,255,255,0.75), 905px 945px rgba(255,255,255,0.6), 96px 780px rgba(255,255,255,0.3), 650px 340px rgba(255,255,255,0.6), 2147px 789px rgba(255,255,255,0.45), 450px 633px rgba(255,255,255,0.3), 1119px 496px rgba(255,255,255,1.0), 262px 431px rgba(255,255,255,0.9), 927px 372px rgba(255,255,255,0.45), 1316px 794px rgba(255,255,255,0.75), 355px 308px rgba(255,255,255,0.9), 1826px 203px rgba(255,255,255,0.45), 1306px 516px rgba(255,255,255,0.75), 237px 720px rgba(255,255,255,0.9), 2224px 150px rgba(255,255,255,0.75), 1611px 876px rgba(255,255,255,0.3), 2047px 463px rgba(255,255,255,0.45), 61px 1049px rgba(255,255,255,0.9), 467px 1184px rgba(255,255,255,0.45), 206px 306px rgba(255,255,255,1.0), 1724px 585px rgba(255,255,255,0.45), 1591px 265px rgba(255,255,255,0.6), 1361px 559px rgba(255,255,255,0.9), 794px 743px rgba(255,255,255,1.0), 1379px 314px rgba(255,255,255,0.9), 1123px 760px rgba(255,255,255,0.6), 605px 1263px rgba(255,255,255,0.75), 2256px 814px rgba(255,255,255,0.3), 569px 409px rgba(255,255,255,1.0), 1520px 290px rgba(255,255,255,0.45), 2212px 533px rgba(255,255,255,0.75), 520px 464px rgba(255,255,255,0.45), 1528px 782px rgba(255,255,255,0.45), 1963px 971px rgba(255,255,255,0.3), 2135px 921px rgba(255,255,255,0.6), 820px 500px rgba(255,255,255,0.3), 379px 1335px rgba(255,255,255,1.0), 654px 901px rgba(255,255,255,0.3), 884px 554px rgba(255,255,255,0.45), 780px 664px rgba(255,255,255,0.75), 2067px 977px rgba(255,255,255,0.45), 1015px 1295px rgba(255,255,255,0.45), 2038px 902px rgba(255,255,255,0.45), 840px 523px rgba(255,255,255,0.9), 2356px 652px rgba(255,255,255,0.75), 1155px 536px rgba(255,255,255,0.9), 1682px 474px rgba(255,255,255,0.75), 1652px 591px rgba(255,255,255,1.0), 1879px 397px rgba(255,255,255,0.75), 1400px 367px rgba(255,255,255,0.3), 882px 238px rgba(255,255,255,0.3), 1089px 519px rgba(255,255,255,0.45), 827px 316px rgba(255,255,255,0.75), 62px 788px rgba(255,255,255,0.9), 508px 1176px rgba(255,255,255,0.6), 2328px 108px rgba(255,255,255,0.3), 2392px 675px rgba(255,255,255,0.75), 960px 757px rgba(255,255,255,0.6), 2399px 641px rgba(255,255,255,0.3), 2395px 822px rgba(255,255,255,0.3), 971px 806px rgba(255,255,255,0.45), 342px 959px rgba(255,255,255,0.45), 651px 454px rgba(255,255,255,0.75), 1766px 654px rgba(255,255,255,0.75), 689px 721px rgba(255,255,255,0.3), 2189px 695px rgba(255,255,255,0.45), 1788px 545px rgba(255,255,255,1.0), 2025px 665px rgba(255,255,255,0.9), 1235px 1166px rgba(255,255,255,1.0), 1327px 28px rgba(255,255,255,0.75), 851px 537px rgba(255,255,255,0.6), 1586px 811px rgba(255,255,255,0.75), 2005px 524px rgba(255,255,255,0.75), 2161px 422px rgba(255,255,255,0.75), 1133px 104px rgba(255,255,255,0.45), 901px 791px rgba(255,255,255,0.6), 1163px 970px rgba(255,255,255,0.3), 2120px 1190px rgba(255,255,255,0.3), 1230px 970px rgba(255,255,255,0.6), 34px 277px rgba(255,255,255,0.75), 2073px 583px rgba(255,255,255,0.3), 1413px 298px rgba(255,255,255,0.3), 1457px 910px rgba(255,255,255,1.0), 841px 518px rgba(255,255,255,0.9), 955px 911px rgba(255,255,255,0.45), 120px 546px rgba(255,255,255,0.45), 2039px 260px rgba(255,255,255,1.0), 176px 170px rgba(255,255,255,0.45), 564px 265px rgba(255,255,255,0.75), 1365px 547px rgba(255,255,255,1.0), 1721px 708px rgba(255,255,255,0.45), 1153px 1130px rgba(255,255,255,0.75), 1915px 361px rgba(255,255,255,1.0), 1348px 1165px rgba(255,255,255,0.9), 1974px 994px rgba(255,255,255,0.3), 487px 799px rgba(255,255,255,0.75), 1541px 1065px rgba(255,255,255,0.45), 1065px 757px rgba(255,255,255,0.6), 1265px 429px rgba(255,255,255,0.45), 1918px 493px rgba(255,255,255,1.0), 647px 1194px rgba(255,255,255,0.45), 1472px 858px rgba(255,255,255,0.9), 317px 930px rgba(255,255,255,0.75), 893px 714px rgba(255,255,255,0.45), 1327px 861px rgba(255,255,255,0.9), 1297px 1105px rgba(255,255,255,0.45), 156px 1171px rgba(255,255,255,0.9), 2334px 277px rgba(255,255,255,0.75), 309px 627px rgba(255,255,255,0.6), 737px 919px rgba(255,255,255,1.0), 1979px 171px rgba(255,255,255,1.0), 69px 784px rgba(255,255,255,0.45), 245px 211px rgba(255,255,255,0.45), 97px 523px rgba(255,255,255,1.0), 715px 641px rgba(255,255,255,0.75) !important;
  width: 1.7px; height: 1.7px;
  animation: star-drift 150s linear infinite, twinkle-b 2.9s ease-in-out infinite alternate !important;
}
[data-theme="night"] .stars i {
  box-shadow: 941px 940px rgba(255,255,255,0.45), 378px 269px rgba(255,255,255,0.3), 242px 203px rgba(255,255,255,0.45), 282px 523px rgba(255,255,255,0.9), 1px 186px rgba(255,255,255,0.45), 311px 1106px rgba(255,255,255,0.3), 1777px 518px rgba(255,255,255,1.0), 1448px 1098px rgba(255,255,255,0.45), 2024px 562px rgba(255,255,255,0.75), 915px 350px rgba(255,255,255,1.0), 38px 378px rgba(255,255,255,0.9), 2154px 132px rgba(255,255,255,0.45), 680px 1052px rgba(255,255,255,1.0), 952px 524px rgba(255,255,255,0.9), 1867px 449px rgba(255,255,255,1.0), 1848px 690px rgba(255,255,255,0.3), 1351px 636px rgba(255,255,255,1.0), 1204px 328px rgba(255,255,255,0.6), 1965px 791px rgba(255,255,255,0.75), 1494px 1211px rgba(255,255,255,0.45), 62px 907px rgba(255,255,255,0.9), 1701px 419px rgba(255,255,255,0.9), 1526px 1041px rgba(255,255,255,0.75), 451px 286px rgba(255,255,255,0.9), 2085px 388px rgba(255,255,255,0.9), 2385px 937px rgba(255,255,255,0.3), 2014px 552px rgba(255,255,255,0.6), 1310px 559px rgba(255,255,255,0.6), 1611px 517px rgba(255,255,255,0.9), 1297px 826px rgba(255,255,255,0.6), 869px 1127px rgba(255,255,255,0.3), 567px 939px rgba(255,255,255,0.6), 1516px 677px rgba(255,255,255,0.3), 514px 771px rgba(255,255,255,0.6), 270px 820px rgba(255,255,255,1.0), 2px 1179px rgba(255,255,255,1.0), 2239px 916px rgba(255,255,255,0.45), 334px 520px rgba(255,255,255,0.75), 1988px 331px rgba(255,255,255,1.0), 1011px 1273px rgba(255,255,255,0.75), 1551px 963px rgba(255,255,255,0.3), 1237px 975px rgba(255,255,255,1.0), 1104px 541px rgba(255,255,255,0.45), 413px 941px rgba(255,255,255,0.6), 1783px 640px rgba(255,255,255,0.75), 805px 307px rgba(255,255,255,0.6), 2360px 185px rgba(255,255,255,1.0), 293px 761px rgba(255,255,255,0.3), 1589px 882px rgba(255,255,255,0.3), 842px 165px rgba(255,255,255,0.6), 748px 66px rgba(255,255,255,0.6), 863px 768px rgba(255,255,255,0.9), 1979px 977px rgba(255,255,255,0.9), 1896px 268px rgba(255,255,255,0.9), 75px 707px rgba(255,255,255,0.45), 1052px 699px rgba(255,255,255,0.45), 891px 1039px rgba(255,255,255,0.9), 1616px 468px rgba(255,255,255,0.45), 425px 772px rgba(255,255,255,0.9), 2115px 596px rgba(255,255,255,0.75), 2164px 579px rgba(255,255,255,1.0), 194px 504px rgba(255,255,255,0.9), 766px 1015px rgba(255,255,255,0.9), 532px 482px rgba(255,255,255,0.3), 599px 347px rgba(255,255,255,0.45), 910px 916px rgba(255,255,255,1.0), 2105px 483px rgba(255,255,255,0.3), 926px 1166px rgba(255,255,255,1.0), 1135px 598px rgba(255,255,255,0.6), 2387px 558px rgba(255,255,255,0.3), 1932px 676px rgba(255,255,255,1.0), 942px 450px rgba(255,255,255,1.0), 454px 502px rgba(255,255,255,0.45), 1649px 626px rgba(255,255,255,0.6), 261px 655px rgba(255,255,255,0.6), 1512px 913px rgba(255,255,255,0.3), 2281px 307px rgba(255,255,255,1.0), 1537px 690px rgba(255,255,255,1.0) !important;
  width: 2.3px; height: 2.3px;
  animation: star-drift 92s linear infinite, twinkle-c 1.9s ease-in-out infinite alternate !important;
}

/* deeper twinkle range so they genuinely blink rather than pulse */
@keyframes twinkle-a { 0% { opacity: .18; } 100% { opacity: .85; } }
@keyframes twinkle-b { 0% { opacity: .26; } 100% { opacity: 1; } }
@keyframes twinkle-c { 0% { opacity: .34; } 100% { opacity: 1; } }

/* ---- shooting stars: spread right down the sky ---- */
[data-theme="night"] .stars b:nth-of-type(1) { top: 5%;  animation: shoot-a 13s ease-in infinite; }
[data-theme="night"] .stars b:nth-of-type(2) { top: 21%; animation: shoot-b 19s ease-in infinite; animation-delay: 3s; }
[data-theme="night"] .stars b:nth-of-type(3) { top: 37%; animation: shoot-c 23s ease-in infinite; animation-delay: 9s; }
[data-theme="night"] .stars b:nth-of-type(4) { top: 52%; animation: shoot-a 29s ease-in infinite; animation-delay: 6s; }
[data-theme="night"] .stars b:nth-of-type(5) { top: 12%; animation: shoot-b 17s ease-in infinite; animation-delay: 14s; }
[data-theme="night"] .stars b:nth-of-type(6) { top: 66%; animation: shoot-c 31s ease-in infinite; animation-delay: 2s; }
[data-theme="night"] .stars b:nth-of-type(7) { top: 29%; animation: shoot-a 37s ease-in infinite; animation-delay: 21s; }

/* the sky mask has to reach further down now that stars do */
[data-theme="night"] .stars {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 94%);
}

/* ---- beams: twinklier ----
   A second, faster flicker layered on the existing one. Two
   stutters at different speeds read as light catching haze
   rather than a lamp switching. */
[data-theme="night"] .stagelights::before {
  animation: rig-breathe 29s cubic-bezier(.37,0,.45,1) infinite alternate,
             beam-flicker 7.3s steps(1,end) infinite,
             beam-twinkle 2.1s steps(1,end) infinite !important;
}
[data-theme="night"] .stagelights::after {
  animation: rig-drift 43s cubic-bezier(.42,0,.5,1) infinite alternate,
             beam-flicker-b 11.7s steps(1,end) infinite,
             beam-twinkle 3.4s steps(1,end) infinite !important;
}

@keyframes beam-twinkle {
  0%, 23%   { filter: blur(.7px) brightness(1); }
  24%, 26%  { filter: blur(.7px) brightness(1.55); }
  27%, 49%  { filter: blur(.7px) brightness(.92); }
  50%, 52%  { filter: blur(.7px) brightness(1.4); }
  53%, 71%  { filter: blur(.7px) brightness(1.05); }
  72%, 73%  { filter: blur(.7px) brightness(.8); }
  74%, 88%  { filter: blur(.7px) brightness(1.3); }
  89%, 100% { filter: blur(.7px) brightness(1); }
}

[data-theme="night"] .stagelights { opacity: .24; }
[data-theme="night"] .hero-home .stagelights { opacity: .3; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="night"] .stagelights::before,
  [data-theme="night"] .stagelights::after,
  [data-theme="night"] .stars::before,
  [data-theme="night"] .stars::after,
  [data-theme="night"] .stars i,
  [data-theme="night"] .stars b { animation: none !important; }
}

/* ==========================================================
   EDITIONS — other years of the same festival
   ========================================================== */

.ed-row { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.ed-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: var(--border-w) solid var(--line);
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  color: var(--ink); background: var(--bg);
}
[data-theme="day"] .ed-chip { border-width: 2px; border-radius: 0; background: #fff; }
.ed-chip:hover { border-color: var(--accent); color: var(--accent); }
.ed-chip.is-current {
  background: var(--accent); color: var(--btn-fg); border-color: transparent;
}
[data-theme="day"] .ed-chip.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.ed-chip em {
  font-style: normal; font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; opacity: .8;
}

/* a long lineup needs to stay scannable */
.lineup { gap: 8px; }
.artist { font-size: .86rem; padding: 7px 13px; }
.artist-head { font-size: .95rem; padding: 9px 17px; }

/* ==========================================================
   LINEUP BY DAY
   ========================================================== */

.lineup-day {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); margin: 24px 0 12px;
  padding-bottom: 8px; border-bottom: var(--border-w) solid var(--line);
}
.lineup-day:first-of-type { margin-top: 6px; }
[data-theme="day"] .lineup-day { border-bottom-width: 2px; color: #0A0A0A; }
.lineup-day span {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  color: var(--muted); margin-left: auto;
}
.lineup-count {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.lineup { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.artist { font-size: .84rem; padding: 7px 12px; }
.artist-head { font-size: .94rem; padding: 8px 16px; font-weight: 700; }

@media (max-width: 640px) {
  .lineup-day span { margin-left: 0; width: 100%; }
  .artist { font-size: .8rem; padding: 6px 10px; }
}

/* ==========================================================
   EXPERIENCE LEVEL
   ========================================================== */

.level {
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 20px;
}
[data-theme="day"] .level {
  border-width: 2px; border-left-width: 6px; border-radius: 0;
  background: #fff; box-shadow: var(--shadow-sm);
}
.lv-beginner     { border-left-color: var(--neon-green); }
.lv-intermediate { border-left-color: var(--accent); }
.lv-seasoned     { border-left-color: var(--neon-pink); }

.lv-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.lv-kind {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
}
.lv-verdict {
  font-family: var(--display); font-weight: 700;
  font-size: 1.16rem; letter-spacing: -.02em; color: var(--ink);
}
.lv-scale { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.lv-step {
  flex: 1 1 0; min-width: 90px; text-align: center;
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 7px 6px; border-radius: 999px;
  border: var(--border-w) solid var(--line); color: var(--muted);
  background: var(--bg);
}
[data-theme="day"] .lv-step { border-width: 2px; border-radius: 0; background: #fff; }
.lv-beginner     .lv-step.is-on { background: var(--neon-green); color: #0A0A0A; border-color: transparent; }
.lv-intermediate .lv-step.is-on { background: var(--accent); color: var(--btn-fg); border-color: transparent; }
.lv-seasoned     .lv-step.is-on { background: var(--neon-pink); color: #0A0A0A; border-color: transparent; }
[data-theme="day"] .lv-step.is-on { border: 2px solid var(--ink); }
.lv-note { font-size: .89rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* ==========================================================
   AMENITIES
   ========================================================== */

.amenities {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.am-group {
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: 14px; padding: 16px 18px;
}
[data-theme="day"] .am-group {
  border-width: 2px; border-radius: 0; background: #fff; box-shadow: var(--shadow-sm);
}
.am-group h3 {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted); margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
[data-theme="day"] .am-group h3 { color: var(--ink); border-bottom: 2px solid var(--line); }
.am-list { list-style: none; margin: 0; padding: 0; }
.am-list li {
  position: relative; padding-left: 22px; margin-bottom: 7px;
  font-size: .89rem; color: var(--ink-soft); line-height: 1.45;
}
.am-list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 6px; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
[data-theme="day"] .am-list li::before { border-color: #0D9488; }

/* admin amenity checkboxes */
.am-edit { margin-bottom: 18px; }
.am-edit h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: #64748B; margin: 0 0 10px;
}
.am-grid {
  display: grid; gap: 4px 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.am-grid .ad-check { margin-bottom: 4px; font-size: .88rem; font-weight: 500; }

/* article figures inserted by the editor */
.article-figure { margin: 26px 0; }
.article-figure img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: var(--border-w) solid var(--line);
}
[data-theme="day"] .article-figure img { border-width: 2px; border-radius: 0; }
.byline-role {
  display: inline-block; margin-left: 8px;
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
}

/* ==========================================================
   CARDS WITH IMAGES
   ========================================================== */

.card.has-thumb { padding: 0; overflow: hidden; position: relative; }
.card.has-thumb .card-body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.card:not(.has-thumb) .card-body { display: flex; flex-direction: column; flex: 1; }

.card-thumb { display: block; position: relative; }
.card-thumb img {
  width: 100%; height: 160px; object-fit: cover; display: block;
  border-bottom: var(--border-w) solid var(--line);
}
[data-theme="day"] .card-thumb img { border-bottom-width: 2px; }
/* a logo needs breathing room and a field behind it, not a crop */
.card-thumb.is-logo {
  background: var(--bg-3); display: grid; place-items: center;
  border-bottom: var(--border-w) solid var(--line);
}
[data-theme="day"] .card-thumb.is-logo { background: #F1F5F9; border-bottom-width: 2px; }
.card-thumb.is-logo img {
  width: auto; max-width: 62%; height: 120px; object-fit: contain;
  border: 0; padding: 18px 0;
}

.card-level {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: var(--display); font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 5px 10px; border-radius: 999px;
  background: var(--bg); color: var(--ink);
  border: var(--border-w) solid var(--line);
}
[data-theme="day"] .card-level { border-width: 2px; border-radius: 0; background: #fff; }
.card-level.lv-beginner     { background: var(--neon-green); color: #0A0A0A; border-color: transparent; }
.card-level.lv-intermediate { background: var(--accent); color: var(--btn-fg); border-color: transparent; }
.card-level.lv-seasoned     { background: var(--neon-pink); color: #0A0A0A; border-color: transparent; }
[data-theme="day"] .card-level { border: 2px solid #0A0A0A; }

/* ---- featured cards with thumbnails ---- */
.feat-card.has-thumb { padding: 0; overflow: hidden; }
.feat-card.has-thumb .feat-body {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px;
}
.feat-card:not(.has-thumb) .feat-body { display: flex; flex-direction: column; gap: 9px; }
.feat-thumb { display: block; }
.feat-thumb img {
  width: 100%; height: 132px; object-fit: cover; display: block;
  border-bottom: var(--border-w) solid var(--line);
}
[data-theme="day"] .feat-thumb img { border-bottom-width: 2px; }

@media (max-width: 640px) {
  .card-thumb img { height: 140px; }
  .feat-thumb img { height: 116px; }
}

/* ---- admin image rows ---- */

/* ==========================================================
   PRODUCER LINE
   ========================================================== */

.producer-line {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 16px 0 0; font-family: var(--display); font-size: .84rem;
}
.producer-line span {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--muted);
}
.producer-line a {
  font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--accent); padding-bottom: 1px;
}
.producer-line a:hover { color: var(--accent); }
.producer-line .prod-site {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  border-bottom: 0; letter-spacing: .04em;
}
.producer-line .prod-site:hover { color: var(--accent); }

/* ==========================================================
   FRAME & FREQUENCY GALLERY
   A corridor you scroll sideways. Frames sit on the left and
   right walls, angled toward you, with a spotlight above each
   and a brass plaque underneath. The floor and ceiling run to
   a vanishing point so the hall reads as endless.
   ========================================================== */

.hall {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  padding: 0;
  background:
    linear-gradient(to bottom,
      #0A0710 0%, #14101F 26%, #1A1626 50%, #14101F 74%, #0A0710 100%);
  border-top: var(--border-w) solid var(--line);
  border-bottom: var(--border-w) solid var(--line);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
[data-theme="day"] .hall {
  background: linear-gradient(to bottom, #E8E6E1 0%, #F4F2EE 30%, #FAF9F7 50%, #F4F2EE 70%, #E8E6E1 100%);
  border-width: 2px;
}

/* floor and ceiling converging on a vanishing point */
.hall-floor, .hall-ceiling {
  position: absolute; left: 0; right: 0; height: 26%;
  pointer-events: none; z-index: 0;
}
.hall-floor {
  bottom: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.55), transparent),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.028) 0 2px, transparent 2px 120px);
}
.hall-ceiling {
  top: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5), transparent),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.02) 0 2px, transparent 2px 120px);
}
[data-theme="day"] .hall-floor { background: linear-gradient(to top, rgba(10,10,10,.12), transparent); }
[data-theme="day"] .hall-ceiling { background: linear-gradient(to bottom, rgba(10,10,10,.08), transparent); }

.hall-rail {
  display: flex; align-items: center; gap: clamp(30px, 6vw, 90px);
  padding: 60px clamp(24px, 8vw, 140px);
  min-height: clamp(460px, 62vh, 620px);
  perspective: 1400px;
  position: relative; z-index: 1;
}

/* ---- a hung frame ---- */
.frame {
  position: relative; flex: 0 0 auto;
  margin: 0; scroll-snap-align: center;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.frame-left  { transform: rotateY(12deg)  translateY(-18px); }
.frame-right { transform: rotateY(-12deg) translateY(18px); }
.frame:hover { transform: rotateY(0deg) translateY(0) scale(1.03); z-index: 3; }

/* the mat and moulding */
.frame-mat {
  display: block; padding: clamp(12px, 1.6vw, 22px);
  background: linear-gradient(160deg, #F7F4EC, #E6E1D4);
  border: clamp(8px, 1.1vw, 14px) solid #2A2118;
  border-radius: 2px;
  box-shadow:
    0 26px 50px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 2px 0 rgba(255,255,255,.14) inset;
}
[data-theme="day"] .frame-mat {
  border-color: #1A1410;
  box-shadow: 0 18px 34px rgba(10,10,10,.28), 0 0 0 1px rgba(0,0,0,.06) inset;
}
.frame-mat img {
  display: block;
  width: clamp(200px, 28vw, 380px);
  height: clamp(150px, 21vw, 285px);
  object-fit: cover;
  background: #0A0710;
}
.frame.is-featured .frame-mat {
  border-color: #6B5A2E;
  box-shadow: 0 26px 56px rgba(0,0,0,.66), 0 0 40px -6px rgba(212,175,85,.45);
}

/* a picture light above each frame */
.frame-light {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 72%; height: 120%; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(255,238,200,.32) 0%, rgba(255,238,200,.10) 40%, transparent 72%);
}
[data-theme="day"] .frame-light { opacity: .35; }

/* brass plaque */
.plaque {
  margin: 16px auto 0; max-width: 92%;
  padding: 9px 14px; text-align: center;
  background: linear-gradient(160deg, #C9A227, #8A6E1B);
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.3) inset;
}
.plaque-cap {
  display: block; font-family: var(--display); font-size: .78rem;
  font-weight: 700; color: #1A1408; line-height: 1.3;
}
.plaque-by {
  display: block; margin-top: 3px;
  font-family: var(--display); font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: #3A2E0E;
}
.plaque-by a { color: #3A2E0E; border-bottom: 1px solid rgba(58,46,14,.4); }
.plaque-by a:hover { color: #1A1408; }

.hall-empty {
  margin: auto; color: var(--ink-soft); font-size: 1.05rem; text-align: center;
}
.hall-empty a { border-bottom: 2px solid var(--accent); }

.hall-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 26px 22px 40px;
}
.hall-foot p { margin: 0; color: var(--muted); font-size: .9rem; }

/* submission form */
.g-grid {
  display: grid; gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.join-form input[type="file"],
.join-form select {
  width: 100%; padding: 11px 13px; margin-bottom: 16px;
  background: var(--bg); color: var(--ink);
  border: var(--border-w) solid var(--line); border-radius: 10px;
  font-family: var(--body); font-size: .94rem;
}
[data-theme="day"] .join-form input[type="file"],
[data-theme="day"] .join-form select { border-width: 2px; border-radius: 0; background: #fff; }
.join-form input[type="text"],
.join-form input[type="email"] {
  width: 100%; padding: 12px 14px; margin-bottom: 16px;
  background: var(--bg); color: var(--ink);
  border: var(--border-w) solid var(--line); border-radius: 10px;
  font-family: var(--body); font-size: .96rem;
}
[data-theme="day"] .join-form input[type="text"],
[data-theme="day"] .join-form input[type="email"] { border-width: 2px; border-radius: 0; background: #fff; }
.g-check {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 6px 0 20px; font-size: .88rem; color: var(--ink-soft);
  line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.g-check input { width: auto; margin: 3px 0 0; flex-shrink: 0; }

@media (max-width: 640px) {
  .hall-rail { padding: 40px 20px; gap: 26px; min-height: 420px; perspective: 900px; }
  .frame-left, .frame-right { transform: none; }
  .frame-mat img { width: 240px; height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .frame { transition: none; }
}

/* ==========================================================
   ACCOMMODATION
   ========================================================== */

.stay-intro { color: var(--ink-soft); font-size: .95rem; margin: 0 0 18px; }

.hotels {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.hotels-full { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.hotel {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: 16px; overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
  color: var(--ink);
}
[data-theme="day"] .hotel {
  border-width: 2px; border-radius: 0; background: #fff; box-shadow: var(--shadow-sm);
}
a.hotel:hover { transform: translateY(-3px); color: var(--ink); }
[data-theme="night"] a.hotel:hover { border-color: var(--lz-cyan); }
[data-theme="day"] a.hotel:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }

.hot-shot { display: block; }
.hot-shot img {
  width: 100%; height: 150px; object-fit: cover; display: block;
  border-bottom: var(--border-w) solid var(--line);
}
[data-theme="day"] .hot-shot img { border-bottom-width: 2px; }
.hot-shot.is-blank {
  display: block; height: 150px;
  background: linear-gradient(135deg, var(--bg-3), var(--bg));
  border-bottom: var(--border-w) solid var(--line);
}

.hot-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.hot-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.hot-name {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  line-height: 1.25; letter-spacing: -.01em;
}
.hot-stars {
  font-size: .78rem; font-weight: 700; color: var(--gold, #C9A227);
  white-space: nowrap; flex-shrink: 0;
}
.hot-meta {
  font-family: var(--display); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.hot-note { font-size: .84rem; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.45; }
.hot-cta {
  margin-top: auto; padding-top: 12px;
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  color: var(--accent);
}
a.hotel:hover .hot-cta { text-decoration: underline; }
[data-theme="day"] .hot-cta { color: #0A0A0A; }

.stay-more { margin-top: 16px; }

/* the dated search box */
.stay-search {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: 16px; padding: 22px 24px; margin-bottom: 28px;
}
[data-theme="day"] .stay-search {
  border-width: 2px; border-radius: 0; background: #fff; box-shadow: var(--shadow);
}
.stay-search-copy { flex: 1 1 260px; min-width: 0; }
.stay-search h3 { margin: 0 0 5px; font-size: 1.1rem; }
.stay-search p { margin: 0; font-size: .88rem; color: var(--ink-soft); }

.stay-tips { padding-left: 20px; }
.stay-tips li { font-size: .92rem; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.55; }

.stay-disclosure {
  font-size: .8rem; color: var(--muted); line-height: 1.55;
  border-top: var(--border-w) solid var(--line);
  padding-top: 14px; margin-top: 24px;
}
[data-theme="day"] .stay-disclosure { border-top-width: 2px; }

@media (max-width: 640px) {
  .hotels { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  .hot-shot img, .hot-shot.is-blank { height: 120px; }
  .stay-search { padding: 18px; }
}

/* ==========================================================
   HIDDEN FESTIVAL PREVIEW (only ever seen by a signed-in admin)
   ========================================================== */
.preview-banner{position:relative;z-index:5;background:#FEF3C7;color:#78350F;
  padding:12px 20px;text-align:center;font-size:.92rem;border-bottom:2px solid #F59E0B}
.preview-banner a{color:#78350F;font-weight:700;text-decoration:underline}

/* ==========================================================
   IMAGE CREDITS (required by Creative Commons licences)
   ========================================================== */
.credits-block { padding-top: 0; }
.credits-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 8px; }
.credits { list-style: none; margin: 0; padding: 0; font-size: .78rem; line-height: 1.6; color: var(--muted); }
.credits span { font-weight: 600; }
.credits a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.credits a:hover { color: var(--accent); }
.credits-note { font-size: .72rem; color: var(--muted); margin: 6px 0 0; opacity: .8; }