/* public/css/60-mobile.css — Mobile overrides and the modals
 *
 * Part of the old public/oracle.css, which reached 4,761 lines. Split at its own section
 * boundaries; no rule was reordered, reindented or rewritten, so the cascade is unchanged.
 * THE FILES ARE ORDER-DEPENDENT. index.html links them in numeric order and that order is the
 * cascade — concatenating them in it reproduces the original file byte for byte, which is
 * asserted in test/stylesheet.test.js. Renumbering or reordering the <link> tags changes which
 * rules win.
 *
 * LAST on purpose. These rules are meant to win, and in a flat cascade of equal specificity the
 * last one loaded does. Moving this file up the list in index.html would silently disable the
 * mobile layout.
 */
        /* ======================
           MOBILE UX
           ====================== */

        @media (max-width: 767px) {
            body {
                font-size: 15px;
                padding: 0.25rem;
                padding-bottom: max(1rem, env(safe-area-inset-bottom));
                padding-left: max(0.25rem, env(safe-area-inset-left));
                padding-right: max(0.25rem, env(safe-area-inset-right));
            }

            .oracle-submit {
                align-self: stretch;
                width: 100%;
                min-height: 44px;
                font-size: 0.8rem;
            }

            /* Mobile readability + touch targets for colour gate */
            .colour-gate {
                padding-top: 1.1rem;
            }
            .colour-gate-slots {
                gap: 0.8rem;
                margin-bottom: 1.35rem;
            }
            .colour-gate-slot {
                width: 50px;
                height: 50px;
                border-width: 2px;
            }
            .colour-gate-slot-num {
                font-size: 0.62rem;
                bottom: -18px;
            }
            .colour-gate-palette {
                gap: 0.5rem;
                max-width: 300px;
                margin-bottom: 1.15rem;
            }
            .colour-gate-btn {
                width: 40px;
                height: 40px;
                min-width: 40px;
                min-height: 40px;
            }

            /* Tarot: stack cards vertically on very small screens */
/* Sigil wrapper: full touch target on tiny screens */
@media (max-width: 360px) {
    .sigil-wrapper { width: 200px; height: 200px; }
    .sigil, .sigil-progress, .fingerprint-canvas { width: 200px; height: 200px; }
}

            /* Scoped to the About cards — as a bare `details summary` rule it forced
               display:flex onto the sunset fold's summary, which is a block stack (score row,
               meter, verdict) and collapsed into one line on narrow screens. */
            .about-card summary { min-height: 36px; }
        }

        @media (max-width: 360px) {
            .oracle-usage {
                font-size: 0.66rem;
                line-height: 1.5;
            }

            .colour-gate-palette {
                max-width: 290px;
                gap: 0.5rem;
                margin-bottom: 1rem;
            }

            .colour-gate-btn {
                width: 36px;
                height: 36px;
                min-width: 36px;
                min-height: 36px;
            }

            .colour-gate-slots {
                gap: 0.65rem;
                margin-bottom: 1.2rem;
            }

            .colour-gate-slot {
                width: 46px;
                height: 46px;
            }

        }
        /* Hidden until the sigil is held without a question — divine.js drives the opacity. */
        .oracle-field-error {
            margin-top: 0.2rem;
            font-size: 0.62rem;
            color: var(--accent-red);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .about-you-input {
            width: 100%;
            box-sizing: border-box;
            background: var(--bg-deep);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--mono);
            font-size: 0.82rem;
            padding: 0.5rem 0.7rem;
            transition: border-color 0.2s;
        }
        .about-you-input::placeholder { color: var(--text-dim); font-style: italic; }
        .about-you-input:focus { outline: none; border-color: var(--accent-purple); }

        /* Sigil hero — always visible centerpiece */
        .sigil-hero {
            display: flex;
            justify-content: center;
            padding: 1.5rem 0 1rem;
        }
        .sigil-hero .sigil-wrapper {
            pointer-events: none;
            opacity: 0.6;
            transition: opacity 0.5s ease;
        }
        .sigil-hero.sigil-active .sigil-wrapper {
            pointer-events: auto;
            opacity: 1;
        }

        /* Oracle inputs — revealed after gate */
        .oracle-inputs {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.8rem;
            padding: 0 1rem;
            animation: fadeIn 0.5s ease both;
        }
        .divination-hint {
            font-size: 0.73rem;
            color: var(--text-secondary);
            text-align: center;
            letter-spacing: 0.04em;
            line-height: 1.6;
            opacity: 0.9;
        }

        .sigil-wrapper {
            position: relative;
            width: 240px;
            height: 240px;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }
        .sigil {
            overflow: visible;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            position: relative;
            transition: filter 0.3s;
        }
        .sigil.holding {
            filter: drop-shadow(0 0 28px rgba(94,234,212,0.8));
            animation: sigilHoldPulse 1.2s ease-in-out infinite;
        }
        @keyframes sigilHoldPulse {
            0%, 100% { filter: drop-shadow(0 0 18px rgba(167,139,250,0.7)); }
            50%       { filter: drop-shadow(0 0 36px rgba(94,234,212,0.95)); }
        }
        .sigil.holding .sigil-orbit-dot.orbit-moon {
            animation: sigilOrbitMoon 8s linear infinite;
        }
        .sigil.holding .sigil-orbit-dot.orbit-diamond {
            animation: sigilOrbitDiamond 5s linear infinite;
        }
        .sigil.holding .sigil-orbit-dot.orbit-triangle {
            animation: sigilOrbitTriangle 3s linear infinite;
        }
        .sigil-progress {
            position: absolute;
            top: 0; left: 0;
            width: 240px;
            height: 240px;
            pointer-events: none;
        }
        .sigil-progress-ring {
            fill: none;
            stroke: var(--accent-purple);
            stroke-width: 2.5;
            stroke-dasharray: 691;
            stroke-dashoffset: 691;
            transform-origin: center;
            transform: rotate(-90deg);
            transition: stroke-dashoffset 0.1s linear;
            opacity: 0.85;
        }
        .fingerprint-canvas {
            position: absolute;
            top: 0; left: 0;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s;
        }
        .fingerprint-canvas.visible { opacity: 0.75; }
        .divination-status {
            font-size: 0.74rem;
            color: var(--accent-purple);
            letter-spacing: 0.11em;
            text-transform: uppercase;
            min-height: 1.25rem;
            text-align: center;
            opacity: 0.92;
        }

        /* Oracle step indicators */

        /* (duplicate arcane-divider removed — see V13 block above) */


/* ====================== ORACLE MODAL ====================== */
.oracle-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(6, 6, 12, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 2rem 1rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.oracle-modal.show {
    opacity: 1;
}
.oracle-modal-content {
    position: relative;
    width: 100%;
    max-width: 520px;
    /* Matches the dashboard card's shell (same 160° wash, same 18px corner) so opening a modal
       feels like the page continuing rather than a different app taking over. */
    background: linear-gradient(160deg, rgba(12,14,26,0.99) 0%, rgba(18,20,36,0.97) 100%);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 18px;
    box-shadow: 0 0 42px rgba(167, 139, 250, 0.12), 0 18px 48px rgba(0,0,0,0.55);
    padding: 1.5rem;
    transform: translateY(20px);
    transition: transform 0.4s ease;
    margin: auto;
}
.oracle-modal.show .oracle-modal-content {
    transform: translateY(0);
}
/* A bare 1.5rem × floating in the corner was a small target and easy to miss against the
   blurred backdrop. Same round, bordered treatment as the rest of the chrome, and a real
   44px-ish tap area — this is the control every modal needs to be able to find. */
.oracle-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(167,139,250,0.06);
    border: 1px solid rgba(167,139,250,0.22);
    border-radius: 50%;
    color: var(--text-dim);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    z-index: 10;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.oracle-modal-close:hover {
    color: var(--text-primary);
    background: rgba(167,139,250,0.16);
    border-color: rgba(167,139,250,0.45);
}
.oracle-modal-body {
    margin-top: 1rem;
}

.about-modal-content {
    max-width: 640px;
}

.sunset-modal-content {
    max-width: 520px;
}

.about-modal .oracle-modal-body {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding-right: 0.2rem;
}

.about-modal-intro {
    margin-bottom: 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(167,139,250,0.15);
}

.about-modal-intro h2 {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-purple);
    margin-bottom: 0.3rem;
}

.about-modal-intro p {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ── The working ───────────────────────────────────────────────────────────────────────────
      Replaces .cd-breakdown, which drew the DEVICE algorithm's eight weighted factors — a good
      drawing of a weighting nobody asked about, belonging to the forecaster whose number is not
      on the card. See buildSunsetBreakdown for why that arrangement produced "two results".

      What is drawn here is what the Oracle was actually handed. Three cloud layers as cover,
      top down, because "60% cloud" is the exact figure that cannot tell a red sky from a grey
      lid and splitting it is the whole point of the thing. */
.cd-read { display: flex; flex-direction: column; gap: 0.45rem; }
.cd-read-head {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.2rem;
}
/* Label and bar on one line, the gloss under the pair. The three bars have to be able to be
   read straight down as a column, so the label column is fixed rather than shrink-to-fit. */
.cd-read-row {
    display: grid;
    grid-template-columns: 5.4rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    row-gap: 0.1rem;
}
.cd-read-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.cd-read-bar {
    height: 7px;
    border-radius: 4px;
    background: rgba(255,255,255,0.09);
    overflow: hidden;
}
.cd-read-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(167,139,250,0.55), var(--accent-purple));
    transition: width 0.7s ease;
}
.cd-read-val {
    font-size: 0.72rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cd-read-gloss {
    grid-column: 2 / -1;
    font-size: 0.66rem;
    line-height: 1.4;
    color: var(--text-dim);
}
/* The one fact the single hour cannot carry, and usually the decider. Coloured because the two
   directions mean opposite things — but the word is printed either way, never the colour alone. */
.cd-read-trend {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.cd-read-trend.clearing strong { color: var(--accent-green); }
.cd-read-trend.thickening strong { color: var(--accent-amber); }
.cd-read-air {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
/* (.cd-read-fallback and its strong are gone with the device's score line — see
   buildSunsetBreakdown in core.js. It was styled to be "one line, last, and quiet, not a second
   verdict competing with the one on the card", which is a lot of work to make a second verdict
   look like it is not one. Removed rather than orphaned: an unused rule with a top rule and its
   own numeric treatment is exactly the sort of thing that gets reused for something it was never
   shaped for.) */

.cd-sunset-trend {
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(255,160,60,0.12);
    border-radius: 10px;
    background: rgba(8,10,20,0.5);
}

.cd-sunset-trend-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* The tally, from the same summary the Oracle reads before it forecasts. */
.cd-sunset-tally {
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

/* ── Forecast vs sky: two small skies an evening ──
      Replaces ten bars whose height was the score and whose fill was the palette as a gradient
      ("the gradients on the 'last 10 evenings' bars doesn't look great"). Each evening is now two
      columns of flat bands, horizon lowest — the Today card's sky in miniature — the forecast on
      the left and what Blackbushe's camera measured on the right. The score is the stars in the
      panel below; a height repeated it. Each pair is a button that opens its evening. */
.cd-skies {
    display: flex;
    gap: 5px;
    padding-top: 0.2rem;
}
.cd-sky-pair {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 3px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 0.18s ease;
}
.cd-sky-pair:hover { background: rgba(167,139,250,0.08); }
.cd-sky-pair.is-selected {
    background: rgba(167,139,250,0.14);
    box-shadow: inset 0 0 0 1px rgba(167,139,250,0.32);
}
.cd-sky-pair:focus-visible { outline: 1px solid rgba(167,139,250,0.6); outline-offset: 1px; }
.cd-sky-cols {
    display: flex;
    gap: 2px;
    height: 52px;
}
.cd-sky-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.cd-sky-band { flex: 1 1 0; }
/* No usable picture: dotted, never grey — a grey sky is a finding and this is not one. Nobody
   has looked yet (tonight): empty. */
.cd-sky-col.unknown {
    background: repeating-linear-gradient(90deg, rgba(226,232,240,0.28) 0 2px, transparent 2px 4px);
}
.cd-sky-col.none { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.cd-sky-day {
    font-size: 0.62rem;
    line-height: 1;
    text-align: center;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.cd-sky-mark {
    height: 0.85rem;
    font-size: 0.62rem;
    line-height: 0.85rem;
    text-align: center;
    color: var(--text-dim);
}
.cd-sky-mark.agreed { color: var(--text-secondary); }
.cd-sky-mark.missed { color: var(--accent-amber); }

.cd-sunset-trend-foot {
    margin-top: 0.15rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--text-dim);
    letter-spacing: 0.05em;
}

.cd-sunset-key {
    margin-top: 0.3rem;
    font-size: 0.62rem;
    line-height: 1.45;
    color: var(--text-dim);
    text-wrap: pretty;
}

/* ── One evening, opened from its bar ── */
.cd-sunset-eve {
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,160,60,0.12);
}
.cd-eve-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    margin-bottom: 0.3rem;
}
.cd-eve-day {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-primary);
}
.cd-eve-call {
    font-size: 0.66rem;
    color: var(--text-secondary);
}
.cd-eve-note,
.cd-eve-saw,
.cd-eve-meaning {
    margin: 0 0 0.3rem;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--text-secondary);
    text-wrap: pretty;
}
.cd-eve-label {
    margin-right: 0.3rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-purple);
}
/* A miss is amber — the page marking its own work, in the colour it uses for "look at this".
   The words say "missed" too; the colour is never the only thing saying it. */
.cd-eve-meaning.missed { color: var(--accent-amber); }
/* ── Our own pictures of the evening ──
      Up to three stills — sunset, +10, +20 — side by side, the camera's own 16:9. Small on purpose:
      they are the evidence beside a forecast, not a gallery, and each opens full size on a tap. */
.cd-eve-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0.15rem 0 0.25rem;
}
.cd-eve-photo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: inherit;
    text-decoration: none;
}
.cd-eve-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
}
.cd-eve-photo-cap {
    font-size: 0.62rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* The credit, always beside the pictures and always a link back — Blackbushe's pictures.
   Scoped to the evening panel on purpose: the sunset history sits inside a Foretells row, and
   `.ft-body p` (30-timeline.css) outranks a single class — rendered, the credit came out at body
   size, louder than the pictures it credits. Two classes beat it without touching that rule. */
.cd-sunset-eve .cd-eve-credit {
    margin: 0 0 0.4rem;
    font-size: 0.62rem;
    color: var(--text-dim);
}
.cd-sunset-eve .cd-eve-credit a { color: var(--text-secondary); }
/* An AI's look at the pictures: its sentence, then its name. The size of the lines around it and
   no louder — it describes the evening, the measured line below it judges it. Two classes for the
   same reason as the credit (.ft-body p). */
.cd-sunset-eve .cd-eve-eye {
    margin: 0 0 0.45rem;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.cd-eve-eye-by {
    font-size: 0.62rem;
    color: var(--text-dim);
    white-space: nowrap;
}
/* The forecast's four colours and the camera's, as two labelled strips, horizon on the left. */
.cd-eve-strips {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0.1rem 0 0.45rem;
}
.cd-eve-strip {
    display: grid;
    grid-template-columns: 4.2rem 1fr;
    align-items: center;
    gap: 0.4rem;
}
.cd-eve-strip-label {
    font-size: 0.62rem;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}
.cd-eve-swatches {
    display: flex;
    gap: 2px;
    height: 12px;
    border-radius: 3px;
    overflow: hidden;
}
.cd-eve-swatch { flex: 1 1 0; }
/* The feed and the model's later view: the working, so quieter than what happened. */
.cd-eve-feed {
    margin: 0.35rem 0 0;
    font-size: 0.64rem;
    line-height: 1.5;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
/* ── The airfield's report, as a report ──
      "its kinda fun to see their report, their words - its just a guy writing it down". A slip:
      who and when, then the report exactly as filed, then each group of it beside what it means —
      their shorthand left in the page's brightest mono, our gloss right and quieter. */
.cd-report {
    margin: 0.35rem 0 0.45rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: rgba(8,10,20,0.55);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.cd-report-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    margin-bottom: 0.35rem;
}
.cd-report-when {
    font-size: 0.62rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.cd-report-raw {
    font-family: var(--mono);
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
    margin-bottom: 0.45rem;
}
.cd-report-gloss {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2rem 0.7rem;
    align-items: baseline;
}
.cd-report-t {
    font-family: var(--mono);
    font-size: 0.64rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.cd-report-g {
    font-size: 0.64rem;
    line-height: 1.45;
    color: var(--text-dim);
    text-wrap: pretty;
}

/* ── Blackbushe's camera, in Windy's player ──
      16:9 like the camera, full width of the fold, no border of its own. The credit line is
      Windy's condition for showing it, so it is always there and always a link. */
.cd-camera { margin: 0.2rem 0 0.65rem; }
.cd-camera-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
    background: rgba(8,10,20,0.6);
}
.cd-camera-credit {
    margin: 0.4rem 0 0;
    font-size: 0.64rem;
    line-height: 1.5;
    color: var(--text-dim);
    text-wrap: pretty;
}
.cd-camera-credit a { color: var(--text-secondary); }

        /* The alert count on the Sun's fold summary, so a shut fold still says how much is in
           it — the same job .cd-fold-state does elsewhere, in the one place that lacked it. */
        .cd-solarwx-count {
            margin-left: 0.35rem;
            /* font-size: 0.62rem; */
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--accent-amber);
        }
        /* (.cd-dial-why is gone with the two footnote folds it styled — "Why it drifts" and
           "How the top-down view is drawn". Both were true and neither was anybody's first
           question, and between them they put ~180 words of prose under a diagram. The content
           moved to the About modal's dial section, which is where this page keeps the long
           version of every mechanism. What is left under the plot is one sentence and a hint
           line — see .cd-dial-hint.) */

/* ══ PROSE, SET TO BE READ ═════════════════════════════════════════════════════════════════
      Dan: "I'm wondering if this UI, the console font etc is making it difficult to read, some
      of the small faded text certainly is difficult to see."

      The faded text is handled at source — --text-dim was lifted to 6.1:1 and a floor of
      0.62rem / 0.62 opacity was applied across every part of the cascade. This block was the
      other half: a sans face on the four surfaces where somebody reads a SENTENCE rather than
      scanning a value.

      ── That half was tried and rejected ──
      "the half and half font style looks a bit broken and loses style/unique feeling". So
      --sans is `var(--mono)` now and the whole site is monospace again; see the long note on
      that token in 00-base.css for why the reasoning behind the experiment was wrong.

      These rules are kept rather than deleted, and this is not indecision. What survives here
      is the SIZE and LEADING — 0.96rem at 1.7, 1.72 in the About modal — which is a real
      readability gain in any face and is the part of this pass that was not in question. The
      font-family lines now resolve mono to mono, which costs nothing and leaves one token as
      the whole of the experiment should anyone want to re-run it. */

/* The daily reading. The longest thing the Oracle writes and the one people actually read. */
.daily-reading-body,
.divine-reading .oracle-past-a {
    font-family: var(--sans);
    font-size: 0.96rem;
    line-height: 1.7;
    letter-spacing: 0;
}
/* The Oracle's sentence about tonight, on the sunset row and in the headline card. */
.sunset-lede .sunset-verdict,
.cd-headline-title,
.cd-headline-line {
    font-family: var(--sans);
    letter-spacing: 0;
}
/* The About modal, which is the one part of this site that is genuinely a document — several
   thousand words of explanation, kept accurate on purpose, and previously set in a face that
   makes a paragraph hard work. Headings and the code spans inside it stay mono. */
.about-card p,
.scoring-note {
    font-family: var(--sans);
    line-height: 1.72;
    letter-spacing: 0;
}
.scoring-note code { font-family: var(--mono); }