/* 窗是屋子的重心；网页底色就是墙，SVG 里的墙留空。墙色、窗与"此刻"按同一节奏过渡（D-2026-10-05-32）。 */
@property --wall { syntax: '<color>'; inherits: true; initial-value: #3b3e39; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #efe9dc; }
@property --ink-muted { syntax: '<color>'; inherits: true; initial-value: #c7c3b8; }
@property --chip { syntax: '<color>'; inherits: true; initial-value: rgba(0, 0, 0, .25); }
:root {
  /* 没有脚本时的底色；有脚本时 wall-boot.js 在样式表之前就写好了第一帧的墙色 */
  --wall: #3b3e39;
  --ink: #efe9dc;
  --ink-muted: #c7c3b8;
  --chip: rgba(0, 0, 0, .25);
  --light-fade: 900ms;
  --ease-light: cubic-bezier(.45, 0, .25, 1);
  transition: --wall var(--light-fade) var(--ease-light), --ink var(--light-fade) var(--ease-light),
    --ink-muted var(--light-fade) var(--ease-light), --chip var(--light-fade) var(--ease-light);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--wall); color: var(--ink); font-family: var(--font-serif); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--focus-width) solid currentColor; outline-offset: 5px; }
.skip-link { position: absolute; left: -999px; top: 1rem; background: var(--ink); color: var(--wall); padding: .6rem 1rem; }
.skip-link:focus { left: 1rem; z-index: 20; }
.room-sign { position: absolute; top: 2.3rem; left: 3rem; z-index: 1; }
.room-sign h1 { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: .2em; }
.room-sign p { margin: .65rem 0 0; font-family: var(--font-sans); font-size: .62rem; letter-spacing: .18em; color: var(--ink-muted); }
.room { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); grid-template-areas: "art stage nav" "art now nav"; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 1.25rem 0 1.75rem; }

/* 窗 */
.stage-wrap { grid-area: stage; position: relative; height: min(82vh, 920px); height: min(calc(100dvh - 10rem), 920px); aspect-ratio: 4 / 5; max-width: 54vw;
  transition: opacity var(--stage-fade, 900ms) var(--ease-light), transform .8s var(--ease-light); transform-origin: 50% 0; pointer-events: none; }
/* 窗底空墙与“此刻”共用空间；装饰盒透传，只让现有交互目标接收点击。
   SVG 窗台物件（包括 ShadowRoot 内）已有 .e-sill-target 的 pointer-events:all。 */
.stage-wrap button, .stage-wrap [role="link"] { pointer-events: auto; }
.stage-wrap svg.stage { display: block; width: 100%; height: 100%; }
.stage-wrap svg.stage .wall-in { fill: none; }                 /* 墙由网页底色负责，过渡时没有接缝 */
.stage-wrap svg.stage[data-pending] { position: absolute; inset: 0; visibility: hidden; }
.stage-wrap .stage-ghost { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.js .stage-wrap.is-veiled { opacity: 0; }

/* 此刻 */
.now { grid-area: now; text-align: center; padding: .1rem 1rem 0; width: min(44rem, 54vw);
  transition: opacity .8s var(--ease-light), transform .8s var(--ease-light); }
.js .now.is-veiled { opacity: 0; transition-duration: .35s, .8s; }
.now-line1 { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.375rem); line-height: 1.8; letter-spacing: .035em; text-wrap: pretty; }
.now-line2 { margin: .65rem auto 0; max-width: 40em; font-size: .76rem; line-height: 1.9; color: var(--ink-muted); font-family: var(--font-sans); }
.now-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1.6rem; margin-top: .3rem; }
.tool-link { min-height: 44px; padding: .5rem .2rem; border: 0; background: none; color: var(--ink-muted); font-family: var(--font-sans); font-size: .7rem; letter-spacing: .05em; cursor: pointer; text-underline-offset: .32em; }
.tool-link:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
.tool-link:disabled { cursor: default; text-decoration: none; }
.location-button:disabled { cursor: wait; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.choose { margin-top: .4rem; font-family: var(--font-sans); font-size: .875rem; }
.choose-q { margin: 0 0 .5rem; }
.choose-alt { margin: 0; }

/* 你在哪里（D-36）：问句、选过的城市、城市搜索。都是安静的小字，不用框。 */
.place-line { margin: .35rem 0 0; font-family: var(--font-sans); font-size: .68rem; letter-spacing: .05em; color: var(--ink-muted); opacity: .82; }
.place-link { min-height: 32px; padding: .3rem .15rem; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; text-decoration-color: var(--ink-muted); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.place-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.place-ask { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 1.1rem; margin: .9rem auto 0; max-width: 36rem; font-family: var(--font-sans); }
.place-q { margin: 0; font-size: .82rem; letter-spacing: .04em; line-height: 1.8; color: var(--ink); }
.place-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .45rem; }
.place-dot { color: var(--ink-muted); font-size: .72rem; }
.place-search { flex: 0 1 18rem; margin: .2rem auto 0; max-width: 18rem; }
.place-input { width: 100%; padding: .55rem .2rem .45rem; border: 0; border-bottom: 1px solid var(--ink-muted); border-bottom-color: color-mix(in srgb, var(--ink-muted) 60%, transparent); border-radius: 0; background: transparent; color: var(--ink); font: .85rem/1.6 var(--font-serif); letter-spacing: .06em; text-align: center; outline: none; -webkit-appearance: none; appearance: none; }
.place-input::placeholder { color: var(--ink-muted); opacity: .75; }
.place-input:focus { border-bottom-color: var(--ink); }
.place-input:focus-visible { outline: none; }
.place-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.place-results { list-style: none; margin: .35rem 0 0; padding: 0; }
.place-result { display: inline-flex; align-items: baseline; justify-content: center; gap: .45rem; min-height: 40px; padding: .4rem .3rem; border: 0; background: none; color: var(--ink); font: .85rem/1.5 var(--font-serif); letter-spacing: .05em; cursor: pointer; text-underline-offset: .32em; }
.place-result:hover, .place-result:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; }
.place-result:focus-visible { outline-offset: 2px; }
.place-en { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .04em; color: var(--ink-muted); }
.place-region { font-family: var(--font-sans); font-size: .68rem; color: var(--ink-muted); }
.place-note { margin: .3rem 0 0; min-height: 1.2em; font-size: .72rem; line-height: 1.7; color: var(--ink-muted); }
.place-note:empty { min-height: 0; }
.place-tools { margin: 0; }
.choose-note { margin: .75rem auto 0; max-width: 31em; color: var(--ink-muted); font-size: .75rem; line-height: 1.8; }
.btn { color: inherit; background: var(--chip); border: 1px solid currentColor; border-radius: 0; padding: .65rem 1rem; min-height: 44px; cursor: pointer; margin: .25rem; }

/* 导航 */
.room-nav { grid-area: nav; align-self: start; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; padding: .55rem 3rem 1rem 1rem; font-family: var(--font-sans); font-size: .8rem; }
.sky-toggle { display: flex; flex-wrap: nowrap; align-items: center; gap: .85rem; white-space: nowrap; margin-bottom: 1.2rem; }
.seg { color: var(--ink-muted); background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: .55rem 0; min-height: 44px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.seg[aria-pressed="true"] { color: var(--ink); border-bottom-color: currentColor; }
.nav-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: .3rem 0; text-underline-offset: .45em; }
.nav-link:hover { text-decoration: underline; }
.nav-pages { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }

/* 墙上的画 */
.wall-art { grid-area: art; display: flex; flex-direction: column; gap: 2.25rem; padding: 7rem 1.5rem 1rem; align-self: center; transition: transform .8s var(--ease-light); }
.wall-art a { display: block; color: inherit; text-decoration: none; text-align: center; font-size: .77rem; letter-spacing: .06em; line-height: 1.7; animation: hang 1.1s var(--ease-light) both; }
.wall-art img { display: block; width: clamp(100px, 11vw, 165px); height: auto; background: #ece6d8; padding: 7px; border: 1px solid var(--ink-muted); margin: 0 auto .8rem; }
.wall-art a:hover span { text-decoration: underline; text-underline-offset: .3em; }
@keyframes hang { from { opacity: 0; } }

/* 窗那边：墙上的一排小窗（桌面贴着底边浮现，窗退后一步让位） */
.elsewhere { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 0 .9rem; opacity: 0; visibility: hidden; transform: translateY(18px); pointer-events: none;
  transition: opacity .7s var(--ease-light), transform .8s var(--ease-light), visibility 0s linear .8s; }
.tray-open .elsewhere { opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .9s var(--ease-light) .12s, transform .9s var(--ease-light) .12s, visibility 0s; }
.tray-open .stage-wrap { transform: translateY(var(--tray-stage-y, 0px)) scale(var(--tray-scale, 1)); }
.tray-open .now { transform: translateY(var(--tray-now-y, 0px)); }
.tray-open .wall-art { transform: translateY(var(--tray-art-y, 0px)); }
.elsewhere-inner { display: flex; flex-direction: column; }
/* 收起：小窗排右上角一行很淡的字，带一个向下的小折角 */
.elsewhere-close { align-self: flex-end; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin: 0 2.7rem -.7rem 0; padding: .45rem .4rem; border: 0; background: none; color: var(--ink-muted); font-family: var(--font-sans); font-size: .66rem; letter-spacing: .16em; cursor: pointer; }
.elsewhere-close::after { content: ""; width: .38rem; height: .38rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-.14rem) rotate(45deg); }
.elsewhere-close:hover, .elsewhere-close:focus-visible { color: var(--ink); }
.elsewhere-row { list-style: none; margin: 0; padding: .55rem 3rem .25rem; display: flex; gap: clamp(.8rem, 1.45vw, 1.45rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.elsewhere-row::-webkit-scrollbar { display: none; }
.elsewhere-row li { flex: 0 0 auto; scroll-snap-align: center; }
.elsewhere-row li:first-child { margin-left: auto; }
.elsewhere-row li:last-child { margin-right: auto; }
.pane { --pane-w: clamp(54px, 5vw, 80px); width: var(--pane-w); display: flex; flex-direction: column; align-items: center; gap: .28rem; padding: .25rem 0 .15rem; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pane-img { position: relative; display: block; width: 100%; aspect-ratio: 1024 / 1160; }
.pane-img::before { content: ""; position: absolute; left: 4%; right: 4%; top: 1%; bottom: 10%; border: 1px solid currentColor; opacity: .2; transition: opacity .9s var(--ease-light); }
.pane-img.is-ready::before { opacity: 0; }
.pane-img.is-missing::before { opacity: .32; border-style: dashed; }
.pane-img img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--ease-light), transform .6s var(--ease-light); }
.pane-img.is-ready img { opacity: 1; }
.pane:hover .pane-img img, .pane:focus-visible .pane-img img { transform: translateY(-3px); }
.pane-name { font-size: .7rem; letter-spacing: .12em; line-height: 1.5; white-space: nowrap; text-underline-offset: .5em; text-decoration-thickness: 1px; }
.pane-time { font-family: var(--font-sans); font-size: .6rem; letter-spacing: .04em; line-height: 1.3; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pane[aria-current="true"] .pane-name { text-decoration: underline; }
.pane:focus-visible { outline: var(--focus-width) solid currentColor; outline-offset: 4px; }

/* 离屏画小窗用；不显示 */
.offscreen { position: fixed; left: -5000px; top: 0; width: 1200px; height: 1500px; overflow: hidden; pointer-events: none; visibility: hidden; contain: strict; }

.preview-banner, .load-error { max-width: calc(100vw - 2rem); margin: 0; padding: .35rem .7rem; background: var(--ink); color: var(--wall); font-family: var(--font-sans); font-size: .67rem; line-height: 1.6; overflow-wrap: anywhere; }
/* 预览说明跟在正文后面，滚动时也不遮挡“此刻”；正式访客仍由 hidden 隐藏。 */
.preview-banner { width: fit-content; margin: 0 1rem .7rem; }
.load-error { position: fixed; right: 1rem; bottom: .7rem; z-index: 5; }
.noscript { padding: 4rem 1rem; line-height: 1.8; }
@media (max-width: 1100px) {
  .room-sign { top: 1.5rem; left: 1.5rem; }
  .room-sign h1 { font-size: 1.1rem; }
  .room-nav { padding-right: 1.5rem; }
  .stage-wrap { max-width: 58vw; }
  .now { width: 58vw; }
  .wall-art { padding-inline: .9rem; }
  .elsewhere-row { padding-inline: 1.5rem; }
  .elsewhere-close { margin-right: 1.2rem; }
}
@media (max-width: 760px), (max-aspect-ratio: 3/4) {
  .room-sign { position: static; padding: 1.6rem 1.5rem 0; }
  .room-sign h1 { font-size: 1.1rem; }
  .room-sign p { font-size: .55rem; margin-top: .4rem; }
  .room { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; grid-template-areas: "nav" "stage" "tray" "now" "art"; padding: 0 0 3.5rem; }
  .room-nav { width: 100%; padding: .75rem 1.5rem .25rem; justify-self: stretch; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 1.2rem; }
  .sky-toggle { grid-column: 1; margin: 0; gap: 1.2rem; }
  .nav-pages { flex-direction: row; align-items: center; gap: 1.5rem; }
  .nav-link { font-size: .76rem; }
  .stage-wrap { width: min(100vw, 36rem); height: auto; max-width: 100%; aspect-ratio: 4/5; }
  .now { width: 100%; max-width: 36rem; padding: .3rem 1.5rem 0; }
  .now-line1 { font-size: 1.15rem; line-height: 1.8; }
  .now-line2 { font-size: .73rem; margin-top: .7rem; }
  .wall-art { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1.5rem; padding: 2rem 1rem 0; }
  .wall-art img { width: min(36vw, 150px); }
  /* 手机：一排小窗在窗下展开成一条可横滑的窄带 */
  /* 窗的 SVG 底部约六分之一是空墙；展开时这一排往上靠进那段空墙，贴着窗台 */
  .elsewhere { grid-area: tray; position: relative; z-index: 1; width: 100%; padding: 0; margin-top: 0; transform: none; display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .75s var(--ease-light), margin-top .75s var(--ease-light), opacity .6s var(--ease-light), visibility 0s linear .75s; }
  .tray-open .elsewhere { grid-template-rows: 1fr; transform: none; margin-top: calc(min(100vw, 36rem) * -.17);
    transition: grid-template-rows .75s var(--ease-light), margin-top .75s var(--ease-light), opacity .8s var(--ease-light) .15s, visibility 0s; }
  .elsewhere-inner { min-height: 0; overflow: hidden; }
  .elsewhere-close { margin: .1rem 1.2rem -.8rem 0; }
  .elsewhere-row { padding: .7rem 1.5rem .5rem; scroll-snap-type: x mandatory; scroll-padding-inline: 1.5rem; }
  .elsewhere-row li:first-child { margin-left: 0; }
  .elsewhere-row li:last-child { margin-right: 0; padding-right: 1.5rem; }
  .pane { --pane-w: 66px; }
  .tray-open .stage-wrap, .tray-open .now, .tray-open .wall-art { transform: none; }
}
/* 静止：系统要求减少动态，或访客点了"让窗外静止" */
:root.still, :root.still *, :root.still *::before, :root.still *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :root { transition: none; }
}