:root {
    --ink: #352719;
    --paper: #e9dec5;
    --line: rgba(242, 225, 189, .78);
    --scene-bg: #493a24;
    --font-size: var(--color-font-light);
}
p, h1, h2, h3, h4, h5 {
    color: var(--color-font-light);
}
body.kawakyu-heritage-page { overflow-x: clip; overflow-y: visible; margin: 0; background: var(--scene-bg); }
.kawakyu-heritage-history, .kawakyu-heritage-history * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.kawakyu-heritage-history { color: var(--paper); background: var(--scene-bg); font-family: "Noto Serif JP", serif; }
.kawakyu-heritage-history img { display: block; width: 100%; height: 100%; object-fit: cover; }

.noise {
    position: fixed;
    z-index: 5100;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: var(--heritage-noise-image) repeat;
    opacity: .1;
    pointer-events: none;
    will-change: transform;
    animation: noise 1.2s steps(3) infinite both;
}

@keyframes noise {
    0% { transform: translate3d(1%, -1%, 0); }
    10% { transform: translate3d(-5%, -2%, 0); }
    20% { transform: translate3d(10%, 5%, 0); }
    30% { transform: translate3d(5%, -11%, 0); }
    40% { transform: translate3d(-12%, -5%, 0); }
    50% { transform: translate3d(10%, 9%, 0); }
    60% { transform: translate3d(15%, 0, 0); }
    70% { transform: translate3d(-10%, 8%, 0); }
    80% { transform: translate3d(10%, 2%, 0); }
    90% { transform: translate3d(1%, 5%, 0); }
    100% { transform: translate3d(0, 8%, 0); }
}

.opening { position: relative; height: 600vh; background: var(--scene-bg); }
.opening__sticky, .chapter__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
body.admin-bar.kawakyu-heritage-page .opening__sticky,
body.admin-bar.kawakyu-heritage-page .chapter__sticky { top: 32px; height: calc(100svh - 32px); }
.hero { position: absolute; inset: 0; height: 100%; min-height: 640px; overflow: hidden; isolation: isolate; transform-origin: center center; will-change: transform, opacity; }
.hero__image { position: absolute; inset: 0; opacity: 1; transform: scale(1.06); will-change: transform, opacity; }
.hero__frame { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0; }
.hero__frame.is-active { opacity: 1; }
.hero__frame--01 { background-image: url("/wp-content/uploads/heritage-thumb.webp"); }
.hero__frame--02 { background-image: url("/wp-content/uploads/heritage-thumb-2.webp"); }
.hero__frame--03 { background-image: url("/wp-content/uploads/heritage-thumb-3.webp"); }
.hero__frame--04 { background-image: url("/wp-content/uploads/heritage-thumb-4.webp"); }
.hero__frame--05 { background-image: url("/wp-content/uploads/heritage-thumb-5.webp"); }
.hero__frame--06 { background-image: url("/wp-content/uploads/heritage-thumb-6.webp"); }
.hero__frame--07 { background-image: url("/wp-content/uploads/heritage-thumb-7.webp"); }
.hero__frame--08 { background-image: url("/wp-content/uploads/heritage-thumb-8.webp"); }
.hero__frame--09 { background-image: url("/wp-content/uploads/heritage-thumb-9.webp"); }
.hero__frame--10 { background-image: url("/wp-content/uploads/heritage-thumb-10.webp"); }
.hero__frame--11 { background-image: url("/wp-content/uploads/heritage-thumb-11.webp"); }
.hero__frame--12 { background-image: url("/wp-content/uploads/heritage-thumb-12.webp"); }
.hero__frame--13 { background-image: url("/wp-content/uploads/heritage-thumb-13.webp"); }
.hero__frame--14 { background-image: url("/wp-content/uploads/heritage-thumb-14.webp"); }
.hero__frame--15 { background-image: url("/wp-content/uploads/heritage-thumb-15.webp"); }
.hero__frame--16 { background-image: url("/wp-content/uploads/heritage-thumb-16.webp"); }
.hero__frame--17 { background-image: url("/wp-content/uploads/heritage-thumb-17.webp"); }
.hero__frame--18 { background-image: url("/wp-content/uploads/heritage-thumb-18.webp"); }
.hero__frame--19 { background-image: url("/wp-content/uploads/heritage-thumb-19.webp"); }
.hero__frame--20 { background-image: url("/wp-content/uploads/heritage-thumb-20.webp"); }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,7,4,.55), rgba(11,7,4,.1) 65%), rgba(24,15,7,.22); will-change: opacity; }
.hero__title { position: absolute;
     top: 48%;
     left: 50%;
     z-index: 1;
     margin: 0;
     color: var(--color-font-light);
    font-family: var(--font-family02);
    font-size: calc(clamp(80px, 7.4vw, 140px) * .6);
    font-weight: 300;
    letter-spacing: 0em;
    line-height: 1;
    text-indent: .045em;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    will-change: transform, opacity; 
    }
.intro { position: absolute; inset: 0; min-height: 0; overflow: hidden; padding: 150px 24px 0; text-align: center; background: transparent; will-change: transform, opacity; }
.intro__inner { position: relative; z-index: 1; }
.eyebrow, .chapter__year, .chapter__kicker { margin: 0; font: 500 clamp(1.35rem, 2vw, 2rem)/1 var(--font-family02); letter-spacing: .03em; }
.chapter__year {font-family: var(--font-family02);}
.intro .eyebrow, .intro h2 { will-change: opacity, filter; }
.intro .eyebrow {font-family: var(--font-family02); font-size: var(--font-siz22);margin-bottom: .3em;}
.intro h2 { margin: 0; font-size: clamp(1.8rem, 3.3vw, 3.6rem); font-weight: 400; letter-spacing: .09em; }
.intro__copy { margin-top: var(--clamp-60); font-size: clamp(.82rem, 1.15vw, 1rem); line-height: 2.05; letter-spacing: .1em; }
.intro__copy p { margin: 0 0 37px; }
.text-line { display: block; opacity: 0; filter: blur(8px); transform: translateY(12px); will-change: opacity, filter, transform; }
.timeline-start { position: absolute; bottom: 0; left: 50%; width: 1px; height: 190px; background: #fff2cb20; }
.timeline-start::before { content: ""; position: absolute; top: -6px; left: -4px; width: 7px; height: 7px; background: #fff2cb; transform: rotate(45deg); }
.timeline-start i { position: absolute; bottom: 0; left: 0; width: 100vw; border-bottom: 0px solid rgba(242,225,189,.1); }

.chapter { position: relative; height: 420vh; background: var(--scene-bg); }
.year-trigger { position: absolute; top: 80vh; left: 0; width: 1px; height: 1px; pointer-events: none; }
.chapter__sticky { position: sticky; background: var(--scene-bg); }
.chapter__backdrop { position: absolute; inset: 0; opacity: 0; background: center / cover url("/wp-content/uploads/heritage-ch1-bg.webp"); filter: sepia(.8) saturate(.6); will-change: width, transform, opacity; }
.chapter__motif { position: absolute; z-index: 0; top: 20vh; left: 50%; color: transparent; font: 600 min(56vw, 820px)/.8 "Noto Serif JP", serif; -webkit-text-stroke: 2px rgba(233,222,197,.1); transform: translateX(-50%); opacity: 0; pointer-events: none; will-change: opacity, transform; }
.chapter__header { position: absolute; z-index: 3; top: 11vh; left: 0; width: 100%; text-align: center; opacity: 0; will-change: transform, opacity; }
.chapter__header .chapter__year { margin-bottom: 7px; font-size: 60px; }

.chapter__header h2#chapter-title-05 {
    font-size: var(--font-size36);
}

p.chapter__subheading {
    font-size: var(--font-size18);
    margin-top: 0;
}
.js-year { display: inline-block; min-width: 4ch; font-variant-numeric: tabular-nums; transform-origin: center; }
.chapter__header h2 { margin: 0; font-size: var(--font-size28); font-weight: 400; letter-spacing: .003em; }
.chapter__header .chapter__kicker { margin-bottom: 16px; font-size: var(--font-size18); letter-spacing: .02em; }
.chapter__subheading { margin: 12px 0 0; font-size: 14px; line-height: 1.6; letter-spacing: .14em; }
.timeline--chapter { --heading-gap-start: calc(11vh - 34px); --heading-gap-end: calc(11vh + 112px); position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 1px; }
.timeline__segment { position: absolute; left: 0; width: 1px; background: #fff2cb20; }
.timeline__segment--before { top: 0; bottom: 0; height: auto; }
.timeline__segment--after { display: none; }
.timeline__marker { position: absolute; top: calc(var(--heading-gap-end) + 20px); left: -3px; width: 7px; height: 7px; background: #fff2cb; transform: rotate(45deg); opacity: 0; will-change: opacity; }
.photo, .chapter__copy { position: absolute; z-index: 2; margin: 0; box-shadow: 0 8px 25px rgba(0,0,0,.18); will-change: transform, opacity, filter; }
.photo--one { top: 29vh; left: 8.2vw; width: 19vw; aspect-ratio: 1.38; }
.photo--two { top: 59vh; left: 22vw; width: 15vw; aspect-ratio: 1.28; }
.photo--three { top: 43vh; right: 7.5vw; width: 18vw; aspect-ratio: .8; }
.photo--four { top: 73vh; right: 24.5vw; width: 16.5vw; aspect-ratio: 1.35; }
.chapter__copy { z-index: 3; top: 43vh; left: 54%; width: min(29vw, 470px); box-shadow: none; opacity: 0; font-size: clamp(.74rem, .92vw, .92rem); line-height: 2.15; letter-spacing: .08em; }
.chapter__copy p { margin: 0 0 28px; }
.chapter--02 { height: 500vh; }
.chapter--02 .chapter__copy { width: min(35vw, 570px); }
.chapter--02 .chapter__copy--lead { top: 28vh; left: 54%; }
.chapter--02 .chapter__copy--middle { top: 54vh; left: 14%; }
.chapter--02 .chapter__copy--end { top: 65vh; left: 54%; }
.chapter--02 .photo img { filter: sepia(.85) saturate(.55) contrast(1.08); }
.chapter--02 .photo--one { top: 70vh; right: auto; left: 8vw; width: 21vw; aspect-ratio: 1.06; }
.chapter--02 .photo--two { top: 77vh; right: 12vw; left: auto; width: 19vw; aspect-ratio: 1; }
.chapter--02 .photo--three { top: 43vh; right: 7vw; left: auto; width: 16vw; aspect-ratio: .85; }
.chapter--02 .photo--four { top: 57vh; right: auto; left: 25vw; width: 14vw; aspect-ratio: 1.3; }
.chapter--02 .photo--five { top: 83vh; right: auto; left: 43vw; width: 17vw; aspect-ratio: 1.15; }

.chapter--03, .chapter--04 { height: 520vh; }
.chapter--03 .chapter__backdrop {
    right: auto;
    left: 50%;
    width: min(1200px, 100vw);
    background-image: url("/wp-content/uploads/heritage-ch3-bg.webp");
    filter: sepia(.72) saturate(.62) brightness(.66);
    transform: translate(-50%, 58vh) scale(.78);
    transform-origin: center;
}
.chapter--03 .year-trigger { top: 140vh; }
.chapter--03 .chapter__copy, .chapter--04 .chapter__copy, .chapter--05 .chapter__copy { width: min(35vw, 570px); }
.chapter--03 .chapter__copy--lead, .chapter--04 .chapter__copy--lead, .chapter--05 .chapter__copy--lead { top: 29vh; left: 54%; }
.chapter--03 .chapter__copy--middle, .chapter--04 .chapter__copy--middle, .chapter--05 .chapter__copy--middle { top: 54vh; left: 14%; }
.chapter--03 .chapter__copy--end, .chapter--04 .chapter__copy--end, .chapter--05 .chapter__copy--end { top: 69vh; left: 54%; }
.chapter--03 .photo img, .chapter--04 .photo img { filter: sepia(.72) saturate(.6) contrast(1.08); }
.chapter--03 .photo--one, .chapter--04 .photo--one { top: 68vh; right: auto; left: 7vw; width: 20vw; aspect-ratio: 1.12; }
.chapter--03 .chapter--vision .photo--one {
    aspect-ratio: 3/2!important;
}
.chapter--03 .photo--two, .chapter--04 .photo--two { top: 77vh; right: 9vw; left: auto; width: 18vw; aspect-ratio: 1.2; }
.chapter--03 .photo--three, .chapter--04 .photo--three { top: 44vh; right: 6vw; left: auto; width: 16vw; aspect-ratio: .84; }
.chapter--03 .photo--four, .chapter--04 .photo--four { top: 83vh; right: auto; left: 30vw; width: 15vw; aspect-ratio: 1.3; }

.chapter--vision { height: 560vh; }
.chapter--vision .chapter__backdrop {
    background-image: url("/wp-content/uploads/heritage-chv-bg.webp");
    filter: sepia(.55) saturate(.65) brightness(.54);
    transform: scale(3.4);
    transform-origin: center;
}
.chapter__header--centered { top: 20vh; padding: 0 10vw; }
.chapter__copy--centered {
    top: 34vh;
    left: 0;
    width: 100%;
    padding: 0 18vw;
    text-align: center;
}
.chapter--vision .chapter__header h2 { font-size: var(--font-size36); line-height: 1.45; }
.chapter--vision .chapter__copy { font-size: clamp(.72rem, .9vw, .9rem); line-height: 2; }
.chapter--vision .photo img { filter: sepia(.75) saturate(.58) contrast(1.08); }
.chapter--vision .photo--one { top: 64vh; right: auto; left: 7vw; width: 18vw; aspect-ratio: 1.25; }
.chapter--vision .photo--two { top: 70vh; right: 7vw; left: auto; width: 17vw; aspect-ratio: .92; }
.chapter--vision .photo--anchor {
    top: 80vh;
    left: 50%;
    width: 34vw;
    max-width: 620px;
    margin-left: max(-17vw, -310px);
    aspect-ratio: 1.5;
}

.chapter--04 .chapter__backdrop {
    background-image: url("/wp-content/uploads/heritage-thumb-20.webp");
    filter: sepia(.62) saturate(.68) brightness(.58);
}

.chapter--trial, .chapter--today { height: 320vh; }
.chapter--trial .chapter__header, .chapter--today .chapter__header { top: 27vh; }
.chapter--trial .chapter__header h2, .chapter--today .chapter__header h2 { font-size: var(--font-size34); }
.chapter--trial .chapter__copy, .chapter--today .chapter__copy { top: 43vh; font-size: clamp(.78rem, 1vw, .98rem); }
.chapter--05 { height: 440vh; }
.chapter--05 .chapter__backdrop {
    background-image: url("/wp-content/uploads/heritage-thumb-21.webp");
    filter: sepia(.74) saturate(.55) brightness(.55);
}
.chapter--05 .timeline--chapter { --heading-gap-end: calc(11vh + 150px); }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
    .hero { min-height: 580px; } .hero__title { font-size: 4.4rem; }
    .intro { padding-top: 110px; } .intro h2 { line-height: 1.65; } .intro__copy { margin-top: 55px; }
    .timeline-start { left: 50%; height: 90px; }
    .chapter { height: 440vh; } .timeline--chapter { --heading-gap-start: calc(10vh - 30px); --heading-gap-end: calc(10vh + 148px); left: 50%; }
    .chapter__header { top: 10vh; padding: 0 24px; text-align: center; } .chapter__header h2 { line-height: 1.5; }
    .chapter__copy { top: 42vh; left: 0; width: 100%; padding: 0 24px; font-size: .74rem; text-align: center; }
    .chapter .photo { display: block; z-index: 2; }
    .chapter .photo--one { top: 58vh; right: auto; left: -8vw; width: 54vw; margin-left: 0; }
    .chapter .photo--two { top: 70vh; right: -7vw; left: auto; width: 52vw; }
    .chapter .photo--three { top: 78vh; right: auto; left: -6vw; width: 52vw; }
    .chapter .photo--four { display: block; top: 86vh; right: -6vw; left: auto; width: 52vw; }
    .chapter .photo--five { display: block; top: 90vh; right: auto; left: -6vw; width: 52vw; }
    .chapter--02 { height: 560vh; }
    .chapter--02 .chapter__motif { top: 26vh; font-size: 90vw; }
    .chapter--02 .chapter__copy { left: 0; width: 100%; padding: 0 24px; font-size: .64rem; line-height: 1.7; text-align: center; }
    .chapter--02 .chapter__copy p { margin-bottom: 12px; }
    .chapter--02 .chapter__copy--lead,
    .chapter--02 .chapter__copy--middle,
    .chapter--02 .chapter__copy--end { top: 42vh; }
    .chapter--03, .chapter--04 { height: 620vh; }
    .chapter--03 .chapter__copy, .chapter--04 .chapter__copy, .chapter--05 .chapter__copy {
        left: 0;
        width: 100%;
        padding: 0 24px;
        font-size: .64rem;
        line-height: 1.75;
        text-align: center;
    }
    .chapter--03 .chapter__copy p, .chapter--04 .chapter__copy p, .chapter--05 .chapter__copy p { margin-bottom: 14px; }
    .chapter--03 .chapter__copy--lead, .chapter--04 .chapter__copy--lead, .chapter--05 .chapter__copy--lead,
    .chapter--03 .chapter__copy--middle, .chapter--04 .chapter__copy--middle, .chapter--05 .chapter__copy--middle,
    .chapter--03 .chapter__copy--end, .chapter--04 .chapter__copy--end, .chapter--05 .chapter__copy--end { top: 42vh; }
    .chapter--vision { height: 650vh; }
    .chapter__header--centered { padding: 0 24px; text-align: center; }
    .chapter--vision .chapter__header { top: 14vh; }
    .chapter--vision .chapter__copy--centered {
        top: 35vh;
        left: 0;
        width: 100%;
        padding: 0 28px;
        font-size: .64rem;
        line-height: 1.75;
    }
    .chapter--vision .photo { display: block; }
    .chapter--vision .photo--one { top: 67vh; right: auto; left: -7vw; width: 52vw; }
    .chapter--vision .photo--two { top: 75vh; right: -7vw; left: auto; width: 52vw; }
    .chapter--vision .photo--anchor { top: 86vh; left: 50%; width: 72vw; margin-left: -36vw; }
    .chapter--trial, .chapter--today { height: 360vh; }
    .chapter--trial .chapter__header, .chapter--today .chapter__header { top: 24vh; padding-left: 24px; }
    /* .chapter--trial .chapter__header h2, .chapter--today .chapter__header h2 { font-size: 30px; } */
    .chapter--trial .chapter__copy, .chapter--today .chapter__copy {
        top: 43vh;
        left: 0;
        width: 100%;
        padding: 0 28px;
        font-size: .7rem;
        line-height: 1.9;
    }
    .chapter--05 { height: 500vh; }
    .chapter--05 .timeline--chapter { --heading-gap-end: calc(10vh + 180px); }
}

@media (max-width: 782px) {
    body.admin-bar.kawakyu-heritage-page .opening__sticky,
    body.admin-bar.kawakyu-heritage-page .chapter__sticky { top: 46px; height: calc(100svh - 46px); }
}