/* =========================================================
   NashvilleTN LIVE — base.css, the shared design system.

   The NashvilleTN Concierge design, applied to the whole site:
   navy grounds, cream type, Archivo 800–900 at 112% width for
   headlines, Geist for reading and Geist Mono for the small
   uppercase labels.

   Loaded first on every page. It holds what every page shares:
   the tokens, the reset, type, buttons, tags, the header and its
   Concierge menu, the forms the newsletter uses, the footer, the
   newsletter band and slide-in, the toast and the scroll reveal.

     assets/css/concierge.css   the Concierge section's pages
     styles.css                 the LIVE pages (the desk, the
                                boards, events, coverage,
                                livestreams, partner, merch)

   House rules
   · Green is the highlight and means "do this". Inside Bach HQ
     the job goes to pink. (The tokens keep their gold names:
     --gold is the highlight as type, --gold-fill as a fill.) The
     Concierge keeps its gold: see the block after night and day.
   · The colored words in a headline stay upright. No italics.
   · "Happening now" is the green with the pulsing dot.
   · The top of every page is clean. No paid placement sits
     above the first scroll; paid stories live in the feed,
     look like everything else, and say "Sponsored".
   · Hairlines and soft glows, not heavy shadows. Motion only
     where it explains.
   ========================================================= */

:root {
  --ink: #08090B;        /* the deepest night: under heroes and photographs, and the type on the highlight fill */
  /* The highlight as a fill (buttons, pills, stickers) is the same bright
     green on both grounds. As type it is --gold, which deepens by day. The
     names are the gold they used to be. */
  --site-fill: #4ADE9B;   /* the site's green itself: the Concierge scope re-points the --gold-* names, never these */
  --site-fill-hi: #7DE9B8;
  --site-rgb: 74, 222, 155;
  --gold-fill: var(--site-fill);
  --gold-fill-hi: var(--site-fill-hi);
  --gold-rgb: var(--site-rgb); /* --gold-fill's channels: translucent fills, lines and glows */
  --poster-stock: #F1E4C6;
  --poster-red: #D9352A;

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --poster: "Antonio", "Arial Narrow", Impact, sans-serif;
  --slab: "Ultra", "Rockwell Extra Bold", Rockwell, Georgia, serif;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dots: radial-gradient(circle, rgba(125, 233, 184, .6) 1.4px, transparent 2px);

  --max: 1240px;
  --gut: clamp(18px, 4vw, 36px);
  --r: 18px;
  --r-sm: 12px;
  --r-lg: 26px;
  --hdr: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* "do this" */
  --go: var(--gold-fill);
  --go-hi: var(--gold-fill-hi);
  --on-go: var(--ink);
  --go-glow: rgba(74, 222, 155, .5);
}

/* ---------- night and day ----------
   Night is the design. Day is the same site on cream paper, chosen with
   the switch in the footer and remembered by the browser; the first
   script in the header applies it before anything paints.

   Every colour a component takes from its ground comes from the set
   below, and translucent hairlines and fills are cut from --hl (white by
   night, ink by day) as rgba(var(--hl), a). --deep is the deepest ground
   of either (the footer, the bands, the mastheads); --ink is always the
   night ink, for scrims on photographs and for type on gold.

   Photographs and video keep their night by day: the photo mastheads and
   heroes, the photo panels, the story cards, the player, video frames,
   merch mockups and the livestreams page's dark room are listed in the
   second selector,
   re-declare the night set, and everything inside them reads exactly as
   it does at night. Anything new that sits on a photograph joins that
   list or takes the .night class. */
:root,
:root[data-theme="light"] :is(.night, .mast, .bach-promo, .hero:has(> .hero-bg), .panel:has(> img), .cpanel, .story:not(.story-cta):where(a), .player, .frame, .merch-frame, .merch-drop-media, .watch-band) {
  color-scheme: dark;
  --hl: 255, 255, 255;
  --deep: #08090B;       /* the footer, the Concierge bar, the newsletter band */
  --bg: #0C0D10;         /* the page */
  --bg-rgb: 12, 13, 16;
  --surface: #141619;    /* cards */
  --surface-rgb: 20, 22, 25;
  --surface-2: #141619;  /* big panels: the planner, the clock */
  --surface-hi: #191B1F; /* a card under the pointer */
  --band: rgba(12, 13, 16, .6);
  --field: rgba(8, 9, 11, .6);
  --well: rgba(8, 9, 11, .4);
  --fill: rgba(var(--hl), .05);
  --fill-2: rgba(var(--hl), .08);
  --line: rgba(var(--hl), .08);
  --line-2: rgba(var(--hl), .15);
  --line-hi: rgba(var(--hl), .3);

  --text: #F3EFE5;
  --text-rgb: 243, 239, 229;
  --text-hi: #FFFFFF;
  --text-2: #AEB6C4;
  --text-3: #7C8698;
  --text-body: #C9CFDA;
  --text-lede: #D9DEE7;

  --gold: #4ADE9B;
  --gold-hi: #7DE9B8;
  --pink: #FF4FA3;
  --pink-hi: #FF74B6;
  --live: #4ADE9B;
  --on-live: var(--ink);
  --red: #FF4D4D;
  --error: #FF7A7A;
  /* eyebrows and the colored words in a headline */
  --accent: var(--gold);

  --shadow: 0 28px 50px -26px rgba(0, 0, 0, .8);
  --shadow-pop: 0 24px 50px -20px rgba(0, 0, 0, .8);
  --shadow-float: 0 30px 80px -24px rgba(0, 0, 0, .9);

  /* The LIVE sheet's Ver 8 names (styles.css), on the same palette. Read
     --cream as "the page" and --mint as "the call to action". */
  --cream: var(--bg);
  --card-border: var(--line);
  --surface-lift: var(--surface-hi);
  --row-div: rgba(var(--hl), .07);
  --media-bg: rgba(var(--hl), .05);
  --chip-on: rgba(var(--hl), .08);
  --muted: var(--text-3);
  --mint: var(--gold);
  --link: var(--gold);
  --amber: var(--gold);
  --amber-soft: var(--gold);
  --amber-ink: var(--gold-hi);
  --danger: var(--error);
  --lift: var(--shadow);
  /* LIVE's panel family: the rails, schedules, fact lists and CTA cards */
  --ink-panel: #131519;
  --ink-panel-hi: #181A1E;
  --ink-hair: rgba(var(--hl), .07);
  --ink-row: rgba(var(--hl), .06);
  --ink-border: rgba(var(--hl), .15);
  --ink-frame: rgba(var(--hl), .1);
  --on-ink: #F3EFE5;
  --on-ink-body: #AEB6C4;
  --on-ink-body-2: #C9CFDA;
  --on-ink-mute: #7C8698;
  --on-ink-dim: #7C8698;
}
:root[data-theme="light"] {
  color-scheme: light;
  --hl: 12, 17, 26;
  --deep: #EAE4D6;
  --bg: #F4F0E6;
  --bg-rgb: 244, 240, 230;
  --surface: #FFFDF8;
  --surface-rgb: 255, 253, 248;
  --surface-2: #FAF7F0;
  --surface-hi: #FFFFFF;
  --band: #EDE7DA;
  --field: #FFFFFF;
  --well: rgba(12, 17, 26, .05);
  --line: rgba(var(--hl), .11);
  --line-2: rgba(var(--hl), .2);
  --line-hi: rgba(var(--hl), .38);

  --text: #0C121B;
  --text-rgb: 12, 18, 27;
  --text-hi: #000000;
  --text-2: #3D4656;
  --text-3: #545C6C;
  --text-body: #2A313D;
  --text-lede: #222935;

  /* type-weight colours: each clears 4.5:1 on the page and on --deep */
  --gold: #0A7044;
  --gold-hi: #075E38;
  --pink: #C4166F;
  --pink-hi: #A30F5B;
  --live: #0B7A4A;
  --on-live: #FFFFFF;
  --red: #C62828;
  --error: #B42318;

  --shadow: 0 26px 44px -26px rgba(12, 17, 26, .3);
  --shadow-pop: 0 24px 48px -22px rgba(12, 17, 26, .28);
  --shadow-float: 0 30px 70px -28px rgba(12, 17, 26, .35);

  --ink-panel: #FFFDF8;
  --ink-panel-hi: #FFFFFF;
  --on-ink: #0C121B;
  --on-ink-body: #3D4656;
  --on-ink-body-2: #2A313D;
  --on-ink-mute: #545C6C;
  --on-ink-dim: #545C6C;
}
/* Bach HQ's pink, inside a night band on a day page. */
:root[data-theme="light"] .bach :is(.night, .mast, .bach-promo, .hero:has(> .hero-bg), .panel:has(> img), .cpanel, .story:not(.story-cta):where(a), .player, .frame, .merch-frame, .merch-drop-media, .watch-band),
:root[data-theme="light"] .bach:is(.night, .mast, .bach-promo, .hero:has(> .hero-bg), .panel:has(> img), .cpanel, .story:not(.story-cta):where(a), .player, .frame, .merch-frame, .merch-drop-media, .watch-band) {
  --accent: var(--pink);
  --go: var(--pink);
  --go-hi: var(--pink-hi);
  --go-glow: rgba(255, 79, 163, .7);
  --gold: var(--pink);
  --gold-hi: var(--pink-hi);
  --gold-rgb: 255, 79, 163;
}

/* The Concierge keeps its gold. Green is the site's highlight; the seven
   Concierge pages, the Concierge menu in the header and the Concierge board
   on the homepage point the same tokens back at the gold the section
   shipped with, so everything that reads them follows. Today and the 404
   load concierge.css but are not the section, so they stay green. */
:root:has(> body:is([data-page="concierge"], [data-page="plan"], [data-page="eat-drink"], [data-page="stay"], [data-page="things-to-do"], [data-page="bach-hq"], [data-page="book-it"])),
.nav-group-concierge, .cboard {
  --gold-fill: #E8AD3B;
  --gold-fill-hi: #F3C55F;
  --gold-rgb: 232, 173, 59;
  --gold: #E8AD3B;
  --gold-hi: #F3C55F;
  --go-glow: rgba(232, 173, 59, .5);
  --dots: radial-gradient(circle, rgba(243, 197, 95, .6) 1.4px, transparent 2px);
}
/* Gold as type deepens by day, the way the green does. */
:root[data-theme="light"]:has(> body:is([data-page="concierge"], [data-page="plan"], [data-page="eat-drink"], [data-page="stay"], [data-page="things-to-do"], [data-page="bach-hq"], [data-page="book-it"])),
:root[data-theme="light"] :is(.nav-group-concierge, .cboard) {
  --gold: #8A5A06;
  --gold-hi: #6F4805;
}
/* Photo bands re-declare the night set by day (above), green and all, so on
   Concierge pages they take the night gold back. Bach HQ's bands keep pink. */
:root[data-theme="light"]:has(> body:is([data-page="concierge"], [data-page="plan"], [data-page="eat-drink"], [data-page="stay"], [data-page="things-to-do"], [data-page="bach-hq"], [data-page="book-it"])) :is(.night, .mast, .bach-promo, .hero:has(> .hero-bg), .panel:has(> img), .cpanel, .story:not(.story-cta):where(a), .player, .frame, .merch-frame, .merch-drop-media, .watch-band):not(.bach, .bach *) {
  --gold: #E8AD3B;
  --gold-hi: #F3C55F;
}
/* A component scope does not re-derive what :root already worked out from
   the green, so the board derives its own. */
.cboard {
  --accent: var(--gold); --go: var(--gold-fill); --go-hi: var(--gold-fill-hi);
  --mint: var(--gold); --link: var(--gold); --amber: var(--gold); --amber-soft: var(--gold); --amber-ink: var(--gold-hi);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--gold) 32%, transparent); color: var(--text); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--mono); font-size: .88em; background: var(--fill-2); padding: 1px 6px; border-radius: 6px; }
.page { overflow-x: clip; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold-fill); color: var(--ink);
  padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px;
}
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ---------- type ---------- */

.display {
  font-family: var(--display); font-weight: 900; font-stretch: 112%;
  font-size: clamp(42px, 6.4vw, 86px); line-height: .92; letter-spacing: -.02em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(30px, 4.2vw, 52px); line-height: .98; letter-spacing: -.02em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(19px, 1.7vw, 23px); line-height: 1.15; letter-spacing: -.02em;
}
/* the colored words in a headline: same face, upright */
h1 em, h2 em, h3 em, .display em, .h2 em { font-style: normal; color: var(--accent); }
.label {
  font-family: var(--mono); font-weight: 400; font-size: 11px; line-height: 1.35;
  letter-spacing: .2em; text-transform: uppercase;
}
.lede { font-size: clamp(16.5px, 1.4vw, 18px); line-height: 1.62; color: var(--text-2); max-width: 58ch; }
.muted { color: var(--text-3); }
.fine { font-size: 13px; line-height: 1.55; color: var(--text-3); }
.tnum { font-variant-numeric: tabular-nums; }
em.opt-note { font-style: normal; color: var(--text-3); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* The eyebrow over a section heading: a short rule, then the
   label in the accent color. Labels that carry their own dot
   or icon skip the rule. */
:is(.sh-copy, .mast-in, .hero-copy, .nl-copy, .stack, .send-copy, .plan-intro, .aside-card) > .label,
.label-go { color: var(--accent); display: inline-flex; align-items: center; gap: 12px; }
:is(.sh-copy, .mast-in, .hero-copy, .nl-copy, .stack, .send-copy, .plan-intro) > .label:not(:has(svg, .dot-live, .rule))::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; flex: none;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1;
  letter-spacing: -.01em; white-space: nowrap;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s var(--ease), box-shadow .2s;
}
.btn .ic { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.btn:hover .ic-arrow, .btn:hover .ic:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-go { background: var(--go); color: var(--on-go); box-shadow: 0 8px 30px -12px var(--go-glow); }
.btn-go:hover { background: var(--go-hi); box-shadow: 0 12px 34px -8px var(--go-glow); }
.btn-line { border-color: var(--line-2); color: rgba(var(--text-rgb), .88); background: transparent; }
.btn-line:hover { border-color: var(--line-hi); background: var(--fill); color: var(--text); }
.btn-ink { background: var(--text); color: var(--bg); }
.btn-ink:hover { background: var(--text-hi); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn-xl { min-height: 62px; padding: 0 32px; font-size: 17.5px; }
.btn-xl .ic { width: 19px; height: 19px; }
.btn-block { width: 100%; }
.btn-pill { border-radius: 999px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em; background: none; border: 0; padding: 0 0 3px;
  font-weight: 600; font-size: 14.5px; color: var(--text);
  border-bottom: 1px solid var(--line-2); transition: border-color .15s, color .15s;
}
.link-arrow:hover { border-color: var(--accent); }
.link-arrow .ic { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.link-arrow:hover .ic { transform: translateX(2px); }

.ic { width: 20px; height: 20px; flex: none; }
.tristar { width: 1.2em; height: 1.05em; flex: none; }

/* ---------- tags ---------- */

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent;
  font-family: var(--mono); font-weight: 500; font-size: 10px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap;
}
button.tag { cursor: pointer; }
button.tag:hover { border-color: var(--text-2); color: var(--text); }
.tag-sponsored { color: var(--text-3); }
.tag-partner { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--ink); }
.tag-featured { background: rgba(var(--gold-rgb), .1); border-color: rgba(var(--gold-rgb), .35); color: var(--gold); }
.tag-original { background: var(--text); border-color: var(--text); color: var(--bg); }
.tag-live, .tag-soon, .tag-done { border-color: transparent; padding-left: 0; padding-right: 0; }
.tag-live { color: var(--live); }
.tag-soon { color: var(--text); }
.tag-done { color: var(--text-3); }
.tag-live::before, .dot-live {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none;
  box-shadow: 0 0 0 0 rgba(74, 222, 155, .6); animation: pulse 2s infinite;
}
.price-free { color: var(--gold); font-weight: 600; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 155, .55); }
  70% { box-shadow: 0 0 0 7px rgba(74, 222, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 155, 0); }
}

/* ---------- header ----------
   LIVE's bar: the cream wordmark, the sections as quiet slate
   pills with the current one underlined in gold, then the two
   actions at the right: Partner with us, and the gold Join the
   Newsletter. The gold stays gold on Bach HQ too.

   One size for the whole bar, 14px Geist. The links sit at 500
   so the buttons (600) read as the actions. The current page
   changes colour and gains the underline but never weight, so
   nothing in the row moves as a reader goes from page to page. */

.hdr { position: sticky; top: 0; z-index: 50; background: rgba(var(--bg-rgb), .95); color: var(--text); border-bottom: 1px solid rgba(var(--hl), .07); }
@supports (backdrop-filter: blur(1px)) { .hdr { background: rgba(var(--bg-rgb), .8); backdrop-filter: saturate(160%) blur(16px); } }
.hdr-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); height: var(--hdr); display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.brand img { height: 38px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
/* Nav links sit at the right, just ahead of the buttons. */
.nav { --nav-x: 12px; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--nav-x); border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: -.005em;
  color: var(--text-2); white-space: nowrap; transition: color .15s, background-color .15s;
}
.nav a:hover { color: var(--text); background: var(--fill); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--nav-x); right: var(--nav-x); bottom: calc((var(--hdr) - 36px) / -2);
  height: 2px; border-radius: 2px 2px 0 0; background: var(--gold);
}
/* A control with a menu under it: the link is the section front, the caret opens the rest. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group > .nav-top { padding-right: 2px; }
.nav-group:has(.nav-sub [aria-current="page"]) > .nav-top { color: var(--text); }
.nav-group:has(.nav-sub [aria-current="page"]) > .nav-top::after {
  content: ""; position: absolute; left: var(--nav-x); right: 2px; bottom: calc((var(--hdr) - 36px) / -2);
  height: 2px; border-radius: 2px 2px 0 0; background: var(--gold);
}
.nav-group > .nav-top[aria-current="page"]::after { right: 2px; }
.nav-caret { display: grid; place-items: center; width: 22px; height: 36px; margin-right: 2px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; }
.nav-caret .ic { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav-caret:hover { color: var(--text); }
.nav-sub {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 270px; display: grid; gap: 2px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s var(--ease), visibility 0s .15s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub, .nav-group.is-open .nav-sub {
  opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s var(--ease);
}
.nav-group:hover .nav-caret .ic, .nav-group.is-open .nav-caret .ic { transform: rotate(180deg); }
.nav .nav-sub a { display: grid; gap: 4px; height: auto; padding: 11px 12px; border-radius: 8px; font-size: 14px; line-height: 1.2; color: var(--text); white-space: normal; }
.nav .nav-sub a small { font-size: 12.5px; line-height: 1.35; letter-spacing: 0; color: var(--text-3); font-weight: 400; }
.nav .nav-sub a:hover { background: var(--fill-2); }
.nav .nav-sub a[aria-current="page"] { background: var(--fill); box-shadow: inset 2px 0 0 var(--gold); }
.nav .nav-sub a[aria-current="page"]::after { display: none; }
/* The two actions live at the right of the bar. When the bar folds into the
   menu and there is no room left for one of them, its copy in the menu shows
   instead, as a full-width button at the foot of the list. */
.nav .nav-cta { display: none; }
.hdr-actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* The newsletter button is the site's green on every page, the Concierge's included. */
.hdr-cta { --go: var(--site-fill); --go-hi: var(--site-fill-hi); --on-go: var(--ink); --go-glow: rgba(var(--site-rgb), .45); }
.hdr-partner[aria-current="page"] { border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold-hi); }
.nav-btn {
  display: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2);
  background: transparent; color: var(--text); font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: -.005em;
}
.nav-btn:hover { border-color: var(--line-hi); background: var(--fill); }

/* Narrower desktops: the same bar, set closer. */
@media (max-width: 1240px) {
  .hdr-in { gap: 16px; }
  .nav { --nav-x: 10px; }
}
@media (max-width: 1180px) {
  .hdr-in { gap: 14px; }
  .nav { --nav-x: 9px; }
  .nav a { font-size: 13.5px; }
  .hdr-actions { gap: 8px; }
  .hdr-actions .btn-sm { padding: 0 14px; font-size: 13.5px; }
}

/* The menu: the sections become a list that drops from the bar. */
@media (max-width: 1100px) {
  .nav-btn { display: inline-flex; align-items: center; }
  .brand { margin-right: auto; }
  .hdr-actions { margin-left: 0; }
  .hdr-actions .btn-sm { padding: 0 16px; font-size: 14px; }
  .nav {
    --nav-x: 4px;
    display: none; position: absolute; top: var(--hdr); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop);
    padding: 6px var(--gut) 24px; max-height: calc(100vh - var(--hdr)); max-height: calc(100dvh - var(--hdr)); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.is-open { display: flex; animation: drop .22s var(--ease); }
  .nav a { height: auto; min-height: 54px; padding: 0 var(--nav-x); font-size: 17px; letter-spacing: -.01em; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--text); }
  .nav a:hover { background: transparent; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); padding-left: 16px; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav-group { display: block; }
  .nav-group > .nav-top { display: flex; padding-right: var(--nav-x); }
  .nav-group > .nav-top::after { display: none; }
  .nav-caret, .nav-sub::before { display: none; }
  .nav-sub { position: static; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; gap: 0; }
  .nav .nav-sub a { display: flex; min-height: 48px; padding: 0 4px 0 20px; font-size: 16px; line-height: 1.2; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
  .nav .nav-sub a small { display: none; }
  .nav .nav-sub a[data-nav-sub] { display: none; }
  .nav .nav-sub a[aria-current="page"] { color: var(--text); padding-left: 28px; box-shadow: inset 3px 0 0 var(--gold); background: none; }
  .nav .nav-cta {
    justify-content: center; min-height: 50px; margin-top: 10px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: 999px;
    font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
  }
  .nav-group + .nav-cta { margin-top: 22px; }
  .nav .nav-cta:hover { color: var(--text); border-color: var(--line-hi); background: var(--fill); }
  .nav .nav-cta[aria-current="page"] { padding-left: 20px; box-shadow: none; border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold-hi); }
  .nav .nav-nl { background: var(--site-fill); border-color: var(--site-fill); color: var(--ink); }
  .nav .nav-nl:hover { background: var(--site-fill-hi); border-color: var(--site-fill-hi); color: var(--ink); }
}
/* No room for Partner with us beside the menu button: it moves into the menu. */
@media (max-width: 767px) {
  .hdr-partner { display: none; }
  .nav .nav-partner { display: flex; }
}
@media (max-width: 520px) {
  :root { --hdr: 62px; }
  .brand img { height: 33px; }
  .hdr-in { gap: 10px; }
  .hdr-actions .btn-sm { padding: 0 14px; font-size: 13.5px; min-height: 38px; }
  .hdr-long { display: none; }
  .nav-btn { min-height: 38px; padding: 0 13px; font-size: 13.5px; }
}
@media (max-width: 370px) {
  .hdr-in { gap: 8px; }
  .hdr-actions .btn-sm, .nav-btn { padding: 0 12px; }
}
/* The smallest phones: the newsletter button joins Partner in the menu. */
@media (max-width: 345px) {
  .hdr-cta { display: none; }
  .nav .nav-nl { display: flex; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- motion: reveal on scroll ----------
   Content is visible without JS; the fade only arms once
   site.js adds .js to <html>. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* The tops of the pages that scroll-reveal leaves alone (they are on screen
   the moment the page opens): they settle in once, in order, on load. */
@keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js :is(.stage-main, .detail-main, .watch-main) { animation: settle .7s var(--ease) both; }
.js :is(.stage-side, .detail .aside-dark, .watch-side) { animation: settle .7s .12s var(--ease) both; }

/* Switching night and day cross-fades the page (site.js adds .theme-fade for
   the length of the switch). */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), fill .4s var(--ease), box-shadow .4s var(--ease) !important;
}

/* The header's edge once the page scrolls under it (site.js). */
.hdr { transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
.hdr.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55); }
:root[data-theme="light"] .hdr.is-scrolled { box-shadow: 0 10px 28px -18px rgba(12, 17, 26, .28); }

/* ---------- forms ---------- */

.field { display: grid; gap: 7px; }
.field > .input, .field > .select { min-width: 0; } /* or a date input's own minimum width pushes it out of its cell */
.field > span { font-weight: 500; font-size: 13px; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0 16px; background: var(--field);
  border: 1px solid rgba(var(--hl), .12); border-radius: var(--r-sm); font-size: 16px; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.textarea { min-height: 104px; padding: 12px 16px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--go); box-shadow: 0 0 0 3px color-mix(in srgb, var(--go) 22%, transparent); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--error); }
.field-err { color: var(--error); font-size: 14px; font-weight: 500; margin-top: 8px; }
.hp { position: absolute; left: -9999px; }

.form-done { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 9%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); color: var(--text); animation: rise .5s var(--ease); }
.form-done .ic { color: var(--gold); }

/* One pill holds the email and the button, like LIVE's search bar. */
.nl-row, .inline-form {
  display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px;
  background: var(--field); border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s;
}
.nl-row:focus-within, .inline-form:focus-within { border-color: var(--go); box-shadow: 0 0 0 3px color-mix(in srgb, var(--go) 20%, transparent); }
.nl-row:has([aria-invalid="true"]), .inline-form:has([aria-invalid="true"]) { border-color: var(--error); }
.nl-row .input, .inline-form .input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 10px 0 16px; border: 0; background: transparent; box-shadow: none; }
.nl-row .btn, .inline-form .btn { flex: none; min-height: 44px; padding: 0 20px; }

/* ---------- footer ---------- */

.ftr { background: var(--deep); color: var(--text-2); padding: 72px 0 32px; border-top: 1px solid rgba(var(--hl), .07); }
.ftr-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
.ftr-about { display: grid; gap: 16px; align-content: start; max-width: 38ch; }
.ftr-about .brand img { height: 50px; }
.ftr-about p { font-size: 14.5px; }
.ftr-about a:not(.brand):not(.ftr-live) { color: var(--text); border-bottom: 1px solid var(--line-2); }
.ftr h2 { font-family: var(--mono); font-weight: 400; font-stretch: 100%; font-size: 11px; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.ftr li a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 14.5px; color: var(--text-2); transition: color .15s; }
.ftr li a:hover { color: var(--text); }
.ftr li .ic { width: 12px; height: 12px; color: var(--text-3); }
.ftr-live img { width: 150px; height: auto; opacity: .8; transition: opacity .15s; }
.ftr-live:hover img { opacity: 1; }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(var(--hl), .07); font-size: 12.5px; color: var(--text-3); }
@media (max-width: 860px) { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-about { grid-column: 1 / -1; } }

/* ---------- newsletter ----------
   One centered column on the deepest navy with LIVE's dot screen.
   No colour glows: the band is flat. */

.nl { position: relative; background: var(--deep); color: var(--text); border-block: 1px solid rgba(var(--hl), .07); overflow: hidden; isolation: isolate; }
.nl::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2;
  background-image: var(--dots); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 72%); mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 72%);
}
.nl-in { position: relative; display: grid; justify-items: center; text-align: center; padding: clamp(76px, 10vw, 128px) var(--gut); max-width: 880px; margin: 0 auto; }
.nl-copy { display: grid; gap: 20px; justify-items: center; }
.nl-copy > .label { gap: 10px; }
.nl-copy .h2 { font-size: clamp(36px, 5.6vw, 68px); line-height: .96; letter-spacing: -.025em; }
.nl-copy .lede { margin: 0 auto; }
.nl-form { display: grid; gap: 12px; width: 100%; max-width: 540px; margin-top: 12px; }
.nl-form .form-done { justify-content: center; }

/* slide-in, bottom left, once per week at most */
.nl-pop {
  position: fixed; left: 20px; bottom: 20px; z-index: 60; width: min(370px, calc(100vw - 40px));
  display: grid; gap: 12px; padding: 22px; border-radius: 22px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-float), 0 30px 90px -60px rgba(var(--gold-rgb), .5);
  transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform .45s var(--ease), opacity .35s;
}
.nl-pop.is-on { transform: none; opacity: 1; pointer-events: auto; }
.nl-pop .label { color: var(--gold); }
.nl-pop p { color: var(--text-2); font-size: 14.5px; }
.nl-pop-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 0; background: transparent; color: var(--text-3); }
.nl-pop-x:hover { background: var(--fill-2); color: var(--text); }
.nl-pop .inline-form .btn { padding: 0 18px; }
@media (max-width: 560px) { .nl-pop { left: 12px; right: 12px; bottom: 12px; width: auto; } }

[hidden] { display: none !important; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 90; opacity: 0; background: var(--text); color: var(--bg); padding: 13px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-pop); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   The combined site
   NashvilleTN LIVE's mark in the bar, the Concierge menu, the
   Concierge section bar and the five-column footer. Everything
   above this block is the Concierge design as it shipped.
   ========================================================= */

/* LIVE's wordmark is one long line where the Concierge lockup was two
   stacked ones, so it sets shorter to sit at the same weight in the bar. */
.brand-live img { height: 29px; }
.ftr-about .brand-live img { height: 36px; }
@media (max-width: 520px) { .brand-live img { height: 23px; } }
@media (max-width: 400px) { .brand-live img { height: 20px; } }
@media (max-width: 370px) { .brand-live img { height: 19px; } }

/* The Concierge menu, centred under its control. The trip quiz is a card at
   the left, since it is what the section exists to get people to; the pages
   sit beside it as one plain list, each with its mark. Gold, because the
   menu is the Concierge's (.nav-group-concierge above). */
.nav-mega { grid-template-columns: 232px 212px; gap: 6px; padding: 6px; min-width: 0; left: 50%; transform: translate(-50%, -4px); }
.nav-group:hover .nav-mega, .nav-group:focus-within .nav-mega, .nav-group.is-open .nav-mega { transform: translateX(-50%); }
/* Escape, or the caret, closes the menu even while focus is still inside it;
   site.js keeps .is-dismissed on until focus leaves the group. */
@media (min-width: 1101px) {
  .nav-group.is-dismissed .nav-sub { opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s var(--ease), visibility 0s .15s; }
  .nav-group.is-dismissed .nav-mega { transform: translate(-50%, -4px); }
  .nav-group.is-dismissed .nav-caret .ic { transform: none; }
}
.nav-k { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

.nav .nav-mega a.nav-feat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 18px 18px 16px; border-radius: 9px;
  background: radial-gradient(90% 70% at 100% 0%, rgba(var(--gold-rgb), .16), transparent 70%), var(--fill);
  color: var(--text); transition: background-color .15s;
}
.nav-feat .nav-k { color: var(--gold); }
.nav-feat b { margin-top: auto; padding-top: 28px; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
.nav .nav-mega .nav-feat small { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.nav-feat-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--gold); }
.nav-feat-go .ic { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.nav .nav-mega a.nav-feat:hover { background-color: var(--fill-2); }
.nav-feat:hover .nav-feat-go .ic { transform: translateX(3px); }
.nav .nav-mega a.nav-feat[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .45); }

.nav-list { display: flex; flex-direction: column; gap: 1px; padding: 18px 2px 2px; }
.nav-list > .nav-k { padding: 0 10px 10px; }
.nav .nav-list a { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14.5px; line-height: 1; color: var(--text); }
.nav .nav-list a .ic { width: 17px; height: 17px; flex: none; color: var(--text-3); transition: color .15s; }
.nav .nav-list a:hover { background: var(--fill); }
.nav .nav-list a:hover .ic, .nav .nav-list a[aria-current="page"] .ic { color: var(--gold); }
.nav .nav-list a[aria-current="page"] { background: var(--fill); box-shadow: none; }
/* The section front, last and quieter, under a hairline. */
.nav .nav-list a.nav-all { margin-top: auto; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.nav .nav-list a.nav-all::before { content: ""; position: absolute; left: 10px; right: 10px; top: -4px; height: 1px; background: var(--line); }
.nav .nav-list a.nav-all .ic { width: 14px; height: 14px; color: currentColor; }
.nav .nav-list a.nav-all:hover, .nav .nav-list a.nav-all[aria-current="page"] { color: var(--text); }
@media (max-width: 1100px) {
  /* Folded into the menu: the same pages as indented rows, the quiz first in gold. */
  .nav-mega { display: block; left: auto; transform: none; }
  .nav-group:hover .nav-mega, .nav-group:focus-within .nav-mega, .nav-group.is-open .nav-mega { transform: none; }
  .nav-mega .nav-k, .nav .nav-mega .nav-feat small, .nav-feat-go, .nav .nav-list a .ic, .nav .nav-list a.nav-all { display: none; }
  .nav-list { display: block; padding: 0; }
  .nav .nav-mega a.nav-feat, .nav .nav-list a {
    flex-direction: row; align-items: center; height: auto; min-height: 48px; padding: 0 4px 0 20px; border-radius: 0;
    background: none; font-size: 16px; line-height: 1.2; color: var(--text-2);
  }
  .nav .nav-mega a.nav-feat { color: var(--gold); }
  .nav-feat b { margin: 0; padding: 0; font-family: var(--sans); font-weight: 500; font-stretch: normal; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
  .nav .nav-mega a.nav-feat:hover, .nav .nav-list a:hover { background: none; color: var(--text); }
  .nav .nav-mega a.nav-feat:hover { color: var(--gold-hi); }
  .nav .nav-mega a.nav-feat[aria-current="page"], .nav .nav-list a[aria-current="page"] { padding-left: 28px; box-shadow: inset 3px 0 0 var(--gold); background: none; color: var(--text); }
}

/* ---------- the Concierge bar ----------
   Under the header on every Concierge page: the Concierge lockup, then the
   section's pages. It scrolls away with the page (the quiz keeps its own
   sticky bar), and on a phone the row scrolls sideways. The current page is
   the one gold pill; on Bach HQ, pink, the way everything there is. */
.cnav { position: relative; background: var(--deep); border-bottom: 1px solid rgba(var(--hl), .08); }
.cnav-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); min-height: 70px; display: flex; align-items: center; gap: 22px; }
.cnav-brand { flex: none; display: inline-flex; align-items: center; padding-right: 22px; border-right: 1px solid var(--line-2); opacity: .92; transition: opacity .15s; }
.cnav-brand:hover { opacity: 1; }
.cnav-brand img { height: 32px; width: auto; }
/* On the section front the hero carries the lockup, so the bar is just the pages. */
.cnav-brand[aria-current="page"] { display: none; }
.cnav-links { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 12px 0; scroll-padding-inline: var(--gut); }
.cnav-links::-webkit-scrollbar { display: none; }
.cnav-links a {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 17px; border-radius: 999px;
  font-weight: 500; font-size: 15px; line-height: 1; color: var(--text-2); white-space: nowrap;
  transition: color .15s, background-color .15s, box-shadow .15s;
}
.cnav-links a:hover { color: var(--text); background: var(--fill-2); }
.cnav-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Plan my trip is the section's call to action: a gold-ringed pill that,
   on a wide screen, sits apart at the far end of the row. */
.cnav-links a.cnav-go { order: 1; margin-left: auto; color: var(--gold); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .45); }
.cnav-links a.cnav-go::after { content: "→"; font-size: 15px; transition: transform .15s; }
.cnav-links a.cnav-go:hover { color: var(--gold); background: rgba(var(--gold-rgb), .1); box-shadow: inset 0 0 0 1px var(--gold); }
.cnav-links a.cnav-go:hover::after { transform: translateX(2px); }
.cnav-links a[aria-current="page"] { color: var(--on-go); background: var(--go); font-weight: 600; box-shadow: none; }
/* On the quiz itself the bar drops "Plan my trip": filled as the current
   page it was a second gold button under the header's, pointing at the
   page you had just opened. */
.cnav-links a.cnav-go[aria-current="page"] { display: none; }
/* On the section front the hero's "Start the trip quiz" leads, so the bar
   drops its pill there too. */
.cnav-in:has(> .cnav-brand[aria-current="page"]) .cnav-go { display: none; }
@media (max-width: 980px) {
  /* The row scrolls sideways, so the call to action leads it instead.
     (980, not 900: with Today in it the row outgrows the bar below that.) */
  /* Both ends of the row fade, so a pill scrolled half out of view
     never butts against the lockup's divider. */
  .cnav-in { gap: 2px; min-height: 64px; padding-right: 0; }
  .cnav-in:has(> .cnav-brand[aria-current="page"]) { padding-left: calc(var(--gut) - 12px); }
  .cnav-brand { padding-right: 14px; }
  .cnav-brand img { height: 28px; }
  .cnav-links {
    gap: 4px; padding: 11px var(--gut) 11px 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 86%, transparent);
  }
  .cnav-links a { height: 42px; padding: 0 15px; font-size: 14.5px; }
  .cnav-links a.cnav-go { order: -1; margin-left: 0; margin-right: 4px; }
  .cnav-links a.cnav-go::after { content: none; }
}

/* ---------- the footer, five columns ---------- */
.ftr-grid { grid-template-columns: 1.45fr repeat(4, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 1000px) { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ftr-grid { grid-template-columns: minmax(0, 1fr); } }

/* The newsletter band's small print, under the pill. */
.nl-copy > .fine { margin-top: -4px; }

/* ---------- night and day: the marks and the switch ----------
   Each mark ships in both cuts: cream for the night ground, ink for the
   day one. The day cut loads lazily, so a night visit never fetches it. */
.logo-day { display: none; }
:root[data-theme="light"] .logo-night { display: none; }
:root[data-theme="light"] .logo-day { display: inline; }

.ftr-base { align-items: center; gap: 16px 32px; }
.ftr-legal { display: grid; gap: 4px; }
.ftr-admin { justify-self: start; transition: color .15s; } /* only the word is the link, not the row */
.ftr-admin:hover { color: var(--text); }
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--well); flex: none; }
html:not(.js) .theme-switch { display: none; } /* it needs site.js to do anything */
.theme-switch button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 15px 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-3); font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: -.005em;
  transition: color .15s, background-color .15s, box-shadow .15s;
}
.theme-switch .ic { width: 15px; height: 15px; }
.theme-switch button:hover { color: var(--text); }
/* The pressed side is drawn from the page's own state, so it is right
   before site.js has run. */
:root:not([data-theme="light"]) .theme-switch [data-theme-set="dark"],
:root[data-theme="light"] .theme-switch [data-theme-set="light"] {
  background: var(--surface-hi); color: var(--text); box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px -2px rgba(0, 0, 0, .35);
}
:root:not([data-theme="light"]) .theme-switch [data-theme-set="dark"] .ic,
:root[data-theme="light"] .theme-switch [data-theme-set="light"] .ic { color: var(--gold); }
@media (max-width: 640px) { .ftr-base { flex-direction: column; align-items: flex-start; } }