:root { --about-ink: #fffaf2; }
html { background: #0d1914; scroll-behavior: smooth; }
body.about-page { min-height: 200svh; overflow-x: hidden; color: var(--about-ink); background: #0d1914; }
.about-scene { position: fixed; z-index: 0; inset: 0; overflow: hidden; }
.about-scene picture { display: contents; }
.about-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.02); transition: transform 1.5s cubic-bezier(.2,.72,.2,1), filter 1.2s ease; }
.about-scene__season { z-index: 0; filter: saturate(.82) contrast(.96) brightness(.78); }
.about-scene__frame { z-index: 1; filter: saturate(.85) contrast(.98) brightness(.83); }
.about-scene div { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(5,12,9,.87) 0, rgba(5,12,9,.6) 35%, rgba(5,12,9,.08) 68%), linear-gradient(0deg, rgba(4,9,7,.42), transparent 56%); }
.about-page[data-about-step="1"] .about-scene__season { filter: saturate(.76) contrast(.96) brightness(.64); transform: scale(1.045) translate3d(-.5%,0,0); }
.about-page[data-about-step="1"] .about-scene__frame { filter: saturate(.78) contrast(.98) brightness(.68); transform: scale(1.045) translate3d(-.5%,0,0); }
.about-page .home-nav { position: fixed; z-index: 20; }
.about-page .home-nav::before { position: absolute; z-index: -1; inset: 0 0 -2rem; background: linear-gradient(180deg, rgba(6,13,10,.72), transparent); content: ""; pointer-events: none; }
.about-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; }
.about-page .hamburger span { width: 2.15rem; height: 1px; box-shadow: none; }
.about-page .sound-control { position: fixed; z-index: 20; }
.about-page .menu-drawer { z-index: 30; transform: translateX(100%); transition: transform .72s cubic-bezier(.72,0,.18,1); }
.about-page.menu-open .menu-drawer { transform: none; }
.about-story { position: relative; z-index: 2; }
.about-chapter { display: grid; align-items: center; min-height: 100svh; padding: 7.5rem clamp(2rem, 7.8vw, 8rem) 5rem; scroll-snap-align: start; }
.about-copy { width: min(39rem, 48vw); text-shadow: 0 .15rem 1.25rem rgba(0,0,0,.74); }
.js .about-copy { opacity: .3; transform: translateY(1.4rem); transition: opacity .75s ease, transform .9s cubic-bezier(.2,.72,.2,1); }
.js .about-chapter.is-current .about-copy { opacity: 1; transform: none; }
.about-copy h1, .about-copy h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.8rem, 6.6vw, 6.7rem); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.about-copy h2 { font-size: clamp(3.15rem, 5.2vw, 5.5rem); }
.about-copy > p { max-width: 34rem; margin: 1.25rem 0 0; font: 1rem/1.62 Arial, sans-serif; }
.about-copy > .about-lead { font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.about-next { display: inline-flex; align-items: center; gap: .8rem; margin-top: 2rem; border: 0; padding: 0; color: #fffaf2; background: transparent; font: 400 1.08rem/1.2 Georgia, serif; cursor: pointer; }
.about-next b { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid rgba(255,250,242,.7); border-radius: 50%; font-size: 1rem; animation: aboutNudge 1.8s ease-in-out infinite; }
.about-copy--design { width: min(54rem, 64vw); }
.about-copy--design h2 { max-width: 47rem; }
.design-statement { max-width: 35rem; margin: 2rem 0 0 clamp(0rem, 7vw, 7rem); }
.design-statement p { margin: 0; font: clamp(1.08rem, 1.45vw, 1.3rem)/1.55 Arial, sans-serif; }
.design-statement p + p { margin-top: 1rem; color: rgba(255,250,242,.78); font-size: clamp(.96rem, 1.1vw, 1.08rem); }
.about-cta { display: inline-flex; align-items: center; gap: .72rem; margin-top: 1.7rem; color: #fffaf2; font: 400 1.08rem/1.2 Georgia, serif; text-decoration: none; }
.about-cta > span:first-child { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid rgba(255,250,242,.7); border-radius: 50%; padding-bottom: .16rem; font: 1.45rem/1 Georgia, serif; transition: color .25s ease, background .25s ease, transform .25s ease; }
.about-cta:hover > span:first-child { color: #173b31; background: #fffaf2; transform: translateX(.18rem); }
@keyframes aboutNudge { 50% { transform: translateY(.18rem); } }
@media (max-width: 820px) {
    body.about-page { scroll-snap-type: y proximity; }
    .about-scene img { object-position: 62% center; }
    .about-scene div { background: linear-gradient(90deg, rgba(5,12,9,.86), rgba(5,12,9,.4)), linear-gradient(0deg, rgba(4,9,7,.78), rgba(4,9,7,.08)); }
    .about-chapter { align-items: center; padding: 6.8rem 1.5rem 5.2rem; }
    .about-copy { width: min(100%, 35rem); }
    .about-copy h1 { font-size: clamp(3.35rem, 15vw, 5.4rem); }
    .about-copy h2 { font-size: clamp(2.85rem, 12.5vw, 4.6rem); }
    .about-page .sound-control { top: auto; bottom: 1rem; }
    .about-copy--design { width: min(100%, 35rem); }
    .design-statement { margin-left: 0; }
}
@media (max-height: 720px) and (min-width: 821px) { .about-copy h1 { font-size: clamp(3.4rem, 6vw, 5.4rem); } .about-copy h2 { font-size: clamp(2.8rem, 4.7vw, 4.5rem); } .design-statement { margin-top: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .about-scene img, .js .about-copy { transition: none; } .about-next b { animation: none; } }

.about-page .home-nav::before { background: linear-gradient(180deg, color-mix(in srgb, var(--season-background) 82%, transparent), transparent); }
.about-scene div { background: linear-gradient(90deg, color-mix(in srgb, var(--season-background) 84%, transparent), color-mix(in srgb, var(--season-background) 44%, transparent) 38%, transparent 70%), linear-gradient(0deg, color-mix(in srgb, var(--season-background) 48%, transparent), transparent 58%); }
.about-next, .about-cta { color: var(--season-accent); }
.about-next b, .about-cta > span:first-child { border-color: var(--season-main); color: var(--season-main); }
.about-cta:hover > span:first-child { color: var(--season-background); background: var(--season-main); }
.design-statement p + p { color: color-mix(in srgb, var(--season-text) 78%, transparent); }