@layer experience {
:root{color-scheme:dark;--ink:#102b35;--deep:#0b2029;--gold:#d8be87;--paper:#f4f0e7;--muted:#aebfc3;--line:#ffffff25;font-family:Arial,Helvetica,sans-serif;color:var(--paper);background:var(--deep)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{height:100dvh}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
button:disabled{opacity:.5;cursor:wait}
[hidden]{display:none!important}
h1,h2,p{margin:0}
h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400}
h1{font-size:clamp(52px,5.8vw,92px);line-height:1.03;letter-spacing:-3px}
h2{font-size:32px;line-height:1.12;letter-spacing:-.7px}
.eyebrow{font-size:12px;letter-spacing:2.1px;color:var(--gold);font-weight:600;line-height:1.5}
.brand{position:absolute;top:36px;left:4vw;right:4vw;z-index:2;display:flex;align-items:center;gap:15px;font-size:22px;letter-spacing:5px}
.brand small,.viewer-brand small{display:block;font-size:10px;letter-spacing:2.2px;margin-top:7px}
.brand-mark{width:43px;height:43px;display:grid;place-items:center;border:1px solid var(--gold);font-family:Georgia,serif;font-size:34px;letter-spacing:0;color:var(--gold)}
.edition{margin-left:auto;font-size:11px;letter-spacing:2px;color:var(--muted)}
#landing{position:relative;isolation:isolate;height:100dvh;background:radial-gradient(ellipse at 70% 43%,#2f505a,transparent 70%),var(--deep)}
.landing-art{position:absolute;inset:12% 0 6% 31%;overflow:hidden}
.landing-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten}
.image-caption{position:absolute;bottom:4%;right:7%;font-size:10px;letter-spacing:3px;color:var(--muted)}
.intro{position:absolute;z-index:1;left:7vw;top:23%;width:min(430px,36vw)}
.intro h1{margin:20px 0}
.intro-copy{font-size:16px;line-height:1.8;color:#c8d2d1}
.steps{display:flex;gap:20px;font-size:11px;margin:25px 0;color:var(--muted)}
.primary{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--gold);color:var(--deep);padding:17px 20px;font-size:14px;min-height:50px;width:100%}
.primary:hover{background:#ecd4a0}
.primary span{font-size:22px}
.text-button{background:none;padding:14px 0;font-size:14px;color:var(--paper)}
.text-button span{margin-left:30px}
.desktop-handoff{display:flex;align-items:center;gap:13px;margin-top:12px}
.desktop-handoff img{width:70px;height:70px;background:white;padding:4px}
.desktop-handoff p{font-size:12px;line-height:1.7;color:var(--muted)}
footer{position:absolute;bottom:24px;left:4vw;right:4vw;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.3px;color:var(--muted)}
#experience-ui{position:fixed;inset:0;pointer-events:none;z-index:10;background:linear-gradient(#0b202975,transparent 25%,transparent 68%,#0b202970)}
#experience-ui button,#experience-ui .panel{pointer-events:auto}
.viewer-header{position:absolute;top:max(22px,env(safe-area-inset-top));left:30px;right:30px;display:flex;gap:18px;align-items:center}
.viewer-brand{font-family:Georgia,serif;font-size:26px;letter-spacing:5px}
.viewer-brand small{font-family:Arial,sans-serif;font-size:9px;letter-spacing:2.2px}
.icon-button{position:relative;width:44px;height:44px;display:grid;place-items:center;background:#12303bdd;border:1px solid var(--line);border-radius:50%;font-size:24px}
.sound{margin-left:auto}
.sound-off{position:absolute;font-size:32px;font-weight:400}
.sound[aria-pressed=true] .sound-off{display:none}
.view-tools{position:absolute;top:112px;right:30px;display:flex;flex-direction:row;gap:8px}
.view-tools>button{background:#12303be8;border:1px solid var(--line);padding:13px 17px;text-align:left;font-size:14px}
.view-tools>button span{margin-right:6px;color:var(--gold)}
.view-tools>button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.time-switch{display:flex;background:#12303bf0;border:1px solid var(--line);padding:4px}
.time-switch button{background:none;font-size:14px;padding:10px 15px}
.time-switch button[aria-pressed=true]{background:var(--gold);color:var(--deep)}
.panel{position:absolute;left:32px;bottom:142px;width:355px;background:#102b35f5;border:1px solid #78909550;padding:27px;box-shadow:0 18px 60px #0002;backdrop-filter:blur(18px)}
.panel h2{margin:14px 0}
.panel>p:not(.eyebrow){font-size:15px;line-height:1.75;color:#c1d0d0}
.panel .detail-label{color:var(--gold)!important;font-size:14px!important;margin-bottom:14px}
.panel-close{position:absolute;top:8px;right:8px;width:38px;height:38px;background:none;font-size:27px;color:var(--muted)}
.detail-footer{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;display:grid;gap:9px;font-size:14px}
.detail-footer span{color:var(--muted);font-size:12px;line-height:1.6}
#anchors{position:absolute;inset:0}
.anchor{position:absolute;transform:translate(-50%,-50%);border:1px solid #fff8;border-radius:50%;height:34px;width:34px;color:var(--ink);background:#f4f0e7ed;font-size:12px;box-shadow:0 3px 12px #0003;transition:background .3s}
.anchor[aria-pressed=true]{background:var(--gold);box-shadow:0 0 0 7px #d8be8720}
.anchor::after{content:'';position:absolute;left:50%;top:100%;height:12px;width:1px;background:#fff9}
#exploration-bar{position:absolute;bottom:max(36px,calc(env(safe-area-inset-bottom) + 20px));left:32px;right:32px;display:flex;gap:15px;align-items:center;flex-wrap:wrap}
#gesture-hint{width:100%;text-align:center;font-size:12px;color:#d3dfdf;letter-spacing:.4px;margin-bottom:0}
#district-nav{display:flex;gap:7px;flex:1}
#district-nav button{background:#12303bea;border:1px solid var(--line);font-size:13px;padding:13px 17px;white-space:nowrap}
#district-nav button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.tour-button{background:var(--paper);color:var(--deep);padding:13px 18px;display:flex;gap:12px;align-items:center;font-size:14px}
.tour-button span{font-size:22px}
.tour-button small{font-size:10px;letter-spacing:1px;opacity:.55}
.viewer-footnote{position:absolute;right:32px;bottom:12px;font-size:9px;letter-spacing:2px;color:var(--muted)}
.story-panel{bottom:65px;width:400px}
.story-actions{display:flex;align-items:center;gap:18px;margin-top:22px}
.story-actions button{font-size:13px;background:none;padding:10px 0;color:var(--gold)}
.story-actions button:last-child{margin-left:auto;font-size:23px}
.progress{height:2px;background:var(--line);position:absolute;bottom:0;left:0;right:0}
.progress i{display:block;height:100%;background:var(--gold);width:0}
#completion{bottom:65px}
#completion .primary{margin-top:22px}
#placement-guide{position:absolute;inset:35% 0 auto;text-align:center}
.placement-outline{width:130px;height:70px;border:1px solid var(--gold);border-radius:50%;margin:0 auto 30px;box-shadow:0 0 0 13px #d8be8712}
#placement-guide p{font-family:Georgia,serif;font-size:26px}
#placement-guide span{display:block;margin-top:13px;font-size:14px;color:#c5d7d7}
#system-state{position:fixed;inset:0;display:grid;place-items:center;background:#0b2029f5;z-index:100;text-align:center;padding:28px}
#system-state>div{max-width:350px;width:100%}
#system-state h2{margin:15px 0}
#system-state p:not(.eyebrow){color:var(--muted);font-size:16px;line-height:1.65;margin-bottom:25px}
.loading-emblem{display:block;font-family:Georgia,serif;font-size:66px;color:var(--gold);margin-bottom:24px}
body[data-view=explore]{background:radial-gradient(ellipse at 50% 35%,#335460,#102b35 70%)}
body[data-story=playing] #anchors{display:none}

@media(min-width:1500px){.intro{top:25%;left:9vw}
.landing-art{inset:8% 0 3% 29%}
}

@media(max-width:700px){.brand{left:24px;right:24px;top:max(22px,env(safe-area-inset-top));font-size:20px}
.brand-mark{width:34px;height:34px;font-size:27px}
.brand small{font-size:8px}
.edition{display:none}
.landing-art{inset:12% -12% 36%;opacity:.95}
.image-caption{display:none}
.intro{left:26px;right:26px;top:auto;bottom:calc(46px + env(safe-area-inset-bottom));width:auto}
.intro .eyebrow{font-size:10px;letter-spacing:1.6px}
.intro h1{font-size:52px;line-height:1;letter-spacing:-2px;margin:12px 0}
.intro h1 br{display:none}
.intro-copy{font-size:14px;line-height:1.6}
.steps{font-size:10px;gap:18px;margin:17px 0}
.primary{min-height:48px;padding:13px 16px}
.intro .text-button{display:block;margin:auto;padding-bottom:0;font-size:13px}
.desktop-handoff{display:none}
footer{left:26px;right:26px;bottom:calc(16px + env(safe-area-inset-bottom));font-size:8px;letter-spacing:.4px}
.viewer-header{left:18px;right:18px;top:max(17px,env(safe-area-inset-top));gap:12px}
.viewer-brand{font-size:21px;letter-spacing:4px}
.viewer-brand small{font-size:8px}
.icon-button{width:40px;height:40px;font-size:22px}
.view-tools{top:88px;right:18px;flex-direction:row;gap:6px;left:18px;justify-content:center}
.view-tools>button{font-size:12px;padding:10px 9px}
.time-switch button{font-size:12px;padding:7px 10px}
.time-switch{padding:3px}
.panel{left:16px;right:16px;width:auto;bottom:177px;padding:21px;max-height:48dvh;overflow:auto}
.panel h2{font-size:27px;margin:9px 0}
.panel>p:not(.eyebrow){font-size:14px;line-height:1.55}
.detail-footer{margin-top:13px;padding-top:12px;gap:5px}
.detail-footer span{font-size:11px}
.panel .eyebrow{font-size:10px}
.panel .detail-label{margin-bottom:10px}
.anchor{height:30px;width:30px;font-size:11px}
#exploration-bar{left:16px;right:16px;bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px));gap:11px}
#district-nav{display:grid;width:100%;grid-template-columns:repeat(4,1fr);gap:5px}
#district-nav button{padding:11px 3px;font-size:11px}
.tour-button{width:100%;justify-content:center;padding:10px 14px}
.tour-button small{margin-left:auto}
.tour-button span{margin-right:auto}
#gesture-hint{font-size:11px;margin:0}
.viewer-footnote{right:18px;bottom:9px;font-size:8px}
.story-panel,#completion{bottom:max(34px,calc(env(safe-area-inset-bottom) + 18px));max-height:48dvh}
.story-panel h2{font-size:29px}
.story-actions{margin-top:12px}
.story-panel .eyebrow{font-size:10px}
#placement-guide{inset:37% 18px auto}
#placement-guide p{font-size:24px}
#placement-guide span{font-size:13px}
}

@media(max-height:680px) and (max-width:700px){.brand{top:16px}
.landing-art{inset:10% -10% 42%}
.intro{bottom:42px}
.intro h1{font-size:40px;margin:9px 0}
.intro .eyebrow{font-size:9px}
.intro-copy{font-size:12px}
.steps{margin:12px 0;font-size:9px}
.primary{min-height:44px;font-size:13px}
.intro .text-button{font-size:12px;padding-top:11px}
.panel{bottom:158px;padding:16px;max-height:40dvh}
.panel>p:not(.eyebrow){font-size:13px}
.panel h2{font-size:25px}
.detail-footer{margin-top:10px;padding-top:10px}
.detail-footer span{font-size:10px}
.view-tools{top:76px}
#exploration-bar{gap:8px;bottom:25px}
.story-panel,#completion{bottom:30px;max-height:48dvh}
.story-panel h2{font-size:25px}
.story-actions{margin-top:6px}
.story-actions button{font-size:12px}
.viewer-brand{font-size:18px}
.viewer-brand small{font-size:7px}
}

@media(max-height:500px) and (min-width:701px){.intro{top:22%;width:340px}
.intro h1{font-size:43px;margin:10px 0}
.intro-copy{font-size:13px}
.steps{margin:12px 0}
.desktop-handoff{display:none}
.brand{top:18px}
.panel{max-height:62dvh;overflow:auto;bottom:100px}
.view-tools{top:90px}
.story-panel{bottom:25px}
#exploration-bar{bottom:25px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}


@media(max-width:700px){.view-tools>button{white-space:nowrap}
.view-tools>button span{display:none}
#detail{bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px));max-height:43dvh}
.landing-art img{mix-blend-mode:normal}
.landing-art{inset:12% -6% 48%}
.intro h1{max-width:310px}
.intro{bottom:calc(46px + env(safe-area-inset-bottom))}
}

@media(max-height:680px) and (max-width:700px){.landing-art{inset:12% 0 52%}
.intro h1{font-size:38px}
.intro .eyebrow{font-size:8px}
#detail{max-height:43dvh}
.intro-copy{font-size:12px}
.intro{bottom:42px}
}


@media(max-height:500px) and (min-width:701px){.intro{top:82px;width:310px}
.intro h1{font-size:38px;line-height:1;margin:8px 0}
.intro .eyebrow{font-size:10px}
.intro-copy{font-size:12px;line-height:1.5}
.steps{margin:11px 0}
.intro .primary{min-height:43px;padding:10px 14px;font-size:12px}
.intro .text-button{padding:10px 0;font-size:12px}
footer{bottom:10px;font-size:8px}
.image-caption{display:none}
.brand small{font-size:8px}
.brand{font-size:20px}
.brand-mark{height:34px;width:34px;font-size:27px}
.edition{font-size:9px}
#exploration-bar{gap:8px}
#district-nav button{padding:11px 12px;font-size:12px}
.tour-button{padding:9px 12px;font-size:12px}
.tour-button small{display:none}
.panel{max-height:58dvh;bottom:90px}
.story-panel,#completion{bottom:25px;max-height:68dvh}
}


@media(max-width:700px){.intro h1 br{display:initial}
}


@media(max-height:500px) and (min-width:701px){.story-panel{padding:18px;width:380px}.story-panel h2{font-size:27px;margin:10px 0}.story-panel>p:not(.eyebrow){font-size:14px;line-height:1.5}.story-actions{margin-top:8px}body[data-focus=detail] #view-tools{display:none}}

/* Living Waterfront controls and intentionally uncluttered presentation mode. */
.viewer-brand{flex:1}.sound{margin-left:0}
.detail-zoom{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:9px 15px;margin-top:13px;font-size:12px}
body[data-view=ar] #closeup{display:none}
body[data-time=twilight][data-view=explore]{background:radial-gradient(ellipse at 50% 30%,#8d776b,#2c4954 60%,#102b35)}
body[data-time=night][data-view=explore]{background:radial-gradient(ellipse at 50% 35%,#2c4655,#081922 78%)}
body.presentation #anchors,body.presentation #view-tools,body.presentation #exploration-bar,body.presentation .panel,body.presentation .viewer-footnote,body.presentation .viewer-header>:not(#present){visibility:hidden}
body.presentation #present{position:absolute;right:0;opacity:.55}
#postcard-dialog{position:fixed;inset:0;z-index:90;background:#071922ed;display:grid;place-items:center;padding:25px}
#postcard-dialog>div{position:relative;max-width:430px;width:100%;padding:16px;background:#102b35;border:1px solid var(--line)}
#postcard-image{display:block;max-height:72dvh;width:100%;object-fit:contain;margin-bottom:14px}
#download-postcard{text-decoration:none;justify-content:center}
@media(max-width:700px){.viewer-header{gap:8px}.viewer-brand{font-size:18px;letter-spacing:2.4px}.viewer-brand small{font-size:6px;letter-spacing:1.5px}.view-tools{flex-wrap:nowrap;gap:4px;top:78px}.time-switch{flex:0 1 auto;justify-content:center;max-width:none}.time-switch button{padding:6px;font-size:10.5px;white-space:nowrap;min-height:36px}.view-tools>button{padding:6px;font-size:10.5px;min-height:44px}.view-tools #postcard{font-size:10.5px}.detail-zoom{margin-top:9px;padding:7px 11px}.icon-button{flex-shrink:0;width:36px;height:36px}}
@media(max-height:500px) and (min-width:701px){.view-tools{top:85px;gap:5px}.view-tools>button{padding:8px 12px}.time-switch button{padding:6px 10px}}

/* One-row destination toolbar and bounded model inspection. */
.view-tools{align-items:stretch;flex-wrap:nowrap}
.view-tools>button{white-space:nowrap}
.time-switch{align-items:center;flex-shrink:0}
.view-tools button{min-height:44px}
.zoom-tools{position:absolute;right:30px;top:180px;display:grid;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#102b35ed}
.zoom-tools button{width:42px;height:44px;background:none;font-size:24px}
.zoom-tools button+button{border-top:1px solid var(--line)}
.zoom-tools button:disabled{opacity:.3;cursor:default}
body[data-story=playing] #zoom-tools,body[data-story=complete] #zoom-tools,body.presentation #zoom-tools{display:none}
body[data-view] canvas{touch-action:none}
.anchor[aria-pressed=true]{border:2px solid #fff3cd;transform:translate(-50%,-50%) scale(1.18);box-shadow:0 0 0 7px #d8be8740,0 5px 18px #0006}
@media(max-width:700px){.view-tools{left:12px;right:12px;justify-content:center}.time-switch button{min-height:36px}.zoom-tools{right:14px;top:140px}}
@media(max-height:500px) and (min-width:701px){.zoom-tools{top:144px;right:20px}}

}