/* =========================================================
   NashvilleTN Concierge — one stylesheet.

   Cream paper and Music City green (the user, 2026-09-30): a solid
   light cream ground, near-black green type, emerald-forest green
   for every "do this", gold for the small pops (stickers, the
   featured flag, the calendar month, Today) and pink for Bach HQ.
   The footer and the newsletter band are deep green islands.
   Archivo 800–900 at 112% width for headlines, Geist for reading
   and Geist Mono for the small uppercase labels.

   House rules
   · Green means "do this". Inside Bach HQ the job goes to pink.
   · The colored words in a headline stay upright. No italics.
   · A pulsing dot means "happening now" (gold on Today and on the
     home page's date line).
   · The top of every page is clean and light. No paid placement
     sits above the first scroll; paid stories live in the feed,
     look like everything else, and say "Sponsored".
   · Hairlines and soft shadows, not heavy ones. Motion only where
     it explains.
   ========================================================= */

/* ---------- the palette ----------
   One theme, cream. (The night/day switch came out on 2026-09-30.)
   The deep-green islands, .on-ink (the Stay room-block band), the
   footer, the newsletter band and the photo panels, re-declare the
   night tokens below, so whatever sits inside them needs no second
   set of rules. */

:root {
  /* the brand fills */
  --cream: #F7F2E8;      /* the page */
  --green: #1E5A43;      /* Music City green: every "do this" */
  --green-hi: #256B50;   /* ...under the pointer */
  --green-deep: #15402F; /* the newsletter band */
  --ink: #102E23;        /* the deepest green: the footer, .on-ink bands */
  --on-green: #FBF8F1;   /* type on a green fill */
  --sage: #E6EEE4;       /* green tints: hovers, chosen options */
  --blush: #FBE3EC;      /* Bach HQ's paper */
  --gold: #E8AD3B;
  --gold-hi: #F3C55F;
  --pink: #FF4FA3;
  --pink-hi: #FF74B6;
  --red: #FF4D4D;
}

/* day: cream paper, near-black green type */
:root,
.is-light {
  color-scheme: light;
  --bg: var(--cream);
  --surface: #FFFDF9;    /* cards */
  --surface-2: #FBF8F1;  /* big panels: the planner */
  --fill: rgba(24, 36, 29, .045);
  --fill-2: rgba(24, 36, 29, .075);
  --line: rgba(24, 36, 29, .11);
  --line-2: rgba(24, 36, 29, .19);
  --hairline: rgba(24, 36, 29, .08);
  --edge: rgba(24, 36, 29, .15);     /* chips, fields, options */
  --edge-hi: rgba(24, 36, 29, .32);  /* ...when hovered */
  --wash: rgba(255, 255, 255, .7);   /* the tint inside a chip */
  --ghost: rgba(24, 36, 29, .22);    /* switched-off marks */
  --field: #FFFFFF;
  --row-hover: rgba(24, 36, 29, .035);
  --band-bg: #EFE8DA;
  --lift: 0 24px 44px -28px rgba(24, 36, 29, .3);
  --lift-lg: 0 30px 70px -30px rgba(24, 36, 29, .35);

  --text: #18241D;
  --text-2: #4B564F;
  --text-3: #5F6B63;
  --text-hi: #0B140F;    /* a title under the pointer */
  --on-text: #FBF8F1;    /* type on a --text fill */
  --error: #B42318;

  /* green, gold and pink as type and icons, deep enough to pass on cream */
  --live: #2E9E68;
  --live-rgb: 46, 158, 104; /* --live as r, g, b, for glows and tints */
  --live-ink: #157347;
  --gold-ink: #8E5B05;
  --pink-ink: #C2185B;

  /* "do this" */
  --go: var(--green);
  --go-hi: var(--green-hi);
  --on-go: var(--on-green);
  --go-glow: rgba(30, 90, 67, .38);
  /* eyebrows and the colored words in a headline */
  --accent: var(--green);
}

/* night: the deep-green islands */
.on-ink, .ftr, .nl, .panel {
  color-scheme: dark;
  --bg: #12382A;
  --surface: #1A4535;
  --surface-2: #163F30;
  --fill: rgba(255, 255, 255, .06);
  --fill-2: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .18);
  --hairline: rgba(255, 255, 255, .07);
  --edge: rgba(255, 255, 255, .14);
  --edge-hi: rgba(255, 255, 255, .32);
  --wash: rgba(255, 255, 255, .04);
  --ghost: rgba(255, 255, 255, .2);
  --field: rgba(6, 22, 16, .45);     /* inputs sit deeper than the band */
  --row-hover: rgba(255, 255, 255, .04);
  --band-bg: rgba(255, 255, 255, .04);
  --lift: 0 28px 50px -26px rgba(0, 0, 0, .6);
  --lift-lg: 0 30px 80px -24px rgba(0, 0, 0, .7);

  --text: #F5F0E4;
  --text-2: #C3CFC6;
  --text-3: #97A99C;
  --text-hi: #FFFFFF;
  --on-text: #102E23;
  --error: #FF9A8A;

  --live: #4ADE9B;
  --live-rgb: 74, 222, 155;
  --live-ink: #4ADE9B;
  --gold-ink: #E8AD3B;
  --pink-ink: #FF74B6;

  /* on the green, "do this" is gold */
  --go: var(--gold);
  --go-hi: var(--gold-hi);
  --on-go: var(--ink);
  --go-glow: rgba(232, 173, 59, .45);
  --accent: var(--gold-ink);
}

:root {
  --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;

  --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(243, 197, 95, .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);
}

/* Bach HQ trades green for pink, the way LIVE's bach pages do. */
.bach,
.bach :is(.on-ink, .nl), .on-ink.bach {
  --go: var(--pink);
  --go-hi: var(--pink-hi);
  --on-go: #FFFFFF;
  --go-glow: rgba(255, 79, 163, .55);
  --accent: var(--pink-ink);
}

/* A deep-green band (the Stay room-block form). */
.on-ink { background: var(--ink); color: var(--text); }
.band { background: var(--band-bg); border-block: 1px solid var(--hairline); }

/* ---------- 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: rgba(30, 90, 67, .2); 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(--go); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--green); color: var(--on-green);
  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, .today-intro, .stack, .ride-body, .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, .ride-body, .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: color-mix(in srgb, var(--text) 88%, transparent); background: transparent; }
.btn-line:hover { border-color: var(--edge-hi); background: var(--fill); color: var(--text); }
.btn-ink { background: var(--text); color: var(--on-text); }
.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); border-color: var(--gold); color: var(--ink); }
.tag-featured { background: rgba(232, 173, 59, .1); border-color: rgba(232, 173, 59, .35); color: var(--gold-ink); }
.tag-original { background: var(--text); border-color: var(--text); color: var(--on-text); }
.tag-live, .tag-soon, .tag-done { border-color: transparent; padding-left: 0; padding-right: 0; }
.tag-live { color: var(--live-ink); }
.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(var(--live-rgb), .6); animation: pulse 2s infinite;
}
.price-free { color: var(--live-ink); font-weight: 600; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--live-rgb), .55); }
  70% { box-shadow: 0 0 0 7px rgba(var(--live-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--live-rgb), 0); }
}

/* Today is gold, no green (the user's call, 2026-09-30): "happening now"
   takes the gold on the Today page and in the home page's Happening now. */
body[data-page="today"], #today { --live: var(--gold); --live-ink: var(--gold-ink); --live-rgb: 232, 173, 59; }

/* ---------- header ----------
   A solid cream bar on every page: the ink logo, quiet links in
   pills, the current page underlined in green, "Best Places" as a
   small dropdown, and one green action that stays green on Bach HQ. */

.hdr { position: sticky; top: 0; z-index: 50; background: var(--cream); color: var(--text); border-bottom: 1px solid var(--line); }
.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: none; }
.brand img { height: 42px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  font-weight: 500; font-size: 13.5px; line-height: 1; color: var(--text-2); white-space: nowrap; transition: color .15s, background-color .15s;
}
.nav a:hover, .nav-drop: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: 12px; right: 12px; bottom: calc((var(--hdr) - 34px) / -2);
  height: 2px; border-radius: 2px 2px 0 0; background: var(--green);
}
/* Things to Do opens a small dropdown: Eat & Drink and Stay live under it. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group > .nav-top { padding-right: 4px; }
.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: 12px; right: 4px; bottom: calc((var(--hdr) - 34px) / -2);
  height: 2px; border-radius: 2px 2px 0 0; background: var(--green);
}
/* "Best Places" is a button, not a page: it opens the list. */
.nav-drop {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 12px; border: 0; border-radius: 999px;
  background: transparent; font-weight: 500; font-size: 13.5px; line-height: 1; color: var(--text-2); white-space: nowrap; cursor: pointer; transition: color .15s, background-color .15s;
}
.nav-drop .ic { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav-group:hover .nav-drop .ic, .nav-group.is-open .nav-drop .ic { transform: rotate(180deg); }
.nav-group:has(.nav-sub [aria-current="page"]) > .nav-drop { color: var(--text); }
.nav-group:has(.nav-sub [aria-current="page"]) > .nav-drop::after {
  content: ""; position: absolute; left: 12px; right: 10px; bottom: calc((var(--hdr) - 34px) / -2);
  height: 2px; border-radius: 2px 2px 0 0; background: var(--green);
}
.nav-caret { display: grid; place-items: center; width: 24px; height: 34px; margin-right: 4px; 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); }
/* "Nashville's Best" opens a full-width panel under the bar: a short
   intro with quick links on the left, a photo card per list on the right.
   It hangs off the sticky header, so the group itself isn't positioned. */
.nav-group:has(.mega) { position: static; }
.nav-sub {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface); border-bottom: 1px solid var(--line-2); box-shadow: var(--lift-lg);
  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: calc((var(--hdr) - 34px) / -2); height: calc((var(--hdr) - 34px) / 2); } /* hover bridge */
.nav-group:hover .nav-sub, .nav-group:has(:focus-visible) .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); }
.mega-in { max-width: var(--max); margin: 0 auto; padding: 34px var(--gut) 38px; display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; gap: 44px; }
.mega-h { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: -.02em; color: var(--text); }
.mega-dek { margin: 0 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); max-width: 30ch; }
.mega-quick { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.nav .mega-quick a { height: auto; padding: 8px 0; border-radius: 0; font-size: 14.5px; color: var(--text); white-space: normal; }
.nav .mega-quick a:hover { background: none; color: var(--green); }
.mega-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nav .mega-card { display: grid; align-content: start; gap: 4px; height: auto; padding: 0; border-radius: 0; color: var(--text); white-space: normal; }
.nav .mega-card:hover { background: none; }
.nav .mega-card[aria-current="page"]::after { display: none; } /* the group button carries the underline */
.mega-img { display: block; aspect-ratio: 4 / 3; margin-bottom: 10px; overflow: hidden; border-radius: var(--r-sm); background: var(--fill-2); }
.mega-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mega-card:hover .mega-img img { transform: scale(1.04); }
.mega-t { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.mega-t .ic { width: 16px; height: 16px; color: var(--green); transition: transform .2s var(--ease); }
.mega-card:hover .mega-t { color: var(--green); }
.mega-card:hover .mega-t .ic { transform: translateX(3px); }
.mega-card small { font-size: 13.5px; color: var(--text-3); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .mega-img img, .mega-t .ic { transition: none; } .mega-card:hover .mega-img img { transform: none; } }
.nav-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 8px; }
.nav .nav-live { font-weight: 700; color: var(--text); }
.nav .nav-live { gap: 8px; }
.nav .nav-live .dot-live { --live: #111111; --live-rgb: 17, 17, 17; }
.nav .nav-nl { display: none; color: var(--green); font-weight: 600; }
.hdr-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.hdr-cta { --go: var(--green); --go-hi: var(--green-hi); --on-go: var(--on-green); --go-glow: rgba(30, 90, 67, .38); }
.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-weight: 500; font-size: 14px;
}

@media (max-width: 1260px) {
  .nav a { padding: 0 10px; }
  .nav a[aria-current="page"]::after { left: 10px; right: 10px; }
}
@media (max-width: 1100px) {
  .nav-btn { display: inline-flex; align-items: center; }
  .brand { margin-right: auto; }
  .hdr-actions { margin-left: 0; }
  .nav {
    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(--lift-lg);
    padding: 6px var(--gut) 20px; max-height: calc(100vh - var(--hdr)); overflow-y: auto;
  }
  .nav.is-open { display: flex; animation: drop .22s var(--ease); }
  .nav a { height: auto; padding: 16px 4px; font-size: 17px; 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(--green); padding-left: 16px; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav-sep { display: none; }
  .nav .nav-nl { display: inline-flex; }
  .nav-group { display: block; }
  .nav-group > .nav-top { display: flex; padding-right: 4px; }
  .nav-group > .nav-top::after { display: none; }
  .nav-caret, .nav-sub::before { display: none; }
  .nav-drop { height: auto; padding: 18px 4px 6px; border-radius: 0; cursor: default; pointer-events: none; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
  .nav-drop .ic, .nav-group:has(.nav-sub [aria-current="page"]) > .nav-drop::after { 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 { padding: 13px 4px 13px 20px; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
  .nav .nav-sub a small { display: none; }
  .mega-in { display: block; padding: 0; }
  .mega-intro, .mega-img, .mega-t .ic { display: none; }
  .mega-cards { display: block; }
  .nav .mega-card { display: block; }
  .mega-t { font-family: inherit; font-weight: inherit; font-size: inherit; letter-spacing: 0; }
  .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(--green); background: none; }
}
@media (max-width: 520px) {
  :root { --hdr: 62px; }
  .brand img { height: 36px; }
  .hdr-in { gap: 8px; }
  .hdr-cta { padding: 0 12px; font-size: 13px; min-height: 38px; }
  .nav-btn { min-height: 38px; padding: 0 12px; }
}
/* the logo went up a nudge (Oct. 1, 2026); this keeps logo, newsletter
   button and Menu inside the gutter on 375px phones */
@media (max-width: 380px) {
  .brand img { height: 34px; }
  .hdr-in { gap: 6px; }
  .hdr-cta { padding: 0 10px; }
  .nav-btn { padding: 0 10px; }
}
@media (max-width: 370px) { .hdr-cta { display: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */

.sec { padding: clamp(64px, 8vw, 104px) 0; }
.sec-tight { padding: clamp(40px, 5vw, 60px) 0; }
.sec + .sec { padding-top: 0; }
.sec.on-ink + .sec, .sec + .sec.on-ink, .sec.band + .sec, .sec + .sec.band { padding-top: clamp(64px, 8vw, 104px); }

.sh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 28px; margin-bottom: clamp(24px, 3vw, 38px); }
.sh-copy { display: grid; gap: 14px; min-width: 0; }
.sh-lede { color: var(--text-2); max-width: 60ch; font-size: 16.5px; }
.sh-side { display: flex; gap: 16px; align-items: center; padding-bottom: 6px; flex-wrap: wrap; }
@media (max-width: 700px) { .sh { grid-template-columns: minmax(0, 1fr); } .sh-side { padding-bottom: 0; } }
.credit { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-3); }
.credit strong { color: var(--text); font-weight: 600; }

/* ---------- 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; } }

/* ---------- cards + grids ---------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--lift); }
/* photos melt into the card, as on LIVE's package cards */
.card-media { position: relative; aspect-ratio: 16 / 10; background: var(--fill); overflow: hidden; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--surface) 0%, color-mix(in srgb, var(--surface) 25%, transparent) 38%, transparent 70%); }
.card:hover .card-media img { transform: scale(1.04); }
.card-media .tag { position: absolute; z-index: 1; top: 12px; left: 12px; background: rgba(16, 46, 35, .8); color: #F3EFE5; border-color: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }
.card-media .tag-partner { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.card-body { display: grid; gap: 8px; padding: 14px 20px 20px; flex: 1; align-content: start; }
.card-kicker { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--text-3); letter-spacing: .14em; }
.card-title { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 20px; line-height: 1.15; letter-spacing: -.02em; }
.card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-meta { color: var(--text-2); font-size: 14.5px; }
.card-text { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.card-foot { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding: 0 20px 20px; margin-top: auto; }
.card-foot .btn, .card-foot a, .card-foot button { position: relative; z-index: 2; }
.card-perk { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(232, 173, 59, .08); border: 1px solid rgba(232, 173, 59, .22); color: var(--text); font-size: 14px; line-height: 1.45; }
.card-perk .tristar { color: var(--gold-ink); margin-top: 2px; }
.card.is-paid { border-color: rgba(232, 173, 59, .35); }
.ph { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--fill) 0 10px, var(--fill-2) 10px 11px); }

/* story: the one shape paid content is allowed to take */
.story { position: relative; display: grid; gap: 14px; align-content: start; }
.story-media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--fill); }
.story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.story:hover .story-media img { transform: scale(1.04); }
.story-kicker { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--text-3); letter-spacing: .14em; }
.story-title { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.15; letter-spacing: -.02em; }
.story-title a::after { content: ""; position: absolute; inset: 0; }
.story:hover .story-title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.story-dek { color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.story-by { font-size: 13.5px; color: var(--text-3); }
.story-by b { color: var(--text-2); font-weight: 600; }
.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 3vw, 36px); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--wash); color: var(--text-2);
  font-weight: 500; font-size: 13.5px; white-space: nowrap; transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--edge-hi); color: var(--text); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--go); border-color: var(--go); color: var(--on-go); font-weight: 600; }
.chip .n { opacity: .6; font-variant-numeric: tabular-nums; font-weight: 500; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut); scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll > * { scroll-snap-align: start; }

.empty { padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--text-2); text-align: center; }

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

.field { display: grid; gap: 7px; min-width: 0; }
.field > span { font-weight: 500; font-size: 13px; color: var(--text-2); }
/* min-width: 0 lets a date input (about 180px wide on its own) fit a
   narrow column instead of pushing past it on phones. */
.input, .select, .textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 0 16px; background: var(--field);
  border: 1px solid var(--edge); border-radius: var(--r-sm); font-size: 16px; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.input[type="date"] { padding: 0 10px; }
.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"] { border-color: var(--error); }
.field-err { color: var(--error); font-size: 14px; font-weight: 500; margin-top: 8px; }
.hp { position: absolute; left: -9999px; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--text-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--go); flex: none; }
.form-done { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: var(--r-sm); background: rgba(var(--live-rgb), .08); border: 1px solid rgba(var(--live-rgb), .25); color: var(--text); animation: rise .5s var(--ease); }
.form-done .ic { color: var(--live-ink); }
.form-card { display: grid; gap: 16px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .span { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* 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; }

/* segmented + stepper */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.seg span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--wash); color: var(--text-2); font-weight: 500; font-size: 14px;
  transition: background-color .15s, border-color .15s, color .15s;
}
.seg label:hover span { border-color: var(--edge-hi); color: var(--text); }
.seg input:checked + span { background: var(--go); border-color: var(--go); color: var(--on-go); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--go); outline-offset: 2px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--edge); border-radius: 999px; overflow: hidden; background: var(--field); }
.stepper button { width: 48px; height: 48px; border: 0; background: transparent; color: var(--text); font-size: 22px; line-height: 1; transition: background-color .15s; }
.stepper button:hover { background: var(--fill-2); }
.stepper output { min-width: 60px; text-align: center; font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 24px; font-variant-numeric: tabular-nums; }

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

.ftr { background: var(--ink); color: var(--text-2); padding: 72px 0 32px; border-top: 1px solid rgba(255, 255, 255, .06); }
.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; align-items: center; gap: 16px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 12.5px; color: var(--text-3); }
.ftr-legal { display: flex; flex-wrap: wrap; gap: 6px 24px; }
@media (max-width: 860px) { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-about { grid-column: 1 / -1; } }

/* ---------- the light features ----------
   The home page's top is light now: the hero on sage cream with the
   trip quiz's first question as a card (for everyone, so gold, not
   pink). Below it the newsletter stays night, Bach HQ goes pink, and
   three quiet LIVE links sit on cream. */

.label .rule { width: 26px; height: 1px; background: currentColor; opacity: .7; flex: none; }
.label .ic { width: 15px; height: 15px; }

/* the quiz card, in the hero */
.qcard {
  position: relative; display: grid; gap: 18px; padding: clamp(22px, 3vw, 32px); border-radius: 28px;
  background: #FFFFFF; border: 1px solid var(--line); rotate: 1.2deg;
  box-shadow: 0 40px 70px -40px rgba(24, 50, 36, .4), 0 2px 0 rgba(24, 36, 29, .04);
  animation: rise .9s .15s var(--ease) both;
}
.qcard .qcard-st { top: -16px; right: 22px; left: auto; bottom: auto; transform: rotate(6deg); }
.qcard-top { display: grid; gap: 10px; }
.qcard-top .label { color: var(--text-3); }
.qcard-bar { display: block; height: 6px; border-radius: 99px; background: var(--sage); overflow: hidden; }
.qcard-bar i { display: block; width: 11%; height: 100%; border-radius: inherit; background: var(--green); }
.qcard-q { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.02; letter-spacing: -.025em; }
.qcard-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qcard-opts a {
  display: grid; align-content: start; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: #FDFBF6;
  transition: border-color .18s, background-color .18s, transform .18s var(--ease);
}
.qcard-opts b { font-weight: 650; font-size: 15.5px; line-height: 1.25; letter-spacing: -.01em; }
.qcard-opts small { font-size: 13px; color: var(--text-3); line-height: 1.3; }
.qcard-opts a:hover { border-color: var(--green); background: var(--sage); transform: translateY(-2px); }
.qcard-opts a:hover b { color: var(--green); }
@media (max-width: 980px) { .qcard { max-width: 540px; width: 100%; rotate: none; } }
@media (max-width: 400px) { .qcard-opts a { padding: 12px; } .qcard-opts b { font-size: 14.5px; } }

/* the newsletter: one centered column on deep green, a gold
   glow from the top, pink from the bottom, LIVE's dot screen, and
   four tilted stickers for what's in it. Every page. */
.nl { position: relative; background: var(--green-deep); color: var(--text); overflow: hidden; isolation: isolate; }
.nl::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 85% at 18% 0%, rgba(232, 173, 59, .16), transparent 62%), radial-gradient(55% 80% at 88% 100%, rgba(255, 79, 163, .12), transparent 60%);
}
.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(80px, 10vw, 136px) var(--gut); max-width: 940px; margin: 0 auto; }
.nl-copy { display: grid; gap: 22px; justify-items: center; }
.nl-copy > .label { gap: 10px; }
.nl-copy .lede { margin: 0 auto; }
.feat-title {
  font-family: var(--display); font-weight: 900; font-stretch: 112%;
  font-size: clamp(40px, 6vw, 82px); line-height: .93; letter-spacing: -.03em;
  color: var(--text); text-wrap: balance;
}
.feat-title em { font-style: normal; color: var(--accent); }
.nl-inside { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 2px; }
.nl-inside li {
  padding: 8px 16px; border-radius: 999px; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 14px; letter-spacing: -.005em;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .7);
}
.nl-inside .t1 { background: var(--pink); color: #FFFFFF; transform: rotate(-3deg); }
.nl-inside .t2 { background: var(--cream); color: var(--ink); transform: rotate(2deg); }
.nl-inside .t3 { background: var(--gold); color: var(--ink); transform: rotate(-1.5deg); }
.nl-inside .t4 { background: #CFE4C9; color: var(--ink); transform: rotate(2.5deg); }
.nl-form { display: grid; gap: 10px; width: 100%; max-width: 560px; margin-top: 10px; }
.nl-fine { color: var(--text-3); }
.nl-form .form-done { justify-content: center; }
@media (max-width: 560px) { .nl-copy > .label { letter-spacing: .1em; } }

/* 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(--lift-lg);
  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(--accent); }
.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; } }

/* ---------- mastheads (section fronts) ----------
   Solid cream, the big headline on the left, and the page's photo
   as a print on the table, tilted, top right (desktop only). */

.mast { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); border-bottom: 1px solid var(--line); }
.mast-bg {
  position: absolute; z-index: 1; top: clamp(36px, 5vw, 64px); right: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  width: clamp(260px, 30vw, 410px); aspect-ratio: 4 / 3; padding: 9px; border-radius: 22px; background: #FFFFFF;
  box-shadow: 0 34px 60px -30px rgba(24, 36, 29, .45); rotate: 3deg; animation: rise .9s .15s var(--ease) both;
}
.mast-bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.mast-in > :not(.hotel-search, .fine) { max-width: min(100%, 640px); }
@media (max-width: 980px) { .mast-bg { display: none; } }
/* Today's front is one slim line: no print. */
.now-hero .mast-bg { display: none; }
.mast-in { position: relative; display: grid; gap: 20px; padding: clamp(64px, 9vw, 120px) var(--gut) clamp(48px, 6vw, 80px); max-width: var(--max); margin: 0 auto; }
.mast-in > * { animation: rise .8s var(--ease) both; }
.mast-in > *:nth-child(2) { animation-delay: .06s; }
.mast-in > *:nth-child(3) { animation-delay: .12s; }
.mast-in > *:nth-child(4) { animation-delay: .18s; }
.mast .lede { color: var(--text-2); }
/* A page title that breaks into two or three short lines instead of
   running the width of the photo (Things to Do and the pages under it). */
.mast .display.is-narrow { max-width: 14ch; }
.mast-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--text-3); font-size: 15px; }
.mast-facts b { color: var(--text); font-weight: 600; }
/* Eat & Drink and Stay sit under Things to Do: the eyebrow is the way back. */
.label.crumb a { color: var(--text-2); transition: color .15s; }
.label.crumb a:hover { color: var(--text); }
.label.crumb span { opacity: .45; }

/* ---------- Things to Do: the doors into See & do, Eat & Drink, Stay ---------- */

.doors-sec { padding-bottom: 0; }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.door {
  position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.door:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--lift); }
.door:has(.door-title a:focus-visible) { outline: 2px solid var(--go); outline-offset: 3px; }
.door-media { position: relative; aspect-ratio: 16 / 9; background: var(--fill); overflow: hidden; }
.door-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.door-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--surface) 0%, color-mix(in srgb, var(--surface) 20%, transparent) 45%, transparent 75%); }
.door:hover .door-media img { transform: scale(1.04); }
.door-body { display: grid; gap: 10px; padding: 16px 22px 22px; flex: 1; align-content: start; }
.door-body > .label { color: var(--accent); }
.door-title { font-weight: 800; font-size: clamp(21px, 2vw, 25px); line-height: 1.1; letter-spacing: -.02em; }
/* the title link covers the whole door; the jump chips sit above it */
.door-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.door-title a:focus-visible { outline: none; }
.door-text { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.door-jumps { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.door-jumps .chip { min-height: 34px; padding: 0 13px; font-size: 13px; }
@media (max-width: 900px) {
  .doors { grid-template-columns: minmax(0, 1fr); }
  .door { display: grid; grid-template-columns: clamp(92px, 26vw, 220px) minmax(0, 1fr); }
  .door-media { aspect-ratio: auto; }
  .door-media::after { background: linear-gradient(to left, var(--surface) 0%, transparent 55%); }
  .door-body { padding: 16px 16px 18px; gap: 8px; }
  .door-text { font-size: 14px; }
}

/* ---------- home: hero ---------- */

.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transform: scale(1.04); animation: settle 2.4s var(--ease) both; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(16, 46, 35, .84) 44%, rgba(16, 46, 35, .3) 100%), linear-gradient(0deg, var(--ink) 0%, rgba(16, 46, 35, .4) 38%, transparent 72%);
}
@keyframes settle { from { transform: scale(1.1); opacity: 0; } to { transform: scale(1.04); opacity: .9; } }
.hero-in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(36px, 6vw, 88px); align-items: center;
  max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 116px) var(--gut) clamp(64px, 8vw, 116px);
}
/* minmax(0, 1fr): a long headline word can't widen the track and push the lede under a side card */
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; }
.hero-copy > * { animation: rise .8s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: .07s; }
.hero-copy > *:nth-child(3) { animation-delay: .14s; }
.hero-copy > *:nth-child(4) { animation-delay: .21s; }
.hero-copy > *:nth-child(5) { animation-delay: .28s; }
.hero-copy .lede { color: var(--text-2); }
.hero-light .hero-copy .lede { max-width: 38ch; }
.hero-go { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quick > span { font-size: 13.5px; color: var(--text-3); margin-right: 4px; }
.quick a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--wash); color: var(--text-2);
  font-size: 13px; font-weight: 500; transition: border-color .15s, color .15s;
}
.quick a:hover { border-color: var(--edge-hi); color: var(--text); }
@media (max-width: 980px) { .hero-in { grid-template-columns: minmax(0, 1fr); } }
/* On a phone the clock card is below the fold, so the date and time
   ride at the top of the hero instead of the tagline. */
.hero-copy > .hero-now { display: none; }
@media (max-width: 980px) {
  .hero-copy > .hero-now { display: inline-flex; gap: 8px; align-items: center; }
  .hero-copy > .hero-eyebrow { display: none; }
}

/* The home hero: solid cream, no photo. The date, time and weather
   ride in one pill under the button. */
.hero-light .hero-copy > .hero-eyebrow { display: inline-flex; color: var(--accent); }
.hero-light .hero-in { padding-block: clamp(48px, 7vw, 104px); }
.hero-live {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--text-2);
  transition: border-color .15s, background-color .15s;
}
.hero-live:hover { border-color: var(--green); background: #FFFFFF; }
.hero-live .dot-live { --live: var(--gold); --live-rgb: 232, 173, 59; }
.hero-live-t { display: inline-flex; flex-wrap: wrap; gap: 0 10px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.hero-wx { color: var(--text-2); }
.hero-wx::before { content: "·"; margin-right: 10px; color: var(--text-3); }
.hero-live-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--green); }
.hero-live-go .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.hero-live:hover .hero-live-go .ic { transform: translateX(3px); }
@media (max-width: 560px) {
  .hero-live { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px 16px; border-radius: 18px; }
  .hero-live .dot-live { align-self: start; margin-top: 7px; }
  .hero-live-go { grid-column: 2; }
  .hero-wx::before { content: none; }
}

/* the clock card: the date and time, featured */
.clock-card {
  position: relative; display: grid; border-radius: 24px; border: 1px solid var(--edge);
  background: rgba(16, 46, 35, .62); overflow: hidden; isolation: isolate;
  box-shadow: 0 30px 70px -50px rgba(124, 196, 255, .18);
  animation: rise .9s .15s var(--ease) both;
}
@supports (backdrop-filter: blur(1px)) { .clock-card { backdrop-filter: blur(14px); } }
.clock-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background-image: var(--dots); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%);
}
.clock-top { display: grid; gap: 10px; padding: 30px 32px 34px; }
.clock-top .label { color: var(--gold-ink); display: inline-flex; gap: 10px; align-items: center; }
.clock-time { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(52px, 5.7vw, 76px); line-height: .95; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.clock-time small { font-size: .34em; letter-spacing: .01em; margin-left: .2em; color: var(--text); }
.clock-date { font-weight: 500; font-size: 17px; color: var(--text-2); }
/* the weather strip, under the date */
.clock-wx {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  padding: 14px 32px; border-top: 1px solid var(--edge); background: rgba(255, 255, 255, .025);
}
.clock-wx[hidden] { display: none; }
.clock-wx .wx-now { display: inline-flex; align-items: center; gap: 10px; }
.clock-wx .ic { width: 22px; height: 22px; color: var(--gold-ink); flex: none; }
.clock-wx .wx-temp { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.clock-wx .wx-cond { font-weight: 500; font-size: 15px; color: var(--text-2); }
.clock-wx .wx-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.clock-go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 32px;
  border-top: 1px solid var(--edge); font-weight: 600; font-size: 15.5px; color: var(--text);
  transition: background .15s, color .15s;
}
.clock-go .ic { width: 18px; height: 18px; color: var(--gold-ink); transition: transform .2s var(--ease); }
.clock-go:hover { background: rgba(232, 173, 59, .1); color: var(--gold-ink); }
.clock-go:hover .ic { transform: translateX(3px); }

/* ---------- home: today, by the hour ----------
   The Today page's timeline, trimmed. The intro holds still on
   the left while the timeline scrolls past it on desktop. */

.today-home { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.today-intro { position: sticky; top: calc(var(--hdr) + 32px); display: grid; gap: 16px; justify-items: start; }
.today-intro > .label { gap: 10px; }
.today-intro .lede { font-size: 17px; }
.today-intro .btn { margin-top: 6px; }
@media (max-width: 960px) { .today-home { grid-template-columns: minmax(0, 1fr); } .today-intro { position: static; } }

/* ---------- numbered steps (Book It) ---------- */

.steps { display: grid; gap: 0; counter-reset: s; border-top: 1px solid var(--line); margin: 0; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.steps li::before {
  counter-increment: s; content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(232, 173, 59, .1); border: 1px solid rgba(232, 173, 59, .35); color: var(--gold-ink);
  font-family: var(--display); font-weight: 800; font-size: 16px;
}
.steps b { display: block; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 19px; letter-spacing: -.015em; margin-bottom: 3px; }
.steps span { color: var(--text-2); font-size: 15.5px; }

/* ---------- the price list (Book It) ---------- */

.menu { border-top: 1px solid var(--line-2); }
.menu-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 8px 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.menu-row > .ic { width: 30px; height: 30px; color: var(--accent); grid-row: 1 / span 2; }
.menu-name { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.menu-name h3 { font-weight: 800; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.1; letter-spacing: -.02em; flex: none; }
.menu-name .leader { flex: 1; border-bottom: 2px dotted var(--ghost); transform: translateY(-6px); min-width: 24px; }
.menu-row p { grid-column: 2; color: var(--text-2); font-size: 15.5px; max-width: 62ch; }
.menu-price { grid-row: 1 / span 2; grid-column: 3; font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 23px; letter-spacing: -.02em; text-align: right; white-space: nowrap; }
.menu-price small { display: block; font-family: var(--sans); font-weight: 400; font-stretch: 100%; font-size: 13px; letter-spacing: 0; color: var(--text-3); margin-top: 4px; }
.menu-row .btn { grid-row: 1 / span 2; grid-column: 4; }
@media (max-width: 760px) {
  .menu-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .menu-row > .ic { width: 24px; height: 24px; grid-row: 1; }
  .menu-name .leader { display: none; }
  .menu-price { grid-column: 3; grid-row: 1; font-size: 18px; }
  .menu-row p { grid-column: 2 / -1; }
  .menu-row .btn { grid-column: 2 / -1; grid-row: auto; justify-self: start; }
}

/* ---------- home: explore panels ---------- */

.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.panel { position: relative; display: grid; align-content: end; min-height: 420px; padding: 26px; border-radius: 22px; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--line); isolation: isolate; transition: border-color .2s, transform .3s var(--ease); }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); z-index: -2; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 46, 35, 0) 28%, rgba(16, 46, 35, .55) 58%, rgba(16, 46, 35, .95)); }
.panel:hover { border-color: var(--line-2); transform: translateY(-3px); }
.panel:hover img { transform: scale(1.05); }
.panel > div { display: grid; gap: 8px; }
.panel h3 { font-weight: 900; font-size: clamp(28px, 2.8vw, 36px); line-height: 1; letter-spacing: -.025em; }
.panel p { color: var(--text-2); font-size: 15px; }
.panel .link-arrow { justify-self: start; margin-top: 6px; border-color: rgba(243, 239, 229, .3); }
.panel:hover .link-arrow { border-color: var(--gold); }
@media (max-width: 900px) { .panels { grid-template-columns: minmax(0, 1fr); } .panel { min-height: 290px; } }

.teaser { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 26px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.teaser .ic { width: 34px; height: 34px; color: var(--accent); }
.teaser h2 { font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; line-height: 1.1; }
.teaser p { color: var(--text-2); margin-top: 4px; }
@media (max-width: 760px) { .teaser { grid-template-columns: minmax(0, 1fr); } .teaser .ic { display: none; } }

/* ---------- home: the Bach HQ callout ----------
   LIVE's bach hero: the neon photo under navy, a pink glow,
   a big headline with its last words in pink, and three prints
   scattered on the table with stickers on them. */

.bach-promo { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; border-block: 1px solid rgba(255, 255, 255, .06); }
.bach-promo-bg { position: absolute; inset: 0; z-index: -3; }
.bach-promo-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.bach-promo::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50% 70% at 14% 40%, rgba(255, 79, 163, .26), transparent 64%),
    radial-gradient(45% 65% at 86% 70%, rgba(255, 79, 163, .18), transparent 66%),
    linear-gradient(90deg, var(--ink) 0%, rgba(16, 46, 35, .82) 48%, rgba(16, 46, 35, .55) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 40%);
}
.bach-promo-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; max-width: var(--max); margin: 0 auto; padding: clamp(88px, 10vw, 140px) var(--gut); }
.bach-copy { display: grid; gap: 24px; justify-items: start; }
.bach-eyebrow { color: var(--pink-ink); display: inline-flex; align-items: center; gap: 12px; }
.bach-eyebrow .rule { width: 26px; height: 1px; background: currentColor; opacity: .8; }
.bach-title { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(40px, 5.6vw, 80px); line-height: .92; letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.bach-title em { font-style: normal; color: var(--pink-ink); }
.bach-copy .lede { max-width: 46ch; }

.bach-collage { position: relative; width: 100%; aspect-ratio: 1 / .95; }
.snap {
  --r: 0deg; position: absolute; margin: 0; padding: 8px; border-radius: 20px; background: #F3EFE5;
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .9); transform: rotate(var(--r)); transition: transform .5s var(--ease);
}
.snap img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.snap-1 { --r: -4deg; left: 0; top: 12%; width: 58%; aspect-ratio: 4 / 5; }
.snap-2 { --r: 4deg; right: 2%; top: 0; width: 46%; aspect-ratio: 4 / 5; z-index: 3; }
.snap-3 { --r: 2.5deg; right: 6%; bottom: 0; width: 50%; aspect-ratio: 4 / 3; z-index: 2; }
.bach-collage:hover .snap-1 { transform: rotate(-6deg) translateY(-6px); }
.bach-collage:hover .snap-2 { transform: rotate(6deg) translateY(-6px); }
.bach-collage:hover .snap-3 { transform: rotate(1deg) translateY(-4px); }
.sticker {
  position: absolute; z-index: 4; padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(13px, 1.3vw, 17px); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .7);
}
.sticker-pink { background: var(--pink); color: #FFFFFF; left: 10%; bottom: -5%; transform: rotate(-8deg); }
.sticker-yellow { background: var(--gold); color: var(--ink); right: -4%; bottom: -7%; transform: rotate(6deg); text-transform: none; letter-spacing: -.01em; font-size: clamp(16px, 1.6vw, 21px); padding: 7px 16px; }
/* the prints land one after another when the section scrolls in */
.js .bach-collage:not(.is-in) .snap { opacity: 0; }
.bach-collage.is-in .snap { animation: snapIn .8s var(--ease) both; }
.bach-collage.is-in .snap-2 { animation-delay: .12s; }
.bach-collage.is-in .snap-3 { animation-delay: .24s; }
@keyframes snapIn { from { opacity: 0; transform: translateY(40px) rotate(0deg) scale(.94); } to { opacity: 1; transform: rotate(var(--r)); } }
@media (max-width: 900px) {
  .bach-promo-in { grid-template-columns: minmax(0, 1fr); }
  .bach-collage { max-width: 460px; justify-self: center; }
}

/* On the home page the callout is light: the page's cream, with the pinks
   deepened so they hold up on it (white on the button is 4.9:1, the pink
   text 5.9:1 on cream). */
.bach-promo.is-light {
  background: var(--cream); border: 0; border-block: 1px solid var(--line);
  --go: #D81B72; --go-hi: #C2185B; --go-glow: rgba(216, 27, 114, .35); --pink-ink: #B3175A; --accent: #B3175A;
}
.bach-promo.is-light::before { display: none; }
.bach-promo.is-light .lede { color: var(--text-2); }
.bach-promo.is-light .snap { box-shadow: 0 30px 50px -26px rgba(24, 36, 29, .4); background: #FFFFFF; }
.bach-promo.is-light .btn-line { border-color: rgba(24, 36, 29, .25); background: rgba(255, 255, 255, .55); }
.bach-promo.is-light .btn-line:hover { background: #FFFFFF; }

/* ---------- home: three links into NashvilleTN LIVE ---------- */

.golive { background: var(--bg); color: var(--text); padding: clamp(64px, 8vw, 104px) 0; }
.golive-h { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(30px, 4vw, 48px); line-height: 1; letter-spacing: -.025em; margin-bottom: clamp(22px, 3vw, 34px); }
.golive-h em { font-style: normal; color: var(--accent); }
.golive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.golive-card {
  position: relative; display: grid; align-content: start; gap: 24px; min-height: 280px; padding: clamp(26px, 2.6vw, 34px); border-radius: 26px;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.golive-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--lift); }
/* Each card leads with a photograph of what it opens (Oct. 1, 2026; it was an
   icon tile): rounded, cropped to fill, sized by srcset. */
.golive-pic { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--sage); }
.golive-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.golive-card:hover .golive-pic img { transform: scale(1.04); }
.golive-card > .ic { z-index: 1; background: var(--surface); border-radius: 999px; padding: 4px; box-sizing: content-box; }
.golive-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; }
.golive-ic .ic { width: 30px; height: 30px; }
.gi-gold { background: #FFF1D2; color: #8A4B00; }
.gi-pink { background: #FDE3EE; color: var(--pink-ink); }
.gi-green { background: var(--sage); color: var(--green); }
.golive-t { display: grid; gap: 10px; min-width: 0; }
.golive-t b { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(28px, 2.7vw, 36px); line-height: 1; letter-spacing: -.03em; }
.golive-t small { font-size: 17px; line-height: 1.45; color: var(--text-2); }
.golive-card > .ic { position: absolute; top: clamp(26px, 2.6vw, 34px); right: clamp(26px, 2.6vw, 34px); width: 24px; height: 24px; color: var(--text-3); transition: color .2s, transform .2s var(--ease); }
.golive-card:hover > .ic { color: var(--text); transform: translate(2px, -2px); }
@media (max-width: 900px) { .golive-grid { grid-template-columns: minmax(0, 1fr); } .golive-card { min-height: 0; gap: 28px; } }

/* ---------- ticket tile (dates) ---------- */

/* No stub behind it: a pink month over the day, the way a wall
   calendar reads, straight on the navy. */
.tile { display: grid; justify-items: center; align-content: center; width: 66px; height: 72px; flex: none; color: var(--text); }
.tile .m { font-family: var(--mono); font-weight: 500; font-size: 10.5px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.tile .d { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 28px; line-height: 1; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.tile .w { font-family: var(--mono); font-weight: 500; font-size: 9px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 5px; }

/* ---------- event rows ---------- */

.evlist { display: grid; border-top: 1px solid var(--line); }
.ev { position: relative; display: grid; grid-template-columns: 66px 112px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); transition: background-color .15s; }
.ev:hover { background: linear-gradient(90deg, transparent, var(--row-hover) 30%, transparent); }
.ev-img { width: 112px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--fill); }
.ev-img img { width: 100%; height: 100%; object-fit: cover; }
.ev-body { display: grid; gap: 5px; min-width: 0; }
.ev-kicker { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--text-3); letter-spacing: .14em; }
.ev-kicker .when { color: var(--gold-ink); }
.ev-title { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 22.5px; line-height: 1.15; letter-spacing: -.02em; }
.ev-title a::after { content: ""; position: absolute; inset: 0; }
.ev:hover .ev-title a { color: var(--text-hi); }
.ev-meta { color: var(--text-2); font-size: 15px; }
.ev-note { color: var(--text-2); font-size: 14.5px; max-width: 70ch; }
/* above the row's stretched title link, so a tag tap filters instead of opening the event */
.ev-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.ev-side { display: grid; justify-items: end; gap: 8px; position: relative; z-index: 2; }
.ev-price { font-weight: 600; font-size: 15px; }
.ev-group { padding: 34px 0 12px; display: flex; align-items: baseline; gap: 14px; }
.ev-group h3 { font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -.02em; }
.ev-group span { color: var(--text-3); }
@media (max-width: 760px) {
  .ev { grid-template-columns: 56px minmax(0, 1fr); gap: 12px 14px; }
  .ev .tile { width: 56px; height: 62px; }
  .ev .tile .d { font-size: 24px; }
  .ev-img { display: none; }
  .ev-side { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
  .ev-title { font-size: 20px; }
}
.ev-story { padding: 26px 0; border-bottom: 1px solid var(--line); }
.ev-story .story { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 10px 28px; align-content: center; }
.ev-story .story-media { grid-row: 1 / span 4; }
.ev-story .story > :not(.story-media) { grid-column: 2; align-self: end; }
.ev-story .story > .story-dek, .ev-story .story > .story-by { align-self: start; }
@media (max-width: 760px) {
  .ev-story .story { grid-template-columns: minmax(0, 1fr); }
  .ev-story .story-media { grid-row: auto; }
  .ev-story .story > :not(.story-media) { grid-column: 1; }
}

/* ---------- Today: hero ---------- */

.now-hero .mast-in { gap: 18px; padding-top: clamp(32px, 4vw, 52px); padding-bottom: 36px; }
.now-top { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; }
.now-top .label { color: var(--gold-ink); display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.now-top .label .ic { width: 15px; height: 15px; }
.now-top .label .clock { color: var(--text); font-variant-numeric: tabular-nums; }
.now-top .label a { color: var(--text); border-bottom: 1px solid var(--gold); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.now-big { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -.01em; }
.now-big em { font-style: normal; color: var(--gold-ink); }


/* ---------- Today: day picker ----------
   Desktop: a month card in the side column. Mobile: a strip
   of days under the heading. Same links, two layouts. */
.daypick { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.daypick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.daypick-head b { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 18px; letter-spacing: -.015em; }
.daypick-nav { display: flex; gap: 4px; }
.daypick-nav button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); transition: border-color .15s; }
.daypick-nav button:hover:not([disabled]) { border-color: var(--text-2); }
.daypick-nav button[disabled] { opacity: .3; cursor: default; }
.daypick-nav .ic { width: 16px; height: 16px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal .dow { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 4px 0 6px; }
.cal a, .cal span.off { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 999px; font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.cal span.off { color: var(--ghost); }
.cal .mo { position: absolute; top: 1px; left: 0; right: 0; font-family: var(--mono); font-size: 7.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); line-height: 1; }
.cal a[aria-current="date"] .mo { color: var(--on-go); }
.cal a { color: var(--text); transition: background-color .15s, color .15s; }
.cal a:hover { background: var(--fill-2); }
.cal a.has::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-ink); }
.cal a.is-today { box-shadow: inset 0 0 0 1.5px var(--live-ink); }
.cal a[aria-current="date"] { background: var(--go); color: var(--on-go); font-weight: 700; }
.cal a[aria-current="date"]::after { background: var(--on-go); }
.daypick-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-3); }
.daypick-foot a { font-weight: 600; color: var(--text); }
.daypick-legend { display: inline-flex; gap: 6px; align-items: center; }
.daypick-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-ink); display: inline-block; }

.datestrip { display: none; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1) 22px; padding: 2px var(--gut) 4px; scroll-snap-type: x mandatory; }
.datestrip::-webkit-scrollbar { display: none; }
.datestrip a, .datestrip .pick {
  flex: none; display: grid; justify-items: center; align-content: center; gap: 3px; width: 60px; min-height: 76px; padding: 10px 0 9px; border-radius: 16px; scroll-snap-align: start;
  border: 1px solid var(--edge); background: var(--wash); color: var(--text); transition: background-color .15s, border-color .15s;
}
.datestrip .w { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.datestrip .d { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; }
.datestrip .m { font-size: 10.5px; color: var(--text-3); }
.datestrip .pick { cursor: pointer; position: relative; }
.datestrip .pick .ic { width: 20px; height: 20px; color: var(--text); }
.datestrip a.is-today { border-color: var(--live-ink); }
.datestrip a[aria-current="date"] { background: var(--go); border-color: var(--go); color: var(--on-go); }
.datestrip a[aria-current="date"] .w, .datestrip a[aria-current="date"] .m { color: var(--on-go); }
.datestrip .pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
@media (max-width: 1080px) { .datestrip { display: flex; } .daypick { display: none; } }

/* ---------- Today: the timeline ---------- */

.day-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; }
.day-aside { position: sticky; top: calc(var(--hdr) + 20px); display: grid; gap: 16px; }
@media (max-width: 1080px) { .day-grid { grid-template-columns: minmax(0, 1fr); } .day-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } }
.aside-card { display: grid; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.aside-card .muted { font-size: 14.5px; }
.aside-card .btn { justify-self: start; }
.aside-card .inline-form .btn { justify-self: auto; }

.tl { position: relative; display: grid; }
.tl-row { display: grid; grid-template-columns: 148px 40px minmax(0, 1fr); align-items: stretch; }
.tl-when { display: grid; align-content: center; justify-items: end; gap: 6px; padding: 18px 4px 18px 0; text-align: right; }
.tl-when b { font-family: var(--display); font-weight: 800; font-stretch: 106%; font-size: 24px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-when .label { color: var(--text-3); font-size: 10px; letter-spacing: .12em; }
.tl-rail { position: relative; display: grid; place-items: center; }
.tl-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--gold); opacity: .3; }
.tl-row:first-child .tl-rail::before { top: 50%; }
.tl-row:last-child .tl-rail::before { bottom: 50%; }
.tl-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--gold-ink); background: var(--bg); transition: transform .2s var(--ease); }
.tl-row:hover .tl-dot { transform: scale(1.15); }
.tl-body { padding: 8px 0 8px 12px; min-width: 0; }
.tl-card { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .2s, transform .25s var(--ease), background-color .2s; }
.tl-card:hover { border-color: var(--line-2); transform: translateX(3px); }
.tl-card.is-paid { border-color: rgba(232, 173, 59, .35); background: linear-gradient(180deg, rgba(232, 173, 59, .06), transparent 60%), var(--surface); }
.tl-img { width: 140px; height: 140px; border-radius: 12px; overflow: hidden; background: var(--fill); }
.tl-img img { width: 100%; height: 100%; object-fit: cover; }
.tl-copy { display: grid; gap: 7px; min-width: 0; }
.tl-kicker { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--text-3); letter-spacing: .14em; }
.tl-kicker .t { color: var(--gold-ink); }
.tl-title { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 22px; line-height: 1.14; letter-spacing: -.02em; }
.tl-title a::after { content: ""; position: absolute; inset: 0; }
.tl-title .ic { width: 14px; height: 14px; display: inline; vertical-align: 1px; color: var(--text-3); }
.tl-meta { color: var(--text-2); font-size: 15px; }
.tl-meta span { color: var(--text-3); }
.tl-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 3px; }
.tl-foot .tag { position: relative; z-index: 2; }
.tl-price { font-weight: 600; font-size: 15px; }

.tl-mini { position: relative; display: flex; gap: 14px; align-items: center; padding: 13px 16px; border-radius: 14px; border: 1px dashed var(--line-2); background: var(--wash); color: var(--text-2); }
.tl-mini .ic { width: 22px; height: 22px; color: var(--gold-ink); }
.tl-mini b { color: var(--text); font-weight: 600; }
.tl-mini a::after { content: ""; position: absolute; inset: 0; }
.tl-mini .sm { font-size: 14px; color: var(--text-3); }

.tl-row.is-past { opacity: .45; }
.tl-row.is-past .tl-dot { border-color: var(--ghost); }
.tl-row.is-live .tl-dot { border-color: var(--live); background: var(--live); animation: pulse 2s infinite; }
.tl-row.is-live .tl-when b { color: var(--live-ink); }
.tl-row.is-live .tl-card { border-color: rgba(var(--live-rgb), .4); }
.tl.is-first > li { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }

.tl-now { display: grid; grid-template-columns: 148px 40px minmax(0, 1fr); align-items: center; min-height: 44px; }
.tl-now .tl-when { padding: 0 4px 0 0; }
.tl-now .tl-when b { color: var(--gold-ink); font-size: 18px; }
.tl-now .tl-when .label { color: var(--gold-ink); }
.tl-now .tl-dot { width: 14px; height: 14px; border: 0; background: var(--gold-ink); box-shadow: 0 0 0 5px rgba(232, 173, 59, .2); }
.tl-now .line { height: 2px; background: linear-gradient(90deg, var(--gold-ink), rgba(232, 173, 59, .15)); margin-left: 12px; position: relative; border-radius: 2px; }
.tl-now .line::after { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-ink); }

.tl-earlier { display: grid; grid-template-columns: 148px 40px minmax(0, 1fr); }
.tl-earlier button { grid-column: 3; justify-self: start; margin: 8px 0 8px 12px; background: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 15px; color: var(--text-2); font-weight: 500; font-size: 13.5px; transition: border-color .15s, color .15s; }
.tl-earlier button:hover { color: var(--text); border-color: var(--edge-hi); }
.tl-allday { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.tl-allday .label { color: var(--gold-ink); margin-right: 6px; }
.tl-allday a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 13px; border-radius: 999px; background: var(--fill); font-size: 14px; font-weight: 500; transition: background-color .15s; }
.tl-allday a:hover { background: var(--fill-2); }
.tl-allday a .ic { width: 13px; height: 13px; color: var(--text-3); }
.tl-allday em { font-style: normal; font-family: var(--mono); color: var(--gold-ink); font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 760px) {
  .tl-row, .tl-now, .tl-earlier { grid-template-columns: 74px 24px minmax(0, 1fr); }
  .tl-when b { font-size: 17px; letter-spacing: -.01em; }
  .tl-when .label { font-size: 9px; letter-spacing: .08em; }
  .tl-now .tl-when b { font-size: 15px; }
  .tl-body { padding-left: 6px; }
  .tl-card { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; overflow: hidden; border-radius: 16px; }
  .tl-card:hover { transform: none; }
  .tl-img { width: 100%; height: 150px; border-radius: 0; }
  .tl-copy { padding: 14px 16px 16px; }
  .tl-title { font-size: 19px; }
  .tl-dot { width: 14px; height: 14px; border-width: 2px; }
  .tl-earlier button { margin-left: 6px; }
}

/* ---------- Today: happy hours ---------- */

.hh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.hh { position: relative; display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .2s, transform .25s var(--ease); }
.hh:hover { transform: translateY(-2px); border-color: var(--line-2); }
.hh.is-live { border-color: rgba(var(--live-rgb), .4); }
.hh.is-past { opacity: .5; }
.hh.is-paid { border-color: rgba(232, 173, 59, .45); }
.hh-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.hh h3 { font-weight: 800; font-size: 20px; line-height: 1.15; letter-spacing: -.02em; }
.hh h3 a::after { content: ""; position: absolute; inset: 0; }
.hh-where { color: var(--text-3); font-size: 14px; }
.hh-deal { font-size: 15.5px; line-height: 1.45; color: var(--text); }
.hh-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14px; }
.hh-foot b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.hh-foot .label { font-size: 10px; letter-spacing: .14em; }
.hh-more { margin-top: 18px; }
.fold summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 9px 15px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); font-weight: 500; font-size: 13.5px; transition: border-color .15s, color .15s; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { color: var(--text); border-color: var(--edge-hi); }

.rows { display: grid; border-top: 1px solid var(--line); }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.row > div > b { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 18px; line-height: 1.2; letter-spacing: -.015em; }
.row a::after { content: ""; position: absolute; inset: 0; }
.row .muted { font-size: 14px; }
.row-side { text-align: right; font-size: 14px; color: var(--text-2); display: grid; justify-items: end; gap: 2px; }
.row-side b { font-size: 15px; color: var(--text); font-weight: 600; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
@media (max-width: 860px) { .cols-2 { grid-template-columns: minmax(0, 1fr); gap: 64px; } }

.ride { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.ride-img { position: relative; min-height: 320px; background: var(--fill); }
.ride-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ride-body { display: grid; gap: 16px; align-content: center; padding: clamp(24px, 4vw, 44px); }
.ride-price { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ride-price b { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 34px; letter-spacing: -.03em; }
.tips { display: grid; gap: 11px; }
.tips li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; color: var(--text-2); font-size: 15px; }
.tips .ic { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
@media (max-width: 800px) { .ride { grid-template-columns: minmax(0, 1fr); } .ride-img { min-height: 220px; } }

/* ---------- directories: eat, stay, things ---------- */

.filters { display: grid; gap: 16px; margin-bottom: 30px; }
.filters-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.search { position: relative; flex: 1 1 260px; max-width: 400px; }
.search .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-3); }
.search .input { padding-left: 44px; min-height: 46px; border-radius: 999px; }
.toggle { display: inline-flex; gap: 10px; align-items: center; font-weight: 500; font-size: 14px; color: var(--text-2); cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--go); }
.count { color: var(--text-3); font-size: 14px; }
.place .card-media { aspect-ratio: 4 / 3; }
.place-hh { display: grid; gap: 4px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--fill); border: 1px solid var(--line); font-size: 14px; }
.place-hh .label { color: var(--text-2); font-size: 10px; letter-spacing: .14em; }
.place-hh.is-live { border-color: rgba(var(--live-rgb), .3); }
.place-hh.is-live .label { color: var(--live-ink); display: inline-flex; gap: 7px; align-items: center; }
.place-hh.is-live .label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.price-level { font-weight: 600; letter-spacing: .06em; color: var(--text-2); }
.price-level i { font-style: normal; color: var(--ghost); }
.more-row { display: flex; justify-content: center; margin-top: 28px; }

.hotel-search {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin-top: 10px;
  padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lift);
}
.hotel-search .field > span { color: var(--text-3); }
.hotel-search .input, .hotel-search .select { min-height: 50px; }
@media (max-width: 900px) { .hotel-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hotel-search .btn { grid-column: 1 / -1; } }
.card-meta .ic { width: 15px; height: 15px; display: inline; vertical-align: -2px; color: var(--text-3); }

.hoods { display: grid; gap: 16px; }
.hood { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--surface); }
.hood-img { position: relative; min-height: 230px; background: var(--fill); }
.hood-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hood-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, var(--surface), transparent 45%); pointer-events: none; }
.hood-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 30px; padding: 24px 26px; }
.hood-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.hood-head h3 { font-weight: 900; font-size: 26px; line-height: 1.05; letter-spacing: -.025em; }
.hood-line { grid-column: 1 / -1; color: var(--text-2); }
.hood-line b { color: var(--text); font-weight: 600; }
.hood ul { display: grid; gap: 7px; font-size: 15px; color: var(--text-2); }
.hood li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.hood li .ic { width: 16px; height: 16px; margin-top: 3px; }
.hood .love .ic { color: var(--live-ink); }
.hood .watch .ic { color: var(--text-3); }
.hood .label { color: var(--text-3); margin-bottom: 4px; }
.hood-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 6px; }
@media (max-width: 860px) {
  .hood { grid-template-columns: minmax(0, 1fr); } .hood-img { min-height: 190px; } .hood-body { grid-template-columns: minmax(0, 1fr); }
  .hood-img::after { background: linear-gradient(to top, var(--surface), transparent 50%); }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.media-frame { border-radius: var(--r); aspect-ratio: 4 / 3; }

.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 19px; line-height: 1.25; letter-spacing: -.015em; transition: color .15s; }
.faq summary:hover { color: var(--text-hi); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--accent); transition: transform .25s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--text-2); max-width: 72ch; animation: fade .3s ease; }

/* ---------- Bach HQ ---------- */

.bach-hero { background: var(--cream); } /* cream like every other page top (Oct. 1, 2026; it was blush) */
.bach-hero .hero-bg { display: none; }
.bach-hero .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
@media (max-width: 980px) { .bach-hero .hero-in { grid-template-columns: minmax(0, 1fr); } }
/* The headline sizes to its column, not the window: "bachelorette," is
   7.7em wide, so beside the planner card it has to shrink to fit. */
.bach-hero .hero-copy { container-type: inline-size; }
.bach-hero .display { font-size: min(clamp(42px, 6.4vw, 86px), 12.5cqi); }
/* the planner card, glowing pink the way LIVE's does */
.quickplan {
  display: grid; gap: 20px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg); background: #FFFFFF;
  border: 1px solid rgba(194, 24, 91, .14); box-shadow: 0 40px 90px -50px rgba(194, 24, 91, .45);
  animation: rise .9s .15s var(--ease) both;
}
.qp-row { display: grid; gap: 9px; }
.qp-row > span { font-weight: 500; font-size: 13px; color: var(--text-2); }

.pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pkg { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: transform .25s var(--ease), border-color .2s, box-shadow .25s var(--ease); }
.pkg:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--lift); }
.pkg-media { position: relative; aspect-ratio: 16 / 10; background: var(--fill); overflow: hidden; }
.pkg-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pkg-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface) 0%, color-mix(in srgb, var(--surface) 20%, transparent) 50%, transparent 100%); }
.pkg:hover .pkg-media img { transform: scale(1.04); }
.pkg-body { position: relative; display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 0 24px 24px; margin-top: -26px; }
.pkg.is-lead { border-color: rgba(255, 79, 163, .45); box-shadow: 0 30px 90px -50px rgba(255, 79, 163, .7); }
.pkg .flag { position: absolute; z-index: 2; top: 14px; right: 14px; background: var(--pink); border-color: var(--pink); color: #FFFFFF; }
.pkg h3 { font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; }
.pkg-price { display: flex; align-items: baseline; gap: 8px; }
.pkg-price b { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 38px; line-height: 1; letter-spacing: -.03em; }
.pkg ul { display: grid; gap: 9px; font-size: 14.5px; color: var(--text-2); padding-top: 14px; border-top: 1px solid var(--line); }
.pkg li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; }
.pkg li .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
.pkg .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) { .pkgs { grid-template-columns: minmax(0, 1fr); } }
/* Feature My Event: two plans, no photos, and the paid one in gold. */
.pkgs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; }
@media (max-width: 760px) { .pkgs-2 { grid-template-columns: minmax(0, 1fr); } }
.pkg-plain .pkg-body { margin-top: 0; padding-top: 26px; }
.pkg-price .muted { font-size: 14px; }
/* "Starting at" sits on its own line above the price. */
.pkg-price { flex-wrap: wrap; row-gap: 2px; }
.pkg-price > .muted:first-child { flex-basis: 100%; }
.pkg.is-gold { border-color: rgba(232, 173, 59, .45); box-shadow: 0 30px 90px -50px rgba(232, 173, 59, .6); }
.pkg.is-gold .flag { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.fe-form { gap: 26px; max-width: 920px; }
.fe-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.fe-set legend { padding: 0; margin-bottom: 14px; }

.weekend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wk-day { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.wk-day h3 { padding: 18px 20px; font-weight: 900; font-size: 22px; letter-spacing: -.02em; background: var(--wash); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.wk-day h3 span { font-family: var(--mono); font-weight: 400; font-stretch: 100%; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.wk-day li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 15px; }
.wk-day li:first-child { border-top: 0; }
.wk-day li b { font-family: var(--display); font-weight: 800; font-stretch: 106%; font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; }
.wk-day li span { color: var(--text-2); }
.wk-day li strong { display: block; color: var(--text); font-weight: 600; }
@media (max-width: 960px) { .weekend { grid-template-columns: minmax(0, 1fr); } }
/* Bach HQ's template: the pitch on the left, the three days on the right as
   printed cards in a loose stack, so the plan reads like a thing you get. */
.wk-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.wk-copy { position: sticky; top: calc(var(--hdr) + 40px); gap: 18px; }
.wk-cta { display: grid; justify-items: start; gap: 12px; margin-top: 14px; }
.wk-btn { border-width: 2px; border-color: var(--accent); color: var(--accent); }
.wk-btn:hover { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.wk-stack { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 6px 0; }
.wk-stack .wk-day {
  position: relative; border-color: var(--line-2); box-shadow: 0 2px 0 rgba(24, 36, 29, .04), 0 24px 44px -26px rgba(24, 36, 29, .38);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wk-stack .wk-day + .wk-day { margin-top: -14px; }
.wk-stack .wk-day:nth-child(1) { transform: rotate(-1.4deg) translateX(-10px); z-index: 1; }
.wk-stack .wk-day:nth-child(2) { transform: rotate(.9deg) translateX(12px); z-index: 2; }
.wk-stack .wk-day:nth-child(3) { transform: rotate(-.6deg) translateX(-4px); z-index: 3; }
.wk-stack .wk-day:hover { transform: none; z-index: 4; box-shadow: 0 2px 0 rgba(24, 36, 29, .04), 0 34px 60px -28px rgba(24, 36, 29, .45); }
@media (max-width: 960px) {
  .wk-split { grid-template-columns: minmax(0, 1fr); }
  .wk-copy { position: static; }
  .wk-stack .wk-day:nth-child(n) { transform: none; }
  .wk-stack .wk-day + .wk-day { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .wk-stack .wk-day { transition: none; } }

/* ---------- the quiz ---------- */

.quiz-shell { min-height: calc(100vh - var(--hdr)); display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); background: var(--bg); }
.quiz-bar { position: sticky; top: var(--hdr); z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) { .quiz-bar { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px); } }
.quiz-bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: var(--max); margin: 0 auto; padding: 14px var(--gut); }
/* the trip so far, on every step: what kind of group leads, the rest follow */
.quiz-trail { flex-basis: 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
.quiz-trail::-webkit-scrollbar { display: none; }
.trail-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--wash); color: var(--text); font-weight: 500; font-size: 13px;
  transition: border-color .15s; animation: rise .35s var(--ease) both;
}
.trail-chip:hover { border-color: var(--edge-hi); }
.trail-chip.is-main { background: var(--go); border-color: var(--go); color: var(--on-go); font-weight: 600; }
.trail-chip .k { color: var(--text-3); font-weight: 400; }
.trail-chip.is-main .k { color: inherit; opacity: .7; }
.quiz-body { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--max); width: 100%; margin: 0 auto; padding: 0 var(--gut); }
.quiz-body .quiz { padding-left: 0; padding-right: 0; margin: 0 auto; max-width: 860px; }
.quiz-back { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px 0 10px; background: none; border: 0; border-radius: 999px; color: var(--text-2); font-weight: 500; font-size: 14px; }
.quiz-back:hover { color: var(--text); background: var(--fill); }
.quiz-back .ic { width: 18px; height: 18px; }
.progress { flex: 1; height: 6px; border-radius: 6px; background: var(--fill-2); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--go); border-radius: 6px; transition: width .45s var(--ease); }
.quiz-step-n { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.quiz { max-width: 920px; width: 100%; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gut) 96px; }
.q { display: grid; gap: 28px; border: 0; margin: 0; padding: 0; min-width: 0; animation: rise .5s var(--ease) both; }
.q legend { padding: 0; display: grid; gap: 14px; margin-bottom: 30px; width: 100%; }
.q-kicker { color: var(--accent); }
.q-title { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(34px, 5vw, 60px); line-height: .98; letter-spacing: -.025em; outline: none; text-wrap: balance; }
.q-help { color: var(--text-2); font-size: 17px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.opt span { display: grid; gap: 5px; align-content: center; min-height: 80px; padding: 17px 50px 17px 20px; border: 1px solid var(--edge); border-radius: var(--r); background: var(--surface); transition: border-color .15s, background-color .15s, color .15s, transform .2s var(--ease), box-shadow .2s; }
.opt b { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 18.5px; line-height: 1.15; letter-spacing: -.015em; }
.opt small { color: var(--text-2); font-size: 14px; line-height: 1.4; }
.opt:hover span { border-color: var(--edge-hi); transform: translateY(-1px); }
.opt input:checked + span {
  background: color-mix(in srgb, var(--go) 10%, var(--surface)); border-color: var(--go);
  box-shadow: 0 0 0 1px var(--go), 0 18px 40px -26px var(--go-glow); animation: pick .3s var(--ease);
}
.opt input:focus-visible + span { outline: 2px solid var(--go); outline-offset: 3px; }
@keyframes pick { 0% { transform: scale(.98); } 60% { transform: scale(1.01); } 100% { transform: scale(1); } }
.opt-big span { min-height: 150px; padding: 26px; }
.opt-big b { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.025em; }
.opts-2 .opt-big small { font-size: 15.5px; }
.opt .check-mark { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--ghost); display: grid; place-items: center; z-index: 0; transition: background-color .15s, border-color .15s; }
.opt input:checked ~ .check-mark { background: var(--go); border-color: var(--go); }
.opt .check-mark .ic { width: 14px; height: 14px; color: var(--on-go); opacity: 0; transition: opacity .15s; }
.opt input:checked ~ .check-mark .ic { opacity: 1; }
.q-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.q-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.q-sub { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.q-sub > .label { color: var(--text-3); }
.group-pick { display: grid; gap: 16px; }
.group-big { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.group-big .stepper button { width: 58px; height: 58px; }
.group-big .stepper output { font-size: 38px; min-width: 88px; }
.group-hint { color: var(--text-2); font-size: 16px; max-width: 40ch; }
.group-hint b { color: var(--text); font-weight: 600; }
.range { width: 100%; accent-color: var(--go); height: 28px; }
@media (max-width: 560px) {
  .opts-2 { grid-template-columns: minmax(0, 1fr); }
  .opt-big span { min-height: 108px; }
  .quiz-bar-in { gap: 10px; }
}

/* ---------- the plan ---------- */

/* A compact head so the schedule is the first thing you see. */
.plan-head-sec { padding-bottom: 0; }
.plan-days-sec { padding-top: 28px; }
.plan-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 16px 40px; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--line-2); }
.plan-intro { display: grid; gap: 14px; align-content: start; }
.plan-intro .h3 { outline: none; }
.plan-side { display: grid; gap: 12px; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-cost { display: grid; gap: 2px; }
.plan-cost b { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 24px; line-height: 1; letter-spacing: -.03em; }
.plan-cost .muted { font-size: 14px; }
.meter { height: 6px; border-radius: 6px; background: var(--fill-2); overflow: hidden; margin-top: 8px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--live), var(--gold)); border-radius: 6px; transition: width .5s var(--ease); }
.meter.is-over i { background: linear-gradient(90deg, var(--gold), var(--red)); }
@media (max-width: 860px) { .plan-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .plan-actions .btn { flex: 1 1 calc(50% - 4px); padding-left: 12px; padding-right: 12px; }
  .plan-actions .btn:first-child { flex-basis: 100%; }
}

.days { display: grid; gap: 48px; }
.day-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.day-h b { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(24px, 3vw, 34px); line-height: 1; letter-spacing: -.025em; }
.day-h .label { color: var(--accent); }
.day-h .day-cost { margin-left: auto; color: var(--text-2); font-weight: 500; font-size: 14px; }
.stops { display: grid; }
.stop { position: relative; display: grid; grid-template-columns: 96px 100px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.days.is-first .stop { animation: rise .5s var(--ease) both; }
.stop-time { display: grid; gap: 5px; }
.stop-time b { font-family: var(--display); font-weight: 800; font-stretch: 106%; font-size: 21px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stop-time .label { color: var(--text-3); font-size: 10px; }
.stop-img { width: 100px; height: 100px; border-radius: 14px; overflow: hidden; background: var(--fill); display: grid; place-items: center; }
.stop-img img { width: 100%; height: 100%; object-fit: cover; }
.stop-img .ic { width: 32px; height: 32px; color: var(--text-3); }
.stop-copy { display: grid; gap: 5px; min-width: 0; }
.stop-title { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 20px; line-height: 1.18; letter-spacing: -.018em; }
.stop-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.stop-meta { color: var(--text-2); font-size: 15px; }
.stop-why { display: inline-flex; gap: 7px; align-items: center; color: var(--text-3); font-size: 13.5px; }
.stop-why .tristar { width: 14px; height: 12px; color: var(--gold-ink); flex: none; }
.stop-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stop-book { justify-self: start; font-weight: 600; font-size: 14.5px; display: inline-flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--line-2); margin-top: 2px; transition: border-color .15s; }
.stop-book:hover { border-color: var(--accent); }
.stop-book .ic { width: 14px; height: 14px; }
.stop-tools { display: flex; gap: 4px; }
.tool { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--wash); color: var(--text-2); transition: border-color .15s, color .15s, background-color .15s; }
.tool:hover { border-color: var(--edge-hi); color: var(--text); }
.tool .ic { width: 17px; height: 17px; }
.tool[disabled] { opacity: .3; cursor: default; }
.stop.is-fixed .stop-title { font-size: 18px; }
.stop.is-new { animation: flash 1.4s ease; }
@keyframes flash { from { background: rgba(232, 173, 59, .22); } to { background: transparent; } }
/* The swap dropdown opens under its stop, full width. */
.swap-menu { grid-column: 1 / -1; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); animation: rise .25s var(--ease); }
.swap-menu > .label { padding: 2px 4px 4px; }
.swap-opt { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 6px; text-align: left; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
.swap-opt:hover, .swap-opt:focus-visible { border-color: var(--line-2); background: var(--wash); outline: none; }
.swap-opt .stop-img { width: 52px; height: 52px; border-radius: 10px; display: grid; }
.swap-opt b { display: block; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.swap-opt b + span { font-size: 13.5px; color: var(--text-2); }
.add-stop { margin-top: 14px; }
.add-panel { display: grid; gap: 14px; margin-top: 14px; padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r); animation: rise .35s var(--ease); }
.add-list { display: grid; gap: 8px; }
.add-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.add-item .stop-img { width: 58px; height: 58px; border-radius: 10px; }
.add-item b { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 16px; display: block; line-height: 1.2; letter-spacing: -.01em; }
.add-item span { font-size: 13.5px; color: var(--text-2); }
@media (max-width: 760px) {
  .stop { grid-template-columns: 70px minmax(0, 1fr); gap: 10px 14px; align-items: start; }
  .stop-img { display: none; }
  .stop-time b { font-size: 17px; }
  .stop-tools { grid-column: 2; }
  .stop-title { font-size: 18px; }
}

.stay-box { display: grid; gap: 18px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
/* "Let us plan it for you" on the plan page: the stay box, with the button beside the copy. */
.lup { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 32px; }
@media (max-width: 640px) { .lup { grid-template-columns: 1fr; } .lup .btn { justify-self: start; } }
.stay-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.stay-item { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--wash); }
.stay-item .card-media { border-radius: 10px; aspect-ratio: 16 / 10; }
.stay-item .card-media::after { display: none; }
.stay-item b { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; }
.stay-item > span { font-size: 14px; color: var(--text-2); }
.stay-item .btn { justify-self: start; }

.send { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.send-copy { display: grid; gap: 16px; }
.send-done { display: grid; gap: 16px; padding: clamp(24px, 3vw, 34px); border-radius: 22px; background: var(--surface); border: 1px solid rgba(var(--live-rgb), .35); animation: rise .5s var(--ease); }
.send-done .label { display: inline-flex; gap: 8px; align-items: center; color: var(--live-ink); }
@media (max-width: 860px) { .send { grid-template-columns: minmax(0, 1fr); } }
.upsells { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.devbox { margin-top: 18px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px; color: var(--text-2); }
.devbox summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.devbox pre { max-height: 380px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12px; line-height: 1.45; margin: 10px 0 0; }

/* ---------- small helpers ---------- */

.stack { display: grid; gap: 16px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mt-s { margin-top: 12px; } .mt { margin-top: 24px; } .mt-l { margin-top: 40px; }
[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(--on-text); padding: 13px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); 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; }
}

/* =========================================================
   Color lift, 2026-10-01 — "a touch lighter and more fun".
   Color only: no layout, spacing, size, radius, font, transform
   or copy changes. Music City green #1E5A43 / #256B50, gold
   #E8AD3B / #F3C55F and --ink #102E23 are untouched.

   Two parts, so it folds into site.css cleanly:
   PART 1  tokens     custom properties only, grouped by the token
                      block they belong to in site.css
   PART 2  selectors  component overrides, each replacing (or sitting
                      right after) the rule it names
   ========================================================= */


/* #########################################################
   PART 1 — TOKENS
   ######################################################### */

/* :root — the brand fills */
:root {
  --cream: #FBF8F1;        /* was #F7F2E8: lighter, same hue (it is --on-green, already in the system) */
  --green-deep: #1B533F;   /* was #15402F: the newsletter band, a livelier deep green under the button green */
  --sage: #E1F1E9;         /* was #E6EEE4: moved from olive onto the brand hue */
  --isle: #143F2F;         /* new: the footer and .on-ink band (they used --ink #102E23, near-black). 1.32:1 against the newsletter band, so the seam stays */
  --gold-rule: #E09A1E;    /* new: decorative gold for eyebrow rules and the home tristar, never type */
}

/* :root, .is-light — day: cream paper */
:root,
.is-light {
  --surface: #FFFFFF;      /* was #FFFDF9: white cards on the brighter cream */
  --surface-2: #FFFDF8;    /* was #FBF8F1: the planner panel, a step off the new cream */
  --wash: #FFFFFF;         /* was rgba(255, 255, 255, .7): chips and pills read white, not grey */
  --fill: rgba(30, 90, 67, .05);        /* was rgba(24, 36, 29, .045): green-tinted, not grey-brown */
  --fill-2: rgba(30, 90, 67, .085);     /* was rgba(24, 36, 29, .075) */
  --line: rgba(30, 90, 67, .14);        /* was rgba(24, 36, 29, .11): same card edge as before on the lighter cream (1.24:1) */
  --line-2: rgba(30, 90, 67, .24);      /* was rgba(24, 36, 29, .19): outlined buttons keep their edge (1.47:1 on cream) */
  --hairline: rgba(30, 90, 67, .09);    /* was rgba(24, 36, 29, .08) */
  --edge: rgba(30, 90, 67, .18);        /* was rgba(24, 36, 29, .15) */
  --edge-hi: rgba(30, 90, 67, .42);     /* was rgba(24, 36, 29, .32) */
  --row-hover: rgba(30, 90, 67, .04);   /* was rgba(24, 36, 29, .035) */
  --lift: 0 24px 44px -28px rgba(20, 64, 47, .32);     /* was ... rgba(24, 36, 29, .3) */
  --lift-lg: 0 30px 70px -30px rgba(20, 64, 47, .36);  /* was ... rgba(24, 36, 29, .35) */

  --text-2: #465B50;       /* was #4B564F: green ink, not khaki. 6.89:1 on cream */
  --text-3: #536B5F;       /* was #5F6B63: 5.45:1 on cream, 4.76:1 on blush */
  --gold-ink: #9C5900;     /* was #8E5B05: amber, not mustard. 5.15:1 on cream, 4.88:1 on butter */

  --butter: #FFF1D2;       /* new: the gold pops' fill (featured flag, date pill, steps, timeline dots) */
  --tint: var(--sage);     /* new: content tags, hovered chips, the happy-hour box */
  --tint-ink: var(--green);  /* new: type on --tint. 6.91:1 */
  --tag-line: transparent; /* new: filled tags need no outline */
}

/* .on-ink, .ftr, .nl, .panel — night: the deep-green islands */
.on-ink, .ftr, .nl, .panel {
  --surface: #1F5741;      /* was #1A4535: the Stay form card still lifts off its lighter band */
  --text-2: #D3DFD6;       /* was #C3CFC6: 6.12:1 on the form card */
  --text-3: #B4C6B9;       /* was #97A99C (4.35:1 on the form card): 4.69:1 there now */
  --error: #FFB4A8;        /* was #FF9A8A: 4.94:1 on the form card, 5.24:1 on the newsletter band */
  --pink-ink: #FF8CC4;     /* was #FF74B6: 4.73:1 on the footer */

  --butter: transparent;   /* new: on the islands a gold pop is an outline; gold type on a 10% wash would be 4.31:1 on the lighter footer */
  --tint: transparent;     /* new: tags stay outlines on the islands */
  --tint-ink: var(--text-2);  /* new: tag type, as the old outline tags had it */
  --tag-line: var(--line-2);  /* new: the outline itself */
}

/* .nl — the newsletter band (fold into the .nl rule, after the island set).
   On the lighter band, small gold type takes the brighter gold
   (#E8AD3B would be 4.45:1). The headline words keep --gold (PART 2). */
.nl {
  --gold-ink: #F3C55F;     /* was #E8AD3B (island set): 5.50:1 on the band */
}

/* .bach — new block, right after ".bach, .bach :is(.on-ink, .nl), .on-ink.bach".
   Bach HQ keeps the old neutral lines so no green edge reaches its pink
   chips and fields, and its soft fill is blush with pink ink. The
   islands inside re-declare their own. --go is unchanged. The neutral
   values below are the old day values, so on Bach HQ they do not move. */
.bach {
  --fill: rgba(24, 36, 29, .045);       /* new here: Bach HQ keeps the old value (day set is now rgba(30, 90, 67, .05)) */
  --fill-2: rgba(24, 36, 29, .075);     /* new here: keeps the old value */
  --line: rgba(24, 36, 29, .11);        /* new here: keeps the old value */
  --line-2: rgba(24, 36, 29, .19);      /* new here: keeps the old value */
  --hairline: rgba(24, 36, 29, .08);    /* new here: keeps the old value */
  --edge: rgba(24, 36, 29, .15);        /* new here: keeps the old value */
  --edge-hi: rgba(24, 36, 29, .32);     /* new here: keeps the old value */
  --row-hover: rgba(24, 36, 29, .035);  /* new here: keeps the old value */
  --tint: #FDE6EF;         /* new here (day set: sage): blush on Bach HQ */
  --tint-ink: var(--pink-ink);  /* new here (day set: green): #C2185B, 4.96:1 on the blush */
}

/* .bach .hdr.is-light — new block. The header re-applies the day set, so on
   Bach HQ it takes the old neutral lines too (no green hairline there). */
.bach .hdr.is-light {
  --fill: rgba(24, 36, 29, .045);       /* new here: keeps the old value */
  --line: rgba(24, 36, 29, .11);        /* new here: keeps the old value */
  --line-2: rgba(24, 36, 29, .19);      /* new here: keeps the old value */
  --hairline: rgba(24, 36, 29, .08);    /* new here: keeps the old value */
  --edge: rgba(24, 36, 29, .15);        /* new here: keeps the old value */
  --edge-hi: rgba(24, 36, 29, .32);     /* new here: keeps the old value */
  --row-hover: rgba(24, 36, 29, .035);  /* new here: keeps the old value */
}


/* #########################################################
   PART 2 — SELECTORS
   ######################################################### */

/* ---------- islands ---------- */

/* The footer and the Stay room-block band: still the deepest green, no longer near-black. */
.ftr, .on-ink { background: var(--isle); }

/* ---------- eyebrows ---------- */

/* The short rule before a section eyebrow turns gold; the label itself stays green. */
:is(.sh-copy, .mast-in, .hero-copy, .nl-copy, .stack, .ride-body, .send-copy, .plan-intro) > .label:not(:has(svg, .dot-live, .rule))::before { background: var(--gold-rule); }
/* On Bach HQ the rule follows its pink label, as before. */
.bach :is(.sh-copy, .mast-in, .hero-copy, .nl-copy, .stack, .ride-body, .send-copy, .plan-intro) > .label:not(:has(svg, .dot-live, .rule))::before { background: currentColor; }

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

/* Content tags: a soft mint fill with green type (blush and pink on Bach HQ, outlines on the islands). */
.tag { background: var(--tint); border-color: var(--tag-line); color: var(--tint-ink); }
/* Tags that are buttons (the event-row filters, "Edit answers") keep the outline, so they read as controls. */
button.tag { background: transparent; border-color: var(--line-2); color: var(--text-2); }
/* The special tags, re-declared after the base so they keep their meaning. Sponsored stays a quiet outline. */
.tag-sponsored { background: transparent; border-color: var(--line-2); color: var(--text-3); }
.tag-partner { background: var(--gold); border-color: var(--gold); color: var(--ink); }
/* Featured is a paid tier: re-declared at its site.css values so it is no louder than before. */
.tag-featured { background: rgba(232, 173, 59, .1); border-color: rgba(232, 173, 59, .35); color: var(--gold-ink); }
.tag-original { background: var(--text); border-color: var(--text); color: var(--on-text); }
.tag-live, .tag-soon, .tag-done { background: transparent; border-color: transparent; }
.tag-live { color: var(--live-ink); }
.tag-soon { color: var(--text); }
.tag-done { color: var(--text-3); }

/* ---------- chips and options ---------- */

/* Under the pointer, an unchosen chip or option takes the soft fill and a tint of the "do this" color. Chosen ones never change. */
.chip:hover:where(:not([aria-pressed="true"]):not([aria-current="true"])),
.seg label:hover input:not(:checked) + span,
.quick a:hover { background: var(--tint); border-color: color-mix(in srgb, var(--go) 45%, transparent); color: var(--text); }

/* ---------- gold pops ---------- */

/* Book It's step numbers in butter with a gold edge. */
.steps li::before { background: var(--butter); border-color: rgba(232, 173, 59, .6); }

/* ---------- home ---------- */

/* The date and weather pill under the hero button, in butter. */
.hero-live { background: var(--butter); border-color: rgba(232, 173, 59, .55); }
.hero-live:hover { background: #FFF8E8; border-color: var(--green); }  /* hover still switches to the "do this" green, as before */
/* The hero eyebrow's three stars go gold; the label stays green. */
.hero-light .hero-eyebrow .tristar { color: var(--gold-rule); }
/* The hero quiz answers: faint mint tiles at rest; the existing hover (sage + green border) still wins. */
.qcard-opts a { background: #F3FAF6; }
/* Pink stickers take ink type: white on #FF4FA3 is 3.04:1, ink is 4.80:1. */
.sticker-pink { color: var(--ink); }

/* ---------- newsletter band ---------- */

/* A flat band: the gold and pink glows mixed into olive and mauve patches on the green. */
.nl::before { background: none; }
/* LIVE's gold dot screen stays, a touch stronger so it still reads as gold on the lighter band. */
.nl::after { opacity: .28; }
/* The big headline words keep the brand gold, to match the sticker and the button. */
.nl .feat-title em { color: var(--gold); }
/* A white email pill instead of a sunken near-black one. Done with tokens, so the gold focus border and the red invalid border still win. */
.nl .nl-row { --field: #FFFFFF; --line-2: transparent; --text: #18241D; --text-3: #536B5F; --error: #B42318; }
/* On the white pill, Subscribe's focus ring is ink (gold on white would be 2.01:1). */
.nl .nl-row .btn:focus-visible { outline-color: var(--ink); }
/* An invalid pill also gets a salmon ring, so it reads against the green band (5.24:1). */
.nl .nl-row:has([aria-invalid="true"]) { box-shadow: 0 0 0 2px #FFB4A8; }
/* Sticker shadows in green-black, not pure black, on the lighter band. */
.nl-inside li { box-shadow: 0 12px 24px -12px rgba(8, 36, 25, .6); }
/* The four stickers: pink, apricot, gold, mint, all with ink type. */
.nl-inside .t1 { color: var(--ink); }
.nl-inside .t2 { background: #FFD9BE; }
.nl-inside .t4 { background: #C5E8D4; }

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

/* Column heads in gold instead of grey. */
.ftr h2 { color: var(--gold-ink); }
/* The email link gets a gold underline. */
.ftr-about a:not(.brand):not(.ftr-live) { border-bottom-color: rgba(232, 173, 59, .5); }
/* Link icons in gold. */
.ftr li .ic { color: var(--gold-ink); }
/* Hovered links turn bright gold (the near-white rest and hover were too close). */
.ftr li a:hover { color: var(--gold-hi); }

/* ---------- Eat & Drink ---------- */

/* The happy-hour box on place cards: only a happy hour that is on right now gets the soft fill.
   Boxes that are over or later keep site.css (faint --fill, --line edge, --text-2 label). */
.place-hh.is-live { background: var(--tint); border-color: rgba(var(--live-rgb), .45); }
.place-hh.is-live .label { color: var(--live-ink); }
/* On Bach HQ the live box is blush with pink type; the green dot stays the "now" signal. */
.bach .place-hh.is-live { border-color: color-mix(in srgb, var(--pink-ink) 35%, transparent); }
.bach .place-hh.is-live .label { color: var(--pink-ink); }

/* ---------- Stay ---------- */

/* Neighborhoods: what we love in green, the heads-ups in amber, so the two lists read apart. */
.hood .love .label { color: var(--live-ink); }
.hood .watch .label, .hood .watch .ic { color: var(--gold-ink); }

/* ---------- Today ---------- */

/* Butter dots along the gold timeline. */
.tl-dot { background: var(--butter); }
/* The happy-hour and sunset notes get a gold dashed edge, no fill. Paid cards stay exactly as they are. */
.tl-mini { border-color: rgba(232, 173, 59, .6); }

/* ---------- Bach HQ ---------- */

/* The package flag in the deeper pink, so its white label passes (4.86:1). */
.pkg .flag { background: #D81B72; border-color: #D81B72; }
/* The weekend day headers on a blush strip. */
.bach .wk-day h3 { background: #FDF0F5; }
/* Focus rings in the deeper pink (#FF4FA3 was 2.87:1 on cream; #C2185B is 5.54:1). The button fill is unchanged. */
.bach :focus-visible, .bach .seg input:focus-visible + span, .bach .opt input:focus-visible + span { outline-color: var(--pink-ink); }

/* The newsletter popup stays green on Bach HQ too (Oct. 1, 2026): it is
   the site's newsletter, not a Bach HQ feature. */
.bach .nl-pop {
  --go: var(--green);
  --go-hi: var(--green-hi);
  --on-go: var(--on-green);
  --go-glow: rgba(30, 90, 67, .38);
  --accent: var(--green);
  --tint: var(--sage);
  --tint-ink: var(--green);
}
/* The newsletter band on Bach HQ keeps its gold button like every other page. */
.bach .nl {
  --go: var(--gold);
  --go-hi: var(--gold-hi);
  --on-go: var(--ink);
  --go-glow: rgba(232, 173, 59, .45);
  --accent: var(--gold-ink);
}

/* Privacy policy and other legal pages */
.legal-in { max-width: 760px; }
.legal-in h1 { margin: 8px 0 4px; }
.legal-in h2 { margin: 40px 0 12px; }
.legal-in p, .legal-in li { line-height: 1.65; }
.legal-in p + p { margin-top: 12px; }
.legal-in ul { padding-left: 1.2em; display: grid; gap: 10px; list-style: disc; }
.legal-in a { text-decoration: underline; text-underline-offset: 2px; }
.ftr-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }