/* Story section: continuous reading, photographs sharing a stable anchor. */
.story-section {
    --story-ink: #252326;
    --story-muted: #77757b;
    --story-frame-width: clamp(280px, 29vw, 400px);
    position: relative;
    padding: clamp(88px, 10vw, 144px) 0 64px;
    background: #fff;
    color: var(--story-ink);
    font-family: var(--_font-family---inter, Inter, sans-serif)
}
.story-section .story-intro { max-width: 860px; margin-bottom: clamp(72px, 9vw, 128px) }
.story-section .story-eyebrow {
    margin: 0 0 28px; color: #746d64; font-size: 11px; font-weight: 500;
    line-height: 1.5; letter-spacing: .15em; text-transform: uppercase
}
.story-section .story-title {
    margin: 0; font-family: var(--_font-family---poppins, Poppins, sans-serif);
    font-size: clamp(42px, 5.6vw, 80px); font-weight: 500; line-height: 1.08; letter-spacing: -.055em
}
.story-section .story-heading-mask, .story-section .story-heading-line { display: block }
.story-section .story-reader, .story-section .story-reading { position: relative; min-width: 0 }
.story-section .story-chapters { display: grid; gap: 112px; margin: 0; padding: 0; list-style: none }
.story-section .story-item, .story-section .story-chapter { min-width: 0 }
.story-section .story-copy { max-width: 600px }
.story-section .story-chapter-title {
    margin: 0 0 24px; font-family: inherit; font-size: 22px;
    font-weight: 500; line-height: 1.35; letter-spacing: -.035em
}
.story-section .story-chapter-body {
    font-size: clamp(19px, 1.55vw, 22px); font-weight: 400; line-height: 1.5; letter-spacing: -.035em
}
.story-section .story-chapter-body p { margin: 0 }
.story-section .story-chapter-body p + p { margin-top: 32px }
.story-section .story-figure {
    width: 100%; max-width: var(--story-frame-width); aspect-ratio: 4 / 5;
    margin: 32px 0 0; border-radius: 16px; overflow: hidden; background: #f4efe7
}
.story-section .story-image { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) }
.story-section .story-image--natural { filter: none }
.story-section .story-figure--free {
    aspect-ratio: auto; border-radius: 16px; background: transparent
}
.story-section .story-figure--free .story-image { height: auto; border-radius: inherit }
.story-section .story-gallery, .story-section .story-reading-dot, .story-section .story-progress-dock { display: none }

/* Complete static chapters remain readable if JavaScript is unavailable. */
.story-section .story-reader.is-enhanced {
    display: grid; grid-template-columns: minmax(0, 600px) var(--story-frame-width);
    column-gap: clamp(56px, 7vw, 112px); justify-content: space-between
}
.story-section .is-enhanced .story-reading { grid-column: 1; grid-row: 1; padding: 12vh 0 50vh 48px }
.story-section .is-enhanced .story-chapter-body p { color: var(--story-muted); transition: color .3s ease }
.story-section .is-enhanced .story-chapter-body p.is-current { color: var(--story-ink) }
.story-section .is-enhanced .story-chapter-title { color: #706d72; transition: color .3s ease }
.story-section .is-enhanced .story-chapter.is-current .story-chapter-title { color: var(--story-ink) }
.story-section .is-enhanced .story-reading-dot {
    position: absolute; top: -5px; left: 0; display: block; width: 10px; height: 10px;
    border-radius: 50%; background: var(--story-ink); opacity: 1; pointer-events: none;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .2s ease
}
.story-section .is-enhanced .story-gallery { display: block; grid-column: 2; grid-row: 1; position: relative; min-width: 0 }
.story-section .story-gallery-sticky {
    position: sticky; top: max(32px, calc((100svh - var(--story-frame-width) * 1.25) / 2))
}
.story-section .story-image-stack {
    position: relative; width: 100%; height: calc(var(--story-frame-width) * 1.25);
    isolation: isolate; background: transparent
}
.story-section .story-image-stack .story-figure {
    position: absolute; inset: 0; max-width: none; margin: 0; opacity: 0; visibility: hidden;
    transition: opacity .65s ease, visibility 0s .65s
}
.story-section .story-image-stack .story-figure.is-current {
    opacity: 1; visibility: visible; transition: opacity .65s ease, visibility 0s
}
/* The first four photographs share one top-left anchor, without a padded frame. */
.story-section .story-image-stack .story-figure--free,
.story-section .story-image-stack .story-figure--free.is-current {
    inset: 0 auto auto 0; height: auto; opacity: 0; visibility: hidden;
    transform: translate3d(0, 12px, 0) scale(.985); filter: blur(3px);
    transition: opacity .24s ease, transform .36s cubic-bezier(.22, 1, .36, 1), filter .32s ease, visibility 0s .36s
}
.story-section .is-media-visible .story-image-stack .story-figure--free.is-current {
    opacity: 1; visibility: visible; transform: none; filter: blur(0);
    transition: opacity .24s ease, transform .36s cubic-bezier(.22, 1, .36, 1), filter .32s ease, visibility 0s
}
.story-section .is-enhanced .story-progress-dock {
    position: fixed; inset: auto 0 0; z-index: 8; display: flex; justify-content: center;
    align-items: flex-end; height: 116px; padding: 0 20px max(24px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #fff0, #ffffffeb 75%, #fff);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility 0s .25s
}
.story-section .is-reading .story-progress-dock { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s }
.story-section .story-progress-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    max-width: 100%; min-height: 44px; padding: 11px 14px 11px 18px;
    border: 1px solid #e9e7e7; border-radius: 999px; background: #ffffffed;
    box-shadow: 0 3px 12px #28232b0d, 0 1px 3px #28232b08;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: var(--story-ink); font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: -.02em
}
.story-section .story-current-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.story-section .story-chapter-ring { flex: 0 0 18px; width: 18px; height: 18px; transform: rotate(-90deg); stroke-width: 1.7 }
.story-section .story-ring-track { stroke: #e3e1e4 }
.story-section .story-ring-value { stroke: #68646c; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100 }
.story-section .story-ending { position: relative; padding-top: 152px; text-align: center }
.story-section .story-ending-title {
    margin: 0; font-family: var(--_font-family---poppins, Poppins, sans-serif);
    font-size: clamp(32px, 4vw, 56px); font-weight: 500; line-height: 1.18; letter-spacing: -.045em
}
@media screen and (max-width: 991px) {
    .story-section { --story-frame-width: clamp(112px, 23svh, 190px); padding: 80px 0 }
    .story-section .story-ending { padding-top: 120px }
    .story-section .story-intro { margin-bottom: 56px }
    .story-section .story-title { font-size: clamp(36px, 7.5vw, 64px) }
    .story-section .story-reader.is-enhanced { display: block }
    .story-section .is-enhanced .story-gallery {
        position: sticky; top: 0; z-index: 3; padding: 16px 0 24px; background: #fff
    }
    .story-section .is-enhanced .story-gallery::after {
        content: ""; position: absolute; inset: 100% 0 auto; height: 24px;
        background: linear-gradient(#fff, #fff0); pointer-events: none
    }
    .story-section .story-gallery-sticky {
        position: relative; top: auto; width: var(--story-frame-width); margin: 0 auto
    }
    .story-section .is-enhanced .story-reading { padding: 64px 0 45vh 36px }
    .story-section .is-enhanced .story-reading-dot { width: 8px; height: 8px; top: -4px }
    .story-section .story-chapters { gap: 88px }
    .story-section .story-chapter-body { font-size: 19px; line-height: 1.55 }
}
@media screen and (max-width: 575px) {
    .story-section { padding: 64px 0 }
    .story-section .story-ending { padding-top: 104px }
    .story-section .story-chapter-title { font-size: 20px }
    .story-section .story-chapter-body { font-size: 17px; letter-spacing: -.025em }
    .story-section .story-chapter-body p + p { margin-top: 28px }
    .story-section .is-enhanced .story-progress-dock { height: 92px; padding-bottom: max(16px, env(safe-area-inset-bottom)) }
    .story-section .story-progress-pill { font-size: 12px }
}
@media (prefers-reduced-motion: reduce) {
    .story-section .is-enhanced .story-chapter-body p,
    .story-section .is-enhanced .story-chapter-title,
    .story-section .is-enhanced .story-reading-dot,
    .story-section .is-enhanced .story-progress-dock,
    .story-section .story-image-stack .story-figure { transition: none }
    .story-section .is-enhanced .story-chapter-body p { color: var(--story-ink) }
    .story-section .story-image-stack .story-figure--free,
    .story-section .story-image-stack .story-figure--free.is-current,
    .story-section .is-media-visible .story-image-stack .story-figure--free.is-current {
        transition: none; transform: none; filter: none
    }
}