@font-face{font-family:Oxanium;src:url('fonts/Oxanium.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#12120f;--ink:#eee9df;--muted:#aaa69b;--orange:#d7a374;--line:#ffffff21}
*{box-sizing:border-box}
html{min-width:280px;background:var(--bg)}
body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.page{max-width:1680px;margin:0 auto;padding:0 clamp(24px,5.4vw,92px)}
.masthead{height:116px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}
.wordmark{font:500 20px/1 Oxanium,Arial,sans-serif;letter-spacing:-.65px;display:flex;align-items:center;gap:12px}
.brand-symbol{width:25px;height:29px;fill:none;stroke:currentColor;stroke-width:1.3}
.coming{display:flex;align-items:center;gap:10px;font-size:11px;text-transform:uppercase;letter-spacing:1.9px;white-space:nowrap}
.status-dot{width:5px;height:5px;background:#e3b885;border-radius:50%;box-shadow:0 0 12px #e8a66655}
.intro{min-height:min(780px,calc(100svh - 216px));display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:1vw;padding:38px 0 44px}
.editorial{position:relative;z-index:2;padding:38px 0 48px}
.eyebrow{font:400 10px/1.7 Oxanium,Arial,sans-serif;letter-spacing:2.8px;text-transform:uppercase;margin:0 0 35px;color:var(--muted)}
h1{font-size:clamp(66px,8.3vw,134px);font-weight:400;line-height:.99;letter-spacing:-.074em;margin:0 0 48px;white-space:nowrap}
h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.08em;color:#e1b68e}
.invitation{display:flex;align-items:flex-start;gap:20px}
.short-line{height:1px;width:30px;background:var(--orange);margin-top:10px;flex-shrink:0}
.invitation p{margin:0;font-size:14px;line-height:1.85;color:var(--muted);letter-spacing:.1px}
.scene{height:580px;max-height:68vw;position:relative;isolation:isolate}
.halo{position:absolute;width:130%;height:110%;left:-15%;top:-5%;background:radial-gradient(ellipse at 59% 54%,#7f4d2638,transparent 60%);z-index:-1}
.architecture{position:absolute;inset:20px 0 40px;overflow:hidden;perspective:900px}
.wall-lines{position:absolute;inset:0;background:linear-gradient(90deg,transparent 14.9%,#b4956a10 15%,transparent 15.2%,transparent 85%,#b4956a0d 85.1%,transparent 85.3%),linear-gradient(0deg,transparent 14.9%,#e6c49417 15%,transparent 15.2%)}
.doorway{position:absolute;width:44%;height:74%;left:30%;top:11%;background:#ffe0a1;border:1px solid #baa17b;box-shadow:0 0 4px #ffe8b750,0 0 35px #b9772a23,inset 0 0 35px #a45f20;perspective:900px;z-index:3}
.inner-glow{position:absolute;inset:0;background:linear-gradient(90deg,#81552e,#f8c989 15%,#fbe4b4 77%,#d7964c)}
.door{position:absolute;inset:-1px 8% -1px -1px;background:linear-gradient(110deg,#37362c 0%,#272820 60%,#34342a);transform-origin:left center;transform:rotateY(-31deg);border:1px solid #69634c;border-right:4px solid #b79b69;box-shadow:8px 1px 11px #97663080;transition:transform 1.2s ease}
.door:after{content:"";position:absolute;inset:15px;border:1px solid #b1a27c12}
.door-number{position:absolute;top:14%;left:44%;color:#b5aa89;font:400 13px/1 Oxanium,Arial,sans-serif;letter-spacing:2px}
.door-handle{position:absolute;right:8%;top:54%;width:16%;height:4px;background:linear-gradient(#e5ce99,#827655);box-shadow:0 3px 5px #0009;z-index:2}
.door-handle:after{content:"";position:absolute;right:0;top:-6px;height:18px;width:5px;background:linear-gradient(90deg,#9e8e6b,#d5be8d)}
.threshold{position:absolute;inset:auto -3px -5px;height:5px;background:#ead2a0;box-shadow:0 2px 7px #f9d48e66}
.floor-light{position:absolute;top:85%;left:9%;width:84%;height:25%;background:linear-gradient(180deg,#dfb26c79,#dfb26c0c);clip-path:polygon(25% 0,77% 0,100% 100%,0% 100%);filter:blur(1px);z-index:2}
.floor-lines{position:absolute;bottom:0;left:-15%;right:-15%;height:15%;background:repeating-linear-gradient(90deg,transparent 0,transparent 16.4%,#dcba7a0c 16.5%,transparent 16.7%);transform:perspective(110px) rotateX(23deg);transform-origin:top}
.scene-caption{position:absolute;bottom:4px;left:15%;right:14%;display:flex;justify-content:space-between;gap:14px;font:400 8px/1.5 Oxanium,Arial,sans-serif;color:#aaa18e;letter-spacing:1.8px}
.footer{min-height:100px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;color:var(--muted);font-size:11px;letter-spacing:.4px}
.footer>span:first-child{font:400 12px/1.5 Oxanium,Arial,sans-serif;color:var(--ink)}
.footer p{margin:0;text-align:center}
.footer-mark{font:400 9px/1.5 Oxanium,Arial,sans-serif;letter-spacing:1.6px}
@media(min-width:1600px){.intro{min-height:780px}.scene{height:650px}}
@media(max-width:1000px) and (min-width:701px){.page{padding:0 35px}.intro{min-height:670px;gap:0}.scene{height:510px}.eyebrow{font-size:9px;letter-spacing:1.7px}h1{font-size:9.2vw}.doorway{left:24%;width:53%}.scene-caption{left:4%;right:0;font-size:7px;letter-spacing:1.2px}}
@media(max-width:700px){.masthead{height:88px}.wordmark{font-size:17px;gap:8px}.brand-symbol{width:22px;height:26px}.coming{font-size:9px;letter-spacing:1.3px;gap:8px}.intro{display:flex;flex-direction:column;gap:0;align-items:stretch;min-height:0;padding:42px 0 20px}.editorial{padding:0;z-index:2}.eyebrow{font-size:9px;letter-spacing:1.9px;margin-bottom:23px}h1{font-size:clamp(64px,15.9vw,108px);margin-bottom:28px;line-height:1.02}.invitation{gap:14px}.invitation p{font-size:13px;line-height:1.7}.short-line{width:24px}.scene{height:420px;max-height:none;margin:14px -10px 0}.architecture{inset:0 0 35px}.doorway{left:32%;width:39%;height:74%;top:11%}.scene-caption{left:17%;right:15%;bottom:8px;font-size:7px;letter-spacing:1.4px}.footer{min-height:100px;flex-wrap:wrap;justify-content:space-between;gap:13px;padding:24px 0}.footer p{flex-basis:100%;order:3;text-align:left;font-size:10px}.footer-mark{font-size:8px}.halo{width:110%;left:-5%}}
@media(max-width:360px){.page{padding:0 20px}.wordmark{font-size:15px}.coming{font-size:8px}.scene{height:350px}.eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:17.6vw}.scene-caption{font-size:6px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.status-dot{background:CanvasText}.doorway{border:1px solid CanvasText}.scene-caption{color:CanvasText}}
/* Keep status and essential supporting text readable at every width. */
.coming{font-size:12px;letter-spacing:1px}
.eyebrow{font-size:11px;letter-spacing:1.8px}
.invitation p{font-size:15px}
.footer,.footer p{font-size:12px}
@media(max-width:700px){.coming{font-size:11px}.eyebrow{font-size:11px;letter-spacing:1.1px}.footer{flex-wrap:nowrap}.footer p{flex-basis:auto;order:initial;text-align:right}}
@media(max-width:360px){.coming{font-size:10px}.eyebrow{font-size:10px}.footer{gap:12px}.footer p{font-size:11px}}
/* User positioning and headphone mark. */
#teaser-title{font-size:clamp(38px,4.8vw,76px);line-height:1.12;letter-spacing:-.055em;white-space:normal}
.brand-symbol{width:32px;height:34px;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.brand-symbol rect{fill:currentColor;stroke:none}
@media(max-width:700px){#teaser-title{font-size:clamp(36px,8.9vw,60px);line-height:1.13;margin-bottom:26px}.brand-symbol{width:30px;height:32px}}
/* Door branding and current teaser copy. */
.coming{text-transform:none;letter-spacing:.6px}
#teaser-title{font-size:clamp(48px,6.1vw,94px);line-height:1.02;margin-bottom:34px}
.invitation p{font-size:18px;color:var(--ink)}
.door-logo{position:absolute;top:17%;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:9px;color:#d5c49d;white-space:nowrap;z-index:1;text-shadow:0 1px 1px #0008}
.door-logo .brand-symbol{width:48px;height:51px;filter:drop-shadow(0 1px 1px #0008)}
.door-logo>span{font:500 10px/1.2 Oxanium,Arial,sans-serif;letter-spacing:-.3px}
.footer-features{color:var(--ink);font-size:12px;letter-spacing:.4px}
@media(max-width:1000px) and (min-width:701px){.door-logo .brand-symbol{width:39px;height:42px}#teaser-title{font-size:6.8vw}}
@media(max-width:700px){#teaser-title{font-size:clamp(45px,11.5vw,76px);margin-bottom:26px}.invitation p{font-size:17px}.door-logo{gap:6px}.door-logo .brand-symbol{width:37px;height:39px}.door-logo>span{font-size:9px}.footer{display:grid;grid-template-columns:1fr auto;gap:18px}.footer p{grid-row:2;grid-column:1/-1;text-align:left;order:initial;font-size:12px}.footer-features{grid-row:1;grid-column:2;justify-self:end}}
/* Teaser 05: one centered footer sentence at every width. */
.footer{display:flex;justify-content:center;text-align:center;gap:0}
.footer p{margin:0;flex-basis:auto;text-align:center;font-size:14px;line-height:1.6;max-width:100%;overflow-wrap:break-word}
/* Teaser 06: the second headline line is deliberately struck through. */
#teaser-title s{text-decoration-line:line-through;text-decoration-thickness:.035em;text-decoration-color:var(--ink);text-decoration-skip-ink:none}
/* Notes stay visible on their own, with no cloud or smoke decoration. */
.music-notes{position:absolute;left:66%;top:24%;width:33%;height:39%;z-index:4;pointer-events:none}
.music-note{position:absolute;font-family:Georgia,'Times New Roman',serif;line-height:1;color:#eadbb4;opacity:.58}
.note-near{left:21%;top:74%;font-size:21px;opacity:.32;transform:rotate(-21deg)}
.note-middle{left:47%;top:39%;font-size:29px;transform:rotate(-4deg)}
.note-far{left:60%;top:5%;font-size:25px;opacity:.3;transform:rotate(-20deg)}
.note-loose{left:13%;top:18%;font-size:22px;opacity:.4;transform:rotate(18deg)}
@media(max-width:1000px) and (min-width:701px){.music-notes{left:67%;width:32%}}
@media(max-width:700px){.music-notes{left:64%;width:34%;top:23%;height:40%}}
/* Teaser 12: an open entrance suggested by light; no physical door. */
.status-dot{background:#f4d047;box-shadow:0 0 10px #f4d04730}
.architecture{perspective:none}
.entryway{position:absolute;left:30%;top:13%;width:44%;height:65%;border:1px solid #e9bd8366;border-bottom:0;background:linear-gradient(180deg,#dfa86d0a 0%,#dfa86d05 48%,#e3b77c20 100%);box-shadow:-5px 0 17px -12px #eac18c,5px 0 17px -12px #eac18c;z-index:2}
.entryway:after{content:"";position:absolute;left:-1px;right:-1px;bottom:0;height:2px;background:#e9c69088;box-shadow:0 0 18px #e9c69044}
.entry-logo{position:absolute;top:20%;left:0;right:0;display:flex;align-items:center;flex-direction:column;gap:10px;color:#d5c49d;white-space:nowrap}
.entry-logo .brand-symbol{width:48px;height:51px}
.entry-logo>span{font:500 12px/1.2 Oxanium,Arial,sans-serif;letter-spacing:-.3px}
.light-pool{position:absolute;left:10%;top:78%;width:84%;height:22%;z-index:2;display:flex;align-items:center;justify-content:center;isolation:isolate}
.light-pool:before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);background:linear-gradient(180deg,#e8ba7940,#e8ba7922 55%,#e8ba7900)}
.light-caption{position:relative;top:4%;font:400 clamp(12px,1.1vw,16px)/1.5 Oxanium,Arial,sans-serif;letter-spacing:.02em;color:#eee1c5;white-space:nowrap;writing-mode:horizontal-tb;transform:none}
.music-note{transform:none}
@media(max-width:1000px) and (min-width:701px){.entryway{left:25%;width:50%}.entry-logo .brand-symbol{width:40px;height:43px}}
@media(max-width:700px){.entryway{left:30%;width:42%;top:12%;height:65%}.entry-logo{top:18%;gap:8px}.entry-logo .brand-symbol{width:38px;height:40px}.entry-logo>span{font-size:11px}.light-pool{left:6%;width:90%;top:77%;height:23%}.light-caption{font-size:12px;letter-spacing:0}}
/* Teaser 13: receding tunnel contours lead to a distant warm light. */
.tunnel-illustration{position:absolute;inset:0}
.tunnel-drawing{display:block;width:100%;height:100%}
.tunnel-logo{position:absolute;left:50%;top:47.2%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#6c4e2e}
.tunnel-logo .brand-symbol{width:31px;height:33px;stroke-width:1.7}
.light-pool{left:5%;top:78%;width:90%;height:20%}
.light-pool:before{display:none}
.light-caption{top:0;font-size:clamp(12px,1.15vw,16px)}
.music-notes{left:55%;top:30%;width:31%;height:35%}
@media(max-width:700px){.tunnel-logo .brand-symbol{width:23px;height:25px}.music-notes{left:55%;top:27%;width:33%;height:38%}.light-caption{font-size:12px}.light-pool{top:79%;height:19%}}