@font-face{font-family:Manrope;src:url('assets/sans.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{--paper:#f5f3ea;--ink:#30322d;--muted:#777b71;--line:#34372d26;--pad:clamp(24px,4.2vw,80px);--ease:cubic-bezier(.22,.68,0,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-weight:400}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:7px}button{touch-action:manipulation}.experience{position:relative;height:100svh;min-height:460px;isolation:isolate;overflow:hidden}
.atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 71% 41%,#fffde9 0%,#f8f6ed00 46%),linear-gradient(120deg,#f3f2ed,#f8f7ee 58%,#eeeee5);z-index:-3;transition:filter 4s}.sculpture-shadow{position:absolute;left:58%;top:84%;width:23%;height:3%;border-radius:50%;background:#55594324;filter:blur(22px);transform:rotate(-5deg);z-index:-1;animation:breathe 12s ease-in-out infinite}#sculpture{position:absolute;inset:0;width:100%;height:100%;z-index:-1;cursor:grab;touch-action:pan-y}#sculpture:active{cursor:grabbing}.grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 190 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.55' d='M0 0h190v190H0z'/%3E%3C/svg%3E")}
.topbar{position:absolute;z-index:12;top:0;left:0;right:0;padding:36px var(--pad);display:flex;align-items:center;gap:38px;transition:color 2s}.brand{display:flex;align-items:center;gap:11px}.brand svg{width:34px;height:27px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}.brand>span{font-size:31px;font-weight:600;letter-spacing:-1.9px;line-height:1}.brand-dot{display:inline-block;font-size:10px;vertical-align:top;margin:1px 0 0 5px;letter-spacing:0}.brand-caption{font-size:9px;line-height:1.6;color:var(--muted)}.top-actions{display:flex;gap:34px;margin-left:auto;align-items:center}.text-button{display:inline-flex;align-items:center;gap:12px;font-size:11px;padding:8px 0}.text-button:hover{opacity:.6}.text-button>span:first-child{font-size:18px}.small-plus{font-size:20px;font-weight:300}.chapter-copy{position:absolute;left:var(--pad);top:31%;z-index:4;max-width:48%;transition:opacity 1.2s,transform 1.6s var(--ease);pointer-events:none}.chapter-copy button{pointer-events:auto}.eyebrow{font-size:9px;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin:0 0 25px}.tiny-sun{font-size:19px;color:#928564}.chapter-copy h1{font-size:clamp(58px,6.3vw,108px);font-weight:400;letter-spacing:-.072em;line-height:1.05;margin:0 0 27px}.description{font-size:11px;line-height:1.9;color:var(--muted);max-width:355px;margin:0 0 29px}.explore{display:flex;align-items:center;gap:23px;padding:0;font-size:11px}.arrow-circle{width:39px;height:39px;border:1px solid #73776860;border-radius:50%;display:grid;place-items:center;font-size:20px;transition:transform .6s,background .6s}.explore:hover .arrow-circle{transform:rotate(45deg);background:#fff8}.changing .chapter-copy{opacity:0;transform:translateY(14px)}.art-note{position:absolute;right:var(--pad);top:50%;display:flex;gap:10px;font-size:8px;line-height:1.8;color:var(--muted);writing-mode:vertical-rl;align-items:center;letter-spacing:.04em;transition:opacity 2s}.live-dot{width:4px;height:4px;background:#8a9374;border-radius:50%}.bottom-bar{position:absolute;z-index:12;bottom:36px;left:var(--pad);right:var(--pad);display:flex;align-items:center;justify-content:space-between;transition:color 2s}.company{font-size:8px;letter-spacing:.12em}.chapters{display:flex;gap:25px;position:absolute;left:50%;transform:translateX(-50%)}.chapter{position:relative;display:flex;gap:9px;font-size:10px;min-width:87px;padding:12px 0 17px;color:#8b8e83;text-align:left}.chapter>span{font-size:8px;align-self:center;opacity:.6}.chapter i{position:absolute;height:1px;bottom:0;left:0;right:0;background:#34372d25}.chapter i:after{content:'';position:absolute;inset:0;background:#5b6352;transform:scaleX(0);transform-origin:left;transition:transform 1.7s var(--ease)}.chapter.active{color:var(--ink)}.chapter.active i:after{transform:scaleX(1)}.sound{display:flex;align-items:center;gap:14px;font-size:9px;padding:12px 0 12px 14px}.sound-bars{height:19px;display:flex;align-items:center;gap:3px}.sound-bars i{width:1px;height:3px;background:currentColor;transition:height .8s}.sound-bars i:nth-child(2),.sound-bars i:nth-child(4){height:8px}.sound-bars i:nth-child(3){height:13px}.sound[aria-pressed=true] i{animation:equalizer 2s ease-in-out infinite alternate}.sound[aria-pressed=true] i:nth-child(2){animation-delay:-.7s}.sound[aria-pressed=true] i:nth-child(3){animation-delay:-1.3s}.sound[aria-pressed=true] i:nth-child(4){animation-delay:-.3s}.sound[aria-pressed=true] i:nth-child(5){animation-delay:-1.7s}.gesture-hint{position:absolute;bottom:118px;left:69%;transform:translateX(-50%);font-size:8px;color:#999d8c;letter-spacing:.07em;transition:opacity 2s}
.intro{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}.intro.hidden{display:none}.band{position:absolute;width:50.15%;height:calc(100% / 18 + 1px);background-image:url('assets/initial-state.png');background-size:100vw 100svh;will-change:transform;transform-origin:center;backface-visibility:hidden}.band:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#f8f5ed,#fffef6 56%,#f6eddb);opacity:var(--wash,0)}.band.left{left:0}.band.right{left:50%}.band.lit{box-shadow:0 2px 20px #9d774914}.sunlight{position:absolute;inset:-40%;background:radial-gradient(ellipse at 50% 77%,#fffef6 0%,#ffe9ad 8%,#ffdca366 19%,#c8854430 28%,transparent 48%);mix-blend-mode:screen;opacity:0;pointer-events:none;transform:scale(.5)}.intro-message{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;opacity:0}.intro-message>span{font-size:8px;letter-spacing:.24em}.intro-message p{font-size:clamp(34px,4vw,62px);line-height:1.2;font-weight:300;letter-spacing:-.045em;margin:24px 0}.skip{position:absolute;z-index:13;bottom:105px;left:50%;transform:translateX(-50%);color:inherit;font-size:9px;display:flex;align-items:center;gap:20px;transition:opacity 1s}.opening .topbar,.opening .bottom-bar,.opening .skip{color:#eee8e4}.opening .brand-caption,.opening .chapters{opacity:0}.opening .chapter-copy{opacity:0;transform:translateY(28px)}.opening .art-note,.opening .gesture-hint,.opening .sculpture-shadow{opacity:0}.opening #replay{visibility:hidden}.opening.light .topbar,.opening.light .bottom-bar,.opening.light .skip{color:var(--ink)}.opening.light .intro-message{color:#645d4f}.ready .skip{opacity:0;pointer-events:none}.ready .brand-caption{transition:opacity 2s}.ready .chapter-copy{transition-delay:.3s}.ready .gesture-hint{transition-delay:2s}
dialog{position:fixed;inset:0;margin:auto;border:1px solid #bfbdb44f;width:min(650px,calc(100% - 32px));padding:70px;background:#f8f7efed;color:var(--ink);backdrop-filter:blur(25px);box-shadow:0 30px 140px #393b2d12}dialog::backdrop{background:#f4f2e574;backdrop-filter:blur(16px)}dialog h2{font-size:clamp(42px,5vw,66px);line-height:1.1;letter-spacing:-.06em;font-weight:400;margin:30px 0}dialog>p:not(.eyebrow){font-size:13px;line-height:1.9;color:var(--muted)}.close{position:absolute;top:20px;right:25px;font-size:26px;font-weight:200}.dialog-footer{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px}.dialog-footer>span{font-size:7px;letter-spacing:.08em}.dialog-footer button{font-size:9px}noscript{position:fixed;z-index:30;top:40%;left:10%;right:10%;padding:30px;background:var(--paper)}
@keyframes equalizer{from{height:3px}to{height:18px}}@keyframes breathe{50%{transform:scale(.85) translateY(5px);opacity:.6}}
@media(min-width:1700px){.description{font-size:13px;max-width:430px}.eyebrow{font-size:10px}.explore{font-size:12px}}
@media(max-width:1000px){.brand-caption{display:none}.top-actions{gap:25px}.chapter-copy{top:34%;max-width:55%}.chapter-copy h1{font-size:clamp(55px,7.2vw,74px)}.description{max-width:290px;font-size:10px}.description br{display:none}.art-note{display:none}.company{font-size:7px}.chapters{gap:15px}.chapter{min-width:70px}.gesture-hint{left:72%;bottom:120px}}
@media(max-width:600px){:root{--pad:25px}.experience{min-height:540px}.topbar{padding-top:26px;gap:15px}.brand>span{font-size:28px}.brand svg{width:30px}.top-actions{gap:20px}.top-actions .text-button{font-size:9px}.top-actions #replay{font-size:0;gap:0}.top-actions #replay span{font-size:22px}.chapter-copy{top:auto;bottom:163px;max-width:90%;transition-duration:.9s}.chapter-copy h1{font-size:52px;line-height:1.03;margin-bottom:16px}.eyebrow{font-size:7px;margin-bottom:14px;gap:8px}.tiny-sun{font-size:15px}.description{font-size:10px;line-height:1.7;max-width:275px;margin-bottom:18px}.explore{font-size:10px;gap:18px}.arrow-circle{width:32px;height:32px;font-size:17px}.bottom-bar{bottom:24px;flex-wrap:wrap}.company{font-size:6px}.chapters{position:absolute;left:0;right:0;bottom:52px;transform:none;gap:24px}.chapter{flex:1;min-width:0;font-size:9px;padding-bottom:13px}.sound{font-size:8px}.sound-bars{gap:3px}.gesture-hint{display:none}.sculpture-shadow{top:46%;left:35%;width:42%;filter:blur(16px)}.skip{bottom:96px}.intro-message p{font-size:36px}dialog{padding:50px 30px}.dialog-footer{align-items:flex-start;flex-direction:column;gap:8px}}
@media(max-height:700px) and (min-width:601px){.topbar{padding-top:24px}.chapter-copy{top:29%}.chapter-copy h1{font-size:62px;margin-bottom:17px}.eyebrow{margin-bottom:15px}.description{margin-bottom:18px}.bottom-bar{bottom:25px}.gesture-hint{bottom:94px}}
@media(max-height:720px) and (max-width:600px){.chapter-copy{bottom:148px}.chapter-copy h1{font-size:43px}.chapter-copy .description{max-width:280px;font-size:9px}.eyebrow{margin-bottom:9px}.chapter-copy h1{margin-bottom:12px}.description{margin-bottom:13px}.topbar{padding-top:20px}}
@media(min-width:601px) and (max-width:900px) and (orientation:portrait){.chapter-copy{top:auto;bottom:170px;max-width:90%}.chapter-copy h1{font-size:66px}.description{font-size:12px;max-width:410px}.sculpture-shadow{top:45%;left:35%;width:40%}.gesture-hint{display:none}} .ready .skip{visibility:hidden}

/* Layered dawn: a camera approach, raking light, and individually lit edges. */
#bands{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 78%;will-change:transform}
.intro-depth{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 86%,#e2ac76 0%,#8c57472b 14%,#09070c 42%)}
.band:before{content:'';position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,#0000 40%,#0b07152b 100%);border-top:1px solid rgba(255,233,194,var(--edge-light,0));box-shadow:0 -7px 16px #10091430,0 6px 13px #10091435;opacity:calc(1 - var(--wash,0)*.83)}
.band:after{background:linear-gradient(170deg,#e6dfd0,#fffdf3 34%,#faf4e7 75%,#d8c5a7)}
.sunlight{background:radial-gradient(ellipse at 50% 78%,#fff 0%,#fff7da 4%,#ffcc8eab 12%,#e1995850 23%,transparent 46%)}
.intro-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 61%,transparent 18%,#08050d7d 79%,#050408d9 100%);pointer-events:none}
.intro-message{transform:translateY(-3%);text-shadow:0 3px 35px #0002}
.chapter-copy,.ready .chapter-copy{transition:opacity .6s ease,transform .85s var(--ease);transition-delay:0s;will-change:opacity,transform}
.changing .chapter-copy{opacity:0;transform:translateY(10px)}
.chapter i:after,.chapter.active i:after{transform:scaleX(var(--progress,0));transition:none;will-change:transform}
.autoplay{align-self:center;display:grid;place-items:center;font-size:11px;width:24px;height:30px;padding:0;color:#73786a;flex:none}
.autoplay:hover{color:#30322d}.chapter{transition:color .8s ease}
@media(max-width:600px){.chapters{gap:18px}.autoplay{width:17px;font-size:10px}.intro-message{transform:translateY(-2%)}}
