/* ============================================================
   BUDtheSPUD — Site shared CSS
   Composes inlined NAV + FOOTER + page-level layout.
   Per-section markup loads via <iframe> from
   ../assets/showroom/blocks/<cat>/<file>.html (each variant is
   fully self-contained — tokens, fonts, phosphor icons load
   inside the iframe, no leakage to the parent page).

   Step 4 of 4 — block-dissect-remix composition.
   Light-mode only per brand spec §11.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--color-base);
  color: var(--color-text-primary);
  font-family: var(--font-brand);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x must be on BOTH html and body — body alone doesn't suppress
     html-level horizontal scroll. */
  overflow-x: hidden;
  /* 2026-05-22: scroll-behavior + scroll-padding + scroll-snap experiments
     all reverted at Robert's request — felt janky with his mouse setup.
     Native browser scroll only from here on. */
}
body {
  min-height: 100vh;
  /* Decorative bleed elements (hero banner-strip with left/right: -60px,
     press marquee with negative margins) intentionally extend past the
     viewport edges. Page-level overflow-x: hidden clips the horizontal
     scrollbar without affecting normal vertical scroll. */
  overflow-x: hidden;
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute; top: -40px; left: 16px;
  background: var(--brand-red); color: var(--color-primary-on);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-button); font-family: var(--font-mono);
  font-size: var(--fs-caption); font-weight: var(--fw-subhead);
  letter-spacing: var(--letter-eyebrow); text-transform: uppercase;
  text-decoration: none; z-index: 200;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--brand-yellow); }

/* ============================================================
   NAV — sticky-shrink (homepage + all interior pages)
   Source: assets/showroom/blocks/nav/nav-sticky-shrink.html [E lock]
   Inlined because nav is page-level (position:fixed + scroll
   IntersectionObserver). One copy used across every page.
   ============================================================ */

.heritage-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 51;
  background: var(--brand-red); color: var(--color-primary-on);
  overflow: hidden;
  max-height: 36px;
  transition:
    max-height var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.is-shrunk .heritage-bar {
  max-height: 0; opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.heritage-bar-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 8px 20px;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  font-weight: var(--fw-subhead); letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase; line-height: 1;
}
.heritage-bar-inner .sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand-yellow); flex-shrink: 0;
}
.heritage-bar-inner .item-hide-mobile { display: none; }
@media (min-width: 768px) {
  .heritage-bar-inner { gap: var(--space-4); padding: 10px 32px; }
  .heritage-bar-inner .item-hide-mobile {
    display: inline-flex; align-items: center; gap: var(--space-2);
  }
}

/* ============================================================
   NAV — final design locked 2026-05-25.
   Edge-to-edge flush at top:0 (no gap — gap was tried + rejected as
   too SaaS-looking for a heritage food brand). Bold bottom drop
   shadow + textured background carries all the "distinct layer" job.
   Single synchronized 380ms transition curve so the shrink reads as
   one motion (earlier 5-different-durations created a staircase).
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background-color: var(--color-surface-1);
  background-image:
    radial-gradient(rgba(122,110,90,0.06) 1px, transparent 1.5px),
    radial-gradient(rgba(122,110,90,0.04) 1px, transparent 1.5px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 2px;
  box-shadow:
    0 8px 20px rgba(74, 48, 28, 0.18),
    0 3px 6px rgba(74, 48, 28, 0.12);
  border-bottom: 1px solid var(--color-border);
  transition: all 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-shrunk .nav {
  box-shadow:
    0 14px 36px rgba(74, 48, 28, 0.22),
    0 4px 10px rgba(74, 48, 28, 0.14);
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  /* 12px vertical padding (was 20px) — Robert 2026-05-25: nav was too tall
     at top of page, buttons looked stranded. Tighter padding so 52px buttons
     fill ~76% of the inner height. */
  padding: 12px 20px;
  max-width: 1280px; margin: 0 auto;
  transition: all 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) { .nav-inner { padding: 12px 32px; } }
@media (min-width: 1024px) { .nav-inner { padding: 12px 48px; } }
.is-shrunk .nav-inner { padding-top: 6px; padding-bottom: 6px; align-items: center; }

.brand-block {
  display: inline-flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: inherit;
  border-radius: var(--radius-sm);
  min-height: 48px;
}
.brand-block:focus-visible { outline: none; box-shadow: var(--elev-focus); }
/* Mascot chip — sits LEFT of the wordmark in the brand-block. Square crop on
   the canonical mascot raster, slight inner shadow to integrate with the
   nav surface. Hidden on shrunk-nav state to keep horizontal weight light. */
.brand-mascot {
  display: block;
  width: 48px; height: 48px; flex-shrink: 0;
  object-fit: cover;
  border-radius: 999px;
  background: transparent;
  transition: width var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
@media (min-width: 768px) { .brand-mascot { width: 52px; height: 52px; } }
.is-shrunk .brand-mascot { width: 32px; height: 32px; }
@media (min-width: 768px) { .is-shrunk .brand-mascot { width: 36px; height: 36px; } }

.brand-mark {
  display: block;
  height: 48px; width: auto; flex-shrink: 0;
  transition: all 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) { .brand-mark { height: 52px; } }
/* Shrunk wordmark matches button height (44px) so left + right clusters
   visually align inside the nav-inner. */
.is-shrunk .brand-mark { height: 44px; }
@media (min-width: 768px) { .is-shrunk .brand-mark { height: 44px; } }

.brand-est {
  display: none; flex-direction: column; line-height: 1;
  font-family: var(--font-mono); color: var(--color-text-tertiary);
  letter-spacing: var(--letter-eyebrow); text-transform: uppercase;
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border);
  transition:
    opacity var(--dur-base) var(--ease-out),
    max-width var(--dur-base) var(--ease-out),
    padding-left var(--dur-base) var(--ease-out);
  max-width: 120px;
}
.brand-est .top { font-size: 9px; font-weight: var(--fw-subhead); margin-bottom: 3px; }
.brand-est .bot { font-size: 14px; font-weight: var(--fw-heading); color: var(--color-text-secondary); }
@media (min-width: 1024px) { .brand-est { display: flex; } }
.is-shrunk .brand-est {
  opacity: 0; max-width: 0; padding-left: 0;
  border-left-color: transparent; overflow: hidden;
}

.nav-right {
  display: flex; align-items: center; gap: var(--space-4);
}
@media (min-width: 768px) { .nav-right { gap: var(--space-6); } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--r-button); color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--color-surface-2); }
.nav-toggle:focus-visible { outline: none; box-shadow: var(--elev-focus); }
.nav-toggle .ph { color: var(--color-text-primary); font-size: 22px; }
.nav-toggle .ph-x { display: none; }
.nav.is-open .nav-toggle .ph-list { display: none; }
.nav.is-open .nav-toggle .ph-x { display: inline-block; }

.nav-links {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 20px var(--space-6) 20px;
  display: flex; flex-direction: column; gap: 0;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.nav.is-open .nav-links {
  transform: translateY(0); opacity: 1; pointer-events: auto;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: var(--fw-label);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:last-child { border-bottom: 0; }
.nav-link:hover { color: var(--brand-red); }
.nav-link:focus-visible {
  outline: none; box-shadow: var(--elev-focus);
  border-radius: var(--radius-sm);
}
.nav-link[aria-current="page"] { color: var(--brand-red); }

.nav-status {
  display: none;
  align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-subhead);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  transition:
    color var(--dur-base) var(--ease-out),
    font-size var(--dur-base) var(--ease-out);
}
.nav-status .ph { font-size: 14px; color: var(--color-success); }
.nav-status .label-status { color: var(--color-success); font-weight: var(--fw-heading); }
.nav-status .label-detail {
  color: var(--color-text-tertiary);
  max-width: 120px; overflow: hidden; white-space: nowrap;
  transition: all 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1024px) { .nav-status { display: inline-flex; } }
/* When shrunk, hide via opacity + max-width + negative margin to eat the
   flex gap. display:none was leaving dead space inside the pill because
   the flex container still allocated gap between siblings. */
.is-shrunk .nav-status .label-detail,
.is-shrunk .nav-status .sep-dot {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  margin-right: -8px;
  display: inline-block;
}
.nav-status .sep-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--color-text-muted);
  max-width: 120px; overflow: hidden;
  transition: all 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pulsing live-status pill — matches the perimeter-pulse aesthetic from
   hours-perimeter-pulse.html (used on the locations page). Wraps the status
   in a green-bordered pill with two staggered rings expanding outward + a
   pulsing dot. Reads as "live operator status" instead of static text. */
.nav-status--pulse {
  position: relative;
  padding: 14px 18px;
  min-height: 52px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1.5px solid var(--color-success);
  border-radius: 999px;
  animation: nav-status-border 2.4s var(--ease-in-out, ease-in-out) infinite;
  background: rgba(58, 125, 58, 0.04);
  /* Now an <a> linking to locations.html — drop the default text-decoration
     + add a subtle hover lift so it reads as interactive. */
  text-decoration: none;
  color: inherit;
  transition: background 200ms ease, transform 200ms ease;
}
.nav-status--pulse:hover {
  background: rgba(58, 125, 58, 0.10);
  transform: translateY(-1px);
}
.is-shrunk .nav-status--pulse {
  padding: 11px 16px;
  min-height: 44px;
  font-size: 12px;
}
.nav-status--pulse::before,
.nav-status--pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 1.5px solid var(--color-success);
  pointer-events: none;
  opacity: 0;
}
.nav-status--pulse::before {
  animation: nav-status-ring 2.4s var(--ease-out, ease-out) infinite;
}
.nav-status--pulse::after {
  animation: nav-status-ring 2.4s var(--ease-out, ease-out) infinite 1.2s;
}
.nav-status__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 var(--color-success);
  animation: nav-status-dot 2.4s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes nav-status-ring {
  0%   { transform: scale(1);    opacity: 0.55; border-width: 1.5px; }
  70%  { transform: scale(1.20); opacity: 0;    border-width: 1px; }
  100% { transform: scale(1.24); opacity: 0;    border-width: 1px; }
}
@keyframes nav-status-border {
  0%, 100% { border-color: rgba(58, 125, 58, 1); }
  50%      { border-color: rgba(58, 125, 58, 0.55); }
}
@keyframes nav-status-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58, 125, 58, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(58, 125, 58, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-status--pulse,
  .nav-status--pulse::before,
  .nav-status--pulse::after,
  .nav-status__dot { animation: none !important; }
}

.nav-cta {
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  min-height: 52px;
  background: var(--brand-red);
  color: var(--color-primary-on);
  border-radius: var(--r-button);
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: var(--fw-subhead);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 380ms cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transform-origin: right center;
}
.nav-cta:hover { background: var(--brand-red-hover); }
.nav-cta .ph, .nav-cta .ph-fill { font-size: 16px; line-height: 1; color: #ffffff !important; }
@media (min-width: 768px) { .nav-cta { display: inline-flex; } }
.is-shrunk .nav-cta {
  opacity: 1; pointer-events: auto; transform: scale(1);
  padding: 11px 18px;
  min-height: 44px;
  font-size: 13px;
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-links {
    position: static; flex-direction: row; align-items: center;
    gap: var(--space-7, 28px);
    background: transparent; border: 0;
    box-shadow: none; padding: 0;
    transform: none; opacity: 1; pointer-events: auto;
  }
  .nav-link { padding: 14px 0; border-bottom: 0; }
  .nav-link::after {
    content: '';
    position: absolute; left: 0; bottom: 6px;
    width: 100%; height: 2px;
    background-color: var(--brand-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .nav-link:hover::after,
  .nav-link[aria-current="page"]::after { transform: scaleX(1); }
  .nav-link[aria-current="page"]::after { height: 3px; }
}
@media (min-width: 1024px) {
  .nav-links { gap: 36px; }
}
.is-shrunk .nav-link { padding: 8px 0; }
@media (min-width: 768px) { .is-shrunk .nav-link::after { bottom: 2px; } }
@media (min-width: 1024px) { .is-shrunk .nav-links { gap: 24px; } }

.nav-spacer { height: 88px; }
@media (min-width: 768px) { .nav-spacer { height: 92px; } }

/* ============================================================
   SECTION SPACING NORMALIZATION
   Each showroom variant ships with its OWN top/bottom padding
   (ranges 64-128px), which compounded into ugly asymmetric gaps
   between composed sections. Single source of truth = 64px on
   the section wrapper. Zero the variant root padding so they
   don't compound. Internal layout padding (grids, cards) is
   preserved — only outer block padding gets zeroed.
   ============================================================ */
main > section[data-section] {
  /* 2026-05-22: tightened from 64/64 → 40/40 per Robert. With variant
     internals also zeroed, 40+40=80px between sections feels deliberate
     without being airy. */
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
/* Variant roots that own block-padding — zero them out. Use descendant
   combinator (not child >) because some variants wrap content in <main>. */
section[data-section] .page,
section[data-section] .demo-host,
section[data-section] .heritage-recipe,
section[data-section] .ig-section,
section[data-section] .press-marquee,
section[data-section] .lto-typo,
section[data-section] .archive,
section[data-section] .ugc-masonry,
section[data-section] .wtm,
section[data-section] .spin,
section[data-section] .matrix-section,
section[data-section] .book-cta,
section[data-section] .stats,
section[data-section] .menu-section,
section[data-section] .faq,
section[data-section] .demo-grid,
section[data-section] .pitch,
section[data-section] .loc-paper-map,
section[data-section] .sched,
section[data-section] .tiers {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Also kill the gap on .demo-grid (FAQ) since the duplicate is stripped */
section[data-section] .demo-grid { gap: 0 !important; }
/* Hero has a banner-strip absolutely positioned at top: 28px — needs the
   chrome's natural padding-top so the title clears the ribbon. Only zero
   the bottom; let top breathe. */
section[data-section="hero"] .hero-drop__chrome,
section[data-section="hero"] .hero-drop {
  padding-bottom: 0 !important;
}
/* Kill the hero's `min-height: 100vh` — when content is short (which it is
   in the LTO-drop variant), the viewport-fill creates a huge dead void
   between the description text and the countdown/ticket. Let the hero size
   to its content instead. */
section[data-section="hero"] .hero-drop {
  min-height: 0 !important;
}
/* Tighten the chrome's vertical gap — variant's default `gap: 32px` (or 40px
   at >960px) compounds with the void above; bring countdown + ticket closer
   to the description copy. */
section[data-section="hero"] .hero-drop__chrome {
  gap: 20px !important;
}

.scroll-sentinel {
  position: absolute; top: 60px; left: 0;
  width: 1px; height: 1px; pointer-events: none;
}

/* ============================================================
   SECTION / IFRAME WRAPPER
   Each section is an <iframe> loaded from showroom/blocks/.../<variant>.html.
   The iframe is auto-sized to its body.scrollHeight (see page <script>).
   ============================================================ */
.section {
  position: relative;
  width: 100%;
}
.section-frame {
  display: block;
  width: 100%;
  border: 0;
  background: var(--color-base);
  /* initial fallback height — JS replaces with content-true height on load */
  min-height: 400px;
}

/* ============================================================
   FOOTER — light-cream-variant (inlined)
   Source: assets/showroom/blocks/footer/footer-light-cream-variant.html [lock]
   ============================================================ */
.footer {
  background: var(--bg-base);
  color: var(--color-text-primary);
  padding: var(--space-20) var(--space-6) var(--space-12);
  border-top: 1px solid var(--color-border);
}
.footer__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.footer__dateline {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-label);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-5) 0;
}
.footer__signoff {
  font-family: var(--font-typewriter);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 var(--space-12) 0;
}
.footer__mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin: 0 0 var(--space-8) 0;
}
.footer__mark img {
  display: block;
  height: 32px;
  width: auto;
  -webkit-user-drag: none;
  user-select: none;
  filter: grayscale(1) brightness(0);
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  margin: 0 0 var(--space-8) 0;
}
.footer__contact-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-brand);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.footer__contact-row .ph {
  color: var(--brand-red);
  font-size: 16px;
}
.footer__contact-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 4px;
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: rgba(237, 28, 36, 0.4);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__contact-row a:hover { color: var(--brand-red); }

.footer__social {
  display: inline-flex;
  gap: var(--space-4);
  margin: 0 0 var(--space-10) 0;
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: transparent;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.footer__social-link:hover {
  border-color: var(--brand-red);
  color: var(--brand-red);
  transform: translateY(-2px);
}
.footer__social-link .ph {
  color: inherit;
  font-size: 20px;
}
.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-label);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.footer__bottom-line + .footer__bottom-line {
  margin-top: var(--space-2);
}

/* ============================================================
   DESIGN SYSTEM — added 2026-05-21 from 5-agent design audit.
   The audit found that every section block invented its own
   buttons, eyebrows, and h2 sizes. This block centralizes the
   shared interactive + heading patterns so per-block variants
   can opt into one of three sizes/tiers instead of rolling
   their own (which is what created the 5-primary-CTAs-with-
   5-different-styles drift caught by the buttons agent).

   Use:
     <a class="btn btn--primary">Call to action</a>
     <a class="btn btn--primary btn--lg">Large CTA</a>
     <button class="btn btn--secondary">Secondary</button>
     <a class="btn btn--ghost">Quiet link</a>
     <span class="eyebrow">SECTION LABEL</span>
   ============================================================ */

/* --- focus ring (global a11y baseline) --- */
:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 3px;
  border-radius: inherit;
}
/* Cursor on anything that acts like a button */
:where(button, a, [role="button"]) {
  cursor: pointer;
}

/* --- button system --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  min-height: 44px;             /* iOS tap-target floor */
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn .ph, .btn .ph-fill { font-size: 17px; line-height: 1; }

/* sizes */
.btn--sm  { padding: 9px 16px;  min-height: 36px; font-size: 13px; }
.btn--md  { /* default — explicit class for clarity */ }
.btn--lg  { padding: 18px 32px; min-height: 56px; font-size: 17px; }
.btn--xl  { padding: 22px 40px; min-height: 64px; font-size: 19px; }

/* variants */
.btn--primary {
  /* Use --brand-red-hover #C81017 for the FILL so white text passes WCAG AA
     (4.38:1 fails at #ED1C24; 5.0:1 passes at #C81017). The audit found 6
     contrast failures resolved by this single token swap. */
  background: var(--brand-red-hover, #C81017);
  color: var(--color-primary-on, #FFFFFF);
  border-color: var(--brand-red-hover, #C81017);
  box-shadow: 0 6px 18px rgba(237, 28, 36, 0.22);
}
.btn--primary:hover {
  background: var(--brand-red, #ED1C24);
  border-color: var(--brand-red, #ED1C24);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(237, 28, 36, 0.30);
}
.btn--secondary {
  background: transparent;
  color: var(--brand-red);
  border-color: var(--brand-red);
}
.btn--secondary:hover {
  background: rgba(237, 28, 36, 0.06);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: transparent;
  padding-left: 8px;
  padding-right: 8px;
  text-decoration: underline;
  text-decoration-color: var(--brand-red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.btn--ghost:hover {
  background: transparent;
  color: var(--brand-red);
  text-decoration-thickness: 2px;
}

/* --- eyebrow system --- */
/* DEFAULT eyebrow color is muted tertiary grey. The "make it red" eyebrow is
   the EXCEPTION (LIVE / DROP / URGENT contexts) via .eyebrow--live. The audit
   found 4 different eyebrow colors and 4 different weights across 8 sections
   — this consolidates. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.eyebrow .ph, .eyebrow .ph-fill {
  font-size: 12px;
  color: inherit;
}
.eyebrow--live {
  color: var(--brand-red);
}
.eyebrow--live .ph,
.eyebrow--live .ph-fill {
  color: var(--brand-red);
}

/* --- EYEBROW DEMOTION SWEEP — 2026-05-21 from color audit ---
   The color audit found 186 red element instances across 11 sections,
   driven primarily by every section eyebrow defaulting to brand-red.
   This block overrides per-variant eyebrow color to the neutral tertiary
   grey across ALL sections by default. Sections that legitimately need
   red eyebrows (LIVE / DROP / URGENT contexts — `lto-countdown` and any
   "now happening" pill) opt back in via the `.eyebrow--live` modifier
   added at compose time. The sweep targets the BEM `__eyebrow` suffix
   pattern that every variant in the showroom follows. */
section[data-section] [class$="__eyebrow"],
section[data-section] [class$="-eyebrow"],
section[data-section] .eyebrow {
  color: var(--color-text-tertiary) !important;
  font-weight: 600 !important;
}
section[data-section] [class$="__eyebrow"] > i,
section[data-section] [class$="-eyebrow"] > i,
section[data-section] .eyebrow > i {
  color: var(--color-text-tertiary) !important;
}
/* Re-allow brand-red on eyebrows that opt-in via .eyebrow--live */
section[data-section] .eyebrow--live,
section[data-section] [class$="__eyebrow"].is-live,
section[data-section] [class$="-eyebrow"].is-live {
  color: var(--brand-red) !important;
}
section[data-section] .eyebrow--live > i,
section[data-section] [class$="__eyebrow"].is-live > i,
section[data-section] [class$="-eyebrow"].is-live > i {
  color: var(--brand-red) !important;
}
/* Decorative-only ornament icons (stars, sparkles, flourishes) in headers
   default to muted-tertiary, not yellow. Yellow stays reserved for the
   wordmark drop-shadow + UPCOMING/COMING-SOON status badges. */
section[data-section] [class$="__count"] > i.ph-fill.ph-star,
section[data-section] [class$="-count"] > i.ph-fill.ph-star {
  color: var(--color-text-tertiary) !important;
}

/* --- section heading scale --- */
/* Audit found 8 sections with 5 different h2 sizes. Collapse to 3 tiers. */
.section-h2 {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1.10;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.section-h2--display {
  /* Reserved for headline moments (LTO countdown, hero secondary line). */
  font-size: clamp(40px, 6vw, 56px);
}
.section-h2--hero {
  /* Reserved for the hero h1 ONLY — display tier. */
  font-size: clamp(56px, 12vw, 160px);
  letter-spacing: -0.04em;
  line-height: 0.95;
}

/* ============================================================
   ICON COLOR CONTRAST DEFENSE — added 2026-05-25 from audit.
   tokens.css sets a global `.ph, .ph-fill, .ph-duotone { color:
   var(--brand-red) }` default — sensible for icons sitting on
   cream surfaces, BROKEN for icons inside red-fill buttons
   (renders red-on-red, contrast 1.35:1, invisible). Per-block
   variants relied on cascade discipline that didn't hold.
   This rule forces icons inside known interactive red-fill
   containers to inherit currentColor (i.e. the button's text
   color, which is white on these surfaces).
   Trigger to revisit: any time a NEW red-fill button class
   is introduced — add its selector here OR set color:white
   on its icon explicitly. ============================================================ */
.btn .ph, .btn .ph-fill, .btn .ph-bold, .btn .ph-duotone,
.btn-primary .ph, .btn-primary .ph-fill, .btn-primary .ph-bold,
.stop__btn .ph, .stop__btn .ph-fill,
.lto-typo__cta .ph, .lto-typo__cta .ph-fill,
.tier-card__cta .ph, .tier-card__cta .ph-fill,
.faq__signoff-cta .ph, .faq__signoff-cta .ph-fill,
.contact-action--primary .ph, .contact-action--primary .ph-fill,
.status-pill .ph, .status-pill .ph-fill,
.ics-btn .ph, .ics-btn .ph-fill,
.schedule-cta .ph, .schedule-cta .ph-fill,
.book-cta__cta .ph, .book-cta__cta .ph-fill,
.chip .ph, .chip .ph-fill,
.archive__filter .ph, .archive__filter .ph-fill {
  color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}