/* === THEME: newbrighton === */
/* ============================================
   THEME: MN Dispensary Co  (slug stays `newbrighton`; renamed from
   "New Brighton Dispensary" 2026-08-28 — store is still in New Brighton)
   "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;
  /* MND wordmark is a 2.28:1 horizontal lockup (the old NBD badge was ~square).
     The slot must be wide or object-fit:contain letterboxes it down to 44x19. */
  --header-logo-w: 104px;
  --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;
  /* SUPERSEDED — the tenant's own age-gate override (tenant_canon/tenants/
     newbrighton/components/age-gate/) replaced this markup, so `.age-gate__card`
     matches nothing in the render and this rule is inert. Filename kept current
     only so it doesn't dangle at a deleted asset. Live sizing lives in that
     override's `.gate-logo-img`. */
  width: 232px; height: 126px;
  margin: 4px auto 18px;
  background: url('/img/mnd-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;
}

/* ============================================================
   DUTCHIE MENU — portal-window panel
   The shared component paints a flat white card and hides the
   fallback the moment Dutchie injects its iframe — but a store
   whose embed isn't enabled yet injects a BLANK white iframe,
   leaving a bare slab on the void. Frame the embed as a
   deliberate portal window (glow border on the card surface)
   and keep the phone fallback visible as a caption BELOW the
   iframe whether or not the menu paints. Theme loads before
   component CSS, so the inversions need !important.
   ============================================================ */
/* Transparent like every other section (about/story/visit/map all invert to
   transparent above) so the fixed cosmic-bg starfield runs behind the menu
   too. It used to paint a solid --deep slab, which cut a hard-edged dark
   rectangle across the starfield — the only band on the page that did.
   The framing still reads: `.dutchie-wrap` below keeps its own panel+glow. */
.dutchie-menu { background: transparent !important; }
.dutchie-wrap {
  background: var(--deep-2) !important;
  border: 1px solid var(--line-green) !important;
  border-radius: 14px !important;
  padding: 1rem !important;
  box-shadow:
    0 0 32px rgba(57, 255, 110, 0.10),
    0 0 90px rgba(124, 58, 237, 0.12) !important;
}
.dutchie-wrap iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 10px;
}
/* Fallback: dashed placeholder box (pre-inject) restyled for the void… */
.dutchie-wrap__placeholder {
  border-color: var(--line) !important;
  color: var(--dim) !important;
}
.dutchie-wrap__placeholder strong { color: var(--green) !important; }
.dutchie-wrap__placeholder a { color: var(--green); }
/* …and once the iframe exists, keep it visible as a slim caption under
   the embed instead of vanishing (overrides the component's display:none). */
.dutchie-wrap:has(iframe) .dutchie-wrap__placeholder {
  display: block !important;
  border: none !important;
  padding: 1rem 0 0.25rem !important;
  font-size: 0.9rem;
}
.dutchie-wrap:has(iframe) .dutchie-wrap__placeholder strong {
  display: inline !important;
  font-size: 0.9rem !important;
  margin: 0 0.4rem 0 0 !important;
}

/* ============================================================
   SECTION RHYTHM (2026-08-28, operator request)
   The shared components ship generous light-theme padding — story
   88/88, visit 80/80, dutchie 64/80 — which stacked to 120-176px
   of dead band between sections at desktop width. On a dark
   full-bleed layout that reads as the page falling apart rather
   than as breathing room, so pull the vertical rhythm in ~25%.

   Scoped to this theme on purpose: the padding lives in SHARED
   components, so tightening it there would re-space every other
   tenant's site. Last block in the file so these win the
   !important ties against the component CSS.
   ============================================================ */
.dutchie-menu  { padding: 3.5rem 0 !important; }
.email-signup  { padding: 3rem 0 !important; }
.social-follow { padding: 2.5rem 0 !important; }
.story         { padding: 4rem 0 !important; }
.featureimg    { padding: 3rem 0 !important; }
.visit         { padding: 3.75rem 0 !important; }

@media (max-width: 600px) {
  .dutchie-menu, .email-signup, .social-follow,
  .story, .featureimg, .visit { padding: 2.25rem 0 !important; }
}


/* === 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 ---
   The label color is tokenized (--cta-primary-fg, default white) because the
   fleet's primaries were all dark enough for white text — greens and navies —
   and a light brand primary silently produced an illegible button. bakes'
   Budder Gold #C98A3B scores 2.92:1 against white (AA needs 4.5) and 5.78:1
   against Ink, so its theme sets the token. Every theme that does NOT set it
   renders byte-identically to before. */
.cta--primary {
  padding: 1.15em 2.8em;
  font-size: 0.95rem;
  background: var(--moss, #4A7C59);
  color: var(--cta-primary-fg, 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: var(--cta-primary-fg, 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;
}

/* Heights are auto: the MND wordmark is a 2.28:1 horizontal lockup, so a fixed
   square box (the old NBD badge shape) would letterbox it into a sliver. */
.gate-logo { width: 260px; margin: 0 auto 28px; position: relative; }
.gate-logo-inner { position: relative; display: inline-block; }
.gate-logo-img {
  width: 240px; height: auto; 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)); }
}
/* Offsets clear the wordmark's full width. The old NBD badge was square with
   transparent padding, so -96px tucked the aliens into dead space; the MND
   lockup paints edge to edge, where the same -96px clipped the M and the D. */
.gate-alien {
  position: absolute; bottom: -26px; width: 120px; height: auto; pointer-events: none;
}
.gate-alien--l { left: -130px; filter: drop-shadow(0 0 10px rgba(57,255,110,0.6)); animation: gateBobA 5s ease-in-out infinite; }
.gate-alien--r { right: -130px; 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: auto; 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; }
  .gate-logo-img { width: 188px; height: auto; }
  .gate-alien { display: none; }
  #portal-reveal .reveal-logo { width: 220px; height: auto; }
  /* the shock ring stays a circle — it's an expanding burst, not a logo frame */
  .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; }
  /* Mobile row: the desktop gap (2rem) overflows a 375px viewport once the
     phone joins the row (logo + phone + toggle + 2 gaps + padding = 415px),
     clipping the menu toggle offscreen — tighten it. */
  .header__inner { gap: 0.75rem; }
  /* Cap the logo so logo + phone + toggle always fit one row: tenants set
     --header-logo-w up to 160px, which overflows 375px even with tight gaps.
     32vw = 120px at 375, scaling down gracefully on smaller screens. */
  .header__logo img,
  .header__logo .header__logo-img { width: min(var(--header-logo-w, 120px), 32vw); }
  /* Tuck the phone right, beside the menu toggle (operator call, 2026-07-15):
     under space-between the middle item centers between UNEQUAL flanks (wide
     logo vs 40px toggle), reading ~80px right of viewport center — no
     centering pretense; the auto margin clusters phone+toggle right and the
     row gap provides the breather. */
  .header__phone { font-size: 0.8rem; margin-left: auto; }
  .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 {
  /* The +Nrem is the real clearance BELOW the fixed header (--header-h is
     eaten by it). At 1.5rem the MND wordmark sat 24px under the nav and read
     as crowded; 4.5rem gives it ~72px of air. */
  padding: calc(var(--header-h) + 4.5rem) 1.5rem 3rem !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: 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;
}
/* Sits between the subtitle and the menu box; pulls up into the subtitle's
   2.5rem gap so it reads as a note on the menu, not a third heading line. */
.dutchie-menu__notice {
  max-width: 640px; margin: -1.5rem auto 1.75rem;
  padding: 0.7rem 1rem; text-align: center;
  font-size: 0.95rem; line-height: 1.4;
  color: var(--heading-strong, #2B5438);
  background: rgba(74, 124, 89, 0.08);
  border: 1px solid var(--washi, #E4DDD0);
  border-radius: 6px;
}
.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: 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: social-follow === */
/* === COMPONENT: social-follow (Instagram card) === */
.social-follow {
  padding: 4rem 0 3rem;
  display: flex;
  justify-content: center;
  position: relative;
}
.social-follow__card {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 22px 42px;
  background: rgba(4, 8, 15, 0.75);
  border: 1px solid var(--line-green, rgba(57, 255, 110, 0.22));
  backdrop-filter: blur(14px);
  color: var(--white);
  text-decoration: none;
  position: relative;
  clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.social-follow__card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent);
}
.social-follow__card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple), var(--green), transparent);
}
.social-follow__card:hover {
  transform: translateY(-2px);
  border-color: rgba(57, 255, 110, 0.55);
  box-shadow: 0 0 40px rgba(57, 255, 110, 0.22);
}
.social-follow__icon-wrap {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  filter: drop-shadow(0 0 8px rgba(57, 255, 110, 0.55));
  transition: transform 0.3s;
}
.social-follow__card:hover .social-follow__icon-wrap { transform: rotate(-6deg) scale(1.08); }
.social-follow__icon { width: 34px; height: 34px; }
.social-follow__text { display: flex; flex-direction: column; gap: 4px; }
.social-follow__eyebrow {
  font-family: var(--font-stat, 'Space Mono', monospace);
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--green); opacity: 0.9;
}
.social-follow__handle {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: 22px; letter-spacing: 1.5px;
  color: var(--white);
}
@media (max-width: 600px) {
  .social-follow { padding: 2.75rem 0 1.5rem; }
  .social-follow__card { padding: 18px 24px; gap: 14px; }
  .social-follow__icon-wrap { width: 36px; height: 36px; }
  .social-follow__icon { width: 28px; height: 28px; }
  .social-follow__handle { font-size: 17px; letter-spacing: 1px; }
  .social-follow__eyebrow { font-size: 8px; letter-spacing: 2px; }
}


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