@import url("https://fonts.googleapis.com/css2?family=Charis+SIL:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Rokkitt:wght@100..900&display=swap");

@font-face {
    font-family: "Satoshi";
    src: url("https://cdn.prod.website-files.com/63bf3035c41a69b4c7659fd9/64106a54625363072ae88935_Satoshi-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}

@font-face {
    font-family: "Adieu";
    src: url("../assets/fonts/Adieu/c.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Adieu";
    src: url("../assets/fonts/Adieu/d.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Adieu";
    src: url("../assets/fonts/Adieu/b.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Adieu";
    src: url("../assets/fonts/Adieu/a.ttf") format("truetype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "Figue";
    src: url("../assets/fonts/GTFFigueTRIAL-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Top Luxury";
    src: url("../assets/fonts/topluxury_2LYgEuayIS.woff?v=20260811") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../assets/fonts/montserrat-latin.woff2?v=20260811") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Futura";
    src: url("https://cdn.jsdelivr.net/fontsource/fonts/league-spartan:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "D-DIN";
    src: url("../assets/fonts/D-DIN.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "D-DIN";
    src: url("../assets/fonts/D-DIN-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "D-DIN Expanded";
    src: url("../assets/fonts/D-DINExp-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --theme-bg-dark: #121B26;
    --theme-bg-dark-rgb: 18, 27, 38;
    --theme-bg-light: #faf7f1;
    --theme-bg-light-rgb: 250, 250, 240;
    --bg: var(--theme-bg-dark);
    --text: var(--theme-bg-light);
    --muted: rgba(var(--theme-bg-light-rgb), 0.68);
    --quiet: rgba(var(--theme-bg-light-rgb), 0.48);
    --line: rgba(245, 241, 232, 0.16);
    --line-strong: rgba(245, 241, 232, 0.32);
    --accent: #d8c195;
    --surface: rgba(255, 255, 255, 0.055);
    --surface-strong: rgba(255, 255, 255, 0.1);
    --panel: rgba(8, 13, 20, 0.74);
    --body-bg: linear-gradient(180deg, var(--theme-bg-dark) 0%, var(--theme-bg-dark) 100%);
    --section-bg: var(--body-bg);
    --page-grid-line: rgba(255, 255, 255, 0.028);
    --page-grid-line-soft: rgba(255, 255, 255, 0.022);
    --hero-image: url("../assets/00-presence-front-full-black.webp");
    --hero-rear-image: url("../assets/00-presence-rear-full-black.webp");
    --hero-fallback-image: url("../assets/01-presence-front.webp");
    --hero-image-position: center;
    --hero-image-size: cover;
    --hero-stage-image-position: center top;
    --hero-stage-image-size: 100% auto;
    --hero-bg:
        linear-gradient(180deg, rgba(var(--theme-bg-dark-rgb), 0.15), rgba(var(--theme-bg-dark-rgb), 0.86)),
        radial-gradient(circle at 72% 32%, rgba(216, 193, 149, 0.16), transparent 24rem),
        var(--theme-bg-dark);
    --hero-overlay: linear-gradient(180deg, rgba(var(--theme-bg-dark-rgb), 0.68) 0%, rgba(var(--theme-bg-dark-rgb), 0.34) 18%, rgba(var(--theme-bg-dark-rgb), 0.08) 38%, transparent 58%);
    --hero-grid-line: rgba(255, 255, 255, 0.025);
    --hero-grid-line-soft: rgba(255, 255, 255, 0.018);
    --hero-spec-bg: rgba(var(--theme-bg-dark-rgb), 0.38);
    --nav-text: rgba(var(--theme-bg-light-rgb), 0.82);
    --frame-overlay: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.48) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 42%);
    --card-bg:
        linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.025)),
        var(--panel);
    --point-text: rgba(var(--theme-bg-light-rgb), 0.82);
    --point-bg:
        linear-gradient(90deg, rgba(216, 193, 149, 0.08), transparent 38%),
        rgba(255, 255, 255, 0.035);
    --contact-bg: rgba(255, 255, 255, 0.04);
    --contact-bg-hover: rgba(255, 255, 255, 0.07);
    --cta-text: #090a0d;
    --image-bg: var(--theme-bg-dark);
    --toggle-bg: rgba(var(--theme-bg-dark-rgb), 0.36);
    --toggle-active-bg: rgba(216, 193, 149, 0.22);
    --toggle-active-text: var(--text);
    --scroll-edge-fade:
        linear-gradient(180deg, rgba(var(--theme-bg-dark-rgb), 0.72), transparent 18%, transparent 78%, rgba(var(--theme-bg-dark-rgb), 0.52));
    --intro-veil:
        linear-gradient(180deg, rgba(var(--theme-bg-dark-rgb), 0.02) 0%, rgba(var(--theme-bg-dark-rgb), 0.22) 46%, rgba(var(--theme-bg-dark-rgb), 0.1) 100%);
    --scroll-sequence-to-bg:
        linear-gradient(180deg, rgba(var(--theme-bg-dark-rgb), 0) 0%, rgba(var(--theme-bg-dark-rgb), 0.76) 62%, var(--theme-bg-dark) 84%, var(--theme-bg-dark) 100%);
    --max-width: 1440px;
    --radius-lg: 30px;
    --radius-md: 0.5rem;  /* 22px */
    --radius-sm: 14px;
    --shadow: 0 24px 90px rgba(0, 0, 0, 0.34);
    --glow: 0 0 70px rgba(216, 193, 149, 0.16);
    --frame-corner: rgba(245, 241, 232, 0.48);
    --frame-corner-muted: rgba(245, 241, 232, 0.22);
    --frame-size: 32px;
    --chapter-image-ratio: 3 / 2;
    --chapter-panel-min-height: 58svh;
    --intro-side-padding: clamp(1rem, 7vw, 5rem);

    /* Navigation: 100% + Sticky */
    --nav-height: 90px;
    --nav-height-sticky: 74px;
    --nav-logo-width: clamp(6.5rem, 10vw, 9rem);
    --nav-logo-width-sticky: clamp(5.5rem, 8vw, 7.5rem);
    --font-display: "Adieu", Arial, sans-serif;
    --font-body: "Satoshi", "Helvetica Neue", Arial, "Segoe UI", sans-serif;
    --font-serif: "Charis SIL", Georgia, "Times New Roman", serif;
}

html[data-theme="light"] {
    --bg: var(--theme-bg-light);
    --text: var(--theme-bg-dark);
    --muted: rgba(var(--theme-bg-dark-rgb), 0.9);  /* 0.7 */
    --quiet: rgba(var(--theme-bg-dark-rgb), 0.5);
    --line: rgba(62, 48, 32, 0.16);
    --line-strong: rgba(62, 48, 32, 0.32);
    --accent: #8b6b3f;
    --surface: rgba(255, 255, 255, 0.48);
    --surface-strong: rgba(62, 48, 32, 0.14);
    --panel: rgba(var(--theme-bg-light-rgb), 0.74);
    --body-bg: linear-gradient(180deg, var(--theme-bg-light) 0%, var(--theme-bg-light) 100%);
    --section-bg: linear-gradient(180deg, #faf7f0 0%, #fdfbf8 100%);
    --page-grid-line: rgba(62, 48, 32, 0.055);
    --page-grid-line-soft: rgba(62, 48, 32, 0.04);
    --hero-image: url("../assets/00-presence-front-full-sand.webp");
    --hero-rear-image: url("../assets/00-presence-rear-full-sand.webp");
    --hero-bg: linear-gradient(180deg, var(--theme-bg-light) 0%, var(--theme-bg-light) 100%);
    --hero-overlay: linear-gradient(180deg, rgba(var(--theme-bg-light-rgb), 0.34) 0%, rgba(var(--theme-bg-light-rgb), 0.18) 20%, transparent 50%, rgba(var(--theme-bg-light-rgb), 0.18) 100%);
    --hero-grid-line: rgba(62, 48, 32, 0.045);
    --hero-grid-line-soft: rgba(62, 48, 32, 0.032);
    --hero-spec-bg: rgba(var(--theme-bg-light-rgb), 0.44);
    --nav-text: rgba(var(--theme-bg-dark-rgb), 0.78);
    --frame-corner: rgba(62, 48, 32, 0.42);
    --frame-corner-muted: rgba(62, 48, 32, 0.2);
    --frame-overlay: linear-gradient(180deg, transparent 48%, rgba(22, 18, 13, 0.3) 100%), linear-gradient(90deg, rgba(22, 18, 13, 0.16), transparent 42%);
    --card-bg:
        linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.2)),
        var(--panel);
    --point-text: rgba(var(--theme-bg-dark-rgb), 0.78);
    --point-bg:
        linear-gradient(90deg, rgba(139, 107, 63, 0.1), transparent 38%),
        rgba(255, 255, 255, 0.34);
    --contact-bg: rgba(255, 255, 255, 0.34);
    --contact-bg-hover: rgba(255, 255, 255, 0.54);
    --cta-text: var(--theme-bg-light);
    --image-bg: var(--theme-bg-light);
    --shadow: 0 24px 90px rgba(91, 70, 45, 0.2);
    --glow: 0 0 70px rgba(139, 107, 63, 0.12);
    --toggle-bg: rgba(var(--theme-bg-light-rgb), 0.46);
    --toggle-active-bg: rgba(22, 18, 13, 0.12);
    --toggle-active-text: var(--text);
    --scroll-edge-fade:
        linear-gradient(180deg, rgba(var(--theme-bg-light-rgb), 0.86), transparent 20%, transparent 78%, rgba(var(--theme-bg-light-rgb), 0.72));
    --intro-veil:
        linear-gradient(180deg, rgba(var(--theme-bg-light-rgb), 0.04) 0%, rgba(var(--theme-bg-light-rgb), 0.34) 46%, rgba(var(--theme-bg-light-rgb), 0.14) 100%);
    --scroll-sequence-to-bg:
        linear-gradient(180deg, rgba(var(--theme-bg-light-rgb), 0) 0%, rgba(var(--theme-bg-light-rgb), 0.72) 58%, rgba(var(--theme-bg-light-rgb), 0.94) 72%, var(--theme-bg-light) 80%, var(--theme-bg-light) 100%);
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    overflow-x: clip;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    background: var(--body-bg);
}

body::before {
    content: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--page-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--page-grid-line-soft) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 75%);
    z-index: 0;
}

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

button {
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    background: none;
    cursor: pointer;
}

h1,
h2,
p {
    margin: 0;
}

.site-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100svh;
    margin: 0 auto;
    padding: 1rem;
    overflow-x: clip;
    overflow-y: visible;
}

.story-hero {
    position: sticky;
    top: 0;
    z-index: 1;
    width: calc(100% + 2rem);
    isolation: isolate;
    min-height: 100svh;
    display: grid;
    align-content: space-between;
    gap: clamp(1rem, 4vw, 2.25rem);
    margin: -1rem -1rem 0;
    padding: clamp(1.2rem, 4vw, 3rem) 1rem clamp(1.1rem, 5vw, 2.2rem);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--hero-bg);
}

.story-hero::before,
.story-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.story-hero::before {
    inset: 0;
    background:
        var(--hero-overlay),
        var(--hero-image) var(--hero-stage-image-position) / var(--hero-stage-image-size) no-repeat,
        var(--hero-bg);
    opacity: 1;
    transform-origin: center center;
    animation: hero-front-zoom 20s ease-in-out infinite;
}

.story-hero::after {
    inset: 0;
    background:
        var(--hero-overlay),
        var(--hero-rear-image) var(--hero-stage-image-position) / var(--hero-stage-image-size) no-repeat,
        var(--hero-bg);
    opacity: 0;
    transform-origin: center center;
    animation:
        hero-rear-crossfade 20s ease-in-out infinite,
        hero-rear-zoom 20s ease-in-out infinite;
}

@keyframes hero-rear-crossfade {
    0%,
    45% {
        opacity: 0;
    }

    50%,
    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes hero-front-zoom {
    0%,
    50%,
    100% {
        transform: scale(1.015);
    }

    25% {
        transform: scale(1.075);
    }
}

@keyframes hero-rear-zoom {
    0%,
    50%,
    100% {
        transform: scale(1.015);
    }

    75% {
        transform: scale(1.075);
    }
}

.scroll-intro {
    position: relative;
    z-index: 950;
    width: calc(100% + 2rem);
    min-height: 252svh;
    display: grid;
    gap: 0;
    margin: -100svh -1rem 0;
    color: var(--text);
    pointer-events: none;
    isolation: isolate;
}

.scroll-intro::before {
    content: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    background:
        var(--intro-veil),
        var(--hero-overlay),
        var(--hero-image) var(--hero-image-position) / var(--hero-image-size) no-repeat fixed,
        var(--hero-fallback-image) var(--hero-image-position) / var(--hero-image-size) no-repeat fixed,
        var(--hero-bg);
    transition: opacity 0.18s ease;
}

html.is-scroll-sequence-active .scroll-intro::before {
    opacity: 1;
}

.scroll-intro::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: 136svh;
    pointer-events: none;
    background: var(--scroll-sequence-to-bg);
}

html.is-menu-open .scroll-intro {
    z-index: 900;
}

.scroll-intro-panel {
    position: relative;
    z-index: 1;
    min-height: 94svh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    padding: clamp(5rem, 14svh, 9rem) var(--intro-side-padding);
    text-align: center;
}

.scroll-intro-panel--lead {
    min-height: 152svh;
    align-content: start;
    padding-top: 104svh;
}

.scroll-intro-panel--details {
    min-height: 65svh;
}

.scroll-intro-kicker {
    color: #cb0203;
    font-family: var(--kicker-font, "Adieu", Arial, sans-serif);
    font-size: clamp(0.8rem, 1.6vw, 1.1rem);
    font-weight: var(--kicker-weight, 900);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 1px 1px 0.25rem rgba(0, 0, 0, 0.25);*/
}

.scroll-intro-title {
    max-width: min(92vw, 12em);
    white-space: nowrap;
}

.scroll-intro-copy {
    width: 100%;
    max-width: 100%;
    color: var(--text);

    font-family: var(--subline-font);
    font-size: var(--subline-size);
    font-weight: var(--subline-weight);
    line-height: var(--subline-line-height);
    letter-spacing: var(--subline-letter-spacing);
    text-transform: var(--subline-transform);

    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.scroll-intro-statement {
    max-width: min(15em, 92vw);
    overflow-wrap: normal;
}

.scroll-intro-meta {
    width: min(100%, 68rem);
    display: grid;
    gap: 0.7rem;
    color: var(--accent);
    font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scroll-intro-meta span {
    position: relative;
    padding-top: 0.8rem;
    border-top: 0;
}

.scroll-intro-meta span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 50%, var(--theme-bg-light) 50%) 12%,
        color-mix(in srgb, var(--accent) 50%, var(--theme-bg-light) 50%) 88%,
        transparent 100%
    );
}

.presence-strip {
    position: relative;
    z-index: 960;
    width: 100%;
    aspect-ratio: 1600 / 198;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
}

.presence-strip::before,
.presence-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    
        --presence-class-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgNzAgMTYwMCAxOTgiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNNDEuODggMTA3LjQ5TDk2LjYyIDEwNy40OVExMTUuNjIgMTA3LjQ5IDEyNS42NiAxMTYuNjRRMTM1LjY5IDEyNS43OSAxMzUuNjkgMTQxLjk4UTEzNS42OSAxNDcuMjYgMTMzLjU4IDE1My4zNFExMzEuNDYgMTU5LjQxIDEyNi44OSAxNjUuNjZRMTIyLjMxIDE3MS45MCAxMTYuMDYgMTc3LjEwUTEwOS44MiAxODIuMjkgMTAwLjY2IDE4NS45MFE5MS41MSAxODkuNTAgODEuMTMgMTkwLjIxUTk5LjYxIDE4My43MCAxMTAuNDMgMTY5LjQ0UTEyMS4yNiAxNTUuMTggMTIxLjI2IDEzOS44N1ExMjEuMjYgMTI2LjUwIDExMy41MSAxMTguNzVRMTA1Ljc3IDExMS4wMSA5Mi4yMiAxMTAuODNMNTYuMzEgMTEwLjgzTDU2LjMxIDIzMC4zNEw0MS44OCAyMzAuMzRMNDEuODggMTA3LjQ5TTIwNS45MSAxODEuOTRMMjUzLjA4IDIzMC4zNEwyMzYuMDEgMjMwLjM0TDIxMi4yNSAyMDQuODJRMTkyLjU0IDE4My4zNCAxNzguNjMgMTc5LjQ3TDE5My41OSAxNzkuNDdRMjA0LjE1IDE3OS40NyAyMTEuOTggMTc2LjM5UTIxOS44MiAxNzMuMzEgMjIzLjk1IDE2OC4xMlEyMjguMDkgMTYyLjkzIDIzMC4xMSAxNTcuMjFRMjMyLjE0IDE1MS40OSAyMzIuMTQgMTQ1LjE1UTIzMi4xNCAxMzguNjQgMjMwLjM4IDEzMy4wMVEyMjguNjIgMTI3LjM4IDIyNC40OCAxMjIuMThRMjIwLjM0IDExNi45OSAyMTIuNDIgMTEzLjkxUTIwNC41MCAxMTAuODMgMTkzLjU5IDExMC44M0wxNjMuODUgMTEwLjgzTDE2My44NSAyMzAuMzRMMTQ5LjQyIDIzMC4zNEwxNDkuNDIgMTA3LjQ5TDE5My41OSAxMDcuNDlRMjE4Ljc2IDEwNy40OSAyMzMuMTAgMTE4LjIyUTI0Ny40NSAxMjguOTYgMjQ3LjYyIDE0NS4xNVEyNDcuODAgMTU5LjA2IDIzNi43MSAxNjkuMThRMjI1LjYyIDE3OS4zMCAyMDUuOTEgMTgxLjk0TTI4MC41NCAyMjYuOTlMMzIyLjQyIDIyNi45OVEzMzQuMjIgMjI2Ljk5IDM0Mi44NCAyMjQuNTNRMzUxLjQ2IDIyMi4wNiAzNjAuNDQgMjEzLjc5TDM2MC40NCAyMzAuMzRMMjY2LjEwIDIzMC4zNEwyNjYuMTAgMTA3LjQ5TDM1OC4zMyAxMDcuNDlMMzU4LjMzIDEyNC4wM1EzNDkuMTggMTE1Ljc2IDM0MC41NSAxMTMuMzBRMzMxLjkzIDExMC44MyAzMjAuMTQgMTEwLjgzTDI4MC41NCAxMTAuODNMMjgwLjU0IDE2OC41NkwzMDAuNDIgMTY4LjU2UTMxOS4yNiAxNjguNTYgMzMyLjk4IDE2MC44MkwzMzIuOTggMTc5LjY1UTMxOS4yNiAxNzEuOTAgMzAwLjQyIDE3MS45MEwyODAuNTQgMTcxLjkwTDI4MC41NCAyMjYuOTlNMzg2LjMxIDEzNS40N1EzODYuMzEgMTQzLjA0IDM5NC4zMiAxNDkuMDJRNDAyLjMzIDE1NS4wMSA0MTMuNjggMTU5LjUwUTQyNS4wMyAxNjMuOTggNDM2LjM4IDE2OC44MlE0NDcuNzQgMTczLjY2IDQ1NS43NCAxODEuNDFRNDYzLjc1IDE4OS4xNSA0NjMuNzUgMTk5LjE4UTQ2My43NSAyMDguMTYgNDU5LjE4IDIxNC45NFE0NTQuNjAgMjIxLjcxIDQ0Ni41OSAyMjUuNThRNDM4LjU4IDIyOS40NiA0MjguOTkgMjMxLjMwUTQxOS40MCAyMzMuMTUgNDA4LjMxIDIzMy4xNVEzODYuNDkgMjMzLjE1IDM2OC4wMSAyMjcuMTdMMzY4LjAxIDIwNi40MFEzNzMuODIgMjE2LjQzIDM4Ny4yOCAyMjIuNTlRNDAwLjc0IDIyOC43NSA0MTUuMTggMjI4Ljc1UTQyOS42MSAyMjguNzUgNDM5LjIwIDIyMi4xNVE0NDguNzkgMjE1LjU1IDQ0OC43OSAyMDIuNTNRNDQ4Ljc5IDE5My45MCA0NDAuNzggMTg3LjMwUTQzMi43OCAxODAuNzAgNDIxLjQyIDE3Ni4zMFE0MTAuMDcgMTcxLjkwIDM5OC43MiAxNjcuMzNRMzg3LjM3IDE2Mi43NSAzNzkuMzYgMTU1LjYyUTM3MS4zNSAxNDguNTAgMzcxLjM1IDEzOC44MlEzNzEuMzUgMTIxLjM5IDM4NS43MCAxMTMuMTJRNDAwLjA0IDEwNC44NSA0MjEuODYgMTA0Ljg1UTQ0MS45MyAxMDQuODUgNDYwLjQxIDExMC44M0w0NjAuNDEgMTMxLjYwUTQ1NC40MiAxMjEuMjIgNDQxLjY2IDExNC43OVE0MjguOTAgMTA4LjM3IDQxNS43MCAxMDguMzdRNDAyLjg2IDEwOC4zNyAzOTQuNTggMTE1LjE0UTM4Ni4zMSAxMjEuOTIgMzg2LjMxIDEzNS40N000OTQuMzggMjI2Ljk5TDUzNi4yNiAyMjYuOTlRNTQ4LjA2IDIyNi45OSA1NTYuNjggMjI0LjUzUTU2NS4zMCAyMjIuMDYgNTc0LjI4IDIxMy43OUw1NzQuMjggMjMwLjM0TDQ3OS45NCAyMzAuMzRMNDc5Ljk0IDEwNy40OUw1NzIuMTcgMTA3LjQ5TDU3Mi4xNyAxMjQuMDNRNTYzLjAyIDExNS43NiA1NTQuMzkgMTEzLjMwUTU0NS43NyAxMTAuODMgNTMzLjk4IDExMC44M0w0OTQuMzggMTEwLjgzTDQ5NC4zOCAxNjguNTZMNTE0LjI2IDE2OC41NlE1MzMuMTAgMTY4LjU2IDU0Ni44MiAxNjAuODJMNTQ2LjgyIDE3OS42NVE1MzMuMTAgMTcxLjkwIDUxNC4yNiAxNzEuOTBMNDk0LjM4IDE3MS45MEw0OTQuMzggMjI2Ljk5TTY5My42MSAxMDcuNDlMNjkzLjYxIDIzMC4zNEw1OTMuNjQgMTIwLjUxTDU5My42NCAxOTIuMTRRNTkzLjY0IDIwMy45NCA1OTYuMTAgMjEyLjU2UTU5OC41NyAyMjEuMTggNjA2Ljg0IDIzMC4zNEw1ODkuNzcgMjMwLjM0TDU4OS43NyAxMTYuMTFMNTgxLjg1IDEwNy40OUw2MDEuNzQgMTA3LjQ5TDY4OS43NCAyMDMuNDFMNjg5Ljc0IDE0NS42OFE2ODkuNzQgMTMzLjg5IDY4Ny4yNyAxMjUuMjZRNjg0LjgxIDExNi42NCA2NzYuNTQgMTA3LjQ5TDY5My42MSAxMDcuNDlNNzI1Ljk5IDE2NC41MVE3MjUuOTkgMTc4Ljk0IDczMC42NiAxOTAuNDdRNzM1LjMyIDIwMiA3NDMuMjQgMjA5LjA0UTc1MS4xNiAyMTYuMDggNzYxLjAyIDIxOS43OFE3NzAuODcgMjIzLjQ3IDc4MS43OCAyMjMuNDdRNzk3LjQ1IDIyMy40NyA4MTEuNjIgMjE1LjkwUTgyNS43OCAyMDguMzQgODM0LjA2IDE5NC40M1E4MjkuNDggMjExLjUwIDgxMS43MCAyMjEuOThRNzkzLjkzIDIzMi40NSA3NzIuNjMgMjMyLjQ1UTc2Mi45NSAyMzIuNDUgNzU0LjA2IDIzMC4xNlE3NDUuMTggMjI3Ljg3IDczNy4wOCAyMjIuOTRRNzI4Ljk4IDIxOC4wMiA3MjMgMjEwLjcxUTcxNy4wMiAyMDMuNDEgNzEzLjUwIDE5Mi42N1E3MDkuOTggMTgxLjk0IDcwOS45OCAxNjguOTFRNzA5Ljk4IDE0MS4xMCA3MjkuMzQgMTIzLjI0UTc0OC43MCAxMDUuMzggNzc4LjI2IDEwNS4zOFE4MDkuOTQgMTA1LjM4IDgyNi42NiAxMTAuODNMODI2LjY2IDEzMS42MFE4MjEuNzQgMTIyLjk4IDgwOC4xMCAxMTUuNzZRNzk0LjQ2IDEwOC41NCA3NzguMjYgMTA4LjU0UTc1NS4yMSAxMDguNTQgNzQwLjYwIDEyNC45MVE3MjUuOTkgMTQxLjI4IDcyNS45OSAxNjQuNTFNODYyLjIyIDIyNi45OUw5MDQuMTAgMjI2Ljk5UTkxNS45MCAyMjYuOTkgOTI0LjUyIDIyNC41M1E5MzMuMTQgMjIyLjA2IDk0Mi4xMiAyMTMuNzlMOTQyLjEyIDIzMC4zNEw4NDcuNzggMjMwLjM0TDg0Ny43OCAxMDcuNDlMOTQwLjAxIDEwNy40OUw5NDAuMDEgMTI0LjAzUTkzMC44NiAxMTUuNzYgOTIyLjIzIDExMy4zMFE5MTMuNjEgMTEwLjgzIDkwMS44MiAxMTAuODNMODYyLjIyIDExMC44M0w4NjIuMjIgMTY4LjU2TDg4Mi4xMCAxNjguNTZROTAwLjk0IDE2OC41NiA5MTQuNjYgMTYwLjgyTDkxNC42NiAxNzkuNjVROTAwLjk0IDE3MS45MCA4ODIuMTAgMTcxLjkwTDg2Mi4yMiAxNzEuOTBMODYyLjIyIDIyNi45OU0xMDIzLjc4IDE2NC41MVExMDIzLjc4IDE3OC45NCAxMDI4LjQ1IDE5MC40N1ExMDMzLjExIDIwMiAxMDQxLjAzIDIwOS4wNFExMDQ4Ljk1IDIxNi4wOCAxMDU4LjgxIDIxOS43OFExMDY4LjY2IDIyMy40NyAxMDc5LjU4IDIyMy40N1ExMDk1LjI0IDIyMy40NyAxMTA5LjQxIDIxNS45MFExMTIzLjU4IDIwOC4zNCAxMTMxLjg1IDE5NC40M1ExMTI3LjI3IDIxMS41MCAxMTA5LjUwIDIyMS45OFExMDkxLjcyIDIzMi40NSAxMDcwLjQyIDIzMi40NVExMDYwLjc0IDIzMi40NSAxMDUxLjg2IDIzMC4xNlExMDQyLjk3IDIyNy44NyAxMDM0Ljg3IDIyMi45NFExMDI2Ljc4IDIxOC4wMiAxMDIwLjc5IDIxMC43MVExMDE0LjgxIDIwMy40MSAxMDExLjI5IDE5Mi42N1ExMDA3Ljc3IDE4MS45NCAxMDA3Ljc3IDE2OC45MVExMDA3Ljc3IDE0MS4xMCAxMDI3LjEzIDEyMy4yNFExMDQ2LjQ5IDEwNS4zOCAxMDc2LjA2IDEwNS4zOFExMTA3Ljc0IDEwNS4zOCAxMTI0LjQ2IDExMC44M0wxMTI0LjQ2IDEzMS42MFExMTE5LjUzIDEyMi45OCAxMTA1Ljg5IDExNS43NlExMDkyLjI1IDEwOC41NCAxMDc2LjA2IDEwOC41NFExMDUzIDEwOC41NCAxMDM4LjM5IDEyNC45MVExMDIzLjc4IDE0MS4yOCAxMDIzLjc4IDE2NC41MU0xMTYyLjEyIDIyNi45OUwxMjA0LjE4IDIyNi45OVExMjE1LjgwIDIyNi45OSAxMjI0LjQyIDIyNC40NFExMjMzLjA1IDIyMS44OSAxMjQyLjIwIDIxMy43OUwxMjQyLjIwIDIzMC4zNEwxMTQ1LjU4IDIzMC4zNEwxMTQ1LjU4IDEwNy40OUwxMTYyLjEyIDEwNy40OUwxMTYyLjEyIDIyNi45OU0xMjgwLjA0IDEwNy40OUwxMjk1LjUzIDEwNy40OUwxMzUyLjIwIDIzMC4zNEwxMzM1LjY2IDIzMC4zNEwxMzE3LjUzIDE5MC4yMUwxMjYyLjYyIDE5MC4yMUwxMjYxLjc0IDE5Mi4xNFExMjUyLjQxIDIxMi45MSAxMjYxLjU2IDIzMC4zNEwxMjQxLjY3IDIzMC4zNEwxMjg3Ljk2IDEyNC45MUwxMjgwLjA0IDEwNy40OU0xMjg5LjkwIDEyOS4xNEwxMjY0LjIwIDE4Ni44NkwxMzE1Ljk0IDE4Ni44NkwxMjg5LjkwIDEyOS4xNE0xMzc0LjczIDEzNS40N1ExMzc0LjczIDE0My4wNCAxMzgyLjc0IDE0OS4wMlExMzkwLjc0IDE1NS4wMSAxNDAyLjEwIDE1OS41MFExNDEzLjQ1IDE2My45OCAxNDI0LjgwIDE2OC44MlExNDM2LjE1IDE3My42NiAxNDQ0LjE2IDE4MS40MVExNDUyLjE3IDE4OS4xNSAxNDUyLjE3IDE5OS4xOFExNDUyLjE3IDIwOC4xNiAxNDQ3LjU5IDIxNC45NFExNDQzLjAyIDIyMS43MSAxNDM1LjAxIDIyNS41OFExNDI3IDIyOS40NiAxNDE3LjQxIDIzMS4zMFExNDA3LjgyIDIzMy4xNSAxMzk2LjczIDIzMy4xNVExMzc0LjkwIDIzMy4xNSAxMzU2LjQyIDIyNy4xN0wxMzU2LjQyIDIwNi40MFExMzYyLjIzIDIxNi40MyAxMzc1LjcwIDIyMi41OVExMzg5LjE2IDIyOC43NSAxNDAzLjU5IDIyOC43NVExNDE4LjAyIDIyOC43NSAxNDI3LjYyIDIyMi4xNVExNDM3LjIxIDIxNS41NSAxNDM3LjIxIDIwMi41M1ExNDM3LjIxIDE5My45MCAxNDI5LjIwIDE4Ny4zMFExNDIxLjE5IDE4MC43MCAxNDA5Ljg0IDE3Ni4zMFExMzk4LjQ5IDE3MS45MCAxMzg3LjE0IDE2Ny4zM1ExMzc1Ljc4IDE2Mi43NSAxMzY3Ljc4IDE1NS42MlExMzU5Ljc3IDE0OC41MCAxMzU5Ljc3IDEzOC44MlExMzU5Ljc3IDEyMS4zOSAxMzc0LjExIDExMy4xMlExMzg4LjQ2IDEwNC44NSAxNDEwLjI4IDEwNC44NVExNDMwLjM0IDEwNC44NSAxNDQ4LjgyIDExMC44M0wxNDQ4LjgyIDEzMS42MFExNDQyLjg0IDEyMS4yMiAxNDMwLjA4IDExNC43OVExNDE3LjMyIDEwOC4zNyAxNDA0LjEyIDEwOC4zN1ExMzkxLjI3IDEwOC4zNyAxMzgzIDExNS4xNFExMzc0LjczIDEyMS45MiAxMzc0LjczIDEzNS40N00xNDgwLjY4IDEzNS40N1ExNDgwLjY4IDE0My4wNCAxNDg4LjY5IDE0OS4wMlExNDk2LjcwIDE1NS4wMSAxNTA4LjA1IDE1OS41MFExNTE5LjQwIDE2My45OCAxNTMwLjc1IDE2OC44MlExNTQyLjEwIDE3My42NiAxNTUwLjExIDE4MS40MVExNTU4LjEyIDE4OS4xNSAxNTU4LjEyIDE5OS4xOFExNTU4LjEyIDIwOC4xNiAxNTUzLjU0IDIxNC45NFExNTQ4Ljk3IDIyMS43MSAxNTQwLjk2IDIyNS41OFExNTMyLjk1IDIyOS40NiAxNTIzLjM2IDIzMS4zMFExNTEzLjc3IDIzMy4xNSAxNTAyLjY4IDIzMy4xNVExNDgwLjg2IDIzMy4xNSAxNDYyLjM4IDIyNy4xN0wxNDYyLjM4IDIwNi40MFExNDY4LjE4IDIxNi40MyAxNDgxLjY1IDIyMi41OVExNDk1LjExIDIyOC43NSAxNTA5LjU0IDIyOC43NVExNTIzLjk4IDIyOC43NSAxNTMzLjU3IDIyMi4xNVExNTQzLjE2IDIxNS41NSAxNTQzLjE2IDIwMi41M1ExNTQzLjE2IDE5My45MCAxNTM1LjE1IDE4Ny4zMFExNTI3LjE0IDE4MC43MCAxNTE1Ljc5IDE3Ni4zMFExNTA0LjQ0IDE3MS45MCAxNDkzLjA5IDE2Ny4zM1ExNDgxLjc0IDE2Mi43NSAxNDczLjczIDE1NS42MlExNDY1LjcyIDE0OC41MCAxNDY1LjcyIDEzOC44MlExNDY1LjcyIDEyMS4zOSAxNDgwLjA2IDExMy4xMlExNDk0LjQxIDEwNC44NSAxNTE2LjIzIDEwNC44NVExNTM2LjMwIDEwNC44NSAxNTU0Ljc4IDExMC44M0wxNTU0Ljc4IDEzMS42MFExNTQ4Ljc5IDEyMS4yMiAxNTM2LjAzIDExNC43OVExNTIzLjI3IDEwOC4zNyAxNTEwLjA3IDEwOC4zN1ExNDk3LjIyIDEwOC4zNyAxNDg4Ljk1IDExNS4xNFExNDgwLjY4IDEyMS45MiAxNDgwLjY4IDEzNS40NyIvPjwvc3ZnPg==");

    -webkit-mask-image: var(--presence-class-mask);
    mask-image: var(--presence-class-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.presence-strip::before {
    background:
        var(--hero-overlay),
        var(--hero-image) var(--hero-stage-image-position) / var(--hero-stage-image-size) no-repeat fixed,
        var(--hero-bg);
    opacity: 1;
}

.presence-strip::after {
    background:
        var(--hero-overlay),
        var(--hero-rear-image) var(--hero-stage-image-position) / var(--hero-stage-image-size) no-repeat fixed,
        var(--hero-bg);
    opacity: 0;
    animation: hero-rear-crossfade 20s ease-in-out infinite;
}

.presence-strip__cover {
    display: none;
}

.topline {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    min-width: 0;
    width: 100%;
    height: var(--nav-height);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0 clamp(0.9rem, 3vw, 2rem);
    border: 0;
    border-bottom: 1px solid rgba(245, 241, 232, 0.22);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(10, 16, 25, 0.54), rgba(10, 16, 25, 0.28));
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px) saturate(130%);
    transition: height 0.28s ease;
}

.logo-mark {
    grid-column: 2;
    justify-self: center;
    width: var(--nav-logo-width);
    height: 100%;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.top-actions {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.28s ease;
}

.logo-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: block;
    width: auto;
    height: 51px;
    transform: translate(-50%, -50%);
    transform-origin: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
    pointer-events: none;
    transition: height 0.28s ease;
}

.logo-image-light {
    display: none;
}

html[data-theme="light"] .logo-image-dark {
    display: none;
}

html[data-theme="light"] .logo-image-light {
    display: block;
}

/* Kleine Sticky-Navigation: ab Scrollbeginn 90 %, danach dauerhaft klein.
   Der bestehende JS-Status is-scroll-sequence-active übernimmt den Start;
   sobald der erste Story-Block revealed ist, hält :has() den Zustand fest. */
   
html.is-scroll-sequence-active .topline,
html.has-scroll-reveal:has(.story-card.is-revealed) .topline {
    height: var(--nav-height-sticky);
}

html.is-scroll-sequence-active .logo-mark,
html.has-scroll-reveal:has(.story-card.is-revealed) .logo-mark {
    width: var(--nav-logo-width-sticky);
}

html.is-scroll-sequence-active .logo-image,
html.has-scroll-reveal:has(.story-card.is-revealed) .logo-image {
    width: auto;
    height: 50px;
}

html.is-scroll-sequence-active .menu-toggle,
html.has-scroll-reveal:has(.story-card.is-revealed) .menu-toggle {
    transform: scale(0.9);
    transform-origin: left center;
}

html.is-scroll-sequence-active .top-actions,
html.has-scroll-reveal:has(.story-card.is-revealed) .top-actions {
    transform: scale(0.9);
    transform-origin: right center;
}

.theme-toggle {
    position: relative;
    z-index: 2;
    min-height: 42px;
    display: inline-grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--quiet);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--toggle-bg);
    backdrop-filter: blur(12px);
}

.chapter-nav .theme-toggle {
    width: 100%;
    justify-content: center;
    margin-top: 0.45rem;
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .chapter-nav .theme-toggle {
    background: rgba(255, 255, 255, 0.42);
}

.menu-toggle {
    position: relative;
    z-index: 2;
    grid-column: 1;
    justify-self: start;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--toggle-bg);
    backdrop-filter: blur(12px);
    transition: transform 0.28s ease;
}

.language-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.1rem 0 0.65rem;
    border: 0;
    border-radius: 999px;
    color: var(--text);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.language-icon {
    position: relative;
    width: 24px;
    height: 24px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.language-icon::before,
.language-icon::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid currentColor;
    border-top: 0;
    border-bottom: 0;
    border-radius: 50%;
}

.language-icon::after {
    inset: 50% 3px auto;
    height: 1px;
    border: 0;
    background: currentColor;
    transform: translateY(-50%);
}

.menu-toggle span {
    grid-area: 1 / 1;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle span:first-child {
    transform: translateY(-6px);
}

.menu-toggle span:last-child {
    transform: translateY(6px);
}

html.is-menu-open .menu-toggle span:first-child {
    transform: rotate(45deg);
}

html.is-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
}

html.is-menu-open .menu-toggle span:last-child {
    transform: rotate(-45deg);
}

.theme-toggle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 0.78rem;
    border-radius: 999px;
}

.theme-toggle span:first-child {
    color: var(--toggle-active-text);
    background: var(--toggle-active-bg);
}

html[data-theme="dark"] .theme-toggle span:first-child {
    color: inherit;
    background: transparent;
}

html[data-theme="dark"] .theme-toggle span:last-child {
    color: var(--toggle-active-text);
    background: var(--toggle-active-bg);
}

.topline-meta {
    grid-column: 2;
    justify-self: end;
    max-width: 8rem;
    padding-top: 0.2rem;
    color: var(--quiet);
    font-family: var(--font-serif);
    font-size: 0.62rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: none;
    gap: 1rem;
    max-width: 34rem;
    justify-self: start;
    padding-top: clamp(4rem, 18svh, 10rem);
}

.eyebrow,
.chapter-kicker,
.frame-label,
.stat-label {
    color: var(--accent);
    font-family: var(--kicker-font, var(--font-serif));
    font-size: 0.68rem;
    font-weight: var(--kicker-weight, 400);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.chapter-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
}

.chapter-kicker::before {
    content: "";
    width: 0.78em;
    height: 0.78em;
    flex: 0 0 auto;
    background: #cb0203;
}

.hero-copy .hero-claim {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-shadow: 0 0 32px rgba(216, 193, 149, 0.18);
}

.hero-copy p:not(.eyebrow) {
    max-width: 29rem;
    color: var(--muted);
    font-size: clamp(0.92rem, 3.5vw, 1.08rem);
    line-height: 1.64;
    letter-spacing: 0.012em;
}

.hero-specs {
    position: relative;
    z-index: 1;
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.hero-specs div {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border-bottom: 0;
}

.hero-specs div:last-child {
    border-bottom: 0;
}

.hero-specs dt {
    color: var(--quiet);
    font-family: var(--font-serif);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-specs dd {
    margin: 0;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.015em;
}

.chapter-nav {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: clamp(0.9rem, 3vw, 2rem);
    z-index: 1001;
    min-width: 0;
    width: min(100%, 28rem);
    max-width: calc(100vw - 1.1rem);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0.75rem;
    max-height: calc(100svh - var(--nav-height) - 1.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(245, 241, 232, 0.22);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(10, 16, 25, 0.72), rgba(10, 16, 25, 0.44));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(20px) saturate(135%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.45rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.chapter-nav[hidden] {
    display: none;
}

.chapter-nav::-webkit-scrollbar,
.image-strip::-webkit-scrollbar {
    display: none;
}

.chapter-nav a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--nav-text);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.font-switcher {
    display: grid;
    gap: 0.7rem;
    margin: 0.18rem 0;
    padding: 0.7rem 0.1rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

html[data-font-controls="hidden"] .font-switcher {
    display: none;
}

.font-switcher-group {
    display: grid;
    gap: 0.42rem;
}

.font-switcher-label {
    color: var(--quiet);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.font-switcher-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.font-switcher-select {
    width: 100%;
    min-height: 38px;
    padding: 0.55rem 2rem 0.55rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--nav-text);
    font: 700 0.68rem/1 var(--font-body);
    letter-spacing: 0.04em;
    background-color: rgba(255, 255, 255, 0.08);
}

.font-switcher button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--nav-text);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.font-switcher button[aria-pressed="true"] {
    border-color: transparent;
    color: var(--bg);
    background: var(--text);
}

html.is-menu-open .chapter-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

html[data-theme="light"] .topline,
html[data-theme="light"] .chapter-nav {
    border-color: rgba(22, 18, 13, 0.12);
    background: linear-gradient(180deg, rgba(var(--theme-bg-light-rgb), 0.74), rgba(var(--theme-bg-light-rgb), 0.42));
    box-shadow: 0 18px 54px rgba(91, 70, 45, 0.12);
}

html[data-theme="light"] .chapter-nav a {
    background: rgba(255, 255, 255, 0.42);
}

html[data-theme="light"] .font-switcher button {
    background: rgba(255, 255, 255, 0.42);
}

html[data-theme="light"] .font-switcher-select {
    background-color: rgba(255, 255, 255, 0.42);
}

html[data-theme="light"] .font-switcher button[aria-pressed="true"] {
    color: var(--bg);
    background: var(--text);
}

.chapter-nav a:focus-visible,
.gallery-dot:focus-visible,
.story-cta:focus-visible,
.logo-mark:focus-visible,
.theme-toggle:focus-visible,
.font-switcher button:focus-visible,
.font-switcher-select:focus-visible,
.menu-toggle:focus-visible,
.language-toggle:focus-visible,
.contact-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.story {
    position: relative;
    z-index: 2;
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    display: grid;
    gap: 2px;
    padding-bottom: 0;
    background: var(--body-bg);
}

.story-card {
    position: relative;
    min-height: var(--chapter-panel-min-height);
    display: grid;
    align-content: center;
    gap: 0;
    padding: 0;
    scroll-margin-top: 0;
    isolation: isolate;
    background: var(--section-bg);
}

.visual-panel {
    position: relative;
    min-width: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0;
    min-height: var(--chapter-panel-min-height);
}

.image-strip {
    width: min(100%, 138svh);
    height: auto;
    aspect-ratio: var(--chapter-image-ratio);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

.image-frame {
    position: relative;
    aspect-ratio: var(--chapter-image-ratio);
    display: grid;
    place-items: end start;
    min-height: 0;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 1rem;
    overflow: hidden;
    scroll-snap-align: center;
    border: 0;
    border-radius: 0.5rem;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.22), transparent 20%),
        linear-gradient(135deg, rgba(216, 193, 149, 0.22), transparent 44%),
        linear-gradient(160deg, #252932, var(--theme-bg-dark) 64%);
    box-shadow: var(--shadow), var(--glow);
}

.image-frame::before,
.image-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.image-frame::before {
    content: none;
    inset: 0;
    border: 0;
    background: var(--frame-overlay);
    transform: none;
    z-index: 1;
}

.image-frame::after {
    content: none;
    inset: 0.6rem;
    z-index: 2;
    background:
        linear-gradient(var(--frame-corner), var(--frame-corner)) top left / var(--frame-size) 1px no-repeat,
        linear-gradient(var(--frame-corner), var(--frame-corner)) top left / 1px var(--frame-size) no-repeat,
        linear-gradient(var(--frame-corner-muted), var(--frame-corner-muted)) top right / var(--frame-size) 1px no-repeat,
        linear-gradient(var(--frame-corner-muted), var(--frame-corner-muted)) top right / 1px var(--frame-size) no-repeat,
        linear-gradient(var(--frame-corner-muted), var(--frame-corner-muted)) bottom left / var(--frame-size) 1px no-repeat,
        linear-gradient(var(--frame-corner-muted), var(--frame-corner-muted)) bottom left / 1px var(--frame-size) no-repeat,
        linear-gradient(var(--frame-corner), var(--frame-corner)) bottom right / var(--frame-size) 1px no-repeat,
        linear-gradient(var(--frame-corner), var(--frame-corner)) bottom right / 1px var(--frame-size) no-repeat;
}

.image-frame.is-front {
    background:
        radial-gradient(circle at 50% 20%, rgba(245, 241, 232, 0.19), transparent 18%),
        linear-gradient(145deg, rgba(216, 193, 149, 0.24), transparent 48%),
        linear-gradient(160deg, #2b2f38, var(--theme-bg-dark) 66%);
}

.image-frame.is-side {
    background:
        radial-gradient(circle at 75% 28%, rgba(216, 193, 149, 0.22), transparent 18%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.13), transparent 34%),
        linear-gradient(160deg, #232833, var(--theme-bg-dark) 68%);
}

.image-frame.is-interior {
    background:
        radial-gradient(circle at 34% 28%, rgba(216, 193, 149, 0.34), transparent 17%),
        linear-gradient(135deg, rgba(80, 54, 34, 0.54), transparent 45%),
        linear-gradient(160deg, #251b17, var(--theme-bg-dark) 68%);
}

.image-frame.is-tech {
    background:
        radial-gradient(circle at 68% 34%, rgba(156, 220, 255, 0.2), transparent 16%),
        linear-gradient(135deg, rgba(216, 193, 149, 0.17), transparent 40%),
        linear-gradient(160deg, #1a2228, var(--theme-bg-dark) 70%);
}

.image-frame.has-image {
    background: var(--image-bg);
    box-shadow: none;
}

.image-frame.has-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-frame.has-image::before {
    border-radius: inherit;
}

.frame-content {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.35rem;
    text-shadow: none;
}

html[data-theme="light"] .frame-content {
    color: var(--theme-bg-light);
    text-shadow: none;
}

html[data-theme="light"] .image-frame .frame-label {
    color: rgba(248, 239, 227, 0.82);
}

.frame-title {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 7.8vw, 2.35rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.gallery-dots {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    height: 0.45rem;
    margin-top: calc(-1rem - 0.45rem);
    margin-bottom: 1rem;
}

.gallery-dots:empty {
    display: none;
}

.gallery-dot {
    width: 2.15rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #d4d2ca;
    transition: background 0.2s ease, width 0.2s ease;
}

.gallery-dot.is-active {
    width: 3rem;
    background: #ffffff;
}

.chapter-copy {
    position: relative;
    display: grid;
    gap: 1rem;
    min-height: var(--chapter-panel-min-height);
    align-content: center;
    padding: clamp(1.5rem, 7vw, 5rem);
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.chapter-copy::before {
    content: none;
}

.chapter-copy::after {
    content: none;
}

#intro .visual-panel,
#intro .image-strip,
#intro .image-frame.has-image,
#intro .chapter-copy {
    background: transparent;
}

.chapter-copy > * {
    position: relative;
    z-index: 1;
}

.chapter-copy h2,
.story-footer h2 {
    position: relative;
    max-width: var(--h2-max-width);
    overflow-wrap: anywhere;
}

.chapter-copy p,
.story-footer p {
    position: relative;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.58;
    letter-spacing: 0.01em;
}

.chapter-points {
    position: relative;
    display: grid;
    width: fit-content;
    max-width: 100%;
    gap: 0.34rem;
    margin: 0rem 0 0;  /* 0.35rem 0 0 */
    padding: 1.15rem 0 0;
    list-style: none;
}

.chapter-points::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 50%, var(--theme-bg-light) 50%) 12%,
        color-mix(in srgb, var(--accent) 50%, var(--theme-bg-light) 50%) 88%,
        transparent 100%
    );
}

.chapter-points li {
    position: relative;
    padding: 0 0 0 1rem;
    border: 0;
    border-radius: 0;
    color: var(--accent);
    font-size: clamp(1.0rem, 1.0vw, 1.0rem);
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: 0.005em;
    background: transparent;
}

.chapter-points li::before {
    content: "▪";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--accent);
    font-size: 0.9rem; /* 1em; */
    line-height: 1.24;
}

.story-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}

.stat {
    min-height: 86px;
    display: grid;
    align-content: space-between;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.032em;
}

.story-cta {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.1rem;
    padding: 0.85rem 1.15rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--cta-text);
    background: var(--accent);
}


.site-footer {
    position: relative;
    z-index: 4;
    isolation: isolate;
    display: grid;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 3rem);
    margin: 0 -1rem -1rem;
    padding: clamp(2rem, 7vw, 4rem) clamp(1.25rem, 7vw, 5rem);
    color: rgba(245, 241, 232, 0.78);
    background:
        linear-gradient(180deg, rgba(var(--theme-bg-dark-rgb), 0.94), rgba(77, 87, 98, 0.94)),
        #303945;
}

.footer-logo {
    display: inline-grid;
    width: clamp(112px, 28vw, 152px);
}

.footer-logo-image {
    width: 100%;
    height: auto;
    filter: none;
}

.footer-logo-image-light {
    display: none;
}

.footer-contact,
.footer-address {
    display: grid;
    gap: 0.16rem;
    margin: 0;
    font-style: normal;
    font-size: 0.72rem;
    line-height: 1.35;
}

.footer-links {
    display: grid;
    gap: 0.25rem;
    font-size: 0.72rem;
}

.footer-links a {
    width: fit-content;
    color: rgba(245, 241, 232, 0.84);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.footer-copy {
    margin: 0;
    color: rgba(245, 241, 232, 0.74);
    font-size: 0.72rem;
    line-height: 1.35;
}

.text-only-card {
    min-height: var(--chapter-panel-min-height);
    grid-template-columns: 1fr;
    padding-block: 0;
}

.text-only-card .chapter-copy {
    max-width: 62rem;
    min-height: var(--chapter-panel-min-height);
}

html.has-scroll-reveal .story-card {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

html.has-scroll-reveal .story-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.mission-copy {
    gap: 1.25rem;
}

.mission-copy p {
    max-width: 48rem;
}

.mission-contact {
    display: grid;
    gap: 0.85rem;
    max-width: 48rem;
    margin-top: clamp(1rem, 3vw, 1.8rem);
}

.mission-contact h3 {
    margin: 0;
    max-width: 10em;
    overflow-wrap: anywhere;
}

.mission-contact .contact-options {
    margin-top: 0.3rem;
}

.contact-options {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.25rem;
}

.contact-option {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--contact-bg);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.contact-option:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
    background: var(--contact-bg-hover);
}

.contact-option strong {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -0.018em;
    text-transform: uppercase;
}

.contact-option span {
    color: var(--muted);
    line-height: 1.45;
    font-size: 0.92rem;
}

@media (max-width: 759px) {
    :root {
        --hero-image: url("../assets/00-presence-front-full-black-q.webp");
        --hero-rear-image: url("../assets/00-presence-rear-full-black-q.webp");
        --hero-fallback-image: none;
        --hero-image-position: center top;
        --hero-image-size: 100% auto;
        --hero-stage-image-position: center top;
    }

    html[data-theme="light"] {
        --hero-image: url("../assets/00-presence-front-full-sand-q.webp");
        --hero-rear-image: url("../assets/00-presence-rear-full-sand-q.webp");
    }

    .story-hero {
        min-height: 100svh;
        align-content: start;
        gap: clamp(1rem, 4vw, 1.35rem);
        padding-bottom: clamp(1.25rem, 5vw, 2rem);
    }

    .topline {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .theme-toggle {
        align-self: start;
    }

    .chapter-nav {
        margin-top: 0;
    }

    .language-toggle span:first-child {
        display: none;
    }

    .language-toggle {
        padding-left: 0.2rem;
    }

    .hero-copy {
        display: none;
    }

    .scroll-intro {
        min-height: auto;
    }

    .scroll-intro::after {
        content: none;
        bottom: 23.684vw;
        z-index: 0;
        height: 116svh;
        opacity: 1;
        background: var(--scroll-sequence-to-bg);
    }

    .scroll-intro::before {
        content: none;
    }

    .presence-strip {
        aspect-ratio: 760 / 180;
        background: transparent;
    }

    .presence-strip::before {
        content: "";
        z-index: 1;
        opacity: 1;
        background: var(--bg);
        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NjAgMTgwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IlByZXNlbmNlIENsYXNzIj4KICAgIDxkZWZzPgogICAgICAgIDxtYXNrIGlkPSJwcmVzZW5jZS1jbGFzcy1jdXRvdXQiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgICAgICA8cmVjdCB3aWR0aD0iNzYwIiBoZWlnaHQ9IjE4MCIgZmlsbD0id2hpdGUiLz4KICAgICAgICAgICAgPHRleHQgeD0iMzgwIiB5PSI5NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgZmlsbD0iYmxhY2siIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLCAnVGltZXMgTmV3IFJvbWFuJywgc2VyaWYiIGZvbnQtc2l6ZT0iODIiIGZvbnQtd2VpZ2h0PSI0MDAiIGxldHRlci1zcGFjaW5nPSItMC4wMmVtIj5QUkVTRU5DRSBDTEFTUzwvdGV4dD4KICAgICAgICA8L21hc2s+CiAgICA8L2RlZnM+CiAgICA8cmVjdCB3aWR0aD0iNzYwIiBoZWlnaHQ9IjE4MCIgZmlsbD0id2hpdGUiIG1hc2s9InVybCgjcHJlc2VuY2UtY2xhc3MtY3V0b3V0KSIvPgo8L3N2Zz4K");
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NjAgMTgwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IlByZXNlbmNlIENsYXNzIj4KICAgIDxkZWZzPgogICAgICAgIDxtYXNrIGlkPSJwcmVzZW5jZS1jbGFzcy1jdXRvdXQiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgICAgICA8cmVjdCB3aWR0aD0iNzYwIiBoZWlnaHQ9IjE4MCIgZmlsbD0id2hpdGUiLz4KICAgICAgICAgICAgPHRleHQgeD0iMzgwIiB5PSI5NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgZmlsbD0iYmxhY2siIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLCAnVGltZXMgTmV3IFJvbWFuJywgc2VyaWYiIGZvbnQtc2l6ZT0iODIiIGZvbnQtd2VpZ2h0PSI0MDAiIGxldHRlci1zcGFjaW5nPSItMC4wMmVtIj5QUkVTRU5DRSBDTEFTUzwvdGV4dD4KICAgICAgICA8L21hc2s+CiAgICA8L2RlZnM+CiAgICA8cmVjdCB3aWR0aD0iNzYwIiBoZWlnaHQ9IjE4MCIgZmlsbD0id2hpdGUiIG1hc2s9InVybCgjcHJlc2VuY2UtY2xhc3MtY3V0b3V0KSIvPgo8L3N2Zz4K");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-clip-path: none;
        clip-path: none;
        transition: none;
    }

    .presence-strip::after {
        content: none;
    }

    .presence-strip__cover {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        background: var(--bg);
        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NjAgMTgwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IlByZXNlbmNlIENsYXNzIj4KICAgIDx0ZXh0IHg9IjM4MCIgeT0iOTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9IndoaXRlIiBmb250LWZhbWlseT0iR2VvcmdpYSwgJ1RpbWVzIE5ldyBSb21hbicsIHNlcmlmIiBmb250LXNpemU9IjgyIiBmb250LXdlaWdodD0iNDAwIiBsZXR0ZXItc3BhY2luZz0iLTAuMDJlbSI+UFJFU0VOQ0UgQ0xBU1M8L3RleHQ+Cjwvc3ZnPgo=");
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NjAgMTgwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IlByZXNlbmNlIENsYXNzIj4KICAgIDx0ZXh0IHg9IjM4MCIgeT0iOTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9IndoaXRlIiBmb250LWZhbWlseT0iR2VvcmdpYSwgJ1RpbWVzIE5ldyBSb21hbicsIHNlcmlmIiBmb250LXNpemU9IjgyIiBmb250LXdlaWdodD0iNDAwIiBsZXR0ZXItc3BhY2luZz0iLTAuMDJlbSI+UFJFU0VOQ0UgQ0xBU1M8L3RleHQ+Cjwvc3ZnPgo=");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        pointer-events: none;
    }

    .presence-strip__cover--top {
        -webkit-clip-path: inset(0 0 calc(100% - var(--presence-clip-top, 100%)) 0);
        clip-path: inset(0 0 calc(100% - var(--presence-clip-top, 100%)) 0);
    }

    .presence-strip__cover--bottom {
        -webkit-clip-path: inset(calc(100% - var(--presence-clip-bottom, 0%)) 0 0 0);
        clip-path: inset(calc(100% - var(--presence-clip-bottom, 0%)) 0 0 0);
    }

    .scroll-intro-title {
        max-width: 100%;
        line-height: 0.9;
        letter-spacing: 0.005em;
    }

    .story-card:first-child .visual-panel {
        min-height: auto;
        align-content: start;
    }

    html.has-scroll-reveal .story-card:first-child {
        opacity: 1;
        transform: none;
    }

    .frame-content {
        max-width: calc(100% - 8rem);
    }

    .gallery-dots {
        margin-top: -0.55rem;
        margin-bottom: 0.3rem;
    }

    .scroll-intro-panel--lead {
        min-height: 124svh;
        padding-top: 96svh;
        padding-bottom: clamp(2rem, 6svh, 4rem);
    }

    .scroll-intro-panel--details {
        position: relative;
        isolation: isolate;
        min-height: 54svh;
        align-content: end;
        padding-bottom: 0;
    }

    .scroll-intro-panel--details::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: var(--scroll-sequence-to-bg);
    }

    .scroll-intro-statement {
        width: 100%;
        max-width: 100%;
        text-align: center;
     }
}

@media (orientation: landscape) and (max-width: 920px) {
    :root {
        --chapter-panel-min-height: 64svh;
    }

    .story-hero {
        min-height: 100svh;
        padding-top: 0.5rem;
    }

    .hero-copy {
        padding-top: clamp(1rem, 10vw, 3rem);
    }

    .hero-specs {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-specs div {
        border-right: 0;
        border-bottom: 0;
    }

    .hero-specs div:last-child {
        border-right: 0;
    }

    .story-card {
        min-height: var(--chapter-panel-min-height);
        grid-template-columns: minmax(18rem, 0.92fr) minmax(18rem, 1fr);
        align-items: center;
        gap: 0;
        padding-block: 0;
    }

    .chapter-copy {
        align-self: stretch;
        align-content: center;
    }

    .story-stats {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 760px) {
    :root {
        --chapter-panel-min-height: 68svh;
        --intro-side-padding: 5rem;
    }

    .site-shell {
        padding: 1.4rem;
    }

    .story,
    .scroll-intro {
        width: auto;
        margin-inline: -1.4rem;
    }

    .scroll-intro-panel {
        width: 100%;
        min-width: 0;
        padding-inline: 5rem;
    }

    .scroll-intro-title,
    .scroll-intro-statement,
    .scroll-intro-meta {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-inline: 0;
        justify-self: stretch;
    }

    .presence-strip {
        width: calc(100% - 10rem);
        margin: 0;
        justify-self: center;
    }

    .scroll-intro-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .story-hero {
        width: auto;
        min-height: 100svh;
        margin: -1.4rem -1.4rem 0;
        padding: clamp(1.4rem, 3.2vw, 2.6rem);
    }

    .topline {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0.75rem 1rem;
    }

    .topline-meta {
        grid-column: 3;
        grid-row: 1;
    }

    .theme-toggle {
        grid-column: auto;
        grid-row: auto;
    }

    .hero-copy {
        width: min(100%, 32rem);
        max-width: 32rem;
        justify-items: end;
        justify-self: end;
        padding-top: clamp(5rem, 22svh, 13rem);
        text-align: right;
    }

    .hero-copy p:not(.eyebrow) {
        max-width: 26rem;
    }

    .hero-specs {
        grid-template-columns: repeat(3, 1fr);
        justify-self: end;
        max-width: 62rem;
    }

    .hero-specs div {
        min-height: 7rem;
        align-content: end;
        border-right: 0;
        border-bottom: 0;
    }

    .hero-specs div:last-child {
        border-right: 0;
    }

    .chapter-nav {
        justify-content: flex-start;
        margin: 0;
        padding: 0.75rem;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .chapter-nav a {
        min-height: 44px;
        padding: 0.64rem 0.95rem;
    }

    .story-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 0;
        min-height: var(--chapter-panel-min-height);
        padding-block: 5rem;
        overflow: clip;
    }

    .text-only-card {
        grid-template-columns: 1fr;
    }

    .story-card::after {
        content: none;
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: var(--scroll-edge-fade);
    }

    .story-card > * {
        z-index: 1;
    }

    .story-card:nth-of-type(even):not(.text-only-card) .visual-panel {
        grid-column: 2;
    }

    .story-card:nth-of-type(even):not(.text-only-card) .chapter-copy {
        grid-column: 1;
        grid-row: 1;
    }

    .visual-panel {
        position: sticky;
        top: 0;
        align-self: start;
        align-content: start;
        min-height: 0;
        height: auto;
        padding-top: 0;
    }

    .story-card:nth-of-type(odd):not(.text-only-card) .visual-panel {
        padding-left: 5rem;
    }

    .story-card:nth-of-type(even):not(.text-only-card) .visual-panel {
        padding-right: 5rem;
    }

    .image-strip {
        width: min(100%, 150svh);
    }

    .chapter-copy {
        min-height: 0;
        padding: 0 clamp(2rem, 5vw, 5rem);
        overflow: visible;
    }

    .story-card:not(.text-only-card) .chapter-copy {
        align-content: start;
        padding-top: 0;
    }

    .text-only-card .mission-copy {
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        align-content: start;
        column-gap: 0;
    }

    .mission-copy > :not(.mission-contact) {
        grid-column: 1;
        max-width: 48rem;
    }

    .mission-copy .mission-contact {
        grid-column: 2;
        grid-row: 1 / span 6;
        align-self: start;
        max-width: none;
        margin-top: 0;
        padding: 0 clamp(2rem, 5vw, 5rem);
    }

    .mission-copy .mission-contact .contact-options {
        grid-template-columns: 1fr;
    }

    .mission-contact .contact-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer {
        grid-template-columns: minmax(8rem, 1.1fr) minmax(9rem, 1fr) minmax(8rem, 0.92fr) minmax(7rem, 0.8fr) minmax(8rem, 0.96fr);
        min-height: 15rem;
        margin: 0 -1.4rem -1.4rem;
    }

    .footer-contact,
    .footer-address,
    .footer-links,
    .footer-copy {
        min-height: 5rem;
        padding-left: clamp(1.5rem, 3vw, 2.4rem);
        border-left: 1px solid rgba(245, 241, 232, 0.22);
    }
}

@media (min-width: 1120px) {
    .site-shell {
        padding-inline: 2rem;
    }

    .story,
    .scroll-intro {
        width: auto;
        margin-inline: -2rem;
    }

    .presence-strip {
        width: calc(100% - 10rem);
        margin: 0;
        justify-self: center;
    }

    .story-hero {
        width: auto;
        min-height: 100svh;
        margin-inline: -2rem;
        padding-inline: clamp(2rem, 4vw, 4rem);
    }

    .site-footer {
        margin: 0 -2rem -2rem;
    }

    .hero-copy {
        width: min(100%, 34rem);
        max-width: 34rem;
        transform: translateX(3ch);
        padding-top: clamp(10rem, 30svh, 18rem);
    }

    .hero-specs {
        transform: translateX(3ch);
    }

    .chapter-nav {
        gap: 0.45rem;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .chapter-nav a {
        min-height: 42px;
        padding-inline: 0.72rem;
        font-size: clamp(0.62rem, 0.72vw, 0.7rem);
    }

    .story-card {
        min-height: var(--chapter-panel-min-height);
        padding-block: 5rem;
    }

    .chapter-copy {
        min-height: 0;
    }

    .text-only-card {
        padding-block: 5rem;
    }

    .chapter-copy p {
        font-size: 1rem;
    }
}

/* Typografie analog zu den großen IMSA-Headern auf imsa.eu */
.frame-title,
.stat-value,
.contact-option strong {
    font-family: var(--title-font, var(--font-display));
    font-weight: var(--title-weight, 700);
    line-height: 1.1;
    letter-spacing: 0;
    font-stretch: normal;
    font-variation-settings: normal;
}

/* =========================================================
   H1, H2 UND STATEMENT – ZENTRALE TYPOGRAFIE-STEUERUNG
   ========================================================= */

/* Standardwerte als Rückfallebene */
:root {
    --h1-size: clamp(2rem, calc(10.4vw - 1.04rem), 8rem);
    --h1-color: #FCFCF8;
    --h1-weight: 700;
    --h1-line-height: 1.1;
    --h1-letter-spacing: 0;
    --h1-transform: uppercase;
    --h1-text-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25);

    --h2-size: clamp(1.8rem, 5.2vw, 2.8rem);
    --h2-color: var(--text);
    --h2-weight: 700;
    --h2-line-height: 1.1;
    --h2-letter-spacing: 0;
    --h2-transform: uppercase;
    --h2-max-width: 10em;
    
    --statement-size: clamp(2rem, 5.2vw, 4.35rem);
    --statement-size-mobile: clamp(1.85rem, 8.35vw, 2.4rem);
    --statement-color: var(--text);
    --statement-weight: 700;
    --statement-line-height: 1.1;
    --statement-letter-spacing: 0;
    --statement-transform: uppercase;
    
    --subline-font: var(--font-display);
    --subline-size: clamp(1rem, 2.2vw, 1.45rem);
    --subline-weight: 700;
    --subline-line-height: 1.42;
    --subline-letter-spacing: 0.075em;
    --subline-transform: uppercase;}

/* CLASSIC — Adieu */
html[data-font-preset="classic"] {
    --font-display: "Adieu", Arial, sans-serif;

    --h1-size: clamp(2rem, calc(8.2vw - 0.82rem), 7rem);
    --h1-weight: 400;
    --h1-line-height: 1.1;
    --h1-letter-spacing: 0;
    --h1-transform: uppercase;

    --h2-size: clamp(1.6rem, 4.6vw, 2.4rem);
    --h2-color: var(--text);
    --h2-weight: 400;
    --h2-line-height: 1.1;
    --h2-letter-spacing: 0;
    --h2-transform: uppercase;
    --h2-max-width: 11.5em;
    
    --subline-font: "Adieu", Arial, sans-serif;
    --subline-size: clamp(1rem, 2.2vw, 1.45rem);
    --subline-weight: 400;
    --subline-letter-spacing: 0.075em;

    --statement-size: clamp(2rem, 4.35vw, 3.8rem);
    --statement-size-mobile: clamp(1.85rem, 8.35vw, 2.4rem);
    --statement-color: var(--text);
    --statement-weight: 400;
    --statement-line-height: 1.1;
    --statement-letter-spacing: 0;
    --statement-transform: uppercase;
}

/* MODERN — Montserrat */
html[data-font-preset="modern"] {
    --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;

    --h1-size: clamp(2rem, calc(10.4vw - 1.04rem), 8rem);
    --h1-weight: 700;
    --h1-line-height: 1.1;
    --h1-letter-spacing: 0;
    --h1-transform: uppercase;

    --h2-size: clamp(1.8rem, 5.2vw, 2.8rem);
    --h2-color: var(--text);
    --h2-weight: 700;
    --h2-line-height: 1.1;
    --h2-letter-spacing: 0;
    --h2-transform: none;
    --h2-max-width: 10em;
    
    --subline-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --subline-size: clamp(1rem, 2.2vw, 1.45rem);
    --subline-weight: 700;
    --subline-letter-spacing: 0.075em;

    --statement-size: clamp(2rem, 5.2vw, 4.35rem);
    --statement-size-mobile: clamp(1.85rem, 8.35vw, 2.4rem);
    --statement-color: var(--text);
    --statement-weight: 700;
    --statement-line-height: 1.1;
    --statement-letter-spacing: 0;
    --statement-transform: uppercase;
}


/* LUXURY — Top Luxury */
html[data-font-preset="luxury"] {
    --font-display: "Top Luxury", Georgia, "Times New Roman", serif;

    --h1-size: clamp(2rem, calc(10.4vw - 1.04rem), 8rem);
    --h1-weight: 400;
    --h1-line-height: 1.15;
    --h1-letter-spacing: 0;
    --h1-transform: uppercase;

    --h2-size: clamp(2.0rem, 5.0vw, 2.6rem);
    --h2-color: var(--text);
    --h2-weight: 400;
    --h2-line-height: 1.1;
    --h2-letter-spacing: 0;
    --h2-transform: none;
    --h2-max-width: 10em;
    
    --subline-font: "Top Luxury", Georgia, "Times New Roman", serif;
    --subline-size: clamp(1rem, 2.2vw, 1.45rem);
    --subline-weight: 400;
    --subline-letter-spacing: 0.04em;

    --statement-size: clamp(2rem, 5.2vw, 4.35rem);
    --statement-size-mobile: clamp(1.85rem, 8.35vw, 2.4rem);
    --statement-color: var(--text);
    --statement-weight: 400;
    --statement-line-height: 1.1;
    --statement-letter-spacing: 0;
    --statement-transform: uppercase;
}


/* TECHNICAL — D-DIN EXPANDED */
html[data-font-preset="technical"] {
    --font-display: "D-DIN Expanded", "D-DIN", Arial, sans-serif;

    --h1-size: clamp(2rem, calc(10.4vw - 1.04rem), 8rem);
    --h1-weight: 700;
    --h1-line-height: 1.1;
    --h1-letter-spacing: 0;
    --h1-transform: uppercase;

    --h2-size: clamp(1.8rem, 5.2vw, 2.8rem);
    --h2-color: var(--text);
    --h2-weight: 700;
    --h2-line-height: 1.1;
    --h2-letter-spacing: 0;
    --h2-transform: none;
    --h2-max-width: 9em;
    
    --subline-font: "D-DIN Expanded", "D-DIN", Arial, sans-serif;
    --subline-size: clamp(1rem, 2.2vw, 1.45rem);
    --subline-weight: 700;
    --subline-letter-spacing: 0.075em;

    --statement-size: clamp(2rem, 5.2vw, 4.35rem);
    --statement-size-mobile: clamp(1.85rem, 8.35vw, 2.4rem);
    --statement-color: var(--text);
    --statement-weight: 700;
    --statement-line-height: 1.1;
    --statement-letter-spacing: 0;
    --statement-transform: uppercase;
}

/* Unabhängige Testauswahl für Titel und Kicker */
html[data-title-font="adieu-300"] { --title-font: "Adieu", Arial, sans-serif; --title-weight: 300; }
html[data-title-font="adieu-400"] { --title-font: "Adieu", Arial, sans-serif; --title-weight: 400; }
html[data-title-font="adieu-700"] { --title-font: "Adieu", Arial, sans-serif; --title-weight: 700; }
html[data-title-font="adieu-900"] { --title-font: "Adieu", Arial, sans-serif; --title-weight: 900; }
html[data-title-font="figue-400"] { --title-font: "Figue", Georgia, serif; --title-weight: 400; }
html[data-title-font="top-luxury-400"] { --title-font: "Top Luxury", Georgia, serif; --title-weight: 400; }
html[data-title-font="montserrat-300"] { --title-font: "Montserrat", Arial, sans-serif; --title-weight: 300; }
html[data-title-font="montserrat-400"] { --title-font: "Montserrat", Arial, sans-serif; --title-weight: 400; }
html[data-title-font="montserrat-500"] { --title-font: "Montserrat", Arial, sans-serif; --title-weight: 500; }
html[data-title-font="montserrat-600"] { --title-font: "Montserrat", Arial, sans-serif; --title-weight: 600; }
html[data-title-font="montserrat-700"] { --title-font: "Montserrat", Arial, sans-serif; --title-weight: 700; }
html[data-title-font="ddin-400"] { --title-font: "D-DIN", Arial, sans-serif; --title-weight: 400; }
html[data-title-font="ddin-700"] { --title-font: "D-DIN", Arial, sans-serif; --title-weight: 700; }
html[data-title-font="ddin-expanded-700"] { --title-font: "D-DIN Expanded", "D-DIN", Arial, sans-serif; --title-weight: 700; }
html[data-title-font="noto-400"] { --title-font: "Noto Serif", Georgia, serif; --title-weight: 400; }
html[data-title-font="noto-500"] { --title-font: "Noto Serif", Georgia, serif; --title-weight: 500; }
html[data-title-font="noto-700"] { --title-font: "Noto Serif", Georgia, serif; --title-weight: 700; }

html[data-kicker-font="adieu-300"] { --kicker-font: "Adieu", Arial, sans-serif; --kicker-weight: 300; }
html[data-kicker-font="adieu-400"] { --kicker-font: "Adieu", Arial, sans-serif; --kicker-weight: 400; }
html[data-kicker-font="adieu-700"] { --kicker-font: "Adieu", Arial, sans-serif; --kicker-weight: 700; }
html[data-kicker-font="adieu-900"] { --kicker-font: "Adieu", Arial, sans-serif; --kicker-weight: 900; }
html[data-kicker-font="figue-400"] { --kicker-font: "Figue", Georgia, serif; --kicker-weight: 400; }
html[data-kicker-font="top-luxury-400"] { --kicker-font: "Top Luxury", Georgia, serif; --kicker-weight: 400; }
html[data-kicker-font="montserrat-300"] { --kicker-font: "Montserrat", Arial, sans-serif; --kicker-weight: 300; }
html[data-kicker-font="montserrat-400"] { --kicker-font: "Montserrat", Arial, sans-serif; --kicker-weight: 400; }
html[data-kicker-font="montserrat-500"] { --kicker-font: "Montserrat", Arial, sans-serif; --kicker-weight: 500; }
html[data-kicker-font="montserrat-600"] { --kicker-font: "Montserrat", Arial, sans-serif; --kicker-weight: 600; }
html[data-kicker-font="montserrat-700"] { --kicker-font: "Montserrat", Arial, sans-serif; --kicker-weight: 700; }
html[data-kicker-font="ddin-400"] { --kicker-font: "D-DIN", Arial, sans-serif; --kicker-weight: 400; }
html[data-kicker-font="ddin-700"] { --kicker-font: "D-DIN", Arial, sans-serif; --kicker-weight: 700; }
html[data-kicker-font="ddin-expanded-700"] { --kicker-font: "D-DIN Expanded", "D-DIN", Arial, sans-serif; --kicker-weight: 700; }
html[data-kicker-font="noto-400"] { --kicker-font: "Noto Serif", Georgia, serif; --kicker-weight: 400; }
html[data-kicker-font="noto-500"] { --kicker-font: "Noto Serif", Georgia, serif; --kicker-weight: 500; }
html[data-kicker-font="noto-700"] { --kicker-font: "Noto Serif", Georgia, serif; --kicker-weight: 700; }

/* VARIABLEN AUF H1, H2 UND STATEMENT ANWENDEN */

/* H1: sichtbarer Haupttitel „Presence Class“ */
.scroll-intro-title {
    color: var(--h1-color);
    font-family: var(--title-font, var(--font-display));
    font-size: var(--h1-size);
    font-weight: var(--title-weight, var(--h1-weight));
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: var(--h1-transform);
    text-shadow: var(--h1-text-shadow, none);
    text-align: center;
}

/* H2 der Abteilungen */
.chapter-copy h2,
.story-footer h2,
.mission-contact h3 {
    color: var(--h2-color);
    font-family: var(--title-font, var(--font-display));
    font-size: var(--h2-size);
    font-weight: var(--title-weight, var(--h2-weight));
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    text-transform: var(--h2-transform);
    font-stretch: normal;
    font-variation-settings: normal;
    padding-bottom: 30px;
}

/* Statement: „Präsenz – die bleibt“ */
.scroll-intro-statement {
    color: var(--statement-color);
    font-family: var(--title-font, var(--font-display));
    font-size: var(--statement-size);
    font-weight: var(--title-weight, var(--statement-weight));
    line-height: var(--statement-line-height);
    letter-spacing: var(--statement-letter-spacing);
    text-transform: var(--statement-transform);
    font-stretch: normal;
    font-variation-settings: normal;
    text-shadow: 1px 1px 0.5rem rgba(255, 255, 255, 0.75);*/
}

@media (max-width: 759px) {
    .scroll-intro-statement {
        font-size: var(--statement-size-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }

    .story-hero::before,
    .story-hero::after,
    .presence-strip::after {
        transform: none;
        opacity: 0;
        animation: none;
    }

    .story-hero::before {
        opacity: 1;
    }
}