@font-face {
    font-family: "Söhne";
    src: url("../fonts/soehne-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Söhne";
    src: url("../fonts/soehne-regular-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Söhne";
    src: url("../fonts/soehne-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Söhne";
    src: url("../fonts/soehne-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Söhne";
    src: url("../fonts/soehne-semibold-italic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Söhne Breit";
    src: url("../fonts/soehne-breit-halbfett.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Tiempos";
    src: url("../fonts/tiempos-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Tiempos";
    src: url("../fonts/tiempos-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-sans: "Söhne", system-ui, sans-serif;
    --font-brand: "Söhne Breit", system-ui, sans-serif;
    --font-witness: "Tiempos", Georgia, serif;

    --sheet: 1440px;
    --inset: clamp(24px, 5.55vw, 80px);
    --gutter: clamp(16px, 1.67vw, 24px);
    --masthead-height: 80px;
    --rule: rgba(21, 25, 18, 0.16);
    --rule-strong: rgba(21, 25, 18, 0.52);
    --rule-dotted: rgba(21, 25, 18, 0.34);

    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --s5: 40px;
    --s6: 48px;
    --s8: 64px;
    --s10: 80px;

    /* Editorial deck rhythm: regular intervals stay compact;
       exceptional air is reserved for dispatch material. */
    /* System D is a digital broadsheet, not a space-constrained
       newspaper page: sections need enough air to read as distinct
       editorial events. */
    --section-breathing: 10px;
    --deck-pad: clamp(72px, 5.5vw, 96px);
    --story-gap: clamp(56px, 4.5vw, 72px);
    --opening-pause: clamp(5.25rem, 6.5vw, 7.5rem);

    --type-furniture: 0.8125rem;
    --type-small: clamp(0.9375rem, 1.06vw, 1.0625rem);
    --type-body: clamp(1.0625rem, 1.32vw, 1.25rem);
    --type-dispatch: clamp(1.0625rem, 1.45vw, 1.375rem);
    --type-deck: clamp(1.375rem, 2vw, 1.75rem);
    --type-secondary: clamp(2rem, 3.05vw, 2.75rem);
    --type-section: clamp(2.625rem, 4.45vw, 4rem);
    --type-lead: clamp(2.5rem, 4.45vw, 4rem);
    --type-banner: clamp(3rem, 6.7vw, 6rem);
    --theme-bg-duration: 320ms;
    --theme-border-duration: 300ms;
    --theme-ink-duration: 280ms;
    --theme-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ask-header-surface: var(--panel);
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #F2EFEA;
    --panel: #FFFFFF;
    --band: #E6E3E0;
    --contact: #FAF8F7;
    --control-hover-surface: #FAF8F7;
    --ink-display: #141413;
    --ink-display-muted: #141413;
    --ink: #3D3D3A;
    --ink-support: #52514E;
    --ink-meta: #52514E;
    --ink-meta-band: #52514E;
    --keyword-ink: #6D6B67;
    --folio-ink: #52514E;
    --folio-ink-band: #52514E;
    --ask-closed: #3D3D3A;
    --ask-active: #1E1E1E;
    --ask-wordmark: #52514E;
    --focus-ring: #1E1E1E;
    --water-surface: #3A6180;
    --water-glint: #1F5578;
    --water-spark: #123E5C;
    --rule: rgba(31, 30, 29, 0.30);
    --rule-strong: rgba(31, 30, 29, 0.40);
    --rule-dotted: rgba(31, 30, 29, 0.15);
    --control-border: rgba(31, 30, 29, 0.40);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #20201F;
    --panel: #2C2C2A;
    --band: #1A1A19;
    --contact: #242422;
    --control-hover-surface: rgba(225, 224, 217, 0.10);
    --ink-display: #F9F9F7;
    --ink-display-muted: #F9F9F7;
    --ink: #E1E0D9;
    --ink-support: #C3C2B7;
    --ink-meta: #A5A49A;
    --ink-meta-band: #A5A49A;
    --keyword-ink: #A5A49A;
    --folio-ink: #A5A49A;
    --folio-ink-band: #A5A49A;
    --ask-closed: #C3C2B7;
    --ask-active: #F9F9F7;
    --ask-wordmark: #A5A49A;
    --focus-ring: #E7E6E1;
    --water-surface: #5F86A8;
    --water-glint: #7FB2D9;
    --water-spark: #B4DAF0;
    --rule: rgba(225, 224, 217, 0.30);
    --rule-strong: rgba(225, 224, 217, 0.40);
    --rule-dotted: rgba(225, 224, 217, 0.20);
    --control-border: rgba(225, 224, 217, 0.40);
}

/* Small Reality-band furniture has its own deeper meta step so it
   retains AA contrast without collapsing the global ink hierarchy. */
[data-theme="light"] .reality-band .label {
    color: var(--ink-meta-band);
}
[data-theme="dark"] .reality-band .label {
    color: var(--ink-meta-band);
}
[data-theme="light"] .reality-band .kicker-number {
    color: var(--folio-ink-band);
}
[data-theme="dark"] .reality-band .kicker-number {
    color: var(--folio-ink-band);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background-color 240ms ease, color 240ms ease;
}

[data-theme="dark"] body {
    -webkit-font-smoothing: auto;
}

button, a { font: inherit; }
a { color: inherit; }
p, h1, h2, h3, blockquote { margin: 0; }
em { font-style: italic; }

.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transform: translateY(-110%);
    padding: 8px 16px;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    color: var(--ink-display);
    font-size: var(--type-furniture);
    font-weight: 600;
    text-decoration: none;
    transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: background-color var(--theme-bg-duration) var(--theme-transition-ease), border-color var(--theme-border-duration) var(--theme-transition-ease), color var(--theme-ink-duration) var(--theme-transition-ease), text-decoration-color var(--theme-ink-duration) var(--theme-transition-ease), fill var(--theme-ink-duration) var(--theme-transition-ease), stroke var(--theme-ink-duration) var(--theme-transition-ease) !important;
}

.shell {
    width: min(100%, var(--sheet));
    margin-inline: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-inline: var(--inset);
}

/* Approved editorial repertoire on the technical grid:
   opening 12 then 8/4; feature 8/4; Reality 6/2/4;
   full-width three-up principal roster. */

/* Development-only alignment overlay. Add ?grid=1 locally to expose
   the active columns and 8px baseline; it never intercepts input. */
.grid-debug { display: none; }
[data-grid-debug="true"] .grid-debug {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    width: min(100%, var(--sheet));
    margin-inline: auto;
    padding-inline: var(--inset);
    pointer-events: none;
}
[data-grid-debug="true"] .grid-debug::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(255, 70, 70, 0.18) 7px 8px);
}
.grid-debug span { background: rgba(65, 130, 255, 0.11); }

.masthead {
    position: sticky;
    top: 0;
    z-index: 80;
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
}

/* Render plates keep the masthead in document flow so full-page
   capture tools do not stitch the sticky element more than once. */
.render-static .masthead {
    position: relative;
    top: auto;
}

.render-static .section.marquee-deck {
    min-height: calc(var(--capture-vh, 100svh) - var(--masthead-height));
}

.masthead-grid {
    min-height: var(--masthead-height);
    align-items: center;
}

@media (max-width: 1200px){
    .masthead-grid{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: var(--s3);
        row-gap: 8px;
    }
    .masthead-grid > .wordmark{ flex: 0 1 auto; min-width: 0; }
    .masthead-grid > .masthead-actions{ flex: 0 0 auto; }
    .no-js .masthead-grid > .masthead-nav{ order: 1; flex: 1 0 100%; }
}

.wordmark {
    grid-column: 1 / 5;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-brand);
    font-size: clamp(1.0625rem, 1.5385vw, 1.38125rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-display);
    white-space: nowrap;
}

.masthead-nav {
    grid-column: 5 / 10;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(14px, 1.35vw, 22px);
}

/* Ask is an operational drawer, but it uses System D's authored panel,
   rules and type rather than importing the donor site's visual skin. */
.ask-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow: clip;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 420ms;
}
.ask-overlay.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.ask-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.20);
    opacity: 0;
    transition: opacity 280ms ease;
}
[data-theme="light"] .ask-backdrop { background: rgba(21, 23, 24, 0.12); }
.ask-overlay.is-open .ask-backdrop { opacity: 1; }
.ask-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(31rem, 100%);
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: contain;
    background: var(--panel);
    border-left: 1px solid var(--rule-strong);
    color: var(--ink);
    transform: translateX(100%);
    transition: transform 420ms ease;
}
.ask-overlay.is-open .ask-panel { transform: translateX(0); }
.ask-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    padding-top: max(var(--s3), env(safe-area-inset-top));
    border-bottom: 1px solid var(--rule-strong);
}
.ask-header-copy {
    min-width: 0;
    max-width: 21rem;
    padding-top: 2px;
}
.ask-title {
    margin: 0;
}
.ask-title,
.ask-msg--assistant .ask-who {
    font-family: var(--font-brand);
    font-size: var(--type-furniture);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ask-wordmark);
}
.ask-header-intro {
    margin: var(--s1) 0 0;
    color: var(--ink);
    font-size: var(--type-small);
    font-weight: 400;
    line-height: 1.45;
}
.ask-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--s2);
}
.ask-new,
.ask-close {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: var(--bg);
    color: var(--ink-support);
    cursor: pointer;
    font-size: var(--type-furniture);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.ask-new {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--control-border);
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ask-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--control-border);
}
.ask-new:hover,
.ask-new:focus-visible {
    background: var(--control-hover-surface);
    color: var(--ink);
}
.ask-close:hover,
.ask-close:focus-visible { color: var(--ink); }
.ask-new:hover,
.ask-new:focus-visible,
.ask-close:hover,
.ask-close:focus-visible { border-color: var(--rule-strong); }
.ask-panel button:focus-visible,
.ask-panel a:focus-visible,
.ask-panel input:focus-visible,
.ask-panel textarea:focus-visible {
    outline-offset: 2px;
}
.ask-new:disabled { opacity: 0.45; cursor: default; }
.ask-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: var(--s2) var(--s4);
    scrollbar-gutter: stable;
}
.ask-pseudonym-note {
    margin: 0 0 var(--s3);
    padding: var(--s3);
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--ink-display) 3%, transparent);
}
[data-theme="dark"] .ask-pseudonym-note {
    background: color-mix(in srgb, var(--ink-display) 4%, transparent);
}
.ask-pseudonym-kicker {
    margin: 0;
    color: var(--ink-support);
    font-size: var(--type-furniture);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ask-pseudonym-copy {
    margin: var(--s2) 0 0;
    color: var(--ink);
    font-size: var(--type-small);
    font-weight: 400;
    line-height: 1.5;
}
.ask-msg { padding-block: var(--s2); border-bottom: 1px solid var(--rule); }
.ask-msg:last-child { border-bottom: 0; }
.ask-who {
    margin-bottom: 4px;
    color: var(--ink-meta);
    font-size: var(--type-furniture);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ask-msg--assistant .ask-who {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ask-water-slot {
    display: block;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
}
/* ORDER A17 rev 5 — "the Water". Verbatim from the order; do not re-derive.
   Three layers: slate-blue SURFACE (constant mass), petrol GLINT (breathing),
   pale SPARK (rare flares). tam-churn / tam-drift / tam-wander are retired. */
.ask-water{display:block;flex:0 0 31px;width:31px;height:31px;overflow:visible;opacity:0;transition:opacity 150ms cubic-bezier(0.37, 0, 0.63, 1)}
.ask-water .ask-water-layer rect{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.ask-water .ask-water-layer--surface rect{fill:var(--water-surface);opacity:.82}
.ask-water .ask-water-layer--glint rect{fill:var(--water-glint);opacity:.88;animation:tam-water-glint-more 1.85s ease-in-out var(--water-delay,0s) infinite both;filter:drop-shadow(0 0 .14px currentColor)}
.ask-water .ask-water-layer--glint rect:nth-child(3n+2){animation-duration:2.1s}
.ask-water .ask-water-layer--glint rect:nth-child(3n){animation-duration:2.3s}
.ask-water .ask-water-layer--spark rect{fill:var(--water-spark);opacity:.70;animation:tam-water-spark-more 2.1s cubic-bezier(.4,0,.2,1) var(--water-delay,0s) infinite both;filter:drop-shadow(0 0 .22px var(--water-spark))}
.ask-water .ask-water-layer--spark rect:nth-child(even){animation-duration:2.4s}
/* six surface flecks breathe in local zones */
.ask-water .ask-water-layer--surface rect:nth-child(2),.ask-water .ask-water-layer--surface rect:nth-child(7),.ask-water .ask-water-layer--surface rect:nth-child(10),.ask-water .ask-water-layer--surface rect:nth-child(14),.ask-water .ask-water-layer--surface rect:nth-child(21),.ask-water .ask-water-layer--surface rect:nth-child(25){animation:tam-water-surface-a 3.2s ease-in-out -1.15s infinite both}
.ask-water .ask-water-layer--surface rect:nth-child(4),.ask-water .ask-water-layer--surface rect:nth-child(9),.ask-water .ask-water-layer--surface rect:nth-child(13),.ask-water .ask-water-layer--surface rect:nth-child(18),.ask-water .ask-water-layer--surface rect:nth-child(23),.ask-water .ask-water-layer--surface rect:nth-child(28){animation:tam-water-surface-b 3.55s ease-in-out -2.8s infinite both}
@keyframes tam-water-glint-more{0%,100%{opacity:.70;transform:translateX(-.14px) scaleX(.76)}18%{opacity:.79;transform:translateX(-.02px) scaleX(.95)}31%{opacity:1;transform:translateX(.30px) scaleX(1.48)}43%{opacity:.82;transform:translateX(.06px) scaleX(1.02)}61%{opacity:.94;transform:translateX(-.16px) scaleX(1.21)}74%{opacity:.70;transform:translateX(.02px) scaleX(.86)}}
@keyframes tam-water-spark-more{0%,32%,100%{opacity:.50;transform:translateX(-.16px) scaleX(.46)}55%{opacity:.72;transform:translateX(-.02px) scaleX(.82)}64%{opacity:1;transform:translateX(.32px) scaleX(1.60)}72%{opacity:.78;transform:translateX(.08px) scaleX(1.02)}82%{opacity:.47;transform:translateX(-.10px) scaleX(.58)}}
@keyframes tam-water-surface-a{0%,100%{opacity:.76;transform:translateX(-.05px) scaleX(.94)}46%{opacity:.91;transform:translateX(.10px) scaleX(1.09)}62%{opacity:.82;transform:translateX(.01px) scaleX(1)}}
@keyframes tam-water-surface-b{0%,100%{opacity:.78;transform:translateX(.05px) scaleX(.96)}38%{opacity:.86;transform:translateX(-.09px) scaleX(1.06)}58%{opacity:.92;transform:translateX(.08px) scaleX(1.11)}74%{opacity:.80;transform:translateX(0) scaleX(.98)}}
@media(prefers-reduced-motion:reduce){.ask-water .ask-water-layer rect{animation:none!important;transform:none!important;filter:none!important}}
/* Appear/disappear wiring from rev 3/4, carried over unchanged: 150ms on the
   house curve, folded into the .ask-water rule above. */
.ask-water.is-visible{opacity:1}
.ask-text { color: var(--ink); font-size: var(--type-small); line-height: 1.5; white-space: pre-wrap; }
.ask-msg--assistant .ask-text {
    color: var(--ink);
}
.ask-msg--assistant .ask-text.is-arriving {
    opacity: 0;
}
.ask-msg--assistant .ask-text.is-settled {
    opacity: 1;
    transition: opacity 500ms cubic-bezier(0.37, 0, 0.63, 1);
}
.ask-msg--user { text-align: right; }
.ask-msg--user .ask-text {
    display: inline-block;
    max-width: 92%;
    padding-right: 0;
    border-right: 0;
    background: transparent;
    color: var(--ink-display);
    border-color: transparent;
    text-align: left;
}
.ask-msg[data-pending="true"] .ask-text { color: var(--ink-meta); }
.ask-note,
.ask-handoff,
.ask-related {
    margin-top: var(--s3);
    margin-left: 12px;
}
.ask-note {
    padding: var(--s3);
    border: 1px solid var(--rule-strong);
    background: var(--bg);
}
.ask-note-label,
.ask-handoff-label,
.ask-related-label {
    color: var(--ink-meta);
    font-size: var(--type-furniture);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ask-note-text {
    margin: var(--s2) 0 0;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--type-small);
    line-height: 1.55;
    white-space: pre-wrap;
}
.ask-note-actions,
.ask-retry,
.ask-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s3);
}
.ask-note-action,
.ask-retry-action,
.ask-handoff-action,
.ask-related-link {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--control-border);
    background: transparent;
    color: var(--ink-display);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
}
.ask-note-action:hover,
.ask-note-action:focus-visible,
.ask-retry-action:hover,
.ask-retry-action:focus-visible,
.ask-handoff-action:hover,
.ask-handoff-action:focus-visible,
.ask-related-link:hover,
.ask-related-link:focus-visible {
    background: var(--ink-display);
    color: var(--bg);
}
/* A retry that is not yet permitted stays visible but inert, so the wait is
   legible rather than a control that silently does nothing. */
.ask-retry-action[disabled] {
    cursor: default;
    opacity: 0.45;
}
.ask-retry-action[disabled]:hover,
.ask-retry-action[disabled]:focus-visible {
    background: transparent;
    color: var(--ink-display);
}
.ask-handoff {
    padding: var(--s2) 0 var(--s1) var(--s3);
    border-left: 2px solid var(--rule-strong);
}
.ask-handoff[data-urgency="live"] { border-left-color: var(--ink-display); }
.ask-handoff-copy {
    margin-top: var(--s1);
    color: var(--ink-support);
    font-size: var(--type-small);
    line-height: 1.45;
}
.ask-handoff-contacts {
    display: grid;
    gap: var(--s2);
    margin-top: var(--s3);
}
.ask-handoff-principal {
    min-width: 0;
    padding-top: var(--s2);
    border-top: 1px dotted var(--rule-dotted);
}
.ask-handoff-name {
    color: var(--ink-display);
    font-size: var(--type-small);
    font-weight: 600;
}
.ask-handoff-detail {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
    color: var(--ink-support);
    font-size: var(--type-small);
    overflow-wrap: anywhere;
    text-underline-offset: 0.18em;
}
.ask-handoff-detail:hover,
.ask-handoff-detail:focus-visible { color: var(--ink-display); }
.ask-email-action {
    letter-spacing: 0.02em;
    text-transform: none;
}
.ask-related { padding-top: var(--s2); border-top: 1px dotted var(--rule-dotted); }
.ask-related-links { margin-top: var(--s1); }
.ask-related-link {
    min-height: 44px;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    letter-spacing: 0.02em;
    text-transform: none;
}
.ask-related-link:hover,
.ask-related-link:focus-visible { background: transparent; color: var(--ink-display); border-bottom-color: var(--ink-display); }
.ask-chips { border-top: 1px solid var(--rule); }
.ask-chips--hidden { display: none; }
.ask-chips-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 9px var(--s4);
    border: 0;
    border-top: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-meta);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
}
.ask-chips-toggle-arrow { flex: 0 0 auto; }
.ask-chips-toggle--visible { display: flex; }
.ask-chip {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 11px var(--s4);
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-support);
    cursor: pointer;
    font-size: var(--type-small);
    letter-spacing: 0.01em;
    text-align: left;
}
.ask-chip:last-child { border-bottom: 0; }
.ask-chip-arrow { flex: 0 0 auto; color: var(--ink-meta); }
.ask-chip:hover,
.ask-chip:focus-visible { color: var(--ink-display); background: color-mix(in srgb, var(--ink-display) 5%, transparent); }
.ask-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--rule-strong);
}
/* The character note was sr-only, so no sighted visitor ever saw it. Now
   visible on a second row beneath the field. Placement is explicit rather than
   auto-flowed: a new grid item ahead of the button in the DOM would otherwise
   push Send onto its own row. The aria-describedby association, the DOM order
   and maxlength are all unchanged. */
.ask-form > .ask-input { grid-column: 1; grid-row: 1; }
.ask-form > .ask-send { grid-column: 2; grid-row: 1; }
.ask-input-help {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    color: var(--ink-meta);
    font-size: var(--type-furniture);
    line-height: 1.45;
}
.ask-input-warning {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ink-support);
    font-size: var(--type-furniture);
    line-height: 1.45;
}
.ask-input {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--control-border);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--type-small);
    line-height: 1.5;
    resize: none;
    overflow-y: hidden;
}
.ask-input::placeholder { color: var(--ink-meta); }
.ask-input:focus { border-color: var(--ink-support); }
.ask-input[aria-invalid="true"] { outline: 1px solid var(--rule-strong); outline-offset: 2px; }
.ask-send {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--control-border);
    background: var(--band);
    color: var(--ink-support);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ask-send:hover:not(:disabled),
.ask-send:focus-visible:not(:disabled) {
    background: var(--control-hover-surface);
    color: var(--ink);
    border-color: var(--rule-strong);
}
.ask-send:disabled {
    background: transparent;
    color: var(--ink-support);
    border-color: var(--control-border);
    opacity: 0.4;
    cursor: default;
}
[data-theme="dark"] .ask-send:disabled { color: var(--ink-support); }
.ask-input:disabled { opacity: 0.5; cursor: default; }
.ask-disclaimer {
    padding: var(--s3) var(--s4) max(var(--s4), env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
    color: var(--ink-meta);
    font-size: var(--type-furniture);
    line-height: 1.5;
}
.ask-disclaimer a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.ask-disclaimer-contacts { margin-top: var(--s2); color: var(--ink-support); }
.ask-contact-row { display: flex; align-items: center; min-height: 44px; }
.ask-contact-row + .ask-contact-row { margin-top: 4px; }
.ask-contact-row .copy-btn { flex: 0 0 44px; width: 44px; height: 44px; margin-left: 0; }
.ask-contact-row .copy-btn::before { display: none; }

@media (max-width: 760px) {
    .ask-panel { width: 100%; border-left: 0; }
    .ask-header { padding-inline: var(--s3); }
    .ask-body { padding-inline: var(--s3); }
    .ask-chip { padding-inline: var(--s3); }
    .ask-form { padding-inline: var(--s3); }
    .ask-disclaimer { padding-inline: var(--s3); }
}

/* Laptop-height drawers scroll as one surface so wrapped guidance keeps its
   natural height instead of being clipped behind the first prompt row. */
@media (max-height: 900px) {
    .ask-panel { overflow-y: auto; }
    .ask-header { position: sticky; top: 0; z-index: 2; flex: 0 0 auto; background: var(--ask-header-surface); }
    .ask-body { flex: 0 0 auto; min-height: 0; max-height: none; overflow: visible; }
}

.masthead-nav a,
.theme-toggle,
.ask-link,
.menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    padding: 0 6px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.masthead-actions {
    grid-column: 10 / 13;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--s3);
    padding-left: var(--s3);
    border-left: 1px solid var(--rule);
}

.theme-toggle,
.ask-link { cursor: pointer; }
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--ink-support);
}
.theme-toggle-menu { display: none; }
.theme-opt { padding-bottom: 4px; border-bottom: 1px solid transparent; }
.theme-opt.is-active { color: var(--ink-display); border-color: var(--rule-strong); }
.theme-separator { color: var(--ink-meta); }
.ask-link {
    font-family: var(--font-brand);
    letter-spacing: 0.11em;
    border-bottom: 0;
}

.menu-button { display: none; color: var(--ink-display); cursor: pointer; }

.wordmark:focus-visible,
.masthead-nav a:focus-visible,
.theme-toggle:focus-visible,
.menu-button:focus-visible,
.ask-link:focus-visible {
    outline-offset: 3px;
}

:where(main, section, article, aside)[tabindex="-1"]:focus {
    outline: none;
}

.masthead-nav .nav-link {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}

/* BEGIN accent-reservation-r18 */

/* Navigation and utility states use the ink ladder; accent is reserved for Ask. */
.masthead-nav a {
    color: var(--ink-support);
    transition: color 140ms ease;
}

.masthead-nav a:hover,
.masthead-nav a:focus-visible {
    color: var(--ink-display);
}

.masthead-nav a.active,
.masthead-nav a[aria-current="location"] {
    color: var(--ink-display);
    text-decoration: none;
    border-bottom: 0;
}

/* END accent-reservation-r18 */

/* Basic navigation remains usable when JavaScript is unavailable.
   Script-only controls are removed rather than left inert. */
.no-js .theme-toggle,
.no-js .ask-link,
.no-js .menu-button { display: none; }
.no-js .folio-dynamic { display: none; }

.section.marquee-deck {
    border-top: 0;
    
    padding-block:
        calc(clamp(104px, 8vw, 136px) + var(--section-breathing))
        calc(clamp(76px, 5.8vw, 92px) + var(--section-breathing));
}

.marquee-grid {
    min-height: 0;
    align-content: start;
}

.hero-rule {
    grid-column: 1 / 13;
    grid-row: 2;
    border-top: 1px solid var(--rule-strong);
}

.hero-stage {
    grid-column: 1 / 9;
    grid-row: 4;
    position: relative;
    max-width: 100%;
    margin-top: var(--s1);
    min-height: calc(var(--type-banner) * 1.15);
    overflow: visible;
    isolation: isolate;
}

.hero-title {
    margin: 0;
    max-width: 100%;
    font-family: var(--font-brand);
    font-size: var(--type-banner);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 0.98;
    color: var(--ink-display);
    text-wrap: balance;
}

.hero-strapline {
    grid-column: 1 / 9;
    grid-row: 5;
    margin-top: var(--s2);
    max-width: 54ch;
    font-family: var(--font-sans);
    font-size: var(--type-deck);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ink-display);
}

.section {
    border-top: 1px solid var(--rule);
    padding-block: calc(var(--deck-pad) + var(--section-breathing));
}

/* The last numbered section keeps its established page-end spacing:
   the added rhythm belongs between sections, not below the final one. */
#reach {
    padding-bottom: var(--deck-pad);
}

/* Anchor destinations clear the persistent navigation without
   introducing a visual gap in their editorial compositions. */
#judgement,
#lived,
#reality,
#execution,
#reach,
#first-contact {
    scroll-margin-top: calc(var(--masthead-height) + var(--s3));
}

.spread-a,
.execution,
.reach {
    position: relative;
    border-top: 0;
}

.spread-a::before,
.execution::before,
.reach::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    border-top: 1px solid var(--rule);
    pointer-events: none;
}

/* Reality already supplies the structural exit rule. Suppress the
   following section's coincident rule so the boundary never appears
   heavier than the rest of the system. */
.reality-band + .execution::before { display: none; }

.kicker {
    font-size: var(--type-furniture);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--ink-display);
}

.kicker-number {
    color: var(--ink-meta);
    font-variant-numeric: tabular-nums;
    margin-right: 0.72em;
}

.display-lead,
.display-section,
.display-secondary {
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-display);
    text-wrap: balance;
}

.display-lead {
    font-size: var(--type-lead);
    line-height: 1.02;
}

.display-section {
    font-size: var(--type-section);
    line-height: 1.04;
}

.display-secondary {
    font-size: var(--type-secondary);
    line-height: 1.06;
}

.body,
.standfirst {
    font-size: var(--type-body);
    line-height: 1.55;
    color: var(--ink);
}

.standfirst { color: var(--ink); }

/* Reading copy uses one body leading. Pretty wrapping is reserved for
   wider narrative measures, where it prevents isolated final words
   without introducing editorial hyphenation. */
.standfirst,
.reality-line,
.execution-copy .body,
.reach-lead .body,
.record .body {
    text-wrap: pretty;
}

.label {
    font-size: var(--type-furniture);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--ink-support);
}

/* Emphasised body lead (bold in copy): a loaded Söhne weight, not synthesised. */
strong { font-weight: 600; }

/* Opening composition: the thesis and its two propositions form one
   continuous full-width reading sequence. */
.section-01 {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: subgrid;
}

.section-01 .folio-line {
    grid-column: 1 / 13;
    grid-row: 1;
    margin: 0 0 var(--s2);
    font-size: var(--type-furniture);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: var(--ink-support);
}
.section-01 .kicker {
    grid-column: 1 / 13;
    grid-row: 3;
    margin-top: calc(var(--s5) + 0.2rem);
}
.opening-thesis {
    grid-column: 9 / 13;
    grid-row: 4 / 6;
    align-self: start;
    margin-top: var(--s3);
    padding-left: clamp(16px, 1.5vw, 24px);
    border-left: 1px solid var(--rule-strong);
}

.spread-a {
    align-items: start;
}

.judgement {
    grid-column: 1 / 9;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
}

.judgement .kicker { grid-column: 1 / 9; }
.judgement .display-section {
    grid-column: 1 / 9;
    margin-top: var(--s4);
}

.judgement-intro {
    grid-column: 1 / 9;
    margin-top: var(--s3);
}

.judgement-intro .standfirst + .standfirst { margin-top: var(--s2); }

/* Evidence group: the measure-aware container. It spans the full
   Judgement field and carries the one solid editorial rule above the
   briefs; the inner .evidence-briefs grid responds to THIS container's
   inline width via container queries (not the viewport). */
.evidence {
    grid-column: 1 / -1;
    container-type: inline-size;
    container-name: judgement-evidence;
    margin-top: var(--story-gap);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
}

/* Safe single-column base — also the narrow state and the fallback for
   engines without container-query support. */
.evidence-briefs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.evidence-item { min-width: 0; }
.evidence-item > .label { color: var(--ink-support); }

/* Base (single column): briefs stack in DOM order with quiet dotted
   horizontal separators and no vertical borders. */
.evidence-gap,
.evidence-position,
.evidence-edge {
    grid-column: 1;
    grid-row: auto;
    padding: 0;
    border: 0;
}
.evidence-position,
.evidence-edge {
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px dotted var(--rule-dotted);
}

.evidence-item h3 {
    margin-top: var(--s3);
    font-size: var(--type-dispatch);
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink-display);
}

.evidence-item .body {
    margin-top: var(--s3);
    font-size: var(--type-small);
    line-height: 1.55;
    color: var(--ink);
}

.evidence-item .body + .body { margin-top: var(--s2); }

/* Editorial prose wraps only at word boundaries. The responsive grid
   supplies the required measure, so automatic hyphenation would add
   noise without solving a structural constraint. */
.accountability .body,
.rail-item .body {
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

/* Judgement evidence is repaired by measure, not by hyphenation:
   protect all three briefs from automatic word-breaking. */
.evidence-item h3,
.evidence-item .body {
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

/* Intermediate evidence measure (container >= 560px): protective 5 / 3.
   The Gap spans both rows on the wider left lane; Position over Edge on
   the right, with one continuous dotted vertical seam and one dotted
   horizontal divider between the two responses. */
@container judgement-evidence (min-width: 560px) {
    .evidence-briefs {
        grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
        grid-template-rows: auto auto;
    }
    .evidence-gap {
        grid-column: 1;
        grid-row: 1 / 3;
        margin-top: 0;
        padding: 0 var(--s3) 0 0;
        border: 0;
    }
    .evidence-position {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        padding: 0 0 var(--s4) var(--s3);
        border-top: 0;
        border-left: 1px dotted var(--rule-dotted);
    }
    .evidence-edge {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
        padding: var(--s4) 0 0 var(--s3);
        border-top: 1px dotted var(--rule-dotted);
        border-left: 1px dotted var(--rule-dotted);
    }
}

/* Wide evidence measure (container >= 760px): three equal peers at the
   1.25 / 1 / 1 ratio; one opening baseline; two dotted vertical
   separators; no horizontal dividers. */
@container judgement-evidence (min-width: 760px) {
    .evidence-briefs {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto;
    }
    .evidence-gap {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0;
        padding: 0 var(--s3) 0 0;
        border: 0;
    }
    .evidence-position {
        grid-column: 2;
        grid-row: auto;
        margin-top: 0;
        padding: 0 0 0 var(--s3);
        border-top: 0;
        border-left: 1px dotted var(--rule-dotted);
    }
    .evidence-edge {
        grid-column: 3;
        grid-row: auto;
        margin-top: 0;
        padding: 0 0 0 var(--s3);
        border-top: 0;
        border-left: 1px dotted var(--rule-dotted);
    }
}

.lived {
    grid-column: 9 / 13;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    padding-left: clamp(16px, 1.5vw, 24px);
    border-left: 1px solid var(--rule-strong);
}

.lived .display-secondary { margin-top: var(--s4); }
.lived .standfirst { margin-top: var(--s4); }
.lived .body { margin-top: var(--s4); }
.lived .body + .body { margin-top: var(--s3); }

.reality-band {
    background: var(--band);
    border-top-color: var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}

/* The Reality band owns its exit rule: avoid a doubled line where
   the following chapter begins. */
.reality-band + .section { border-top: 0; }

/* On wide screens the three-part Reality spread remains a broad
   editorial field. Restoring 6/2/4 must not collapse the section
   back into the compressed strip that prompted the whitespace
   correction. */
@media (min-width: 1201px) {
    .reality-band > .shell.grid {
        min-height: clamp(22rem, 32vw, 30rem);
    }
}

.reality-main {
    grid-column: 1 / 7;
    grid-row: 1;
}

.reality-main .display-section {
    margin-top: var(--s4);
}

.reality-line {
    max-width: 68ch;
    margin-top: var(--s4);
    font-size: var(--type-body);
    line-height: 1.55;
    color: var(--ink);
}

.reality-line + .reality-line { margin-top: var(--s2); }

.accountability {
    grid-column: 7 / 10;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding: var(--s3) 0 var(--s3) var(--s3);
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule-strong);
}

.accountability h3 {
    margin-top: var(--s3);
    font-size: var(--type-dispatch);
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink-display);
}

.accountability .body {
    margin-top: var(--s3);
    font-size: var(--type-small);
    color: var(--ink);
}

.accountability .body + .body { margin-top: var(--s2); }

.etymology {
    grid-column: 10 / 13;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding: var(--s3) 0 var(--s4) var(--s3);
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule);
    border-left: 0;
}

.etymology h3 {
    margin-top: var(--s3);
    font-size: var(--type-dispatch);
    font-weight: 400;
    line-height: 1.25;
    color: var(--ink-display);
}

.etymology .body {
    margin-top: var(--s3);
    font-family: var(--font-witness);
    font-size: var(--type-small);
    font-style: italic;
    line-height: 1.55;
    color: var(--ink);
}

.etymology .body + .body { margin-top: var(--s2); }

/* Tiempos ships here in regular + italic only; a <strong> inside the
   italic witness passage would synthesize a fake bold. "Then we
   cross." instead turns upright — roman against italic. */
.etymology .body strong { font-weight: 400; font-style: normal; }

/* The Name carries two voices: the etymology is quoted history
   (Tiempos italic); the closing paragraph is Tamesa speaking and
   returns to the institutional register with true semibold. */
.etymology-text .etymology-position {
    font-family: var(--font-sans);
    font-style: normal;
    color: var(--ink-display);
}
.etymology-text .etymology-position strong { font-weight: 600; font-style: normal; }

/* Wide-desktop Reality recomposition (>= 1201px).
   The final copy makes Accountability a substantial five-paragraph
   counter-argument and The Name a short coda, so the former 6/3/3
   equal-thirds treatment misrepresents the hierarchy. Here the Main
   thesis and the Name coda occupy the left eight columns; Accountability
   becomes a four-column argument spanning the full band height on the
   right, giving it a wider measure and removing the cramped rag. The
   Name sits beneath the complete Main argument as a horizontal register
   aligned to the master grid, anchored to the lower-left field. */
@media (min-width: 1201px) {
    .reality-band > .shell.grid {
        grid-template-rows: min-content 1fr;
        row-gap: var(--s6);
    }
    .reality-main {
        grid-column: 1 / 9;
        grid-row: 1;
        align-self: start;
    }
    .accountability {
        grid-column: 9 / 13;
        grid-row: 1 / 3;
        align-self: stretch;
        padding-top: 0;
        border-top: 0;
    }
    .etymology {
        grid-column: 1 / 9;
        grid-row: 2;
        align-self: end;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--gutter);
        margin: 0;
        padding: var(--s4) 0;
        border-top: 1px solid var(--rule-strong);
        border-bottom: 1px solid var(--rule);
        border-left: 0;
    }
    .etymology-mark { grid-column: 1 / 3; align-self: start; }
    .etymology-text { grid-column: 4 / 9; align-self: start; }
    .etymology-text > .body:first-child { margin-top: 0; }
}

/* Between the wide composition and the eight-column tablet grid,
   keep a generous four-column contextual rail. The two dispatches
   stack here before Accountability would become too narrow. */
@media (min-width: 1025px) and (max-width: 1200px) {
    .reality-main { grid-column: 1 / 8; }
    .accountability {
        grid-column: 9 / 13;
        grid-row: 1;
    }
    .etymology {
        grid-column: 9 / 13;
        grid-row: 2;
        margin-top: var(--s5);
    }
}

/* Execution keeps the section marker and principal argument on the
   left; the concise dispatch rail remains secondary on the right. */
.execution-main {
    grid-column: 1 / 9;
    grid-row: 1;
    margin-top: 0;
}

.execution-main .display-section { margin-top: var(--s4); }

.execution-copy {
    max-width: 44rem;
    margin-top: clamp(2.5rem, 3.3vw, 3.5rem);
}

.execution-copy .body + .body { margin-top: var(--s2); }
.execution-copy .body { color: var(--ink); }

.execution-rail {
    grid-column: 9 / 13;
    grid-row: 1;
    padding: 0 0 0 clamp(24px, 2.25vw, 36px);
    border-left: 1px solid var(--rule-strong);
}

.rail-item {
    padding-block: var(--s3) var(--s4);
    border-top: 1px dotted var(--rule-dotted);
}

.rail-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.rail-item h3 {
    margin-top: var(--s3);
    font-size: var(--type-dispatch);
    font-weight: 400;
    line-height: 1.32;
    color: var(--ink-display);
}

.rail-emphasis {
    margin-top: var(--s3);
    font-size: var(--type-dispatch);
    font-weight: 400;
    line-height: 1.32;
    color: var(--ink-display);
}

/* Execution-rail supporting coda: the quieter concluding line beneath a
   proposition. Declared as its own role rather than an overloaded
   .body, so its size (supporting) and colour (support ink) are explicit
   and independent of the reading-copy .body rule. */
.rail-note + .rail-note { margin-top: var(--s2); }

.rail-note {
    margin-top: var(--s3);
    font-size: var(--type-small);
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink);
}

.reach-main {
    grid-column: 1 / 9;
    grid-row: 1;
    align-self: start;
}

.reach-main .display-section { margin-top: var(--s4); }

.reach-lead {
    max-width: 38rem;
    margin-top: var(--s4);
}

.reach-lead .body + .body { margin-top: var(--s2); }

.principals {
    grid-column: 1 / 13;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s4);
    margin-top: var(--story-gap);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule-strong);
}

.principal {
    min-width: 0;
}
.principal + .principal {
    padding-left: var(--s4);
    border-left: 1px dotted var(--rule-dotted);
}

.principal-name {
    font-family: var(--font-brand);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink-display);
}

.principal-detail {
    min-width: 0;
    margin-top: var(--s2);
    font-size: var(--type-small);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
}

.principal-detail a {
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 0.22em;
    transition: color 180ms ease, text-decoration-color 180ms ease;
}

.principal-detail a:hover,
.principal-detail a:focus-visible {
    color: var(--ink-display);
    text-decoration-color: var(--ink-display);
}

.copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: var(--s1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-meta);
    cursor: pointer;
}

.copy-btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.copy-icon { width: 14px; height: 14px; }

.copy-btn:hover,
.copy-btn:focus-visible,
.copy-btn[data-copied="true"] { color: var(--ink-display); }

.copy-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.record {
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px dotted var(--rule-dotted);
}

.record .body {
    margin-top: var(--s2);
    font-family: var(--font-sans);
    font-style: normal;
    font-size: var(--type-small);
    line-height: 1.55;
    color: var(--ink);
}

.record .label { color: var(--ink-support); }

.first-contact {
    grid-column: 9 / 13;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding: var(--s4) clamp(24px, 2.4vw, 40px) var(--s5);
    background: var(--contact);
    border-top: 2px solid var(--rule-strong);
}

/* First Contact is the page's action endpoint, not passive furniture. */
.first-contact > .label { color: var(--ink-display); }

.first-contact-lead {
    margin-top: var(--s3);
    font-size: var(--type-small);
    line-height: 1.55;
    color: var(--ink-support);
}

.contact-steps {
    display: block;
    list-style: none;
    margin: var(--s4) 0 0;
    padding: 0;
    border-top: 1px dotted var(--rule-dotted);
}

.contact-steps li {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-items: baseline;
    gap: var(--s2);
    padding: 11px 0;
    border-top: 1px dotted var(--rule-dotted);
    font-size: var(--type-small);
    line-height: 1.4;
    color: var(--ink-support);
}
.contact-steps li:first-child { border-top: 0; }

.step-number {
    font-size: var(--type-furniture);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--ink-meta);
    font-variant-numeric: tabular-nums;
}

.first-contact-action {
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--rule-strong);
}

.first-contact-action .principal-detail { margin-top: var(--s2); }

.footer {
    border-top: 2px solid var(--rule-strong);
    padding-block: var(--s4);
}

.footer-left { grid-column: 1 / 7; }
.footer-right {
    grid-column: 7 / 13;
    max-width: 52ch;
    justify-self: end;
    text-align: right;
}
.footer p {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ink-meta);
}

.footer-brand {
    font-family: var(--font-brand);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-support);
}

.company-number { white-space: nowrap; }

@media (max-width: 1280px) and (min-width: 1201px) {
    .masthead-nav { grid-column: 5 / 10; gap: 12px; }
    .masthead-actions { grid-column: 10 / 13; gap: var(--s2); padding-left: var(--s2); }
}

@media (max-width: 1200px) {
    :root { --inset: clamp(24px, 6vw, 64px); }

    .masthead-nav { display: none; }
    .masthead-actions { grid-column: 9 / 13; }
    .menu-button { display: inline-flex; }
    .masthead.is-menu-open .masthead-grid { position: relative; }
    .masthead.is-menu-open .masthead-nav { position: absolute; top: 100%; right: var(--inset); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s3); padding: var(--s4); border: 1px solid var(--rule); background: var(--bg); max-height: calc(100dvh - var(--masthead-height)); overflow-y: auto; overscroll-behavior: contain; }
    .masthead.is-menu-open .masthead-nav .theme-toggle-menu { display: inline-flex; }

    .no-js .masthead-grid {
        row-gap: var(--s2);
        padding-bottom: var(--s3);
    }
    .no-js .masthead-nav {
        position: static;
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--s2) var(--s3);
    }
}

/* Tablet is a distinct eight-column editorial format, not a narrow
   desktop layout waiting to collapse at 760px. */
@media (max-width: 1024px) and (min-width: 761px) {
    .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    [data-grid-debug="true"] .grid-debug { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .grid-debug span:nth-child(n + 9) { display: none; }

    .wordmark { grid-column: 1 / 5; }
    .masthead-actions { grid-column: 5 / 9; }

    .section-01 { grid-column: 1 / 9; }
    .hero-rule,
    .section-01 .kicker { grid-column: 1 / 9; }
    .hero-stage,
    .hero-strapline { grid-column: 1 / 6; }
    /* Tablet keeps the opening's two-column composition, matching
       the Judgement/Lived split at this width. */
    .opening-thesis {
        grid-column: 6 / 9;
        grid-row: 4 / 6;
        margin-top: var(--s3);
        padding-left: clamp(16px, 1.5vw, 24px);
        border-left: 1px solid var(--rule-strong);
    }
    .judgement { grid-column: 1 / 6; }
    .judgement .kicker,
    .judgement .display-section,
    .judgement-intro,
    .evidence { grid-column: 1 / 6; }
    .lived { grid-column: 6 / 9; }

    /* Evidence internal layout is governed by the container queries on
       .evidence (see base rules); no viewport-based override here. */

    .reality-main { grid-column: 1 / 6; }
    .accountability {
        grid-column: 6 / 9;
        grid-row: 1;
        padding-inline: var(--s3) 0;
    }
    .etymology {
        grid-column: 6 / 9;
        grid-row: 2;
        margin-top: var(--s5);
        padding-inline: var(--s3) 0;
        border-left-color: var(--rule-strong);
    }

    .execution-main { grid-column: 1 / 6; }
    .execution-rail { grid-column: 6 / 9; }

    .reach-main { grid-column: 1 / 6; }
    .first-contact { grid-column: 6 / 9; }
    .principals {
        grid-column: 1 / 9;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0;
    }
    .principal:nth-child(3) {
        grid-column: 1 / -1;
        margin-top: var(--s5);
        padding: var(--s5) 0 0;
        border-top: 1px dotted var(--rule-dotted);
        border-left: 0;
    }
    .principal:nth-child(3) .record .body { max-width: 54rem; }

    .footer-left { grid-column: 1 / 5; }
    .footer-right {
        grid-column: 5 / 9;
        max-width: 40ch;
    }
}

/* At the narrow end of the tablet range, a balanced Reach split
   keeps the general-enquiries address and copy control together. */
@media (min-width: 761px) and (max-width: 900px) {
    .reach-main { grid-column: 1 / 5; }
    .first-contact { grid-column: 5 / 9; }
}

@media (max-width: 1024px) and (min-width: 761px) {
    .principal:nth-child(3) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--s4);
    }
    .principal:nth-child(3) > * { grid-column: 1; }
    .principal:nth-child(3) .record {
        grid-column: 2;
        grid-row: 1 / 5;
        margin-top: 0;
        padding: 0 0 0 var(--s4);
        border-top: 0;
        border-left: 1px dotted var(--rule-dotted);
    }
}

@media (max-width: 760px) {
    :root {
        --inset: 24px;
        --gutter: 16px;
        --type-banner: clamp(2.5rem, 12.5vw, 4.25rem);
        --type-lead: clamp(2.25rem, 9.5vw, 3rem);
        --type-section: clamp(2.25rem, 10vw, 3.25rem);
        --type-secondary: clamp(2rem, 9vw, 2.75rem);
    }

    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    [data-grid-debug="true"] .grid-debug { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-debug span:nth-child(n + 5) { display: none; }

    .masthead-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--s2);
    }
    .wordmark { grid-column: 1; font-size: 0.95625rem; }
    .masthead-actions {
        grid-column: 2;
        gap: var(--s2);
        padding-left: var(--s2);
    }
    .masthead-actions > .theme-toggle { display: none; }
    .ask-link { display: inline-flex; }

    .section.marquee-deck {
        padding-block:
            calc(var(--s8) + var(--section-breathing))
            calc(clamp(72px, 12vw, 96px) + var(--section-breathing));
    }
    .marquee-grid { min-height: 0; }
    .section-01,
    .hero-rule,
    .hero-stage,
    .hero-strapline,
    .section-01 > * {
        grid-column: 1 / 5;
        grid-row: auto;
    }
    .hero-title {
        text-wrap: wrap;
    }
    .hero-strapline { margin-top: var(--s3); }
    .section-01 .kicker {
        grid-column: 1 / 5;
        grid-row: auto;
        margin-top: var(--s4);
        padding-top: 0;
        border-top: 0;
    }

    .section { padding-block: calc(var(--s6) + var(--section-breathing)); }
    #reach { padding-bottom: var(--s6); }
    .opening-thesis {
        grid-column: 1 / 5;
        grid-row: auto;
        margin-top: var(--s8);
        padding: var(--s5) 0 0;
        border-left: 0;
        border-top: 1px solid var(--rule);
    }
    .judgement {
        grid-column: 1 / 5;
        grid-row: auto;
        display: grid;
        grid-template-columns: subgrid;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        border-left: 0;
        border-right: 0;
    }
    .spread-a > * { grid-row: auto; }
    .judgement > * { grid-column: 1 / 5; }
    .judgement .display-section { margin-top: var(--s4); }

    .evidence {
        grid-column: 1 / 5;
        margin-top: var(--s6);
    }
    /* Briefs stack via the single-column base; the container query does
       not reach its intermediate threshold at this width. */

    .lived {
        grid-column: 1 / 5;
        grid-row: auto;
        margin: var(--s8) 0 0;
        padding: var(--s5) 0 0;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid var(--rule-strong);
    }

    .reality-main {
        grid-column: 1 / 5;
        grid-row: auto;
        display: grid;
        grid-template-columns: subgrid;
    }
    .accountability,
    .etymology {
        grid-column: 1 / 5;
        grid-row: auto;
    }
    .reality-main > * {
        grid-column: 1 / 5;
        grid-row: auto;
    }
    .reality-main .display-section { margin-top: var(--s4); }
    .accountability {
        margin: var(--s8) 0 0;
        padding: var(--s4) 0 0;
        border-left: 0;
    }
    .accountability .label {
        font-size: var(--type-furniture);
        letter-spacing: 0.14em;
    }
    .etymology {
        margin: var(--s10) 0 0;
        padding: var(--s3) 0 var(--s4);
        border-left: 0;
    }

    .execution > *, .reach > * { grid-row: auto; }
    .execution-main,
    .execution-rail,
    .reach-main,
    .first-contact,
    .principals {
        grid-column: 1 / 5;
    }
    .execution-main {
        margin-top: 0;
    }
    .execution-main .display-section { margin-top: var(--s4); }
    .execution-copy { width: 100%; margin-top: var(--s4); }
    .reach-lead { width: 100%; margin-top: var(--s4); }
    .execution-rail,
    .first-contact {
        margin: var(--s8) 0 0;
        padding: var(--s5) 0 0;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid var(--rule-strong);
    }
    .first-contact {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin: var(--s8) 0 0;
        padding: var(--s4) var(--s3) var(--s5);
        border: 0;
        border-top: 2px solid var(--rule-strong);
    }
    .first-contact > .label,
    .first-contact-lead,
    .contact-steps,
    .first-contact-action {
        grid-column: 1;
        grid-row: auto;
    }
    .contact-steps {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
        margin-top: var(--s4);
    }
    .contact-steps li {
        grid-template-columns: 2.25rem 1fr;
        gap: var(--s2);
        padding: 11px 0;
        border-left: 0;
        border-top: 1px solid var(--rule);
    }
    .hero-side-story .continuation-heading--aside { font-size: var(--type-section); }
    .principals {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin-top: var(--s8);
    }
    .principal {
        min-width: 0;
    }
    .principal + .principal {
        margin-top: var(--s5);
        padding: var(--s5) 0 0;
        border-left: 0;
        border-top: 1px solid var(--rule);
    }
    .hero-side-story .continuation-heading--aside { font-size: var(--type-section); }
    .footer-left, .footer-right {
        grid-column: 1 / 5;
        text-align: left;
    }
    .footer-right {
        max-width: none;
        margin-top: var(--s2);
        justify-self: start;
    }
}

@media (max-width: 420px) {
    .masthead-grid { column-gap: var(--s1); }
    .wordmark { font-size: 0.85rem; letter-spacing: 0.10em; }
    .masthead-actions { gap: var(--s1); padding-left: var(--s1); }
    .menu-button,
    .ask-link {
        min-width: 44px;
        padding-inline: 0;
        font-size: 0.6875rem;
        letter-spacing: 0.09em;
    }
}

@media (max-width: 760px) {
    .continuation-heading .heading-lock { white-space: normal; }
}

@media (max-width: 360px) {
    .ask-header { gap: var(--s2); }
    .ask-title,
    .ask-msg--assistant .ask-who {
        font-size: 0.9375rem;
        letter-spacing: 0.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root { --theme-bg-duration: 0.01ms; --theme-border-duration: 0.01ms; --theme-ink-duration: 0.01ms; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

html { overflow-x: clip; }

#judgement,
#reality,
#unknown,
#commitment,
#reach,
#first-contact {
    scroll-margin-top: calc(var(--masthead-height) + var(--s3));
}

.section-01 .folio-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    font-variant-numeric: tabular-nums;
}

.folio-time {
    flex: 0 0 auto;
    color: inherit;
    text-align: right;
    white-space: nowrap;
}

#folioZone {
    display: inline-block;
    font-size: 0.7em;
    letter-spacing: 0.08em;
    line-height: 1;
    vertical-align: baseline;
}

.hero-stage {
    min-height: calc(var(--type-banner) * 1.02);
}

.opening-thesis {
    display: flex;
    align-items: flex-start;
}

.continuation-kicker {
    margin: 0;
}

.continuation-kicker .kicker-number {
    color: var(--ink-meta);
}

.continuation-kicker .kicker-keyword {
    color: var(--ink-display);
}

.continuation-heading {
    margin: var(--s1) 0 0;
    font-family: var(--font-brand);
    font-size: var(--type-section);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.04;
    color: var(--ink-display);
    overflow-wrap: anywhere;
    text-transform: none;
    text-wrap: balance;
}

.kicker-number,
.continuation-kicker .kicker-number { color: var(--folio-ink); }

.continuation-heading .heading-keyword {
    color: var(--keyword-ink);
}

.heading-lock {
    white-space: nowrap;
}

/* Below 560px the full lock can exceed the content box; release it
   but keep multi-word keywords ("The unknown") on one line. */
/* Release the wrap-locks by COLUMN width, not viewport width:
   a lock may overflow its column at any viewport when the column
   is narrow (e.g. 05 beside its rail). */
.argument-chapter,
.unknown-main,
.commitment-main,
.reach-main {
    container-type: inline-size;
    container-name: heading-col;
}

@container heading-col (max-width: 480px) {
    .heading-lock { white-space: normal; }
    .heading-keyword { white-space: nowrap; }
}

/* Aside register: seat copy returns to the small scale used by the
   etymology, rails and records. */
.seat-copy .body { font-size: var(--type-small); line-height: 1.55; }

.continuation-heading--aside {
    font-size: var(--type-secondary);
}

.argument-spread {
    position: relative;
    align-items: start;
    border-top: 0;
}

.argument-spread::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    border-top: 1px solid var(--rule);
    pointer-events: none;
}

.argument-chapter {
    min-width: 0;
}

.argument-judgement {
    grid-column: 1 / 6;
}

.argument-reality {
    grid-column: 7 / 13;
    padding-left: clamp(24px, 2.25vw, 36px);
    border-left: 1px solid var(--rule-strong);
}

.argument-copy,
.unknown-copy,
.seat-copy {
    max-width: 65ch;
    margin-top: clamp(2.25rem, 3vw, 3.25rem);
}

.argument-copy .body,
.unknown-copy .body,
.seat-copy .body {
    color: var(--ink);
}

.argument-copy .body + .body,
.unknown-copy .body + .body,
.seat-copy .body + .body {
    margin-top: var(--s3);
}

.unknown-band > .shell.grid {
    grid-template-rows: min-content 1fr;
    row-gap: var(--s6);
}

.unknown-main {
    grid-column: 1 / 8;
    grid-row: 1;
    align-self: start;
}

.seat-card {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
    align-self: stretch;
    min-width: 0;
    padding-left: clamp(24px, 2.25vw, 36px);
    border-left: 1px solid var(--rule-strong);
}

.name-block {
    grid-column: 1 / 8;
    grid-row: 2;
}

.commitment-main {
    grid-column: 1 / 8;
}

.commitment-rail {
    grid-column: 9 / 13;
    align-self: start;
}

.commitment-rail .rail-item + .rail-item {
    padding-top: var(--s5);
}

.reach-main .continuation-heading {
    margin-top: var(--s1);
}

@media (min-width: 1201px) {
    .unknown-band > .shell.grid {
        min-height: clamp(22rem, 32vw, 30rem);
    }

    .name-block {
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--gutter);
        align-self: end;
        margin: 0;
        padding: var(--s4) 0;
        border-top: 1px solid var(--rule-strong);
        border-bottom: 1px solid var(--rule);
        border-left: 0;
    }

    .name-block .etymology-mark {
        grid-column: 1 / 3;
    }

    .name-block .etymology-text {
        grid-column: 3 / 8;
    }

    .name-block .etymology-text > .body:first-child {
        margin-top: 0;
    }
}

@media (max-width: 1024px) and (min-width: 761px) {
    .argument-judgement {
        grid-column: 1 / 5;
    }

    .argument-reality {
        grid-column: 5 / 9;
        padding-left: clamp(20px, 2.2vw, 28px);
    }

    .unknown-main {
        grid-column: 1 / 6;
        grid-row: 1;
    }

    .seat-card {
        grid-column: 6 / 9;
        grid-row: 1;
        padding-left: var(--s3);
    }

    .name-block {
        grid-column: 1 / 9;
        grid-row: 2;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--gutter);
        margin-top: var(--s6);
        padding: var(--s4) 0;
        border-top: 1px solid var(--rule-strong);
        border-bottom: 1px solid var(--rule);
        border-left: 0;
    }

    .name-block .etymology-mark {
        grid-column: 1 / 3;
    }

    .name-block .etymology-text {
        grid-column: 3 / 9;
    }

    .name-block .etymology-text > .body:first-child {
        margin-top: 0;
    }
}

@media (max-width: 760px) {
    .section-01 .folio-line {
        align-items: flex-start;
    }

    .hero-stage {
        min-height: 0;
    }

    .opening-thesis {
        margin-top: var(--s8);
    }

    .argument-spread > * {
        grid-row: auto;
    }

    .argument-judgement,
    .argument-reality {
        grid-column: 1 / 5;
    }

    .argument-reality {
        margin-top: var(--s8);
        padding: var(--s5) 0 0;
        border-top: 1px solid var(--rule-strong);
        border-left: 0;
    }

    .argument-copy,
    .unknown-copy,
    .seat-copy {
        margin-top: var(--s4);
    }

    .unknown-band > .shell.grid {
        grid-template-rows: auto;
        row-gap: 0;
    }

    .unknown-main,
    .seat-card,
    .name-block {
        grid-column: 1 / 5;
        grid-row: auto;
    }

    .seat-card {
        margin-top: var(--s8);
        padding: var(--s5) 0 0;
        border-top: 1px solid var(--rule-strong);
        border-left: 0;
    }

    .name-block {
        margin-top: var(--s10);
        padding: var(--s4) 0;
        border-left: 0;
    }

    .commitment-main,
    .commitment-rail {
        grid-column: 1 / 5;
    }
}

/* ---- BEGIN: Desktop Broadsheet Spine & Footer ---- */
@media (min-width: 1025px) {
    /* Execution (05): leave column 8 empty between the main argument
       and the secondary dispatch rail. */
    .execution-main {
        grid-column: 1 / 8;
    }

    .execution-rail {
        grid-column: 9 / 13;
    }

    /* Footer: four columns at either edge, with columns 5–8 empty. */
    .footer-left {
        grid-column: 1 / 5;
    }

    .footer-right {
        grid-column: 9 / 13;
        max-width: none;
        justify-self: stretch;
    }
}
/* ---- END: Desktop Broadsheet Spine & Footer ---- */

.hero-strapline-stack { display: grid; gap: 0.35em; max-width: 54ch; }
.hero-strapline-stack p { margin: 0; }
.strapline-proposition { color: var(--ink-display-muted); }

@media (min-width: 1025px) {
    .unknown-band > .shell.grid { grid-template-rows: repeat(3, auto); row-gap: 0; }
    .unknown-kicker { grid-column: 1 / 13; grid-row: 1; }
    .unknown-heading { grid-column: 1 / 11; grid-row: 2; }
    .unknown-main { grid-column: 1 / 7; grid-row: 3; margin-top: clamp(2.25rem, 3vw, 3.25rem); }
    .unknown-main > .unknown-copy { margin-top: 0; }
    .seat-card { grid-column: 7 / 10; grid-row: 3; align-self: start; margin-top: clamp(2.25rem, 3vw, 3.25rem); margin-left: clamp(20px, 2.5vw, 40px); }
    .name-block {
        display: block;
        grid-column: 10 / 13;
        grid-row: 3;
        align-self: start;
        margin: clamp(2.25rem, 3vw, 3.25rem) 0 0;
        padding: 0 0 0 clamp(24px, 2.25vw, 36px);
        border-left: 1px solid var(--rule);
        border-top: 0;
        border-bottom: 0;
    }
}
@media (max-width: 1024px) and (min-width: 761px) {
    .unknown-band > .shell.grid { grid-template-rows: repeat(4, auto); row-gap: 0; }
    .unknown-kicker { grid-column: 1 / 9; grid-row: 1; }
    .unknown-heading { grid-column: 1 / 9; grid-row: 2; }
    .unknown-main { grid-column: 1 / 6; grid-row: 3; margin-top: var(--s5); }
    .unknown-main > .unknown-copy { margin-top: 0; }
    .seat-card { grid-column: 6 / 9; grid-row: 3; align-self: start; margin-top: var(--s5); }
    .name-block {
        display: grid;
        grid-column: 1 / 9;
        grid-row: 4;
        grid-template-columns: subgrid;
        column-gap: var(--gutter);
        margin: var(--s8) 0 0;
        padding: var(--s4) 0 0;
        border-left: 0;
        border-top: 1px solid var(--rule-strong);
        border-bottom: 0;
    }
    .name-block .etymology-mark { grid-column: 1 / 3; }
    .name-block .etymology-text { grid-column: 3 / 9; }
    .name-block .etymology-text > .body:first-child { margin-top: 0; }
}

.hero-side-story { display: block; container-type: inline-size; container-name: aside-col; }
@container aside-col (max-width: 340px) {
    .heading-lock { white-space: normal; }
    .heading-keyword { white-space: nowrap; }
}
.hero-side-story .continuation-heading { margin-top: var(--s1); }
@media (min-width: 761px) {
    .hero-side-story { grid-row: 3 / 7; margin-top: 0; }
    .hero-side-story .continuation-heading { margin-top: var(--s1); }
}
@media (min-width: 1025px) {
    .hero-side-story .argument-copy { margin-top: clamp(2rem, 2.6vw, 2.75rem); max-width: 44ch; }
    .argument-reality {
        grid-column: 1 / 13;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--gutter);
        padding-left: 0;
        border-left: 0;
    }
    .argument-reality .continuation-kicker { grid-column: 1 / 8; grid-row: 1; }
    .argument-reality .continuation-heading { grid-column: 1 / 8; grid-row: 2; }
    .argument-reality .argument-copy {
        grid-column: 9 / 13;
        grid-row: 2 / 3;
        align-self: start;
        margin-top: calc(var(--s1) + 0.35em);
        padding-left: clamp(16px, 1.5vw, 24px);
        border-left: 1px solid var(--rule-strong);
    }
}

@media (max-width: 1024px) and (min-width: 761px) {
    .argument-reality {
        grid-column: 1 / 9;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--gutter);
        padding-left: 0;
        border-left: 0;
        margin-top: 0;
    }
    .argument-reality .continuation-kicker { grid-column: 1 / 9; grid-row: 1; }
    .argument-reality .continuation-heading { grid-column: 1 / 9; grid-row: 2; }
    .argument-reality .argument-copy {
        grid-column: 1 / 9;
        grid-row: 3;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--gutter);
        max-width: none;
        margin-top: var(--s6);
        padding-top: var(--s4);
        border-top: 1px solid var(--rule);
    }
    .argument-fact { grid-column: span 3; margin-top: 0; }
    .argument-fact:first-child { grid-column: span 2; }
    .argument-reality .argument-fact + .argument-fact { margin-top: 0; padding-left: var(--s3); border-left: 1px solid var(--rule); }
    .argument-side {
        grid-column: 1 / 9;
        grid-row: 4;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--gutter);
        margin-top: var(--s6);
    }
    .argument-side .proof-block { margin: 0; padding: 0; border: 0; max-width: none; }
    .argument-side .proof-block:first-child { grid-column: 1 / 5; }
    .argument-side .proof-block + .proof-block {
        grid-column: 5 / 9;
        margin-top: 0;
        padding: 0 0 0 var(--s3);
        border-top: 0;
        border-left: 1px dotted var(--rule-dotted);
    }
}
@media (max-width: 760px) {
    .hero-side-story {
        grid-column: 1 / 5;
        grid-row: auto;
        margin-top: var(--s8);
        padding: var(--s5) 0 0;
        border-left: 0;
        border-top: 1px solid var(--rule);
    }
    .hero-side-story .continuation-heading--aside { font-size: var(--type-section); }
    .argument-reality { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* Sibling 02 no longer matches .section-01 .kicker — restore the
   shared folio offset so 01/02 sit on one row. */
.hero-side-story .kicker { margin-top: calc(var(--s5) + 0.2rem); }
/* 01 and 02 are sibling sections; 01's children place directly on
   the opening grid (same coordinates), 02 is independent. */
.section-01 { display: contents; }
/* A tall 02 side story must not inflate the 01 rows it spans:
   give the opening grid a flexible final track and let the side
   story's excess height land there. */
.marquee-grid { grid-template-rows: repeat(5, auto) 1fr; }
/* The dateline spans the sheet; the clock right-aligns with the rule. */
#folioDate { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1024px) {
    .section-01 .folio-line { grid-column: 1 / 9; }
}
/* Balanced 4/4 opening split where 3 columns starve 02. */
@media (min-width: 761px) and (max-width: 900px) {
    .hero-stage,
    .hero-strapline { grid-column: 1 / 5; }
    .opening-thesis { grid-column: 5 / 9; }
}
@media (max-width: 760px) {
    
    .section-01 .folio-line { grid-column: 1 / 5; flex-wrap: wrap; row-gap: 2px; }
    .section-01 .folio-line .folio-time { margin-left: auto; }
    .unknown-band > .shell.grid { row-gap: 0; }
    .unknown-kicker,
    .unknown-heading { grid-column: 1 / 5; }
}
/* 05 tablet: the primary argument must out-measure its rail. */

@media (min-width: 761px) and (max-width: 1024px) {
    .commitment-rail {
        grid-column: 1 / 4;
        grid-row: 1;
        padding: 0 var(--s3) 0 0;
        border-left: 0;
        border-right: 1px solid var(--rule-strong);
    }
    .commitment-main { grid-column: 4 / 9; }
}
/* Reattach the 03 folio to its headline (the spanning copy column
   otherwise inflates row 1 and strands the number). */
@media (min-width: 1025px) {
    .argument-reality .continuation-kicker { align-self: end; }
}

/* ---- Opinion-2 proof blocks (variant B) ---- */
.proof-block {
    max-width: 44ch;
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px dotted var(--rule-dotted);
}
.proof-block h3 {
    margin-top: var(--s3);
    font-size: var(--type-dispatch);
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink-display);
}
.memory-list {
    list-style: none;
    margin: var(--s2) 0 0;
    padding: 0;
    font-size: var(--type-small);
    line-height: 1.55;
    color: var(--ink);
}
.memory-list li + li { margin-top: 2px; }
.proof-block .body {
    margin-top: var(--s2);
    font-size: var(--type-small);
    line-height: 1.55;
}
@media (min-width: 1025px) {
    .argument-reality .proof-block { grid-column: 1 / 8; grid-row: 3; align-self: start; }
}
/* The 04 heading sits outside .unknown-main, so it must be its own
   wrap-lock container or the lock never releases on narrow screens. */
.unknown-heading { container-type: inline-size; container-name: heading-col; }

.argument-fact + .argument-fact { margin-top: var(--s5); }
.argument-fact .body {
    margin-top: var(--s2);
    font-size: var(--type-dispatch);
    line-height: 1.45;
    color: var(--ink-display);
    text-wrap: pretty;
}
@media (min-width: 1025px) {
    .argument-reality .continuation-kicker { grid-column: 1 / 13; }
    .argument-reality .continuation-heading { grid-column: 1 / 9; }
    .argument-side {
        grid-column: 9 / 13;
        grid-row: 2 / 4;
        align-self: start;
        padding-left: clamp(16px, 1.5vw, 24px);
        border-left: 1px solid var(--rule-strong);
    }
    .argument-side .proof-block { margin: 0; padding: 0; border: 0; max-width: none; }
    .argument-side .proof-block + .proof-block {
        margin-top: var(--s5);
        padding-top: var(--s4);
        border-top: 1px dotted var(--rule-dotted);
    }
    .argument-side .proof-block h3 { margin-top: var(--s2); }
    .argument-reality .argument-copy {
        grid-column: 1 / 9;
        grid-row: 3;
        align-self: end;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--gutter);
        max-width: none;
        margin-top: var(--s8);
        padding-left: 0;
        border-left: 0;
    }
    .argument-fact { grid-column: span 3; min-width: 0; margin-top: 0; }
    .argument-fact:first-child { grid-column: span 2; }
    .argument-fact + .argument-fact {
        margin-top: 0;
        padding-left: clamp(20px, 2vw, 32px);
        border-left: 1px solid var(--rule);
    }
    .commitment-main { grid-column: 5 / 13; }
    .commitment-rail {
        grid-column: 1 / 4;
        grid-row: 1;
        padding: 0 clamp(24px, 2.25vw, 36px) 0 0;
        border-left: 0;
        border-right: 1px solid var(--rule-strong);
    }
}

@media (max-width: 760px) {
    .argument-fact + .argument-fact { margin-top: var(--s4); }
    .argument-side { margin-top: var(--s6); }
    .argument-side .proof-block + .proof-block { margin-top: var(--s4); padding-top: var(--s4); }
}

@media (min-width: 1201px) {
    .unknown-main { grid-column: 1 / 6; }
    .seat-card { grid-column: 6 / 9; }
    .name-block { grid-column: 9 / 13; }
}

/* Selection follows the system: display ink on paper, inverted. */
::selection { background: var(--ink-display); color: var(--bg); }

/* Memory items are a ledger, not prose: hanging em-dash markers
   give the list its own texture at the small scale. */
.memory-list li { padding-left: 1.15em; }
.memory-list li::before {
    content: "\2014";
    display: inline-block;
    width: 1.15em;
    margin-left: -1.15em;
    color: var(--folio-ink);
}

/* ---- BEGIN: R11B inverted continuation emphasis ---- */
/* The continuation device reverses: the section keyword carries
   display ink (it is the word the traveller scans for, matching
   the masthead nav); the qualifying tail recedes one step.
   Headings now anchor at their start instead of fading in.
   Guarded with :has so keyword-less asides ("We held.") keep
   full display ink. */
.continuation-heading:has(.heading-keyword) { color: var(--keyword-ink); }
.continuation-heading .heading-keyword { color: var(--ink-display); }

/* One step more presence for the opening statement on desktop. */
@media (min-width: 761px) {
    :root { --type-banner: clamp(3.25rem, 7.3vw, 6.5rem); }
}
/* ---- END: R11B inverted continuation emphasis ---- */

/* Surface-calibrated hairlines: the band ground swallows the
   page-tuned dotted rules; recalibrate them on the darker surface
   so The Choice's divider is a line, not a rumour. */
[data-theme="light"] .reality-band {
    --rule: rgba(18, 15, 13, 0.32);
    --rule-dotted: rgba(18, 15, 13, 0.52);
}
[data-theme="dark"] .reality-band {
    --rule-dotted: rgba(225, 224, 217, 0.38);
}

/* The Name joins the Seat's system at reduced scale: same
   skeleton (furniture, brand heading, copy), one register down —
   a coda, not an afterthought. */
.name-block h3 {
    margin-top: var(--s1);
    font-family: var(--font-brand);
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--ink-display);
}

@media (min-width: 1025px) {
    .name-block .etymology-text > .body:first-child {
        margin-top: var(--s4);
    }
}

/* 04's authored heading occupies the argument column; the right-hand
   trilogy can therefore rise to the section's top register. */
@media (min-width: 1025px) {
    .unknown-heading { grid-column: 1 / 8; }
}

/* The Seat and The Name are twin codas nested inside 04, not
   section peers: one reduced display register for both.
   "We held." keeps its weight through brevity, not scale. */
.seat-card .continuation-heading--aside {
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.seat-card .seat-copy { margin-top: var(--s4); }

@container heading-col (max-width: 560px) {
    .unknown-heading .heading-lock { white-space: normal; }
    .unknown-heading .heading-keyword { white-space: nowrap; }
}

/* The triptych no longer sinks to the rail's foot: facts and the
   dispatch rail share one top-aligned register beneath the
   heading — Route | Position | Decision | Clock on a single
   label line, spare space falling below, not above. */
@media (min-width: 1025px) {
    .argument-reality .argument-copy {
        align-self: start;
        margin-top: var(--s8);
    }
    .argument-side {
        grid-row: 1 / 4;
        align-self: start;
        margin-top: 0;
        min-width: 0;
    }
}

/* The folio numbers are wayfinding: 01-06 track the left edge.
   05's mirrored axis broke the spine for one section; it returns
   to the canonical left-main / right-rail composition, and
   Memory joins the rail beneath Continuity to complete the
   column. */
@media (min-width: 1025px) {
    .commitment-main { grid-column: 1 / 8; }
    .commitment-rail {
        grid-column: 9 / 13;
        grid-row: 1;
        padding: 0 0 0 clamp(24px, 2.25vw, 36px);
        border-right: 0;
        border-left: 1px solid var(--rule-strong);
    }
}
@media (min-width: 761px) and (max-width: 1024px) {
    .commitment-main { grid-column: 1 / 6; }
    .commitment-rail {
        grid-column: 6 / 9;
        grid-row: 1;
        padding: 0 0 0 var(--s3);
        border-right: 0;
        border-left: 1px solid var(--rule-strong);
    }
}

/* The two-line heading frees the right field: Authority,
   Continuity and Memory become three level columns instead of a
   stacked rail, absorbing the dead space under the copy. */
@media (min-width: 1025px) {
    .commitment-main { grid-column: 1 / 6; }
    .commitment-rail {
        grid-column: 6 / 13;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--s3);
    }
    .commitment-rail .rail-item {
        padding-block: 0;
        border-top: 0;
    }
    .commitment-rail .rail-item + .rail-item {
        padding-top: 0;
        padding-left: var(--s3);
        border-left: 1px dotted var(--rule-dotted);
    }
}

/* 04 no longer mirrors 05's columns: The Choice, The Seat and
   The Name stack as one dispatch rail on the right (the 03
   pattern), and the main argument keeps the left measure. */
.unknown-side { min-width: 0; }
.unknown-side .proof-block { max-width: none; }
.unknown-side .proof-block:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.unknown-side .seat-card,
.unknown-side .name-block {
    display: block;
    margin: var(--s5) 0 0;
    padding: var(--s4) 0 0;
    border: 0;
    border-top: 1px dotted var(--rule-dotted);
}
.unknown-side .seat-copy { margin-top: var(--s3); }
.unknown-side .etymology-text > .body:first-child { margin-top: var(--s3); }
@media (min-width: 1025px) {
    .unknown-main { grid-column: 1 / 8; }
    .unknown-side {
        grid-column: 9 / 13;
        grid-row: 1 / 4;
        align-self: start;
        margin-top: 0;
        padding-left: clamp(16px, 1.5vw, 24px);
        border-left: 1px solid var(--rule-strong);
    }
}
@media (min-width: 761px) and (max-width: 1024px) {
    .unknown-main { grid-column: 1 / 6; }
    .unknown-side {
        grid-column: 6 / 9;
        grid-row: 3;
        align-self: start;
        margin-top: var(--s5);
        padding-left: var(--s3);
        border-left: 1px solid var(--rule-strong);
    }
}
@media (max-width: 760px) {
    .unknown-side {
        grid-column: 1 / 5;
        margin-top: var(--s8);
        padding-top: var(--s5);
        border-top: 1px solid var(--rule-strong);
    }
}

/* 04's row template predates the side stack: 'min-content 1fr'
   let the heading row absorb the band's spare height, floating
   the copy mid-section. The flexible row is now the last one, so
   copy hugs its heading and spare space falls at the foot. */
@media (min-width: 761px) {
    .unknown-band > .shell.grid {
        grid-template-rows: min-content min-content 1fr;
    }
}

/* One reading ink. Rail notes were set in support ink — a third
   grey for running text. Support ink is furniture-only now;
   everything written to be read is --ink. */
.rail-note { color: var(--ink); }

/* One paragraph-space rule: body register breathes at s3,
   dispatch register at s2. These two ran at the wrong step. */
.execution-copy .body + .body { margin-top: var(--s3); }
.reach-lead .body + .body { margin-top: var(--s3); }

/* The two reading registers snap to the ladder: dispatch is one
   major-third step (÷1.25) below body at every viewport, so the
   rail's quieter voice reads as intentional, not as drift.
   body 17–20px, dispatch 13.6–16px — exactly body/1.25. */
:root {
    --type-body: clamp(1.0625rem, 1.32vw, 1.25rem);
    --type-small: clamp(0.85rem, 1.056vw, 1rem);
}

/* Perfect-fourth ladder (×1.333), anchored one half-step higher
   than the trial: body 18–21px. Every size is an exact rung:
   small = body÷1.333, deck = ×1.333, secondary = ×1.333³,
   section/lead = ×1.333⁴, banner = ×1.333⁵. */
:root {
    --type-furniture: 0.75rem;                           /* 12px */
    --type-small: clamp(0.875rem, 1.04vw, 0.985rem);     /* 14–15.75px — legibility floor raised */
    --type-body: clamp(1.125rem, 1.39vw, 1.3125rem);     /* 18–21px */
    --type-dispatch: clamp(1.5rem, 1.85vw, 1.75rem);     /* 24–28px — full rung above body */
    --type-deck: clamp(1.5rem, 1.85vw, 1.75rem);         /* 24–28px */
    --type-secondary: clamp(2.25rem, 3.5vw, 3.11rem);    /* 36–49.8px */
    --type-section: clamp(2.9rem, 4.95vw, 4.15rem);      /* 46–66.4px */
    --type-lead: clamp(2.9rem, 4.95vw, 4.15rem);
    --type-banner: clamp(3.7rem, 7.4vw, 5.53rem);        /* 59–88.5px = ×1.333⁵, one rung down */
}

/* The strapline anchors to the FOOT of the opening screen, level
   with 02's Boundary block: headline top, standfirst bottom, and
   the pause sits between them instead of pooling underneath. */
/* Headline and standfirst move as ONE block: on desktop the pair
   anchors to the foot of the opening screen together — kicker at
   the top, air in the middle, statement at the base. On mobile
   the wrapper dissolves and children keep their grid placement. */
.hero-block { display: contents; }
@media (min-width: 761px) {
    .hero-block {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        grid-column: 1 / 9;
        grid-row: 4 / 7;
        min-width: 0;
    }
    .hero-block .hero-stage,
    .hero-block .hero-strapline { grid-area: auto; }
    .hero-block .hero-strapline { margin-top: var(--s4); }
}
@media (min-width: 761px) and (max-width: 1024px) {
    .hero-block { grid-column: 1 / 6; }
    .hero-title {
        font-size: clamp(3rem, 6vw, 3.85rem);
        text-wrap: wrap;
    }
}
@media (min-width: 761px) and (max-width: 900px) {
    .hero-block { grid-column: 1 / 5; }
    .hero-title { font-size: clamp(2.65rem, 5.7vw, 3.2rem); }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .hero-title {
        font-size: clamp(3.85rem, 6vw, 4.5rem);
        text-wrap: wrap;
    }
}

/* 03 and 04 break exactly where the sense breaks:
   "Reality — where theory" / "ends." and
   "The unknown — the" / "same for both." */
.reality-heading { min-width: 0; }

@media (min-width: 1025px) {
    .reality-heading {
        font-size: clamp(2.9rem, 4.7vw, 4.15rem);
    }
}

.reality-heading .reality-heading-line,
.unknown-heading .unknown-heading-line {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: inherit;
}

.reality-heading .reality-heading-line .heading-keyword,
.reality-heading .reality-heading-line .heading-tail,
.unknown-heading .unknown-heading-line .heading-keyword,
.unknown-heading .unknown-heading-line .heading-tail {
    display: inline;
    font-size: inherit;
}

@media (min-width: 1025px) {
    .reality-heading .reality-heading-line,
    .reality-heading .reality-heading-line .heading-keyword,
    .reality-heading .reality-heading-line .heading-tail,
    .unknown-heading .unknown-heading-line,
    .unknown-heading .unknown-heading-line .heading-keyword,
    .unknown-heading .unknown-heading-line .heading-tail {
        overflow-wrap: normal;
        white-space: nowrap;
    }
}

/* One card pattern everywhere: small-caps label, semibold lead
   line AT BODY SIZE, regular support a step below. Hierarchy by
   weight, not size — display scale is reserved for section
   headings and the banner. */
:root { --type-dispatch: clamp(1.125rem, 1.39vw, 1.3125rem); } /* = body */
.proof-block h3,
.evidence-item h3,
.accountability h3,
.rail-item h3,
.rail-emphasis {
    font-weight: 600;
    line-height: 1.4;
}
/* Facts join the same pattern: their single line IS the lead
   line — semibold, body size, display ink. */
.argument-fact .body {
    font-weight: 600;
    color: var(--ink-display);
}

.hero-strapline-stack .body {
    font-weight: 400;
}

.commitment-main .continuation-heading .heading-keyword,
.commitment-main .continuation-heading .heading-tail {
    display: block;
    font-size: inherit;
}

.commitment-main .continuation-heading .heading-keyword {
    overflow-wrap: anywhere;
    white-space: normal;
}

.commitment-main .continuation-heading .heading-tail {
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Preserve the authored lock in Section 06 at tablet and desktop sizes. */
@media (min-width: 761px) {
    .reach-main .continuation-heading > .heading-tail {
        white-space: nowrap;
    }
}

/* BEGIN ask-swap-r18 */

/*
 * Two readings of the mark share one grid cell, sized by the longer reading.
 * Their cross-fade matches the drawer's 420ms ease exactly, so both changes
 * read as one system response.
 */
.wordmark-swap {
    display: inline-grid;
    isolation: isolate;
}

.wordmark-read {
    grid-area: 1 / 1;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
    transition: opacity 420ms ease;
}

.wordmark-read--brand {
    color: var(--ink-display);
    opacity: 1;
}

.wordmark-read--ask {
    color: var(--ask-wordmark);
    opacity: 0;
}

.wordmark-swap.is-ask .wordmark-read--brand {
    opacity: 0;
}

.wordmark-swap.is-ask .wordmark-read--ask {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .wordmark-read { transition: none; }
}

@media (forced-colors: active) {
    .wordmark-read--ask { display: none; }
    .wordmark-read--brand { color: CanvasText; opacity: 1; }
}

/* END ask-swap-r18 */

/* BEGIN ask-neutral-r19 */

.ask-link { color: var(--ask-closed); transition: color 140ms ease; }

@media (hover: hover) and (pointer: fine) {
    .ask-link:hover { color: var(--ask-active); }
}

.ask-link[aria-expanded="true"] { color: var(--ask-active); }

.wordmark:focus-visible,
.masthead-nav a:focus-visible,
.theme-toggle:focus-visible,
.menu-button:focus-visible,
.ask-link:focus-visible,
.ask-panel button:focus-visible,
.ask-panel a:focus-visible,
.ask-panel input:focus-visible,
.ask-panel textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
}

/* The textarea uses its focus-coloured border as a single boundary. */
.ask-panel .ask-input:focus-visible { outline: none; }

/* END ask-neutral-r19 */

/* BEGIN ask-swap-r18-stacking */

/* masthead 200 → backdrop 300 → panel 500.
   The veil now dims the complete page, including the masthead, while the
   drawer and its controls remain clear above it. */
.ask-overlay { position: static; z-index: auto; }
.ask-backdrop { position: fixed; z-index: 300; }
.masthead { z-index: 200; }
.ask-panel { position: fixed; z-index: 500; }

/* END ask-swap-r18-stacking */

/*
 * The real Söhne Breit metrics are wider than the fallback at 320px.
 * Reclaim masthead spacing without shrinking or hiding either label.
 */
@media (max-width: 360px) {
    .masthead-grid {
        padding-inline: 8px;
        column-gap: 4px;
    }

    .masthead-actions {
        gap: 3px;
        padding-left: 0;
    }

}

@media (max-width: 420px) {
    .wordmark { font-size: 0.85rem; }
    #folioDate { white-space: normal; }
    .continuation-heading .heading-keyword {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .hero-title {
        font-size: clamp(2.5rem, 12.5vw, 4.25rem);
        overflow-wrap: anywhere;
        text-wrap: wrap;
        text-wrap-style: auto;
    }
}

@media (max-width: 360px) {
    .unknown-heading,
    .commitment-main .continuation-heading {
        font-size: clamp(2.25rem, 10vw, 3.25rem);
    }
}

/* BEGIN ask-action-states-r19 */

/* Canvas wells remain legible against the drawer without spending the accent. */
.ask-new {
    color: var(--ink-support);
}

.ask-new:hover,
.ask-new:focus-visible {
    background: var(--bg);
    color: var(--ink-display);
    border-color: var(--rule-strong);
}

.ask-send {
    background: var(--bg);
    color: var(--ink-support);
    font-size: var(--type-furniture);
    letter-spacing: 0.09em;
}

.ask-send:disabled {
    background: var(--bg);
    color: var(--ink-support);
}

.ask-send:hover:not(:disabled),
.ask-send:focus-visible:not(:disabled) {
    background: var(--bg);
    color: var(--ink-display);
    border-color: var(--rule-strong);
}

/* END ask-action-states-r19 */

.continuation-heading .heading-lock,
.continuation-heading .heading-lock .heading-keyword,
.commitment-main .continuation-heading .heading-tail,
.reach-main .continuation-heading > .heading-tail,
.reality-heading .reality-heading-line,
.reality-heading .reality-heading-line .heading-keyword,
.reality-heading .reality-heading-line .heading-tail,
.unknown-heading .unknown-heading-line,
.unknown-heading .unknown-heading-line .heading-keyword,
.unknown-heading .unknown-heading-line .heading-tail{
    white-space: normal;
    overflow-wrap: anywhere;
}