/* Cultura: self-contained scenes, with native scroll timelines as enhancement. */
.site-culture-story {
    --culture-paper: #f5f0e6;
    --culture-panel: #fffaf1;
    --culture-ink: #163c43;
    --culture-muted: #52676a;
    --culture-accent: #975137;
    --culture-line: #cfcabe;
    --culture-gutter: clamp(1.25rem, 5vw, 6rem);
    --culture-top: calc(var(--site-header-bottom, 5.25rem) + 1rem);
    --culture-height: calc(100svh - var(--culture-top) - 1rem);
    position: relative;
    background: var(--culture-paper);
    color: var(--culture-ink);
    overflow: clip;
}
.site-culture-story :where(h1, h2, h3, p, figure) { margin: 0; }
.site-culture-story :where(h1, h2, h3) {
    color: inherit;
    font-family: var(--site-font-display);
    letter-spacing: -.055em;
    text-wrap: balance;
}
.site-culture-story :where(p, h3, a, figcaption, strong) { overflow-wrap: anywhere; }
.site-culture-story :where(a, button):focus-visible {
    outline: 3px solid var(--site-primary);
    outline-offset: 5px;
}
.culture-kicker {
    display: block;
    color: var(--culture-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.culture-opening { position: relative; }
.culture-opening__stage {
    position: relative;
    min-height: var(--culture-height);
    overflow: clip;
    isolation: isolate;
    background: #f2e8d5;
    color: #163c43;
}
.culture-opening__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% 50%;
    z-index: -2;
}
.culture-opening__stage::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #f5f0e6f2, #f5f0e6d9 25%, #f5f0e600 61%);
    content: '';
    pointer-events: none;
}
.culture-opening__inner {
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
    padding: clamp(2rem, 4vh, 4rem) var(--culture-gutter) 3rem;
}
.culture-opening h1 {
    margin: .5rem 0 0 -.06em;
    font-size: clamp(6rem, 16vw, 15rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.085em;
}
.culture-opening h1 > span { color: #975137; }
.culture-opening__copy { display: grid; gap: 1.1rem; width: min(30rem, 40%); }
.culture-opening h2 { max-width: 20ch; font-size: clamp(1.6rem, 2.3vw, 2.6rem); line-height: 1.1; }
.culture-opening p { max-width: 40ch; font-size: .95rem; line-height: 1.8; color: #36555b; }
.culture-jump {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: 2.25rem;
    min-height: 3rem;
    padding-block: .6rem;
    border-bottom: 1px solid currentColor;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
}
.culture-jump svg, .culture-scene__expand svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.culture-opening__caption { position: absolute; bottom: 1.6rem; right: var(--culture-gutter); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: #163c43; background: #fffaf1e8; padding: .4rem .75rem; }
.culture-intro { display: grid; grid-template-columns: 1.25fr .65fr; align-items: end; gap: clamp(3rem, 7vw, 8rem); padding: clamp(5rem, 10vw, 10rem) var(--culture-gutter); }
.culture-intro__heading { display: flex; gap: clamp(1rem, 3vw, 3rem); align-items: start; }
.culture-index { color: var(--culture-accent); font-size: .8rem; border-top: 1px solid; padding-top: .6rem; }
.culture-intro h2 { margin-top: 1.5rem; font-size: clamp(2.5rem, 4.4vw, 4.9rem); max-width: 16ch; line-height: 1.06; }
.culture-intro__text { display: grid; gap: 1.25rem; color: var(--culture-muted); font-size: 1rem; line-height: 1.85; }
.culture-route { position: relative; border-top: 1px solid var(--culture-line); }
.culture-route__header { padding: clamp(3.5rem, 7vw, 7rem) var(--culture-gutter); display: grid; grid-template-columns: 1.3fr .7fr; gap: 1.5rem 6vw; align-items: end; }
.culture-route__header > .culture-kicker { grid-column: 1 / -1; }
.culture-route__header h2 { max-width: 18ch; font-size: clamp(2.2rem, 3.6vw, 4rem); line-height: 1.08; }
.culture-route__header p { max-width: 42ch; color: var(--culture-muted); font-size: .95rem; line-height: 1.8; }
.culture-scenes { padding: 0 var(--culture-gutter); }
.culture-scene { position: relative; margin-bottom: 4rem; scroll-margin-top: var(--culture-top); }
.culture-scene__stage { position: relative; display: grid; isolation: isolate; min-height: var(--culture-height); }
.culture-scene__visual { position: absolute; inset: 0; min-width: 0; }
.culture-scene__image-button { position: relative; display: block; padding: 0; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 3px; background: #eadfc8; cursor: zoom-in; }
.site-culture-story .culture-scene__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.culture-scene__visual figcaption { position: absolute; top: 1.25rem; left: 1.5rem; max-width: calc(100% - 3rem); padding: .5rem .75rem; background: #fffaf1f0; color: #163c43; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.culture-scene__expand { position: absolute; top: 4.25rem; left: 1.5rem; min-height: 2.75rem; display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; background: #fffaf1f0; color: #163c43; font-size: .7rem; }
.culture-scene__copy { position: relative; z-index: 1; align-self: end; display: grid; gap: 1.5rem; margin: 0 2rem 2rem; padding: clamp(1.5rem, 2.6vw, 3rem); background: var(--culture-panel); color: var(--culture-ink); }
.culture-scene__eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; color: var(--culture-accent); }
.culture-scene__number { font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.culture-scene__eyebrow small { border-left: 1px solid var(--culture-line); padding-left: 1rem; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; }
.culture-scene h3 { max-width: 18ch; font-size: clamp(2rem, 3.4vw, 3.75rem); line-height: 1.04; }
.culture-scene__text { display: grid; align-content: center; gap: 1rem; }
.culture-scene__text p { color: var(--culture-muted); font-size: clamp(.95rem, 1.15vw, 1.06rem); line-height: 1.8; }
.culture-scene__text strong { font-size: .85rem; }
.culture-scene__text a { justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; }
.culture-scene__qr { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.culture-scene__qr canvas { width: 5rem; height: 5rem; padding: .25rem; background: #fff; }
.culture-scene--panorama .culture-scene__copy,
.culture-scene--focus .culture-scene__copy { grid-template-columns: 1fr .85fr; gap: 3rem; width: min(62rem, 88%); margin-inline: auto; }
.culture-scene--left .culture-scene__visual { right: 22%; }
.culture-scene--left .culture-scene__copy { align-self: center; justify-self: end; width: 36%; margin: 5rem 0; }
.culture-scene--right .culture-scene__visual { left: 22%; }
.culture-scene--right .culture-scene__copy { align-self: center; justify-self: start; width: 36%; margin: 5rem 0; }
.culture-scene--right .culture-scene__visual figcaption,
.culture-scene--right .culture-scene__expand { left: auto; right: 1.5rem; }
.culture-scene--immersive { margin-inline: calc(-1 * var(--culture-gutter)); }
.culture-scene--immersive .culture-scene__image-button::after { position: absolute; inset: 0; background: linear-gradient(90deg, #071f27ed, #071f27b0 35%, #071f2700 78%); content: ''; pointer-events: none; }
.culture-scene--immersive .culture-scene__copy { width: min(40rem, 53%); margin: 8rem var(--culture-gutter) 3rem; padding: 0; background: none; color: #fffaf1; }
.culture-scene--immersive .culture-scene__text p { color: #e6ece9; }
.culture-scene--immersive .culture-scene__eyebrow { color: #ebc2a7; }
.culture-scene--immersive .culture-scene__expand { z-index: 1; }
.culture-scene--immersive h3 { font-size: clamp(2.6rem, 5vw, 5.7rem); max-width: 14ch; }
.culture-scene--focus .culture-scene__visual { inset-inline: 5%; }
.culture-closing { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 9vw, 9rem) var(--culture-gutter); background: #102e37; color: #fffaf1; }
.culture-closing > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.culture-closing::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #102e37, #102e37f0 35%, #102e374d); content: ''; }
.culture-closing__copy { max-width: 43rem; display: grid; gap: 1.5rem; }
.culture-closing .culture-kicker { color: #ebc2a7; }
.culture-closing h2 { font-size: clamp(2.5rem, 4.5vw, 5rem); max-width: 17ch; line-height: 1.05; }
.culture-closing p { max-width: 40ch; color: #d9e4e5; line-height: 1.8; }
.culture-closing a { justify-self: start; margin-top: .5rem; }
.culture-progress { display: none; }
/* No hidden content at rest; unsupported engines keep the complete static layout. */
@media (min-width: 64rem) and (min-height: 38rem) and (prefers-reduced-motion: no-preference) {
    .culture-story-ready .culture-opening { min-height: 135svh; }
    .culture-story-ready .culture-opening__stage { position: sticky; top: var(--culture-top); }
    .culture-story-ready .culture-scene { min-height: 175svh; margin-bottom: 0; }
    .culture-story-ready .culture-scene__stage { position: sticky; top: var(--culture-top); }
    .culture-story-ready .culture-scene.is-flowing { min-height: 0; margin-bottom: 4rem; }
    .culture-story-ready .culture-scene.is-flowing .culture-scene__stage { position: relative; top: auto; }
    .culture-story-ready .culture-opening.is-flowing { min-height: 0; }
    .culture-story-ready .culture-opening.is-flowing .culture-opening__stage { position: relative; top: auto; }
}
@media (min-width: 75rem) {
    .culture-story-ready .culture-progress { position: fixed; z-index: 30; top: 50%; right: .35rem; display: flex; flex-direction: column; max-height: 50svh; overflow-y: auto; padding: .5rem 0; background: var(--culture-panel); border: 1px solid var(--culture-line); border-radius: 2rem; transform: translateY(-50%); visibility: hidden; }
    .culture-story-ready .culture-progress.is-visible,
    .culture-story-ready .culture-progress:focus-within { visibility: visible; }
    .culture-progress a { position: relative; display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--culture-muted); font-size: .6rem; text-decoration: none; font-variant-numeric: tabular-nums; }
    .culture-progress a[aria-current="step"] { color: var(--culture-accent); font-weight: 800; }
    .culture-progress a[aria-current="step"]::before { position: absolute; left: 3px; width: 3px; height: 1rem; background: currentColor; border-radius: 2px; content: ''; }
    .culture-progress__line { position: absolute; left: 3px; top: .75rem; bottom: .75rem; width: 1px; background: var(--culture-line); }
    .culture-progress__line > span { display: block; width: 100%; height: 100%; background: var(--culture-accent); transform: scaleY(0); transform-origin: top; }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .culture-story-ready .culture-route { view-timeline: --culture-route block; view-timeline-inset: var(--culture-top) 0; }
        .culture-progress__line > span { animation: culture-progress linear both; animation-timeline: --culture-route; animation-range: contain; }
        .culture-story-ready .culture-scene { view-timeline: --culture-scene block; view-timeline-inset: var(--culture-top) 0; }
        .culture-story-ready .culture-scene__image { animation: culture-image linear both; animation-timeline: --culture-scene; animation-range: cover; }
        .culture-story-ready .culture-scene__copy { animation: culture-copy linear both; animation-timeline: --culture-scene; animation-range: cover; }
    }
    @media (min-width: 64rem) and (min-height: 38rem) and (prefers-reduced-motion: no-preference) {
        .culture-story-ready .culture-scene__stage { animation: culture-scene linear both; animation-timeline: --culture-scene; animation-range: cover; }
        .culture-story-ready .culture-opening { view-timeline: --culture-opening block; view-timeline-inset: var(--culture-top) 0; }
        .culture-story-ready .culture-opening__art { animation: culture-opening-image linear both; animation-timeline: --culture-opening; animation-range: contain; }
        .culture-story-ready .culture-opening__copy { animation: culture-opening-copy linear both; animation-timeline: --culture-opening; animation-range: contain; }
    }
}
@keyframes culture-image { from { transform: translateY(1.2%) scale(1.02); } to { transform: translateY(-1.2%) scale(1.075); } }
@keyframes culture-copy { 0%, 8% { opacity: 0; transform: translateY(2rem); } 28%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-1rem); } }
@keyframes culture-scene { 0% { opacity: .35; } 22%, 80% { opacity: 1; } 100% { opacity: .2; } }
@keyframes culture-opening-image { from { transform: scale(1); } to { transform: scale(1.055) translateY(-1%); } }
@keyframes culture-opening-copy { 0%, 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-2rem); } }
@keyframes culture-progress { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Focus must never land in a faded scene. Long editorial entries stay in flow. */
.culture-scene:focus-within .culture-scene__stage,
.culture-scene:focus-within .culture-scene__copy,
.culture-opening:focus-within .culture-opening__copy,
.culture-scene.is-flowing .culture-scene__stage,
.culture-scene.is-flowing .culture-scene__copy,
.culture-scene.is-flowing .culture-scene__image,
.culture-opening.is-flowing .culture-opening__copy,
.culture-opening.is-flowing .culture-opening__art { animation: none; opacity: 1; transform: none; }
html[data-site-theme="dark"] .site-culture-story { --culture-paper: #10272c; --culture-panel: #19373d; --culture-ink: #f5f0e6; --culture-muted: #c0cece; --culture-accent: #e9b08c; --culture-line: #476065; }
html[data-site-theme="dark"] .culture-opening__stage { color: #f5f0e6; background: #10272c; }
html[data-site-theme="dark"] .culture-opening__stage::after { background: linear-gradient(90deg, #10272cf5, #10272cdf 25%, #10272c10 72%); }
html[data-site-theme="dark"] .culture-opening p { color: #d2dedd; }
html[data-site-theme="dark"] .culture-opening h1 > span { color: #e9b08c; }
@media (max-width: 63.999rem), (max-height: 37.999rem) {
    .site-culture-story { --culture-gutter: clamp(1.25rem, 4vw, 3rem); }
    .culture-opening__stage { min-height: 48rem; }
    .culture-opening__inner { min-height: 48rem; }
    .culture-opening h1 { font-size: clamp(6rem, 19vw, 12rem); }
    .culture-opening__copy { width: min(30rem, 65%); }
    .culture-intro { grid-template-columns: 1fr; gap: 2rem; }
    .culture-intro__text { max-width: 40rem; margin-left: 3rem; }
    .culture-route__header { grid-template-columns: 1fr; }
    .culture-route__header p { max-width: 50ch; }
    .culture-scene { margin-bottom: 5rem; }
    .culture-scene__stage { min-height: 0; display: block; }
    .culture-scene .culture-scene__visual { position: relative; inset: auto; height: clamp(21rem, 55svh, 38rem); }
    .culture-scene .culture-scene__copy { display: grid; grid-template-columns: 1fr; gap: 1.4rem; width: auto; margin: -2rem 1rem 0; padding: 2rem; background: var(--culture-panel); color: var(--culture-ink); }
    .culture-scene--immersive { margin-inline: 0; }
    .culture-scene--immersive .culture-scene__image-button::after { display: none; }
    .culture-scene--immersive .culture-scene__text p { color: var(--culture-muted); }
    .culture-scene--immersive .culture-scene__eyebrow { color: var(--culture-accent); }
    .culture-scene h3 { max-width: 20ch; font-size: clamp(2rem, 5vw, 3.5rem); }
    .culture-scene__text p { max-width: 60ch; }
    .culture-scene__visual figcaption { left: 1rem; top: 1rem; font-size: .6rem; }
    .culture-scene__expand { left: 1rem; top: 4rem; }
}
@media (max-width: 35rem) {
    .culture-opening__stage, .culture-opening__inner { min-height: 49rem; }
    .culture-opening__inner { padding-top: 2rem; padding-bottom: 3rem; }
    .culture-opening__art { height: 67%; top: 6rem; object-position: 77% 50%; }
    .culture-opening__stage::after { background: linear-gradient(180deg, #f5f0e600 35%, #f5f0e6f2 65%, #f5f0e6 78%); }
    .culture-opening__masthead { position: relative; z-index: 1; }
    .culture-opening h1 { font-size: 24vw; }
    .culture-opening .culture-kicker { color: #704029; font-size: .6rem; }
    .culture-opening__copy { width: 100%; gap: .8rem; }
    .culture-opening h2 { font-size: 1.9rem; max-width: 20ch; }
    .culture-opening p { font-size: .88rem; max-width: 38ch; }
    .culture-opening__caption { bottom: 1rem; font-size: .5rem; padding: 0; background: none; }
    .culture-intro { padding-block: 4.5rem; }
    .culture-intro h2 { font-size: 2.45rem; }
    .culture-intro__text { margin-left: 0; font-size: .94rem; }
    .culture-route__header { padding-block: 3.5rem; }
    .culture-scene .culture-scene__copy { padding: 1.5rem .25rem 0; margin: 0; background: none; }
    .culture-scene .culture-scene__visual { height: 57svh; min-height: 21rem; }
    .culture-scene__eyebrow { margin-bottom: 1rem; }
    .culture-scene h3 { font-size: 2.5rem; }
    .culture-scene__text p { font-size: .96rem; }
    .culture-scene__expand > span { display: none; }
    .culture-scene__expand { top: auto; bottom: 1rem; }
    .culture-closing { padding-block: 4.5rem; }
    .culture-closing::after { background: #102e37dc; }
    html[data-site-theme="dark"] .culture-opening__stage::after { background: linear-gradient(180deg, #10272c66, #10272c00 35%, #10272cf2 65%, #10272c 78%); }
    html[data-site-theme="dark"] .culture-opening .culture-kicker { color: #ebc2a7; }
    html[data-site-theme="dark"] .culture-opening__caption { color: #d2dedd; }
}
/* On small screens each text block enters on its own timeline and stays
   readable to its final line, even when the chapter exceeds a viewport. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        @media (max-width: 63.999rem), (max-height: 37.999rem) {
            .culture-story-ready .culture-scene__copy {
                animation: culture-copy-mobile linear both;
                animation-timeline: view(block);
                animation-range: entry 0% entry 30%;
            }
        }
    }
}
@keyframes culture-copy-mobile {
    from { opacity: .65; transform: translateY(1rem); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-culture-story *, .site-culture-story *::after { animation: none !important; transition: none !important; }
}
@media print {
    .site-culture-story { background: white; color: black; }
    .culture-opening, .culture-scene { min-height: 0 !important; }
    .culture-opening__stage, .culture-scene__stage { position: relative !important; }
    .site-culture-story * { animation: none !important; opacity: 1 !important; transform: none !important; }
    .culture-progress, .culture-scene__expand { display: none !important; }
}