@charset "utf-8";
/* ==========================================================================
   City of Rocky Top, TN — unified stylesheet · HC Web Labs
   Mobile-first. One tokenized sheet shared by every page.
   Breakpoint ladder (min-width): 320 480 640 768 1024 1280 1440
   ========================================================================== */

/* Cascade order — later layers win, regardless of source order. */
@layer reset, tokens, base, layout, components, utilities, overrides;

/* Cross-document view transitions (cross-fade on same-origin nav). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }

    html {
        -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
        scroll-padding-top: calc(var(--header-height) + var(--space-md));
        scrollbar-gutter: stable;                   /* no shift when scrollbar toggles */
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
        interpolate-size: allow-keywords;
    }

    body { min-height: 100svh; overflow-x: clip; -webkit-tap-highlight-color: transparent; }

    img, picture, svg, iframe, video { display: block; max-width: 100%; height: auto; }
    input, button, textarea, select { font: inherit; color: inherit; }
    ul[class], ol[class] { list-style: none; padding: 0; }
    :target { scroll-margin-top: calc(var(--header-height) + var(--space-md)); }

    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important; scroll-behavior: auto !important;
        }
    }
}

/* ==========================================================================
   BASE (element defaults)
   ========================================================================== */
@layer tokens {
    :root {
        color-scheme: light;

        /* Brand palette (oklch, converted from source hex) */
        --forest:        oklch(0.391 0.095 135);
        --forest-light:  oklch(0.533 0.124 136);
        --forest-dark:   oklch(0.315 0.076 136);
        --lake:          oklch(0.467 0.097 243);
        --lake-light:    oklch(0.565 0.123 246);
        --lake-dark:     oklch(0.379 0.070 238);
        --autumn:        oklch(0.652 0.151 55);    /* decorative / large text / UI */
        --autumn-light:  oklch(0.738 0.139 62);
        --autumn-dark:   oklch(0.570 0.135 54);
        --autumn-text:   oklch(0.544 0.124 55);    /* AA-safe autumn for small text on light */
        --earth:         oklch(0.498 0.060 67);
        --earth-light:   oklch(0.606 0.061 62);
        --cream:         oklch(0.959 0.013 87);
        --white:         oklch(1 0 0);
        --text:          oklch(0.285 0 0);
        --text-light:    oklch(0.450 0 0);
        --coal:          oklch(0.285 0 0);

        /* Palette-derived translucents */
        --hairline: color-mix(in oklch, var(--autumn) 14%, transparent);
        --glass:    color-mix(in oklch, var(--white) 92%, transparent);

        /* Semantic aliases (prefer these) */
        --surface: var(--cream);
        --ink: var(--text);
        --ink-muted: var(--text-light);
        --link: var(--lake);
        --link-hover: var(--lake-light);
        --accent: var(--autumn);

        /* Fluid type scale — mobile-first clamp(min, preferred, max)
           All sizes scale fluidly between 320px and 1440px viewports. */
        --text-xs:      clamp(0.75rem,  0.72rem + 0.15vw, 0.85rem);   /* captions, badges   */
        --text-sm:      clamp(0.8125rem,0.80rem + 0.12vw, 0.9375rem); /* secondary copy     */
        --text-base:    clamp(0.9375rem,0.90rem + 0.20vw, 1.0625rem); /* body               */
        --text-nav:     clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem); /* nav links — compact*/
        --text-lg:      clamp(1.0625rem,1.00rem + 0.28vw, 1.1875rem); /* card titles        */
        --text-xl:      clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem);  /* lead, sub-headings */
        --text-2xl:     clamp(1.3125rem,1.20rem + 0.55vw, 1.6875rem); /* h3/h4              */
        --text-3xl:     clamp(1.625rem, 1.45rem + 0.88vw, 2.125rem);  /* h2                 */
        --text-4xl:     clamp(1.875rem, 1.60rem + 1.10vw, 2.625rem);  /* h1                 */
        --text-display: clamp(2.5rem,   2.00rem + 2.50vw, 4.5rem);    /* hero main title    */
        --text-logo:    clamp(1.0rem,   0.85rem + 0.80vw, 1.5rem);    /* header wordmark    */

        --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
        --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

        /* Line-height scale (floor 0.9 -> ceiling 1.6) */
        --lh-none:    0.9;    /* hero display numerals */
        --lh-display: 1.05;   /* hero/display headings */
        --lh-heading: 1.2;    /* h1-h4 */
        --lh-snug:    1.35;   /* lead text, taglines, nav */
        --lh-body:    1.5;    /* body / UI copy */
        --lh-loose:   1.6;    /* long-form paragraphs */

        /* Letter-spacing scale (floor -0.5px -> ceiling 2px) */
        --ls-tight: -0.5px;   /* display headings */
        --ls-snug:  -0.25px;  /* headings, logo, bold labels */
        --ls-body:  0.15px;   /* body copy */
        --ls-wide:  1px;      /* hero eyebrow */
        --ls-wider: 2px;      /* uppercase section labels */

        /* Component metrics — compact by default */
        --btn-pad: 0.625rem 1.25rem;                    /* compact buttons */
        --card-pad: clamp(1.25rem, 2.5vw, 1.75rem);     /* card interiors */

        /* Card typography tokens */
        --card-title-size: var(--text-lg);    /* heading inside any card */
        --card-body-size:  var(--text-sm);    /* secondary copy inside cards */
        --card-dept-size:  var(--text-xl);    /* department/section label headings */

        /* Icon size scale */
        --icon-xs:  1rem;      /* nav chevrons, utility bar */
        --icon-sm:  1.25rem;   /* buttons, feature lists */
        --icon-md:  1.5rem;    /* menu toggle, bottom nav, inline h3 icons */
        --icon-lg:  1.75rem;   /* contact-card icons */
        --icon-xl:  2rem;      /* service tiles, card__icon — was 2.5, now balanced */
        --icon-2xl: 2.5rem;    /* adventure / activity / park accents */
        --icon-3xl: 5rem;      /* oversized decorative — still bold, less extreme */

        /* Spacing */
        --space-xs: 0.5rem;  --space-sm: 0.75rem; --space-md: 1rem;
        --space-lg: 1.5rem;  --space-xl: 2rem;    --space-2xl: 3rem;  --space-3xl: 4rem;
        --grid-gap: var(--space-xl);                /* grows at 1280/1440 */

        /* Layout */
        --container-max: 1400px;
        --container-padding: clamp(1rem, 3vw, 2rem);
        --header-height: 64px;                      /* grows at ≥1024 */

        /* Effects */
        --transition-fast: 0.15s ease;
        --transition-base: 0.3s ease;
        --shadow-sm: 0 2px 8px  oklch(0 0 0 / 0.08);
        --shadow-md: 0 4px 16px oklch(0 0 0 / 0.10);
        --shadow-lg: 0 8px 30px oklch(0 0 0 / 0.12);
        --shadow-xl: 0 12px 40px oklch(0 0 0 / 0.15);
        --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-btn: 10px; --radius-full: 50px;

        --z-dropdown: 100; --z-sticky: 200; --z-above: 250; --z-modal: 300; --z-tooltip: 400; --z-skip: 9999;

        /* Background images — swap to self-hosted paths for production.
           (Keep each page's $heroImage preload URL in sync with these.) */
        --hero-image:      url('https://i.imgur.com/fcnsI6m.jpeg');
        --story-image:     url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1920&q=80');
        --adventure-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80');
        --newsletter-image: url('../../assets/images/pexels-josh-hild-1270765-2801312_1200x800.webp');
        --stream-image:     url('../../assets/images/pexels-rainereckphotography-12254277_1200x800.webp');
        --waterfall-image:  url('../../assets/images/pexels-railgunbreaker-37438086_1199x799.webp');
        --hero-overlay:    linear-gradient(160deg, oklch(0.467 0.097 243 / 0.38) 0%, oklch(0.379 0.070 238 / 0.28) 100%); /* blue-dominant, light */
    }

    @media (min-width: 1024px) { :root { --header-height: 80px; } }
    /* Large-screen breathing: wider gutters + roomier grids */
    @media (min-width: 1280px) { :root { --container-padding: clamp(1.5rem, 3vw, 2.5rem); --grid-gap: 2.5rem; } }
    @media (min-width: 1440px) { :root { --grid-gap: 3rem; } }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer base {
    body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ink); background: var(--surface); }

    /* Headings — tight leading + optical negative tracking on large sizes */
    h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--lh-heading); font-weight: 700; letter-spacing: var(--ls-snug); color: var(--forest); text-wrap: balance; }
    h1 { font-size: var(--text-4xl); line-height: var(--lh-display); letter-spacing: var(--ls-tight); margin-block-end: var(--space-lg); }
    h2 { font-size: var(--text-3xl); line-height: var(--lh-heading); letter-spacing: var(--ls-tight);  margin-block-end: var(--space-lg); }
    h3 { font-size: var(--text-2xl); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); margin-block-end: var(--space-md); }
    h4 { font-size: var(--text-xl);  line-height: var(--lh-heading); letter-spacing: var(--ls-snug); margin-block-end: var(--space-md); }

    p { margin-block-end: var(--space-lg); line-height: var(--lh-loose); color: var(--ink-muted); text-wrap: pretty; }
    a { color: var(--link); text-decoration: none; transition: color var(--transition-fast); &:hover { color: var(--link-hover); } }
    strong { color: var(--ink); }
    address { font-style: normal; }

    /* Selection + native control theming — the details most sheets skip */
    ::selection { background: var(--autumn); color: var(--white); }
    :root { accent-color: var(--autumn); caret-color: var(--autumn); }
    hr { border: 0; border-top: 1px solid var(--hairline); margin-block: var(--space-xl); }

    /* Prose links (unclassed, inside main content) get honest underlines */
    .main :is(p, li, address) a:not([class]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in oklch, var(--link) 45%, transparent); }
    .main :is(p, li, address) a:not([class]):hover { text-decoration-color: currentColor; }

    /* Focus — high contrast, visible everywhere; light ring on dark surfaces */
    :focus-visible { outline: 3px solid var(--autumn-dark); outline-offset: 3px; border-radius: 2px; }
    :is(.hero, .page-hero, .section--forest, .section--lake, .newsletter, .footer, .contact-info, .card--dark, .utility-bar) :focus-visible { outline-color: var(--autumn-light); }

    /* Scrollbar (Firefox + WebKit) */
    * { scrollbar-width: thin; scrollbar-color: var(--forest) var(--cream); }
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track { background: var(--cream); }
    ::-webkit-scrollbar-thumb { background: var(--forest); border: 2px solid var(--cream); border-radius: 6px; &:hover { background: var(--forest-light); } }
}

/* ==========================================================================
   LAYOUT (containers, sections, page hero)
   ========================================================================== */
@layer layout {
    /* Content container + query context for component grids */
    .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); }

    /* Section rhythm + surfaces */
    .section { padding-block: clamp(3rem, 7vw, 6.5rem); }
    .section--white  { background: var(--white); }
    .section--cream  { background: var(--cream); }
    .section--forest { background: var(--forest); color: var(--white); }
    .section--lake   { background: var(--lake); color: var(--white); }

    /* Text on dark surfaces */
    .section--forest :is(h1,h2,h3,h4), .section--lake :is(h1,h2,h3,h4) { color: var(--white); }
    .section--forest p, .section--lake p { color: oklch(1 0 0 / 0.85); }

    /* Parallax bg — desktop + fine pointer + motion-ok only (mobile-safe) */
    .section--story-bg, .section--adventure-bg { background-size: cover; background-position: center; }
    .section--story-bg     { background-image: linear-gradient(oklch(1 0 0 / 0.18), oklch(1 0 0 / 0.22)), var(--story-image); }
    .section--adventure-bg { color: var(--white); background-image: var(--hero-overlay), var(--adventure-image); }

    /* Section header block */
    .section-header { text-align: center; max-width: 800px; margin-inline: auto; margin-block-end: var(--space-2xl); }
    .section-header h2 { margin-block-end: var(--space-lg); }
    .section-header p  { font-size: var(--text-lg); }
    .section-header--left { text-align: left; margin-inline: 0; }

    /* Eyebrow label (AA-safe autumn on light) */
    .section-subtitle { display: block; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--autumn-text); margin-block-end: var(--space-sm); }
    .section--forest .section-subtitle, .section--lake .section-subtitle, .section-header--light .section-subtitle { color: var(--autumn-light); }
    .section--forest .section-header h2, .section--lake .section-header h2, .section-header--light h2 { color: var(--white); }
    .section--forest .section-header p,  .section--lake .section-header p,  .section-header--light p  { color: oklch(1 0 0 / 0.9); }

    /* Interior page hero (image variants + solid forest) */
    .page-hero { padding: calc(var(--header-height) + var(--space-3xl)) var(--container-padding) var(--space-3xl); text-align: center; background-size: cover; background-position: center; }
    .page-hero h1 { color: var(--white); margin-block-end: var(--space-md); }
    .page-hero .section-subtitle { color: var(--autumn-light); }
    .page-hero p { color: var(--cream); font-size: var(--text-lg); max-width: 700px; margin-inline: auto; margin-block-end: 0; }
    .page-hero--about     { background-image: var(--hero-overlay), var(--stream-image); }    /* forest stream */
    .page-hero--story     { background-image: var(--hero-overlay), var(--hero-image); }      /* mountain road — used on homepage too */
    .page-hero--adventure { background-image: var(--hero-overlay), var(--waterfall-image); } /* waterfall */
    .page-hero--forest    { background-image: var(--hero-overlay), var(--waterfall-image); background-position: center top; } /* contact/pay-bills — no longer naked */
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

    /* Skip link + SR-only helper */
    .skip-link { position: absolute; top: -100%; left: var(--space-md); z-index: var(--z-skip); padding: var(--space-sm) var(--space-md); background: var(--forest); color: var(--white); border-radius: var(--radius-md); transition: top var(--transition-fast); &:focus { top: var(--space-md); } }
    .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

    /* Utility bar (desktop only) */
    .utility-bar { display: none; background: var(--coal); color: var(--white); font-size: var(--text-sm); padding-block: var(--space-xs); }
    .utility-bar__container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); display: flex; justify-content: space-between; align-items: center; }
    .utility-bar__contact, .utility-bar__links { display: flex; align-items: center; gap: var(--space-md); }
    .utility-bar__link { display: inline-flex; align-items: center; gap: var(--space-xs); color: oklch(1 0 0 / 0.8); &:hover { color: var(--autumn-light); } }
    .utility-bar__divider { color: oklch(1 0 0 / 0.3); }
    .utility-bar__hours { color: oklch(1 0 0 / 0.7); }
    @media (min-width: 1024px) { .utility-bar { display: block; } }

    /* Header — fixed, translucent, blurs harder on scroll */
    .header { position: fixed; inset: 0 0 auto 0; height: var(--header-height); z-index: var(--z-sticky); view-transition-name: site-header; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--hairline); box-shadow: 0 2px 12px oklch(0.391 0.095 135 / 0.04); transition: box-shadow var(--transition-base), background var(--transition-base); }
    .header.is-scrolled { background: color-mix(in oklch, var(--white) 98%, transparent); box-shadow: 0 4px 20px oklch(0.391 0.095 135 / 0.08); }
    .header__container { max-width: var(--container-max); height: 100%; margin-inline: auto; padding-inline: var(--container-padding); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
    .header__logo { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-heading); font-size: var(--text-logo); font-weight: 900; letter-spacing: var(--ls-snug); color: var(--forest); }
    .header__logo .icon { color: var(--autumn); --icon-size: 1.4em; } /* em: scales with wordmark */
    .header__logo:hover { color: var(--autumn-text); }

    /* Desktop nav + mega menu — aria-driven (click/keyboard); hover assist on fine pointers */
    .nav-desktop { display: none; }
    @media (min-width: 1024px) { .nav-desktop { display: block; } }
    .nav-desktop__list { display: flex; align-items: center; gap: var(--space-xs); }
    .nav-desktop__item { position: static; }
    .nav-desktop__link { position: relative; display: inline-flex; align-items: center; gap: 0.35em; padding: var(--space-sm) var(--space-md); font-size: var(--text-nav); font-weight: 600; line-height: var(--lh-snug); white-space: nowrap; color: var(--forest); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); }
    .nav-desktop__link:hover { color: var(--autumn-text); background: var(--cream); }
    .nav-desktop__link .icon--sm { transition: transform var(--transition-fast); }
    .nav-desktop__link[aria-expanded="true"] .icon--sm { transform: rotate(180deg); }
    /* Wayfinding: underline marks the section you're in */
    .nav-desktop__link.is-active::after { content: ''; position: absolute; inset-inline: var(--space-md); bottom: 2px; height: 3px; border-radius: 2px; background: var(--autumn); }

    .mega-menu { position: absolute; top: 100%; left: 50%; width: min(1000px, calc(100vw - 2rem)); background: var(--white); border-top: 3px solid var(--autumn); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; translate: -50% 8px; transition: opacity var(--transition-base), translate var(--transition-base), visibility var(--transition-base); }
    .nav-desktop__link[aria-expanded="true"] + .mega-menu { opacity: 1; visibility: visible; translate: -50% 0; }
    @media (hover: hover) and (pointer: fine) {
        .nav-desktop__item:hover .mega-menu { opacity: 1; visibility: visible; translate: -50% 0; }
        .nav-desktop__item:hover .icon--sm { transform: rotate(180deg); }
    }
    .mega-menu__container { display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.85fr; gap: var(--space-lg); padding: var(--space-xl); }
    .mega-menu__column-header { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--forest); padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); border-bottom: 2px solid var(--hairline); }
    .mega-menu__column-header .icon { color: var(--autumn); }
    .mega-menu__links { display: flex; flex-direction: column; gap: 2px; }
    .mega-menu__links a { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); color: var(--text-light); font-size: var(--text-sm); transition: background var(--transition-fast), color var(--transition-fast); }
    .mega-menu__links a:hover { background: var(--cream); color: var(--forest); }
    .mega-menu__featured { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); height: 100%; padding: var(--space-lg); background: var(--forest); border-radius: var(--radius-md); color: var(--white); }
    .mega-menu__featured .icon { color: var(--autumn-light); }
    .mega-menu__featured strong { font-size: var(--text-lg); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); }
    .mega-menu__featured span { font-size: var(--text-sm); line-height: var(--lh-body); color: oklch(1 0 0 / 0.8); }
    .mega-menu__btn { margin-top: auto; padding: var(--space-sm) var(--space-lg); background: var(--autumn); color: var(--white); border-radius: var(--radius-btn); font-weight: 600; font-size: var(--text-sm); transition: background var(--transition-fast); }
    .mega-menu__btn:hover { background: var(--autumn-light); color: var(--white); }

    /* Header actions + mobile toggle */
    .header__actions { display: flex; align-items: center; gap: var(--space-sm); }
    .header__cta { display: none; padding: var(--space-sm) var(--space-lg); font-size: var(--text-nav); font-weight: 600; line-height: var(--lh-snug); white-space: nowrap; background: var(--autumn); color: var(--white); border-radius: var(--radius-btn); transition: background var(--transition-fast), transform var(--transition-fast); }
    .header__cta:hover { background: var(--autumn-dark); color: var(--white); }
    @media (min-width: 480px) { .header__cta { display: inline-flex; } }
    .header__menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--cream); color: var(--forest); border: 1px solid var(--hairline); border-radius: var(--radius-md); cursor: pointer; }
    .header__menu-toggle .icon { --icon-size: var(--icon-md); }
    .header__menu-toggle:hover { background: var(--autumn); color: var(--white); }
    @media (min-width: 1024px) { .header__menu-toggle { display: none; } }

    /* Mobile menu — native <dialog>; animates in AND out; wider on tablets */
    .mobile-menu { width: min(88vw, 380px); max-width: 100%; height: 100%; max-height: 100svh; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--white); box-shadow: var(--shadow-xl); overflow: hidden; }
    @media (min-width: 480px) { .mobile-menu { width: min(80vw, 400px); } }
    @media (min-width: 768px) { .mobile-menu { width: min(60vw, 460px); } }
    .mobile-menu::backdrop { background: oklch(0.285 0 0 / 0.55); }
    .mobile-menu[open] { animation: menu-in var(--transition-base) ease; }
    .mobile-menu[open]::backdrop { animation: fade-in var(--transition-base) ease; }
    .mobile-menu.is-closing { animation: menu-out var(--transition-base) ease forwards; }
    .mobile-menu.is-closing::backdrop { animation: fade-out var(--transition-base) ease forwards; }
    @keyframes menu-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }
    @keyframes menu-out { to { transform: translateX(100%); } }
    @keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fade-out { to { opacity: 0; } }
    .mobile-menu__inner { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-lg); padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); }
    .mobile-menu__inner:focus { outline: none; } /* deliberate focus target on open; not tabbable */
    .mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
    .mobile-menu__logo { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-heading); font-weight: 900; color: var(--forest); }
    .mobile-menu__logo .icon { color: var(--autumn); }
    .mobile-menu__close { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--cream); color: var(--forest); border: 0; border-radius: var(--radius-md); cursor: pointer; &:hover { background: var(--autumn); color: var(--white); } }

    /* Accordions — native <details name>; bolder triggers; 2-col panels on tablets */
    .mobile-accordion { border-bottom: 1px solid var(--hairline); }
    .mobile-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-xs); font-size: var(--text-lg); font-weight: 600; color: var(--forest); cursor: pointer; list-style: none; &::-webkit-details-marker { display: none; } }
    .mobile-accordion__label { display: inline-flex; align-items: center; gap: var(--space-sm); }
    .mobile-accordion__label .icon { color: var(--autumn); }
    .mobile-accordion__arrow { transition: transform var(--transition-fast); }
    .mobile-accordion[open] .mobile-accordion__arrow { transform: rotate(180deg); }
    .mobile-accordion__panel { display: flex; flex-direction: column; padding-bottom: var(--space-sm); }
    @media (min-width: 768px) { .mobile-accordion__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-md); } }
    .mobile-accordion__panel a { padding: var(--space-sm) var(--space-md); color: var(--text-light); border-radius: var(--radius-sm); &:hover { background: var(--cream); color: var(--forest); } }
    .mobile-menu__direct-link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xs); font-size: var(--text-lg); font-weight: 600; color: var(--forest); border-bottom: 1px solid var(--hairline); }
    .mobile-menu__direct-link .icon { color: var(--autumn); }

    /* Contact strip — phone + hours reachable without scrolling to the site footer */
    .mobile-menu__contact { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); }
    .mobile-menu__contact a, .mobile-menu__contact span { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--text-light); }
    .mobile-menu__contact a:hover { color: var(--forest); }
    .mobile-menu__contact .icon { color: var(--autumn); flex: none; }

    .mobile-menu__footer { margin-top: auto; padding-top: var(--space-lg); }
    .mobile-menu__cta { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; padding: var(--space-md); background: var(--autumn); color: var(--white); border-radius: var(--radius-btn); font-weight: 700; &:hover { background: var(--autumn-dark); color: var(--white); } }
    .mobile-menu__social { display: flex; justify-content: center; gap: var(--space-md); margin-top: var(--space-lg); }
    .mobile-menu__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--cream); color: var(--forest); border-radius: 50%; &:hover { background: var(--forest); color: var(--white); } }

    /* Bottom nav (mobile) */
    .bottom-nav { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); display: flex; background: var(--white); border-top: 1px solid var(--hairline); box-shadow: 0 -2px 12px oklch(0 0 0 / 0.06); padding-bottom: env(safe-area-inset-bottom); }
    @media (min-width: 1024px) { .bottom-nav { display: none; } }
    .bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-sm) var(--space-xs); min-height: 56px; justify-content: center; font-size: var(--text-xs); font-weight: 600; color: var(--text-light); }
    .bottom-nav__item .icon { --icon-size: var(--icon-md); }
    .bottom-nav__item:hover, .bottom-nav__item.is-active { color: var(--autumn-text); }
    .bottom-nav__item--cta { color: var(--autumn-text); }

    /* Main — no bottom spacer; the footer's bottom bar handles bottom-nav clearance */

    /* Homepage hero */
    .hero { display: grid; place-items: center; min-height: clamp(540px, 92svh, 880px); padding: calc(var(--header-height) + var(--space-md)) var(--container-padding) var(--space-2xl); text-align: center; color: var(--white); background: linear-gradient(160deg, oklch(0.467 0.097 243 / 0.40) 0%, oklch(0.379 0.070 238 / 0.30) 100%), var(--hero-image) center / cover no-repeat; }
    .hero__content { width: 100%; max-width: var(--container-max); margin-inline: auto; }
    .hero__title { display: flex; flex-direction: column; align-items: center; color: var(--white); text-shadow: 0 2px 12px oklch(0 0 0 / 0.35); line-height: var(--lh-none); margin-block-end: var(--space-lg); }
    .hero__title-top { font-size: var(--text-base); font-weight: 700; text-transform: uppercase; line-height: var(--lh-snug); letter-spacing: var(--ls-wider); color: var(--autumn-light); text-align: center; margin-block-end: var(--space-md); }
    .hero__title-main { font-size: var(--text-display); line-height: var(--lh-display); font-weight: 900; letter-spacing: var(--ls-tight); }
    .hero__tagline { font-size: var(--text-xl); line-height: var(--lh-snug); font-weight: 300; color: var(--cream); max-width: 60ch; margin-inline: auto; margin-block-end: var(--space-xl); }
    /* Hero stat strip — flat band with dividers, replaces glass tiles */
    .hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-xl); max-width: 600px; margin-block: var(--space-2xl) 0; margin-inline: auto; padding-block: var(--space-lg); border-block: 1px solid oklch(1 0 0 / 0.3); text-align: center; }
    @media (min-width: 768px) { .hero__stats { grid-template-columns: repeat(4, auto); justify-content: center; column-gap: var(--space-2xl); max-width: 800px; } }
    .stat-number { display: block; font-size: var(--text-3xl); font-weight: 700; line-height: var(--lh-none); color: var(--autumn-light); margin-block-end: var(--space-xs); }
    .stat-label { font-size: var(--text-sm); font-weight: 500; color: var(--cream); }
    .hero__actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); }
    @media (min-width: 640px) { .hero__actions { flex-direction: row; } }

    /* Buttons */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--btn-pad); min-height: 44px; font-weight: 600; font-size: var(--text-sm); border: 2px solid transparent; border-radius: var(--radius-btn); cursor: pointer; text-align: center; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
    @media (pointer: fine) { .btn { min-height: 38px; } } /* mice get truly compact; touch keeps 44px targets */
    .btn .icon { --icon-size: var(--icon-sm); }
    .btn--primary { background: var(--autumn); color: var(--white); &:hover { background: var(--autumn-dark); color: var(--white); box-shadow: var(--shadow-md); } }
    .btn--forest  { background: var(--forest); color: var(--white); &:hover { background: var(--forest-light); color: var(--white); box-shadow: var(--shadow-md); } }
    .btn--outline { background: transparent; color: var(--white); border-color: oklch(1 0 0 / 0.6); &:hover { background: var(--white); color: var(--forest); } }
    .btn--block { width: 100%; }

    /* Cards */
    .card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; border: 2px solid transparent; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
    .card--bordered { border: 2px solid var(--hairline); }
    .card--dark { background: var(--coal); color: var(--white); }
    .card--dark :is(h1,h2,h3,h4) { color: var(--white); }
    .card__content { padding: var(--card-pad); }
    .card__content > :last-child { margin-block-end: 0; }
    .note { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--text-light); }
    .note .icon { flex: none; color: var(--forest); }
    .card__icon { color: var(--autumn); margin-block-end: var(--space-md); }
    .card__icon .icon { --icon-size: var(--icon-xl); }
    .card__title { font-size: var(--card-title-size); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); margin-block-end: var(--space-sm); }
    .card__text  { font-size: var(--card-body-size); color: var(--ink-muted); }
    /* Single rule covers every card family — change --card-title-size to resize all at once */
    .card__title,
    .card h3, .card h4,
    .info-card h3,
    .activity-card h3,
    .event-card h3,
    .nearby-item h3,
    .business-category h3,
    .feature h3,
    .service-item h3,
    .park-card__content h3 { font-size: var(--card-title-size); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); }
    .card-grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
    @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

    /* Quick links (homepage shortcuts) */
    .quick-links { display: grid; grid-template-columns: 1fr; gap: var(--space-md); max-width: var(--container-max); margin: calc(-1 * var(--space-3xl)) auto 0; padding: 0 var(--container-padding); position: relative; z-index: var(--z-dropdown); }
    @media (min-width: 480px) { .quick-links { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 768px) { .quick-links { grid-template-columns: repeat(4, 1fr); } }
    .quick-link { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); padding: var(--space-lg); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border-top: 4px solid var(--autumn); transition: transform var(--transition-base), box-shadow var(--transition-base); }
    .quick-link:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
    .quick-link__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; background: var(--cream); color: var(--autumn); border-radius: var(--radius-md); }
    .quick-link__title { font-size: var(--text-lg); margin: 0; color: var(--forest); }
    .quick-link__desc { margin: 0; font-size: var(--text-sm); color: var(--text-light); }

    /* Timeline — horizontal cards (homepage) */
    .timeline { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
    @media (min-width: 768px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
    .timeline-item { position: relative; padding: var(--card-pad); background: var(--white); border-radius: var(--radius-lg); border-top: 4px solid var(--autumn); box-shadow: var(--shadow-sm); }
    .timeline-item h3 { margin-block: var(--space-xs) var(--space-sm); }
    .timeline-item p:last-child { margin-block-end: 0; }
    .timeline-year { display: inline-block; font-family: var(--font-heading); font-weight: 700; color: var(--autumn-text); font-size: var(--text-lg); }

    /* Timeline — vertical spine (history page) */
    .timeline-vertical { position: relative; max-width: 900px; margin-inline: auto; padding-inline-start: var(--space-xl); }
    .timeline-vertical::before { content: ''; position: absolute; inset-inline-start: 8px; inset-block: 0; width: 4px; background: var(--autumn); border-radius: 2px; }
    .timeline-vertical__item { position: relative; padding-block-end: var(--space-2xl); &:last-child { padding-block-end: 0; } }
    .timeline-vertical__marker { position: absolute; inset-inline-start: calc(-1 * var(--space-xl) + 2px); top: 4px; width: 16px; height: 16px; background: var(--autumn); border: 3px solid var(--cream); border-radius: 50%; box-shadow: 0 2px 8px oklch(0 0 0 / 0.15); }
    .timeline-vertical__content { background: var(--white); padding: var(--card-pad); border-radius: var(--radius-lg); border-inline-start: 4px solid var(--autumn); box-shadow: var(--shadow-sm); }
    .timeline-vertical__content h3 { margin-block-end: var(--space-sm); }
    .timeline-vertical__content p:last-child { margin-block-end: 0; }
    .timeline-vertical__item--highlight .timeline-vertical__marker { width: 20px; height: 20px; inset-inline-start: calc(-1 * var(--space-xl)); background: var(--forest); }
    .timeline-vertical__item--highlight .timeline-vertical__content { border-inline-start-color: var(--forest); background: color-mix(in oklch, var(--forest) 4%, var(--white)); }
    .timeline-vertical__item--somber .timeline-vertical__marker { background: var(--coal); }
    .timeline-vertical__item--somber .timeline-vertical__content { border-inline-start-color: var(--coal); }

    /* Adventure grid (homepage) */
    .adventure-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
    @media (min-width: 640px) { .adventure-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .adventure-grid { grid-template-columns: repeat(3, 1fr); } .adventure-card--featured { grid-column: span 2; } }
    .adventure-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-md); row-gap: var(--space-sm); padding: var(--card-pad); background: oklch(0.315 0.076 136 / 0.88); border: 1px solid oklch(1 0 0 / 0.15); border-radius: var(--radius-lg); }
    .adventure-card__icon { grid-column: 1; grid-row: 1; color: var(--autumn-light); --icon-size: var(--icon-2xl); }
    .adventure-card h3 { grid-column: 2; grid-row: 1; align-self: center; color: var(--white); margin: 0; }
    .adventure-card p { grid-column: 1 / -1; grid-row: 2; color: oklch(1 0 0 / 0.85); margin: 0; }
    .adventure-card--featured { border-color: var(--autumn-light); background: oklch(0.45 0.10 55 / 0.88); }

    /* Business categories (homepage) */
    .business-grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
    @media (min-width: 640px) { .business-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .business-grid { grid-template-columns: repeat(3, 1fr); } }
    .business-category { padding: var(--space-lg); background: var(--cream); border-radius: var(--radius-lg); border-left: 4px solid var(--forest); }
    .business-category h3 { margin-block-end: var(--space-md); }
    .business-list { display: flex; flex-direction: column; gap: var(--space-xs); }
    .business-list li { position: relative; padding-left: var(--space-md); font-size: var(--text-sm); color: var(--text-light); }
    .business-list li::before { content: '▸'; position: absolute; left: 0; color: var(--autumn); }

    /* Event cards (homepage) */
    .event-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
    @media (min-width: 640px) { .event-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .event-grid { grid-template-columns: repeat(3, 1fr); } }
    .event-card { padding: var(--card-pad); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); }
    .event-card h3 { display: flex; align-items: center; gap: var(--space-sm); }
    .event-card h3 .icon { --icon-size: var(--icon-md); flex: none; color: var(--autumn); }
    .event-card h3 .icon { color: var(--autumn); flex: none; }
    .event-card p:last-child { margin-block-end: 0; }

    /* Welcome block (homepage) */
    .welcome__content { max-width: 800px; margin-inline: auto; }
    .welcome__services { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; margin-block: var(--space-lg); }
    @media (min-width: 640px) { .welcome__services { grid-template-columns: repeat(2, 1fr); } }
    .welcome__services li { display: flex; align-items: center; gap: var(--space-sm); color: var(--text); }
    .welcome__services .icon { color: var(--autumn); flex: none; }
    .welcome__signature { font-weight: 600; color: var(--forest); }

    /* Callout (tinted notice) */
    .callout { margin-top: var(--space-xl); padding: var(--space-lg); text-align: center; border: 2px solid var(--hairline); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--autumn) 6%, var(--white)); }
    .callout p { margin: 0; font-weight: 500; color: var(--text); }

    /* Newsletter */
    .newsletter { padding-block: clamp(2.5rem, 5vw, 4rem); background-image: linear-gradient(160deg, oklch(0.467 0.097 243 / 0.55) 0%, oklch(0.391 0.095 135 / 0.48) 100%), var(--newsletter-image); background-size: cover; background-position: center; color: var(--white); }
    .newsletter__content { max-width: 640px; margin-inline: auto; text-align: center; }
    .newsletter h2 { color: var(--white); }
    .newsletter p { color: oklch(1 0 0 / 0.85); }
    .newsletter-form { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }
    @media (min-width: 480px) { .newsletter-form { flex-direction: row; } }
    .newsletter-form input { flex: 1; padding: 0.625rem var(--space-md); border: 2px solid transparent; border-radius: var(--radius-btn); background: var(--white); color: var(--text); &:focus { outline: none; border-color: var(--autumn-light); } }
    .newsletter-form button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--btn-pad); min-height: 44px; background: var(--autumn); color: var(--white); border: 0; border-radius: var(--radius-btn); font-weight: 600; cursor: pointer; &:hover { background: var(--autumn-light); } }
    .newsletter__status { margin-top: var(--space-md); min-height: 1.5em; font-weight: 600; color: var(--autumn-light); }

    /* Contact split (homepage) */
    .contact-split { display: grid; grid-template-columns: 1fr; }
    @media (min-width: 768px) { .contact-split { grid-template-columns: 1fr 1fr; } }
    .contact-info { padding: clamp(var(--space-xl), 5vw, var(--space-3xl)); background: var(--forest); color: var(--white); }
    .contact-info h2 { color: var(--white); }
    .contact-info > p { color: oklch(1 0 0 / 0.85); }
    .contact-list { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-xl); }
    .contact-item__title { font-weight: 700; font-size: var(--text-lg); color: var(--autumn-light); margin-block-end: var(--space-xs); }
    .contact-item__detail { display: flex; align-items: center; gap: var(--space-sm); color: oklch(1 0 0 / 0.9); margin-block-end: var(--space-xs); }
    .contact-item__detail .icon { color: var(--autumn-light); flex: none; }
    .contact-item__detail a { color: var(--white); &:hover { color: var(--autumn-light); } }
    .contact-map { position: relative; display: grid; background: oklch(0.88 0.01 220); } /* bg matches map water tone */
    .contact-map iframe { width: 100%; height: 100%; min-height: 320px; aspect-ratio: 16 / 9; display: block; border: 0; margin: 0; vertical-align: bottom; }
    @media (min-width: 640px) { .contact-map iframe { min-height: 380px; } }
    @media (min-width: 768px) { .contact-map iframe { min-height: 100%; aspect-ratio: auto; } }
    .map-overlay { position: absolute; inset: auto var(--space-lg) var(--space-lg) auto; max-width: 240px; padding: var(--space-lg); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
    .map-overlay h3 { margin-block-end: var(--space-xs); }
    .map-overlay p { margin-block-end: 0; font-size: var(--text-sm); }

    /* Scroll-to-top */
    .scroll-to-top { position: fixed; right: var(--space-lg); bottom: calc(72px + var(--space-md) + env(safe-area-inset-bottom)); z-index: var(--z-above); display: inline-grid; place-items: center; width: 48px; height: 48px; background: var(--forest); color: var(--white); border: 0; border-radius: 50%; box-shadow: var(--shadow-lg); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background var(--transition-base); }
    .scroll-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
    .scroll-to-top:hover { background: var(--autumn); }
    @media (min-width: 1024px) { .scroll-to-top { bottom: var(--space-xl); right: var(--space-xl); } }

    /* Footer — autumn accent, brand row, 3 link columns, compliance bottom bar */
    .footer { background: var(--coal); color: oklch(1 0 0 / 0.8); border-top: 4px solid var(--autumn); padding-block: var(--space-2xl) var(--space-xl); }
    .footer__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-lg); padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); border-bottom: 1px solid oklch(1 0 0 / 0.12); }
    .footer__logo { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 900; color: var(--white); &:hover { color: var(--autumn-light); } }
    .footer__logo .icon { color: var(--autumn-light); --icon-size: 1.4em; }
    .footer__tagline { flex-basis: 100%; margin: 0; font-size: var(--text-sm); color: oklch(1 0 0 / 0.65); max-width: 52ch; }
    @media (min-width: 768px) { .footer__tagline { flex-basis: auto; } }
    .footer__grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
    @media (min-width: 480px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
    .footer__section h2 { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--autumn-light); margin-block-end: var(--space-md); }
    .footer__links, .footer__contact { display: flex; flex-direction: column; gap: var(--space-sm); }
    .footer__links a { color: oklch(1 0 0 / 0.75); font-size: var(--text-sm); &:hover { color: var(--autumn-light); } }
    .footer__contact li { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-sm); color: oklch(1 0 0 / 0.75); }
    .footer__contact .icon { color: var(--autumn-light); flex: none; margin-top: 2px; }
    .footer__contact a { color: oklch(1 0 0 / 0.75); &:hover { color: var(--autumn-light); } }
    .footer__social { display: flex; gap: var(--space-sm); }
    .footer__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; background: oklch(1 0 0 / 0.08); color: var(--white); border-radius: 50%; &:hover { background: var(--autumn); } }
    .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--space-md)); border-top: 1px solid oklch(1 0 0 / 0.1); }
    @media (min-width: 1024px) { .footer__bottom { padding-bottom: 0; } }
    .footer__bottom p { color: oklch(1 0 0 / 0.6); font-size: var(--text-xs); margin: 0; }
    .footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
    .footer__legal a { color: oklch(1 0 0 / 0.7); font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px; &:hover { color: var(--autumn-light); } }

    /* Council member cards */
    .council-grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
    @media (min-width: 480px) { .council-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .council-grid { grid-template-columns: repeat(3, 1fr); } }
    .council-role { display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--autumn-text); margin-block-end: var(--space-xs); }
    .council-name { font-size: var(--card-title-size); margin-block-end: var(--space-sm); }
    .council-contact { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--link); }

    /* Form components — report-issue + future forms */
    .form-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
    @media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
    .form-field { display: flex; flex-direction: column; gap: var(--space-xs); }
    .form-field--full { grid-column: 1 / -1; }
    .form-label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
    .form-label span { color: var(--autumn-text); }
    .form-input { width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--text-base); font-family: var(--font-body); background: var(--white); color: var(--ink); border: 2px solid var(--hairline); border-radius: var(--radius-md); transition: border-color var(--transition-fast); }
    .form-input:focus { outline: none; border-color: var(--autumn); }
    .form-input::placeholder { color: var(--text-light); }
    .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-md) center; padding-right: var(--space-3xl); cursor: pointer; }
    .form-textarea { resize: vertical; min-height: 120px; line-height: var(--lh-body); }
    .form-actions { display: flex; justify-content: flex-start; margin-top: var(--space-xl); }
    .form-error { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); background: color-mix(in oklch, var(--autumn) 10%, var(--white)); color: var(--autumn-text); border: 2px solid var(--autumn); border-radius: var(--radius-md); margin-block-end: var(--space-lg); font-weight: 600; }
    .form-success { margin-inline: auto; text-align: center; }
    .form-success .card__icon { color: var(--forest); margin-inline: auto; }
    .btn--spaced { margin-top: var(--space-sm); }

    /* Government: department grid, staff contact, table, doc badges */
    .gov-departments { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
    @media (min-width: 640px) { .gov-departments { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .gov-departments { grid-template-columns: repeat(3, 1fr); } }
    .gov-dept__heading { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--card-title-size); margin-block-end: var(--space-md); }
    .gov-dept__heading .icon { color: var(--autumn); }
    .gov-dept__note { font-size: var(--text-sm); color: var(--ink-muted); margin-block-end: var(--space-md); }
    .staff-contact { display: block; font-size: var(--text-sm); color: var(--text-light); margin-top: 2px; }
    .staff-contact a { color: var(--link); }

    /* Gov table */
    .doc-table { overflow-x: auto; }
    .gov-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
    .gov-table th { text-align: left; padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-light); border-bottom: 2px solid var(--hairline); white-space: nowrap; }
    .gov-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--ink-muted); }
    .gov-table tr:last-child td { border-bottom: 0; }
    @media (hover: hover) and (pointer: fine) { .gov-table tbody tr:hover td { background: color-mix(in oklch, var(--autumn) 4%, var(--white)); } }
    .doc-badge { display: inline-flex; align-items: center; padding: 2px var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
    .doc-badge--available { background: color-mix(in oklch, var(--forest) 12%, transparent); color: var(--forest); }
    .doc-badge--pending   { background: color-mix(in oklch, var(--autumn) 12%, transparent); color: var(--autumn-text); }
    .note--spaced { margin-top: var(--space-lg); }

    /* ---- Shared interior patterns ---------------------------------------- */

    /* Centered CTA block (about / history / things-to-do) */
    .cta { text-align: center; }
    .cta p { max-width: 600px; margin-inline: auto; margin-block-end: var(--space-xl); }
    .cta__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

    /* Narrow prose + lead paragraph */
    .content-narrow { max-width: 800px; margin-inline: auto; }
    .lead-text { font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--text); font-weight: 500; margin-block-end: var(--space-xl); }

    /* About: intro grid + stats + sidebar info cards */
    .about-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); }
    @media (min-width: 768px) { .about-grid { grid-template-columns: 2fr 1fr; } }
    .about-content h2 { margin-block-end: var(--space-lg); }
    .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 2px solid var(--hairline); }
    .about-stat { text-align: center; }
    .about-stat__number { display: block; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--autumn); }
    .about-stat__label { font-size: var(--text-sm); color: var(--text-light); }
    .about-sidebar { display: flex; flex-direction: column; gap: var(--space-lg); }
    .info-card { background: var(--cream); padding: var(--space-lg); border-radius: var(--radius-lg); border-left: 4px solid var(--autumn); }
    .info-card h3 { display: flex; align-items: center; gap: var(--space-sm); margin-block-end: var(--space-sm); }
    .info-card h3 .icon { color: var(--autumn); --icon-size: var(--icon-md); }
    .info-card p { margin-block-end: 0; font-size: var(--text-sm); }

    /* Services grid (centered icon tiles) */
    .services-grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
    @media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
    .service-item { text-align: center; }
    .service-item__icon { width: 64px; height: 64px; background: var(--forest); border-radius: var(--radius-lg); display: grid; place-items: center; margin: 0 auto var(--space-md); color: var(--white); }
    .service-item__icon .icon { --icon-size: var(--icon-xl); }
    .service-item h3 { margin-block-end: var(--space-sm); }
    .service-item p { margin-block-end: 0; font-size: var(--text-sm); }

    /* Feature list (icon heading + copy) */
    .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--grid-gap); }
    .feature h3 { display: flex; align-items: center; gap: var(--space-sm); margin-block-end: var(--space-sm); }
    .feature h3 .icon { --icon-size: var(--icon-md); flex: none; color: var(--autumn); }
    .feature h3 .icon { color: var(--autumn); }
    .feature p { margin-block-end: 0; }

    /* Feature highlight (things-to-do: copy + oversized icon) */
    .feature-highlight { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; }
    @media (min-width: 768px) { .feature-highlight { grid-template-columns: 2fr 1fr; } }
    .feature-highlight__icon { display: grid; place-items: center; color: var(--autumn); opacity: 0.2; }
    .feature-highlight__icon .icon { --icon-size: var(--icon-3xl); }
    .feature-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-block: var(--space-lg); }
    .feature-list li { display: flex; align-items: center; gap: var(--space-sm); font-weight: 500; }
    .feature-list .icon { color: var(--forest); --icon-size: var(--icon-sm); flex: none; }

    /* Activity cards (centered, hover border) */
    .activities-grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
    @media (min-width: 640px) { .activities-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .activities-grid { grid-template-columns: repeat(3, 1fr); } }
    .activity-card { background: var(--white); padding: var(--card-pad); border-radius: var(--radius-lg); text-align: center; border: 2px solid transparent; transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); }
    .activity-card__icon { color: var(--autumn); margin-block-end: var(--space-md); }
    .activity-card__icon .icon { --icon-size: var(--icon-2xl); }
    .activity-card h3 { margin-block-end: var(--space-sm); }
    .activity-card p { margin-block-end: 0; }

    /* Park cards (colored header + two-column feature list) */
    .parks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--grid-gap); }
    .park-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base); }
    .park-card__header { padding: var(--space-xl); display: grid; place-items: center; color: var(--white); background: var(--forest); }
    .park-card__header--lake { background: var(--lake); }
    .park-card__header .icon { --icon-size: var(--icon-2xl); }
    .park-card__content { padding: var(--card-pad); }
    .park-card__content h3 { margin-block-end: var(--space-md); }
    .park-card__content ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); margin-block: var(--space-lg); }
    .park-card__content li { font-size: var(--text-sm); color: var(--text-light); position: relative; padding-left: var(--space-md); }
    .park-card__content li::before { content: '•'; position: absolute; left: 0; color: var(--autumn); }

    /* Nearby attractions (distance badge) */
    .nearby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); }
    .nearby-item { background: var(--white); padding: var(--card-pad); border-radius: var(--radius-lg); border-left: 4px solid var(--autumn); box-shadow: var(--shadow-sm); }
    .nearby-item__distance { display: inline-block; background: var(--forest); color: var(--white); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; margin-block-end: var(--space-sm); }
    .nearby-item h3 { margin-block-end: var(--space-sm); }
    .nearby-item p { margin-block-end: 0; font-size: var(--text-sm); }

    /* Contact page: department cards, staff list, emergency, resources */
    .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--grid-gap); }
    .contact-card__head { display: flex; align-items: center; gap: var(--space-md); margin-block-end: var(--space-lg); }
    .contact-card__head :is(h2, h3) { font-size: var(--card-dept-size); margin: 0; }
    .contact-card__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--radius-md); color: var(--white); flex: none; background: var(--forest); }
    .contact-card__icon .icon { --icon-size: var(--icon-lg); }
    .contact-card__icon--lake   { background: var(--lake); }
    .contact-card__icon--autumn { background: var(--autumn); }
    .staff-list { display: flex; flex-direction: column; gap: var(--space-md); }
    .staff-list li { padding-block-end: var(--space-md); border-bottom: 1px solid var(--hairline); &:last-child { padding-block-end: 0; border-bottom: 0; } }
    .staff-list strong { display: block; color: var(--forest); }
    .staff-list span { color: var(--text-light); font-size: var(--text-sm); }
    .emergency__label { font-size: var(--text-sm); margin-block-end: var(--space-xs); color: oklch(1 0 0 / 0.75); }
    .emergency__number { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-4xl); color: var(--autumn); }
    .emergency__number--sm { font-size: var(--text-xl); color: var(--cream); }
    .resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
    .resources-heading { text-align: center; margin-block: var(--space-2xl) var(--space-xl); }
    .resource-card p { display: flex; align-items: center; gap: var(--space-sm); margin-block-end: var(--space-sm); &:last-child { margin-block-end: 0; } }
    .resource-card .icon { color: var(--autumn); flex: none; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
    /* Icon size flows through --icon-size so component contexts can resize it
       even though this utilities layer loads after components. */
    .icon { width: var(--icon-size, var(--icon-sm)); height: var(--icon-size, var(--icon-sm)); display: inline-block; vertical-align: middle; }
    .icon--sm { --icon-size: var(--icon-xs); }
    .icon--lg { --icon-size: var(--icon-lg); }
    .icon--xl { --icon-size: var(--icon-xl); }
    .text-center { text-align: center; }
    .flow > * + * { margin-block-start: var(--space-md); }
    .section--flush { padding-block: 0; }
}

/* ==========================================================================
   OVERRIDES (loads last — refinements + a11y media queries)
   ========================================================================== */
@layer overrides {
    /* Card hover effects — border reveal on all; lift on fine pointer only */
    @media (hover: hover) and (pointer: fine) {
        /* General content cards */
        .card:hover             { border-color: var(--autumn); box-shadow: var(--shadow-md); }
        .card--bordered:hover   { border-color: var(--autumn); box-shadow: var(--shadow-md); }

        /* Business category cards */
        .business-category:hover { border-left-color: var(--autumn); background: color-mix(in oklch, var(--autumn) 5%, var(--cream)); }

        /* Event cards */
        .event-card { border: 2px solid transparent; transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); }
        .event-card:hover { border-color: var(--autumn); box-shadow: var(--shadow-md); transform: translateY(-3px); }

        /* Activity cards */
        .activity-card:hover { border-color: var(--autumn); box-shadow: var(--shadow-lg); transform: translateY(-3px); }

        /* Park cards */
        .park-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-3px); }
        .park-card:hover .park-card__header { background: var(--forest-light); }
        .park-card:hover .park-card__header--lake { background: var(--lake-light); }

        /* Adventure cards */
        .adventure-card:hover { border-color: var(--autumn-light); transform: translateY(-3px); }

        /* Nearby items */
        .nearby-item { border-left-color: var(--autumn); transition: box-shadow var(--transition-base), transform var(--transition-base), background var(--transition-base); }
        .nearby-item:hover { background: color-mix(in oklch, var(--autumn) 5%, var(--white)); box-shadow: var(--shadow-md); transform: translateY(-2px); }

        /* Timeline items */
        .timeline-item:hover { box-shadow: var(--shadow-md); }

        /* Info cards (about sidebar) */
        .info-card:hover { border-left-color: var(--forest); background: color-mix(in oklch, var(--forest) 4%, var(--cream)); }

        /* Service items */
        .service-item:hover .service-item__icon { background: var(--autumn); }

        /* Feature h3 icon nudge */
        .feature:hover h3 .icon { color: var(--forest); }
    }

    /* Lock background scroll while the mobile menu dialog is open
       (scrollbar-gutter: stable already reserves the gutter, so no shift). */
    html.menu-open { overflow: hidden; }

    /* Overflow hardening: let grid/flex children shrink; break long words */
    body { overflow-wrap: break-word; }
    .timeline > *, .quick-links > *, .adventure-grid > *, .business-grid > *,
    .event-grid > *, .card-grid > *, .services-grid > *, .features-grid > *,
    .activities-grid > *, .parks-grid > *, .nearby-grid > *, .contact-cards > *,
    .resource-grid > * { min-width: 0; }
    .newsletter-form input { min-width: 0; }

    /* Micro-interactions */
    .btn:active { transform: scale(0.97); }
    .quick-link__icon { transition: transform var(--transition-base); }
    .quick-link:hover .quick-link__icon { transform: rotate(-6deg) scale(1.08); }
    .bottom-nav__item[aria-current="page"] { color: var(--autumn-text); }

    /* Scroll-driven reveal — CSS only, @supports-guarded, motion-safe.
       Animates `translate` so hover `transform`s stay conflict-free. */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            .quick-link, .timeline-item, .adventure-card, .business-category, .event-card,
            .timeline-vertical__item, .service-item, .feature, .activity-card, .park-card,
            .nearby-item, .info-card, .contact-card, .resource-card {
                animation: reveal-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
            }
            @keyframes reveal-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
        }
    }

    /* Reduced transparency → solid header (only remaining glass surface) */
    @media (prefers-reduced-transparency: reduce) {
        .header { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
        .adventure-card { background: var(--forest-dark); }
    }

    /* Forced colors (Windows High Contrast) — keep structure legible */
    @media (forced-colors: active) {
        .btn, .quick-link, .card, .timeline-item, .event-card, .business-category,
        .activity-card, .park-card, .nearby-item, .info-card, .contact-card,
        .mega-menu, .mobile-menu { border: 1px solid; }
        :focus-visible { outline: 2px solid; outline-offset: 3px; }
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .header, .utility-bar, .bottom-nav, .scroll-to-top, .mobile-menu, .newsletter { display: none !important; }
    .main { padding: 0 !important; }
    * { background: #fff !important; color: #000 !important; box-shadow: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
    section { break-inside: avoid; }
}