/* =========================================================================
   NASHVILLE DAYS 2027 THEME
   "The Boutique Fayre" — red, white (parchment) and navy blue, in flat
   block colours, drawn from the new tri-colour wood-type logo. Old-time
   Americana in spirit (letterpress, ticket stubs, hand-painted signage),
   never flag-patriotic. A pop-up country fayre, not a travelling circus:
   restrained, spacious, upscale.

   Loaded AFTER index-*.css and site.css, so it wins the cascade. Structure
   and JS are unchanged; this is a full visual re-skin plus a small number
   of new components (block sections, ticket-stub, signpost illustration).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');

:root {
  /* ---- Core palette, sampled from logo_2027.png (navy #0f3860, red
     #a11d11, tan/cream #c9ab87), tuned for on-screen contrast. ---- */
  --background: 36 42% 95%;      /* warm parchment paper */
  --foreground: 211 60% 20%;     /* true logo navy, doubles as ink/text */
  --card-foreground: 211 60% 20%;
  --primary: 5 72% 36%;          /* true logo red -> CTAs, one banner block */
  --primary-foreground: 38 45% 97%;
  --secondary: 211 24% 90%;      /* cool navy-tinted neutral */
  --secondary-foreground: 211 40% 26%;
  --muted: 36 26% 91%;
  --muted-foreground: 211 14% 40%;
  --border: 36 20% 84%;
  --sage: 211 46% 28%;           /* "sage" tokens now read navy */
  --sage-light: 211 38% 42%;

  /* ---- New tokens for the 2027 system ---- */
  --navy: 211 60% 20%;
  --navy-deep: 211 64% 13%;
  --tan: 33 40% 66%;             /* true logo tan -> hairlines, borders, stars */
  --tan-light: 33 46% 88%;
  --cream-ink: 38 45% 97%;       /* warm near-white, text on dark blocks */
  --red-deep: 5 70% 27%;
}

/* =========================================================================
   1. RETIRE THE OLD GOLD — every hardcoded gold hex in site.css, mapped
      one-for-one to the new tan/red palette so no markup has to change.
   ========================================================================= */
.nd-artist__role,
.nd-weather__icon,
.nd-count__n,
.nd-feat__ic,
.nd-faq-item h3 button svg { color: hsl(var(--tan)) !important; }

.nd-artist__socials a:hover { color: hsl(var(--navy-deep)); background: hsl(var(--tan)); border-color: transparent; }
.nd-vendor__img--fallback svg { color: hsl(var(--tan)); }
.nd-vendor__name a:hover,
.nd-vendor__link,
.nd-dropcap::first-letter { color: hsl(var(--primary)); }
.nd-notice { border-color: hsl(var(--border)) !important; }
.nd-notice__dot { background: hsl(var(--primary)); animation: ndPulse 2.2s ease-in-out infinite; }
.nd-artist--tba .nd-artist__role { border-color: hsl(var(--tan) / .4); }
.nd-live-badge, .nd-artist__badge { border-color: hsl(var(--tan) / .18); }
.nd-count__n { background: linear-gradient(90deg, hsl(var(--tan)), hsl(var(--tan) / 0)); }
.nd-hero__see,
.nd-hero__see:hover { color: hsl(var(--cream-ink)); border-color: hsl(var(--cream-ink) / .7); }
.nd-hero__tick { background: hsl(var(--tan) / .85); }
.nd-hero__scrollline { background: linear-gradient(180deg, hsl(var(--tan) / 0), hsl(var(--tan))); }
.nd-sec__title em { background: linear-gradient(135deg, hsl(var(--primary)), hsl(5 66% 46%) 45%, hsl(var(--primary))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nd-sec__no,
.nd-dropcap::first-letter { color: hsl(var(--primary)); }
.nd-chip--dark { color: hsl(var(--cream-ink)); border-color: hsl(var(--cream-ink) / .38); background: hsl(var(--navy-deep) / .55); }
.nd-credit { color: hsl(var(--tan)); }
.nd-nav__links a::after { background: hsl(var(--primary)); }

/* Primary CTA: flat red block, no gradient (the whole point is block colour) */
.nd-hero__book {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 14px 34px -16px hsl(var(--primary) / .65), inset 0 1px 0 rgba(255,255,255,.16);
}
.nd-hero__book::before { background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%); }
.nd-hero__book:hover { filter: brightness(1.08); box-shadow: 0 18px 40px -16px hsl(var(--primary) / .75), inset 0 1px 0 rgba(255,255,255,.22); }

/* =========================================================================
   2. TYPE — DM Serif Display + Inter stay the workhorses. Rye (genuine
      wood-type) is added ONLY for small-caps badges/labels, never body
      copy or headlines, so the letterpress flavour reads as a detail,
      not a wholesale font swap.
   ========================================================================= */
.nd-sec__no,
.nd-stub__label,
.nd-count__l,
.nd-signpost text,
.nd-signpost__label {
  font-family: "Rye", "DM Serif Display", Georgia, serif;
  letter-spacing: .04em;
}

/* =========================================================================
   3. NAV + LOGO — the new mark is a tall arched badge, give it room.
   ========================================================================= */
.nd-nav__logo { height: 52px; }
.nd-nav.is-scrolled .nd-nav__logo { height: 42px; }
@media (max-width: 880px) { .nd-nav__logo { height: 42px; } }
footer img[alt="Nashville Days"] { height: 48px; }

.nd-soon {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / .35); border-radius: 2px;
  padding: .4rem .8rem; background: hsl(var(--primary) / .06);
}

/* Small star flourish, used sparingly (flanking the hero title, echoing
   the two stars either side of "Days" in the logo). Inline SVG, currentColor. */
.nd-star { display: inline-block; width: .62em; height: .62em; color: hsl(var(--tan)); vertical-align: .12em; }
.nd-hero__stars { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-bottom: .9rem; }
.nd-hero__stars .nd-star { width: 15px; height: 15px; color: hsl(var(--tan) / .85); }

/* =========================================================================
   4. BLOCK-COLOUR SECTIONS — the core "red, white and navy blue" idea.
      Paper is the default. Navy is used for a small number of whole
      content sections (dark ink, warm parchment text). Red is reserved
      for ONE short, punchy banner, never a long-form reading section.
   ========================================================================= */
.nd-block--navy {
  /* Local variable shadowing: every existing Tailwind-utility class already
     in this section's markup (text-foreground/NN, bg-background, bg-card,
     border-border/NN, text-sage, bg-secondary, bg-primary/5 etc.) reads
     these SAME custom properties, so redefining them here re-themes the
     whole section for free, without hunting down every utility combo. */
  --background: 211 60% 20%;
  --foreground: 38 45% 97%;
  --card: 211 55% 25%;
  --card-foreground: 38 45% 97%;
  --secondary: 211 46% 28%;
  --secondary-foreground: 38 45% 97%;
  --muted: 211 40% 26%;
  --muted-foreground: 38 20% 80%;
  --border: 211 30% 34%;
  --sage: 33 40% 66%;
  --sage-light: 33 46% 76%;
  background: hsl(var(--background));
  color: hsl(var(--foreground) / .92);
}
.nd-block--navy .nd-sec__title { color: hsl(var(--cream-ink)); }
.nd-block--navy .nd-sec__title em { -webkit-text-fill-color: hsl(var(--tan)); background: none; color: hsl(var(--tan)); }
.nd-block--navy .nd-sec__eyebrow,
.nd-block--navy .nd-sec__no { color: hsl(var(--tan)); }
.nd-block--navy .nd-sec__line { background: hsl(var(--tan)); opacity: .55; }
.nd-block--navy p { color: hsl(var(--cream-ink) / .82); }
.nd-block--navy .nd-feat__name { color: hsl(var(--cream-ink)); }
.nd-block--navy .nd-feat__desc { color: hsl(var(--cream-ink) / .68); }
.nd-block--navy .nd-feat { border-top-color: hsl(var(--cream-ink) / .16); }
.nd-block--navy .nd-feats .nd-feat:last-child,
.nd-block--navy .nd-vals .nd-feat:last-child { border-bottom-color: hsl(var(--cream-ink) / .16); }
.nd-block--navy .nd-pull { border-top-color: hsl(var(--tan) / .5); border-bottom-color: hsl(var(--cream-ink) / .16); }
.nd-block--navy .nd-pull p { color: hsl(var(--cream-ink)); }
.nd-block--navy .nd-pull cite { color: hsl(var(--tan)); }
.nd-block--navy .nd-pull cite::before { background: hsl(var(--tan) / .7); }
.nd-block--navy .nd-aside__close { color: hsl(var(--cream-ink) / .78); }
.nd-block--navy .nd-aside__close::before { background: hsl(var(--tan) / .6); }
.nd-block--navy .nd-dropcap::first-letter { color: hsl(var(--tan)); }
.nd-block--navy a:not(.nd-hero__book):not(.nd-stub) { color: hsl(var(--tan)); }
.nd-block--navy a:hover:not(.nd-hero__book):not(.nd-stub) { color: hsl(var(--cream-ink)); }
.nd-block--navy .border-t,
.nd-block--navy .border-border\/30 { border-color: hsl(var(--cream-ink) / .16) !important; }

/* Slim, subtle "aged signboard" grain on navy blocks (same technique as
   the hero grain: a fixed, pointer-events-none SVG noise layer). */
.nd-block--navy { position: relative; }
.nd-block--navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* The one red banner block: short, single-purpose, high-impact. */
.nd-block--red {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.nd-block--red h2 { color: hsl(var(--primary-foreground)); }
.nd-block--red h2 em, .nd-block--red h2 span.nd-accent { color: hsl(var(--cream-ink)); font-style: italic; }
.nd-block--red p { color: hsl(var(--primary-foreground) / .88); }
.nd-block--red input {
  background: hsl(var(--primary-foreground) / .1) !important;
  border-color: hsl(var(--primary-foreground) / .4) !important;
  color: hsl(var(--primary-foreground)) !important;
}
.nd-block--red input::placeholder { color: hsl(var(--primary-foreground) / .55); }
.nd-block--red input:focus { border-color: hsl(var(--cream-ink)) !important; box-shadow: 0 0 0 3px hsl(var(--primary-foreground) / .18) !important; }
.nd-block--red button[type="submit"] {
  background: hsl(var(--navy)) !important; color: hsl(var(--cream-ink)) !important;
  box-shadow: none !important;
}
.nd-block--red button[type="submit"]:hover { filter: brightness(1.15); }
.nd-block--red .glow-gold { box-shadow: none; }

/* Replaces the old .text-gradient-gold utility on non-.nd-sec__title
   headings (solid colour, not a gradient: block colours, not glow). */
.nd-accent { color: hsl(var(--primary)); font-style: italic; }
.nd-block--navy .nd-accent { color: hsl(var(--tan)); }

/* =========================================================================
   5. TICKET STUB — a bordered plaque with a tan outer rule, a fine red
      inner rule, and two small "punched" perforation dots, echoing the
      logo's own bordered banner. Used for taglines and short notices.
      Set --stub-bg to the colour of whatever section it sits on.
   ========================================================================= */
.nd-stub {
  --stub-bg: hsl(var(--background));
  position: relative; display: inline-flex; align-items: center; gap: .7rem;
  padding: .8rem 1.6rem; border-radius: 8px;
  border: 2px solid hsl(var(--tan));
  box-shadow: inset 0 0 0 2px hsl(var(--primary) / .5);
  background: var(--stub-bg);
}
.nd-stub::before, .nd-stub::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: var(--stub-bg);
  border: 2px solid hsl(var(--tan));
}
.nd-stub::before { left: -8px; }
.nd-stub::after { right: -8px; }
.nd-stub__label {
  font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: hsl(var(--foreground));
}
.nd-block--navy .nd-stub { --stub-bg: hsl(var(--navy)); }
.nd-block--navy .nd-stub__label { color: hsl(var(--cream-ink)); }
.nd-block--red .nd-stub { --stub-bg: hsl(var(--primary)); border-color: hsl(var(--cream-ink)); box-shadow: inset 0 0 0 2px hsl(var(--cream-ink) / .5); }
.nd-block--red .nd-stub::before, .nd-block--red .nd-stub::after { background: var(--stub-bg); border-color: hsl(var(--cream-ink)); }
.nd-block--red .nd-stub__label { color: hsl(var(--primary-foreground)); }

/* Wide banner-strip variant: a full-bleed statement bar (like a fairground
   ticket-booth sign), small diamond accents top-centre and bottom-centre. */
.nd-strip {
  position: relative; text-align: center; padding: 1.1rem 1.5rem;
  border-top: 1px solid hsl(var(--tan) / .5); border-bottom: 1px solid hsl(var(--tan) / .5);
}
.nd-strip__text {
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
}
.nd-strip::before, .nd-strip::after {
  content: ""; position: absolute; left: 50%; width: 7px; height: 7px;
  background: hsl(var(--tan)); transform: translateX(-50%) rotate(45deg);
}
.nd-strip::before { top: -4.5px; }
.nd-strip::after { bottom: -4.5px; }

/* =========================================================================
   6. THE FAYRE POSTER — a single vertical, poster-styled lineup moment.
      Left: a simple wooden signpost + a small tipi silhouette (the real
      one at the festival). Right: the confirmed bill, gig-poster style,
      sized by billing. Deliberately spare: two illustrations, not a
      crowded fairground scene.
   ========================================================================= */
.nd-poster {
  padding: 4.5rem 0 3.5rem;
}
/* A restrained commemorative frame: one hairline, one star top and bottom.
   Taking the CONFIDENCE of a bordered plaque, not a dense flag-bunting
   border, from the boutique-Americana mood board. */
.nd-poster__frame {
  position: relative;
  border: 2px solid hsl(var(--tan));
  box-shadow: inset 0 0 0 2px hsl(var(--primary) / .5);
  border-radius: 14px;
  padding: 3.75rem 2.75rem 3rem;
}
.nd-poster__frame::before, .nd-poster__frame::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; background: hsl(var(--tan));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.nd-poster__frame::before { top: -11px; }
.nd-poster__frame::after { bottom: -11px; }
@media (max-width: 640px) {
  .nd-poster__frame { padding: 2.75rem 1.25rem 2.25rem; }
  .nd-poster__frame::before, .nd-poster__frame::after { width: 18px; height: 18px; }
}
.nd-poster__grid {
  display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 3rem;
  align-items: start;
}
.nd-signpost { width: 100%; height: auto; max-width: 260px; margin: 0 auto; display: block; }
.nd-signpost__post { fill: hsl(var(--tan) / .35); }
.nd-signpost__sign { fill: hsl(var(--cream-ink) / .06); stroke: hsl(var(--tan)); stroke-width: 2; }
.nd-signpost text {
  fill: hsl(var(--cream-ink)); font-size: 13px; text-anchor: middle; letter-spacing: .05em;
}
.nd-signpost__tipi { fill: none; stroke: hsl(var(--tan)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.nd-bill__tier + .nd-bill__tier { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid hsl(var(--cream-ink) / .16); }
.nd-bill__day {
  display: inline-flex; align-items: center; gap: .7rem; margin-bottom: .6rem;
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: hsl(var(--tan));
}
.nd-bill__day i { width: 22px; height: 1px; background: hsl(var(--tan) / .6); }
.nd-bill__headliner {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.08; color: hsl(var(--cream-ink)); margin: 0;
}
.nd-bill__row {
  font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: hsl(var(--cream-ink) / .9); margin: .5rem 0 0; line-height: 1.4;
}
.nd-bill__row span { margin: 0 .5rem; }
.nd-bill__row .nd-star { color: hsl(var(--tan) / .7); width: .5em; height: .5em; }
.nd-bill__more {
  margin-top: 1.4rem; font-family: Inter, sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--cream-ink) / .6);
}

.nd-poster__foot { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; margin-top: 3rem; }

@media (max-width: 800px) {
  .nd-poster__grid { grid-template-columns: 1fr; }
  .nd-signpost { max-width: 200px; }
}

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

/* =========================================================================
   2027 FEATURES — camping waitlist + "Play Nashville Days" (unchanged
   structurally from the prior build; recoloured to the new palette).
   ========================================================================= */
.nd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.nd-field { display: flex; flex-direction: column; gap: .4rem; font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--foreground) / .62); }
.nd-field input, .nd-field select, .nd-field textarea {
  font-family: Inter, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: hsl(var(--foreground)); background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 8px; padding: .7rem .8rem; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nd-field input:focus, .nd-field select:focus, .nd-field textarea:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .14); }
.nd-field textarea { resize: vertical; }

.nd-wl { margin-top: 1.2rem; padding: 1.4rem; border: 1px solid hsl(var(--primary) / .3); border-radius: 12px; background: hsl(var(--primary) / .05); }
.nd-wl__badge { display: inline-block; font-family: Inter, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--primary)); border: 1px solid hsl(var(--primary) / .4); border-radius: 2px; padding: .25rem .6rem; }
.nd-wl__badge[data-state="soldout"] { color: #fff; background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.nd-wl__title { font-family: "DM Serif Display", Georgia, serif; font-size: 1.5rem; color: hsl(var(--foreground)); margin: .7rem 0 .3rem; }
.nd-wl__lead { font-size: .9rem; font-weight: 300; line-height: 1.55; color: hsl(var(--foreground) / .72); margin: 0 0 1rem; }
.nd-wl__row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .8rem; }
.nd-wl__btn, .nd-play__btn {
  font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); border: none; border-radius: 999px;
  padding: .85rem 1.9rem; cursor: pointer; transition: filter .2s ease, transform .2s ease;
}
.nd-wl__btn:hover, .nd-play__btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.nd-wl__btn:disabled, .nd-play__btn:disabled { opacity: .55; cursor: progress; transform: none; }

/* Play Nashville Days — the second navy block (spaced well away from the
   first so the page doesn't read as navy/paper/navy/paper metronomically). */
.nd-play { background: hsl(var(--navy)); padding: 6rem 0; }
.nd-play__head { text-align: center; max-width: 46rem; margin: 0 auto 2.6rem; }
.nd-play .nd-sec__title { color: hsl(var(--cream-ink)); }
.nd-play .nd-sec__title em { -webkit-text-fill-color: hsl(var(--tan)); background: none; color: hsl(var(--tan)); }
.nd-play .nd-sec__eyebrow, .nd-play .nd-sec__no { color: hsl(var(--tan)); }
.nd-play .nd-sec__line { background: hsl(var(--tan)); opacity: .5; }
.nd-play__lead { font-family: Inter, sans-serif; font-weight: 300; font-size: 1.05rem; line-height: 1.65; color: hsl(var(--cream-ink) / .82); margin: 1.2rem 0 0; }
.nd-play__form { max-width: 46rem; margin: 0 auto; }
.nd-play__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.nd-field--wide { grid-column: 1 / -1; }
.nd-play .nd-field { color: hsl(var(--cream-ink) / .66); }
.nd-play .nd-field input, .nd-play .nd-field select, .nd-play .nd-field textarea { color: hsl(var(--cream-ink)); background: hsl(var(--cream-ink) / .06); border-color: hsl(var(--cream-ink) / .22); }
.nd-play .nd-field input::placeholder, .nd-play .nd-field textarea::placeholder { color: hsl(var(--cream-ink) / .42); }
.nd-play .nd-field input:focus, .nd-play .nd-field select:focus, .nd-play .nd-field textarea:focus { border-color: hsl(var(--tan)); box-shadow: 0 0 0 3px hsl(var(--tan) / .2); }
.nd-play__btn { margin-top: 1.6rem; }
.nd-play__status, .nd-wl__status { min-height: 1.2em; }
.nd-play__status[data-state="ok"], .nd-wl__status[data-state="ok"] { color: hsl(150 40% 55%); }
.nd-play__status[data-state="err"], .nd-wl__status[data-state="err"] { color: #ffb4ad; }
.nd-wl__status[data-state="err"] { color: #b3504f; }
.nd-play__status[data-state="busy"], .nd-wl__status[data-state="busy"] { color: hsl(var(--cream-ink) / .6); }
.nd-wl__status[data-state="busy"] { color: hsl(var(--foreground) / .55); }

@media (max-width: 680px) {
  .nd-play__grid, .nd-wl__row { grid-template-columns: 1fr; }
  .nd-play { padding: 4rem 0; }
}