/* ==========================================================================
   Socratic Tutor
   One long scroll documenting the app. Dark full-viewport "stages" carry the
   statements; editorial "chapters" carry the story and the screenshots.
   Layout and components follow love.avi.nyc; the palette and type follow
   avi.nyc / talks.avi.nyc (black stage, burgundy / cyan / amber lights,
   Playfair Display + DM Sans). Light and dark, with a toggle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Page surface (light) */
    --bg: #ffffff;
    --panel: #f7f7f5;
    --panel-2: #efeeea;
    --ink: #111111;
    --text: #333333;
    --text-soft: #4a4a4a;
    --muted: #6b6b68;
    --rule: #ececea;
    --border: #dedddb;
    --border-strong: #c9c8c4;

    /* Accents on this surface */
    --burgundy: #b8406f;
    --burgundy-soft: rgba(199, 75, 122, 0.12);
    --cyan: #157f78;
    --cyan-soft: rgba(78, 205, 196, 0.16);
    --amber: #9a6512;
    --amber-soft: rgba(232, 168, 73, 0.18);

    /* Stage surface: always black, in either theme */
    --stage: #000000;
    --stage-2: #0b0b0c;
    --stage-rule: #2a2a2c;
    --on-stage: #ffffff;
    --on-stage-soft: #c9c8c2;
    --on-stage-muted: #8a8a88;
    --stage-burgundy: #C74B7A;
    --stage-cyan: #4ECDC4;
    --stage-amber: #E8A849;

    /* Gradient: the three stage lights */
    --grad-a: #C74B7A;
    --grad-b: #E8A849;
    --grad-c: #4ECDC4;

    /* Chat bubbles in the HTML transcripts */
    --bubble-student: #ffffff;
    --bubble-student-border: #dedddb;

    /* Code */
    --code-bg: #f7f7f5;
    --code-border: #e4e3df;
    --code-text: #2b2b2a;
    --tok-kw: #a3571a;
    --tok-str: #b0452b;
    --tok-key: #1f6fb2;
    --tok-num: #257a4c;
    --tok-cmt: #6f6f6b;
    --tok-tag: #b8406f;

    /* Type */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

    /* Layout */
    --container: 1160px;
    --gutter: 40px;
    --nav-height: 64px;

    --shadow: 0 12px 32px rgba(17, 17, 17, 0.12);
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* Dark tokens: system preference, unless the toggle says light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #000000;
        --panel: #080808;
        --panel-2: #0f0f0f;
        --ink: #ffffff;
        --text: #b8b8b8;
        --text-soft: #a0a0a0;
        --muted: #7a7a7a;
        --rule: #1a1a1a;
        --border: #2a2a2a;
        --border-strong: #3a3a3a;
        --burgundy: #D95E8B;
        --burgundy-soft: rgba(199, 75, 122, 0.18);
        --cyan: #4ECDC4;
        --cyan-soft: rgba(78, 205, 196, 0.14);
        --amber: #E8A849;
        --amber-soft: rgba(232, 168, 73, 0.16);
        --bubble-student: #121212;
        --bubble-student-border: #2a2a2a;
        --code-bg: #0b0b0c;
        --code-border: #2a2a2c;
        --code-text: #d8d8d4;
        --tok-kw: #e8a849;
        --tok-str: #ff8a7a;
        --tok-key: #7cc4ff;
        --tok-num: #7fd9a6;
        --tok-cmt: #7a7a78;
        --tok-tag: #d95e8b;
        --shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    }
}
/* Dark tokens: the toggle says dark */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #000000;
    --panel: #080808;
    --panel-2: #0f0f0f;
    --ink: #ffffff;
    --text: #b8b8b8;
    --text-soft: #a0a0a0;
    --muted: #7a7a7a;
    --rule: #1a1a1a;
    --border: #2a2a2a;
    --border-strong: #3a3a3a;
    --burgundy: #D95E8B;
    --burgundy-soft: rgba(199, 75, 122, 0.18);
    --cyan: #4ECDC4;
    --cyan-soft: rgba(78, 205, 196, 0.14);
    --amber: #E8A849;
    --amber-soft: rgba(232, 168, 73, 0.16);
    --bubble-student: #121212;
    --bubble-student-border: #2a2a2a;
    --code-bg: #0b0b0c;
    --code-border: #2a2a2c;
    --code-text: #d8d8d4;
    --tok-kw: #e8a849;
    --tok-str: #ff8a7a;
    --tok-key: #7cc4ff;
    --tok-num: #7fd9a6;
    --tok-cmt: #7a7a78;
    --tok-tag: #d95e8b;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background var(--transition-base), color var(--transition-base);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--ink); }
ul, ol { list-style: none; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
::selection { background: var(--stage-burgundy); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.1;
}

.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    background: var(--stage-amber);
    color: #000;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-weight: 600;
}
.skip:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.kicker--ink { color: var(--ink); }
.kicker--on-dark { color: var(--on-stage-muted); }
.kicker--burgundy { color: var(--burgundy); }
.kicker--cyan { color: var(--cyan); }
.kicker--amber { color: var(--amber); }

.lead { font-size: 22px; line-height: 1.45; color: var(--text); }
.measure { max-width: 640px; }
.note { font-size: 15px; color: var(--muted); line-height: 1.55; }
.note strong { color: var(--text-soft); }
.note code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-soft); }
p code, li code, dd code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--panel-2);
    border-radius: 3px;
    padding: 0.05em 0.35em;
    color: var(--ink);
}

.caption {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted);
    line-height: 1.5;
}
.caption--on-dark { color: var(--on-stage-muted); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: 100px;
    background: var(--stage-burgundy);
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover { background: #D95E8B; color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; border-color: var(--stage-rule); color: var(--on-stage-soft); }
.btn--ghost:hover { background: transparent; color: var(--on-stage); border-color: var(--on-stage-muted); }
.btn--chapter { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--chapter:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* Screenshots open in the lightbox. */
.shot {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    cursor: zoom-in;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.shot:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.shot--on-dark { border-color: var(--stage-rule); }

/* Layout primitives */
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack--tight { gap: 12px; }
.stack--loose { gap: 32px; }
.captioned { display: flex; flex-direction: column; gap: 10px; }

.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
}
.split > *, .stack > * { min-width: 0; }
.split--center { align-items: center; }
.split--wide-right { grid-template-columns: 1fr 1.5fr; }
.split--wide-left { grid-template-columns: 1.5fr 1fr; }
.split--ruled {
    padding: 40px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.pull-quote {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--ink);
    text-wrap: balance;
}
.pull-quote--sm { font-size: 26px; }
.pull-quote--lg { font-size: clamp(28px, 3.2vw, 38px); }
.pull-quote em { color: var(--burgundy); }

.prose { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.prose p { line-height: 1.65; }

/* Code block */
.code {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 6px;
    padding: 22px 26px;
    color: var(--code-text);
    overflow-x: auto;
    tab-size: 2;
    white-space: pre;
}
.code--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.code--sm { font-size: 13px; }
.tok-kw { color: var(--tok-kw); }
.tok-str { color: var(--tok-str); }
.tok-key { color: var(--tok-key); }
.tok-num { color: var(--tok-num); }
.tok-cmt { color: var(--tok-cmt); font-style: italic; }
.tok-tag { color: var(--tok-tag); }

/* Captioned code: a label on top */
.codeblock { display: flex; flex-direction: column; gap: 10px; }
.codeblock__label {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.codeblock__label span:last-child { color: var(--burgundy); text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Navigation
   Light-on-black over the hero; takes the page surface once scrolled past it.
   -------------------------------------------------------------------------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--stage);
    color: var(--on-stage);
    border-bottom: 1px solid var(--stage-rule);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.nav--light {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--ink);
    border-bottom-color: var(--rule);
}

.nav__container {
    height: 100%;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.nav__logo { display: flex; align-items: center; gap: 12px; color: inherit; }
.nav__logo:hover { color: var(--stage-burgundy); }
.nav--light .nav__logo:hover { color: var(--burgundy); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__link { position: relative; color: inherit; opacity: 0.85; }
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 1px;
    background: currentColor;
    transition: width var(--transition-base);
}
.nav__link:hover, .nav__link.active { color: inherit; opacity: 1; }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.nav__right { display: flex; align-items: center; gap: 20px; }
.nav__byline { opacity: 0.7; }

/* Theme toggle: sun / moon */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.8;
    position: relative;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.theme-toggle:hover { opacity: 1; transform: rotate(15deg); }
/* A 44px hit area on touch screens, without growing the ring. */
.theme-toggle::after, .nav__toggle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
}
@media (pointer: fine) { .theme-toggle::after, .nav__toggle::after { display: none; } }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}

.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: inherit;
    position: relative;
}
.nav__toggle span {
    display: block;
    width: 24px; height: 2px;
    background: currentColor;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

@media (max-width: 960px) {
    /* No backdrop blur here: a filter makes the nav the containing block
       for the fixed menu panel, which then cannot reach the viewport. */
    .nav--light { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
    .nav__container { padding: 0 24px; }
    .nav__byline { display: none; }
    .nav__toggle { display: flex; }
    /* The menu is the chapter list, set like the agenda on the poster:
       numbered, in the display face, one per row. */
    .nav__links {
        position: fixed;
        top: var(--nav-height); left: 0; right: 0; bottom: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 16px 24px 40px;
        overflow-y: auto;
        background: var(--stage);
        color: var(--on-stage);
        counter-reset: chapter;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
    }
    .nav--light .nav__links { background: var(--bg); color: var(--ink); }
    .nav__links.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
    .nav__links li { counter-increment: chapter; border-bottom: 1px solid var(--stage-rule); }
    .nav--light .nav__links li { border-bottom-color: var(--rule); }
    .nav__link {
        display: flex;
        align-items: baseline;
        gap: 16px;
        padding: 22px 0;
        font-family: var(--font-display);
        font-size: 30px;
        font-weight: 600;
        letter-spacing: -0.015em;
        text-transform: none;
        opacity: 1;
    }
    .nav__link::before {
        content: counter(chapter, decimal-leading-zero);
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.12em;
        color: var(--on-stage-muted);
        min-width: 2.5ch;
    }
    .nav--light .nav__link::before { color: var(--muted); }
    .nav__link::after { display: none; }
    .nav__link.active { color: var(--stage-burgundy); }
    .nav--light .nav__link.active { color: var(--burgundy); }
    .nav__link.active::before { color: inherit; }
    .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}

/* --------------------------------------------------------------------------
   Hero: the poster
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-height) + 64px) 48px 56px;
    background: var(--stage);
    color: var(--on-stage);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 56px;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 20% 0%, rgba(199, 75, 122, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 30%, rgba(78, 205, 196, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 70% 95%, rgba(232, 168, 73, 0.10) 0%, transparent 55%);
    animation: heroGlow 9s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}
@keyframes heroGlow {
    from { opacity: 0.7; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.06); }
}
/* Spotlight dots, the one bit of stagecraft from talks.avi.nyc */
.hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 70%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000, transparent 90%);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%);
    pointer-events: none;
    z-index: 0;
}

.hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: center;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}

.hero__inner {
    display: flex;
    flex-direction: column;
    gap: 26px;
    animation: fadeInUp 0.8s ease both;
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(56px, 8.4vw, 124px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--on-stage);
    display: flex;
    flex-direction: column;
}
.hero__title-gradient {
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b) 55%, var(--grad-c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.08em;
    font-style: italic;
    font-weight: 700;
}

.hero__subtitle {
    max-width: 560px;
    font-size: 21px;
    line-height: 1.45;
    color: var(--on-stage-soft);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The poster image: a browser frame with a phone tucked in the corner */
.hero__poster {
    position: relative;
    padding-bottom: 12%;
    padding-right: 10%;
    animation: fadeIn 1.2s ease 0.3s both;
}
.frame {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.frame--desktop { transform: rotate(-1.5deg); background: #111; }
.frame__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #1c1c1e;
}
.frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3c; }
.frame__bar i:nth-child(1) { background: #ff5f57; }
.frame__bar i:nth-child(2) { background: #febc2e; }
.frame__bar i:nth-child(3) { background: #28c840; }
.frame__url {
    margin-left: 10px;
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #9a9a9e;
    background: #0c0c0d;
    border-radius: 5px;
    padding: 3px 10px;
}
.frame--mobile {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28%;
    max-width: 200px;
    border-radius: 18px;
    border: 5px solid #1c1c1e;
    background: #1c1c1e;
    transform: rotate(4deg);
    aspect-ratio: 390 / 844;
}
.frame--mobile img { height: 100%; object-fit: cover; object-position: top; }

.hero__agenda {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--on-stage);
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    animation: fadeInUp 0.8s ease 0.2s both;
}
.agenda {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px 18px 0;
    border-right: 1px solid var(--stage-rule);
    color: inherit;
}
.agenda + .agenda { padding-left: 24px; }
.agenda:last-child { border-right: none; padding-right: 0; }
.agenda:hover { color: inherit; }
.agenda:hover .agenda__title { color: var(--stage-amber); }
.agenda__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--on-stage);
    transition: color var(--transition-fast);
}
.agenda__text { font-size: 15px; color: var(--on-stage-muted); line-height: 1.45; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
    .hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .hero__poster { max-width: 720px; }
    .hero__agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agenda:nth-child(2) { border-right: none; padding-right: 0; }
    .agenda:nth-child(3) { padding-left: 0; }
    .agenda:nth-child(-n+2) { border-bottom: 1px solid var(--stage-rule); }
}
@media (max-width: 760px) {
    .hero { padding: calc(var(--nav-height) + 40px) 24px 40px; gap: 44px; }
    .hero__subtitle { font-size: 18px; }
    .hero__agenda { grid-template-columns: 1fr; }
    .agenda, .agenda + .agenda { border-right: none; border-bottom: 1px solid var(--stage-rule); padding: 18px 0; }
    .agenda:last-child { border-bottom: none; }
    .agenda__title { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   Stages: the statements
   -------------------------------------------------------------------------- */
.stage {
    position: relative;
    min-height: 70vh;
    min-height: 70svh;
    padding: 96px var(--gutter);
    background: var(--stage);
    color: var(--on-stage);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}
.stage--tall { min-height: 100vh; min-height: 100svh; }
.stage--short { min-height: 50vh; min-height: 50svh; }
.stage--glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(199, 75, 122, 0.14) 0%, transparent 70%);
    pointer-events: none;
}
.stage--cyan-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(78, 205, 196, 0.12), transparent 70%);
    pointer-events: none;
}
.stage--amber-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(232, 168, 73, 0.12), transparent 65%);
    pointer-events: none;
}

.stage__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    max-width: 980px;
}
.stage__inner--wide { max-width: var(--container); width: 100%; gap: 56px; }
.stage__inner--left { align-items: flex-start; text-align: left; }

.stage__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: inherit;
    text-wrap: balance;
}
.stage__title em { font-style: italic; color: var(--stage-amber); }
.stage__title .cyan { color: var(--stage-cyan); }
.stage__title .burgundy { color: var(--stage-burgundy); }
.stage__title--md { font-size: clamp(32px, 4.2vw, 56px); }

.stage__lead {
    font-size: 22px;
    line-height: 1.45;
    color: var(--on-stage-soft);
    max-width: 640px;
}
.stage__lead em { color: var(--on-stage); font-style: italic; }

.stage__quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(26px, 3.4vw, 42px);
    line-height: 1.25;
    color: var(--on-stage);
    max-width: 900px;
    text-wrap: pretty;
}
.stage__quote .highlight { color: var(--stage-amber); }
.stage__cite {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-stage-muted);
}

/* The three context types, on a stage */
.three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}
.three__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--stage-rule);
    padding-top: 20px;
    text-align: left;
    color: inherit;
    transition: border-color var(--transition-base);
}
.three__item:hover { border-top-color: var(--on-stage); }
.three__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; }
.three__item:nth-child(1) .three__num { color: var(--stage-burgundy); }
.three__item:nth-child(2) .three__num { color: var(--stage-cyan); }
.three__item:nth-child(3) .three__num { color: var(--stage-amber); }
.three__title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--on-stage);
}
.three__text { font-size: 16px; color: var(--on-stage-soft); line-height: 1.5; }
.three__text code { font-family: var(--font-mono); font-size: 0.9em; color: var(--on-stage); }

@media (max-width: 900px) {
    .stage { padding: 72px 24px; }
    .stage__quote { font-size: 26px; }
    .three { grid-template-columns: 1fr; gap: 20px; }
    .three__title { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   Chapters: the narrative
   -------------------------------------------------------------------------- */
.chapter { padding: 0 0 120px; background: var(--bg); }
.chapter--quiet { padding: 0 0 96px; }

/* Section header: a full-bleed band on the panel surface under the nav.
   The brand gradient draws its top edge, the chapter index on the left
   says where this page sits in the sequence, and the title gets room. */
.chapter__head {
    position: relative;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    padding: calc(var(--nav-height) + 88px) var(--gutter) 72px;
    overflow: hidden;
}
/* The band starts under the fixed nav, so its edge sits just below it. */
.chapter__head::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: var(--nav-height);
    height: 2px;
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
}
.chapter__head::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 70% at 100% 0%, color-mix(in srgb, var(--grad-a) 9%, transparent), transparent 70%);
}
.chapter__head-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
}
.chapter__head-aside {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 10px;
}
/* The chapter index already marks this page, and the sticky aside in the
   body repeats the label, so the kicker here would be the third copy. */
.chapter__head-aside .chapter__kicker { display: none; }
.chapter__head-body {
    grid-column: span 9;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.chapter__kicker { color: var(--burgundy); }

/* The chapter index: the four pages in order, this one marked. */
.chapters {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.chapters__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0 6px 14px;
    border-left: 2px solid transparent;
    color: var(--muted);
    transition: border-color var(--transition-fast);
}
.chapters__num { color: var(--border-strong); min-width: 2ch; }
.chapters__item:hover { color: var(--ink); border-left-color: var(--border-strong); }
.chapters__item.active { color: var(--ink); border-left-color: var(--burgundy); }
.chapters__item.active .chapters__num { color: var(--burgundy); }

.chapter__container {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    padding: 72px var(--gutter) 0;
}
.chapter__wide { max-width: var(--container); margin: 0 auto; }
.chapter__aside { grid-column: span 3; }
.chapter__aside--sticky { position: sticky; top: calc(var(--nav-height) + 24px); align-self: start; }
.chapter__aside .kicker--ink { color: var(--muted); }
.chapter__body {
    grid-column: span 9;
    display: flex;
    flex-direction: column;
    gap: 56px;
}
.chapter__header { display: flex; flex-direction: column; gap: 20px; }
.chapter__title {
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    max-width: 18ch;
    text-wrap: balance;
}
.chapter__title em { font-style: italic; color: var(--burgundy); }
.chapter__sub {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.15;
}

/* Reveal on scroll. Only hidden once the script has run (html.js), so the
   content is there without JavaScript, in print, and in a full-page capture. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
@media print { .js .reveal { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
    .chapter__container { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .chapter__aside, .chapter__body { grid-column: auto; }
    .chapter__aside--sticky { position: static; }
    .chapter__aside { display: none; }
    .chapter__head { padding: calc(var(--nav-height) + 56px) var(--gutter) 48px; }
    .chapter__head-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .chapter__head-aside, .chapter__head-body { grid-column: auto; }
    .chapter__head-aside { padding-top: 0; gap: 20px; flex-direction: column-reverse; }
    .chapter__head-aside .chapter__kicker { display: none; }
    .chapters { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
    .chapters__item { padding: 4px 0; border-left: 0; border-bottom: 2px solid transparent; gap: 8px; }
    .chapters__item.active { border-left-color: transparent; border-bottom-color: var(--burgundy); }
    .chapters__item:hover { border-left-color: transparent; }
}

@media (max-width: 768px) {
    body { font-size: 17px; }
    :root { --gutter: 24px; }
    .chapter { padding: 0 0 80px; }
    .chapter--quiet { padding: 0 0 64px; }
    .chapter__container { padding-top: 48px; }
    .chapter__head { padding: calc(var(--nav-height) + 44px) var(--gutter) 40px; }
    .chapter__head-body { gap: 18px; }
    .chapter__title { max-width: none; }
    .lead { font-size: 20px; }
    .split, .split--wide-right, .split--wide-left { grid-template-columns: 1fr; gap: 28px; }
    .pull-quote { font-size: 26px; }
    .pull-quote--sm { font-size: 23px; }
    .code { font-size: 13px; padding: 18px; }
}

/* --------------------------------------------------------------------------
   Components particular to this site
   -------------------------------------------------------------------------- */

/* Transcript: a real exchange, rendered as the app renders it */
.exchange {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
}
.exchange__turn { display: flex; flex-direction: column; gap: 4px; max-width: 86%; }
.exchange__turn--student { align-self: flex-end; align-items: flex-end; }
.exchange__turn--tutor { align-self: flex-start; }
.exchange__who {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.exchange__turn--student .exchange__who { color: var(--burgundy); }
.exchange__turn--tutor .exchange__who { color: var(--cyan); }
.exchange__bubble {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}
.exchange__turn--student .exchange__bubble {
    background: var(--bubble-student);
    border: 1px solid var(--bubble-student-border);
    border-radius: 14px;
    padding: 12px 16px;
}
.exchange__turn--tutor .exchange__bubble { padding: 4px 0; color: var(--text); }
.exchange__turn--tutor .exchange__bubble ol { list-style: decimal; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.exchange__turn--tutor .exchange__bubble code { font-family: var(--font-mono); font-size: 0.9em; }
.exchange__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.exchange__meta span {
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 2px 10px;
}
.exchange__meta .is-level { color: var(--amber); border-color: var(--amber); }
.exchange__meta .is-method { color: var(--cyan); border-color: var(--cyan); }
.exchange--on-dark { background: var(--stage-2); border-color: var(--stage-rule); text-align: left; width: 100%; }
.exchange--on-dark .exchange__bubble { color: var(--on-stage); }
.exchange--on-dark .exchange__turn--tutor .exchange__bubble { color: var(--on-stage-soft); }
.exchange--on-dark .exchange__turn--student .exchange__bubble { background: #141415; border-color: var(--stage-rule); }
.exchange--on-dark .exchange__meta span { border-color: var(--stage-rule); }

/* The helpfulness scale */
.scale { display: flex; flex-direction: column; gap: 14px; }
.scale__bar {
    position: relative;
    height: 14px;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--grad-c) 0%, var(--grad-b) 60%, var(--grad-a) 100%);
}
.scale__ticks {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}
.scale__bands {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.scale__band {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 2px solid var(--border-strong);
    padding-top: 10px;
    min-width: 0;
}
.scale__band:nth-child(1) { border-top-color: var(--cyan); }
.scale__band:nth-child(2) { border-top-color: color-mix(in srgb, var(--cyan), var(--amber)); }
.scale__band:nth-child(3) { border-top-color: var(--amber); }
.scale__band:nth-child(4) { border-top-color: color-mix(in srgb, var(--amber), var(--burgundy)); }
.scale__band:nth-child(5) { border-top-color: var(--burgundy); }
.scale__range { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.scale__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); line-height: 1.1; }
.scale__desc { font-size: 14px; color: var(--text); line-height: 1.4; }
@media (max-width: 760px) {
    .scale__bands { grid-template-columns: 1fr; }
}

/* Side-by-side comparison of two levels */
.compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.compare__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.compare__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}
.compare__level {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}
.compare__col:nth-child(1) .compare__level { color: var(--cyan); }
.compare__col:nth-child(2) .compare__level { color: var(--burgundy); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* Pipeline: the numbered steps of a message's life */
.pipeline { display: flex; flex-direction: column; counter-reset: step; }
.pipeline__step {
    counter-increment: step;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--rule);
}
.pipeline__step:last-child { border-bottom: 1px solid var(--rule); }
.pipeline__step::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 26px;
    color: var(--burgundy);
    line-height: 1;
    padding-top: 2px;
}
.pipeline__title { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.pipeline__text { font-size: 16px; color: var(--text); line-height: 1.55; }
.pipeline__text code { font-size: 0.86em; }
.pipeline__where { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* Method cards: RTF / RISE / BAB / TAG / CARE */
.methods {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.method {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    min-width: 0;
}
.method__code {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
}
.method:nth-child(1) .method__code { color: var(--burgundy); }
.method:nth-child(2) .method__code { color: var(--cyan); }
.method:nth-child(3) .method__code { color: var(--amber); }
.method:nth-child(4) .method__code { color: var(--burgundy); }
.method:nth-child(5) .method__code { color: var(--cyan); }
.method__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.method__when { font-size: 14px; color: var(--text); line-height: 1.45; }
@media (max-width: 1024px) { .methods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .methods { grid-template-columns: 1fr 1fr; } }

/* The message log: what the student sees versus what the model sees */
.log { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 13px; }
.log__row {
    display: grid;
    grid-template-columns: 90px 70px minmax(0, 1fr);
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}
.log__row:last-child { border-bottom: none; }
.log__role { color: var(--muted); }
.log__perm {
    display: inline-block;
    border-radius: 100px;
    padding: 1px 9px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-align: center;
}
.log__perm--admin { background: var(--burgundy-soft); color: var(--burgundy); }
.log__perm--user { background: var(--cyan-soft); color: var(--cyan); }
.log__text { color: var(--text); overflow-wrap: anywhere; line-height: 1.5; }
.log__row--hidden .log__text { color: var(--muted); font-style: italic; }
@media (max-width: 640px) {
    .log__row { grid-template-columns: 70px 60px minmax(0, 1fr); gap: 10px; }
}

/* Facts list (stack) */
.facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 28px;
}
.facts div { border-top: 1px solid var(--border-strong); padding-top: 12px; min-width: 0; }
.facts dt { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--muted); margin-bottom: 4px; }
.facts dd { font-size: 16px; line-height: 1.45; color: var(--ink); }
.facts dd small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* A row of phone screenshots */
.phones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
}
.phone {
    border-radius: 24px;
    border: 6px solid #1c1c1e;
    background: #1c1c1e;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.phone img { cursor: zoom-in; border: 0; border-radius: 0; box-shadow: none; }
.phone img:hover { transform: none; box-shadow: none; }
@media (max-width: 640px) { .phones { grid-template-columns: 1fr; max-width: 320px; } }

/* Status pills used in copy */
.pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    border-radius: 100px;
    padding: 2px 10px;
    vertical-align: middle;
}
.pill--green { background: rgba(40, 200, 64, 0.16); color: #197a30; }
:root[data-theme="dark"] .pill--green { color: #5fd77a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill--green { color: #5fd77a; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--rule); padding: 0 48px; background: var(--bg); }
.footer__container {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.footer__content { display: flex; align-items: center; gap: 24px; }
.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
}
.footer__text { font-size: 15px; color: var(--muted); }
.footer__meta { display: flex; align-items: center; gap: 24px; font-size: 15px; }

@media (max-width: 640px) {
    .footer { padding: 0 24px; }
    .footer__container { height: auto; padding: 24px 0; flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer__content { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Logo mark: a question mark in the three lights */
.mark { display: inline-block; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.96);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.active { opacity: 1; visibility: visible; }

.lightbox__content {
    max-width: 92vw;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__image {
    max-width: 100%;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform 0.3s ease;
}
.lightbox.active .lightbox__image { transform: scale(1); }

.lightbox__close, .lightbox__prev, .lightbox__next {
    position: absolute;
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 10;
}
.lightbox__close { top: 20px; right: 20px; font-size: 30px; line-height: 1; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); font-size: 26px; }
.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }
.lightbox__close:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.06); }
.lightbox__prev:hover, .lightbox__next:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-50%) scale(1.06); }
.lightbox__prev:disabled, .lightbox__next:disabled { opacity: 0.3; cursor: not-allowed; }
.lightbox__prev:disabled:hover, .lightbox__next:disabled:hover { transform: translateY(-50%); background: rgba(255, 255, 255, 0.08); }

.lightbox__caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: #c9c8c2;
    max-width: min(70ch, 90vw);
    text-wrap: pretty;
}
.lightbox__caption:empty { display: none; }
@media (max-width: 640px) {
    /* Keep the arrows off the image: they sit under it with the caption. */
    .lightbox__content { max-height: 70vh; }
    .lightbox__image { max-height: 70vh; }
    .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; transform: none; width: 44px; height: 44px; }
    .lightbox__prev:hover, .lightbox__next:hover, .lightbox__prev:disabled:hover, .lightbox__next:disabled:hover { transform: none; }
    .lightbox__caption { bottom: 76px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Brand: mark and wordmark
   The mark is a speech bubble holding a question mark drawn in the three
   lights: burgundy to amber stroke, cyan dot. The bubble takes currentColor
   so it reads on either surface.
   -------------------------------------------------------------------------- */
.mark { display: inline-block; flex-shrink: 0; color: var(--ink); }
.nav .mark { color: var(--on-stage); }
.nav--light .mark { color: var(--ink); }

.wordmark {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: -0.01em;
    text-transform: none;
    line-height: 1;
    white-space: nowrap;
}
.wordmark__a { font-weight: 600; }
.wordmark__b {
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.wordmark--sm { font-size: 17px; }
.nav__logo:hover .wordmark__a { color: var(--stage-amber); }
.nav--light .nav__logo:hover .wordmark__a { color: var(--burgundy); }
.footer__logo { color: var(--ink); }

/* --------------------------------------------------------------------------
   Pager: the way back at the foot of each page. The pull block handles
   forward, so this is a quiet row: a rule, then "Previous". The last page
   has no pull, so its pager becomes the ending: an end mark, the way back,
   and the way to the start, with room to breathe after the black stage.
   -------------------------------------------------------------------------- */
.pager {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter) 72px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    background: var(--bg);
}
.pager[hidden] { display: none; }
.pager__prev, .pager__home {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--ink);
}
.pager__prev[hidden], .pager__home[hidden], .pager__end[hidden] { display: none; }
.pager__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.pager__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    transition: color var(--transition-fast);
}
.pager__prev .pager__title::before { content: '\2190\00a0'; color: var(--muted); }
.pager__prev:hover .pager__title, .pager__home:hover .pager__title { color: var(--burgundy); }

.pager--end {
    padding: 96px var(--gutter) 112px;
    align-items: flex-start;
}
.pager__end {
    flex-basis: 100%;
    width: 100%;
    color: var(--burgundy);
    padding-bottom: 28px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 16px;
}
.pager--end .pager__home { text-align: right; align-items: flex-end; }
.pager--end .pager__title { font-size: 28px; }

@media (max-width: 640px) {
    .pager { padding-bottom: 56px; }
    .pager__title { font-size: 20px; }
    .pager--end { padding: 64px var(--gutter) 72px; flex-direction: column; align-items: flex-start; gap: 28px; }
    .pager--end .pager__home { text-align: left; align-items: flex-start; }
    .pager--end .pager__title { font-size: 24px; }
    .pager__end { margin-bottom: 0; padding-bottom: 20px; }
}

/* --------------------------------------------------------------------------
   Page transition: a short fade on the way out, a short fade on the way in
   -------------------------------------------------------------------------- */
body.page { animation: pageIn 0.28s ease both; }
body.is-leaving { opacity: 0; transition: opacity 0.18s ease; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    body.page { animation: none; }
    body.is-leaving { opacity: 1; }
}

/* --------------------------------------------------------------------------
   View transitions
   Page to page: one motion. The nav, logo and theme toggle hold still; the
   rest of the old page lifts away while the new page rises in under it, on
   the same curve and clock, so text, images and footer travel together.
   Back reverses it. 360ms, transform and opacity only. Lightbox: the
   thumbnail grows into the full image and back, with nothing else moving.
   Browsers without support get the plain navigation and the plain lightbox.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

html { background: var(--bg); }

@supports (view-transition-name: a) {
    .nav { view-transition-name: nav; }
    .nav__logo { view-transition-name: logo; }
    .theme-toggle { view-transition-name: theme-toggle; }
    .lightbox { view-transition-name: lightbox-backdrop; }
    /* The native transition replaces the script's fallback fade. */
    body.page { animation: none; }
    body.is-leaving { opacity: 1; transition: none; }
    .lightbox { transition: none; }
    .lightbox__image { transition: none; transform: none; }
    .lightbox.active .lightbox__image { transform: none; }

    /* Held still: the nav swaps in place with no motion. */
    ::view-transition-group(nav),
    ::view-transition-group(logo),
    ::view-transition-group(theme-toggle) { animation: none; z-index: 20; }
    ::view-transition-old(nav), ::view-transition-new(nav),
    ::view-transition-old(logo), ::view-transition-new(logo),
    ::view-transition-old(theme-toggle), ::view-transition-new(theme-toggle) { animation: none; mix-blend-mode: normal; }
    ::view-transition-new(nav), ::view-transition-new(logo), ::view-transition-new(theme-toggle) { opacity: 1; }
    ::view-transition-old(nav), ::view-transition-old(logo), ::view-transition-old(theme-toggle) { opacity: 0; }

    /* The page: old and new share one 360ms curve, so they move as a unit. */
    ::view-transition-group(root) { animation-duration: 0.36s; }
    ::view-transition-old(root) { animation: 0.36s cubic-bezier(0.32, 0, 0.16, 1) both vt-lift; }
    ::view-transition-new(root) { animation: 0.36s cubic-bezier(0.32, 0, 0.16, 1) both vt-rise; }
    html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-drop; }
    html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-descend; }

    /* The lightbox transition moves only the image and its backdrop. */
    html:active-view-transition-type(lightbox)::view-transition-group(root),
    html:active-view-transition-type(lightbox)::view-transition-old(root),
    html:active-view-transition-type(lightbox)::view-transition-new(root),
    html:active-view-transition-type(lightbox)::view-transition-group(nav),
    html:active-view-transition-type(lightbox)::view-transition-group(logo),
    html:active-view-transition-type(lightbox)::view-transition-group(theme-toggle) { animation: none; }
    html:active-view-transition-type(lightbox)::view-transition-old(root) { opacity: 1; }
    html:active-view-transition-type(lightbox)::view-transition-new(root) { opacity: 0; }

    /* Lightbox: the thumbnail flies to the full image; the backdrop fades. */
    ::view-transition-group(shot) { animation-duration: 0.38s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
    ::view-transition-old(shot), ::view-transition-new(shot) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: contain; }
    ::view-transition-old(shot) { display: none; }
    ::view-transition-old(lightbox-backdrop) { animation: 0.24s ease both vt-fade-out; }
    ::view-transition-new(lightbox-backdrop) { animation: 0.28s ease both vt-fade-in; }
}

/* Forward: everything travels up. Back: everything travels down. */
@keyframes vt-lift { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vt-drop { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(40px); } }
@keyframes vt-descend { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
        animation-duration: 0.12s !important;
        animation-delay: 0s !important;
        animation-name: none !important;
    }
    ::view-transition-old(root) { animation-name: vt-fade-out !important; }
    ::view-transition-new(root) { animation-name: vt-fade-in !important; }
}

/* --------------------------------------------------------------------------
   Pull to advance
   A teaser of the next section sits after the content. The native scroller
   moves through it, a view() timeline lifts the kicker, title and first
   line as it comes into view and fills the progress bar, and main.js
   navigates once the zone is nearly all on screen and the scroll has
   settled. The cross-document transition then carries the whole page
   on in the same direction the teaser was already moving.
   -------------------------------------------------------------------------- */
.pull {
    position: relative;
    min-height: 68vh;
    min-height: 68svh;
    padding: 72px var(--gutter) 8vh;
    background: var(--bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    view-timeline-name: --pull;
    view-timeline-axis: block;
}
.pull[hidden] { display: none; }
.pull__inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.pull__cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.pull__bar {
    display: block;
    width: 160px;
    height: 3px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
}
.pull__bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
    transform-origin: left;
    transform: scaleX(0);
}
.pull__hint--go { display: none; color: var(--burgundy); }
.pull.is-ready .pull__hint--more { display: none; }
.pull.is-ready .pull__hint--go { display: inline; }
.pull.is-ready .pull__bar i { background: var(--burgundy); }
.pull__kicker { color: var(--burgundy); }
.pull__title {
    font-family: var(--font-display);
    font-size: clamp(34px, 4.6vw, 54px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: var(--ink);
    text-wrap: balance;
}
.pull__title:hover { color: var(--burgundy); }
.pull__desc { font-size: 17px; color: var(--muted); max-width: 46ch; line-height: 1.5; }
.pull__kicker, .pull__title, .pull__desc { opacity: 0; transform: translateY(36px); will-change: transform, opacity; }
.pull.is-going .pull__inner { transition: transform 0.2s ease; transform: translateY(-10px); }

/* Scroll-driven: progress and reveal come straight from the scroller. */
@supports (animation-timeline: view()) {
    .pull__kicker { animation: pull-in linear both; animation-timeline: --pull; animation-range: entry 6% entry 48%; }
    .pull__title { animation: pull-in linear both; animation-timeline: --pull; animation-range: entry 14% entry 62%; }
    .pull__desc { animation: pull-in linear both; animation-timeline: --pull; animation-range: entry 24% entry 74%; }
    .pull__bar i { animation: pull-bar linear both; animation-timeline: --pull; animation-range: entry 0% entry 92%; }
}
/* Fallback: main.js sets --pull-progress (0 to 1) on scroll. */
@supports not (animation-timeline: view()) {
    .pull { --p: var(--pull-progress, 0); }
    .pull__kicker { --t: clamp(0, (var(--p) - 0.06) / 0.42, 1); }
    .pull__title { --t: clamp(0, (var(--p) - 0.14) / 0.48, 1); }
    .pull__desc { --t: clamp(0, (var(--p) - 0.24) / 0.50, 1); }
    .pull__kicker, .pull__title, .pull__desc { opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 36px)); }
    .pull__bar i { transform: scaleX(clamp(0, var(--p) / 0.92, 1)); }
}
@keyframes pull-in { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pull-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .pull { min-height: 0; padding: 64px var(--gutter); }
    .pull__kicker, .pull__title, .pull__desc { animation: none; opacity: 1; transform: none; }
    .pull__cue { display: none; }
}
@media (max-width: 640px) {
    .pull { min-height: 60vh; min-height: 60svh; padding-top: 56px; }
    .pull__title { font-size: 32px; }
}