@charset "UTF-8";
:root {
  color-scheme: light;
  --paper:#FAFAF7; --ink:#1A1815; --muted:#6B655C; --line:#E3DFD6; --surface:#EEEBE4;
  --accent:#ED7100; --accent-deep:#C25B00; --sun:#F5AA00; --leaf:#82BE28;
  --edge:clamp(24px,5.2vw,96px);
  --sans:'Zen Kaku Gothic New',sans-serif; --serif:'Shippori Mincho',serif;
  --latin:'Archivo',sans-serif; --mono:'IBM Plex Mono',monospace;
}
* { box-sizing:border-box; }
html { scrollbar-color:#a3a797 var(--paper); scroll-behavior:auto; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:18px; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a { color:inherit; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:0; background:none; }
a { text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
svg { fill:none; stroke:currentColor; stroke-width:1.2; stroke-linejoin:round; stroke-linecap:round; flex-shrink:0; }
[hidden] { display:none!important; }
::selection { background:#FBDCBB; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-100px; left:var(--edge); z-index:20; padding:14px 20px; background:#fff; font-size:18px; }
.skip-link:focus { top:16px; }
.site-header { position:fixed; inset:0 0 auto; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px var(--edge) 18px; }
.site-brand { display:flex; align-items:center; gap:12px; font-weight:900; font-size:15px; letter-spacing:.08em; white-space:nowrap; }
.logo-mark { stroke:none; flex:none; transition:transform .5s ease; }
.site-brand:hover .logo-mark { transform:translateY(-3px); }
.brand-name small { display:block; font-size:9px; font-weight:500; letter-spacing:.26em; color:var(--muted); }
.header-caption { position:absolute; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--leaf); }
.header-tools { display:flex; align-items:center; gap:26px; }
.mode-control { display:inline-flex; align-items:center; gap:11px; min-height:46px; padding:8px 0 8px 12px; font-size:18px; letter-spacing:.04em; white-space:nowrap; }
.mode-control:hover { color:var(--accent); }
.mode-control[aria-pressed="true"] { color:var(--accent-deep); }
.tour-layout { position:fixed; top:110px; right:var(--edge); bottom:139px; left:var(--edge); display:grid; grid-template-columns:1.05fr 1fr; column-gap:7vw; align-items:stretch; }
.narrative { position:relative; min-width:0; }
.chapter-copy { position:absolute; width:100%; top:47%; transform:translateY(calc(-50% + var(--copy-offset,0px))); opacity:var(--copy-opacity,0); visibility:hidden; pointer-events:none; }
.chapter-copy.is-visible { visibility:visible; }
.chapter-copy.is-active { pointer-events:auto; }
.chapter-copy[data-copy="0"] { --copy-opacity:1; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 27px; color:var(--leaf); font-family:var(--mono); font-size:11px; letter-spacing:.3em; }
.eyebrow span { font-family:var(--latin); font-weight:900; font-size:13px; letter-spacing:.1em; }
.eyebrow i { width:33px; height:1px; background:var(--line); }
h1,h2 { margin:0; font-family:var(--serif); font-weight:800; font-size:clamp(42px,4.3vw,68px); letter-spacing:.08em; line-height:1.45; }
.scene-description { margin:26px 0 0; font-size:18px; line-height:1.8; letter-spacing:.04em; }
.text-button { display:inline-flex; align-items:center; gap:14px; min-height:54px; margin-top:32px; padding:16px 34px; border-radius:99px; background:var(--accent); color:#fff; font-weight:700; font-size:15px; letter-spacing:.12em; line-height:1.5; box-shadow:0 8px 24px rgba(237,113,0,.25); transition:transform .25s ease,background .25s ease; }
.text-button svg { transition:transform .25s ease; }
.text-button:hover { background:var(--accent-deep); transform:translateY(-2px); }
.text-button:hover svg { transform:translateX(4px); }
.site-exit { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:14px; letter-spacing:.04em; color:var(--muted); white-space:nowrap; }
.site-exit svg { fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none; transition:transform .25s ease; }
.site-exit:hover { color:var(--accent); }
.site-exit:hover svg { transform:translateX(-4px); }
.site-exit-compact { display:none; align-items:center; gap:6px; min-height:34px; font-size:15px; letter-spacing:.02em; color:var(--muted); white-space:nowrap; }
.site-exit-compact svg { fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.scene-caption { margin:38px 0 0; padding-left:16px; border-left:2px solid var(--sun); font-size:16px; line-height:1.9; color:var(--muted); }
.film-area { position:relative; justify-self:center; height:100%; aspect-ratio:9/16; max-width:100%; }
.film-frame { position:relative; width:100%; height:100%; aspect-ratio:9/16; background:var(--surface); border-radius:18px; overflow:hidden; box-shadow:0 18px 46px -30px rgba(26,24,21,.3); }
#office-video,#scene-fallback { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
#scene-fallback { z-index:1; }
#office-video { z-index:2; }
body[data-scene-mode="stills"] #office-video,body[data-scene-mode="fallback"] #office-video { visibility:hidden; }
.frame-corners { position:absolute; inset:0; z-index:3; border:1px solid var(--line); border-radius:18px; pointer-events:none; }
.film-margin { position:absolute; right:-25px; top:0; bottom:0; display:flex; align-items:center; justify-content:space-between; writing-mode:vertical-rl; font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--muted); }
.layout-rule { position:absolute; top:17%; left:48%; bottom:17%; width:1px; background:var(--line); }
.scroll-track { height:600vh; height:600svh; }
.scroll-note { position:fixed; left:var(--edge); bottom:163px; display:flex; align-items:center; gap:21px; font-size:16px; letter-spacing:.05em; color:var(--muted); pointer-events:none; }
.scroll-note svg { width:12px; height:25px; }
.journey-controls { position:fixed; z-index:7; left:var(--edge); right:var(--edge); bottom:max(16px,env(safe-area-inset-bottom)); outline:none; }
.progress-row { display:flex; align-items:center; gap:24px; height:36px; }
.progress-label { color:var(--muted); font-size:16px; white-space:nowrap; }
#journey-progress { --progress:0%; flex:1; min-width:0; height:36px; margin:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
#journey-progress::-webkit-slider-runnable-track { height:1px; background:linear-gradient(90deg,var(--accent) 0% var(--progress),var(--line) var(--progress) 100%); }
#journey-progress::-moz-range-track { height:1px; background:var(--line); }
#journey-progress::-moz-range-progress { height:1px; background:var(--accent); }
#journey-progress::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:11px; height:11px; border-radius:50%; margin-top:-5px; background:var(--accent); }
#journey-progress::-moz-range-thumb { width:11px; height:11px; border-radius:50%; border:0; background:var(--accent); }
#journey-progress:focus-visible { outline-offset:-2px; }
#progress-percent { width:48px; text-align:right; font-family:var(--latin); font-weight:700; font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums; }
.control-row { display:flex; align-items:center; justify-content:space-between; min-height:49px; margin-top:3px; gap:24px; }
.chapter-navigation { display:flex; gap:34px; }
.chapter-link { display:flex; align-items:center; gap:10px; padding:8px 0; min-height:44px; font-size:18px; color:var(--muted); line-height:1.5; letter-spacing:.07em; }
.chapter-number { font-family:var(--latin); font-weight:900; font-size:11px; letter-spacing:.07em; }
.chapter-link.is-active { color:var(--ink); }
.chapter-link.is-active .chapter-number { color:var(--accent); }
.chapter-link:hover { color:var(--accent); }
.control-caption { color:var(--muted); font-size:16px; }
.autoplay-control { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 0 8px 10px; font-size:18px; white-space:nowrap; line-height:1.5; }
#play-symbol { fill:currentColor; stroke-width:.5; }
#pause-symbol { stroke-width:2; }
.no-js .site-header,.no-js .tour-layout,.no-js .scroll-track,.no-js .scroll-note,.no-js .journey-controls,.no-js .skip-link { display:none; }
.still-tour { width:min(100% - 48px,960px); margin:60px auto; }
.still-tour>header { margin-bottom:60px; }
.still-tour section { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin:70px 0; }
.still-tour img { display:block; width:100%; height:auto; }
.still-tour p,.still-tour a { font-size:18px; line-height:1.8; }
.still-tour h2 { font-size:40px; }
.still-tour a { text-decoration:underline; text-underline-offset:6px; }
@media(min-width:1800px) { .scene-description,.mode-control,.chapter-link,.autoplay-control { font-size:20px; } .text-button { font-size:22px; } }
@media(max-width:1100px) { .header-caption { display:none; } .tour-layout { column-gap:5vw; grid-template-columns:1fr 1fr; } .control-caption { display:none; } h1,h2 { font-size:clamp(40px,5.1vw,60px); } .layout-rule { left:47%; } .scene-description { max-width:330px; } }
@media(max-width:680px) and (orientation:portrait) {
  :root { --edge:24px; }
  .site-header { padding:18px var(--edge) 10px; gap:12px; }
  .site-brand { gap:9px; font-size:13.5px; letter-spacing:.02em; }
  .brand-name small { display:none; }
  .logo-mark { width:44px; height:21px; }
  .site-exit { display:none; }
  .header-caption { display:none; }
  .mode-control { font-size:16px; gap:7px; min-height:42px; padding-left:0; }
  .mode-control svg { width:18px; }
  .tour-layout { top:79px; bottom:139px; display:flex; flex-direction:column; align-items:center; gap:15px; }
  .film-area { order:0; height:calc(100% - 143px); max-height:calc((100vw - var(--edge) * 2) * 16 / 9); width:auto; max-width:100%; flex-shrink:0; }
  .film-margin { right:-19px; font-size:8px; }
  .narrative { order:1; width:100%; height:128px; flex-shrink:0; text-align:center; }
  .chapter-copy { top:0; transform:translateY(var(--copy-offset,0px)); }
  .eyebrow { display:none; }
  h1,h2 { font-size:clamp(26px,7vw,30px); line-height:1.35; letter-spacing:.015em; }
  h1 br,h2 br { display:none; }
  .scene-description { margin:8px auto 0; font-size:16px; line-height:1.5; letter-spacing:0; max-width:none; }
  .text-button { margin-top:12px; min-height:46px; padding:12px 26px; gap:12px; font-size:14px; }
  .scene-caption { display:inline-block; margin:14px 0 0; padding-left:0; border-left:0; font-size:16px; }
  .layout-rule,.scroll-note { display:none; }
  .journey-controls { bottom:max(12px,env(safe-area-inset-bottom)); }
  .progress-row { gap:12px; height:34px; }
  .progress-label { display:none; }
  .site-exit-compact { display:inline-flex; }
  .control-row { flex-wrap:wrap; gap:0; margin-top:0; }
  .chapter-navigation { width:100%; justify-content:space-between; gap:14px; }
  .chapter-link { font-size:16px; gap:8px; }
  .autoplay-control { margin-left:auto; min-height:38px; padding:4px 0; font-size:16px; }
  .control-caption { display:block; order:2; font-size:16px; max-width:calc(100% - 125px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .autoplay-control { order:3; }
  .still-tour section { grid-template-columns:1fr; gap:22px; }
  .still-tour h1 { font-size:34px; }
}
@media(max-width:360px) and (orientation:portrait) {
  :root { --edge:20px; }
  .site-signature { gap:7px; }
  .mode-control { gap:5px; }
  .mode-control svg { display:none; }
  .scene-description { font-size:16px; letter-spacing:-.015em; }
  .control-caption { font-size:16px; }
}
@media(max-height:680px) and (min-width:681px) {
  .site-header { padding-top:17px; }
  .tour-layout { top:90px; bottom:122px; }
  h1,h2 { font-size:clamp(38px,4.2vw,57px); line-height:1.3; }
  .eyebrow { margin-bottom:18px; }
  .scene-description { margin-top:18px; }
  .text-button { margin-top:19px; }
  .scene-caption { margin-top:26px; }
  .scroll-note { bottom:132px; }
  .journey-controls { bottom:10px; }
}
@media(max-height:560px) and (orientation:landscape) {
  :root { --edge:28px; }
  .site-header { padding:12px var(--edge) 0; }
  .site-signature { font-size:16px; gap:9px; }
  .door-mark { width:22px; height:28px; }
  .mode-control { font-size:16px; min-height:40px; padding-block:6px; }
  .tour-layout { top:65px; bottom:95px; grid-template-columns:1.05fr 1fr; column-gap:5vw; }
  .chapter-copy { top:49%; }
  .eyebrow { margin-bottom:10px; font-size:8px; }
  .eyebrow span { font-size:10px; }
  h1,h2 { font-size:32px; line-height:1.25; }
  .scene-description { margin-top:10px; font-size:16px; line-height:1.5; }
  .text-button { margin-top:10px; min-height:42px; padding:4px 0; font-size:16px; gap:23px; }
  .scene-caption { margin-top:16px; font-size:16px; }
  .scroll-note { display:none; }
  .journey-controls { bottom:max(7px,env(safe-area-inset-bottom)); }
  .progress-row { height:26px; }
  .progress-label { font-size:16px; }
  #journey-progress { height:30px; }
  .control-row { min-height:44px; margin-top:0; }
  .chapter-link,.autoplay-control { font-size:16px; }
  .chapter-navigation { gap:23px; }
  .film-margin { right:-17px; font-size:8px; }
  .layout-rule { top:9%; bottom:9%; }
}
@media(max-width:680px) and (max-height:620px) and (orientation:portrait) {
  .site-header { padding-top:12px; }
  .tour-layout { top:66px; bottom:126px; gap:10px; }
  .film-area { height:calc(100% - 48px); }
  .narrative { height:38px; }
  h1,h2 { font-size:26px; line-height:1.3; }
  .scene-description,.text-button,.scene-caption { display:none; }
  .journey-controls { bottom:max(7px,env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
.motion-paused *, .motion-paused *::before,.motion-paused *::after { transition:none!important; animation:none!important; }