/* ==========================================================================
   Bros before Boges — "Sonoran Dusk" theme
   Loaded after style.css on the public pages (index, rules). style.css still
   supplies the shared modal / leaderboard / form styles used by script.js.
   ========================================================================== */

:root {
    /* Surfaces — desert night */
    --bg: #0e0b09;
    --bg-2: #15110e;
    --surface: #1c1612;
    --surface-2: #251d17;
    --line: rgba(244, 235, 223, 0.10);
    --line-strong: rgba(244, 235, 223, 0.20);

    /* Ink */
    --ink: #f4ebdf;
    --ink-muted: #b8a895;
    --ink-dim: #9a8a79;

    /* Accents — sunset, sun, fairway */
    --copper: #e27d4f;
    --copper-deep: #b9582f;
    --copper-glow: rgba(226, 125, 79, 0.35);
    --gold: #e8b86b;
    --fairway: #93c08b;
    --blue-team: #6ea8ff;
    --red-team: #ff7b72;
    --paper: #f3eadb;
    --paper-ink: #2a2019;

    /* Type */
    --serif: 'Fraunces', 'Georgia', serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Rhythm */
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 76px;

    /* Re-point the legacy tokens that style.css + script.js inline styles use */
    --primary-bg: var(--bg);
    --primary-bg-alt: var(--surface);
    --accent-emerald: var(--fairway);
    --accent-emerald-glow: rgba(147, 192, 139, 0.25);
    --accent-gold: var(--gold);
    --text-main: var(--ink);
    --text-muted: var(--ink-muted);
    --glass-bg: rgba(28, 22, 18, 0.72);
    --glass-border: var(--line);
    --font-heading: var(--serif);
    --font-body: var(--sans);
}

html { scroll-padding-top: calc(var(--header-h) + 12px); }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    font-variation-settings: "SOFT" 50, "WONK" 0;
    text-wrap: balance;
}

em, .serif-italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}

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

[hidden] { display: none !important; }

::selection { background: var(--copper); color: var(--bg); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 3000;
    background: var(--gold);
    color: var(--bg);
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
}
.skip-link:focus { top: 12px; }

.wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Neutralise style.css behaviours we don't want on the new pages */
.glass-panel:hover { transform: none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.25s var(--ease-out), background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
    white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-copper {
    background: var(--copper);
    color: #1a0f08;
    box-shadow: 0 10px 30px -10px var(--copper-glow);
}
.btn-copper:hover { background: #ec8b5d; box-shadow: 0 16px 40px -12px var(--copper-glow); }

.btn-line {
    background: rgba(14, 11, 9, 0.35);
    color: var(--ink);
    border-color: var(--line-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-line:hover { border-color: var(--gold); color: var(--gold); }

.btn-sm { min-height: 40px; padding: 0 18px; font-size: 0.875rem; }

/* style.css .btn-primary / .btn-ghost are still used inside modals */
.btn-primary {
    background: var(--copper);
    color: #1a0f08;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 30px -10px var(--copper-glow);
}
.btn-primary:hover { background: #ec8b5d; box-shadow: 0 16px 40px -12px var(--copper-glow); }
.btn-ghost { border-radius: 999px; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-h);
    z-index: 1000;
    transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s;
    border-bottom: 1px solid transparent;
}
.nav.is-scrolled,
.nav.is-solid {
    background: rgba(14, 11, 9, 0.82);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom-color: var(--line);
}
.nav .wrap { max-width: 1400px; padding: 0 clamp(16px, 2.2vw, 32px); }
.nav-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    flex: none;
}
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-word {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}
.brand-word em { color: var(--copper); font-weight: 600; }

.nav-primary { margin-left: auto; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}
.nav-links a,
.nav-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--sans);
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s;
}
.nav-links a:hover,
.nav-menu-btn:hover,
.nav-links a.is-active { color: var(--ink); background: rgba(244, 235, 223, 0.06); }
.nav-links a.is-active { color: var(--gold); }
.nav-links .badge-beta {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(232, 184, 107, 0.4);
    border-radius: 999px;
    padding: 1px 6px;
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Clubhouse dropdown (Keep score / Admin / account) */
.nav-menu { position: relative; }
.nav-menu-btn svg { width: 14px; height: 14px; transition: transform 0.2s; }
.nav-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    padding: 8px;
    list-style: none;
    background: rgba(28, 22, 18, 0.97);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.nav-menu-list.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu-list a,
.nav-menu-list button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--ink);
    font: 600 0.9rem var(--sans);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
.nav-menu-list a:hover,
.nav-menu-list button:hover { background: rgba(244, 235, 223, 0.07); color: var(--gold); }
.nav-menu-list svg { width: 18px; height: 18px; color: var(--ink-dim); }

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    margin-left: auto;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: rgba(14, 11, 9, 0.4);
    color: var(--ink);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
/* "Bets need you": a count on the Bookie links (white on #dc2626: 4.8:1, like The Bookie's own badges) */
.bets-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 99px;
    background: #dc2626;
    color: #fff;
    font-family: var(--font-body, inherit);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
}
/* ...and a dot on the phone menu button when the links are tucked inside it */
.nav-toggle { position: relative; }
.nav-toggle.has-bets::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 2px var(--bg, #0e0b09);
}
.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    position: relative;
    transition: background-color 0.2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s var(--ease-out), top 0.25s var(--ease-out);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(14, 11, 9, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: calc(var(--header-h) + 24px) 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a,
.drawer button.drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 4px;
    border: none;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--ink);
    font: 500 1.6rem var(--serif);
    text-align: left;
    cursor: pointer;
}
.drawer a small,
.drawer button small { font: 700 0.7rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.drawer-actions .btn { width: 100%; }
/* The trip-day pairs are links: keep them buttons, not drawer rows (.drawer a above) */
.drawer .drawer-actions a.btn { justify-content: center; padding: 0 14px; border: 1px solid transparent; font: 700 0.95rem var(--sans); }
.drawer .drawer-actions a.btn-copper { background: var(--copper); color: #1a0f08; }
.drawer .drawer-actions a.btn-copper:hover { background: #ec8b5d; }
.drawer .drawer-actions a.btn-line { background: rgba(14, 11, 9, 0.35); border-color: var(--line-strong); color: var(--ink); }
.drawer .drawer-actions a.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.drawer-sub { margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; }
.drawer .drawer-sub a,
.drawer .drawer-sub button.drawer-link {
    width: auto;
    border: none;
    padding: 10px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font: 600 0.95rem var(--sans);
    color: var(--ink-muted);
}
body.drawer-open { overflow: hidden; }

/* The homepage's full nav shows from 1100px (short labels, see "Desktop nav" at the end).
   1099.98px rather than 1099px, so a fractional width (display scaling, browser zoom) can't
   fall between this and the desktop rules */
@media (max-width: 1099.98px) {
    .nav:not(.nav--compact) .nav-primary { display: none; }
    .nav:not(.nav--compact) .nav-toggle { display: inline-flex; }
    .nav-actions { margin-left: auto; }
    .nav-actions + .nav-toggle { margin-left: 8px; }
}
@media (max-width: 1080px) {
    .nav--compact .nav-primary { display: none; }
    .nav--compact .nav-toggle { display: inline-flex; }
}
@media (max-width: 720px) {
    .nav-actions { display: none; }
    .nav-actions + .nav-toggle { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */
.section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.section-alt { background: var(--bg-2); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font: 700 0.75rem var(--sans);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}
.eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.h-display {
    font-size: clamp(2.4rem, 5.4vw, 4.4rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.025em;
}
.h-display em { color: var(--copper); }

.lede {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ink-muted);
    max-width: 62ch;
}

.section-head { margin-bottom: clamp(40px, 6vw, 72px); max-width: 780px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}
.section-head .lede { margin-top: 18px; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }

/* Reveal on scroll */
.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
/* index.html's safety net: script.js hasn't started after 3 s (weak signal or blocked), so show them */
.js.reveals-shown .reveal { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: max(680px, 100svh);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    padding: calc(var(--header-h) + 40px) 0 clamp(40px, 7vh, 80px);
}
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--surface); }
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.8s ease;
}
/* The hero photo sits in a <picture> (a portrait crop for phones held upright): let it fill the slide */
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide.is-active img { animation: kenburns 14s ease-out forwards; }
@keyframes kenburns {
    from { transform: scale(1.08) translate3d(0, 0, 0); }
    to { transform: scale(1.0) translate3d(0, -1.5%, 0); }
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(14, 11, 9, 0.70) 0%, rgba(14, 11, 9, 0.10) 28%, rgba(14, 11, 9, 0.25) 55%, rgba(14, 11, 9, 0.92) 88%, var(--bg) 100%),
        linear-gradient(90deg, rgba(14, 11, 9, 0.75) 0%, rgba(14, 11, 9, 0.25) 55%, rgba(14, 11, 9, 0) 100%);
}
.hero::after {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -30%;
    height: 70%;
    z-index: -1;
    background: radial-gradient(ellipse at 30% 100%, rgba(226, 125, 79, 0.28), transparent 60%);
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
    gap: clamp(28px, 5vw, 70px);
    align-items: end;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: rgba(14, 11, 9, 0.45);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: 700 0.74rem var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 26px;
}
.hero-kicker .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--copper);
    box-shadow: 0 0 0 4px rgba(226, 125, 79, 0.25);
}
.hero-title {
    font-family: var(--serif);
    font-size: clamp(3rem, 8.2vw, 7.2rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin-bottom: 26px;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}
.hero-title em { color: var(--copper); font-weight: 400; }
.hero-sub {
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    color: rgba(244, 235, 223, 0.86);
    max-width: 54ch;
    margin-bottom: 34px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-card {
    background: rgba(20, 16, 13, 0.62);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    padding: 26px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.hero-card-label span:last-child { white-space: nowrap; color: var(--gold); }
.hero-card-label {
    font: 700 0.7rem var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 22px;
}
.countdown-cell {
    text-align: center;
    padding: 12px 4px 10px;
    border-radius: 14px;
    background: rgba(244, 235, 223, 0.05);
    border: 1px solid var(--line);
}
.countdown-cell b {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--ink);
}
.countdown-cell span {
    display: block;
    margin-top: 6px;
    font: 700 0.62rem var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.hero-facts { list-style: none; display: grid; gap: 2px; min-height: 180px; align-content: start; }
.hero-facts li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
    color: var(--ink);
}
.hero-facts svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.hero-facts .muted { color: var(--ink-muted); margin-left: auto; font-size: 0.85rem; text-align: right; white-space: nowrap; }

/* Cup pill (only shown once the season is live); a link to Live scores, see Trip-day mode below */
.cup-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 8px 10px 8px 16px;
    border-radius: 999px;
    background: rgba(14, 11, 9, 0.55);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: 700 0.8rem var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cup-pill .live { color: var(--copper); display: inline-flex; align-items: center; gap: 6px; }
.cup-pill .live::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--copper);
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }
.cup-pill .team { display: inline-flex; align-items: center; gap: 8px; }
.cup-pill .team b { font: 600 1.3rem var(--serif); letter-spacing: 0; color: var(--ink); }
.cup-pill .blue { color: var(--blue-team); }
.cup-pill .red { color: var(--red-team); }
.team-scoreboard-hidden { display: none !important; }

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border-radius: 999px;
    border: 1.5px solid rgba(244, 235, 223, 0.4);
    display: flex;
    justify-content: center;
    padding-top: 8px;
}
.scroll-cue::after {
    content: '';
    width: 3px;
    height: 8px;
    border-radius: 3px;
    background: var(--ink);
    animation: cue 2s ease-in-out 3;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Destination / overview
   -------------------------------------------------------------------------- */
.destination {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 90px);
    align-items: start;
}
.destination-copy p + p { margin-top: 16px; }
/* (Trip updates and Still to come, above the destination copy: see "The group-text questions" at the end) */

.fact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.fact {
    padding: 22px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.fact:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.fact-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: rgba(226, 125, 79, 0.12);
    color: var(--copper);
    margin-bottom: 16px;
}
.fact-icon svg { width: 20px; height: 20px; }
.fact-label {
    font: 700 0.68rem var(--sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 6px;
}
.fact-value { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.fact-note { margin-top: 6px; font-size: 0.86rem; color: var(--ink-muted); }
.fact-value a { border-bottom: 1px dashed rgba(232, 184, 107, 0.6); }
.fact-value a:hover { color: var(--gold); }

/* Cost card */
.cost-card {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(226, 125, 79, 0.22), transparent 55%),
        linear-gradient(160deg, var(--surface-2), var(--surface));
    border: 1px solid rgba(226, 125, 79, 0.28);
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}
.cost-amount {
    font-family: var(--serif);
    font-size: clamp(3rem, 6vw, 4.6rem);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--ink);
    font-variant-numeric: lining-nums;
}
.cost-amount sup { font-size: 0.45em; vertical-align: 0.9em; color: var(--copper); margin-right: 2px; }
.cost-amount .approx { font-size: 0.42em; color: var(--ink-muted); font-style: italic; margin-right: 6px; vertical-align: 0.9em; }
.cost-meta b { display: block; font: 700 0.72rem var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); margin-bottom: 6px; }
.cost-meta p { color: var(--ink-muted); font-size: 0.95rem; }
.cost-breakdown {
    grid-column: 1 / -1;
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.cost-line {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(14, 11, 9, 0.35);
    border: 1px solid var(--line);
}
.cost-line span { display: block; font: 700 0.66rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.cost-line b { font: 500 1.25rem var(--serif); }

/* --------------------------------------------------------------------------
   Itinerary — "tee sheet"
   -------------------------------------------------------------------------- */
.days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    counter-reset: day;
}
.day {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    min-height: 100%;
    transition: transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.4s;
}
.day:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.day-media {
    position: relative;
    aspect-ratio: 4 / 3.2;
    overflow: hidden;
    background: var(--surface-2);
}
.day-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.day:hover .day-media img { transform: scale(1.05); }
.day-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 11, 9, 0.05) 30%, rgba(14, 11, 9, 0.85) 100%);
}
.day-media.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.day-media.mystery {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 120%, rgba(226, 125, 79, 0.45), transparent 60%),
        repeating-radial-gradient(circle at 50% 110%, transparent 0 18px, rgba(244, 235, 223, 0.05) 18px 19px),
        linear-gradient(180deg, #211913, #120e0b);
}
.day-media.mystery .q {
    font-family: var(--serif);
    font-style: italic;
    font-size: 6rem;
    line-height: 1;
    color: rgba(244, 235, 223, 0.85);
    position: relative;
    z-index: 1;
}
.day-media.dawn {
    background:
        radial-gradient(circle at 50% 105%, #f3b36b 0 12%, rgba(226, 125, 79, 0.75) 22%, rgba(120, 70, 90, 0.4) 45%, transparent 70%),
        linear-gradient(180deg, #1c1830 0%, #3a2433 45%, #7a4432 75%, #1a120d 100%);
}
.day-media.dawn svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; z-index: 1; color: #0f0b09; }
.day-date {
    position: absolute;
    left: 18px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--ink);
}
.day-date b { font: 500 3rem/0.9 var(--serif); letter-spacing: -0.03em; }
.day-date span { font: 700 0.72rem var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.day-date span small { display: block; color: var(--gold); font-size: 0.68rem; }
.day-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    font: 800 0.66rem var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--copper);
    color: #1a0f08;
}
.day-tag.soft { background: rgba(14, 11, 9, 0.6); color: var(--ink); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); }
.day-body { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.day-title { font-size: 1.45rem; font-weight: 500; }
.day-text { color: var(--ink-muted); font-size: 0.93rem; }
.slots { list-style: none; display: grid; gap: 8px; margin-top: auto; }
.slot {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(244, 235, 223, 0.04);
    border: 1px solid var(--line);
}
.slot-when {
    grid-row: span 2;
    font: 800 0.66rem var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    writing-mode: horizontal-tb;
    min-width: 34px;
}
.slot-what { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.slot-what a:hover { color: var(--gold); }
.slot-meta { font-size: 0.8rem; color: var(--ink-dim); }

/* --------------------------------------------------------------------------
   Courses — "The Battlegrounds"
   -------------------------------------------------------------------------- */
.course-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(70px, 10vw, 130px); }
.course > *, .course-body, .course-gallery { min-width: 0; }
.course {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}
.course:nth-child(even) .course-gallery { order: 2; }
.course-gallery { position: sticky; top: calc(var(--header-h) + 24px); }
.course-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--surface);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
    cursor: zoom-in;
    border: none;
    padding: 0;
    width: 100%;
    display: block;
}
.course-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.45s ease, transform 1.2s var(--ease-out);
}
.course-hero:hover img { transform: scale(1.03); }
.course-hero .round-badge {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(14, 11, 9, 0.62);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: 700 0.72rem var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
}
.course-hero .round-badge b { color: var(--gold); }
.course-hero .zoom-hint {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(14, 11, 9, 0.6);
    color: var(--ink);
    border: 1px solid var(--line-strong);
}
.course-hero .zoom-hint svg { width: 18px; height: 18px; }
.thumbs {
    display: flex;
    gap: 8px;
    margin: 5px -5px 0;
    overflow-x: auto;
    padding: 5px 5px 9px;
    scrollbar-width: thin;
}
.thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    background: var(--surface);
    transition: opacity 0.2s, border-color 0.2s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: 1; }
.thumb[aria-pressed="true"] { opacity: 1; border-color: var(--gold); }

.course-club {
    font: 700 0.74rem var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}
.course-title { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.course-tagline {
    margin-top: 10px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--copper);
    font-variation-settings: "SOFT" 100, "WONK" 1;
}
.course-desc { margin-top: 18px; color: var(--ink-muted); }
.course-when {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(147, 192, 139, 0.1);
    border: 1px solid rgba(147, 192, 139, 0.3);
    color: var(--fairway);
    font: 700 0.8rem var(--sans);
}
.course-when svg { width: 16px; height: 16px; }

.course-stats {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    gap: 0;
}
.course-stat { padding: 16px 12px 16px 0; }
.course-stat + .course-stat { padding-left: 14px; border-left: 1px solid var(--line); }
.course-stat span {
    display: block;
    font: 700 0.64rem var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 4px;
}
.course-stat b { font: 500 1.6rem/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.course-stat small { display: block; font-size: 0.74rem; color: var(--ink-dim); margin-top: 2px; }

.course-designer { margin-top: 16px; font-size: 0.92rem; color: var(--ink-muted); }
.course-designer + .course-designer { margin-top: 6px; }
.course-designer b { color: var(--ink); font-weight: 600; }

.sig-holes { margin-top: 26px; list-style: none; display: grid; gap: 10px; }
.sig-hole {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: start;
}
.sig-num {
    width: 54px; height: 54px;
    border-radius: 50%;
    display: grid; place-items: center;
    text-align: center;
    border: 1px solid rgba(232, 184, 107, 0.45);
    background: rgba(232, 184, 107, 0.07);
    line-height: 1;
}
.sig-num b { font: 500 1.3rem var(--serif); color: var(--gold); display: block; }
.sig-num small { font: 700 0.62rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); display: block; margin-top: 2px; }
.sig-hole p { font-size: 0.93rem; color: var(--ink-muted); padding-top: 4px; }
.sig-hole p b { color: var(--ink); font-weight: 600; }

.accolades { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.accolade {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    background: rgba(244, 235, 223, 0.05);
    border: 1px solid var(--line);
}
.accolade svg { width: 14px; height: 14px; color: var(--gold); }

/* Scorecard — cream card stock, like the real thing */
.scorecard {
    margin-top: 28px;
    border-radius: 14px;
    background:
        linear-gradient(0deg, rgba(42, 32, 25, 0.03), rgba(42, 32, 25, 0.03)),
        var(--paper);
    color: var(--paper-ink);
    padding: 14px 14px 12px;
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(42, 32, 25, 0.08);
}
.scorecard-scroll { overflow-x: auto; }
.scorecard-scroll + .scorecard-scroll { margin-top: 8px; }
.scorecard-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0 2px;
}
.scorecard-head b { font: 600 1rem var(--serif); }
.scorecard-head span { font: 700 0.62rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(42, 32, 25, 0.72); }
.scorecard table {
    width: 100%;
    min-width: 300px;
    border-collapse: collapse;
    font: 600 0.8rem var(--sans);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.scorecard th,
.scorecard td { padding: 6px 2px; border: 1px solid rgba(42, 32, 25, 0.16); }
.scorecard th { font-weight: 800; font-size: 0.68rem; letter-spacing: 0.06em; background: rgba(42, 32, 25, 0.07); }
.scorecard th:first-child,
.scorecard td:first-child { text-align: left; padding-left: 8px; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; white-space: nowrap; }
.scorecard .tot { background: rgba(42, 32, 25, 0.1); font-weight: 800; }
.scorecard .par3 { color: #1d6b4a; }
.scorecard .par5 { color: #a2461f; }
.scorecard-foot { margin-top: 8px; font-size: 0.7rem; color: rgba(42, 32, 25, 0.65); display: flex; gap: 14px; flex-wrap: wrap; }
.scorecard-foot i { font-style: normal; font-weight: 800; }
.scorecard-foot .k3 { color: #1d6b4a; }
.scorecard-foot .k5 { color: #a2461f; }

.course-credit { margin-top: 14px; font-size: 0.78rem; color: var(--ink-dim); }
.course-credit a { border-bottom: 1px dotted currentColor; }
.course-credit a:hover { color: var(--gold); }

.course-tbd {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: clamp(36px, 6vw, 70px);
    text-align: center;
    background:
        radial-gradient(circle at 50% 130%, rgba(226, 125, 79, 0.35), transparent 60%),
        repeating-radial-gradient(circle at 50% 120%, transparent 0 22px, rgba(244, 235, 223, 0.045) 22px 23px),
        var(--surface);
    border: 1px dashed rgba(232, 184, 107, 0.35);
}
.course-tbd .course-title { font-size: clamp(2rem, 4vw, 3rem); }
.course-tbd > p:not(.eyebrow) { color: var(--ink-muted); max-width: 56ch; margin: 14px auto 0; }
.course-tbd .eyebrow::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }

/* --------------------------------------------------------------------------
   The Cup
   -------------------------------------------------------------------------- */
.cup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}
.cup-card {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 4vw, 40px);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--line);
}
.cup-card h3 { font-size: 1.7rem; font-weight: 500; margin-bottom: 10px; }
.cup-card p { color: var(--ink-muted); }
.cup-champ {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(110, 168, 255, 0.22), transparent 55%),
        linear-gradient(160deg, #1a1d27, var(--surface));
    border-color: rgba(110, 168, 255, 0.3);
}
.cup-champ .trophy {
    position: absolute;
    right: -20px;
    top: -10px;
    width: 180px;
    height: 180px;
    color: rgba(232, 184, 107, 0.09);
}
.champ-score {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 18px 0 20px;
    font-family: var(--serif);
}
.champ-score .w { font-size: 3.6rem; line-height: 1; color: var(--blue-team); }
.champ-score .l { font-size: 2rem; color: var(--ink-dim); }
.champ-score .dash { color: var(--ink-dim); font-size: 2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(244, 235, 223, 0.05);
    border: 1px solid var(--line);
    color: var(--ink);
}
.chip.cap { border-color: rgba(232, 184, 107, 0.5); color: var(--gold); }
.chip.pending { gap: 8px; border-color: rgba(232, 184, 107, 0.4); color: var(--gold); background: rgba(232, 184, 107, 0.08); }
.chip.pending::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: pulse 1.6s ease-in-out infinite;
}
.chip.muted { color: var(--ink-muted); }

.cup-rules { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.cup-rules li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-muted); font-size: 0.95rem; }
.cup-rules svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }
.cup-rules b { color: var(--ink); }

.cup-live {
    grid-column: 1 / -1;
    padding: clamp(24px, 4vw, 36px);
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, rgba(110, 168, 255, 0.12), rgba(14, 11, 9, 0) 45%, rgba(14, 11, 9, 0) 55%, rgba(255, 123, 114, 0.12)), var(--surface);
    border: 1px solid var(--line-strong);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.cup-live .side b { display: block; font: 500 clamp(2.8rem, 6vw, 4.2rem)/1 var(--serif); color: var(--ink); }
.cup-live .side span { font: 800 0.8rem var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.cup-live .blue span { color: var(--blue-team); }
.cup-live .red span { color: var(--red-team); }
.cup-live .vs { font: italic 500 1.4rem var(--serif); color: var(--ink-dim); }
.cup-live .needed { grid-column: 1 / -1; font-size: 0.85rem; color: var(--ink-muted); }

.teams { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.team-card {
    padding: 26px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--team-color, var(--line-strong));
}
.team-card h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    color: var(--team-color);
    margin-bottom: 18px;
}
.team-card h3 small { font: 700 0.72rem var(--sans); letter-spacing: 0.08em; color: var(--ink-muted); padding: 5px 10px; border-radius: 999px; background: rgba(244, 235, 223, 0.05); }
.team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
    font-weight: 600;
}
.team-row .hcp { font-variant-numeric: tabular-nums; color: var(--fairway); font-weight: 700; }
.cap-tag {
    margin-left: 8px;
    font: 800 0.6rem var(--sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(232, 184, 107, 0.45);
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: 2px;
}

/* --------------------------------------------------------------------------
   The Crew
   -------------------------------------------------------------------------- */
.crew-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.crew-head h3 { font: 700 0.78rem var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.crew-count { font: 500 1rem var(--serif); color: var(--ink-muted); }
.crew-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.player {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color 0.25s, transform 0.3s var(--ease-out);
}
.player:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.player-avatar {
    position: relative;
    width: 52px; height: 52px; flex: none;
    border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
    font: 600 1.1rem var(--serif);
    color: var(--ink);
    background: linear-gradient(145deg, #4a3326, #2a1e17);
    border: 1px solid rgba(232, 184, 107, 0.35);
}
.player-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player-info { flex: 1; min-width: 0; }
.player-name { font-weight: 700; font-size: 0.94rem; line-height: 1.25; }
.player-name .cap-tag { margin-left: 6px; }
.player-meta { font-size: 0.78rem; color: var(--ink-dim); margin-top: 2px; }
.player-hcp { margin-left: auto; text-align: right; flex: none; }
.player-hcp b { display: block; font: 500 1.35rem/1 var(--serif); color: var(--fairway); font-variant-numeric: tabular-nums; }
.player-hcp span { font: 700 0.58rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.player.is-captain { border-color: rgba(232, 184, 107, 0.4); }
.bubble { margin-top: 44px; }
.crew-empty {
    padding: 36px;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--line-strong);
    text-align: center;
    color: var(--ink-muted);
}
.crew-cta {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 24px 26px;
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, rgba(226, 125, 79, 0.16), rgba(226, 125, 79, 0.02));
    border: 1px solid rgba(226, 125, 79, 0.3);
}
.crew-cta h3 { font-size: 1.5rem; font-weight: 500; }
.crew-cta p { color: var(--ink-muted); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Hall of Fame
   -------------------------------------------------------------------------- */
.editions { display: grid; gap: 14px; margin-bottom: 48px; }
.edition {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 22px 26px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
}
.edition-year { font: 500 2.4rem/1 var(--serif); color: var(--gold); letter-spacing: -0.02em; }
.edition-where { font-weight: 700; font-size: 1.05rem; }
.edition-note { font-size: 0.9rem; color: var(--ink-muted); }
.edition-result { text-align: right; }
.edition-result b { display: block; font: 500 1.4rem var(--serif); }
.edition-result span { font: 800 0.66rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.edition.next { border-style: dashed; border-color: rgba(226, 125, 79, 0.45); background: linear-gradient(90deg, rgba(226, 125, 79, 0.1), transparent 60%), var(--surface); }
.edition.next .edition-year { color: var(--copper); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
    position: relative;
    padding: 90px 0 40px;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(80% 120% at 50% 120%, rgba(226, 125, 79, 0.18), transparent 60%),
        var(--bg);
    overflow: hidden;
}
.footer-word {
    font-family: var(--serif);
    font-size: clamp(3rem, 11vw, 9rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: rgba(244, 235, 223, 0.92);
}
.footer-word em { color: var(--copper); }
.footer-motto-line { margin-top: 18px; font: italic 500 1.25rem var(--serif); color: var(--gold); }
.footer-grid {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; }
.footer-links a,
.footer-links button { color: var(--ink-muted); font: 600 0.9rem var(--sans); background: none; border: none; cursor: pointer; padding: 6px 0; }
.footer-links a:hover,
.footer-links button:hover { color: var(--gold); }
.footer small { color: var(--ink-dim); font-size: 0.8rem; }
.footer-credits { margin-top: 18px; color: var(--ink-dim); font-size: 0.78rem; max-width: 80ch; }
.footer-credits a { border-bottom: 1px dotted currentColor; }

/* --------------------------------------------------------------------------
   Modals — restyle the shared ones
   -------------------------------------------------------------------------- */
.modal { background: rgba(8, 6, 5, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.modal .modal-content.glass-panel {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
}
.modal h2 { font-weight: 500; font-size: 2rem; }
.modal-x {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(14, 11, 9, 0.6);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: color 0.2s, border-color 0.2s;
}
.modal-x:hover { color: var(--gold); border-color: var(--gold); }
.modal-x svg { width: 20px; height: 20px; }
.modal-lede { color: var(--ink-muted); margin: -6px 0 22px; font-size: 0.95rem; }

.registration-form label { color: var(--ink-muted); font-weight: 600; font-size: 0.85rem; }
.registration-form input,
.field-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(244, 235, 223, 0.4);
    background: rgba(14, 11, 9, 0.5);
    color: var(--ink);
    font: 500 1rem var(--sans);
}
.registration-form input::placeholder,
.field-input::placeholder { color: rgba(244, 235, 223, 0.5); font-style: normal; }
.registration-form input:focus,
.field-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 184, 107, 0.2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error { color: var(--red-team); margin-top: 14px; font-size: 0.9rem; }

.scoreboard-hero { background-size: cover; background-position: center; height: 240px; position: relative; }
.scoreboard-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 11, 9, 0.1) 10%, var(--surface) 100%);
}
.scoreboard-hero h2 { position: absolute; left: 36px; bottom: 22px; z-index: 2; font-size: clamp(2rem, 5vw, 3rem); }
.scoreboard-hero h2 em { color: var(--copper); }
.scoreboard-container { background: var(--surface); padding: 8px 36px 36px; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 6, 5, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 64px 16px;
}
.lightbox.active { display: flex; }
.lightbox figure { margin: 0; max-width: min(1400px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.lightbox figcaption { color: var(--ink-muted); font-size: 0.9rem; text-align: center; min-height: 1.4em; }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(14, 11, 9, 0.6);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    cursor: pointer;
}
.lightbox-nav:hover { color: var(--gold); border-color: var(--gold); }
.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-count { position: absolute; top: 24px; left: 24px; font: 700 0.78rem var(--sans); letter-spacing: 0.14em; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Rules page
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    padding: calc(var(--header-h) + 70px) 0 60px;
    overflow: hidden;
    isolation: isolate;
}
.page-hero-bg { position: absolute; inset: 0; z-index: -2; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 11, 9, 0.72) 0%, rgba(14, 11, 9, 0.6) 50%, var(--bg) 100%);
}
.rule-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: rgba(147, 192, 139, 0.08);
    border: 1px solid rgba(147, 192, 139, 0.3);
    margin-bottom: 26px;
}
.rule-note svg { width: 20px; height: 20px; color: var(--fairway); flex: none; margin-top: 2px; }
.rule-note p { color: var(--ink); font-size: 0.95rem; }
.callout {
    padding: 24px 26px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(232, 184, 107, 0.12), rgba(232, 184, 107, 0.02));
    border: 1px solid rgba(232, 184, 107, 0.3);
    margin-bottom: 26px;
}
.callout h2, .callout h3 { color: var(--gold); font-size: 1.3rem; font-weight: 500; margin-bottom: 10px; }
.callout p { color: var(--ink); }
.callout .warn { color: var(--red-team); }
.rules-list { display: grid; gap: 12px; }
.rule {
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
}
.rule[open] { border-color: var(--line-strong); }
.rule summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    min-height: 64px;
}
.rule summary::-webkit-details-marker { display: none; }
.rule summary:focus-visible { outline-offset: -3px; border-radius: calc(var(--radius) - 1px); }
.rule-num {
    width: 44px; height: 44px; flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    font: 500 1.2rem var(--serif);
    color: var(--gold);
    border: 1px solid rgba(232, 184, 107, 0.45);
}
.rule summary h2 { font-size: 1.35rem; font-weight: 500; flex: 1; }
.rule summary h2 small { display: block; font: 600 0.8rem var(--sans); color: var(--ink-muted); margin-top: 3px; letter-spacing: 0; }
.rule-chev { width: 20px; height: 20px; color: var(--ink-dim); transition: transform 0.25s; flex: none; }
.rule[open] .rule-chev { transform: rotate(180deg); color: var(--gold); }
.rule-body { padding: 4px 22px 26px 82px; color: var(--ink-muted); }
.rule-body p + p { margin-top: 10px; }
.rule-body strong { color: var(--ink); }
.rule-body h3 { margin: 22px 0 10px; font-size: 1.1rem; font-weight: 600; color: var(--gold); }
.rule-body ul { padding-left: 18px; display: grid; gap: 6px; }
.rule-body li::marker { color: var(--copper); }
.pts {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pts span { padding: 8px 12px; border-radius: 10px; background: rgba(244, 235, 223, 0.05); border: 1px solid var(--line); color: var(--ink); font-size: 0.9rem; }
.flag {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 0 12px 12px 0;
    border-left: 3px solid var(--flag, var(--copper));
    background: color-mix(in srgb, var(--flag, var(--copper)) 10%, transparent);
    color: var(--ink);
    font-size: 0.93rem;
}
.flag b { color: var(--flag, var(--copper)); }
.path-to-cup {
    margin-top: 22px;
    text-align: center;
    padding: 24px;
    border-radius: var(--radius);
    border: 1px dashed var(--line-strong);
    background: rgba(14, 11, 9, 0.35);
}
.path-to-cup .eq { font: 500 1.8rem var(--serif); color: var(--fairway); margin-top: 6px; }
.path-to-cup .eq-note { font: 600 0.8rem var(--sans); color: var(--ink-muted); margin-top: 4px; letter-spacing: 0.02em; }
.path-to-cup .win { font: 500 1.4rem var(--serif); color: var(--gold); margin-top: 8px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .hero { align-items: flex-end; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-card { max-width: 560px; }
    .destination { grid-template-columns: 1fr; }
    .course { grid-template-columns: 1fr; }
    .course:nth-child(even) .course-gallery { order: 0; }
    .course-gallery { position: relative; top: 0; }
    .cup { grid-template-columns: 1fr; }
    .teams { grid-template-columns: 1fr; }
    .edition { grid-template-columns: 80px 1fr; }
    .edition-result { grid-column: 2; text-align: left; }
}

@media (max-width: 640px) {
    :root { --header-h: 68px; }
    .brand-word { font-size: 1.12rem; }
    .brand-mark { width: 34px; height: 34px; }
    .hero { min-height: max(640px, 100svh); padding-bottom: 36px; }
    .hero-title { font-size: clamp(2.8rem, 13vw, 3.6rem); }
    .hero-ctas .btn { flex: 1 1 auto; }
    .hero-card { padding: 18px; }
    .scroll-cue { display: none; }
    .fact-grid { grid-template-columns: 1fr; }
    .cost-card { grid-template-columns: 1fr; }
    .days { grid-template-columns: 1fr; }
    .course-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-stat:nth-child(3) { padding-left: 0; border-left: none; }
    .course-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
    .form-row { grid-template-columns: 1fr; }
    .scoreboard-container { padding: 8px 14px 24px; }
    .scoreboard-hero h2 { left: 18px; }
    .rule-body { padding-left: 22px; }
    .lightbox-nav { top: auto; bottom: 16px; transform: none; }
    .lightbox-prev { left: calc(50% - 64px); }
    .lightbox-next { right: calc(50% - 64px); }
    .edition { grid-template-columns: 1fr; gap: 6px; }
    .edition-result { grid-column: 1; }
    .cup-live .side b { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .js .reveal { opacity: 1; transform: none; }
    .hero-slide.is-active img { animation: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Hero — defending champs badge
   -------------------------------------------------------------------------- */
.hero-champs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--ink);
    background: rgba(14, 11, 9, 0.5);
    border: 1px solid rgba(110, 168, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s, transform 0.25s var(--ease-out);
}
.hero-champs:hover { transform: translateY(-2px); border-color: var(--gold); }
.hero-champs svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.hero-champs b { color: var(--blue-team); font-weight: 700; }
.hero-champs.red { border-color: rgba(255, 123, 114, 0.4); }
.hero-champs.red b { color: var(--red-team); }

/* --------------------------------------------------------------------------
   Course option tabs (a club with two courses, e.g. Talking Stick)
   -------------------------------------------------------------------------- */
.course-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(244, 235, 223, 0.05);
    border: 1px solid var(--line);
}
.course-tab {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    background: none;
    color: var(--ink-muted);
    font: 700 0.86rem var(--sans);
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}
.course-tab:hover { color: var(--ink); }
.course-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.course-options-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.86rem;
    color: var(--ink-muted);
    margin: -4px 0 20px;
}
.course-options-note svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 3px; }

/* --------------------------------------------------------------------------
   The Cup — champions reel
   -------------------------------------------------------------------------- */
.reel {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(80% 120% at 0% 0%, rgba(110, 168, 255, 0.16), transparent 55%),
        radial-gradient(80% 120% at 100% 0%, rgba(255, 123, 114, 0.12), transparent 55%),
        linear-gradient(180deg, #1c1713, #13100d);
    border: 1px solid var(--line-strong);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.reel[data-winner="blue"] { border-color: rgba(110, 168, 255, 0.32); }
.reel[data-winner="red"] { border-color: rgba(255, 123, 114, 0.32); }

.reel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.reel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 800 0.74rem var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}
.reel-kicker svg { width: 16px; height: 16px; }
.reel-where { margin-top: 6px; color: var(--ink-muted); font-size: 0.95rem; }
.reel-years { display: flex; gap: 6px; flex-wrap: wrap; }
.reel-year {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: none;
    color: var(--ink-muted);
    font: 700 0.85rem var(--sans);
    cursor: pointer;
}
.reel-year[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }

.reel-board {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 12px;
    padding: 26px 0 22px;
}
.reel-vs { align-self: center; }
.reel-side { position: relative; text-align: center; transition: opacity 0.8s ease, transform 0.8s var(--ease-out); }
.reel-team { font: 800 0.8rem var(--sans); letter-spacing: 0.26em; text-transform: uppercase; }
.reel-side.blue .reel-team { color: var(--blue-team); }
.reel-side.red .reel-team { color: var(--red-team); }
.reel-score {
    display: block;
    margin: 8px 0 6px;
    font: 500 clamp(4.2rem, 11vw, 8.2rem)/0.9 var(--serif);
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--ink);
    transition: color 0.6s ease, text-shadow 0.6s ease, opacity 0.8s ease;
}
.reel-cap { display: block; color: var(--ink-muted); font-size: 0.9rem; }
.reel-vs { font: italic 500 1.5rem var(--serif); color: var(--ink-dim); }
.reel-stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 7px 12px;
    border: 2px solid var(--gold);
    border-radius: 8px;
    background: rgba(14, 11, 9, 0.6);
    color: var(--gold);
    font: 900 0.72rem var(--sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0;
    transform: rotate(-7deg) scale(1.9);
}
.reel-stamp svg { width: 15px; height: 15px; }

.reel.is-done .reel-stamp { animation: reel-stamp 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.reel.is-done .reel-side:not(.is-winner) { transform: scale(0.96); }
.reel.is-done .reel-side:not(.is-winner) .reel-score { opacity: 0.5; }
.reel.is-done .reel-side.blue.is-winner .reel-score { color: var(--blue-team); text-shadow: 0 0 60px rgba(110, 168, 255, 0.45); }
.reel.is-done .reel-side.red.is-winner .reel-score { color: var(--red-team); text-shadow: 0 0 60px rgba(255, 123, 114, 0.45); }
@keyframes reel-stamp {
    60% { opacity: 1; transform: rotate(-7deg) scale(0.92); }
    100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* Gold burst behind the winning number */
.reel-sparks { position: absolute; top: 46%; left: 25%; width: 0; height: 0; pointer-events: none; }
.reel[data-winner="red"] .reel-sparks { left: 75%; }
.reel-sparks i {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    transform: rotate(var(--a)) translateX(0);
}
.reel-sparks i:nth-child(3n) { background: #fff3d6; width: 4px; height: 4px; }
.reel-sparks i:nth-child(4n) { background: var(--copper); }
.reel.is-done .reel-sparks i { animation: reel-spark 1s var(--ease-out) forwards; animation-delay: calc(120ms + var(--t)); }
@keyframes reel-spark {
    0% { opacity: 0; transform: rotate(var(--a)) translateX(10px) scale(0.6); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--d) * 1.6)) scale(1); }
}

/* Tug-of-war track: 20 one-point segments */
.reel-track {
    position: relative;
    height: 18px;
    margin: 6px 0 40px;
    border-radius: 999px;
    background: rgba(244, 235, 223, 0.07);
}
.reel-track::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), #16110e calc(5% - 2px) 5%);
    pointer-events: none;
}
.reel-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    transition: width 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reel-fill.blue { left: 0; border-radius: 999px 0 0 999px; background: linear-gradient(90deg, #3b67c4, var(--blue-team)); }
.reel-fill.red { right: 0; border-radius: 0 999px 999px 0; background: linear-gradient(270deg, #c4453c, var(--red-team)); }
.reel.is-played .reel-fill { width: var(--w); }
.reel-mark {
    position: absolute;
    top: -9px;
    bottom: -9px;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: var(--gold);
    z-index: 1;
}
.reel-mark span {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font: 800 0.66rem var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.reel-sessions { display: grid; gap: 10px; margin: -10px 0 30px; }
.reel-session {
    display: grid;
    grid-template-columns: minmax(120px, 1.2fr) 34px minmax(0, 2fr) 34px;
    gap: 12px;
    align-items: center;
    font-size: 0.9rem;
}
.rs-label { color: var(--ink-muted); }
.rs-num { font: 500 1.15rem var(--serif); text-align: center; font-variant-numeric: tabular-nums; }
.rs-num.blue { color: var(--blue-team); }
.rs-num.red { color: var(--red-team); }
.rs-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(244, 235, 223, 0.06); }
.rs-bar i { display: block; width: 0; transition: width 1.4s var(--ease-out) 0.3s; }
.rs-bar i.blue { background: var(--blue-team); }
.rs-bar i.red { background: var(--red-team); margin-left: auto; }
.reel.is-played .rs-bar i { width: var(--w); }

.reel-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s ease 0.2s, transform 0.7s var(--ease-out) 0.2s;
}
.reel.is-done .reel-foot { opacity: 1; transform: none; }
.reel-note { color: var(--ink); font-size: 1rem; max-width: 60ch; }
.reel-squad-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.reel-squad-btn svg { width: 16px; height: 16px; }
.reel-squad { justify-content: flex-end; width: 100%; }
.reel-squad:not([hidden]) .chip { animation: chip-in 0.5s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes chip-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   The Cup — hardware card
   -------------------------------------------------------------------------- */
.cup-hardware { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; }
.hardware-photo {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border: none;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--surface-2);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
}
.hardware-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.hardware-photo:hover img { transform: scale(1.05); }

@media (max-width: 640px) {
    .reel-board { grid-template-columns: 1fr 1fr; }
    .reel-vs { display: none; }
    .reel-score { font-size: clamp(3.8rem, 18vw, 5rem); }
    .reel-stamp { font-size: 0.62rem; letter-spacing: 0.16em; padding: 6px 9px; }
    .reel-session { grid-template-columns: 1fr 28px 28px; }
    .reel-session .rs-bar { grid-column: 1 / -1; grid-row: 2; }
    .reel-squad-wrap { align-items: flex-start; }
    .reel-squad { justify-content: flex-start; }
    .cup-hardware { grid-template-columns: 1fr; }
    .hardware-photo { aspect-ratio: 3 / 4; max-width: 260px; }
    .hardware-photo img { object-position: 50% 10%; }
}

@media (prefers-reduced-motion: reduce) {
    .reel-stamp { opacity: 1; transform: rotate(-7deg); }
    .reel-foot { opacity: 1; transform: none; }
    .reel-sparks { display: none; }
}

/* --------------------------------------------------------------------------
   Head count (The Crew)
   -------------------------------------------------------------------------- */
.headcount {
    margin-bottom: 40px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(90% 140% at 0% 0%, rgba(147, 192, 139, 0.12), transparent 55%),
        var(--surface);
    border: 1px solid var(--line-strong);
}
.hc-stats {
    display: grid;
    /* Four stats, or five once there's a waitlist, in one row */
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}
.hc-stat {
    padding: 16px 14px;
    border-radius: var(--radius);
    background: rgba(14, 11, 9, 0.4);
    border: 1px solid var(--line);
}
.hc-stat b {
    display: block;
    font: 500 clamp(2.2rem, 4.5vw, 3rem)/1 var(--serif);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
}
.hc-stat span {
    display: block;
    margin-top: 6px;
    font: 800 0.66rem var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.hc-stat.in b { color: var(--fairway); }
.hc-stat.maybe b { color: var(--gold); }
.hc-stat.out b { color: var(--ink-dim); }
.hc-stat.sunday b { color: var(--copper); }
.hc-stat.waitlist b { color: var(--gold); }
.hc-progress { margin-top: 18px; display: grid; gap: 8px; }
.hc-bar { height: 10px; border-radius: 999px; background: rgba(244, 235, 223, 0.08); overflow: hidden; }
.hc-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #5f8f58, var(--fairway));
    transition: width 1.2s var(--ease-out);
}
.hc-progress span { font-size: 0.85rem; color: var(--ink-muted); }
/* The countdown reads as the headline of the card: "8 of 20 spots left" */
#hc-progress-label { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.hc-progress.is-full .hc-bar i { background: linear-gradient(90deg, #b07a3a, var(--copper)); }
.hc-progress.is-full #hc-progress-label { color: var(--gold); }

/* The waitlist: numbered chips in the order they move up */
.waitlist-note { margin: 0 0 12px; font-size: 0.9rem; color: var(--ink-muted); }
.waitlist-chips { list-style: none; margin: 0; padding: 0; }
.chip.wait { border-color: rgba(232, 184, 107, 0.35); }
.chip-num {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(232, 184, 107, 0.16);
    color: var(--gold);
    font: 800 0.68rem var(--sans);
    font-variant-numeric: tabular-nums;
}
.hc-foot {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--ink-dim);
}
.chip.out { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(244, 235, 223, 0.35); }

/* Hero card head-count row */
.hero-rsvp {
    margin-left: auto;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(226, 125, 79, 0.5);
    background: rgba(226, 125, 79, 0.14);
    color: var(--ink);
    font: 700 0.78rem var(--sans);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.hero-rsvp:hover { background: var(--copper); border-color: var(--copper); color: #1a0f08; }

/* --------------------------------------------------------------------------
   RSVP modal
   -------------------------------------------------------------------------- */
.modal .modal-content.rsvp-sheet { max-width: 580px; }
.registration-form .req {
    margin-left: 6px;
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: var(--ink-dim);
}
.field-error {
    margin-top: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--red-team);
}
.field-input[aria-invalid="true"] { border-color: var(--red-team); box-shadow: 0 0 0 3px rgba(255, 123, 114, 0.18); }
textarea.field-input { resize: vertical; min-height: 64px; line-height: 1.45; }

.rsvp-choices {
    border: none;
    padding: 0;
    margin: 4px 0 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.rsvp-choices legend {
    grid-column: 1 / -1;
    margin-bottom: 10px;
    padding: 0;
    color: var(--ink-muted);
    font-weight: 600;
    font-size: 0.85rem;
}
.rsvp-choices .field-error { grid-column: 1 / -1; margin-top: 0; }
.rsvp-choice {
    --c: var(--fairway);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 104px;
    padding: 14px;
    border-radius: 16px;
    border: 1.5px solid var(--line-strong);
    background: rgba(14, 11, 9, 0.4);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s var(--ease-out);
}
.rsvp-choice.maybe { --c: var(--gold); }
.rsvp-choice.out { --c: var(--red-team); }
.rsvp-choice:hover { border-color: var(--c); }
.rsvp-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.rsvp-choice .rc-mark {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border: 1.5px solid var(--line-strong);
    color: transparent;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.rsvp-choice .rc-mark svg { width: 16px; height: 16px; }
.rsvp-choice b { font: 600 1.05rem var(--sans); color: var(--ink); }
.rsvp-choice small { font-size: 0.8rem; color: var(--ink-dim); }
.rsvp-choice input:checked ~ .rc-mark { background: var(--c); border-color: var(--c); color: #140e0a; }
.rsvp-choice:has(input:checked) {
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, rgba(14, 11, 9, 0.4));
}
.rsvp-choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }

.rsvp-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(14, 11, 9, 0.3);
    cursor: pointer;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.4;
}
.rsvp-check input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--copper);
    cursor: pointer;
}
/* Who's RSVPing, and the account step before it */
.rsvp-who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: -8px 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(14, 11, 9, 0.3);
    color: var(--ink-muted);
    font-size: 0.92rem;
}
.rsvp-who b { color: var(--ink); font-weight: 600; }
.link-btn {
    background: none;
    border: 0;
    padding: 6px 2px;
    margin-left: auto;
    color: var(--gold);
    font: inherit;
    font-size: 0.88rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.rsvp-sheet .eyebrow { padding-right: 52px; }   /* clear the close button on narrow phones */
.rsvp-sheet .modal-lede { overflow-wrap: anywhere; } /* long login emails wrap instead of overflowing */
.rsvp-check.hcp-plus { margin: 10px 0 0; padding: 10px 12px; font-size: 0.9rem; }
/* Same checkbox treatment as the RSVP form's Sunday box (the form's generic label/input
   rules would otherwise stack it and stretch the box to 48px) */
#registration-form .rsvp-check { display: flex; align-items: center; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: normal; }
#registration-form .rsvp-check input {
    min-height: 0;
    height: 22px;
    width: 22px;
    padding: 0;
    border: 0;
    margin: 0;
    color-scheme: dark;
}
#profile-error { margin: 0 0 14px; }
.rsvp-auth { display: grid; gap: 10px; }
.rsvp-auth .btn { width: 100%; justify-content: center; text-align: center; }
.rsvp-auth .link-btn { margin: 4px auto 0; }
.rsvp-auth .or-divider { margin: 14px 0 4px; }

.rsvp-done { text-align: center; padding: 10px 0 4px; }
.rsvp-done h2 { margin: 18px 0 10px; outline: none; }
.rsvp-done .modal-lede { margin: 0 auto 14px; max-width: 42ch; }
.rsvp-done-mark {
    width: 72px;
    height: 72px;
    margin: 6px auto 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(147, 192, 139, 0.14);
    border: 1.5px solid var(--fairway);
    color: var(--fairway);
    animation: rsvp-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.rsvp-done-mark.maybe { background: rgba(232, 184, 107, 0.14); border-color: var(--gold); color: var(--gold); }
.rsvp-done-mark.out { background: rgba(255, 123, 114, 0.12); border-color: var(--red-team); color: var(--red-team); }
.rsvp-done-mark svg { width: 32px; height: 32px; }
@keyframes rsvp-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.rsvp-done-count {
    display: inline-block;
    margin-bottom: 22px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(244, 235, 223, 0.05);
    border: 1px solid var(--line);
    font-size: 0.88rem;
    color: var(--ink);
}
.rsvp-done-actions { display: grid; gap: 10px; }

@media (max-width: 640px) {
    .hc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Five stats (a waitlist): the odd one out takes the full row */
    .hc-stat:nth-child(odd):last-child { grid-column: 1 / -1; }

    /* Bottom-sheet modals on phones */
    .modal { align-items: flex-end; padding: 0; }
    .modal .modal-content.glass-panel {
        max-width: 100% !important;
        width: 100%;
        max-height: 92svh;
        border-radius: 24px 24px 0 0;
        padding: 26px 18px calc(22px + env(safe-area-inset-bottom));
    }
    .modal .leaderboard-modal-content.glass-panel { padding: 0 0 env(safe-area-inset-bottom) !important; }
    .modal h2 { font-size: 1.7rem; padding-right: 44px; }
    .modal-x { top: 12px; right: 12px; }

    .rsvp-choices { grid-template-columns: 1fr; }
    .rsvp-choice {
        min-height: 60px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
    }
    .rsvp-choice .rc-mark { margin: 0; flex: none; }
    .rsvp-choice small { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .rsvp-done-mark { animation: none; }
}

/* RSVP form: override the legacy .registration-form label/input rules in style.css */
.modal .modal-content.rsvp-sheet { padding: 40px; }
#rsvp-form .form-group { margin-bottom: 18px; }
#rsvp-form .form-group > label { display: block; margin-bottom: 8px; }
#rsvp-form .field-input { margin-bottom: 0; }
#rsvp-form .rsvp-choice { display: flex; margin-bottom: 0; font-weight: 400; color: var(--ink); }
#rsvp-form .rsvp-check { display: flex; margin-bottom: 16px; font-weight: 500; color: var(--ink); }

@media (max-width: 640px) {
    #registration-modal.modal { align-items: flex-end !important; }
    .modal .modal-content.rsvp-sheet { padding: 26px 18px calc(22px + env(safe-area-inset-bottom)); }
    #rsvp-form .rsvp-choice { flex-direction: row; align-items: center; }
}


/* --------------------------------------------------------------------------
   Review fixes (desktop, mobile and accessibility passes)
   -------------------------------------------------------------------------- */
.nowrap { white-space: nowrap; }

/* a11y-5: nav text over the hero photo */
.nav:not(.is-scrolled):not(.is-solid) .nav-links a:not(.is-active),
.nav:not(.is-scrolled):not(.is-solid) .nav-menu-btn {
    color: var(--ink);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* visual-desktop-1: single-column trip facts on small laptops */
@media (max-width: 1100px) {
    .destination { grid-template-columns: 1fr; }
    .hero-card-label { letter-spacing: 0.12em; }
}
@media (min-width: 641px) and (max-width: 1100px) {
    .fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sticky row labels inside each nine-hole table */
.scorecard th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: linear-gradient(rgba(42, 32, 25, 0.07), rgba(42, 32, 25, 0.07)), var(--paper);
}
.scorecard thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: linear-gradient(rgba(42, 32, 25, 0.1), rgba(42, 32, 25, 0.1)), var(--paper);
}

/* security-perf-15: course with no photos */
.course.no-media { grid-template-columns: 1fr; }

/* visual-desktop-5: winning squad opens full width */
.reel-note { text-wrap: pretty; }
.reel-squad-wrap:has(.reel-squad:not([hidden])) { flex-basis: 100%; }

/* visual-desktop-7: even crew rows */
.crew-grid { grid-auto-rows: 1fr; }

/* visual-mobile-1: form buttons wrap instead of overflowing */
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.form-actions .btn[type="submit"] { flex: 1 1 auto; }

/* visual-mobile-15 / visual-desktop-15: footer links are real tap targets and share a baseline */
.footer-links a,
.footer-links button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    line-height: 1.2;
}

@media (max-width: 640px) {
    .hero-facts .muted { white-space: normal; }
    .form-row { gap: 0; }
    .form-actions .btn { flex: 1 1 100%; }
    .btn-sm { min-height: 44px; }
    .reel-squad-wrap:has(.reel-squad:not([hidden])) { align-items: stretch; }
}


/* --------------------------------------------------------------------------
   Final verification fixes
   -------------------------------------------------------------------------- */
/* Scorecards: both nines share one column grid so holes line up */
.scorecard table { table-layout: fixed; }
.scorecard col.sc-label { width: 3.6rem; }
.scorecard col.sc-sum { width: 3rem; }
.scorecard-foot .sc-total { font-weight: 800; color: var(--paper-ink); margin-right: auto; }
.scorecard abbr { text-decoration: none; }

/* RSVP checkbox: dark-theme box, not a stretched white square */
#rsvp-form .rsvp-check { align-items: center; }
#rsvp-form .rsvp-check input {
    min-height: 0;
    height: 22px;
    padding: 0;
    border: 0;
    margin: 0;
    color-scheme: dark;
}

/* RSVP sheet fits shorter laptop screens */
@media (max-height: 820px) and (min-width: 641px) {
    .modal .modal-content.rsvp-sheet { padding: 26px 34px; }
    .rsvp-sheet .modal-lede { margin-bottom: 14px; }
    #rsvp-form .form-group { margin-bottom: 14px; }
    #rsvp-form .rsvp-choice { min-height: 88px; }
}

/* Squad toggle always sits on its own row, so opening it doesn't move the button */
.reel-squad-wrap { flex-basis: 100%; }

/* The drawer's main pair (Standings/RSVP, or the trip-day pair) is only needed when the header hides it */
@media (min-width: 721px) {
    .drawer-actions { display: none; }
}

/* A little more room for long names in the crew grid */
.player { gap: 12px; padding: 14px; }

/* Course text column is the wider side on small laptops */
@media (min-width: 961px) and (max-width: 1100px) {
    .course:not(.no-media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .course:nth-child(even):not(.no-media) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .scorecard { padding: 12px 8px 10px; }
    .scorecard table { min-width: 0; font-size: 0.76rem; }
    .scorecard th, .scorecard td { padding: 5px 0; }
    .scorecard th { font-size: 0.68rem; letter-spacing: 0; }
    .scorecard th:first-child, .scorecard td:first-child { padding: 5px 2px 5px 4px; letter-spacing: 0.02em; font-size: 0.64rem; }
    .scorecard col.sc-label { width: 2.6rem; }
    .scorecard col.sc-sum { width: 2.4rem; }
    .crew-grid { grid-auto-rows: auto; }
    .countdown-cell span { font-size: 0.66rem; }
    .reel-stamp { font-size: 0.7rem; }
}

/* --------------------------------------------------------------------------
   Hall of Fame photo wall (albums + mosaic)
   -------------------------------------------------------------------------- */
.edition-photos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(232, 184, 107, 0.45);
    background: rgba(232, 184, 107, 0.08);
    color: var(--gold);
    font: 700 0.82rem var(--sans);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.edition-photos:hover { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.edition-photos svg { width: 16px; height: 16px; }

.photo-wall { margin-top: 8px; }
.photo-wall-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.photo-wall-title {
    font: 700 0.78rem var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.album-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.album-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 8px 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: rgba(244, 235, 223, 0.04);
    color: var(--ink-muted);
    font: 700 0.88rem var(--sans);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.album-chip span {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(244, 235, 223, 0.08);
    font-size: 0.78rem;
    color: var(--ink);
}
.album-chip:hover { color: var(--ink); border-color: var(--gold); }
.album-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.album-chip[aria-pressed="true"] span { background: rgba(14, 11, 9, 0.12); color: var(--bg); }

.mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 15vw, 220px);
    gap: 10px;
    transition: opacity 0.18s ease;
}
.mosaic.is-swapping { opacity: 0; }
.mosaic-tile {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    cursor: zoom-in;
    animation: tile-in 0.5s var(--ease-out) both;
}
.mosaic-tile:nth-child(2) { animation-delay: 40ms; }
.mosaic-tile:nth-child(3) { animation-delay: 80ms; }
.mosaic-tile:nth-child(4) { animation-delay: 120ms; }
.mosaic-tile:nth-child(5) { animation-delay: 160ms; }
@keyframes tile-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.mosaic-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out), filter 0.4s;
    filter: saturate(0.95);
}
.mosaic-tile:hover img { transform: scale(1.04); filter: none; }
.mosaic-tile:focus-visible { outline-offset: -3px; }

/* First photo is the feature: 2 columns x 2 rows */
.mosaic-tile:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic.count-1 .mosaic-tile:first-child { grid-column: 1 / -1; }
.mosaic.count-2 .mosaic-tile:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.mosaic.count-3 .mosaic-tile:nth-child(n+2) { grid-column: span 2; }
.mosaic.count-4 .mosaic-tile:nth-child(4) { grid-column: span 2; }

.mosaic-caption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(14, 11, 9, 0.66);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink);
    font: 700 0.78rem var(--sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.mosaic-more {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    background: rgba(14, 11, 9, 0.62);
    color: var(--ink);
    font: 500 2.4rem/1 var(--serif);
    transition: background-color 0.3s;
}
.mosaic-more small {
    display: block;
    margin-top: 6px;
    font: 800 0.7rem var(--sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}
.mosaic-tile:hover .mosaic-more { background: rgba(14, 11, 9, 0.45); }

.photo-wall-foot { margin-top: 16px; display: flex; justify-content: center; }
.photo-wall-foot .btn svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
    .mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 132px;
        gap: 8px;
    }
    .mosaic-tile:first-child { grid-row: span 2; }
    .album-chip { font-size: 0.82rem; }
    .photo-wall-head { gap: 10px; }
    .photo-wall-foot .btn { width: 100%; }
    .mosaic-caption { left: 10px; bottom: 10px; font-size: 0.7rem; padding: 6px 12px; }
}

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


/* --------------------------------------------------------------------------
   The viewer: hero "You" row, You tags, account menus
   -------------------------------------------------------------------------- */
/* Hero card "You" row, in the RSVP sheet's in / probably / out colours */
.hero-you { --c: var(--fairway); }
.hero-you.maybe { --c: var(--gold); }
.hero-you.out { --c: var(--red-team); }
.hero-you .you-mark {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--c);
    color: #140e0a;
}
.hero-facts .hero-you .you-mark svg { width: 12px; height: 12px; color: inherit; stroke-width: 3; }
.hero-you.none .you-mark { background: none; border: 1.5px dashed var(--ink-dim); }
.hero-you-text { flex: 1; min-width: 0; line-height: 1.35; }
.hero-you-text b { font-weight: 600; }
.hero-you-note { color: var(--ink-muted); font-size: 0.85rem; }
.hero-rsvp.is-primary { background: var(--copper); border-color: var(--copper); color: #1a0f08; }
.hero-rsvp.is-primary:hover { background: #ec8b5d; border-color: #ec8b5d; }
/* The hero's small buttons keep their look but get a 44px tap area */
.hero-rsvp { position: relative; flex: none; }
.hero-rsvp::after { content: ''; position: absolute; inset: -6px -4px; }
/* Phones: "Change my RSVP" + the filled itinerary button are no wider than "RSVP now" + "See the
   itinerary", so wherever the signed-out pair shares a row this one does too, and nothing below
   moves when the fills swap after the account check */
@media (max-width: 640px) {
    .hero-ctas.is-answered .btn { padding: 0 18px; }
    .hero-ctas.is-answered .btn svg { display: none; }
}

/* "You" on your own card or chip in the crew lists */
.you-tag {
    margin-left: 6px;
    font: 800 0.6rem var(--sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--copper);
    border: 1px solid rgba(226, 125, 79, 0.55);
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: 2px;
}
.player.is-you { border-color: rgba(226, 125, 79, 0.45); }
.chip.is-you { border-color: rgba(226, 125, 79, 0.5); }
.chip .you-tag { margin-left: 0; padding: 1px 6px; vertical-align: 0; }
/* Strike through the name only, not the tag */
.chip.out.is-you { text-decoration: none; }
.chip.out.is-you .chip-name { text-decoration: line-through; text-decoration-color: rgba(244, 235, 223, 0.35); }
/* A new sign-up's own spot while he waits on approval (only he sees it) */
.player.is-waiting { border: 1px dashed var(--line-strong); background: transparent; }
.player.is-waiting .player-meta { color: var(--ink-muted); }
.chip.is-waiting { border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--ink-muted); }

/* Drawer: who's signed in, Golf profile, Log out (or Log in) */
.drawer-account {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 22px;
}
.drawer-account-who { flex-basis: 100%; padding-top: 6px; color: var(--ink-muted); font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; }
.drawer-account-who b { color: var(--ink); font-weight: 600; }
.drawer .drawer-account a,
.drawer .drawer-account button.drawer-link {
    width: auto;
    border: none;
    padding: 10px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font: 600 0.95rem var(--sans);
    color: var(--gold);
}
/* Shorter screens: tighten the drawer so the account row at its foot (Golf profile, Log out)
   shows without scrolling. Links stay at least 44px tall. */
@media (max-width: 1300px) and (max-height: 900px) {
    .drawer { padding-top: calc(var(--header-h) + 12px); padding-bottom: 28px; }
    .drawer > a { padding-top: 10px; padding-bottom: 10px; }
}
@media (max-width: 1300px) and (max-height: 820px) {
    .drawer { padding-top: calc(var(--header-h) + 8px); padding-bottom: 16px; gap: 4px; }
    .drawer > a { padding-top: 8px; padding-bottom: 8px; font-size: 1.35rem; }
    .drawer-actions { margin-top: 12px; }
    .drawer-sub { margin-top: 6px; }
    .drawer-account { margin-top: 8px; padding-top: 4px; }
    .drawer-account-who { padding-top: 2px; }
}

/* Clubhouse menu (wide screens have no drawer) */
.nav-menu-account { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.nav-menu-who { padding: 8px 14px 6px; font-size: 0.8rem; line-height: 1.35; color: var(--ink-dim); overflow-wrap: anywhere; }
.nav-menu-who b { display: block; margin-top: 2px; font-size: 0.9rem; font-weight: 600; color: var(--ink); }

/* RSVP sheet: "RSVPing as … · Golf profile · Switch player", with 44px link buttons */
.rsvp-who { align-items: center; padding: 4px 8px 4px 14px; min-height: 52px; }
.rsvp-who-links { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--ink-dim); }
.rsvp-sheet .link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.rsvp-who-links .link-btn { margin-left: 0; }


/* --------------------------------------------------------------------------
   Trip-day mode: before / during / after the trip, by the date in Arizona
   (index.html's inline script, then script.js, set .phase-pre / .phase-trip / .phase-wrap on <html>)
   -------------------------------------------------------------------------- */
/* Until the phase is picked, nothing phase-specific shows, so a trip-day visitor never sees the
   RSVP buttons or a countdown flash up first. (index.html picks it before the supabase-js bundle.) */
.js:not(.phase-set) [data-phase] { visibility: hidden; }

/* Trip days with no Cup round (Thursday's practice round, the optional Sunday): no Keep score. script.js cupDay() */
.keep-score-off [data-keep-score] { display: none !important; }
.keep-score-off .drawer-actions { grid-template-columns: 1fr; }

/* Cup pill: "The Cup · Blue 10½ – 9½ Red ›", a link to Live scores ("Final" after the trip) */
a.cup-pill {
    gap: 10px;
    min-height: 44px;
    padding-right: 12px;
    color: var(--ink);
    transition: border-color 0.2s, transform 0.25s var(--ease-out);
}
a.cup-pill:hover { border-color: var(--gold); transform: translateY(-2px); }
.cup-pill-sep { color: var(--ink-dim); font-weight: 600; }
.cup-pill-chev { width: 16px; height: 16px; flex: none; color: var(--gold); }
.cup-pill .live { white-space: nowrap; }
.cup-pill.is-final .live { color: var(--gold); }
.cup-pill.is-final .live::before { background: var(--gold); animation: none; }
@media (max-width: 380px) {
    a.cup-pill { gap: 6px; padding: 6px 8px 6px 12px; font-size: 0.72rem; letter-spacing: 0.05em; }
    a.cup-pill .team b { font-size: 1.12rem; }
    /* The dot after "The Cup" goes, so two-digit half points still fit on one line */
    a.cup-pill #cup-pill-label + .cup-pill-sep { display: none; }
}

/* Today card (during the trip) and That's a wrap (after it), in the countdown's place */
.today { margin-bottom: 22px; }
.today-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font: 700 0.7rem var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 10px;
}
.today-eyebrow b { display: inline-flex; align-items: center; gap: 8px; color: var(--copper); font-weight: 800; }
.today-eyebrow b::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--copper);
    animation: pulse 1.6s ease-in-out infinite;
}
.today-sep { margin: 0 0.6em; }
.today.is-wrap .today-eyebrow b { color: var(--gold); }
.today.is-wrap .today-eyebrow b::before { background: var(--gold); animation: none; }
.today-title { font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 500; line-height: 1.1; margin-bottom: 14px; }
.today-slots { list-style: none; display: grid; gap: 8px; }
.today-slot { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 56px; }
.today-slot .slot-what { grid-column: 2; grid-row: 1; }
.today-slot .slot-meta { grid-column: 2; grid-row: 2; }
a.today-slot { color: inherit; transition: border-color 0.2s, background-color 0.2s; }
a.today-slot:hover { border-color: var(--gold); background: rgba(232, 184, 107, 0.06); }
a.today-slot .slot-what { text-decoration: underline; text-decoration-color: rgba(232, 184, 107, 0.45); text-underline-offset: 3px; }
.today-slot-go { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; color: var(--gold); }
.today-slot-go svg { width: 18px; height: 18px; }
.today-next { margin-top: 12px; font-size: 0.88rem; line-height: 1.45; color: var(--ink-muted); }
.today-next > span { font-weight: 700; color: var(--ink); }
.today-next a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(232, 184, 107, 0.45); text-underline-offset: 3px; }
.today-next a:hover { color: var(--gold); }
.today-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* The buttons are in the page from the start; the rest fills in once script.js has run */
#hero-today-body:empty ~ .today-actions { margin-top: 0; }
.today-actions .btn { flex: 1 1 0; min-width: max-content; padding: 0 16px; }
.today-actions .btn svg { width: 16px; height: 16px; }

/* One column (phones, tablets): the Today / wrap card sits right under the hero buttons and has
   the same pair, so the hero's pair steps aside rather than showing twice on one screen */
@media (max-width: 960px) {
    .phase-trip .hero-ctas,
    .phase-wrap .hero-ctas { display: none; }
}
/* Phones: the welcome paragraph steps aside too, so today's plan (or the wrap card and its
   buttons) is on the first screen */
@media (max-width: 640px) {
    .phase-trip .hero-sub,
    .phase-wrap .hero-sub { display: none; }
}

/* Itinerary: today's card is tagged, earlier days fold down and dim */
.day-today {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    font: 800 0.66rem var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--copper);
    color: #1a0f08;
    box-shadow: 0 0 0 4px rgba(226, 125, 79, 0.25);
}
.day.is-today { border-color: rgba(226, 125, 79, 0.65); box-shadow: 0 30px 60px -30px rgba(226, 125, 79, 0.45); }
/* Only TODAY is copper on today's card */
.day.is-today .day-tag { background: rgba(14, 11, 9, 0.6); color: var(--ink); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Earlier days: the photo fades back but the text stays readable (yesterday's course and tee
   times still get looked up); titles step down to the muted ink */
.day.is-past .day-media::after { z-index: 1; background: linear-gradient(180deg, rgba(14, 11, 9, 0.55) 0%, rgba(14, 11, 9, 0.9) 100%); transition: opacity 0.3s; }
.day.is-past .day-media img { filter: grayscale(0.7); }
.day.is-past:hover .day-media::after,
.day.is-past:focus-within .day-media::after { opacity: 0.6; }
.day.is-past .day-title,
.day.is-past .slot-what { color: var(--ink-muted); }
.day.is-past .slot-when { color: var(--ink-dim); }
/* ...and their copper tags go quiet, so TODAY is the one copper tag in the list */
.day.is-past .day-tag { background: rgba(14, 11, 9, 0.6); color: var(--ink-muted); border: 1px solid var(--line-strong); }
/* Phones (one column): past days fold down to a strip, so today is near the top of the list */
@media (max-width: 640px) {
    .day.is-past .day-media { aspect-ratio: auto; height: 92px; }
    .day.is-past .day-media.mystery .q { font-size: 3rem; }
    .day.is-past .day-date b { font-size: 2.2rem; }
    .day.is-past .day-text { display: none; }
    .day.is-past .day-body { gap: 10px; padding-top: 16px; padding-bottom: 18px; }
}
@media (max-width: 380px) {
    .today-slot { padding: 10px 10px 10px 12px; column-gap: 8px; }
    .today-eyebrow { letter-spacing: 0.13em; }
    /* "That's a wrap" over "Scottsdale 2027", rather than a dot dangling at the line end */
    .today-where { flex-basis: 100%; margin-top: 4px; }
    .today-where .today-sep { display: none; }
}

/* Hall of Fame: this year's row links to Live scores during the trip, Final scores after it */
.edition-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    color: var(--gold);
    font: 800 0.72rem var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: rgba(232, 184, 107, 0.45);
    text-underline-offset: 4px;
}
.edition-link:hover { color: var(--ink); }
.edition-link svg { width: 14px; height: 14px; }

/* The Cup section: Live scores under the total; the hardware card runs full width once the
   drafted teams replace the Draft card */
.cup-live-link {
    grid-column: 1 / -1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 8px;
    color: var(--gold);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: underline;
    text-decoration-color: rgba(232, 184, 107, 0.45);
    text-underline-offset: 4px;
}
.cup-live-link:hover { color: var(--ink); }
.cup-hardware.is-wide { grid-column: 1 / -1; }

/* Standings pop-up: official Cup total, Live scores link, roster folded away */
.standings-cup {
    padding: 24px;
    margin-bottom: 14px;
    border-radius: 22px;
    border: 1px solid rgba(232, 184, 107, 0.45);
    background: radial-gradient(120% 120% at 50% 0%, rgba(232, 184, 107, 0.12), transparent 60%), var(--surface-2);
}
.standings-cup h3 { text-align: center; font-size: 1.4rem; font-weight: 500; margin-bottom: 18px; }
.standings-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; text-align: center; }
.standings-score .side span { font: 800 0.85rem var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.standings-score .blue span { color: var(--blue-team); }
.standings-score .red span { color: var(--red-team); }
.standings-score .side b { display: block; margin-top: 6px; font: 500 3rem/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.standings-score .vs { font: italic 500 1.3rem var(--serif); color: var(--ink-dim); }
.standings-note { margin-top: 14px; text-align: center; font-size: 0.85rem; color: var(--ink-muted); }
.standings-teams { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.standings-live {
    display: flex;
    align-items: center;
    min-height: 56px;
    margin-bottom: 22px;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    background: rgba(244, 235, 223, 0.03);
    color: var(--ink);
    transition: border-color 0.2s, background-color 0.2s;
}
.standings-live:hover { border-color: var(--gold); background: rgba(232, 184, 107, 0.06); }
.standings-live b { display: block; color: var(--gold); font-weight: 700; }
.standings-live small { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--ink-dim); }
.standings-roster { border: 1px solid var(--line); border-radius: 14px; background: rgba(244, 235, 223, 0.02); }
.standings-roster summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 18px;
    font-weight: 700;
}
.standings-roster summary::-webkit-details-marker { display: none; }
.standings-roster summary:focus-visible { outline-offset: -3px; border-radius: 13px; }
.standings-roster summary small { display: block; margin-top: 2px; font-size: 0.85rem; font-weight: 500; color: var(--ink-dim); }
.standings-roster summary svg { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--ink-dim); transition: transform 0.25s; }
.standings-roster[open] summary svg { transform: rotate(180deg); color: var(--gold); }
.standings-roster .leaderboard-list { padding: 0 12px 14px; }
@media (max-width: 640px) {
    .standings-cup { padding: 20px 14px; }
    .standings-score .side b { font-size: 2.6rem; }
    .standings-live { padding: 10px 14px; }
    .standings-roster summary { padding: 10px 14px; }
    .standings-roster .leaderboard-list { padding: 0 6px 10px; }
}

/* ?preview=… ribbon, so a preview can't pass for the real thing */
.preview-ribbon {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 5px 5px 5px 14px;
    border-radius: 22px;
    border: 1px dashed var(--gold);
    background: rgba(14, 11, 9, 0.94);
    color: var(--ink);
    font: 600 0.78rem/1.3 var(--sans);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.85);
}
.preview-ribbon b { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.preview-ribbon-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--gold); }
.preview-ribbon a {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--bg);
    font-weight: 800;
}
.preview-ribbon a::after { content: ''; position: absolute; inset: -4px; }

/* --------------------------------------------------------------------------
   A shorter phone homepage (UX review, recommendation 15): the course guides fold
   away, compact trip facts, shorter itinerary pictures, tappable slots, a head count
   that links to the crew, and the full nav from 1100px
   -------------------------------------------------------------------------- */
/* Course guide: designer and tees, signature holes, accolades, scorecard and photo credit, closed
   until tapped (every width; on wide screens the text column then sits level with the photos).
   Opening it adds the detail below the bar, so nothing above it moves. */
.course-guide { margin-top: 22px; }
.course-guide summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 10px 16px 10px 18px;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    background: rgba(244, 235, 223, 0.035);
    transition: border-color 0.2s, background-color 0.2s;
}
.course-guide summary::-webkit-details-marker { display: none; }
.course-guide summary:hover { border-color: var(--gold); background: rgba(232, 184, 107, 0.06); }
.course-guide summary:focus-visible { border-radius: 14px; }
.course-guide[open] summary { border-color: rgba(232, 184, 107, 0.45); }
.course-guide-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.3; }
.course-guide-label b { font: 800 0.68rem var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.course-guide-label > span { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.course-guide summary > svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: var(--gold);
    transition: transform 0.25s var(--ease-out);
}
.course-guide[open] summary > svg { transform: rotate(180deg); }
.course-guide[open] .course-guide-body { animation: guide-in 0.4s var(--ease-out); }
@keyframes guide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.course-guide-body > .course-designer:first-child { margin-top: 20px; }

/* Trip facts: script.js renders them in the phone order (HQ, Fly into, the cost, Home base,
   Forecast, then Dates and Golf); wider screens put the grid back in its usual order */
@media (min-width: 641px) {
    .fact--dates { order: 1; }
    .fact--base { order: 2; }
    .fact--hq { order: 3; }
    .fact--fly { order: 4; }
    .fact--forecast { order: 5; }
    .fact--golf { order: 6; }
    .fact-grid > .cost-card { order: 7; }
}
/* Phones: Dates and Golf are already in the hero card; the rest are compact rows */
@media (max-width: 640px) {
    .fact-grid { gap: 10px; }
    .fact-grid > .fact--dates,
    .fact-grid > .fact--golf { display: none; }
    .fact {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        padding: 14px 16px 15px;
    }
    .fact-icon { grid-row: 1 / span 3; width: 36px; height: 36px; margin: 2px 0 0; border-radius: 10px; }
    .fact-icon svg { width: 18px; height: 18px; }
    .fact-label { margin-bottom: 3px; }
    .fact-value { font-size: 1.2rem; }
    .fact-note { margin-top: 4px; font-size: 0.85rem; line-height: 1.45; }
    .fact-grid > .cost-card { padding: 22px 20px; gap: 10px; }
    .fact-grid .cost-amount { font-size: 2.8rem; }
}

/* Phones: a little less air between sections and between the course cards (80px and 70px on
   the narrowest screens before), which adds up over a 15-screen page */
@media (max-width: 640px) {
    .section { padding: 64px 0; }
    .course-list { gap: 56px; }
    .course-stats { margin-top: 22px; }
    .course-guide { margin-top: 18px; }
    .day-body { padding: 20px 18px 22px; }
}

/* Course stats on phones: one row of four, as on wider screens, rather than a 2 x 2 block */
@media (max-width: 640px) {
    .course-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .course-stat { padding: 12px 6px 13px 0; }
    .course-stat + .course-stat,
    .course-stat:nth-child(3) { padding-left: 10px; border-left: 1px solid var(--line); }
    .course-stat:nth-child(n+3) { border-top: none; }
    .course-stat span { letter-spacing: 0.12em; }
    .course-stat b { font-size: 1.3rem; }
    .course-stat small { font-size: 0.7rem; line-height: 1.3; }
}
@media (max-width: 380px) {
    .course-stat + .course-stat,
    .course-stat:nth-child(3) { padding-left: 7px; }
    .course-stat span { font-size: 0.58rem; letter-spacing: 0.08em; }
    .course-stat b { font-size: 1.12rem; }
}

/* The narrowest phones: the scorecard's three-digit yardages ran into each other (the yards row
   is the first of two body rows) */
@media (max-width: 360px) {
    .scorecard tbody tr:first-child:not(:last-child) td { font-size: 0.6rem; letter-spacing: -0.02em; }
}

/* Itinerary on phones: photos about 16:9, and the placeholder pictures (the "?" and the dawn
   skyline) become short bands that still carry the date and tag. During the trip, earlier days
   still fold down to a strip (Trip-day mode above). */
@media (max-width: 640px) {
    .day-media { aspect-ratio: 16 / 9; }
    .day-media.mystery,
    .day-media.dawn { aspect-ratio: auto; height: 104px; }
    .day-media.mystery .q { font-size: 3.2rem; margin: 0 0 6px 30%; align-self: end; } /* clear of the date and the tag */
    .day-media.dawn svg { height: 62%; }
    .day-media.mystery .day-date b,
    .day-media.dawn .day-date b { font-size: 2.4rem; }
}

/* Itinerary slots with a course: the whole row is the link to the course card (the course
   name's link stretches over it), with a chevron and "Course guide" in the meta line */
.slot.has-link {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 10px;
    min-height: 56px;
    padding-right: 10px;
    transition: border-color 0.2s, background-color 0.2s;
}
/* A narrower round label and chevron leave the course name and "· Course guide" room for one line */
.slot.has-link .slot-when { min-width: 26px; }
.slot.has-link .slot-what { grid-column: 2; grid-row: 1; }
.slot.has-link .slot-meta { grid-column: 2; grid-row: 2; }
.slot-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(232, 184, 107, 0.45);
    text-underline-offset: 3px;
}
.slot-link::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.slot.has-link:hover { border-color: var(--gold); background: rgba(232, 184, 107, 0.06); }
.slot-link:focus-visible { outline: none; }
.slot-link:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 2px; }
.slot-go { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; color: var(--gold); }
.slot-go svg { width: 16px; height: 16px; }
.day.is-past .slot-go { color: var(--ink-dim); }
/* The four narrow day columns on wide screens (wherever .days isn't two columns or one): the
   underline, chevron and hover already say "link", so the meta line drops "· Course guide" and
   the chevron sits closer, and names and tee times wrap no more than they did before the links */
@media not all and (max-width: 1080px) {
    .slot-guide { display: none; }
    .slot.has-link { column-gap: 8px; padding-right: 8px; }
}

/* Hero card: the head count links down to the crew list ("1 in · 1 probably ›"). The chevron is
   inline, so if the count ever wraps it follows the last word rather than floating at the edge. */
.hero-count-link {
    position: relative;
    display: block;
    min-width: 0;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(232, 184, 107, 0.45);
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.hero-count-link:hover { color: var(--gold); }
/* A 44px tap area without making the row taller */
.hero-count-link::after { content: ''; position: absolute; inset: -10px -6px; }
.hero-facts .hero-count-link svg { display: inline-block; width: 16px; height: 16px; margin-left: 3px; vertical-align: -3px; }
/* The narrowest phones: a two-digit count ("18 in · 12 probably ›") stays on one line beside RSVP */
@media (max-width: 360px) {
    #hero-headcount { gap: 10px; }
    #hero-headcount .hero-count-link { font-size: 0.9rem; }
    .hero-count-link::after { inset: -11px -6px; } /* the smaller text still gets a 44px tap area */
    .hero-facts .hero-count-link svg { width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; }
    #hero-headcount .hero-rsvp { padding: 0 12px; }
}

/* Desktop nav: the whole row from 1100px, with short labels (the drawer keeps the long ones).
   Between 1100px and 1240px the spacing eases in with the width: closest at 1100px, the usual
   spacing by 1240px, with no jump. The free room after the logo only grows across the range, so
   the widest pair the header carries (Live scores / Keep score on trip days) fits wherever it
   fits at 1100px. Only the top-level links: the Clubhouse dropdown keeps its own padding.
   (From 1099.98px, where the hamburger rule above stops, so no fractional width falls between.) */
@media (min-width: 1099.98px) and (max-width: 1240px) {
    .nav:not(.nav--compact) .nav-inner { gap: clamp(12px, calc(12px + (100vw - 1100px) * 0.0572), 20px); }
    .nav:not(.nav--compact) .nav-links { gap: clamp(0px, calc((100vw - 1100px) * 0.0286), 4px); }
    .nav:not(.nav--compact) .nav-links > li > a,
    .nav:not(.nav--compact) .nav-menu-btn { padding: 0 clamp(7px, calc(7px + (100vw - 1100px) * 0.0215), 10px); }
    .nav:not(.nav--compact) .nav-actions { gap: clamp(8px, calc(8px + (100vw - 1100px) * 0.0143), 10px); }
    .nav:not(.nav--compact) .nav-actions .btn-sm { padding: 0 clamp(15px, calc(15px + (100vw - 1100px) * 0.0215), 18px); }
}

/* --------------------------------------------------------------------------
   The group-text questions (UX review, recommendation 7): trip updates and Still to come at the
   top of The Trip, the flight and payment lines on the Fly into and cost cards, and the RSVP-by
   date on the head count and in the RSVP sheet. All of it comes from trip-config.js.
   -------------------------------------------------------------------------- */
/* Trip updates (newest first) and Still to come: side by side on wide screens, stacked below that */
.news {
    display: grid;
    margin-bottom: clamp(44px, 7vw, 84px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(232, 184, 107, 0.28);
    background: linear-gradient(135deg, rgba(232, 184, 107, 0.11), rgba(232, 184, 107, 0.02) 70%), var(--bg);
    overflow: hidden;
}
.news-updates,
.news-todo { min-width: 0; padding: clamp(20px, 2.6vw, 30px); }
.news-todo { background: rgba(14, 11, 9, 0.28); }
.news-updates + .news-todo { border-top: 1px solid rgba(232, 184, 107, 0.18); }
@media (min-width: 961px) {
    .news:has(> .news-updates + .news-todo:not([hidden])) { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
    /* (Behind the same :has(), so a browser without it keeps the stacked card's top border) */
    .news:has(> .news-updates + .news-todo:not([hidden])) > .news-todo { border-top: none; border-left: 1px solid rgba(232, 184, 107, 0.18); }
}
.news-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    margin-bottom: 14px;
    font: 800 0.72rem/1.2 var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}
.news-head-todo { color: var(--ink-muted); }
.news-icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(232, 184, 107, 0.16);
}
.news-icon svg { width: 19px; height: 19px; }
.news-list { list-style: none; display: grid; gap: 12px; }
.news-list li { max-width: 72ch; font-size: 1.02rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.news-list li + li { padding-top: 12px; border-top: 1px solid var(--line); }
.news-date { font-weight: 700; color: var(--gold); white-space: nowrap; }
.news-sep { margin: 0 0.45em; color: var(--ink-dim); }
.news-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.news-body { max-width: 72ch; color: var(--ink); }
/* "Show 2 older updates": they open below it, so nothing above moves */
.news-older { margin-top: 6px; }
.news-older summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    cursor: pointer;
    color: var(--gold);
    font-weight: 700;
    font-size: 0.9rem;
}
.news-older summary::-webkit-details-marker { display: none; }
.news-older summary > span { text-decoration: underline; text-decoration-color: rgba(232, 184, 107, 0.45); text-underline-offset: 4px; }
.news-older summary:hover { color: var(--ink); }
.news-older summary svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--ease-out); }
.news-older[open] summary svg { transform: rotate(180deg); }
.news-older-hide,
.news-older[open] .news-older-show { display: none; }
.news-older[open] .news-older-hide { display: inline; }
.news-older > .news-list { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Still to come: open (dashed) rings, like the hero card's "You haven't RSVP'd yet" */
.news-todo-list { list-style: none; display: grid; gap: 10px; }
.news-todo-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.97rem; line-height: 1.4; color: var(--ink); }
.news-todo-list li::before {
    content: '';
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 0.18em;
    border-radius: 50%;
    border: 1.5px dashed rgba(232, 184, 107, 0.75);
}
@media (max-width: 640px) {
    .news-updates,
    .news-todo { padding: 20px 18px; }
    .news-head { margin-bottom: 12px; }
    .news-list li { font-size: 0.98rem; }
    .news-todo-list { gap: 8px; }
    .news-todo-list li { font-size: 0.94rem; }
}

/* Fly into and cost cards: when to book flights, and whether (and how) to pay */
.fact-tip {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--ink);
}
.fact-tip svg { width: 15px; height: 15px; flex: none; margin-top: 0.15em; color: var(--gold); }
.cost-meta .fact-tip { margin-top: 14px; border-top-color: rgba(226, 125, 79, 0.22); font-size: 0.92rem; color: var(--ink); }
@media (max-width: 640px) {
    /* Phones: under the note, in the compact row's text column */
    .fact .fact-tip { grid-column: 2; margin-top: 10px; padding-top: 9px; font-size: 0.85rem; }
    .cost-meta .fact-tip { margin-top: 12px; font-size: 0.88rem; }
    /* ...and the cost breakdown (trip.cost.breakdown), once it's filled in, as compact rows */
    .cost-breakdown { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 4px; }
    .cost-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; min-width: 0; }
    /* A dollar amount stays on one line; a text amount ("Covered by the deposit") wraps instead of widening the card */
    .cost-line b { font-size: 1.12rem; min-width: 0; text-align: right; overflow-wrap: anywhere; }
    .cost-line b.num { white-space: nowrap; }
}

/* The RSVP-by date: on the head count, and leading the RSVP sheet's lede (the account step's too, until
   it passes). Once it has passed it's said once, quietly. */
.hc-foot-text { flex: 1 1 11rem; display: grid; gap: 3px; min-width: 0; } /* RSVP stays beside it from about 360px */
.hc-due { color: var(--ink); font-weight: 600; font-size: 0.92rem; line-height: 1.4; }
.hc-due svg { display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; color: var(--gold); }
.hc-due.is-past { color: var(--ink-muted); font-weight: 500; }
.hc-due.is-past svg { color: var(--ink-dim); }
.rsvp-due { color: var(--ink); font-weight: 600; }
.rsvp-due.is-past { color: inherit; font-weight: inherit; }


/* --------------------------------------------------------------------------
   Crew list handicaps, golf profile hints, and the RSVP sheet / profile loading state
   -------------------------------------------------------------------------- */
/* Crew cards show the handicap only (no GHIN numbers). No handicap: a quiet "No HCP" in its place. */
.player-hcp.is-none span { display: block; font-size: 0.62rem; line-height: 1.3; white-space: nowrap; }
/* Standings roster: the same "No HCP" in the Handicap column */
.leaderboard-row .col-hcp.hcp-none { color: var(--ink-dim); font: 700 0.68rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* Golf profile: a hint under each box (where to find a GHIN, what to do without a handicap). The
   "Plus handicap" box sits right under the Handicap box it changes, with that hint below it. */
#registration-form .field-input { margin-bottom: 0; }
#registration-form .form-group { margin-bottom: 20px; }
#registration-form .rsvp-check.hcp-plus { margin-top: 12px; }
.field-hint { margin-top: 7px; font-size: 0.82rem; line-height: 1.4; color: var(--ink-dim); text-wrap: pretty; }
/* Phones: a little tighter, and Save / Cancel side by side (as on desktop), so with the hints the
   whole profile, Save included, still fits a small phone (375 x 667) without scrolling */
@media (max-width: 640px) {
    #registration-modal .rsvp-who { margin-bottom: 12px; }
    #registration-form .form-group { margin-bottom: 12px; }
    #registration-form .rsvp-check.hcp-plus { margin-top: 10px; }
    #registration-form .field-hint { margin-top: 5px; }
    #registration-form .form-actions { margin-top: 4px; flex-wrap: nowrap; }
    #registration-form .form-actions .btn { flex: 1 1 0; min-width: 0; }
}

/* Loading: the sheet and the profile open on the tap. Until the login (and the player's RSVP) are in,
   the form is locked (aria-busy, inert), which doesn't change how it looks. Only if it's still loading
   after a moment does script.js add .is-loading (controls disabled): the form dims and a "Loading…"
   pill shows over it. So a quick load shows no change at all, and nothing moves either way. */
#rsvp-form .rsvp-choices,
#registration-form .form-row { position: relative; }
.form-loading {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    pointer-events: none;
}
.is-loading .form-loading:not(:empty) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: rgba(20, 16, 13, 0.94);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color: var(--ink);
    font: 600 0.92rem var(--sans);
    white-space: nowrap;
    animation: form-loading-in 0.2s both;
}
@keyframes form-loading-in { from { opacity: 0; } to { opacity: 1; } }
.form-spinner {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(232, 184, 107, 0.28);
    border-top-color: var(--gold);
    animation: form-spin 0.8s linear infinite;
}
@keyframes form-spin { to { transform: rotate(360deg); } }
#rsvp-step-form.is-loading .rsvp-who,
#rsvp-step-form.is-loading .rsvp-choices > :not(.form-loading),
#rsvp-step-form.is-loading #rsvp-form > :not(.rsvp-choices),
#registration-form.is-loading .form-row > .form-group,
#registration-form.is-loading #profile-submit {
    opacity: 0.5;
    transition: opacity 0.2s;
}
#rsvp-step-form[aria-busy] .rsvp-choice,
#rsvp-step-form[aria-busy] .rsvp-check,
#rsvp-step-form[aria-busy] .btn,
#rsvp-step-form[aria-busy] .link-btn,
#registration-form[aria-busy] .rsvp-check,
#registration-form[aria-busy] #profile-submit { cursor: progress; }
#rsvp-step-form[aria-busy] .btn:hover,
#registration-form[aria-busy] #profile-submit:hover { transform: none; }
/* Who's RSVPing / updating, while the login is still being checked: the row keeps its place */
.rsvp-who.is-unknown { visibility: hidden; }
/* The titles take focus while it loads (the controls are locked); no ring on a heading */
#rsvp-title:focus,
#registration-title:focus { outline: none; }


/* --------------------------------------------------------------------------
   Payments (payments_2027.sql): the player's Venmo username in the golf profile, and his own
   trip-cost payments on the cost card
   -------------------------------------------------------------------------- */
/* Venmo: under GHIN and handicap, full width, with a quiet rule above it (it saves on its own) */
#registration-form .venmo-group {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
/* Off: loading, being set up, or waiting for approval (the hint says which) */
#registration-form:not(.is-loading) #venmo-handle:disabled { opacity: 0.55; cursor: not-allowed; }
/* The hint, with "Check it" beside it once the username looks right */
.venmo-foot { display: flex; align-items: center; gap: 0 14px; }
.venmo-foot .field-hint { flex: 1 1 auto; min-width: 0; }
.field-hint.is-note { color: var(--ink-muted); }
.venmo-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 0 2px;
    color: var(--gold);
    font-weight: 700;
    font-size: 0.88rem;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(232, 184, 107, 0.45);
    text-underline-offset: 3px;
}
.venmo-check:hover { color: var(--ink); }
.venmo-check svg { width: 14px; height: 14px; flex: none; }
/* Not a username yet: keeps its place (so the hint doesn't move as he types), unseen and untabbable */
.venmo-check.is-off { visibility: hidden; }
@media (max-width: 640px) {
    #registration-form .venmo-group { padding-top: 12px; }
    .venmo-foot { gap: 0 10px; }
}
/* With Venmo the profile no longer fits a small phone (or a short laptop screen) without scrolling,
   so wherever the sheet scrolls, Save and Cancel stay pinned at its foot, over a fade. When it all
   fits this changes nothing: same spacing (8px + 14px = the 22px gap above them), same colour. */
#registration-form .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 8px;
    padding-top: 14px;
    background: linear-gradient(to bottom, rgba(28, 22, 18, 0), var(--surface) 14px);
}
/* ...and the sheet's own bottom padding below them stays solid, so nothing scrolls by under them */
#registration-form .form-actions::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 50px; /* the sheet's bottom padding (style.css .modal-content) */
    background: var(--surface);
    pointer-events: none;
}
@media (max-width: 640px) {
    #registration-form .form-actions { margin-top: 0; padding-top: 10px; }
    #registration-form .form-actions::after { height: calc(22px + env(safe-area-inset-bottom)); }
}
/* ...and whatever the sheet scrolls to (an error message, a box being focused or tabbed to) stops
   above the pinned bar, not under it: the sheet's bottom padding + the bar (its fade and the 48px
   buttons) + 8px of air. Desktop 50 + 14 + 48 + 8; phones 22 (+ the safe area) + 10 + 48 + 8. */
#registration-modal .modal-content { scroll-padding-bottom: 120px; }
@media (max-width: 640px) {
    #registration-modal .modal-content { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* Cost card: the signed-in player's own payments so far ("Trip cost: $1,600 paid (Oct 15)") */
.cost-meta .cost-paid {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    margin-top: 14px;
    padding: 9px 14px 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(147, 192, 139, 0.35);
    background: rgba(147, 192, 139, 0.09);
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.45;
}
.cost-paid svg { width: 16px; height: 16px; flex: none; margin-top: 0.17em; color: var(--fairway); }
.cost-paid strong { font-weight: 700; color: var(--fairway); }
/* Less than the per-man cost so far: no green check (it isn't "all set"), just the wallet */
.cost-meta .cost-paid.is-part { border-color: var(--line-strong); background: rgba(244, 235, 223, 0.04); }
.cost-paid.is-part svg { color: var(--gold); }
.cost-paid.is-part strong { color: var(--ink); }
@media (max-width: 640px) {
    .cost-meta .cost-paid { margin-top: 12px; font-size: 0.88rem; }
}

/* --------------------------------------------------------------------------
   Your checklist (deposits_2027.sql): the signed-in player's card at the top of The Trip, before the
   trip. script.js fills it (renderChecklist): RSVP, deposit, golf profile, Venmo; or one compact row
   (all set, can't make it, waiting for approval).
   -------------------------------------------------------------------------- */
.checklist {
    margin: 0 0 clamp(28px, 4vw, 40px);
    padding: clamp(18px, 2.6vw, 28px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(226, 125, 79, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(226, 125, 79, 0.12), transparent 55%),
        linear-gradient(160deg, var(--surface-2), var(--surface));
    color: var(--ink);
}
.checklist[hidden] { display: none; }
.checklist-eyebrow { font: 700 0.72rem var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); margin: 0 0 6px; }
.checklist-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; margin-bottom: 16px; }
.checklist-head .checklist-eyebrow { flex: 1 0 100%; }
#checklist-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
#checklist-title:focus { outline: none; }
#checklist-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.checklist-count { color: var(--ink-muted); font-size: 0.92rem; margin: 0; }

.checklist-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(14, 11, 9, 0.35);
    border: 1px solid var(--line);
}
@media (min-width: 900px) {
    .checklist-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .check-item[data-item="deposit"]:is([data-state="pay"], [data-state="ask"], [data-state="sent"]) { grid-column: 1 / -1; }
    /* ...and then the RSVP above it too, so it doesn't sit alone beside an empty half */
    .checklist-items:has(> .check-item[data-item="deposit"]:is([data-state="pay"], [data-state="ask"], [data-state="sent"])) > .check-item[data-item="rsvp"] { grid-column: 1 / -1; }
}

/* The round mark: a tick when done, a dashed ring to do, a clock while an admin checks, a lock, or info */
.check-mark {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    border: 1.5px dashed var(--ink-dim);
    color: #140e0a;
}
.check-mark svg { width: 14px; height: 14px; stroke-width: 2.6; }
.is-done > .check-mark, .check-mark.is-allset { background: var(--fairway); border: 0; }
.is-waiting > .check-mark { background: var(--gold); border: 0; }
.is-locked > .check-mark, .check-mark.is-held, .check-mark.is-out { background: none; border: 1.5px solid var(--ink-dim); color: var(--ink-dim); }
.is-alert > .check-mark { background: var(--red-team); border: 0; }
.is-alert { border-color: rgba(255, 123, 114, 0.35); }

.check-body { min-width: 0; }
.check-title { font-weight: 600; color: var(--ink); line-height: 1.35; margin: 3px 0 0; }
.is-locked .check-title { color: var(--ink-muted); }
.check-detail, .check-note { color: var(--ink-muted); font-size: 0.9rem; line-height: 1.45; margin: 4px 0 0; overflow-wrap: anywhere; }
.check-note { color: var(--ink-dim); }
.check-handle { overflow-wrap: anywhere; }
.check-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; }
.check-actions:empty { display: none; }
.check-also { color: var(--ink-muted); font-size: 0.9rem; margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.checklist .link-btn { margin-left: 0; min-height: 44px; display: inline-flex; align-items: center; }
.checklist .link-btn:disabled, .checklist .btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.checklist a.link-btn { text-decoration: underline; }
.check-ask, .check-rejected { margin-top: 10px; padding: 10px 14px; border-radius: 12px; font-size: 0.92rem; line-height: 1.45; }
.check-ask { border: 1px solid rgba(226, 125, 79, 0.45); background: rgba(226, 125, 79, 0.08); color: var(--ink); }
.check-ask-q { margin: 0; font-weight: 600; }
.check-ask-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.check-rejected { border: 1px solid rgba(255, 123, 114, 0.45); background: rgba(255, 123, 114, 0.09); color: var(--ink); }
.check-error { color: var(--red-team); font-size: 0.88rem; margin: 8px 0 0; }
.check-error:empty { display: none; }
.check-admin { margin: 14px 0 0; color: var(--ink-muted); font-size: 0.9rem; }
.check-admin a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

/* One row: the mark, the text, the button (all set, can't make it, waiting for approval) */
.checklist.is-compact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.checklist.is-compact .check-body { flex: 1 1 260px; }
.checklist.is-compact #checklist-title { font-size: clamp(1.15rem, 2vw, 1.35rem); }
.checklist.is-compact .check-actions { margin-top: 0; }
.checklist.is-compact .check-admin { margin-top: 6px; }

/* The hero row's "· 3 to do" (a 44px tap area without changing the row) and the cost line's action */
.hero-you-todo { position: relative; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hero-you-todo::after { content: ''; position: absolute; inset: -13px -4px; }
.cost-pay-action a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
    .check-actions .check-pay { flex: 1 1 100%; width: 100%; }
    .check-also { flex: 1 1 100%; }
}
@media (max-width: 380px) {
    .check-item { grid-template-columns: 1fr; gap: 8px; }
    .check-ask-actions .btn { flex: 1 1 100%; }
    .checklist.is-compact .check-actions, .checklist.is-compact .check-actions .btn { width: 100%; }
}