/* Talantul în Negoț — light/dark design tokens */

:root {
    /* Two families, one editorial voice.
       Libre Bodoni carries every display moment (headlines, numerals, pull quotes).
       Public Sans carries every functional moment (body, nav, labels, buttons). */
    --font-display: "Libre Bodoni", "Playfair Display", Georgia, serif;
    --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 160ms;
    --dur: 260ms;
    --dur-slow: 620ms;

    /* Rhythm */
    --measure: 34rem;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(3.5rem, 7vw, 6.5rem);
}

:root,
[data-theme="light"] {
    --bg: #f6f1e7;
    --bg-soft: #efe7d6;
    --bg-muted: #e7decc;
    --card: #fffdf8;
    --card-hover: #fff8ec;
    --panel: #faf6ee;
    --fg: #2c2416;
    --fg-strong: #1b160e;
    --muted: #6b6256;
    --subtle: #8a8072;
    --border: #e2d6c0;
    --border-strong: #cfc0a4;
    --sage: #5c6b45;
    --sage-strong: #4a5736;
    --sage-soft: rgba(92, 107, 69, 0.12);
    --accent: #9a4a12;
    --accent-strong: #7c3a0c;
    --accent-soft: rgba(154, 74, 18, 0.12);
    --on-accent: #fffdf8;
    --shadow: 0 12px 32px rgba(44, 36, 22, 0.08);
    --nav-bg: rgba(246, 241, 231, 0.92);
    --footer-bg: #efe7d6;
    --ring: #5c6b45;
    --chip-bg: rgba(92, 107, 69, 0.12);
    --chip-fg: #4a5736;
    --input-bg: #fffdf8;
    --sidebar: #efe7d6;
    --scrollbar: #cfc0a4;
    --scrollbar-track: #efe7d6;
    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #16140f;
    --bg-soft: #1d1a14;
    --bg-muted: #262117;
    --card: #221f18;
    --card-hover: #2b261d;
    --panel: #1c1913;
    --fg: #f3ede1;
    --fg-strong: #fffaf0;
    --muted: #b7ad9c;
    --subtle: #8d8474;
    --border: rgba(243, 237, 225, 0.12);
    --border-strong: rgba(243, 237, 225, 0.22);
    --sage: #a3b57e;
    --sage-strong: #c3d4a0;
    --sage-soft: rgba(163, 181, 126, 0.14);
    --accent: #e0b15a;
    --accent-strong: #f0c97a;
    --accent-soft: rgba(224, 177, 90, 0.14);
    --on-accent: #1b160e;
    --shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
    --nav-bg: rgba(22, 20, 15, 0.92);
    --footer-bg: #12100c;
    --ring: #e0b15a;
    --chip-bg: rgba(224, 177, 90, 0.12);
    --chip-fg: #f0c97a;
    --input-bg: #1d1a14;
    --sidebar: #12100c;
    --scrollbar: #4a4336;
    --scrollbar-track: #1d1a14;
    color-scheme: dark;
}

html, body {
    background: var(--bg);
    color: var(--fg);
}

body,
body.sleek-shell,
body.admin-sleek,
body.tn-app-shell {
    background: var(--bg) !important;
    color: var(--fg) !important;
}

body.sleek-shell::before,
body.admin-sleek::before {
    background: radial-gradient(1200px 400px at 50% -10%, var(--sage-soft), transparent 60%);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--fg-strong);
    letter-spacing: -0.02em;
}

.font-display {
    font-family: var(--font-display) !important;
}

/* Components */
.tn-page,
.sleek-section,
.sleek-marketing-section,
.sleek-hero-section,
.sleek-content-shell,
.admin-main-sleek {
    background: var(--bg);
    color: var(--fg);
}

.tn-section-muted,
.sleek-marketing-section-alt {
    background: var(--bg-soft);
    border-color: var(--border);
}

.tn-card,
.tn-panel,
.sleek-panel,
.glass-card,
.glass-card-subtle,
.feature-card-3d,
.profile-header,
.profile-section,
.profile-stat-card,
.achievement-card,
.game-session-card,
.stat-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.85rem;
    box-shadow: var(--shadow);
    color: var(--fg);
}

.tn-card:hover,
.glass-card:hover,
.feature-card-3d:hover,
.profile-stat-card:hover {
    background: var(--card-hover) !important;
    border-color: var(--border-strong) !important;
    transform: none;
}

.tn-chip {
    background: var(--chip-bg);
    color: var(--chip-fg);
    border-color: var(--border);
}

.tn-button-primary,
.sleek-cta-link,
.admin-quick-button,
.btn-primary-premium,
.btn-gold-premium {
    background: var(--sage) !important;
    color: var(--on-accent) !important;
    border: 1px solid transparent !important;
}

.tn-button-primary:hover,
.sleek-cta-link:hover,
.admin-quick-button:hover {
    background: var(--sage-strong) !important;
    color: var(--on-accent) !important;
}

.tn-button-secondary,
.btn-glass {
    background: transparent !important;
    color: var(--fg) !important;
    border: 1px solid var(--border-strong) !important;
}

.tn-button-secondary:hover,
.btn-glass:hover {
    background: var(--sage-soft) !important;
    color: var(--fg-strong) !important;
}

.tn-icon {
    background: var(--sage);
    color: var(--on-accent);
}

.tn-icon-accent {
    background: var(--accent);
    color: var(--on-accent);
}

.tn-stat {
    background: var(--panel);
    border-color: var(--border);
}

.tn-bottom-nav {
    background: var(--nav-bg);
    border-color: var(--border);
}

.tn-bottom-nav a {
    color: var(--muted);
}

.tn-bottom-nav a[aria-current="page"] {
    background: var(--sage-soft);
    color: var(--fg-strong);
}

.sleek-nav,
.admin-header-sleek,
.admin-sidebar-header-sleek {
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(16px);
    box-shadow: none;
}

.sleek-brand-mark {
    background: var(--sage);
    color: var(--on-accent);
    border: none;
    box-shadow: none;
}

.sleek-brand-text,
.sleek-brand-text strong,
.gradient-text,
.gradient-text-animated,
.text-accent {
    color: var(--fg-strong) !important;
    -webkit-text-fill-color: currentColor;
    background: none;
}

.sleek-brand-text strong {
    color: var(--sage) !important;
}

.sleek-nav-link {
    color: var(--muted) !important;
}

.sleek-nav-link:hover {
    color: var(--fg-strong) !important;
    background: var(--sage-soft) !important;
    border-color: transparent !important;
}

.sleek-nav-link-active {
    color: var(--fg-strong) !important;
    background: var(--sage-soft) !important;
    border-color: var(--border) !important;
}

.sleek-ribbon {
    background: var(--card);
    color: var(--fg);
    border-color: var(--border);
}

.sleek-ribbon .icon-wrap {
    background: var(--sage-soft);
    color: var(--sage);
}

.sleek-footer {
    background: var(--footer-bg) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted);
}

.admin-sidebar-sleek {
    background: var(--sidebar) !important;
    border-right: 1px solid var(--border) !important;
}

.sleek-divider {
    color: var(--muted);
}

.sleek-divider::before,
.sleek-divider::after {
    background: var(--border-strong);
}

.theme-toggle,
.app-burger {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--fg);
    cursor: pointer;
    flex-shrink: 0;
}

.app-burger {
    background: var(--card);
}

.theme-toggle:hover {
    background: var(--sage-soft);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }

/* Remap hardcoded dark Tailwind utilities so the whole app can go light */
[data-theme="light"] .bg-gray-900,
[data-theme="light"] .bg-gray-950,
[data-theme="light"] .bg-slate-950,
[data-theme="light"] .bg-slate-900,
[data-theme="light"] .bg-black,
[data-theme="light"] .from-slate-950,
[data-theme="light"] .via-slate-900\/95,
[data-theme="light"] .to-slate-950 {
    background-color: var(--bg) !important;
    background-image: none !important;
}

[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-850,
[data-theme="light"] .bg-gray-750,
[data-theme="light"] .bg-slate-800,
[data-theme="light"] .bg-slate-850 {
    background-color: var(--card) !important;
}

[data-theme="light"] .bg-gray-700,
[data-theme="light"] .bg-slate-700 {
    background-color: var(--bg-muted) !important;
}

[data-theme="light"] .text-white,
[data-theme="light"] .text-slate-100,
[data-theme="light"] .text-slate-50 {
    color: var(--fg-strong) !important;
}

[data-theme="light"] .text-gray-200,
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-slate-200,
[data-theme="light"] .text-slate-300 {
    color: var(--fg) !important;
}

[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-slate-500 {
    color: var(--muted) !important;
}

[data-theme="light"] .text-amber-200,
[data-theme="light"] .text-amber-300,
[data-theme="light"] .text-amber-400,
[data-theme="light"] .text-gold-400,
[data-theme="light"] .text-gold-500,
[data-theme="light"] .text-yellow-300,
[data-theme="light"] .text-yellow-400 {
    color: var(--accent) !important;
}

[data-theme="light"] .border-gray-800,
[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-slate-800,
[data-theme="light"] .border-slate-700,
[data-theme="light"] .divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border) !important;
}

[data-theme="light"] .hover\:bg-gray-700:hover,
[data-theme="light"] .hover\:bg-gray-800:hover,
[data-theme="light"] .hover\:bg-slate-800:hover {
    background-color: var(--bg-muted) !important;
}

[data-theme="light"] .hover\:text-white:hover {
    color: var(--fg-strong) !important;
}

[data-theme="light"] .bg-gradient-to-b,
[data-theme="light"] .bg-gradient-to-r,
[data-theme="light"] .bg-gradient-to-bl,
[data-theme="light"] .from-yellow-500\/10,
[data-theme="light"] .from-amber-500\/10 {
    background-image: none !important;
}

/* Keep contrast on filled accent buttons */
[data-theme="light"] .bg-blue-600,
[data-theme="light"] .bg-blue-700,
[data-theme="light"] .bg-green-600,
[data-theme="light"] .bg-red-600,
[data-theme="light"] .bg-purple-600,
[data-theme="light"] .bg-yellow-600,
[data-theme="light"] .bg-amber-500,
[data-theme="light"] .bg-gold-500,
[data-theme="light"] .from-blue-600,
[data-theme="light"] .from-purple-600 {
    color: #fff !important;
}

[data-theme="light"] .bg-gold-500,
[data-theme="light"] .bg-yellow-600 {
    color: #1b160e !important;
}

/* Info-page helpers */
.info-hero {
    padding: 4rem 0 3.5rem;
    background:
        linear-gradient(180deg, var(--sage-soft), transparent 70%),
        var(--bg);
}

.info-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-fg);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.biblio-row + .biblio-row {
    border-top: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ——— Editorial magazine layer ——— */
body.sleek-shell {
    font-family: var(--font-ui);
    background-image:
        radial-gradient(ellipse 80% 50% at 100% 0%, var(--sage-soft), transparent 55%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

.font-display,
h1, h2, h3 {
    font-family: var(--font-display) !important;
}

[data-theme="light"] .brand-seal {
    filter: invert(1);
}

/* ═══════════════════════════════════════════════════════════
   Chrome — nav, buttons, labels
   ═══════════════════════════════════════════════════════════ */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-soft),
                background var(--dur) var(--ease-soft),
                box-shadow var(--dur) var(--ease-soft);
}

/* Hairline + lift only once the page has moved — the nav sits flush on arrival. */
.site-nav.is-stuck {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-bottom-color: var(--border);
    box-shadow: 0 1px 24px -12px rgba(28, 22, 14, 0.5);
}

.site-nav a.nav-item {
    position: relative;
    padding: 0.5rem 0.1rem;
    margin: 0 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
    border: none;
    background: none;
    transition: color var(--dur-fast) var(--ease-soft);
}

.site-nav a.nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05rem;
    height: 1px;
    background: var(--sage);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease);
}

.site-nav a.nav-item:hover,
.site-nav a.nav-item.is-on {
    color: var(--fg-strong);
    background: none;
}

.site-nav a.nav-item:hover::after,
.site-nav a.nav-item:focus-visible::after,
.site-nav a.nav-item.is-on::after {
    transform: scaleX(1);
}

.brand-name {
    letter-spacing: -0.015em;
    transition: opacity var(--dur-fast) var(--ease-soft);
}

.brand-seal {
    transition: transform var(--dur-slow) var(--ease);
}

.site-nav a:hover .brand-seal {
    transform: rotate(-6deg) scale(1.05);
}

.btn-solid,
.btn-ghost {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.6rem;
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur) var(--ease-soft),
                border-color var(--dur) var(--ease-soft),
                color var(--dur) var(--ease-soft),
                box-shadow var(--dur) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
}

.btn-solid {
    background: var(--sage);
    color: var(--on-accent);
    border: 1px solid var(--sage);
    box-shadow: 0 1px 2px rgba(28, 22, 14, 0.10),
                0 10px 24px -12px color-mix(in srgb, var(--sage) 70%, transparent);
}

.btn-solid:hover {
    background: var(--sage-strong);
    border-color: var(--sage-strong);
    box-shadow: 0 2px 4px rgba(28, 22, 14, 0.12),
                0 16px 32px -14px color-mix(in srgb, var(--sage) 80%, transparent);
}

.btn-ghost {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--border-strong);
}

.btn-ghost:hover {
    border-color: var(--sage);
    color: var(--fg-strong);
    background: var(--sage-soft);
}

.btn-solid:active,
.btn-ghost:active {
    transform: translateY(1px);
}

.quiet-link {
    font-family: var(--font-ui);
    transition: color var(--dur-fast) var(--ease-soft);
}

.mast-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sage);
}

.mast-kicker::before {
    content: "";
    width: 1.9rem;
    height: 1px;
    background: currentColor;
    opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════
   Cover — one cinematic screen, type on the photograph
   ═══════════════════════════════════════════════════════════ */

.nationals-hero {
    position: relative;
    isolation: isolate;
    min-height: min(47rem, calc(100svh - 4.25rem));
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #14120d;
}

.nationals-hero img.nationals-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    transform: scale(1.085);
    animation: hero-drift 24s var(--ease-soft) both,
               hero-fade 1400ms var(--ease-soft) both;
}

@keyframes hero-drift {
    to { transform: scale(1); }
}

@keyframes hero-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Bottom-weighted scrim only. No side gradient — the photograph stays a photograph. */
.nationals-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(14, 12, 9, 0.30) 0%,
            rgba(14, 12, 9, 0.06) 20%,
            rgba(14, 12, 9, 0.04) 38%,
            rgba(14, 12, 9, 0.58) 74%,
            rgba(14, 12, 9, 0.90) 100%),
        radial-gradient(135% 95% at 50% 108%, rgba(14, 12, 9, 0.5), transparent 60%);
}

/* Film grain — reads as printed stock rather than a stock photo. */
.nationals-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.nationals-hero-copy {
    position: relative;
    z-index: 3;
    max-width: 72rem;
    width: 100%;
    margin: 0 auto;
    padding: 7rem var(--gutter) 3.5rem;
    color: #f7f2e8;
}

/* Staggered arrival — above the fold, so pure CSS, no observer. */
.nationals-hero-copy > * {
    animation: rise 900ms var(--ease) both;
}

.nationals-hero-copy > *:nth-child(1) { animation-delay: 240ms; }
.nationals-hero-copy > *:nth-child(2) { animation-delay: 340ms; }
.nationals-hero-copy > *:nth-child(3) { animation-delay: 440ms; }
.nationals-hero-copy > *:nth-child(4) { animation-delay: 540ms; }
.nationals-hero-copy > *:nth-child(5) { animation-delay: 640ms; }

@keyframes rise {
    from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
    to { opacity: 1; transform: none; }
}

.nationals-hero-copy .mast-kicker {
    background: none;
    color: rgba(247, 242, 232, 0.82);
}

.nationals-hero-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(2.9rem, 7.4vw, 6.6rem);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.028em;
    color: #f7f2e8;
    max-width: 15ch;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 20px 60px rgba(0, 0, 0, 0.45);
}

.nationals-hero-copy h1 em {
    font-style: italic;
    color: #ecd9a8;
}

.nationals-hero-copy p.lede {
    font-family: var(--font-ui);
    max-width: 30rem;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.6;
    color: rgba(247, 242, 232, 0.88);
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}

/* On a photograph, cream reads as the primary action — sage disappears into the image. */
.nationals-hero-copy .btn-solid {
    background: #f7f2e8;
    color: #17140e;
    border-color: #f7f2e8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}

.nationals-hero-copy .btn-solid:hover {
    background: #ffffff;
    border-color: #ffffff;
}

.nationals-hero-copy .btn-ghost {
    color: #f7f2e8;
    border-color: rgba(247, 242, 232, 0.45);
    background: rgba(247, 242, 232, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nationals-hero-copy .btn-ghost:hover {
    border-color: #f7f2e8;
    background: rgba(247, 242, 232, 0.16);
    color: #fff;
}

.nationals-hero-copy a.quiet-link {
    color: rgba(247, 242, 232, 0.78);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

.nationals-hero-copy a.quiet-link:hover {
    color: #f7f2e8;
}

/* ═══════════════════════════════════════════════════════════
   Season schedule — a printed rail, centered
   ═══════════════════════════════════════════════════════════ */

.date-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.date-rail article {
    padding: 2.1rem 1.25rem 2.2rem;
    text-align: center;
    border-right: 1px solid var(--border);
    transition: background var(--dur) var(--ease-soft);
}

.date-rail article:hover {
    background: var(--bg-soft);
}

.date-rail article:last-child {
    border-right: 0;
}

.date-rail .phase {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sage);
    font-weight: 600;
}

.date-rail .when {
    font-family: var(--font-display);
    font-size: clamp(1.95rem, 3.2vw, 2.9rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-top: 0.55rem;
    color: var(--fg-strong);
    font-variant-numeric: lining-nums tabular-nums;
}

.date-rail p {
    margin-top: 0.5rem;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.88rem;
}

/* ═══════════════════════════════════════════════════════════
   Section furniture
   ═══════════════════════════════════════════════════════════ */

.tn-section {
    padding-block: var(--section-y);
}

.rule-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.4rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--border);
}

.rule-title h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.num-mark {
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 4.25rem);
    font-weight: 400;
    line-height: 0.82;
    color: var(--sage);
    opacity: 0.5;
    font-variant-numeric: lining-nums tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   Pull quote
   ═══════════════════════════════════════════════════════════ */

.verse-band {
    position: relative;
    overflow: hidden;
    background: var(--sage);
    color: #f6f1e7;
    padding: clamp(4rem, 9vw, 6rem) var(--gutter);
}

[data-theme="dark"] .verse-band {
    color: #16140f;
}

.verse-band blockquote {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.4vw, 2.7rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.verse-band cite {
    display: block;
    margin-top: 1.35rem;
    font-family: var(--font-ui);
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.78;
}

.verse-band-photo {
    position: relative;
    isolation: isolate;
    padding: clamp(5rem, 12vw, 8.5rem) var(--gutter);
}

.verse-band-photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
}

.verse-band-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 12, 9, 0.74) 0%, rgba(14, 12, 9, 0.58) 50%, rgba(14, 12, 9, 0.74) 100%);
}

.verse-band-photo blockquote {
    position: relative;
    z-index: 1;
    color: #f7f2e8;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}

.verse-band-photo cite {
    position: relative;
    z-index: 1;
    color: #ecd9a8;
    opacity: 1;
}

[data-theme="dark"] .verse-band-photo blockquote {
    color: #f7f2e8;
}

/* ═══════════════════════════════════════════════════════════
   Figures — stats, bibliography
   ═══════════════════════════════════════════════════════════ */

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stat-row div {
    padding: 2rem 1rem;
    text-align: center;
    border-right: 1px solid var(--border);
}

.stat-row div:last-child { border-right: 0; }

.stat-row strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--fg-strong);
    font-variant-numeric: lining-nums tabular-nums;
}

.stat-row span {
    display: block;
    margin-top: 0.65rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.biblio-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
}

.biblio-table th {
    text-align: left;
    padding: 0 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-strong);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sage);
    font-weight: 600;
}

.biblio-table th:last-child { text-align: right; }

.biblio-table td {
    text-align: left;
    padding: 1.05rem 0.6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: baseline;
}

.biblio-table tbody tr {
    transition: background var(--dur-fast) var(--ease-soft);
}

.biblio-table tbody tr:hover {
    background: var(--bg-soft);
}

.biblio-table td:first-child {
    color: var(--fg-strong);
    font-weight: 600;
}

.biblio-table td:last-child {
    text-align: right;
    color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   Photography
   ═══════════════════════════════════════════════════════════ */

.photo-frame {
    overflow: hidden;
    border-radius: 0.2rem;
    background: var(--bg-muted);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent);
}

.photo-frame img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Curated grid: one lead frame, five supporting. Not a contact sheet. */
.nationals-mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(8rem, 11.5vw, 11.5rem);
    gap: 0.55rem;
}

.nationals-mosaic a {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--bg-muted);
    border-radius: 0.15rem;
    grid-column: span 2;
}

.nationals-mosaic a:first-child {
    grid-column: span 4;
    grid-row: span 2;
}

.nationals-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 720ms var(--ease);
}

.nationals-mosaic a:hover img,
.nationals-mosaic a:focus-visible img {
    transform: scale(1.045);
}

.shot-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.75rem 0.95rem 0.8rem;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f7f2e8;
    background: linear-gradient(180deg, transparent, rgba(14, 12, 9, 0.82));
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.nationals-mosaic a:hover .shot-cap,
.nationals-mosaic a:focus-visible .shot-cap {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .shot-cap { display: none; }
}

.nationals-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}

.nationals-strip img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 0.15rem;
    background: var(--bg-muted);
}

/* ═══════════════════════════════════════════════════════════
   Video — poster facade, so the section is never an empty rectangle
   ═══════════════════════════════════════════════════════════ */

.video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0.2rem;
    background: var(--bg-muted);
    cursor: pointer;
}

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms var(--ease);
}

.video-facade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 12, 9, 0.16), rgba(14, 12, 9, 0.5));
    transition: background var(--dur) var(--ease);
}

.video-facade:hover img { transform: scale(1.03); }
.video-facade:hover::after { background: linear-gradient(180deg, rgba(14, 12, 9, 0.08), rgba(14, 12, 9, 0.38)); }

.video-facade .play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4.75rem;
    height: 4.75rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(247, 242, 232, 0.94);
    color: #17140e;
    font-size: 1.25rem;
    padding-left: 0.2rem;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.38);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.video-facade:hover .play,
.video-facade:focus-visible .play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}

.video-facade .vf-label {
    position: absolute;
    z-index: 2;
    left: 1.25rem;
    bottom: 1rem;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247, 242, 232, 0.9);
}

.video-frame iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 0.2rem;
}

/* ═══════════════════════════════════════════════════════════
   Scroll reveal + focus + selection
   ═══════════════════════════════════════════════════════════ */

/* Scoped to .js (set by the inline head script): without scripting the content
   simply renders, rather than sitting at opacity 0 forever. */
.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
    transition: opacity 820ms var(--ease), transform 820ms var(--ease);
}

.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
    border-radius: 0.25rem;
}

::selection {
    background: var(--sage);
    color: var(--on-accent);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    .nationals-hero-copy > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .nationals-hero img.nationals-hero-img {
        transform: none !important;
        opacity: 1 !important;
    }
}

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

body {
    overflow-x: clip;
}

a, button, [role="button"] {
    touch-action: manipulation;
}

body.sheet-open {
    overflow: hidden;
}

.site-nav,
.sleek-nav {
    padding-top: env(safe-area-inset-top);
}

.site-sheet-scrim,
.app-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(22, 20, 15, 0.48);
}

.site-sheet,
.app-sheet {
    position: fixed;
    top: calc(4.25rem + env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--bg) !important;
    padding: 0.35rem 1.25rem calc(5.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.app-sheet {
    top: calc(4rem + env(safe-area-inset-top));
}

.sheet-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.7rem 0.15rem;
    font-size: 1.05rem;
    font-weight: 550;
    color: var(--fg);
    border-bottom: 1px solid var(--border);
    text-transform: none;
    letter-spacing: 0;
}

.sheet-link i {
    width: 1.25rem;
    text-align: center;
    color: var(--sage);
}

.sheet-link.is-on {
    color: var(--sage-strong);
    font-weight: 650;
}

.sheet-link-danger {
    color: #b42318;
}

.sheet-link-danger i {
    color: #b42318;
}

.tn-toast-stack {
    right: 1rem;
    bottom: 1rem;
    left: auto;
}

@media (max-width: 767px) {
    /* Lead frame keeps its weight; the rest pair off two-up. */
    .nationals-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 7.25rem;
        gap: 0.4rem;
    }
    .nationals-mosaic a {
        grid-column: span 1;
    }
    .nationals-mosaic a:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
    .nationals-strip {
        gap: 0.4rem;
    }
    .date-rail {
        grid-template-columns: 1fr;
    }
    .date-rail article {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 1.35rem 0.15rem 1.45rem;
    }
    .date-rail article:last-child {
        border-bottom: 0;
    }
    .date-rail .when {
        font-size: 2.15rem;
    }
    /* Three figures still read as a rail at 390px — stacking them wastes the page. */
    .stat-row div {
        padding: 1.5rem 0.4rem;
    }
    .stat-row strong {
        font-size: 1.9rem;
    }
    .stat-row span {
        font-size: 0.6rem;
        letter-spacing: 0.12em;
        margin-top: 0.5rem;
    }
    .nationals-hero {
        min-height: min(40rem, calc(100svh - 4.25rem));
    }
    .nationals-hero-copy {
        padding: 3.5rem 1.35rem 2.25rem;
    }
    .nationals-hero-copy h1 {
        font-size: clamp(2.55rem, 12.5vw, 3.5rem);
        max-width: 12ch;
    }
    .nationals-hero-copy p.lede {
        font-size: 0.98rem;
    }
    .nationals-hero-copy .flex {
        width: 100%;
    }
    .nationals-hero-copy .btn-solid,
    .nationals-hero-copy .btn-ghost {
        width: 100%;
    }
    .rule-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
        margin-bottom: 1.75rem;
    }
    .video-facade .play {
        width: 3.75rem;
        height: 3.75rem;
        font-size: 1rem;
    }
    .brand-name,
    .sleek-brand-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 11.5rem;
    }
    /* The table becomes a stacked list: age group as the label, books beneath it. */
    .biblio-table thead {
        display: none;
    }
    .biblio-table tr {
        display: block;
        padding: 0.95rem 0.1rem;
        border-bottom: 1px solid var(--border);
    }
    .biblio-table tbody tr:hover {
        background: none;
    }
    .biblio-table td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left !important;
    }
    .biblio-table td:first-child {
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--sage);
    }
    .biblio-table td:last-child {
        margin-top: 0.3rem;
        font-size: 1rem;
        color: var(--fg);
    }
    .tn-hero {
        padding-block: 1.5rem;
    }
    .tn-toast-stack {
        left: 0.85rem;
        right: 0.85rem;
        bottom: calc(5.35rem + env(safe-area-inset-bottom));
    }
    .tn-page h1 {
        line-height: 1.15;
    }
    .sticky.top-16 {
        top: calc(4rem + env(safe-area-inset-top));
    }
    #game-setup .flex.flex-wrap button {
        min-height: 44px;
    }
}

@media (max-width: 380px) {
    .brand-name,
    .sleek-brand-text {
        max-width: 8.75rem;
        font-size: 1rem;
    }
}