:root { --approach-paper: #eadbc5; --approach-ink: #211d18; }

html { background: #0e1f1a; }
body.approach-page { overflow: hidden; background: #0e1f1a; }
.approach-stage { position: relative; z-index: 2; display: flex; width: 100vw; height: 100svh; overflow-x: auto; overflow-y: hidden; background: #0e1f1a; box-shadow: 20px 0 55px rgba(0,0,0,.28); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; transition: transform .72s cubic-bezier(.72, 0, .18, 1); }
.approach-stage::-webkit-scrollbar { display: none; }
.approach-page.menu-open .approach-stage { transform: translateX(calc(0px - var(--menu-width))); }
.approach-page.menu-open .menu-drawer { z-index: 3; }
.approach-page .menu-drawer { visibility: hidden; }
.approach-page.menu-open .menu-drawer { visibility: visible; }
.atelier { position: fixed; z-index: 0; inset: 0; overflow: hidden; }
.atelier__season, .atelier__room { position: absolute; top: -2%; left: -4%; width: 108%; height: 104%; object-fit: cover; transform: translate3d(var(--atelier-pan, 0px),0,0); will-change: transform; }
.atelier__season { z-index: 0; object-position: center; filter: saturate(.82) contrast(.96) brightness(.83); }
.atelier__room { z-index: 1; object-position: center; }
.atelier__shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(5, 12, 10, .64) 0, rgba(5, 12, 10, .2) 43%, transparent 68%), linear-gradient(0deg, rgba(5, 10, 8, .22), transparent 42%); pointer-events: none; }
.approach-page .home-nav { position: fixed; z-index: 20; }
.approach-page .home-nav::before { position: absolute; z-index: -1; inset: 0 0 -2.5rem; background: linear-gradient(180deg, rgba(7,17,13,.88), rgba(7,17,13,.52) 45%, transparent); content: ""; pointer-events: none; }
.approach-page .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .55rem; width: 2.75rem; height: 2.75rem; border: 0; padding: 0; color: #fffaf2; background: transparent; cursor: pointer; }
.approach-page .hamburger span { width: 2.15rem; height: 1px; box-shadow: none; }
.approach-page .sound-control { position: fixed; z-index: 20; }
.approach-panel { position: relative; z-index: 4; display: grid; flex: 0 0 100vw; align-items: center; width: 100vw; height: 100svh; padding: 8rem clamp(2rem, 8vw, 8rem) 6rem; scroll-snap-align: start; scroll-snap-stop: always; }
.approach-copy { position: relative; z-index: 2; width: min(35rem, 43vw); color: #fffaf2; opacity: 1; text-shadow: 0 .15rem 1.2rem rgba(0, 0, 0, .82); transform: none; }
.approach-diagram { display: block; width: min(21rem, 86%); margin: 0 0 1.35rem; opacity: .08; filter: drop-shadow(0 .2rem 1rem rgba(0,0,0,.24)); pointer-events: none; transform: translate3d(0,1rem,0) scale(.98); transform-origin: left bottom; transition: opacity .65s ease .12s, transform .85s cubic-bezier(.2,.72,.2,1) .08s; }
.approach-panel.is-active .approach-diagram { opacity: .72; transform: translate3d(0,0,0) scale(1); }
.approach-copy h1, .approach-copy h2 { margin: 0 0 1.5rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 5.2vw, 6rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.approach-copy h2 { font-size: clamp(2.55rem, 4.4vw, 5rem); }
.approach-copy > p { max-width: 31rem; margin: 0; font: 1.05rem/1.72 Arial, sans-serif; }
.approach-cta { display: inline-flex; align-items: center; gap: .7rem; margin-top: 2rem; color: #fffaf2; font: 700 .76rem/1 Arial, sans-serif; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.approach-cta span:first-child { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(255,250,242,.7); border-radius: 50%; padding-bottom: .15rem; font: 1.4rem/1 Georgia, serif; transition: color .25s ease, background .25s ease, transform .25s ease; }
.approach-cta:hover span:first-child { color: #173b31; background: #fffaf2; transform: translateX(.2rem); }
.approach-guide { position: fixed; z-index: 18; right: clamp(4.4rem, 7vw, 6.5rem); bottom: 1.35rem; display: flex; align-items: center; gap: .85rem; transition: opacity .25s ease; }
.approach-guide button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255,250,242,.58); border-radius: 50%; padding: 0; color: #fffaf2; background: rgba(7,25,19,.42); backdrop-filter: blur(5px); cursor: pointer; }
.approach-guide button[hidden] { display: none; }
.approach-guide button span { font: 300 1.15rem/1 Arial, sans-serif; transform: translateX(-.08rem); animation: approachNudge 1.8s ease-in-out infinite; }
.approach-guide__previous span { transform: translateX(.08rem); animation-name: approachNudgeBack; }
.approach-guide__progress { display: flex; gap: .36rem; }
.approach-guide__progress i { display: block; width: 1.25rem; height: 1px; background: rgba(255,250,242,.32); transition: background .25s ease; }
.approach-guide__progress i.is-current { background: #fffaf2; }
@keyframes approachNudge { 50% { transform: translateX(.16rem); } }
@keyframes approachNudgeBack { 50% { transform: translateX(-.16rem); } }

@media (max-width: 760px) {
    .approach-stage { scroll-snap-type: x mandatory; }
    .atelier__room { content: url("/assets/img/approach-atelier-mobile-frame.avif"); object-position: center; }
    .atelier__season { object-position: 68% center; }
    .atelier__shade { background: linear-gradient(90deg, rgba(5,12,10,.79), rgba(5,12,10,.46) 58%, rgba(5,12,10,.1)); }
    .approach-panel { align-items: center; padding: 7rem 1.5rem 5.5rem; }
    .approach-copy { width: min(100%, 31rem); }
    .approach-diagram { width: min(73vw, 19rem); margin: 0 0 1.25rem; opacity: .08; transform: translate3d(0,.7rem,0) scale(.98); transform-origin: left center; }
    .approach-panel.is-active .approach-diagram { opacity: .68; transform: translate3d(0,0,0) scale(1); }
    .approach-copy h1, .approach-copy h2 { font-size: clamp(2.55rem, 12vw, 4.4rem); }
    .approach-copy > p { font-size: .98rem; line-height: 1.62; }
    .approach-page .sound-control { top: auto; bottom: 1.1rem; }
    .approach-page .home-nav::before { bottom: -1.5rem; }
    .approach-guide { right: 1.15rem; bottom: 1.1rem; gap: .65rem; }
    .approach-guide__progress i { width: .75rem; }
}

.approach-page .home-nav::before { background: linear-gradient(180deg, color-mix(in srgb, var(--season-background) 88%, transparent), color-mix(in srgb, var(--season-background) 48%, transparent) 45%, transparent); }
.atelier__shade { background: linear-gradient(90deg, color-mix(in srgb, var(--season-background) 76%, transparent), color-mix(in srgb, var(--season-background) 24%, transparent) 48%, transparent 72%); }
.approach-cta { color: var(--season-accent); }
.approach-cta span:first-child { border-color: var(--season-main); color: var(--season-main); }
.approach-cta:hover span:first-child { color: var(--season-background); background: var(--season-main); }
.approach-guide button { border-color: color-mix(in srgb, var(--season-main) 72%, transparent); color: var(--season-text); background: color-mix(in srgb, var(--season-background) 68%, transparent); }
.approach-guide__progress i { background: color-mix(in srgb, var(--season-main) 34%, transparent); }
.approach-guide__progress i.is-current { background: var(--season-accent); }