/* =============================================================================
   Public website
   ========================================================================== */

/* ------------------------------------------------------------------ nav -- */
.masthead {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--rule);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.masthead .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: 68px;
}
.masthead.is-stuck { box-shadow: var(--shadow-sm); }

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink); }
.brand-mark {
    width: 36px; height: 36px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    background: var(--ink-surface);
    color: #fff;
    flex: none;
}
.brand-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.2;
    display: block;
}
.brand-sub {
    font-size: .7rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-3);
    display: block;
    margin-top: -1px;
}

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
    padding: 7px 13px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: var(--radius);
    position: relative;
}
.nav a { transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.nav a:hover { color: var(--ink); background: var(--paper-sunk); }
.nav a.is-active { color: var(--ink); font-weight: 600; }
.nav a.is-active::after {
    content: '';
    position: absolute;
    left: 13px; right: 13px; bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Secondary items live in the nav on small screens, hidden on wide ones where
   the same links already sit in the actions area or the footer. */
.nav-fold { display: none; }

.nav-quiet {
    font-size: .8125rem;
    color: var(--ink-3);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
}
.nav-quiet:hover { color: var(--ink); border-bottom-color: var(--brass); }

.lang-toggle--site {
    display: inline-flex;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    overflow: hidden;
}
.lang-toggle--site a {
    padding: 5px 9px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ink-3);
    text-decoration: none;
    line-height: 1.4;
}
.lang-toggle--site a + a { border-left: 1px solid var(--rule); }
.lang-toggle--site a:hover { color: var(--ink); background: var(--paper-sunk); }
.lang-toggle--site a.is-on { background: var(--ink-surface); color: var(--ink-invert); }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 8px 11px;
    cursor: pointer;
    line-height: 1;
}

@media (max-width: 1020px) {
    .nav-toggle { display: block; }
    .nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        padding: var(--sp-3) var(--sp-5) var(--sp-5);
        gap: 0;
    }
    .nav.is-open { display: flex; }
    .nav a { padding: 12px 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
    .nav a.is-active::after { left: 0; right: auto; width: 20px; bottom: 8px; }
    .masthead .wrap { position: relative; }
    .nav-fold { display: contents; }
    .nav-quiet { display: none; }
}
@media (max-width: 460px) {
    .brand-sub { display: none; }
    .masthead .wrap { min-height: 64px; gap: var(--sp-3); }
}

/* ----------------------------------------------------------------- hero -- */
/*
   The hero is light. The old dark slab looked confident in a screenshot and
   heavy on a page you visit weekly — and it forced every element inside it to
   fight for contrast. White gives the headline the whole stage.
*/
.hero {
    background: var(--card);
    color: var(--ink);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
}
/* One very soft wash of the accent, top-right. No rings, no hatching. */
.hero::after {
    content: '';
    position: absolute;
    right: -10%;
    top: -55%;
    width: 60vw;
    height: 120%;
    background: radial-gradient(closest-side,
                color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
    pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--sp-8);
    align-items: center;
    padding-block: var(--sp-9);
}
.hero h1 {
    color: var(--ink);
    font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    margin-bottom: var(--sp-5);
    max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead {
    font-size: 1.08rem;
    color: var(--ink-2);
    max-width: 48ch;
    margin-bottom: var(--sp-6);
}
.hero-eyebrow { color: var(--accent); }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--rule);
}
@media (max-width: 560px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
.hero-stat .n {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.hero-stat .l {
    font-size: .78rem;
    color: var(--ink-3);
    margin-top: 6px;
}

/* The announcement line under the hero actions. */
.hero-note {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    font-size: .875rem;
    color: var(--ink-2);
}
.hero-note-tag {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-wash);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    flex: none;
}

/* Featured event card inside the hero */
.hero-card {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.hero-card-media { aspect-ratio: 16/8; overflow: hidden; background: var(--paper-deep); }
.hero-card-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-card-body { padding: var(--sp-5); }
.hero-card h3 { font-size: 1.15rem; margin-bottom: var(--sp-4); }
.hero-card-meta { display: grid; gap: 10px; font-size: .875rem; color: var(--ink-2); margin-bottom: var(--sp-5); }
.hero-card-meta div { display: flex; gap: 12px; align-items: baseline; }
.hero-card-meta dt {
    font-size: .78rem;
    color: var(--ink-3);
    width: 62px;
    flex: none;
}
.hero-card-meta dd { margin: 0; font-weight: 500; }
.hero-card-foot {
    margin: var(--sp-3) 0 0;
    text-align: center;
    font-size: .78rem;
    color: var(--ink-3);
}

@media (max-width: 1020px) {
    .hero-inner { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-8); gap: var(--sp-7); }
    .hero h1 { max-width: none; }
}

/* --------------------------------------------------------- page header --- */
.page-head {
    background: var(--card);
    color: var(--ink);
    padding-block: var(--sp-7) var(--sp-6);
    border-bottom: 1px solid var(--rule);
}
.page-head h1 { color: var(--ink); margin-bottom: var(--sp-3); }
.page-head p { color: var(--ink-2); max-width: 62ch; margin: 0; font-size: 1.02rem; }
.page-head .eyebrow { color: var(--accent); }

.breadcrumb {
    display: flex;
    gap: var(--sp-2);
    font-size: .8125rem;
    color: var(--ink-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.page-head .breadcrumb a:hover { color: var(--accent); }

/* ---------------------------------------------------------- event cards -- */
.event-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    height: 100%;
}
.event-card { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.event-card:hover {
    border-color: var(--rule-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: inherit;
}
.event-card-media {
    aspect-ratio: 16/7;
    background: var(--paper-deep);
    overflow: hidden;
    position: relative;
}
.event-card-media img { width: 100%; height: 100%; object-fit: cover; }
.event-card-date {
    position: absolute;
    left: var(--sp-4); top: var(--sp-4);
    background: var(--paper);
    border-radius: var(--radius);
    padding: 7px 11px;
    text-align: center;
    line-height: 1.1;
    box-shadow: var(--shadow-sm);
}
.event-card-date .d { font-family: var(--font-display); font-size: 1.32rem; display: block; }
.event-card-date .m {
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-top: 1px;
}
.event-card-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.event-card h3 {
    font-size: 1.18rem;
    margin-bottom: var(--sp-3);
    line-height: 1.28;
}
.event-card-summary { font-size: .875rem; color: var(--ink-2); margin-bottom: var(--sp-4); flex: 1; }
.event-card-meta {
    display: grid;
    gap: 6px;
    font-size: .8125rem;
    color: var(--ink-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
}
.event-card-meta span { display: flex; gap: 8px; align-items: baseline; }
.event-card-foot {
    margin-top: var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.event-card-seats { font-size: .75rem; color: var(--ink-3); }
.event-card-tags { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }

.program-tag {
    font-size: .688rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brass-deep);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.program-tag::before {
    content: '';
    width: 14px; height: 2px;
    background: currentColor;
}

/* seat meter inside cards */
.seats { margin-top: var(--sp-4); }
.seats-row {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--ink-3);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- event page --- */
/*
   The event header is light, with the cover shown as a proper banner rather
   than a washed-out backdrop behind an overlay. A photograph the committee
   took deserves to be looked at, not dimmed to 35% and covered in gradient.
*/
.event-hero {
    background: var(--card);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
}
.event-hero-media {
    max-height: 320px;
    overflow: hidden;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--rule);
}
.event-hero-media img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; }
.event-hero .wrap { padding-block: var(--sp-6) var(--sp-7); }
.event-hero h1 { color: var(--ink); max-width: 22ch; }
.event-hero .lead { color: var(--ink-2); }
.event-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--rule);
}
.event-hero-meta dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
}
.event-hero-meta dd { margin: 0; font-size: .95rem; color: var(--ink); max-width: 30ch; }

.event-body { padding-block: var(--sp-8); }
.event-section + .event-section { margin-top: var(--sp-7); }
.event-section h2 { font-size: 1.45rem; margin-bottom: var(--sp-4); }

/* Registration rail */
.reg-rail { position: sticky; top: 98px; }
.reg-card {
    background: var(--card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.reg-card-head {
    padding: var(--sp-5);
    border-bottom: 1px solid var(--rule);
    background: var(--paper-sunk);
}
.reg-price { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; }
.reg-card-body { padding: var(--sp-5); }
.reg-meta { display: grid; gap: var(--sp-3); font-size: .875rem; margin-bottom: var(--sp-5); }
.reg-meta > div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.reg-meta dt { color: var(--ink-3); }
.reg-meta dd { margin: 0; font-weight: 500; text-align: right; }

.countdown {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--rule);
    margin-top: var(--sp-4);
}
.countdown div { text-align: center; min-width: 54px; }
.countdown .n {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.countdown .l {
    display: block;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 5px;
}

/* --------------------------------------------------------- schedule ------ */
.schedule { border-top: 1px solid var(--rule); }
.schedule-day {
    font-size: .688rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass-deep);
    padding: var(--sp-5) 0 var(--sp-2);
    font-weight: 600;
}
.schedule-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--rule);
}
.schedule-time {
    font-size: .8125rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}
.schedule-item h4 { margin: 0 0 4px; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; }
.schedule-item p { margin: 0; font-size: .875rem; color: var(--ink-2); }

/* --------------------------------------------------------- speakers ------ */
.speaker {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--rule);
}
.speaker:last-child { border-bottom: 0; }
.speaker h4 { margin: 0 0 2px; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; }
.speaker .role {
    font-size: .688rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brass-deep);
    margin-bottom: 6px;
}
.speaker p { margin: 0; font-size: .875rem; color: var(--ink-2); }

/* ------------------------------------------------------------ programs --- */
.program-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease;
    height: 100%;
}
.program-card:hover { border-color: var(--rule-strong); transform: translateY(-2px); color: inherit; }
.program-card-media { aspect-ratio: 16/7; background: var(--paper-deep); overflow: hidden; }
.program-card-media img { width: 100%; height: 100%; object-fit: cover; }
.program-card-body { padding: var(--sp-5); }
.program-card h3 { font-size: 1.18rem; margin-bottom: var(--sp-2); }
.program-card p { font-size: .875rem; color: var(--ink-2); margin: 0 0 var(--sp-4); }
.program-count { font-size: .75rem; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }

/* Quiet, image-free program list — used where cards would crowd the page. */
.program-list {
    border-top: 1px solid var(--rule);
    background: var(--card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.program-row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--sp-5);
    padding: var(--sp-5);
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: background .18s ease;
}
.program-row:last-child { border-bottom: 0; }
.program-row:hover { background: var(--paper-sunk); color: inherit; }
.program-row-name {
    font-family: var(--font-display);
    font-size: 1.12rem;
    letter-spacing: -.01em;
}
.program-row-note { font-size: .875rem; color: var(--ink-2); }
.program-row-count {
    font-size: .75rem;
    color: var(--ink-3);
    white-space: nowrap;
}
@media (max-width: 760px) {
    .program-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .program-row-count { order: -1; }
}

/* --------------------------------------------------------------- news ---- */
.news-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: border-color .2s ease, transform .2s ease;
}
.news-card:hover { border-color: var(--rule-strong); transform: translateY(-2px); color: inherit; }
.news-card-media { aspect-ratio: 16/8; background: var(--paper-deep); overflow: hidden; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; }
.news-card h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); line-height: 1.3; }
.news-card p { font-size: .875rem; color: var(--ink-2); flex: 1; margin-bottom: var(--sp-4); }
.news-meta { font-size: .75rem; color: var(--ink-3); display: flex; gap: var(--sp-2); align-items: center; }

.article-body { font-size: 1.03rem; line-height: 1.78; }
.article-body p { margin-bottom: var(--sp-5); }

/* ------------------------------------------------------------ gallery ---- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-4);
}
.gallery-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
    background: linear-gradient(180deg, transparent, rgba(20,24,31,.8));
    color: #fff;
    font-size: .75rem;
}

/* ---------------------------------------------------- registration form -- */
.form-shell {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.form-shell-head {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--rule);
    background: var(--paper-sunk);
}
.form-shell-body { padding: var(--sp-6); }
.form-shell-foot {
    padding: var(--sp-5) var(--sp-6);
    border-top: 1px solid var(--rule);
    background: var(--paper-sunk);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5); }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- ticket / QR --- */
.ticket {
    background: var(--card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 560px;
    margin-inline: auto;
}
.ticket-head {
    background: var(--ink-surface);
    color: var(--ink-invert);
    padding: var(--sp-5) var(--sp-6);
}
.ticket-head h2 { color: var(--ink-invert); font-size: 1.35rem; margin: 0; }
.ticket-head .eyebrow { color: var(--brass); margin-bottom: var(--sp-2); }
.ticket-head .eyebrow::after { background: rgba(176,131,65,.3); }
.ticket-body { padding: var(--sp-6); text-align: center; }
.ticket-qr {
    display: inline-block;
    padding: var(--sp-4);
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}
.ticket-code {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    letter-spacing: .1em;
    margin-top: var(--sp-4);
    font-weight: 600;
}
.ticket-perf {
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--rule-strong) 0 6px, transparent 6px 12px);
    margin: 0;
}
.ticket-details {
    padding: var(--sp-5) var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    text-align: left;
    font-size: .9rem;
}
.ticket-details > div { display: flex; justify-content: space-between; gap: var(--sp-4); }
.ticket-details dt { color: var(--ink-3); font-size: .8125rem; }
.ticket-details dd { margin: 0; font-weight: 500; text-align: right; }

/* --------------------------------------------------------------- CTA ----- */
.cta-band {
    background: var(--ink-surface);
    color: var(--ink-invert);
    border-radius: var(--radius-lg);
    padding: var(--sp-7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
}
.cta-band h2 { color: var(--ink-invert); margin: 0 0 var(--sp-2); }
.cta-band p { color: var(--ink-invert-2); margin: 0; max-width: 52ch; }

/* ------------------------------------------------------------- footer ---- */
.footer {
    background: var(--ink-surface);
    color: var(--ink-invert-2);
    padding-block: var(--sp-8) var(--sp-5);
    margin-top: var(--sp-8);
    font-size: .875rem;
}
.footer h4 {
    color: var(--ink-invert);
    font-family: var(--font-sans);
    font-size: .688rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
}
.footer a { color: var(--ink-invert-2); text-decoration: none; }
.footer a:hover { color: var(--ink-invert); text-decoration: underline; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr;
    gap: var(--sp-7);
}
.footer-about p { max-width: 42ch; margin: 0; }
.footer-links { display: grid; gap: 10px; }
.footer-admin {
    color: var(--ink-3);
    font-size: .75rem;
    letter-spacing: .04em;
}
.footer-admin:hover { color: var(--ink-invert); text-decoration: none; }
.footer-bottom {
    margin-top: var(--sp-7);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule-invert);
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: .8125rem;
}
.footer .brand-mark { border-color: var(--rule-invert); background: transparent; }
.footer .brand-name { color: var(--ink-invert); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ filters ---- */
.filter-bar {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-end;
    flex-wrap: wrap;
    padding: var(--sp-4);
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-6);
}
.filter-bar .field { margin: 0; min-width: 170px; flex: 1; }
.filter-bar .label { font-size: .688rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* --------------------------------------------------------- announcement -- */
.notice-strip {
    background: var(--brass-wash);
    border-bottom: 1px solid #ecdfc6;
    font-size: .875rem;
}
.notice-strip .wrap { display: flex; align-items: center; gap: var(--sp-3); padding-block: 10px; }
.notice-strip strong { color: var(--brass-deep); }

/* ---------------------------------------------------------- fact strip --- */
.fact-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--card);
    overflow: hidden;
}
.fact {
    padding: var(--sp-5);
    border-right: 1px solid var(--rule);
}
.fact:last-child { border-right: 0; }
.fact .n {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.fact .l {
    font-size: .688rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: var(--sp-2);
}
@media (max-width: 760px) {
    .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fact:nth-child(2) { border-right: 0; }
    .fact:nth-child(1), .fact:nth-child(2) { border-bottom: 1px solid var(--rule); }
}

/* ------------------------------------------------------------- timeline -- */
.timeline { position: relative; padding-left: var(--sp-6); }
.timeline::before {
    content: '';
    position: absolute;
    left: 5px; top: 6px; bottom: 6px;
    width: 1px;
    background: var(--rule-strong);
}
.timeline-item { position: relative; padding-bottom: var(--sp-5); }
.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(var(--sp-6) * -1 + 1px);
    top: 7px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--brass);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item h4 { margin: 0 0 2px; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; }
.timeline-item p { margin: 0; font-size: .875rem; color: var(--ink-2); }

/* --------------------------------------------------------- result count -- */
.result-count {
    margin: 0 0 var(--sp-5);
    font-size: .8125rem;
    color: var(--ink-3);
}

/* --------------------------------------------------------- quick links --- */
.quick-links { display: grid; gap: var(--sp-3); }