:root {
    --paper: #f7fafb;
    --white: #ffffff;
    --ink: #335572;
    --muted: #526879;
    --blue: #225d93;
    --green: #247765;
    --mint: #ddf2e7;
    --lilac: #ede9fa;
    --purple: #685197;
    --pink: #f8e5e9;
    --rose: #a24863;
    --line: #c7d5df;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    background: var(--mint);
}

a:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 4px;
    background: var(--white);
}

h1,
h2,
h3,
p,
figure {
    margin: 0;
}

h1 {
    font-size: 40px;
    line-height: 1.12;
    font-weight: 650;
    letter-spacing: -1.4px;
    color: var(--blue);
    text-wrap: balance;
}

h1 em {
    font-family: Georgia, serif;
    font-weight: 400;
    color: var(--green);
}

h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.7px;
    color: var(--blue);
    text-wrap: balance;
}

h3 {
    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.4px;
}

p {
    font-size: 16px;
    line-height: 1.7;
}

p + p {
    margin-top: 16px;
}

h2 + p,
h3 + p {
    margin-top: 12px;
}

.shell {
    width: min(1120px, calc(100% - 64px));
    margin-inline: auto;
}

.masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-block: 22px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 650;
}

.identity {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.identity-mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid var(--green);
    border-radius: 50%;
    background: linear-gradient(90deg, transparent 45%, var(--green) 45%, var(--green) 55%, transparent 55%);
    transform: rotate(35deg);
}

.edition {
    color: var(--muted);
}

.label {
    display: block;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: 1.7px;
    color: var(--muted);
}

.opening {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 48px;
}

.opening h1 {
    margin: 16px 0 23px;
}

.repair-figure {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 12px 40px;
    align-items: center;
    padding: 24px 30px 20px;
    background: var(--mint);
    border-radius: 80px 0 0 0;
}

.figure-top {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    color: var(--green);
}

.giant {
    font-size: 110px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -9px;
}

.giant span {
    font-size: 36px;
    letter-spacing: -2px;
    margin-left: 4px;
}

.figure-caption {
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 1.8px;
}

.dot-matrix {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 6px;
}

.dot {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
}

.dot.fixed {
    background: var(--green);
}

.dot.advice {
    background: var(--purple);
}

.dot.failed {
    background: var(--white);
    border: 1px solid var(--rose);
}

figcaption {
    grid-column: 1 / -1;
    margin-top: 0;
    font-size: 11px;
    color: var(--green);
}

.distribution {
    display: grid;
    grid-template-columns: 62fr 13fr 25fr;
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
    padding-bottom: 26px;
}

.distribution > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    padding: 12px 12px 0 0;
    border-top: 8px solid var(--green);
}

.distribution .dist-advice {
    border-color: var(--purple);
}

.distribution .dist-failed {
    border-color: var(--rose);
}

.distribution strong {
    font-size: 22px;
    font-weight: 600;
}

.distribution span {
    font-size: 12px;
}

.population {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 42px;
    align-items: center;
    padding-block: 32px;
}

.population h2 {
    margin-top: 12px;
}

.section-head {
    padding-block: 24px;
    border-top: 1px solid var(--line);
}

.section-head h2 {
    margin-top: 9px;
}

.measurement {
    position: relative;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    padding: 24px 28px;
    border-top: 1px solid var(--line);
    align-items: center;
}

.measurement.flow {
    background: #e6f0f8;
    border-left: 5px solid var(--blue);
}

.measurement.temperature {
    background: var(--mint);
    border-left: 5px solid var(--green);
    margin-left: 28px;
}

.measurement.timing {
    background: var(--lilac);
    border-left: 5px solid var(--purple);
    margin-left: 56px;
}

.reading strong {
    display: block;
    font-size: 74px;
    line-height: 1;
    letter-spacing: -4px;
    font-weight: 450;
}

.reading span {
    display: block;
    font-size: 14px;
    margin-top: 8px;
}

.measure-index {
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--muted);
}

.measurement-copy {
    padding-top: 8px;
}

.anomalies {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 42px;
    padding-block: 36px;
    align-items: center;
}

.anomalies .section-head {
    padding: 0;
    border: 0;
}

.anomalies h2 {
    margin-top: 12px;
}

.closing-note {
    padding: 22px 26px;
    border-block: 1px solid var(--line);
    background: var(--white);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.closing-note p + p {
    margin-top: 0;
}

.evidence {
    padding-block: 28px 34px;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
}

.source-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 12px;
    color: var(--muted);
}

.source-lines span {
    padding-block: 2px;
}

.case-opening {
    padding-block: 40px 28px;
}

.case-opening h1 {
    max-width: 880px;
    margin-top: 14px;
}

.case-opening .lead {
    max-width: 880px;
    margin-top: 22px;
}

.instrument {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 36px;
    padding: 28px 32px;
    background: var(--lilac);
    border-top: 3px solid var(--purple);
    align-items: center;
}

.instrument-reading strong {
    display: block;
    font-size: 70px;
    line-height: 1.08;
    font-weight: 450;
    letter-spacing: -3px;
    color: var(--purple);
}

.instrument-reading > span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 12px;
}

.instrument-detail p {
    margin-top: 14px;
}

.equation {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #bcb1d9;
    font-size: 25px;
}

.equation strong {
    font-weight: 550;
}

.thermal-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    position: relative;
    border-top: 12px solid #d1c6ec;
}

.thermal-scale::before {
    content: "";
    position: absolute;
    left: 43.333%;
    width: 23.333%;
    top: -12px;
    height: 12px;
    background: var(--purple);
}

.thermal-scale strong {
    font-size: 24px;
    font-weight: 550;
}

.time-sequence,
.state-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.time-sequence > div,
.state-pair > div {
    padding-top: 10px;
    border-top: 2px solid var(--purple);
}

.time-sequence span,
.state-pair span,
.dimension span,
.signal-pair span {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
}

.time-sequence strong {
    display: block;
    font-size: 36px;
    font-weight: 500;
}

.state-pair strong {
    display: block;
    font-size: 23px;
    font-weight: 500;
}

.dimension {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-block: 1px solid #bcb1d9;
}

.dimension strong {
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 500;
}

.signal-pair {
    padding-left: 20px;
    border-left: 3px solid var(--purple);
}

.signal-pair strong {
    display: block;
    margin-block: 8px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.case-body {
    padding-block: 32px 28px;
}

.paired-copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-top: 22px;
}

.conclusion {
    background: var(--mint);
    border-left: 4px solid var(--green);
    padding: 22px 26px;
}

.diagnostic-ledger {
    border-top: 3px solid var(--green);
}

.diagnostic-ledger article {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 135px;
    gap: 24px;
    padding: 25px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}

.ledger-no {
    font-family: Georgia, serif;
    color: var(--green);
    font-size: 40px;
    line-height: 1;
}

.ledger-tag {
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--green);
    padding-top: 8px;
}

@media (max-width: 1000px) {
    .opening {
        gap: 24px;
    }

    .repair-figure {
        padding: 24px;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 12px 24px;
    }

    .giant {
        font-size: 90px;
    }

    .measurement {
        grid-template-columns: 215px minmax(0, 1fr);
    }

    .reading strong {
        font-size: 64px;
    }

    .instrument {
        gap: 28px;
        padding: 24px;
    }

    .diagnostic-ledger article {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .ledger-tag {
        display: none;
    }
}

@media (max-width: 760px) {
    .shell {
        width: calc(100% - 40px);
    }

    .edition {
        display: none;
    }

    .opening,
    .population,
    .anomalies,
    .closing-note,
    .instrument,
    .paired-copy {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .opening {
        padding-top: 30px;
    }

    .repair-figure {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 14px 24px;
        border-radius: 40px 0 0 0;
    }

    .figure-top {
        margin: 0;
    }

    .figure-caption {
        display: none;
    }

    .dot-matrix {
        grid-template-columns: repeat(20, minmax(0, 1fr));
        align-content: center;
        gap: 4px;
    }

    figcaption {
        grid-column: 1 / -1;
        margin: 0;
    }

    .distribution {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .distribution::before {
        content: "";
        grid-column: 1 / -1;
        height: 8px;
        background: linear-gradient(to right, var(--green) 0 62%, var(--purple) 62% 75%, var(--rose) 75% 100%);
    }

    .distribution > div {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-top: 0;
    }

    .measurement {
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 20px;
        padding: 26px 20px;
    }

    .reading strong {
        font-size: 49px;
        letter-spacing: -2px;
    }

    .measurement.temperature,
    .measurement.timing {
        margin-left: 0;
    }

    .population,
    .anomalies {
        padding-block: 28px;
    }

    .instrument-reading strong {
        font-size: 60px;
    }

    .instrument-reading > span {
        margin-top: 7px;
    }

    .evidence {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .shell {
        width: calc(100% - 32px);
    }

    .masthead {
        font-size: 10px;
        letter-spacing: 1px;
        padding-block: 18px;
    }

    .repair-figure {
        gap: 14px;
        padding: 24px 18px 18px;
        grid-template-columns: 1fr 1fr;
    }

    .giant {
        font-size: 82px;
        letter-spacing: -6px;
    }

    .dot-matrix {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 3px;
    }

    .measurement {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .reading {
        display: flex;
        align-items: baseline;
        gap: 14px;
    }

    .reading strong {
        font-size: 58px;
    }

    .reading span {
        margin: 0;
    }

    .instrument {
        padding: 24px 20px;
    }

    .dimension {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .dimension span:last-child {
        flex-basis: 100%;
    }

    .diagnostic-ledger article {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 14px;
    }

    .ledger-no {
        font-size: 32px;
    }

    .time-sequence,
    .state-pair {
        gap: 12px;
    }

    .state-pair strong {
        font-size: 20px;
    }
}