/* ═══════════════════════════════════════════════════════════════
   AI Financial Intelligence Platform — case study scaffold
   Soft page, rounded white cards, hairline borders, olive accent.
   IBM Plex Sans headings + Source Serif 4 body · IBM Plex Mono for figures · 62.5% root.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --page:        #eceef1;
    --card:        #ffffff;
    --well:        #f6f7f9;
    /* the panel colour both diagram SVGs paint themselves, so the card
       gutters continue the drawing instead of framing it in white */
    --panel:       #f7f8fb;

    --ink:         #14151a;
    --body:        #3f434a;
    --muted:       #6b7078;

    --line:        #e3e6ea;
    --line-2:      #d3d8de;

    --accent:      #15539c;   /* finance blue — 7.6:1 on white, reads as blue */
    --accent-ink:  #0f3f78;
    --accent-tint: #e8f0fb;

    --radius:      16px;
    --radius-sm:   10px;

    --shadow:      0 1px 3px rgba(16,24,40,.07);
    --shadow-h:    0 8px 26px rgba(16,24,40,.11);

    --ease:        cubic-bezier(.22, .61, .36, 1);
    --t:           .2s var(--ease);
    --t-slow:      .25s var(--ease);

    --topbar-h:    6.4rem;
    --gutter:      4rem;
    --maxw:        124rem;
}

* {
    font-family: 'Source Serif 4', Georgia, serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
}
*::selection { background: var(--accent-tint); color: var(--accent-ink); }

html {
    font-size: 62.5%;
    /* Painted here as well as on body. body's background normally propagates to
       the canvas, but body is also a clipping context (overflow-x below), and
       overscrolling past the end then exposes the browser's white default
       instead of the page colour. */
    background: var(--page);
    /* `clip`, not `hidden`: overflow-x hidden on html/body makes them scroll
       containers, which silently breaks `position: sticky` on the topbar. */
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-h) + 2rem);
}

body {
    background: var(--page);
    color: var(--body);
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    overflow-x: clip;
    font-size: 1.6rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
    .topbar { position: fixed; top: 0; left: 0; right: 0; }
    body { padding-top: var(--topbar-h); }
}

img, video, svg { max-width: 100%; display: block; }
h1, h2 { font-family: 'IBM Plex Sans', system-ui, sans-serif; line-height: 1.15; color: var(--ink); }

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: 1rem; top: -100px;
    z-index: 2000;
    background: var(--card);
    color: var(--accent-ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    padding: 1rem 1.8rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-h);
    transition: top var(--t);
}
.skip-link:focus { top: 1rem; }

/* ═══════ LAYOUT ═══════ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.cs-section { padding: 0 0 7.2rem; }

.heading {
    max-width: var(--maxw);
    margin: 0 auto 2.4rem;
    padding: 0 var(--gutter);
    font-size: 3.1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.022em;
}
/* The figure is set in mono at reading size so it reads as a reference mark in
   a numbered report rather than decoration competing with the title. */
.heading .heading__num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0;
    vertical-align: .3em;
    margin-right: .35em;
}

/* Small qualifier that rides alongside a section heading. */
.heading__meta {
    display: inline-block;
    margin-left: 1.6rem;
    padding-left: 1.6rem;
    border-left: 1px solid var(--line-2);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.5;
    color: var(--muted);
    vertical-align: middle;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.split--stretch { align-items: stretch; }

/* Equal columns: both cards render at exactly the same size. Heights differ
   by aspect, so .diagram--filled centres the shorter image and pins captions. */
.split--diagrams { grid-template-columns: 1fr 1fr; align-items: stretch; }

/* ═══════ TOP BAR ═══════ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    height: var(--topbar-h);
    background: rgba(236, 238, 241, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.topbar__inner {
    max-width: var(--maxw);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 2rem;
}
.topbar__back {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--ink);
    flex-shrink: 0;
    transition: color var(--t);
}
.topbar__back:hover { color: var(--accent); }

.topbar__title {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--muted);
    padding-left: 2rem;
    border-left: 1px solid var(--line-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════ HERO ═══════ */
.cs-hero { padding: 7.2rem 0 5.6rem; }
.cs-hero h1 {
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: -.03em;
    margin-bottom: 2.4rem;
    max-width: 20ch;
}
.cs-hero__lead {
    font-size: 2.1rem;
    line-height: 1.62;
    color: var(--body);
    max-width: 62ch;
}

/* Sits inline at the end of the lead, so it reads as part of the sentence. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    vertical-align: middle;
    margin-left: 1.4rem;
    padding: .9rem 1.8rem;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    box-shadow: var(--shadow);
    transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover {
    background: var(--accent-ink);
    transform: translateY(-1px);
    box-shadow: var(--shadow-h);
}
.btn:active { transform: none; }
.btn svg { flex-shrink: 0; }


/* ═══════ PROSE ═══════ */
.prose {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 4rem;
    transition: border-color var(--t-slow), box-shadow var(--t-slow);
}
.prose:hover { border-color: var(--line-2); box-shadow: var(--shadow-h); }
.prose p {
    font-size: 1.85rem;
    line-height: 1.72;
    max-width: 66ch;
}

/* Inline emphasis inside body copy. The serif's 600 carries the weight on its
   own, so no colour shift is needed — the phrase stays part of the sentence. */
.prose p strong { font-weight: 600; color: var(--ink); }
.prose p + p { margin-top: 1.6rem; }
.prose__label {
    /* h3 isn't covered by the h1/h2 rule, so set the family here */
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--accent);
    margin: 0 0 1.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--line);
}

/* ═══════ PLACEHOLDER ═══════ */
.ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 16rem;
    padding: 3.2rem 2.4rem;
    background: var(--card);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color var(--t-slow), box-shadow var(--t-slow);
}
.ph:hover { border-color: var(--accent); box-shadow: var(--shadow-h); }
.ph__label {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent-ink);
    line-height: 1.6;
}

/* Reserve media space so nothing shifts when real files land */
.media-16x9 { aspect-ratio: 16 / 9; width: 100%; min-height: 0; }
.media-4x3  { aspect-ratio: 4 / 3;  width: 100%; min-height: 0; }

/* ═══════ CONTENTS ═══════ */
/* Rounded pills that wrap: ten sections read as a set of destinations rather
   than a ranked list, and the shape matches the stack tags further down. */
.contents { padding: 0 0 7.2rem; }
.contents__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.contents__list a {
    display: inline-flex;
    align-items: baseline;
    gap: .9rem;
    padding: .85rem 1.6rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--card);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--t), color var(--t), background var(--t);
}
.contents__list a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-tint);
}
.contents__num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.25rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.contents__list a:hover .contents__num { color: var(--accent); }

/* ═══════ ENGINEERING OUTCOMES ═══════ */
/* A definition list, not cards: these are findings of equal standing, so the
   name sits in a fixed left column and the finding runs beside it — the shape
   of a research note's margin heading. No numbering: it is a set, not a
   sequence. */
.outcomes { margin: 0; }
.outcome {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: 2.8rem;
    padding: 1.7rem 0;
    border-top: 1px solid var(--line);
}
.outcome:first-child { border-top: 0; padding-top: 0; }
.outcome:last-child { padding-bottom: 0; }
.outcome dt {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
.outcome dd {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.7;
    color: var(--body);
    max-width: 70ch;
}
/* Measured values are data, not prose — set in mono with lining figures so the
   before/after pairs align to the eye and read as readings, not adjectives. */
.fig {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .88em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
}

/* ═══════ TECHNOLOGY STACK ═══════ */
/* Grouped by layer rather than run together as one list: the grouping is the
   information — it says how the system is organised, not just what is in it. */
.stack { margin: 0; }
.stack__group {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: 2.8rem;
    align-items: baseline;
    padding: 1.2rem 0;
    border-top: 1px solid var(--line);
}
.stack__group:first-child { border-top: 0; padding-top: 0; }
.stack__group:last-child { padding-bottom: 0; }
.stack__group dt {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
}
.stack__group dd { margin: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.tech {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--body);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    padding: .5rem 1.1rem;
    white-space: nowrap;
}

/* ═══════ KEY DESIGN CHOICES ═══════ */
/* Same definition-list shape as the outcomes above, so sections 8, 9 and 10
   read as one family. The label column is wider here because these names are
   full phrases rather than two-word tags. */
.choices { margin: 0; }
.choice {
    display: grid;
    grid-template-columns: 26rem 1fr;
    gap: 2.8rem;
    padding: 1.7rem 0;
    border-top: 1px solid var(--line);
}
.choice:first-child { border-top: 0; padding-top: 0; }
.choice:last-child { padding-bottom: 0; }
.choice dt {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
.choice dd {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.7;
    color: var(--body);
    max-width: 70ch;
}

/* ═══════ DEMO VIDEO ═══════ */
.demo {
    /* The card hugs the video rather than spanning the column: once the clip is
       bounded by viewport height it no longer fills the width, and a full-width
       card would frame it in blank margins. */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: border-color var(--t-slow), box-shadow var(--t-slow);
}
.demo:hover,
.demo:focus-within { border-color: var(--accent); box-shadow: var(--shadow-h); }
.demo__video {
    display: block;
    width: 100%;
    /* Each recording keeps its own aspect ratio — the two demo sections are
       stacked, not side by side, so they don't need to match. Forcing a shared
       ratio meant either cropping content away or padding the sides. */
    height: auto;
    /* Bounded by the viewport, not just the column. The admin recording is
       taller than 16:9, so at full column width its section ran past the fold
       — height is the constraint that actually matters here.
       The width is derived from the *taller* clip's ratio (2560/1606 = 1.594)
       so both demos come out the same width, with the shorter one simply
       shorter rather than wider. */
    max-width: calc((100vh - 214px) * 1.594);
    max-height: calc(100vh - 214px);
    margin: 0 auto;
    background: var(--well);
}

/* Observability clip sits in a diagram card, so it needs the same flush fit
   as the diagram images rather than the demo video's own card chrome. */
.obs__video {
    display: block;
    width: 100%;
    height: auto;
    /* matches .diagram__zoom's padding so this card lines up with the image
       card beside it — box-sizing: border-box keeps the outer width identical */
    padding: 1.6rem 1.6rem .6rem;
    background: var(--card);
    border-radius: var(--radius) var(--radius) 0 0;
}
/* These captions are a single word, so they don't need the diagrams' breathing
   room — pull the label up close to the clip it names. */
#observability .diagram__cap { padding: 1rem 1.6rem 1.2rem; }

/* ═══════ VIDEO ENLARGE / CLOSE ═══════ */
/* The native fullscreen button expands the <video> itself, which paints over
   any sibling markup — so no close button of ours could sit on top of it. We
   hide it (WebKit only; Firefox keeps its own, where Esc still exits) and
   fullscreen the <figure> instead, which can carry an overlay. */
.demo__video::-webkit-media-controls-fullscreen-button,
.obs__video::-webkit-media-controls-fullscreen-button { display: none; }

.demo, .diagram--filled { position: relative; }

.vid-fs, .vid-fs-close {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: opacity var(--t), border-color var(--t), color var(--t);
}
.vid-fs:hover, .vid-fs-close:hover { border-color: var(--accent); color: var(--accent); }

.vid-fs {
    top: 2.2rem; right: 2.2rem;
    padding: .7rem 1.2rem;
    opacity: 0;
}
.demo:hover .vid-fs,
.diagram--filled:hover .vid-fs,
.vid-fs:focus-visible { opacity: 1; }

.vid-fs-close { display: none; }

/* `.is-fs` is set by JS on fullscreenchange rather than using :fullscreen,
   which still needs vendor prefixes and would split every rule below in two. */
.is-fs {
    background: #0b0d10;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
}
.is-fs .demo__video,
.is-fs .obs__video {
    width: auto; height: auto;
    max-width: 100vw; max-height: 100vh;
    padding: 0;
    border-radius: 0;
    background: #0b0d10;
}
.is-fs .diagram__cap,
.is-fs .vid-fs { display: none; }
.is-fs .vid-fs-close {
    display: inline-flex;
    position: fixed;
    top: 2.4rem; right: 2.4rem;
    width: 4.4rem; height: 4.4rem;
    padding: 0;
}

/* ═══════ DIAGRAM ═══════ */
.diagram { background: transparent; margin: 0; }

.diagram--filled {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: border-color var(--t-slow), box-shadow var(--t-slow);
    /* Columns are equal width, so the two diagrams differ in height. Column
       layout lets the shorter one centre in its space and pins both captions
       to the card floor, keeping the pair aligned. */
    display: flex;
    flex-direction: column;
}
.diagram--filled .diagram__zoom { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.diagram--filled .diagram__cap { margin-top: auto; }
.diagram--filled:hover,
.diagram--filled:focus-within { border-color: var(--accent); box-shadow: var(--shadow-h); }

/* The image itself is the zoom control, so the whole diagram is one target. */
.diagram__zoom {
    display: block;
    position: relative;
    width: 100%;
    padding: 1.6rem;
    background: var(--panel);
    cursor: zoom-in;
    border-radius: var(--radius) var(--radius) 0 0;
}
.diagram__zoom img {
    width: auto;
    /* Eased back from the full column width so the section sits shorter without
       shrinking the drawings to thumbnails. Width-based, not a vh cap: a
       viewport cap collapses portrait diagrams on short screens. */
    max-width: 88%;
    height: auto;
    /* Bound by the viewport so the heading and both diagrams land on one
       screen. 292px is the section's own chrome: sticky topbar, heading,
       caption and the section's bottom padding. */
    max-height: calc(100vh - 292px);
    object-fit: contain;
}
/* LangGraph is cropped tighter than the AWS drawing, so it needs the full
   column to land at the same rendered height. The panel colour is shared, so
   the differing widths read as one surface rather than two framed images. */
.diagram__zoom img.is-full {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.diagram__zoom-hint {
    position: absolute;
    right: 2.2rem;
    bottom: 2.2rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: .5rem 1rem;
    box-shadow: var(--shadow);
    /* Shown at rest, not only on hover: the diagrams are capped to fit one
       viewport, so enlarging is how anyone actually reads them. */
    opacity: 1;
    transform: none;
    transition: opacity var(--t), transform var(--t);
    pointer-events: none;
}
.diagram__zoom:hover .diagram__zoom-hint,
.diagram__zoom:focus-visible .diagram__zoom-hint { opacity: 1; transform: none; }

.diagram__cap {
    /* horizontal padding matches .diagram__zoom so the caption lines up
       with the left edge of the diagram above it */
    padding: 1.6rem 1.6rem 1.8rem;
    border-top: 1px solid var(--line);
    font-size: 1.35rem;
    color: var(--muted);
    line-height: 1.6;
}
.diagram__cap strong {
    display: block;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .3rem;
}

/* ═══════ LIGHTBOX ═══════ */
dialog.lightbox {
    width: min(96vw, 132rem);
    max-width: 96vw;
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 0 24px 70px rgba(0,0,0,.3);
    overflow: hidden;
}
dialog.lightbox::backdrop { background: rgba(26,26,26,.6); backdrop-filter: blur(3px); }
.lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.8rem 2.2rem;
    border-bottom: 1px solid var(--line);
}
.lightbox__bar h2 { font-size: 1.6rem; font-weight: 700; }
.lightbox__close {
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 50%;
    width: 3.6rem; height: 3.6rem;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: border-color var(--t), color var(--t);
}
.lightbox__close:hover { border-color: var(--accent); color: var(--accent); }
.lightbox__body {
    padding: 2rem;
    background: var(--well);
    overflow: auto;
    max-height: calc(94vh - 7.2rem);
    display: grid;
    place-items: center;
}

/* Default: the whole diagram fits on screen, no scrolling. Both diagrams are
   portrait on a landscape screen, so fitting caps the size — clicking the image
   switches to full width (and scrolling) when detail matters. */
.lightbox__body img {
    width: auto;
    max-width: 100%;
    max-height: calc(94vh - 7.2rem - 4rem);
    height: auto;
    margin: 0 auto;
    display: block;
    cursor: zoom-in;
}
dialog.lightbox.is-zoomed .lightbox__body img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    cursor: zoom-out;
}

.lightbox__hint {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--muted);
    margin-left: auto;
    margin-right: 1.6rem;
    white-space: nowrap;
}

/* ═══════ FOOTER ═══════ */
.cs-footer { padding: 2rem 0 5.6rem; font-size: 1.5rem; color: var(--muted); }
.cs-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line-2);
    padding-top: 3.2rem;
}
.cs-footer a { color: var(--ink); transition: color var(--t); }
.cs-footer a:hover { color: var(--accent); }
.cs-footer__links { display: flex; flex-wrap: wrap; gap: 2.4rem; }

/* ═══════ REVEAL ═══════ */
/* Gated on `html.js` so the page is fully visible if the script never runs. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .diagram__zoom-hint { opacity: 1; transform: none; }
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1200px) {
    html { font-size: 58%; }
    :root { --gutter: 3.2rem; }
    .cs-hero h1 { font-size: 4.6rem; }
    .cs-hero__lead { font-size: 1.9rem; }
}

@media (max-width: 991px) {
    :root { --gutter: 2.4rem; }

    .heading__meta {
        display: block;
        margin: .8rem 0 0;
        padding: 0;
        border-left: 0;
    }

    .cs-hero { padding: 5.6rem 0 4.8rem; }
    .cs-hero h1 { font-size: 4rem; }
    .split, .split--diagrams { grid-template-columns: 1fr; }
    .outcome { grid-template-columns: 1fr; gap: .8rem; }
    .stack__group { grid-template-columns: 1fr; gap: 1.2rem; }
    .choice { grid-template-columns: 1fr; gap: .8rem; }
    .diagram__zoom img { max-height: none; }
    .cs-section { padding-bottom: 5.6rem; }
    .prose { padding: 3.2rem; }
}

@media (max-width: 768px) {
    html { font-size: 53%; }
    .cs-hero h1 { font-size: 3.6rem; }
    .cs-hero__lead { font-size: 1.8rem; }
}

@media (max-width: 540px) {
    html { font-size: 50%; }
    :root { --gutter: 1.8rem; --radius: 14px; }
    .cs-hero h1 { font-size: 3.2rem; }
    .prose { padding: 2.4rem; }
}

@media print {
    .topbar { display: none !important; }
    body { background: #fff; }
    .reveal { opacity: 1 !important; transform: none !important; }
}