/* Palette mirrors the tokens in style.css. This page does not load style.css,
   so the values are restated here rather than inherited — keep the two in sync;
   the previous near-miss values (#111 ink, #f5f1ee paper, #e1d8d1 rules) made
   AISPA read as a different site when placed next to the homepage. */
:root {
    --fg: #0D0F0F;
    --fg2: #5c5348;
    --fg3: #8a8279;
    --bg: #ffffff;
    --bg2: #F3EFEC;
    --border: #e0d8d2;
    --border-mid: #d4ccc4;
    --brand: #8C1515;
    --brand-deep: #401415;
    --brand-hover: #6f1010;
    --accent: #E54A2B;
    --r: 8px;
    /* Same two stacks as style.css, verbatim — the fallback order differed
       before, which only shows if Source Sans 3 fails to load, but there is no
       reason for the two files to disagree. */
    --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --mono: 'Source Code Pro', ui-monospace, monospace;

    /* Legacy aliases so existing rules keep working. */
    --aispa-red: var(--brand);
    --aispa-ink: var(--fg);
    --aispa-muted: var(--fg2);
    --aispa-paper: var(--bg2);
    --aispa-line: var(--border);
}

* { box-sizing: border-box; }

body.page-aispa {
    margin: 0;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--fg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.page-aispa .header {
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    backdrop-filter: blur(12px) saturate(1.6);
}

/* Warm light hero using the same radial-gradient language as .hero-cloud on the
   homepage — a white centre spotlight over brand/accent tints — instead of the
   solid maroon slab this page used to have. */
.aispa-hero {
    min-height: 440px;
    display: flex;
    align-items: center;
    color: var(--fg);
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(ellipse 72% 58% at 50% 42%,
            rgba(255,255,255,.98) 0%,
            rgba(255,252,250,.88) 28%,
            rgba(251,246,242,.55) 48%,
            transparent 68%),
        radial-gradient(circle at 12% 6%, rgba(229,74,43,.09), transparent 30%),
        radial-gradient(circle at 88% 6%, rgba(140,21,21,.08), transparent 30%),
        radial-gradient(circle at 20% 84%, rgba(229,74,43,.07), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(140,21,21,.06), transparent 34%),
        var(--bg2);
}

.aispa-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border);
}

.aispa-wrap {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

/* Masthead: left-aligned, opened by a solid brand rule. The homepage centres its
   hero because it is an invitation; this page is a document and starts like one. */
.aispa-hero {
    min-height: 0;
    display: block;
    border-top: 5px solid var(--brand);
    background:
        radial-gradient(ellipse 80% 70% at 22% 30%, rgba(255,255,255,.9) 0%, transparent 62%),
        radial-gradient(circle at 94% 12%, rgba(140,21,21,.06), transparent 34%),
        var(--bg2);
}

.aispa-masthead {
    padding: 74px 0 0;
    max-width: 760px;
}

/* Mono, letter-spaced — the standard's designation line. Source Code Pro is
   already loaded for the quote blocks further down; using it up here is the
   clearest single signal that this page is a specification. */
.aispa-designation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg3);
}

.aispa-desig-mark {
    padding: 4px 9px;
    border: 1px solid var(--brand);
    border-radius: 3px;
    color: var(--brand);
    font-weight: 600;
    letter-spacing: .12em;
}

.aispa-desig-sep { color: var(--border-mid); }

/* Flat ink, no gradient fill. The gradient is the homepage's signature; repeating
   it here was most of why the two pages read as the same page. */
.aispa-hero h1 {
    margin: 0;
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--fg);
}

.aispa-hero-sub {
    max-width: 620px;
    margin: 20px 0 0;
    font-size: clamp(16px, 1.4vw, 18.5px);
    line-height: 1.65;
    font-weight: 400;
    color: var(--fg2);
}

.aispa-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
}

/* The scope stated as a record — label above value, hairline-ruled — instead of
   oversized counters. A standard reports its scope; it does not advertise it. */
.aispa-record {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start;
    gap: 0 56px;
    margin: 56px 0 0;
    padding: 22px 0 68px;
    border-top: 1px solid var(--border-mid);
}

.aispa-record dt {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg3);
}

.aispa-record dd {
    margin: 7px 0 0;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--fg);
}

.aispa-record dd a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid rgba(140,21,21,.3);
}

.aispa-record dd a:hover { border-bottom-color: var(--brand); }

/* Matches .hero-eyebrow on the homepage: 12px / 500 / .11em / --fg3. */
.aispa-eyebrow {
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--fg3);
}


/* Pill buttons identical to .btn-primary / .btn-ghost on the homepage. */
.aispa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 32px;
    border-radius: 999px;
    text-decoration: none;
    transition: all .25s ease;
}

.aispa-btn-primary {
    background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 52%, var(--brand-hover) 100%);
    border: 1px solid rgba(140,21,21,.95);
    color: #fff;
}

.aispa-btn-primary:hover {
    background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    border-color: #c73d28;
    box-shadow: 0 4px 18px rgba(140,21,21,.28);
}

.aispa-btn-secondary {
    background: transparent;
    border: 1px solid var(--border-mid);
    color: var(--fg2);
}

.aispa-btn-secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.aispa-band {
    padding: 64px 0;
}

.aispa-band + .aispa-band {
    border-top: 1px solid var(--border);
}

.aispa-band-white {
    background: var(--bg);
}

.aispa-overview {
    display: grid;
    grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.aispa-overview p {
    margin: 0;
    color: var(--fg2);
    font-size: 16.5px;
    line-height: 1.7;
}

/* Section headings previously ran at a flat 50px, larger than anything on the
   homepage (34px for its main sections, 28px elsewhere) and with no hierarchy
   between the six sections. Now they land at the homepage's top section size. */
.aispa-overview h2,
.aispa-section-head h2 {
    margin: 9px 0 0;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--fg);
}

.aispa-section-head {
    max-width: 760px;
    margin-bottom: 28px;
}

.aispa-section-head h2 { margin-bottom: 10px; }

.aispa-section-head-split {
    max-width: none;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
}

.aispa-inline-link {
    color: var(--brand);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid rgba(140,21,21,.35);
    transition: color .2s ease, border-color .2s ease;
}

.aispa-inline-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Numbered clause rows. Hairline-separated, identifier in a fixed gutter — the
   shape of a reference document rather than eight feature tiles. */
.aispa-clauses {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.aispa-clause {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0 28px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    transition: background .2s ease;
}

.aispa-clause:hover { background: rgba(140,21,21,.022); }

.aispa-clause-id {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--brand);
    padding-top: 3px;
}

.aispa-clause-body { max-width: 760px; }

.aispa-clause-body h3 {
    margin: 0;
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--fg);
}

.aispa-clause-body p {
    margin: 7px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg2);
}

@media (max-width: 980px) {
    .aispa-overview {
        grid-template-columns: 1fr;
    }

    /* Clause identifier moves above the text; a 92px gutter wastes half the
       width once the screen narrows. */
    .aispa-clause {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .aispa-record {
        grid-template-columns: 1fr;
        gap: 18px 0;
    }
}

@media (max-width: 640px) {
    .aispa-wrap {
        width: min(100% - 28px, 1120px);
    }

    .aispa-masthead {
        padding-top: 56px;
    }

    .aispa-hero h1 {
        font-size: 32px;
    }

    .aispa-record {
        margin-top: 40px;
        padding-bottom: 52px;
    }

    .aispa-band {
        padding: 54px 0;
    }


    .aispa-section-head-split {
        align-items: start;
        flex-direction: column;
    }
}

/* ═══ Findings ═══════════════════════════════════════════════════════════ */

.aispa-band-tint {
    background: var(--bg2);
}

.aispa-section-lede {
    margin: 12px 0 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--fg2);
}

.aispa-findings {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.aispa-finding {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) minmax(150px, 210px);
    gap: 24px;
    align-items: start;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 24px 26px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.aispa-finding:hover {
    border-color: var(--border-mid);
    box-shadow: 0 6px 20px rgba(64,20,21,.06);
}

.aispa-finding-num {
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--brand);
}

.aispa-finding-body h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--fg);
}

.aispa-finding-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg2);
}

/* The headline number sits in its own column so the four findings line up
   vertically even though the prose lengths differ. */
.aispa-finding-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 22px;
    border-left: 1px solid var(--border);
}

.aispa-finding-stat strong {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

.aispa-finding-stat span {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--fg3);
}

.aispa-findings-note {
    margin: 20px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fg3);
}

.aispa-findings-note a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid rgba(140,21,21,.3);
}

.aispa-findings-note a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ═══ Benchmark ══════════════════════════════════════════════════════════ */

.aispa-bench-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
}

.aispa-bench-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 24px;
}

.aispa-bench-stat {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
}

.aispa-bench-label {
    display: block;
    margin: 10px 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fg3);
}

.aispa-bench-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fg2);
}

.aispa-bench-caveat {
    margin: 20px 0 0;
    padding: 16px 20px;
    border-left: 3px solid var(--brand);
    background: var(--bg2);
    border-radius: 0 var(--r) var(--r) 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg2);
}

@media (max-width: 980px) {
    .aispa-finding {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 16px;
    }

    /* Drop the number column out of the flow and let the stat sit under the
       prose rather than squeezing three columns onto a narrow screen. */
    .aispa-finding-stat {
        grid-column: 2;
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .aispa-bench-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══ Figures ════════════════════════════════════════════════════════════
   These are the paper's own charts, deliberately frozen at publication. The
   homepage renders the same series from live data and will drift away from
   them over time — that divergence is the point, so both are kept.
   Sized small on purpose: they are evidence for a claim already stated in the
   prose, not the main event.                                                */

.aispa-fig {
    margin: 0;
    min-width: 0;
}

.aispa-fig-plate {
    display: block;
    padding: 16px 18px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

a.aispa-fig-plate:hover {
    border-color: var(--border-mid);
    box-shadow: 0 8px 24px rgba(64,20,21,.07);
    transform: translateY(-2px);
}

.aispa-fig img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.aispa-fig figcaption {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 11px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg3);
}

/* Hairline rule leading into the caption keeps the figure block visually
   closed without drawing a second border. */
.aispa-fig figcaption::before {
    content: '';
    flex: 0 0 18px;
    height: 1px;
    margin-top: 7px;
    background: var(--border-mid);
}

.aispa-fig-open {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand);
    opacity: 0;
    transition: opacity .22s ease;
}

a.aispa-fig-plate:hover .aispa-fig-open { opacity: .85; }

/* Figures sit below the prose and the stat column, centred and capped well
   short of the card width — full-bleed charts overwhelmed the finding they
   were meant to support. */
.aispa-finding-figs {
    grid-column: 1 / -1;
    display: grid;
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.aispa-finding-figs[data-count="1"] {
    grid-template-columns: minmax(0, 380px);
}

.aispa-finding-figs[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 340px));
}

/* The organization rankings are portrait (≈600×650pt); left at the same width
   as the landscape charts they would tower over everything else. */
.aispa-finding-figs .aispa-fig img[src*="ranking-"] {
    max-height: 380px;
    width: auto;
    margin: 0 auto;
}

@media (max-width: 760px) {
    .aispa-finding-figs,
    .aispa-finding-figs[data-count="1"],
    .aispa-finding-figs[data-count="2"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ═══ Dimension detail ═══════════════════════════════════════════════════ */

.aispa-depth-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.aispa-depth-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 22px;
}

.aispa-depth-card h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--brand);
}

.aispa-depth-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fg2);
}

/* ═══ Gray area ══════════════════════════════════════════════════════════ */

.aispa-gray-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    padding: 0 0 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border);
}

.aispa-gray-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aispa-gray-stat strong {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
}

.aispa-gray-stat span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fg3);
}

.aispa-pattern-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.aispa-pattern {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
}

.aispa-pattern header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.aispa-pattern-n {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fg3);
}

/* Which AISPA dimensions the pattern puts at risk. */
.aispa-pattern-dim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(140,21,21,.09);
    color: var(--brand);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
}

.aispa-pattern h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--fg);
}

.aispa-pattern p {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fg2);
}

/* Verbatim prompt text — monospaced and quoted so it is unmistakably an
   artefact being examined rather than the site's own voice. */
.aispa-pattern-quote {
    margin: auto 0 0;
    padding: 14px 16px;
    border-left: 3px solid rgba(140,21,21,.28);
    background: var(--bg2);
    border-radius: 0 6px 6px 0;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--fg2);
}

.aispa-pattern-quote::before { content: '“'; }
.aispa-pattern-quote::after  { content: '”'; }

.aispa-gray-closing {
    margin: 26px 0 0;
    padding: 18px 22px;
    border-left: 3px solid var(--brand);
    background: var(--bg);
    border-radius: 0 var(--r) var(--r) 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--fg2);
}

@media (max-width: 980px) {
    .aispa-depth-grid,
    .aispa-pattern-grid {
        grid-template-columns: 1fr;
    }

    .aispa-gray-stats {
        gap: 28px;
    }
}