/* Dear TJ — restrained editorial typography, data-first.
   One accent colour, one serif, one sans. No gradients on text, no glow. */

:root {
    --paper:      #fbfaf7;
    --paper-alt:  #f4f2ed;
    --ink:        #17181a;
    --ink-soft:   #4a4e55;
    --ink-faint:  #7d838c;
    --rule:       #ddd9d1;
    --accent:     #9a3412;   /* burnt sienna — used sparingly */
    --accent-soft:#f0e3dc;
    --against:    #1e3a5f;   /* the counter-case gets its own colour */
    --against-soft:#e6ecf3;
    --data:       #2f4858;
    --max:        min(68rem, 92vw);
    --measure:    34rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:      #121316;
        --paper-alt:  #17191d;
        --ink:        #eceae5;
        --ink-soft:   #b4b8bf;
        --ink-faint:  #848a94;
        --rule:       #2b2e34;
        --accent:     #e8865c;
        --accent-soft:#2a1c16;
        --against:    #8fbce8;
        --against-soft:#14202e;
        --data:       #9fc4d8;
    }
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Source Serif 4", Iowan Old Style, Georgia, serif;
    font-size: clamp(1.02rem, 0.55vw + 0.92rem, 1.16rem);
    line-height: 1.66;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.rule-top { height: 4px; background: var(--accent); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- masthead ---------- */

.masthead {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(3rem, 9vw, 6.5rem) 1.5rem clamp(2rem, 5vw, 3.5rem);
}

.kicker, .section-no, .byline, .compare-label, .stat-lbl, .chart-toggles,
.source-list, .calc-controls, footer, .f-mark {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.kicker {
    margin: 0 0 0.9rem;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.masthead h1 {
    margin: 0 0 1.1rem;
    font-size: clamp(3.4rem, 12vw, 7rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
    font-weight: 700;
}

.standfirst {
    margin: 0 0 1.6rem;
    max-width: var(--measure);
    font-size: clamp(1.15rem, 1vw + 0.95rem, 1.42rem);
    line-height: 1.5;
    color: var(--ink-soft);
}
.standfirst strong { color: var(--ink); font-weight: 600; }

.byline {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-faint);
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
    max-width: var(--measure);
}
.byline a { color: var(--accent); }

/* ---------- bands ---------- */

.band {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5.5rem) 1.5rem;
    border-top: 1px solid var(--rule);
}
.band-alt, .band-against, .band-sources {
    max-width: none;
    padding-left: max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    padding-right: max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
}
.band-alt { background: var(--paper-alt); }
.band-against { background: var(--against-soft); }
.band-sources { background: var(--paper-alt); }

.section-no {
    margin: 0 0 0.7rem;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    font-weight: 600;
    color: var(--accent);
}
.band-against .section-no { color: var(--against); }

h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3.6vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    max-width: 22ch;
}

.lede {
    margin: 0 0 2rem;
    max-width: var(--measure);
    font-size: clamp(1.06rem, 0.7vw + 0.92rem, 1.22rem);
    color: var(--ink-soft);
}

h3.sub {
    margin: 2.8rem 0 0.8rem;
    font-size: 1.22rem;
    letter-spacing: -0.01em;
}

p { max-width: var(--measure); }

.caveat {
    margin-top: 1.4rem;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--rule);
    background: rgba(125, 131, 140, 0.07);
    font-size: 0.95rem;
    color: var(--ink-soft);
    max-width: var(--measure);
}
.caveat strong { color: var(--ink); }

/* ---------- citations ---------- */

.cite {
    display: inline-block;
    vertical-align: super;
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.62em;
    font-weight: 600;
    line-height: 1;
}
.cite a {
    color: var(--accent);
    text-decoration: none;
    padding: 0.1em 0.34em;
    border-radius: 3px;
    background: var(--accent-soft);
}
.cite a:hover, .cite a:focus-visible { background: var(--accent); color: var(--paper); }
.band-against .cite a { color: var(--against); background: rgba(30, 58, 95, 0.1); }
@media (prefers-color-scheme: dark) {
    .band-against .cite a { background: rgba(143, 188, 232, 0.16); }
}
.band-against .cite a:hover { background: var(--against); color: var(--paper); }

/* ---------- chart ---------- */

.chart-figure {
    margin: 0 0 2rem;
    max-width: none;
}
.chart-head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem;
}
.chart-head h3 { margin: 0; font-size: 1.04rem; font-weight: 600; letter-spacing: -0.01em; }
.chart-toggles { display: flex; gap: 0.4rem; }
.toggle {
    font: inherit; font-size: 0.72rem; font-weight: 500;
    padding: 0.28rem 0.62rem; border-radius: 999px;
    border: 1px solid var(--rule); background: transparent;
    color: var(--ink-faint); cursor: pointer;
}
.toggle.is-on { border-color: var(--data); color: var(--data); background: rgba(47,72,88,0.07); }

.chart-wrap { position: relative; }
/* No overflow:visible — the tooltip is an HTML sibling, not SVG content,
   and letting the SVG paint outside its box widened the page on phones. */
#horizon-chart { width: 100%; height: auto; display: block; }

.tip {
    position: absolute;
    pointer-events: none;
    background: var(--ink);
    color: var(--paper);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.74rem;
    line-height: 1.45;
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 12px));
    z-index: 5;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.tip b { font-weight: 600; }
.tip span { opacity: 0.72; }

figcaption {
    margin-top: 0.85rem;
    font-size: 0.86rem;
    color: var(--ink-faint);
    max-width: 44rem;
}

/* ---------- pullout stat ---------- */

.pullout {
    display: flex; align-items: center; gap: clamp(1rem, 4vw, 2.5rem);
    margin: 2.2rem 0; padding: 1.4rem 0;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat-num {
    font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700;
    letter-spacing: -0.03em; line-height: 1; color: var(--data);
}
.stat-lbl { font-size: 0.76rem; color: var(--ink-faint); letter-spacing: 0.03em; }
.stat-arrow { font-size: 1.6rem; color: var(--ink-faint); }

/* ---------- compare (rounds of conversation) ---------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 4vw, 3rem); margin: 1.5rem 0 0.9rem; }
@media (max-width: 620px) { .compare { grid-template-columns: 1fr; } }
.compare-label { margin: 0 0 0.7rem; font-size: 0.8rem; font-weight: 600; color: var(--ink); max-width: none; }
.compare-label span { display: block; font-weight: 400; color: var(--ink-faint); }
.rounds { display: flex; flex-wrap: wrap; gap: 5px; min-height: 2.2rem; align-content: flex-start; }
.dot { width: 13px; height: 13px; border-radius: 50%; background: var(--data); opacity: 0.85; }
.dot.human { background: var(--accent); }
.compare-num { margin: 0.7rem 0 0; font-size: 0.92rem; color: var(--ink-soft); max-width: none; }
.compare-num strong { font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }
.compare-caption { font-size: 0.86rem; color: var(--ink-faint); margin-top: 0.4rem; }

/* ---------- skill bars ---------- */

.bars { margin: 1.4rem 0 1.8rem; max-width: 38rem; }
.bar-row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.9rem; align-items: center; margin-bottom: 0.7rem; }
@media (max-width: 560px) { .bar-row { grid-template-columns: 1fr; gap: 0.2rem; } }
.bar-label { font-family: Inter, system-ui, sans-serif; font-size: 0.8rem; color: var(--ink-soft); }
.bar-track { position: relative; height: 30px; background: rgba(125,131,140,0.12); border-radius: 4px; overflow: hidden; }
.bar-fill {
    height: 100%; border-radius: 4px; background: var(--data);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 0.5rem; color: var(--paper);
    font-family: Inter, system-ui, sans-serif; font-size: 0.78rem; font-weight: 600;
    width: 0; transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* A near-zero bar has no room for a label inside the fill. Position the note
   over the track instead of pushing it past the fill's right edge — doing the
   latter widened every ancestor and put a scrollbar on the whole page. */
.bar-note {
    position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
    font-family: Inter, system-ui, sans-serif; font-size: 0.78rem;
    color: var(--ink-soft); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .bar-fill { transition: none; } }

/* ---------- the case against ---------- */

.against-list { counter-reset: ag; list-style: none; padding: 0; margin: 0 0 2.6rem; }
.against-list > li {
    counter-increment: ag;
    padding: 1.5rem 0 1.5rem 3.4rem;
    border-top: 1px solid rgba(30,58,95,0.18);
    position: relative;
}
.against-list > li::before {
    content: counter(ag);
    position: absolute; left: 0; top: 1.5rem;
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.5rem; font-weight: 600; color: var(--against); opacity: 0.45;
    line-height: 1;
}
.against-list h3 { margin: 0 0 0.6rem; font-size: 1.14rem; line-height: 1.35; letter-spacing: -0.01em; max-width: 34ch; }
.against-list p { margin: 0 0 0.8rem; }
.rebut {
    padding: 0.85rem 1.05rem; border-radius: 6px;
    background: rgba(255,255,255,0.55);
    border-left: 3px solid var(--against);
    font-size: 0.95rem; color: var(--ink-soft);
}
@media (prefers-color-scheme: dark) { .rebut { background: rgba(255,255,255,0.045); } }
.rebut strong { color: var(--ink); }

/* ---------- calculator ---------- */

.calc {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid rgba(30,58,95,0.22);
    border-radius: 10px;
    background: rgba(255,255,255,0.5);
    max-width: 40rem;
}
@media (prefers-color-scheme: dark) { .calc { background: rgba(255,255,255,0.035); } }
.calc h3 { margin: 0 0 0.7rem; font-size: 1.08rem; letter-spacing: -0.01em; }
.calc p { font-size: 0.95rem; }
.calc-controls { display: grid; gap: 1rem; margin: 1.3rem 0; }
.calc-controls label {
    display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.8rem;
    align-items: center; font-size: 0.8rem; color: var(--ink-soft); font-weight: 500;
    min-width: 0;
}
.calc-controls input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--against); }
.calc-controls output {
    font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink);
    font-size: 0.92rem; justify-self: end;
}
.calc-bar { height: 34px; border-radius: 5px; background: rgba(125,131,140,0.18); overflow: hidden; }
.calc-fill { height: 100%; background: var(--against); width: 59.9%; transition: width 160ms linear; }
@media (prefers-reduced-motion: reduce) { .calc-fill { transition: none; } }
.calc-result { margin: 0.7rem 0 0; font-size: 1rem; }
.calc-result strong { font-size: 1.5rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc-note { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- claims ---------- */

.claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; margin: 1.5rem 0 1rem; }
.claim { padding: 1.2rem 1.3rem; border-top: 3px solid var(--accent); background: rgba(125,131,140,0.055); border-radius: 0 0 7px 7px; }
.claim h3 { margin: 0 0 0.5rem; font-size: 1.02rem; line-height: 1.35; letter-spacing: -0.01em; }
.claim p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); }

/* ---------- falsifiable ---------- */

.falsify { list-style: none; padding: 0; margin: 0 0 2.4rem; max-width: 40rem; }
.falsify li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.f-mark { width: 1.35rem; height: 1.35rem; border: 2px solid var(--accent); border-radius: 4px; margin-top: 0.2rem; }
.falsify p { margin: 0; font-size: 0.97rem; }

.closing {
    margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
    font-size: clamp(1.06rem, 0.7vw + 0.92rem, 1.2rem);
}
.signoff { margin-top: 1.4rem; color: var(--ink-faint); font-style: italic; }

/* ---------- sources ---------- */

.source-list { padding: 0; margin: 0 0 2rem; list-style: none; counter-reset: src; max-width: 46rem; }
.source-list li {
    counter-increment: src;
    padding: 1rem 0 1rem 2.6rem; border-top: 1px solid var(--rule); position: relative;
    font-size: 0.9rem;
}
.source-list li::before {
    content: counter(src); position: absolute; left: 0; top: 1rem;
    font-size: 0.78rem; font-weight: 600; color: var(--accent);
}
.source-list .s-who { font-weight: 600; color: var(--ink); }
.source-list .s-title { color: var(--ink-soft); }
.source-list .s-title a { color: var(--ink-soft); }
.source-list .s-meta { display: block; margin-top: 0.25rem; color: var(--ink-faint); font-size: 0.83rem; }
.source-list .s-note { display: block; margin-top: 0.3rem; color: var(--ink-faint); font-size: 0.83rem; font-style: italic; }

.method { font-size: 0.9rem; color: var(--ink-soft); max-width: 42rem; }

/* ---------- footer ---------- */

footer {
    max-width: var(--max); margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    border-top: 1px solid var(--rule);
    font-size: 0.82rem; color: var(--ink-faint);
}
footer p { margin: 0 0 0.35rem; max-width: none; }
footer a, .source-list a { color: var(--accent); }

a { color: var(--accent); text-underline-offset: 2px; }

/* ---------- 3D reliability surface ----------
   Lives inside the calculator card in §3: the sliders give you a point, this
   gives you the landscape that point sits in. */

.surface { margin: 1.6rem 0 0; }

.surface-cap {
    margin: 0 0 0.7rem;
    font-size: 0.86rem;
    color: var(--ink-soft);
    max-width: none;
}

#surface-host {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(125, 131, 140, 0.06);
    cursor: grab;
    /* the canvas handles drag itself; stop the page scrolling under the finger */
    touch-action: none;
}
#surface-host:active { cursor: grabbing; }
#surface-canvas { display: block; width: 100%; height: auto; }

.surface-axes {
    position: absolute; inset: auto 0 0 0;
    display: flex; justify-content: space-between;
    margin: 0; padding: 0 0.7rem 0.5rem;
    max-width: none; pointer-events: none;
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.66rem; letter-spacing: 0.02em;
    color: var(--ink-faint);
}

.surface-readout {
    margin: 0.7rem 0 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
    max-width: none;
}
.surface-readout strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.surface-readout span { color: var(--ink-faint); }

.surface-fallback, .surface-note {
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    color: var(--ink-soft);
    max-width: none;
}
.surface-note strong { color: var(--ink); }