/* ============================================================
   IMPASTO — "Our Story", cinematic edition
   Stylesheet for /story/index.html
   Palette: espresso ink, olive, terracotta #C55827, antique gold.
   ============================================================ */

:root {
    --sc-ink: #0a0705;
    --sc-ink-2: #140f0a;
    --sc-espresso: #2a1c13;
    --sc-olive: #2f3e2c;
    --sc-olive-deep: #1a2718;
    --sc-terra: #c55827;
    --sc-terra-soft: #e0763f;
    --sc-gold: #d8b96a;
    --sc-gold-dim: rgba(216, 185, 106, 0.28);
    --sc-cream: #f4efe6;
    --sc-cream-dim: rgba(244, 239, 230, 0.7);

    --sc-font-body: 'Cairo', system-ui, sans-serif;
    --sc-font-display: 'Playfair Display', 'Cairo', Georgia, serif;
    --sc-font-num: 'Playfair Display', Georgia, serif;
    --sc-font-brand: 'Reem Kufi', 'Cairo', sans-serif;

    --sc-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sc-card-radius: clamp(18px, 2.1vw, 32px);
}

html.lang-en {
    --sc-font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sc-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sc-font-num: 'Cormorant Garamond', Georgia, serif;
    --sc-font-brand: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
}

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

html {
    background: var(--sc-ink);
}

body.sc-body {
    margin: 0;
    padding: 0;
    background: var(--sc-ink);
    color: var(--sc-cream);
    font-family: var(--sc-font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.sc-body img,
body.sc-body video {
    max-width: 100%;
}

/* Ambient backdrop — sits behind everything, never scrolls */
.sc-atmos {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 78% 6%, rgba(197, 88, 39, 0.15) 0%, rgba(197, 88, 39, 0) 55%),
        radial-gradient(90% 70% at 10% 84%, rgba(47, 62, 44, 0.32) 0%, rgba(47, 62, 44, 0) 60%),
        linear-gradient(178deg, #0a0705 0%, #140f0a 38%, #121009 70%, #0a0705 100%);
}

/* Deliberately no z-index: a stacking context here would trap the focused
   chapter underneath the global dim layer. */
.sc-page {
    position: relative;
}

/* ══════════════════════════════════════════════════════════
   HEADER / NAV
   ══════════════════════════════════════════════════════════ */
#header.sc-header {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 30;
    width: 100%;
    padding-top: clamp(14px, 2.2vh, 26px);
    background: transparent;
}

#header.sc-header .container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: clamp(16px, 3.4vw, 48px);
}

#header.sc-header .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

#header.sc-header .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: opacity 0.4s ease, transform 0.5s var(--sc-ease);
}

#header.sc-header .custom-logo {
    width: clamp(110px, 12vw, 168px);
    height: auto;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6));
}

#header.sc-header .custom-logo-link:hover {
    transform: translateY(-2px);
}

body.menu-open,
body.book-open {
    overflow: hidden;
}

/* The drawer itself — header chrome, toggle and panel — lives in
   story-cinematic-nav.css, scoped to body.sc-body. */

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.sc-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    padding: clamp(90px, 14vh, 160px) clamp(18px, 5vw, 60px) clamp(70px, 12vh, 130px);
}

.sc-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
    transform: none;
}

.sc-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 50% 40%, rgba(10, 7, 5, 0.34) 0%, rgba(10, 7, 5, 0.78) 62%, rgba(10, 7, 5, 0.95) 100%),
        linear-gradient(180deg, rgba(10, 7, 5, 0.7) 0%, rgba(10, 7, 5, 0.42) 35%, rgba(10, 7, 5, 0.94) 100%);
}

.sc-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.sc-hero__actions {
    position: relative;
    z-index: 3;
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(26px, 4.4vh, 44px);
}

body.sc-body .zc-clone-drawer,
body.sc-body .zc-clone-overlay,
body.sc-body .payment-success-overlay {
    z-index: 1200000;
}

body.sc-body .zc-clone-btn {
    z-index: 1200001;
}

body[data-page="home"] .zc-clone-btn,
body[data-page="story"] .zc-clone-btn,
body[data-page="menu"] .zc-clone-btn,
body[data-page="contact"] .zc-clone-btn {
    display: none !important;
}

@keyframes zcSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sc-kicker {
    display: inline-block;
    font-size: clamp(0.72rem, 1.1vw, 0.86rem);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--sc-terra-soft);
    margin-bottom: clamp(14px, 2.4vh, 26px);
}

.sc-kicker::before,
.sc-kicker::after {
    content: '';
    display: inline-block;
    width: clamp(18px, 3vw, 42px);
    height: 1px;
    vertical-align: middle;
    margin-inline: 12px;
    background: linear-gradient(90deg, transparent, var(--sc-gold-dim), transparent);
}

.sc-hero__brand {
    margin: 0;
    position: relative;
    isolation: isolate;
    line-height: 1;
}

.sc-hero__word {
    display: inline-block;
    font-family: var(--sc-font-brand);
    font-weight: 700;
    font-size: clamp(3.8rem, 15.5vw, 10.4rem);
    line-height: 1.06;
    letter-spacing: 0;
    color: #f4efe6;
    background-image: linear-gradient(
        180deg,
        #ffffff 0%,
        #faf6ee 34%,
        #f4efe6 68%,
        #ebe3d4 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
    paint-order: fill;
    font-synthesis: none;
    text-rendering: geometricPrecision;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42))
        drop-shadow(0 0 22px rgba(244, 239, 230, 0.28))
        drop-shadow(0 18px 42px rgba(0, 0, 0, 0.72));
}

html.lang-en .sc-hero__brand .sc-hero__word,
html[lang="en"] .sc-hero__brand .sc-hero__word {
    font-family: var(--sc-font-brand) !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.sc-hero__rule {
    display: block;
    width: clamp(90px, 14vw, 170px);
    height: 1px;
    margin: clamp(22px, 3.6vh, 40px) auto 0;
    background: linear-gradient(90deg, transparent, var(--sc-gold), transparent);
    opacity: 0.7;
}

.sc-hero__lede {
    margin: clamp(20px, 3.4vh, 34px) auto 0;
    max-width: 640px;
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 2;
    color: var(--sc-cream-dim);
}

.sc-cue {
    position: absolute;
    inset-inline: 0;
    bottom: clamp(20px, 4vh, 44px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.55);
}

.sc-cue__line {
    width: 1px;
    height: clamp(34px, 6vh, 58px);
    background: linear-gradient(180deg, var(--sc-gold), transparent);
    transform-origin: top center;
    animation: scCue 2.6s var(--sc-ease) infinite;
}

@keyframes scCue {
    0% { transform: scaleY(0.2); opacity: 0.2; }
    45% { transform: scaleY(1); opacity: 0.9; }
    100% { transform: scaleY(0.2); opacity: 0.2; }
}

/* ══════════════════════════════════════════════════════════
   CHAPTERS
   ══════════════════════════════════════════════════════════ */
.sc-chapters {
    position: relative;
}

.sc-chapter {
    position: relative;
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(74px, 11vh, 130px) clamp(14px, 4vw, 52px) clamp(48px, 8vh, 96px);
}

/* While focused, the chapter rises above the dim layer so only its video
   stays lit; pointer events are released so the nav keeps working. */
.sc-chapter.is-focus {
    z-index: 60;
    pointer-events: none;
}

/* Local veil: darkens the card behind the video once it steps out.
   Must stay BELOW .sc-card so the focused video is never dimmed. */
.sc-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(80% 60% at 50% 50%, rgba(5, 4, 3, 0.55) 0%, rgba(5, 4, 3, 0.82) 70%, rgba(5, 4, 3, 0.93) 100%);
}

/* ── The rectangle card ───────────────────────────────── */
.sc-card {
    position: relative;
    z-index: 3;
    width: min(100%, 1180px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(22px, 4vw, 68px);
    padding: clamp(20px, 2.8vw, 52px);
    perspective: 1400px;
    overflow: visible;
}

.sc-chapter.is-reverse .sc-card {
    flex-direction: row-reverse;
}

.sc-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--sc-card-radius);
    border: 1px solid rgba(216, 185, 106, 0.16);
    background:
        linear-gradient(145deg, rgba(42, 28, 19, 0.9) 0%, rgba(20, 15, 10, 0.92) 48%, rgba(26, 39, 24, 0.88) 100%);
    box-shadow:
        0 44px 90px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(244, 239, 230, 0.06);
}

/* Light spill: warm atmosphere leaking from the video side toward the copy,
   so the text always sits on the softer end of the gradient. */
.sc-card__spill {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: var(--sc-card-radius);
    opacity: 1;
    transition: opacity 0.8s var(--sc-ease);
}

.sc-card[data-spill='from-start'] .sc-card__spill {
    background:
        linear-gradient(to right, rgba(197, 88, 39, 0.2) 0%, rgba(197, 88, 39, 0.07) 30%, rgba(197, 88, 39, 0) 66%),
        linear-gradient(to right, rgba(244, 239, 230, 0.1) 0%, rgba(244, 239, 230, 0.02) 34%, rgba(244, 239, 230, 0) 64%);
}

.sc-card[data-spill='from-end'] .sc-card__spill {
    background:
        linear-gradient(to left, rgba(197, 88, 39, 0.2) 0%, rgba(197, 88, 39, 0.07) 30%, rgba(197, 88, 39, 0) 66%),
        linear-gradient(to left, rgba(244, 239, 230, 0.1) 0%, rgba(244, 239, 230, 0.02) 34%, rgba(244, 239, 230, 0) 64%);
}

.sc-card[data-spill='from-top'] .sc-card__spill {
    background:
        linear-gradient(to bottom, rgba(197, 88, 39, 0.2) 0%, rgba(197, 88, 39, 0.07) 32%, rgba(197, 88, 39, 0) 68%),
        linear-gradient(to bottom, rgba(244, 239, 230, 0.1) 0%, rgba(244, 239, 230, 0.02) 36%, rgba(244, 239, 230, 0) 66%);
}

/* ── Copy column ──────────────────────────────────────── */
.sc-copy {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding: clamp(6px, 1.6vw, 26px);
}

.sc-copy__label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(0.66rem, 0.9vw, 0.78rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(216, 185, 106, 0.85);
    margin-bottom: clamp(10px, 1.6vh, 18px);
}

.sc-copy__label::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--sc-gold-dim), transparent);
}

.sc-index {
    position: absolute;
    top: clamp(-36px, -3vw, -14px);
    inset-inline-end: clamp(4px, 1.5vw, 22px);
    font-family: var(--sc-font-num);
    font-style: italic;
    font-size: clamp(4.5rem, 11vw, 9rem);
    line-height: 1;
    color: rgba(216, 185, 106, 0.07);
    user-select: none;
    pointer-events: none;
}

.sc-title {
    margin: 0;
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.7vw, 2.5rem);
    line-height: 1.45;
    color: #f0e0b6;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.55);
}

.sc-rule {
    display: block;
    width: clamp(56px, 6vw, 92px);
    height: 1px;
    margin: clamp(14px, 2.2vh, 24px) 0;
    background: linear-gradient(90deg, var(--sc-gold), rgba(216, 185, 106, 0));
}

html[dir='rtl'] .sc-rule {
    background: linear-gradient(270deg, var(--sc-gold), rgba(216, 185, 106, 0));
}

.sc-summary {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(0.98rem, 1.32vw, 1.28rem);
    line-height: 2;
    font-weight: 300;
    color: rgba(244, 239, 230, 0.87);
}

/* ── Video stage ──────────────────────────────────────── */
.sc-stage {
    --inv: 1;
    --sc-r: 16px;
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    width: clamp(150px, min(21vw, 26vh), 292px);
    aspect-ratio: 9 / 16;
    border-radius: calc(var(--sc-r) * var(--inv));
    overflow: hidden;
    background: #060504;
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
    box-shadow:
        0 calc(26px * var(--inv)) calc(54px * var(--inv)) rgba(0, 0, 0, 0.66);
    transition: opacity 1s var(--sc-ease);
}

/* Only hide before reveal when the engine is live, so the page degrades well */
body.sc-js .sc-stage {
    opacity: 0;
}

body.sc-js .sc-stage.is-ready {
    opacity: 1;
}

.sc-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.94) brightness(0.9);
    transition: filter 1.1s var(--sc-ease);
}

/* Page sound FAB — fixed above cinema letterbox (z:70) so it stays clickable
   while focused chapters use pointer-events:none. */
.sc-sound-btn {
    position: fixed;
    z-index: 90;
    inset-inline-end: clamp(14px, 3vw, 28px);
    bottom: clamp(86px, 11vh, 120px);
    width: 48px;
    height: 48px;
    border: 1px solid rgba(244, 239, 230, 0.35);
    border-radius: 999px;
    background: rgba(12, 8, 5, 0.78);
    color: #f4efe6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s var(--sc-ease), background 0.35s ease, border-color 0.35s ease, color 0.35s ease, opacity 0.35s ease;
}

.sc-sound-btn:hover,
.sc-sound-btn:focus-visible {
    transform: translateY(-2px);
    background: rgba(197, 88, 39, 0.72);
    border-color: rgba(216, 185, 106, 0.55);
    color: #fff;
    outline: none;
}

.sc-sound-btn.is-on {
    border-color: rgba(216, 185, 106, 0.55);
    color: #f0e0b6;
}

/* When the video holds the centre: full clarity — no dim, no wash */
.sc-chapter.is-focus .sc-stage {
    z-index: 20;
    isolation: isolate;
}

.sc-chapter.is-focus .sc-stage video {
    filter: none;
}

.sc-chapter.is-focus .sc-falloff {
    opacity: 0 !important;
}

.sc-chapter.is-focus .sc-frame {
    /* Keep a hairline only — drop the dark vignette while solo */
    background: none;
    box-shadow: inset 0 0 0 calc(1px * var(--inv)) rgba(216, 185, 106, 0.4);
}

/* The edge facing the copy is washed with the same warm light, so the frame
   reads clearer the further it travels from the text. */
.sc-falloff {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.sc-stage[data-fade='start'] .sc-falloff {
    background:
        linear-gradient(to right, rgba(12, 8, 5, 0.58) 0%, rgba(12, 8, 5, 0.22) 26%, rgba(12, 8, 5, 0) 58%),
        linear-gradient(to right, rgba(244, 239, 230, 0.15) 0%, rgba(244, 239, 230, 0.04) 24%, rgba(244, 239, 230, 0) 52%);
}

.sc-stage[data-fade='end'] .sc-falloff {
    background:
        linear-gradient(to left, rgba(12, 8, 5, 0.58) 0%, rgba(12, 8, 5, 0.22) 26%, rgba(12, 8, 5, 0) 58%),
        linear-gradient(to left, rgba(244, 239, 230, 0.15) 0%, rgba(244, 239, 230, 0.04) 24%, rgba(244, 239, 230, 0) 52%);
}

.sc-stage[data-fade='bottom'] .sc-falloff {
    background:
        linear-gradient(to top, rgba(12, 8, 5, 0.6) 0%, rgba(12, 8, 5, 0.24) 24%, rgba(12, 8, 5, 0) 56%),
        linear-gradient(to top, rgba(244, 239, 230, 0.15) 0%, rgba(244, 239, 230, 0.04) 22%, rgba(244, 239, 230, 0) 50%);
}

/* Hairline gold frame + vignette; both counter-scaled so they stay hairline
   while the video is magnified. */
.sc-frame {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 calc(1px * var(--inv)) rgba(216, 185, 106, 0.34),
        inset 0 0 calc(60px * var(--inv)) rgba(0, 0, 0, 0.35);
    background: radial-gradient(115% 85% at 50% 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.4) 100%);
}

/* ── Caption shown only while the video holds the centre ── */
.sc-caption {
    position: absolute;
    z-index: 25;
    inset-inline: 0;
    bottom: clamp(38px, 9vh, 104px);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    padding-inline: 18px;
}

.sc-caption__label {
    display: block;
    font-size: clamp(0.6rem, 0.85vw, 0.72rem);
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(216, 185, 106, 0.9);
    margin-bottom: 8px;
}

.sc-caption__title {
    display: block;
    font-family: var(--sc-font-display);
    font-size: clamp(0.95rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    color: rgba(244, 239, 230, 0.94);
    text-shadow: 0 6px 26px rgba(0, 0, 0, 0.8);
}

/* ══════════════════════════════════════════════════════════
   CINEMA LAYER (page dim + letterbox) and chapter rail
   ══════════════════════════════════════════════════════════ */
.sc-cinema {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}

.sc-dim {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(100% 70% at 50% 50%, rgba(6, 4, 3, 0.8) 0%, rgba(4, 3, 2, 0.92) 68%, rgba(2, 2, 1, 0.97) 100%);
}

.sc-letterbox {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
}

.sc-bar {
    position: absolute;
    inset-inline: 0;
    height: clamp(22px, 6vh, 74px);
    transform: scaleY(0);
    background: linear-gradient(180deg, #050403 0%, #050403 70%, rgba(5, 4, 3, 0.86) 100%);
}

.sc-bar--top {
    top: 0;
    transform-origin: top center;
}

.sc-bar--bottom {
    bottom: 0;
    transform-origin: bottom center;
    background: linear-gradient(0deg, #050403 0%, #050403 70%, rgba(5, 4, 3, 0.86) 100%);
}

.sc-rail {
    position: fixed;
    z-index: 80;
    inset-inline-start: clamp(14px, 2vw, 30px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.7s var(--sc-ease);
}

/* Hairline spine the chapter ticks hang from */
.sc-rail::before {
    content: '';
    position: absolute;
    inset-block: -8px;
    inset-inline-start: 0;
    width: 1px;
    background: linear-gradient(180deg,
            rgba(216, 185, 106, 0) 0%,
            rgba(216, 185, 106, 0.24) 16%,
            rgba(216, 185, 106, 0.24) 84%,
            rgba(216, 185, 106, 0) 100%);
}

.sc-rail.is-live {
    opacity: 0.6;
}

.sc-rail.is-live:hover,
.sc-rail.is-live:focus-within {
    opacity: 1;
}

.sc-rail a {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-family: var(--sc-font-num);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: rgba(244, 239, 230, 0.35);
    transition: color 0.5s var(--sc-ease);
}

.sc-rail a::before {
    content: '';
    width: 14px;
    height: 1px;
    background: currentColor;
    transition: width 0.5s var(--sc-ease), background 0.5s var(--sc-ease);
}

.sc-rail a:hover {
    color: rgba(244, 239, 230, 0.75);
}

.sc-rail a.is-active {
    color: var(--sc-gold);
}

.sc-rail a.is-active::before {
    width: 30px;
    background: var(--sc-terra);
}

body.menu-open .sc-cinema,
body.menu-open .sc-letterbox,
body.menu-open .sc-rail {
    display: none;
}

/* ══════════════════════════════════════════════════════════
   OUTRO + FOOTER
   ══════════════════════════════════════════════════════════ */
.sc-outro {
    position: relative;
    text-align: center;
    padding: clamp(90px, 16vh, 180px) clamp(18px, 5vw, 60px) clamp(70px, 12vh, 140px);
}

.sc-outro__title {
    margin: 0 0 clamp(14px, 2.4vh, 22px);
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: clamp(1.7rem, 4.2vw, 3rem);
    line-height: 1.4;
    color: #f0e0b6;
}

.sc-outro__desc {
    margin: 0 auto clamp(26px, 4vh, 42px);
    max-width: 560px;
    font-size: clamp(0.98rem, 1.3vw, 1.15rem);
    line-height: 2;
    color: var(--sc-cream-dim);
}

.sc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 14px 30px;
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.5s var(--sc-ease), background 0.4s ease, color 0.4s ease;
}

.sc-btn--primary {
    background: linear-gradient(135deg, var(--sc-terra) 0%, #a8461f 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(197, 88, 39, 0.26);
}

.sc-btn--ghost {
    border: 1px solid rgba(216, 185, 106, 0.42);
    color: rgba(244, 239, 230, 0.88);
}

.sc-btn:hover {
    transform: translateY(-3px);
}

.sc-btn--ghost:hover {
    background: rgba(216, 185, 106, 0.1);
    color: #fff;
}

.sc-footer {
    position: relative;
    border-top: 1px solid rgba(216, 185, 106, 0.12);
    background: rgba(5, 4, 3, 0.72);
    padding: clamp(34px, 6vh, 58px) clamp(18px, 5vw, 60px);
}

.sc-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.sc-footer__logo img {
    width: 132px;
    height: auto;
    opacity: 0.9;
}

.sc-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 2.6vw, 34px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.sc-footer__nav a {
    color: rgba(244, 239, 230, 0.72);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    transition: color 0.35s ease;
}

.sc-footer__nav a:hover {
    color: var(--sc-terra-soft);
}

.sc-footer__social {
    display: flex;
    gap: 16px;
}

.sc-footer__social a {
    color: var(--sc-terra);
    font-size: 1.2rem;
    transition: transform 0.4s var(--sc-ease), color 0.35s ease;
}

.sc-footer__social a:hover {
    transform: translateY(-3px);
    color: var(--sc-terra-soft);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
    .sc-rail {
        display: none;
    }
}

@media (max-width: 1024px) {
    .sc-stage {
        width: clamp(140px, min(26vw, 25vh), 240px);
    }

    .sc-summary {
        line-height: 1.95;
    }
}

/* Tablet portrait and phones: video stacks above the text */
@media (max-width: 860px) {
    .sc-chapter {
        padding: clamp(78px, 12vh, 124px) clamp(12px, 4vw, 30px) clamp(26px, 5vh, 56px);
    }

    .sc-card,
    .sc-chapter.is-reverse .sc-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: clamp(14px, 2.4vh, 26px);
        padding: clamp(18px, 4.5vw, 30px);
    }

    .sc-stage {
        order: -1;
        width: min(52vw, 23svh);
    }

    .sc-copy {
        padding: 0 4px;
    }

    .sc-copy__label {
        justify-content: center;
    }

    .sc-copy__label::after {
        display: none;
    }

    .sc-index {
        top: clamp(-30px, -6vw, -16px);
        inset-inline: 0;
        text-align: center;
        font-size: clamp(3.6rem, 17vw, 6rem);
    }

    .sc-title {
        font-size: clamp(1.15rem, 4.6vw, 1.62rem);
        line-height: 1.4;
    }

    .sc-rule {
        margin: clamp(10px, 1.6vh, 16px) auto;
    }

    .sc-summary {
        margin-inline: auto;
    }

    .sc-footer__inner {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .sc-stage {
        width: min(54vw, 23svh);
    }

    .sc-summary {
        font-size: clamp(0.9rem, 3.7vw, 1.02rem);
        line-height: 1.85;
    }

    .sc-btn {
        min-width: 100%;
    }
}

/* Short landscape viewports */
@media (max-height: 620px) and (min-width: 861px) {
    .sc-stage {
        width: clamp(120px, 22vh, 200px);
    }
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION — calm cards, dim only, no travel
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .sc-cue__line {
        animation: none;
    }

    .sc-hero__video {
        display: none;
    }
}

body.sc-calm .sc-chapter {
    height: auto;
    min-height: 0;
    padding-block: clamp(38px, 7vh, 76px);
}

body.sc-calm .sc-cinema,
body.sc-calm .sc-letterbox,
body.sc-calm .sc-caption,
body.sc-calm .sc-veil,
body.sc-calm .sc-rail {
    display: none;
}

body.sc-calm .sc-stage {
    transform: none !important;
}

body.sc-calm .sc-chapter {
    opacity: 0.001;
    transition: opacity 0.5s ease;
}

body.sc-calm .sc-chapter.is-revealed {
    opacity: 1;
}