/* 泰興酒家 — site styles */
:root {
  --ink: #1c1511;
  --lacquer: #2b1b13;
  --wood: #4a2b1c;
  --wood-2: #5b3624;
  --gold: #c9a35a;
  --gold-hi: #ecd49a;
  --paper: #f4ecdc;
  --paper-2: #eadfc8;
  --paper-ink: #2a211b;
  --muted: #8a7a68;
  --red: #a1281d;
  --jade: #2f5e4a;
  --glass: rgba(28, 21, 17, 0.72);
  --line: rgba(236, 212, 154, 0.22);
  --radius: 14px;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", "MingLiU", "Source Han Serif TC", serif;
  --sky-top: #a9c1d6;
  --sky-bottom: #e9e3d6;
  color-scheme: light;
}
body.night {
  --sky-top: #0b1422;
  --sky-bottom: #2a2735;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { -webkit-tap-highlight-color: transparent; }
button, input, label, a { touch-action: manipulation; }
body {
  font-family: var(--serif);
  color: var(--paper);
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom) 70%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 1.2s ease;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, canvas:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  filter: sepia(.16) saturate(.84) contrast(.96) brightness(1.02); }   /* faded 1980s colour print */
.film { position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(40, 26, 12, .30) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5; mix-blend-mode: soft-light; }
body.comparing .film { opacity: .25; }
@media (prefers-reduced-transparency: reduce) { .film { display: none; } }

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(ellipse at 50% 40%, #3a2519 0%, var(--ink) 70%);
  transition: opacity .8s ease, visibility .8s;
}
body:not(.is-loading) #loader { opacity: 0; visibility: hidden; }
.loader-seal {
  width: 72px; height: 72px; display: grid; place-items: center; font-size: 40px; font-weight: 900;
  color: #f7e6c4; background: var(--red); border-radius: 8px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.18);
  transform: rotate(-4deg);
}
.loader-bar { width: min(260px, 60vw); height: 3px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transition: width .25s ease; }
#loader p { margin: 0; letter-spacing: .3em; color: var(--gold-hi); font-size: 14px; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius); text-align: left;
}
.seal {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: var(--red); color: #f7e6c4;
  font-weight: 900; font-size: 14px; line-height: 1.05; text-align: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16);
}
.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-size: 19px; letter-spacing: .2em; color: var(--gold-hi); font-weight: 900; }
.brand-text small { font-size: 12px; color: #d8c9ae; letter-spacing: .08em; margin-top: 2px; }

.tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tool {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); letter-spacing: .12em; font-size: 15px;
  transition: background .2s, border-color .2s;
}
.tool:hover { border-color: rgba(236,212,154,.55); }
.tool[aria-pressed="true"] { background: rgba(161,40,29,.85); border-color: rgba(255,210,170,.5); }
.ico {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold-hi); font-size: 13px; font-weight: 600;
}

/* ---------- viewpoints ---------- */
.views {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 6px; padding: 6px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
}
.views::-webkit-scrollbar { display: none; }
.views button {
  flex: 0 0 auto; border: 0; background: transparent; padding: 10px 16px; min-height: 44px; border-radius: 999px;
  letter-spacing: .15em; font-size: 15px; color: #e8dcc5; white-space: nowrap; transition: background .2s, color .2s;
}
.views button:hover { background: rgba(236,212,154,.12); }
.views button.active { background: var(--gold); color: var(--ink); font-weight: 600; }

/* ---------- pins & labels (projected from 3D) ---------- */
#pins { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.pin {
  position: absolute; left: 0; top: 0; pointer-events: auto; border: 0; padding: 0; background: none;
  transform: translate(-50%, -100%); transition: opacity .25s;
}
.pin .ring {
  display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold-hi); box-shadow: 0 0 0 4px rgba(28,21,17,.45), 0 6px 18px rgba(0,0,0,.35);
  background: #333 center / cover no-repeat; transition: transform .2s;
}
.pin::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 2px; height: 9px; background: var(--gold-hi); transform: translateX(-50%);
}
.pin .tag {
  position: absolute; left: 50%; top: -8px; transform: translate(-50%, -100%); white-space: nowrap;
  padding: 5px 10px; border-radius: 8px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; letter-spacing: .1em;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.pin:hover .ring, .pin:focus-visible .ring { transform: scale(1.08); }
.pin:hover .tag, .pin:focus-visible .tag { opacity: 1; }
.pin.occluded { opacity: .45; }
.pin.hidden, .label.hidden { opacity: 0; pointer-events: none; }
.label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font-size: 13px; letter-spacing: .25em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.35);
  transition: opacity .3s;
}
.label.road { font-size: 14px; }
.label.road small, .label small { display: block; font-size: 10px; letter-spacing: .12em; opacity: .8; text-align: center; }
.label.block { padding: 4px 10px; border-left: 2px solid var(--gold-hi); background: rgba(28,21,17,.45); }

/* ---------- help / toast ---------- */
.help {
  position: fixed; z-index: 30; top: 76px; right: max(16px, env(safe-area-inset-right)); width: min(320px, calc(100vw - 32px));
  padding: 18px 20px; border-radius: var(--radius); background: rgba(28,21,17,.92); border: 1px solid var(--line);
}
.help h2 { margin: 0 0 10px; font-size: 17px; letter-spacing: .2em; color: var(--gold-hi); }
.help ul { margin: 0; padding-left: 1.1em; line-height: 1.9; font-size: 14px; }
.help .note { font-size: 12px; color: #b9aa91; line-height: 1.7; }
.text-btn { border: 0; background: none; color: var(--gold-hi); letter-spacing: .15em; padding: 10px 4px; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
.toast {
  position: fixed; z-index: 30; left: 50%; bottom: 92px; transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 10px 18px; border-radius: 999px; background: rgba(28,21,17,.88); border: 1px solid var(--line); font-size: 14px; letter-spacing: .1em; text-align: center;
}

/* ---------- story ---------- */
.story {
  position: fixed; inset: 0; z-index: 50; overflow: auto; color: var(--paper);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(201,163,90,.10), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(161,40,29,.12), transparent 55%),
    linear-gradient(160deg, #24170f, var(--ink) 60%);
  transition: opacity .7s ease, visibility .7s;
}
.story.closing { opacity: 0; visibility: hidden; }
.story-wrap {
  min-height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto auto;
  grid-template-areas: "sign paper" "time time" "act act"; gap: 28px 44px;
  max-width: 1180px; margin: 0 auto; padding: 48px 40px 36px; align-items: center;
}
.story-sign {
  grid-area: sign; display: flex; flex-direction: row-reverse; align-items: center; gap: 16px;
  padding: 24px 20px; border-radius: 6px; justify-self: center;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 26px),
    linear-gradient(90deg, #3d2317, #5a3322 50%, #3d2317);
  box-shadow: inset 0 0 0 2px #6d4a2a, inset 0 0 0 5px #2a170f, inset 0 0 0 6px rgba(236,212,154,.55), 0 20px 50px rgba(0,0,0,.5);
}
.story-sign span {
  display: block; text-align: center; color: var(--gold-hi); font-weight: 900;
  text-shadow: 0 1px 0 #6a4a1f, 0 2px 6px rgba(0,0,0,.6);
}
.story-sign .main { font-size: clamp(44px, 7vh, 76px); line-height: 1.12; padding: 4px 2px; }
.story-sign .sub { font-size: clamp(17px, 2.4vh, 22px); line-height: 1.45; opacity: .9; }

.story-paper {
  grid-area: paper; position: relative; justify-self: center; width: max-content; max-width: 100%; height: min(64vh, 560px); overflow-x: auto; overflow-y: hidden;
  padding: 40px 44px; color: var(--paper-ink); border-radius: 4px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    repeating-linear-gradient(90deg, rgba(120,90,50,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 60px rgba(120,90,50,.18);
  writing-mode: vertical-rl; text-orientation: mixed;
  scrollbar-color: #b8a47e transparent;
}
.story-title { margin: 0 0 0 26px; font-size: 34px; font-weight: 900; letter-spacing: .35em; color: var(--wood); }
.story-meta { margin: 0 0 0 30px; font-size: 14px; letter-spacing: .25em; color: var(--muted); line-height: 1.9; }
.story-body p { margin: 0 0 0 1.4em; font-size: 19px; line-height: 2.2; letter-spacing: .16em; text-align: justify; }
.story-body p:first-child { color: #5a4636; }
.tcy { text-combine-upright: all; -webkit-text-combine: horizontal; font-variant-numeric: tabular-nums; letter-spacing: 0; font-size: 1.05em; }
.paper-seal {
  position: absolute; left: 22px; bottom: 26px; writing-mode: horizontal-tb; display: grid; place-items: center; text-align: center;
  width: 58px; height: 58px; border: 2px solid var(--red); color: var(--red); border-radius: 4px; font-size: 15px; font-weight: 900; line-height: 1.15;
  transform: rotate(-6deg); opacity: .85;
}
.story.horizontal .story-paper { writing-mode: horizontal-tb; overflow-y: auto; overflow-x: hidden; width: min(100%, 760px); }
.story.horizontal .story-title { margin: 0 0 6px; }
.story.horizontal .story-meta { margin: 0 0 22px; }
.story.horizontal .story-meta br { display: none; }
.story.horizontal .story-body p { margin: 0 0 1em; font-size: 18px; line-height: 2; letter-spacing: .08em; }
.story.horizontal .tcy { text-combine-upright: none; -webkit-text-combine: none; }
.story.horizontal .paper-seal { left: auto; right: 24px; bottom: 22px; }

.timeline {
  grid-area: time; list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(5, 1fr);
  position: relative; border-top: 1px solid var(--line);
}
.timeline li { position: relative; padding-top: 14px; text-align: center; }
.timeline li::before {
  content: ""; position: absolute; top: -24px; left: 50%; width: 11px; height: 11px; transform: translate(-50%, 0) rotate(45deg);
  background: var(--ink); border: 1px solid var(--gold);
}
.timeline li.key::before { background: var(--red); border-color: var(--gold-hi); }
.timeline b { display: block; font-size: 22px; letter-spacing: .08em; color: var(--gold-hi); font-weight: 600; }
.timeline span { font-size: 14px; letter-spacing: .14em; color: #d9cbb2; }
.timeline .key b { color: #ffcf9e; }

.story-actions { grid-area: act; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.enter {
  display: inline-flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; border-radius: 999px; min-height: 60px;
  border: 1px solid rgba(236,212,154,.45); background: rgba(255,255,255,.04); letter-spacing: .25em; font-size: 17px;
  transition: background .2s, transform .2s;
}
.enter:not(:disabled):hover { background: rgba(236,212,154,.1); transform: translateY(-1px); }
.enter:disabled { cursor: progress; opacity: .7; }
.enter-seal {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 6px; background: var(--red); color: #f7e6c4;
  font-weight: 900; font-size: 15px; line-height: 1.1; text-align: center; letter-spacing: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}

/* ---------- gallery drawer ---------- */
.drawer {
  position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column;
  background: rgba(24,18,14,.96); border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(0,0,0,.4);
  padding: max(18px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom));
  animation: slideIn .35s ease;
}
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer h2 { margin: 0; font-size: 22px; letter-spacing: .35em; color: var(--gold-hi); }
.drawer-note { font-size: 13px; color: #b9aa91; line-height: 1.8; margin: 8px 0 16px; }
.pin-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-hi); vertical-align: 1px; }
.close { border: 1px solid var(--line); background: rgba(255,255,255,.04); width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 1; }
.grid { list-style: none; margin: 0; padding: 0 2px 20px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; overflow-y: auto; }
.grid button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.grid .thumb { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #2d231c; }
.grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.grid button:hover img { transform: scale(1.04); }
.grid .has-view::after { content: ""; position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 3px rgba(28,21,17,.6); }
.grid .cap { display: block; margin-top: 6px; font-size: 13px; letter-spacing: .1em; color: #e8dcc5; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: max(20px, env(safe-area-inset-top)) 64px max(20px, env(safe-area-inset-bottom)); background: rgba(12,9,7,.94);
  animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.lightbox figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; max-width: 1280px; width: 100%; height: 100%; }
.lb-img { height: 100%; min-height: 0; display: grid; place-items: center; }
.lb-img img { max-width: 100%; max-height: calc(100vh - 60px); object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #111; }
.lightbox figcaption h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: .2em; color: var(--gold-hi); font-weight: 600; }
.lightbox figcaption p { margin: 0 0 18px; line-height: 1.9; color: #d9cbb2; font-size: 15px; }
.lb-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; padding: 8px 14px; min-height: 40px; border-radius: 999px; letter-spacing: .12em; font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.primary { border: 0; background: var(--red); color: #fbe9cf; padding: 12px 18px; min-height: 44px; border-radius: 999px; letter-spacing: .18em; }
.primary:hover { filter: brightness(1.1); }
.lb-count { font-size: 12px !important; color: var(--muted) !important; letter-spacing: .2em; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; background: rgba(255,255,255,.06); border-radius: 10px; font-size: 34px; color: var(--gold-hi); }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; }

/* ---------- compare ---------- */
.compare { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.compare-photo { position: absolute; inset: 0; display: grid; place-items: center; clip-path: inset(0 50% 0 0); }
.compare-photo img { width: 100%; height: 100%; object-fit: contain; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--gold-hi); box-shadow: 0 0 12px rgba(0,0,0,.6); }
.compare-bar {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); pointer-events: auto;
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 999px; background: rgba(28,21,17,.9); border: 1px solid var(--line);
  font-size: 14px; letter-spacing: .15em; width: min(560px, calc(100vw - 24px));
}
.compare-bar input { flex: 1; accent-color: var(--gold); min-height: 44px; }
body.comparing .views, body.comparing #pins { display: none; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ink); margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .story-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sign" "paper" "time" "act"; padding: 28px 16px 28px; gap: 22px; }
  .story-sign { justify-self: center; padding: 16px 12px; }
  .story-sign .main { font-size: 44px; }
  .story-sign .sub { font-size: 16px; }
  .story-paper { height: 60vh; padding: 26px 22px; }
  .story-body p { font-size: 17px; }
  .timeline b { font-size: 17px; }
  .timeline span { font-size: 12px; letter-spacing: .05em; }
  .brand-text small { display: none; }
  .brand { padding: 6px 12px 6px 6px; gap: 9px; }
  .brand-text strong { font-size: 16px; letter-spacing: .12em; }
  .seal { width: 34px; height: 34px; font-size: 12px; }
  .tools { gap: 6px; flex-wrap: nowrap; }
  .paper-seal { display: none; }
  .tool span:not(.ico) { display: none; }
  .tool { padding: 9px; }
  .lightbox { padding: 60px 12px 16px; }
  .lightbox figure { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
  .lb-img img { max-height: 58vh; }
  .lightbox figcaption h3 { font-size: 19px; }
  .lb-actions { flex-direction: row; flex-wrap: wrap; }
  .lb-nav { top: auto; bottom: 16px; transform: none; width: 44px; height: 44px; font-size: 26px; }
  .drawer { top: auto; height: 78vh; width: 100vw; border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; animation: slideUp .35s ease; }
  @keyframes slideUp { from { transform: translateY(40px); opacity: 0; } }
  .views button { padding: 10px 13px; font-size: 14px; letter-spacing: .08em; }
  .pin .ring { width: 44px; height: 44px; }
}
@media (max-height: 520px) and (max-width: 860px) {
  .story-paper { height: 78vh; }
  .story-sign .main { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- story: ink seeping into paper, character by character ----------
   The reveal follows 墨韻 Moyun by Axton Liu (github.com/axtonliu/moyun, MIT): each character starts as a
   soft 6px blur a hair above its place, then sharpens and settles as the ink dries; the seal is pressed
   last with a small overshoot. transform/opacity/filter only, so it stays smooth while the 3D loads. */
.story .ch { display: inline-block; }
.story.dropping .ch { animation: inkIn var(--dur, 1.3s) ease var(--d, 0s) both; }
@keyframes inkIn {
  0%   { opacity: 0; filter: blur(var(--blur, 6px)); transform: translateY(-.08em); }
  77%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
.story.dropping .late { animation: lateIn 1.4s ease var(--late, 4s) both; }
.story.dropping .story-actions.late { animation-delay: 3.2s; }
.story.dropping .paper-seal.late { animation: sealPress .26s cubic-bezier(.3, 1.6, .5, 1) var(--seal, 5s) both; }
@keyframes lateIn { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@keyframes sealPress { from { opacity: 0; transform: scale(1.6) rotate(-8deg); } to { opacity: .85; transform: rotate(-6deg); } }
.story.drop-done .ch, .story.drop-done .late { animation: none; opacity: 1; filter: none; }
.story.drop-done .paper-seal { opacity: .85; transform: rotate(-6deg); }
.js-drop .story-sign span, .js-drop .story-title, .js-drop .story-meta, .js-drop .story-body, .js-drop .story .late { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .story .ch, .story .late { animation: none !important; } }

/* ---------- street-life popover ---------- */
.life { width: min(340px, calc(100vw - 32px)); }
.switch { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; border-top: 1px solid var(--line); }
.switch:first-of-type { border-top: 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 42px; height: 24px; border-radius: 999px; background: rgba(236,212,154,.18); border: 1px solid var(--line); position: relative; transition: background .2s; }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #e8dcc5; transition: transform .2s; }
.switch input:checked + .track { background: rgba(161,40,29,.9); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--gold); outline-offset: 2px; }
.switch small { display: block; opacity: .7; font-size: 12px; margin-top: 2px; letter-spacing: .02em; }
.tool.dim { opacity: .6; }
.note.credit { font-size: 12px; opacity: .75; }
.note.credit a { color: inherit; }
.label.hill.main { font-size: 1.08em; }

@media (max-width: 480px) {
  .brand-text { display: none; }
  .tools { gap: 4px; }
  .tool { padding: 7px; }
}

/* ---------- zoom pad ---------- */
.navpad {
  position: fixed; z-index: 20; right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 70px);
  display: flex; flex-direction: column; gap: 1px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.navpad button {
  width: 48px; height: 48px; border: 0; background: var(--glass); color: var(--gold-hi);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
}
.navpad button:active { background: rgba(161,40,29,.85); }
body.comparing .navpad { display: none; }

/* ---------- phones (iPhone portrait & landscape) ---------- */
@media (max-width: 860px) {
  .story { height: 100dvh; -webkit-overflow-scrolling: touch; }
  .story-paper { height: 60svh; }
  .views { left: max(10px, env(safe-area-inset-left)); right: calc(max(14px, env(safe-area-inset-right)) + 60px); transform: none; max-width: none;
    bottom: max(12px, env(safe-area-inset-bottom)); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .views button { white-space: nowrap; min-height: 44px; }
  .navpad { bottom: max(12px, env(safe-area-inset-bottom)); }
  .toast { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px); }
  .help { max-height: calc(100svh - 140px); overflow-y: auto; }
  .drawer { height: 82svh; padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-height: 520px) and (max-width: 932px) {           /* phone held sideways */
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .navpad { flex-direction: row; bottom: max(10px, env(safe-area-inset-bottom)); }
  .navpad button { width: 44px; height: 44px; }
  .views { right: calc(max(14px, env(safe-area-inset-right)) + 150px); }
  .story-paper { height: 78svh; }
}