/* ============================================================
   Wildflower — a Ghost theme for Grass Lake Mom
   ============================================================ */

:root {
    /* Grass Lake Schools / Warriors palette — navy + gold.
       Variable names kept the same as the original Wildflower so the rest
       of the stylesheet works unchanged; only the values differ. */
    --cream: #f7f5ee;
    --cream-deep: #efe7d4;
    --ink: #0A2D53;            /* deep navy — primary text & dark sections */
    --ink-soft: #4a627a;       /* lighter muted navy — body excerpts, byline */
    --terracotta: #F2C416;     /* GOLD — pills, button bg, badge bg, accent fills */
    --terracotta-deep: #1D466F;/* medium navy — eyebrows, links, small accent text */
    --moss: #051425;           /* near-black navy — used where moss was a strong dark accent */
    --rule: #d8d2bf;           /* warm gold-tinted border */

    /* Ghost-required font variables (overridden by default.hbs based on
       the @custom.body_font admin selection). Defaults match Wildflower's
       built-in pairing. */
    --gh-font-heading: 'Fraunces', serif;
    --gh-font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--terracotta-deep); }

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

.container {
    max-width: 1240px;
    margin: 0 auto;
    /* Base side gutter for desktop. iPad bumps this to 40px (handled in
       a media query) and mobile drops it to 20px. The 40px floor here
       guarantees content never sits flush against the viewport edge on
       any browser size above tablet. */
    padding: 0 40px;
}

.container--narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 32px;
}

/* --- Topbar --------------------------------------------------- */
.topbar {
    background: var(--ink);
    color: var(--cream);
    padding: 8px 0;
    font-size: 13px;
}
.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.topbar-meta {
    display: flex;
    gap: 18px;
    opacity: 0.85;
}
.topbar-meta a {
    color: var(--cream);
    transition: opacity 0.15s;
}
.topbar-meta a:hover { opacity: 1; color: var(--cream); }

/* --- Masthead ------------------------------------------------- */
.masthead {
    text-align: center;
    padding: 36px 0 24px;
    border-bottom: 1px solid var(--rule);
}
.masthead .eyebrow {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--terracotta-deep);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.masthead-title {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: clamp(48px, 8vw, 92px);
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin-bottom: 8px;
}
.masthead-title a { color: var(--ink); }
.masthead-logo {
    max-height: 88px;
    width: auto;
    margin: 0 auto;
}
.masthead .tagline {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 640px;
    margin: 0 auto;
}

/* --- Nav ------------------------------------------------------ */
.site-nav {
    border-bottom: 1px solid var(--rule);
    padding: 10px 0;
    background: var(--cream);
    position: sticky;
    top: 0;
    z-index: 10;
}
/* 3-column layout: logo on the left, nav links centered, spacer on the
   right keeps the nav perfectly centered visually regardless of logo width. */
.nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.nav-logo {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    height: 36px;
    /* Hidden until the nav becomes stuck (IntersectionObserver in
       wildflower.js toggles .is-stuck on .site-nav as the user scrolls
       past the masthead). The grid column is preserved so the centered
       nav links don't shift when the logo appears or disappears. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.94);
    transform-origin: left center;
    transition:
        opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.45s;
}
.site-nav.is-stuck .nav-logo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.nav-logo img {
    height: 100%;
    width: auto;
    display: block;
}
.nav-sticky-sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
}

/* --- Mobile hamburger + slide-out drawer ------------------- */
.nav-toggle {
    display: none;        /* hidden on desktop, shown via media query below */
    grid-column: 3;
    justify-self: end;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    transition: background 0.15s, border-color 0.15s;
}
.nav-toggle:hover {
    background: var(--cream-deep);
}
.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
.mobile-nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.mobile-nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.mobile-nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.35s;
}
.mobile-nav.is-open { pointer-events: auto; visibility: visible; }

.mobile-nav-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 14, 14, 0.45);
    opacity: 0;
    transition: opacity 0.35s ease-out;
}
.mobile-nav.is-open .mobile-nav-overlay { opacity: 1; }

.mobile-nav-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 360px);
    background: var(--cream);
    box-shadow: -8px 0 24px rgba(20, 14, 14, 0.18);
    padding: 64px 32px 32px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mobile-nav.is-open .mobile-nav-panel { transform: translateX(0); }

.mobile-nav-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}
.mobile-nav-close:hover { background: var(--cream-deep); }

.mobile-nav-title-link {
    text-decoration: none;
    color: inherit;
}
.mobile-nav-title-link:hover { color: var(--terracotta-deep); }
.mobile-nav-title {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.015em;
    line-height: 1;
    color: inherit;
    margin: 0;
}
.mobile-nav-tagline {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
    margin: 6px 0 0;
}
.mobile-nav-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--terracotta-deep);
    margin: 8px 0 12px;
}
.mobile-nav-links ul,
.mobile-nav-links ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.mobile-nav-links li {
    border-bottom: 1px solid var(--rule);
}
.mobile-nav-links a {
    display: block;
    padding: 14px 0;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 19px;
    color: var(--ink);
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color 0.15s;
}
.mobile-nav-links a:hover,
.mobile-nav-links .nav-current a {
    color: var(--terracotta-deep);
}

/* Lock the body when the drawer is open so the page behind doesn't scroll */
body.mobile-nav-open {
    overflow: hidden;
}
.nav-links { grid-column: 2; }
.nav-spacer { grid-column: 3; }

.nav-inner ul,
.nav-inner ol {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.nav-inner a {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    transition: color 0.15s;
}
.nav-inner a:hover,
.nav-inner .nav-current a {
    color: var(--terracotta-deep);
}

/* --- Hero feature --------------------------------------------- */
.hero {
    padding: 56px 0 48px;
    border-bottom: 1px solid var(--rule);
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: center;
}
.hero-img {
    aspect-ratio: 4/3;
    border-radius: 4px;
    background-color: var(--cream-deep);
    position: relative;
    overflow: hidden;
    display: block;
}
.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-img-fallback {
    position: absolute; inset: 0;
    background: linear-gradient(45deg, #0A2D53 0%, #1D466F 35%, #F2C416 75%, #caa20b 100%);
}
.hero-text .label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--terracotta-deep);
    border-bottom: 2px solid var(--terracotta);
    padding-bottom: 4px;
    margin-bottom: 20px;
}
.hero-text h2 {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-bottom: 18px;
}
.hero-text h2 a { color: var(--ink); }
.hero-text h2 a:hover { color: var(--terracotta-deep); }
.hero-text .deck {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 24px;
}
.byline {
    font-size: 13px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.byline strong { color: var(--ink); font-weight: 600; }

/* --- Section heading ----------------------------------------- */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 10px;
    margin-bottom: 32px;
    gap: 24px;
}
.section-head h3 {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.01em;
}
.section-head a {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--terracotta-deep);
    font-weight: 600;
    white-space: nowrap;
}

/* --- Story cards (3-up + read-next) -------------------------- */
.stories,
.read-next {
    padding: 56px 0;
    border-bottom: 1px solid var(--rule);
}
.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}
.story-card { display: block; }
.story-card .thumb {
    aspect-ratio: 4/3;
    border-radius: 4px;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
    background-color: var(--cream-deep);
}
.story-card .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.story-card:hover .thumb-img { transform: scale(1.03); }
.story-card .thumb--placeholder {
    background: linear-gradient(135deg, #0A2D53 0%, #1D466F 100%);
}
.story-card:nth-child(3n+2) .thumb--placeholder {
    background: linear-gradient(135deg, #F2C416 0%, #efe5a8 100%);
}
.story-card:nth-child(3n+3) .thumb--placeholder {
    background: linear-gradient(135deg, #1D466F 0%, #caa20b 100%);
}
.story-card .cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--terracotta-deep);
    margin-bottom: 8px;
}
.story-card h4 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    color: var(--ink);
}
.story-card p {
    color: var(--ink-soft);
    font-size: 15px;
    margin-bottom: 12px;
}
.story-card .card-byline {
    font-size: 12px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.story-card:hover h4 { color: var(--terracotta-deep); }

/* --- Two-col: events + sports -------------------------------- */
.twocol {
    padding: 56px 0;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 56px;
    border-bottom: 1px solid var(--rule);
}
.events-list { list-style: none; padding: 0; margin: 0; }
.event {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
    align-items: center;
}
.event:last-child { border-bottom: none; }
.event-date {
    text-align: center;
    background: var(--cream-deep);
    border-radius: 4px;
    padding: 10px 0;
}
.event-date .month {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--terracotta-deep);
}
.event-date .day {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    margin-top: 2px;
}
.event-info h5 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 4px;
}
.event-info h5 a { color: var(--ink); }
.event-info h5 a:hover { color: var(--terracotta-deep); }
.event-info .meta {
    font-size: 13px;
    color: var(--ink-soft);
}
.event-rsvp {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid var(--ink);
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.15s;
    color: var(--ink);
}
.event-rsvp:hover {
    background: var(--ink);
    color: var(--cream);
}
.empty {
    padding: 24px 0;
    color: var(--ink-soft);
    font-style: italic;
}

/* --- Sports widget ------------------------------------------- */
.sports {
    background: var(--cream-deep);
    border-radius: 8px;
    padding: 28px;
    align-self: start;
}
.sports h3 {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 6px;
}
.sports .school {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--moss);
    font-weight: 700;
    margin-bottom: 18px;
}
.game {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed var(--rule);
    font-size: 14px;
    gap: 12px;
}
.game:last-of-type { border-bottom: none; }
.game-team { font-weight: 600; color: var(--ink); }
.game-vs { color: var(--ink-soft); font-size: 13px; }
.game-time { color: var(--terracotta-deep); font-weight: 600; font-size: 13px; white-space: nowrap; text-align: right; }
.game-time .game-date { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.game-time .game-clock { font-size: 13px; }
.sports-all {
    display: inline-block;
    margin-top: 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--terracotta-deep);
    font-weight: 600;
}

/* --- More stories (2-column overflow under Around Town) ----- */
.more-stories {
    padding: 56px 0;
    border-bottom: 1px solid var(--rule);
}
.more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
}
.more-item {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
    transition: padding-left 0.2s, color 0.2s;
}
.more-item:hover { padding-left: 8px; }
.more-item:hover .more-title { color: var(--terracotta-deep); }
.more-cat {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--terracotta-deep);
    font-weight: 700;
    margin-bottom: 6px;
}
.more-title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.25;
    color: var(--ink);
    letter-spacing: -0.01em;
    transition: color 0.2s;
}
.more-meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.more-foot {
    text-align: center;
    margin-top: 36px;
}
.more-foot a {
    display: inline-block;
    background: var(--ink);
    color: var(--cream);
    padding: 13px 24px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: background 0.2s;
}
.more-foot a:hover { background: var(--terracotta-deep); }
@media (max-width: 720px) {
    .more-grid { grid-template-columns: 1fr; gap: 0; }
}

/* --- Local biz ----------------------------------------------- */
.biz {
    padding: 56px 0;
    border-bottom: 1px solid var(--rule);
}
.biz-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.biz-card {
    background: white;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.15s;
    color: var(--ink);
}
.biz-card:hover {
    border-color: var(--terracotta);
    transform: translateY(-2px);
    color: var(--ink);
}
.biz-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
    overflow: hidden;
    color: var(--terracotta-deep);
}
.biz-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.biz-card h5 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
}
.biz-card .biz-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    margin-bottom: 12px;
}
.biz-card p { font-size: 13px; color: var(--ink-soft); }

/* --- Newsletter (Block Party treatment) ---------------------- */
.newsletter {
    margin-top: 64px;        /* breathing room above so it doesn't hug the previous section */
    padding: 80px 24px;
    text-align: center;
    background: var(--ink);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}
.newsletter h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 6vw, 64px);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--cream);
}
.newsletter h3 .marker {
    background: var(--terracotta);
    color: var(--cream);
    padding: 0 12px;
    border-radius: 8px;
    display: inline-block;
    transform: rotate(-2deg);
}
.newsletter p {
    font-size: 18px;
    color: var(--cream);
    max-width: 560px;
    margin: 0 auto 28px;
    opacity: 0.85;
}
.newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.newsletter-form input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid var(--cream);
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    background: var(--cream);
    color: var(--ink);
}
.newsletter-form input:focus {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
}
.newsletter-form button {
    padding: 14px 28px;
    background: var(--terracotta);
    color: var(--cream);
    border: 2px solid var(--terracotta);
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}
.newsletter-form button:hover {
    transform: translateY(-2px) rotate(-1deg);
    background: var(--terracotta-deep);
}
.newsletter-form button [data-members-loading],
.newsletter-form button [data-members-success],
.newsletter-form button [data-members-error] { display: none; }
.newsletter-form.loading button [data-members-default],
.newsletter-form.success button [data-members-default],
.newsletter-form.error button [data-members-default] { display: none; }
.newsletter-form.loading button [data-members-loading] { display: inline; }
.newsletter-form.success button [data-members-success] { display: inline; }
.newsletter-form.error button [data-members-error] { display: inline; }

/* --- Footer --------------------------------------------------- */
.site-footer {
    background: var(--ink);
    color: rgba(247, 245, 238, 0.78);
    padding: 64px 0 0;
    font-size: 14px;
}
.site-footer a {
    color: rgba(247, 245, 238, 0.78);
    transition: color 0.2s;
}
.site-footer a:hover { color: var(--terracotta); }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    padding-bottom: 48px;
}

.footer-brand .footer-eyebrow {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--terracotta);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}
.footer-brand .footer-mark {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}
.footer-brand .footer-mark a { color: var(--cream); }
.footer-brand .footer-mark a:hover { color: var(--terracotta); }
.footer-logo {
    max-height: 56px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
.footer-tagline {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 22px;
    max-width: 340px;
    color: rgba(247, 245, 238, 0.85);
}

.footer-newsletter {
    display: flex;
    gap: 8px;
    max-width: 340px;
}
.footer-newsletter input {
    flex: 1;
    background: rgba(247, 245, 238, 0.08);
    border: 1px solid rgba(247, 245, 238, 0.15);
    color: var(--cream);
    padding: 11px 14px;
    font-size: 13px;
    font-family: inherit;
    border-radius: 4px;
    min-width: 0;
}
.footer-newsletter input::placeholder { color: rgba(247, 245, 238, 0.45); }
.footer-newsletter input:focus {
    outline: none;
    border-color: var(--terracotta);
    background: rgba(247, 245, 238, 0.12);
}
.footer-newsletter button {
    background: var(--terracotta);
    color: var(--ink);
    border: none;
    padding: 11px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.2s;
}
.footer-newsletter button:hover { background: #ffd84a; }
.footer-newsletter button > span { display: none; }
.footer-newsletter button > span[data-members-default] { display: inline; }
.footer-newsletter.loading button > span[data-members-default],
.footer-newsletter.success button > span[data-members-default],
.footer-newsletter.error button > span[data-members-default] { display: none; }
.footer-newsletter.loading button > span[data-members-loading] { display: inline; }
.footer-newsletter.success button > span[data-members-success] { display: inline; }
.footer-newsletter.error button > span[data-members-error] { display: inline; }

.footer-col-head {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 18px;
}
.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-col li {
    margin-bottom: 10px;
    font-size: 14px;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}
.footer-social a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(247, 245, 238, 0.2);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}
.footer-social a:hover {
    border-color: var(--terracotta);
    background: var(--terracotta);
    color: var(--ink);
}

.footer-bottom {
    border-top: 1px solid rgba(247, 245, 238, 0.18);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(247, 245, 238, 0.55);
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom-links {
    display: flex;
    gap: 18px;
}
.footer-bottom-links a { font-size: 12px; }

@media (max-width: 980px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .site-footer { padding-top: 48px; }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 36px;
    }
    .footer-brand .footer-mark { font-size: 28px; }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Access badges (icon-only padlock) ----------------------- */
.access-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.access-badge.access-paid,
.access-badge.access-tiers {
    background: var(--terracotta);
    color: #fff;
}
.access-badge .access-icon {
    width: 14px;
    height: 14px;
    display: block;
}
.access-badge--inline {
    position: static;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    vertical-align: middle;
    box-shadow: none;
}
.access-badge--inline .access-icon {
    width: 12px;
    height: 12px;
}

/* --- Single post / page -------------------------------------- */
.single .post-header {
    padding: 56px 24px 32px;
    text-align: center;
}
.post-eyebrow-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.post-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--terracotta-deep);
}
.post-title {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-bottom: 20px;
    color: var(--ink);
}
.post-deck {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: var(--ink-soft);
    line-height: 1.45;
    margin-bottom: 24px;
}
.post-meta {
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 13px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-wrap: wrap;
    align-items: center;
}
.post-meta strong { color: var(--ink); font-weight: 600; }
.post-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.post-author img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.post-feature {
    margin: 32px auto 48px;
}
.post-feature img {
    width: 100%;
    border-radius: 4px;
}
.post-feature figcaption {
    text-align: center;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 12px;
}
.post-content {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    line-height: 1.7;
    color: var(--ink);
    padding: 0 24px 56px;
}
.post-content > * + * { margin-top: 1.4em; }
.post-content h2 {
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -0.015em;
    margin-top: 1.8em;
}
.post-content h3 {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin-top: 1.6em;
}
.post-content blockquote {
    border-left: 3px solid var(--terracotta);
    padding-left: 24px;
    font-style: italic;
    color: var(--ink-soft);
}
.post-content a {
    color: var(--terracotta-deep);
    border-bottom: 1px solid var(--terracotta);
}
.post-content ul,
.post-content ol {
    padding-left: 1.6em;       /* indent the list block from the left edge */
    margin-left: 0.4em;        /* small extra nudge so markers sit below body text */
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li {
    margin-bottom: 0.5em;
    padding-left: 0.4em;       /* breathing room between marker and text */
}
.post-content li::marker {
    color: var(--terracotta);
    font-weight: 600;
}
/* Nested lists indent further and use lighter markers for visual hierarchy */
.post-content ul ul,
.post-content ol ol,
.post-content ul ol,
.post-content ol ul {
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}
.post-content ul ul { list-style: circle; }
.post-content ul ul ul { list-style: square; }
.post-content li > p { margin-top: 0; }   /* prevent extra spacing when Ghost wraps li content in <p> */

.post-content img,
.post-content figure { border-radius: 4px; }
.post-content pre {
    background: var(--cream-deep);
    padding: 18px;
    border-radius: 4px;
    overflow-x: auto;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 14px;
}

.post-footer {
    padding: 0 24px 56px;
    border-bottom: 1px solid var(--rule);
}
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.post-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--terracotta-deep);
    background: var(--cream-deep);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.post-comments { padding: 56px 24px; }

/* --- Koenig editor cards (image breakouts, captions, embeds) --- */
.kg-card { margin: 1.6em auto; }
.kg-card figcaption {
    text-align: center;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 12px;
}
.kg-image {
    max-width: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 4px;
}
.kg-width-wide {
    position: relative;
    width: 80vw;
    max-width: 1100px;
    min-width: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
}
.kg-width-wide .kg-image { border-radius: 4px; }
.kg-width-full {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}
.kg-width-full .kg-image { border-radius: 0; }
.kg-bookmark-card,
.kg-callout-card,
.kg-toggle-card {
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}
.kg-gallery-image img { border-radius: 4px; }

/* --- Content CTA (paywall / signup prompt) -------------------- */
.gh-cta.wildflower-cta {
    margin: 56px auto;
    max-width: 720px;
    padding: 0 24px;
}
.wildflower-cta-inner {
    background: var(--cream-deep);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--terracotta);
    border-radius: 8px;
    padding: 36px 36px 32px;
    text-align: center;
    position: relative;
}
.wildflower-cta-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--terracotta-deep);
    margin-bottom: 12px;
}
.wildflower-cta-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ink);
    margin-bottom: 12px;
}
.wildflower-cta-title .marker {
    background: var(--terracotta);
    color: var(--cream);
    padding: 0 10px;
    border-radius: 6px;
    display: inline-block;
    transform: rotate(-1.5deg);
}
.wildflower-cta-deck {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 520px;
    margin: 0 auto 24px;
}
.wildflower-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.wildflower-cta-btn,
.wildflower-cta-btn:link,
.wildflower-cta-btn:visited,
.wildflower-cta-btn:active {
    display: inline-block;
    background: var(--terracotta);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 999px;
    border: 2px solid var(--terracotta);
    text-decoration: none;
    transition: transform 0.15s, background 0.15s, color 0.15s;
}
.wildflower-cta-btn:hover,
.wildflower-cta-btn:focus {
    background: var(--terracotta-deep);
    border-color: var(--terracotta-deep);
    color: #ffffff;
    transform: translateY(-2px) rotate(-0.5deg);
}
.wildflower-cta-link,
.wildflower-cta-link:link,
.wildflower-cta-link:visited {
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: none;
}
.wildflower-cta-link:hover {
    color: var(--terracotta-deep);
    text-decoration: none;
}

@media (max-width: 640px) {
    .wildflower-cta-inner { padding: 28px 22px; }
}

/* --- Archive / list views ------------------------------------ */
.archive-header {
    text-align: center;
    padding: 64px 24px 32px;
}
.archive-eyebrow {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--terracotta-deep);
    font-size: 16px;
    margin-bottom: 8px;
    display: block;
}
.archive-title {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: clamp(36px, 6vw, 72px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 16px;
}
.archive-desc {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    color: var(--ink-soft);
    max-width: 640px;
    margin: 0 auto 12px;
}
.archive-count {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}
.author-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 16px;
}

.post-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    padding: 32px 32px 64px;
}

/* --- Section-with-sidebar layout (used by ad placements) ----- */
.section-with-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    /* gap and padding-bottom only kick in when an ad is actually rendered,
       so sections without an ad render exactly as they did before the
       sidebar layout was introduced (no extra spacing, no empty column). */
}
.section-with-sidebar:has(.ad-sidebar .ad-block) {
    gap: 40px;
    padding-bottom: 64px;        /* gives the sticky sidebar room to release before the next section */
}
.section-with-sidebar-main { min-width: 0; }
/* Hide the sidebar element entirely when it has nothing to render, so it
   doesn't take up a grid track or trigger any spacing. */
.ad-sidebar:not(:has(.ad-block)) {
    display: none;
}
/* Modern :has() — when the ad slot actually renders an .ad-block, switch
   to a 2-column layout. When the slot is empty (admin set placement to
   Off or didn't fill the chosen sponsor's link), stays single-column.
   No JS or template branching needed. */
.section-with-sidebar:has(.ad-sidebar .ad-block) {
    grid-template-columns: minmax(0, 1fr) 300px;
}
.ad-sidebar {
    align-self: start;
    position: sticky;
    top: 76px;        /* clears the sticky site-nav (~48px tall) + 28px breathing room */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.ad-sidebar .ad-block {
    margin: 0;        /* let the sidebar position it; cancel the centered margin */
    max-width: none;
}
/* Per-page tweaks when a sidebar is actually rendered */
.section-with-sidebar:has(.ad-sidebar .ad-block) .stories-grid,
.section-with-sidebar:has(.ad-sidebar .ad-block) .post-feed {
    grid-template-columns: repeat(2, 1fr);  /* drop Around Town / tag grid from 3-up to 2-up */
}
.section-with-sidebar .post-feed {
    padding: 32px 0 0;       /* let the sidebar wrapper own the outer padding */
}
.post-with-sidebar.section-with-sidebar:has(.ad-sidebar .ad-block) {
    max-width: 1140px;
}
.post-with-sidebar .post-content {
    max-width: 720px;          /* keep reading-friendly column even in sidebar layout */
}

/* When the ad slot isn't rendering anything (placement Off or chosen
   sponsor empty), restore the centered narrow layout for the post body
   so it sits in the middle of the page like it did pre-ads, instead of
   being left-aligned within a wide container. The "Read next" grid is
   left at full width so its cards still fit 3-up. */
.post-with-sidebar:not(:has(.ad-sidebar .ad-block)) .post-content,
.post-with-sidebar:not(:has(.ad-sidebar .ad-block)) .post-footer,
.post-with-sidebar:not(:has(.ad-sidebar .ad-block)) .post-comments {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 980px) {
    .section-with-sidebar:has(.ad-sidebar .ad-block) {
        grid-template-columns: 1fr;
    }
    .section-with-sidebar:has(.ad-sidebar .ad-block) .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ad-sidebar {
        position: static;
        margin-top: 16px;
    }
}
@media (max-width: 640px) {
    .section-with-sidebar:has(.ad-sidebar .ad-block) .stories-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Sponsored ad block -------------------------------------- */
.ad-block {
    margin: 32px auto;
    max-width: 720px;
    background: var(--cream-deep);
    border-left: 4px solid var(--terracotta);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ad-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 24, 16, 0.08);
}
.ad-link {
    display: block;
    padding: 22px 26px 24px;
    color: inherit;
    text-decoration: none;
}
.ad-link:hover { color: inherit; }
.ad-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--terracotta-deep);
    margin-bottom: 14px;
}
.ad-eyebrow::before { content: "⌖ "; opacity: 0.7; }
.ad-body {
    display: flex;
    align-items: center;
    gap: 22px;
}
.ad-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 4px;
    background: white;
}
.ad-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ad-text { flex: 1; min-width: 0; }
.ad-heading {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--ink);
}
.ad-text-body {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 0 12px;
}
.ad-cta {
    display: inline-block;
    color: var(--terracotta-deep);
    font-weight: 600;
    font-size: 14px;
    transition: color 0.15s;
}
.ad-block:hover .ad-cta { color: var(--terracotta); }
.ad-block.ad-block--no-image .ad-body { display: block; }

/* Image-only ad variant — strip the box, just show the bare image with a
   small "Sponsored" caption below it. */
.ad-block.ad-block--image {
    background: none;
    border-left: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    margin: 32px auto;
    display: block;
    max-width: 720px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.ad-block.ad-block--image:hover {
    background: none;
    box-shadow: none;
    transform: none;
    opacity: 0.92;
}
.ad-block.ad-block--image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.ad-image-caption {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    opacity: 0.7;
}

@media (max-width: 540px) {
    .ad-link { padding: 18px 20px 20px; }
    .ad-body { flex-direction: column; align-items: stretch; gap: 16px; }
    .ad-image { width: 100%; height: 180px; }
    .ad-heading { font-size: 18px; }
}

/* --- Schedule list (tag-sports) ------------------------------ */
.schedule-header {
    padding: 64px 24px 28px;
    max-width: 880px;
    margin: 0 auto;
}
.schedule-list {
    list-style: none;
    padding: 0 24px 64px;
    margin: 0 auto;
    max-width: 880px;
    border-top: 2px solid var(--ink);
}
.schedule-row {
    border-bottom: 1px solid var(--rule);
}
.schedule-row.past { display: none; }
.schedule-link {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 20px 16px;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}
.schedule-link:hover {
    background: var(--cream-deep);
    color: inherit;
}
.schedule-date {
    text-align: center;
    background: var(--cream-deep);
    border-radius: 4px;
    padding: 12px 0 10px;
    transition: background 0.15s;
}
.schedule-link:hover .schedule-date {
    background: white;
}
.schedule-date .month {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--terracotta-deep);
}
.schedule-date .day {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    margin: 4px 0 4px;
    color: var(--ink);
}
.schedule-date .dow {
    font-size: 11px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.schedule-info { min-width: 0; }
.schedule-team {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--ink);
    transition: color 0.15s;
}
.schedule-link:hover .schedule-team { color: var(--terracotta-deep); }
.schedule-vs {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.4;
}
.schedule-time {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    color: var(--terracotta-deep);
    white-space: nowrap;
}
.empty-schedule {
    padding: 80px 24px;
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
    font-family: 'Fraunces', serif;
    font-size: 18px;
}

@media (max-width: 640px) {
    .schedule-list { padding: 0 16px 48px; margin: 40px auto 0; }
    .schedule-link {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "date info"
            "date time";
        gap: 14px;
        padding: 16px 8px;
    }
    .schedule-date { grid-area: date; padding: 8px 0 6px; }
    .schedule-info { grid-area: info; }
    .schedule-time {
        grid-area: time;
        font-size: 16px;
        text-align: left;
    }
    .schedule-team { font-size: 18px; }
    .schedule-date .day { font-size: 24px; }
}

/* --- Pagination ---------------------------------------------- */
.pagination {
    text-align: center;
    padding: 32px 0 64px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pagination a {
    margin: 0 12px;
    color: var(--terracotta-deep);
    font-weight: 600;
}

/* --- Error page ---------------------------------------------- */
.error {
    text-align: center;
    padding: 96px 24px;
}
.error-code {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 80px;
    color: var(--terracotta);
    line-height: 1;
}
.error-title {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    margin: 20px 0 12px;
}
.error-msg { color: var(--ink-soft); margin-bottom: 24px; }
.error-home {
    color: var(--terracotta-deep);
    font-weight: 600;
}

/* --- Responsive ---------------------------------------------- */
@media (max-width: 980px) {
    .hero-grid,
    .twocol {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .stories-grid,
    .post-feed {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    .biz-grid { grid-template-columns: repeat(2, 1fr); }
}

/* iPad / tablet range — keep content from running flush to the viewport
   edges. Bumps the global container padding and any sections that have
   their own padding values defined in pixels rather than via .container. */
@media (min-width: 641px) and (max-width: 1024px) {
    .container { padding: 0 40px; }
    .container--narrow { padding: 0 40px; }
    .post-content,
    .post-footer,
    .post-comments { padding-left: 40px; padding-right: 40px; }
    .schedule-list { padding-left: 40px; padding-right: 40px; }
    .newsletter { padding-left: 40px; padding-right: 40px; }
    .ad-block { margin-left: 12px; margin-right: 12px; }
    .post-with-sidebar:not(:has(.ad-sidebar .ad-block)) .post-content,
    .post-with-sidebar:not(:has(.ad-sidebar .ad-block)) .post-footer,
    .post-with-sidebar:not(:has(.ad-sidebar .ad-block)) .post-comments {
        max-width: 720px;
    }
    /* More breathing room around the masthead text and the nav so
       borders don't crowd content on iPad-sized viewports. */
    .masthead { padding: 72px 0 56px; }
    .masthead .eyebrow { padding-top: 20px; }
    .masthead .tagline { padding-bottom: 20px; }
    .site-nav { padding: 16px 0; }
    /* Push the section heading down from the sticky nav's bottom border
       so "Around Town" gets negative space above it on iPads. */
    .section-head { margin-top: 32px; }
    /* Same treatment for archive headers (tag, author, schedule, etc.)
       so the eyebrow doesn't crowd the nav's bottom border. */
    .archive-header,
    .schedule-header { padding-top: 88px; }
}

@media (max-width: 640px) {
    .container { padding: 0 20px; }
    .stories-grid,
    .post-feed,
    .biz-grid {
        grid-template-columns: 1fr;
    }
    /* On mobile: logo on the left (always visible — the nav doesn't have
       the same scroll cue as desktop since the rest of the nav is hidden
       behind the hamburger), hamburger on the right, inline nav hidden. */
    .nav-inner {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }
    .nav-spacer { display: none; }
    .nav-links { display: none; }
    .nav-logo {
        height: 28px;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .nav-toggle {
        display: inline-flex;
        grid-column: 2;
    }

    /* More breathing room around the masthead text on small screens —
       extra padding-top creates negative space below the dark topbar. */
    .masthead {
        padding: 88px 16px 56px;
    }
    .masthead .tagline { margin-top: 8px; }
    /* One source of truth for the gap below the nav on mobile — every
       template (home, archive, schedule, post) gets the same breathing
       room below the sticky nav's bottom border instead of each section
       handling it separately. */
    .site-nav { margin-bottom: 32px; }
    /* Space below the post count ("37 posts" / "3 games") so it doesn't
       butt against the post grid or the schedule list's top border. */
    .archive-count { margin-bottom: 16px; }
    .topbar { font-size: 12px; }
    .topbar-meta { gap: 12px; }
    /* Hide the Subscribe + Submit a tip links on mobile (the second
       .topbar-meta in the topbar). The drawer's nav still gives access. */
    .topbar-inner > .topbar-meta + .topbar-meta { display: none; }
    .topbar-inner { justify-content: flex-start; }
    .event {
        grid-template-columns: 60px 1fr;
        gap: 14px;
    }
    .event-rsvp { grid-column: 1 / -1; justify-self: start; }
    .newsletter-form {
        flex-direction: column;
    }
    .post-content { font-size: 18px; }
}

/* --- Local business directory (custom-local.hbs) --------------- */

.directory-head {
    text-align: center;
    padding: 64px 32px 24px;
    max-width: 720px;
    margin: 0 auto;
}
.directory-eyebrow {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--terracotta-deep);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}
.directory-head h1 {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: clamp(44px, 6vw, 72px);
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin-bottom: 16px;
}
.directory-tagline {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.filter-mobile { display: none; }

.directory-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 56px;
    max-width: 1240px;
    margin: 32px auto 0;
    padding: 0 32px 80px;
    align-items: start;
}

.filter-sidebar {
    position: sticky;
    top: 76px;             /* clears the sticky site-nav */
}
.filter-eyebrow {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--terracotta-deep);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
}
.filter-list { list-style: none; margin: 0; padding: 0; }
.filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}
.filter-item:hover { background: var(--cream-deep); }
.filter-item.active {
    background: var(--ink);
    color: var(--cream);
}
.filter-item.active .filter-count { background: var(--terracotta); color: white; }
.filter-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-deep);
    border-radius: 50%;
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1;
}
.filter-item.active .filter-icon { background: var(--terracotta); }
.filter-label { flex: 1; }
.filter-count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    background: var(--cream-deep);
    color: var(--ink-soft);
    padding: 3px 9px;
    border-radius: 999px;
    min-width: 26px;
    text-align: center;
}

/* The business cards grid */
.business-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    min-width: 0;
}
.business-card {
    background: white;
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 28px 24px 24px;
    text-align: center;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
.business-card:hover {
    border-color: var(--terracotta);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(10, 45, 83, 0.12);
    color: inherit;
}
.biz-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
    transition: background 0.15s, box-shadow 0.15s;
    line-height: 1;
}
.business-card:hover .biz-icon {
    background: white;
    box-shadow: 0 0 0 2px var(--terracotta);
}
.business-card h4 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    color: var(--ink);
}
.biz-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--terracotta-deep);
    font-weight: 700;
    margin-bottom: 12px;
}
.biz-blurb {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.business-card.is-hidden { display: none; }

.business-empty {
    text-align: center;
    padding: 80px 24px;
    color: var(--ink-soft);
    font-style: italic;
    font-family: 'Fraunces', serif;
    font-size: 18px;
}

/* Mobile: collapsible filter accordion above the grid */
@media (max-width: 980px) {
    .directory-layout {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 24px 64px;
        max-width: 720px;
    }
    .filter-sidebar { display: none; }
    .filter-mobile {
        display: block;
        max-width: 720px;
        margin: 24px auto 0;
        padding: 0 24px;
    }
    .filter-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
        background: white;
        border: 1px solid var(--rule);
        border-radius: 10px;
        cursor: pointer;
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: 16px;
        color: var(--ink);
        transition: border-color 0.15s;
    }
    .filter-toggle:hover { border-color: var(--terracotta); }
    .filter-toggle-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .filter-toggle-icon {
        width: 26px; height: 26px;
        background: var(--cream-deep);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        line-height: 1;
    }
    .filter-toggle .chev {
        width: 14px; height: 14px;
        transition: transform 0.2s;
    }
    .filter-toggle[aria-expanded="true"] .chev {
        transform: rotate(180deg);
    }
    .filter-mobile-list {
        list-style: none;
        max-height: 0;
        overflow: hidden;
        background: white;
        border: 1px solid var(--rule);
        border-top: none;
        border-radius: 0 0 10px 10px;
        margin: -1px 0 0 0;
        padding: 0;
        transition: max-height 0.25s ease-out, opacity 0.2s;
        opacity: 0;
    }
    .filter-mobile.open .filter-mobile-list {
        max-height: 500px;
        opacity: 1;
    }
    .filter-mobile.open .filter-toggle {
        border-radius: 10px 10px 0 0;
        border-bottom-color: transparent;
    }
    .filter-mobile-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 18px;
        cursor: pointer;
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: 16px;
        border-top: 1px solid var(--rule);
        transition: background 0.15s, color 0.15s;
    }
    .filter-mobile-item:hover { background: var(--cream-deep); }
    .filter-mobile-item.active { background: var(--ink); color: var(--cream); }
    .filter-mobile-item.active .filter-icon { background: var(--terracotta); }
    .filter-mobile-item.active .filter-count { background: var(--terracotta); color: white; }
    .filter-mobile-item .filter-label { flex: 1; }
    .business-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 540px) {
    .business-grid { grid-template-columns: 1fr; }
}

/* --- Contact page (custom-contact.hbs) ------------------------ */

.contact-head {
    text-align: center;
    padding: 64px 32px 24px;
    max-width: 720px;
    margin: 0 auto;
}
.contact-eyebrow {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--terracotta-deep);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}
.contact-head h1 {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: clamp(44px, 6vw, 72px);
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin-bottom: 16px;
}
.contact-tagline {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 19px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.contact-wrap {
    max-width: 640px;
    margin: 24px auto 0;
    padding: 0 24px 80px;
}
.contact-form {
    background: white;
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 36px;
    position: relative;
}
.contact-row {
    margin-bottom: 22px;
}
.contact-row label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--terracotta-deep);
    margin-bottom: 8px;
}
.contact-row input,
.contact-row select,
.contact-row textarea {
    width: 100%;
    background: var(--cream);
    border: 1.5px solid var(--rule);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.4;
    transition: border-color 0.15s, background 0.15s;
}
.contact-row textarea {
    resize: vertical;
    min-height: 140px;
    font-family: 'Fraunces', serif;
    font-size: 17px;
    line-height: 1.5;
}
.contact-row input:focus,
.contact-row select:focus,
.contact-row textarea:focus {
    outline: none;
    background: white;
    border-color: var(--terracotta-deep);
}
.contact-row select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231D466F' stroke-width='2'><polyline points='3 5 7 9 11 5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 40px;
}
.contact-actions {
    margin-top: 28px;
    text-align: center;
}
.contact-submit {
    display: inline-block;
    background: var(--terracotta);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 36px;
    border-radius: 999px;
    border: 2px solid var(--terracotta);
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}
.contact-submit:hover:not(:disabled) {
    background: var(--terracotta-deep);
    border-color: var(--terracotta-deep);
    transform: translateY(-2px);
}
.contact-submit:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.contact-form.is-success .contact-submit {
    background: var(--moss);
    border-color: var(--moss);
}
.contact-form.is-error .contact-submit {
    background: #b8593d;
    border-color: #b8593d;
}

.contact-result {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 8px;
    font-family: 'Fraunces', serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}
.contact-form.is-success .contact-result {
    background: var(--cream-deep);
    border-left: 3px solid var(--moss);
    color: var(--ink);
}
.contact-form.is-error .contact-result {
    background: #fdecec;
    border-left: 3px solid #b8593d;
    color: var(--ink);
}

@media (max-width: 640px) {
    .contact-form { padding: 24px 20px; }
    .contact-row textarea { min-height: 120px; }
}

/* --- Tiered "Around Town" grid (homepage) --------------------- */
/* Replaces the equal 3-up grid with a 2-big + 4-small mosaic. The
   big cards span 2 of 4 columns; the small cards take 1 each. With an
   ad sidebar active the section drops to 2-cols (big = full row, small
   = 2-up). On tablet/mobile it collapses progressively. */
.tiered-stories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 24px;
    min-width: 0;
}
.story-big {
    grid-column: span 2;
    display: block;
    color: inherit;
    text-decoration: none;
}
.story-small {
    grid-column: span 1;
    display: block;
    color: inherit;
    text-decoration: none;
}
.story-big .thumb,
.story-small .thumb {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--cream-deep);
    position: relative;
}
.story-big .thumb {
    aspect-ratio: 16/10;
    border-radius: 6px;
    margin-bottom: 18px;
}
.story-small .thumb {
    aspect-ratio: 4/3;
    border-radius: 4px;
    margin-bottom: 14px;
}
.story-big .thumb-img,
.story-small .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.story-big:hover .thumb-img { transform: scale(1.02); }
.story-small:hover .thumb-img { transform: scale(1.03); }

/* Placeholder backgrounds when no feature_image. Uses warriors palette. */
.story-big .thumb--placeholder { background: linear-gradient(135deg, #0A2D53 0%, #1D466F 100%); }
.story-big:nth-of-type(2) .thumb--placeholder { background: linear-gradient(135deg, #F2C416 0%, #efe5a8 100%); }
.story-small .thumb--placeholder { background: linear-gradient(135deg, #1D466F 0%, #caa20b 100%); }
.story-small:nth-of-type(2n) .thumb--placeholder { background: linear-gradient(135deg, #4a627a 0%, #efe7d4 100%); }
.story-small:nth-of-type(3n) .thumb--placeholder { background: linear-gradient(135deg, #caa20b 0%, #F2C416 100%); }

/* Big-card text */
.story-big .cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--terracotta-deep);
    margin-bottom: 8px;
}
.story-big h4 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 12px;
    transition: color 0.15s;
}
.story-big:hover h4 { color: var(--terracotta-deep); }
.story-big p {
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 10px;
}
.story-big .byline {
    font-size: 12px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0;
}
.story-big .byline strong { color: var(--ink); font-weight: 600; }

/* Small-card text */
.story-small .cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--terracotta-deep);
    margin-bottom: 6px;
}
.story-small h4 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin-bottom: 8px;
    transition: color 0.15s;
}
.story-small:hover h4 { color: var(--terracotta-deep); }
.story-small p {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* When the homepage ad sidebar is active, drop tiered grid to 2 columns
   so cards don't crunch in the narrower main column. */
.section-with-sidebar:has(.ad-sidebar .ad-block) .tiered-stories {
    grid-template-columns: 1fr 1fr;
}
.section-with-sidebar:has(.ad-sidebar .ad-block) .story-big {
    grid-column: span 2;       /* full row when sidebar is active */
}
.section-with-sidebar:has(.ad-sidebar .ad-block) .story-small {
    grid-column: span 1;
}

/* Tablet: 2-column tiered grid */
@media (max-width: 980px) {
    .tiered-stories {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
    }
    .story-big {
        grid-column: span 2;       /* big cards span the full row */
    }
    .story-small {
        grid-column: span 1;
    }
    .story-big h4 { font-size: 26px; }
    .story-big p { font-size: 15px; }
}

/* Phone: stack everything 1-up */
@media (max-width: 640px) {
    .tiered-stories {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-bottom: 32px;
    }
    .story-big, .story-small {
        grid-column: span 1;
    }
    .story-big h4 { font-size: 22px; }
    .sports { margin-bottom: 20px; }
}

/* ===========================================
   Subscribe page (custom-subscribe.hbs)
   =========================================== */
.subscribe-page { background: var(--cream); }

/* HERO — photo left, copy right */
.subscribe-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    border-bottom: 1px solid var(--rule);
    background: var(--cream);
    /* Fills the viewport between the auth topbar (~50px) and the bottom,
       so there's no empty space below the form on tall screens. */
    min-height: calc(100vh - 50px);
}
.subscribe-hero-photo {
    position: relative;
    min-height: 580px;
    overflow: hidden;
}
.subscribe-hero-photo--fallback {
    background:
        radial-gradient(circle at 25% 20%, rgba(242, 196, 22, 0.45), transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(29, 70, 111, 0.35), transparent 45%),
        linear-gradient(135deg, #1D466F 0%, #0A2D53 100%);
}
.subscribe-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Soft inset shadow + subtle navy gradient for legibility of overlays */
.subscribe-hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 45, 83, 0.18), rgba(10, 45, 83, 0.05) 40%, transparent);
    box-shadow: inset 0 0 120px rgba(10, 45, 83, 0.18);
    pointer-events: none;
}
.subscribe-hero-stamp {
    position: absolute;
    top: 28px;
    left: 28px;
    background: var(--terracotta);
    color: var(--ink);
    padding: 7px 16px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transform: rotate(-3deg);
    box-shadow: 0 4px 14px rgba(10, 45, 83, 0.2);
    z-index: 2;
}
.subscribe-hero-caption {
    position: absolute;
    left: 28px;
    bottom: 24px;
    color: var(--cream);
    font-family: 'Caveat', cursive;
    font-size: 22px;
    text-shadow: 0 1px 6px rgba(10, 45, 83, 0.55);
    max-width: 70%;
    z-index: 2;
}

.subscribe-hero-copy {
    background: var(--cream);
    padding: 96px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px;
}
.subscribe-eyebrow {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--terracotta-deep);
    font-size: 15px;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}
.subscribe-title {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 52px;
    letter-spacing: -0.022em;
    line-height: 1.04;
    margin-bottom: 18px;
    color: var(--ink);
}
.subscribe-title em {
    font-style: italic;
    font-weight: 700;
    color: var(--terracotta-deep);
}
.subscribe-deck {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 460px;
}

.subscribe-form {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin-bottom: 14px;
}
.subscribe-form input {
    flex: 1;
    background: var(--cream-deep);
    border: 1px solid var(--rule);
    padding: 14px 16px;
    font-size: 15px;
    font-family: inherit;
    border-radius: 6px;
    color: var(--ink);
    min-width: 0;
}
.subscribe-form input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--cream);
}
.subscribe-form button {
    background: var(--ink);
    color: var(--cream);
    border: none;
    padding: 14px 22px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.2s;
    font-family: inherit;
}
.subscribe-form button:hover { background: var(--terracotta-deep); }
/* Hide all members-form button states by default; show "default" only.
   Ghost Portal adds .loading / .success / .error classes to the form
   element during/after submission and we toggle which span is visible. */
.subscribe-form button > span { display: none; }
.subscribe-form button > span[data-members-default] { display: inline; }
.subscribe-form.loading button > span[data-members-default],
.subscribe-form.success button > span[data-members-default],
.subscribe-form.error button > span[data-members-default] { display: none; }
.subscribe-form.loading button > span[data-members-loading] { display: inline; }
.subscribe-form.success button > span[data-members-success] { display: inline; }
.subscribe-form.error button > span[data-members-error] { display: inline; }

.subscribe-microcopy {
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
    font-family: 'Fraunces', serif;
}
.subscribe-microcopy a {
    color: var(--ink);
    border-bottom: 1px dotted var(--ink-soft);
}

/* "or" divider + alternate-action prompt below the form, mirrors the
   sign-in page so the two flows feel symmetrical. */
.subscribe-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-soft);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    margin: 24px 0;
    max-width: 460px;
}
.subscribe-divider::before,
.subscribe-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
}
.subscribe-altprompt { max-width: 460px; }
.subscribe-altprompt h3 {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 6px;
}
.subscribe-altprompt p {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    color: var(--ink-soft);
    margin-bottom: 14px;
    line-height: 1.5;
}
.subscribe-altprompt a {
    display: inline-block;
    color: var(--ink);
    border-bottom: 2px solid var(--terracotta);
    padding-bottom: 1px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.2s;
}
.subscribe-altprompt a:hover { color: var(--terracotta-deep); }

.subscribe-already {
    background: var(--cream-deep);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 28px;
    max-width: 460px;
}
.subscribe-already p {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    color: var(--ink);
    margin-bottom: 12px;
}
.subscribe-already-link {
    color: var(--terracotta-deep);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--terracotta-deep);
}

/* Responsive — subscribe page */
@media (max-width: 980px) {
    .subscribe-hero { grid-template-columns: 1fr; min-height: 0; }
    .subscribe-hero-photo { min-height: 320px; }
    .subscribe-hero-copy { padding: 64px 32px; max-width: none; }
    .subscribe-title { font-size: 40px; }
}
@media (max-width: 540px) {
    .subscribe-hero-copy { padding: 48px 24px; }
    .subscribe-title { font-size: 34px; }
    .subscribe-form { flex-direction: column; }
}

/* ===========================================
   Auth layout (auth.hbs) — minimal chrome shared by
   custom-subscribe.hbs and custom-signin.hbs.
   =========================================== */
.auth-page { background: var(--cream); }
.auth-topbar {
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    padding: 14px 24px;
}
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}
.auth-back:hover { color: var(--ink); }
.auth-back-arrow {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s;
}
.auth-back:hover .auth-back-arrow { transform: translateX(-2px); }
.auth-main { display: block; }

/* ===========================================
   Sign-in page (custom-signin.hbs)
   =========================================== */
.signin-page { background: var(--cream); }

.signin-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    background: var(--cream);
    /* Fills the viewport between the auth topbar (~50px) and the bottom */
    min-height: calc(100vh - 50px);
}
.signin-photo {
    position: relative;
    min-height: 520px;
    overflow: hidden;
}
.signin-photo--fallback {
    background:
        radial-gradient(circle at 25% 20%, rgba(242, 196, 22, 0.45), transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(29, 70, 111, 0.35), transparent 45%),
        linear-gradient(135deg, #1D466F 0%, #0A2D53 100%);
}
.signin-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.signin-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 45, 83, 0.18), rgba(10, 45, 83, 0.05) 40%, transparent);
    box-shadow: inset 0 0 120px rgba(10, 45, 83, 0.18);
    pointer-events: none;
}
.signin-stamp {
    position: absolute;
    top: 28px;
    left: 28px;
    background: var(--terracotta);
    color: var(--ink);
    padding: 7px 16px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transform: rotate(-3deg);
    box-shadow: 0 4px 14px rgba(10, 45, 83, 0.2);
    z-index: 2;
}
.signin-caption {
    position: absolute;
    left: 28px;
    bottom: 24px;
    color: var(--cream);
    font-family: 'Caveat', cursive;
    font-size: 22px;
    text-shadow: 0 1px 6px rgba(10, 45, 83, 0.55);
    max-width: 70%;
    z-index: 2;
}

.signin-copy {
    background: var(--cream);
    padding: 96px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px;
}
.signin-eyebrow {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--terracotta-deep);
    font-size: 15px;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}
.signin-title {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: -0.022em;
    line-height: 1.04;
    margin-bottom: 18px;
    color: var(--ink);
}
.signin-title em {
    font-style: italic;
    font-weight: 700;
    color: var(--terracotta-deep);
}
.signin-deck {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 460px;
}

.signin-form {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin-bottom: 14px;
}
.signin-form input {
    flex: 1;
    background: var(--cream-deep);
    border: 1px solid var(--rule);
    padding: 14px 16px;
    font-size: 15px;
    font-family: inherit;
    border-radius: 6px;
    color: var(--ink);
    min-width: 0;
}
.signin-form input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--cream);
}
.signin-form button {
    background: var(--ink);
    color: var(--cream);
    border: none;
    padding: 14px 22px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.2s;
    font-family: inherit;
}
.signin-form button:hover { background: var(--terracotta-deep); }
.signin-form button > span { display: none; }
.signin-form button > span[data-members-default] { display: inline; }
.signin-form.loading button > span[data-members-default],
.signin-form.success button > span[data-members-default],
.signin-form.error button > span[data-members-default] { display: none; }
.signin-form.loading button > span[data-members-loading] { display: inline; }
.signin-form.success button > span[data-members-success] { display: inline; }
.signin-form.error button > span[data-members-error] { display: inline; }

.signin-microcopy {
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
    font-family: 'Fraunces', serif;
    margin-bottom: 32px;
    max-width: 460px;
}

.signin-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-soft);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    margin: 24px 0;
    max-width: 460px;
}
.signin-divider::before,
.signin-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
}

.signin-newhere { max-width: 460px; }
.signin-newhere h3 {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 6px;
}
.signin-newhere p {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    color: var(--ink-soft);
    margin-bottom: 14px;
    line-height: 1.5;
}
.signin-newhere a {
    display: inline-block;
    color: var(--ink);
    border-bottom: 2px solid var(--terracotta);
    padding-bottom: 1px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.2s;
}
.signin-newhere a:hover { color: var(--terracotta-deep); }

/* Already-signed-in state */
.signin-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 460px;
}
.signin-btn {
    display: inline-block;
    background: var(--ink);
    color: var(--cream);
    padding: 12px 20px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.2s;
}
.signin-btn:hover { background: var(--terracotta-deep); color: var(--cream); }
.signin-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.signin-btn--ghost:hover { background: var(--ink); color: var(--cream); }

/* Responsive — sign-in page */
@media (max-width: 980px) {
    .signin-hero { grid-template-columns: 1fr; min-height: 0; }
    .signin-photo { min-height: 320px; }
    .signin-copy { padding: 64px 32px; max-width: none; }
    .signin-title { font-size: 38px; }
}
@media (max-width: 540px) {
    .signin-copy { padding: 48px 24px; }
    .signin-title { font-size: 32px; }
    .signin-form { flex-direction: column; }
}

/* ===========================================
   My account page (custom-account.hbs)
   =========================================== */
.account-page { background: var(--cream); }

.account-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    background: var(--cream);
    min-height: calc(100vh - 50px);
}
.account-photo {
    position: relative;
    min-height: 520px;
    overflow: hidden;
}
.account-photo--fallback {
    background:
        radial-gradient(circle at 25% 20%, rgba(242, 196, 22, 0.45), transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(29, 70, 111, 0.35), transparent 45%),
        linear-gradient(135deg, #1D466F 0%, #0A2D53 100%);
}
.account-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.account-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 45, 83, 0.18), rgba(10, 45, 83, 0.05) 40%, transparent);
    box-shadow: inset 0 0 120px rgba(10, 45, 83, 0.18);
    pointer-events: none;
}
.account-stamp {
    position: absolute;
    top: 28px;
    left: 28px;
    background: var(--terracotta);
    color: var(--ink);
    padding: 7px 16px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transform: rotate(-3deg);
    box-shadow: 0 4px 14px rgba(10, 45, 83, 0.2);
    z-index: 2;
}
.account-caption {
    position: absolute;
    left: 28px;
    bottom: 24px;
    color: var(--cream);
    font-family: 'Caveat', cursive;
    font-size: 22px;
    text-shadow: 0 1px 6px rgba(10, 45, 83, 0.55);
    max-width: 70%;
    z-index: 2;
}

.account-copy {
    background: var(--cream);
    padding: 96px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px;
}
.account-eyebrow {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--terracotta-deep);
    font-size: 15px;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}
.account-title {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: -0.022em;
    line-height: 1.04;
    margin-bottom: 18px;
    color: var(--ink);
}
.account-title em {
    font-style: italic;
    font-weight: 700;
    color: var(--terracotta-deep);
}
.account-deck {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 28px;
    max-width: 460px;
}

/* Detail cards */
.account-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
    max-width: 460px;
}
.account-card {
    background: var(--cream-deep);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.account-card-body { flex: 1; min-width: 0; }
.account-card-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--terracotta-deep);
    margin-bottom: 4px;
}
.account-card-value {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    color: var(--ink);
    font-weight: 600;
    word-break: break-word;
}
.account-card-meta {
    font-family: 'Fraunces', serif;
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 2px;
    font-style: italic;
}
.account-card-action {
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid var(--terracotta);
    padding-bottom: 1px;
    white-space: nowrap;
    align-self: center;
    transition: color 0.2s;
    text-decoration: none;
}
.account-card-action:hover { color: var(--terracotta-deep); }

/* Action row */
.account-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 460px;
}
.account-btn {
    display: inline-block;
    background: var(--ink);
    color: var(--cream);
    padding: 12px 20px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
}
.account-btn:hover { background: var(--terracotta-deep); color: var(--cream); }
.account-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.account-btn--ghost:hover { background: var(--ink); color: var(--cream); }

/* Responsive — account page */
@media (max-width: 980px) {
    .account-hero { grid-template-columns: 1fr; min-height: 0; }
    .account-photo { min-height: 320px; }
    .account-copy { padding: 64px 32px; max-width: none; }
    .account-title { font-size: 38px; }
}
@media (max-width: 540px) {
    .account-copy { padding: 48px 24px; }
    .account-title { font-size: 32px; }
    .account-card { flex-direction: column; gap: 10px; }
    .account-card-action { align-self: flex-start; }
}