/* =====================================================================
   URLBattle — shared shell
   ---------------------------------------------------------------------
   Sunlit editorial: warm paper, near-black ink, oversized display type,
   hairline rules with single accent moments. Deliberately flat and fully
   light — no dark surfaces, no soft shadows, no rounded cards, no ambient
   decoration. The identity has to stand on its own because the game
   changes every Sunday.

   Loaded by index.html and every static page. Page-specific rules stay
   inline in their own file.
   ===================================================================== */

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

:root {
    --paper: #f7f5f0;      /* warm ground                        */
    --paper-2: #fffdf8;    /* raised panels                      */
    --ink: #12100e;        /* near-black                         */
    --ink-2: #6f6862;      /* muted body                         */
    --rule: #12100e;       /* heavy structural rules             */
    --hair: #ded8cd;       /* hairline rules between rows        */
    --accent: #ff4d1c;     /* hot orange-red: fills, marks, rules */
    --accent-ink: #b4320d; /* accent as TEXT — holds 4.5:1 even on the tinted washes */
    --gold: #a8780c;       /* champion only — 3.60:1 on paper    */
    --wash: #fdf1e8;       /* warm hover / tint wash              */
    --gold-wash: #f7ecd4;  /* pale gold panel behind the champion */
    --cta-wash: #ffe9df;   /* CTA panel ground — light, tinted    */

    --display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
    --body: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;

    --shell: 1080px;       /* one measure, every page            */
    --gutter: 24px;
}

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

body {
    font-family: var(--body);
    color: var(--ink);
    background: var(--paper);
    min-height: 100vh;
    letter-spacing: -0.011em;
    /* faint paper tooth — one gradient, no extra elements or animation */
    background-image:
        radial-gradient(circle at 18% 12%, rgba(255, 77, 28, .045) 0, transparent 42%),
        radial-gradient(circle at 88% 4%, rgba(18, 16, 14, .05) 0, transparent 38%);
    background-attachment: fixed;
}

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

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- top bar ----------
   Sticky, so the countdown and the play CTA follow you down the page.
   Hairline rule — the page's only heavy rules are the accent moments. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
}
.topbar .shell {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 62px;
}

.brand {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.brand .lo { color: var(--accent); }

/* the weekly heartbeat — mono so the digits don't reflow as they tick */
.countdown {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.countdown::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 8px;
    background: var(--accent);
    vertical-align: baseline;
}

/* ---------- buttons ----------
   Flat accent block, ink text (5.72:1 — measured). Hover deepens to the
   text-grade accent with white (5.18:1). No dark fills anywhere. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding: 11px 20px;
    border: 2px solid var(--accent);
    background: var(--accent);
    color: var(--ink);
    cursor: pointer;
    transition: background .12s linear, color .12s linear, border-color .12s linear;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.btn.ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--hair); margin-top: 72px; }
.footer .shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding-top: 24px;
    padding-bottom: 40px;
    font-size: 13px;
    color: var(--ink-2);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer a {
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 600;
}
.footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer .copy { margin-left: auto; font-family: var(--mono); font-size: 12px; }

/* ---------- static document pages ---------- */
.doc { max-width: 660px; padding-top: 56px; }
.doc h1 {
    font-family: var(--display);
    font-size: clamp(38px, 8vw, 68px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.doc .lead {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
    padding-bottom: 26px;
    margin-bottom: 30px;
    border-bottom: 3px solid var(--accent);
}
.doc h2 {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 40px 0 10px;
}
.doc p, .doc li { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.doc p + p { margin-top: 13px; }
.doc ul { margin: 12px 0 0 18px; }
.doc li { padding-left: 4px; }
.doc li::marker { color: var(--accent); }
.doc li + li { margin-top: 9px; }
.doc b { color: var(--ink); font-weight: 700; }
.doc a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.doc a:hover { color: var(--accent); }
.doc .mail { font-family: var(--mono); font-weight: 700; }
.doc code {
    font-family: var(--mono);
    font-size: .9em;
    color: var(--ink);
    background: rgba(18, 16, 14, .07);
    padding: 2px 5px;
}
/* an unresolved placeholder should be impossible to miss before launch */
.doc .todo {
    background: rgba(255, 77, 28, .14);
    border-bottom: 2px solid var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}
.doc .updated {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-2);
}

@media (max-width: 720px) {
    :root { --gutter: 16px; }
    .topbar .shell { height: 56px; gap: 12px; }
    .brand { font-size: 19px; }
    /* the countdown is the first thing to go — but it was also the flex spacer,
       so without this the button sits against the wordmark instead of flush right */
    .countdown { display: none; }
    .topbar .btn { margin-left: auto; }
    .btn { font-size: 12.5px; padding: 9px 14px; }
    .footer .shell { padding-bottom: 32px; }
    .footer .copy { margin-left: 0; }
    .doc { padding-top: 38px; }
    .doc p, .doc li { font-size: 14.5px; }
}

/* ---------- motion kill switch ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
    }
}