/* Continuous tea journey: the scroll rail and content interactions share one world. */
html { scrollbar-gutter: stable; background: #090d1c; scrollbar-color: #6e6682 #090d1c; }
html.work-focused, body.work-focused { overflow: hidden; }
#scroll .pane--tea { min-height: 170svh; }
#scroll .pane--corridor { min-height: 200svh; }
#scroll .pane--hall { min-height: 190svh; }
#scroll .pane--part { min-height: 200svh; }
#scroll .pane--end { min-height: 190svh; }
#experience .journey-nav {
  position: fixed; top: auto; bottom: calc(16px + env(safe-area-inset-bottom,0px));
  left: 50%; right: auto; transform: translateX(-50%); z-index: 41;
  width: min(590px,94vw); min-height: 44px; padding: 6px 10px 9px;
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  border: 1px solid #e8dcc433; border-radius: 16px;
  background: #121527df; backdrop-filter: blur(12px); color: #eee5d6;
  pointer-events: auto; box-shadow: 0 6px 24px #05071033;
}
.journey-nav button { min-height: 36px; padding: 5px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font-size: 11px; white-space: nowrap; }
.journey-nav button:hover, .journey-nav button:focus-visible { background: #eee5d61a; outline: 1px solid #e1cfab66; }
.journey-nav button:disabled { opacity: .24; cursor: default; }
.journey-location { flex: 1; text-align: center; font: 10px var(--mono); white-space: nowrap; }
.journey-line { position: absolute; bottom: 3px; left: 18px; right: 18px; height: 2px; background: #ffffff14; }
.journey-line i { display: block; height: 100%; background: #c6b290; transform-origin: left; }
.part-cards { bottom: calc(88px + env(safe-area-inset-bottom,0px)); }
.hall-note { display: none; }
.work-strip { bottom: calc(88px + env(safe-area-inset-bottom,0px)); }
.room-hint { bottom: calc(166px + env(safe-area-inset-bottom,0px)); }
.passage-light { position: fixed; z-index: 9; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at center,#b7c8e670,#5e609b22 35%,#080d1c00 70%); }
.work-opening { position: fixed; z-index: 45; bottom: 94px; left: 50%; transform: translateX(-50%); padding: 11px 22px; border: 1px solid #d4c29f44; background: #151629cc; border-radius: 50px; color: #f0e6d5; font-size: 12px; letter-spacing: .06em; pointer-events: none; }
.work-opening[hidden] { display: none; }
body.work-focused:not(.viewer-open) .journey-nav { visibility: hidden; }
body.work-focused:not(.viewer-open) .header-tools { pointer-events: none; opacity: .5; }
.ending-ui { position: fixed; inset: 0; z-index: 14; pointer-events: none; }
.ending-ui[hidden] { display: none; }
.ending-invitation { position: absolute; top: 48%; right: 8vw; transform: translateY(-50%); width: min(470px,42vw); padding: 40px; background: #f4e8d2ed; color: #46362c; border: 1px solid #c8ac7770; border-radius: 8px 24px 8px 24px; box-shadow: 0 22px 70px #08091155; pointer-events: auto; }
.ending-kicker { color: #92764f; line-height: 1.8; letter-spacing: .12em; }
.ending-invitation h2 { margin: 18px 0; font: 400 clamp(26px,2.8vw,38px)/1.4 var(--serif); }
.ending-copy { font-size: 14px; line-height: 1.9; }
.ending-mail { display: inline-block; margin: 24px 0 18px; color: #614b34; font: 17px var(--serif); text-decoration: none; border-bottom: 1px solid #92764f66; padding-bottom: 5px; }
.ending-sign { color: #92764f; font-size: 11px; letter-spacing: .12em; }
.ending-return { display: block; margin-top: 26px; min-height: 44px; padding: 9px 0; border: 0; background: transparent; color: #614b34; font-size: 12px; }
.ending-return:hover { text-decoration: underline; }
@media(max-width:720px) {
  #experience .journey-nav { bottom: calc(8px + env(safe-area-inset-bottom,0px)); gap: 2px; padding-inline: 5px; min-height: 48px; }
  .journey-nav button { font-size: 10px; padding-inline: 7px; min-height: 40px; }
  .journey-location { font-size: 8px; }
  .part-cards { bottom: calc(76px + env(safe-area-inset-bottom,0px)); }
  .work-strip { bottom: calc(76px + env(safe-area-inset-bottom,0px)); }
  .room-hint { display: none; }
  .ending-invitation { top: auto; bottom: 102px; left: 5vw; right: 5vw; width: auto; transform: none; padding: 26px; }
  .ending-invitation h2 { font-size: 28px; }
  .ending-mail { font-size: 17px; }
  .ending-copy { font-size: 13px; }
  .ending-return { margin-top: 14px; }
}
@media(max-width:720px) and (max-height:700px) {
  .room-work { min-height: 44px; padding-block: 7px; }
  .ending-invitation { padding: 20px; bottom: 86px; }
  .ending-invitation h2 { margin: 12px 0; font-size: 25px; }
  .ending-mail { margin: 15px 0; }
}
@media(min-width:721px) and (max-height:500px) {
  #experience .journey-nav { min-height: 34px; padding-block: 2px 5px; bottom: 5px; }
  .journey-nav button { min-height: 30px; }
  .work-strip, .part-cards { bottom: 58px; }
  .ending-invitation { padding: 20px 26px; top: 45%; }
  .ending-invitation h2 { margin: 8px 0; font-size: 27px; }
  .ending-mail { margin: 12px 0; }
  .ending-return { margin-top: 8px; }
}

/* A document opens as a real, readable spread; continuous reading is one action away. */
.reader[data-mode="book"] { width: min(1200px,94vw); height: 90svh; }
.reader[data-mode="book"] .reader__body {
  position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  justify-content: center; align-items: stretch; gap: 3px; overflow: hidden;
  padding: 22px clamp(16px,5vw,64px) 28px;
  background: radial-gradient(ellipse at 50% 40%,#323046,#151724 80%);
  perspective: 1400px; touch-action: pan-y pinch-zoom;
}
.reader[data-mode="book"] .reader__page {
  display: flex; flex-direction: column; min-height: 0; height: 100%; max-width: none;
  width: 100% !important; min-width: 0; margin: 0; border: 0; border-radius: 3px; overflow: hidden;
  background: #faf6ee; box-shadow: 0 10px 30px #0007,inset 0 0 12px #493a1922;
}
.reader[data-mode="book"] .reader__page[hidden] { display: none !important; }
.reader[data-mode="book"] .reader__page img { width: 100%; height: calc(100% - 24px); min-height: 0; object-fit: contain; background: #faf8f1; cursor: zoom-in; }
.reader[data-mode="book"] .reader__page figcaption { flex: 0 0 24px; padding: 6px 14px; }
.reader[data-mode="book"] .reader__body::after { content: ''; position: absolute; top: 22px; bottom: 28px; left: 50%; width: 16px; transform: translateX(-50%); background: linear-gradient(90deg,#43331e00,#43331e30 45%,#ffffff40 55%,#43331e00); pointer-events: none; }
.reader[data-mode="book"] .reader__body .book-leaf { position: absolute; z-index: 5; margin: 0; max-height: none; backface-visibility: hidden; box-shadow: 8px 10px 25px #0007; pointer-events: none; }
.reader__mode { white-space: nowrap; }
.reader__tools button:disabled { opacity: .3; cursor: default; }
.art-tools { position: fixed; z-index: 3; bottom: 72px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.art-tools { width: max-content; max-width: calc(100vw - 24px); white-space: nowrap; }
.art-tools > * { flex-shrink: 0; }
.lightbox.lb--transparent .lb-cap { position: fixed; bottom: 128px; left: 5vw; width: 90vw; text-align: center; }
.art-tools[hidden] { display: none; }
.art-tools button,.art-tools a { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 18px; border-radius: 24px; border: 1px solid #e8ddc344; background: #171a2de6; color: #f0e6d5; font-size: 12px; text-decoration: none; }
.lightbox.lb--transparent .lb-body img { transition: transform .24s; cursor: zoom-in; }
.lightbox.lb--transparent.is-art-zoomed .lb-body img { transform: scale(1.65); cursor: zoom-out; }
@media(max-width:720px) {
  .reader[data-mode="book"] { width: calc(100vw - 16px); height: calc(100svh - 16px); max-height: calc(100svh - 16px); }
  .reader[data-mode="book"] .reader__body { grid-template-columns: minmax(0,1fr); padding: 15px 12px 20px; }
  .reader[data-mode="book"] .reader__body::after { display: none; }
  .reader__tools { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .reader__counter { grid-column: span 3; }
  .reader__tools .reader__prev,.reader__tools .reader__next,.reader__tools .reader__zoom { grid-column: span 1; }
  .reader__tools .reader__mode,.reader__tools .reader__pdf,.reader__tools .reader__share { grid-column: span 2; min-width: 0; min-height: 40px; font-size: 10px; justify-content: center; }
  .art-tools { bottom: 65px; gap: 6px; }
  .art-tools button,.art-tools a { padding-inline: 12px; font-size: 11px; }
}