/* === THEME: newbrighton === */
/* ============================================
   THEME: New Brighton Dispensary
   "Premium Cannabis. Real Vibes." — Enter The Portal.
   Cosmic / alien-portal identity ported from the client's
   WordPress build (TKT-20). Void-dark canvas, neon signal
   green + purple + cyan, Anton / Rajdhani / Space Mono.
   Pairs with the shared `cosmic-bg` component (starfield +
   floating aliens) which paints the backdrop behind every page.
   NOTE: render.py concatenates theme CSS BEFORE component CSS,
   so dark-surface inversions of the light-built shared
   components need !important.
   ============================================ */
:root {
  /* ---- Brand palette (from the WP build) ---- */
  --void:      #020408;   /* page bg */
  --deep:      #04080f;   /* lifted panels / footer */
  --deep-2:    #081222;   /* card surface */
  --green:     #39ff6e;   /* neon signal green — the brand accent */
  --green-deep:#1f9d47;   /* hover / pressed */
  --cyan:      #06d6d6;
  --purple:    #7c3aed;
  --gold:      #b8a96a;
  --sage:      #8fad6e;
  --silver:    #c8d4c0;
  --white:     #eef4ff;
  --dim:       rgba(238, 244, 255, 0.55);
  --line:      rgba(238, 244, 255, 0.10);
  --line-green:rgba(57, 255, 110, 0.22);

  /* ---- Typography ---- */
  --font-display: 'Anton', 'Barlow Condensed', sans-serif;
  --font-body:    'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-stat:    'Space Mono', 'Rajdhani', monospace;
  --font-heading: var(--font-display);

  /* ---- Layout ---- */
  --header-h: 64px;
  --header-logo-w: 44px;
  --header-logo-h: 44px;

  /* ---- Component-facing semantic tokens ---- */
  --body-bg: var(--void);
  --body-fg: var(--white);
  --heading: var(--white);
  --heading-strong: var(--green);
  --link: var(--green);
  --link-hover: var(--cyan);

  --header-bg: rgba(2, 4, 8, 0.86);
  --footer-bg: var(--deep);
  --footer-accent: var(--green);

  /* ---- Shared-component semantic aliases (dark inversion) ---- */
  --moss: var(--green);              /* primary accent green */
  --deep-fern: var(--green-deep);    /* secondary / hover */
  --washi: var(--line);              /* hairline borders */
  --kinako: var(--deep-2);           /* raised card surface */
  --shoji: var(--deep);              /* alt section bg */
  --fog: var(--dim);                 /* muted/metadata text */
  --charcoal: rgba(238, 244, 255, 0.80);
  --sumi: var(--white);              /* ink → light on dark */
  --yuzu: var(--green);

  /* Hero — the cosmic-bg canvas paints behind it; keep the panel
     transparent-ish with a radial portal glow. */
  --hero-bg-image: none;
  --hero-overlay: none;
  --about-bg: linear-gradient(135deg, var(--deep) 0%, #06101f 100%);
}

/* The starfield canvas needs to show through every section, so the
   shared components must not paint an opaque light background over it.
   Default the page transparent on the void and force section surfaces
   to the dark palette. */
/* Void base + a heavily-dimmed topographic texture for depth; the starfield
   canvas (z-index:-1) composites over this, so keep the overlay dark. */
body {
  background:
    linear-gradient(rgba(2, 4, 8, 0.86), rgba(2, 4, 8, 0.86)),
    url('/img/section-texture.jpg') center / cover fixed,
    var(--void) !important;
  color: var(--white);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  color: var(--white);
}

/* Mono eyebrows / labels — the brand's Space-Mono voice */
.hero__eyebrow, .story__eyebrow, .reviews__eyebrow,
.section__eyebrow, .email-signup__sub, .quick-facts__label {
  font-family: var(--font-stat) !important;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ============================================================
   HERO — portal glow over the starfield
   ============================================================ */
.hero {
  /* Pure cosmic hero — the fixed starfield canvas is the backdrop (the
     interior-photo treatment is retired; ::before keeps the portal glow). */
  background: transparent !important;
  min-height: 92vh !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero::before {
  content: '' !important;
  position: absolute;
  width: 820px; height: 820px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(57, 255, 110, 0.13) 0%,
    rgba(124, 58, 237, 0.07) 42%,
    transparent 70%) !important;
  pointer-events: none; z-index: 0;
  animation: portalBreath 6s ease-in-out infinite;
}
@keyframes portalBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 0.7; }
}
.hero__wrap, .hero__main { position: relative; z-index: 1; }
.hero__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--white) !important;
  text-shadow: 0 0 28px rgba(57, 255, 110, 0.35), 0 0 60px rgba(124, 58, 237, 0.22);
}
.hero__title .line-green, .hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__subtitle, .hero__eyebrow {
  color: var(--gold) !important;
  font-weight: 700;
}
.hero__desc { color: var(--dim) !important; font-family: var(--font-body); }
.hero__sidebar div, .hero__info-item, .hero__info-item a,
.hero__sidebar .info-card { color: var(--white) !important; }

/* ============================================================
   CTAs — neon green fill, void ink (invisible-CTA trap guard)
   ============================================================ */
.cta {
  border-radius: 2px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 400;
  white-space: nowrap;
  /* Horizontal padding must clear the 8px angled clip corners so the label
     never gets sheared (the slanted clip-path otherwise eats the edge letter). */
  padding: 15px 32px !important;
  line-height: 1 !important;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
/* Hero CTAs: keep them comfortably apart and equal-height on desktop… */
.hero__ctas { gap: 18px; flex-wrap: wrap; justify-content: center; }
/* …but on narrow screens stack full-width (don't let the equalized padding
   shrink-wrap them — the forestlake TKT-49 trap). */
@media (max-width: 767px) {
  .hero__ctas { flex-direction: column; align-items: center; }
  .hero__ctas .cta { width: 100%; max-width: 320px; text-align: center; }
}
.cta--primary {
  background: linear-gradient(135deg, var(--green), var(--cyan)) !important;
  border-color: var(--green) !important;
  color: var(--void) !important;
}
.cta--primary:hover {
  color: var(--void) !important;
  box-shadow: 0 0 32px rgba(57, 255, 110, 0.4);
}
.cta--secondary {
  background: transparent !important;
  color: var(--white) !important;
  border-color: var(--line-green) !important;
}
.cta--secondary:hover { border-color: var(--green) !important; color: var(--white) !important; }

/* ============================================================
   GENERIC DARK-SURFACE INVERSION for the light-built shared
   sections (about / story / quick-facts / trust-bar / visit /
   reviews / map). Force transparent or dark panels + light text.
   ============================================================ */
.about, .story, .visit, .reviews, .map,
.section, .email-signup {
  background: transparent !important;
  color: var(--white);
}
.about, .story { color: var(--dim) !important; }
.about p, .story__deck, .reviews__text, .visit__card p { color: var(--dim) !important; }
.about h2, .story h2, .visit h2, .reviews h2 { color: var(--white) !important; }
.story__quote, .story blockquote { color: var(--green) !important; }

/* quick-facts band — the shared `.quickfacts` paints itself with
   --heading-strong (bg) / --washi (text) / --yuzu (label); on this dark theme
   those tokens are an accent/line/green, so override the band explicitly. */
.quickfacts {
  background: rgba(8, 18, 34, 0.6) !important;
  color: var(--white) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
.quickfacts__label { color: var(--green) !important; }
.quickfacts__value, .quickfacts__value a { color: var(--white) !important; }

/* Cards — raised void panels with a neon key line */
.info-card, .visit__card, .reviews__card, .story__pillar {
  background: rgba(8, 18, 34, 0.72) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--green) !important;
  backdrop-filter: blur(6px);
  color: var(--white) !important;
}
.reviews__name, .reviews__source, .story__pillar .story__pillar-label {
  color: var(--green) !important;
}
.reviews__stars { color: var(--gold) !important; }
.trust-bar__value, .trustbar__value { color: var(--green) !important; }
.trust-bar__label, .trust-bar__sub { color: var(--dim) !important; }

/* ============================================================
   HEADER — translucent void bar, neon wordmark
   ============================================================ */
.site-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(10px);
}
.site-header .nav__link, .site-header a { color: var(--white) !important; }
.site-header .nav__link:hover { color: var(--green) !important; }
.site-header__logo img, .header__logo img {
  filter: drop-shadow(0 0 8px rgba(57, 255, 110, 0.4));
}

/* ============================================================
   FOOTER — deep void, neon accent streak
   ============================================================ */
.site-footer { background: var(--footer-bg) !important; color: var(--dim) !important; }
.site-footer::before {
  background: linear-gradient(90deg, transparent, rgba(57, 255, 110, 0.5), transparent) !important;
}
.site-footer h3, .footer__center h3 { font-family: var(--font-display); color: var(--white) !important; }
.site-footer a { color: var(--sage) !important; }
.site-footer a:hover { color: var(--green) !important; }

/* Platform producer credit — keep legible on void */
.ht-credit, .ht-credit a { color: rgba(238, 244, 255, 0.32) !important; }

/* ============================================================
   AGE GATE — "ENTER THE PORTAL" skin
   The shared age-gate template can't carry the logo/aliens, so
   the logo rides in as a ::before on the card; the cosmic-bg
   starfield already glows behind the backdrop.
   ============================================================ */
.age-gate__backdrop { background: rgba(2, 4, 8, 0.92) !important; }
.age-gate__card {
  background: rgba(4, 8, 15, 0.86) !important;
  border: 1px solid var(--line-green) !important;
  backdrop-filter: blur(14px);
  text-align: center;
  clip-path: polygon(16px 0%, 100% 0%, calc(100% - 16px) 100%, 0% 100%);
}
.age-gate__card::before {
  content: '';
  display: block;
  width: 168px; height: 168px;
  margin: 4px auto 18px;
  background: url('/img/nbd-logo.png') center/contain no-repeat;
  filter: drop-shadow(0 0 22px rgba(57, 255, 110, 0.45)) drop-shadow(0 0 60px rgba(124, 58, 237, 0.25));
}
.age-gate__brand {
  font-family: var(--font-stat) !important;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--sage) !important;
}
.age-gate__headline {
  font-family: var(--font-display) !important;
  color: var(--white) !important;
  text-shadow: 0 0 18px rgba(57, 255, 110, 0.3);
}
.age-gate__sub { color: var(--dim) !important; }
.age-gate__legal { color: rgba(238, 244, 255, 0.28) !important; }

/* ============================================================
   INFO CARDS — roomier (shared default 1.5rem felt tight)
   ============================================================ */
.info-card { padding: 1.9rem 1.7rem !important; }
.info-card__title { margin-bottom: 0.55rem; }

/* ============================================================
   FEATURE IMAGE — "step inside" showcase, neon-framed
   ============================================================ */
.featureimg { background: transparent !important; padding: 3.5rem 0; }
.featureimg__fig {
  position: relative;
  border: 1px solid var(--line-green);
  box-shadow: 0 0 40px rgba(57, 255, 110, 0.12);
  overflow: hidden;
}
.featureimg__fig img { display: block; width: 100%; height: auto; }
.featureimg__cap span {
  font-family: var(--font-stat) !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold) !important;
}

/* ============================================================
   DIVIDER (strip) — the neon line on void; crop to a slim band
   ============================================================ */
.botanical-divider--image { background: transparent !important; line-height: 0; }
.botanical-divider--image img {
  display: block;
  width: 100%;
  max-height: 110px;
  object-fit: cover;
  opacity: 0.9;
}


/* === BASE === */
/* ============================================
   BASE — reset + layout utilities
   (shared across all tenants; theme.css defines tokens)
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 64px) + 32px);
}

body {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-fg, #1C1C1C);
  background: var(--body-bg, #FAFAF5);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link, #4A7C59);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s, background 0.2s;
}
a:hover { color: var(--link-hover, #7FB069); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-weight: 700;
  color: var(--heading, #1C1C1C);
  line-height: 1.1;
}

h2 { font-size: clamp(1.8rem, 4vw, 3rem); }

p + p { margin-top: 1.5em; }

.wrap {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Platform producer credit — rendered globally from _skeleton on every
   tenant/page. Subtle by design; a theme may retint via the two tokens. */
.ht-credit {
  text-align: center;
  padding: 1.25rem 1rem;
  background: var(--ht-credit-bg, transparent);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ht-credit-fg, #9a9a9a);
}
.ht-credit p { margin: 0; }
.ht-credit a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.ht-credit a:hover { color: inherit; text-decoration: underline; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}


/* === PRIMITIVE: cta === */
/* CTA primitive — used inline by hero, visit, dutchie-menu, etc.
   Variants (set via config prop "variant"):
     primary          — solid bg in brand color, white text, large
     secondary        — plain text, subtle hover (current default)
     secondary-border — plain + visible border
     secondary-color  — bordered + colored text/border
     secondary-line   — underline-only, minimal                     */

.cta {
  display: inline-block;
  padding: 0.9em 2em;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 4px; border: 2px solid transparent;
  transition: all 0.3s;
  cursor: pointer; position: relative; overflow: hidden;
  text-decoration: none;
}

/* --- Primary: big, bold, solid brand color --- */
.cta--primary {
  padding: 1.15em 2.8em;
  font-size: 0.95rem;
  background: var(--moss, #4A7C59);
  color: white;
  border-color: var(--moss, #4A7C59);
}
.cta--primary::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--deep-fern, #2B5438);
  transition: left 0.3s; z-index: -1;
}
.cta--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(74, 124, 89, 0.35);
}
.cta--primary:hover::before { left: 0; }

/* --- Secondary: plain text, subtle hover --- */
.cta--secondary {
  background: white; color: var(--moss, #4A7C59);
  border-color: transparent;
}
.cta--secondary:hover {
  background: var(--kinako, #F2EBD9);
  color: var(--sumi, #1C1C1C);
}

/* --- Secondary bordered: plain + visible border --- */
.cta--secondary-border {
  background: white; color: var(--sumi, #1C1C1C);
  border-color: var(--washi, #E4DDD0);
}
.cta--secondary-border:hover {
  border-color: var(--driftwood, #C8BFA8);
  background: var(--kinako, #F2EBD9);
}

/* --- Secondary colored: border + text in brand color --- */
.cta--secondary-color {
  background: transparent; color: var(--moss, #4A7C59);
  border-color: var(--moss, #4A7C59);
}
.cta--secondary-color:hover {
  background: var(--moss, #4A7C59);
  color: white;
}

/* --- Secondary underline: minimal, text-link feel --- */
.cta--secondary-line {
  background: transparent; color: var(--moss, #4A7C59);
  border: none; border-radius: 0;
  padding-left: 0; padding-right: 0;
  border-bottom: 2px solid var(--moss, #4A7C59);
}
.cta--secondary-line:hover {
  color: var(--deep-fern, #2B5438);
  border-bottom-color: var(--deep-fern, #2B5438);
}

/* --- Modifiers --- */
.cta--block { width: 100%; text-align: center; }


/* === COMPONENT: cosmic-bg === */
/* === cosmic-bg: starfield/nebula backdrop + floating aliens, cats, leaves === */

.cosmic-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;            /* over the void body bg, under all content */
  pointer-events: none;
  display: block;
}

/* Floating alien motifs — CSS-animated, corner-anchored, desktop only. */
.cosmic-bg__alien {
  position: fixed;
  z-index: 3;
  pointer-events: none;
  width: 116px;
  height: auto;
  opacity: 0.82;
  will-change: transform;
}
.cosmic-bg__alien--l {
  top: 12vh;
  right: 4vw;
  filter: drop-shadow(0 0 10px rgba(57, 255, 110, 0.6)) drop-shadow(0 0 24px rgba(57, 255, 110, 0.25));
  animation: cosmic-bob-a 6s ease-in-out infinite;
}
.cosmic-bg__alien--r {
  bottom: 14vh;
  left: 3vw;
  width: 128px;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6)) drop-shadow(0 0 24px rgba(57, 255, 110, 0.2));
  animation: cosmic-bob-b 8s ease-in-out infinite;
}

/* Space cats — fixed, gentle bob. */
.cosmic-bg__cat {
  position: fixed;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}
.cosmic-bg__cat svg { width: 100%; height: auto; display: block; }
.cosmic-bg__cat--green {
  top: 40vh; left: 1vw; width: 92px; opacity: 0.7;
  filter: drop-shadow(0 0 8px rgba(57, 255, 110, 0.5));
  animation: cosmic-cat-a 7s ease-in-out infinite;
}
.cosmic-bg__cat--purple {
  top: 52vh; right: 1vw; width: 104px; opacity: 0.7;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
  animation: cosmic-cat-b 9s ease-in-out -3s infinite;
}

@keyframes cosmic-bob-a {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-16px) rotate(3deg); }
}
@keyframes cosmic-bob-b {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  50%      { transform: translateY(-20px) rotate(-4deg); }
}
@keyframes cosmic-cat-a {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  33%      { transform: translateY(-18px) rotate(2deg); }
  66%      { transform: translateY(-8px) rotate(-2deg); }
}
@keyframes cosmic-cat-b {
  0%, 100% { transform: translateY(0) rotate(5deg); }
  50%      { transform: translateY(-22px) rotate(-5deg); }
}

/* Drifting cannabis leaves (spawned by cosmic-bg.js). */
.cosmic-leaf {
  position: fixed;
  bottom: -60px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
@keyframes cosmic-leaf-float {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  6%   { opacity: 0.16; }
  92%  { opacity: 0.1; }
  100% { transform: translateY(-118vh) rotate(720deg); opacity: 0; }
}

/* The floaters overlap content on small screens — hide them, keep the starfield. */
@media (max-width: 768px) {
  .cosmic-bg__alien, .cosmic-bg__cat, .cosmic-leaf { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-bg__alien, .cosmic-bg__cat { animation: none !important; }
}


/* === COMPONENT: age-gate === */
/* New Brighton PORTAL age-gate — ported from the client's WordPress build. */

#portal-gate.portal-gate {
  position: fixed; inset: 0; z-index: 100000;  /* above the site header (z:1000) */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #020408;
  transition: opacity 1.2s ease;
  overflow: hidden;
}
#portal-gate.portal-gate.warping { opacity: 0; pointer-events: none; }

#portal-canvas { position: absolute; inset: 0; pointer-events: none; }

.gate-content {
  position: relative; z-index: 2; text-align: center;
  padding: 24px; animation: gateIn 1.5s ease both;
}
@keyframes gateIn {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.gate-wordmark {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 6px; text-transform: uppercase;
  color: #8fad6e; margin-bottom: 22px; opacity: 0.85;
}

.gate-logo { width: 260px; height: 260px; margin: 0 auto 28px; position: relative; }
.gate-logo-inner { position: relative; display: inline-block; }
.gate-logo-img {
  width: 240px; height: 240px; object-fit: contain; display: block;
  filter: drop-shadow(0 0 20px rgba(57,255,110,0.4)) drop-shadow(0 0 60px rgba(124,58,237,0.2));
  animation: gateLogoPulse 3s ease-in-out infinite;
}
@keyframes gateLogoPulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(57,255,110,0.4)) drop-shadow(0 0 60px rgba(124,58,237,0.2)); }
  50%      { filter: drop-shadow(0 0 40px rgba(57,255,110,0.7)) drop-shadow(0 0 100px rgba(124,58,237,0.4)); }
}
.gate-alien {
  position: absolute; bottom: -16px; width: 120px; height: auto; pointer-events: none;
}
.gate-alien--l { left: -96px; filter: drop-shadow(0 0 10px rgba(57,255,110,0.6)); animation: gateBobA 5s ease-in-out infinite; }
.gate-alien--r { right: -96px; filter: drop-shadow(0 0 10px rgba(168,85,247,0.6)); animation: gateBobB 7s ease-in-out infinite; }
@keyframes gateBobA { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes gateBobB { 0%,100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-18px) rotate(-4deg); } }

.gate-h1 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(32px, 5vw, 60px); letter-spacing: 2px; color: #eef4ff;
  line-height: 1.1; margin-bottom: 10px;
}
.gate-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #39ff6e, #06d6d6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gate-sub { font-size: 16px; color: rgba(238,244,255,0.5); margin-bottom: 40px; }

.gate-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-enter {
  font-family: 'Anton', sans-serif;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(135deg, #39ff6e, #06d6d6);
  color: #020408; border: none; padding: 18px 52px; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-enter:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(57,255,110,0.4); }
.btn-exit {
  font-family: 'Anton', sans-serif;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  background: transparent; color: rgba(238,244,255,0.5);
  border: 1px solid rgba(238,244,255,0.15); padding: 18px 40px; cursor: pointer;
  text-decoration: none; transition: border-color 0.2s, color 0.2s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-exit:hover { border-color: rgba(238,244,255,0.4); color: #eef4ff; }
.gate-legal {
  margin-top: 30px; font-size: 11px; color: rgba(238,244,255,0.2);
  line-height: 1.6; max-width: 360px; margin-left: auto; margin-right: auto;
}

/* ---- Reveal ---- */
#portal-reveal.portal-reveal {
  position: fixed; inset: 0; z-index: 99999; display: none;
  align-items: center; justify-content: center;
  /* Fully opaque void — the site must never show through mid-transition;
     it appears exactly once, at the .leaving dissolve. */
  background: radial-gradient(circle at 50% 50%, #060d18 0%, #020408 72%);
}
#portal-reveal.portal-reveal.active { display: flex; }
/* Primed: the opaque backdrop slides under the fading gate before the warp,
   holding the reveal animations at zero until the gate is gone. */
#portal-reveal.portal-reveal.priming { display: flex; }
#portal-reveal.portal-reveal.priming .reveal-logo,
#portal-reveal.portal-reveal.priming .reveal-tag,
#portal-reveal.portal-reveal.priming .reveal-logo-wrap::after {
  animation-play-state: paused;
  opacity: 0;
}
#portal-reveal.portal-reveal.leaving { animation: revealOut 0.85s cubic-bezier(0.7,0,0.84,0) forwards; }
.reveal-inner { position: relative; z-index: 2; text-align: center; }
.reveal-logo-wrap { position: relative; display: inline-block; margin-bottom: 20px; }
.reveal-logo {
  width: 340px; height: 340px; object-fit: contain; display: block;
  animation: revealLogoIn 1.3s cubic-bezier(0.2,0.8,0.2,1) both, gateLogoPulse 3.2s ease-in-out 1.3s infinite;
}
.reveal-logo-wrap::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 340px; height: 340px; border: 2px solid rgba(57,255,110,0.5); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2); opacity: 0;
  animation: revealShock 1.5s ease 0.55s both; pointer-events: none;
}
.reveal-tag {
  font-family: 'Anton', sans-serif;
  font-size: clamp(30px, 4.5vw, 52px); letter-spacing: 2px; color: #eef4ff;
  margin-top: 12px; opacity: 0; line-height: 1.05;
  animation: revealUp 0.8s ease 1.0s both;
}
.reveal-tag em {
  font-style: normal;
  background: linear-gradient(135deg, #39ff6e, #06d6d6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes revealLogoIn {
  0%   { opacity: 0; transform: scale(0.3) rotate(-120deg); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0) drop-shadow(0 0 30px rgba(57,255,110,0.5)); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0) drop-shadow(0 0 40px rgba(57,255,110,0.55)) drop-shadow(0 0 90px rgba(124,58,237,0.35)); }
}
@keyframes revealShock {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.4); }
}
@keyframes revealUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes revealOut { to { opacity: 0; transform: scale(1.14); } }

@media (max-width: 768px) {
  .gate-logo { width: 200px; height: 200px; }
  .gate-logo-img { width: 188px; height: 188px; }
  .gate-alien { display: none; }
  #portal-reveal .reveal-logo, .reveal-logo-wrap::after { width: 220px; height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-logo-img, .gate-alien--l, .gate-alien--r { animation: none !important; }
}


/* === COMPONENT: header === */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--header-bg, rgba(250, 250, 245, 0.95));
  backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--washi, #E4DDD0);
  z-index: 1000;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 0 1.5rem;
}
.header__logo { flex-shrink: 0; display: flex; align-items: center; }
.header__logo img,
.header__logo .header__logo-img {
  width: var(--header-logo-w, 120px);
  height: var(--header-logo-h, 40px);
  display: block;
  object-fit: contain;
  transition: transform 0.3s;
}
.header__nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; gap: 2.5rem; list-style: none; }
.nav-link {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fog, #8A8A8A); position: relative;
  transition: color 0.2s;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--moss, #4A7C59);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s;
}
.nav-link:hover, .nav-link.active { color: var(--moss, #4A7C59); }
.nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.header__phone {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--sumi, #1C1C1C); white-space: nowrap;
  transition: color 0.2s;
}
.header__phone-icon {
  width: 1em; height: 1em; flex-shrink: 0;
  color: var(--moss, #4A7C59);
}
.header__phone:hover { color: var(--moss, #4A7C59); }
.header__cta {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--moss, #4A7C59);
  padding: 0.7em 1.5em; border: 2px solid var(--moss, #4A7C59);
  border-radius: 4px; transition: all 0.3s; white-space: nowrap;
}
.header__cta:hover {
  background: var(--moss, #4A7C59); color: white;
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}
.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.hamburger, .hamburger::before, .hamburger::after {
  display: block; width: 24px; height: 2.5px;
  background: var(--sumi, #1C1C1C); transition: all 0.3s; border-radius: 1px;
}
.hamburger { position: relative; }
.hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; }
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

@media (max-width: 980px) {
  .header__nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--header-bg, rgba(250, 250, 245, 0.98)); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--washi, #E4DDD0);
    flex-direction: column; padding: 1.5rem 0; z-index: 999;
  }
  .header__nav.open { display: flex; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-link { display: block; padding: 1rem 1.5rem; border-bottom: 1px solid var(--washi, #E4DDD0); }
  .nav-link::after { display: none; }
  .header__cta { display: none; }
  .header__phone { font-size: 0.8rem; }
  .mobile-menu-toggle { display: block; }
}


/* === COMPONENT: hero === */
/* New Brighton hero override — centered single-column (the WP feel).
   Replaces the shared 2-column grid. The void/glow/photo backdrop is in the
   theme; this owns the layout + the logo + orbital ring. */
.hero__wrap {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center;
  width: 100%;
}
.hero__main {
  padding: calc(var(--header-h) + 1.5rem) 1.5rem 3.5rem !important;
  display: flex; flex-direction: column;
  align-items: center !important; text-align: center !important;
  max-width: 840px; margin: 0 auto; width: 100%;
}

/* Logo + orbital ring centerpiece */
.hero__logo-wrap { position: relative; display: inline-block; margin: 0 auto 1.6rem; }
.hero__nbd-logo {
  position: relative; z-index: 2;
  width: 300px; max-width: 70vw; height: auto; display: block;
  filter: drop-shadow(0 0 30px rgba(57, 255, 110, 0.4)) drop-shadow(0 0 80px rgba(124, 58, 237, 0.25));
  animation: heroLogoPulse 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroLogoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

.orbital-ring {
  position: absolute; top: 50%; left: 50%;
  width: 232px; height: 62px;
  border: 1px solid rgba(143, 173, 110, 0.45);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
  animation: orbit 8s linear infinite;
  pointer-events: none;
}
.orbital-ring::after {
  content: ''; position: absolute;
  width: 8px; height: 8px; top: -4px; left: 50%;
  background: #39ff6e; border-radius: 50%;
  box-shadow: 0 0 12px #39ff6e, 0 0 24px #39ff6e;
  animation: orbitDot 8s linear infinite;
}
@keyframes orbit {
  from { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); }
}
@keyframes orbitDot {
  from { transform: translateX(-50%) rotate(0deg) translateX(116px) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg) translateX(116px) rotate(-360deg); }
}

/* Type rhythm — a whole-dir override drops the shared hero.css, so the global
   reset zeroes these margins (title/subtitle/desc/CTAs collide without them). */
.hero__title { margin: 0 0 0.85rem; line-height: 1.05; }
.hero__subtitle { margin: 0 0 1.4rem; }
.hero__desc { margin: 0 auto 2.2rem; max-width: 640px; }

/* Center the CTAs + the two info cards under the centered column */
.hero__ctas { justify-content: center; }
.hero__sidebar {
  display: flex;  /* base hero.css isn't bundled — without this the cards stack */
  flex-direction: row !important; justify-content: center;
  flex-wrap: wrap; gap: 1.2rem; margin-top: 2.2rem;
}
.hero__sidebar .info-card { min-width: 200px; }

@media (max-width: 600px) {
  .hero__nbd-logo { width: 220px; }
  .orbital-ring { display: none; }
  .hero__sidebar { flex-direction: column !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__nbd-logo, .orbital-ring, .orbital-ring::after { animation: none !important; }
}


/* === COMPONENT: email-signup === */
.email-signup {
  padding: 4rem 0;
  background: var(--signup-bg, var(--sumi, #1C1C1C));
  color: var(--signup-fg, rgba(250,250,245,0.85));
  text-align: center;
}
.email-signup__inner { max-width: 520px; margin: 0 auto; }
.email-signup__title {
  font-size: 1.4rem; margin-bottom: 0.4rem;
  color: var(--signup-heading, white);
}
.email-signup__sub {
  font-size: 0.95rem; margin-bottom: 1.5rem;
  color: var(--signup-sub, rgba(250,250,245,0.6));
}
.email-signup__form {
  display: flex; gap: 0.5rem;
}
.email-signup__form input {
  flex: 1;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--signup-border, rgba(255,255,255,0.15));
  background: var(--signup-input-bg, rgba(255,255,255,0.08));
  color: white;
  font-size: 0.9rem;
  font-family: inherit;
}
.email-signup__form input::placeholder { color: rgba(255,255,255,0.4); }
.email-signup__form .cta { flex-shrink: 0; padding: 0.85rem 1.8rem; }
.email-signup__response {
  margin-top: 0.75rem; font-size: 0.85rem;
  color: var(--signup-success, #7FB069);
  min-height: 1.2em;
}
@media (max-width: 600px) {
  .email-signup__form { flex-direction: column; }
  .email-signup__form .cta { width: 100%; text-align: center; }
}


/* === COMPONENT: story === */
.story { background: var(--shoji, #FBF8F0); padding: 5.5rem 0; }
.story__head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.story__eyebrow {
  font-family: var(--font-body, sans-serif);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--moss, #A04E38); margin-bottom: 0.8rem;
}
.story__title {
  font-family: var(--font-heading, serif); color: var(--heading-strong, #28435A);
  font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; margin: 0 0 1rem;
}
.story__deck { color: var(--fog, #5C544D); font-size: 1.1rem; line-height: 1.6; margin: 0; }
.story__pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; max-width: 1040px; margin: 0 auto;
}
.story__pillar {
  background: var(--kinako, #FBF1DD);
  border: 1px solid var(--washi, #F4E6CB);
  border-radius: 12px; padding: 2rem 1.8rem;
}
.story__pillar-label {
  font-family: var(--font-body, sans-serif); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--yuzu, #B8893E); font-weight: 700; margin-bottom: 0.8rem;
}
.story__pillar-title { font-family: var(--font-heading, serif); color: var(--heading-strong, #28435A); font-size: 1.3rem; margin: 0 0 0.6rem; }
.story__pillar-body { color: var(--fog, #5C544D); font-size: 1rem; line-height: 1.6; margin: 0; }
.story__quote { max-width: 760px; margin: 3rem auto 0; text-align: center; border: 0; padding: 0; }
.story__quote-text {
  font-family: var(--font-display, cursive);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--moss, #A04E38);
  line-height: 1.25; margin: 0 0 0.6rem;
}
.story__quote-attr {
  font-family: var(--font-body, sans-serif); font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog, #5C544D); font-style: normal;
}
@media (max-width: 860px) { .story__pillars { grid-template-columns: 1fr; max-width: 480px; } }


/* === COMPONENT: feature-image === */
.featureimg { background: var(--heading-strong, #28435A); }
.featureimg__fig { margin: 0; position: relative; display: block; }
.featureimg__fig img { display: block; width: 100%; height: clamp(380px, 60vh, 660px); object-fit: cover; }
.featureimg__cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 3rem 1.5rem 1.4rem; text-align: center;
  background: linear-gradient(transparent, rgba(31, 26, 24, 0.65));
}
.featureimg__cap span {
  font-family: var(--font-display, cursive);
  color: var(--shoji, #FBF8F0);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  text-shadow: 0 2px 14px rgba(31, 26, 24, 0.5);
}


/* === COMPONENT: divider === */
.botanical-divider { position: relative; overflow: hidden; transition: opacity 0.3s ease; }
/* Inline-SVG wave variant: a centered two-tone wave motif. Asset-free + fully
   reskinnable via CSS (the paths use stroke colors from the --divider-wave-*
   tokens). Inline SVG (not a CSS background) so it composites everywhere. */
.botanical-divider--wave {
  padding: 1.75rem 0;
  background-color: var(--divider-wave-bg, transparent);
  display: flex;
  justify-content: center;
}
.botanical-divider--wave .bd-wave {
  display: block;
  width: min(560px, 72%);
  height: auto;
}
.botanical-divider--wave .bd-wave__front { stroke: var(--divider-wave-front, #C4893B); }
.botanical-divider--wave .bd-wave__back  { stroke: var(--divider-wave-back, rgba(27, 45, 69, 0.4)); }
.botanical-divider--image {
  height: 120px;
  background: linear-gradient(90deg,
    rgba(74, 124, 89, 0.04) 0%,
    rgba(127, 176, 105, 0.08) 50%,
    rgba(74, 124, 89, 0.04) 100%);
  border-top: 1px solid var(--washi, #E4DDD0);
  border-bottom: 1px solid var(--washi, #E4DDD0);
  display: flex; align-items: center; justify-content: center;
}
.botanical-divider--image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.botanical-divider--accent {
  height: 180px; background: var(--shoji, #FAFAF5);
  display: flex; align-items: center; justify-content: center; padding: 2rem 0;
}
.botanical-divider--accent img {
  max-width: 300px; width: 80%; height: auto; object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}


/* === COMPONENT: quick-facts === */
.quickfacts {
  background: var(--heading-strong, #28435A);
  color: var(--washi, #F4E6CB);
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(244, 230, 203, 0.12);
}
.quickfacts__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.9rem 2.4rem;
}
.quickfacts__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-body, sans-serif);
}
.quickfacts__label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yuzu, #B8893E);
  font-weight: 700;
}
.quickfacts__value {
  font-size: 0.95rem;
  color: var(--washi, #F4E6CB);
  font-weight: 500;
}
.quickfacts__value a { color: var(--washi, #F4E6CB); text-decoration: underline; }
@media (max-width: 700px) {
  .quickfacts__row { gap: 0.6rem 1.3rem; }
  .quickfacts__value { font-size: 0.85rem; }
}


/* === COMPONENT: visit === */
.visit { padding: 5rem 0; background: var(--shoji, #FAFAF5); }
.visit__card {
  background: linear-gradient(135deg, var(--kinako, #F2EBD9) 0%, var(--washi, #E4DDD0) 100%);
  padding: 4rem; border-radius: 12px;
  text-align: center;
  border: 2px solid var(--washi, #E4DDD0);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  max-width: 600px; margin: 0 auto;
}
.visit__card h2 { color: var(--heading-strong, #2B5438); margin-bottom: 2rem; }
.visit__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; margin-bottom: 2rem;
}
.visit__item strong {
  display: block; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fog, #8A8A8A); margin-bottom: 0.6rem; font-weight: 600;
}
.visit__item p { font-size: 1rem; color: var(--charcoal, #4A4A4A); line-height: 1.7; margin: 0; }
/* An orphaned final item (odd count in the 2-col grid) spans the full row so it
   centers under the pair above, instead of hanging alone in the left column. */
.visit__grid > .visit__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.visit__legal {
  font-size: 0.85rem; color: var(--fog, #8A8A8A);
  margin: 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.visit__item--social a {
  color: var(--link, var(--heading-strong, #2B5438));
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.visit__item--social a:hover { border-color: currentColor; }

@media (max-width: 980px) { .visit__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .visit { padding: 3rem 0; }
  .visit__card { padding: 2rem; }
  .visit__card h2 { font-size: 1.6rem; margin-bottom: 1.5rem; }
}


/* === COMPONENT: map === */
.map-section {
  width: 100%;
  background: var(--kinako, #F2EBD9);
}
.map-section iframe {
  width: 100%;
  height: var(--map-h, 420px);
  border: 0;
  display: block;
}
@media (max-width: 600px) {
  .map-section iframe { height: 300px; }
}


/* === COMPONENT: footer === */
.site-footer {
  background: var(--footer-bg, #1C1C1C);
  color: rgba(250, 250, 245, 0.7);
  padding: 4rem 0;
  position: relative;
}
.site-footer::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(127, 176, 105, 0.3), transparent);
}
.footer__vinyl {
  text-align: center; padding: 3rem 0;
  border-bottom: 1px solid rgba(250, 250, 245, 0.1);
  position: relative;
}
.footer__center h3 {
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-size: 1.6rem; color: white;
  margin-bottom: 0.4rem; letter-spacing: -0.01em;
}
.footer__tagline {
  color: var(--footer-accent, #E2B84A);
  font-weight: 600; font-size: 0.95rem;
  margin-bottom: 0.3rem; letter-spacing: 0.05em;
}
.footer__desc {
  font-size: 0.85rem;
  color: rgba(250, 250, 245, 0.5);
  letter-spacing: 0.05em; margin: 0;
}
.footer__copy {
  text-align: center; padding-top: 2rem;
  font-size: 0.8rem; color: rgba(250, 250, 245, 0.4);
}
.footer__warning {
  max-width: 70ch;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 250, 245, 0.12);
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(250, 250, 245, 0.7);
}
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.25rem; margin-bottom: 1rem;
}
.footer__legal-link {
  color: rgba(250, 250, 245, 0.6);
  font-size: 0.8rem; text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer__legal-link:hover {
  color: white;
  border-bottom-color: rgba(250, 250, 245, 0.4);
}
@media (max-width: 600px) {
  .site-footer { padding: 2rem 0; }
  .footer__center h3 { font-size: 1.3rem; }
  .footer__tagline { font-size: 0.85rem; }
}


/* === COMPONENT: dutchie-menu === */
.dutchie-menu { padding: 4rem 0 5rem; background: var(--shoji, #FAFAF5); }
.dutchie-menu__title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--heading-strong, #2B5438);
  text-align: center; margin-bottom: 0.6rem;
}
.dutchie-menu__sub {
  text-align: center; max-width: 640px; margin: 0 auto 2.5rem;
  color: var(--charcoal, #4A4A4A); font-size: 1rem;
}
.dutchie-wrap {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--washi, #E4DDD0);
  padding: 1.5rem;
  min-height: 400px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.dutchie-wrap__placeholder {
  padding: 3rem 1.5rem; text-align: center;
  color: var(--fog, #8A8A8A);
  border: 2px dashed var(--washi, #E4DDD0);
  border-radius: 6px;
}
.dutchie-wrap__placeholder strong {
  display: block; color: var(--moss, #4A7C59);
  font-size: 1.1rem; margin-bottom: 0.5rem;
}
/* Hide the fallback the moment Dutchie's embed injects its iframe. */
.dutchie-wrap:has(iframe) .dutchie-wrap__placeholder { display: none; }

@media (max-width: 600px) {
  .dutchie-menu { padding: 2.5rem 0; }
  .dutchie-wrap { padding: 0.75rem; }
}


/* === COMPONENT: prose === */
.prose-section {
  padding: calc(var(--header-height, 80px) + 3rem) 0 4rem;
  background: var(--body-bg);
  color: var(--body-fg);
}

.prose-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.prose-title {
  font-family: var(--heading-font, inherit);
  color: var(--heading-strong, var(--body-fg));
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.prose-updated {
  color: var(--muted, rgba(0,0,0,0.55));
  font-size: 0.875rem;
  margin: 0 0 2rem;
}

.prose-body {
  line-height: 1.7;
  font-size: 1rem;
}

.prose-body h2 {
  font-family: var(--heading-font, inherit);
  color: var(--heading-strong, var(--body-fg));
  font-size: 1.4rem;
  margin: 2.25rem 0 0.75rem;
}

.prose-body h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.5rem;
}

.prose-body p { margin: 0 0 1rem; }
.prose-body ul, .prose-body ol { margin: 0 0 1rem 1.25rem; }
.prose-body li { margin-bottom: 0.4rem; }
.prose-body a { color: var(--link, var(--heading-strong)); text-decoration: underline; }
.prose-body strong { color: var(--heading-strong, inherit); }