/* ============================================================
   layout.css · containers, HERO frame-sequence stage, chapter shell
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ============================================================
   HERO — scroll-driven frame sequence
   The section is tall; .hero__sticky is pinned to the viewport
   while the canvas is scrubbed across the sequence.
   ============================================================ */
.hero {
    position: relative;
    /* long runway → slow, cinematic scrub across the 4 narrative segments */
    height: 700vh;
    background: var(--bg);
}

.hero__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* drawn cover-fit by JS */
}

.hero__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 38%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 22%, transparent 60%, rgba(0, 0, 0, 0.85) 100%);
}

/* ───────── 4-segment cinematic captions ─────────
   Injected & animated by hero-cinematic.js. Anchored into left/right
   safety zones; tone (.is-light/.is-dark) is chosen per frame for
   contrast. */
.hero__captions {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.hero__cap {
    position: absolute;
    margin: 0;
    max-width: min(46vw, 32rem);
    transform: translate3d(0, 24px, 0);
    opacity: 0;
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    will-change: opacity, transform, filter;
}

.hero__cap[data-side="left"] {
    left: var(--gutter);
    text-align: left;
    transform-origin: left center;
}

.hero__cap[data-side="right"] {
    right: var(--gutter);
    text-align: right;
    transform-origin: right center;
}

/* contrast-aware tone (toggled per frame) */
.hero__cap.is-light {
    color: var(--ink);
    text-shadow: 0 1px 40px rgba(0, 0, 0, 0.55);
}

.hero__cap.is-dark {
    color: #1b1712;
    text-shadow: 0 1px 24px rgba(255, 255, 255, 0.4);
}

.hero__cap em {
    font-style: italic;
    color: var(--gold-soft);
}

.hero__cap.is-dark em {
    color: #6c5a3f;
}

.hero__cap .sub {
    display: block;
    margin-top: 0.9rem;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
}

.hero__cap[data-size="xl"] { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.96; }
.hero__cap[data-size="lg"] { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
.hero__cap[data-size="md"] { font-size: clamp(1.3rem, 2.6vw, 2.1rem); }
.hero__cap[data-size="sm"] { font-size: clamp(1.05rem, 1.7vw, 1.5rem); }

/* directional readability scrims — confined to the active safety zone */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    transition: opacity 0.3s linear;
}

.hero__scrim[data-scrim="left"].mode-dark { background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0) 56%); }
.hero__scrim[data-scrim="left"].mode-light { background: linear-gradient(90deg, rgba(247, 244, 238, 0.9) 0%, rgba(247, 244, 238, 0) 56%); }
.hero__scrim[data-scrim="right"].mode-dark { background: linear-gradient(270deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0) 56%); }
.hero__scrim[data-scrim="right"].mode-light { background: linear-gradient(270deg, rgba(247, 244, 238, 0.9) 0%, rgba(247, 244, 238, 0) 56%); }

@media (max-width: 720px) {
    /* mobile: keep every caption left-anchored & readable */
    .hero__cap { max-width: 84vw; }

    .hero__cap[data-side="right"] {
        right: auto;
        left: var(--gutter);
        text-align: left;
        transform-origin: left center;
    }
}

/* ───────── FRAME cinematic captions — frame-mapped (public/frame) ─────────
   Two states only: a bottom title (frames 1–43) that rises from below, and
   centred lines (frames 181–326). Horizontally centred via translateX(-50%)
   applied in JS, so left:50% is the anchor. */
.hero__captions--legacy {
    z-index: 4;
}

.hero__cap--legacy {
    position: absolute;
    left: 50%;
    max-width: min(86vw, 40rem);
    text-align: center;
    transform: translate3d(-50%, 24px, 0);
    /* tone is fixed light here (always reads over the dark/scrimmed zones) */
    color: var(--ink);
    text-shadow: 0 1px 40px rgba(0, 0, 0, 0.6);
}

.hero__cap--legacy[data-pos="bottom"] {
    bottom: clamp(8%, 13vh, 15%);
}

.hero__cap--legacy[data-pos="center"] {
    top: 50%;
    /* JS applies translate(-50%, -50%) for true optical centring */
}

.hero__cap--legacy .sub {
    display: block;
    margin-top: 0.9rem;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── readability pools, opacity driven per-frame by hero-text.js ── */
.hero__lscrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* bottom pool — under the rising title over the dark leather macro */
.hero__lscrim[data-lscrim="bottom"] {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.30) 26%,
            transparent 52%);
}

/* centre pool — a soft dark vignette so centred text reads over the
   bright marble + glass of the boutique frames */
.hero__lscrim[data-lscrim="center"] {
    background: radial-gradient(60% 46% at 50% 50%,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.32) 48%,
            transparent 78%);
}

/* ============================================================
   CHAPTER shell (shared scaffolding for narrative sections)
   ============================================================ */
.chapter {
    position: relative;
    padding-block: var(--section-pad);
    background: var(--bg);
}

.chapter__index {
    position: absolute;
    top: clamp(3rem, 8vh, 6rem);
    left: var(--gutter);
    display: flex;
    align-items: baseline;
    gap: 1rem;
    color: var(--ink-faint);
    will-change: transform;
}

.chapter__num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gold);
}

.chapter__label {
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

/* thin hairline rule used between major sections */
.chapter::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--gutter);
    right: var(--gutter);
    height: 1px;
    background: var(--hair);
}