html,
body {
    overflow-x: clip;
}

.story-page {
    --story-ink: #191714;
    --story-paper: #f2ece2;
    --story-cream: #eee6da;
    --story-soft: var(--color-background-warm);
    --story-red: #902822;
    --story-gold: #b89f6f;
    --story-label: "Source Sans 3", Arial, sans-serif;
    width: 100%;
    margin-inline: 0;
    padding: 0;
    overflow: hidden;
    background: var(--story-paper);
}

.story-shell {
    width: min(100% - 56px, 1080px);
    margin-inline: auto;
}

.story-hero {
    position: relative;
    display: grid;
    min-height: clamp(480px, 58svh, 590px);
    background: var(--story-ink) url("../../assets/images/accueil/calligraphie-fond.webp") 50% 46% / cover no-repeat;
    color: #fff;
    isolation: isolate;
}

.story-hero__shade {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(10 9 7 / 89%) 0%, rgb(10 9 7 / 61%) 48%, rgb(10 9 7 / 20%) 100%),
        linear-gradient(0deg, rgb(10 9 7 / 76%) 0%, transparent 45%);
}

.story-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-block: clamp(54px, 7vw, 80px) 0;
}

.story-hero__copy {
    max-width: 940px;
}

.story-hero__section,
.story-hero__eyebrow,
.story-part__kicker {
    font-family: var(--story-label);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.story-hero__section {
    margin: 0 0 14px;
    color: rgb(255 255 255 / 64%);
}

.story-hero__eyebrow {
    margin: 0 0 22px;
    color: #c9695e;
}

.story-hero h1 {
    max-width: 880px;
    margin: 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(48px, 5.6vw, 76px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .96;
    text-wrap: balance;
}

.story-index {
    display: grid;
    margin-top: clamp(30px, 4vw, 44px);
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgb(255 255 255 / 30%);
}

.story-index a {
    display: flex;
    min-height: 60px;
    padding: 14px 24px 14px 0;
    align-items: center;
    gap: 13px;
    border-right: 1px solid rgb(255 255 255 / 18%);
    color: rgb(255 255 255 / 88%);
    font-family: var(--story-label);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .25s ease, padding-left .25s ease;
}

.story-index a:last-child {
    border-right: 0;
}

.story-index a:hover,
.story-index a:focus-visible {
    padding-left: 10px;
    color: #fff;
}

.story-index span {
    color: var(--story-gold);
    font-size: 11px;
    letter-spacing: .12em;
}

.story-part {
    position: relative;
    padding-block: clamp(46px, 5vw, 64px);
    scroll-margin-top: calc(var(--site-header-height) + 24px);
}

.story-part__heading {
    display: grid;
    margin-bottom: clamp(28px, 3.5vw, 40px);
    padding-bottom: 18px;
    grid-template-columns: clamp(68px, 7vw, 94px) 1fr;
    align-items: end;
    border-bottom: 1px solid rgb(25 23 20 / 34%);
}

.story-part__number {
    margin: 0 0 -8px;
    color: var(--story-red);
    font-family: var(--font-heading);
    font-size: clamp(62px, 7vw, 88px);
    font-weight: 400;
    letter-spacing: -.07em;
    line-height: .72;
    opacity: .92;
}

.story-part__kicker {
    margin: 0 0 10px;
    color: #71685d;
}

.story-part__heading h2 {
    max-width: 900px;
    margin: 0;
    scroll-margin-top: calc(var(--site-header-height) + 24px);
    color: var(--story-ink);
    font-family: var(--font-heading);
    font-size: clamp(44px, 5vw, 66px);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: .95;
}

.story-pair {
    display: grid;
    margin-bottom: clamp(28px, 4vw, 40px);
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: clamp(22px, 3.5vw, 36px);
    align-items: center;
}

.story-pair:last-child {
    margin-bottom: 0;
}

.story-pair--reverse {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}

.story-copy {
    max-width: 62ch;
    color: #352f29;
    font-family: var(--font-body);
    font-size: clamp(18px, 1.45vw, 20px);
    font-weight: 400;
    line-height: 1.58;
}

.story-copy p {
    margin: 0 0 12px;
    font: inherit;
}

.story-copy p:last-child {
    margin-bottom: 0;
}

.story-copy--lead > p:first-child {
    color: #241f1a;
}

.story-copy--panel {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    line-height: 1.52;
}

.story-visual {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #d9d2c8;
    box-shadow: 0 18px 42px rgb(41 31 22 / 11%);
}

.story-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: saturate(.88) contrast(1.02);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}

.story-visual:hover img {
    transform: scale(1.018);
    filter: saturate(.98) contrast(1.02);
}

.story-visual figcaption {
    position: relative;
    z-index: 1;
    padding: 9px 13px 10px;
    background: #e5ddd2;
    color: #51483f;
    font-family: var(--story-label);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.story-visual--landscape img {
    aspect-ratio: 1.42 / 1;
}

.story-visual--portrait-wide img {
    aspect-ratio: 1.15 / 1;
}

.story-visual--shift-right {
    width: min(100%, 520px);
    justify-self: end;
}

.story-visual--shift-left {
    width: min(100%, 460px);
    margin-left: 0;
    justify-self: start;
}

.story-part--origin {
    background:
        radial-gradient(circle at 92% 12%, rgb(184 159 111 / 13%), transparent 26%),
        var(--story-paper);
}

.story-pair--culture {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
}

.story-pair--culture .story-copy p {
    margin-bottom: 10px;
}

.story-part--temple {
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 22%, rgb(144 40 34 / 20%), transparent 27%),
        radial-gradient(circle at 4% 76%, rgb(184 159 111 / 10%), transparent 24%),
        var(--story-ink);
}

.story-part--temple::before {
    position: absolute;
    top: 24%;
    right: -3vw;
    color: rgb(255 255 255 / 2.8%);
    content: "傳";
    font-family: serif;
    font-size: clamp(280px, 38vw, 570px);
    line-height: 1;
    pointer-events: none;
}

.story-part--temple .story-part__heading {
    position: relative;
    border-color: rgb(238 230 218 / 28%);
}

.story-part--temple .story-part__number {
    color: #bd4b41;
}

.story-part--temple .story-part__kicker {
    color: var(--story-gold);
}

.story-part--temple .story-part__heading h2,
.story-part--temple .story-copy--lead > p:first-child {
    color: var(--story-cream);
}

.story-part--temple .story-copy {
    color: #d8cfc3;
}

.story-part--temple .story-visual figcaption {
    background: #27231f;
    color: #ddd4c8;
}

.story-pair--temple-lead {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}

.story-visual--temple {
    max-width: 520px;
    box-shadow: 0 34px 80px rgb(0 0 0 / 36%);
}

.story-visual--temple img {
    aspect-ratio: 1.42 / 1;
}

.story-pair--artwork {
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
}

.story-visual--painting {
    width: min(100%, 280px);
    justify-self: start;
    box-shadow: 0 34px 80px rgb(0 0 0 / 30%);
}

.story-visual--painting img {
    height: auto;
    object-fit: contain;
}

.story-pair--training {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.story-visual--training {
    max-width: 460px;
}

.story-visual--training img {
    aspect-ratio: 1.45 / 1;
}

.story-part--family {
    background:
        radial-gradient(circle at 90% 14%, rgb(184 159 111 / 11%), transparent 25%),
        var(--story-soft);
}

.story-part--family .story-part__heading {
    border-color: rgb(25 23 20 / 30%);
}

.story-copy--family {
    display: block;
    width: 100%;
    max-width: none;
}

.story-copy--family p {
    max-width: none;
    margin: 0 0 12px;
}

.story-copy--family p:first-child {
    color: #241f1a;
}

.story-copy--family p:last-child {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.story-visual--family {
    width: min(100%, 860px);
    margin: clamp(24px, 3vw, 34px) auto 0;
    box-shadow: 0 18px 40px rgb(41 31 22 / 12%);
}

.story-visual--family img {
    aspect-ratio: 3.4 / 1;
    filter: none;
}

.story-visual--family:hover img {
    filter: none;
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .story-pair {
            animation: story-reveal linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 25%;
        }

        @keyframes story-reveal {
            from {
                opacity: .35;
                transform: translateY(28px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }
}

@media (max-width: 900px) {
    .story-shell {
        width: min(100% - 48px, 760px);
    }

    .story-index a {
        padding-right: 14px;
        font-size: 12px;
    }

    .story-pair,
    .story-pair--reverse,
    .story-pair--temple-lead,
    .story-pair--artwork,
    .story-pair--training {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .story-copy {
        max-width: 640px;
    }

    .story-copy--panel {
        width: 100%;
        margin: 0;
    }

    .story-visual--shift-right,
    .story-visual--shift-left {
        width: min(100%, 620px);
        margin-left: 0;
    }

    .story-pair--artwork .story-copy {
        justify-self: end;
    }

    .story-visual--painting {
        width: min(58%, 280px);
    }
}

@media (max-width: 680px) {
    .story-shell {
        width: min(100% - 36px, 560px);
    }

    .story-hero {
        min-height: 610px;
        background-position: 58% 50%;
    }

    .story-hero__shade {
        background:
            linear-gradient(90deg, rgb(10 9 7 / 88%), rgb(10 9 7 / 36%)),
            linear-gradient(0deg, rgb(10 9 7 / 85%), transparent 65%);
    }

    .story-hero__inner {
        padding-top: 48px;
    }

    .story-hero h1 {
        max-width: 520px;
        font-size: clamp(44px, 12vw, 58px);
    }

    .story-index {
        width: calc(100% + 18px);
        margin-top: 28px;
        overflow-x: auto;
        grid-template-columns: repeat(3, minmax(176px, 1fr));
        scrollbar-width: none;
    }

    .story-index::-webkit-scrollbar {
        display: none;
    }

    .story-index a {
        min-height: 58px;
        padding-block: 12px;
    }

    .story-part {
        padding-block: 44px;
    }

    .story-part__heading {
        margin-bottom: 28px;
        padding-bottom: 16px;
        grid-template-columns: 58px 1fr;
    }

    .story-part__number {
        font-size: 56px;
    }

    .story-part__heading h2 {
        font-size: clamp(38px, 10vw, 50px);
    }

    .story-part__kicker {
        margin-bottom: 8px;
        font-size: 10px;
    }

    .story-pair {
        margin-bottom: 32px;
        gap: 20px;
    }

    .story-copy {
        font-size: 18px;
        line-height: 1.63;
    }

    .story-copy--panel {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .story-visual--shift-right,
    .story-visual--shift-left {
        width: 100%;
        margin-left: 0;
    }

    .story-visual--painting {
        width: min(72%, 270px);
    }

    .story-copy--family {
        max-width: none;
    }

    .story-visual--family {
        width: 100%;
        margin: 24px auto 0;
    }

    .story-visual--family img {
        height: auto;
        aspect-ratio: auto;
    }
}