/* ================================================================
   results.css — page-specific styles for results.php
   Requires: theme.css
   ================================================================ */

/* ── Narrow single-column layout ── */
.page-wrap-narrow {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}
.page-body-simple {
    padding: 32px 0 60px;
}

/* ── Hero (narrow variant) ── */
.hero-inner-narrow {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* ── Hero stats ── */
.hero-stat-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-num {
    font-family: var(--font-display); font-weight: 800;
    font-size: 2rem; line-height: 1; color: var(--gold);
}
.hero-stat-label {
    font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-soft); margin-top: 2px;
}

/* ── Year groupings ── */
.year-section { margin-bottom: 40px; }
.year-header {
    display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.year-label {
    font-family: var(--font-display); font-weight: 800;
    font-size: 2.2rem; line-height: 1; color: var(--gold); letter-spacing: 1px;
}
.year-count {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px; background: var(--rule); color: var(--ink-soft);
}
.year-rule { flex: 1; height: 1px; background: var(--rule); }

/* ── Responsive ── */
@media (max-width: 600px) {
    .page-wrap-narrow { padding: 0 14px; }
    .year-label { font-size: 1.7rem; }
}