/* ============================================================
   Danny's Holiday Lighting — ALTERNATE styling (opt-in)
   Activated by html[data-style="alt"] (toggled via the footer logo,
   persisted in localStorage). The base styles.css is left untouched;
   everything here is an additive override that only bites in alt mode.
   ============================================================ */

/* ---- Alt font faces ---- */
@font-face {
  font-family: "Archivo";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/Archivo-variable.ttf") format("truetype-variations");
}
@font-face { /* augments the base Spectral 400 with real bold cuts */
  font-family: "Spectral";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Spectral-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/Spectral-ExtraBold.ttf") format("truetype");
}

/* The real-logo lockup is hidden until alt mode (markup is always present). */
.brand-logo { display: none; }

/* ---- Tokens: warmer champagne-gold accent + font remap ---- */
html[data-style="alt"] {
  --accent: oklch(0.795 0.094 80);
  --accent-bright: oklch(0.872 0.083 84);
  --font-head: "Spectral", Georgia, serif;   /* the "Danny's" headline voice */
  /* nav / buttons / chips / eyebrows / labels → Archivo (the spaced
     "HOLIDAY LIGHTING" voice). Body stays Spectral. */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-mono: "Archivo", system-ui, sans-serif;
}

/* ---- Headlines → Spectral, title case, Bold ---- */
html[data-style="alt"] h1,
html[data-style="alt"] h2,
html[data-style="alt"] h3,
html[data-style="alt"] .display,
html[data-style="alt"] .pull,
html[data-style="alt"] .feature-card h3,
html[data-style="alt"] .gallery-subhead > span,
html[data-style="alt"] .lb-meta b {
  font-family: var(--font-head);
  text-transform: none;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.011em;
}
/* Size classes retuned for the serif's larger optical size */
html[data-style="alt"] .h-xl { font-size: clamp(2.7rem, 7.2vw, 5.1rem); font-weight: 800; line-height: 1.02; }
html[data-style="alt"] .h-lg { font-size: clamp(2.1rem, 5.2vw, 3.7rem); }
html[data-style="alt"] .h-md { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
html[data-style="alt"] .h-sm { letter-spacing: 0; }
html[data-style="alt"] .pull { line-height: 1.1; }

/* ---- Eyebrow → Archivo ---- */
html[data-style="alt"] .eyebrow {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.3em;
}

/* ---- Brand: real logo replaces the star+text lockup ---- */
html[data-style="alt"] .brand .brand-mark,
html[data-style="alt"] .brand .brand-text { display: none; }
html[data-style="alt"] .brand-logo { display: block; line-height: 0; transition: transform .25s ease; }
html[data-style="alt"] .brand-logo img { width: auto; display: block; }
html[data-style="alt"] .brand:hover .brand-logo { transform: translateY(-2px); } /* subtle hover lift */
html[data-style="alt"] .site-header .brand-logo img { height: clamp(64px, 9.4vw, 94px); }
html[data-style="alt"] .nav { height: clamp(84px, 11vw, 104px); }

/* ---- Footer: lift the logo up into the existing top padding so height stays put ---- */
html[data-style="alt"] .site-footer .brand { display: block; width: fit-content; margin-top: clamp(-2.6rem, -3.4vw, -1.6rem); }
html[data-style="alt"] .site-footer .brand-logo img { height: clamp(86px, 11vw, 108px); }