:root {
  font-family: var(--font-villa-sans,sans-serif); color:#fffef6; background:#cbd4d2;
  font-synthesis:weight; --footer-height:51px; --rail-width:270px; --accent:#f6ecd4;
}
* { box-sizing:border-box; }
body { margin:0; overflow:hidden; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; border:0; background:transparent; cursor:pointer; padding:0; }
a { color:inherit; text-decoration:none; }
button:disabled { opacity:.35; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
[hidden] { display:none!important; }
#stage { position:fixed; inset:0; }
#stage > canvas { display:block; width:100%; height:100%; touch-action:none; }
.topbar { position:fixed; z-index:6; inset:0 0 auto; min-height:76px; padding:18px 30px; display:flex; align-items:center; gap:28px; pointer-events:none; text-shadow:0 1px 8px #14211999; }
.topbar > * { pointer-events:auto; }
.brand { font-family:var(--font-brand); font-size:var(--size-brand,18px); font-weight:var(--weight-brand,500); color:var(--color-brand,#fff); letter-spacing:.07em; white-space:nowrap; }
.brand small { display:block; font:8px/1.6 var(--font-villa-sans); letter-spacing:.22em; opacity:.7; margin-top:4px; }
#top-nav { display:flex; align-items:center; gap:0; margin:0 auto; overflow-x:auto; scrollbar-width:none; min-width:0; }
#top-nav::-webkit-scrollbar { display:none; }
#top-nav button { position:relative; font-family:var(--font-topNav); font-size:var(--size-topNav,16px); font-weight:var(--weight-topNav,700); color:var(--color-topNav,#fff); padding:8px 15px; white-space:nowrap; opacity:.62; transition:opacity .25s,transform .25s; }
#top-nav button+button::before { content:'/'; position:absolute; left:-2px; opacity:.4; font-weight:300; }
#top-nav button::after { content:''; position:absolute; height:1px; bottom:0; left:15px; right:15px; background:currentColor; transform:scaleX(0); transition:transform .3s; }
#top-nav button:hover,#top-nav button:focus-visible,#top-nav button[aria-current='location'] { opacity:1; }
#top-nav button:hover { transform:translateY(-1px); }
#top-nav button[aria-current='location']::after { transform:scaleX(1); }
.top-actions { display:flex; align-items:center; gap:16px; font-size:11px; white-space:nowrap; }
.top-actions a { opacity:.7; }
.top-actions a:hover { opacity:1; }
#light-toggle { display:flex; align-items:center; gap:6px; padding:8px 0; font-size:10px; }
#light-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.25; transition:transform .45s; }
#light-toggle:hover svg { transform:rotate(35deg); }
#light-toggle[data-mode='night'] circle { fill:#f1e0b9; stroke:#f1e0b9; }
#light-toggle[data-mode='night'] path { opacity:.5; }
#navigation { position:fixed; z-index:5; left:28px; top:50%; width:var(--rail-width); height:1px; color:var(--color-sideNav,#fff); }
#navigation::before { content:''; position:fixed; z-index:-1; pointer-events:none; left:-85px; top:-12vh; width:calc(var(--rail-width) + 175px); height:124vh; background:radial-gradient(ellipse at 0% 50%,#10171480 0%,#10171457 37%,#1017141f 60%,transparent 76%); }
#room-nav { position:relative; }
.nav-room { position:absolute; top:0; left:0; width:100%; display:flex; align-items:center; gap:13px; min-height:28px; text-align:left; white-space:nowrap; transform:translateY(calc(var(--offset) - 50%)); transition:transform .48s cubic-bezier(.2,.7,.2,1); }
.nav-tick { display:block; width:24px; height:1px; flex:0 0 auto; background:currentColor; opacity:.35; transition:width .35s,opacity .25s; box-shadow:0 1px 4px #24302660; }
.nav-label { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-sideNav); font-size:var(--size-sideNav,16px); font-weight:400; letter-spacing:.025em; line-height:1.5; text-shadow:0 1px 7px #132418c0; transition:opacity .25s,transform .3s; }
body:not(.focus-mode) .nav-label { overflow:visible; flex-shrink:0; }
.nav-room.adjacent .nav-label { opacity:.48; }
.nav-room.adjacent .nav-tick { width:34px; opacity:.55; }
.nav-room.distant .nav-label { opacity:0; visibility:hidden; transform:translateX(-5px); }
.nav-room[aria-current='location'] .nav-tick { width:52px; opacity:1; height:2px; }
.nav-room[aria-current='location'] .nav-label { opacity:1; font-weight:var(--weight-sideNav,700); }
.nav-room:hover .nav-tick,.nav-room:focus-visible .nav-tick { opacity:1; width:44px; }
.nav-room:hover .nav-label,.nav-room:focus-visible .nav-label { opacity:1; visibility:visible; transform:translateX(0); font-weight:var(--weight-sideNav,700); }
.nav-room[aria-current='location']:hover .nav-tick { width:57px; }
#transport { position:fixed; z-index:6; left:0; right:0; bottom:0; height:max(51px,calc(var(--size-hint,12px)*1.5 + 22px)); padding:0 24px; display:flex; align-items:center; justify-content:center; background:linear-gradient(115deg,#f3f3e61c,#d1dfd72e 50%,#d7e2d326); border-top:1px solid #ffffff40; backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%); box-shadow:0 -1px 16px #2031260c; }
body.has-media #transport { height:max(62px,calc(var(--size-hint,12px)*1.5 + 22px)); }
body.precision-open #transport { height:108px; padding-bottom:38px; }
#hint-anchor { position:absolute; left:24px; bottom:16px; visibility:hidden; }
#hint-anchor,#interaction-hint { font-family:var(--font-hint); font-size:var(--size-hint,12px); line-height:1.5; font-weight:var(--weight-hint,400); color:var(--color-hint,#fff); letter-spacing:.04em; white-space:nowrap; }
#interaction-hint { position:fixed; z-index:8; left:24px; bottom:16px; margin:0; opacity:.9; pointer-events:none; text-shadow:0 1px 6px #13251b77; }
#media-controls { display:flex; align-items:center; justify-content:center; gap:18px; font-family:var(--font-controls); font-size:var(--size-controls,13px); font-weight:var(--weight-controls,400); color:var(--color-controls,#fff); }
body.focus-mode #media-controls { position:absolute; left:var(--screen-center-x,50%); transform:translateX(-50%); }
#media-controls button { min-height:38px; padding:5px 2px; white-space:nowrap; }
#media-controls button:hover { opacity:.7; }
#media-controls button[aria-expanded='true'] { text-decoration:underline; text-underline-offset:6px; }
#time-readout { white-space:nowrap; opacity:.78; font-size:.9em; font-variant-numeric:tabular-nums; }
#volume-control { position:relative; display:inline-flex; align-items:center; }
#sound-video { width:28px; }
#sound-video svg { display:block; width:20px; height:20px; }
.speaker { fill:currentColor; }
.sound-waves,.sound-muted { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.sound-muted,.muted .sound-waves { display:none; }
.muted .sound-muted { display:block; }
.volume-popover { position:absolute; left:50%; bottom:100%; transform:translateX(-50%) translateY(5px); padding:12px 9px; border-radius:6px; background:#34463ee8; backdrop-filter:blur(16px); display:flex; align-items:center; flex-direction:column; gap:10px; opacity:0; visibility:hidden; transition:opacity .2s,transform .2s; }
.volume-popover::after { content:''; position:absolute; top:100%; height:10px; left:0; right:0; }
#volume-control:hover .volume-popover,#volume-control:focus-within .volume-popover { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
#volume-output { font:11px var(--font-villa-sans); }
#volume-level { writing-mode:vertical-lr; direction:rtl; width:20px; height:85px; accent-color:white; margin:0; cursor:pointer; }
#precise-controls { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:60%; height:24px; display:flex; align-items:center; }
body.focus-mode #precise-controls { left:var(--screen-center-x,50%); }
#video-progress { appearance:none; -webkit-appearance:none; background:transparent; border:0; border-radius:0; width:100%; height:24px; margin:0; cursor:pointer; touch-action:none; }
#video-progress::-webkit-slider-runnable-track { height:2px; border:0; background:#ffffffa0; border-radius:2px; }
#video-progress::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:9px; height:9px; margin-top:-3.5px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 8px 3px #ffffffa0; }
#video-progress::-moz-range-track { height:2px; border:0; background:#ffffffa0; }
#video-progress::-moz-range-thumb { width:9px; height:9px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 8px 3px #ffffffa0; }
#video-progress:focus { outline:none; }
#video-progress:focus-visible { outline:1px solid #ffffff60; outline-offset:4px; }
#focus-blur { position:absolute; z-index:1; inset:0; pointer-events:none; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); mask-size:100% 100%; mask-repeat:no-repeat; }
#screen-switcher { position:absolute; z-index:3; height:0; pointer-events:none; }
#screen-switcher button { position:absolute; top:0; width:44px; height:88px; pointer-events:auto; cursor:default; display:grid; place-content:center; }
#screen-prev { left:-17px; transform:translate(-100%,-50%); }
#screen-next { right:-17px; transform:translate(100%,-50%); }
#screen-switcher svg { width:27px; height:56px; fill:none; stroke:#fff; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; opacity:.88; filter:drop-shadow(0 1px 3px #07130d55); transition:filter .3s,opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1); }
#screen-switcher button:hover svg,#screen-switcher button:focus-visible svg { opacity:1; filter:drop-shadow(0 0 7px #fff3ca9a); transform:translateX(var(--arrow-shift,3px)) scale(1.06); }
#screen-prev { --arrow-shift:-3px; }
#screen-switcher button:active svg { transform:translateX(var(--arrow-shift)) scale(.88); transition-duration:.1s; }
.sparkle { position:absolute; pointer-events:none; width:7px; height:7px; background:#fff4ce; clip-path:polygon(50% 0,60% 38%,100% 50%,60% 60%,50% 100%,39% 61%,0 50%,39% 39%); opacity:0; filter:drop-shadow(0 0 4px #fff6c9); }
.sparkle.one { left:4px; top:20%; }
.sparkle.two { right:1px; top:47%; width:10px; height:10px; }
.sparkle.three { left:7px; bottom:12%; width:5px; height:5px; }
#screen-switcher button:hover .sparkle { animation:starlight 2.2s ease-in-out infinite; }
#screen-switcher button:hover .two { animation-delay:.4s; }
#screen-switcher button:hover .three { animation-delay:.8s; }
@keyframes starlight { 0%,100% { opacity:.08; transform:scale(.4) rotate(0deg); } 50% { opacity:.75; transform:scale(1.1) rotate(25deg); } }
#archive-layer { position:absolute; z-index:2; inset:0; pointer-events:none; overflow:clip; }
.archive-board { position:absolute; left:0; top:0; transform-origin:0 0; display:grid; grid-template-rows:18px minmax(0,1fr) 49px; gap:13px; padding:17px 23px 16px; background:#fff; color:#171a1a; pointer-events:auto; overflow:clip; border:0; box-shadow:none; font-family:var(--font-archiveBody,"Villa Sans",sans-serif); font-size:var(--size-archiveBody,14px); font-weight:var(--weight-archiveBody,400); }
.archive-masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; font:9px/1.2 "Villa Inter","Villa Sans",sans-serif; letter-spacing:.11em; text-transform:uppercase; color:#666e6f; }
.archive-masthead>span:first-child { display:flex; align-items:center; gap:13px; }
.archive-head-rule { display:inline-block; width:30px; height:1px; background:#bdc2c2; }
.archive-owner { max-width:35%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.archive-main { display:grid; grid-template-columns:minmax(0,.47fr) minmax(0,1fr); gap:30px; min-height:0; }
.archive-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:0; padding:4px 0 2px; }
.archive-category { font:8px/1.4 "Villa Inter","Villa Sans",sans-serif; color:#717879; letter-spacing:.065em; margin-bottom:9px; }
.archive-copy h2 { width:100%; font-family:var(--font-archiveTitle,"Villa Sans",sans-serif); font-size:var(--size-archiveTitle,40px); font-weight:var(--weight-archiveTitle,600); color:var(--color-archiveTitle,#171a1a); line-height:1.14; letter-spacing:-.055em; margin:0 0 15px; overflow-wrap:anywhere; flex-shrink:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.archive-detail-trigger { display:inline-flex; align-items:center; gap:7px; margin:0 0 13px; padding:7px 0; border-bottom:1px solid #9aa39d; color:#3c4842; font:600 10px/1.2 var(--font-archiveBody,"Villa Sans",sans-serif); letter-spacing:.04em; transition:color .2s,border-color .2s,transform .2s; }
.archive-detail-trigger:hover,.archive-detail-trigger:focus-visible { color:#a16739; border-color:#a16739; transform:translateX(3px); }
.archive-detail-trigger span { font-size:13px; line-height:1; }
.archive-writing { min-height:0; overflow:auto; width:100%; padding-right:4px; scrollbar-width:thin; scrollbar-color:#bbc1c166 transparent; flex:1; overscroll-behavior:contain; }
.archive-summary { font-size:var(--size-archiveBody,14px); font-family:var(--font-archiveBody,"Villa Sans",sans-serif); font-weight:var(--weight-archiveBody,400); color:var(--color-archiveBody,#565c5e); line-height:1.75; overflow-wrap:anywhere; }
.archive-summary p { margin:0 0 .6em; }
.archive-details { display:grid; grid-template-columns:minmax(44px,.55fr) minmax(0,1fr); column-gap:12px; row-gap:7px; border-top:1px solid #e3e6e6; padding-top:10px; margin:12px 0 0; font-size:max(10px,calc(var(--size-archiveBody,14px)*.8)); line-height:1.55; overflow-wrap:anywhere; }
.archive-details dt { color:#92999b; }
.archive-details dd { margin:0; color:var(--color-archiveBody,#565c5e); }
.archive-current { display:flex; align-items:center; gap:11px; width:100%; margin-top:12px; padding-right:38%; font:10px/1 "Villa Inter",sans-serif; font-variant-numeric:tabular-nums; }
.archive-number { font-weight:600; }
.archive-total { color:#9ea5a6; }
.archive-hairline { height:1px; flex:1; background:#cfd4d4; }
.archive-image { position:relative; min-width:0; min-height:0; margin:0; overflow:hidden; background:#f3f4f3; }
.archive-image>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.archive-image figcaption { position:absolute; z-index:1; left:13px; right:13px; bottom:10px; display:flex; justify-content:space-between; gap:15px; font:8px/1.3 "Villa Inter","Villa Sans",sans-serif; letter-spacing:.025em; color:#353d3c; opacity:.7; pointer-events:none; }
.archive-image.has-image figcaption { color:#fff; opacity:1; text-shadow:0 1px 5px #000c; }
.archive-image.has-image::after { content:''; position:absolute; inset:62% 0 0; pointer-events:none; background:linear-gradient(transparent,#07110e55); }
.archive-image-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archive-image-count { flex-shrink:0; }
.archive-image-empty { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:16px; padding:33px; background:#f3f4f3; color:#b5bbbb; }
.archive-image-empty>span { font:9px/1 "Villa Inter",sans-serif; letter-spacing:.17em; }
.archive-image-empty>strong { font-family:var(--font-archiveTitle,"Villa Sans",sans-serif); font-size:38px; line-height:1.14; letter-spacing:-.05em; font-weight:500; overflow-wrap:anywhere; }
.archive-footer { display:flex; align-items:stretch; gap:21px; border-top:1px solid #dce0df; padding-top:10px; min-height:0; }
.archive-thumbnails { flex:1; min-width:0; display:flex; align-items:stretch; gap:9px; }
.archive-thumbnail { flex:0 1 89px; width:89px; min-width:0; display:flex; align-items:center; gap:7px; position:relative; padding:0; text-align:left; opacity:.46; transition:opacity .2s; }
.archive-thumbnail:hover,.archive-thumbnail[aria-current='true'] { opacity:1; }
.archive-thumbnail[aria-current='true']::before { content:''; position:absolute; height:2px; background:#202626; left:0; right:0; top:-11px; }
.archive-thumb-visual { position:relative; display:grid; place-items:center; flex:0 0 43px; height:31px; background:#ecefed; overflow:hidden; }
.archive-thumb-visual img { width:100%; height:100%; object-fit:cover; }
.archive-thumb-number { font:10px/1 "Villa Inter",sans-serif; color:#626c69; }
.archive-thumbnail.has-image .archive-thumb-number { display:none; }
.archive-thumb-title { font-size:8px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#394140; }
.archive-pager { display:flex; align-items:center; gap:15px; flex-shrink:0; padding-left:3px; }
.archive-pager button { display:grid; place-items:center; width:32px; height:36px; pointer-events:auto; color:#333c3a; transition:transform .2s,opacity .2s; }
.archive-pager svg { width:29px; height:17px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.archive-pager button:first-child:hover { transform:translateX(-3px); }
.archive-pager button:last-child:hover { transform:translateX(3px); }
.archive-board button:focus-visible { outline:2px solid #61726b; outline-offset:3px; }
.archive-writing:focus-visible { outline:1px solid #61726b; outline-offset:2px; }
#archive-layer.archive-reading { position:fixed; inset:258px 16px 82px; }
.archive-reading .archive-board { width:100%!important; height:100%!important; padding:16px; grid-template-rows:14px minmax(0,1fr) 46px; gap:12px; }
.archive-reading .archive-masthead { font-size:8px; gap:10px; }
.archive-reading .archive-masthead>span:first-child { gap:8px; }
.archive-reading .archive-head-rule { width:16px; }
.archive-reading .archive-main { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(105px,.95fr) minmax(130px,1fr); gap:16px; }
.archive-reading .archive-image { grid-row:1; }
.archive-reading .archive-copy { grid-row:2; padding:0 3px 2px 0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#bbc1c166 transparent; }
.archive-reading .archive-category { font-size:9px; margin-bottom:7px; }
.archive-reading .archive-copy h2 { font-size:clamp(26px,calc(var(--size-archiveTitle,40px)*.85),36px); letter-spacing:-.035em; line-height:1.2; margin-bottom:10px; -webkit-line-clamp:2; }
.archive-reading .archive-detail-trigger { margin-bottom:9px; }
.archive-reading .archive-writing { flex:none; min-height:auto; overflow:visible; padding-right:0; }
.archive-reading .archive-summary { font-size:clamp(14px,var(--size-archiveBody,14px),22px); line-height:1.75; }
.archive-reading .archive-details { font-size:max(12px,calc(var(--size-archiveBody,14px)*.8)); grid-template-columns:minmax(65px,.5fr) minmax(0,1fr); }
.archive-reading .archive-current { display:none; }
.archive-reading .archive-image-empty { padding:24px; gap:12px; }
.archive-reading .archive-image-empty>strong { font-size:30px; }
.archive-reading .archive-image figcaption { font-size:10px; }
.archive-reading .archive-footer { gap:10px; padding-top:8px; }
.archive-reading .archive-thumbnails { gap:5px; }
.archive-reading .archive-thumbnail { width:auto; flex:0 1 49px; justify-content:center; }
.archive-reading .archive-thumbnail[aria-current='true']::before { top:-9px; }
.archive-reading .archive-thumb-visual { flex:1 1 auto; width:100%; height:31px; }
.archive-reading .archive-thumb-title { display:none; }
.archive-reading .archive-pager { gap:2px; padding-left:0; }
.archive-reading .archive-pager button { width:37px; height:37px; }
@media(max-height:700px) {
  #archive-layer.archive-reading { top:245px; bottom:62px; }
  .archive-reading .archive-board { padding:12px; gap:9px; }
  .archive-reading .archive-main { grid-template-rows:minmax(70px,.7fr) minmax(90px,1fr); gap:10px; }
}
.archive-detail-layer { position:fixed; z-index:42; inset:0; display:grid; place-items:center; padding:clamp(22px,5vw,76px); color:#f7f3e7; }
.archive-detail-layer[hidden] { display:none; }
.archive-detail-backdrop { position:absolute; inset:0; background:rgba(12,19,16,.56); backdrop-filter:blur(18px) saturate(115%); -webkit-backdrop-filter:blur(18px) saturate(115%); }
.archive-detail-dialog { position:relative; z-index:1; width:80vw; height:80vh; max-width:calc(100vw - 44px); max-height:calc(100vh - 44px); overflow:auto; padding:clamp(22px,4vw,48px); background:#f5f4ee; color:#1a211e; box-shadow:0 28px 90px rgba(0,0,0,.3); }
.archive-detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:22px; border-bottom:1px solid #d5d9d3; }
.archive-detail-eyebrow { display:block; margin-bottom:12px; color:#7f8a82; font:9px/1 var(--font-archiveBody,"Villa Sans",sans-serif); letter-spacing:.16em; }
.archive-detail-header h2 { margin:0; max-width:780px; font-family:var(--font-archiveTitle,"Villa Sans",sans-serif); font-size:clamp(30px,5vw,66px); line-height:1.08; font-weight:var(--weight-archiveTitle,600); letter-spacing:-.04em; overflow-wrap:anywhere; }
.archive-detail-close { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border:1px solid #c5cdc4; color:#435049; font-size:27px; line-height:1; transition:background .2s,color .2s; }
.archive-detail-close:hover,.archive-detail-close:focus-visible { background:#1d2923; color:#fff; }
.archive-detail-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.95fr); gap:clamp(22px,4vw,58px); padding-top:28px; }
.archive-detail-copy { min-width:0; }
.archive-detail-summary { font-family:var(--font-archiveBody,"Villa Sans",sans-serif); font-size:clamp(15px,1.35vw,19px); line-height:1.85; overflow-wrap:anywhere; }
.archive-detail-summary p { margin:0 0 1em; }.archive-detail-summary strong { font-weight:700; }
.archive-detail-fields { display:grid; grid-template-columns:minmax(70px,.45fr) minmax(0,1.2fr); gap:9px 18px; margin:25px 0 0; padding-top:18px; border-top:1px solid #d5d9d3; font:12px/1.6 var(--font-archiveBody,"Villa Sans",sans-serif); }
.archive-detail-fields dt { color:#87918a; }.archive-detail-fields dd { margin:0; color:#36423b; overflow-wrap:anywhere; }
.archive-detail-media { position:relative; min-width:0; margin:0; background:#dce1dc; aspect-ratio:16/10; overflow:hidden; }
.archive-detail-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:.2; filter:blur(10px); transform:scale(1.05); }
.archive-detail-media.has-external-video img { opacity:1; filter:none; transform:none; }
.archive-detail-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#101612; }
.archive-detail-media video[hidden] { display:none; }
.archive-external-video { position:absolute; z-index:3; inset:0; width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:22px 24px 42px; color:#fff; background:linear-gradient(180deg,transparent 48%,rgba(8,16,12,.72)); text-align:left; cursor:pointer; }
.archive-external-video span { font:600 clamp(13px,1.2vw,17px)/1.3 var(--font-archiveBody,"Villa Sans",sans-serif); letter-spacing:.04em; text-shadow:0 2px 10px #000; }
.archive-external-video b { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border:1px solid rgba(255,255,255,.65); font:400 20px/1 var(--font-archiveBody,"Villa Sans",sans-serif); transition:transform .25s,background .25s,color .25s; }
.archive-external-video:hover b,.archive-external-video:focus-visible b { transform:translate(3px,-3px); background:#fff; color:#17231d; }
.archive-external-video[hidden] { display:none; }
.archive-detail-empty { position:absolute; inset:0; display:grid; place-items:center; padding:30px; color:#66736b; font:12px/1.6 var(--font-archiveBody,"Villa Sans",sans-serif); text-align:center; }
.archive-detail-empty[hidden] { display:none; }
.archive-detail-media figcaption { position:absolute; left:14px; right:14px; bottom:10px; z-index:4; color:#fff; font:10px/1.3 var(--font-archiveBody,"Villa Sans",sans-serif); text-shadow:0 1px 6px #000; pointer-events:none; }
.archive-process { margin-top:36px; padding-top:28px; border-top:1px solid #d5d9d3; }
.archive-process-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px 18px; margin-bottom:18px; }
.archive-process-heading span { color:#87918a; font:9px/1 var(--font-archiveBody,"Villa Sans",sans-serif); letter-spacing:.16em; }
.archive-process-heading h3 { margin:0; color:#1a211e; font:600 clamp(22px,2.5vw,34px)/1.1 var(--font-archiveTitle,"Villa Sans",sans-serif); }
.archive-process-heading p { flex-basis:100%; margin:0; color:#707b74; font:12px/1.7 var(--font-archiveBody,"Villa Sans",sans-serif); }
.archive-process-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.archive-process-step { display:grid; grid-template-columns:minmax(110px,.42fr) minmax(0,1fr); min-width:0; background:#e9ece6; border:1px solid #d5d9d3; }
.archive-process-visual { position:relative; min-height:150px; margin:0; overflow:hidden; background:#cfd6ce; }
.archive-process-visual img { width:100%; height:100%; min-height:150px; display:block; object-fit:cover; opacity:.82; filter:saturate(.75); }
.archive-process-visual img[hidden] { display:block; opacity:0; }
.archive-process-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#17251eaa,#17251e22 65%,transparent); pointer-events:none; }
.archive-process-visual span { position:absolute; z-index:1; left:13px; bottom:11px; color:#f5f4ee; font:600 24px/1 var(--font-archiveTitle,"Villa Sans",sans-serif); text-shadow:0 2px 10px #17251e99; }
.archive-process-copy { min-width:0; padding:18px 18px 16px; }
.archive-process-number,.archive-process-label { display:block; color:#7f8a82; font:9px/1.3 var(--font-archiveBody,"Villa Sans",sans-serif); letter-spacing:.12em; text-transform:uppercase; }
.archive-process-copy h4 { margin:8px 0 16px; color:#26352d; font:600 clamp(17px,1.7vw,24px)/1.2 var(--font-archiveTitle,"Villa Sans",sans-serif); overflow-wrap:anywhere; }
.archive-process-copy p { margin:5px 0 12px; color:#46544c; font:12px/1.65 var(--font-archiveBody,"Villa Sans",sans-serif); overflow-wrap:anywhere; }
.archive-process-effect { color:#26352d!important; }
.archive-process[hidden] { display:none; }
body.archive-detail-open { overflow:hidden; }
@media(max-width:760px) { .archive-process-grid { grid-template-columns:1fr; }.archive-process-step { grid-template-columns:110px minmax(0,1fr); }.archive-process-copy { padding:15px; }.archive-detail-layer { padding:14px; }.archive-detail-dialog { width:100%; height:100%; max-width:none; max-height:none; padding:22px 18px; }.archive-detail-body { grid-template-columns:1fr; gap:24px; }.archive-detail-media { order:-1; aspect-ratio:16/9; }.archive-detail-header { padding-bottom:17px; }.archive-detail-header h2 { font-size:clamp(28px,10vw,48px); } }
#intro { position:fixed; z-index:20; inset:0; }
.intro-backdrop { position:absolute; inset:0; background:#29372c16; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:opacity 1.15s; }
#intro-continue { position:absolute; inset:0; width:100%; height:100%; cursor:pointer; }
#intro-subtitle { position:absolute; font:13px/1.7 var(--font-intro); color:var(--color-intro,#fff); opacity:.75; letter-spacing:.12em; white-space:nowrap; transform:translateX(-50%); transition:opacity .3s; }
body.intro-active #interaction-hint { z-index:21; left:var(--intro-x,50%); top:var(--intro-y,50%); bottom:auto; transform:translate(-50%,-50%); font-family:var(--font-intro); font-weight:var(--weight-intro,400); color:var(--color-intro,#fff); font-size:min(var(--size-intro,42px),7vw); line-height:1.5; opacity:1; }
body.intro-leaving .intro-backdrop,body.intro-leaving #intro-subtitle { opacity:0; }
#notice { position:fixed; z-index:30; top:82px; left:50%; transform:translateX(-50%); font-size:12px; line-height:1.7; padding:8px 14px; background:#283b32e6; border-radius:5px; pointer-events:none; max-width:75vw; text-align:center; }
#notice:empty { opacity:0; }
#loading { position:fixed; inset:0; z-index:18; display:grid; place-content:center; text-align:center; background:#506457; color:#f4f0df; font-size:14px; letter-spacing:.1em; }
.loading-mark { font-size:44px; }
.media-source { position:fixed; left:-10px; bottom:-10px; width:1px; height:1px; opacity:0; pointer-events:none; }
@media(max-width:1200px) {
  .topbar { gap:16px; padding:16px 22px; }
  #top-nav button { padding-left:11px; padding-right:11px; }
  .top-actions a { display:none; }
  #media-controls { gap:12px; }
}
@media(max-width:699px),(max-width:999px) and (orientation:portrait) {
  .topbar { min-height:100px; padding:15px 18px 9px; align-content:flex-start; align-items:flex-start; flex-wrap:wrap; gap:8px; }
  .brand { font-size:min(var(--size-brand),22px); }
  .brand small { display:none; }
  .top-actions { margin-left:auto; }
  #top-nav { order:3; width:100%; margin:0; justify-content:flex-start; }
  #top-nav button { font-size:min(var(--size-topNav),15px); padding:8px 10px; }
  #top-nav button:first-child { padding-left:0; }
  #top-nav button:first-child::after { left:0; }
  #navigation { left:16px; top:42%; width:220px; }
  #navigation::before { width:320px; left:-90px; }
  .nav-label { font-size:min(var(--size-sideNav),15px); }
  .nav-tick { width:16px; }
  .nav-room { gap:9px; min-height:25px; }
  .nav-room.adjacent .nav-tick { width:25px; }
  .nav-room[aria-current='location'] .nav-tick { width:36px; }
  body.focus-mode #navigation,body[data-room='library'] #navigation { top:110px; height:142px; width:calc(100% - 32px); overflow:hidden; }
  body.focus-mode #room-nav,body[data-room='library'] #room-nav { top:71px; }
  body[data-room='library'] #navigation::before { top:0; height:258px; }
  #transport { padding:0 12px; }
  #hint-anchor,#interaction-hint { left:14px; bottom:15px; font-size:min(var(--size-hint),15px); }
  body.has-media #transport { height:94px; padding-bottom:28px; }
  body.precision-open #transport { height:122px; padding-bottom:56px; }
  #media-controls { gap:10px; font-size:min(var(--size-controls),12px); }
  #precise-controls { bottom:37px; }
  #screen-switcher button { width:30px; height:72px; }
  #screen-switcher svg { width:22px; height:48px; }
  #screen-prev { left:-8px; }
  #screen-next { right:-8px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* The closing contact view is a quiet screen inside the final terrace shot. */
#contact-screen { position:fixed; z-index:6; inset:0; pointer-events:none; perspective:1200px; }
#contact-screen:not([hidden]) { display:block; }
.contact-screen-shell { position:absolute; left:var(--contact-x,62%); top:var(--contact-y,41%); width:min(44vw,720px); aspect-ratio:16/9; overflow:visible; opacity:0; transform:translate(-50%,-50%) translateY(18px) scale(.985); text-shadow:0 2px 14px rgba(3,10,7,.86),0 0 2px rgba(255,255,255,.42); }
.contact-screen-shell a { pointer-events:auto; }
.contact-item { position:absolute; z-index:1; max-width:90%; line-height:1.2; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; transition:color .2s,filter .2s; }
.contact-item[data-align="center"] { transform:translate(-50%,-50%); }
.contact-item[data-align="left"] { transform:translate(0,-50%); }
.contact-item[data-align="right"] { transform:translate(-100%,-50%); }
.contact-item:hover { color:#f0c98f!important; filter:brightness(1.12); }
.contact-compliance { position:fixed; z-index:2; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); width:max-content; max-width:calc(100vw - 220px); transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:18px; color:rgba(255,255,255,.78); font:400 10px/1.5 var(--font-archiveBody,"Villa Sans",sans-serif); letter-spacing:.04em; white-space:nowrap; text-shadow:0 1px 8px rgba(3,10,7,.82); }
.contact-record { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; pointer-events:auto; transition:color .2s,filter .2s,opacity .2s; }
.contact-record span { color:#f0c98f; font-size:10px; }
.contact-record b { font:inherit; }
.contact-record.pending { opacity:.68; pointer-events:none; }
.contact-record[href]:hover,.contact-record[href]:focus-visible { color:#fff; filter:brightness(1.15); }
.contact-reveal .contact-screen-shell { animation:contact-screen-in 1.05s cubic-bezier(.2,.8,.2,1) both; }
.contact-reveal .contact-item { animation:contact-line-in .65s var(--contact-delay,0s) cubic-bezier(.2,.8,.2,1) both; }
.contact-reveal .contact-compliance { animation:contact-line-in .65s .72s cubic-bezier(.2,.8,.2,1) both; }
@keyframes contact-screen-in { from { opacity:0; transform:translate(-50%,-50%) translateY(18px) rotateX(4deg) scale(.97); } to { opacity:1; transform:translate(-50%,-50%); } }
@keyframes contact-scan { from { transform:translateX(-110%); } to { transform:translateX(110%); } }
@keyframes contact-line-in { from { opacity:0; filter:blur(5px); } to { opacity:1; filter:blur(0); } }
@media(max-width:800px) { .contact-screen-shell { left:var(--contact-x,56%); top:var(--contact-y,39%); width:min(78vw,520px); }.contact-compliance{bottom:max(7px,env(safe-area-inset-bottom));max-width:calc(100vw - 28px);gap:4px 12px;flex-wrap:wrap;font-size:8px;line-height:1.25} }
.archive-video-switcher{display:flex;align-items:center;gap:10px;margin-top:12px;color:#68736c;font:10px/1.4 var(--font-archiveBody,"Villa Sans",sans-serif);letter-spacing:.08em}.archive-video-switcher select{min-width:180px;max-width:100%;padding:8px 10px;border:1px solid #ccd3cb;border-radius:3px;background:#f5f6f1;color:#26352d;font:11px/1.3 var(--font-archiveBody,"Villa Sans",sans-serif)}

/* Touch-first layout: compact room rail, large tap targets and a protected
   reading/video area above the browser's safe-area-aware control shelf. */
#safe-area-top-probe { position:fixed; z-index:-1; top:0; left:0; width:0; height:env(safe-area-inset-top,0px); visibility:hidden; pointer-events:none; }
@media(max-width:899px),(max-width:1099px) and (orientation:portrait) {
  html,body { width:100%; height:100%; height:100dvh; }
  .topbar { inset:0 0 auto; min-height:50px; padding:calc(8px + env(safe-area-inset-top)) 16px 4px; align-items:center; flex-wrap:nowrap; gap:8px; }
  .brand { font-size:clamp(15px,4.5vw,19px); line-height:1.2; }
  .top-actions { margin-left:auto; }
  #light-toggle { min-width:44px; min-height:44px; justify-content:center; font-size:10px; }
  #top-nav { display:none; }
  #navigation,body.focus-mode #navigation,body[data-room='library'] #navigation {
    position:fixed; z-index:7; top:calc(50px + env(safe-area-inset-top)); left:0; width:100%; height:48px; overflow:visible; transform:none;
  }
  #navigation::before,body[data-room='library'] #navigation::before {
    left:0; top:calc(35px + env(safe-area-inset-top)); width:100%; height:72px;
    background:linear-gradient(180deg,rgba(12,18,14,.43),rgba(12,18,14,.14) 48%,transparent); pointer-events:none;
  }
  #room-nav,body.focus-mode #room-nav,body[data-room='library'] #room-nav { position:absolute; left:0; top:50%; width:100%; height:1px; }
  .nav-room { left:50%; width:max-content; max-width:39vw; min-height:44px; padding:7px 2px; gap:7px; transform:translate(calc(-50% + var(--mobile-shift,0px)),-50%); transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .25s; }
  .nav-tick { width:15px; }
  .nav-label { max-width:31vw; overflow:hidden!important; flex:0 1 auto!important; text-overflow:ellipsis; font-size:clamp(11px,3.2vw,14px); line-height:1.35; }
  .nav-room.adjacent .nav-tick { width:17px; }
  .nav-room[aria-current='location'] .nav-tick { width:26px; }
  .nav-room:hover .nav-tick,.nav-room:focus-visible .nav-tick { width:26px; }
  .nav-room:active { opacity:.78; }
  #transport { height:calc(54px + env(safe-area-inset-bottom)); padding:0 14px env(safe-area-inset-bottom); }
  body.has-media #transport { height:calc(78px + env(safe-area-inset-bottom)); padding:0 12px env(safe-area-inset-bottom); }
  body.precision-open #transport { height:calc(116px + env(safe-area-inset-bottom)); padding:0 12px env(safe-area-inset-bottom); }
  #hint-anchor { left:14px; bottom:calc(8px + env(safe-area-inset-bottom)); }
  #interaction-hint { left:14px; bottom:calc(59px + env(safe-area-inset-bottom)); max-width:calc(100vw - 28px); overflow:hidden; text-overflow:ellipsis; font-size:clamp(10px,3vw,13px); }
  body.has-media #interaction-hint { display:none; }
  #media-controls,body.focus-mode #media-controls {
    position:absolute; left:10px; right:10px; top:7px; width:auto; height:48px; transform:none;
    display:flex; justify-content:space-between; gap:clamp(3px,1.6vw,9px); font-size:clamp(10px,2.9vw,12px); white-space:nowrap;
  }
  #media-controls button { min-width:40px; min-height:44px; padding:5px 2px; }
  #time-readout { font-size:clamp(9px,2.5vw,11px); }
  #sound-video { min-width:40px; }
  #volume-control { min-width:40px; justify-content:center; }
  .volume-popover { z-index:4; bottom:calc(100% - 2px); }
  #precise-controls,body.focus-mode #precise-controls { left:14px; right:14px; bottom:calc(5px + env(safe-area-inset-bottom)); width:auto; height:28px; transform:none; }
  #video-progress { height:32px; }
  #video-progress::-webkit-slider-thumb { width:12px; height:12px; margin-top:-5px; }
  #video-progress::-moz-range-thumb { width:12px; height:12px; }
  #screen-switcher button { width:44px; height:60px; border-radius:24px; background:rgba(12,18,14,.22); }
  #screen-switcher svg { width:19px; height:40px; stroke-width:3; }
  #screen-prev { left:7px; transform:translateY(-50%); }
  #screen-next { right:7px; transform:translateY(-50%); }
  #screen-switcher button:hover svg,#screen-switcher button:focus-visible svg { transform:translateX(var(--arrow-shift,2px)) scale(1.05); }
  #archive-layer.archive-reading { position:fixed; inset:calc(112px + env(safe-area-inset-top)) 12px calc(72px + env(safe-area-inset-bottom)); }
  .archive-reading .archive-board { padding:12px; grid-template-rows:14px minmax(0,1fr) 46px; gap:9px; }
  .archive-reading .archive-main { grid-template-rows:minmax(110px,.95fr) minmax(125px,1fr); gap:10px; }
  .archive-reading .archive-copy { padding-right:2px; }
  .archive-reading .archive-copy h2 { font-size:clamp(23px,7vw,32px); }
  .archive-reading .archive-summary { font-size:clamp(13px,3.8vw,16px); }
  .archive-reading .archive-footer { gap:7px; }
  .archive-reading .archive-thumbnail { flex:1 1 0; min-width:30px; min-height:38px; }
  .archive-reading .archive-pager button { width:40px; min-height:40px; }
  #notice { top:calc(104px + env(safe-area-inset-top)); max-width:calc(100vw - 28px); font-size:11px; }
  .contact-compliance { max-width:calc(100vw - 24px); width:max-content; gap:4px 12px; flex-wrap:wrap; justify-content:center; font-size:9px; line-height:1.35; bottom:max(8px,env(safe-area-inset-bottom)); }
  .contact-screen-shell { width:min(82vw,520px); }
  .contact-item { max-width:96%; }
}
@media(max-width:899px) {
  .archive-detail-layer { padding:10px; }
  .archive-detail-dialog { width:min(100%,760px); height:min(92dvh,900px); max-width:100%; max-height:calc(100dvh - 20px); padding:20px 17px; }
  .archive-detail-header { gap:14px; padding-bottom:16px; }
  .archive-detail-header h2 { font-size:clamp(25px,7vw,42px); }
  .archive-detail-body { grid-template-columns:minmax(0,1fr); gap:18px; padding-top:18px; }
  .archive-detail-media { order:-1; width:100%; aspect-ratio:16/9; }
  .archive-detail-media video { object-fit:contain; }
  .archive-external-video { padding:16px 16px 38px; }
  .archive-detail-summary { font-size:15px; }
  .archive-detail-fields { grid-template-columns:minmax(68px,.4fr) minmax(0,1fr); font-size:12px; }
  .archive-process { margin-top:24px; padding-top:21px; }
  .archive-process-step { grid-template-columns:minmax(88px,.4fr) minmax(0,1fr); }
  .archive-process-visual,.archive-process-visual img { min-height:120px; }
}
@media(max-height:520px) and (orientation:landscape) and (max-width:899px) {
  .topbar { padding-top:calc(3px + env(safe-area-inset-top)); }
  .brand { font-size:15px; }
  #light-toggle { min-height:38px; }
  #navigation,body.focus-mode #navigation,body[data-room='library'] #navigation { top:calc(39px + env(safe-area-inset-top)); height:42px; }
  #navigation::before,body[data-room='library'] #navigation::before { top:calc(27px + env(safe-area-inset-top)); height:56px; }
  #room-nav,body.focus-mode #room-nav,body[data-room='library'] #room-nav { top:50%; }
  .nav-room { min-height:38px; }
  .nav-label { font-size:11px; }
  #transport { height:calc(46px + env(safe-area-inset-bottom)); }
  body.has-media #transport { height:calc(64px + env(safe-area-inset-bottom)); }
  body.precision-open #transport { height:calc(92px + env(safe-area-inset-bottom)); }
  #interaction-hint { bottom:calc(50px + env(safe-area-inset-bottom)); }
  #media-controls,body.focus-mode #media-controls { top:3px; height:42px; }
  #media-controls button { min-height:40px; }
  #archive-layer.archive-reading { inset:calc(88px + env(safe-area-inset-top)) 10px calc(58px + env(safe-area-inset-bottom)); }
  .archive-reading .archive-board { padding:8px; grid-template-rows:12px minmax(0,1fr) 38px; gap:6px; }
  .archive-reading .archive-main { grid-template-rows:minmax(66px,.8fr) minmax(74px,1fr); gap:7px; }
  .archive-reading .archive-category { margin-bottom:3px; }
  .archive-reading .archive-copy h2 { font-size:clamp(18px,4vw,25px); margin-bottom:5px; }
  .archive-reading .archive-detail-trigger { margin-bottom:4px; padding:4px 0; }
  .archive-reading .archive-summary { font-size:12px; line-height:1.5; }
  .archive-reading .archive-footer { padding-top:5px; }
  .archive-reading .archive-thumbnail { min-height:31px; }
  .archive-reading .archive-thumb-visual { height:27px; }
  .archive-reading .archive-pager button { min-height:32px; height:32px; }
}