/* ==========================================================================
   wy-x.com — Maison Isabel
   A Parisian building in section. One floor at a time; the lift moves you.
   ========================================================================== */
:root {
  color-scheme: light;
  --paper: #f4efe6;
  --paper-2: #ebe3d5;
  --ink: #221e1b;
  --ink-2: #6a6058;
  --gilt: #a7864d;
  --gilt-hi: #dcc38c;
  --gilt-lo: #7a5c2b;
  --rouge: #8e2f28;
  --led: #ff6a3d;
  --panel: #141414;
  --top-ink: var(--ink);
  --top-bg: rgba(244, 239, 230, .72);

  --f-serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --f-zh: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-hand: "Caveat", "Long Cang", cursive;
  --f-hand-zh: "Long Cang", "Caveat", "Kaiti SC", "STKaiti", cursive;
  --f-stencil: "Big Shoulders Stencil Display", "IBM Plex Mono", monospace;

  /* legacy names used by reused components */
  --dark-bg: #0e0a09; --dark-ink: #ead8cf; --dark-dim: #8f7c77; --safelight: #c4291b;
  --found-bg: #d8cfbe; --found-ink: #2e2a24; --lab-bg: #f0eee9; --lab-grid: #dcd8d0; --lab-ink: #1d1d1d;
  --live: #2f8f5b; --oak: #8a6444; --oak-2: #5a3f29; --lib-bg: #2f3d34; --brick: #9e4d49;
  --f-display: var(--f-serif);
  --f-body: var(--f-serif);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-serif); font-size: 19px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
html[data-lang="zh"] body { font-family: var(--f-zh); font-size: 16px; }
html[data-lang="zh"] body [lang="en"] { display: none !important; }
html[data-lang="en"] body [lang="zh"] { display: none !important; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 12px; }
.skip:focus { left: 16px; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: 16px; box-sizing: border-box; position: relative; z-index: 2; }
@media (min-width: 900px) { .wrap { padding-inline: 48px; } }
.eyebrow { margin: 0; font-family: var(--f-serif); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: .3; } }

/* one floor at a time */
.js .floor { display: none; }
.js .floor.is-active { display: block; }
.floor { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }

/* ---------- top bar ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40; pointer-events: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0; color: var(--top-ink); transition: color .6s;
}
.top > * { pointer-events: auto; }
.brand { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--f-serif); font-style: italic; font-size: 24px; letter-spacing: .02em; color: inherit; }
.top-r { display: flex; gap: 8px; align-items: center; }
.sound-btn, .lang {
  height: 32px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 16px; background: var(--top-bg);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sound-btn { width: 40px; display: grid; place-items: center; cursor: pointer; color: inherit; }
.sb-bars { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.sb-bars i { width: 2px; height: 5px; background: currentColor; opacity: .55; }
.sb-bars i:nth-child(2) { height: 9px; } .sb-bars i:nth-child(3) { height: 6px; }
.sound-btn[aria-pressed="true"] .sb-bars i { background: var(--gilt); opacity: 1; animation: eq 1s ease-in-out infinite; }
.sound-btn[aria-pressed="true"] .sb-bars i:nth-child(2) { animation-delay: .2s; }
.sound-btn[aria-pressed="true"] .sb-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 50% { height: 12px; } }
.lang { display: flex; overflow: hidden; }
.lang button { background: none; border: 0; cursor: pointer; padding: 0 12px; font-family: var(--f-serif); font-size: 14px; color: inherit; opacity: .55; }
.lang button[aria-pressed="true"] { opacity: 1; font-weight: 600; }
body[data-floor="library"], body[data-floor="theatre"], body[data-floor="darkroom"], body[data-floor="bar"] { --top-ink: #efe6d6; --top-bg: rgba(20, 16, 14, .45); }

/* ---------- call button (the only way between floors) ---------- */
.call {
  position: fixed; z-index: 42; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 12px; cursor: pointer;
  background: linear-gradient(145deg, var(--gilt-hi), var(--gilt) 55%, var(--gilt-lo));
  border: 1px solid #5a4520; border-radius: 40px;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55);
  transition: opacity .4s, transform .4s;
}
.call-led { background: #0b0b0c; color: var(--led); font-family: var(--f-mono); font-size: 13px; padding: 3px 9px; border-radius: 12px; min-width: 3.4ch; text-align: center; text-shadow: 0 0 8px rgba(255,106,61,.6); }
.call-knob {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; gap: 1px;
  background: radial-gradient(circle at 38% 32%, #fff6dc, #d4b574 55%, #8a6a36);
  box-shadow: inset 0 0 0 2px #6d5427, 0 1px 0 rgba(255,255,255,.4);
  color: #4a3818; font-size: 8px; line-height: 1; transition: box-shadow .2s, color .2s;
}
.call-knob i { font-style: normal; }
.call:hover .call-knob, .call:focus-visible .call-knob { color: var(--led); box-shadow: inset 0 0 0 2px var(--led), 0 0 16px rgba(255,106,61,.65); }
body.modal .call { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* ---------- common room head ---------- */
.room-head { display: grid; gap: 10px; padding-top: calc(env(safe-area-inset-top, 0px) + 96px); margin-bottom: 44px; max-width: 780px; }
.rh-num { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 16px; letter-spacing: .04em; opacity: .75; }
.rh-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 20px; font-weight: 400; }
.rh-zh { font-family: var(--f-zh); font-weight: 600; font-size: clamp(34px, 4.6vw, 52px); letter-spacing: .3em; line-height: 1.15; }
.rh-en { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.1; }
html[data-lang="en"] .rh-en { font-style: normal; font-size: clamp(46px, 6.4vw, 78px); }
.rh-fr { margin: 0; font-family: var(--f-serif); font-size: 13px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--gilt); }
.rh-note { margin: 0; max-width: 34em; line-height: 1.85; opacity: .86; }
.rh-rule { width: 64px; height: 1px; background: var(--gilt); margin: 4px 0; }

/* ---------- landing (next / previous floor) ---------- */
.landing { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; padding: 64px 16px 110px; }
.landing-btn {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer; background: none; color: inherit;
  border: 1px solid currentColor; border-radius: 2px; padding: 11px 18px;
  font-family: var(--f-serif); font-size: 16px; letter-spacing: .06em; transition: background .25s, color .25s, border-color .25s;
}
html[data-lang="zh"] .landing-btn { font-family: var(--f-zh); font-size: 14px; }
.landing-btn b { font-family: var(--f-mono); font-weight: 400; font-size: 12px; opacity: .7; }
.landing-btn:hover { border-color: var(--gilt); color: var(--gilt); }
.landing-doors { width: 34px; height: 46px; border: 1px solid currentColor; position: relative; opacity: .6; }
.landing-doors::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid currentColor; }

/* ---------- buttons ---------- */
.btn-gilt {
  cursor: pointer; border: 1px solid #6d5427; border-radius: 2px; padding: 11px 22px; color: #2a1f0c;
  background: linear-gradient(145deg, #e6cf98, var(--gilt) 60%, var(--gilt-lo));
  font-family: var(--f-serif); font-weight: 600; font-size: 16px; letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 20px -12px rgba(0,0,0,.5);
}
html[data-lang="zh"] .btn-gilt { font-family: var(--f-zh); font-size: 14px; letter-spacing: .2em; }
.btn-gilt:hover { filter: brightness(1.06); }
.btn-line { cursor: pointer; background: none; border: 1px solid currentColor; color: inherit; border-radius: 2px; padding: 8px 14px; font-family: var(--f-serif); font-size: 14px; letter-spacing: .08em; }
html[data-lang="zh"] .btn-line { font-family: var(--f-zh); font-size: 13px; }
.btn-line:hover { color: var(--gilt); border-color: var(--gilt); }

/* ==========================================================================
   THE LIFT — full screen
   ========================================================================== */
.lift { position: fixed; inset: 0; z-index: 80; overflow: hidden; }
.lift-door {
  position: absolute; top: 0; bottom: 0; width: 50.3%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #676b70, #999da2 38%, #7d8186 66%, #5e6267);
  transition: transform .95s cubic-bezier(.65, 0, .25, 1);
}
.lift-door::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0, rgba(255,255,255,.16) 50%, transparent 100%) 0 var(--sheen, -9999px) / 100% 40% no-repeat;
}
.lift-door.l { left: 0; transform: translateX(-101%); box-shadow: inset -1px 0 0 #34363a, 14px 0 40px rgba(0,0,0,.25); }
.lift-door.r { right: 0; transform: translateX(101%); box-shadow: inset 1px 0 0 #c9ccd0, -14px 0 40px rgba(0,0,0,.25); }
.lift.shut .lift-door { transform: none; }
.lift-door { translate: 0 var(--shake, 0px); }
.lift-slit {
  position: absolute; top: 26%; height: 42%; width: clamp(10px, 1.4vw, 22px); border: 1px solid #2a2b2e;
  background:
    repeating-linear-gradient(180deg, transparent 0 150px, rgba(255, 196, 150, .8) 150px 152px, #3a3b3f 152px 172px, transparent 172px 300px),
    linear-gradient(90deg, #0a0a0b, #1c1d20 50%, #0a0a0b);
  background-position: 0 var(--shift, 0px), 0 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,.85);
}
.lift-door.l .lift-slit { right: 9%; } .lift-door.r .lift-slit { left: 9%; }
.lift-head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
  background: linear-gradient(180deg, #0c0c0d, #19191b);
  border-bottom: 2px solid var(--gilt); box-shadow: 0 1px 0 #3c3018, 0 16px 40px rgba(0,0,0,.45);
  transform: translateY(-104%); transition: transform .7s var(--ease);
}
.lift.ui .lift-head { transform: none; }
.lf-display { display: grid; gap: 10px; justify-items: center; }
.lf-main { display: flex; gap: 18px; align-items: baseline; font-family: var(--f-mono); color: var(--led); text-shadow: 0 0 14px rgba(255,106,61,.6); }
.lf-arrow { font-size: 16px; width: 1ch; text-align: center; }
.lf-code { font-size: clamp(40px, 6vw, 64px); line-height: 1; min-width: 3ch; text-align: center; }
.lf-code.blink { animation: blink .45s steps(2) 5; }
.lf-el { font-size: 15px; color: #d8a48e; text-shadow: none; min-width: 7.5ch; font-variant-numeric: tabular-nums; }
.lf-strip { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.lf-strip span { font-family: var(--f-mono); font-size: 11px; padding: 2px 6px; color: #5c3423; border: 1px solid #2e1c14; border-radius: 2px; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.lf-strip .passed { color: #b0603f; border-color: #6a311d; }
.lf-strip .dest { color: var(--led); border-color: var(--led); animation: blink 1s steps(2) infinite; }
.lf-strip .on { color: #1a0b06; background: var(--led); border-color: var(--led); box-shadow: 0 0 12px rgba(255,106,61,.7); animation: none; }
.lf-msg { min-height: 16px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; color: #d8a48e; white-space: nowrap; }
.cop {
  position: absolute; z-index: 2; right: max(16px, 4vw); top: 54%; transform: translate(130%, -50%);
  display: grid; gap: 10px; padding: 16px 16px 18px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #8e9297, #5c6065 55%, #45484d);
  border: 1px solid #111; border-radius: 4px; outline: 1px solid var(--gilt); outline-offset: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 26px 50px -20px rgba(0,0,0,.8);
  transition: transform .7s var(--ease);
}
.lift.ui .cop { transform: translate(0, -50%); }
.cop-brand { font-family: var(--f-mono); font-size: 8px; letter-spacing: .3em; color: #e0e2e4; opacity: .75; text-align: center; }
.cop-floors { display: grid; gap: 8px; }
.cop-item { display: grid; grid-template-columns: 40px auto; align-items: center; gap: 12px; }
.cop-name { font-family: var(--f-zh); font-size: 13px; letter-spacing: .2em; color: #eceae6; white-space: nowrap; }
html[data-lang="en"] .cop-name { font-family: var(--f-serif); font-size: 15px; letter-spacing: .04em; }
.cop-item.is-here .cop-name { color: var(--gilt-hi); }
.cop-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  color: #d7d2cd; font-family: var(--f-mono); font-size: 11px;
  background: radial-gradient(circle at 40% 35%, #5d6066, #1f2123 72%);
  box-shadow: inset 0 0 0 2px #0f1011, inset 0 0 0 3px rgba(167,134,77,.55), 0 1px 0 rgba(255,255,255,.18);
  transition: box-shadow .15s, color .15s;
}
.cop-btn:hover:not(:disabled) { color: var(--led); box-shadow: inset 0 0 0 2px var(--led); }
.cop-btn.lit { color: var(--led); box-shadow: inset 0 0 0 2px var(--led), 0 0 16px rgba(255,106,61,.65); }
.cop-btn:disabled { opacity: .35; cursor: default; }
.cop-row { display: flex; gap: 8px; justify-content: center; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.cop-btn.sm { width: 32px; height: 32px; font-size: 10px; letter-spacing: -.1em; }
.cop-btn.bell { color: #f2c230; }
.lift-exit {
  position: absolute; z-index: 2; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translate(-50%, 200%);
  background: rgba(12,12,13,.75); border: 1px solid var(--gilt); color: #eadfca; border-radius: 2px; padding: 9px 16px; cursor: pointer;
  font-family: var(--f-serif); font-size: 15px; letter-spacing: .1em; transition: transform .7s var(--ease);
}
.lift.ui .lift-exit { transform: translate(-50%, 0); }
.lift.riding .lift-exit, .lift.riding .cop-row { visibility: hidden; }
@media (max-width: 700px) {
  .cop { right: 12px; left: 12px; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); transform: translateY(160%); padding: 12px; }
  .lift.ui .cop { transform: none; }
  .cop-floors { grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
  .cop-item { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  .cop-name { font-size: 10px; letter-spacing: .1em; }
  html[data-lang="en"] .cop-name { font-size: 11px; }
  .cop-btn { width: 36px; height: 36px; }
  .lf-strip span { padding: 2px 4px; font-size: 10px; }
  .lift-slit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lift-door, .lift-head, .cop, .lift-exit { transition-duration: .01s; }
}

/* ---------- LIBRARY ---------- */
.shelf-room { --u: 1px; position: relative; }
@media (max-width: 720px) { .shelf-room { --u: .62px; } }
.shelf-scroll { overflow-x: auto; overflow-y: visible; padding-top: 60px; margin-top: -60px; scrollbar-width: none; }
.shelf-scroll::-webkit-scrollbar { display: none; }
.shelf {
  display: flex; align-items: flex-end; justify-content: center; gap: calc(4 * var(--u));
  min-width: max-content; padding-inline: 24px;
  perspective: 1400px; perspective-origin: 50% 30%;
}
.book {
  --h: calc(300 * var(--u));
  --tw: calc(var(--t) * var(--u));
  --cw: calc(var(--h) * var(--ar));
  position: relative; width: var(--tw); height: var(--h);
  padding: 0; border: 0; background: none; cursor: pointer;
  transform-style: preserve-3d;
  flex: 0 0 auto;
}
.book-3d {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .55s var(--ease);
  transform-origin: 50% 100%;
}
.book:hover, .book:focus-visible, .book.is-peek { z-index: 5; }
.book:hover .book-3d, .book:focus-visible .book-3d, .book.is-peek .book-3d {
  transform: translateY(calc(-22 * var(--u))) translateZ(calc(70 * var(--u))) rotateY(-56deg);
}
.book:focus-visible { outline: none; }
.book:focus-visible .b-spine { outline: 2px solid var(--led); outline-offset: 2px; }
.book.is-out .book-3d { transform: translateY(-40px) translateZ(120px); opacity: 0; transition: transform .35s, opacity .2s .15s; }
.b-spine, .b-cover {
  position: absolute; top: 0; height: 100%; box-sizing: border-box;
  backface-visibility: hidden;
}
.b-spine {
  left: 0; width: var(--tw);
  background: linear-gradient(90deg, rgba(0,0,0,.14), rgba(255,255,255,.08) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.18)), var(--c);
  color: var(--ink2, #111);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(14 * var(--u)) 0 calc(12 * var(--u));
  overflow: hidden;
}
.spine-title {
  writing-mode: vertical-rl; font-family: var(--f-display); letter-spacing: .12em;
  font-size: calc(min(15, var(--t) * .5) * var(--u)); white-space: nowrap; line-height: 1;
}
.spine-vol { writing-mode: vertical-rl; font-family: var(--f-mono); font-size: calc(9 * var(--u)); letter-spacing: .1em; opacity: .8; white-space: nowrap; }
.b-cover {
  left: var(--tw); width: var(--cw);
  transform-origin: 0 50%; transform: rotateY(90deg);
  background: var(--c); overflow: hidden;
  box-shadow: inset 3px 0 6px rgba(0,0,0,.2);
}
.b-cover > * { position: absolute; inset: 0; }
.b-cover img { width: 100%; height: 100%; object-fit: cover; }
.b-top {
  position: absolute; left: 0; top: 0; width: var(--tw); height: var(--cw);
  transform-origin: 0 0; transform: rotateX(90deg) translateY(-100%);
  background: repeating-linear-gradient(90deg, #f4f1ea 0 1px, #ddd8cf 1px 2px);
  backface-visibility: hidden;
}
.book.pending .b-spine {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 6px), #efeeea;
  border: 1px dashed #a9a6a0; color: #7a7873;
}
.book.pending .b-cover { background: #efeeea; }
.bookend {
  width: calc(8 * var(--u)); height: calc(170 * var(--u)); flex: 0 0 auto; margin-left: calc(10 * var(--u));
  background: linear-gradient(90deg, #2d2e30, #55575a 50%, #2a2b2d);
  border-radius: 1px 1px 0 0;
}
.shelf-board {
  position: relative; height: 20px;
  background: linear-gradient(180deg, #a57b55 0, var(--oak) 30%, var(--oak-2));
  box-shadow: 0 14px 22px -8px rgba(60,40,20,.45);
  margin-inline: -8px;
}
.shelf-plate {
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .24em; color: #f1e6d8; opacity: .85; white-space: nowrap;
}
.shelf-caption {
  min-height: 132px; padding-top: 28px;
  display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center;
}
.cap-vol { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--ink-2); }
.cap-title { font-family: var(--f-display); font-size: 30px; line-height: 1.1; letter-spacing: .06em; }
.cap-title .zh { font-family: var(--f-zh); font-size: 22px; letter-spacing: .42em; margin-left: 14px; font-weight: 600; }
.cap-sub { font-size: 15px; color: var(--ink-2); }
.cap-idle { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; color: var(--ink-2); }
.cap-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; color: var(--ink-2); margin: 4px 0 0; padding: 0; list-style: none; }
.cap-chapters li::before { content: counter(ch, decimal-leading-zero) " "; counter-increment: ch; font-family: var(--f-mono); font-size: 11px; opacity: .7; }
.cap-chapters { counter-reset: ch; }


/* ---------- COVERS & PAGES (shared) ---------- */
.cover-gen { position: absolute; inset: 0; background: var(--c); color: var(--ink2); container-type: size; font-family: var(--f-display); }
.cover-gen .cg-title { position: absolute; left: 0; right: 0; top: 7cqh; text-align: center; font-size: 12cqw; letter-spacing: .02em; line-height: 1; font-weight: 400; transform: scaleX(.86); }
.cover-gen .cg-vol { position: absolute; left: 0; right: 0; bottom: 14cqh; text-align: center; font-size: 5.4cqw; font-weight: 700; letter-spacing: .02em; }
.cover-gen .cg-sub { position: absolute; left: 20%; right: 20%; bottom: 7.5cqh; text-align: center; font-family: var(--f-body); font-size: 3.2cqw; font-weight: 600; line-height: 1.35; }
.cover-gen.shift .cg-title { top: 4cqh; left: 6cqw; right: auto; text-align: left; font-size: 30cqw; font-weight: 900; letter-spacing: -.02em; transform: scaleX(.78); transform-origin: 0 0; line-height: .85; }
.cover-gen.shift .cg-rule { position: absolute; left: 50%; top: 30cqh; bottom: 18cqh; border-left: 1px solid currentColor; }
.cover-gen.shift .cg-rule::before { content: ""; position: absolute; left: -9cqw; top: 0; bottom: 0; border-left: 1px dashed currentColor; opacity: .7; }
.cover-gen.shift .cg-vol { left: 56cqw; right: 6cqw; bottom: 12cqh; text-align: left; font-size: 3cqw; font-family: var(--f-body); font-weight: 600; }
.cover-gen.shift .cg-sub { left: 56cqw; right: 6cqw; bottom: 6cqh; text-align: left; font-family: var(--f-zh); font-size: 5cqw; letter-spacing: .1em; }
.cover-gen.blank { background: repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 12px), #efeeea; color: #7a7873; }
.cover-gen.blank .cg-title { font-size: 8cqw; letter-spacing: .3em; top: 42cqh; transform: none; }

.page { position: absolute; inset: 0; background: #fbfaf8; overflow: hidden; container-type: size; color: #2a2b2d; }
.page img { width: 100%; height: 100%; object-fit: cover; }
.page .guides { position: absolute; inset: 6.5cqh 10.3cqw 7cqh 12.9cqw; border: 1px solid rgba(214, 88, 178, .35); }
.page.verso .guides { left: 10.3cqw; right: 12.9cqw; }
.page .frame { position: absolute; background:
  linear-gradient(to top right, transparent calc(50% - .5px), rgba(0,0,0,.18) 50%, transparent calc(50% + .5px)),
  linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(0,0,0,.18) 50%, transparent calc(50% + .5px)),
  #ecebe7; border: 1px solid #c9c7c2; }
.page .lines { position: absolute; display: grid; gap: 1.6cqh; }
.page .lines i { display: block; height: .7cqh; background: #d6d4cf; }
.page .folio { position: absolute; bottom: 3.4cqh; font-family: var(--f-mono); font-size: 2.4cqw; letter-spacing: .1em; color: #8b8984; }
.page.recto .folio { right: 10.3cqw; }
.page.verso .folio { left: 10.3cqw; }
.page .pending-tag { position: absolute; left: 0; right: 0; top: 47cqh; text-align: center; font-family: var(--f-mono); font-size: 2.6cqw; letter-spacing: .2em; color: #9a9893; }
.page.title-page { display: grid; place-content: center; text-align: center; gap: 3cqh; }
.page .tp-vol { font-family: var(--f-mono); font-size: 3cqw; letter-spacing: .3em; color: #7c7a76; }
.page .tp-title { font-family: var(--f-display); font-size: 10cqw; letter-spacing: .12em; line-height: 1; }
.page .tp-zh { font-family: var(--f-zh); font-size: 5cqw; letter-spacing: .42em; font-weight: 600; }
.page .tp-by { font-family: var(--f-mono); font-size: 2.4cqw; letter-spacing: .24em; color: #7c7a76; margin-top: 6cqh; }
.page.toc { padding: 12cqh 10.3cqw 0 12.9cqw; box-sizing: border-box; }
.page .toc-h { font-family: var(--f-mono); font-size: 2.6cqw; letter-spacing: .3em; color: #7c7a76; margin: 0 0 8cqh; }
.page .toc-row { display: grid; grid-template-columns: 12cqw 1fr; gap: 2cqw; padding: 2.2cqh 0; border-top: 1px solid #d9d7d2; align-items: baseline; }
.page .toc-n { font-family: var(--f-display); font-size: 6cqw; }
.page .toc-zh { font-family: var(--f-zh); font-size: 3.8cqw; letter-spacing: .42em; font-weight: 600; }
.page .toc-en { display: block; font-family: var(--f-body); font-style: italic; font-size: 2.8cqw; color: #6f6d69; letter-spacing: 0; }
.page.back { background: var(--c); color: var(--ink2); display: grid; place-content: end center; padding-bottom: 8cqh; box-sizing: border-box; font-family: var(--f-mono); font-size: 2.4cqw; letter-spacing: .3em; }


/* ---------- VIEWER / FLIPBOOK ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255,226,180,.16), transparent 70%),
    rgba(20, 17, 14, .94);
  color: #efe9e2;
  animation: fadein .35s ease;
}
.viewer[hidden] { display: none; }
.viewer.closing { animation: fadeout .45s ease forwards; }
@keyframes fadeout { to { opacity: 0; } }
.viewer-top { display: flex; justify-content: space-between; align-items: start; gap: 16px; max-width: 1180px; width: 100%; margin-inline: auto; }
.viewer-top .eyebrow { color: #a59d95; }
.viewer-title { margin: 4px 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 3vw, 32px); letter-spacing: .06em; line-height: 1.15; }
.viewer-title .zh { font-family: var(--f-zh); font-size: .7em; letter-spacing: .42em; margin-left: 14px; font-weight: 600; }
.viewer-close {
  flex: 0 0 auto; background: none; border: 1px solid #5c5650; color: #efe9e2; border-radius: 3px;
  padding: 8px 12px; cursor: pointer; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em;
}
.viewer-close:hover { border-color: var(--led); color: var(--led); }
.viewer-stage { position: relative; perspective: 1800px; display: grid; place-items: center; min-height: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.viewer-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 12px; }
.fb-btn {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #2a2622; border: 1px solid #4a443e; color: #efe9e2;
  cursor: pointer; font-size: 16px;
}
.fb-btn:hover:not(:disabled) { border-color: var(--led); color: var(--led); }
.fb-btn:disabled { opacity: .3; cursor: default; }
#fbRange { flex: 0 1 360px; min-width: 60px; accent-color: var(--led); }
.fb-count { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; min-width: 9ch; flex: 0 0 auto; text-align: center; color: #bdb4ab; font-variant-numeric: tabular-nums; }
.viewer-hint { margin: 8px 0 0; text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: #8a827a; }

.fb { position: relative; perspective: 2600px; }
.fb-book { position: relative; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.fb-leaf { position: absolute; top: 0; transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
.fb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #fbfaf8; box-shadow: 0 24px 40px -22px rgba(0,0,0,.75); }
.fb-face.back { transform: rotateY(180deg); }
.fb-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,calc(var(--sh, 0) * .45)), rgba(0,0,0,calc(var(--sh, 0) * .12)) 60%, rgba(255,255,255,calc(var(--sh, 0) * .1)));
}
.fb-face.back::after { background: linear-gradient(270deg, rgba(0,0,0,calc(var(--sh, 0) * .45)), rgba(0,0,0,calc(var(--sh, 0) * .12)) 60%, rgba(255,255,255,calc(var(--sh, 0) * .1))); }
.fb-face .gutter { position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; z-index: 2; }
.fb-face.front .gutter { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.06) 40%, transparent); }
.fb-face.back .gutter { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,.06) 40%, transparent); }
.fb-face.is-cover .gutter { width: 3%; }
.fb.single .fb-face.back { background: #efece6; }


/* ---------- LAB ---------- */
.f-lab {
  background:
    linear-gradient(var(--lab-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--lab-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--lab-bg);
  color: var(--lab-ink);
}
.lab-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); perspective: 1200px; }
.exp {
  position: relative; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit;
  background: #fbfcfc; border: 1px solid #c6d0d5;
  transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
a.exp:hover { box-shadow: 0 24px 40px -18px rgba(19,33,42,.35); }
.exp-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid #c6d0d5; }
.exp-art > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.exp-body { display: grid; gap: 12px; padding: 18px 20px 20px; align-content: start; }
.exp-meta { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: #5c6b74; }
.exp-status { display: inline-flex; gap: 6px; align-items: center; }
.exp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(47,143,91,.18); }
.exp-status.building::before { background: #c9962b; box-shadow: 0 0 0 3px rgba(201,150,43,.18); }
.exp-name { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; }
html[data-lang="en"] .exp-name { font-family: var(--f-display); font-weight: 400; font-size: 28px; }
.exp-desc { margin: 0; font-size: 15px; line-height: 1.75; color: #33424b; }
.exp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.exp-tags li { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; padding: 3px 8px; border: 1px solid #c6d0d5; border-radius: 2px; }
.exp-go { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #c6d0d5; padding-top: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; }
.exp-go .arr { transition: transform .25s var(--ease); }
a.exp:hover .exp-go .arr { transform: translate(4px, -4px); color: var(--brick); }
.exp.is-building { background: repeating-linear-gradient(-45deg, rgba(19,33,42,.04) 0 10px, transparent 10px 20px), #f6f8f8; border-style: dashed; }

/* art: oracle */
.art-oracle { background: radial-gradient(ellipse at 50% 110%, #3a2a17, #14100a 65%); }
.art-oracle .card {
  position: absolute; left: 50%; bottom: 14%; width: 17%; aspect-ratio: 5 / 8; margin-left: -8.5%;
  border: 1px solid #c9a45c; border-radius: 4px; background: linear-gradient(160deg, #2b1f10, #1a130a);
  transform-origin: 50% 120%; transform: rotate(calc(var(--i) * 9deg));
  transition: transform .5s var(--ease);
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
.art-oracle .card::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(201,164,92,.5); border-radius: 50%; }
a.exp:hover .art-oracle .card { transform: rotate(calc(var(--i) * 17deg)) translateY(-6%); }
.art-oracle .glyph { position: absolute; top: 14%; left: 0; right: 0; text-align: center; color: #c9a45c; font-family: var(--f-display); font-style: italic; font-size: 20px; letter-spacing: .2em; }
/* art: odds */
.art-odds { background: #f7f6f2; }
.art-odds svg polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: all .8s var(--ease); }
/* art: site */
.art-site { display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em; color: #6b7880; }


/* ---------- DARKROOM ---------- */
.f-darkroom { background: var(--dark-bg); color: var(--dark-ink); overflow: hidden; --mx: 72%; --my: 18%; }
.safelight {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 360px at var(--mx) var(--my), rgba(196,41,27,.30), transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 0%, rgba(196,41,27,.22), transparent 70%);
  transition: background-position .2s;
}
.f-darkroom .floor-note { color: #c8b5ae; }
.f-darkroom .eyebrow { color: #b8726a; }
.line-wrap { position: relative; overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; padding-block: 8px 30px; }
.line-wrap::-webkit-scrollbar { display: none; }
.line-wrap.dragging { cursor: grabbing; }
.prints {
  position: relative; display: flex; align-items: flex-start; gap: 44px;
  padding: 36px max(16px, calc((100vw - 1180px) / 2 + 16px)) 20px;
  min-width: max-content;
}
@media (min-width: 1040px) { .prints { padding-left: calc(var(--rail-w) + 40px); } }
.prints::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; border-top: 1px solid #6b5c57; }
.print {
  --rot: 0deg;
  position: relative; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in;
  transform-origin: 50% -10px; transform: rotate(var(--rot));
  color: inherit; text-align: left;
}
.print:hover, .print:focus-visible { animation: swing 1.6s ease-out; }
@keyframes swing {
  0% { transform: rotate(var(--rot)); } 20% { transform: rotate(calc(var(--rot) + 4deg)); }
  45% { transform: rotate(calc(var(--rot) - 2.5deg)); } 70% { transform: rotate(calc(var(--rot) + 1deg)); } 100% { transform: rotate(var(--rot)); }
}
.print .clip { position: absolute; left: 50%; top: -12px; width: 12px; height: 22px; margin-left: -6px; background: linear-gradient(90deg, #6d615c, #a39590 50%, #6d615c); border-radius: 2px; z-index: 2; }
.print .paper { padding: 10px 10px 30px; background: #ece5de; box-shadow: 0 18px 30px -10px rgba(0,0,0,.8); }
.print img, .print canvas { display: block; height: 240px; width: auto; max-width: none;
  filter: grayscale(.9) sepia(.3) contrast(.35) brightness(1.55); transition: filter 2.6s ease; }
.print.developed img, .print.developed canvas { filter: none; }
@media (max-width: 720px) { .print img, .print canvas { height: 180px; } }
.print .p-cap { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: #6d625d; }
.drag-hint { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--dark-dim); }

.lightbox {
  position: fixed; inset: 0; z-index: 55; background: rgba(8,6,6,.96); color: var(--dark-ink);
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) 12px calc(env(safe-area-inset-bottom, 0px) + 20px);
  box-sizing: border-box; animation: fadein .3s ease;
}
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; display: grid; gap: 12px; justify-items: center; min-height: 0; height: 100%; align-content: center; }
.lb-figure img { max-height: calc(100vh - 160px); max-width: 100%; width: auto; object-fit: contain; }
.lb-figure figcaption { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: #b7a39c; }
.lb-nav, .lb-close { background: none; border: 1px solid #4a3d3a; color: var(--dark-ink); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; }
.lb-nav:hover, .lb-close:hover { border-color: var(--safelight); color: #ff8a7d; }
.lb-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 16px; }


.site-foot { background: var(--slab); color: #bdb9b3; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; padding-block: 20px calc(env(safe-area-inset-bottom, 0px) + 20px); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.foot-row a { text-decoration: none; }
.foot-row a:hover { color: var(--led); }


.vault-locked { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .vault-locked { grid-template-columns: auto minmax(0, 1fr); gap: 72px; } }
.keypad {
  width: 272px; max-width: 100%; box-sizing: border-box; padding: 22px 22px 18px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    linear-gradient(150deg, #9b7a3e, #dcc088 34%, #a9874a 62%, #7a5c2b);
  border: 1px solid #3f2c10; border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,245,215,.6);
  display: grid; gap: 14px;
}
.keypad.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.kp-top { display: flex; justify-content: space-between; align-items: center; }
.kp-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .26em; color: #3b2a10; text-transform: uppercase; }
.kp-lamp { width: 8px; height: 8px; border-radius: 50%; background: #5a1a12; box-shadow: inset 0 0 0 1px #000; transition: background .3s, box-shadow .3s; }
.kp-lamp.red { background: #ff3b2a; box-shadow: 0 0 10px #ff3b2a; }
.kp-lamp.green { background: #43d17a; box-shadow: 0 0 10px #43d17a; }
.kp-lamp.busy { background: var(--led); box-shadow: 0 0 10px var(--led); animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.kp-display {
  width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px;
  background: #0b0b0c; border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 0 0 1px #2a2c30;
  color: var(--led); font-family: var(--f-mono); font-size: 22px; letter-spacing: .5em; text-align: center;
  text-shadow: 0 0 10px rgba(255,106,61,.55); caret-color: var(--led);
}
.kp-display::placeholder { color: #4a2a20; letter-spacing: .3em; }
.kp-display:focus { outline: none; box-shadow: inset 0 0 0 1px var(--led); }
.kp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kp-key {
  height: 48px; border-radius: 50%; aspect-ratio: 1; justify-self: center; cursor: pointer;
  border: 0; color: #f0dca8; font-family: var(--f-mono); font-size: 16px;
  background: radial-gradient(circle at 40% 35%, #3f2f24, #150f0a 72%);
  box-shadow: inset 0 0 0 2px #c9a866, 0 2px 0 rgba(0,0,0,.35);
  transition: box-shadow .15s, color .15s, transform .08s;
}
.kp-key:hover { color: #fff3d0; box-shadow: inset 0 0 0 2px #fff0c0, 0 0 12px rgba(255,220,150,.5); }
.kp-key:active { transform: translateY(1px); }
.kp-key.fn { font-size: 13px; color: #cdb480; }
.kp-msg { margin: 0; min-height: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: #3b2a10; text-align: center; }
.kp-msg.err { color: #8d1f12; }


/* ==========================================================================
   RDC · LE HALL (home)
   ========================================================================== */
.f-lobby {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 60% at 50% 45%, #f8f4ec, var(--paper) 70%);
}
.lobby {
  min-height: 100vh; min-height: 100svh; box-sizing: border-box;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 58px) 16px 22px;
}
.lobby-head { display: grid; gap: 4px; justify-items: center; text-align: center; }
.lobby-eb { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--gilt); }
.lobby-name { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: clamp(46px, 6vw, 76px); line-height: 1; letter-spacing: .01em; }
.lobby-name em { font-style: italic; }
.lobby-sub { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }
html[data-lang="zh"] .lobby-sub { letter-spacing: .5em; font-weight: 400; }
.building { margin: 0; width: 100%; min-height: 0; display: grid; place-items: center; }
.building svg { display: block; height: min(calc(100svh - 200px), 980px); min-height: 470px; width: auto; max-width: 100%; overflow: visible; }
@media (max-width: 640px) { .building svg { width: 100%; height: auto; min-height: 0; } }
.lobby-foot { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; font-size: 13px; font-style: italic; color: var(--ink-2); }
html[data-lang="zh"] .lobby-foot { font-style: normal; font-size: 12px; letter-spacing: .12em; }

#sectionSvg { font-family: var(--f-serif); color: #2b2521; }
#sectionSvg .ln { fill: none; stroke: currentColor; stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.8s var(--ease) both; animation-delay: var(--d, 0s); }
#sectionSvg .fine { stroke-width: .6; color: #6e6258; }
#sectionSvg .hair { stroke-width: .4; color: #9d9185; }
#sectionSvg .poche { fill: #c99b8e; stroke: #2b2521; stroke-width: .6; vector-effect: non-scaling-stroke; animation: fadein 1s ease both .8s; }
#sectionSvg .wash { animation: fadein 1.4s ease both 1s; }
#sectionSvg .axis { fill: none; stroke: #b9ada0; stroke-width: .5; vector-effect: non-scaling-stroke; stroke-dasharray: 10 4 2 4; animation: fadein 1s ease both .3s; }
#sectionSvg text { fill: currentColor; }
#sectionSvg .t-dim { font-size: 9px; font-style: italic; fill: #7a6e63; }
#sectionSvg .t-axis { font-size: 10px; font-style: italic; fill: #7a6e63; text-anchor: middle; dominant-baseline: central; }
#sectionSvg .lvl-code { font-size: 20px; font-style: italic; font-weight: 500; transition: fill .25s; }
#sectionSvg .lvl-name { font-family: var(--f-zh); font-size: 9.5px; letter-spacing: .3em; fill: #6e6258; }
#sectionSvg .lvl-name[lang="en"] { font-family: var(--f-serif); font-size: 10px; letter-spacing: .2em; font-weight: 600; }
#sectionSvg .stop { cursor: pointer; outline: none; }
#sectionSvg .stop .hit { fill: var(--gilt); fill-opacity: 0; transition: fill-opacity .35s; }
#sectionSvg .stop:hover .hit, #sectionSvg .stop:focus-visible .hit { fill-opacity: .1; }
#sectionSvg .stop:hover .lvl-code, #sectionSvg .stop:focus-visible .lvl-code { fill: var(--gilt); }
#sectionSvg .stop .lead { stroke: #2b2521; stroke-width: .6; vector-effect: non-scaling-stroke; transition: stroke .25s; }
#sectionSvg .stop:hover .lead { stroke: var(--gilt); }
#sectionSvg .mover { transition: transform 1.3s cubic-bezier(.65, 0, .25, 1); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { #sectionSvg .ln, #sectionSvg .poche, #sectionSvg .wash, #sectionSvg .axis { animation: none; } }

/* ==========================================================================
   5 · LA SERRE (greenhouse)
   ========================================================================== */
.f-greenhouse {
  --top-ink: #22302a;
  background: linear-gradient(180deg, #e3ebe6 0%, #eef0e6 40%, #f3eee0 72%, #e9dfcb 100%);
  color: #22302a;
}
.gh-vault { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gh-sun {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(112deg, transparent 0 90px, rgba(255, 246, 214, .42) 90px 150px, transparent 150px 300px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  animation: sun 22s ease-in-out infinite alternate;
}
@keyframes sun { to { background-position: 220px 0; } }
.f-greenhouse .rh-fr { color: #4d6b56; }
.gh-top { display: grid; gap: 18px; }
.gh-top .room-head { margin-bottom: 0; }
.gh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.gh-count { margin: 0; font-style: italic; font-size: 20px; }
html[data-lang="zh"] .gh-count { font-style: normal; font-size: 15px; letter-spacing: .1em; }
.gh-status { margin: 0; font-size: 13px; opacity: .7; flex-basis: 100%; }
.f-greenhouse.is-active { display: flex; flex-direction: column; }
.gh-bed-wrap { position: relative; z-index: 2; margin-top: auto; padding-top: 12px; }
.gh-bed { display: block; width: 100%; height: auto; max-height: 58vh; overflow: visible; cursor: crosshair; }
.gh-bed .fl { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.gh-bed .fl.grow { animation: grow 1.8s var(--ease) both, sway 7s ease-in-out 1.8s infinite; }
.gh-bed .fl-hit { cursor: pointer; }
@keyframes sway { 50% { transform: rotate(2.2deg); } }
@keyframes grow { from { transform: scale(.05, 0); } 60% { transform: scale(.9, 1.06); } to { transform: none; } }
.gh-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -100%);
  background: #fbf7ec; color: #2b2521; border: 1px solid rgba(167,134,77,.6); padding: 8px 12px; border-radius: 2px;
  font-size: 14px; line-height: 1.5; max-width: 240px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4);
}
.gh-tip b { display: block; font-style: italic; font-weight: 600; }
.gh-tip small { font-size: 11px; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .gh-bed .fl, .gh-bed .fl.grow { animation: none; } .gh-sun { animation: none; } }

/* seed packet */
.plant, .notes { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(34, 30, 27, .45); animation: fadein .3s ease; overflow-y: auto; }
.packet {
  width: min(100%, 440px); box-sizing: border-box; padding: 26px 26px 22px; display: grid; gap: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #f3ead3;
  color: #2b2521; border: 1px solid #8a6a36; outline: 1px solid #8a6a36; outline-offset: -8px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
}
.pk-brand { margin: 0; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .32em; color: var(--rouge); }
.pk-title { margin: 0; text-align: center; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 28px; line-height: 1.2; }
html[data-lang="zh"] .pk-title { font-family: var(--f-zh); font-style: normal; font-size: 21px; letter-spacing: .12em; }
.pk-preview { display: grid; place-items: center; height: 130px; border-top: 1px solid rgba(138,106,54,.35); border-bottom: 1px solid rgba(138,106,54,.35); }
.pk-preview svg { height: 120px; width: auto; }
.pk-field { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.pk-field legend, .pk-input > span { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); padding: 0; margin-bottom: 6px; }
.pk-species { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pk-sp { cursor: pointer; background: #fbf6e8; border: 1px solid rgba(138,106,54,.35); border-radius: 2px; padding: 6px 4px; font-size: 13px; display: grid; justify-items: center; gap: 2px; color: inherit; }
.pk-sp small { font-style: italic; font-size: 12px; opacity: .7; }
.pk-sp[aria-pressed="true"] { border-color: var(--gilt-lo); box-shadow: inset 0 0 0 1px var(--gilt-lo); background: #fff; }
.pk-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.pk-c { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fbf6e8; box-shadow: 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; padding: 0; }
.pk-c[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gilt-lo); }
.pk-input { display: grid; }
.pk-input input, .pk-input textarea {
  font: inherit; font-size: 16px; color: inherit; background: #fbf6e8; border: 0; border-bottom: 1px solid #8a6a36;
  padding: 8px 6px; resize: vertical; border-radius: 0;
}
.pk-input input:focus, .pk-input textarea:focus { outline: none; background: #fff; }
.pk-hint { margin: 0; font-size: 13px; font-style: italic; color: var(--ink-2); }
.pk-actions { display: flex; justify-content: space-between; gap: 10px; }
.notes-card { width: min(100%, 560px); max-height: 82vh; overflow-y: auto; box-sizing: border-box; background: #fbf7ec; color: #2b2521; border: 1px solid var(--gilt); padding: 22px 24px; }
.notes-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.notes-bar h3 { margin: 0; font-style: italic; font-weight: 500; font-size: 24px; }
.notes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.notes-list li { padding: 12px 0; border-top: 1px solid rgba(167,134,77,.35); display: grid; gap: 4px; }
.notes-list small { font-size: 12px; color: var(--ink-2); }
.notes-list .nl-del { justify-self: start; margin-top: 4px; padding: 3px 10px; font-size: 12px; }
.notes-list .nl-del.arm { color: #9a3b2e; border-color: #9a3b2e; }

/* ==========================================================================
   4 · LE CABINET (study) — boiserie, chevron parquet, brass, kraft notebook
   ========================================================================== */
.f-study { --top-ink: #2b2620; background: linear-gradient(180deg, #e6e0d5, #ddd6c9); color: #2b2620; padding-bottom: 0; }
.f-study .landing { color: #f3eadc; padding-bottom: 60px; position: relative; z-index: 3; }
.f-study .rh-fr { color: #8a6a36; }
.vault { position: relative; z-index: 2; }
.vault-note { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 24px; line-height: 1.7; color: #4a4036; max-width: 20em; }
html[data-lang="zh"] .vault-note { font-family: var(--f-zh); font-style: normal; font-size: 18px; }
.keypad {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), linear-gradient(150deg, #9b7a3e, #dcc088 34%, #a9874a 62%, #7a5c2b);
  border: 1px solid #3f2c10;
}
.kp-label { color: #3b2a10; }
.kp-key { color: #f0dca8; background: radial-gradient(circle at 40% 35%, #3f2f24, #150f0a 72%); box-shadow: inset 0 0 0 2px #c9a866, 0 2px 0 rgba(0,0,0,.35); }
.kp-key:hover { color: #fff3d0; box-shadow: inset 0 0 0 2px #fff0c0, 0 0 12px rgba(255,220,150,.5); }
.kp-key.fn { color: #cdb480; }
.kp-msg { color: #3b2a10; }
.kp-msg.err { color: var(--rouge); }
.desk { display: grid; gap: 40px; align-items: center; padding-bottom: 40px; }
@media (min-width: 820px) { .desk { grid-template-columns: auto minmax(0, 1fr); gap: 72px; } }
.carnet {
  position: relative; width: 250px; aspect-ratio: 148 / 210; cursor: pointer; border: 0; padding: 0; justify-self: center;
  border-radius: 3px 10px 10px 3px; transform: rotate(-4deg); transition: transform .5s var(--ease), box-shadow .5s;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #c6a174, #ae875a 55%, #9c774d);
  box-shadow: 0 34px 40px -22px rgba(40,25,10,.7), inset 7px 0 10px -6px rgba(0,0,0,.35), inset -2px 0 0 rgba(255,255,255,.15);
}
.carnet:hover, .carnet:focus-visible { transform: rotate(-1.5deg) translateY(-8px); box-shadow: 0 44px 50px -24px rgba(40,25,10,.75), inset 7px 0 10px -6px rgba(0,0,0,.35); }
.carnet-label {
  position: absolute; left: 16%; right: 22%; top: 20%; display: grid; gap: 6px; padding: 16px 10px; text-align: center;
  background: #f4ecd8; border: 1px solid rgba(80,60,30,.3); box-shadow: 0 1px 2px rgba(0,0,0,.15); color: #2b2520;
}
.carnet-label b { font-family: var(--f-hand-zh); font-weight: 400; font-size: 36px; line-height: 1; }
.carnet-label b[lang="en"] { font-family: var(--f-hand); font-size: 38px; }
.carnet-label i { font-family: var(--f-hand); font-style: normal; font-size: 18px; color: #6a5a46; }
.carnet-band { position: absolute; top: -3px; bottom: -3px; right: 11%; width: 9px; border-radius: 2px; background: linear-gradient(90deg, #231c16, #4a3c32 50%, #231c16); }
.desk-card { display: grid; gap: 14px; justify-items: start; max-width: 28em; }
.desk-card .eyebrow { color: #8a6a36; }
.desk-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.desk-cats li { font-size: 13px; border: 1px solid rgba(142,47,40,.5); color: var(--rouge); padding: 2px 10px; border-radius: 2px; letter-spacing: .1em; }
.desk-hint { margin: 0; font-style: italic; color: #6a5a46; }

/* notebook pages (rendered inside the flipbook) */
.page.kraft {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #c6a174, #ae875a 55%, #9c774d);
  color: #2b2520;
}
.page.kraft.inner { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"), #c9a67b; }
.kr-label { position: absolute; left: 16%; right: 22%; top: 20%; display: grid; gap: 1.4cqh; padding: 3cqh 2cqw; text-align: center; background: #f4ecd8; border: 1px solid rgba(80,60,30,.3); }
.kr-label b { font-family: var(--f-hand-zh); font-weight: 400; font-size: 12cqw; line-height: 1; }
.kr-label i { font-family: var(--f-hand); font-style: normal; font-size: 6cqw; color: #6a5a46; }
.kr-band { position: absolute; top: 0; bottom: 0; right: 11%; width: 3.4cqw; background: linear-gradient(90deg, #231c16, #4a3c32 50%, #231c16); }
.kr-note { position: absolute; left: 12cqw; right: 12cqw; top: 38cqh; text-align: center; font-family: var(--f-hand-zh); font-size: 6cqw; line-height: 1.6; color: #4a3a28; }
.kr-note small { display: block; font-family: var(--f-hand); font-size: 5cqw; }
.kr-stamp { position: absolute; right: 14cqw; bottom: 14cqh; border: 2px solid rgba(142,47,40,.7); color: rgba(142,47,40,.8); padding: .6cqh 2cqw; font-family: var(--f-serif); font-size: 3cqw; letter-spacing: .3em; transform: rotate(-8deg); }
.page.nb {
  --lh: 4.4cqh;
  background:
    linear-gradient(90deg, transparent calc(13cqw - 1px), rgba(190, 70, 60, .45) calc(13cqw - 1px) 13cqw, transparent 13cqw),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(80, 115, 160, .25) calc(var(--lh) - 1px) var(--lh)) 0 calc(9cqh - 2px) / 100% 100% no-repeat,
    #f6f0e2;
  color: #2a2620;
}
.page.nb.verso { background:
    linear-gradient(90deg, transparent calc(87cqw - 1px), rgba(190, 70, 60, .45) calc(87cqw - 1px) 87cqw, transparent 87cqw),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(80, 115, 160, .25) calc(var(--lh) - 1px) var(--lh)) 0 calc(9cqh - 2px) / 100% 100% no-repeat,
    #f6f0e2; }
.nb-in { position: absolute; top: 9cqh; bottom: 6cqh; left: 16cqw; right: 7cqw; overflow: hidden; font-family: var(--f-zh); font-size: 3.3cqw; line-height: var(--lh); }
.page.nb.verso .nb-in { left: 7cqw; right: 16cqw; }
.nb-head { display: flex; align-items: baseline; gap: 2.4cqw; flex-wrap: wrap; height: calc(var(--lh) * 2); align-content: end; }
.nb-date { font-family: var(--f-hand); font-size: 8cqw; line-height: 1; color: #1f2a44; }
.nb-meta { font-family: var(--f-serif); font-style: italic; font-size: 3.2cqw; color: #6a5a46; }
.nb-stamp { margin-left: auto; border: 1.5px solid rgba(142,47,40,.8); color: rgba(142,47,40,.9); padding: 0 1.6cqw; font-size: 2.6cqw; letter-spacing: .2em; line-height: 1.7; transform: rotate(-5deg); }
.nb-title { font-family: var(--f-hand-zh); font-size: 6cqw; line-height: calc(var(--lh) * 1.5); margin: 0 0 calc(var(--lh) * .5); color: #1f2a44; }
.nb-cont { font-family: var(--f-hand); font-size: 4cqw; color: #6a5a46; height: var(--lh); }
.nb-in p { margin: 0 0 var(--lh); }
.nb-in h2, .nb-in h3, .nb-in h4 { margin: 0; font-size: 3.7cqw; line-height: calc(var(--lh) * 2); font-weight: 700; }
.nb-in blockquote { margin: 0 0 var(--lh); padding-left: 2.4cqw; border-left: 2px solid rgba(142,47,40,.6); color: #4d4535; }
.nb-in blockquote p { margin: 0; }
.nb-in ul, .nb-in ol { margin: 0 0 var(--lh); padding-left: 4cqw; }
.nb-in code { font-family: var(--f-mono); font-size: .9em; }
.nb-in hr { border: 0; height: var(--lh); margin: 0; }
.nb-in img { max-height: 30cqh; margin: 0 auto var(--lh); }
.nb-folio { position: absolute; bottom: 2.6cqh; font-family: var(--f-hand); font-size: 3.6cqw; color: #8a7a64; }
.page.nb.recto .nb-folio { right: 7cqw; } .page.nb.verso .nb-folio { left: 7cqw; }
.nb-toc-h { font-family: var(--f-hand-zh); font-size: 7cqw; line-height: calc(var(--lh) * 2); color: #1f2a44; }
.nb-toc-h small { font-family: var(--f-hand); font-size: 5cqw; margin-left: 2cqw; color: #6a5a46; }
.nb-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 1.8cqw; align-items: baseline; height: var(--lh); cursor: pointer; }
.nb-row:hover .nb-rt { color: var(--rouge); }
.nb-rd { font-family: var(--f-hand); font-size: 4.2cqw; color: #1f2a44; }
.nb-rc { font-size: 2.4cqw; letter-spacing: .12em; color: rgba(142,47,40,.9); }
.nb-rt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px dotted rgba(0,0,0,.25); }
.nb-rp { font-family: var(--f-hand); font-size: 4.2cqw; color: #6a5a46; }

/* ==========================================================================
   2 · L'ATELIER — whitewash, steel atelier window
   ========================================================================== */
.f-lab {
  --top-ink: #1d1d1d;
  background:
    radial-gradient(ellipse 50% 60% at 78% 34%, rgba(220, 232, 238, .7), transparent 70%),
    linear-gradient(180deg, #f0eee9, #e8e5de);
  color: #1d1d1d;
}
.atelier-window {
  position: absolute; top: 0; right: 5vw; width: min(44vw, 620px); height: min(74vh, 760px); z-index: 0; pointer-events: none;
  border: 7px solid #1d1d1d; border-top: 0; box-sizing: border-box; opacity: .9;
  background:
    linear-gradient(90deg, #1d1d1d 3px, transparent 3px) 0 0 / 25% 100%,
    linear-gradient(#1d1d1d 3px, transparent 3px) 0 0 / 100% 16.666%,
    linear-gradient(180deg, rgba(196, 214, 224, .55), rgba(232, 238, 240, .3));
}
@media (max-width: 800px) { .atelier-window { width: 70vw; height: 44vh; opacity: .35; } }
.f-lab .rh-fr { color: #6a6058; }
.f-lab .lab-grid { position: relative; z-index: 2; }
.f-lab .exp { background: #fbfaf7; border: 2px solid #1d1d1d; border-radius: 0; box-shadow: 10px 12px 0 -2px rgba(29,29,29,.08); }
.f-lab .exp-art { border-bottom: 2px solid #1d1d1d; }
.f-lab .exp-name { font-family: var(--f-serif); font-weight: 600; font-size: 26px; }
html[data-lang="zh"] .f-lab .exp-name { font-family: var(--f-zh); font-size: 21px; }
.f-lab .exp-tags li { border-color: #1d1d1d; }
.f-lab .exp-meta { font-family: var(--f-mono); }

/* ==========================================================================
   1 · LE THÉÂTRE — velvet, gilt proscenium, playbill
   ========================================================================== */
.f-theatre {
  --top-ink: #f1e3cf;
  background: radial-gradient(ellipse 80% 55% at 50% 30%, #3b1714, #1a0b0a 70%), #130807;
  color: #f1e3cf;
}
.f-theatre .rh-fr { color: var(--gilt-hi); }
.house { position: relative; z-index: 2; display: grid; place-items: center; padding: 0 16px; }
.proscenium {
  position: relative; width: min(100%, 1000px); aspect-ratio: 16 / 9; box-sizing: border-box; padding: clamp(10px, 1.8vw, 20px);
  background: linear-gradient(145deg, #e6cf98, #8a6a36 30%, #d8be86 55%, #7a5a2a 80%, #c9a867);
  border-radius: 46% 46% 4px 4px / 16% 16% 4px 4px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,240,200,.5);
}
.stage-clip { position: absolute; inset: clamp(10px, 1.8vw, 20px); overflow: hidden; border-radius: 45% 45% 2px 2px / 15% 15% 2px 2px; background: #0b0706; }
.stage { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.stage iframe, .stage video { position: absolute; inset: 12% 4% 0; width: 92%; height: 88%; border: 0; background: #000; }
.stage-idle { display: grid; gap: 8px; justify-items: center; color: #d8c3a0; }
.stage-idle b { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: clamp(28px, 4vw, 48px); }
.stage-idle span { font-size: 13px; letter-spacing: .3em; opacity: .75; }
.stage-light { position: absolute; left: 50%; top: 0; width: 70%; height: 100%; transform: translateX(-50%); background: radial-gradient(ellipse 50% 60% at 50% 70%, rgba(255, 230, 180, .16), transparent 70%); pointer-events: none; }
.leader { position: relative; width: min(36vw, 240px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #e9dcc6; font-family: var(--f-serif); font-size: clamp(60px, 9vw, 120px); }
.leader::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(233,220,198,.6); background: conic-gradient(rgba(233,220,198,.2) var(--sweep, 0deg), transparent 0); }
.leader::after { content: ""; position: absolute; left: -20%; right: -20%; top: 50%; border-top: 1px solid rgba(233,220,198,.4); }
.leader span { position: relative; z-index: 1; }
.stage-msg { position: absolute; bottom: 10%; left: 0; right: 0; font-size: 14px; letter-spacing: .24em; color: #d8c3a0; }
.curtain {
  position: absolute; top: 0; bottom: 0; width: 51%; z-index: 3;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg, #4e0f0c 0, #8e2f28 18px, #6b1712 30px, #a13d34 40px, #5a130f 54px);
  transition: transform 1.2s cubic-bezier(.65, 0, .25, 1);
}
.curtain.l { left: 0; transform-origin: 0 0; }
.curtain.r { right: 0; transform-origin: 100% 0; }
.f-theatre.is-open .curtain.l { transform: translateX(-86%) skewX(-3deg); }
.f-theatre.is-open .curtain.r { transform: translateX(86%) skewX(3deg); }
.valance {
  position: absolute; left: 0; right: 0; top: 0; height: 13%; z-index: 4;
  background:
    radial-gradient(circle at 50% 0, #8e2f28 62%, transparent 64%) 0 0 / 80px 100% repeat-x,
    linear-gradient(180deg, #6b1712, #8e2f28);
  -webkit-mask: linear-gradient(#000 60%, transparent 60%), radial-gradient(circle at 50% 0, #000 62%, transparent 64%) 0 0 / 80px 100% repeat-x;
  mask: linear-gradient(#000 60%, transparent 60%), radial-gradient(circle at 50% 0, #000 62%, transparent 64%) 0 0 / 80px 100% repeat-x;
  border-top: 3px solid var(--gilt);
}
.playbill {
  margin: 48px auto 0; max-width: 720px; box-sizing: border-box; padding: 30px clamp(18px, 4vw, 40px) 26px;
  background: #efe2c8; color: #2b1f18; border: 1px solid #8a6a36; outline: 1px solid #8a6a36; outline-offset: -8px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
}
.pb-h { margin: 0; text-align: center; font-family: var(--f-serif); font-weight: 600; font-size: 13px; letter-spacing: .5em; color: var(--rouge); }
.pb-t { margin: 6px 0 18px; text-align: center; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 34px; line-height: 1.1; }
.pb-list { list-style: none; margin: 0; padding: 0; }
.pb-item {
  width: 100%; display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 14px; align-items: baseline; text-align: left;
  background: none; border: 0; border-top: 1px solid rgba(138,106,54,.45); padding: 14px 4px; cursor: pointer; color: inherit;
}
.pb-item:last-child { border-bottom: 1px solid rgba(138,106,54,.45); }
.pb-act { font-family: var(--f-serif); font-style: italic; font-size: 22px; color: var(--rouge); }
.pb-name { font-size: 18px; }
html[data-lang="en"] .pb-name { font-family: var(--f-serif); font-size: 21px; }
.pb-meta { font-size: 12px; letter-spacing: .12em; opacity: .7; }
.pb-item:hover .pb-name, .pb-item[aria-current="true"] .pb-name { color: var(--rouge); }
.pb-item[aria-current="true"] .pb-act::before { content: "▸ "; }

/* ==========================================================================
   -2 · LA CHAMBRE NOIRE — vaulted cellar, safelight, travel map
   ========================================================================== */
.f-darkroom { --top-ink: #ead8cf; }
.vaults {
  position: absolute; top: 0; left: 0; right: 0; height: 240px; pointer-events: none; opacity: .7;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 78%, rgba(74, 50, 42, .55) 79%, rgba(40, 26, 22, .3) 88%, transparent 89%) 0 0 / 420px 240px repeat-x;
}
.map-wrap { position: relative; border: 10px solid #1f1716; border-radius: 6px; background: radial-gradient(ellipse at 50% 40%, #1b1211, #0f0a09); box-shadow: inset 0 0 60px rgba(0,0,0,.7), 0 30px 50px -30px rgba(0,0,0,.9); overflow: hidden; }
.world { display: block; width: 100%; height: auto; }
.world .c { fill: #221716; stroke: #3d2a27; stroke-width: .5; }
.world .v { fill: rgba(196, 41, 27, .38); stroke: #d4574a; stroke-width: .8; cursor: pointer; transition: fill .3s; }
.world .v:hover, .world .v.sel { fill: rgba(232, 80, 58, .75); }
.world .pin { cursor: pointer; }
.world .pin circle { fill: #ff5a47; stroke: #1a0b0a; stroke-width: 1.5; }
.world .pin .halo { fill: rgba(255, 90, 71, .25); stroke: none; animation: halo 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.world .pin text { fill: #f3d7cc; font-family: var(--f-serif); font-size: 15px; font-style: italic; }
@keyframes halo { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.map-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.map-chip { cursor: pointer; background: none; border: 1px solid #5c3a34; color: #e2c9bf; padding: 6px 14px; border-radius: 2px; font-size: 14px; letter-spacing: .08em; }
.map-chip b { font-family: var(--f-mono); font-weight: 400; font-size: 11px; margin-left: 6px; opacity: .7; }
.map-chip[aria-pressed="true"] { background: #7a1e15; border-color: #d4574a; color: #fff0ea; box-shadow: 0 0 20px rgba(226, 65, 44, .35); }
.f-darkroom .line-wrap { margin-top: 26px; }

.site-foot { background: #2b2722; color: #cfc6b6; font-size: 13px; letter-spacing: .08em; padding-block: 18px calc(env(safe-area-inset-bottom, 0px) + 80px); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .room-head { padding-top: calc(env(safe-area-inset-top, 0px) + 78px); margin-bottom: 30px; }
  .viewer-hint { display: none; }
  .viewer-close { padding: 7px 9px; font-size: 11px; }
  .viewer-title { font-size: 20px; }
  .landing { padding-bottom: 100px; }
}

/* ==========================================================================
   v5 — living section, ink interiors, door, bar, garage, sound
   ========================================================================== */

/* ---------- ink scenes behind every room ---------- */
.scene { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100svh; z-index: 0; pointer-events: none; color: var(--sc, #3a322c); }
.scene .k, .scene .k2, .scene .k3, .scene .k-gilt { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.scene .k { stroke-width: 1.4; opacity: .55; }
.scene .k2 { stroke-width: 1; opacity: .42; }
.scene .k3 { stroke-width: .7; opacity: .3; }
.scene .k-gilt { stroke: var(--gilt); stroke-width: 1.1; opacity: .7; }
.scene .sc-ink { animation: fadein 1.4s ease both; }
.scene text { fill: currentColor; opacity: .5; font-family: var(--f-serif); font-style: italic; }
.scene .sc-sign { font-size: 44px; opacity: .55; fill: var(--gilt); }
.scene .sc-bay { font-family: var(--f-stencil); font-style: normal; font-size: 120px; opacity: .12; }
.scene g[class^="sc-"], .scene g[class*=" sc-"] { transform-box: fill-box; }
.scene .sc-birds { animation: sc-fly 26s linear infinite; }
@keyframes sc-fly { from { transform: translate(-200px, 120px); } to { transform: translate(1700px, 40px); } }
.scene .sc-cloud { animation: sc-drift 60s ease-in-out infinite alternate; }
@keyframes sc-drift { to { transform: translateX(160px); } }
.scene .sc-chand, .scene .sc-pend { transform-origin: 50% 0; animation: sc-swing 7s ease-in-out infinite; }
.scene .sc-pend.p1 { animation-delay: -2.4s; } .scene .sc-pend.p2 { animation-delay: -4.6s; }
@keyframes sc-swing { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.scene .sc-safe { animation: sc-pulse 5s ease-in-out infinite; }
@keyframes sc-pulse { 50% { opacity: .55; } }
.scene .sc-drip { animation: sc-drip 3.4s cubic-bezier(.5, 0, 1, .6) infinite; }
@keyframes sc-drip { 0%, 40% { transform: translateY(0); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateY(140px); opacity: 0; } }
.scene .sc-tube { animation: sc-tube 9s steps(1) infinite; }
.scene .sc-tube.t1 { animation-delay: -3s; } .scene .sc-tube.t2 { animation-delay: -6.2s; }
@keyframes sc-tube { 0%, 100% { opacity: 1; } 71% { opacity: .35; } 72% { opacity: 1; } 74% { opacity: .5; } 75% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene * { animation: none !important; } }

.f-greenhouse .scene { --sc: #3f5a48; }
.f-study .scene { --sc: #4a3b2b; }
.f-lab .scene { --sc: #262626; }
.f-theatre .scene { --sc: #e6c79a; }
.f-bar .scene { --sc: #e3c7a4; }
.f-darkroom .scene { --sc: #d9a79c; }
.f-garage .scene { --sc: #3a3a38; }

/* ---------- home: story on hover ---------- */
#sectionSvg .veil { fill: #f4efe6; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
#sectionSvg.has-focus .stop:not(.on) .veil { opacity: .72; }
#sectionSvg.has-focus .stop:not(.on) .lvl-code, #sectionSvg.has-focus .stop:not(.on) .lvl-name { opacity: .35; }
#sectionSvg .stop .lvl-code, #sectionSvg .stop .lvl-name { transition: opacity .35s, fill .25s; }
#sectionSvg .stop.on .lvl-code { fill: var(--gilt); }
#sectionSvg .stop.on .lead { stroke: var(--gilt); }
#sectionSvg .room g { transform-box: fill-box; }
#sectionSvg .a-glow { opacity: .55; transition: opacity .6s; }
#sectionSvg .room.on .a-glow { opacity: 1; animation: a-flick 2.6s ease-in-out infinite; }
@keyframes a-flick { 0%, 100% { opacity: .9; } 30% { opacity: 1; } 55% { opacity: .78; } 70% { opacity: 1; } }
/* 5 greenhouse */
#sectionSvg .a-drops, #sectionSvg .a-bloom { opacity: 0; }
#sectionSvg .room.on .a-can { transform-origin: 0% 100%; animation: a-tilt 3.2s ease-in-out infinite; }
@keyframes a-tilt { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(18deg); } }
#sectionSvg .room.on .a-drops { animation: a-drops 3.2s linear infinite; }
@keyframes a-drops { 0%, 28% { opacity: 0; transform: translateY(-2px); } 36% { opacity: 1; } 70% { opacity: 1; transform: translateY(14px); } 78%, 100% { opacity: 0; transform: translateY(16px); } }
#sectionSvg .room.on .a-bloom { opacity: 1; transform-origin: 50% 100%; animation: a-bloom 1.4s var(--ease) .9s both; }
@keyframes a-bloom { from { transform: scale(0); } to { transform: scale(1); } }
#sectionSvg .room.on .a-birds { animation: a-birds 5s linear infinite; }
@keyframes a-birds { from { transform: translate(-20px, 6px); } to { transform: translate(140px, -18px); opacity: 0; } }
/* 4 study */
#sectionSvg .room.on .a-arm { transform-origin: 0% 100%; animation: a-write .5s ease-in-out infinite alternate; }
@keyframes a-write { from { transform: rotate(-4deg) translateX(-1px); } to { transform: rotate(3deg) translateX(2px); } }
#sectionSvg .room.on .a-flame { transform-origin: 50% 100%; animation: a-fire .35s ease-in-out infinite alternate; }
@keyframes a-fire { from { transform: scale(.9, .85); } to { transform: scale(1.08, 1.12); } }
/* 3 library */
#sectionSvg .room.on .a-climber { animation: a-climb 4.5s ease-in-out infinite; }
@keyframes a-climb { 0%, 100% { transform: translate(0, 0); } 45%, 60% { transform: translate(-5px, -22px); } }
#sectionSvg .room.on .a-page { transform-origin: 0% 50%; animation: a-page 2.2s ease-in-out infinite; }
@keyframes a-page { 0%, 60%, 100% { transform: scaleX(1); } 75% { transform: scaleX(-1); } }
/* 2 atelier */
#sectionSvg .a-stroke path { stroke-dashoffset: 1; }
#sectionSvg .room.on .a-stroke path { animation: a-draw 2.6s ease-in-out infinite; }
@keyframes a-draw { 0% { stroke-dashoffset: 1; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
#sectionSvg .room.on .a-brush { transform-origin: 100% 100%; animation: a-brush 1.3s ease-in-out infinite alternate; }
@keyframes a-brush { from { transform: rotate(-6deg); } to { transform: rotate(9deg) translateY(-3px); } }
/* 1 theatre */
#sectionSvg .a-spot { transition: opacity .8s; }
#sectionSvg .room.on .a-spot { opacity: .55; }
#sectionSvg .room.on .a-drape-l { animation: a-open-l 1.4s var(--ease) both; }
#sectionSvg .room.on .a-drape-r { animation: a-open-r 1.4s var(--ease) both; }
@keyframes a-open-l { to { transform: translateX(-14px) scaleX(.6); } }
@keyframes a-open-r { to { transform: translateX(14px) scaleX(.6); } }
#sectionSvg .room.on .a-performer { transform-origin: 50% 100%; animation: a-bow 2.4s ease-in-out 1.2s infinite; }
@keyframes a-bow { 0%, 40%, 100% { transform: rotate(0); } 60%, 75% { transform: rotate(-22deg); } }
#sectionSvg .room.on .a-clap { animation: a-clap .28s steps(2) infinite; }
@keyframes a-clap { 50% { transform: translateY(-1.5px); } }
/* RDC lobby */
#sectionSvg .room.on .a-chand { transform-origin: 50% 0; animation: sc-swing 2.6s ease-in-out infinite; }
#sectionSvg .room.on .a-visitor { animation: a-walk 5s ease-in-out infinite; }
@keyframes a-walk { 0% { transform: translateX(0); } 50%, 100% { transform: translateX(34px); opacity: 0; } }
#sectionSvg .room.on .a-door { transform-origin: 0 50%; animation: a-door 5s ease-in-out infinite; }
@keyframes a-door { 0%, 100% { transform: scaleX(1); } 25%, 55% { transform: scaleX(.2); } }
#sectionSvg .room.on .a-wave { transform-origin: 0% 100%; animation: a-wave .5s ease-in-out infinite alternate; }
@keyframes a-wave { to { transform: rotate(-24deg); } }
/* -1 bar */
#sectionSvg .room.on .a-shaker { animation: a-shake .18s ease-in-out infinite alternate; }
@keyframes a-shake { from { transform: translate(-1px, 1px) rotate(-8deg); } to { transform: translate(2px, -3px) rotate(10deg); } }
#sectionSvg .room.on .a-pend { transform-origin: 50% 0; animation: sc-swing 2.2s ease-in-out infinite; }
#sectionSvg .room.on .a-pend.b { animation-delay: -1s; }
/* -2 darkroom */
#sectionSvg .a-print rect { transition: fill 2.4s ease; }
#sectionSvg .room:not(.on) .a-print rect { fill: #f4efe6; }
#sectionSvg .room.on .a-safe { animation: sc-pulse 1.8s ease-in-out infinite; }
#sectionSvg .room.on .a-rock { transform-origin: 50% 100%; animation: a-rock 2s ease-in-out infinite; }
@keyframes a-rock { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
/* -3 garage */
#sectionSvg .a-beam { transition: opacity .5s; }
#sectionSvg .room.on .a-beam { opacity: 1; animation: a-drive 4s ease-in 1.2s infinite; }
#sectionSvg .room.on .a-car { animation: a-drive 4s ease-in 1.2s infinite; }
@keyframes a-drive { 0% { transform: translateX(0); } 70% { transform: translateX(210px); opacity: 1; } 71%, 88% { opacity: 0; transform: translateX(210px); } 89% { transform: translateX(-30px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
#sectionSvg .room.on .a-gdoor { animation: a-gdoor 4s ease-in-out 1s infinite; }
@keyframes a-gdoor { 0%, 100% { transform: translateY(0); } 20%, 70% { transform: translateY(-60px); } }
@media (prefers-reduced-motion: reduce) { #sectionSvg .room * { animation: none !important; } #sectionSvg .a-drops, #sectionSvg .a-bloom { opacity: 1; } }

.lobby-story {
  margin: 0; min-height: 3.6em; max-width: 34em; text-align: center; display: grid; gap: 2px; justify-items: center;
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.lobby-story b { font-family: var(--f-serif); font-weight: 600; font-size: 13px; letter-spacing: .24em; color: var(--gilt); }
.lobby-story span { font-style: italic; }
html[data-lang="zh"] .lobby-story span { font-style: normal; letter-spacing: .06em; }
.lobby-story.show span { color: var(--ink); animation: story-in .5s var(--ease) both; }
@keyframes story-in { from { opacity: 0; transform: translateY(6px); } }
.story-go { margin-top: 6px; cursor: pointer; background: none; border: 1px solid var(--gilt); color: var(--gilt-lo); padding: 6px 14px; border-radius: 2px; font-size: 13px; letter-spacing: .1em; }
.lobby { grid-template-rows: auto minmax(0, 1fr) auto auto; }

/* ---------- sound hint ---------- */
.top-r { position: relative; }
.sound-hint {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: 12px; letter-spacing: .08em; padding: 5px 10px; border-radius: 2px;
  background: rgba(244, 239, 230, .92); color: #2b2521; border: 1px solid rgba(167,134,77,.5);
  animation: hint-in .8s var(--ease) 1.4s both; transition: opacity .8s;
}
.sound-hint::after { content: ""; position: absolute; right: -5px; top: 50%; width: 8px; height: 8px; background: inherit; border: inherit; border-left: 0; border-bottom: 0; transform: translateY(-50%) rotate(45deg); }
.sound-hint.gone { opacity: 0; pointer-events: none; }
@keyframes hint-in { from { opacity: 0; transform: translate(8px, -50%); } }
@media (max-width: 640px) { .sound-hint { right: auto; left: 50%; top: calc(100% + 10px); transform: translateX(-60%); } .sound-hint::after { display: none; } @keyframes hint-in { from { opacity: 0; } } }

/* ==========================================================================
   4 · LE CABINET — the door
   ========================================================================== */
.f-study { background: radial-gradient(ellipse 70% 60% at 50% 42%, #efe8dc, #ddd4c5 80%); }
.study-stage { position: relative; z-index: 2; padding: 0 16px; }
.door-scene { display: grid; justify-items: center; gap: 22px; }
.doorway {
  --dw: min(600px, 92vw);
  position: relative; width: var(--dw); height: calc(var(--dw) * 1.28); max-height: 78vh; min-height: 420px;
  perspective: 1800px; perspective-origin: 50% 40%;
  padding: 16px 16px 0; box-sizing: border-box;
  background: linear-gradient(180deg, #d9cfbf, #cfc3b0);
  box-shadow: inset 0 0 0 2px #b9ab95, inset 0 0 0 9px #e4dccd, inset 0 0 0 10px #b9ab95, 0 40px 60px -40px rgba(40, 25, 10, .6);
}
.door-transom { position: absolute; left: 16px; right: 16px; top: -58px; height: 46px; display: grid; place-items: center; background: linear-gradient(180deg, #d9cfbf, #cfc3b0); box-shadow: inset 0 0 0 2px #b9ab95, inset 0 0 0 7px #e4dccd, inset 0 0 0 8px #b9ab95; }
.door-transom span { font-family: var(--f-serif); font-style: italic; font-size: 18px; letter-spacing: .2em; color: #6a5236; }
.door-room {
  position: absolute; inset: 16px 16px 0; overflow: hidden;
  background:
    radial-gradient(ellipse 40% 34% at 50% 58%, rgba(255, 214, 150, .95), rgba(255, 190, 110, .35) 55%, transparent 80%),
    repeating-linear-gradient(90deg, #3b2616 0 3px, #4d3320 3px 22px),
    #2b1a0f;
}
.door-room::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 14%; height: 22%; background: linear-gradient(#6e4a2a, #4a2f1a); box-shadow: 0 -6px 0 #8a6444; }
.door-leaf {
  position: absolute; top: 16px; bottom: 0; width: calc(50% - 16px); box-sizing: border-box; z-index: 2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .06 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #5a3a24, #6d4a30 50%, #5a3a24);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 30px rgba(0,0,0,.25);
  transition: transform 1.4s cubic-bezier(.6, 0, .2, 1), filter 1.4s;
  backface-visibility: hidden;
}
.door-leaf.l { left: 16px; transform-origin: 0 50%; }
.door-leaf.r { right: 16px; transform-origin: 100% 50%; }
.door-leaf .dp { position: absolute; left: 13%; right: 13%; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 5px rgba(255,220,170,.06), inset 0 0 0 6px rgba(0,0,0,.35), inset 2px 2px 0 7px rgba(255,220,170,.08), 0 1px 0 rgba(255,220,170,.12); }
.door-leaf .dp.top { top: 6%; height: 50%; }
.door-leaf .dp.bot { bottom: 5%; height: 30%; }
.dl-handle { position: absolute; top: 58%; width: 10px; height: 64px; border-radius: 5px; background: linear-gradient(90deg, #7a5c2b, #f0d9a0 45%, #a7864d); box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.door-leaf.l .dl-handle { right: 9%; } .door-leaf.r .dl-handle { left: 9%; }
.door-leaf.r .keypad { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); width: min(230px, 80%); padding: 16px 16px 14px; gap: 10px; z-index: 3; }
.door-leaf.r .keypad.shake { animation: shake-c .45s; }
@keyframes shake-c { 20%, 60% { transform: translateX(calc(-50% - 7px)); } 40%, 80% { transform: translateX(calc(-50% + 7px)); } }
.door-leaf.r .kp-display { height: 40px; font-size: 18px; }
.door-leaf.r .kp-keys { gap: 7px; }
.door-leaf.r .kp-key { height: 40px; font-size: 14px; }
@media (max-width: 560px) {
  .door-leaf.r .keypad { left: 0; width: 210px; top: 12%; }
  .door-leaf.r .dp.top { display: none; }
}
.vault-note { text-align: center; font-size: 20px; max-width: 26em; }
html[data-lang="zh"] .vault-note { font-size: 16px; }
.study-stage.is-opening .door-leaf.l { transform: rotateY(-104deg); filter: brightness(.7); }
.study-stage.is-opening .door-leaf.r { transform: rotateY(104deg); filter: brightness(.7); }
.study-stage.is-opening .doorway { animation: door-in 1.5s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes door-in { 60% { transform: scale(1.04); } to { transform: scale(1.5); opacity: 0; } }
.study-stage.is-open .room-scene { animation: room-in 1s var(--ease) both; }
@keyframes room-in { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .door-leaf { transition: none; } .study-stage.is-opening .doorway { animation: none; } }

/* the notebook on the desk */
.room-scene .desk { max-width: 980px; margin: 0 auto; padding: 20px 0 40px; }
.carnet { width: 260px; transform: rotate(-5deg); background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, rgba(255,240,210,.25), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(60,30,10,.3), transparent 60%),
    linear-gradient(135deg, #b8915f, #9a744a 55%, #86623c); }
.carnet::before { content: ""; position: absolute; inset: 8px 10px 8px 14px; border: 1px dashed rgba(60,35,15,.35); border-radius: 2px 8px 8px 2px; pointer-events: none; }
.carnet::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent); border-radius: 3px 0 0 3px; }
.carnet-label { background: #efe4c8; top: 18%; font-family: var(--f-serif); }
.carnet-label i { font-family: var(--f-serif); font-style: italic; letter-spacing: .1em; font-size: 14px; }
.carnet-band { right: 12%; }
.carnet-twine { position: absolute; left: -6px; right: -6px; top: 58%; height: 4px; z-index: 2; background: repeating-linear-gradient(45deg, #c9b089 0 3px, #9b7f55 3px 6px); box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .6s var(--ease), opacity .6s; }
.carnet-seal {
  position: absolute; left: 50%; top: 58%; z-index: 3; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 36% 30%, #c2463a, #8e2f28 55%, #5e1a15);
  box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 0 0 6px rgba(0,0,0,.12), inset 0 0 0 7px rgba(255,200,180,.18);
  color: #f0c5b0; font-family: var(--f-serif); font-style: italic; font-size: 26px; text-shadow: 0 -1px 0 rgba(0,0,0,.4);
  transition: transform .6s var(--ease), opacity .6s;
}
.carnet.breaking .carnet-seal { animation: seal-break .9s var(--ease) forwards; }
@keyframes seal-break { 20% { transform: scale(1.1); } 40% { transform: scale(1) rotate(-6deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 100% { transform: translate(40px, 120px) rotate(40deg); opacity: 0; clip-path: polygon(0 0, 55% 0, 40% 100%, 0 100%); } }
.carnet.breaking .carnet-twine { transform: translateY(80px) rotate(8deg); opacity: 0; transition-delay: .3s; }
.carnet.breaking { transform: rotate(0) translateY(-14px) scale(1.04); }
.desk-stats { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 20px; }
html[data-lang="zh"] .desk-stats { font-family: var(--f-zh); font-style: normal; font-size: 15px; letter-spacing: .08em; }

/* the notebook when open: candlelight */
.viewer.is-carnet { background: radial-gradient(ellipse 60% 55% at 50% 48%, #3a2618, #140c07 75%); color: #e9d8bb; }
.viewer.is-carnet::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(255,190,110,.12), transparent 50%); animation: candle 3s ease-in-out infinite; }
@keyframes candle { 0%, 100% { opacity: .9; } 40% { opacity: 1; } 60% { opacity: .75; } }
.viewer.is-carnet .fb-face { box-shadow: 0 30px 50px -24px rgba(0,0,0,.9); }
.page.kraft { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, rgba(255,240,210,.25), transparent 60%),
    linear-gradient(135deg, #b8915f, #9a744a 55%, #86623c); }
.kr-label { font-family: var(--f-serif); background: #efe4c8; }
.kr-label i { font-family: var(--f-serif); font-style: italic; font-size: 4.2cqw; letter-spacing: .12em; }
.kr-twine { position: absolute; left: 0; right: 0; top: 58%; height: 1.2cqw; background: repeating-linear-gradient(45deg, #c9b089 0 3px, #9b7f55 3px 6px); opacity: .5; }
.kr-seal { position: absolute; left: 50%; top: 58%; width: 18cqw; height: 18cqw; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, #c2463a, #8e2f28 55%, #5e1a15); color: #f0c5b0; font-family: var(--f-serif); font-style: italic; font-size: 8cqw;
  clip-path: polygon(0 0, 52% 0, 44% 40%, 58% 60%, 46% 100%, 0 100%); opacity: .9; }
.kr-seal-crack { position: absolute; left: calc(50% + 2cqw); top: calc(58% - 4cqw); width: 8cqw; height: 9cqw; border-radius: 0 50% 50% 0; background: radial-gradient(circle at 30% 40%, #b03d33, #6e211b); transform: rotate(24deg); opacity: .85; }
.page.marble {
  background:
    radial-gradient(ellipse 30% 18% at 20% 30%, rgba(142,47,40,.35), transparent 70%),
    radial-gradient(ellipse 26% 20% at 70% 20%, rgba(31,42,68,.4), transparent 70%),
    radial-gradient(ellipse 34% 16% at 60% 70%, rgba(167,134,77,.45), transparent 70%),
    radial-gradient(ellipse 24% 22% at 25% 80%, rgba(31,42,68,.35), transparent 70%),
    repeating-radial-gradient(circle at 40% 50%, rgba(255,255,255,.14) 0 2px, transparent 2px 9px),
    #d9ccb2;
}
.ex-libris { position: absolute; left: 20%; right: 20%; top: 30%; bottom: 30%; display: grid; place-content: center; gap: 1.6cqh; text-align: center; background: #f5ecd8; border: 1px solid #8a6a36; outline: 1px solid #8a6a36; outline-offset: -1.6cqw; color: #2b2520; padding: 3cqw; }
.ex-libris i { font-family: var(--f-serif); font-size: 4.4cqw; letter-spacing: .2em; color: #8e2f28; }
.ex-libris b { font-family: var(--f-hand); font-weight: 400; font-size: 13cqw; line-height: 1; color: #1f2a44; }
.ex-libris small { font-family: var(--f-serif); font-style: italic; font-size: 3.2cqw; line-height: 1.5; color: #6a5a46; }
.page.nb.aged { background-color: #f1e7d0; }
.page.nb.aged::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 100% 0, rgba(120,80,30,.16), transparent 30%), radial-gradient(ellipse at 0 100%, rgba(120,80,30,.14), transparent 35%), radial-gradient(circle at 78% 82%, rgba(140,90,40,.1) 0 4cqw, transparent 4.4cqw); }
.page.nb.aged.recto::after { content: ""; position: absolute; top: -1cqh; right: 22cqw; width: 2.4cqw; height: 26cqh; background: linear-gradient(#8e2f28, #6e211b); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 92%, 0 100%); opacity: .85; }
.nb-epi { position: absolute; inset: 18cqh 12cqw; display: grid; justify-items: center; align-content: center; gap: 3cqh; text-align: center; color: #3a3024; }
.nb-sigil { font-size: 6cqw; color: #8e2f28; }
.nb-epi p { margin: 0; font-family: var(--f-hand-zh); font-size: 7cqw; line-height: 1.5; color: #1f2a44; }
html[data-lang="en"] .nb-epi p { font-family: var(--f-hand); font-size: 8cqw; }
.nb-epi i { font-family: var(--f-serif); font-size: 3.4cqw; color: #6a5a46; }
.nb-flower { width: 14cqw; height: auto; opacity: .85; }

/* ==========================================================================
   3 · LA BIBLIOTHÈQUE — walnut bookcases, burgundy velvet
   ========================================================================== */
.f-library {
  --top-ink: #f1e2c9; --sc: #e8c9a0;
  background:
    radial-gradient(ellipse 46% 36% at 50% 6%, rgba(255, 214, 150, .22), transparent 72%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, rgba(255,255,255,.035) 2px 3px, transparent 3px 11px),
    radial-gradient(ellipse 120% 80% at 50% 110%, #3a0d12, transparent 60%),
    linear-gradient(180deg, #5a1a20, #45121a 60%, #331016);
  color: #f1e2c9;
}
.f-library .rh-fr { color: var(--gilt-hi); }
.f-library .shelf-board { background: linear-gradient(180deg, #7a5236 0, #5b3a24 40%, #3a2416); box-shadow: 0 18px 26px -10px rgba(0,0,0,.7); }
.f-library .shelf-board::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 3px; background: linear-gradient(180deg, var(--gilt-hi), var(--gilt-lo)); border-radius: 2px; }
.f-library .shelf-plate { color: #f1e1c2; }
.f-library .cap-vol, .f-library .cap-sub, .f-library .cap-idle, .f-library .cap-chapters { color: #d9c3a3; }
.f-library .cap-title { font-family: var(--f-serif); font-weight: 500; }
.f-library .shelf-room { padding: 40px clamp(10px, 3vw, 36px) 0; background: linear-gradient(180deg, rgba(40,20,12,.55), rgba(40,20,12,.25)); box-shadow: inset 0 0 0 10px #5b3a24, inset 0 0 0 12px #3a2416, inset 0 0 0 13px rgba(220,195,140,.3), 0 40px 60px -30px rgba(0,0,0,.7); border-radius: 3px 3px 0 0; }
.f-library .scene .k-gilt { opacity: .5; }

/* ==========================================================================
   -1 · LE BAR — vaulted cellar
   ========================================================================== */
.f-bar {
  --top-ink: #f0dfc6; --bar-ink: #f0dfc6; --bar-dim: #b99f86; --bar-wood: #4a2b1c;
  background:
    radial-gradient(ellipse 50% 40% at 50% 18%, rgba(255, 190, 110, .2), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.22'%3E%3Cpath d='M0 .5H120M0 30.5H120M.5 0V30M60.5 0V30M30.5 30V60M90.5 30V60'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #3a211a, #2a1712 55%, #1e100c);
  color: var(--bar-ink);
}
.f-bar .rh-fr { color: var(--gilt-hi); }
.bar-counter { display: grid; gap: 28px; align-items: start; }
@media (min-width: 920px) { .bar-counter { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; } }
.bar-steps { display: grid; gap: 18px; }
.bs { margin: 0; padding: 0; border: 0; min-width: 0; }
.bs legend { display: flex; align-items: baseline; gap: 10px; padding: 0; margin-bottom: 10px; font-size: 14px; letter-spacing: .12em; color: var(--bar-dim); }
.bs legend b { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--gilt-hi); letter-spacing: 0; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.04); color: var(--bar-ink); border: 1px solid rgba(220,195,140,.28);
  font-size: 14px; transition: background .2s, border-color .2s, transform .15s;
}
html[data-lang="en"] .bs-chip { font-family: var(--f-serif); font-size: 16px; }
.bs-chip i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.bs-chip:hover { border-color: var(--gilt-hi); }
.bs-chip:active { transform: scale(.97); }
.bs-chip[aria-pressed="true"] { background: rgba(220,195,140,.18); border-color: var(--gilt-hi); color: #fff4df; box-shadow: 0 0 18px -6px rgba(255,200,120,.6); }
.bar-stage {
  position: relative; display: grid; justify-items: center; gap: 14px; padding: 26px 20px 22px; border-radius: 3px;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255,200,130,.16), transparent 70%), linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.35));
  box-shadow: inset 0 0 0 1px rgba(220,195,140,.2);
}
.bar-stage::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -12px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, #7a4a2e, #4a2b1c); box-shadow: 0 10px 20px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,170,.3); }
.bar-vessel { width: 200px; height: auto; overflow: visible; filter: drop-shadow(0 20px 16px rgba(0,0,0,.45)); }
.bar-vessel.shaking { animation: v-shake .16s ease-in-out infinite alternate; }
@keyframes v-shake { from { transform: translate(-6px, 4px) rotate(-12deg); } to { transform: translate(6px, -8px) rotate(12deg); } }
.bar-vessel.stirring { animation: v-stir 1.7s ease-in-out; }
@keyframes v-stir { 25% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg); } }
.bar-vessel.building .sh-cap { animation: v-cap 1.7s ease both; }
@keyframes v-cap { to { transform: translateY(-40px); opacity: 0; } }
.bar-vessel.pouring .liq { animation: v-pour 1.1s var(--ease) both; }
@keyframes v-pour { from { transform: translateY(200px); } }
.bar-recipe { margin: 0; min-height: 1.6em; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 18px; color: var(--bar-dim); }
html[data-lang="zh"] .bar-recipe { font-family: var(--f-zh); font-style: normal; font-size: 14px; letter-spacing: .06em; }
.bar-actions { display: flex; gap: 12px; }
.bar-actions .btn-gilt:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.5); }
@media (prefers-reduced-motion: reduce) { .bar-vessel.shaking, .bar-vessel.stirring, .bar-vessel.pouring .liq { animation: none; } }

/* the cabinet */
.cellar { margin-top: 64px; padding: 26px clamp(14px, 3vw, 32px) 30px; border-radius: 3px;
  background: linear-gradient(180deg, #3b2216, #2a170f); box-shadow: inset 0 0 0 8px #4a2b1c, inset 0 0 0 9px rgba(220,195,140,.25), 0 30px 50px -30px rgba(0,0,0,.9); }
.cellar-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; margin-bottom: 14px; }
.cellar-title { margin: 0; font-family: var(--f-serif); font-weight: 500; font-style: italic; font-size: 30px; color: #f5e6cc; }
html[data-lang="zh"] .cellar-title { font-family: var(--f-zh); font-style: normal; font-weight: 600; font-size: 22px; letter-spacing: .3em; }
.cellar-title small { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: .04em; color: var(--bar-dim); margin-left: 10px; }
.cellar-status { margin: 0; font-size: 13px; color: var(--bar-dim); }
.cellar-shelves { display: grid; gap: 0; }
.shelf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 6px; padding: 16px 8px 0; min-height: 98px; border-bottom: 10px solid #6b4128; box-shadow: 0 8px 12px -6px rgba(0,0,0,.6); position: relative; }
.shelf-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: rgba(255,220,170,.28); }
.cab-item { cursor: pointer; background: none; border: 0; padding: 0; width: 64px; display: grid; justify-items: center; gap: 2px; color: var(--bar-ink); transition: transform .25s var(--ease); }
.cab-item svg { width: 54px; height: auto; }
.cab-item span { max-width: 64px; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.cab-item:hover, .cab-item:focus-visible { transform: translateY(-6px); }
.cab-item:hover span { opacity: 1; color: var(--gilt-hi); }
.cellar-empty { margin: 10px 0 0; font-style: italic; color: var(--bar-dim); }

/* the letter */
.letter {
  position: relative; margin: 56px auto 0; max-width: 640px; display: grid; gap: 14px; box-sizing: border-box;
  padding: 34px clamp(18px, 4vw, 40px) 26px;
  background:
    repeating-linear-gradient(135deg, #8e2f28 0 14px, #f3ead8 14px 22px, #1f2a44 22px 36px, #f3ead8 36px 44px) border-box;
  border: 8px solid transparent; color: #2b2521;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
}
.letter::before { content: ""; position: absolute; inset: 0; background: #f6eedc; z-index: 0; }
.letter > * { position: relative; z-index: 1; }
.letter-stamp { position: absolute; right: 18px; top: 16px; width: 64px; height: 76px; display: grid; place-items: center; text-align: center; font-family: var(--f-serif); font-size: 10px; font-weight: 600; letter-spacing: .14em; line-height: 1.5; color: #8e2f28; background: #f0e2c6; outline: 1px dashed #8e2f28; outline-offset: -5px; transform: rotate(4deg); }
.letter-title { margin: 0; padding-right: 80px; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.2; }
html[data-lang="zh"] .letter-title { font-family: var(--f-zh); font-style: normal; font-weight: 600; font-size: 21px; letter-spacing: .12em; }
.letter-sub { margin: 0; padding-right: 80px; font-size: 14px; color: #6a5a46; }
.letter .pk-input input, .letter .pk-input textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(43,37,33,.35); border-radius: 0; padding: 8px 2px; font: inherit; color: inherit; }
.letter .pk-input textarea { background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(43,37,33,.18) 31px 32px); line-height: 32px; border-bottom: 0; resize: vertical; }
.letter-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
.letter-status { margin: 0 auto 0 0; font-size: 13px; color: #6a5a46; }
.letter.sent { animation: letter-go 1.6s var(--ease); }
@keyframes letter-go { 30% { transform: translateY(-10px) rotate(-1deg); } 60% { transform: translateY(0); } }

/* the life card */
.lifecard { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(20, 10, 6, .72); backdrop-filter: blur(3px); }
.lc-wrap { display: grid; gap: 16px; justify-items: center; width: min(100%, 420px); opacity: 0; transform: translateY(24px) rotate(-2deg); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.lifecard.show .lc-wrap { opacity: 1; transform: none; }
.lc-card {
  width: 100%; box-sizing: border-box; padding: 26px 26px 20px; display: grid; justify-items: center; gap: 10px; text-align: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #f5ecd9;
  color: #2b2521; border-radius: 2px;
  box-shadow: inset 0 0 0 10px #f5ecd9, inset 0 0 0 11px #a7864d, inset 0 0 0 14px #f5ecd9, inset 0 0 0 15px rgba(167,134,77,.5), 0 40px 60px -30px rgba(0,0,0,.9);
}
.lc-brand { margin: 6px 0 0; font-family: var(--f-serif); font-size: 10px; font-weight: 600; letter-spacing: .3em; color: #8e2f28; }
.lc-brand i { letter-spacing: .1em; font-weight: 500; }
.lc-glass { width: 120px; height: auto; margin: -4px 0 -8px; }
.lc-glass path[stroke="#e8dcc0"] { stroke: #6a5a46; }
.lc-name { margin: 0; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.15; }
html[data-lang="zh"] .lc-name { font-family: var(--f-zh); font-style: normal; font-weight: 600; font-size: 22px; letter-spacing: .1em; }
.lc-recipe { margin: 0; font-size: 12px; letter-spacing: .08em; color: #6a5a46; }
.lc-line { margin: 6px 0; padding: 10px 0; border-top: 1px solid rgba(167,134,77,.5); border-bottom: 1px solid rgba(167,134,77,.5); font-family: var(--f-serif); font-size: 21px; line-height: 1.55; color: #1f2a44; }
html[data-lang="zh"] .lc-line { font-family: var(--f-zh); font-size: 17px; letter-spacing: .06em; line-height: 1.85; }
.lc-sub { margin: 0; font-size: 13px; font-style: italic; color: #4a4036; }
html[data-lang="zh"] .lc-sub { font-style: normal; }
.lc-words { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lc-words li { font-size: 12px; letter-spacing: .12em; border: 1px solid rgba(142,47,40,.55); color: #8e2f28; padding: 1px 9px; border-radius: 999px; }
.lc-foot { margin: 4px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 13px; color: #8a7a64; }
.lc-shelve { width: 100%; box-sizing: border-box; display: grid; gap: 12px; padding: 18px 20px; background: #1e120d; color: #f0dfc6; border: 1px solid rgba(220,195,140,.3); border-radius: 2px; }
.lc-shelve .pk-input > span { color: #c9b08a; }
.lc-shelve .pk-input input { background: rgba(255,255,255,.06); color: #fff4df; border-color: rgba(220,195,140,.35); }
.lc-shelve .pk-input input:focus { background: rgba(255,255,255,.1); }
.lc-shelve .pk-hint { color: #b99f86; }
.lc-view { display: flex; justify-content: center; }
.lc-view .btn-line { color: #f0dfc6; }

/* ==========================================================================
   -3 · LE GARAGE — certificates, the road, the licence
   ========================================================================== */
.f-garage {
  --top-ink: #2d2c2a;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .28 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #dcd9d2, #cfccc4);
  color: #2d2c2a; overflow: clip; padding-bottom: 0;
}
.f-garage .rh-fr { color: #7a6a4e; }
.cert-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 44px 30px; padding: 30px 0 20px; }
.cert { position: relative; margin: 0; transform: rotate(var(--tilt)); transform-origin: 50% -30px; animation: cert-in .9s var(--ease) both; animation-delay: var(--d); transition: transform .5s var(--ease); }
.cert:hover { transform: rotate(0) translateY(-4px); }
@keyframes cert-in { from { opacity: 0; transform: rotate(calc(var(--tilt) * 6)) translateY(-12px); } }
.cert-wire { position: absolute; left: 22%; right: 22%; top: -30px; height: 30px; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - .6px), #6a655c calc(50% - .6px), #6a655c calc(50% + .6px), transparent calc(50% + .6px)) left / 50% 100% no-repeat,
              linear-gradient(to top left, transparent calc(50% - .6px), #6a655c calc(50% - .6px), #6a655c calc(50% + .6px), transparent calc(50% + .6px)) right / 50% 100% no-repeat; }
.cert-wire::before { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #bfb8aa, #55504a); }
.cert-mat { padding: 9px; background: linear-gradient(145deg, #e6cf98, #8a6a36 30%, #d8be86 55%, #7a5a2a 80%, #c9a867); box-shadow: 0 18px 24px -14px rgba(0,0,0,.55); }
.cert-paper {
  position: relative; aspect-ratio: 4 / 3; box-sizing: border-box; padding: 16px 14px 12px; display: grid; align-content: center; justify-items: center; gap: 4px; text-align: center;
  background: #f7f1e3; box-shadow: inset 0 0 0 7px #f7f1e3, inset 0 0 0 8px rgba(167,134,77,.55), inset 0 0 0 10px #f7f1e3, inset 0 0 0 11px rgba(167,134,77,.3);
  color: #2b2521;
}
.cert-crest { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(167,134,77,.7); box-shadow: inset 0 0 0 3px #f7f1e3, inset 0 0 0 4px rgba(167,134,77,.5); }
.cert-kind { margin: 0; font-family: var(--f-serif); font-size: 10px; font-weight: 600; letter-spacing: .3em; color: #8a6a36; text-transform: uppercase; }
.cert-title { margin: 0; font-family: var(--f-serif); font-weight: 600; font-size: 17px; line-height: 1.25; }
html[data-lang="zh"] .cert-title { font-family: var(--f-zh); font-size: 15px; letter-spacing: .06em; }
.cert-by { margin: 0; font-size: 11px; line-height: 1.4; color: #6a5a46; }
.cert-year { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: #6a5a46; }
.cert-seal { position: absolute; right: 12px; bottom: 10px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c2463a, #8e2f28 60%, #5e1a15); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.cert-seal::after { content: ""; position: absolute; left: 5px; top: 18px; width: 5px; height: 12px; background: #8e2f28; transform: rotate(14deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.cert.is-pending .cert-paper { background: #f1ede4; }
.cert.is-pending .cert-title, .cert.is-pending .cert-by { opacity: .7; }
.cert-stamp { position: absolute; right: 8px; bottom: 14px; border: 2px solid rgba(142,47,40,.8); color: rgba(142,47,40,.9); padding: 1px 8px; font-size: 12px; letter-spacing: .24em; transform: rotate(-10deg); border-radius: 2px; }

/* the drive */
.drive { position: relative; margin-top: 40px; }
.drive-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.drive-sky { position: absolute; inset: 0; --sky: rgb(236,231,214);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sky) 70%, #fff) 0%, var(--sky) 62%, color-mix(in srgb, var(--sky) 80%, #7a6a5a) 78%); transition: background .3s; }
.drive-far { position: absolute; left: 0; bottom: 21vh; height: 38vh; width: 0; will-change: transform; }
.far-scene { position: absolute; bottom: 0; height: 38vh; width: calc(38vh * 3); transform: translateX(-50%); color: #3a322c; opacity: .55; transition: opacity .8s; overflow: visible; }
.far-scene.on { opacity: .95; }
.far-scene .k, .far-scene .k2, .far-scene .k3 { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.far-scene .k { stroke-width: 1.3; } .far-scene .k2 { stroke-width: 1; opacity: .8; } .far-scene .k3 { stroke-width: .7; opacity: .6; }
.far-scene .far-sign { font-family: var(--f-serif); font-size: 14px; letter-spacing: .3em; fill: #7a5c2b; }
.far-scene .far-rain { animation: rain .8s linear infinite; }
@keyframes rain { from { transform: translateY(-20px); } to { transform: translateY(0); } }
.far-scene.on .far-bus { animation: bus 7s linear infinite; }
@keyframes bus { from { transform: translateX(-60px); } to { transform: translateX(120px); } }
.far-scene.on .far-crane { transform-box: fill-box; transform-origin: 20% 100%; animation: crane 8s ease-in-out infinite alternate; }
@keyframes crane { to { transform: rotate(-4deg); } }
.drive-track { position: absolute; left: 0; bottom: 21vh; width: 0; height: 0; z-index: 2; will-change: transform; }
.mile { position: absolute; bottom: 0; width: 0; }
.mile-post { position: absolute; left: -2px; bottom: 0; width: 4px; height: 18vh; background: linear-gradient(90deg, #5a554e, #8a847a); }
.mile-sign {
  position: absolute; left: 0; bottom: 17vh; transform: translateX(-50%) scale(.92); transform-origin: 50% 100%; width: min(360px, 74vw); box-sizing: border-box;
  padding: 16px 20px 14px; background: #f7f1e3; color: #2b2521; border-radius: 2px;
  box-shadow: inset 0 0 0 4px #f7f1e3, inset 0 0 0 5px #2b2521, 0 18px 28px -18px rgba(0,0,0,.6);
  opacity: .5; transition: opacity .6s, transform .6s var(--ease), box-shadow .6s;
}
.mile.on .mile-sign { opacity: 1; transform: translateX(-50%) scale(1); box-shadow: inset 0 0 0 4px #f7f1e3, inset 0 0 0 5px #8e2f28, 0 24px 40px -18px rgba(0,0,0,.7); }
.mile-year { margin: 0; font-family: var(--f-stencil); font-weight: 800; font-size: 44px; line-height: 1; color: #8e2f28; letter-spacing: .02em; }
.mile-title { margin: 6px 0 0; font-family: var(--f-serif); font-weight: 600; font-size: 22px; line-height: 1.25; }
html[data-lang="zh"] .mile-title { font-family: var(--f-zh); font-size: 18px; letter-spacing: .06em; }
.mile-place { margin: 2px 0 8px; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #6a5a46; }
html[data-lang="zh"] .mile-place { font-style: normal; font-size: 13px; letter-spacing: .1em; }
.mile-text { margin: 0; font-size: 15px; line-height: 1.6; }
.drive-road { position: absolute; left: 0; right: 0; bottom: 0; height: 21vh; z-index: 1;
  background: linear-gradient(180deg, #8f8a80 0 4px, #4a4640 4px, #3a3632 60%, #2f2c28); }
.drive-road::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #cfcac0; box-shadow: 0 -3px 0 #7a766e; }
.lane { position: absolute; left: 0; right: 0; top: 46%; height: 5px; background: repeating-linear-gradient(90deg, #e2c78a 0 70px, transparent 70px 140px); }
.car { position: absolute; left: max(4vw, 16px); bottom: calc(21vh * .3); width: clamp(180px, 22vw, 300px); height: auto; z-index: 3; overflow: visible; color: #2b2521; }
.car .k, .car .k2, .car .k3 { stroke: #2b2521; }
.car .k { stroke-width: 1.8; } .car .k2 { stroke-width: 1.2; } .car .k3 { stroke-width: .9; fill: none; }
.car .beam { opacity: .35; transition: opacity .6s; }
.car.moving .beam, .drive.arrived .car .beam { opacity: .95; }
.car.moving .car-body { animation: bob .22s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-1.5px); } }
.car-plate { font-family: var(--f-stencil); font-size: 11px; fill: #f7f1e3; letter-spacing: .08em; }
.drive-hud {
  position: absolute; right: clamp(12px, 3vw, 36px); top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 4;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 40px;
  background: #1c1a18; color: #f0e2c4; box-shadow: inset 0 0 0 2px #7a5c2b, 0 12px 24px -10px rgba(0,0,0,.6);
}
.hud-dial { width: 70px; height: auto; color: #f0e2c4; }
.hud-dial .k3 { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .6; }
.hud-needle { stroke: #ff6a3d; stroke-width: 2; stroke-linecap: round; }
.hud-read { display: grid; line-height: 1.05; }
.hud-year { font-family: var(--f-stencil); font-weight: 800; font-size: 28px; color: #ffcf8a; }
.hud-km { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; opacity: .7; }
.drive-hint { position: absolute; left: 50%; bottom: calc(21vh + 16px); transform: translateX(-50%); z-index: 4; margin: 0; padding: 6px 14px; border-radius: 2px; background: rgba(247,241,227,.9); color: #2b2521; font-size: 13px; letter-spacing: .1em; transition: opacity .6s; white-space: nowrap; }
.drive-hint::after { content: "↓"; display: inline-block; margin-left: 8px; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.drive-hint.gone { opacity: 0; }
@media (max-width: 640px) {
  .mile-sign { bottom: 15vh; padding: 12px 14px; }
  .mile-year { font-size: 34px; }
  .drive-hud { padding: 6px 12px 6px 8px; gap: 8px; }
  .hud-dial { width: 50px; } .hud-year { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .car.moving .car-body, .far-scene * { animation: none !important; } }

/* the licence */
.drive-end { padding-top: 70px; }
.licence { display: grid; justify-items: center; }
.lic-card {
  position: relative; width: min(100%, 820px); box-sizing: border-box; display: grid; gap: 22px; padding: 26px clamp(18px, 3.4vw, 34px) 24px; border-radius: 12px;
  background:
    repeating-radial-gradient(circle at 20% 110%, rgba(142,47,40,.07) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 110% -10%, rgba(31,42,68,.05) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, #f4d3cc, #efc5bd 50%, #f3d8cf);
  color: #2b2521; box-shadow: inset 0 0 0 1px rgba(142,47,40,.25), 0 40px 60px -34px rgba(0,0,0,.6);
  transform: rotate(-.6deg);
}
@media (min-width: 760px) { .lic-card { grid-template-columns: 200px minmax(0, 1fr); gap: 34px; } }
.lic-left { display: grid; gap: 10px; align-content: start; justify-items: start; }
.lic-rf { margin: 0; font-family: var(--f-serif); font-size: 10px; font-weight: 600; letter-spacing: .3em; color: #8e2f28; }
.lic-h { margin: 0; font-family: var(--f-serif); font-weight: 500; font-style: italic; font-size: 30px; line-height: 1.1; }
html[data-lang="zh"] .lic-h { font-family: var(--f-zh); font-style: normal; font-weight: 600; font-size: 24px; letter-spacing: .3em; }
.lic-photo { width: 130px; aspect-ratio: 9 / 11; background: linear-gradient(180deg, #cfc3b6, #b5a898); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); color: #3a322c; }
.lic-photo svg { width: 100%; height: 100%; display: block; }
.lic-photo .k2 { fill: none; stroke: currentColor; stroke-width: 1.2; }
.lic-cat { margin: 0; font-size: 12px; letter-spacing: .1em; color: #6a5a46; }
.lic-cat b { font-family: var(--f-mono); font-weight: 500; color: #2b2521; }
.lic-bio { display: grid; gap: 2px; }
.lic-bio p { margin: 0; line-height: 1.75; }
.lic-bio p:first-child { font-family: var(--f-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.3; margin-bottom: 8px; }
html[data-lang="zh"] .lic-bio p:first-child { font-family: var(--f-zh); font-style: normal; font-weight: 600; font-size: 20px; letter-spacing: .1em; }
.lic-rows { display: grid; margin-top: 16px; border-top: 1px solid rgba(43,37,33,.3); }
.lic-row { display: grid; grid-template-columns: 1.6em 6.5em minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(43,37,33,.15); font-size: 14px; line-height: 1.5; }
.lic-n { font-family: var(--f-mono); font-size: 11px; color: #8e2f28; padding-top: 2px; }
.lic-k { font-size: 12px; letter-spacing: .08em; color: #6a5a46; padding-top: 1px; }
.lic-v { overflow-wrap: anywhere; }
.lic-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.lic-sign { font-family: var(--f-hand); font-size: 34px; line-height: 1; color: #1f2a44; margin-right: auto; transform: rotate(-4deg); }
.lic-mail { position: relative; font-family: var(--f-mono); font-size: 12px; }
.lic-mail.copied::after { content: attr(data-done); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); background: #2b2521; color: #f4efe6; font-family: var(--f-zh); font-size: 11px; padding: 2px 8px; border-radius: 2px; white-space: nowrap; }
.lic-stamp { position: absolute; right: 22px; top: 18px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; text-align: center; border: 2px solid rgba(31,42,68,.45); color: rgba(31,42,68,.55); font-family: var(--f-serif); font-size: 11px; font-weight: 600; letter-spacing: .18em; line-height: 1.4; transform: rotate(-14deg); pointer-events: none; }
@media (max-width: 760px) { .lic-stamp { top: auto; bottom: 90px; } }
.f-garage .landing { padding-bottom: 60px; }
.f-garage .site-foot { background: #2b2722; color: #cfc6b6; }
.building svg { height: min(calc(100svh - 270px), 960px); min-height: 440px; }
.f-bar .scene { opacity: .55; }
.f-darkroom .scene, .f-theatre .scene { opacity: .8; }
@media (min-width: 760px) { .cert-wall { grid-template-columns: repeat(3, minmax(0, 250px)); justify-content: center; gap: 56px 48px; } }
.drive-sky::after { content: ""; position: absolute; left: var(--sx, 12%); top: var(--sy, 34%); width: 13vh; height: 13vh; margin: -6.5vh 0 0 -6.5vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,200,.95) 0 34%, rgba(255,210,150,.35) 36%, transparent 70%); }
.drive-sky::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse 18% 5% at 22% 20%, rgba(255,255,255,.55), transparent 70%),
  radial-gradient(ellipse 14% 4% at 64% 14%, rgba(255,255,255,.45), transparent 70%),
  radial-gradient(ellipse 20% 5% at 86% 28%, rgba(255,255,255,.4), transparent 70%); }
.drive-far { bottom: 21vh; height: 46vh; }
.far-scene { height: 46vh; width: calc(46vh * 2.6); opacity: .14; }
.far-scene.on { opacity: .95; }
/* ruled paper in page-relative units (cq units in a background resolve against the ancestor) */
.page.nb, .page.nb.aged { background:
    linear-gradient(90deg, transparent calc(13% - 1px), rgba(190, 70, 60, .42) calc(13% - 1px) 13%, transparent 13%),
    repeating-linear-gradient(180deg, transparent 0 calc(4.835% - 1px), rgba(80, 115, 160, .24) calc(4.835% - 1px) 4.835%) 0 100% / 100% 91% no-repeat,
    #f1e7d0; }
.page.nb.verso, .page.nb.aged.verso { background:
    linear-gradient(90deg, transparent calc(87% - 1px), rgba(190, 70, 60, .42) calc(87% - 1px) 87%, transparent 87%),
    repeating-linear-gradient(180deg, transparent 0 calc(4.835% - 1px), rgba(80, 115, 160, .24) calc(4.835% - 1px) 4.835%) 0 100% / 100% 91% no-repeat,
    #f1e7d0; }
.page.nb.aged.recto::after { right: 36%; }
.door-scene { padding-top: 64px; }
.f-study .room-head { margin-bottom: 20px; }
@media (max-width: 919px) {
  .bar-stage { order: -1; position: sticky; top: 64px; z-index: 5; padding: 14px 14px 16px; background: rgba(30, 16, 12, .92); backdrop-filter: blur(4px); }
  .bar-vessel { width: 110px; }
  .bar-recipe { font-size: 13px; }
}
@media (max-width: 640px) { .lobby { padding-bottom: 96px; } }
.f-bar { overflow: clip; }

/* ==========================================================================
   v6 — design system: Envoi de Rome (drawn plates) + Maison d'édition (printed objects)
   One hand. Ink line and watercolour wash on toned paper.
   Two families: Noto Serif SC (Chinese) + Bodoni Moda (Latin, optical sizes).
   IBM Plex Mono survives only inside the lift's LED.
   ========================================================================== */
:root {
  /* paper & ink */
  --paper: #efe8da;
  --paper-2: #e6ddcb;
  --paper-3: #d8ccb5;
  --ink: #2a2420;
  --ink-2: #5f554c;
  --ink-3: #9a8e80;
  --hair: rgba(42, 36, 32, .28);
  --rouge: #8e2f28;
  /* washes: transparent watercolour, always laid over paper */
  --w-rose: #c99b8e;
  --w-stone: #d9ccb4;
  --w-sky: #b8c4c8;
  --w-leaf: #9fae8f;
  --w-walnut: #8a6749;
  --w-lamp: #f0c678;
  --w-velvet: #7a2a2c;
  /* nuit: lamplit plates */
  --nuit: #1b1e25;
  --nuit-sepia: #2b2019;
  --nuit-line: #d8ccb6;
  /* line weights */
  --lw-1: 1.2px; --lw-2: .75px; --lw-3: .45px;
  /* type scale (perfect fourth from 15) */
  --t-0: 12px; --t-1: 15px; --t-2: 18px; --t-3: 24px; --t-4: 32px; --t-5: clamp(42px, 5.6vw, 68px);
  /* motion */
  --e-out: cubic-bezier(.22, .61, .36, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --d-1: 180ms; --d-2: 420ms; --d-3: 900ms; --d-4: 1600ms;

  --f-serif: "Bodoni Moda", "Noto Serif SC", "Songti SC", Georgia, serif;
  --f-zh: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-hand: "Bodoni Moda", "Noto Serif SC", Georgia, serif;
  --f-hand-zh: "Noto Serif SC", "Songti SC", serif;
  --f-stencil: "Bodoni Moda", Georgia, serif;
  --f-display: var(--f-serif); --f-body: var(--f-serif);
  --gilt: #a7864d; --gilt-hi: #cdb07a; --gilt-lo: #7a5c2b;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
html, body { background: var(--paper); }
body { font-family: var(--f-serif); font-size: var(--t-2); line-height: 1.7; color: var(--ink); font-optical-sizing: auto; }
html[data-lang="zh"] body { font-size: var(--t-1); line-height: 1.95; }
em, i { font-style: italic; }
::selection { background: rgba(142, 47, 40, .18); }

/* ---------- top bar: quiet ---------- */
.brand { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 22px; letter-spacing: 0; }
.sound-btn, .lang { border-radius: 0; border-color: var(--hair); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; height: 30px; }
body[data-floor="library"] .sound-btn, body[data-floor="library"] .lang,
body[data-floor="theatre"] .sound-btn, body[data-floor="theatre"] .lang,
body[data-floor="darkroom"] .sound-btn, body[data-floor="darkroom"] .lang,
body[data-floor="bar"] .sound-btn, body[data-floor="bar"] .lang { border-color: rgba(216, 204, 182, .35); }
.lang button { font-family: var(--f-serif); font-size: 13px; padding: 0 11px; }
.sound-btn[aria-pressed="true"] .sb-bars i { background: currentColor; }
.sound-hint { border-radius: 0; background: var(--paper); border-color: var(--hair); font-size: var(--t-0); letter-spacing: .04em; }

/* ---------- the call plate: flat brass, one hairline ---------- */
.call { background: #b99a62; border: 1px solid #6f5629; border-radius: 30px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.call-knob { background: #d8c08c; box-shadow: inset 0 0 0 1px #6f5629; }

/* ---------- room head: datum, name, note ---------- */
.room-head { gap: 12px; margin-bottom: 48px; max-width: 760px; }
.rh-datum { margin: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--f-serif); font-style: italic; font-size: var(--t-1); color: currentColor; opacity: .7; }
.rh-datum svg { width: 11px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1; align-self: center; }
.rh-code { margin-left: 6px; padding-left: 10px; border-left: 1px solid currentColor; font-style: normal; }
.rh-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 22px; margin: 0; font-weight: 400; }
.rh-name { font-family: var(--f-zh); font-weight: 600; font-size: var(--t-5); line-height: 1.05; letter-spacing: .06em; }
html[data-lang="en"] .rh-name { font-family: var(--f-serif); font-weight: 500; letter-spacing: -.01em; }
.rh-fr { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: var(--t-4); line-height: 1.1; letter-spacing: 0; text-transform: none; color: currentColor; opacity: .62; }
.f-greenhouse .rh-fr, .f-study .rh-fr, .f-lab .rh-fr, .f-theatre .rh-fr, .f-library .rh-fr, .f-bar .rh-fr, .f-garage .rh-fr { color: currentColor; }
.rh-note { max-width: 30em; opacity: .8; }
html[data-lang="en"] .rh-note { font-size: var(--t-2); font-style: italic; }

/* ---------- landing ---------- */
.landing-btn { border-radius: 0; border-color: var(--hair); font-family: var(--f-serif); font-size: var(--t-1); padding: 10px 18px; }
.landing-btn b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: var(--t-1); opacity: .6; }
.landing-doors { border-color: var(--hair); opacity: 1; }
.f-bar .landing-btn, .f-theatre .landing-btn, .f-darkroom .landing-btn, .f-library .landing-btn { border-color: rgba(216, 204, 182, .35); }

/* ---------- buttons: ink, not gold ---------- */
.btn-gilt {
  border: 1px solid var(--ink); border-radius: 0; padding: 11px 22px; background: var(--ink); color: var(--paper);
  font-family: var(--f-serif); font-weight: 500; font-size: var(--t-1); letter-spacing: .04em; box-shadow: none;
  transition: background var(--d-1), border-color var(--d-1);
}
html[data-lang="zh"] .btn-gilt { font-size: 14px; letter-spacing: .14em; }
.btn-gilt:hover { filter: none; background: var(--rouge); border-color: var(--rouge); }
.btn-line { border-radius: 0; border-color: var(--hair); font-family: var(--f-serif); font-size: var(--t-1); padding: 9px 16px; }
.btn-line:hover { color: var(--rouge); border-color: var(--rouge); }
.pk-input input, .pk-input textarea { border-radius: 0; }
.pk-field legend, .pk-input > span { text-transform: none; letter-spacing: .06em; font-weight: 500; font-size: 13px; }

/* ---------- plate: the drawn sheet each floor becomes ---------- */
.plate { position: relative; margin: 0 clamp(10px, 2.4vw, 36px); box-sizing: border-box; }
.plate::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; border: 1px solid var(--plate-rule, rgba(42,36,32,.55)); box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px var(--plate-rule-2, rgba(42,36,32,.22)); }
.cartouche {
  position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 12px;
  padding: 12px 22px 14px; border-top: 1px solid var(--plate-rule-2, rgba(42,36,32,.22));
  font-family: var(--f-serif); font-style: italic; font-size: 13px; color: currentColor;
}
.cartouche > :first-child { opacity: .6; }
.cartouche > :last-child { text-align: right; opacity: .6; }
.cartouche b { font-style: normal; font-weight: 500; font-size: var(--t-1); letter-spacing: .04em; }
html[data-lang="zh"] .cartouche b { font-family: var(--f-zh); font-weight: 600; letter-spacing: .2em; }
@media (max-width: 640px) { .cartouche { grid-template-columns: 1fr; justify-items: center; gap: 2px; text-align: center; } .cartouche > :last-child { text-align: center; } }

@media (prefers-reduced-motion: reduce) { :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; } }

/* ==========================================================================
   RDC · the square — day & night
   ========================================================================== */
.f-lobby { background: var(--grain), var(--paper); transition: background-color var(--d-4); }
.lobby-eb { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: var(--t-1); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.lobby-name { font-family: var(--f-serif); font-weight: 500; font-size: clamp(52px, 7vw, 92px); letter-spacing: -.015em; line-height: .95; }
.lobby-sub { font-weight: 400; letter-spacing: .24em; font-size: 13px; text-transform: none; }
html[data-lang="zh"] .lobby-sub { letter-spacing: .3em; }
.lobby-foot { font-family: var(--f-serif); font-style: italic; align-items: baseline; }
.tod-btn { cursor: pointer; background: none; border: 0; border-bottom: 1px solid var(--hair); padding: 0 0 2px; color: inherit; font: inherit; display: inline-flex; gap: 10px; align-items: baseline; }
.tod-btn:hover { color: var(--rouge); border-color: var(--rouge); }
.tod-time { font-style: normal; font-variant-numeric: lining-nums tabular-nums; opacity: .7; }
.building { overflow: visible; }

#sectionSvg .st-sign { font-family: var(--f-serif); font-size: 7.2px; letter-spacing: .22em; fill: #5f554c; }
#sectionSvg .win { fill: #c9d2d5; fill-opacity: .55; transition: fill var(--d-4), fill-opacity var(--d-4); }
#sectionSvg .sky-a { stop-color: #b8c4c8; stop-opacity: .32; transition: stop-color var(--d-4), stop-opacity var(--d-4); }
#sectionSvg .sky-b { stop-color: #b8c4c8; stop-opacity: 0; }
#sectionSvg .night-only { display: none; }
html[data-tod="night"] #sectionSvg .night-only { display: inline; }
html[data-tod="night"] #sectionSvg .day-only { display: none; }
#sectionSvg #people .fine, #sectionSvg #people .hair { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
#sectionSvg #people .fine { stroke-width: .75; color: #3a322c; }
#sectionSvg #people .hair { stroke-width: .45; color: #6e6258; }
#sectionSvg #people [style*="fill"] { stroke: currentColor; }
#sectionSvg #people { pointer-events: none; }
#sectionSvg .walker .leg, #sectionSvg .walker .arm { transform-box: fill-box; transform-origin: 50% 0; }
#sectionSvg .walker .arm { transform-origin: 0 0; animation: swing .9s ease-in-out infinite alternate; }
#sectionSvg .walker .leg.a { animation: stride .9s ease-in-out infinite alternate; }
#sectionSvg .walker .leg.b { animation: stride .9s ease-in-out infinite alternate-reverse; }
@keyframes stride { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
@keyframes swing { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
#sectionSvg .wheel { transform-box: fill-box; transform-origin: center; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#sectionSvg .still .arm { transform-box: fill-box; transform-origin: 0 50%; animation: swing 2.4s ease-in-out infinite alternate; }
#sectionSvg .cloud { animation: drift 70s ease-in-out infinite alternate; }
#sectionSvg .cloud.c2 { animation-duration: 90s; animation-delay: -30s; }
@keyframes drift { to { transform: translateX(120px); } }
#sectionSvg .stars circle { fill: #efe6d0; animation: twinkle var(--tw, 3s) ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .25; } to { opacity: .9; } }
#sectionSvg .string-lights circle { animation: twinkle 1.6s ease-in-out infinite alternate; }
#sectionSvg .string-lights circle:nth-child(2n) { animation-delay: -.8s; }

/* night */
html[data-tod="night"] .f-lobby { background: var(--grain), var(--nuit); color: #e9dfcc; }
html[data-tod="night"] body[data-floor="lobby"] { --top-ink: #efe6d6; }
html[data-tod="night"] body[data-floor="lobby"] .sound-btn, html[data-tod="night"] body[data-floor="lobby"] .lang { border-color: rgba(216, 204, 182, .35); }
html[data-tod="night"] .lobby-eb, html[data-tod="night"] .lobby-sub, html[data-tod="night"] .lobby-foot, html[data-tod="night"] .lobby-story { color: #b6ab9a; }
html[data-tod="night"] .lobby-story.show span { color: #efe6d6; }
html[data-tod="night"] .tod-btn { border-color: rgba(216, 204, 182, .35); }
html[data-tod="night"] #sectionSvg { color: #d8ccb6; }
html[data-tod="night"] #sectionSvg .fine { color: #b3a797; }
html[data-tod="night"] #sectionSvg .hair { color: #8b8070; }
html[data-tod="night"] #sectionSvg .poche { fill: #5d3f3a; stroke: #d8ccb6; }
html[data-tod="night"] #sectionSvg .rw { fill: #e8b766; }
html[data-tod="night"] #sectionSvg .rw-b { fill: #c9955a; }
html[data-tod="night"] #sectionSvg .room { color: #2b2521; }
html[data-tod="night"] #sectionSvg .room .fine { color: #3a2f27; }
html[data-tod="night"] #sectionSvg .room .hair { color: #5a4a3c; }
html[data-tod="night"] #sectionSvg .veil { fill: #1b1e25; }
html[data-tod="night"] #sectionSvg .lvl-name, html[data-tod="night"] #sectionSvg .t-dim, html[data-tod="night"] #sectionSvg .t-axis { fill: #a89c8c; }
html[data-tod="night"] #sectionSvg .stop .lead { stroke: #d8ccb6; }
html[data-tod="night"] #sectionSvg .axis { stroke: #4a4f5a; }
html[data-tod="night"] #sectionSvg #earth line { stroke: #4b4f59; }
html[data-tod="night"] #sectionSvg #street .wash { opacity: .16; }
html[data-tod="night"] #sectionSvg #street .wash.lamp-wash { opacity: .9; }
html[data-tod="night"] #sectionSvg .win { fill: #252a34; fill-opacity: 1; }
html[data-tod="night"] #sectionSvg .win.lit { fill: #efc36f; fill-opacity: .92; }
html[data-tod="night"] #sectionSvg .st-sign { fill: #d8ccb6; }
html[data-tod="night"] #sectionSvg .sky-a { stop-color: #2b3446; stop-opacity: .9; }
html[data-tod="night"] #sectionSvg .sky-b { stop-color: #1b1e25; stop-opacity: 0; }
html[data-tod="night"] #sectionSvg #people .fine { color: #d8ccb6; }
html[data-tod="night"] #sectionSvg #people .hair { color: #a89c8c; }
html[data-tod="night"] #sectionSvg #people [style*="fill"] { fill-opacity: .25 !important; }
html[data-tod="night"] #sectionSvg .wash rect[fill="#f1e9dd"] { fill: #e8b766; }
@media (prefers-reduced-motion: reduce) { #sectionSvg .walker *, #sectionSvg .cloud, #sectionSvg .stars circle, #sectionSvg .wheel { animation: none !important; } }
.building svg { height: min(calc(100svh - 300px), 940px); min-height: 420px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
@media (max-width: 719px) { .building svg { -webkit-mask-image: none; mask-image: none; } }
#sectionSvg #street .wash { animation: none; }
html[data-tod="night"] #sectionSvg #street .wash { opacity: .14; }
html[data-tod="night"] #sectionSvg #street .wash.lamp-wash { opacity: .85; }
html[data-tod="night"] #sectionSvg #street .wash.stone { opacity: .08; }
html[data-tod="night"] #sectionSvg .rw { fill: #e6c07e; }
html[data-tod="night"] #sectionSvg .rw[y="208"] { fill: #e9b66a; }
html[data-tod="night"] #sectionSvg .rw[y="298"] { fill: #d9a060; }
html[data-tod="night"] #sectionSvg .rw[y="388"] { fill: #e4d6b4; }
html[data-tod="night"] #sectionSvg .rw[y="478"] { fill: #c98b62; }
html[data-tod="night"] #sectionSvg .rw[y="568"] { fill: #ecc88a; }
html[data-tod="night"] #sectionSvg .rw[y="668"] { fill: #c58a55; }
html[data-tod="night"] #sectionSvg .rw[y="758"] { fill: #a8584a; }
html[data-tod="night"] #sectionSvg .rw[y="848"] { fill: #b9bcb2; }
html[data-tod="night"] #sectionSvg path.rw { fill: #cfd7c2; }

/* ==========================================================================
   4 · LE CABINET — plate IV. Elevation of the door; plan of the desk.
   ========================================================================== */
.f-study { background: var(--grain), var(--paper); color: var(--ink); padding-top: 62px; }
.plate-study { overflow: hidden; background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(240, 198, 120, .16), transparent 70%); }
.plate-study .scene { height: 100%; opacity: .75; }
.plate-study .room-head { padding-top: 34px; margin-bottom: 0; }
.f-study .scene { --sc: #5f554c; }
.study-stage { padding: 12px 16px 40px; }
.door-scene { padding-top: 70px; gap: 26px; }

/* the door, drawn */
.doorway {
  --dw: min(520px, 88vw);
  width: var(--dw); height: calc(var(--dw) * 1.36); max-height: 76vh; min-height: 440px; padding: 14px 14px 0;
  background: var(--fibre), rgba(217, 204, 180, .55);
  box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 7px transparent, inset 0 0 0 8px var(--hair);
  perspective: 1800px;
}
.door-transom { top: -64px; left: 14px; right: 14px; height: 50px; background: var(--fibre), rgba(217, 204, 180, .55); box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 6px transparent, inset 0 0 0 7px var(--hair); }
.door-transom span { font-family: var(--f-serif); font-style: italic; font-size: var(--t-2); letter-spacing: .06em; color: var(--ink-2); }
.door-room { inset: 14px 14px 0; background: radial-gradient(ellipse 46% 40% at 50% 60%, rgba(240, 198, 120, .95), rgba(240, 198, 120, .25) 60%, rgba(138, 103, 73, .35)); box-shadow: inset 0 0 0 1px var(--ink); }
.door-room::after { left: 26%; right: 26%; bottom: 16%; height: 18%; background: rgba(138, 103, 73, .55); box-shadow: inset 0 0 0 1px var(--ink), 0 -5px 0 -4px var(--ink); }
.door-leaf {
  top: 14px; width: calc(50% - 14px);
  background: var(--fibre), var(--grain), rgba(138, 103, 73, .62);
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: transform var(--d-4) var(--e-io);
}
.door-leaf.l { left: 14px; } .door-leaf.r { right: 14px; }
.door-leaf .dp { left: 14%; right: 14%; border-radius: 0; box-shadow: none; border: 1px solid rgba(42, 36, 32, .8); outline: 1px solid rgba(42, 36, 32, .35); outline-offset: -6px; background: rgba(90, 60, 38, .12); }
.door-leaf .dp.top { top: 7%; height: 48%; } .door-leaf .dp.bot { bottom: 6%; height: 28%; }
.dl-handle { top: 57%; width: 7px; height: 54px; border-radius: 4px; background: rgba(201, 168, 102, .85); box-shadow: inset 0 0 0 1px var(--ink); }
.sconce { position: absolute; top: 18%; width: 22px; height: 44px; z-index: 3; }
.sconce.l { left: -64px; } .sconce.r { right: -64px; }
.sconce::before { content: ""; position: absolute; left: 2px; right: 2px; top: 0; height: 18px; background: rgba(233, 220, 192, .9); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--ink); outline: 1px solid var(--ink); outline-offset: -1px; }
.sconce::after { content: ""; position: absolute; left: 50%; top: 18px; width: 1px; height: 26px; background: var(--ink); }
.sconce { background: radial-gradient(circle at 50% 20%, rgba(240, 198, 120, .55), transparent 70%); box-shadow: 0 0 60px 40px rgba(240, 198, 120, .18); border-radius: 50%; }
@media (max-width: 640px) { .sconce { display: none; } }

/* the keypad: a brass escutcheon, drawn */
.door-leaf.r .keypad {
  top: 12%; width: min(206px, 84%); padding: 14px 14px 12px; gap: 9px;
  background: var(--grain), rgba(201, 168, 102, .78); border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(42, 36, 32, .35);
}
.kp-label { font-family: var(--f-serif); font-style: italic; font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--ink); }
html[data-lang="zh"] .kp-label { font-family: var(--f-zh); font-style: normal; letter-spacing: .2em; }
.kp-lamp { width: 7px; height: 7px; background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.kp-lamp.red { background: var(--rouge); box-shadow: inset 0 0 0 1px var(--ink); }
.kp-lamp.green { background: #5b7a4a; box-shadow: inset 0 0 0 1px var(--ink); }
.kp-lamp.busy { background: #c98a3c; box-shadow: inset 0 0 0 1px var(--ink); }
.door-leaf.r .kp-display, .kp-display {
  height: 36px; background: rgba(241, 235, 223, .9); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--ink);
  color: var(--ink); font-family: var(--f-serif); font-size: 20px; letter-spacing: .4em; text-shadow: none; caret-color: var(--ink);
}
.kp-display::placeholder { color: var(--ink-3); letter-spacing: 0; }
.kp-display:focus { box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 3px rgba(142, 47, 40, .25); }
.door-leaf.r .kp-keys { gap: 6px; }
.door-leaf.r .kp-key, .kp-key {
  height: 36px; background: rgba(241, 235, 223, .55); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
  font-family: var(--f-serif); font-size: 16px; transition: background var(--d-1);
}
.kp-key:hover { background: rgba(241, 235, 223, .95); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kp-key:active { background: var(--ink); color: var(--paper); transform: none; }
.kp-key.fn { color: var(--ink-2); font-size: 14px; }
.kp-msg { font-family: var(--f-serif); font-style: italic; font-size: 12px; letter-spacing: 0; color: var(--ink); min-height: 16px; }
.kp-msg.err { color: var(--rouge); }
.vault-note { font-style: italic; color: var(--ink-2); font-size: var(--t-2); }
html[data-lang="zh"] .vault-note { font-style: normal; font-size: var(--t-1); }
.study-stage.is-opening .door-leaf.l { transform: rotateY(-100deg); filter: none; }
.study-stage.is-opening .door-leaf.r { transform: rotateY(100deg); filter: none; }

/* the desk, in plan */
.room-scene { padding-top: 26px; }
.desk-plan {
  position: relative; margin: 0 auto; width: min(980px, 100%); aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(177deg, transparent 0 22px, rgba(60, 38, 22, .07) 22px 23px, transparent 23px 41px, rgba(60, 38, 22, .05) 41px 42px),
    var(--fibre), var(--grain), rgba(138, 103, 73, .5);
  box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 9px transparent, inset 0 0 0 10px rgba(42, 36, 32, .35), 0 30px 50px -36px rgba(40, 25, 10, .7);
}
.desk-plan::before { content: ""; position: absolute; left: 13%; right: 13%; top: 12%; bottom: 12%;
  background: var(--grain), rgba(94, 40, 38, .42); box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(205, 176, 122, .75); }
.dk-obj { position: absolute; overflow: visible; }
.dk-obj .dk-l, .dk-obj .dk-h { fill: none; stroke: var(--ink); vector-effect: non-scaling-stroke; }
.dk-obj .dk-l { stroke-width: 1; } .dk-obj .dk-h { stroke-width: .6; }
.dk-lamp { left: 2%; top: -3%; width: 20%; }
.dk-ink { right: 5%; top: 5%; width: 9%; }
.dk-cup { right: 17%; top: 62%; width: 9%; }
.dk-letters { left: 3%; bottom: 4%; width: 16%; transform: rotate(-6deg); }
.dk-flower { left: 44%; top: 16%; width: 5%; transform: rotate(24deg); }
.dk-pencil { left: 48%; bottom: 17%; width: 16%; transform: rotate(-14deg); }

/* the notebook: an object you can pick up */
.plate-study .carnet {
  position: absolute; left: 18%; top: 15%; width: 25%; min-width: 150px; aspect-ratio: 148 / 210; transform: rotate(-4deg);
  border-radius: 2px 7px 7px 2px;
  background: var(--fibre), var(--grain), #b48c5e;
  box-shadow: inset 5px 0 7px -5px rgba(40, 20, 5, .45), inset 0 0 0 1px rgba(60, 35, 15, .45), 0 22px 26px -18px rgba(30, 15, 5, .65);
}
.plate-study .carnet::before { inset: 7px 9px 7px 12px; border: 1px dashed rgba(60, 35, 15, .3); }
.plate-study .carnet:hover, .plate-study .carnet:focus-visible { transform: rotate(-1deg) translateY(-6px); }
.carnet-label { left: 16%; right: 16%; top: 16%; padding: 14px 8px 12px; gap: 4px; background: var(--grain), #f1e8d4; border: 0; box-shadow: inset 0 0 0 1px rgba(42, 36, 32, .7), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(42, 36, 32, .3); }
.carnet-label b { font-family: var(--f-zh); font-weight: 600; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .12em; line-height: 1.1; color: var(--ink); }
.carnet-label b[lang="en"] { font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
.carnet-label i { font-family: var(--f-serif); font-style: italic; font-size: 12px; letter-spacing: .02em; color: var(--ink-2); }
.carnet-label small { font-family: var(--f-serif); font-size: 10px; letter-spacing: .3em; color: var(--ink-3); }
.carnet-twine { top: 62%; height: 3px; background: repeating-linear-gradient(45deg, #d6c29a 0 2px, #a88c5e 2px 4px); box-shadow: none; }
.carnet-seal { top: 62%; width: 44px; height: 44px; margin: -22px 0 0 -22px; background: #8e2f28; box-shadow: inset 0 0 0 4px rgba(0,0,0,.12), inset 0 0 0 5px rgba(255, 210, 190, .25), 0 2px 3px rgba(0,0,0,.3); font-size: 20px; color: #f1c9b6; text-shadow: none; }
.carnet.breaking { transform: rotate(0) translateY(-10px) scale(1.03); }

/* the slip of paper beside it */
.plate-study .desk-card {
  position: absolute; right: 9%; top: 20%; width: 30%; min-width: 220px; box-sizing: border-box; padding: 20px 20px 18px; gap: 10px;
  background: var(--grain), #f5efe2; box-shadow: inset 0 0 0 1px var(--hair), 0 14px 20px -14px rgba(30, 15, 5, .5); transform: rotate(2deg);
}
.desk-stats { font-family: var(--f-serif); font-style: italic; font-size: var(--t-2); line-height: 1.4; }
html[data-lang="zh"] .desk-stats { font-size: var(--t-1); }
.desk-cats li { border-radius: 0; border-color: rgba(142, 47, 40, .45); font-size: 12px; letter-spacing: .06em; padding: 1px 8px; }
.desk-hint { font-style: italic; color: var(--ink-2); font-size: 14px; margin: 0; }
@media (max-width: 720px) {
  .desk-plan { aspect-ratio: 3 / 4.4; }
  .desk-plan::before { left: 8%; right: 8%; top: 8%; bottom: 8%; }
  .plate-study .carnet { left: 12%; top: 7%; width: 46%; }
  .plate-study .desk-card { left: 14%; right: 8%; top: auto; bottom: 7%; width: auto; min-width: 0; }
  .dk-lamp { width: 34%; left: auto; right: -6%; top: -2%; }
  .dk-ink { right: 8%; top: 30%; width: 14%; }
  .dk-cup, .dk-flower, .dk-pencil { display: none; }
  .dk-letters { width: 26%; left: auto; right: 4%; bottom: auto; top: 40%; }
}

/* notebook pages: set in type, no handwriting */
.nb-date { font-family: var(--f-serif); font-style: italic; font-size: 6.2cqw; color: #1f2a44; }
.nb-meta { font-family: var(--f-serif); }
.nb-title { font-family: var(--f-zh); font-weight: 600; font-size: 4.6cqw; letter-spacing: .04em; }
html[data-lang="en"] .nb-title { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 5.4cqw; }
.nb-cont, .nb-folio, .nb-rd, .nb-rp { font-family: var(--f-serif); font-style: italic; }
.nb-toc-h { font-family: var(--f-zh); font-weight: 600; font-size: 5.4cqw; letter-spacing: .2em; }
.nb-toc-h small { font-family: var(--f-serif); font-style: italic; letter-spacing: 0; }
.nb-epi p { font-family: var(--f-zh); font-weight: 400; font-size: 5.2cqw; line-height: 1.8; letter-spacing: .08em; }
html[data-lang="en"] .nb-epi p { font-family: var(--f-serif); font-style: italic; font-size: 6cqw; }
.kr-label b { font-family: var(--f-zh); font-weight: 600; font-size: 9cqw; letter-spacing: .12em; }
.kr-label i { font-family: var(--f-serif); }
.ex-libris b { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 11cqw; }
.page.kraft { background: var(--fibre), var(--grain), #b48c5e; }
.kr-band { display: none; }
.viewer.is-carnet { background: radial-gradient(ellipse 60% 55% at 50% 48%, #34261b, #15100c 75%); }
.door-leaf { background: var(--fibre), var(--grain), linear-gradient(rgba(138, 103, 73, .62), rgba(138, 103, 73, .62)), var(--paper); }
.sconce, .sconce::before, .sconce::after { all: unset; }
.sconce { position: absolute; top: 16%; width: 40px; height: 80px; z-index: 3; }
.sconce.l { left: -78px; } .sconce.r { right: -78px; }
.sconce svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 640px) { .sconce { display: none; } .plate-study .carnet { top: 5%; } .plate-study .desk-card { bottom: 5%; } }

/* viewer chrome, restated in the house type */
.viewer .eyebrow { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: var(--t-1); letter-spacing: 0; text-transform: none; opacity: .7; }
.viewer-title { font-family: var(--f-zh); font-weight: 600; letter-spacing: .08em; }
.viewer-title .zh { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0; margin-left: 12px; opacity: .75; }
.viewer-close { border-radius: 0; border: 1px solid rgba(216, 204, 182, .4); background: transparent; box-shadow: none; outline: none; font-family: var(--f-serif); }
.fb-btn { border-radius: 0; background: transparent; border: 1px solid rgba(216, 204, 182, .4); box-shadow: none; font-family: var(--f-serif); }
.fb-count { font-family: var(--f-serif); font-style: italic; letter-spacing: .04em; }
.viewer-hint { font-family: var(--f-serif); font-style: italic; letter-spacing: .02em; }
#fbRange { accent-color: #d8ccb6; }

/* ==========================================================================
   −1 · LE BAR — plate −I. A lamplit sepia sheet; the carte is printed matter.
   ========================================================================== */
.f-bar { --plate-rule: rgba(216, 204, 182, .5); --plate-rule-2: rgba(216, 204, 182, .2); background: var(--grain), var(--nuit-sepia); color: #eadfcb; padding-top: 62px; }
.plate-bar { overflow: hidden; background: radial-gradient(ellipse 55% 40% at 50% 8%, rgba(240, 198, 120, .16), transparent 70%); }
.plate-bar .scene { height: 100%; opacity: .5; }
.f-bar .scene { --sc: #d8ccb6; }
.plate-bar .room-head { padding-top: 34px; }
.plate-bar .wrap { padding-bottom: 56px; }

/* the carte */
.bar-counter { align-items: start; }
@media (min-width: 920px) { .bar-counter { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; } }
.carte {
  position: relative; color: var(--ink); padding: 30px clamp(18px, 3vw, 38px) 22px;
  background: var(--fibre), var(--grain), #f3ead6;
  box-shadow: inset 0 0 0 1px rgba(42, 36, 32, .6), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(42, 36, 32, .25), 0 26px 40px -26px rgba(0, 0, 0, .85);
  transform: rotate(-.6deg);
}
.carte-head { text-align: center; margin-bottom: 18px; }
.carte-t { margin: 0; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -.01em; }
.carte-s { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
html[data-lang="en"] .carte-s { font-style: italic; font-size: 15px; }
.carte-foot { margin: 18px 0 0; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 12px; color: var(--ink-3); }
.carte .bar-steps { gap: 16px; }
.carte .bs { border-top: 1px solid var(--hair); padding-top: 12px; }
.carte .bs legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; color: var(--ink-2); font-size: 13px; letter-spacing: .08em; }
html[data-lang="en"] .carte .bs legend { font-style: italic; letter-spacing: 0; font-size: 15px; }
.carte .bs legend b { font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: 15px; color: var(--rouge); min-width: 1.8em; }
.carte .bs-chips { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px; }
.carte .bs-inline .bs-chips { display: flex; flex-wrap: wrap; gap: 4px 22px; }
@media (max-width: 520px) { .carte .bs-chips { grid-template-columns: 1fr; } }
.carte .bs-chip {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 5px 2px; color: var(--ink);
  font-family: var(--f-zh); font-size: 15px; line-height: 1.5; min-height: 32px;
}
html[data-lang="en"] .carte .bs-chip { font-family: var(--f-serif); font-size: 17px; }
.carte .bs-chip:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }
.c-name { position: relative; white-space: nowrap; padding: 0 3px; }
.c-lead { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(42, 36, 32, .35); transform: translateY(-4px); }
.c-note { font-family: var(--f-serif); font-style: italic; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.c-ring { position: absolute; left: -9px; right: -9px; top: -5px; bottom: -6px; width: calc(100% + 18px); height: calc(100% + 11px); overflow: visible; pointer-events: none; }
.c-ring path { fill: none; stroke: #3b332d; stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; }
.bs-chip[aria-pressed="true"] .c-ring path { animation: pencil .55s var(--e-out) forwards; }
@keyframes pencil { to { stroke-dashoffset: 0; } }
.carte .bs-chip:hover .c-name { color: var(--rouge); }
.carte .bs-chip[aria-pressed="true"], .carte .bs-chip[aria-pressed="true"]:hover { background: none; border: 0; box-shadow: none; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .bs-chip[aria-pressed="true"] .c-ring path { animation: none; stroke-dashoffset: 0; } }

/* the counter */
.plate-bar .bar-stage { background: none; box-shadow: none; padding: 30px 0 18px; border-bottom: 1px solid rgba(216, 204, 182, .55); }
.plate-bar .bar-stage::after { left: -12px; right: -12px; bottom: -16px; height: 14px; border-radius: 0; background: var(--grain), rgba(138, 103, 73, .55); box-shadow: inset 0 0 0 1px rgba(216, 204, 182, .45); }
.plate-bar .bar-vessel { filter: none; width: 190px; }
.plate-bar .bar-vessel path, .plate-bar .bar-vessel rect[fill="none"] { stroke-width: 1.1; }
.plate-bar .bar-recipe { color: #cbbd9f; }
.plate-bar .btn-gilt { background: #eadfcb; color: var(--ink); border-color: #eadfcb; }
.plate-bar .btn-gilt:hover { background: #fff6e4; border-color: #fff6e4; }
.plate-bar .btn-line { border-color: rgba(216, 204, 182, .45); color: #eadfcb; }
@media (max-width: 919px) { .plate-bar .bar-stage { background: rgba(43, 32, 25, .94); padding: 12px 12px 14px; border: 1px solid rgba(216, 204, 182, .3); } .plate-bar .bar-stage::after { display: none; } .plate-bar .bar-vessel { width: 104px; } }

/* the cabinet */
.plate-bar .cellar { margin-top: 72px; background: none; box-shadow: inset 0 0 0 1px rgba(216, 204, 182, .45), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(216, 204, 182, .18); border-radius: 0; }
.plate-bar .cellar-title { font-family: var(--f-serif); font-style: italic; font-weight: 500; }
html[data-lang="zh"] .plate-bar .cellar-title { font-family: var(--f-zh); font-style: normal; letter-spacing: .2em; }
.plate-bar .shelf-row { border-bottom: 1px solid rgba(216, 204, 182, .6); box-shadow: 0 5px 0 -4px rgba(216, 204, 182, .3); }
.plate-bar .shelf-row::after { display: none; }
.plate-bar .cab-item span { font-family: var(--f-serif); font-style: italic; }
.plate-bar .cab-item svg path { stroke-width: 1.2; }

/* the letter */
.plate-bar .letter { box-shadow: 0 26px 40px -26px rgba(0, 0, 0, .85); }
.letter-title { font-family: var(--f-serif); }
.letter .btn-gilt { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.letter-stamp { font-family: var(--f-serif); font-weight: 500; }

/* the life card: letterpress on cotton card */
.lc-card { background: var(--fibre), var(--grain), #f5eddb; box-shadow: inset 0 0 0 1px rgba(42, 36, 32, .6), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(42, 36, 32, .22), 0 40px 60px -30px rgba(0, 0, 0, .9); border-radius: 0; }
.lc-brand { font-family: var(--f-serif); font-weight: 500; letter-spacing: .24em; font-size: 9px; }
.lc-glass path { stroke-width: 1.1 !important; }
.lc-line { font-family: var(--f-serif); font-style: italic; border-color: var(--hair); }
html[data-lang="zh"] .lc-line { font-style: normal; }
.lc-words li { border-radius: 0; }
.lc-shelve { border-radius: 0; background: #2b2019; }
.lc-shelve .btn-gilt { background: #eadfcb; color: var(--ink); border-color: #eadfcb; }
.lc-shelve .btn-line { color: #eadfcb; border-color: rgba(216, 204, 182, .45); }
.plate-bar, .plate-study { overflow: clip; }
.c-ring path { vector-effect: none; stroke-width: 1.4; opacity: 0; }
.bs-chip[aria-pressed="true"] .c-ring path { opacity: .85; }
@media (min-width: 920px) { .plate-bar .bar-stage { position: sticky; top: 90px; } }
@media (max-width: 919px) { .plate-bar .bar-stage { top: 58px; } }
@media (max-width: 640px) { .sound-hint { position: fixed; left: 16px; right: auto; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 30px); transform: none; animation: none; } }

/* ==========================================================================
   v7 — palette from the references; light through leaves; colour lives indoors
   Outside: bone, lime, warm shadow, olive, moss, haze (refs 5–9). Night: blue hour (ref 2).
   Inside: small saturated objects from refs 1–4, never more than a fifth of a view.
   ========================================================================== */
:root {
  --paper: #f6efe1; --paper-2: #ece2cf; --paper-3: #dccdb2;
  --ink: #2e2822; --ink-2: #635a4f; --ink-3: #a09380; --hair: rgba(46, 40, 34, .26);
  --w-bone: #dfcfae; --w-lime: #cdb58f; --w-shadow: #8f8061; --w-olive: #6b6a4e; --w-moss: #3e4b2c; --w-sage: #a7ab86; --w-haze: #adb9bc;
  --dusk-top: #353a49; --dusk-mid: #5d6477; --dusk-low: #a7a3b3; --stone-lit: #c1aa90; --lamp: #f6d38a;
  --a-tomato: #b8432f; --a-cobalt: #34539a; --a-rose: #e39aa6; --a-leaf: #3f7a4a; --a-butter: #efd27a; --a-amber: #d59a4a; --a-lilac: #b8a6cf;
  --nuit: #343948;
}

/* ---------- light through leaves ---------- */
#dapple { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: none; }
#dapple i { position: absolute; display: block; }
.dp-leaves { inset: -6%; background: center / cover no-repeat; mix-blend-mode: multiply; opacity: .15; animation: leaves 16s ease-in-out infinite alternate; transform-origin: 50% 0; }
.dp-sun { inset: 0; mix-blend-mode: soft-light; background: radial-gradient(ellipse 70% 60% at 18% 0%, rgba(255, 236, 196, .5), transparent 70%); }
@keyframes leaves { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-10px, 5px) rotate(.35deg); } 100% { transform: translate(6px, -4px) rotate(-.25deg); } }
body[data-floor="greenhouse"] #dapple, body[data-floor="lab"] #dapple,
html[data-tod="day"] body[data-floor="lobby"] #dapple, html[data-tod="day"] body[data-floor="study"] #dapple { display: block; }
body[data-floor="lobby"] .dp-leaves { -webkit-mask-image: radial-gradient(ellipse 38% 48% at 50% 56%, rgba(0,0,0,.15), #000 85%); mask-image: radial-gradient(ellipse 38% 48% at 50% 56%, rgba(0,0,0,.15), #000 85%); }
body.modal #dapple { display: none !important; }
#dapple .dp-leaves.has-leaves { background-image: var(--img-leaves) !important; opacity: .28; }
@media (prefers-reduced-motion: reduce) { .dp-leaves { animation: none; } }

/* ---------- home, day: brighter paper, gouache foliage ---------- */
.f-lobby { background: var(--grain), var(--paper); }
#sectionSvg .leaves { pointer-events: none; }
#sectionSvg .tree .leaves { animation: canopy 9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
#sectionSvg .tree:nth-of-type(2n) .leaves { animation-duration: 11s; animation-delay: -4s; }
@keyframes canopy { to { transform: rotate(.8deg) translateX(1.5px); } }
#sectionSvg #people .skin { stroke-width: .5; }
#sectionSvg #people [style*="fill"] { fill-opacity: 1; }
#sectionSvg .accent { pointer-events: none; }

/* ---------- home, night: blue hour, warm stone, gold windows ---------- */
html[data-tod="night"] .f-lobby { background: var(--grain), linear-gradient(180deg, var(--dusk-top) 0%, #454b5c 50%, #3a3b42 100%); color: #efe6d6; }
html[data-tod="night"] #sectionSvg .sky-a, html[data-tod="night"] #sectionSvg .sky-b { stop-opacity: 0; }
html[data-tod="night"] #sectionSvg #street .wash { opacity: .3; }
html[data-tod="night"] #sectionSvg #street .wash.stone { opacity: .5; fill: #9d8a73; }
html[data-tod="night"] #sectionSvg #street .wash.roof { opacity: .35; fill: #3a4052; }
html[data-tod="night"] #sectionSvg .win { fill: #2f3444; }
html[data-tod="night"] #sectionSvg .win.lit { fill: #f2c877; }
html[data-tod="night"] #sectionSvg .leaves ellipse { fill: #2a3322; }
html[data-tod="night"] #sectionSvg .trunk { fill: #3a3a38; }
html[data-tod="night"] #sectionSvg .veil { fill: #3f4454; }
html[data-tod="night"] #sectionSvg #people [style*="fill"] { fill-opacity: .8 !important; filter: brightness(.55); }
html[data-tod="night"] #sectionSvg #people .skin { filter: brightness(.8); }
html[data-tod="night"] #sectionSvg .accent circle[fill="#f6d38a"] { filter: drop-shadow(0 0 1.5px #ffd896); }
html[data-tod="night"] #sectionSvg .poche { fill: #6d4c46; }

/* ---------- painted plates (optional images) ---------- */
.building.has-lobbyDay { background: var(--img-lobbyDay) center 60% / cover no-repeat; }
html[data-tod="night"] .building.has-lobbyNight { background: var(--img-lobbyNight) center 60% / cover no-repeat; }
.building.has-lobbyDay #sectionSvg .sky.day-only, .building.has-lobbyDay #sectionSvg .clouds { display: none; }
html[data-tod="night"] .building.has-lobbyNight #sectionSvg .sky.night-only { display: none; }
.plate-study.has-study { background: var(--img-study) center / cover no-repeat; }
.plate-study.has-study .scene { opacity: .25; }
.desk-plan.has-desk { background: var(--img-desk) center / cover no-repeat; }
.desk-plan.has-desk::before, .desk-plan.has-desk .dk-obj { display: none; }
.plate-bar.has-bar { background: var(--img-bar) center top / cover no-repeat; }
.plate-bar.has-bar .scene { opacity: .2; }
.f-greenhouse.has-greenhouse { background: var(--img-greenhouse) center / cover no-repeat; }
.f-library.has-library { background: var(--img-library) center / cover no-repeat; }


/* ---------- study: moss leather, red book, lace ---------- */
.desk-plan::before { background: var(--grain), rgba(62, 75, 44, .62); box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(205, 176, 122, .8); }
.dk-book { right: 30%; bottom: 10%; width: 15%; transform: rotate(9deg); filter: drop-shadow(0 6px 5px rgba(30, 20, 10, .25)); }
.dk-cup { top: 58%; width: 11%; }
.plate-study { background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(246, 211, 138, .16), transparent 70%); }
.f-study { background: var(--grain), var(--paper); }
@media (max-width: 720px) { .dk-book { display: none; } }

/* ---------- bar: the one bright corner of the counter ---------- */
.plate-bar .bar-stage { position: relative; }
.counter-still { position: absolute; bottom: 18px; pointer-events: none; }
.cs-l { left: 4%; width: 18%; max-width: 104px; }
.cs-r { right: 2%; width: 26%; max-width: 150px; }
@media (max-width: 919px) { .counter-still { display: none; } }
.f-bar { background: var(--grain), linear-gradient(180deg, #33261d, #2b2019 60%, #231a14); }

/* ---------- greenhouse string lights in the section ---------- */
#sectionSvg .strings circle { opacity: .7; }
html[data-tod="night"] #sectionSvg .strings circle { opacity: 1; }

/* ==========================================================================
   v8 — the house as a French art book.
   Each painted floor is a page: a centred title in the manner of an édition
   courante, one plate (tableau) shown whole at 3:2, a cartel beneath it,
   and a folio at the foot. The room's objects are laid on the plate itself.
   ========================================================================== */

/* ---------- paper ---------- */
body.has-paper { background: var(--img-paper) 0 0 / 640px auto, var(--paper); }
body.has-paper .f-library, body.has-paper .f-greenhouse, body.has-paper .f-bar, body.has-paper .f-lab, body.has-paper .f-study,
html:not([data-tod="night"]) body.has-paper .f-lobby { background: var(--img-paper) 0 0 / 640px auto, var(--paper); }
.f-library, .f-greenhouse, .f-bar { background: var(--grain), var(--paper); color: var(--ink); padding-top: 0; }
.f-greenhouse.is-active { display: block; }
body[data-floor="library"], body[data-floor="bar"] { --top-ink: var(--ink); --top-bg: transparent; }
body[data-floor="library"] .sound-btn, body[data-floor="library"] .lang, body[data-floor="bar"] .sound-btn, body[data-floor="bar"] .lang { border-color: var(--hair); }
body[data-floor="greenhouse"] #dapple { display: none; }

/* ---------- the title page of each floor ---------- */
.room-head { margin: 0 auto 44px; padding-top: calc(env(safe-area-inset-top, 0px) + 104px); max-width: 42em; justify-items: center; text-align: center; gap: 10px; }
.rh-kicker { margin: 0; display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--f-serif); font-style: italic; font-size: 14px; letter-spacing: .02em; opacity: .66; }
.rh-kicker span + span::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 14px; vertical-align: middle; background: currentColor; opacity: .6; }
.room-head .rh-title { flex-direction: column; align-items: center; gap: 8px; }
.room-head .rh-fr { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(44px, 6.2vw, 80px); line-height: 1; letter-spacing: -.012em; opacity: 1; color: currentColor; text-transform: none; }
html[data-lang] .room-head .rh-name { font-family: var(--f-zh); font-weight: 600; font-size: 14px; line-height: 1.4; letter-spacing: .8em; margin-right: -.8em; opacity: .78; }
html[data-lang="en"] .room-head .rh-name { font-family: var(--f-serif); font-weight: 500; font-size: 14px; letter-spacing: .32em; margin-right: -.32em; text-transform: uppercase; }
.rh-orn { width: 150px; height: 15px; margin: 4px 0 2px; overflow: visible; opacity: .55; }
.rh-orn path { fill: none; stroke: currentColor; stroke-width: .8; }
.rh-orn circle { fill: currentColor; }
.room-head .rh-note { max-width: 30em; margin: 4px auto 0; font-size: 15px; line-height: 2; opacity: .78; }
html[data-lang="en"] .room-head .rh-note { font-size: 18px; line-height: 1.7; font-style: italic; }
.plate-study .room-head { padding-top: 40px; }
@media (max-width: 640px) { .room-head { padding-top: calc(env(safe-area-inset-top, 0px) + 84px); margin-bottom: 30px; } }

/* ---------- folio at the foot of each floor ---------- */
.landing { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; max-width: 920px; margin: 0 auto; padding: 76px 24px 112px; box-sizing: border-box; }
.landing .landing-btn { display: grid; gap: 2px; justify-items: start; text-align: left; border: 0; padding: 4px 0; background: none; font-family: var(--f-serif); color: inherit; }
.landing .landing-btn.dn { justify-items: end; text-align: right; }
.landing .landing-btn i { font-style: italic; font-size: 13px; opacity: .55; letter-spacing: .04em; }
.landing .landing-btn span { font-size: 16px; line-height: 1.3; }
html[data-lang="zh"] .landing .landing-btn span { font-family: var(--f-zh); font-size: 15px; letter-spacing: .12em; }
.landing .landing-btn em { font-size: 14px; opacity: .55; }
.landing .landing-btn:hover span, .landing .landing-btn:focus-visible span { color: var(--rouge); }
.landing .landing-btn.empty { visibility: hidden; }
.landing-folio { font-family: var(--f-serif); font-style: italic; font-size: 17px; letter-spacing: .12em; opacity: .6; white-space: nowrap; }
@media (max-width: 640px) { .landing { padding: 56px 16px 116px; gap: 10px; } .landing .landing-btn em { display: none; } }

/* ---------- the plate, full bleed ----------
   The painting fills the screen. Its box keeps the picture's 3:2 so the
   objects laid on it stay in place; on tall screens the box is wider than
   the screen and pans sideways, centred on first view. */
.tableau { position: relative; width: 100%; margin: 0; container-type: inline-size; }
.tb-scroll { position: relative; width: 100%; height: max(100svh, calc(100cqw / 1.5)); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: #2b2019; }
.tb-scroll::-webkit-scrollbar { display: none; }
.tb-box { position: relative; height: 100%; width: max(100cqw, calc(max(100svh, 100cqw / 1.5) * 1.5)); container-type: size; }
.tb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; opacity: 0; transition: opacity 1.2s var(--e-out); }
.tb-img.loaded { opacity: 1; }
.tb-box > .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.tableau.has-img .tb-box > .scene { display: none; }
.tableau:not(.has-img) .tb-scroll { background: var(--paper); }
.tb-over { position: absolute; z-index: 3; }
.tb-over .room-head { padding: 0; margin: 0; max-width: none; gap: .45cqw; }
.tb-over .rh-kicker { font-size: clamp(11px, .92cqw, 14px); }
.tb-over .room-head .rh-fr { font-size: clamp(30px, 3.4cqw, 60px); }
html[data-lang] .tb-over .room-head .rh-name { font-size: clamp(11px, .9cqw, 14px); }
.tb-over .rh-orn { width: clamp(90px, 8cqw, 150px); margin: .2cqw 0; }
.tb-over .room-head .rh-note { font-size: clamp(12px, .95cqw, 15px); line-height: 1.8; margin-top: .2cqw; }
html[data-lang="en"] .tb-over .room-head .rh-note { font-size: clamp(13px, 1.08cqw, 17px); }
.tb-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; margin: 0; padding: 6px 14px; display: none;
  background: rgba(246, 239, 225, .85); color: var(--ink); font-family: var(--f-serif); font-style: italic; font-size: 13px; white-space: nowrap; pointer-events: none; transition: opacity .6s; }
@media (max-aspect-ratio: 3/2) and (max-width: 1099px) { .tb-hint { display: block; } }
.tableau.panned .tb-hint { opacity: 0; }
.floor:has(> .tableau:first-child) { padding-top: 0; }
body[data-floor="library"], body[data-floor="bar"] { --top-ink: #f3e8d2; --top-bg: rgba(24, 16, 10, .35); }
body[data-floor="library"] .brand, body[data-floor="bar"] .brand { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
body[data-floor="library"] .sound-btn, body[data-floor="library"] .lang, body[data-floor="bar"] .sound-btn, body[data-floor="bar"] .lang { border-color: rgba(243, 232, 210, .45); background: var(--top-bg); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body[data-floor="study"], body[data-floor="greenhouse"] { --top-bg: rgba(246, 239, 225, .5); }
body[data-floor="study"] .sound-btn, body[data-floor="study"] .lang, body[data-floor="greenhouse"] .sound-btn, body[data-floor="greenhouse"] .lang { background: var(--top-bg); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ---------- 3 · library ---------- */
.lib-shelf { position: absolute; left: 34.6%; width: 37.2%; bottom: 39.4%; --u: calc(100cqw * .00083); z-index: 2; }
.lib-shelf .shelf { padding-inline: 0; }
.lib-shelf .shelf-board { margin: 0; height: calc(12 * var(--u)); background: linear-gradient(180deg, #8a6446, #5b3a24 60%, #3e2718); box-shadow: 0 calc(10 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgba(20, 10, 5, .6); }
.lib-shelf .shelf-board::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-2 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(180deg, #e8cf92, #9a7a40); }
.lib-shelf .shelf-scroll { padding-top: calc(80 * var(--u)); margin-top: calc(-80 * var(--u)); }
.lib-shelf .spine-vol { font-family: var(--f-serif); }
.lib-over { left: 34.6%; width: 37.2%; top: 62.6%; height: 20%; display: grid; place-items: center; text-align: center; color: #f1e2c1; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.lib-over > * { grid-area: 1 / 1; }
.lib-over .room-head .rh-note { display: none; }
.lib-over .shelf-caption { min-height: 0; padding: 0; gap: .35cqw; align-self: end; }
.lib-over .cap-idle { font-family: var(--f-serif); font-style: italic; font-size: clamp(11px, .85cqw, 13px); letter-spacing: .04em; color: #d9c49a; }
.lib-over:not(.capping) .shelf-caption { transform: translateY(1.6cqw); }
.lib-over.capping .room-head { visibility: hidden; }
.lib-over.capping .shelf-caption { align-self: center; }
.lib-over .cap-vol { font-family: var(--f-serif); font-style: italic; font-size: clamp(11px, .9cqw, 14px); letter-spacing: .06em; color: #d9c49a; }
.lib-over .cap-title { font-family: var(--f-serif); font-weight: 500; font-size: clamp(20px, 2.1cqw, 34px); color: #f6ead0; }
.lib-over .cap-title .zh { font-size: .72em; }
.lib-over .cap-sub { font-size: clamp(11px, .92cqw, 14px); color: #e2d2b0; }
.lib-over .cap-chapters { font-size: clamp(10px, .8cqw, 12px); color: #d9c49a; gap: .2cqw 1.2cqw; }
.lib-over .cap-chapters li::before { font-family: var(--f-serif); font-style: italic; }
@media (max-width: 719px) { .lib-over { left: calc(50% - 175px); width: 350px; } .lib-over .room-head .rh-fr { font-size: 30px; } }

/* ---------- 5 · greenhouse ---------- */
.tb-box.gh-bed-wrap { position: relative; margin: 0; padding: 0; z-index: auto; }
.tableau.has-img .gh-bed { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; z-index: 2; }
.tableau:not(.has-img) .gh-bed { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: none; }
.gh-over { left: 30%; width: 40%; top: 15%; padding: 2cqw 3cqw; color: var(--ink);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(250, 244, 230, .8), rgba(250, 244, 230, .5) 55%, rgba(250, 244, 230, 0) 100%); }
.gh-actions { left: 25%; width: 50%; top: 86.5%; display: flex; flex-direction: column; align-items: center; gap: .7cqw; text-align: center; color: var(--ink); }
.gh-actions .gh-count { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(14px, 1.15cqw, 19px); }
html[data-lang="zh"] .gh-actions .gh-count { font-family: var(--f-zh); font-style: normal; font-size: clamp(13px, 1cqw, 16px); letter-spacing: .12em; }
.cartel-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.gh-actions .gh-status { margin: 0; flex-basis: auto; font-size: 12px; opacity: .7; }
.gh-tip { border-radius: 0; font-family: var(--f-serif); z-index: 5; }
@media (max-width: 719px) { .gh-over { left: calc(50% - 180px); width: 360px; top: 11%; padding: 18px; } .gh-actions { left: calc(50% - 170px); width: 340px; top: 85%; } .gh-over .room-head .rh-fr { font-size: 34px; } }

/* ---------- 4 · study: elevation of the door on the painted wall, then the desk from above ---------- */
.f-study .tb-scroll { background: #d8cbb2; }
.study-over { left: 30%; width: 40%; top: 3.5%; color: var(--ink); }
.study-over .room-head .rh-note { display: none; }
.tableau.is-desk .study-over { display: none; }
.tb-box .study-stage { position: absolute; inset: 0; padding: 0; z-index: 2; }
.tb-box .door-scene { position: absolute; left: 39.5%; width: 21%; top: 30%; bottom: 14%; padding: 0; display: block; }
.tb-box .doorway { --dw: 100%; width: 100%; height: 100%; max-height: none; min-height: 0; box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 6px transparent, inset 0 0 0 7px var(--hair), 0 2cqw 3cqw -2cqw rgba(60, 40, 20, .5); }
.tb-box .door-transom { top: -4.4cqw; height: 3.4cqw; }
.tb-box .door-transom span { font-size: clamp(12px, 1.2cqw, 18px); }
.tb-box .sconce { top: 10%; width: 2.8cqw; height: 5.6cqw; }
.tb-box .sconce.l { left: -5cqw; } .tb-box .sconce.r { right: -5cqw; }
.tb-box .door-leaf.r .keypad { left: calc(100% + 5.5cqw); top: 18%; width: clamp(180px, 14cqw, 230px); transform: none; }
.tb-box .door-leaf.r .keypad.shake { animation: shake .45s; }
.tb-box .vault-note { position: absolute; left: -40%; right: -40%; top: calc(100% + 1.4cqw); margin: 0; text-align: center; font-size: clamp(12px, 1cqw, 16px); color: #3a2e22; }
@media (max-width: 719px), (max-aspect-ratio: 1/1) {
  .study-over { left: calc(50% - 170px); width: 340px; top: 4%; }
  .tb-box .door-scene { left: calc(50% - 150px); width: 300px; top: 26%; bottom: 13%; }
  .tb-box .door-leaf.r .keypad { left: 50%; top: 12%; width: 200px; transform: translateX(-50%); }
  .tb-box .door-leaf.r .keypad.shake { animation: shake-c .45s; }
  .tb-box .sconce { display: none; }
  .tb-box .door-transom { top: -48px; height: 38px; }
}
.tableau.has-alt .tb-alt { opacity: 0; transition: opacity 1.4s var(--e-out); }
.tableau.has-alt.is-desk .tb-alt.loaded { opacity: 1; }
.tableau.has-alt.is-desk .tb-img:not(.tb-alt) { opacity: 0; }
.tb-box .room-scene { position: absolute; inset: 0; padding: 0; }
.tb-box .desk-plan { position: absolute; inset: 0; width: auto; margin: 0; aspect-ratio: auto; background: none; box-shadow: none; }
.tableau:not(.has-alt) .tb-box .desk-plan { left: 8%; right: 8%; top: 10%; bottom: 10%; background: repeating-linear-gradient(177deg, transparent 0 22px, rgba(60, 38, 22, .07) 22px 23px), var(--grain), rgba(138, 103, 73, .5); }
.tableau.has-alt .desk-plan::before, .tableau.has-alt .dk-obj { display: none; }
.tb-box .carnet, .plate-study .carnet { position: absolute; left: 21%; top: 16%; width: 16.5%; min-width: 0; aspect-ratio: 148 / 210; transform: rotate(-5deg);
  border-radius: 2px 7px 7px 2px; background: var(--fibre), var(--grain), #b48c5e;
  box-shadow: inset 5px 0 7px -5px rgba(40, 20, 5, .45), inset 0 0 0 1px rgba(60, 35, 15, .45), 1cqw 2cqw 2.4cqw -1cqw rgba(20, 10, 3, .7); }
.tb-box .carnet:hover, .tb-box .carnet:focus-visible { transform: rotate(-2deg) translateY(-.6cqw); }
.tb-box .carnet-label b { font-size: clamp(16px, 2cqw, 32px); }
.tb-box .carnet-label i { font-size: clamp(9px, .8cqw, 12px); }
.tb-box .carnet-seal { width: 3cqw; height: 3cqw; margin: -1.5cqw 0 0 -1.5cqw; font-size: 1.4cqw; }
.tb-box .desk-card { position: absolute; left: 51.5%; top: 11%; width: 17%; min-width: 0; box-sizing: border-box; padding: 1.3cqw 1.3cqw 1.1cqw; gap: .6cqw; transform: rotate(2deg);
  background: var(--grain), #f5efe2; box-shadow: inset 0 0 0 1px var(--hair), .6cqw 1.2cqw 1.6cqw -.8cqw rgba(20, 10, 3, .6); }
.tb-box .desk-stats { font-size: clamp(12px, 1.05cqw, 17px); }
.tb-box .desk-cats li { font-size: clamp(10px, .75cqw, 12px); }
.tb-box .desk-hint { font-size: clamp(11px, .85cqw, 13px); }
@media (max-width: 719px), (max-aspect-ratio: 1/1) {
  .tb-box .carnet { left: 35.5%; top: 17%; width: 13.5%; }
  .tb-box .desk-card { left: 50.5%; top: 12%; width: 15%; padding: 12px; }
}

/* ---------- −1 · bar ---------- */
.bar-room { position: relative; width: 100%; margin: 0; }
.bar-over { left: 8%; width: 26%; top: 7%; padding: 1.4cqw 1.8cqw; color: #f1e2c1; text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(22, 14, 9, .55), rgba(22, 14, 9, 0) 100%); }
@media (max-width: 719px) { .bar-over { left: calc(50% - 170px); width: 340px; top: 5%; } .bar-over .room-head .rh-fr { font-size: 40px; } }
.bar-room > .bar-stage { position: sticky; top: 58px; z-index: 6; display: flex; align-items: center; gap: 14px; width: min(720px, calc(100% - 32px)); box-sizing: border-box; margin: 22px auto 14px; padding: 10px 16px;
  background: #2b2019; color: #eadfcb; border: 0; box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .7); border-radius: 0; }
.bar-room .bar-stage::after { display: none; }
.bar-room > .bar-stage .bar-vessel { width: 92px; flex: 0 0 auto; filter: none; }
.bar-room .bar-order { display: grid; gap: 10px; justify-items: start; flex: 1; min-width: 0; }
.bar-room .bar-recipe { text-align: left; color: #d8c9ab; min-height: 0; font-size: 13px; }
.bar-room .bar-actions { flex-wrap: nowrap; }
.bar-room .bar-actions button { white-space: nowrap; }
.bar-room .btn-gilt { background: #eadfcb; color: var(--ink); border-color: #eadfcb; }
.bar-room .btn-gilt:hover { background: #fff6e4; border-color: #fff6e4; }
.bar-room .btn-line { color: #eadfcb; border-color: rgba(216, 204, 182, .45); }
.bar-room > .carte { width: min(720px, calc(100% - 32px)); box-sizing: border-box; margin: 0 auto 8px; transform: none; }
.tb-box > .bar-stage { position: absolute; top: 23.5%; left: 10%; width: 50%; height: 35%; margin: 0; padding: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3cqw; background: none; box-shadow: none; }
.tb-box > .bar-stage .bar-vessel { width: 15cqw; height: auto; filter: drop-shadow(0 1.4cqw 1cqw rgba(0, 0, 0, .45)); }
.tb-box > .bar-stage .bar-order { order: -1; align-self: center; justify-items: start; gap: 1.2cqw; padding-bottom: 4cqw; }
.tb-box > .bar-stage .bar-recipe { font-size: clamp(14px, 1.2cqw, 18px); color: #eadfcb; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); max-width: 22em; }
.tb-box > .carte { position: absolute; top: 63%; left: 4.5%; right: 4.5%; height: 34.5%; margin: 0; padding: 0; z-index: 3; background: none; box-shadow: none; color: #efe3cc; transform: none; }
.tb-box > .carte::before, .tb-box > .carte::after { display: none; }
.tb-box > .carte .carte-head { display: flex; justify-content: center; align-items: baseline; gap: 1.6cqw; margin-bottom: 1.1cqw; }
.tb-box > .carte .carte-t { font-size: 2.2cqw; color: #e2c98f; }
.tb-box > .carte .carte-s { margin: 0; font-size: clamp(11px, .95cqw, 14px); color: #bfae8e; }
.tb-box > .carte .bar-steps { display: grid; grid-template-columns: 1fr 1.9fr .72fr 1fr .9fr; gap: 0 2.4cqw; }
.tb-box > .carte .bs { border-top: 1px solid rgba(216, 204, 182, .3); padding-top: .7cqw; }
.tb-box > .carte .bs legend { color: #cdb99a; font-size: clamp(11px, .92cqw, 13px); margin-bottom: .4cqw; }
.tb-box > .carte .bs legend b { color: #e2c98f; font-size: clamp(12px, 1cqw, 15px); }
.tb-box > .carte .bs-chips, .tb-box > .carte .bs-inline .bs-chips { display: grid; grid-template-columns: 1fr; gap: 0 1.8cqw; }
.tb-box > .carte .bs:nth-child(2) .bs-chips { grid-template-columns: 1fr 1fr; }
.tb-box > .carte .bs-chip { color: #efe3cc; font-size: clamp(12px, 1.02cqw, 15px); min-height: 0; padding: .22cqw 2px; }
html[data-lang="en"] .tb-box > .carte .bs-chip { font-size: clamp(13px, 1.1cqw, 16px); }
.tb-box > .carte .c-name { white-space: normal; }
.tb-box > .carte .c-lead { border-color: rgba(239, 227, 204, .28); }
.tb-box > .carte .c-note { color: #bfae8e; font-size: .84em; }
.tb-box > .carte .c-ring path { stroke: #f6e9c9; }
.tb-box > .carte .bs-chip:hover .c-name { color: #fff3d6; }
.bar-page { padding-top: 56px; }
.cellar.has-barSalle { background: linear-gradient(180deg, rgba(28, 18, 12, .74), rgba(28, 18, 12, .9)), var(--img-barSalle) center 30% / cover; color: #eadfcb;
  box-shadow: 0 34px 60px -44px rgba(40, 25, 10, .8); border-radius: 0; }
.cellar-title { font-family: var(--f-serif); font-style: italic; font-weight: 500; }
html[data-lang="zh"] .cellar-title { font-family: var(--f-zh); font-style: normal; letter-spacing: .2em; }
.cellar .shelf-row { border-bottom: 1px solid rgba(216, 204, 182, .55); box-shadow: 0 5px 0 -4px rgba(216, 204, 182, .25); }
.cellar .shelf-row::after { display: none; }
.cellar .cab-item span { font-family: var(--f-serif); font-style: italic; }
.f-bar .letter { margin-top: 72px; }

/* ---------- RDC · the painted sky ---------- */
#sectionSvg.has-lobbyDay .sky.day-only, #sectionSvg.has-lobbyDay .clouds { display: none; }
#sectionSvg.has-lobbyNight .sky.night-only, #sectionSvg.has-lobbyNight .stars, #sectionSvg.has-lobbyNight .moon { display: none; }
#sectionSvg .plate-sky { pointer-events: none; }
html[data-tod="night"] #sectionSvg .plate-sky.day-only { display: none; }
html:not([data-tod="night"]) #sectionSvg .plate-sky.night-only { display: none; }
html[data-tod="day"] body[data-floor="study"] #dapple { display: none; }
#dapple .dp-leaves.has-leaves { background-size: cover; opacity: .38; }

/* ---------- RDC · full-screen painted sky ---------- */
html:not([data-tod="night"]) .f-lobby.has-sky-day { background: var(--sky-day) center 62% / cover no-repeat, var(--paper); }
html[data-tod="night"] .f-lobby.has-sky-night { background: var(--sky-night) center 62% / cover no-repeat, #2f3444; }
.f-lobby.has-sky-day .building svg, .f-lobby.has-sky-night .building svg { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
html:not([data-tod="night"]) .f-lobby.has-sky-day #sectionSvg #earth line { stroke-opacity: .5; }
html:not([data-tod="night"]) .f-lobby.has-sky-day .lobby-head { text-shadow: 0 0 18px rgba(250, 244, 230, .9); }
html[data-tod="night"] .f-lobby.has-sky-night .lobby-head, html[data-tod="night"] .f-lobby.has-sky-night .lobby-story, html[data-tod="night"] .f-lobby.has-sky-night .lobby-foot { text-shadow: 0 1px 10px rgba(10, 12, 24, .8); }
body[data-floor="lobby"] .dp-leaves.has-leaves { opacity: .2; }
html[data-tod="night"] .f-lobby.has-sky-night #sectionSvg #street .wash.stone { opacity: .62; }

/* ---------- study door, in the painting's walnut ---------- */
.tb-box .doorway { background: linear-gradient(180deg, #efe4cc, #e2d3b4); box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .7), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(60, 40, 20, .25), 0 2cqw 3cqw -2cqw rgba(60, 40, 20, .5); }
.tb-box .door-transom { background: linear-gradient(180deg, #efe4cc, #e2d3b4); box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .7), inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(60, 40, 20, .25); }
.tb-box .door-transom span { color: #6a4a2a; }
.tb-box .door-leaf { background: var(--fibre), linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 18%, transparent 82%, rgba(0, 0, 0, .14)), linear-gradient(180deg, #8b5d38, #744b2c 60%, #6a4327); box-shadow: inset 0 0 0 1px rgba(40, 24, 12, .8); }
.tb-box .door-leaf .dp { border-color: rgba(40, 24, 12, .7); outline-color: rgba(255, 220, 170, .18); background: linear-gradient(135deg, rgba(255, 220, 170, .1), rgba(0, 0, 0, .08)); }
.tb-box .dl-handle { background: linear-gradient(90deg, #7a5c2b, #f0d9a0 45%, #a7864d); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.tb-box .door-room { background: radial-gradient(ellipse 46% 40% at 50% 60%, rgba(255, 214, 150, .95), rgba(240, 190, 110, .4) 60%, #6a4327); }
.tb-box .door-leaf.r .keypad { background: linear-gradient(150deg, #c9a866, #e6cf98 40%, #b08c4e 75%, #8a6a36); box-shadow: inset 0 0 0 1px rgba(60, 40, 15, .8), 0 1cqw 1.4cqw -.6cqw rgba(40, 25, 10, .6); }
.tb-box .desk-card { width: 20%; }
.tb-box .desk-stats { font-size: clamp(12px, .95cqw, 16px); }

/* ---------- bar title over the wine rack ---------- */
.bar-over { left: 1%; width: 24%; top: 6%; }
html:not([data-tod="night"]) body .f-lobby.has-sky-day { background: var(--sky-day) center 100% / max(210svh, 100vw) auto no-repeat, var(--paper); }
html[data-tod="night"] body .f-lobby.has-sky-night { background: var(--sky-night) center 100% / max(210svh, 100vw) auto no-repeat, #2f3444; }
@media (max-width: 719px) {
  html:not([data-tod="night"]) body .f-lobby.has-sky-day { background-size: auto 100%; background-position: 50% 0; }
  html[data-tod="night"] body .f-lobby.has-sky-night { background-size: auto 100%; background-position: 50% 0; }
}
#sectionSvg.has-lobbyNight .moon, #sectionSvg.has-lobbyNight .stars { display: none !important; }
body[data-floor="lobby"] .f-lobby.has-sky-day ~ #dapple, .f-lobby.has-sky-day { }
html:not([data-tod="night"]) body[data-floor="lobby"] #dapple { display: none; }
@media (max-width: 719px), (max-aspect-ratio: 1/1) {
  .tb-box .desk-card { left: 36%; top: 60%; width: 24%; transform: rotate(-1.5deg); }
}
@media (min-width: 720px) {
  html:not([data-tod="night"]) body .f-lobby.has-sky-day { background: linear-gradient(180deg, transparent 0 70svh, var(--paper) 88svh), var(--sky-day) center -50svh / max(210svh, 100vw) auto no-repeat, var(--paper); }
  html[data-tod="night"] body .f-lobby.has-sky-night { background: linear-gradient(180deg, transparent 0 70svh, #2c2f3b 88svh), var(--sky-night) center -50svh / max(210svh, 100vw) auto no-repeat, #2c2f3b; }
}

/* ==========================================================================
   v10 — the home, painted by hand in code, in the painting's own colours.
   Every colour below is sampled from lobby-day.jpg / lobby-night.jpg
   (k-means over the city band, the sky and the corner leaves).
   ========================================================================== */
:root {
  /* day */
  --d-stone: #ebdbc5; --d-stone-2: #dacbb9; --d-stone-3: #c8bcb0; --d-sun: #efd2a4;
  --d-zinc: #a0978f; --d-zinc-2: #848386; --d-glass: #a0b0c3; --d-glass-2: #bac2c8;
  --d-lf0: #3e3a1c; --d-lf1: #574e20; --d-lf2: #6e622d; --d-lf3: #87783b; --d-lf4: #ae984a; --d-lf5: #dac47a;
  --d-ground: #ecdcc0;
  /* night */
  --n-stone: #8a6f6c; --n-stone-2: #967672; --n-stone-3: #685b67; --n-dark: #383640; --n-dark-2: #454251;
  --n-lit-0: #e0b275; --n-lit-1: #da9d55; --n-lit-2: #c09060; --n-lit-deep: #bb7d3d;
  --n-lf0: #1b1a12; --n-lf1: #2c2a1c; --n-lf2: #403b26; --n-lf3: #58502f; --n-lf4: #7c6d3c; --n-lf5: #a3925f;
  --n-ground: #46454f;
}

/* the section stands in a full-width ground now; no side fade on the whole drawing */
.f-lobby.has-sky-day .building svg, .f-lobby.has-sky-night .building svg, .building svg { -webkit-mask-image: none; mask-image: none; }
.f-lobby { overflow: hidden; }

/* ---------- ground ---------- */
#sectionSvg #earthband .eb { fill: var(--d-ground); }
#sectionSvg #earthband .eb-hatch { opacity: .35; }
#sectionSvg #earthband .eb-edge { stroke: #6e6258; stroke-width: .8; vector-effect: non-scaling-stroke; fill: none; }
#sectionSvg .ed0 { fill: #d8c4a2; opacity: .5; } #sectionSvg .ed1 { fill: #c8b08c; opacity: .35; } #sectionSvg .ed2 { fill: #f3e7d0; opacity: .6; }
html[data-tod="night"] #sectionSvg #earthband .eb { fill: var(--n-ground); }
html[data-tod="night"] #sectionSvg #earthband .eb-hatch { opacity: .25; }
html[data-tod="night"] #sectionSvg #earthband .eb-edge { stroke: #8b8070; }
html[data-tod="night"] #sectionSvg .ed0 { fill: #55535f; } html[data-tod="night"] #sectionSvg .ed1 { fill: #3b3a44; } html[data-tod="night"] #sectionSvg .ed2 { fill: #e0b275; opacity: .08; }

/* ---------- facades, painted ---------- */
#sectionSvg .facade-base path { fill: var(--d-stone); opacity: .92; }
#sectionSvg .facade-shade path { fill: var(--d-stone-3); opacity: .22; }
#sectionSvg .sd0 { fill: var(--d-stone-2); opacity: .55; } #sectionSvg .sd1 { fill: var(--d-sun); opacity: .6; } #sectionSvg .sd2 { fill: var(--d-stone-3); opacity: .35; }
#sectionSvg .roof-base { fill: var(--d-zinc); opacity: .85; }
#sectionSvg .rd0 { fill: var(--d-zinc-2); opacity: .6; } #sectionSvg .rd1 { fill: var(--d-glass-2); opacity: .45; } #sectionSvg .rd2 { fill: #6e6a6c; opacity: .4; }
#sectionSvg .win { fill: var(--d-glass); fill-opacity: .75; }
#sectionSvg .win.lit { fill: var(--d-glass-2); }
html[data-tod="night"] #sectionSvg .facade-base path { fill: var(--n-stone); opacity: .95; }
html[data-tod="night"] #sectionSvg .facade-shade path { fill: var(--n-dark-2); opacity: .45; }
html[data-tod="night"] #sectionSvg .sd0 { fill: var(--n-stone-2); opacity: .5; } html[data-tod="night"] #sectionSvg .sd1 { fill: var(--n-lit-2); opacity: .16; } html[data-tod="night"] #sectionSvg .sd2 { fill: var(--n-stone-3); opacity: .45; }
html[data-tod="night"] #sectionSvg .roof-base { fill: var(--n-dark); opacity: .95; }
html[data-tod="night"] #sectionSvg .rd0 { fill: var(--n-dark-2); } html[data-tod="night"] #sectionSvg .rd1 { fill: #5e5c6f; opacity: .35; } html[data-tod="night"] #sectionSvg .rd2 { fill: #2e2b33; }
html[data-tod="night"] #sectionSvg .win { fill: var(--n-dark); fill-opacity: 1; }
html[data-tod="night"] #sectionSvg .win.lit.l0 { fill: var(--n-lit-0); } html[data-tod="night"] #sectionSvg .win.lit.l1 { fill: var(--n-lit-1); } html[data-tod="night"] #sectionSvg .win.lit.l2 { fill: var(--n-lit-2); }
html[data-tod="night"] #sectionSvg .win.lit { filter: drop-shadow(0 0 3px rgba(224, 178, 117, .55)); }
html[data-tod="night"] #sectionSvg .paint .ln { color: #2e2b33; }
#sectionSvg .paint .ln { color: #6e6258; }

/* ---------- leaves ---------- */
#sectionSvg .lf0 { fill: var(--d-lf0); } #sectionSvg .lf1 { fill: var(--d-lf1); } #sectionSvg .lf2 { fill: var(--d-lf2); }
#sectionSvg .lf3 { fill: var(--d-lf3); } #sectionSvg .lf4 { fill: var(--d-lf4); } #sectionSvg .lf5 { fill: var(--d-lf5); }
html[data-tod="night"] #sectionSvg .lf0 { fill: var(--n-lf0); } html[data-tod="night"] #sectionSvg .lf1 { fill: var(--n-lf1); } html[data-tod="night"] #sectionSvg .lf2 { fill: var(--n-lf2); }
html[data-tod="night"] #sectionSvg .lf3 { fill: var(--n-lf3); } html[data-tod="night"] #sectionSvg .lf4 { fill: var(--n-lf4); } html[data-tod="night"] #sectionSvg .lf5 { fill: var(--n-lf5); }
#sectionSvg .trunk { fill: #8a7a5a; }
html[data-tod="night"] #sectionSvg .trunk { fill: #3b3830; }

/* ---------- the house's rooms: same lamp colours as the painted city ---------- */
#sectionSvg .rmd0 { fill: #7a5a3a; opacity: .07; } #sectionSvg .rmd1 { fill: #fff6e4; opacity: .18; } #sectionSvg .rmd2 { fill: #a07a50; opacity: .06; }
html[data-tod="night"] #sectionSvg .rw[y="208"] { fill: var(--n-lit-0); }
html[data-tod="night"] #sectionSvg .rw[y="298"] { fill: var(--n-lit-2); }
html[data-tod="night"] #sectionSvg .rw[y="388"] { fill: #e9c48c; }
html[data-tod="night"] #sectionSvg .rw[y="478"] { fill: var(--n-lit-deep); }
html[data-tod="night"] #sectionSvg .rw[y="568"] { fill: var(--n-lit-0); }
html[data-tod="night"] #sectionSvg .rw[y="668"] { fill: var(--n-lit-1); }
html[data-tod="night"] #sectionSvg .rw[y="758"] { fill: #a4584a; }
html[data-tod="night"] #sectionSvg .rw[y="848"] { fill: #8e8472; }
html[data-tod="night"] #sectionSvg path.rw { fill: #c9c09a; }
html[data-tod="night"] #sectionSvg .rmd1 { fill: #f3cf8e; opacity: .14; }
html[data-tod="night"] #sectionSvg .poche { fill: #7a4f48; }
html[data-tod="night"] #sectionSvg .lvl-code { fill: #efe6d6; }

/* ---------- people: colours sit in the painting ---------- */
html[data-tod="night"] #sectionSvg #people [style*="fill"] { filter: brightness(.6) saturate(.8); fill-opacity: .9 !important; }
html[data-tod="night"] #sectionSvg #people .fine { color: #d8c4a0; }
html[data-tod="night"] #sectionSvg .lf0 { fill: #2c2a1c; } html[data-tod="night"] #sectionSvg .lf1 { fill: #403b26; } html[data-tod="night"] #sectionSvg .lf2 { fill: #58502f; }
html[data-tod="night"] #sectionSvg .lf3 { fill: #7c6d3c; } html[data-tod="night"] #sectionSvg .lf4 { fill: #a3925f; } html[data-tod="night"] #sectionSvg .lf5 { fill: #c9a86a; }
#sectionSvg .facade-shade path { fill: #b9a58a; opacity: .3; }
#sectionSvg .sd2 { fill: #b8a894; opacity: .45; }

html[data-tod="night"] #sectionSvg .leaves ellipse.lf0 { fill: #1f1c13; }
html[data-tod="night"] #sectionSvg .leaves ellipse.lf1 { fill: #2e2a1c; }
html[data-tod="night"] #sectionSvg .leaves ellipse.lf2 { fill: #433d25; }
html[data-tod="night"] #sectionSvg .leaves ellipse.lf3 { fill: #5c5230; }
html[data-tod="night"] #sectionSvg .leaves ellipse.lf4 { fill: #7f6f40; }
html[data-tod="night"] #sectionSvg .leaves ellipse.lf5 { fill: #a88e57; }

/* ---------- home layout: the drawing takes the screen; words move to the margins ---------- */
@media (min-width: 900px) {
  .lobby { position: relative; display: block; height: 100svh; min-height: 620px; padding: 0; }
  .lobby .building { position: absolute; left: 0; right: 0; top: 52px; bottom: 0; display: flex; justify-content: center; align-items: stretch; margin: 0; }
  .lobby .building svg { height: 100%; width: auto; min-height: 0; max-width: none; }
  .lobby-head { position: absolute; z-index: 3; left: clamp(28px, 5.5vw, 96px); top: 15svh; justify-items: start; text-align: left; gap: 6px; }
  .lobby-name { font-size: clamp(54px, 5.6vw, 88px); }
  .lobby-sub { letter-spacing: .3em; }
  .lobby-story { position: absolute; z-index: 3; left: clamp(28px, 5.5vw, 96px); bottom: 11svh; width: min(28vw, 380px); min-height: 0; margin: 0; justify-items: start; text-align: left; font-size: 15px; }
  .lobby-story b { letter-spacing: .12em; }
  .lobby-foot { position: absolute; z-index: 3; right: clamp(28px, 5.5vw, 96px); bottom: calc(11svh + 70px); flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; margin: 0; }
  .lobby-foot .tod-btn { justify-content: flex-end; }
}
html:not([data-tod="night"]) .f-lobby .lobby-story, html:not([data-tod="night"]) .f-lobby .lobby-foot { color: #4a3f35; }
html:not([data-tod="night"]) .f-lobby .lobby-story.show span { color: #2a2420; }

/* ---------- other buildings' tints (sampled from the painted city) ---------- */
#sectionSvg .facade-base.b path { fill: #e6cfae; }
#sectionSvg .facade-base.c path { fill: #dcd6cc; }
#sectionSvg .roof-base.slate { fill: #6f7784; opacity: .85; }
#sectionSvg .shutter rect { fill: #7f8f7c; opacity: .85; }
html[data-tod="night"] #sectionSvg .facade-base.b path { fill: #7c6462; }
html[data-tod="night"] #sectionSvg .facade-base.c path { fill: #736b72; }
html[data-tod="night"] #sectionSvg .roof-base.slate { fill: #2e2c36; }
html[data-tod="night"] #sectionSvg .shutter rect { fill: #3c4040; }

/* ---------- night inside the house: one lamp colour, three strengths ---------- */
html[data-tod="night"] #sectionSvg .rw { fill: #e2b677 !important; }
html[data-tod="night"] #sectionSvg .rw[y="298"], html[data-tod="night"] #sectionSvg .rw[y="478"] { fill: #d8a766 !important; }
html[data-tod="night"] #sectionSvg .rw-b { fill: #c99a62 !important; }
html[data-tod="night"] #sectionSvg .rw[y="758"] { fill: #b98460 !important; }
html[data-tod="night"] #sectionSvg .rw[y="848"] { fill: #a88e6c !important; }
html[data-tod="night"] #sectionSvg path.rw { fill: #cdbf96 !important; }
#sectionSvg .nglow { opacity: .35; }
html[data-tod="night"] #sectionSvg .nglow { opacity: 1; }
#sectionSvg .furn { pointer-events: none; }
@media (min-width: 900px) { .lobby-head { top: 9svh; } }
html:not([data-tod="night"]) .f-lobby .lobby-sub { color: #3a3028; text-shadow: 0 0 10px rgba(250, 244, 230, .95), 0 0 3px rgba(250, 244, 230, .9); }
#sectionSvg.has-focus .stop:not(.on) .veil { opacity: .5; }
html[data-tod="night"] #sectionSvg .veil { fill: #2c2a36; }
html[data-tod="night"] #sectionSvg.has-focus .stop:not(.on) .veil { opacity: .6; }

/* v12: title centred on top, the house smaller in its street, night less yellow */
@media (min-width: 900px) {
  .lobby-head { left: 50%; top: 7svh; transform: translateX(-50%); justify-items: center; text-align: center; white-space: nowrap; }
  .lobby-name { font-size: clamp(40px, 4.2vw, 66px); letter-spacing: -.005em; }
  .lobby .building { top: 21svh; bottom: 3svh; }
}
@media (max-width: 899px) { .lobby-name { font-size: clamp(34px, 9vw, 48px); } }
html[data-tod="night"] #sectionSvg .rw { fill: #d3bd9a !important; }
html[data-tod="night"] #sectionSvg .rw[y="298"], html[data-tod="night"] #sectionSvg .rw[y="478"] { fill: #c6ad8a !important; }
html[data-tod="night"] #sectionSvg .rw-b { fill: #ad9a80 !important; }
html[data-tod="night"] #sectionSvg .rw[y="758"] { fill: #a28a7c !important; }
html[data-tod="night"] #sectionSvg .rw[y="848"] { fill: #8f877c !important; }
html[data-tod="night"] #sectionSvg path.rw { fill: #b5b49e !important; }
html[data-tod="night"] #sectionSvg .rmd1 { fill: #f3dcae; opacity: .1; }
html[data-tod="night"] #sectionSvg .rmd0 { fill: #3a2e26; opacity: .1; }
html[data-tod="night"] #sectionSvg .nglow { opacity: .75; }

/* ---------- people of the house (same hand as the street) ---------- */
#sectionSvg .figure .pf { stroke: #3a322c; stroke-width: .5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#sectionSvg .figure .pf:not([style]) { fill: none; }
#sectionSvg .figure .leg { stroke-width: 1.1; stroke: #3a322c; }
#sectionSvg .figure .shoe { stroke-width: 1.3; stroke: #2a2420; }
#sectionSvg .figure .arm { stroke-width: .9; }

/* ---------- shops, flowers, lights ---------- */
#sectionSvg .st-sign.gilt { fill: #e2c98f; font-size: 6.4px; letter-spacing: .16em; }
#sectionSvg .fascia rect { opacity: .92; }
#sectionSvg .fascia.green rect { fill: #3e4b2c; } #sectionSvg .fascia.rouge rect { fill: #7a2a2c; }
#sectionSvg .fascia.sage rect { fill: #6f7a5a; } #sectionSvg .fascia.navy rect { fill: #2f3a55; }
#sectionSvg .door.green rect, #sectionSvg .door.green path { fill: #4a5a38; } #sectionSvg .door.blue path { fill: #3f5566; }
#sectionSvg .door.sage rect { fill: #7c8766; } #sectionSvg .door.navy rect { fill: #33405c; }
#sectionSvg .shopglass rect { fill: #cfd6d6; opacity: .7; }
#sectionSvg .shopspill ellipse { fill: #f3cf8e; opacity: .35; }
html[data-tod="night"] #sectionSvg .shopglass.warm rect { fill: #efc98a; opacity: .95; }
#sectionSvg .bread path { stroke: #c58f4a; fill: none; } #sectionSvg .basket rect { fill: #8a6444; }
#sectionSvg .pastry path { fill: #d9a45a; } #sectionSvg .cake ellipse, #sectionSvg .cake rect { fill: #f4e6d6; stroke: #6e6258; stroke-width: .3; }
#sectionSvg .board rect { fill: #2a2a28; }
#sectionSvg .box path, #sectionSvg .box rect { fill: #b8704f; }
#sectionSvg .flora circle, #sectionSvg .flora ellipse { fill: #56643a; } #sectionSvg .flora path { stroke: #56643a; }
#sectionSvg .bucket path { fill: #8d959b; stroke: #3a322c; stroke-width: .3; }
#sectionSvg .flw.fl0 circle { fill: #e39aa6; } #sectionSvg .flw.fl1 circle { fill: #c2463a; } #sectionSvg .flw.fl2 circle { fill: #f4efe6; }
#sectionSvg .flw.fl3 circle { fill: #b8a6cf; } #sectionSvg .flw.fl4 circle { fill: #efd27a; }
#sectionSvg .can path { fill: #7f8f7c; stroke: #3a322c; stroke-width: .3; }
#sectionSvg .spine rect { opacity: .9; }
#sectionSvg .sp0 rect { fill: #8e2f28; } #sectionSvg .sp1 rect { fill: #2f3a55; } #sectionSvg .sp2 rect { fill: #a7864d; } #sectionSvg .sp3 rect { fill: #3f5a48; } #sectionSvg .sp4 rect { fill: #e8dcc2; }
#sectionSvg .cart path { fill: #7a5634; }
#sectionSvg .shade { fill: #2a2420; }
html[data-tod="night"] #sectionSvg .flw circle, html[data-tod="night"] #sectionSvg .flora circle, html[data-tod="night"] #sectionSvg .flora ellipse { filter: brightness(.6); }
#sectionSvg .wbox rect { fill: #9a5a3c; }
#sectionSvg .wleaf ellipse { fill: #5d6a3a; }
html[data-tod="night"] #sectionSvg .wleaf ellipse { fill: #353c26; }
html[data-tod="night"] #sectionSvg .wbox rect { fill: #5a3a2c; }
#sectionSvg .garland path { fill: none; stroke: #3a322c; stroke-width: .4; }
#sectionSvg .beam { mix-blend-mode: normal; }
html[data-tod="night"] #sectionSvg .tree .leaves ellipse { opacity: .88; }
html[data-tod="night"] #sectionSvg .ivy ellipse { opacity: .8; }
html[data-tod="night"] #sectionSvg .tree ellipse[fill="#d9ccb4"] { fill: #4a463c; }

/* ---------- night default: the house asleep, only the hall lit ---------- */
html[data-tod="night"] #sectionSvg .rw { transition: fill .6s ease; }
html[data-tod="night"] #sectionSvg .rw:not([data-f="hall"]):not(.lit) { fill: #3d3843 !important; }
html[data-tod="night"] #sectionSvg .rw.lit { fill: #d3bd9a !important; }
html[data-tod="night"] #sectionSvg .rw-b.lit { fill: #c6ad8a !important; }
html[data-tod="night"] #sectionSvg .room { transition: filter .6s ease; }
html[data-tod="night"] #sectionSvg .room:not(.r-hall):not(.on) { filter: brightness(.42) saturate(.7); }
html[data-tod="night"] #sectionSvg .room-dabs { opacity: .35; }
#sectionSvg #lamps { pointer-events: none; }
#sectionSvg #lamps .nglow { opacity: .3; }
html[data-tod="night"] #sectionSvg #lamps .nglow { opacity: .85; mix-blend-mode: screen; animation: lampflick 5s ease-in-out infinite; }
html[data-tod="night"] #sectionSvg #lamps .nglow:nth-child(3n) { animation-delay: -2s; }
@keyframes lampflick { 0%, 100% { opacity: .85; } 45% { opacity: .7; } 55% { opacity: .9; } }
html[data-tod="night"] #sectionSvg.has-focus .stop:not(.on) .veil { opacity: .25; }
html[data-tod="night"] #sectionSvg .veil { fill: #1d1c24; }
#sectionSvg #lamps .ncore { fill: #fff0cf; opacity: 0; }
html[data-tod="night"] #sectionSvg #lamps .ncore { opacity: .9; }
html[data-tod="night"] #sectionSvg #lamps .nglow { opacity: .7; }

/* ==========================================================================
   v14 — the lift: a Paris cage lift of about 1900.
   Walnut car, folding iron gate, brass half-moon indicator, porcelain buttons.
   Drawn in the home page's palette (walnut, brass, bone, ink).
   ========================================================================== */
.lift { --side: clamp(34px, 15vw, 280px); --top: clamp(150px, 27vh, 250px); --bot: clamp(40px, 8vh, 80px);
  background: #2b2019; opacity: 0; transition: opacity .7s var(--e-out); }
.lift.ui { opacity: 1; }
.lift-door, .lift-slit { display: none; }
.lift-car { position: absolute; inset: 0; translate: 0 var(--shake, 0px); }

/* the shaft seen through the gate: stone courses and the landings passing */
.shaft { position: absolute; left: var(--side); right: var(--side); top: var(--top); bottom: var(--bot); overflow: hidden;
  background:
    repeating-linear-gradient(180deg, transparent 0 210px, rgba(240, 206, 140, .0) 210px, rgba(240, 206, 140, .55) 222px, rgba(240, 206, 140, .55) 282px, #2a211b 284px, #2a211b 300px),
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(0, 0, 0, .28) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 69px, rgba(0, 0, 0, .18) 69px 70px),
    var(--grain), linear-gradient(90deg, #4a3d33, #5d4c3e 50%, #4a3d33);
  background-position: 0 var(--shift, 0px), 0 var(--shift, 0px), 0 0, 0 0, 0 0;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .75); }
.shaft-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(246, 211, 138, .22), transparent 70%); }

/* the folding gate: iron lattice, collapses to the jambs */
.gate { position: absolute; top: var(--top); bottom: var(--bot); width: calc(50% - var(--side)); z-index: 1;
  background:
    linear-gradient(90deg, #1f1a16 0 3px, transparent 3px) 0 0 / 64px 100%,
    repeating-linear-gradient(58deg, transparent 0 30px, rgba(31, 26, 22, .9) 30px 31.5px),
    repeating-linear-gradient(-58deg, transparent 0 30px, rgba(31, 26, 22, .9) 30px 31.5px),
    linear-gradient(180deg, #1f1a16 0 7px, transparent 7px calc(100% - 7px), #1f1a16 calc(100% - 7px));
  transition: transform 1s cubic-bezier(.6, 0, .25, 1); filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }
.gate.l { left: var(--side); transform-origin: 0 50%; transform: scaleX(.1); }
.gate.r { right: var(--side); transform-origin: 100% 50%; transform: scaleX(.1); }
.lift.shut .gate { transform: scaleX(1); }
.gate::after { content: ""; position: absolute; top: 44%; width: 12px; height: 34px; border-radius: 3px; background: linear-gradient(90deg, #8a6a36, #e8d19a 50%, #8a6a36); }
.gate.l::after { right: -2px; } .gate.r::after { left: -2px; }

/* walnut walls, lintel, parquet */
.car-wall { position: absolute; top: 0; bottom: 0; width: var(--side); z-index: 2;
  background: var(--fibre), var(--grain), linear-gradient(90deg, #5b3d27, #6e4b30 45%, #5b3d27); }
.car-wall.l { left: 0; box-shadow: inset -10px 0 18px -10px rgba(0, 0, 0, .7); }
.car-wall.r { right: 0; box-shadow: inset 10px 0 18px -10px rgba(0, 0, 0, .7); }
.car-wall::before { content: ""; position: absolute; left: 14%; right: 14%; top: calc(var(--top) + 30px); bottom: calc(var(--bot) + 30px); border: 1px solid rgba(20, 12, 6, .55); outline: 1px solid rgba(232, 209, 154, .16); outline-offset: -7px; }
.car-wall::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 7px; background: linear-gradient(180deg, #e8d19a, #a7864d 60%, #6f5528); box-shadow: 0 3px 6px rgba(0, 0, 0, .45); }
.sconce-c { position: absolute; top: calc(var(--top) + 8px); left: 50%; width: 18px; height: 26px; margin-left: -9px; background: #f3e6c8; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); z-index: 1; }
.sconce-c::after { content: ""; position: absolute; }
.car-wall .sconce-c { box-shadow: 0 0 0 1px #5a4420; }
.car-wall.l::before, .car-wall.r::before { background: radial-gradient(ellipse 80% 22% at 50% 0%, rgba(246, 211, 138, .3), transparent 70%); }
.lift-head { position: absolute; left: 0; right: 0; top: 0; height: var(--top); z-index: 3; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  background: var(--fibre), var(--grain), linear-gradient(180deg, #4c3321, #664630); border: 0; box-shadow: inset 0 -8px 0 -2px #3a2716, inset 0 -10px 0 -2px rgba(232, 209, 154, .35), 0 10px 20px -8px rgba(0, 0, 0, .7);
  transform: none; transition: none; }
.car-floor { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bot); z-index: 2;
  background: linear-gradient(135deg, #7a5536 25%, transparent 25%) 0 0 / 28px 28px, linear-gradient(225deg, #7a5536 25%, transparent 25%) 0 0 / 28px 28px, linear-gradient(315deg, #8f6843 25%, transparent 25%) 0 0 / 28px 28px, linear-gradient(45deg, #8f6843 25%, transparent 25%) 0 0 / 28px 28px, #6b4a2e;
  box-shadow: inset 0 10px 14px -8px rgba(0, 0, 0, .7); border-top: 4px solid #a7864d; }

/* the indicator */
.dial { width: clamp(200px, 24vw, 320px); height: auto; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.dial .needle { transform-origin: 180px 186px; transform: rotate(var(--needle, 0deg)); transition: transform .9s cubic-bezier(.3, .7, .3, 1); }
.lift.riding .dial .needle { transition: none; }
.dial-n { font-family: var(--f-serif); font-size: 15px; font-style: italic; fill: #5a4420; transition: fill .3s; }
.dial-n.on { fill: #8e2f28; font-weight: 600; }
.dial-brand { font-family: var(--f-serif); font-size: 8px; letter-spacing: .3em; fill: #8a6a36; }
.lf-display { gap: 2px; padding-bottom: 12px; }
.lf-main { font-family: var(--f-serif); color: #efe3c8; text-shadow: none; gap: 12px; }
.lf-arrow, .lf-strip { display: none; }
.lf-code { font-size: 17px; font-style: italic; min-width: 0; letter-spacing: .02em; }
html[data-lang="zh"] .lf-code { font-style: normal; font-size: 15px; letter-spacing: .12em; }
.lf-el { font-family: var(--f-serif); font-style: italic; font-size: 13px; color: #cdb58f; min-width: 0; }
.lf-msg { font-family: var(--f-serif); font-style: italic; font-size: 13px; letter-spacing: .04em; color: #cdb58f; }
html[data-lang="zh"] .lf-msg { font-style: normal; letter-spacing: .12em; }
@media (max-height: 640px) { .lf-msg { display: none; } }

/* the operating panel: brass plate, porcelain buttons */
.cop { z-index: 4; right: calc(var(--side) * .5); transform: translate(50%, -50%); top: 58%; opacity: 0; transition: opacity .6s .3s;
  background: linear-gradient(150deg, #e8d19a, #c9a866 40%, #a7864d 75%, #8a6a36); border: 1px solid #5a4420; border-radius: 3px; outline: none; padding: 16px 14px 14px;
  box-shadow: inset 0 0 0 4px rgba(255, 244, 214, .25), inset 0 0 0 5px rgba(90, 68, 32, .5), 0 18px 30px -14px rgba(0, 0, 0, .8); }
.lift.ui .cop { transform: translate(50%, -50%); opacity: 1; }
.cop-brand { font-family: var(--f-serif); font-style: italic; font-size: 10px; letter-spacing: .08em; color: #3a2a14; opacity: .85; }
.cop-floors { gap: 6px; }
.cop-item { grid-template-columns: 34px auto; gap: 10px; }
.cop-name { color: #2a1f10; font-size: 12px; letter-spacing: .14em; }
html[data-lang="en"] .cop-name { font-size: 14px; }
.cop-item.is-here .cop-name { color: #8e2f28; }
.cop-btn { width: 34px; height: 34px; color: #2a2420; font-family: var(--f-serif); font-size: 12px; font-style: italic;
  background: radial-gradient(circle at 40% 32%, #fffaf0, #efe6d4 55%, #d8ccb5); box-shadow: 0 0 0 3px #8a6a36, 0 0 0 4px #5a4420, 0 2px 3px 3px rgba(0, 0, 0, .3); }
.cop-btn:hover:not(:disabled) { color: #8e2f28; box-shadow: 0 0 0 3px #b8963f, 0 0 0 4px #5a4420, 0 2px 3px 3px rgba(0, 0, 0, .3); }
.cop-btn.lit { color: #8e2f28; background: radial-gradient(circle at 40% 32%, #fff6dc, #f6d38a 60%, #e0b275); box-shadow: 0 0 0 3px #8a6a36, 0 0 0 4px #5a4420, 0 0 16px 4px rgba(246, 211, 138, .8); }
.cop-btn:disabled { opacity: .5; }
.cop-row { border-top: 1px solid rgba(90, 68, 32, .5); box-shadow: inset 0 1px 0 rgba(255, 244, 214, .3); padding-top: 12px; gap: 12px; }
.cop-btn.sm { width: 26px; height: 26px; font-size: 9px; font-style: normal; letter-spacing: -.1em; }
.cop-btn.bell { color: #8a6a36; }
.lift-exit { z-index: 4; bottom: calc(var(--bot) + 18px); background: rgba(246, 239, 225, .9); border: 0; color: var(--ink); border-radius: 0; padding: 8px 18px; font-size: 14px; letter-spacing: .06em; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); }
.lift-exit:hover { background: #fff; color: var(--rouge); }
@media (max-width: 700px) {
  .lift { --side: 22px; --top: 190px; }
  .cop { left: auto; right: 50%; top: auto; bottom: calc(var(--bot) + 66px); transform: translate(50%, 0); padding: 12px; }
  .lift.ui .cop { transform: translate(50%, 0); }
  .cop-floors { grid-template-columns: repeat(3, auto); gap: 6px 10px; }
  .cop-item { grid-template-columns: 30px; justify-items: center; gap: 2px; }
  .cop-name { font-size: 10px; letter-spacing: .06em; }
  .cop-btn { width: 30px; height: 30px; }
  .sconce-c { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gate, .lift, .dial .needle { transition: none; } }

/* the call plate */
.call { background: linear-gradient(150deg, #e8d19a, #c9a866 45%, #8a6a36); border: 1px solid #5a4420; border-radius: 6px; padding: 7px 8px 7px 12px; gap: 10px; box-shadow: inset 0 0 0 3px rgba(255, 244, 214, .25), 0 12px 24px -12px rgba(0, 0, 0, .6); }
.call-led { background: none; color: #3a2a14; font-family: var(--f-serif); font-style: italic; font-size: 16px; text-shadow: none; padding: 0 2px; min-width: 2.4ch; }
.call-knob { width: 34px; height: 34px; background: radial-gradient(circle at 40% 32%, #fffaf0, #efe6d4 55%, #d8ccb5); box-shadow: 0 0 0 3px #8a6a36, 0 0 0 4px #5a4420, 0 2px 3px 2px rgba(0, 0, 0, .3); }
.call:hover .call-knob, .call:focus-visible .call-knob { box-shadow: 0 0 0 3px #b8963f, 0 0 0 4px #5a4420, 0 0 14px 4px rgba(246, 211, 138, .8); }
.lift.shut .gate { transition-delay: .35s; }

/* ==========================================================================
   v15 — objects painted into the plates. Colours sampled from each painting;
   the painting's own light (leaf shadows, lamp glow) falls across them.
   ========================================================================== */

/* ---------- 4 · study: a painted double door in the boiserie ---------- */
.tb-box .doorway { background: none; box-shadow: none; padding: 0; overflow: visible; }
.tb-box .doorway::before { content: ""; position: absolute; inset: -1.1cqw -1.1cqw 0; z-index: 0;              /* architrave */
  background: var(--leaves) 30% 20% / 60cqw auto, linear-gradient(90deg, #d9bd92, #f1d6a8 30%, #e5c89a 70%, #c9ad83);
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 .18cqw #ac9166, inset 0 0 0 .5cqw #f6d9aa, inset 0 0 0 .62cqw #b79c73, 1.4cqw 1.2cqw 2.2cqw -.8cqw rgba(92, 64, 32, .45); }
.tb-box .door-room { inset: 0; z-index: 1; box-shadow: inset 0 0 1.4cqw rgba(60, 30, 10, .6);
  background: radial-gradient(ellipse 50% 40% at 50% 62%, #ffe2a8, #f0b86a 45%, #8a5a30 85%), #6a411f; }
.tb-box .door-room::after { left: 24%; right: 24%; bottom: 12%; height: 16%; background: #6a411f; box-shadow: 0 -.4cqw 0 -.2cqw #3a2410; }
.tb-box .door-leaf { top: 0; width: 50%; z-index: 2;
  background: var(--leaves) 40% 30% / 60cqw auto, linear-gradient(90deg, #e2c595, #f0d4a6 35%, #ecd0a0 70%, #d9bd90);
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 .14cqw rgba(140, 110, 70, .75), inset .3cqw 0 .5cqw -.2cqw rgba(255, 240, 210, .6), inset -.3cqw 0 .6cqw -.2cqw rgba(120, 90, 50, .35); }
.tb-box .door-leaf.l { left: 0; } .tb-box .door-leaf.r { right: 0; }
.tb-box .door-leaf .dp { left: 15%; right: 15%; background: linear-gradient(135deg, rgba(255, 240, 210, .35), rgba(150, 120, 80, .12)); border: 0; outline: 0;
  box-shadow: inset 0 0 0 .1cqw rgba(150, 120, 80, .8), inset .22cqw .22cqw 0 .1cqw rgba(255, 244, 220, .75), inset -.22cqw -.22cqw 0 .1cqw rgba(160, 128, 88, .5), inset 0 0 0 .7cqw rgba(0,0,0,0), inset 0 0 0 .78cqw rgba(160, 128, 88, .4); }
.tb-box .door-leaf .dp.top { top: 6%; height: 50%; } .tb-box .door-leaf .dp.bot { bottom: 5%; height: 30%; }
.tb-box .dl-handle { top: 55%; width: .5cqw; height: 3.4cqw; border-radius: .3cqw; background: linear-gradient(90deg, #7a5c2b, #f3dda6 45%, #a7864d); box-shadow: .2cqw .3cqw .4cqw rgba(60, 40, 20, .45); }
.tb-box .door-leaf.l .dl-handle { right: 8%; } .tb-box .door-leaf.r .dl-handle { left: 8%; }
.tb-box .door-leaf.l::after { content: ""; position: absolute; right: 3%; top: 2%; bottom: 2%; width: .28cqw; background: linear-gradient(90deg, #8a6a36, #e8d19a, #8a6a36); opacity: .8; }  /* crémone bolt */
.tb-box .door-transom { left: -1.1cqw; right: -1.1cqw; top: -5.4cqw; height: 4.2cqw; z-index: 1; display: grid; place-items: center;
  background: var(--leaves) 30% 10% / 60cqw auto, linear-gradient(180deg, #f1d6a8, #e2c595); background-blend-mode: multiply;
  box-shadow: inset 0 0 0 .18cqw #ac9166, inset 0 0 0 .5cqw #f6d9aa, inset 0 0 0 .62cqw #b79c73; }
.tb-box .door-transom::before { content: "La Chambre"; font-family: var(--f-serif); font-style: italic; font-size: 1.35cqw; letter-spacing: .08em; color: #7a5a30;
  text-shadow: 0 .06cqw 0 rgba(255, 244, 220, .8), 0 -.04cqw 0 rgba(90, 60, 30, .35); }
.study-stage.is-opening .door-leaf { box-shadow: inset 0 0 0 .14cqw rgba(140, 110, 70, .75), 0 0 2cqw rgba(0, 0, 0, .25); }

/* the lock: a brass plate on the wall, porcelain buttons like the lift's */
.tb-box .door-leaf.r .keypad { left: calc(100% + 3.6cqw); top: 22%; width: clamp(150px, 10.5cqw, 190px); padding: 1cqw .9cqw .8cqw; gap: .6cqw;
  background: linear-gradient(150deg, #e8d19a, #c9a866 42%, #a7864d 78%, #8a6a36); border: 1px solid #5a4420; border-radius: .3cqw;
  box-shadow: inset 0 0 0 .28cqw rgba(255, 244, 214, .25), inset 0 0 0 .34cqw rgba(90, 68, 32, .5), 1.2cqw 1.2cqw 1.6cqw -.6cqw rgba(92, 64, 32, .5); }
.tb-box .kp-label { font-family: var(--f-serif); font-style: italic; font-size: clamp(11px, .8cqw, 13px); color: #3a2a14; }
.tb-box .kp-lamp { width: .5cqw; height: .5cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: #5a4420; box-shadow: inset 0 0 0 1px #3a2a14; }
.tb-box .kp-lamp.red { background: #b8432f; box-shadow: 0 0 6px #b8432f; } .tb-box .kp-lamp.green { background: #7a9a5a; box-shadow: 0 0 6px #b8d08a; } .tb-box .kp-lamp.busy { background: #e0b275; }
.tb-box .door-leaf.r .kp-display { height: clamp(26px, 2.1cqw, 34px); background: #f6efe0; box-shadow: inset 0 0 0 1px #8a6a36, inset 0 .15cqw .3cqw rgba(90, 68, 32, .25); font-size: clamp(14px, 1.1cqw, 18px); }
.tb-box .door-leaf.r .kp-keys { gap: .55cqw; }
.tb-box .door-leaf.r .kp-key { height: auto; width: 78%; aspect-ratio: 1; justify-self: center; border-radius: 50%; color: #2a2420; font-family: var(--f-serif); font-style: italic; font-size: clamp(11px, .85cqw, 14px);
  background: radial-gradient(circle at 40% 32%, #fffaf0, #efe6d4 55%, #d8ccb5); box-shadow: 0 0 0 .18cqw #8a6a36, 0 0 0 .24cqw #5a4420, 0 .12cqw .2cqw .15cqw rgba(0, 0, 0, .3); }
.tb-box .door-leaf.r .kp-key:hover { color: #8e2f28; }
.tb-box .door-leaf.r .kp-key:active { background: radial-gradient(circle at 40% 32%, #fff6dc, #f6d38a 60%, #e0b275); color: #8e2f28; }
.tb-box .kp-msg { font-size: clamp(10px, .75cqw, 12px); color: #3a2a14; }
.tb-box .vault-note { color: #5a4020; text-shadow: 0 0 .6cqw rgba(250, 236, 206, .9); }
.tb-box .sconce svg path[fill="#e9dcc0"] { fill: #f6e6c6; }
@media (max-width: 719px), (max-aspect-ratio: 1/1) {
  .tb-box .door-leaf.r .keypad { left: 50%; transform: translateX(-50%); width: 170px; top: 14%; padding: 12px 10px 10px; gap: 8px; }
  .tb-box .door-leaf.r .kp-keys { gap: 6px; }
  .tb-box .door-leaf.r .kp-key { font-size: 13px; }
  .tb-box .door-transom { top: -52px; height: 40px; } .tb-box .door-transom::before { font-size: 16px; }
}

/* ---------- 3 · library: the portfolios as cloth-bound books in the room's lamplight ---------- */
.lib-shelf .b-spine {
  background:
    linear-gradient(180deg, rgba(40, 22, 10, .55) 0, rgba(40, 22, 10, 0) 16%, rgba(40, 22, 10, 0) 80%, rgba(40, 22, 10, .35) 100%),
    linear-gradient(90deg, rgba(20, 10, 4, .45) 0, rgba(255, 230, 190, .16) 22%, rgba(255, 230, 190, .05) 45%, rgba(20, 10, 4, .15) 70%, rgba(20, 10, 4, .5) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(118, 78, 44, .38), rgba(118, 78, 44, .38)),
    var(--c);
  filter: saturate(.62) brightness(.92);
  box-shadow: inset 0 0 0 .5px rgba(30, 16, 6, .6);
  border-radius: 1.5px 1.5px 0 0;
}
.lib-shelf .b-spine::before, .lib-shelf .b-spine::after { content: ""; position: absolute; left: 8%; right: 8%; height: 1.5px; background: linear-gradient(90deg, #8a6a36, #e8d19a 50%, #8a6a36); opacity: .8; }
.lib-shelf .b-spine::before { top: 6%; box-shadow: 0 4px 0 -0.5px rgba(232, 209, 154, .6); }
.lib-shelf .b-spine::after { bottom: 7%; box-shadow: 0 -4px 0 -0.5px rgba(232, 209, 154, .6); }
.lib-shelf .spine-title { font-family: var(--f-serif); font-weight: 500; letter-spacing: .16em; color: #f1e2c1; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); opacity: .92; }
.lib-shelf .spine-vol { color: #e8d19a; opacity: .75; }
.lib-shelf .book:hover .b-spine, .lib-shelf .book:focus-visible .b-spine { filter: saturate(.8) brightness(1.05); }
.lib-shelf .b-cover { filter: saturate(.8) brightness(.95); box-shadow: inset 3px 0 6px rgba(0, 0, 0, .35); }
.lib-shelf .b-top { background: repeating-linear-gradient(90deg, #e9dcc0 0 1px, #cbb893 1px 2px); }
.lib-shelf .book.pending .b-spine { background: linear-gradient(90deg, rgba(20, 10, 4, .35), rgba(255, 230, 190, .1) 30%, rgba(20, 10, 4, .35)), #b8a888; border: 0; color: #5a4a3a; filter: none; }
.lib-shelf .book-3d { filter: drop-shadow(calc(3 * var(--u)) 0 calc(4 * var(--u)) rgba(20, 10, 4, .45)); }
.lib-shelf .bookend { background: linear-gradient(90deg, #6f5528, #e8d19a 45%, #8a6a36); border-radius: 2px 2px 0 0; box-shadow: calc(2 * var(--u)) 0 calc(3 * var(--u)) rgba(20, 10, 4, .5); }
.lib-shelf .shelf-board { background: linear-gradient(180deg, #7a5436, #5a3a22 55%, #3d2616); height: calc(14 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(12 * var(--u)) calc(-4 * var(--u)) rgba(20, 10, 5, .7), inset 0 1px 0 rgba(232, 200, 150, .35); }
.lib-shelf .shelf-board::before { display: none; }
.lib-shelf::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: calc(14 * var(--u)); height: 70%; pointer-events: none; z-index: 3;          /* the lamp's warm fall-off across the spines */
  background: radial-gradient(ellipse 70% 90% at 20% 100%, rgba(255, 210, 140, .16), transparent 70%); mix-blend-mode: soft-light; }
.lib-shelf .b-spine { padding-top: calc(24 * var(--u)); padding-bottom: calc(22 * var(--u)); }

/* ---------- −1 · bar: the drink on the counter, lit by the pendant ---------- */
.tb-box > .bar-stage .bar-vessel { filter: drop-shadow(0 .4cqw .6cqw rgba(0, 0, 0, .35)) sepia(.12) saturate(.9); }
.tb-box > .bar-stage::before { content: ""; position: absolute; right: -2cqw; top: -8cqw; width: 22cqw; height: 30cqw; pointer-events: none;
  background: radial-gradient(ellipse 45% 60% at 50% 40%, rgba(255, 214, 150, .16), transparent 70%); }
.lc-glass path[stroke="#f6ecd6"], .lc-glass path[stroke="#fffaf0"] { stroke: #6a5a46; stroke-opacity: .9; }
.lc-glass path[stroke="#fff"] { stroke: #fff; stroke-opacity: .9; }
.lc-glass { width: 140px; }
.tb-box > .bar-stage .bar-vessel { filter: drop-shadow(0 .4cqw .6cqw rgba(0, 0, 0, .4)) sepia(.35) brightness(.84) contrast(1.05); }

/* ---------- hotspots: things in the painting you can step closer to ---------- */
.hotspot { position: absolute; z-index: 3; border: 0; padding: 0; background: none; cursor: pointer; }
.hotspot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 214, 150, .0), transparent 70%); transition: background .5s; }
.hotspot:hover::before, .hotspot:focus-visible::before { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 214, 150, .28), transparent 70%); }
.hs-label { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); display: grid; justify-items: center; gap: 2px; white-space: nowrap;
  padding: .5cqw 1cqw .55cqw; background: linear-gradient(150deg, #e8d19a, #c9a866 45%, #a7864d); color: #2a1f10; box-shadow: inset 0 0 0 1px #5a4420, inset 0 0 0 3px rgba(255, 244, 214, .3), 0 .5cqw 1cqw -.4cqw rgba(0, 0, 0, .7);
  transition: transform .3s var(--e-out); }
.hs-label b { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: clamp(13px, 1.1cqw, 17px); letter-spacing: .04em; }
html[data-lang="zh"] .hs-label b { font-family: var(--f-zh); font-style: normal; font-weight: 600; letter-spacing: .3em; margin-right: -.3em; }
.hs-label i { font-family: var(--f-serif); font-style: italic; font-size: clamp(10px, .75cqw, 12px); opacity: .8; }
.hotspot:hover .hs-label, .hotspot:focus-visible .hs-label { transform: translate(-50%, 40%); }
.hs-cellar { left: 70%; top: 8%; width: 28%; height: 42%; }
.hs-letter { left: 1%; top: 34%; width: 12%; height: 30%; }

/* ---------- close-ups ---------- */
.closeup { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 70px 16px 90px; box-sizing: border-box; overflow-y: auto;
  background: #1c130d; opacity: 0; transition: opacity .45s var(--e-out); }
.closeup.show { opacity: 1; }
.closeup .cu-inner { width: min(1100px, 100%); transform: scale(.97); transition: transform .6s var(--e-out); }
.closeup.show .cu-inner { transform: none; }
.cu-close { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); transform: translateX(-50%); z-index: 2; border: 0; cursor: pointer; padding: 9px 20px;
  background: linear-gradient(150deg, #e8d19a, #c9a866 45%, #a7864d); color: #2a1f10; font-family: var(--f-serif); font-size: 14px; letter-spacing: .06em; box-shadow: inset 0 0 0 1px #5a4420, 0 8px 18px -8px rgba(0, 0, 0, .7); }
#cuCellar.has-barSalle { background: linear-gradient(180deg, rgba(20, 12, 8, .55), rgba(20, 12, 8, .78)), var(--img-barSalle) center 40% / cover no-repeat, #1c130d; }
#cuCellar .cellar { margin: 0; background: none; box-shadow: none; outline: 0; padding: 0; color: #eadfcb; }
#cuCellar .cellar-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; margin-bottom: 26px; }
#cuCellar .cellar-title { font-size: clamp(34px, 4vw, 54px); }
#cuCellar .shelf-row { justify-content: center; min-height: 118px; gap: 6px 10px; border-bottom: 10px solid transparent; border-image: linear-gradient(180deg, #8a5a36, #5b3a24) 1; box-shadow: 0 12px 14px -8px rgba(0, 0, 0, .7); }
#cuCellar .shelf-row + .shelf-row { margin-top: 18px; }
#cuCellar .cab-item { width: 74px; } #cuCellar .cab-item svg { width: 64px; }
#cuCellar .cellar-empty { text-align: center; font-size: 17px; padding: 30px 0 40px; border-bottom: 10px solid #6b4128; }
.cu-paper { background: var(--grain), radial-gradient(ellipse at 50% 40%, #3a2a1e, #1c130d 80%); }
.cu-paper .cu-inner { width: min(640px, 100%); }
.cu-paper .letter { margin: 0; transform: rotate(-.8deg); }
.bar-page { display: none; }
@media (max-width: 719px) {
  .hs-label { padding: 6px 10px; }
  .hs-cellar { left: 68%; } .hs-letter { left: 2%; }
}
@media (max-width: 719px), (max-aspect-ratio: 1/1) {
  .bar-over { left: calc(50% - 170px); width: 340px; top: 5%; }
  .hs-cellar { left: 53%; top: 42%; width: 12%; height: 16%; }
  .hs-letter { left: 35%; top: 42%; width: 12%; height: 16%; }
  .hs-label { padding: 6px 10px; }
}
#cuCellar .cellar-status { text-align: center; max-width: 34em; }

/* ---------- study desk: the notebook and the note lie in the lamp's light ---------- */
.tb-box .carnet { background:
    radial-gradient(ellipse 120% 90% at 0% 0%, rgba(255, 214, 150, .42), transparent 60%),
    radial-gradient(ellipse 90% 70% at 100% 100%, rgba(40, 20, 6, .35), transparent 70%),
    var(--fibre), var(--grain), linear-gradient(135deg, #c8995f, #a8794a 60%, #8e6238);
  box-shadow: inset 5px 0 7px -5px rgba(40, 20, 5, .5), inset 0 0 0 1px rgba(60, 35, 15, .5), inset -2px -2px 0 rgba(40, 20, 5, .25), 1.6cqw 2.2cqw 2.2cqw -1cqw rgba(20, 8, 2, .75), .4cqw .6cqw .6cqw -.2cqw rgba(20, 8, 2, .5); }
.tb-box .carnet-label { background: radial-gradient(ellipse 100% 80% at 0% 0%, rgba(255, 236, 200, .6), transparent 70%), var(--grain), #efe2c4; }
.tb-box .carnet-twine { background: repeating-linear-gradient(45deg, #e3cfa4 0 2px, #a88c5e 2px 4px); box-shadow: 0 1px 1px rgba(40, 20, 5, .4); }
.tb-box .desk-card { background: radial-gradient(ellipse 120% 90% at 0% 0%, rgba(255, 226, 180, .45), transparent 65%), var(--fibre), var(--grain), #f3ead6;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .25), 1.2cqw 1.6cqw 1.8cqw -.9cqw rgba(20, 8, 2, .7), .3cqw .4cqw .5cqw -.2cqw rgba(20, 8, 2, .45);
  clip-path: polygon(0 1%, 3% 0, 30% .6%, 60% 0, 97% .5%, 100% 2%, 99.4% 40%, 100% 98%, 96% 100%, 60% 99.4%, 20% 100%, 1% 99%, .4% 60%); }
.tb-box .desk-card .btn-line { border-color: rgba(90, 60, 30, .45); color: #3a2a18; }

/* ---------- 5 · greenhouse: a seed-merchant's brass plate instead of a button ---------- */
.gh-actions .btn-gilt, .gh-actions .btn-line { background: linear-gradient(150deg, #e8d19a, #c9a866 45%, #a7864d); color: #2a1f10; border: 0; border-radius: 0; padding: 10px 22px;
  box-shadow: inset 0 0 0 1px #5a4420, inset 0 0 0 3px rgba(255, 244, 214, .3), 0 .6cqw 1.2cqw -.5cqw rgba(60, 40, 10, .55); font-family: var(--f-serif); }
.gh-actions .btn-gilt:hover, .gh-actions .btn-line:hover { background: linear-gradient(150deg, #f3e0ae, #d6b675 45%, #b08c50); color: #8e2f28; }
.gh-actions .gh-count { color: #3a3020; text-shadow: 0 0 .8cqw rgba(252, 244, 226, .95); }
.gh-over { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(250, 244, 230, .6), rgba(250, 244, 230, 0) 100%); }
#ghBed .fl { filter: saturate(.85) drop-shadow(0 .15cqw .15cqw rgba(60, 40, 20, .35)); }
#ghBed .fl { filter: saturate(.78) sepia(.12) drop-shadow(0 .15cqw .15cqw rgba(60, 40, 20, .35)); }
#ghBed .fl > path[fill], #ghBed .fl ellipse, #ghBed .fl circle { }

/* ---------- 5 · greenhouse: the picture ends where the soil ends ---------- */
.f-greenhouse .tableau { --gh-crop: .838; --gh-h: max(calc(100svh / var(--gh-crop)), calc(100cqw / 1.5)); }
.f-greenhouse .tb-scroll { height: calc(var(--gh-h) * var(--gh-crop)); }
.f-greenhouse .tb-box { height: var(--gh-h); width: max(100cqw, calc(var(--gh-h) * 1.5)); }
.f-greenhouse .tb-box::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--gh-crop) * 100% - 1.2cqw); height: 1.2cqw; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(40, 26, 14, .25)); }
.f-greenhouse .gh-actions { top: 36%; left: 30%; width: 40%; gap: .8cqw; }
.f-greenhouse .gh-over { top: 11%; padding-bottom: 5cqw; }
.f-greenhouse .gh-over .room-head .rh-note { margin-bottom: 0; }
.f-greenhouse .landing { padding-top: 40px; }
@media (max-width: 719px), (max-aspect-ratio: 1/1) {
  .f-greenhouse .gh-actions { left: calc(50% - 170px); width: 340px; top: 33%; }
}

/* ---------- −1 · bar: quiet signs instead of plaques ---------- */
.hotspot::before { display: none; }
.hs-label { transform: none; left: 0; bottom: auto; top: 0; padding: 0 0 5px; background: none; box-shadow: none; color: #f1e2c1;
  display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid rgba(241, 226, 193, .45); text-shadow: 0 1px 6px rgba(10, 6, 2, .85);
  transition: border-color .3s, color .3s; }
.hs-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #f6d38a; box-shadow: 0 0 0 3px rgba(246, 211, 138, .18), 0 0 10px rgba(246, 211, 138, .8); align-self: center; animation: hs-breath 3.2s ease-in-out infinite; }
@keyframes hs-breath { 50% { box-shadow: 0 0 0 5px rgba(246, 211, 138, .08), 0 0 14px rgba(246, 211, 138, .9); } }
.hs-label b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(13px, .95cqw, 16px); letter-spacing: .02em; }
html[data-lang="zh"] .hs-label b { font-family: var(--f-zh); font-style: normal; font-weight: 400; font-size: clamp(12px, .85cqw, 14px); letter-spacing: .24em; margin-right: 0; }
.hs-label i { font-size: clamp(10px, .72cqw, 12px); opacity: .62; }
.hotspot:hover .hs-label, .hotspot:focus-visible .hs-label { transform: none; color: #fff3d6; border-color: rgba(246, 211, 138, .9); }
.hotspot:focus-visible { outline: none; }
.hs-cellar { left: 71%; top: 51.5%; width: auto; height: auto; }
.hs-letter { left: 4%; top: 51.5%; width: auto; height: auto; }
.hs-cellar .hs-label, .hs-letter .hs-label { position: relative; }
@media (max-width: 719px), (max-aspect-ratio: 1/1) {
  .hs-cellar { left: 56%; top: 49%; width: auto; height: auto; }
  .hs-letter { left: 30%; top: 49%; width: auto; height: auto; }
  .hs-label { padding: 0 0 4px; } .hs-label i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hs-label::before { animation: none; } }
@media (max-width: 719px), (max-aspect-ratio: 1/1) { .hs-letter { left: 37.5%; } }

/* ==========================================================================
   One floor = one screen. The plate fills the viewport exactly; what does not
   fit is cropped (each floor chooses where), never scrolled. The folio moves
   off the painted floors — the lift plate is always at hand.
   ========================================================================== */
.tb-scroll { height: 100svh; }
.tableau { --ay: .5; --H: max(100svh, calc(100cqw / 1.5)); }
.tb-box { height: var(--H); width: max(100cqw, calc(var(--H) * 1.5)); top: calc((100svh - var(--H)) * var(--ay)); }
.f-bar .tableau { --ay: 1; }            /* keep the bar front (the carte) whole; crop the vault */
.f-library .tableau { --ay: .35; }
.f-study .tableau { --ay: .5; }
.f-greenhouse .tableau { --H: var(--gh-h); }
.f-greenhouse .tb-scroll { height: 100svh; }
.f-greenhouse .tb-box { top: calc(100svh - var(--gh-h) * var(--gh-crop)); }
.floor.f-library, .floor.f-greenhouse, .floor.f-bar, .floor.f-study { height: 100svh; min-height: 0; overflow: hidden; padding: 0; }
.f-library > .landing, .f-greenhouse > .landing, .f-bar > .landing, .f-study > .landing, .f-bar .bar-page { display: none; }
.bar-room { height: 100svh; }
.hs-carte { display: none; }
.bar-room:not(.is-wide) .hs-carte { display: block; left: 44%; top: 62%; }
.cu-carte { background: var(--grain), radial-gradient(ellipse at 50% 30%, #3a2a1e, #1c130d 80%); place-items: start center; }
.cu-carte .cu-inner { width: min(720px, 100%); display: grid; gap: 14px; }
.cu-carte .bar-stage { position: sticky; top: 0; z-index: 3; }
@media (max-width: 719px), (max-aspect-ratio: 1/1) { .bar-room:not(.is-wide) .hs-carte { left: 42%; top: 60%; } }

/* ---------- centring: padding must not push a centred block off its axis ---------- */
.tb-over { box-sizing: border-box; }
.tb-over .room-head { align-items: center; text-align: center; }
.f-greenhouse .gh-over, .f-greenhouse .gh-actions { left: 50%; transform: translateX(-50%); }

/* ---------- 5 · greenhouse: two quiet lines of type, no plate ---------- */
.gh-actions .cartel-acts { gap: 0; align-items: baseline; }
.gh-actions .btn-gilt, .gh-actions .btn-line { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 2px 1px 1px; line-height: 1.25; color: #2e2618; cursor: pointer;
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: .01em; font-size: clamp(16px, 1.35cqw, 22px);
  text-shadow: 0 0 .9cqw rgba(252, 244, 226, .95), 0 0 .3cqw rgba(252, 244, 226, .9);
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .3s ease, background-size .35s ease; }
.gh-actions .btn-line { font-size: clamp(14px, 1.1cqw, 18px); color: #5a4c34; background-size: 0 1px; }
.gh-actions .btn-line:not([hidden]) { position: relative; margin-left: 2em; }
.gh-actions .btn-line:not([hidden])::before { content: "·"; position: absolute; left: -1.15em; top: 50%; transform: translateY(-55%); font-style: normal; color: #8a7a5a; }
.gh-actions .btn-gilt:hover, .gh-actions .btn-gilt:focus-visible { color: #8e2f28; background: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }
.gh-actions .btn-line:hover, .gh-actions .btn-line:focus-visible { color: #8e2f28; background: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }
.gh-actions button:focus-visible { outline: 1px solid #8e2f28; outline-offset: 4px; }
html[data-lang="zh"] .gh-actions .btn-gilt, html[data-lang="zh"] .gh-actions .btn-line { font-family: var(--f-zh); font-style: normal; letter-spacing: .14em; font-size: clamp(14px, 1.05cqw, 17px); }
html[data-lang="zh"] .gh-actions .btn-line { font-size: clamp(13px, .95cqw, 15px); }
.gh-actions .gh-count { font-size: clamp(12px, .95cqw, 15px); letter-spacing: .02em; color: #4a3f2a; }

/* ---------- 3 · library: portfolios at the room's own scale, on a shelf set between the pilasters ---------- */
.f-library .lib-shelf.shelf-room { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.lib-shelf { left: 35%; width: 36.7%; bottom: 51.8%; --u: calc(100cqw * .00032); }
.lib-shelf .shelf { justify-content: center; gap: calc(3 * var(--u)); padding-inline: 0; }
.lib-shelf .book { --tw: calc(var(--t) * var(--u) * 1.5); }
.lib-shelf .spine-title { font-size: clamp(7px, calc(var(--t) * var(--u) * .62), 11px); letter-spacing: .12em; }
.lib-shelf .spine-vol { display: none; }
.lib-shelf .b-spine { padding-top: calc(30 * var(--u)); padding-bottom: calc(30 * var(--u)); justify-content: flex-start; }
.lib-shelf .b-spine::before, .lib-shelf .b-spine::after { height: 1px; }
.lib-shelf .b-spine::before { box-shadow: 0 2px 0 -0.3px rgba(232, 209, 154, .55); }
.lib-shelf .b-spine::after { box-shadow: 0 -2px 0 -0.3px rgba(232, 209, 154, .55); }
.lib-shelf .bookend { width: calc(10 * var(--u)); margin-left: calc(6 * var(--u)); }
.lib-shelf .shelf-board { margin-inline: 0; height: calc(22 * var(--u)); border-radius: 0 0 1px 1px;
  background: linear-gradient(180deg, #8a6444 0, #6a4a30 18%, #533823 60%, #3d2819);
  box-shadow: 0 calc(16 * var(--u)) calc(22 * var(--u)) calc(-8 * var(--u)) rgba(20, 10, 5, .75), inset 0 1px 0 rgba(232, 200, 150, .3); }
.lib-shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(22 * var(--u)); height: calc(40 * var(--u)); pointer-events: none; z-index: -1;
  background: linear-gradient(0deg, rgba(20, 10, 5, .35), transparent); }
@media (max-width: 719px), (max-aspect-ratio: 1/1) { .lib-shelf { --u: calc(100cqw * .00042); } }

/* ---------- −1 · bar: the shaker stands on the counter, at the size of the glasses beside it ---------- */
.f-bar .tableau { --ay: .42; }
.f-bar .tb-box { top: clamp(calc(100svh - var(--H)), calc(50svh - var(--H) * .485), 0px); }
.bar-over { top: 10.5%; }
.tb-box > .bar-stage { top: 22%; height: 36.6%; }
.tb-box > .bar-stage .bar-vessel { position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); width: auto; height: 15.5cqh; max-width: none; }
.tb-box > .bar-stage .bar-vessel svg { height: 100%; width: auto; display: block; }
.tb-box > .bar-stage .bar-vessel::after { content: ""; position: absolute; left: -18%; right: -18%; bottom: -.35cqh; height: 1.1cqh; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(15, 8, 3, .55), transparent 70%); }
.tb-box > .bar-stage .bar-order { position: absolute; left: 18%; top: 44%; padding: 0; }
.tb-box > .carte { top: 61.5%; height: auto; }
.tb-box > .carte .carte-head { margin-bottom: .6cqw; }
.tb-box > .carte .bs-chip { padding: .12cqw 2px; }
.tb-box > .carte .bar-steps { grid-template-columns: 2.15fr 1.8fr .5fr .9fr .8fr; }
.tb-box > .carte .bs:nth-child(1) .bs-chips { grid-template-columns: 1fr 1fr; }

/* ---------- 5 · greenhouse at night: the garland is lit, the lettering turns to cream ---------- */
.f-greenhouse .tableau.is-night .gh-over { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(20, 22, 40, .45), rgba(20, 22, 40, 0) 100%); color: #f2e6cc; text-shadow: 0 1px 6px rgba(10, 10, 25, .7); }
.f-greenhouse .tableau.is-night .gh-over .rh-kicker, .f-greenhouse .tableau.is-night .gh-over .rh-note { color: #d9ccb0; }
.f-greenhouse .tableau.is-night .gh-over .rh-orn { color: #d9c49a; opacity: .8; }
.f-greenhouse .tableau.is-night .gh-actions .gh-count { color: #e6d8ba; text-shadow: 0 1px 6px rgba(10, 10, 25, .8); }
.f-greenhouse .tableau.is-night .gh-actions .btn-gilt { color: #f6e9c9; text-shadow: 0 1px 6px rgba(10, 10, 25, .8); }
.f-greenhouse .tableau.is-night .gh-actions .btn-line { color: #d9c9a6; text-shadow: 0 1px 6px rgba(10, 10, 25, .8); }
.f-greenhouse .tableau.is-night .gh-actions .btn-gilt:hover, .f-greenhouse .tableau.is-night .gh-actions .btn-line:hover { color: #f3c98a; }
.f-greenhouse .tableau.is-night .gh-actions .gh-status { color: #cbbd9f; }
.f-greenhouse .tableau.is-night #ghBed .fl { filter: saturate(.7) brightness(.62) sepia(.25) drop-shadow(0 .15cqw .15cqw rgba(0, 0, 0, .5)); }
.f-greenhouse .tableau.is-night .tb-box::after { background: linear-gradient(180deg, transparent, rgba(5, 5, 15, .35)); }
html[data-tod="night"] body[data-floor="greenhouse"] { --top-ink: #f3e8d2; --top-bg: rgba(18, 18, 34, .35); }
html[data-tod="night"] body[data-floor="greenhouse"] .sound-btn, html[data-tod="night"] body[data-floor="greenhouse"] .lang { border-color: rgba(216, 204, 182, .35); }

/* ---------- −1 · bar: "start over / mix it" lettered on the wall, not boxed ---------- */
.tb-box > .bar-stage .btn-gilt, .tb-box > .bar-stage .btn-line { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 2px 1px 1px; line-height: 1.25; cursor: pointer;
  font-family: var(--f-serif); font-style: italic; letter-spacing: .01em; font-size: clamp(15px, 1.25cqw, 20px); color: #f3e6c8; text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color .3s ease, background-size .35s ease; }
.tb-box > .bar-stage .btn-line { color: #cdbb98; background-size: 0 1px; font-size: clamp(13px, 1.05cqw, 17px); }
.tb-box > .bar-stage .btn-gilt:hover:not(:disabled), .tb-box > .bar-stage .btn-line:hover { color: #f3c98a; background-color: transparent; background-size: 100% 1px; border: 0; }
.tb-box > .bar-stage .btn-gilt:disabled { opacity: .45; filter: none; background-size: 0 1px; }
.tb-box > .bar-stage button:focus-visible { outline: 1px solid #f3c98a; outline-offset: 4px; }
html[data-lang="zh"] .tb-box > .bar-stage .btn-gilt, html[data-lang="zh"] .tb-box > .bar-stage .btn-line { font-family: var(--f-zh); font-style: normal; letter-spacing: .14em; font-size: clamp(14px, 1.05cqw, 17px); }
.tb-box > .bar-stage .bar-actions { gap: 1.8em; align-items: baseline; }

/* ---------- home · the bedroom: her feet swing while she writes ---------- */
#sectionSvg .a-feet { transform-box: fill-box; transform-origin: 100% 100%; }
#sectionSvg .room.on .a-feet { animation: a-kick 1.9s ease-in-out infinite alternate; }
@keyframes a-kick { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { #sectionSvg .room.on .a-feet { animation: none; } }

/* ---------- home at night: rooms lit like the neighbours' windows ----------
   A lived-in room is washed warm amber, brightest near its lamp, the way a painter lights a window at night.
   A dark room is a deep blue-grey, with its lamp glowing softly and no visible shape of light. */
#sectionSvg #nightLight { display: none; pointer-events: none; }
html[data-tod="night"] #sectionSvg #nightLight { display: inline; }
html[data-tod="night"] #sectionSvg .rw { fill: #ecd6ae !important; }
html[data-tod="night"] #sectionSvg .room { filter: none !important; }
html[data-tod="night"] #sectionSvg .a-glow { opacity: 0 !important; }
html[data-tod="night"] #sectionSvg .poche { fill: #6e5a5c; }
#nightLight .nwarm { mix-blend-mode: multiply; opacity: 0; transition: opacity .7s ease; }
#nightLight .nkey { mix-blend-mode: soft-light; opacity: .5; transition: opacity .7s ease; }
#nightLight .nshade { opacity: .8; transition: opacity .7s ease; }
#nightLight .nsrc { opacity: .9; transition: opacity .7s ease; }
#nightLight .nroom.on .nwarm, #nightLight .nroom.lit .nwarm { opacity: .42; }
#nightLight .nroom.on .nkey, #nightLight .nroom.lit .nkey { opacity: 1; }
#nightLight .nroom.on .nshade, #nightLight .nroom.lit .nshade { opacity: 0; }
#nightLight .nroom.on .nsrc, #nightLight .nroom.lit .nsrc { opacity: .6; }
#nightLight .nroom[data-f="greenhouse"] .nshade { fill: #28314c; opacity: .55; }
#nightLight .nroom[data-f="greenhouse"].lit .nshade { opacity: 0; }

/* =====================================================================
   v2 plates (16:9, with 9:16 versions for phones)
   The box keeps the painting's own shape (--ar). On a phone the portrait
   painting is used (.is-m) and every overlay has its own coordinates.
   ===================================================================== */
.tableau { --ar: 1.7778; --ay: .5; --H: max(100svh, calc(100cqw / var(--ar))); }
.tb-scroll { height: 100svh; }
.tb-box { height: var(--H); width: max(100cqw, calc(var(--H) * var(--ar))); top: calc((100svh - var(--H)) * var(--ay)); }

/* ---------- V · greenhouse: the soil runs to the bottom edge, so anchor the bottom ---------- */
.f-greenhouse .tableau { --ay: 1; --H: max(100svh, calc(100cqw / var(--ar))); }
.f-greenhouse .tb-scroll { height: 100svh; }
.f-greenhouse .tb-box { height: var(--H); width: max(100cqw, calc(var(--H) * var(--ar))); top: calc(100svh - var(--H)); }
.f-greenhouse .tb-box::after { display: none; }
.f-greenhouse .gh-over { top: 14%; left: 50%; width: 36%; transform: translateX(-50%); }
.f-greenhouse .gh-actions { top: 44%; left: 50%; width: 36%; transform: translateX(-50%); }
.f-greenhouse .tableau.is-m .gh-over { top: 16%; width: 78%; padding: 12px 14px; }
.f-greenhouse .tableau.is-m .gh-actions { top: 50%; width: 78%; }

/* ---------- III · library: the portfolios stand on the painted shelf between the pilasters ---------- */
.f-library .tableau { --ay: .5; }
.lib-shelf { left: 34.2%; width: 35.2%; bottom: 58.6%; --u: calc(100cqw * .0003); }
.lib-shelf .shelf-board { opacity: 0; }                 /* the shelf is in the painting now */
.lib-shelf::after { display: none; }
.lib-over { left: 34.2%; width: 35.2%; top: 61%; height: 19%; }
.f-library .tableau.is-m .lib-shelf { left: 31%; width: 46%; bottom: 60.6%; --u: calc(100cqw * .00078); }
.f-library .tableau.is-m .lib-over { left: 29%; width: 50%; top: 58%; height: 20%; }

/* ---------- −I · bar: the counter line sits at 60% of the painting ---------- */
.tb-box > .bar-stage { top: 22%; height: 38%; }
.tb-box > .bar-stage .bar-vessel { left: 81.6%; height: 15cqh; }
.tb-box > .carte { top: 62.5%; }
.bar-over { top: 7%; left: 3%; width: 28%; }
.hs-letter { left: 3.5% !important; top: 57% !important; }
.hs-cellar { left: 72% !important; top: 57% !important; }
.f-bar .tableau.is-m .hs-letter { left: 12% !important; top: 58% !important; }
.f-bar .tableau.is-m .hs-cellar { left: 58% !important; top: 58% !important; }
.f-bar .tableau.is-m .hs-carte { left: 36% !important; top: 72% !important; }
.f-bar .tableau.is-m .bar-over { left: 50%; width: 80%; transform: translateX(-50%); top: 4%; }
@media (max-aspect-ratio: 4/5) {
  #cuCellar.has-barSalleM { background: linear-gradient(180deg, rgba(20, 12, 8, .45), rgba(20, 12, 8, .72)), var(--img-barSalleM) center 40% / cover no-repeat, #1c130d; }
}
#ghBed .fl { filter: drop-shadow(0 .12cqw .1cqw rgba(60, 40, 20, .3)); }
.f-greenhouse .tableau.is-night #ghBed .fl { filter: brightness(.66) saturate(.8) sepia(.18) drop-shadow(0 .12cqw .1cqw rgba(0, 0, 0, .45)); }

/* ---------- IV · la Chambre: the door → the bedroom → the diary on the bed ---------- */
.f-study .tableau { --ay: .5; }
.f-study .tb-scroll { background: #2a2019; }
.f-study .tb-box > .scene { display: none; }
.f-study .tableau .tb-alt { opacity: 0; transition: opacity 1.3s var(--e-out); }
.f-study .tableau.is-room .tb-alt[data-plate="chambre"].loaded { opacity: 1; }
.f-study .tableau.is-room .tb-img:not(.tb-alt) { opacity: 0; }
.f-study .tableau.is-journal .tb-alt[data-plate="journal"].loaded { opacity: 1; }
.f-study .tableau.is-journal .tb-alt[data-plate="chambre"] { opacity: 0; }

/* the door is in the painting: our door only holds the keypad, on the panel to its right */
.f-study .tb-box .door-scene { left: 35.3%; width: 25.8%; top: 10%; bottom: 16%; }
.f-study .tb-box .doorway::before, .f-study .tb-box .doorway::after, .f-study .tb-box .door-room, .f-study .tb-box .door-transom, .f-study .tb-box .sconce { display: none; }
.f-study .tb-box .door-leaf { background: none; box-shadow: none; border: 0; }
.f-study .tb-box .door-leaf .dp, .f-study .tb-box .dl-handle, .f-study .tb-box .door-leaf.l::after { display: none; }
.f-study .tb-box .door-leaf.r .keypad { left: calc(100% + 3.2cqw); top: 30%; width: clamp(150px, 9.6cqw, 180px); }
.f-study .tb-box .vault-note { top: calc(100% + 2.4cqw); color: #f3e7cc; text-shadow: 0 1px 6px rgba(30, 18, 8, .8); }
.f-study .study-over { left: 12%; width: 22%; top: 5%; color: #3a2c1c; }
.f-study .study-over .room-head .rh-note { display: none; }
.f-study .tableau.is-room .study-over { display: block; left: 28%; width: 25%; top: 6%; }
.f-study .tableau.is-journal .study-over { display: none; }
html[data-tod="night"] .f-study .tableau.is-room .study-over { color: #f3e7cc; text-shadow: 0 1px 8px rgba(20, 14, 10, .7); }
/* opening: the painted doors don't move, the whole plate eases forward then dissolves into the room */
.f-study .study-stage.is-opening ~ *, .f-study .tb-box:has(.study-stage.is-opening) .tb-img:not(.tb-alt) { transform: scale(1.06); transition: transform 1.4s var(--e-out), opacity 1.3s var(--e-out); }

/* the bedroom */
.f-study .room-scene { position: absolute; inset: 0; }
.hs-diary { position: absolute; left: 76.6%; top: 58.4%; }
.f-study .tableau.is-journal .hs-diary, .f-study .tableau.is-journal .room-cap { display: none; }
.room-cap { position: absolute; left: 28%; width: 25%; top: 29%; text-align: center; display: grid; gap: .5cqw; justify-items: center; }
.room-cap .desk-stats { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(12px, .95cqw, 15px); color: #3a2c1c; }
html[data-tod="night"] .room-cap .desk-stats { color: #eadcbc; }
.room-lock { background: none; border: 0; padding: 0 0 1px; cursor: pointer; font: inherit; font-family: var(--f-serif); font-style: italic; font-size: clamp(11px, .85cqw, 13px); color: inherit; opacity: .7;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s, opacity .3s; }
.room-lock:hover, .room-lock:focus-visible { opacity: 1; background-size: 100% 1px; }
html[data-tod="night"] .room-cap { color: #eadcbc; }

/* the diary: taken from the bed, set down straight, opened */
.journal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, rgba(40, 26, 14, .25), rgba(30, 18, 10, .55)); perspective: 2200px; }
.jbook { --pw: min(34vw, 54svh); position: relative; width: calc(var(--pw) * 2); height: calc(var(--pw) * 1.5); transform-style: preserve-3d; transition: transform .9s var(--e-out); }
.jb-page { position: absolute; top: 0; width: 50%; height: 100%; container-type: size; overflow: hidden; background: url("../assets/obj/diary-page.jpg") center / 100% 100%; box-shadow: 0 1.4cqw 2.4cqw -1cqw rgba(30, 18, 8, .55); }
.jb-l { left: 0; transform: scaleX(-1); }            /* the paper is mirrored for the left page … */
.jb-l > .jb-in { transform: scaleX(-1); }           /* … the writing is not */
.jb-r { left: 50%; }
.jb-l::after, .jb-r::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(60, 40, 20, .22), transparent 9%); }
.jb-in { position: absolute; inset: 0; }
.journal .page.nb, .journal .page.nb.aged { position: absolute; inset: 0; background: none !important; box-shadow: none; --lh: 3.44cqh; }
.journal .page.nb::before, .journal .page.nb::after { display: none !important; }
.journal .nb-in { top: 4.05cqh; bottom: 6cqh; left: 13cqw; right: 9cqw; font-size: 3.6cqw; }
.journal .page.nb.verso .nb-in { left: 9cqw; right: 13cqw; }
.journal .nb-folio { bottom: 2.2cqh; }
.jb-cover { position: absolute; left: 50%; top: -1.2%; width: 51.5%; height: 102.4%; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.5, .05, .3, 1); z-index: 5; }
.jb-cover i { position: absolute; inset: 0; backface-visibility: hidden; }
.jc-front { background: url("../assets/obj/diary-cover.jpg") center / 100% 100%; box-shadow: .6cqw 1.2cqw 2cqw -.6cqw rgba(30, 18, 8, .6); display: grid; place-items: center; }
.jc-title { font-family: var(--f-serif); font-style: italic; font-size: calc(var(--pw) * .12); color: rgba(240, 228, 200, .75); text-align: center; line-height: 1; text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); }
.jc-title small { display: block; margin-top: .5em; font-size: .32em; letter-spacing: .2em; font-style: normal; }
.jc-back { transform: rotateY(180deg); background: #9aa58a url("../assets/obj/diary-cover.jpg") center / 100% 100%; filter: brightness(.8) saturate(.8); }
.jbook.open .jb-cover { transform: rotateY(-180deg); opacity: 0; transition: transform 1s cubic-bezier(.5, .05, .3, 1), opacity .35s ease .85s; }
.jb-l { box-shadow: .5vw 1vw 1.8vw -.8vw rgba(30, 18, 8, .55), .35vw 0 0 0 #6f7a5e; }
.jb-r { box-shadow: .5vw 1vw 1.8vw -.8vw rgba(30, 18, 8, .55), .35vw 0 0 0 #6f7a5e; }
.jbook.closed { transform: translateX(-25%); }
.jbook.closed .jb-l { opacity: 0; }
.jb-l { transition: opacity .3s .35s; }
.jbook.open .jb-l { opacity: 1; }
.jb-ribbon { position: absolute; left: 60%; top: 99%; width: 1.3%; height: 12%; background: linear-gradient(90deg, #7e2519, #b8432f, #7e2519); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); z-index: 1; }
.jb-leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; opacity: 0; z-index: 4; pointer-events: none; }
.jb-leaf i { position: absolute; inset: 0; backface-visibility: hidden; background: url("../assets/obj/diary-page.jpg") center / 100% 100%; }
.jb-leaf .jl-back { transform: rotateY(180deg) scaleX(-1); }
.jbook.flip-f .jb-leaf { animation: leaf-f .7s cubic-bezier(.4, .1, .3, 1) both; }
.jbook.flip-b .jb-leaf { animation: leaf-b .7s cubic-bezier(.4, .1, .3, 1) both; }
@keyframes leaf-f { 0% { opacity: 1; transform: rotateY(0); } 99% { opacity: 1; transform: rotateY(-180deg); } 100% { opacity: 0; transform: rotateY(-180deg); } }
@keyframes leaf-b { 0% { opacity: 1; transform: rotateY(-180deg); } 99% { opacity: 1; transform: rotateY(0); } 100% { opacity: 0; transform: rotateY(0); } }
.journal .jp-turn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; background: none; cursor: pointer; font-family: var(--f-serif); font-size: 44px; line-height: 1; color: #f3e7cc; opacity: .8; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.journal .jp-turn:hover:not(:disabled) { opacity: 1; color: #fff3d6; }
.journal .jp-turn:disabled { opacity: .15; cursor: default; }
.journal .jp-turn.prev { left: calc(50% - var(--pw, 34cqw) - 72px); left: 6%; } .journal .jp-turn.next { left: auto; right: 6%; }
.journal .jp-close { position: absolute; left: 50%; top: auto; bottom: 4.5%; transform: translateX(-50%); background: none; border: 0; padding: 2px 1px; cursor: pointer; font-family: var(--f-serif); font-style: italic; font-size: clamp(15px, 1.2vw, 19px); color: #f3e7cc; text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }
html[data-lang="zh"] .journal .jp-close { font-family: var(--f-zh); font-style: normal; letter-spacing: .14em; }
.journal .jp-close:hover { color: #fff3d6; }
.f-study .tableau.is-journal .tb-alt[data-plate="journal"].loaded { filter: blur(2px) brightness(.8); }
@media (prefers-reduced-motion: reduce) { .jb-cover, .jbook { transition: none; } .jbook.flip-f .jb-leaf, .jbook.flip-b .jb-leaf { animation: none; } }

/* phones: portrait plates */
.f-study .tableau.is-m .door-scene { left: 29%; width: 43%; top: 23%; bottom: 31%; }
.f-study .tableau.is-m .door-leaf.r .keypad { left: 50%; top: 40%; width: 150px; transform: translateX(-50%); }
.f-study .tableau.is-m .door-leaf.r { position: absolute; left: 25%; width: 50%; }
.f-study .tableau.is-m .vault-note { display: none; }
.f-study .tableau.is-m .study-over { left: 50%; width: 84%; top: 5%; transform: translateX(-50%); }
.f-study .tableau.is-m.is-room .study-over { left: 50%; width: 80%; top: 4%; }
.f-study .tableau.is-m .room-cap { left: 10%; width: 80%; top: 21%; }
.f-study .tableau.is-m .hs-diary { left: 55%; top: 62%; }
.hs-diary { width: auto; height: auto; }
.hs-diary .hs-label { position: relative; }
.hs-diary .hs-label { color: #2e2216; border-color: rgba(46, 34, 22, .45); text-shadow: 0 0 6px rgba(255, 248, 232, 1), 0 0 14px rgba(255, 244, 222, .9); }
.hs-diary:hover .hs-label, .hs-diary:focus-visible .hs-label { color: #8e2f28; border-color: rgba(142, 47, 40, .7); }
.hs-diary .hs-label::before { background: #b8432f; box-shadow: 0 0 0 3px rgba(184, 67, 47, .18), 0 0 8px rgba(184, 67, 47, .6); }
.tableau.is-m .tb-hint { display: none; }
.f-study .tableau.is-m .study-over { top: 4%; }

/* ---------- the four lower floors on their plates: one screen each (the garage road still scrolls) ---------- */
.floor.f-lab, .floor.f-theatre, .floor.f-darkroom { height: 100svh; min-height: 0; overflow: hidden; padding: 0; }
.f-lab > .landing, .f-theatre > .landing, .f-darkroom > .landing { display: none; }
.floor.f-garage { padding-top: 0; }
.f-lab .tableau.has-img .tb-box > .scene, .f-theatre .tableau.has-img .tb-box > .scene, .f-darkroom .tableau.has-img .tb-box > .scene, .f-garage .tableau.has-img .tb-box > .scene { display: none; }
.f-lab .tb-scroll { background: #efe6d6; } .f-theatre .tb-scroll { background: #2a1512; } .f-darkroom .tb-scroll { background: #1c0f0c; } .f-garage .tb-scroll { background: #e9dfcc; }

/* II · the atelier: the work hangs from the brass rail */
.lab-over { left: 30%; width: 44%; top: 3%; color: #2e2618; }
.lab-over .room-head .rh-note { display: none; }
.lab-rail { position: absolute; left: 22%; width: 60%; top: 22.3%; height: 52%; }
.f-lab .lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3.4cqw; margin: 0; padding: 0; height: 100%; align-items: start; }
.f-lab .exp { position: relative; display: block; margin: 0; margin-top: 3.4cqw; padding: 1.5cqw 1.5cqw 1.3cqw; color: #2e2618; text-decoration: none; background: url("../assets/obj/card-paper.jpg") center / cover, #f3ead6;
  border: 0; border-radius: 0; box-shadow: 0 1.1cqw 1.6cqw -1cqw rgba(60, 40, 20, .55), 0 .1cqw .2cqw rgba(60, 40, 20, .25); transform: rotate(var(--tilt, 0deg)); transform-origin: 50% -3.4cqw; transition: transform .5s var(--e-out); }
.f-lab .exp:nth-child(1) { --tilt: -1.2deg; } .f-lab .exp:nth-child(2) { --tilt: .8deg; } .f-lab .exp:nth-child(3) { --tilt: -.5deg; }
.f-lab a.exp:hover, .f-lab a.exp:focus-visible { transform: rotate(0deg) translateY(-.3cqw); }
.f-lab .exp::before { content: ""; position: absolute; left: 50%; top: -3.4cqw; height: 3.4cqw; border-left: 1px solid rgba(120, 90, 50, .7); }
.f-lab .exp::after { content: ""; position: absolute; left: calc(50% - .5cqw); top: -.7cqw; width: 1cqw; height: 1.4cqw; background: linear-gradient(90deg, #8a6a36, #e8d19a 50%, #8a6a36); border-radius: 1px; }
.f-lab .exp-art { display: none; }
.f-lab .exp-body { padding: 0; }
.f-lab .exp-meta { display: flex; justify-content: space-between; font-family: var(--f-serif); font-style: italic; font-size: clamp(10px, .78cqw, 13px); letter-spacing: .04em; color: #7a6040; margin: 0 0 .6cqw; }
.f-lab .exp-status { font-style: normal; letter-spacing: .14em; color: #8e2f28; border: 0; padding: 0; }
.f-lab .exp-status.building { color: #8a7a5a; }
.f-lab .exp-name { margin: 0 0 .5cqw; font-family: var(--f-serif); font-weight: 500; font-size: clamp(16px, 1.45cqw, 24px); line-height: 1.2; color: #2e2618; }
html[data-lang="zh"] .f-lab .exp-name { font-family: var(--f-zh); font-size: clamp(15px, 1.25cqw, 21px); }
.f-lab .exp-desc { margin: 0; font-size: clamp(12px, .9cqw, 15px); line-height: 1.6; color: #4a3e2c; }
.f-lab .exp-tags { display: none; }
.f-lab .exp-go { display: flex; justify-content: space-between; margin-top: .9cqw; padding-top: .6cqw; border-top: 1px solid rgba(120, 90, 50, .3); font-family: var(--f-serif); font-style: italic; font-size: clamp(11px, .82cqw, 14px); color: #8e2f28; }
.f-lab .tableau.is-m .lab-over { left: 8%; width: 84%; top: 2%; }
.f-lab .tableau.is-m .lab-rail { left: 14%; width: 76%; top: 16.4%; height: 60%; }
.f-lab .tableau.is-m .lab-grid { grid-template-columns: 1fr; gap: 0; }
.f-lab .tableau.is-m .exp { margin-top: 18px; padding: 10px 12px; } .f-lab .tableau.is-m .exp::before { top: -18px; height: 18px; } .f-lab .tableau.is-m .exp-desc { display: none; }

/* I · the theatre: films play in the painted stage opening */
.stage-box { position: absolute; left: 25%; width: 51.5%; top: 23%; height: 52.5%; overflow: hidden; background: #0b0706; }
.f-theatre .stage { position: absolute; inset: 0; }
.f-theatre .stage iframe, .f-theatre .stage video { inset: 0; width: 100%; height: 100%; }
.th-over { left: 30%; width: 41%; top: 31%; color: #e9d9b8; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); transition: opacity .6s; }
.th-over .room-head .rh-note { color: #cdbb98; }
#theatre.is-playing .th-over { opacity: 0; pointer-events: none; }
.f-theatre .stage-idle { position: absolute; left: 0; right: 0; bottom: 12%; }
.f-theatre .stage-idle span { color: #cdbb98; }
.hs-playbill { left: 45.5%; top: 83%; width: auto; height: auto; }
.hs-playbill .hs-label { position: relative; }
.cu-playbill .cu-inner { width: min(460px, 100%); }
.cu-playbill .playbill { margin: 0; padding: 20% 12% 16%; aspect-ratio: 2 / 3; box-sizing: border-box; background: url("../assets/obj/playbill.jpg") center / cover; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8); border: 0; color: #2e2216; }
.f-theatre .tableau.is-m .stage-box { left: 9%; width: 85%; top: 33%; height: 29%; }
.f-theatre .tableau.is-m .th-over { left: 12%; width: 79%; top: 35%; }
.f-theatre .tableau.is-m .th-over .room-head .rh-note { display: none; }
.f-theatre .tableau.is-m .hs-playbill { left: 36%; top: 70%; }

/* −II · the darkroom: the map is projected on the plaster, the prints hang on the painted line */
.dr-over { left: 30%; width: 40%; top: 2%; color: #f0d8c4; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.dr-over .room-head .rh-note { display: none; }
.f-darkroom .map-wrap { position: absolute; left: 29%; width: 42%; top: 33.5%; height: 30%; border: 0; border-radius: 0; background: none; box-shadow: none; display: grid; place-items: center; }
.f-darkroom .world { width: 100%; height: 100%; mix-blend-mode: screen; opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 120, 90, .35)); }
.f-darkroom .world .c { fill: rgba(255, 200, 170, .16); stroke: rgba(255, 210, 180, .35); }
.f-darkroom .line-wrap { position: absolute; left: 14%; right: 12%; top: 13.5%; height: 36%; padding: 0; margin: 0; }
.f-darkroom .prints { padding-left: 0; min-height: 100%; }
.f-darkroom .prints::before { display: none; }
.f-darkroom .print img, .f-darkroom .print canvas { height: 7.4cqw; max-height: 16vh; }
.f-darkroom .print .paper { padding: .6cqw .6cqw 1.9cqw; }
.f-darkroom .print .p-cap { font-size: clamp(8px, .6cqw, 10px); bottom: .5cqw; }
.dr-foot { position: absolute; left: 20%; width: 60%; top: 72%; display: grid; justify-items: center; gap: .8cqw; }
.f-darkroom .map-chips { margin: 0; justify-content: center; }
.f-darkroom .drag-hint { margin: 0; font-family: var(--f-serif); font-style: italic; color: #d9b8a4; font-size: clamp(11px, .85cqw, 13px); }
.f-darkroom .tableau.is-m .dr-over { left: 6%; width: 88%; }
.f-darkroom .tableau.is-m .map-wrap { left: 10%; width: 80%; top: 36%; height: 23%; }
.f-darkroom .tableau.is-m .line-wrap { left: 4%; right: 4%; top: 16%; height: 20%; }
.f-darkroom .tableau.is-m .print img, .f-darkroom .tableau.is-m .print canvas { height: 70px; }
.f-darkroom .tableau.is-m .dr-foot { left: 5%; width: 90%; top: 64%; }

/* −III · the garage: certificates in the painted frames */
.ga-over { left: 30%; width: 40%; top: 3%; color: #2e2618; text-shadow: 0 0 10px rgba(250, 240, 220, .9); }
.ga-over .room-head .rh-note { display: none; }
.f-garage .cert-wall { position: absolute; left: 39%; width: 23%; top: 20.3%; height: 27.3%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1.9% 5%; margin: 0; padding: 0; }
.f-garage .cert { margin: 0; padding: 14% 10%; box-sizing: border-box; display: grid; align-content: center; justify-items: center; text-align: center; gap: .15cqw; background: none; box-shadow: none; transform: none; container-type: inline-size; color: #3a2c1c; cursor: default; outline: none; }
.f-garage .cert-n { font-family: var(--f-serif); font-style: italic; font-size: 11cqw; color: #8a6a36; }
.f-garage .cert-title { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: 10.5cqw; line-height: 1.2; }
html[data-lang="zh"] .f-garage .cert-title { font-family: var(--f-zh); font-size: 10cqw; }
.f-garage .cert-by { margin: 0; font-size: 7cqw; line-height: 1.25; opacity: .75; display: none; }
.f-garage .cert-year { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 8cqw; opacity: .8; }
.f-garage .cert.is-pending .cert-year { color: #8e2f28; }
.f-garage .cert:hover .cert-by, .f-garage .cert:focus .cert-by { display: block; }
.f-garage .cert:hover .cert-n, .f-garage .cert:focus .cert-n { display: none; }
.ga-go { position: absolute; left: 50%; top: 88%; transform: translateX(-50%); margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(14px, 1.1cqw, 18px); color: #2e2618; }
.ga-go::after { content: "↓"; display: inline-block; margin-left: 8px; animation: nudge 1.4s ease-in-out infinite; }
html[data-lang="zh"] .ga-go { font-family: var(--f-zh); font-style: normal; letter-spacing: .12em; }
.f-garage .tableau.is-m .ga-over { left: 6%; width: 88%; }
.f-garage .tableau.is-m .cert-wall { left: 38%; width: 24%; top: 22%; height: 23.5%; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4% 9%; }
.f-garage .tableau.is-m .cert-title, .f-garage .tableau.is-m .cert-year, .f-garage .tableau.is-m .cert-by { display: none; }
.f-garage .tableau.is-m .cert-n { display: block; font-size: 30cqw; }

/* the road: four painted stretches that dissolve into each other; the painted car on the road */
.drive.has-plates { margin-top: 0; }
.drive-plates { position: absolute; inset: 0; overflow: hidden; }
.drive-plates img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; opacity: 0; will-change: opacity, transform; }
.drive.has-plates .drive-sky, .drive.has-plates .drive-far, .drive.has-plates .drive-road, .drive.has-plates .car { display: none; }
.car-img { display: none; }
.drive.has-plates .car-img { display: block; position: absolute; left: max(4vw, 16px); bottom: 10vh; width: clamp(170px, 20vw, 300px); z-index: 3; filter: drop-shadow(0 .8vh .6vh rgba(60, 40, 20, .35)); }
.drive.has-plates .car-img img { display: block; width: 100%; height: auto; }
.car-img.moving img { animation: bob .22s ease-in-out infinite alternate; }
.drive.has-plates .drive-track { bottom: 26vh; }
.drive.has-plates .mile-post { height: 12vh; }
body[data-floor="lab"] #dapple { display: none; }

/* ---------- painted objects ---------- */
.rh-orn-img { display: block; width: clamp(110px, 9cqw, 150px); height: 18px; margin: 4px auto 2px; opacity: .8;
  background: currentColor; -webkit-mask: url("../assets/obj/orn-divider.webp") center / contain no-repeat; mask: url("../assets/obj/orn-divider.webp") center / contain no-repeat; }
.cu-paper .letter { background: url("../assets/obj/letter-paper.jpg") center / cover, #f3ead6 !important; border: 0; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8); }
.letter-stamp { background: url("../assets/obj/orn-swallow.webp") center / 80% no-repeat !important; border: 0 !important; box-shadow: none !important; color: transparent !important; opacity: .7; width: 78px !important; height: 66px !important; }
.lc-card { background: url("../assets/obj/card-paper.jpg") center / cover, #f5eddb !important; }

/* ---------- home at night: back to the earlier, gentler light (the v25 darks and yellow wash are gone) ---------- */
#nightLight .nshade { opacity: .84; }
#nightLight .nroom.on .nwarm, #nightLight .nroom.lit .nwarm { opacity: .42; }
html[data-tod="night"] #sectionSvg .room-dabs { opacity: .15; }
#ghBed .fl-hit.movable { cursor: grab; }
#ghBed g.dragging { cursor: grabbing; }
#ghBed g.dragging .fl { animation: none; filter: drop-shadow(0 .6cqw .5cqw rgba(60, 40, 20, .35)); }
/* phones: the diary shows one page at a time? no — keep the spread, sized to the width */
.f-study .tableau.is-m .jbook { --pw: min(84vw, 60svh); }
.f-study .tableau.is-m .jbook.open.side-l { transform: translateX(25%); }
.f-study .tableau.is-m .jbook.open.side-r { transform: translateX(-25%); }
.f-study .tableau.is-m .journal .nb-in { font-size: 3.8cqw; }
.f-study .tableau.is-m .journal .jp-turn { top: auto; bottom: 14%; transform: none; }
.f-study .tableau.is-m .journal .jp-turn.prev { left: 18%; } .f-study .tableau.is-m .journal .jp-turn.next { right: 18%; }
.f-study .tableau.is-m .journal .jp-close { bottom: 15%; }

/* ---------- every room title sits on the screen's centre line ---------- */
html[data-lang] .room-head .rh-name { margin-right: 0; padding-left: .8em; }
html[data-lang="en"] .room-head .rh-name { padding-left: .32em; }
.tb-over.lab-over, .tb-over.th-over, .tb-over.dr-over, .tb-over.ga-over, .tb-over.gh-over, .f-library .tb-over.lib-over, .f-study .tb-over.study-over, .f-bar .tb-over.bar-over { left: 50% !important; transform: translateX(-50%); }
.f-study .study-over, .f-study .tableau.is-room .study-over { width: 30%; }
.f-study .tableau.is-room .study-over { top: 4%; }
.f-study .study-over { top: 3%; }
.f-study .tableau.is-room .room-cap { left: 50%; transform: translateX(-50%); width: 30%; top: 27%; }
.f-bar .tb-over.bar-over { width: 34%; top: 5%; }

/* ---------- III · le Cabinet: papers, the lifted book, the reader ---------- */
.cover-gen.paper { background: var(--grain, none), var(--c); font-family: var(--f-serif); color: var(--ink2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cover-gen.paper .pp-head { position: absolute; left: 10cqw; right: 10cqw; top: 8cqh; font-size: 4cqw; letter-spacing: .24em; border-bottom: 1px solid currentColor; padding-bottom: 1.4cqh; opacity: .8; }
.cover-gen.paper .pp-title { position: absolute; left: 10cqw; right: 10cqw; top: 22cqh; font-size: 8.4cqw; line-height: 1.18; font-weight: 500; }
.cover-gen.paper .pp-rule { position: absolute; left: 10cqw; width: 18cqw; top: 66cqh; border-top: 2px solid #8e2f28; }
.cover-gen.paper .pp-by { position: absolute; left: 10cqw; right: 10cqw; top: 70cqh; font-style: italic; font-size: 5cqw; }
.cover-gen.paper .pp-sub { position: absolute; left: 10cqw; right: 10cqw; bottom: 8cqh; font-size: 3.8cqw; opacity: .75; }
.lib-shelf .book .b-spine .spine-title { max-height: 88%; overflow: hidden; }
.page.title-page.paper-tp { display: grid; place-content: start stretch; grid-template-columns: 1fr; gap: 2.4%; padding: 0; box-sizing: border-box; text-align: left; }
.page.title-page.paper-tp > * { margin-inline: 12cqw; }
.page.title-page.paper-tp > :first-child { margin-top: 12cqh; }
.paper-tp .tp-vol, .paper-tp .tp-by { letter-spacing: .12em; }
.paper-tp .tp-title { font-size: 6cqw; line-height: 1.3; }
.paper-tp .tp-abs { display: block; font-size: 3.4cqw; line-height: 1.75; color: #3a3228; text-align: justify; }
.paper-tp .tp-abs b { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 4cqw; margin-bottom: 1cqh; color: #8e2f28; }

.lib-shelf .book { transition: transform .45s var(--e-out); }
.lib-shelf .book.is-lifted { transform: translateY(-38%); }
.lib-shelf .book:hover .book-3d, .lib-shelf .book:focus-visible .book-3d { transform: none; }
.book-lift { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; align-content: center; gap: 18px; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(ellipse 55% 60% at 50% 48%, rgba(20, 12, 6, .55), rgba(20, 12, 6, .15) 70%, transparent); }
.book-lift.on { opacity: 1; }
.book-lift.touch { pointer-events: auto; }
.bl-cover { position: relative; height: min(52svh, 520px); aspect-ratio: var(--ar, .78); container-type: size; overflow: hidden; border-radius: 1px 3px 3px 1px;
  box-shadow: -3px 0 0 rgba(0, 0, 0, .25) inset, 0 30px 50px -18px rgba(0, 0, 0, .75), 0 10px 18px -8px rgba(0, 0, 0, .5); transform: translate(var(--fx), var(--fy)) scale(.18) rotateY(70deg); opacity: 0; }
.bl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-lift.on .bl-cover { animation: take-out .6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes take-out { 0% { transform: translate(var(--fx), var(--fy)) scale(.18) rotateY(70deg); opacity: .4; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.bl-cap { display: grid; justify-items: center; gap: 4px; text-align: center; color: #f3e8d2; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .3s .35s; max-width: 80vw; }
.book-lift.on .bl-cap { opacity: 1; }
.bl-cap .cap-vol { font-family: var(--f-serif); font-style: italic; font-size: 13px; letter-spacing: .08em; color: #e0c996; }
.bl-cap .cap-title { font-family: var(--f-serif); font-weight: 500; font-size: clamp(18px, 1.8vw, 28px); }
.bl-cap .cap-sub { font-size: 13px; color: #e2d2b0; }
.bl-open { display: none; background: none; border: 0; padding: 2px 1px; color: #f3e8d2; font-family: var(--f-serif); font-style: italic; font-size: 17px; cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }
.book-lift.touch .bl-open { display: inline-block; }
html[data-lang="zh"] .bl-open { font-family: var(--f-zh); font-style: normal; letter-spacing: .14em; }
.lib-over.capping { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .book-lift.on .bl-cover { animation: none; transform: none; opacity: 1; } }

.viewer-acts { display: flex; gap: 10px; align-items: center; }
.viewer-full { border: 1px solid rgba(216, 204, 182, .4); background: transparent; color: inherit; cursor: pointer; font-family: var(--f-serif); font-size: 13px; padding: 7px 12px; }
html[data-lang="zh"] .viewer-full { font-family: var(--f-zh); letter-spacing: .1em; }
.viewer-full:hover { border-color: var(--led); color: var(--led); }
.viewer.is-max, .viewer:fullscreen { padding: 10px 14px; }
.viewer.is-max .viewer-hint, .viewer:fullscreen .viewer-hint { display: none; }
.viewer.is-max .viewer-top .eyebrow, .viewer:fullscreen .viewer-top .eyebrow { display: none; }
.viewer:fullscreen { background: #15110e; }

/* ---------- II · La Discothèque: coloured records in paper sleeves ---------- */
.f-lab .lab-rail { left: 18%; width: 64%; top: 25%; height: 50%; }
.f-lab .lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 4cqw; align-items: start; height: auto; }
.rec { position: relative; display: grid; grid-template-rows: auto auto; justify-items: start; color: #2e2618; text-decoration: none; outline: none; }
.rec-sleeve, .rec-disc { grid-area: 1 / 1; width: 13cqw; aspect-ratio: 1; }
.rec-sleeve { position: relative; z-index: 2; box-sizing: border-box; padding: 1.1cqw; display: grid; align-content: space-between; background: var(--grain, none), var(--sl); box-shadow: 0 1.2cqw 1.6cqw -1cqw rgba(60, 40, 20, .6), inset 0 0 0 1px rgba(80, 60, 40, .2); }
.rec-sleeve::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 40%); pointer-events: none; }
.rs-hole { position: absolute; right: 1cqw; top: 50%; width: 1.4cqw; height: 1.4cqw; margin-top: -.7cqw; border-radius: 50%; background: var(--vc); opacity: .85; }
.rs-title { position: relative; font-family: var(--f-serif); font-weight: 500; font-size: clamp(13px, 1.15cqw, 19px); line-height: 1.25; color: #2e2618; max-width: 78%; }
html[data-lang="zh"] .rs-title { font-family: var(--f-zh); font-size: clamp(12px, 1cqw, 17px); }
.rs-code { position: relative; font-family: var(--f-serif); font-style: italic; font-size: clamp(10px, .75cqw, 12px); color: #7a6040; }
.rec-disc { position: relative; z-index: 1; border-radius: 50%; transform: translateX(22%); transition: transform .7s var(--e-out);
  background: radial-gradient(circle, transparent 0 16%, rgba(255, 255, 255, .25) 16.3%, transparent 17%),
    repeating-radial-gradient(circle, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px),
    conic-gradient(from 30deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .35)),
    var(--vc);
  box-shadow: 0 .8cqw 1.2cqw -.6cqw rgba(40, 20, 10, .6), inset 0 0 0 .3cqw rgba(0, 0, 0, .12); }
.rec-label { position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #f3ead6; display: grid; place-content: center; text-align: center; font-style: normal; box-shadow: inset 0 0 0 .15cqw var(--vc); }
.rec-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10%; aspect-ratio: 1; margin: -5% 0 0 -5%; border-radius: 50%; background: #2a2018; }
.rec-label b { font-family: var(--f-serif); font-size: .6cqw; letter-spacing: .08em; color: #2e2618; line-height: 1; margin-bottom: .9cqw; }
.rec-label small { font-family: var(--f-serif); font-style: italic; font-size: .55cqw; color: #7a6040; margin-top: .9cqw; }
.rec:hover .rec-disc, .rec:focus-visible .rec-disc { transform: translateX(62%); }
.rec:hover .rec-disc .rec-label, .rec:focus-visible .rec-disc .rec-label { animation: rec-spin 1.8s linear infinite; }
@keyframes rec-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.rec-cap { display: grid; gap: .35cqw; margin-top: 1.2cqw; max-width: 22cqw; }
.rc-name { font-family: var(--f-serif); font-weight: 500; font-size: clamp(14px, 1.15cqw, 19px); }
html[data-lang="zh"] .rc-name { font-family: var(--f-zh); font-size: clamp(13px, 1cqw, 17px); }
.rc-desc { font-size: clamp(11px, .82cqw, 14px); line-height: 1.55; color: #4a3e2c; }
.rc-go { font-family: var(--f-serif); font-style: italic; font-size: clamp(11px, .8cqw, 13px); color: #8e2f28; }
.rec.is-pressing .rc-go { color: #8a7a5a; }
.rec.is-pressing .rec-disc { opacity: .55; filter: saturate(.4); }
.rec:focus-visible .rec-sleeve { outline: 1px solid #8e2f28; outline-offset: 4px; }
.f-lab .tableau.is-m .lab-rail { left: 10%; width: 80%; top: 17%; height: 64%; }
.f-lab .tableau.is-m .lab-grid { grid-template-columns: 1fr; gap: 5.5cqh 0; }
.f-lab .tableau.is-m .rec { grid-template-columns: auto 1fr; gap: 0 14px; align-items: center; }
.f-lab .tableau.is-m .rec-sleeve, .f-lab .tableau.is-m .rec-disc { width: 26cqw; }
.f-lab .tableau.is-m .rec-cap { grid-area: 1 / 2; margin: 0 0 0 10cqw; max-width: none; }
.f-lab .tableau.is-m .rc-desc { display: none; }
.f-lab .tableau.is-m .rs-title { font-size: 12px; }
.f-lab .tableau.is-m .rec-label b, .f-lab .tableau.is-m .rec-label small { font-size: 1.3cqw; }
@media (prefers-reduced-motion: reduce) { .rec-disc { transition: none; } .rec:hover .rec-label { animation: none; } }

/* ---------- −I · the letter: finer paper, a swallow stamp, stickers to press on ---------- */
.cu-paper .cu-inner { width: min(620px, 100%); }
.cu-paper .letter { padding: 46px clamp(22px, 5vw, 54px) 28px; gap: 12px; }
.cu-paper .letter::before { display: none; }
.letter-title { font-size: 30px; font-weight: 400; }
html[data-lang="zh"] .letter-title { font-weight: 400; font-size: 22px; letter-spacing: .1em; }
.letter-sub { font-family: var(--f-serif); font-style: italic; color: #6a5a46; font-size: 14px; margin: 0 0 6px; }
.cu-paper .letter .pk-input input, .cu-paper .letter .pk-input textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(90, 70, 40, .35); border-radius: 0; font-family: var(--f-serif); font-size: 16px; }
.cu-paper .letter .pk-input textarea { background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(90, 70, 40, .22) 27px 28px); line-height: 28px; border: 0; min-height: 140px; }
.cu-paper .letter .pk-input span { font-family: var(--f-serif); font-style: italic; color: #7a6040; font-size: 13px; }
.lt-stickers { position: absolute !important; inset: 0; z-index: 4 !important; pointer-events: none; }
.lt-on { position: absolute; width: 64px; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); pointer-events: auto; cursor: grab; touch-action: none; filter: drop-shadow(0 2px 2px rgba(60, 40, 20, .35)); }
.lt-on img { display: block; width: 100%; height: auto; pointer-events: none; }
.lt-on.dragging { cursor: grabbing; filter: drop-shadow(0 8px 8px rgba(60, 40, 20, .35)); }
.lt-x { position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #2e2216; color: #f3e7cc; font-size: 13px; line-height: 20px; padding: 0; cursor: pointer; opacity: 0; transition: opacity .2s; }
.lt-on:hover .lt-x, .lt-on:focus-within .lt-x { opacity: 1; }
.lt-tray { display: grid; gap: 6px; }
.lt-tray-l { font-family: var(--f-serif); font-style: italic; font-size: 12px; color: #7a6040; }
html[data-lang="zh"] .lt-tray-l { font-family: var(--f-zh); font-style: normal; letter-spacing: .08em; }
.lt-tray-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-stk { width: 44px; height: 44px; padding: 4px; border: 1px solid rgba(90, 70, 40, .25); background: rgba(255, 252, 244, .6); cursor: pointer; transition: transform .2s, border-color .2s; }
.lt-stk img { width: 100%; height: 100%; object-fit: contain; }
.lt-stk:hover { transform: translateY(-2px) rotate(-3deg); border-color: #8e2f28; }
.lt-read-st { display: flex; gap: 4px; margin-bottom: 4px; } .lt-read-st img { width: 26px; height: 26px; object-fit: contain; }
.cu-paper .letter .btn-gilt { background: none; border: 0; color: #2e2216; font-family: var(--f-serif); font-style: italic; font-size: 17px; padding: 2px 1px; box-shadow: none;
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }
html[data-lang="zh"] .cu-paper .letter .btn-gilt { font-family: var(--f-zh); font-style: normal; letter-spacing: .14em; }
.cu-paper .letter .btn-gilt:hover { color: #8e2f28; }

/* the cabinet: no test drinks; Isabel can take one down */
.cab-slot { position: relative; display: inline-grid; }
.cab-del { position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(243, 231, 204, .5); background: rgba(30, 18, 10, .85); color: #f3e7cc; font-size: 14px; line-height: 20px; padding: 0; cursor: pointer; opacity: .7; }
.cab-del:hover { opacity: 1; background: #8e2f28; }

/* −II · the darkroom: prints in narrow black frames */
.f-darkroom .print .paper { padding: 3px !important; background: #111 !important; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .85) !important; }
.f-darkroom .print .p-cap { position: static; margin-top: 4px; color: #d9b8a4; font-family: var(--f-serif); font-style: italic; font-size: clamp(9px, .65cqw, 11px); letter-spacing: .02em; justify-content: space-between; display: flex; }
.f-darkroom .print img, .f-darkroom .print canvas { outline: 1px solid rgba(255, 255, 255, .06); }

/* ---------- −III · the garage wall: one gilt frame per certificate, the wall makes room ---------- */
.f-garage .cert-wall { left: 50%; transform: translateX(-50%); width: 40%; top: 18.5%; height: auto; grid-template-columns: repeat(var(--cols, 4), 1fr); grid-template-rows: none; gap: 1.6cqw 1.8cqw; }
.f-garage .cert { padding: 0; display: grid; gap: .4cqw; justify-items: stretch; align-content: start; container-type: normal; }
.f-garage .cert-mat { display: block; aspect-ratio: 3 / 4; padding: 7%; box-sizing: border-box; background: linear-gradient(135deg, #e9d196, #b48a45 45%, #7a5a2a); box-shadow: 0 .6cqw 1cqw -.4cqw rgba(60, 40, 20, .55), inset 0 0 0 1px rgba(80, 50, 20, .6); }
.f-garage .cert-in { height: 100%; box-sizing: border-box; padding: 12% 8%; display: grid; align-content: center; justify-items: center; gap: .4cqw; text-align: center; background: var(--grain, none), #f4ecda; box-shadow: inset 0 0 0 .35cqw #efe4cc, inset 0 0 0 calc(.35cqw + 1px) rgba(120, 90, 50, .35), inset 0 .3cqw .5cqw rgba(60, 40, 20, .25); container-type: inline-size; }
.f-garage.has-cert-frame .cert-mat { background: url("../assets/obj/cert-frame.webp") center / 100% 100% no-repeat; box-shadow: none; padding: 16% 15%; }
.f-garage.has-cert-frame .cert-in { background: none; box-shadow: none; }
.f-garage .cert-title { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: 10.5cqw; line-height: 1.2; color: #2e2216; display: block; }
html[data-lang="zh"] .f-garage .cert-title { font-family: var(--f-zh); font-size: 10cqw; }
.f-garage .cert-year { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 8.5cqw; color: #7a6040; display: block; }
.f-garage .cert.is-pending .cert-year { color: #8e2f28; }
.f-garage .cert-by { display: block !important; margin: 0; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: clamp(9px, .62cqw, 11px); color: #5a4a34; opacity: 0; transition: opacity .3s; }
.f-garage .cert:hover .cert-by, .f-garage .cert:focus .cert-by { opacity: 1; }
.f-garage .cert-n { display: none !important; }
.f-garage .tableau.is-m .cert-wall { width: 80%; top: 17%; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.f-garage .tableau.is-m .cert-title, .f-garage .tableau.is-m .cert-year { display: block !important; }
.f-garage .tableau.is-m .cert-by { display: none !important; }

/* the road: light captions, no boards */
.drive.has-plates .mile-sign { background: radial-gradient(ellipse 60% 62% at 50% 50%, rgba(250, 244, 230, .82), rgba(250, 244, 230, .5) 55%, rgba(250, 244, 230, 0) 78%) !important; box-shadow: none !important; border: 0 !important;
  width: min(360px, 60vw); padding: 26px 34px 30px; text-align: center; transform: translateX(-50%) translateY(8px); opacity: 0; transition: opacity .6s, transform .6s; bottom: 16vh; }
.drive.has-plates .mile.on .mile-sign { opacity: 1; transform: translateX(-50%); box-shadow: none !important; }
.drive.has-plates .mile-sign::before, .drive.has-plates .mile-sign::after { display: none !important; }
.drive.has-plates .mile-year { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 34px; color: #8e2f28; letter-spacing: 0; }
.drive.has-plates .mile-title { font-family: var(--f-serif); font-weight: 500; font-size: 21px; color: #2e2216; margin-top: 4px; }
html[data-lang="zh"] .drive.has-plates .mile-title { font-family: var(--f-zh); font-size: 18px; }
.drive.has-plates .mile-place { font-size: 13px; color: #6a5a46; }
.drive.has-plates .mile-text { font-size: 14px; line-height: 1.6; color: #3a2e20; }
.drive.has-plates .mile-post { width: 2px; left: -1px; height: 8vh; background: rgba(46, 34, 22, .55); }
.drive.has-plates .mile-post::after { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #8e2f28; }
.drive.has-plates .drive-hud { background: rgba(250, 244, 230, .85); color: #2e2216; box-shadow: none; }

/* the ending: a postcard */
.drive-end { padding: 60px 16px 90px; display: grid; justify-items: center; }
.licence { width: 100%; display: grid; justify-items: center; gap: 12px; }
.pc { width: min(720px, 92vw); aspect-ratio: 3 / 2; perspective: 1800px; cursor: pointer; outline: none; }
.pc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.4, .1, .2, 1); transform: rotate(-1.5deg); }
.pc.is-back .pc-in { transform: rotate(1deg) rotateY(180deg); }
.pc-face { position: absolute; inset: 0; backface-visibility: hidden; box-shadow: 0 30px 50px -24px rgba(40, 24, 10, .6), 0 2px 6px rgba(40, 24, 10, .2); }
.pc-front { background: url("../assets/plates/road-now.jpg") center / cover; border: 10px solid #f7f1e3; display: grid; align-items: end; }
.pc.has-front .pc-front { background-image: url("../assets/obj/postcard-front.jpg"); }
.pc-cap { margin: 0 0 12px 16px; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #f7f1e3; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.pc-back { transform: rotateY(180deg); display: grid; grid-template-columns: 1.1fr 1fr; background: var(--grain, none), #f4ecdb; color: #2e2216; }
.pc.has-back .pc-back { background: url("../assets/obj/postcard-back.jpg") center / 100% 100%; }
.pc-back::before { content: ""; position: absolute; left: 52%; top: 12%; bottom: 12%; border-left: 1px solid rgba(90, 70, 40, .35); }
.pc-note { padding: 7% 6% 6% 8%; font-family: var(--f-hand-zh, var(--f-zh)); font-size: clamp(12px, 1.7vw, 15px); line-height: 1.75; overflow: hidden; }
html[data-lang="en"] .pc-note { font-family: var(--f-hand, var(--f-serif)); font-size: clamp(13px, 1.9vw, 17px); }
.pc-note p { margin: 0 0 .5em; } .pc-hi { font-size: 1.15em; } .pc-sign { text-align: right; font-style: italic; }
.pc-addr { position: relative; padding: 32% 8% 8% 10%; display: grid; align-content: start; gap: 0; }
.pc-line { display: block; min-height: 2.2em; border-bottom: 1px solid rgba(90, 70, 40, .35); padding-top: .6em; font-family: var(--f-serif); font-size: clamp(12px, 1.6vw, 15px); }
.pc-mail, .pc-bar { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: #8e2f28; text-align: left; }
.pc-mail.copied::after { content: "  " attr(data-done); color: #6a5a46; font-style: italic; }
html[data-lang="zh"] .pc-bar { font-family: var(--f-zh); font-size: .92em; }
.pc-stamp { position: absolute; right: 8%; top: 8%; width: 17%; aspect-ratio: 4 / 5; background: url("../assets/obj/orn-swallow.webp") center / 70% no-repeat, #f7f1e3; box-shadow: 0 0 0 3px #f7f1e3, 0 0 0 4px rgba(142, 47, 40, .6); }
.pc.has-stamp .pc-stamp { background: url("../assets/obj/stamp.webp") center / cover no-repeat; box-shadow: none; }
.pc-mark { position: absolute; right: 18%; top: 14%; width: 20%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(46, 34, 22, .5); display: grid; place-items: center; text-align: center; font-family: var(--f-serif); font-size: clamp(8px, 1vw, 11px); letter-spacing: .12em; line-height: 1.3; color: rgba(46, 34, 22, .6); transform: rotate(-14deg); }
.pc-hint { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: #6a5a46; }
html[data-lang="zh"] .pc-hint { font-family: var(--f-zh); font-style: normal; letter-spacing: .1em; font-size: 13px; }
@media (max-width: 600px) { .pc { aspect-ratio: 2 / 3; } .pc-back { grid-template-columns: 1fr; grid-template-rows: 1.1fr 1fr; } .pc-back::before { left: 10%; right: 10%; top: 52%; bottom: auto; border-left: 0; border-top: 1px solid rgba(90, 70, 40, .35); } .pc-addr { padding: 6% 8% 6% 10%; } .pc-stamp { top: 6%; width: 14%; } .pc-mark { display: none; } }
.f-garage .drive-end { background: var(--grain, none), #efe6d4; }

/* ---------- the lift call plate ----------
   One narrow satin-brass plate, a single fine line inside, the floor in italic
   serif, an ivory push. Nothing else. */
.call {
  right: 24px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  width: 46px; padding: 13px 0 12px; gap: 11px; flex-direction: column; align-items: center;
  border-radius: 3px; border: 1px solid #6b5228;
  background: linear-gradient(180deg, #dcc38a 0%, #c4a364 55%, #ae8b4c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, .6), 0 10px 22px -12px rgba(30, 20, 5, .65);
}
.call::before {
  content: ""; position: absolute; inset: 3px; pointer-events: none; border-radius: 1px;
  border: 1px solid rgba(92, 68, 30, .38);
}
.call-led {
  padding: 0; min-width: 0; background: none; border-radius: 0; text-shadow: none;
  color: #2e2210; font-family: var(--f-serif); font-style: italic; font-size: 13px; line-height: 1; letter-spacing: .03em;
}
.call-knob {
  position: relative; width: 24px; height: 24px;
  background: radial-gradient(circle at 40% 32%, #fffdf7, #efe6d3 60%, #d9ccb1);
  box-shadow: 0 0 0 2px #a8864a, 0 0 0 3px #6b5228, 0 1px 2px 1px rgba(40, 25, 5, .25);
  transition: box-shadow .25s, transform .12s;
}
.call:hover .call-knob, .call:focus-visible .call-knob { box-shadow: 0 0 0 2px #a8864a, 0 0 0 3px #6b5228, 0 0 10px 3px rgba(255, 220, 150, .8); }
.call:active .call-knob { transform: scale(.94); }
.call:focus-visible { outline: 2px solid #f6d38a; outline-offset: 3px; }
@media (max-width: 899px) {
  .call { right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
}
.call-arr::after { content: " ↘"; font-style: normal; }

/* ---------- home: the drawing's title sits under the drawing, as on a plate;
   the two actions stand just above the call plate, right edge on its right edge,
   the arrow pointing down at it ---------- */
.lobby-scale { margin: 0; text-align: center; font-family: var(--f-serif); font-size: 11px; letter-spacing: .22em; color: #4a3f35; opacity: .72; }
html[data-tod="night"] .lobby-scale { color: #b6ab9a; }
.lobby-foot .tod-btn { order: 1; }
.lobby-foot #lobbyCall { order: 2; }
@media (min-width: 900px) {
  .lobby-scale { position: absolute; z-index: 3; left: 50%; bottom: 1.4svh; transform: translateX(-50%); white-space: nowrap; }
  .lobby-foot { right: 24px; bottom: calc(24px + 76px + 24px); gap: 0; line-height: 1.5; }
  .lobby-foot .tod-btn { font-size: 15px; border-bottom: 0; padding: 0; margin-bottom: 6px; }
  .lobby-foot #lobbyCall { font-size: 15px; }
  .lobby-foot .tod-btn .tod-time { font-size: 13px; }
  html[data-lang="zh"] .lobby-foot #lobbyCall, html[data-lang="zh"] .lobby-foot .tod-btn { font-size: 15px; letter-spacing: .06em; }
  .lobby-foot .tod-btn:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .lobby-foot .call-arr::after { content: " ↓"; }
}
@media (max-width: 899px) {
  .lobby-foot { flex-direction: column; align-items: center; gap: 8px; }
  .lobby-foot .tod-btn { border-bottom: 0; padding: 0; }
}

/* ---------- II · La Discothèque on its painted room (v2.2) ----------
   The sleeves stand on the walnut ledge (top edge at 47.9% of the plate, 25–78.8% wide);
   titles sit on the wall below it. Sleeves are the painted paper sleeve, tinted. */
.f-lab .lab-rail { left: 27.5%; width: 49%; top: auto; bottom: 52.1%; height: auto; }
.f-lab .lab-grid { gap: 0 4.5cqw; align-items: end; }
.f-lab .rec { grid-template-rows: auto; }
.f-lab .rec-sleeve, .f-lab .rec-disc { width: 11.4cqw; }
.f-lab .rec-sleeve { background: linear-gradient(var(--sl), var(--sl)), url("../assets/obj/record-sleeve.jpg") center / cover; background-blend-mode: multiply; padding: 1cqw; box-shadow: .25cqw .5cqw .8cqw -.3cqw rgba(60, 40, 20, .45), inset 0 0 0 1px rgba(80, 60, 40, .18); }
.f-lab .rec-sleeve::before { background: linear-gradient(120deg, rgba(255, 250, 235, .3), transparent 45%); }
.f-lab .rec-disc { transform: translateX(18%); }
.f-lab .rec:hover .rec-disc, .f-lab .rec:focus-visible .rec-disc { transform: translateX(58%); }
.f-lab .rec-cap { position: absolute; top: calc(100% + 2.4cqw); left: 0; width: 15cqw; max-width: none; margin: 0; }
.f-lab .rc-desc { display: none; }
.f-lab .rec:hover .rc-desc, .f-lab .rec:focus-visible .rc-desc { display: block; }
/* portrait plate: ledge top at 48%, 21.6–91.8% wide */
.f-lab .tableau.is-m .lab-rail { left: 24%; width: 66%; top: auto; bottom: 52%; height: auto; }
.f-lab .tableau.is-m .lab-grid { grid-template-columns: repeat(3, 1fr); gap: 0 4cqw; }
.f-lab .tableau.is-m .rec { grid-template-columns: auto; gap: 0; }
.f-lab .tableau.is-m .rec-sleeve, .f-lab .tableau.is-m .rec-disc { width: 17.5cqw; }
.f-lab .tableau.is-m .rec-sleeve { padding: 1.6cqw; }
.f-lab .tableau.is-m .rs-title { font-size: 10px; }
.f-lab .tableau.is-m .rs-code { display: none; }
.f-lab .tableau.is-m .rec-cap { grid-area: auto; top: calc(100% + 4.5cqw); width: 20cqw; margin: 0; }
.f-lab .tableau.is-m .rc-name { font-size: 12px; line-height: 1.35; }
.f-lab .tableau.is-m .rc-go { font-size: 10.5px; }
.f-lab .tableau.is-m .rec:hover .rc-desc { display: none; }
.f-lab .rs-title { display: none; }
.f-lab .rec-sleeve { align-content: end; }
.f-lab .tableau.is-m .rc-host { display: none; }
.f-lab .tableau.is-m .rs-code { display: block; font-size: 9px; }

/* ---------- −III · garage on its painted room (v2.2) ----------
   Brass rail at 23.3% of the plate. The first row hangs from it on the painted wire;
   the rows below hang on hidden hooks (the frame is shown without its wire). */
.f-garage .cert-wall { top: 23.4%; width: auto; gap: 1.6cqw 2.4cqw; grid-template-columns: repeat(var(--cols, 4), 7.6cqw); align-items: start; }
.f-garage .cert { gap: .3cqw; }
.f-garage.has-cert-frame .cert-mat { aspect-ratio: 1 / 1.2306; background: url("../assets/obj/cert-frame.webp") center bottom / 100% auto no-repeat; padding: 15% 13% 14%; filter: drop-shadow(0 .35cqw .35cqw rgba(60, 40, 20, .28)); }
.f-garage.has-cert-frame .cert:nth-child(-n+4) .cert-mat { aspect-ratio: 700 / 1057; padding-top: 43%; }
.f-garage .cert-in { padding: 0 4%; }
.f-garage .cert-title { font-size: 11cqw; }
html[data-lang="zh"] .f-garage .cert-title { font-size: 10.5cqw; }
.f-garage .cert-year { font-size: 9cqw; }
.f-garage .tableau:not(.is-m) .cert-in { container-type: inline-size; }
/* portrait plate: rail at 15.3%, wall 17–83% wide */
.f-garage .tableau.is-m .cert-wall { left: 50%; top: 15.5%; width: auto; grid-template-columns: repeat(3, 18cqw); gap: 3cqw 4cqw; }
.f-garage.has-cert-frame .tableau.is-m .cert:nth-child(-n+4) .cert-mat { aspect-ratio: 1 / 1.2306; padding-top: 15%; }
.f-garage.has-cert-frame .tableau.is-m .cert:nth-child(-n+3) .cert-mat { aspect-ratio: 700 / 1057; padding-top: 43%; }
/* the drive: the new car, a little larger */
.drive.has-plates .car-img { width: clamp(220px, 24vw, 380px); }
.floor.f-garage { background: var(--grain, none), #efe6d4; }
.f-garage .drive-end { max-width: none; background: none; }
.lt-stk { border: 0; background: none; padding: 2px; filter: drop-shadow(0 1px 1.5px rgba(60, 40, 20, .3)); }
.lt-stk:hover { border: 0; }

/* the letter on the painted sheet (v2.2): the whole sheet shows, writing keeps clear of the flower border */
.cu-paper .letter { aspect-ratio: 2 / 3; width: min(540px, 92vw, calc(78svh * 2 / 3)); max-height: none; height: auto; box-sizing: border-box; background-size: 100% 100% !important; padding: 9% 9% 7% 16%; gap: 8px; overflow: auto; align-content: start; }
.cu-paper .letter .pk-input textarea { background: none; min-height: 110px; }
.cu-paper .letter .pk-input input, .cu-paper .letter .pk-input textarea { border-bottom-color: rgba(90, 70, 40, .22); }
.letter-stamp { top: 5% !important; right: 6% !important; }
.lt-stk { width: 38px; height: 38px; }
.lt-on { width: 58px; }
@media (max-width: 640px) { .cu-paper .letter { padding: 11% 7% 8% 15%; } .lt-stk { width: 32px; height: 32px; } }
.lt-tray-row { gap: 3px; flex-wrap: nowrap; }
.lt-stk { width: 34px; height: 34px; flex: 0 0 auto; }

/* diary closed: the painted desk sharpens and holds before the bedroom returns */
.f-study .tableau .tb-alt[data-plate="journal"], .f-study .tableau .tb-alt[data-plate="chambre"] { transition: opacity 1.1s ease, filter 1.1s ease; }
.f-study .tableau.is-journal.is-rest .tb-alt[data-plate="journal"].loaded { filter: none; }
.journal .jbook.leaving, .journal.leaving { transition: opacity .7s ease .1s; opacity: 0; }

/* ---------- IV · the door code: a small satin-brass plate beside the door ----------
   Same language as the lift call plate: flat brass, one fine inset line, ivory buttons;
   sized like a real door keypad, lit by the sconces (soft shadow down and to the right). */
.f-study .tb-box .door-leaf.r .keypad { left: calc(100% + 2.6cqw); top: 38%; width: clamp(100px, 6.4cqw, 120px); padding: .75cqw .7cqw .7cqw; gap: .45cqw; border-radius: 2px;
  background: linear-gradient(180deg, #d9bf86 0%, #c2a061 55%, #a98848 100%); border: 1px solid #6b5228;
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, .55), .35cqw .6cqw 1cqw -.35cqw rgba(50, 32, 14, .45); filter: saturate(.92) brightness(.97); }
.f-study .tb-box .door-leaf.r .keypad::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(92, 68, 30, .35); border-radius: 1px; pointer-events: none; }
.f-study .tb-box .kp-top { position: relative; }
.f-study .tb-box .kp-label { font-size: clamp(9px, .62cqw, 11px); letter-spacing: .04em; color: #3a2a14; }
html[data-lang="zh"] .f-study .tb-box .kp-label { font-style: normal; letter-spacing: .12em; }
.f-study .tb-box .kp-lamp { width: 5px; height: 5px; min-width: 5px; min-height: 5px; }
.f-study .tb-box .door-leaf.r .kp-display { position: relative; height: clamp(18px, 1.35cqw, 24px); font-size: clamp(11px, .8cqw, 13px); background: #efe6d2; box-shadow: inset 0 0 0 1px #7a5d2c, inset 0 1px 2px rgba(60, 40, 10, .25); }
.f-study .tb-box .door-leaf.r .kp-display::placeholder { color: transparent; }
.f-study .tb-box .door-leaf.r .kp-keys { position: relative; gap: .32cqw .2cqw; }
.f-study .tb-box .door-leaf.r .kp-key { width: 72%; font-size: clamp(9px, .66cqw, 11px); color: #2a2420;
  background: radial-gradient(circle at 40% 32%, #fffdf7, #efe6d3 60%, #d9ccb1); box-shadow: 0 0 0 1.5px #a8864a, 0 0 0 2.2px #6b5228, 0 1px 1.5px .5px rgba(40, 25, 5, .25); }
.f-study .tb-box .door-leaf.r .kp-key:active { transform: scale(.94); }
.f-study .tb-box .kp-msg { position: relative; font-size: clamp(9px, .6cqw, 11px); }
.f-study .tb-box .door-leaf.r .kp-key { height: auto !important; aspect-ratio: 1 / 1 !important; align-self: center; }
@media (max-width: 719px), (max-aspect-ratio: 1/1) {
  .f-study .tableau .tb-box .door-leaf.r .keypad { max-width: none; left: 50%; top: 36%; width: 124px; padding: 10px 9px 9px; gap: 6px; transform: translateX(-50%); box-sizing: border-box; }
  .f-study .tb-box .door-leaf.r .kp-keys { gap: 5px 4px; }
  .f-study .tb-box .door-leaf.r .kp-key { width: 28px; font-size: 12px; }
  .f-study .tb-box .door-leaf.r .kp-display { height: 22px; }
}
.f-study .tb-box .door-leaf.r .kp-key { width: clamp(18px, 1.3cqw, 23px) !important; height: clamp(18px, 1.3cqw, 23px) !important; }
@media (max-width: 719px), (max-aspect-ratio: 1/1) { .f-study .tb-box .door-leaf.r .kp-key { width: 28px !important; height: 28px !important; } }
.f-study .tb-box .kp-msg:empty { display: none; }

/* ---------- III · picking a book: the button stays put (stable hit area), only the book inside rises;
   moving to a neighbour swaps the cover sideways instead of replaying the take-out ---------- */
.lib-shelf .book.is-lifted { transform: none; }
.lib-shelf .book .book-3d { transition: transform .4s var(--e-out); }
.lib-shelf .book.is-lifted .book-3d, .lib-shelf .book.is-lifted:hover .book-3d, .lib-shelf .book.is-lifted:focus-visible .book-3d { transform: translateY(-34%); }
.book-lift.swap .bl-cover { animation: cover-swap .38s cubic-bezier(.2, .8, .2, 1) both; }
.book-lift.swap .bl-cap { animation: cap-swap .38s ease both; }
@keyframes cover-swap { from { transform: translateX(calc(var(--dir, 1) * 7%)) rotateY(calc(var(--dir, 1) * -10deg)); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes cap-swap { from { opacity: 0; } to { opacity: 1; } }
.cover-gen.paper .pp-title { top: 16cqh; }
@media (prefers-reduced-motion: reduce) { .book-lift.swap .bl-cover, .book-lift.swap .bl-cap { animation: none; } }

/* ---------- records pressed in each product's colours ----------
   Oracle: parchment, ink and vermilion; the sleeve is its card back (crossed vermilion lattice, double rule).
   pm-watcher: deep ink-navy with the five platform colours; the sleeve carries its converging odds lines.
   Next experiment: a blueprint sleeve and a clear pressing. */
.f-lab .rec .rs-art { position: absolute; inset: 0; pointer-events: none; }
.f-lab .rec .rs-hole { display: none; }
/* Sexcraft Oracle */
.f-lab .rec--oracle .rec-sleeve { background: repeating-linear-gradient(45deg, rgba(168, 48, 30, .5) 0 .08cqw, transparent .08cqw .75cqw), repeating-linear-gradient(-45deg, rgba(168, 48, 30, .5) 0 .08cqw, transparent .08cqw .75cqw), #1b1410; background-blend-mode: normal; }
.f-lab .rec--oracle .rs-art::before { content: ""; position: absolute; inset: 5%; border: 1px solid #a8301e; box-shadow: inset 0 0 0 .35cqw #1b1410, inset 0 0 0 calc(.35cqw + 1px) rgba(168, 48, 30, .6); }
.f-lab .rec--oracle .rs-art::after { content: "✦"; position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; display: grid; place-items: center; font-size: 2.2cqw; line-height: 1; color: #d9573b; background: #1b1410; outline: 1px solid #a8301e; outline-offset: .3cqw; rotate: 45deg; }
.f-lab .rec--oracle .rs-code { color: #e6d9bd; }
.f-lab .rec--oracle .rec-disc { background: radial-gradient(circle, transparent 0 16%, rgba(236, 220, 187, .25) 16.3%, transparent 17%),
    repeating-radial-gradient(circle, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 30% 30%, rgba(255, 220, 190, .18), transparent 40%),
    conic-gradient(from 20deg, #3a0c06, #a3230f 11%, #1b1410 24%, #6b1a0c 37%, #14100a 52%, #bd3b21 66%, #2a0e08 80%, #7f2a12 91%, #3a0c06); }
.f-lab .rec--oracle .rec-label { background: #e6d9bd; box-shadow: inset 0 0 0 .15cqw #a3230f; }
.f-lab .rec--oracle .rec-label b, .f-lab .rec--oracle .rec-label small { color: #221a11; }
/* pm-watcher */
.f-lab .rec--odds .rec-sleeve { background: linear-gradient(rgba(226, 224, 218, .07) 1px, transparent 1px) 0 0 / 100% 16%, #13212a; background-blend-mode: normal; }
.f-lab .rec--odds .rs-art svg { position: absolute; left: 9%; right: 9%; bottom: 22%; width: 82%; height: 46%; }
.f-lab .rec--odds .rs-art svg polyline { fill: none; stroke-width: 2.4; }
.f-lab .rec--odds .rs-art svg g { opacity: .25; }
.f-lab .rec--odds .rs-code { color: #e2e0da; }
.f-lab .rec--odds .rec-disc { background: radial-gradient(circle, transparent 0 16%, rgba(255, 255, 255, .25) 16.3%, transparent 17%),
    repeating-radial-gradient(circle, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px),
    conic-gradient(from -10deg, rgba(255, 255, 255, .22), transparent 14%, rgba(255, 255, 255, .12) 50%, transparent 64%),
    conic-gradient(#9e4d49 0 20%, #2f8f5b 0 40%, #4f9aa3 0 60%, #b8962e 0 80%, #13212a 0 100%); }
.f-lab .rec--odds .rec-label { background: #e2e0da; box-shadow: inset 0 0 0 .15cqw #13212a; }
/* Next experiment: under construction */
.f-lab .rec--site .rec-sleeve { background: linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / 12.5% 12.5%, linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / 12.5% 12.5%, #34506e; background-blend-mode: normal; }
.f-lab .rec--site .rs-art::before { content: ""; position: absolute; inset: 20% 22% 30%; border: 1px dashed rgba(255, 255, 255, .7); }
.f-lab .rec--site .rs-code { color: #e8eef4; }
.f-lab .rec--site .rec-disc { background: repeating-radial-gradient(circle, rgba(0, 0, 0, .08) 0 1px, transparent 1px 3px), radial-gradient(circle, rgba(236, 240, 244, .35), rgba(200, 212, 224, .22)); backdrop-filter: blur(1px); }
.f-lab .rec.is-pressing .rec-disc { opacity: .8; filter: none; }
.f-lab .tableau.is-m .rec--oracle .rs-art::after { font-size: 3.4cqw; }

/* ---------- home: no corner mark; readable floor labels; trees that move in the wind; soft light ---------- */
.top .brand { display: none; }
#sectionSvg .lvl-code { font-size: 23px; fill: #2a2119; paint-order: stroke; stroke: rgba(250, 244, 230, .85); stroke-width: 3.2px; stroke-linejoin: round; }
#sectionSvg .lvl-name { font-size: 12px; letter-spacing: .26em; fill: #3a2e24; paint-order: stroke; stroke: rgba(250, 244, 230, .85); stroke-width: 3px; stroke-linejoin: round; }
#sectionSvg .lvl-name[lang="en"] { font-size: 11px; }
#sectionSvg .lead { stroke: #3a2e24; }
html[data-tod="night"] #sectionSvg .lvl-code { fill: #f3ead8; stroke: rgba(22, 24, 36, .8); }
html[data-tod="night"] #sectionSvg .lvl-name { fill: #e0d4c0; stroke: rgba(22, 24, 36, .8); }
html[data-tod="night"] #sectionSvg .lead { stroke: #e0d4c0; }
#sectionSvg .stop.on .lvl-code, #sectionSvg .stop:hover .lvl-code { fill: #8e2f28; }
html[data-tod="night"] #sectionSvg .stop.on .lvl-code, html[data-tod="night"] #sectionSvg .stop:hover .lvl-code { fill: #f1c877; }

/* the two painted trees: a copy of the painting, masked to each canopy, sways from its trunk */
.f-lobby { position: relative; }
.f-lobby > .lobby { position: relative; z-index: 1; }
.f-lobby.has-sky-day::before, .f-lobby.has-sky-day::after, .f-lobby.has-sky-night::before, .f-lobby.has-sky-night::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: inherit; will-change: transform; }
.f-lobby::before { -webkit-mask-image: radial-gradient(ellipse 27% 44% at 8% 16%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 27% 44% at 8% 16%, #000 50%, transparent 100%);
  transform-origin: 10% 58%; animation: sway-l 9s ease-in-out infinite; }
.f-lobby::after { -webkit-mask-image: radial-gradient(ellipse 24% 44% at 93% 15%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 24% 44% at 93% 15%, #000 50%, transparent 100%);
  transform-origin: 92% 60%; animation: sway-r 11s ease-in-out infinite; animation-delay: -3s; }
@keyframes sway-l { 0%, 100% { transform: rotate(0deg) skewX(0deg); } 30% { transform: rotate(.45deg) skewX(-.3deg); } 55% { transform: rotate(-.15deg) skewX(.1deg); } 78% { transform: rotate(.3deg) skewX(-.2deg); } }
@keyframes sway-r { 0%, 100% { transform: rotate(0deg) skewX(0deg); } 25% { transform: rotate(-.4deg) skewX(.3deg); } 60% { transform: rotate(.12deg) skewX(-.1deg); } 82% { transform: rotate(-.28deg) skewX(.2deg); } }
/* soft light: a warm wash from the upper left that slowly breathes */
.f-lobby > .lobby::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 70% 60% at 18% 8%, rgba(255, 226, 160, .55), transparent 70%), linear-gradient(115deg, rgba(255, 236, 190, .28), transparent 55%);
  animation: light-breathe 14s ease-in-out infinite; }
html[data-tod="night"] .f-lobby > .lobby::before { display: none; }  /* night: the painting as it is */
@keyframes light-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .f-lobby::before, .f-lobby::after, .f-lobby > .lobby::before { animation: none; } }
.top .top-r { margin-left: auto; }
#sectionSvg .lvl-code { font-size: 25px; }
#sectionSvg .lvl-name { font-size: 13.5px; }
html[data-tod="night"] #sectionSvg .lvl-code, html[data-tod="night"] #sectionSvg .lvl-name { stroke: rgba(22, 24, 36, .5); stroke-width: 2.2px; }

/* ---------- the postcard back, written on the painted card ----------
   Painted: centre divide at 50%, address lines at 44 / 56 / 68 / 79% from x 55% to 96%,
   dotted stamp box top-right. The writing sits on those lines; no drawn lines of our own.
   The card stays landscape at every width and its type scales with it. */
.pc { container-type: inline-size; }
@media (max-width: 600px) { .pc { aspect-ratio: 3 / 2; width: 94vw; } .pc-back { grid-template-rows: none; } .pc-mark { display: grid; } }
.pc.has-back .pc-back { display: block; }
.pc.has-back .pc-back::before { display: none; }
.pc.has-back .pc-note { position: absolute; left: 6%; top: 9%; width: 38%; padding: 0; font-size: clamp(11px, 2.3cqw, 16px); line-height: 1.8; }
html[data-lang="en"] .pc.has-back .pc-note { font-size: clamp(12px, 2.5cqw, 17px); }
.pc.has-back .pc-note .pc-sign { margin-top: 1.2em; }
.pc.has-back .pc-addr { position: absolute; left: 56%; right: 5%; top: 0; bottom: 0; padding: 0; display: block; }
.pc.has-back .pc-line { position: absolute; left: 3%; right: 0; min-height: 0; padding: 0; border: 0; line-height: 1; font-size: clamp(10px, 2.1cqw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc.has-back .pc-line:nth-of-type(3) { top: calc(44.8% - 1.45em); }
.pc.has-back .pc-line:nth-of-type(4) { top: calc(56.1% - 1.45em); }
.pc.has-back .pc-line:nth-of-type(5) { top: calc(67.4% - 1.45em); }
.pc.has-back .pc-line:nth-of-type(6) { top: calc(78.5% - 1.45em); }
.pc.has-back .pc-stamp { right: 5.6%; top: 6.4%; width: 11.5%; }
.pc.has-back .pc-mark { right: 15%; top: 12%; width: 13%; font-size: clamp(6px, 1.25cqw, 10px); }
/* the lyre sheet: writing inside the ruled frame, below the crest */
.cu-paper .letter { padding: 17% 10% 9% 10%; }
.letter-stamp { display: none !important; }
@media (max-width: 640px) { .cu-paper .letter { padding: 19% 9% 9% 9%; } }

.cu-paper .letter .pk-input input, .cu-paper .letter .pk-input textarea { border-bottom-color: rgba(90, 60, 30, .32); }
.pc.has-back .pc-stamp { right: 2%; top: 7%; width: 28%; }
.pc.has-back .pc-mark { right: 22%; top: 15%; width: 26%; }

/* ---------- legibility: the top controls sit on a paper chip everywhere; the drive plaque in ink ---------- */
body .top .sound-btn, body .top .lang { background: rgba(247, 241, 228, .88) !important; border: 1px solid rgba(46, 34, 22, .28) !important; color: #2a2119 !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px -4px rgba(30, 20, 10, .35); }
body .top .lang button { color: #2a2119; opacity: .5; }
body .top .lang button[aria-pressed="true"] { opacity: 1; }
body .top .sound-btn .sb-bars i { background: #2a2119; }
.drive.has-plates .drive-hud { background: rgba(247, 241, 228, .94); border: 1px solid rgba(46, 34, 22, .25); border-radius: 3px; box-shadow: 0 6px 16px -10px rgba(30, 20, 10, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.drive.has-plates .hud-year { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: #8e2f28; }
.drive.has-plates .hud-km { color: #2a2119; opacity: .85; }
.drive.has-plates .hud-dial { color: #5a4630; }
.drive.has-plates .hud-dial .k3 { opacity: .8; }
.drive.has-plates .hud-needle { stroke: #8e2f28; }
.sound-hint { background: rgba(247, 241, 228, .96) !important; color: #2a2119 !important; }

/* ---------- the lift: calmer, richer, no shake ----------
   One warm pool of light from the ceiling, darker corners; the panel is the same satin brass
   as the call plate with room between the buttons; the exit is a small brass plate. */
.lift-car { translate: none !important; }
.lift::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 46% 38% at 50% 30%, rgba(255, 222, 160, .14), transparent 70%), radial-gradient(ellipse 120% 95% at 50% 45%, transparent 55%, rgba(12, 7, 3, .55) 100%); }
.gate { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)) brightness(.92) sepia(.15); }
.car-wall { background: var(--fibre), var(--grain), linear-gradient(90deg, #4e3322, #634229 45%, #4e3322); }
.cop { padding: 20px 18px 16px; border-radius: 2px; border-color: #6b5228; z-index: 5;
  background: linear-gradient(180deg, #d9bf86 0%, #c2a061 55%, #a98848 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, .55), 0 18px 30px -14px rgba(0, 0, 0, .8); }
.cop::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(92, 68, 30, .38); pointer-events: none; }
.cop-brand { position: relative; margin-bottom: 6px; }
.cop-floors { position: relative; gap: 11px; }
.cop-item { grid-template-columns: 30px auto; gap: 14px; }
.cop-btn { width: 30px; height: 30px; font-size: 11.5px;
  background: radial-gradient(circle at 40% 32%, #fffdf7, #efe6d3 60%, #d9ccb1); box-shadow: 0 0 0 2px #a8864a, 0 0 0 3px #6b5228, 0 1px 2px 1px rgba(40, 25, 5, .3); }
.cop-btn:hover:not(:disabled) { box-shadow: 0 0 0 2px #d4b064, 0 0 0 3px #6b5228, 0 1px 2px 1px rgba(40, 25, 5, .3); }
.cop-btn.lit { box-shadow: 0 0 0 2px #a8864a, 0 0 0 3px #6b5228, 0 0 12px 3px rgba(255, 220, 150, .75); }
.cop-row { position: relative; padding-top: 14px; margin-top: 4px; gap: 16px; border-top-color: rgba(92, 68, 30, .4); }
.cop-btn.sm { width: 24px; height: 24px; }
.lift-exit { z-index: 5; background: linear-gradient(180deg, #d9bf86, #c2a061 55%, #a98848) !important; color: #2a2119 !important; border: 1px solid #6b5228 !important; border-radius: 2px !important;
  padding: 9px 22px !important; font-family: var(--f-serif); font-size: 14px !important; letter-spacing: .08em; box-shadow: inset 0 1px 0 rgba(255, 248, 225, .55), inset 0 0 0 3px rgba(217, 191, 134, 0), 0 10px 20px -10px rgba(0, 0, 0, .8) !important; }
html[data-lang="zh"] .lift-exit { font-family: var(--f-zh); letter-spacing: .24em; }
.lift-exit:hover { color: #8e2f28 !important; }
@media (max-width: 719px) {
  .cop { padding: 14px 12px 12px; }
  .cop-floors { gap: 12px 6px; }
  .cop-item { grid-template-columns: 1fr; gap: 5px; }
  .cop-btn { width: 32px; height: 32px; }
}

/* ---------- top controls: frosted glass, a hairline, italic serif — light and quiet ---------- */
body .top .sound-btn, body .top .lang, .sound-hint {
  background: rgba(252, 248, 240, .34) !important; border: 1px solid rgba(255, 252, 244, .7) !important; color: #2a2119 !important;
  box-shadow: 0 0 0 1px rgba(46, 34, 22, .12), 0 4px 14px -8px rgba(30, 20, 10, .35) !important;
  backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); border-radius: 2px !important; }
body .top .sound-btn { width: 34px; height: 30px; }
body .top .sound-btn .sb-bars i { width: 1.5px; background: #2a2119; }
body .top .lang { height: 30px; padding: 0 2px; }
body .top .lang button { font-family: var(--f-serif); font-style: italic; font-size: 13px; letter-spacing: .06em; padding: 0 10px; text-shadow: 0 0 6px rgba(255, 250, 240, .8); }
html[data-lang="zh"] body .top .lang button[data-set-lang="zh"], html[data-lang="en"] body .top .lang button[data-set-lang="en"] { font-weight: 500; }
body .top .lang button + button { border-left: 1px solid rgba(46, 34, 22, .2); }
.sound-hint { font-family: var(--f-serif); font-style: italic; font-size: 12.5px !important; letter-spacing: .04em; text-shadow: 0 0 6px rgba(255, 250, 240, .8); }
html[data-lang="zh"] .sound-hint { font-family: var(--f-zh); font-style: normal; letter-spacing: .1em; }
.sound-hint::after { background: rgba(252, 248, 240, .34) !important; border-color: rgba(255, 252, 244, .7) !important; }

/* on dark scenes the same glass turns smoky and the type turns light */
body[data-floor="library"] .top .sound-btn, body[data-floor="theatre"] .top .sound-btn, body[data-floor="darkroom"] .top .sound-btn, body[data-floor="bar"] .top .sound-btn, html[data-tod="night"] body[data-floor="lobby"] .top .sound-btn, html[data-tod="night"] body[data-floor="greenhouse"] .top .sound-btn, html[data-tod="night"] body[data-floor="study"] .top .sound-btn, body[data-floor="library"] .top .lang, body[data-floor="theatre"] .top .lang, body[data-floor="darkroom"] .top .lang, body[data-floor="bar"] .top .lang, html[data-tod="night"] body[data-floor="lobby"] .top .lang, html[data-tod="night"] body[data-floor="greenhouse"] .top .lang, html[data-tod="night"] body[data-floor="study"] .top .lang, body[data-floor="library"] .sound-hint, body[data-floor="theatre"] .sound-hint, body[data-floor="darkroom"] .sound-hint, body[data-floor="bar"] .sound-hint, html[data-tod="night"] body[data-floor="lobby"] .sound-hint, html[data-tod="night"] body[data-floor="greenhouse"] .sound-hint, html[data-tod="night"] body[data-floor="study"] .sound-hint { background: rgba(24, 20, 26, .3) !important; border-color: rgba(255, 244, 222, .38) !important; color: #f3ead8 !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 4px 14px -8px rgba(0, 0, 0, .5) !important; }
body[data-floor="library"] .top .lang button, body[data-floor="theatre"] .top .lang button, body[data-floor="darkroom"] .top .lang button, body[data-floor="bar"] .top .lang button, html[data-tod="night"] body[data-floor="lobby"] .top .lang button, html[data-tod="night"] body[data-floor="greenhouse"] .top .lang button, html[data-tod="night"] body[data-floor="study"] .top .lang button, body[data-floor="library"] .sound-hint, body[data-floor="theatre"] .sound-hint, body[data-floor="darkroom"] .sound-hint, body[data-floor="bar"] .sound-hint, html[data-tod="night"] body[data-floor="lobby"] .sound-hint, html[data-tod="night"] body[data-floor="greenhouse"] .sound-hint, html[data-tod="night"] body[data-floor="study"] .sound-hint { color: #f3ead8 !important; text-shadow: 0 0 6px rgba(0, 0, 0, .5); }
body[data-floor="library"] .top .sound-btn .sb-bars i, body[data-floor="theatre"] .top .sound-btn .sb-bars i, body[data-floor="darkroom"] .top .sound-btn .sb-bars i, body[data-floor="bar"] .top .sound-btn .sb-bars i, html[data-tod="night"] body[data-floor="lobby"] .top .sound-btn .sb-bars i, html[data-tod="night"] body[data-floor="greenhouse"] .top .sound-btn .sb-bars i, html[data-tod="night"] body[data-floor="study"] .top .sound-btn .sb-bars i { background: #f3ead8; }
body[data-floor="library"] .top .lang button + button, body[data-floor="theatre"] .top .lang button + button, body[data-floor="darkroom"] .top .lang button + button, body[data-floor="bar"] .top .lang button + button, html[data-tod="night"] body[data-floor="lobby"] .top .lang button + button, html[data-tod="night"] body[data-floor="greenhouse"] .top .lang button + button, html[data-tod="night"] body[data-floor="study"] .top .lang button + button { border-left-color: rgba(255, 244, 222, .3); }
/* home: no soft-light wash (user, v28) */
.f-lobby > .lobby::before { display: none !important; }
/* floor labels: no halo (user, v28); darker ink carries them instead */
#sectionSvg .lvl-code, #sectionSvg .lvl-name, html[data-tod="night"] #sectionSvg .lvl-code, html[data-tod="night"] #sectionSvg .lvl-name { stroke: none !important; paint-order: normal; }
#sectionSvg .lvl-code { fill: #1f1812; }
#sectionSvg .lvl-name { fill: #2a2119; }

/* the paper lock: a small card of laid paper over the room */
.paper-lock { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(24, 16, 10, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.paper-lock[hidden] { display: none; }
.pl-card { width: min(360px, 88vw); box-sizing: border-box; padding: 34px 30px 24px; display: grid; gap: 12px; text-align: center; color: #2a2119;
  background: var(--grain, none), #f4ecdb; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(90, 70, 40, .18); }
.pl-card::before { content: ""; position: absolute; }
.pl-title { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 22px; }
html[data-lang="zh"] .pl-title { font-family: var(--f-zh); font-style: normal; font-size: 18px; letter-spacing: .14em; }
.pl-sub { margin: 0; font-size: 13px; line-height: 1.6; color: #6a5a46; }
.pl-input { justify-self: center; width: 70%; margin-top: 6px; padding: 6px 2px; border: 0; border-bottom: 1px solid rgba(46, 34, 22, .4); background: none; text-align: center; font-family: var(--f-serif); font-size: 20px; letter-spacing: .3em; color: #2a2119; outline: none; }
.pl-input:focus { border-bottom-color: #8e2f28; }
.pl-msg { margin: 0; min-height: 1.3em; font-family: var(--f-serif); font-style: italic; font-size: 13px; color: #8e2f28; }
.pl-acts { display: flex; justify-content: center; gap: 28px; }
.pl-acts button { background: none; border: 0; padding: 2px 1px; cursor: pointer; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #6a5a46; border-bottom: 1px solid transparent; }
.pl-acts .pl-go { color: #8e2f28; border-bottom-color: rgba(142, 47, 40, .5); }
html[data-lang="zh"] .pl-acts button { font-family: var(--f-zh); font-style: normal; letter-spacing: .14em; }
.pl-acts button:disabled { opacity: .5; }
.page img.enc-fail { opacity: 0; }
html[data-tod="night"] #sectionSvg rect[fill="url(#lattice)"] { opacity: .4; }

/* ---------- the letter fits the sheet: no scrolling inside the paper ----------
   The sheet is sized to the window (2:3), the form is a column: greeting, three fields,
   the message takes whatever room is left, stickers and "send" sit on the bottom rule. */
.cu-paper .cu-inner { overflow: visible; }
.cu-paper .letter { width: min(520px, 92vw, calc((100svh - 120px) * 2 / 3)) !important; aspect-ratio: 2 / 3; height: auto; max-height: none;
  display: flex !important; flex-direction: column; gap: 0; overflow: hidden !important; padding: 15% 10% 10% 10% !important; container-type: inline-size; }
.cu-paper .letter .letter-title { margin: 0 0 .4em; font-size: clamp(18px, 5.4cqw, 26px); }
.cu-paper .letter .letter-sub { margin: 0 0 3.2cqw; font-size: clamp(11px, 2.7cqw, 14px); line-height: 1.5; }
.cu-paper .letter .pk-input { display: grid; gap: .6cqw; margin-bottom: 2.6cqw; }
.cu-paper .letter .pk-input > span { margin: 0; font-size: clamp(10px, 2.4cqw, 12.5px); line-height: 1.2; }
.cu-paper .letter .pk-input input { height: auto; padding: .4em 2px .35em; font-size: clamp(13px, 3.1cqw, 16px); line-height: 1.3; }
.cu-paper .letter .pk-input:has(textarea) { flex: 1 1 auto; min-height: 0; grid-template-rows: auto 1fr; margin-bottom: 1.6cqw; }
.cu-paper .letter .pk-input textarea { height: 100% !important; min-height: 3.2em !important; resize: none; font-size: clamp(13px, 3.1cqw, 16px); line-height: 1.75; border-bottom: 1px solid rgba(90, 60, 30, .32) !important; overflow-y: auto; }
.cu-paper .letter .lt-tray { flex: 0 0 auto; gap: 1cqw; margin-bottom: 1.4cqw; }
.cu-paper .letter .lt-tray-l { font-size: clamp(10px, 2.3cqw, 12px); }
.cu-paper .letter .lt-stk { width: clamp(24px, 7cqw, 36px); height: clamp(24px, 7cqw, 36px); }
.cu-paper .letter .letter-foot { flex: 0 0 auto; margin: 0; }
.cu-paper .cu-close { position: relative; z-index: 2; }

/* IV · bedroom: cream lettering over the door and the room, day and night */
.f-study .study-over, .f-study .tableau.is-room .study-over, html[data-tod="night"] .f-study .tableau.is-room .study-over { color: #f7efdf !important; text-shadow: 0 1px 2px rgba(40, 28, 18, .45), 0 0 18px rgba(40, 28, 18, .35); }
.f-study .study-over .rh-kicker, .f-study .study-over .rh-name { color: #f1e6d0 !important; }
.f-study .study-over .rh-orn { filter: brightness(2.2) sepia(.2) drop-shadow(0 1px 2px rgba(40, 28, 18, .4)); }

/* ---------- −II · the darkroom, v28: five prints on the five painted pegs ----------
   Each print hangs from a peg on the line (desktop pegs at 24.3 / 35.7 / 49.5 / 63 / 75 %, tips at 19 %;
   phone pegs at 17 / 33.3 / 49.4 / 66.3 / 83 %, tips at 20 %). A print develops in when the line is hung,
   swings a little when pointed at, and lights its country on the projected map. The line turns ‹ › (or ← →). */
.f-darkroom .dr-over { top: 1.5%; }
.f-darkroom .line-wrap { position: absolute; inset: 0; left: 0; right: 0; top: 0; height: auto; overflow: visible; pointer-events: none; }
.f-darkroom .prints { position: absolute; inset: 0; display: block; padding: 0; min-height: 0; }
.f-darkroom .print { position: absolute; top: 19.1%; left: 50%; width: calc(var(--w) * 8.4cqw); padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; pointer-events: auto;
  transform: translateX(-50%) rotate(var(--rot)); transform-origin: 50% 0; transition: transform .6s var(--e-out), opacity .4s ease, filter .4s ease; outline: none; }
.f-darkroom .print[data-slot="0"] { left: 24.3%; } .f-darkroom .print[data-slot="1"] { left: 35.7%; } .f-darkroom .print[data-slot="2"] { left: 49.5%; }
.f-darkroom .print[data-slot="3"] { left: 63%; } .f-darkroom .print[data-slot="4"] { left: 75%; }
.f-darkroom .print .paper { display: block; padding: 3px !important; background: #111 !important; box-shadow: 0 1.2cqw 1.4cqw -.7cqw rgba(0, 0, 0, .8) !important; }
.f-darkroom .print .paper::before { content: ""; position: absolute; left: 50%; top: -3px; width: 1.1cqw; height: 5px; margin-left: -.55cqw; background: rgba(0, 0, 0, .35); filter: blur(2px); }
.f-darkroom .print img { display: block; width: 100%; height: calc(var(--h) * 8.4cqw) !important; max-height: none; object-fit: cover; outline: 0;
  filter: brightness(1.9) sepia(1) saturate(2.4) hue-rotate(-18deg) contrast(.4); opacity: .15; transition: filter 2.2s ease var(--dl), opacity 2.2s ease var(--dl); }
.f-darkroom .print.developed img { filter: none; opacity: 1; }
.f-darkroom .print .p-cap { position: absolute; left: 50%; top: calc(100% + .7cqw); transform: translateX(-50%); display: grid; justify-items: center; gap: 1px; white-space: nowrap;
  color: #f0d8c4; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); font-family: var(--f-serif); font-size: clamp(10px, .75cqw, 12px); opacity: 0; transition: opacity .3s; pointer-events: none; }
.f-darkroom .print .p-cap b { font-weight: 500; font-size: 1.15em; letter-spacing: .06em; }
.f-darkroom .print .p-cap i, .f-darkroom .print .p-cap em { font-style: italic; opacity: .8; }
.f-darkroom .print:hover, .f-darkroom .print:focus-visible { animation: print-swing 1.6s ease-in-out; z-index: 3; }
.f-darkroom .print:hover .p-cap, .f-darkroom .print:focus-visible .p-cap { opacity: 1; }
.f-darkroom .print:focus-visible .paper { outline: 1px solid #f0c9a8; outline-offset: 3px; }
@keyframes print-swing { 0% { transform: translateX(-50%) rotate(var(--rot)); } 25% { transform: translateX(-50%) rotate(calc(var(--rot) + 2.2deg)); } 55% { transform: translateX(-50%) rotate(calc(var(--rot) - 1.4deg)); } 80% { transform: translateX(-50%) rotate(calc(var(--rot) + .5deg)); } 100% { transform: translateX(-50%) rotate(var(--rot)); } }
.f-darkroom .print.off { opacity: 0; transform: translateX(-50%) translateY(-1.2cqw) rotate(var(--rot)); }
.f-darkroom .prints:hover .print:not(:hover) { filter: brightness(.7); }
/* the map answers */
.f-darkroom .world .v.hot { fill: rgba(255, 150, 110, .55); }
.f-darkroom .world .pin.hot circle.halo { animation: pin-pulse 1.2s ease-out infinite; }
@keyframes pin-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.f-darkroom .world .pin circle.halo { transform-box: fill-box; transform-origin: center; }
/* turning the line */
.dr-pages { display: flex; align-items: center; gap: 14px; font-family: var(--f-serif); font-style: italic; font-size: 13px; color: #d9b8a4; }
.dr-pages[hidden] { display: none; }
.dr-pages button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(240, 216, 196, .35); background: rgba(20, 8, 6, .25); color: #f0d8c4; font-size: 18px; line-height: 1; cursor: pointer; transition: border-color .2s, background .2s; }
.dr-pages button:hover:not(:disabled) { border-color: #f0c9a8; background: rgba(120, 30, 20, .35); }
.dr-pages button:disabled { opacity: .25; cursor: default; }
.f-darkroom .dr-foot { gap: 12px; }
/* phone plate */
.f-darkroom .tableau.is-m .line-wrap { left: 0; right: 0; top: 0; height: auto; }
.f-darkroom .tableau.is-m .print { top: 20.2%; width: calc(var(--w) * 13.5cqw); }
.f-darkroom .tableau.is-m .print img { height: calc(var(--h) * 13.5cqw) !important; }
.f-darkroom .tableau.is-m .print[data-slot="0"] { left: 17%; } .f-darkroom .tableau.is-m .print[data-slot="1"] { left: 33.3%; } .f-darkroom .tableau.is-m .print[data-slot="2"] { left: 49.4%; }
.f-darkroom .tableau.is-m .print[data-slot="3"] { left: 66.3%; } .f-darkroom .tableau.is-m .print[data-slot="4"] { left: 83%; }
.f-darkroom .tableau.is-m .print .p-cap { font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .f-darkroom .print img { transition: none; } .f-darkroom .print:hover { animation: none; } }
.f-darkroom .print .p-cap { display: flex; gap: .5em; align-items: baseline; padding: 2px 8px; background: rgba(24, 10, 8, .55); border-radius: 2px; }
.f-darkroom .print .p-cap i::before, .f-darkroom .print .p-cap em::before { content: "·"; margin-right: .5em; font-style: normal; opacity: .6; }

/* ---------- the reader, v31: pages exactly as designed, and a book that turns ----------
   Scanned books: every face takes that page's own paper colour (read from the page edge at packing),
   the scan bleeds 1px past the face so no seam of another colour shows. Turning: the leaf lifts and bows,
   the page blocks either side thicken and thin as you read, an outer corner curls when you point at it. */
.fb.is-scan .fb-face, .fb.is-scan .page { background: var(--pg, #f1efeb); }
.fb .page img { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; display: block; }
.fb.is-scan .fb-face .gutter { opacity: .55; }
.fb .fb-leaf.moving .fb-face { box-shadow: 0 0 40px 2px rgba(0, 0, 0, .35); }
.fb .fb-face.front::after { background: linear-gradient(90deg, rgba(0,0,0,calc(var(--sh, 0) * .5)), rgba(0,0,0,calc(var(--sh, 0) * .14)) 55%, rgba(255,255,255,calc(var(--sh, 0) * .12)) 92%, rgba(0,0,0,calc(var(--sh, 0) * .06))); }
.fb-book::before, .fb-book::after { content: ""; position: absolute; top: 3px; bottom: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #e9e3d7 0 1px, #bdb3a3 1px 2px); box-shadow: 0 16px 26px -18px rgba(0, 0, 0, .8); transition: width .5s ease, left .5s ease, right .5s ease; }
.fb-book::before { left: calc(-1 * var(--lt, 0px)); width: var(--lt, 0px); }
.fb-book::after { right: calc(-1 * var(--rt, 0px)); width: var(--rt, 0px); }
.fb.single .fb-book::before, .fb.single .fb-book::after { display: none; }
.fb .fb-face > .curl { display: none; }
.fb .fb-leaf::after { content: ""; position: absolute; z-index: 6; bottom: 0; width: 0; height: 0; pointer-events: none; transition: width .25s ease, height .25s ease; }
.fb .fb-leaf.peek-r::after { right: 0; width: 11%; height: 0; padding-bottom: 11%; background: linear-gradient(to top left, rgba(20, 16, 12, 0) 49%, #efe9dd 50%, #d8cfbf 75%, #c4b9a6); box-shadow: -4px -4px 10px -4px rgba(0, 0, 0, .45); }
.fb .fb-leaf.peek-l::after { right: 0; width: 11%; height: 0; padding-bottom: 11%; background: linear-gradient(to top left, rgba(20, 16, 12, 0) 49%, #efe9dd 50%, #d8cfbf 75%, #c4b9a6); box-shadow: -4px -4px 10px -4px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .fb-book::before, .fb-book::after, .fb .fb-leaf::after { transition: none; } }

/* ---------- v31: no floor-to-floor folio at the foot of the rooms ---------- */
.floor > .landing { display: none !important; }
/* the postcard is handed over at the end of the road */
.drive-card { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(30, 20, 12, calc(var(--card, 0) * .38)), rgba(30, 20, 12, calc(var(--card, 0) * .18)) 70%); }
.drive-card .licence { width: auto; opacity: var(--card, 0); transform: translateY(calc((1 - var(--card, 0)) * 60px)) rotate(calc((1 - var(--card, 0)) * -4deg)); }
.drive.has-card .drive-card .licence { pointer-events: auto; }
.drive-card .pc { width: min(760px, 86vw, calc(78svh * 1.5)); }
.drive-card .pc-hint { color: #f7efdf; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.drive.has-card .mile.on .mile-sign, .drive.has-card .drive-hud { opacity: calc(1 - var(--card, 0)) !important; }
.drive-end { display: none; }
/* the foot line */
.site-foot-v31 { padding: 22px 16px 26px; text-align: center; background: #f7f3ea; border-top: 1px solid rgba(46, 34, 22, .1); }
.sf-line { margin: 0; font-family: var(--f-body, system-ui); font-size: 14px; letter-spacing: .01em; color: #6a625a; }
.sf-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sf-line a:hover { color: #8e2f28; }
.sf-coffee .bean { display: inline-block; width: 12px; height: 15px; margin: 0 5px -2px 0; border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, #a0552a, #5a2a12 70%); transform: rotate(35deg); box-shadow: inset 1px 0 0 rgba(255, 220, 190, .3); position: relative; }
.sf-coffee .bean::after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 1.5px; margin-left: -.75px; background: #2a1206; border-radius: 1px; }
/* postcard note: three short paragraphs */
.pc.has-back .pc-note p { margin: 0 0 .55em; }
.pc.has-back .pc-note { font-size: clamp(10.5px, 2.05cqw, 15px); line-height: 1.7; }
.pc-ig { color: #8e2f28; text-decoration: none; }
.pc-sep { opacity: .5; }
.drive .mile-text:empty { display: none; }
.f-garage .site-foot.site-foot-v31 { background: #f7f3ea !important; color: #6a625a !important; margin: 0; }
/* the lit landing sits on the car's floor line whenever the car stands at a floor (--base set from the shaft height) */
.shaft { background-position: 0 calc(var(--base, 0px) + var(--shift, 0px)), 0 calc(var(--base, 0px) + var(--shift, 0px)), 0 0, 0 0, 0 0 !important;
  /* v34 · each layer tiles at its own storey height, so after any number of 300 px storeys the landing lands exactly where it started */
  background-size: 100% 300px, 100% 30px, 70px 100%, 240px 240px, 100% 100% !important; }

/* the letter lies on the bar: the painted room stays behind it, dimmed and softened */
.f-bar .cu-paper, .cu-paper#cuLetter { background: radial-gradient(ellipse at 50% 45%, rgba(28, 18, 12, .35), rgba(18, 12, 8, .72) 85%) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* stickers: larger, and their label clears the message rule */
.cu-paper .letter .lt-tray { margin-top: 2.2cqw; gap: 1.4cqw; }
.cu-paper .letter .lt-tray-l { line-height: 1.3; }
.cu-paper .letter .lt-tray-row { gap: .6cqw; flex-wrap: wrap; }
.cu-paper .letter .lt-stk { width: clamp(34px, 8.6cqw, 48px) !important; height: clamp(34px, 8.6cqw, 48px) !important; padding: 1px; }
.lt-on { width: clamp(64px, 16cqw, 84px); }
.letter-foot .lt-ig { margin-right: auto; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: #8e2f28; text-decoration: none; border-bottom: 1px solid rgba(142, 47, 40, .35); }
.cu-paper .letter .pk-input:has(textarea) { display: flex; flex-direction: column; }
.cu-paper .letter .pk-input textarea { flex: 1 1 auto; height: auto !important; min-height: 0 !important; }
.cu-paper .letter .lt-tray { margin-top: 14px; }
.cu-paper .letter .lt-stk { width: 46px !important; height: 46px !important; }
@media (max-width: 640px) { .cu-paper .letter .lt-stk { width: 36px !important; height: 36px !important; } }
.cu-paper .letter .lt-tray-row { flex-wrap: nowrap; gap: 2px; justify-content: space-between; }
.cu-paper .letter .lt-stk { width: 42px !important; height: 42px !important; flex: 0 1 42px; }
/* record labels: the type is sized by the label itself, so it can never spill off the paper circle */
.rec-label { container-type: inline-size; overflow: hidden; gap: 0; }
.rec-label b, .f-lab .tableau.is-m .rec-label b { font-size: 15cqw !important; margin-bottom: 9cqw !important; letter-spacing: .04em; white-space: nowrap; }
.rec-label small, .f-lab .tableau.is-m .rec-label small { font-size: 13cqw !important; margin-top: 9cqw !important; white-space: nowrap; }

/* IV · the door has no lock any more: a quiet sign on the door invites you in */
.f-study .tb-box .door-leaf.r .keypad, .f-study .tb-box .vault-note { display: none !important; }
.f-study .hs-door { position: absolute; left: 50%; top: 52%; width: 22%; height: 40%; transform: translate(-50%, -50%); z-index: 4; }
.f-study .hs-door .hs-label { left: 50%; top: 50%; transform: translate(-50%, -50%); justify-items: center; color: #f7efdf; text-shadow: 0 1px 8px rgba(30, 20, 12, .7); border-bottom: 1px solid rgba(247, 239, 223, .5); }
.f-study .hs-door:hover .hs-label, .f-study .hs-door:focus-visible .hs-label { transform: translate(-50%, -50%); color: #fff; }
.f-study .tableau.is-room .hs-door, .f-study .study-stage.is-opening .hs-door { display: none; }
/* the diary lock card sits a little lower on the quilt */
.diary-lock { background: rgba(30, 20, 12, .45); }
/* the close line of the open diary stands just under the book, not at the foot of the screen */
.journal .jp-close { bottom: auto; top: calc(50% + min(25.5vw, 40.5svh) + 16px); }
.f-study .tableau.is-m .journal .jp-close { top: auto; }
@media (max-height: 700px) { .journal .jp-close { top: auto; bottom: 1.5%; } }

/* ================= the façade (intro) ================= */
@property --cut { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.intro { position: fixed; inset: 0; z-index: 75; overflow: hidden; background: #e9dfcc; --cut: 0%; }
html[data-tod="night"] .intro { background: #1d2233; }
.intro[hidden] { display: none; }
.intro-img, .intro-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-img img.none { display: none; }
.intro-img { transform: scale(1.04); transition: transform 6s cubic-bezier(.2, .7, .2, 1); }
.intro.in .intro-img { transform: scale(1); }
.intro .ii-night { opacity: 0; transition: opacity 1.2s ease; }
html[data-tod="night"] .intro .ii-night { opacity: 1; }
/* until the night façade is painted, the day one is dusked in place */
html[data-tod="night"] .intro .ii-day { filter: brightness(.5) saturate(.75) hue-rotate(-8deg); }
.intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 40% at 50% 48%, rgba(20, 14, 8, .38), rgba(20, 14, 8, .12) 60%, transparent 80%); }
.intro-copy { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; text-align: center; color: #fbf6ec;
  text-shadow: 0 2px 18px rgba(20, 14, 8, .55), 0 1px 3px rgba(20, 14, 8, .45); opacity: 0; transition: opacity 1.4s ease .5s; width: min(92vw, 900px); }
.intro.in .intro-copy { opacity: 1; }
.intro-kicker { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 2.2vw, 28px); letter-spacing: .06em; }
.intro-title { margin: 0; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(48px, 8.4vw, 124px); line-height: 1; letter-spacing: .005em; }
.intro-go { margin-top: 26px; padding: 12px 30px 11px; border: 1px solid rgba(251, 246, 236, .75); background: rgba(251, 246, 236, .12); color: #fbf6ec; cursor: pointer;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .08em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .3s, color .3s; }
html[data-lang="zh"] .intro-go { font-family: var(--f-zh); font-style: normal; letter-spacing: .3em; padding-right: calc(30px - .3em); }
.intro-go:hover, .intro-go:focus-visible { background: rgba(251, 246, 236, .92); color: #2a2119; text-shadow: none; outline: none; }
/* the cut: a line of light drops down the façade and the front wall falls away behind it, leaving the section */
.intro.cutting { animation: intro-cut 2.2s cubic-bezier(.55, .05, .35, 1) forwards; }
@keyframes intro-cut { to { --cut: 104%; } }
.intro.cutting .intro-img, .intro.cutting::after { -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--cut) - 4%), #000 var(--cut)); mask-image: linear-gradient(to bottom, transparent calc(var(--cut) - 4%), #000 var(--cut)); }
.intro.cutting { background: transparent; }
.intro.cutting .intro-copy { opacity: 0; transition: opacity .5s ease; }
.intro-cut { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 3; pointer-events: none; }
.intro-cut i { position: absolute; left: 0; right: 0; top: calc(var(--cut) * 1vh / 1%); height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 226, 170, .95) 20%, #fff6de 50%, rgba(255, 226, 170, .95) 80%, transparent); box-shadow: 0 0 18px 4px rgba(255, 214, 150, .55); }
.intro.cutting .intro-cut i { opacity: 1; top: calc(var(--cut) - 2%); position: fixed; }
.intro.gone { opacity: 0; transition: opacity .8s ease; }
body.intro-on .call, body.intro-on .top .sound-btn { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .intro-img { transition: none; } }
.f-study .hs-door .hs-label b { font-size: clamp(16px, 1.3cqw, 22px) !important; }
.f-study .hs-door .hs-label i { font-size: clamp(11px, .85cqw, 14px); }
.diary-lock { background: rgba(30, 20, 12, .18); }
/* the car drives a little left of centre */
.drive.has-plates .car-img { left: calc(33% - clamp(110px, 12vw, 190px)); }
@media (max-width: 640px) { .drive.has-plates .car-img { left: calc(46% - clamp(110px, 12vw, 190px)); } }
/* the invitation: no box — a line of type between two gilt rules, a small “Entrez” beneath, the rules reaching out on hover */
.intro-go { margin-top: 30px; padding: 10px 6px 8px; border: 0 !important; background: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; display: flex; align-items: center; gap: 18px; color: #fbf6ec !important; text-shadow: 0 1px 10px rgba(20, 14, 8, .6) !important; }
.intro-go .ig-rule { display: block; width: 44px; height: 7px; background:
  linear-gradient(#e9cf95, #e9cf95) 0 50% / 100% 1px no-repeat,
  radial-gradient(circle, #e9cf95 0 2.2px, transparent 2.6px) 100% 50% / 7px 7px no-repeat; transition: width .5s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 1px 4px rgba(20, 14, 8, .5)); }
.intro-go .ig-rule:last-child { transform: scaleX(-1); }
.intro-go .ig-text { display: grid; justify-items: center; gap: 4px; }
.intro-go .ig-text > span { font-size: clamp(16px, 1.35vw, 21px); }
.intro-go .ig-text small { font-family: var(--f-serif); font-style: italic; font-size: 12px; letter-spacing: .28em; color: #e9cf95; opacity: .85; text-transform: none; }
.intro-go:hover, .intro-go:focus-visible { color: #fff !important; }
.intro-go:hover .ig-rule, .intro-go:focus-visible .ig-rule { width: 78px; }
.intro-go:focus-visible .ig-text > span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.intro-kicker { font-size: clamp(16px, 1.8vw, 24px); letter-spacing: .18em; }
.intro-title { font-size: clamp(46px, 7.4vw, 112px); }
.intro-copy::before { content: ""; position: absolute; left: 50%; top: 52%; z-index: -1; width: 118%; height: 150%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(30, 20, 12, .42), rgba(30, 20, 12, .2) 55%, transparent 75%); filter: blur(6px); }
.intro-go .ig-text > span { font-size: clamp(17px, 1.5vw, 23px); letter-spacing: .08em; }
html[data-lang="zh"] .intro-go .ig-text > span { letter-spacing: .32em; }
.intro-go .ig-text small { font-size: 13px; }
.intro-go .ig-rule { width: 56px; }
.intro-go:hover .ig-rule, .intro-go:focus-visible .ig-rule { width: 92px; }
.intro-go { align-items: flex-start; } .intro-go .ig-rule { margin-top: calc(clamp(17px, 1.5vw, 23px) * .62); }
.intro-title { font-size: clamp(36px, 5vw, 76px); letter-spacing: .01em; } .intro-kicker { font-size: clamp(14px, 1.3vw, 19px); } .intro-copy { gap: 6px; }
.intro-go .ig-text > span { white-space: nowrap; } @media (max-width: 640px) { .intro-go { gap: 10px; } .intro-go .ig-rule { width: 26px; } .intro-go:hover .ig-rule { width: 36px; } html[data-lang="zh"] .intro-go .ig-text > span { letter-spacing: .18em; } }

/* v34 · spines cut from each portfolio's own cover — true colour, no cloth tint */
.lib-shelf .b-spine.sp-img { background-color: var(--sp); background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 10%;
  filter: none; box-shadow: inset 1.5px 0 2px rgba(0, 0, 0, .18), inset -1.5px 0 2px rgba(0, 0, 0, .22); border-radius: 1px 1px 0 0; }
.lib-shelf .b-spine.sp-img::before, .lib-shelf .b-spine.sp-img::after { display: none; }
.lib-shelf .book:hover .b-spine.sp-img { filter: brightness(1.04); }
.lib-shelf .book:has(.sp-img) .b-cover { filter: none; }
.bl-cap .cap-title { text-wrap: balance; max-width: min(92vw, 40em); line-height: 1.25; }
.cover-gen.paper .pp-title { text-wrap: balance; }
/* v34 · the nine stickers share the tray's width evenly — none can run off the paper */
.cu-paper .letter .lt-tray { min-width: 0; max-width: 100%; }
.cu-paper .letter .lt-tray-row { display: grid !important; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; width: 100%; min-width: 0; justify-items: center; }
.cu-paper .letter .lt-stk { width: 100% !important; max-width: 46px; height: auto !important; aspect-ratio: 1; min-width: 0; flex: none; }

/* v34 · the stamp covers the printed "stamp here" box on the card; a real postmark strikes across its corner */
.pc.has-back .pc-stamp, .pc.has-stamp .pc-stamp { left: 73.2%; right: auto; top: 4.6%; width: 31.2%; aspect-ratio: 500 / 673;
  background: url("../assets/obj/stamp.webp") center / 100% 100% no-repeat; box-shadow: none; transform: rotate(1.6deg);
  filter: drop-shadow(0 1px 1px rgba(60, 40, 20, .28)) drop-shadow(0 3px 6px rgba(60, 40, 20, .14)); }
.pc.has-back .pc-mark, .pc-mark { position: absolute; left: 37.5%; right: auto; top: 17.4%; width: 45%; height: auto; aspect-ratio: 230 / 120;
  border: 0; border-radius: 0; display: block; color: rgba(52, 38, 64, .68); transform: rotate(-9deg); mix-blend-mode: multiply; z-index: 2; pointer-events: none; }
@media (max-width: 600px) { .pc-mark, .pc.has-back .pc-mark { display: block; } }
.pc.has-back .pc-line:nth-of-type(2) { top: calc(44.8% - 1.45em); }
.pc.has-back .pc-line:nth-of-type(3) { top: calc(56.1% - 1.45em); }
.pc.has-back .pc-line:nth-of-type(4) { top: calc(67.4% - 1.45em); }
.pc.has-back .pc-line:nth-of-type(5) { top: calc(78.5% - 1.45em); }
.pc.has-back .pc-mark, .pc-mark { left: 36%; top: 19.5%; width: 52%; }
.pc.has-back .pc-stamp { z-index: 1; }
.pc.has-back .pc-mark { z-index: 3; }
.pc.has-back .pc-mark { mix-blend-mode: normal; }
.pc.has-back .pc-addr, .pc.has-back .pc-back { transform-style: flat; }
.pc.has-back .pc-mark { transform: translateZ(2px) rotate(-9deg); }

/* v34 · a milestone pin stands only while its scene is on the road; once passed (or not yet reached) it is gone */
.drive .mile .mile-post { opacity: 0; transition: opacity .5s ease; }
.drive .mile.on .mile-post { opacity: 1; }
.drive.has-card .mile.on .mile-post { opacity: calc(1 - var(--card, 0)); }

/* v34 · the section cut: a dusty bordeaux with a fine inked hatch by day; by night moonlit limestone, light against the dark rooms and of a piece with the street */
#sectionSvg .poche { fill: url(#pocheD); stroke: #4e2a2c; stroke-width: .6; }
html[data-tod="night"] #sectionSvg .poche { fill: url(#pocheN); stroke: rgba(250, 240, 222, .45); stroke-width: .6; }

/* v34 · the façade: no dark halo — by day the title is set in ink on the limestone, by night in cream */
.intro::after, .intro-copy::before { display: none !important; }
.intro-copy { color: #2b2119; text-shadow: 0 0 18px rgba(251, 246, 236, .55), 0 0 2px rgba(251, 246, 236, .6); }
.intro-go { color: #2b2119 !important; text-shadow: 0 0 14px rgba(251, 246, 236, .6) !important; }
.intro-go .ig-rule { filter: none; background:
  linear-gradient(#8e2f28, #8e2f28) 0 50% / 100% 1px no-repeat,
  radial-gradient(circle, #8e2f28 0 2.2px, transparent 2.6px) 100% 50% / 7px 7px no-repeat; }
.intro-go .ig-text small { color: #8e2f28; opacity: .9; }
.intro-go:hover, .intro-go:focus-visible { color: #7a2a31 !important; }
html[data-tod="night"] .intro-copy { color: #fbf6ec; text-shadow: 0 1px 12px rgba(10, 12, 24, .45); }
html[data-tod="night"] .intro-go { color: #fbf6ec !important; text-shadow: 0 1px 10px rgba(10, 12, 24, .45) !important; }
html[data-tod="night"] .intro-go .ig-rule { background:
  linear-gradient(#e9cf95, #e9cf95) 0 50% / 100% 1px no-repeat,
  radial-gradient(circle, #e9cf95 0 2.2px, transparent 2.6px) 100% 50% / 7px 7px no-repeat; }
html[data-tod="night"] .intro-go .ig-text small { color: #e9cf95; }
html[data-tod="night"] .intro-go:hover, html[data-tod="night"] .intro-go:focus-visible { color: #fff !important; }

/* v34 · entering: the front wall dissolves from the middle of the building outwards, and the section shows through */
@property --rv { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.intro-cut { display: none; }
.intro.cutting, html[data-tod="night"] .intro.cutting { animation: intro-reveal 3.2s cubic-bezier(.5, .1, .4, 1) forwards; background: transparent; }
@keyframes intro-reveal { from { --rv: 0%; } to { --rv: 170%; } }
.intro.cutting .intro-img { -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, transparent calc(var(--rv) - 45%), #000 var(--rv)); mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, transparent calc(var(--rv) - 45%), #000 var(--rv)); transform: scale(1.03); transition: transform 2.6s ease; }
.intro.cutting .intro-copy { opacity: 0; transition: opacity .7s ease; }
/* the cover-cut spines keep their true colour but take the same round of the lamp as their neighbours */
.lib-shelf .b-spine.sp-img::before { display: block !important; content: ""; position: absolute; inset: 0; left: 0; right: 0; top: 0; height: auto; opacity: 1; box-shadow: none;
  background: linear-gradient(90deg, rgba(20, 10, 4, .3) 0, rgba(255, 236, 205, .12) 24%, rgba(255, 236, 205, 0) 48%, rgba(20, 10, 4, .08) 72%, rgba(20, 10, 4, .34) 100%),
    linear-gradient(180deg, rgba(40, 22, 10, .28) 0, rgba(40, 22, 10, 0) 14%, rgba(40, 22, 10, 0) 84%, rgba(40, 22, 10, .22) 100%); }

/* v36 · the screen is framed by the theatre's own velvet: valance across the top, drapes tied back either side;
   the film plays in the opening between them */
.stage-drape { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url("../assets/obj/stage-curtains.webp") center / 100% 100% no-repeat;
  filter: saturate(.92) brightness(.94) drop-shadow(0 0 1.2cqw rgba(10, 5, 3, .55)); }
.f-theatre .stage { inset: 9.5% 14% 0 14%; z-index: 1; }
html[data-tod="night"] .stage-drape { filter: saturate(.85) brightness(.72) drop-shadow(0 0 1.2cqw rgba(0, 0, 0, .6)); }
/* the drapes replace the painted ones: the frame spans the whole proscenium opening */
.f-theatre .tableau:not(.is-m) .stage-box { left: 18.9%; width: 62.2%; top: 20%; height: 56.2%; background: #0b0706; }
.f-theatre .tableau:not(.is-m) .stage { inset: 9.5% 15.5% 0 15.5%; }

/* centred type: a heading's count sits under it, not off to one side */
#cuCellar .cellar-title { text-align: center; }
#cuCellar .cellar-title small { display: block; margin: .5em 0 0; text-align: center; }

/* v36 · type is centred throughout: labels stack (dot, name, note) on one axis */
.hs-label { display: grid !important; justify-items: center; text-align: center; gap: 3px; padding: 0 0 6px; }
.hs-label::before { justify-self: center; margin-bottom: 3px; }
html[data-lang="zh"] .hs-label b { margin-right: -.24em; }
.f-study .hs-door .hs-label { justify-items: center; }
.tb-box > .carte .carte-head { flex-direction: column; align-items: center; gap: .3cqw; text-align: center; }
.tb-box > .bar-stage .bar-order { justify-items: center; text-align: center; }
.tb-box > .bar-stage .bar-recipe { text-align: center; }
.tb-box > .bar-stage .bar-actions { justify-content: center; }
.f-lab .tableau:not(.is-m) .rec-cap { text-align: center; }
.f-lab .rec-cap .rc-name, .f-lab .rec-cap .rc-desc { text-align: center; }
@media (min-width: 900px) {
  .lobby-story { left: 50% !important; right: auto; transform: translateX(-50%); top: calc(7svh + 88px); bottom: auto !important; width: max-content; max-width: 70vw;
    display: flex !important; align-items: baseline; justify-content: center; gap: 14px; text-align: center; white-space: nowrap; font-size: 14px; }
}
/* the bar plate is cropped at the sides on 16:10 screens: keep the menu and the letter sign inside the visible part */
.f-bar .tableau:not(.is-m) .tb-box > .carte { left: 8%; right: 8%; }
.f-bar .tableau:not(.is-m) .hs-letter { left: 8.5% !important; }

/* ================= v38 · the way back to the whole house: one small lit point above the lift plate; its words appear beside it ================= */
.to-plan { position: fixed; z-index: 40; right: 24px; bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); width: 46px; height: 34px;
  display: grid; place-items: center; text-decoration: none; color: #2e2216; transition: opacity .4s; }
.to-plan .tp-dot { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8e6, #f2d08a 55%, #c99a48);
  box-shadow: 0 0 0 1px rgba(107, 82, 40, .55), 0 0 10px 2px rgba(246, 211, 138, .75); animation: tp-breath 3.2s ease-in-out infinite; transition: transform .25s; }
@keyframes tp-breath { 50% { box-shadow: 0 0 0 1px rgba(107, 82, 40, .55), 0 0 16px 5px rgba(246, 211, 138, .5); } }
.to-plan .tp-t { position: absolute; right: calc(100% - 6px); top: 50%; transform: translate(6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 6px 12px 6px 14px; font-family: var(--f-serif); font-style: italic; font-size: 14px; letter-spacing: .04em; color: #2e2216;
  background: rgba(250, 245, 234, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(46, 34, 22, .14); border-radius: 2px;
  transition: opacity .3s, transform .3s; }
html[data-lang="zh"] .to-plan .tp-t > span[lang="zh"] { font-family: var(--f-zh); font-style: normal; letter-spacing: .14em; }
.to-plan .tp-t i { font-style: italic; opacity: .7; }
.to-plan:hover .tp-t, .to-plan:focus-visible .tp-t, .to-plan.peek .tp-t { opacity: 1; transform: translate(0, -50%); }
.to-plan:hover .tp-dot, .to-plan:focus-visible .tp-dot { transform: scale(1.3); }
.to-plan:focus-visible { outline: none; }
body[data-floor="library"] .to-plan .tp-t, body[data-floor="theatre"] .to-plan .tp-t, body[data-floor="darkroom"] .to-plan .tp-t, body[data-floor="bar"] .to-plan .tp-t, body[data-floor="garage"] .to-plan .tp-t,
html[data-tod="night"] body[data-floor="greenhouse"] .to-plan .tp-t, html[data-tod="night"] body[data-floor="study"] .to-plan .tp-t, html[data-tod="night"] body[data-floor="hall"] .to-plan .tp-t {
  color: #f3ead8; background: rgba(24, 20, 26, .45); border-color: rgba(255, 244, 222, .25); }
body[data-floor="lobby"] .to-plan, body.modal .to-plan, body.intro-on .to-plan { opacity: 0; pointer-events: none; }
@media (max-width: 899px) { .to-plan { right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); } }

/* the postcard's last line leads back into the house */
.pc-home { display: block; margin: 14px auto 0; padding: 4px 2px; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer;
  font-family: var(--f-serif); font-style: italic; font-size: 15px; letter-spacing: .04em; color: #7a2a31; opacity: calc(var(--card, 1)); }
html[data-lang="zh"] .pc-home { font-family: var(--f-zh); font-style: normal; font-size: 14px; letter-spacing: .14em; }
.pc-home:hover, .pc-home:focus-visible { color: #2e2216; outline: none; }

/* −III · the garage under renovation: the painted room behind dust sheets, an enamel sign on the wall */
.f-works .tb-img { filter: grayscale(.55) sepia(.25) blur(2.5px) brightness(.78); transform: scale(1.03); }
.f-works .tb-box::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(240, 232, 216, .25), rgba(60, 48, 36, .25)),
    repeating-linear-gradient(95deg, rgba(255, 252, 244, 0) 0 9%, rgba(255, 252, 244, .14) 9% 10%, rgba(255, 252, 244, 0) 10% 17%); }
.works-sign { position: absolute; z-index: 3; left: 50%; top: 52%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2.2cqw; text-align: center; }
.ws-plate { margin: 0; padding: 1.6cqw 3.2cqw 1.4cqw; display: grid; gap: .5cqw; justify-items: center; background: #f4ecda; color: #2e2216;
  border: 1px solid #6b5228; box-shadow: inset 0 0 0 4px #f4ecda, inset 0 0 0 5px rgba(122, 42, 49, .7), 0 1.2cqw 2.4cqw -1.2cqw rgba(20, 12, 5, .7); transform: rotate(-1.2deg); }
.ws-plate b { font-family: var(--f-serif); font-weight: 500; font-size: clamp(22px, 2.6cqw, 40px); letter-spacing: .06em; }
html[data-lang="zh"] .ws-plate b { font-family: var(--f-zh); font-weight: 600; letter-spacing: .4em; margin-right: -.4em; }
.ws-plate i { font-family: var(--f-serif); font-style: italic; font-size: clamp(12px, 1.1cqw, 16px); color: #7a2a31; letter-spacing: .08em; }
.ws-tape { display: block; width: min(52cqw, 640px); height: 1.6cqw; min-height: 12px; transform: rotate(-3deg);
  background: repeating-linear-gradient(135deg, #e8c14a 0 1.2cqw, #2e2a24 1.2cqw 2.4cqw); box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .35); opacity: .9; }
.ws-back { padding: 6px 2px; border: 0; border-bottom: 1px solid rgba(255, 246, 228, .7); background: none; cursor: pointer; color: #fff6e4;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(14px, 1.15cqw, 17px); letter-spacing: .06em; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
html[data-lang="zh"] .ws-back { font-family: var(--f-zh); font-style: normal; letter-spacing: .18em; }
.f-works .tb-box { container-type: inline-size; }
.f-works .tb-over .rh-note { color: inherit; }
.f-works .ga-over .room-head .rh-note { display: block; }
.f-works .tableau.is-m .ga-over { left: 6%; width: 88%; }

/* ================= v37 · the façade title: white type on a clean glass plaque, one axis ================= */
.intro .intro-copy, html[data-tod="night"] .intro .intro-copy {
  width: auto; max-width: min(88vw, 720px); padding: clamp(26px, 4.2vh, 44px) clamp(30px, 5vw, 72px) clamp(22px, 3.6vh, 38px);
  gap: 0; color: #fffaf0; text-shadow: none;
  background: linear-gradient(180deg, rgba(34, 26, 20, .46), rgba(34, 26, 20, .38));
  backdrop-filter: blur(5px) saturate(1.05); -webkit-backdrop-filter: blur(5px) saturate(1.05);
  border: 1px solid rgba(255, 246, 228, .28); border-radius: 2px;
  box-shadow: inset 0 0 0 6px rgba(34, 26, 20, 0), inset 0 0 0 7px rgba(233, 207, 149, .5), 0 30px 60px -36px rgba(20, 12, 6, .6); }
html[data-tod="night"] .intro .intro-copy { background: linear-gradient(180deg, rgba(14, 16, 30, .5), rgba(14, 16, 30, .42)); }
.intro .intro-kicker { margin: 0 0 10px; font-family: var(--f-serif); font-style: italic; font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .32em; color: #e9cf95; }
.intro .intro-title { margin: 0; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(38px, 5.2vw, 78px); line-height: 1.04; letter-spacing: .01em; color: #fffaf0; white-space: nowrap; }
.intro .intro-copy::after { content: ""; order: 0; display: block; width: 64px; height: 1px; margin: 18px auto 4px; background: rgba(233, 207, 149, .75); }
.intro .intro-go { order: 1; margin-top: 10px; color: #fffaf0 !important; text-shadow: none !important; }
.intro .intro-go .ig-rule, html[data-tod="night"] .intro .intro-go .ig-rule { background:
  linear-gradient(#e9cf95, #e9cf95) 0 50% / 100% 1px no-repeat,
  radial-gradient(circle, #e9cf95 0 2.2px, transparent 2.6px) 100% 50% / 7px 7px no-repeat; }
.intro .intro-go .ig-text small { color: #e9cf95; }
.intro .intro-go:hover, .intro .intro-go:focus-visible { color: #ffffff !important; }
@media (max-width: 640px) { .intro .intro-title { white-space: normal; font-size: clamp(34px, 10vw, 46px); } .intro .intro-copy { max-width: 90vw; } }
/* v37 · room heads: pushed down (--hd, set from the window) so the kicker never touches the top edge */
.tb-over .room-head { translate: 0 var(--hd, 0px); }

/* v38 · where the painting has no room above (darkroom clothesline, salon picture rail) the head is set in the lower middle */
.f-darkroom .tableau:not(.is-m) .dr-foot { top: 64.5%; gap: .7cqw; }
.f-darkroom .dr-foot .room-head.rh-low { margin: 0 0 .4cqw; padding: 0; color: #f0d8c4; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); display: grid; justify-items: center; text-align: center; gap: .45cqw; }
.f-darkroom .dr-foot .room-head.rh-low .rh-note { display: none; }
.f-darkroom .tableau:not(.is-m) .dr-foot .drag-hint { display: none; }
.f-darkroom .tableau.is-m .dr-foot { top: 60%; }
.f-hall .tableau .ga-over { top: 64% !important; }
.f-hall .tableau.is-m .ga-over { top: 62% !important; }
.f-hall .tableau .ga-over .room-head .rh-note { display: none; }

/* ================= v38 · the façade as a French film poster: title set in the sky, billing at the foot, no plaque ================= */
.intro .intro-copy, html[data-tod="night"] .intro .intro-copy {
  position: absolute; inset: 0; left: 0; top: 0; transform: none; width: auto; max-width: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;
  background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fffaf0; }
.intro .intro-copy::after, .intro .intro-copy::before { display: none !important; content: none; }
/* a print's graded sky and street, so white type stays crisp without a box */
.intro .intro-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 42, 62, .30) 0%, rgba(36, 42, 62, .10) 22%, rgba(36, 42, 62, 0) 34%, rgba(36, 42, 62, 0) 70%, rgba(40, 32, 24, .26) 100%); }
html[data-tod="night"] .intro .intro-img::after { background: linear-gradient(180deg, rgba(8, 10, 24, .35) 0%, rgba(8, 10, 24, 0) 32%, rgba(8, 10, 24, 0) 70%, rgba(8, 8, 14, .4) 100%); }
.intro .intro-top { padding-top: clamp(26px, 5.2vh, 60px); display: grid; justify-items: center; gap: 0; }
.intro .intro-kicker { margin: 0 0 clamp(4px, .8vh, 10px); font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .42em; margin-right: -.42em; color: #fffaf0; text-shadow: 0 1px 12px rgba(30, 36, 56, .45); }
.intro .intro-title { margin: 0; font-family: "Bodoni Moda", var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(40px, 6.4vw, 104px); line-height: .98; letter-spacing: -.005em;
  color: #fffaf0; white-space: nowrap; text-shadow: 0 2px 22px rgba(30, 36, 56, .35), 0 0 2px rgba(30, 36, 56, .25); }
.intro .intro-bottom { padding-bottom: clamp(18px, 4vh, 44px); display: grid; justify-items: center; gap: clamp(8px, 1.4vh, 14px); }
.intro .intro-go { margin: 0; color: #fffaf0 !important; text-shadow: 0 1px 10px rgba(30, 22, 14, .5) !important; }
.intro .intro-go .ig-text small { color: #fffaf0; opacity: .85; }
.intro .intro-go .ig-rule, html[data-tod="night"] .intro .intro-go .ig-rule { filter: none; background:
  linear-gradient(#fffaf0, #fffaf0) 0 50% / 100% 1px no-repeat,
  radial-gradient(circle, #fffaf0 0 2.2px, transparent 2.6px) 100% 50% / 7px 7px no-repeat; }
.intro .intro-bill { margin: 0; font-family: "Bodoni Moda", var(--f-serif); font-size: clamp(10px, .78vw, 12px); letter-spacing: .38em; margin-right: -.38em; text-transform: none; color: rgba(255, 250, 240, .86); text-shadow: 0 1px 8px rgba(30, 22, 14, .55); }
.intro .intro-bill span { margin: 0 .5em; }
html[data-tod="night"] .intro .ii-day { filter: none; }
@media (max-width: 640px) {
  .intro .intro-title { white-space: normal; font-size: clamp(40px, 12.5vw, 56px); line-height: 1.02; max-width: 9em; }
  .intro .intro-top { padding-top: 9vh; }
  .intro .intro-bill { letter-spacing: .22em; margin-right: -.22em; }
}
.intro .intro-go { order: 0; }
.intro .intro-top { padding-top: clamp(18px, 3.4vh, 40px); }
.intro .intro-kicker { margin-bottom: clamp(2px, .5vh, 6px); font-size: clamp(12px, .95vw, 15px); }
.intro .intro-title { font-size: clamp(38px, 5.3vw, 88px); }
@media (max-width: 640px) { .intro .intro-top { padding-top: 7vh; } .intro .intro-title { font-size: clamp(40px, 12.5vw, 56px); } }
@media (max-width: 640px) { .intro .intro-title { max-width: 6.2em; font-size: clamp(44px, 13.5vw, 60px); line-height: 1; } .intro .intro-top { padding-top: 5vh; } }
.f-hall .tableau:not(.is-m) .ga-over { top: 68.5% !important; }
.f-darkroom .tableau:not(.is-m) .dr-foot { top: 66.5%; gap: .55cqw; }
.f-darkroom .dr-foot .room-head.rh-low { gap: .3cqw; margin-bottom: .2cqw; }

/* ================= v39 · the façade: a Parisian invitation, set in the middle of the street
   A pale frosted haze (no box, no shadow) lifts the type off the stone; deep ink Didone by day, ivory by night. ================= */
.intro .intro-img::after { display: none; }
.intro .intro-copy, html[data-tod="night"] .intro .intro-copy {
  position: absolute; inset: 0; transform: none; width: auto; max-width: none; margin: 0; padding: 0;
  display: grid; place-items: center; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: #1f2a40; text-shadow: none; z-index: 2; }
.intro .intro-veil { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(78vw, 1120px); height: min(58vh, 560px); transform: translate(-50%, -50%);
  pointer-events: none; background: rgba(251, 247, 239, .46);
  backdrop-filter: blur(9px) saturate(1.04); -webkit-backdrop-filter: blur(9px) saturate(1.04);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 34%, rgba(0, 0, 0, .55) 56%, transparent 74%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 34%, rgba(0, 0, 0, .55) 56%, transparent 74%);
  opacity: 0; transition: opacity 1.6s ease .2s; }
.intro.in .intro-veil { opacity: 1; }
html[data-tod="night"] .intro .intro-veil { background: rgba(16, 20, 38, .42); }
.intro .intro-card { display: grid; justify-items: center; text-align: center; gap: 0; opacity: 0; transform: translateY(8px); transition: opacity 1.6s ease .5s, transform 1.6s cubic-bezier(.2, .7, .2, 1) .5s; }
.intro.in .intro-card { opacity: 1; transform: none; }
.intro .intro-kicker { margin: 0 0 clamp(10px, 1.6vh, 18px); font-family: "Bodoni Moda", var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: .3em; margin-right: -.3em; color: #9b7a3c; text-shadow: none; }
.intro .intro-title { margin: 0; display: grid; justify-items: center; line-height: 1; white-space: normal; text-shadow: none; color: inherit; font-size: inherit; letter-spacing: 0; max-width: none; }
.intro .intro-title .it-a { font-family: "Bodoni Moda", var(--f-serif); font-style: normal; font-weight: 400; font-variation-settings: "opsz" 96;
  font-size: clamp(15px, 1.35vw, 22px); letter-spacing: .62em; margin-right: -.62em; text-transform: uppercase; }
.intro .intro-title .it-b { margin-top: clamp(2px, .6vh, 8px); font-family: "Bodoni Moda", var(--f-serif); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 96;
  font-size: clamp(64px, 8.6vw, 148px); line-height: .95; letter-spacing: -.01em; }
.intro .intro-orn { display: block; width: 120px; height: 9px; margin: clamp(14px, 2.2vh, 24px) 0 clamp(12px, 2vh, 20px);
  background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent) 0 50% / 100% 1px no-repeat,
    radial-gradient(circle, currentColor 0 2px, transparent 2.4px) 50% 50% / 9px 9px no-repeat; opacity: .55; color: #9b7a3c; }
.intro .intro-go { margin: 0; padding: 4px 2px; display: grid; justify-items: center; gap: 6px; border: 0 !important; background: none !important; cursor: pointer;
  color: inherit !important; text-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.intro .intro-go .ig-text { display: block; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-family: "Bodoni Moda", var(--f-serif); font-style: italic; font-size: clamp(16px, 1.3vw, 21px); letter-spacing: .06em; }
html[data-lang="zh"] .intro .intro-go .ig-text > span[lang="zh"] { font-family: var(--f-zh); font-style: normal; font-size: clamp(15px, 1.15vw, 19px); letter-spacing: .38em; margin-right: -.38em; }
.intro .intro-go small { font-family: "Bodoni Moda", var(--f-serif); font-style: italic; font-size: 13px; letter-spacing: .3em; margin-right: -.3em; color: #9b7a3c; opacity: 1; }
.intro .intro-go:hover .ig-text, .intro .intro-go:focus-visible .ig-text { color: #7a2a31; }
.intro .intro-go:focus-visible { outline: none; }
.intro .intro-bill { position: absolute; left: 0; right: 0; bottom: clamp(16px, 3.4vh, 34px); margin: 0; text-align: center;
  font-family: "Bodoni Moda", var(--f-serif); font-size: 11px; letter-spacing: .5em; margin-right: 0; text-transform: uppercase; color: rgba(255, 252, 244, .92); text-shadow: 0 1px 6px rgba(30, 22, 14, .45); }
.intro .intro-bill i { font-style: normal; margin: 0 .6em; opacity: .7; }
html[data-tod="night"] .intro .intro-copy { color: #f6efe2; }
html[data-tod="night"] .intro .intro-kicker, html[data-tod="night"] .intro .intro-orn, html[data-tod="night"] .intro .intro-go small { color: #e2c690; }
html[data-tod="night"] .intro .intro-go:hover .ig-text { color: #fff; }
.intro.cutting .intro-veil { opacity: 0; transition: opacity .6s ease; }
@media (max-width: 640px) {
  .intro .intro-veil { width: 112vw; height: 50vh; }
  .intro .intro-title .it-b { font-size: clamp(56px, 17vw, 76px); }
  .intro .intro-title .it-a { letter-spacing: .5em; margin-right: -.5em; }
  .intro .intro-bill { letter-spacing: .3em; font-size: 10px; }
}
/* v39b · the invitation as a light card: cream laid paper, a double gilt hairline, set in the middle of the façade */
.intro .intro-copy, html[data-tod="night"] .intro .intro-copy { grid-template-columns: 100%; grid-template-rows: 100%; }
.intro .intro-veil { display: none; }
.intro .intro-card { justify-self: center; align-self: center; margin-top: 4vh; box-sizing: border-box; width: min(86vw, 520px);
  padding: clamp(30px, 4.4vh, 46px) clamp(28px, 3.4vw, 56px) clamp(26px, 3.8vh, 40px);
  background: rgba(251, 248, 241, .86); backdrop-filter: blur(4px) saturate(1.05); -webkit-backdrop-filter: blur(4px) saturate(1.05);
  box-shadow: inset 0 0 0 7px rgba(251, 248, 241, 0), inset 0 0 0 8px rgba(155, 122, 60, .55), inset 0 0 0 11px rgba(251, 248, 241, 0), inset 0 0 0 12px rgba(155, 122, 60, .3),
    0 24px 50px -30px rgba(40, 30, 18, .45); }
html[data-tod="night"] .intro .intro-card { background: rgba(20, 24, 42, .72);
  box-shadow: inset 0 0 0 8px rgba(226, 198, 144, 0), inset 0 0 0 8px rgba(20, 24, 42, 0), inset 0 0 0 8px rgba(226, 198, 144, .5), inset 0 0 0 12px rgba(226, 198, 144, .25), 0 24px 50px -30px rgba(0, 0, 0, .6); }
.intro .intro-title .it-b { font-size: clamp(54px, 5.4vw, 92px); }
.intro .intro-title .it-a { font-size: clamp(13px, 1vw, 17px); }
@media (max-width: 640px) { .intro .intro-card { margin-top: 10vh; } .intro .intro-title .it-b { font-size: clamp(50px, 15vw, 66px); } }

/* ================= v39c · the façade as an affiche: the painting printed on cream paper with a margin, the title set beneath it in ink ================= */
.intro { --pw: min(86vw, calc((100svh - 230px) * 1.7778)); --ph: calc(var(--pw) / 1.7778); --pt: clamp(18px, 4svh, 40px);
  background: #f3ede1 !important; color: #1f2a40; transition: background 1.4s ease; }
.intro::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: .9; }
html[data-tod="night"] .intro { background: #151a2c !important; color: #f3ead8; }
.intro .intro-img { inset: auto; left: 50%; top: var(--pt); width: var(--pw); height: var(--ph); transform: translateX(-50%); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(31, 42, 64, .18), 0 0 0 7px #f3ede1, 0 0 0 8px rgba(155, 122, 60, .45), 0 18px 40px -28px rgba(40, 30, 18, .5); }
html[data-tod="night"] .intro .intro-img { box-shadow: 0 0 0 1px rgba(226, 198, 144, .25), 0 0 0 7px #151a2c, 0 0 0 8px rgba(226, 198, 144, .4), 0 18px 40px -28px rgba(0, 0, 0, .6); }
.intro.in .intro-img { transform: translateX(-50%); }
.intro .intro-img img { transform: scale(1.04); transition: transform 6s cubic-bezier(.2, .7, .2, 1); }
.intro.in .intro-img img { transform: scale(1); }
.intro .intro-copy, html[data-tod="night"] .intro .intro-copy { position: absolute; inset: calc(var(--pt) + var(--ph) + 8px) 0 0 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  color: inherit; background: none; box-shadow: none; transform: none; width: auto; max-width: none; padding: 0 0 clamp(26px, 4svh, 40px); margin: 0; }
.intro .intro-card, html[data-tod="night"] .intro .intro-card { width: auto; margin: 0; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  display: grid; justify-items: center; gap: 0; }
.intro .intro-kicker { margin: 0 0 6px; font-size: clamp(12px, .95vw, 15px); letter-spacing: .34em; margin-right: -.34em; color: #9b7a3c; }
.intro .intro-title { display: block; margin: 0; font-family: "Bodoni Moda", var(--f-serif); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 96;
  font-size: clamp(40px, 5.6svh, 64px); line-height: 1.04; letter-spacing: 0; white-space: nowrap; color: inherit; text-shadow: none; }
.intro .intro-go { margin-top: clamp(10px, 1.8svh, 18px); display: flex; align-items: baseline; gap: 14px; }
.intro .intro-go .ig-text { padding-bottom: 4px; }
.intro .intro-go small { color: #9b7a3c; }
.intro .intro-go:focus:not(:hover) .ig-text { color: inherit; }
.intro .intro-bill { position: static; margin: clamp(12px, 2.2svh, 22px) 0 0; color: rgba(31, 42, 64, .55); text-shadow: none; font-size: 10px; letter-spacing: .5em; margin-right: -.5em; }
html[data-tod="night"] .intro .intro-bill { color: rgba(243, 234, 216, .55); }
html[data-tod="night"] .intro .intro-kicker, html[data-tod="night"] .intro .intro-go small { color: #e2c690; }
/* entering: the print dissolves, then the paper */
.intro.cutting { background: transparent !important; }
.intro.cutting::before { opacity: 0; transition: opacity 1.2s ease; }
.intro.cutting .intro-img { box-shadow: none; transition: box-shadow .6s; }
.intro.cutting .intro-copy { opacity: 0; transition: opacity .6s ease; }
@media (max-aspect-ratio: 1/1) {
  .intro { --pw: min(88vw, calc((100svh - 250px) * .5625)); --ph: calc(var(--pw) / .5625); --pt: clamp(16px, 3svh, 30px); }
  .intro .intro-title { font-size: clamp(34px, 9.6vw, 46px); }
  .intro .intro-go { flex-direction: column; align-items: center; gap: 4px; }
  .intro .intro-bill { letter-spacing: .3em; margin-right: -.3em; }
}
.intro .intro-copy, html[data-tod="night"] .intro .intro-copy { inset: calc(var(--pt) + var(--ph) + clamp(20px, 3svh, 34px)) 0 0 0; justify-content: flex-start; }
.intro .intro-go, .intro .intro-go:focus, .intro .intro-go:focus-visible, html[data-tod="night"] .intro .intro-go { color: inherit !important; }
.intro .intro-go:hover .ig-text { color: #7a2a31; }
html[data-tod="night"] .intro .intro-go:hover .ig-text { color: #e2c690; }
.intro .intro-kicker { margin-bottom: 4px; }
.intro .intro-title { font-size: clamp(40px, 6svh, 70px); }
.intro { --pw: min(86vw, calc((100svh - 260px) * 1.7778)); }
.intro .intro-go .ig-text > span[lang="zh"] { margin-right: -.38em; }
.intro .intro-go .ig-text { padding-right: .38em; padding-left: .38em; }
@media (max-aspect-ratio: 1/1) {
  .intro { --pw: min(88vw, calc((100svh - 260px) * .5625)); }
  .intro .intro-title { font-size: clamp(32px, 9.4vw, 46px); }
}
/* entering: the print grows to fill the window, the paper falls away, then the façade dissolves into the section */
.intro .intro-img { transition: left 1.1s cubic-bezier(.6, .05, .25, 1), top 1.1s cubic-bezier(.6, .05, .25, 1), width 1.1s cubic-bezier(.6, .05, .25, 1), height 1.1s cubic-bezier(.6, .05, .25, 1), transform 1.1s cubic-bezier(.6, .05, .25, 1), box-shadow .8s; }
.intro.cutting .intro-img { left: 0; top: 0; width: 100vw; height: 100svh; transform: none !important; box-shadow: none; }
.intro.cutting, html[data-tod="night"] .intro.cutting { animation: intro-reveal 2.4s cubic-bezier(.45, .05, .3, 1) 1.05s both; background: transparent !important; transition: background .9s ease .5s; }

/* ================= v40 · the façade as a full-screen French film poster
   the painting bleeds to every edge; the title sits low over the street like an affiche, the floors billed as the cast ================= */
.intro, html[data-tod="night"] .intro { background: #1c1712 !important; color: #fffaf0; }
.intro::before { display: none; }
.intro .intro-img, .intro.in .intro-img { inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; box-shadow: none !important; }
.intro .intro-img img { transform: scale(1.06); transition: transform 9s cubic-bezier(.2, .7, .2, 1); }
.intro.in .intro-img img { transform: scale(1); }
/* the print's own grading: a clear sky, the street sinking into warm shadow for the type */
.intro .intro-img::after { display: block !important; content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0) 0%, rgba(20, 16, 12, 0) 48%, rgba(24, 18, 12, .28) 64%, rgba(22, 16, 10, .62) 82%, rgba(18, 13, 8, .82) 100%); }
html[data-tod="night"] .intro .intro-img::after { background: linear-gradient(180deg, rgba(8, 10, 20, 0) 0%, rgba(8, 10, 20, 0) 46%, rgba(8, 10, 20, .35) 64%, rgba(6, 8, 16, .7) 84%, rgba(4, 6, 12, .86) 100%); }
/* a thin poster border, inset */
.intro .intro-img::before { content: ""; position: absolute; inset: clamp(10px, 1.6vw, 22px); z-index: 1; pointer-events: none; border: 1px solid rgba(255, 250, 240, .42); }
.intro .intro-copy, html[data-tod="night"] .intro .intro-copy { inset: 0; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 4vw clamp(26px, 4.4svh, 46px); color: #fffaf0; }
.intro .intro-card, html[data-tod="night"] .intro .intro-card { width: auto; margin: 0; padding: 0; background: none !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; display: grid; justify-items: center; }
.intro .intro-kicker, html[data-tod="night"] .intro .intro-kicker { margin: 0 0 clamp(4px, .8svh, 10px); font-family: "Bodoni Moda", var(--f-serif); font-style: normal; font-size: clamp(12px, .95vw, 15px);
  letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; color: #fffaf0; opacity: .92; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.intro .intro-kicker i { font-style: italic; text-transform: none; letter-spacing: .08em; }
.intro .intro-title { font-family: "Bodoni Moda", var(--f-serif); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 96; color: #fffaf0;
  font-size: clamp(56px, 9.2vw, 156px); line-height: .92; letter-spacing: -.012em; white-space: nowrap; text-shadow: 0 2px 30px rgba(10, 6, 2, .35); }
.intro .intro-go { margin-top: clamp(14px, 2.6svh, 28px); flex-direction: row; align-items: baseline; gap: 16px; }
.intro .intro-go .ig-text { border-bottom-color: rgba(255, 250, 240, .8); }
.intro .intro-go small, html[data-tod="night"] .intro .intro-go small { color: #e9cf95; }
.intro .intro-go:hover .ig-text, html[data-tod="night"] .intro .intro-go:hover .ig-text { color: #e9cf95; }
.intro .intro-bill { position: static; margin: clamp(18px, 3.4svh, 36px) 0 0; display: grid; gap: 6px; justify-items: center; text-transform: none; letter-spacing: 0; text-shadow: none; }
.intro .intro-bill p { margin: 0; font-family: "Bodoni Moda", var(--f-serif); font-size: clamp(9px, .72vw, 11px); letter-spacing: .26em; color: rgba(255, 250, 240, .7); text-align: center; }
.intro .intro-bill b { font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: rgba(255, 250, 240, .88); }
.intro .intro-bill p:last-child { letter-spacing: .5em; font-size: clamp(8px, .62vw, 10px); color: rgba(255, 250, 240, .55); }
.intro .intro-bill span { margin: 0 .4em; }
.intro.cutting .intro-img::before, .intro.cutting .intro-img::after { opacity: 0; transition: opacity .8s; }
.intro.cutting, html[data-tod="night"] .intro.cutting { animation: intro-reveal 2.8s cubic-bezier(.45, .05, .3, 1) .2s both; }
@media (max-aspect-ratio: 1/1) {
  .intro .intro-title { white-space: normal; max-width: 6.4em; font-size: clamp(50px, 15.5vw, 72px); line-height: .96; text-align: center; }
  .intro .intro-go { flex-direction: column; align-items: center; gap: 6px; }
  .intro .intro-bill p:first-child { max-width: 32em; line-height: 1.9; }
  .intro .intro-img::after { background: linear-gradient(180deg, rgba(20, 16, 12, 0) 0%, rgba(20, 16, 12, 0) 40%, rgba(24, 18, 12, .32) 56%, rgba(22, 16, 10, .66) 76%, rgba(18, 13, 8, .86) 100%); }
}

/* ================= v41 · the poster, lighter and alive ================= */
.intro .intro-title { font-size: clamp(42px, 6.2vw, 108px); }
.intro .intro-kicker, html[data-tod="night"] .intro .intro-kicker { font-size: clamp(11px, .8vw, 13px); }
.intro .intro-go .ig-text { font-size: clamp(14px, 1.1vw, 18px); }
html[data-lang="zh"] .intro .intro-go .ig-text > span[lang="zh"] { font-size: clamp(13px, 1vw, 16px); }
/* day: the street glows in low warm sun instead of sinking into shadow */
.intro .intro-img::after { background: linear-gradient(180deg, rgba(255, 210, 150, 0) 0%, rgba(255, 210, 150, 0) 50%, rgba(232, 168, 96, .22) 64%, rgba(196, 122, 60, .46) 82%, rgba(150, 86, 40, .62) 100%) !important; mix-blend-mode: normal; }
.intro .intro-title, .intro .intro-kicker, .intro .intro-go, .intro .intro-bill p { text-shadow: 0 1px 14px rgba(120, 60, 20, .45), 0 0 2px rgba(120, 60, 20, .3) !important; }
/* night: the street is dark, and the dark is full of small lights (drawn on the canvas) */
html[data-tod="night"] .intro .intro-img::after { background: linear-gradient(180deg, rgba(8, 10, 20, 0) 0%, rgba(8, 10, 20, 0) 46%, rgba(8, 10, 22, .38) 64%, rgba(6, 8, 18, .72) 84%, rgba(4, 6, 14, .86) 100%) !important; }
html[data-tod="night"] .intro .intro-title, html[data-tod="night"] .intro .intro-kicker, html[data-tod="night"] .intro .intro-go, html[data-tod="night"] .intro .intro-bill p { text-shadow: 0 1px 14px rgba(0, 0, 0, .5) !important; }
.intro .intro-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.intro .intro-copy { z-index: 2; }
.intro .intro-img { will-change: translate; transition: translate .2s linear; }
/* the title writes itself in, letter by letter */
.intro .intro-title .il { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(.12em); }
.intro.in .intro-title .il { animation: il-in 1.4s cubic-bezier(.2, .7, .2, 1) calc(.6s + var(--i) * 70ms) forwards; }
@keyframes il-in { to { opacity: 1; filter: none; transform: none; } }
.intro .intro-kicker, .intro .intro-go, .intro .intro-bill { opacity: 0; transition: opacity 1.6s ease; }
.intro.in .intro-kicker { opacity: .92; transition-delay: .3s; }
.intro.in .intro-go { opacity: 1; transition-delay: 2.1s; }
.intro.in .intro-bill { opacity: 1; transition-delay: 2.5s; }
/* the invitation: the line draws itself under the words on hover, a small heart of gilt appears */
.intro .intro-go .ig-text { position: relative; border-bottom: 0 !important; }
.intro .intro-go .ig-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 0 50%; transform: scaleX(.35); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.intro .intro-go:hover .ig-text::after, .intro .intro-go:focus-visible .ig-text::after { transform: scaleX(1); }
.intro .intro-go small { transition: letter-spacing .7s cubic-bezier(.2, .7, .2, 1), color .4s; }
.intro .intro-go:hover small { letter-spacing: .5em; }
@media (max-aspect-ratio: 1/1) { .intro .intro-title { font-size: clamp(40px, 12vw, 58px); } }
@media (prefers-reduced-motion: reduce) { .intro .intro-title .il { opacity: 1; filter: none; transform: none; animation: none; } .intro .intro-kicker, .intro .intro-go, .intro .intro-bill { opacity: 1; } }
.intro .intro-title .iw { display: inline-block; white-space: nowrap; }
/* day: sun-warm, but a touch deeper at the very foot so the billing reads */
.intro .intro-img::after { background: linear-gradient(180deg, rgba(255, 210, 150, 0) 0%, rgba(255, 210, 150, 0) 50%, rgba(232, 160, 90, .24) 63%, rgba(190, 112, 52, .5) 80%, rgba(128, 70, 30, .72) 100%) !important; }
.intro .intro-bill p { color: rgba(255, 250, 240, .86); }
.intro .intro-bill p:last-child { color: rgba(255, 250, 240, .72); }
/* room for the painting to lean without showing its edge */
.intro .intro-img, .intro.in .intro-img { left: -16px !important; top: -16px !important; width: calc(100% + 32px) !important; height: calc(100% + 32px) !important; }
.intro .intro-img::before { inset: calc(clamp(10px, 1.6vw, 22px) + 16px); }
.intro.cutting .intro-img { left: -16px !important; top: -16px !important; width: calc(100% + 32px) !important; height: calc(100% + 32px) !important; }
/* v41b · day = early morning, as in the references: pale cool shade over the street (sun comes through the planes in flecks, drawn on the canvas), a soft light from the upper left */
.intro .intro-img::after { background:
  radial-gradient(ellipse 60% 50% at 8% 0%, rgba(255, 252, 240, .28), rgba(255, 252, 240, 0) 70%),
  linear-gradient(180deg, rgba(64, 74, 76, 0) 0%, rgba(64, 74, 76, 0) 50%, rgba(62, 72, 74, .26) 64%, rgba(52, 60, 62, .5) 82%, rgba(42, 48, 50, .64) 100%) !important; }
.intro .intro-title, .intro .intro-kicker, .intro .intro-go, .intro .intro-bill p { text-shadow: 0 1px 16px rgba(30, 38, 40, .42), 0 0 2px rgba(30, 38, 40, .3) !important; }
.intro .intro-go small { color: #f1dfb4; }
/* the shaft itself: a soft diagonal of morning light the dust floats in */
.intro .intro-img::after { background:
  linear-gradient(118deg, rgba(255, 250, 232, 0) 6%, rgba(255, 250, 232, .16) 20%, rgba(255, 250, 232, .06) 34%, rgba(255, 250, 232, 0) 46%),
  radial-gradient(ellipse 60% 50% at 8% 0%, rgba(255, 252, 240, .28), rgba(255, 252, 240, 0) 70%),
  linear-gradient(180deg, rgba(64, 74, 76, 0) 0%, rgba(64, 74, 76, 0) 50%, rgba(62, 72, 74, .26) 64%, rgba(52, 60, 62, .5) 82%, rgba(42, 48, 50, .64) 100%) !important; }
.intro .intro-fx { mix-blend-mode: screen; }
html[data-tod="night"] .intro .intro-fx { mix-blend-mode: normal; }
/* small lines stack and centre: name above "présente", invitation above "Entrez"; a single underline */
.intro .intro-kicker { display: grid; justify-items: center; gap: 4px; }
.intro .intro-kicker i { display: block; letter-spacing: .12em; margin-right: -.12em; }
.intro .intro-go { flex-direction: column !important; align-items: center !important; gap: 8px !important; display: flex !important; }
.intro .intro-go .ig-text { border: 0 !important; text-align: center; }
.intro .intro-go small { display: block; text-align: center; }
/* v41c · morning shade with a little warmth: pale honey, not grey, not sunset orange */
.intro .intro-img::after { background:
  linear-gradient(118deg, rgba(255, 246, 220, 0) 6%, rgba(255, 246, 220, .18) 20%, rgba(255, 246, 220, .07) 34%, rgba(255, 246, 220, 0) 46%),
  radial-gradient(ellipse 60% 50% at 8% 0%, rgba(255, 248, 228, .3), rgba(255, 248, 228, 0) 70%),
  linear-gradient(180deg, rgba(150, 122, 82, 0) 0%, rgba(150, 122, 82, 0) 50%, rgba(146, 116, 76, .24) 64%, rgba(120, 94, 60, .46) 82%, rgba(96, 74, 46, .6) 100%) !important; }
.intro .intro-title, .intro .intro-kicker, .intro .intro-go, .intro .intro-bill p { text-shadow: 0 1px 16px rgba(70, 52, 28, .42), 0 0 2px rgba(70, 52, 28, .3) !important; }

/* v43 · the turn, calmer: no corner curl; the turning leaf shades smoothly with its angle (one soft gradient, no jumping drop shadow) */
.fb .fb-leaf::after, .fb .fb-leaf.peek-r::after, .fb .fb-leaf.peek-l::after { display: none !important; }
.fb .fb-leaf.moving .fb-face { box-shadow: none !important; }
.fb .fb-face.front::after, .fb .fb-face.back::after { transition: none; }
.fb .fb-face.front::after { background: linear-gradient(90deg, rgba(40, 30, 20, calc(var(--sh, 0) * .26)), rgba(40, 30, 20, calc(var(--sh, 0) * .08)) 45%, rgba(40, 30, 20, 0) 80%) !important; }
.fb .fb-face.back::after { background: linear-gradient(270deg, rgba(40, 30, 20, calc(var(--sh, 0) * .26)), rgba(40, 30, 20, calc(var(--sh, 0) * .08)) 45%, rgba(40, 30, 20, 0) 80%) !important; }
/* the fold: one steady, soft shadow down the spine */
.fb .fb-face .gutter { width: 7%; }
.fb .fb-face.front .gutter { background: linear-gradient(90deg, rgba(60, 46, 30, .2), rgba(60, 46, 30, .06) 45%, rgba(60, 46, 30, 0)) !important; }
.fb .fb-face.back .gutter { background: linear-gradient(270deg, rgba(60, 46, 30, .2), rgba(60, 46, 30, .06) 45%, rgba(60, 46, 30, 0)) !important; }
.fb.is-scan .fb-face .gutter { opacity: 1; }
.fb .fb-leaf.moving .fb-face .gutter { opacity: 0; }

/* ================= v44 · Le Salon painting: the certificates hang in the silk niche, under the brass rail ================= */
.f-hall .tableau:not(.is-m) .cert-wall { left: 47.9% !important; top: 21% !important; grid-template-columns: repeat(4, 5cqw) !important; gap: 1.1cqw 1.4cqw !important; }
.f-hall .tableau.is-m .cert-wall { left: 50.35% !important; top: 16.6% !important; grid-template-columns: repeat(4, 9.4cqw) !important; gap: 1.6cqw 1.6cqw !important; }
.f-hall .tableau.is-m .cert-title { font-size: 2cqw !important; }
.f-hall .cert-by { display: none !important; }
.f-hall .tableau:not(.is-m) .cert-wall { top: 20.6% !important; grid-template-columns: repeat(4, 4.5cqw) !important; gap: .9cqw 1.5cqw !important; }
.f-hall .tableau:not(.is-m) .ga-over { top: 58.5% !important; }
.f-hall .tableau:not(.is-m) .ga-over .room-head { padding: .4cqw 1.6cqw .6cqw; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(250, 244, 230, .7), rgba(250, 244, 230, 0) 75%); }
.f-hall .tableau:not(.is-m) .ga-go { top: 95% !important; color: #2e2216; text-shadow: 0 0 10px rgba(250, 240, 220, .95), 0 0 2px rgba(250, 240, 220, .9); }
/* the works painting is the real thing now: no blur, no dust veil */
.f-works .tb-img { filter: none !important; transform: none !important; }
.f-works .tb-box::after { display: none !important; }
.f-works .works-sign { top: 47%; }
.f-works .tableau.is-m .works-sign { top: 40%; }
.f-works .ga-over { color: #3a2c1c; text-shadow: 0 0 10px rgba(255, 248, 232, .95); }
.f-works .ws-back { color: #3a2c1c; border-bottom-color: rgba(58, 44, 28, .55); text-shadow: 0 0 8px rgba(255, 248, 232, .9); }
/* certificates: all frames on one line per row */
.f-hall .cert-wall { align-items: start !important; }
.f-hall .tableau.is-m .cert { align-self: start; }
/* the salon at night: the head in cream */
html[data-tod="night"] .f-hall .tableau .ga-over { color: #f6ecda; text-shadow: 0 1px 10px rgba(20, 12, 4, .85); }
html[data-tod="night"] .f-hall .tableau:not(.is-m) .ga-over .room-head { background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(40, 26, 14, .45), rgba(40, 26, 14, 0) 75%); }
html[data-tod="night"] .f-hall .tableau .ga-go { color: #f6ecda; text-shadow: 0 1px 10px rgba(20, 12, 4, .9); }
/* salon on phones: four to a row, so the whole first row hangs from the rail on its wire */
.f-hall.has-cert-frame .tableau.is-m .cert:nth-child(4) .cert-mat { aspect-ratio: 700 / 1057; padding-top: 43%; }
.f-works .tableau:not(.is-m) .works-sign { top: 56%; }
.f-works .tableau.is-m .works-sign { top: 46%; }

/* ================= v44b · certificates sit quietly in the salon; the big one comes forward on hover ================= */
.f-hall .cert-mat { filter: sepia(.45) saturate(.7) brightness(.8) contrast(.9) drop-shadow(0 .3cqw .35cqw rgba(50, 36, 20, .35)) !important; opacity: .9; transition: filter .4s, opacity .4s, transform .4s; }
html[data-tod="night"] .f-hall .cert-mat { filter: sepia(.5) saturate(.65) brightness(.62) contrast(.9) drop-shadow(0 .3cqw .35cqw rgba(0, 0, 0, .4)) !important; }
.f-hall .cert-in { opacity: .55; }
.f-hall .cert { cursor: zoom-in; }
.f-hall .cert:hover .cert-mat, .f-hall .cert:focus .cert-mat { filter: sepia(.25) saturate(.85) brightness(.95) drop-shadow(0 .5cqw .6cqw rgba(50, 36, 20, .4)) !important; opacity: 1; transform: translateY(-2px); }
.f-hall .cert:focus { outline: none; }
.cert-big { position: fixed; z-index: 60; pointer-events: none; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.cert-big.on { opacity: 1; transform: none; }
.cert-big .cb-frame { aspect-ratio: 1 / 1.23; padding: 13% 12% 12%; box-sizing: border-box; background: url("../assets/obj/cert-frame.webp") center bottom / 100% auto no-repeat;
  filter: drop-shadow(0 18px 30px rgba(30, 20, 10, .45)) sepia(.15); }
.cert-big .cb-paper { height: 100%; box-sizing: border-box; display: grid; align-content: center; justify-items: center; gap: 8px; text-align: center; padding: 8% 6%; color: #2e2216; }
.cert-big .cb-kicker { margin: 0; font-family: "Bodoni Moda", var(--f-serif); font-style: italic; font-size: 12px; letter-spacing: .3em; color: #8a6a36; }
.cert-big .cb-title { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: 19px; line-height: 1.3; }
html[data-lang="zh"] .cert-big .cb-title { font-family: var(--f-zh); font-size: 17px; letter-spacing: .06em; }
.cert-big .cb-rule { width: 40px; height: 1px; background: #b48a45; }
.cert-big .cb-by { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 13px; color: #5a4a36; }
html[data-lang="zh"] .cert-big .cb-by { font-family: var(--f-zh); font-style: normal; font-size: 12px; }
.cert-big .cb-year { margin: 0; font-family: var(--f-serif); font-size: 13px; letter-spacing: .08em; color: #7a6040; }

/* the French doors to the street */
.f-hall .hs-out { left: 83%; top: 12%; width: 15%; height: 55%; }
.f-hall .tableau.is-m .hs-out { left: 86%; top: 6%; width: 14%; height: 50%; }
.f-hall .hs-out .hs-label { position: absolute; left: 50%; top: 58%; bottom: auto; transform: translateX(-50%) !important; color: #fffaf0; border-bottom-color: rgba(255, 250, 240, .7);
  text-shadow: 0 1px 8px rgba(60, 40, 20, .75), 0 0 2px rgba(60, 40, 20, .6); white-space: nowrap; }
.f-hall .hs-out:hover .hs-label, .f-hall .hs-out:focus-visible .hs-label { color: #fff; border-color: #f6d38a; }
.f-hall .tableau.is-m .hs-out .hs-label { left: auto; right: 4px; transform: none !important; }
.f-hall .tableau.is-m .hs-out .hs-label i { display: none; }
/* going out: the room drifts towards the doors and the street light floods in */
.f-hall .tb-img { transition: transform 1.4s cubic-bezier(.5, 0, .3, 1), filter 1.4s ease; transform-origin: 90% 42%; }
.f-hall.going-out .tb-img { transform: scale(1.9); filter: brightness(1.15) saturate(1.05); }
.f-hall.going-out .tb-over, .f-hall.going-out .cert-wall, .f-hall.going-out .hs-out, .f-hall.going-out .ga-go { opacity: 0; transition: opacity .4s; }
.out-flash { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 80% 80% at 80% 45%, #fffdf6, #fbf3e2 55%, #f1e4c8); }
.out-flash.on { opacity: 1; transition: opacity .7s ease; }
.out-flash.off { opacity: 0; transition: opacity 1.2s ease; }
@media (prefers-reduced-motion: reduce) { .f-hall .tb-img { transition: none; } }
.f-hall .tableau:not(.is-m) .hs-out { left: 76%; width: 14%; top: 14%; height: 52%; }
.f-hall .hs-out .hs-label { top: 50%; padding: 4px 10px 6px; background: rgba(46, 34, 22, .32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 2px; }
.f-hall .tableau.is-m .hs-out { left: 70%; width: 28%; top: 30%; height: 30%; }
.f-hall .tableau.is-m .hs-out .hs-label { right: auto; left: 50%; transform: translateX(-50%) !important; }
.f-hall .tb-img { transform-origin: 84% 40%; }
.f-hall .tableau.is-m .hs-out { left: 60%; width: 24%; top: 34%; height: 24%; }
.f-hall .cert-mat { opacity: 1; filter: sepia(.35) saturate(.95) brightness(.78) contrast(.95) drop-shadow(0 .3cqw .35cqw rgba(50, 36, 20, .35)) !important; }

/* ================= v44c · kraft-paper certificates with a laurel cartouche and a wax seal ================= */
.f-hall .cert-mat { filter: drop-shadow(0 .3cqw .35cqw rgba(50, 36, 20, .35)) saturate(.92) brightness(.95) !important; }
html[data-tod="night"] .f-hall .cert-mat { filter: drop-shadow(0 .3cqw .35cqw rgba(0, 0, 0, .4)) brightness(.72) saturate(.85) !important; }
.f-hall .cert-in { position: relative; opacity: 1; background:
    url("../assets/obj/cert-seal.webp") 82% 88% / 24% auto no-repeat,
    url("../assets/obj/orn-cartouche.webp") 50% 40% / 88% auto no-repeat,
    url("../assets/obj/kraft-paper.webp") center / cover no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(80, 56, 30, .35), inset 0 0 6px rgba(60, 40, 20, .35) !important; }
.f-hall .cert-in > * { display: none !important; }
.f-hall .cert:hover .cert-mat, .f-hall .cert:focus .cert-mat { filter: drop-shadow(0 .5cqw .6cqw rgba(50, 36, 20, .45)) brightness(1.02) !important; }
/* the large certificate */
.cert-big .cb-paper { position: relative; background:
    url("../assets/obj/cert-seal.webp") 86% 92% / 20% auto no-repeat,
    url("../assets/obj/kraft-paper.webp") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(80, 56, 30, .4), inset 0 0 14px rgba(60, 40, 20, .35); color: #2a1d10; }
.cert-big .cb-paper::before { content: ""; position: absolute; left: 4%; right: 4%; top: 12%; height: 52%; pointer-events: none; opacity: .75;
  background: url("../assets/obj/orn-cartouche.webp") center / contain no-repeat; mix-blend-mode: multiply; }
.cert-big .cb-paper > * { position: relative; }
.cert-big .cb-title { max-width: 72%; }
.cert-big .cb-kicker { color: #5a3e1e; }
.cert-big .cb-rule { background: #6a4a26; }
.cert-big .cb-by { color: #3e2c18; }
.cert-big .cb-year { color: #4a3420; }

/* the salon's title: white, centred on the open floor between the console and the low table */
.f-hall .tableau .ga-over, html[data-tod="night"] .f-hall .tableau .ga-over { color: #fffaf0 !important; text-shadow: 0 1px 14px rgba(50, 32, 14, .6), 0 0 2px rgba(50, 32, 14, .5) !important; }
.f-hall .tableau:not(.is-m) .ga-over .room-head, html[data-tod="night"] .f-hall .tableau:not(.is-m) .ga-over .room-head { background: none !important; }
.f-hall .tableau:not(.is-m) .ga-over { top: 61% !important; }
.f-hall .tableau.is-m .ga-over { top: 61% !important; }
.f-hall .tableau .ga-go, html[data-tod="night"] .f-hall .tableau .ga-go { color: #fffaf0 !important; text-shadow: 0 1px 12px rgba(50, 32, 14, .75), 0 0 2px rgba(50, 32, 14, .6) !important; }
.cert-big .cb-paper { align-content: start; padding: 22% 8% 8%; gap: 6px; }
.cert-big .cb-paper::before { top: 7%; height: 48%; }
.cert-big .cb-title { max-width: 56%; font-size: 16px; text-wrap: balance; min-height: 3.2em; display: grid; place-items: center; }
html[data-lang="zh"] .cert-big .cb-title { font-size: 15px; }
.cert-big .cb-rule { margin-top: 15%; }