/* =========================================================
   Eastside Hill — Modern Editorial Letterpress
   Warm parchment + forest + clay; Fraunces display, DM Sans body.
   ========================================================= */

/* === Design Tokens === */
:root {
    /* Paper & ink */
    --color-paper:        #F7F1E3;   /* warm parchment background */
    --color-paper-soft:   #FBF6E9;   /* elevated surfaces */
    --color-paper-deep:   #EFE6D1;   /* recessed wash */
    --color-ink:          #1B2620;   /* near-black, warm */
    --color-ink-soft:     #5A6960;   /* secondary text */
    --color-ink-faint:    #8C9489;   /* tertiary / meta */
    --color-hairline:     #E5DAC0;   /* decorative borders */

    /* Forest palette */
    --color-forest:       #1F4A36;   /* deep, sophisticated forest */
    --color-forest-deep:  #143324;
    --color-moss:         #5C7C5F;   /* secondary green */
    --color-fern:         #8FA889;   /* soft tint */

    /* Warm accents */
    --color-clay:         #C4683D;   /* terracotta, used sparingly */
    --color-clay-soft:    #E3A47A;
    --color-honey:        #E6B65B;   /* soft gold for highlights */

    /* Legacy aliases — kept so existing classes keep working without edits */
    --color-sage:         var(--color-moss);
    --color-gold:         var(--color-honey);
    --color-cream:        var(--color-paper);
    --color-charcoal:     var(--color-ink);
    --color-white:        var(--color-paper-soft);

    /* Type */
    --font-display: 'Fraunces', 'Merriweather', Georgia, serif;
    --font-body:    'DM Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --font-heading: var(--font-display); /* legacy alias */

    /* Type scale */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1.0625rem;    /* 17px */
    --text-lg:   1.25rem;
    --text-xl:   1.625rem;
    --text-2xl:  clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
    --text-3xl:  clamp(2.5rem, 1.4rem + 4.5vw, 4.25rem);

    --leading-body: 1.65;
    --leading-tight: 1.15;

    --tracking-eyebrow: 0.18em;

    /* Geometry */
    --radius-sm: 4px;
    --radius:    10px;
    --radius-lg: 18px;
    --container-max: 1180px;
    --spacing: 1.5rem;
    --breakpoint: 768px;

    /* Shadows — soft, warm-toned */
    --shadow-sm: 0 1px 0 rgba(27,38,32,0.04), 0 1px 2px rgba(27,38,32,0.05);
    --shadow-md: 0 8px 28px -12px rgba(27,38,32,0.18), 0 2px 6px -2px rgba(27,38,32,0.08);
    --shadow-lg: 0 22px 50px -20px rgba(27,38,32,0.22);

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 180ms;
    --dur:      280ms;
}

/* === Font-face: self-hosted variable fonts ====================
   Fraunces and DM Sans are split by Unicode subset (latin + latin-ext)
   so browsers only download what they need. Both are variable fonts:
     - DM Sans:   opsz 9..40, wght 400..700
     - Fraunces:  opsz 9..144, wght 400..700, SOFT 0..100
   Merriweather kept as a fallback for the old class hooks. */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-v17-latin.woff2') format('woff2-variations'),
         url('../fonts/dm-sans-v17-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-v17-latin-ext.woff2') format('woff2-variations'),
         url('../fonts/dm-sans-v17-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-v38-latin.woff2') format('woff2-variations'),
         url('../fonts/fraunces-v38-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-v38-latin-ext.woff2') format('woff2-variations'),
         url('../fonts/fraunces-v38-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/merriweather-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--color-ink);
    background-color: var(--color-paper);
    /* Subtle paper grain — inline SVG noise */
    background-image:
        radial-gradient(1200px 600px at 12% -10%, rgba(143,168,137,0.22), transparent 60%),
        radial-gradient(900px 700px at 110% 8%, rgba(230,182,91,0.12), transparent 55%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11   0 0 0 0 0.15   0 0 0 0 0.13   0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-attachment: fixed, fixed, fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--color-forest);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(31,74,54,0.35);
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-clay); text-decoration-color: var(--color-clay); }

/* === Accessibility === */
.skip-link {
    position: absolute; left: -9999px; top: auto;
    background: var(--color-forest); color: var(--color-paper-soft);
    padding: 0.5rem 1rem; z-index: 1000;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-family: var(--font-body); font-weight: 600;
}
.skip-link:focus { left: 0; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible {
    outline: 2px solid var(--color-honey);
    outline-offset: 3px;
    border-radius: 3px;
}

/* === Selection === */
::selection { background: var(--color-honey); color: var(--color-ink); }

/* === Layout === */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing);
}

/* Generic page content frame */
.page-content { padding-top: 3rem; padding-bottom: 4rem; }

.page-content h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
    color: var(--color-forest);
    margin-bottom: 1.25rem;
    font-variation-settings: "opsz" 144, "SOFT" 60;
}
.page-content h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-forest);
    margin-top: 2.25rem; margin-bottom: 0.85rem;
    font-variation-settings: "opsz" 96, "SOFT" 50;
}
.page-content h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--color-forest);
    margin-top: 1.75rem; margin-bottom: 0.6rem;
    font-variation-settings: "opsz" 48, "SOFT" 40;
}
.page-content p  { margin-bottom: 1.05rem; max-width: 68ch; }
.page-content ul,
.page-content ol { margin-bottom: 1.05rem; padding-left: 1.4rem; }
.page-content li { margin-bottom: 0.35rem; }
.page-content blockquote {
    border-left: 3px solid var(--color-clay);
    padding: 0.35rem 0 0.35rem 1.25rem;
    margin: 1.5rem 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--color-forest);
}
.page-content hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-hairline) 20%, var(--color-hairline) 80%, transparent);
    margin: 2.5rem 0;
}

/* Eyebrow utility — small uppercase tracked label */
.eyebrow,
.card-category,
.date-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-clay);
}

/* .date-badge carries informational text (event date), so it must hit WCAG AA
   contrast on the page background — clay only renders ~3.6:1, ink is ~14:1. */
.date-badge {
    color: var(--color-ink);
}

/* === Header & Nav ============================================== */
.site-header {
    background: transparent;
    color: var(--color-ink);
    padding: 1.1rem 0 1rem;
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    background-color: rgba(247,241,227,0.82);
    border-bottom: 1px solid var(--color-hairline);
}
.nav-container {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
}
.site-logo {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: -0.01em;
    color: var(--color-forest);
    text-decoration: none;
    font-variation-settings: "opsz" 144, "SOFT" 80;
}
.site-logo:hover { color: var(--color-clay); text-decoration: none; }

.nav-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    padding: 0.5rem; min-width: 44px; min-height: 44px;
}
.nav-toggle-bar {
    display: block; width: 22px; height: 1.5px;
    background: var(--color-ink); margin: 5px 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
    border-radius: 1px;
}

.site-nav { display: flex; align-items: center; }
.nav-list {
    display: flex; list-style: none; gap: 0.15rem; align-items: center;
}
.nav-item { position: relative; }
.nav-item a {
    position: relative;
    color: var(--color-ink);
    text-decoration: none;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    display: flex; align-items: center;
    min-height: 40px;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-item a::after {
    content: '';
    position: absolute;
    left: 0.85rem; right: 0.85rem; bottom: 6px;
    height: 1.5px; background: var(--color-clay);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--dur) var(--ease);
}
.nav-item a:hover { color: var(--color-forest); }
.nav-item a:hover::after,
.nav-item.active > a::after { transform: scaleX(1); }
.nav-item.active > a { color: var(--color-forest); }

.nav-submenu {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    list-style: none;
    min-width: 220px; z-index: 200; padding: 0.4rem 0;
    margin-top: 0.25rem;
}
.nav-submenu::before {
    content: ''; position: absolute;
    top: -0.5rem; left: 0; right: 0; height: 0.5rem;
}
.nav-submenu a {
    color: var(--color-ink);
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
    min-height: 0;
}
.nav-submenu a::after { display: none; }
.nav-submenu a:hover { background: var(--color-paper-deep); color: var(--color-forest); }
.nav-item:hover .nav-submenu,
.nav-item:focus-within .nav-submenu { display: block; }

/* === Search === */
.search-form {
    display: flex; align-items: center;
    margin-left: 0.75rem;
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    padding: 0.15rem 0.15rem 0.15rem 0.85rem;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.search-form:focus-within {
    border-color: var(--color-moss);
    box-shadow: 0 0 0 3px rgba(92,124,95,0.18);
}
.search-input {
    background: transparent;
    border: none;
    color: var(--color-ink);
    padding: 0.4rem 0.5rem 0.4rem 0;
    font-size: 0.9rem; width: 150px;
    font-family: var(--font-body);
}
.search-input::placeholder { color: var(--color-ink-faint); }
.search-input:focus { outline: none; }
.search-button {
    background: var(--color-forest);
    border: none; color: var(--color-paper-soft);
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    cursor: pointer; min-width: 36px; min-height: 32px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.search-button:hover { background: var(--color-clay); transform: translateX(1px); }

/* === Footer ==================================================== */
.site-footer {
    position: relative;
    background: var(--color-forest-deep);
    color: rgba(251,246,233,0.78);
    padding: 5.5rem 0 1.75rem;
    margin-top: 5rem;
    overflow: hidden;
}
/* East Hill elevation profile (real data) above the footer */
.site-footer::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 64px;
    background-image: url('../images/decoration/footer-ridge.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.footer-content {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 2.5rem; margin-bottom: 2rem;
}
.footer-info p { margin-bottom: 0.25rem; }
.footer-title {
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.25rem;
    color: var(--color-paper-soft);
    margin-bottom: 0.4rem;
    font-variation-settings: "opsz" 144, "SOFT" 60;
}
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: var(--color-honey); text-decoration: none; font-weight: 500; }
.footer-links a:hover { color: var(--color-clay-soft); text-decoration: underline; }
.footer-social {
    display: flex; gap: 0.5rem;
    list-style: none; padding: 0; margin: 0;
}
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    color: var(--color-honey);
    border-radius: 999px;
    transition: color 0.15s ease;
}
.footer-social a:hover { color: var(--color-clay-soft); }
.footer-social a:focus-visible {
    outline: 2px solid var(--color-honey);
    outline-offset: 2px;
}
.footer-social__icon { display: block; width: 24px; height: 24px; }
.footer-copyright {
    font-size: var(--text-sm); opacity: 0.55;
    text-align: center;
    border-top: 1px solid rgba(251,246,233,0.12);
    padding-top: 1.25rem;
    letter-spacing: 0.02em;
}
.site-footer a { color: var(--color-honey); }

/* === Cards (shared) =========================================== */
.card {
    position: relative;
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(31,74,54,0.18);
}
.card h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--color-forest);
    font-variation-settings: "opsz" 96, "SOFT" 40;
}
.card h3 a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--color-clay), var(--color-clay)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur) var(--ease); }
.card h3 a:hover { color: var(--color-clay); background-size: 100% 1.5px; }
.card p { color: var(--color-ink-soft); margin-bottom: 0; }
.card-meta {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: var(--text-xs); color: var(--color-ink-faint);
    margin-bottom: 0.55rem;
}
.card-category {
    /* eyebrow-style — clay color from shared rule above fails WCAG AA on the
       card background (~3.6:1); override to ink so the category text meets AA. */
    background: transparent; padding: 0;
    color: var(--color-ink);
}

/* === Buttons ================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    min-height: 44px; text-align: center;
    cursor: pointer; border: 1px solid transparent;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    will-change: transform;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--color-forest);
    color: var(--color-paper-soft);
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 18px -10px rgba(31,74,54,0.55);
}
.btn-primary:hover { background: var(--color-clay); color: var(--color-paper-soft); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 10px 22px -10px rgba(196,104,61,0.55); }

.btn-secondary {
    background: transparent;
    color: var(--color-forest);
    border-color: rgba(31,74,54,0.35);
}
.btn-secondary:hover {
    background: var(--color-forest);
    color: var(--color-paper-soft);
    border-color: var(--color-forest);
}

/* Arrow indicator for buttons whose text ends with an arrow-like phrase */
.btn-primary::after,
.btn-secondary::after {
    content: '→';
    display: inline-block;
    transition: transform var(--dur-fast) var(--ease);
    opacity: 0.85;
}
.btn:hover::after { transform: translateX(3px); }
/* Suppress arrow on icon-only / form-submit buttons */
button.btn::after,
.btn-block::after,
.search-button::after { content: none; }

/* === Forms ==================================================== */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block; font-weight: 600; margin-bottom: 0.4rem;
    font-size: 0.95rem; color: var(--color-ink);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
    width: 100%; padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-base);
    background: var(--color-paper-soft);
    color: var(--color-ink);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-moss);
    outline: none;
    box-shadow: 0 0 0 3px rgba(92,124,95,0.18);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-check { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-forest); }
.form-message {
    background: rgba(143,168,137,0.18);
    border: 1px solid rgba(92,124,95,0.4);
    color: var(--color-forest-deep);
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-weight: 500;
}

/* === Mobile =================================================== */
@media (max-width: 1100px) {
    .nav-toggle { display: flex; flex-direction: column; justify-content: center; }
    .site-nav { display: none; width: 100%; order: 3; }
    .site-nav.open { display: block; }
    .nav-list { flex-direction: column; padding: 0.5rem 0; gap: 0; align-items: stretch; }
    .nav-item a::after { display: none; }
    .nav-item a {
        padding: 0.85rem 0.25rem;
        border-bottom: 1px solid var(--color-hairline);
    }
    .nav-item:last-child a { border-bottom: none; }
    .nav-submenu {
        position: static; box-shadow: none; border: none; background: transparent;
        padding-left: 1rem; margin: 0;
    }
    .nav-submenu::before { display: none; }
    .nav-item:hover .nav-submenu,
    .nav-item:focus-within .nav-submenu { display: block; }
    .search-form { margin: 0.75rem 0 0.25rem; width: 100%; }
    .search-input { flex: 1; width: auto; }
    .footer-content { flex-direction: column; gap: 1.5rem; }
    .page-content { padding-top: 2rem; padding-bottom: 3rem; }
}

/* === Homepage ================================================ */
.home-welcome {
    position: relative;
    padding: 5rem 0 3.5rem;
    text-align: left;
}
.home-welcome::before {
    /* subtle East Hill contour map (real elevation data) in the negative space */
    content: '';
    position: absolute;
    right: -1rem; top: 0.5rem;
    width: clamp(14rem, 32vw, 26rem);
    height: clamp(12rem, 28vw, 22rem);
    background: url('../images/decoration/contour-map.svg') no-repeat center / contain;
    opacity: 0.13;
    pointer-events: none;
    z-index: 0;
}
.home-welcome > * { position: relative; z-index: 1; }
.home-welcome::after {
    /* small eyebrow above the H1 */
    content: 'Eau Claire · Wisconsin';
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs); font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-clay);
    margin-bottom: 1rem;
    order: -1;
}
.home-welcome { display: flex; flex-direction: column; }
.home-welcome h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-3xl);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--color-forest-deep);
    margin-bottom: 1.25rem;
    max-width: 18ch;
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
.home-welcome h1 em,
.home-welcome h1 i { font-style: italic; color: var(--color-clay); font-weight: 400; }
.home-welcome p {
    font-size: 1.15rem;
    color: var(--color-ink-soft);
    max-width: 58ch;
    margin-bottom: 1.5rem;
}

.home-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 3rem 2.5rem;
    padding: 1rem 0 4rem;
}
@media (min-width: 1101px) {
    .home-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.home-updates h2,
.home-sidebar h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--color-forest);
    margin-bottom: 1.1rem;
    letter-spacing: -0.005em;
    display: flex; align-items: baseline; gap: 0.75rem;
    font-variation-settings: "opsz" 96, "SOFT" 40;
}
.home-updates h2::after,
.home-sidebar h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--color-hairline), transparent 90%);
    margin-bottom: 0.35rem;
}
.home-sidebar { display: flex; flex-direction: column; gap: 2.25rem; }
.home-quicklinks {
    display: flex; flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem;
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.home-quicklinks h2 { margin-top: 0; }
.btn-block { display: flex; width: 100%; text-align: center; }

.blog-card-image {
    border-radius: var(--radius);
    margin-bottom: 0.85rem;
    max-height: 240px; object-fit: cover; width: 100%;
}

.event-card {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--color-hairline);
}
.event-card:last-child { border-bottom: none; }
.event-card-details h4 {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.05rem; line-height: 1.3; margin: 0;
    color: var(--color-forest);
    font-variation-settings: "opsz" 48, "SOFT" 30;
}
.event-card-details h4 a { color: inherit; text-decoration: none; }
.event-card-details h4 a:hover { color: var(--color-clay); }
.event-time, .event-location {
    font-size: var(--text-sm); color: var(--color-ink-faint); margin: 0.15rem 0 0;
}

/* === Blog ===================================================== */
.category-tabs {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-bottom: 1.75rem;
}
.category-tab {
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.85rem; font-weight: 500;
    background: transparent; color: var(--color-ink-soft);
    border: 1px solid var(--color-hairline);
    transition: all var(--dur-fast) var(--ease);
}
.category-tab:hover { border-color: var(--color-moss); color: var(--color-forest); background: var(--color-paper-soft); }
.category-tab.active {
    background: var(--color-forest); color: var(--color-paper-soft);
    border-color: var(--color-forest);
}
.post-header { margin-bottom: 1.75rem; }
.post-author { font-size: var(--text-sm); color: var(--color-ink-faint); }
.post-featured-image {
    border-radius: var(--radius);
    margin-bottom: 1.75rem;
    max-height: 460px; object-fit: cover; width: 100%;
    box-shadow: var(--shadow-md);
}
.post-body { max-width: 68ch; font-size: 1.075rem; }
.post-body p { margin-bottom: 1.25rem; }
.post-body p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 0.85;
    float: left;
    padding: 0.35rem 0.6rem 0 0;
    color: var(--color-clay);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
.post-footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-hairline); }

/* === Pagination =============================================== */
.pagination {
    display: flex; gap: 0.4rem;
    justify-content: center; margin-top: 2.5rem;
}
.pagination a, .pagination span {
    padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
    text-decoration: none; min-width: 40px; min-height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: 0.95rem;
}
.pagination a { background: var(--color-paper-soft); color: var(--color-forest); border: 1px solid var(--color-hairline); }
.pagination a:hover { border-color: var(--color-forest); background: var(--color-paper-deep); }
.pagination .active { background: var(--color-forest); color: var(--color-paper-soft); }

/* === Events =================================================== */
.events-subscribe {
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-left: 3px solid var(--color-forest);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.75rem;
}
.events-subscribe .inline-heading { margin: 0 0 0.25rem; font-size: 1.05rem; }
.events-subscribe p { margin: 0 0 0.85rem; color: var(--color-ink-soft); font-size: 0.95rem; }
.subscribe-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.subscribe-buttons .btn { font-size: 0.88rem; padding: 0.5rem 0.95rem; }

.events-toggle { display: flex; gap: 0.4rem; margin-bottom: 1.75rem; }
.events-toggle-btn {
    padding: 0.55rem 1.1rem; border-radius: 999px;
    border: 1px solid var(--color-hairline);
    background: transparent;
    color: var(--color-ink-soft);
    cursor: pointer; font-weight: 500; font-size: 0.9rem;
    min-height: 40px;
    font-family: var(--font-body);
    transition: all var(--dur-fast) var(--ease);
}
.events-toggle-btn:hover { color: var(--color-forest); border-color: var(--color-moss); }
.events-toggle-btn.active {
    background: var(--color-forest); color: var(--color-paper-soft);
    border-color: var(--color-forest);
}
.events-view { display: none; }
.events-view.active { display: block; }

.event-detail-card {
    border-left: 3px solid var(--color-clay);
    padding-left: 1.25rem;
}
.event-detail-card.past { opacity: 0.65; }
.event-meta {
    background: var(--color-paper-soft);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.75rem;
    border: 1px solid var(--color-hairline);
}
.event-meta p { margin-bottom: 0.4rem; color: var(--color-ink-soft); }
.event-meta p strong { color: var(--color-ink); font-weight: 600; }
.event-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.past-events { margin-top: 2.5rem; }
.past-events summary { cursor: pointer; list-style: none; color: var(--color-ink-soft); font-weight: 500; }
.past-events summary::-webkit-details-marker { display: none; }
.past-events summary::before { content: '+ '; color: var(--color-clay); font-weight: 700; }
.past-events[open] summary::before { content: '− '; }
.inline-heading { display: inline; }

/* === Calendar Grid ============================================ */
.calendar-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.calendar-nav h2 { margin: 0; }
.calendar-grid {
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    overflow: hidden;
}
.calendar-header {
    display: grid; grid-template-columns: repeat(7, 1fr);
    background: var(--color-forest); color: var(--color-paper-soft);
}
.calendar-header div {
    padding: 0.65rem 0.5rem; text-align: center;
    font-weight: 600; font-size: 0.75rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}
.calendar-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-cell {
    min-height: 88px; padding: 0.4rem;
    border-top: 1px solid var(--color-hairline);
    border-left: 1px solid var(--color-hairline);
    font-size: var(--text-sm);
    background: var(--color-paper-soft);
}
.calendar-cell:nth-child(7n+1) { border-left: none; }
.calendar-cell.empty { background: var(--color-paper-deep); opacity: 0.5; }
.calendar-cell.has-events { background: rgba(230,182,91,0.12); }
.calendar-day { font-weight: 600; display: block; margin-bottom: 0.25rem; color: var(--color-ink); font-family: var(--font-display); font-variation-settings: "opsz" 24, "SOFT" 0; }
.calendar-event {
    display: block; font-size: 0.7rem;
    background: var(--color-forest);
    color: var(--color-paper-soft);
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
    margin-bottom: 2px; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease);
}
.calendar-event:hover { background: var(--color-clay); color: var(--color-paper-soft); }
@media (max-width: 768px) {
    .calendar-cell { min-height: 56px; font-size: 0.7rem; }
    .calendar-event { font-size: 0.6rem; }
}

/* === Board Members ============================================ */
.board-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.board-card {
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex; gap: 1.1rem; align-items: flex-start;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.board-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.board-card-photo img {
    width: 84px; height: 84px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--color-paper);
    box-shadow: 0 0 0 1px var(--color-hairline);
}
.board-card h3 {
    margin: 0 0 0.2rem; font-size: 1.2rem;
    font-family: var(--font-display); font-weight: 600;
    color: var(--color-forest);
    font-variation-settings: "opsz" 48, "SOFT" 40;
}
.board-role {
    font-size: var(--text-xs); color: var(--color-clay);
    font-weight: 600; margin: 0 0 0.5rem;
    text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
}

/* === Minutes ================================================== */
.minutes-entry {
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    background: var(--color-paper-soft);
    margin-bottom: 0.6rem;
    overflow: hidden;
}
.minutes-entry summary {
    cursor: pointer; padding: 1rem 1.25rem;
    font-size: 1rem; font-weight: 500;
    color: var(--color-ink);
    list-style: none;
}
.minutes-entry summary::-webkit-details-marker { display: none; }
.minutes-entry summary::before { content: '›'; color: var(--color-clay); font-weight: 700; margin-right: 0.6rem; transition: transform var(--dur-fast) var(--ease); display: inline-block; }
.minutes-entry[open] summary::before { transform: rotate(90deg); }
.minutes-entry summary:hover { background: var(--color-paper-deep); }
.minutes-body { padding: 0 1.25rem 1.25rem; color: var(--color-ink-soft); }

/* === Gallery ================================================== */
.gallery-index {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.gallery-index-card {
    text-decoration: none; color: inherit;
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    display: block;
}
.gallery-index-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gallery-index-card img {
    width: 100%; height: 220px; object-fit: cover;
    transition: transform 600ms var(--ease);
}
.gallery-index-card:hover img { transform: scale(1.03); }
.gallery-placeholder {
    height: 220px; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; background: var(--color-paper-deep);
    color: var(--color-fern);
}
.gallery-index-info { padding: 1.1rem 1.25rem; }
.gallery-index-info h3 {
    margin: 0 0 0.2rem;
    font-family: var(--font-display); font-weight: 600;
    color: var(--color-forest); font-size: 1.15rem;
}
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.6rem; margin: 1.75rem 0;
}
.gallery-item img {
    width: 100%; height: 220px; object-fit: cover;
    border-radius: var(--radius-sm); cursor: pointer;
    transition: transform var(--dur) var(--ease), filter var(--dur-fast) var(--ease);
}
.gallery-item img:hover { transform: scale(1.02); filter: brightness(1.04); }
.gallery-privacy {
    font-size: var(--text-sm); color: var(--color-ink-faint);
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-paper-soft);
    border-left: 3px solid var(--color-honey);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
@media (prefers-reduced-motion: reduce) {
    .gallery-index-card,
    .gallery-index-card img,
    .gallery-item img,
    .card { transition: none; }
}

/* === Search Results =========================================== */
.search-summary {
    margin-bottom: 1.75rem; font-size: 1.1rem;
    color: var(--color-ink-soft);
    font-family: var(--font-display); font-style: italic;
}
.search-result .card-category { margin-bottom: 0.3rem; }

/* === Page-load orchestration ================================== */
@keyframes eh-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.home-welcome::after,
.home-welcome h1,
.home-welcome p,
.home-welcome .btn,
.home-updates,
.home-sidebar {
    animation: eh-rise 700ms var(--ease) both;
}
.home-welcome::after  { animation-delay:  40ms; }
.home-welcome h1      { animation-delay: 140ms; }
.home-welcome p       { animation-delay: 280ms; }
.home-welcome .btn    { animation-delay: 380ms; }
.home-updates         { animation-delay: 480ms; }
.home-sidebar         { animation-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
    .home-welcome::after,
    .home-welcome h1,
    .home-welcome p,
    .home-welcome .btn,
    .home-updates,
    .home-sidebar { animation: none; }
}

/* === Header lockup ============================================ */
.site-logo {
    /* override any inherited text styles from the previous text title */
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-forest);
    line-height: 1;
}

.site-logo__lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem; /* 14px @ 16px root */
}

.site-logo__mark {
    width: 3rem;     /* 48px header-height-friendly default */
    height: 3rem;
    display: block;
    flex: 0 0 auto;
}

.site-logo__divider {
    display: inline-block;
    width: 2px;
    height: 1.65rem; /* ~55% of mark height */
    background: var(--color-moss);
    opacity: 0.4;
    flex: 0 0 auto;
}

.site-logo__wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--color-forest);
    white-space: nowrap;
}

/* Hover/focus: pull color toward clay like other anchors */
.site-logo:hover .site-logo__wordmark,
.site-logo:focus-visible .site-logo__wordmark {
    color: var(--color-clay);
}

/* Narrow viewports: hide divider + wordmark, show mark only.
   Threshold matches the spec's "narrow mobile" target of 480px. */
@media (max-width: 30rem) {
    .site-logo__divider,
    .site-logo__wordmark { display: none; }
}

/* === Newsletter signup ======================================== */

/* Off-screen honeypot — shared by both variants */
.newsletter-form__honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Shared form bits */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}
.newsletter-form__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
}
.newsletter-form__input {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-hairline);
    border-radius: 6px;
    background: var(--color-paper-soft);
    color: var(--color-ink);
    width: 100%;
    max-width: 100%;
}
.newsletter-form__input:focus-visible {
    outline: 2px solid var(--color-forest);
    outline-offset: 2px;
}
.newsletter-form__consent {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
}
.newsletter-form__consent input[type="checkbox"] {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}
.newsletter-form__submit {
    align-self: flex-start;
}
.newsletter-form__fineprint {
    font-size: 0.85rem;
    color: var(--color-ink-soft);
    margin: 0;
}

/* Band variant (homepage) */
.newsletter-band {
    background: var(--color-paper-deep);
    padding: 3rem 0;
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--color-hairline);
    border-bottom: 1px solid var(--color-hairline);
    position: relative;
}
.newsletter-band__close {
    position: absolute;
    top: 0.75rem; right: 0.75rem;
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--color-ink-soft);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.newsletter-band__close:hover,
.newsletter-band__close:focus-visible {
    color: var(--color-ink);
    background: var(--color-paper-soft);
    outline: none;
}
.newsletter-band__inner {
    max-width: 36rem;
}
.newsletter-band h2 {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    color: var(--color-forest);
}
.newsletter-band__pitch {
    margin: 0 0 1.25rem;
    color: var(--color-ink-soft);
}

/* Footer variant (slim strip above .footer-content) */
.newsletter-footer-strip {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(251,246,233,0.12);
}
.newsletter-footer-strip__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-paper-soft);
    margin: 0 0 0.65rem;
}
.newsletter-footer-strip .newsletter-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}
.newsletter-footer-strip .newsletter-form__label {
    /* visually hidden but readable to screen readers */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.newsletter-footer-strip .newsletter-form__input {
    flex: 1 1 14rem;
    min-width: 0;
}
.newsletter-footer-strip .newsletter-form__consent {
    flex: 1 0 100%;
    color: rgba(251,246,233,0.78);
}
.newsletter-footer-strip .newsletter-form__submit {
    flex: 0 0 auto;
}
.newsletter-footer-strip .newsletter-form__fineprint {
    flex: 1 0 100%;
    color: rgba(251,246,233,0.6);
}

/* Narrow viewports: footer variant stacks */
@media (max-width: 30rem) {
    .newsletter-footer-strip .newsletter-form {
        flex-direction: column;
        align-items: stretch;
    }
    .newsletter-footer-strip .newsletter-form__submit {
        align-self: flex-start;
    }
}

/* =========================================================
   Meetings page
   ========================================================= */

.meetings-section { margin-bottom: 3rem; }
.meetings-section h2 { margin-bottom: 1rem; }
.meetings-section.meetings-past { opacity: 0.85; }

.meetings-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-paper-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.meetings-table th,
.meetings-table td {
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-hairline);
    vertical-align: top;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

.meetings-table th {
    background: var(--color-paper-deep);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

.meetings-table tbody tr:last-child td { border-bottom: none; }
.meetings-table tbody tr.is-past { color: var(--color-ink-faint); }

.meetings-table a {
    color: var(--color-forest);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.meetings-table a:hover { color: var(--color-clay); }

.meetings-row .meetings-date {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-ink);
    font-size: var(--text-base);
}
.meetings-row .meetings-time {
    display: block;
    /* --color-ink-faint failed WCAG AA on this row (~2.9:1); use ink for legibility. */
    color: var(--color-ink);
    font-size: var(--text-xs);
    margin-bottom: 0.2rem;
}
.meetings-row .meetings-title {
    display: block;
    /* --color-moss missed WCAG AA at the body font size (~4.3:1); use ink. */
    color: var(--color-ink);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
}

/* Stacked card layout on narrow viewports */
@media (max-width: 768px) {
    .meetings-table thead { display: none; }
    .meetings-table,
    .meetings-table tbody,
    .meetings-table tr,
    .meetings-table td { display: block; width: 100%; }
    .meetings-table tr {
        border: 1px solid var(--color-hairline);
        border-radius: var(--radius);
        margin-bottom: 1rem;
        background: var(--color-paper-soft);
        padding: 0.75rem 1rem;
    }
    .meetings-table td {
        border: none;
        padding: 0.35rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
    }
    .meetings-table td::before {
        content: attr(data-label);
        font-family: var(--font-display);
        font-weight: 600;
        color: var(--color-ink);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-eyebrow);
        flex-shrink: 0;
    }
    .meetings-table td[data-label="Date"]::before { display: none; }
    .meetings-table td[data-label="Date"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--color-hairline);
    }
}

/* Meeting detail page */
.meeting-detail .meeting-meta {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--color-paper-soft);
    border-radius: var(--radius);
    border-left: 3px solid var(--color-moss);
}
.meeting-detail .meeting-meta p { margin-bottom: 0.5rem; }
.meeting-detail .meeting-meta p strong { color: var(--color-ink); }
.meeting-detail .meeting-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

/* Neighborhood identity page */
.identity-hero {
    margin: 0 0 2rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-paper-soft);
}
.identity-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.identity-hero figcaption {
    padding: 0.5rem 1rem;
    font-size: var(--text-xs);
    color: var(--color-ink);
    opacity: 0.75;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem 0;
}
.highlights-grid .highlight {
    padding: 1.25rem 1.5rem;
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.highlights-grid .highlight h3 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink);
}
.highlights-grid .highlight p {
    margin: 0;
}

/* === City vs. NA scope comparison (About page) ================= */

.compare-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 1.25rem 0 1.5rem 0;
}
@media (min-width: 600px) {
    .compare-grid { grid-template-columns: 1fr 1fr; }
}
.compare-grid .compare-col {
    padding: 1.25rem 1.5rem;
    background: var(--color-paper-soft);
    border-radius: var(--radius);
    border-left: 3px solid var(--color-moss);
}
.compare-grid .compare-na {
    border-left-color: var(--color-rust, var(--color-moss));
}
.compare-grid .compare-col h3 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink);
}
.compare-grid .compare-col ul {
    margin: 0;
    padding-left: 1.25rem;
}
.compare-grid .compare-col li + li {
    margin-top: 0.25rem;
}

/* === Concerns intake form ====================================== */

/* Visually-hidden helper (used for honeypot label text). */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Prominent disclaimer banner — used on /concerns to make absolutely
   clear this is not a city-issue forwarding service. */
.disclaimer-banner {
    border-left: 4px solid var(--color-honey);
    background: var(--color-paper-soft);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 2rem;
    border-radius: 4px;
}
.disclaimer-banner__title {
    margin: 0 0 0.4rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-ink);
}
.disclaimer-banner__body {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--color-ink);
}
.disclaimer-banner__body a {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Concerns form layout — single column, comfortable spacing,
   inherits theme colors and fonts. */
form#concerns,
form[name="concerns"] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 38rem;
    margin: 0 0 3rem;
}
form#concerns .form-field,
form[name="concerns"] .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
form#concerns label,
form[name="concerns"] label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--color-ink);
}
form#concerns input[type="text"],
form#concerns input[type="email"],
form#concerns input[type="date"],
form#concerns select,
form#concerns textarea,
form[name="concerns"] input[type="text"],
form[name="concerns"] input[type="email"],
form[name="concerns"] input[type="date"],
form[name="concerns"] select,
form[name="concerns"] textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-hairline);
    border-radius: 6px;
    background: var(--color-paper);
    color: var(--color-ink);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
form#concerns textarea,
form[name="concerns"] textarea {
    min-height: 8rem;
    resize: vertical;
}
form#concerns input:focus-visible,
form#concerns select:focus-visible,
form#concerns textarea:focus-visible,
form[name="concerns"] input:focus-visible,
form[name="concerns"] select:focus-visible,
form[name="concerns"] textarea:focus-visible {
    outline: 2px solid var(--color-honey);
    outline-offset: 1px;
    border-color: var(--color-ink);
}
/* Required-field affordance — Grav marks required inputs with the
   HTML5 `required` attribute; we surface it visually next to the label. */
form#concerns .form-field label[for] + .field-required::after,
form[name="concerns"] label.required::after {
    content: " *";
    color: var(--color-honey);
    font-weight: 700;
}

/* Checkbox row — checkbox to the left of multi-line label text. */
form#concerns .form-field-checkbox,
form[name="concerns"] .form-field-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
}
form#concerns .form-field-checkbox input[type="checkbox"],
form[name="concerns"] .form-field-checkbox input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}
form#concerns .form-field-checkbox label,
form[name="concerns"] .form-field-checkbox label {
    font-weight: 400;
    line-height: 1.45;
}

.concerns-form__submit {
    align-self: flex-start;
    margin-top: 0.5rem;
}

/* Grav's built-in honeypot field renders as a regular text input; hide
   it the same way the newsletter form does. */
form#concerns .form-field-honeypot,
form[name="concerns"] .form-field-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
   Sitewide alert banner (partials/alert-banner.html.twig)
   Three severities: info, warning, emergency.
   WCAG 2.2 AA verified contrast ratios:
     - info       : #143324 on #8FA889  ~= 5.14:1
     - warning    : #1B2620 on #E6B65B  ~= 8.13:1
     - emergency  : #FFFFFF on #A8542C  ~= 7.89:1
   ============================================================ */
.alert-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.45;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    animation: alert-banner-slide-in 220ms ease-out both;
}

.alert-banner--static {
    position: static;
    animation: none;
    margin: 1rem 0 1.5rem;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.alert-banner__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alert-banner__message {
    margin: 0;
    flex: 1 1 auto;
    font-weight: 500;
}

.alert-banner__link {
    margin-left: 0.5rem;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.alert-banner__link:hover,
.alert-banner__link:focus {
    color: inherit;
    text-decoration-thickness: 2px;
}

.alert-banner__prefix {
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8em;
    margin-right: 0.5rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 0.25rem;
}

.alert-banner__dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.85;
}

.alert-banner__dismiss:hover,
.alert-banner__dismiss:focus {
    opacity: 1;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Severity variants — palette tokens chosen for >=4.5:1 contrast. */
.alert-banner--info {
    background: var(--color-fern);
    color: var(--color-forest-deep);
}

.alert-banner--warning {
    background: var(--color-honey);
    color: var(--color-ink);
}

.alert-banner--emergency {
    /* Darkened clay (#A8542C) so #FFFFFF text clears AA at ~7.89:1.
       The palette --color-clay (#C4683D) is slightly too light for white text. */
    background: #A8542C;
    color: #FFFFFF;
    z-index: 100;
    font-weight: 600;
}

@keyframes alert-banner-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .alert-banner {
        animation: none;
    }
}

@media (max-width: 480px) {
    .alert-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }
    .alert-banner__dismiss {
        align-self: flex-end;
        margin-top: 0;
    }
}

/* === Nav dropdown enhancements === */
/* Tap-to-toggle: show submenu when parent aria-expanded="true" (applies at all viewport widths) */
.nav-item.has-submenu > a[aria-expanded="true"] + .nav-submenu { display: block; }

/* Chevron caret next to parent labels */
.nav-caret {
    margin-left: 0.35rem;
    font-size: 0.7em;
    opacity: 0.6;
}

#east-hill-map {
    height: 480px;
    width: 100%;
    margin: 1.5rem 0;
    border-radius: 4px;
    background: #eef1ec;
}

#east-hill-map .leaflet-popup-content {
    font-family: inherit;
    line-height: 1.4;
    max-width: 18rem;
}

@media (max-width: 480px) {
    #east-hill-map {
        height: 320px;
    }
}

/* =========================================================================
   Garage Sale Weekend
   ========================================================================= */
.garage-sale-hero { margin: 2rem 0 1.5rem; }
.garage-sale-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: #6b6357;
    margin: 0 0 0.25rem;
}
.garage-sale-date { font-size: 1.2rem; margin: 0.25rem 0 0; }

.garage-sale-flash {
    padding: 0.85rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    border: 1px solid transparent;
}
.garage-sale-flash--ok   { background: #e9f5ea; border-color: #b6d8b9; color: #1f4a26; }
.garage-sale-flash--warn { background: #fff4dc; border-color: #f0d693; color: #6b4a0a; }
.garage-sale-flash--err  { background: #fbe6e3; border-color: #e6a59c; color: #6a2018; }

.garage-sale-prose { margin: 1.5rem 0 2rem; }

.garage-sale-map-section { margin: 2rem 0; }
#garage-sale-map {
    height: 480px;
    width: 100%;
    border: 1px solid #d8d2c5;
    border-radius: 6px;
    background: #f5f2ea;
    margin-bottom: 1rem;
}
.garage-sale-empty { color: #6b6357; font-style: italic; }

.garage-sale-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    columns: 2;
    column-gap: 2rem;
}
@media (max-width: 720px) { .garage-sale-list { columns: 1; } }
.garage-sale-list-item {
    break-inside: avoid;
    padding: 0.4rem 0;
    border-bottom: 1px dotted #d8d2c5;
}
.garage-sale-list-num   { font-weight: 700; margin-right: 0.4rem; }
.garage-sale-list-items { color: #4a4438; }
.garage-sale-tag {
    display: inline-block;
    background: #efe8d7;
    color: #4a4438;
    border-radius: 3px;
    padding: 0.05rem 0.4rem;
    font-size: 0.8rem;
    margin-right: 0.2rem;
}

.garage-sale-register { margin: 2.5rem 0; }
.garage-sale-form-row { display: block; margin: 0.85rem 0; }
.garage-sale-form-row label,
.garage-sale-form-row legend { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.garage-sale-form-row input[type="text"],
.garage-sale-form-row input[type="email"],
.garage-sale-form-row textarea {
    width: 100%;
    max-width: 38rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #c7bfae;
    border-radius: 4px;
    font: inherit;
    background: #fff;
}
.garage-sale-form-row textarea { min-height: 5rem; resize: vertical; }
.garage-sale-hint { color: #6b6357; font-size: 0.85rem; }
.garage-sale-status[data-state="ok"]  { color: #1f4a26; }
.garage-sale-status[data-state="err"] { color: #6a2018; }
.garage-sale-check { display: inline-flex; align-items: center; margin-right: 0.85rem; font-weight: 400; }
.garage-sale-check input { margin-right: 0.3rem; }
.garage-sale-submit {
    background: #0b4f3a;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 0.7rem 1.2rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.garage-sale-submit:hover { background: #0a3e2e; }
.garage-sale-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Print: clean route brochure with numbered address list */
@media print {
    .alert-banner, .nav, nav, footer, .skip-link,
    .garage-sale-register, .garage-sale-flash,
    .leaflet-control-container { display: none !important; }

    body { font-size: 11pt; color: #000; background: #fff; }
    .container { max-width: 100%; padding: 0; }
    .garage-sale-hero { margin: 0 0 0.5rem; }
    #garage-sale-map { height: 4in; page-break-inside: avoid; }
    .garage-sale-list { columns: 2; column-gap: 0.5in; font-size: 10pt; }
    .garage-sale-list-item { border-bottom: 1px dotted #888; }
    .garage-sale-tag { border: 1px solid #888; background: #fff; }
}


/* =========================================================
   Lost & Found
   ========================================================= */

.lost-and-found .lf-flash {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--color-paper-soft);
    border-left: 3px solid var(--color-moss);
    color: var(--color-ink);
    font-size: var(--text-sm);
}
.lost-and-found .lf-flash--error {
    border-left-color: var(--color-clay);
    background: #fbeee5;
}

.lost-and-found-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0 3rem;
}
.lf-column h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-forest);
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-hairline);
}
.lf-column--found h2 { color: var(--color-clay); }
.lf-empty {
    color: var(--color-ink-faint);
    font-size: var(--text-sm);
    font-style: italic;
}

.lf-card {
    background: var(--color-paper-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-hairline);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
}
.lf-card:has(> .lf-card__photo:empty),
.lf-card:not(:has(.lf-card__photo)) {
    grid-template-columns: 1fr;
}
.lf-card__photo img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-paper-deep);
}
.lf-card__eyebrow {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink-soft);
    margin: 0 0 0.35rem;
}
.lf-card__desc {
    color: var(--color-ink);
    font-size: var(--text-base);
    margin: 0 0 0.5rem;
    line-height: 1.45;
}
.lf-card__meta {
    margin: 0 0 0.5rem;
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
}
.lf-card__meta dt {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink-faint);
    margin-bottom: 0.15rem;
}
.lf-card__meta dd { margin: 0; }
.lf-card__date { color: var(--color-ink-faint); font-size: var(--text-xs); }
.lf-card__posted {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-ink-faint);
}

/* Submission form */
.lf-submit {
    background: var(--color-paper-deep);
    border-top: 1px solid var(--color-hairline);
    border-bottom: 1px solid var(--color-hairline);
    padding: 2rem 1.5rem;
    margin: 0 calc(-1 * var(--spacing));
    border-radius: var(--radius);
}
.lf-submit h2 {
    font-family: var(--font-display);
    color: var(--color-forest);
    margin: 0 0 0.5rem;
}
.lf-submit__lede {
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    margin-bottom: 1.25rem;
}
.lf-form__row { margin-bottom: 1rem; }
.lf-form__row--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.lf-form__field { display: flex; flex-direction: column; gap: 0.35rem; }
.lf-form__field > label,
.lf-form__field > legend {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-ink);
}
.lf-form__field input[type="text"],
.lf-form__field input[type="email"],
.lf-form__field input[type="date"],
.lf-form__field select,
.lf-form__field textarea {
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 0.55rem 0.7rem;
    background: var(--color-paper-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    width: 100%;
}
.lf-form__field textarea { resize: vertical; min-height: 5rem; }
.lf-form__field input[type="file"] {
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
}
.lf-form__field fieldset { border: 0; padding: 0; margin: 0; }
.lf-form__field fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1rem;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-ink);
}
.lf-form__hint {
    margin: 0;
    color: var(--color-ink-faint);
    font-size: var(--text-xs);
}
.lf-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.lf-form .btn {
    display: inline-block;
    background: var(--color-forest);
    color: var(--color-paper-soft);
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0.7rem 1.3rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
    text-decoration: none;
}
.lf-form .btn:hover { background: var(--color-forest-deep); }

.lf-noscript-email { color: var(--color-ink-faint); }

@media (max-width: 768px) {
    .lost-and-found-columns { grid-template-columns: 1fr; gap: 1rem; }
    .lf-form__row--grid { grid-template-columns: 1fr; }
    .lf-submit { padding: 1.5rem 1rem; margin: 0; }
}