/* === THEME: high10 === */
/* ============================================
   THEME: High Ten
   Highway + weed — the dispensary on US-10. US-highway-guide-sign aesthetic:
   reflective sign-green panels, chrome/shield metal, cannabis-green accent,
   bold condensed uppercase type. (Replaces the cooled "The Turn" golf brand.)
   ============================================ */
:root {
  /* Brand palette — highway sign + cannabis (2026-06-05 pivot) */
  --sign-green: #00693e;        /* US guide-sign green (primary) */
  --sign-green-bright: #04793f; /* top of the sign gradient */
  --sign-green-deep: #013f27;   /* bottom / shadow */
  --leaf: #3ea845;              /* cannabis-green accent */
  --leaf-bright: #5cc85f;       /* glow accent on dark */
  --asphalt: #14171a;           /* night-highway near-black */
  --asphalt-soft: #23282c;
  --chrome: #c9ced4;            /* shield metal */
  --chrome-light: #eef1f4;
  --chrome-dark: #9aa1a8;
  --reflective: #f5f8f6;        /* sign-text white */
  --surface: #eef1ee;           /* cool light page */
  --surface-soft: #f7f9f7;
  --ink: #15181a;
  --slate: #585f63;
  --mist: #828a8f;

  /* Typography — bold condensed athletic (matches the shield logo) */
  --font-display: 'Barlow Condensed', 'DM Sans', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-stat: 'Barlow Condensed', 'DM Sans', sans-serif;
  --font-heading: var(--font-display);

  /* Layout */
  --header-h: 76px;
  --header-logo-w: 58px;
  --header-logo-h: 58px;

  /* Component-facing semantic tokens */
  --body-bg: var(--surface);
  --body-fg: var(--ink);
  --heading: var(--sign-green);
  --heading-strong: var(--asphalt);
  --link: var(--sign-green);
  --link-hover: var(--leaf);

  --header-bg: rgba(255, 255, 255, 0.96);
  --footer-bg: var(--asphalt);
  --footer-accent: var(--leaf);

  /* Shared-component aliases (shared components reference these names) */
  --moss: var(--sign-green);
  --deep-fern: var(--asphalt);
  --washi: var(--chrome);
  --kinako: var(--surface-soft);
  --shoji: var(--reflective);
  --fog: var(--mist);
  --charcoal: var(--slate);
  --sumi: var(--ink);
  --yuzu: var(--leaf);
}

body { background-color: var(--surface); }

/* All headings: bold condensed uppercase — highway-signage voice */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ── Hero rendered AS a US highway guide sign (no photo) ──────────────────────
   Deep reflective sign-green panel + an inset white sign border, content centered,
   big condensed white type, cannabis-green tagline. !important beats shared hero.css
   (theme CSS is concatenated before component CSS). */
.hero {
  background:
    linear-gradient(180deg, rgba(8, 12, 16, 0.55) 0%, rgba(8, 12, 16, 0.22) 40%, rgba(8, 12, 16, 0.74) 100%),
    url("img/gen_hero.jpg") center/cover no-repeat,
    var(--asphalt) !important;
  position: relative !important;
  min-height: 82vh !important;
  align-items: center !important;
  overflow: hidden !important;
}
/* the reflective white guide-sign border — top inset clears the fixed header so
   the frame isn't hidden behind it; other sides keep the even inset. */
.hero::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  top: calc(var(--header-h) + clamp(12px, 2vw, 26px)) !important;
  left: clamp(14px, 2.4vw, 34px) !important;
  right: clamp(14px, 2.4vw, 34px) !important;
  bottom: clamp(14px, 2.4vw, 34px) !important;
  border: 3px solid rgba(245, 248, 246, 0.92) !important;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), inset 0 0 60px rgba(0, 0, 0, 0.18) !important;
  pointer-events: none; z-index: 0;
}
.hero__wrap { position: relative; z-index: 1; grid-template-columns: 1fr !important; }
.hero__main {
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  padding: 4rem 1.5rem !important;
  max-width: 920px; margin: 0 auto;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--reflective) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}
.hero__subtitle {
  font-family: var(--font-stat);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-weight: 600;
  color: var(--leaf-bright) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.hero__desc {
  font-family: var(--font-body);
  text-transform: none;
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--reflective) !important;
  opacity: 0.95;
}
.hero__sidebar { display: none !important; }
.hero__ctas { justify-content: center !important; }
/* On the green sign, primary = reflective white w/ sign-green text; secondary = white outline */
.hero__ctas .cta--primary {
  background: var(--reflective) !important;
  border-color: var(--reflective) !important;
  color: var(--sign-green) !important;
}
.hero__ctas .cta--primary::before { background: var(--leaf-bright) !important; }
.hero__ctas .cta--primary:hover { color: var(--asphalt) !important; }
/* Client request (2026-08-06): "Get directions" (hero secondary) is a visual
   twin of the "Shop the menu" (primary) button — white bg / sign-green text,
   centered label at the same size, hover fills leaf-bright green + text darkens
   to asphalt with the same lift. Box-size match happens per-breakpoint below. */
.hero__ctas .cta--secondary {
  background: var(--reflective) !important;
  border-color: var(--reflective) !important;
  color: var(--sign-green) !important;
  font-size: 0.95rem;   /* match primary label size */
  text-align: center;
}
.hero__ctas .cta--secondary::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--leaf-bright) !important;
  transition: left 0.3s; z-index: -1;
}
.hero__ctas .cta--secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(74, 124, 89, 0.35);
  color: var(--asphalt) !important;
}
.hero__ctas .cta--secondary:hover::before { left: 0; }
/* Mobile hero-CTA padding (<768px). The shared cta.css base ISN'T bundled by
   render.py (fleet-wide: primitives referenced as raw `class="cta"` in templates
   are never tracked as used_components, so cta.css is skipped), so below the
   hero's own 768px roomy-padding media rule the buttons fell through to the
   reset's padding:0 and flattened. Restore the intended compact base here; the
   ≥768px hero rule still wins on tablet/desktop. Engine fix filed separately. */
.hero__ctas .cta { padding: 0.9em 2em; }
.hero__ctas .cta--primary,
.hero__ctas .cta--secondary { padding: 1.15em 2.8em; }
/* Tablet/desktop (>=768px): shared hero.css bumps primary to 1.35em 3.4em via
   `.hero__ctas .cta--primary`, leaving secondary at the smaller `.hero__ctas .cta`
   size. The extra `.hero` here out-specifies that shared rule so the twin holds. */
@media (min-width: 768px) {
  .hero .hero__ctas .cta--secondary { padding: 1.35em 3.4em; }
}

/* CTAs — squared, letterspaced, sign-like */
.cta { border-radius: 3px; letter-spacing: 0.12em; }
.cta--primary { background: var(--sign-green); border-color: var(--sign-green); color: #fff !important; }
.cta--primary::before { background: var(--leaf); }
.cta--secondary { color: var(--sign-green); border-color: var(--chrome-dark); }

/* Info / visit cards — chrome panel with a cannabis-green edge */
.info-card {
  background: #fff;
  border: 1px solid var(--chrome);
  border-left: 5px solid var(--leaf);
}
.visit__card {
  background: linear-gradient(135deg, #ffffff 0%, var(--surface-soft) 100%);
  border-color: var(--chrome);
}
.visit__card h2 { color: var(--sign-green); }

/* Header — light chrome base so the shield logo (light field) sits clean */
.site-header { border-bottom: 1px solid var(--chrome); }

/* Footer — brushed-metal asphalt texture under a dark wash, cannabis-green stripe */
.site-footer {
  background:
    linear-gradient(rgba(20, 23, 26, 0.86), rgba(20, 23, 26, 0.93)),
    url("img/gen_section_texture.jpg") center/cover no-repeat var(--asphalt) !important;
}
.site-footer::before {
  background: linear-gradient(90deg, transparent, var(--leaf), transparent);
}
.footer__center h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }

/* ── Section textures (TKT-83) ────────────────────────────────────────────────
   Replace the plain near-white bands with brand-fit "night-highway" texture:
   a faint asphalt speckle on the page surface, and a soft reflective sign-sheen
   (with a hairline chrome rule) on the two flat content bands. All pure CSS —
   an inline SVG fractal-noise data-URI + gradients, so no image weight and no
   Artlist sourcing. Theme CSS is concatenated BEFORE component CSS, so the band
   backgrounds need !important to beat the shared .dutchie-menu / .visit rules. */

/* Body surface — very low-contrast asphalt grain over the cool light page.
   feTurbulence grayscale noise at ~6% alpha reads as fine road grit, not a pattern. */
body {
  background-color: var(--surface);
  /* !important so the noise survives the shared BASE `body { background: … }`
     shorthand, which is concatenated after theme CSS and would else reset it. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.06'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
}

/* Shop-menu + Visit bands — real Artlist textures (TKT-83): reflective sign-panel
   grain on the Shop band, asphalt+chrome on the Visit band, each under a light
   readability wash so the section titles stay legible, framed top & bottom by a
   hairline chrome rule so each band reads as its own sign face. The Dutchie iframe
   and the white visit card are opaque and layer above, so the texture surrounds
   them without touching body copy. CSS url() resolves relative to styles.css at
   web root (/img/…) — same pattern as the footer texture, exempt from asset_base. */
.dutchie-menu {
  background:
    linear-gradient(rgba(238, 241, 238, 0.62), rgba(238, 241, 238, 0.74)),
    url("img/gen_band_texture.jpg") center/cover no-repeat var(--surface)
    !important;
  border-top: 1px solid var(--chrome);
  border-bottom: 1px solid var(--chrome);
}
.visit {
  background:
    linear-gradient(rgba(238, 241, 238, 0.60), rgba(238, 241, 238, 0.72)),
    url("img/gen_visit_texture.jpg") center/cover no-repeat var(--surface)
    !important;
  border-top: 1px solid var(--chrome);
  border-bottom: 1px solid var(--chrome);
}


/* === 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: age-gate === */
/* ============================================
   AGE GATE — first-paint modal, sessionStorage-backed
   ============================================ */
.age-gate {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.age-verified .age-gate { display: none; }

.age-gate__backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 28, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ageGateFadeIn 0.35s ease-out both;
}

.age-gate__card {
  position: relative;
  max-width: 440px; width: 100%;
  padding: 2.5rem 2rem;
  background: var(--shoji, #FAFAF5);
  border-radius: 12px;
  border: 2px solid var(--washi, #E4DDD0);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  text-align: center;
  animation: ageGatePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.age-gate__brand {
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--moss, #4A7C59);
  margin-bottom: 1.25rem;
}

.age-gate__headline {
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--heading-strong, #2B5438);
  margin: 0 0 0.75rem;
  line-height: 1.15;
}

.age-gate__sub {
  font-size: 0.95rem;
  color: var(--charcoal, #4A4A4A);
  line-height: 1.55;
  margin: 0 0 1.75rem;
}

.age-gate__actions {
  display: flex; flex-direction: column; gap: 0.75rem;
  align-items: stretch;
}

/* Matched button pair, theme-proof.
   The shared .cta--secondary is `background:white; border:transparent`, which
   vanishes on a near-white card (the "invisible-CTA trap") and clashes on a
   dark one. Several tenant themes also redefine `.cta` with no border, so the
   gate's buttons must declare the FULL border (style included) explicitly —
   never inherit it from the shared base. The deny button reuses --charcoal
   (the same token the sub-headline uses, so it's known-legible on every
   theme's card) with a currentColor border. */
.age-gate__actions .cta {
  width: 100%; text-align: center;
  padding: 1rem 1.75rem;
  font-size: 0.9rem;
  border-radius: 8px;
  border: 2px solid transparent;
}
.age-gate__actions .cta:focus-visible {
  outline: 2px solid var(--moss, #4A7C59);
  outline-offset: 3px;
}
/* Primary: solid brand fill; border matches fill so there's no ring. */
.age-gate__actions .cta--primary {
  background: var(--moss, #4A7C59);
  color: var(--cta-primary-fg, white);
  border-color: var(--moss, #4A7C59);
}
/* Deny: visible bordered button on any card (border == legible text color). */
.age-gate__actions .cta--secondary {
  background: transparent;
  color: var(--charcoal, #4A4A4A);
  border-color: currentColor;
}
.age-gate__actions .cta--secondary:hover,
.age-gate__actions .cta--secondary:focus-visible {
  background: var(--charcoal, #4A4A4A);
  color: var(--shoji, #FAFAF5);
}

.age-gate__legal {
  font-size: 0.75rem;
  color: var(--fog, #8A8A8A);
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--washi, #E4DDD0);
  line-height: 1.5;
}

/* Lock page scroll while gate is active */
body.age-gate-active { overflow: hidden; }

@keyframes ageGateFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ageGatePop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .age-gate__card { padding: 2rem 1.5rem; }
}


/* === 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 === */
.hero {
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 0;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  background: var(--body-bg, #FAFAF5);
}
.hero__wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; align-items: center;
  width: 100%;
}
.hero__main {
  padding: 4rem 3rem 4rem 0;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__title {
  font-size: clamp(2.8rem, 9vw, 5.2rem);
  font-weight: 700; color: var(--heading-strong, #2B5438);
  margin-bottom: 0.4rem; line-height: 1;
  letter-spacing: -0.02em; text-transform: uppercase;
  word-spacing: 100vw;
  animation: fadeInUp 0.8s ease-out;
}
.hero__subtitle {
  font-size: 1.4rem; font-weight: 600; color: var(--moss, #4A7C59);
  margin-bottom: 0.3rem; letter-spacing: 0.03em;
  font-style: italic;
  animation: fadeInUp 0.8s ease-out 0.1s both;
}
.hero__desc {
  font-size: 1rem; color: var(--charcoal, #4A4A4A);
  margin-bottom: 2rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}
.hero__ctas {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}
.hero__sidebar {
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-top: 2.5rem;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}
.hero__image {
  position: relative;
  height: 100%;
  min-height: calc(100vh - var(--header-h) - 2rem);
  overflow: hidden;
  animation: fadeIn 1s ease-out;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero__wrap { grid-template-columns: 1fr; }
  .hero__main { padding: 3rem 0; text-align: center; align-items: center; }
  .hero__image { min-height: 60vh; }
  .hero__sidebar { flex-direction: row; gap: 1rem; }
  .info-card { flex: 1; }
}
@media (max-width: 600px) {
  .hero__main { padding: 2rem 0; }
  .hero__title { font-size: 2.2rem; }
  .hero__subtitle { font-size: 1rem; }
  .hero__desc { font-size: 0.85rem; margin-bottom: 1.5rem; }
  .hero__ctas { flex-direction: column; gap: 1rem; width: 100%; }
  .hero__ctas .cta { text-align: center; }
  .hero__image { min-height: 50vh; }
  .hero__sidebar { flex-direction: column; }
}

/* Hero CTAs — roomier on tablet/desktop. The compact mobile base (cta.css)
   looks clunky and undersized against a full-bleed hero on larger screens,
   so bump the padding (and a touch more gap) from tablet up. Mobile-first:
   the base stays untouched below 768px. Engine-wide — applies to every
   tenant's hero. */
@media (min-width: 768px) {
  .hero__ctas { gap: 1.5rem; }
  .hero__ctas .cta { padding: 1.1em 2.8em; }
  .hero__ctas .cta--primary { padding: 1.35em 3.4em; }
}


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