/* The Bronze World of Sanxingdui
   Direction: the museum's own walls. Night galleries (evergreen + spotlight), taupe text walls,
   pale concrete panels, gold and ivory single-weight line art, gold-line guide characters. */

@font-face { font-family: 'Marcellus'; src: url('../fonts/marcellus.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('../fonts/alegreya.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('../fonts/alegreya-italic.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya SC'; src: url('../fonts/alegreya-sc.woff2') format('woff2'); font-weight: 500; font-display: swap; }
/* brush calligraphy, subset to the Chinese characters used on the site */
@font-face { font-family: 'Brush'; src: url('../fonts/brush.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* museum surfaces */
  --night: #0b1d1b;
  --night-2: #102a27;
  --night-3: #05100f;
  --wall: #122b28;
  --wall-2: #0c1f1d;
  --concrete: #eee4cf;
    /* bronze palette */
  --gold: #d8b46c;
  --gold-hi: #f4e2b0;
  --gold-ink: #7a5a22;
  --ivory: #f3ecdc;
  --mint: #b3c9c1;
  --jade: #7aae9e;
  --verdigris: #4c8577;
  --russet: #a46a4e;
  --ink: #1a1712;
  --ink-soft: #4a4234;

  --display: 'Marcellus', 'Trajan Pro', Georgia, serif;
  --label: 'Alegreya SC', 'Marcellus', Georgia, serif;
  --body: 'Alegreya', 'Iowan Old Style', Georgia, serif;
  --hand: 'Caveat', 'Segoe Print', cursive;
  --han: 'Brush', 'Noto Serif SC', 'Songti SC', serif;

  --gutter: max(18px, env(safe-area-inset-left, 0px));
  --max: 1200px;
  --head: 60px;
  --ease-spring: cubic-bezier(.3, 1.5, .5, 1);
  --glow: drop-shadow(0 0 6px rgba(212, 172, 99, .45));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--night); scrollbar-color: rgba(216, 180, 108, .45) var(--night-3); }
body { margin: 0; background: var(--night-3); color: var(--ivory); font: 400 1.08rem/1.62 var(--body); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-hi); text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--night); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0 0 .45em; text-wrap: balance; letter-spacing: .06em; }
h1 { font-size: clamp(2.1rem, 6vw, 4.2rem); color: var(--gold-hi); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); color: var(--gold-hi); }
h2::after { content: ''; display: block; width: 140px; height: 12px; margin-top: .5em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='12'%3E%3Cg fill='%23d8b46c'%3E%3Crect x='0' y='5.5' width='58' height='1'/%3E%3Crect x='82' y='5.5' width='58' height='1'/%3E%3Crect x='65' y='1' width='7' height='7' transform='rotate(45 70 6)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 140px 12px no-repeat; }
h2.plain::after, .sh h2::after, .pp h2::after { content: none; }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: .04em; }
h1 em, h2 em { font: italic 500 .8em/1.1 var(--body); letter-spacing: 0; color: var(--gold); text-transform: none; }
p { margin: 0 0 1em; max-width: 68ch; }
.label { font: 600 .76rem/1.3 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.hand { font: 600 1.45rem/1.15 var(--hand); }
.lede { font: italic 500 clamp(1.25rem, 2vw, 1.45rem)/1.5 var(--body); color: var(--mint); max-width: 44ch; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: max(18px, env(safe-area-inset-right, 0px)); }

/* ---------- Surfaces ---------- */
.night,
.wall { position: relative; padding-block: clamp(56px, 9vw, 112px); }
.night { background: radial-gradient(ellipse 70% 60% at var(--spot-x, 70%) var(--spot-y, 30%), #24504b 0%, var(--night) 62%, var(--night-3) 100%); }
.wall { background-color: var(--wall); background-image: linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 30%, rgba(0, 0, 0, .08)); }
.wall .lede { color: #f0e6d6; }

/* the Sun Worship wall's thin concentric arcs */
.arcs::after { content: ''; position: absolute; pointer-events: none; width: min(900px, 120vw); aspect-ratio: 1; right: -30%; top: -40%; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 88px, rgba(212, 172, 99, .22) 88px 89.5px); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }

.arcs > * { position: relative; z-index: 1; }

/* ---------- Line art (museum typology drawings), recoloured by mask ---------- */
.line { display: block; background: var(--line-c, var(--gold)); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; aspect-ratio: var(--ar, 1); }

.line.glow { filter: var(--glow); }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; height: var(--head); background: rgba(13, 36, 34, .92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(212, 172, 99, .25); }
.top .wrap { height: 100%; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ivory); font: 500 1.06rem/1 var(--display); white-space: nowrap; }
.brand img { width: 30px; height: 30px; transition: transform .4s var(--ease-spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.1); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a, .nav button { color: var(--mint); text-decoration: none; font: 600 0.72rem var(--display); letter-spacing: .1em; padding: 8px 12px; border-radius: 0; border: 0; background: none; cursor: pointer; white-space: nowrap; }
.nav a:hover, .nav button:hover { color: var(--ivory); background: rgba(255, 249, 237, .07); }

.menu { position: fixed; z-index: 49; left: 0; right: 0; top: var(--head); max-height: calc(100dvh - var(--head)); overflow-y: auto; background: var(--night-3); border-bottom: 1px solid rgba(212, 172, 99, .3); padding-block: 22px 30px; box-shadow: 0 30px 60px -20px #000; }
.menu ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; }
.menu a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ivory); font: 500 1.08rem var(--display); }
.menu a:hover, .menu a[aria-current='page'] { background: rgba(212, 172, 99, .12); }
.menu .line { width: 34px; flex: none; }
.menu .n { font: 600 0.78rem var(--display); letter-spacing: .14em; color: var(--gold); }
.menu .quick { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
@media (max-width: 860px) { .nav > a { display: none; } .menu .quick { display: flex; } }

/* ---------- Buttons, chips, toggles ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--gold); background: var(--gold); color: var(--night); font: 600 0.78rem var(--display); letter-spacing: .1em; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease-spring), background .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); background: var(--gold-hi); box-shadow: 0 8px 22px -10px rgba(212, 172, 99, .8); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.ghost { background: transparent; color: var(--gold-hi); }
.btn.ghost:hover { background: rgba(212, 172, 99, .1); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid rgba(216, 180, 108, .55); background: rgba(8, 24, 22, .7); color: var(--ivory); font: 600 .78rem/1.2 var(--display); letter-spacing: .1em; padding: 9px 16px; border-radius: 0; box-shadow: inset 0 0 0 3px #0c201d, inset 0 0 0 4px rgba(216, 180, 108, .22); cursor: pointer; transition: transform .2s var(--ease-spring), background .2s, color .2s; }
.chip:hover { transform: translateY(-1px); }
.chip[aria-pressed='true'] { background: var(--bronze); color: #24180a; border-color: #e8c98a; box-shadow: inset 0 0 0 1px rgba(42, 29, 12, .45); text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.chip .n { opacity: .7; font-weight: 600; margin-left: 4px; }

.toggle { display: inline-flex; padding: 4px; border-radius: 0; border: 1px solid rgba(216, 180, 108, .55); background: rgba(8, 24, 22, .6); gap: 4px; flex-wrap: wrap; }
.toggle button { border: 0; background: none; min-height: 44px; padding: 8px 16px; border-radius: 0; font: 600 .76rem var(--display); letter-spacing: .1em; color: var(--mint); cursor: pointer; }
.toggle button[aria-pressed='true'] { background: var(--bronze); color: #24180a; box-shadow: inset 0 0 0 1px rgba(42, 29, 12, .45); }

/* ---------- Evidence stamps ---------- */
.ev { display: inline-flex; align-items: center; gap: 7px; font: 600 0.76rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px 5px; border: 1px solid currentColor; border-radius: 0; background: rgba(5, 16, 15, .35); white-space: nowrap; vertical-align: .12em; }
.ev::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ev-observed { color: var(--mint); }
.ev-catalogued { color: var(--ivory); }
.ev-catalogued::before { border-radius: 1px; }
.ev-interpreted { color: var(--gold); border-style: dashed; }
.ev-interpreted::before { background: none; border: 1.5px dashed currentColor; width: 8px; height: 8px; transform: rotate(45deg); border-radius: 0; }
.ev-fictional { color: #f0b79a; }
.ev-fictional::before { content: '✎'; background: none; width: auto; height: auto; font-size: .8rem; }
.ev-unknown { color: #c9c3b8; border-style: dotted; }
.ev-unknown::before { content: '?'; background: none; width: auto; height: auto; font-size: .78rem; }

.claim { position: relative; padding-left: 20px; margin: 0 0 1.4em; border-left: 1.5px solid var(--mint); }
.claim[data-ev='catalogued'] { border-left-color: var(--ivory); }
.claim[data-ev='interpreted'] { border-left: 1.5px dashed var(--gold); }
.claim[data-ev='unknown'] { border-left: 1.5px dotted #c9c3b8; }
.claim[data-ev='fictional'] { border-left-color: #f0b79a; }

.claim .meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.claim p:last-child { margin-bottom: 0; }
.cite { display: inline-block; font: 600 0.8rem var(--display); letter-spacing: .08em; text-decoration: none; color: var(--gold-hi); border-bottom: 1px solid rgba(216, 180, 108, .55); padding: 6px 2px; margin: -6px -2px; }
.ref { display: inline-block; font: 700 0.78rem/1 var(--display); letter-spacing: .1em; text-decoration: none; color: #24180a; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 65%, #b48d45); padding: 5px 8px 4px; border-radius: 0; cursor: zoom-in; border: 0; box-shadow: inset 0 0 0 1px rgba(42, 29, 12, .45); }

.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.legend > div { border-top: 1px solid rgba(212, 172, 99, .4); padding-top: 12px; font-size: .95rem; line-height: 1.5; color: var(--mint); }
.legend .ev { margin-bottom: 8px; }

/* ---------- Photos: museum mount + object label ---------- */
.ph { margin: 0; }
.ph button.frame { display: block; width: 100%; padding: 0; border: 0; background: #0b1c1b; cursor: zoom-in; position: relative; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgba(212, 172, 99, .25), 0 22px 40px -24px #000; }
.ph img { width: 100%; aspect-ratio: var(--ar, 3 / 4); object-fit: cover; transition: transform .7s ease, filter .4s; filter: saturate(.95); }
.ph button.frame::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 238, 200, .22), transparent 45%); opacity: 0; transition: opacity .3s; }
.ph button.frame:hover::after { opacity: 1; }
.ph button.frame:hover img { transform: scale(1.04); }
.ph figcaption { margin-top: 12px; display: grid; gap: 3px; font-size: .94rem; line-height: 1.35; color: var(--mint); }
.ph figcaption b { font: 500 1.02rem/1.25 var(--display); color: var(--ivory); }
.ph figcaption .label { font-size: .76rem; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 28px 24px; }
.photos.lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

/* ---------- Guides: gold-line characters ---------- */
.guide { display: flex; align-items: flex-end; gap: 6px; margin: 0; }
.guide.right { flex-direction: row-reverse; }
.sprite { position: relative; flex: none; width: var(--gs, 120px); aspect-ratio: 1; cursor: pointer; border: 0; padding: 0; background: none; }
.sprite i { position: absolute; inset: 0; background: var(--sprite-c, var(--gold)); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: var(--glow); transform-origin: 50% 100%; }
.wall .sprite { --sprite-c: var(--ivory); }

.sprite.idle i { animation: bob 3.6s ease-in-out infinite; }
.sprite.boing i { animation: boing .6s var(--ease-spring); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes boing { 0% { transform: scale(1); } 30% { transform: scale(1.14, .86); } 60% { transform: scale(.93, 1.1) translateY(-10px); } 100% { transform: scale(1); } }
.bubble { position: relative; background: linear-gradient(180deg, #221b0f, #140f09); color: var(--ivory); border-radius: 0; padding: 14px 18px 12px; font: 600 1.42rem/1.15 var(--hand); max-width: 30ch; margin-bottom: calc(var(--gs, 120px) * .55); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .7), inset 0 0 0 4px #15100a, inset 0 0 0 5px rgba(216, 180, 108, .25), 0 14px 26px -14px #000; }
.bubble::after { content: ''; position: absolute; left: -8px; bottom: 16px; width: 16px; height: 16px; background: #1f180d; transform: rotate(45deg); box-shadow: -1px 1px 0 0 rgba(216, 180, 108, .7); }
.guide.right .bubble::after { left: auto; right: -8px; box-shadow: 1px -1px 0 0 rgba(216, 180, 108, .7); }
.bubble .who { display: flex; gap: 8px; align-items: center; font: 600 0.74rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.bubble .who .ev { color: #f0b79a; font-size: .7rem; padding: 3px 6px; }
@media (max-width: 560px) { .guide { --gs: 92px; } .bubble { font-size: 1.22rem; } }

/* ---------- Layout helpers ---------- */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }
.cols.wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.cols.mid { align-items: center; }
@media (max-width: 820px) { .cols, .cols.wide { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 22px; }
.panel { position: relative; border: 1px solid rgba(216, 180, 108, .4); border-radius: 0; padding: clamp(20px, 3.4vw, 30px); background: url('../art/ui/corner.webp') 0 0 / 44px no-repeat, url('../art/ui/corner-tr.webp') 100% 0 / 44px no-repeat, url('../art/ui/corner-bl.webp') 0 100% / 44px no-repeat, url('../art/ui/corner-br.webp') 100% 100% / 44px no-repeat, linear-gradient(180deg, rgba(14, 38, 34, .55), rgba(6, 18, 16, .7)); }

.panel.dashed { border-style: dashed; border-color: var(--gold); background: rgba(212, 172, 99, .06); }

/* ---------- Chapter head ---------- */
.chead { position: relative; overflow: hidden; padding-block: clamp(44px, 8vw, 96px) clamp(36px, 6vw, 72px); }
.chead .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.chead .art { position: relative; display: grid; place-items: center; min-height: 280px; }
.chead .art .line { width: min(100%, 380px, calc(400px * var(--ar, 1))); }
.chead .art .sprite { z-index: 2; }
.chead .art .sprite { position: absolute; left: 0; bottom: 0; }
.chead .han { position: absolute; right: var(--gutter); top: 24px; writing-mode: vertical-rl; font: 600 clamp(2rem, 4.4vw, 3.4rem)/1 var(--han); letter-spacing: .25em; color: var(--gold); opacity: .9; z-index: 2; }
.chead .n { color: var(--gold); }
@media (max-width: 820px) { .chead .grid { grid-template-columns: 1fr; } .chead .art { min-height: 220px; order: -1; } .chead .han { font-size: 1.8rem; } }

/* draw-in: the line art reveals like a pen stroke */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .line.draw { animation: draw-in 1.8s ease-out both; }
}
@keyframes draw-in { from { clip-path: inset(0 0 100% 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* scroll reveals: content is visible at rest; only things below the fold animate in */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s var(--ease-spring); transition-delay: var(--rd, 0ms); }
  html:not(.calm) .rv.in { opacity: 1; transform: none; }
}

/* ---------- Pager / footer ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 40px 70px; }
.pager a { position: relative; isolation: isolate; display: block; padding: 22px 22px 20px; border: 1px solid rgba(216, 180, 108, .45); background: linear-gradient(180deg, #14352f, #0a1c1a); text-decoration: none; color: var(--ivory); transition: border-color .2s, transform .25s var(--ease-spring), box-shadow .2s; }
.pager a:hover { border-color: var(--gold); transform: translateY(-2px); }
.pager span { display: block; }
.pager b { font: 600 1.2rem/1.15 var(--display); color: var(--gold-hi); }
.pager .next { grid-column: 2; text-align: right; }
@media (max-width: 600px) { .pager { grid-template-columns: 1fr; gap: 10px; padding-block: 28px 60px; } .pager .next { grid-column: 1; text-align: left; } .pager a { padding: 16px 16px 14px; } .pager b { font-size: 1.05rem; } }
.foot { background: var(--night-3); color: var(--mint); padding-block: 48px 64px; font-size: .92rem; border-top: 1px solid rgba(212, 172, 99, .2); }
.foot .cols { grid-template-columns: 2fr 1fr; }
@media (max-width: 820px) { .foot .cols { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Loading ---------- */
.loading { min-height: 60vh; display: grid; place-items: center; }
.loading .line { width: 90px; animation: bob 1.6s ease-in-out infinite; }

/* calm mode (toggle or OS preference) */
html.calm *, html.calm *::before, html.calm *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------- Object sheet: a drawer with a double gold rule ---------- */
.sheet { padding: 0; border: 0; background: transparent; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; color: var(--ivory); }
.sheet::backdrop { background: rgba(5, 16, 15, .78); backdrop-filter: blur(5px); }
.sh { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1060px, calc(100% - 32px)); max-height: calc(100% - 40px); overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: linear-gradient(180deg, #0f2824, var(--night-3)); box-shadow: 0 0 0 1px #0a1614, 0 0 0 3px rgba(216, 180, 108, .6), 0 0 0 5px #0a1614, 0 0 0 6px rgba(216, 180, 108, .25), 0 40px 90px -20px #000; }
.sh-stage { position: relative; display: grid; place-items: center; min-height: 440px; padding: 24px; background: radial-gradient(ellipse 60% 55% at 50% 35%, #2c5c56, var(--night-3) 75%); touch-action: none; }
.sh-img { max-height: min(76vh, 680px); width: auto; box-shadow: 0 0 0 1px rgba(212, 172, 99, .35), 0 24px 50px -18px #000; transition: transform .35s ease, opacity .35s ease; }
.sh-img.out-l { transform: translateX(-50px); opacity: 0; transition-duration: .17s; } .sh-img.out-r { transform: translateX(50px); opacity: 0; transition-duration: .17s; }
.sh-body { padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 6px; }
.sh-body h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 4px 0 8px; }
.sh-meta { display: flex; justify-content: space-between; padding-right: 58px; }
.sh-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-label { font: 600 1.3rem/1.2 var(--hand); color: var(--gold-hi); border-left: 2px solid var(--gold); padding-left: 12px; }
.sh-label:empty { display: none; }
.sh-desc { color: var(--mint); }
.sh-rel { display: grid; gap: 8px; margin: 6px 0 16px; font-size: .92rem; }
.sh-rel button { display: flex; gap: 12px; align-items: center; min-height: 60px; text-align: left; background: rgba(5, 14, 13, .55); border: 0; box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .35); padding: 8px; cursor: pointer; color: var(--ivory); font: inherit; }
.sh-rel button:hover { box-shadow: inset 0 0 0 1px var(--gold); background: rgba(216, 180, 108, .08); }
.sh-rel img { width: 46px; height: 60px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #0a1614, 0 0 0 3px rgba(216, 180, 108, .55); }
.sh-rel small { display: block; color: var(--mint); opacity: .85; }
.sh-hall { font-weight: 700; }
.sh-more { align-self: flex-start; margin-top: 6px; }
.sh-x { position: absolute; right: 12px; top: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sh-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(212, 172, 99, .5); background: rgba(13, 36, 34, .7); color: var(--gold-hi); font-size: 1.8rem; line-height: 1; cursor: pointer; z-index: 2; }
.sh-nav.prev { left: 12px; } .sh-nav.next { right: 12px; }
.sh-grab { display: none; }
@media (max-width: 760px) {
  .sh { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 94%; grid-template-columns: 1fr; border-radius: 0; box-shadow: 0 -1px 0 rgba(216, 180, 108, .6), 0 -30px 60px -20px #000; }
  .sh-stage { min-height: 0; height: 40dvh; padding: 56px 16px 14px; overflow: hidden; }
  .sh-img { height: calc(40dvh - 70px); max-height: none; max-width: 100%; width: auto; object-fit: contain; }
  .sh-nav { display: none; }
  .sh-x { top: 10px; right: 10px; }
  .sh-grab { display: block; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 2px; background: rgba(255, 249, 237, .5); z-index: 3; }
  .sh-body { padding: 22px 20px 30px; }
  .sheet[open] .sh { animation: up .35s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes up { from { transform: translateY(35%); opacity: .3; } }

/* ---------- Companion: Moss ---------- */
.companion { position: fixed; z-index: 40; right: max(10px, env(safe-area-inset-right, 0px)); bottom: max(8px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; pointer-events: none; }
.companion .cp-plate { display: block; pointer-events: auto; cursor: pointer; position: relative; }
.companion.waiting .cp-plate::after { content: '!'; position: absolute; left: -4px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-hi); color: #2a1a06; font: 700 .95rem/26px var(--display); text-align: center; box-shadow: 0 0 0 2px var(--night-3), 0 0 0 3px var(--gold); animation: pip-in .5s var(--ease-spring) both; }
@keyframes pip-in { from { transform: scale(0); } }
.companion .sprite { pointer-events: auto; transition: transform .5s var(--ease-spring); }
.companion.away .sprite { transform: translateY(62%) scale(.7); opacity: .85; }
.cp-bubble { pointer-events: auto; position: relative; max-width: 240px; background: var(--ivory); color: var(--night-2); border-radius: 16px; padding: 10px 30px 8px 14px; margin-bottom: 64px; margin-right: -6px; box-shadow: 0 0 0 1.5px var(--gold), 0 14px 30px -14px #000; transform-origin: 100% 100%; transition: transform .35s var(--ease-spring), opacity .2s; }
.cp-bubble::after { content: ''; position: absolute; right: 12px; bottom: -8px; width: 16px; height: 16px; background: var(--ivory); transform: rotate(45deg); box-shadow: 1.5px 1.5px 0 0 var(--gold); }
.companion:not(.talk) .cp-bubble { transform: scale(.3); opacity: 0; pointer-events: none; }
.companion.left .cp-bubble { order: -1; margin: 0 16px 30px 0; }
.companion.left .cp-bubble::after { right: -8px; bottom: 20px; box-shadow: 1.5px -1.5px 0 0 var(--gold); }
.cp-text { margin: 0; font: 600 1.28rem/1.12 var(--hand); }
.cp-tag { font: 600 0.7rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--russet); }
.companion .sprite::before { content: ''; position: absolute; inset: -12%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(5, 16, 15, .8) 0 42%, transparent 70%); pointer-events: none; }
.cp-x { position: absolute; right: 4px; top: 2px; border: 0; background: none; font-size: 1.3rem; color: var(--ink-soft); cursor: pointer; padding: 4px; }
/* on phones Moss is a bronze medallion tucked into the right gutter (22px shows, so it never sits on copy): it talks only when tapped,
   it slides away while the page scrolls down and comes back when the page rests */
@media (max-width: 640px) {
  .companion { right: 0; bottom: 124px; transform: translateX(calc(100% - 22px)); transition: transform .45s var(--ease-spring); }
  .companion.out { transform: none; }
  .companion.hide, .companion.away { transform: translateX(130%); }
  .companion .cp-plate { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: url('../art/ui/medallion.webp') center / contain no-repeat, radial-gradient(circle, #0c201d 0 44%, transparent 45%); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
  .companion .sprite { --gs: 42px !important; }
  .cp-bubble { position: absolute; right: 0; bottom: calc(100% + 10px); max-width: 200px; margin: 0; padding: 9px 26px 7px 12px; }
  .cp-text { font-size: 1.05rem; }
  .cp-tag { font-size: .66rem; }
}

/* ---------- Chapter components: bronze reading surfaces ---------- */
/* .ink is the chapter reading surface: warm bronze-ink, lit from above. Every section opens on a leiwen frieze. */
.ink { position: relative; overflow-x: clip; padding-block: clamp(60px, 10vw, 112px); color: var(--ivory); background-color: #110c06;
  background-image: radial-gradient(ellipse 90% 55% at 50% -12%, rgba(176, 128, 62, .2), transparent 70%), linear-gradient(180deg, #17110a, #0c0805 72%, #0a0705); }
.ink.arcs::after { background: repeating-radial-gradient(circle, transparent 0 88px, rgba(216, 180, 108, .14) 88px 89.5px); }
.chapter-body > section::before { content: ''; position: absolute; z-index: 0; left: 0; right: 0; top: 14px; height: 22px; pointer-events: none; opacity: .75;
  background: linear-gradient(90deg, transparent, rgba(216, 180, 108, .55) 16%, rgba(216, 180, 108, .55) 84%, transparent);
  -webkit-mask: var(--leiwen) 0 0 / 48px 24px repeat-x; mask: var(--leiwen) 0 0 / 48px 24px repeat-x; }
.chapter-body > section > .wrap { position: relative; z-index: 1; }

.chapter-body h2 { font-size: clamp(1.7rem, 6.4vw, 2.55rem); line-height: 1.1; }
.chapter-body h3 { font-size: 1.2rem; }
.chapter-body .label { display: inline-block; font-size: .8rem; letter-spacing: .18em; margin-bottom: 6px; }
.chapter-body .claim { padding-left: 22px; margin-bottom: 1.6em; }
.chapter-body .photos { gap: 34px 26px; }
@media (max-width: 600px) {
  .chapter-body .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
  .chapter-body .photos .ph figcaption { font-size: .86rem; }
  .chapter-body .photos .ph figcaption b { font-size: .98rem; }
}

/* timeline: square bronze bars, not pills */
.timeline { display: grid; gap: 20px; margin-top: 28px; }
.t-bar { min-height: 56px; display: flex; align-items: center; padding: 12px 20px; font-weight: 700; line-height: 1.3; }
.t-bar.long { background: linear-gradient(90deg, #2d6e62, #3f7d70 55%, #173c37); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .5); }
.t-bar.short { background: var(--bronze); color: #24180a; width: min(100%, 560px); margin-left: auto; margin-right: 6%; box-shadow: inset 0 0 0 1px rgba(42, 29, 12, .4); }
.t-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: .96rem; color: var(--mint); }
@media (max-width: 600px) { .t-bar.short { width: 100%; margin-right: 0; } }

/* milestones: a dashed spine; years are cast bronze plates; phones zig-zag photos along the spine */
.milestones { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 40px; position: relative; }
.milestones::before { content: ''; position: absolute; left: 64px; top: 12px; bottom: 12px; border-left: 1px dashed rgba(216, 180, 108, .55); }
.milestones li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 150px; gap: 22px; align-items: center; }
.milestones h3 { color: var(--gold-hi); margin: 4px 0 6px; }
.milestones .claim { margin: 0; }
.milestones .claim p { margin: 0; }
.year { position: relative; z-index: 1; font: 700 .84rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #24180a; background: var(--bronze); padding: 10px 8px 9px; text-align: center; box-shadow: inset 0 0 0 1px rgba(42, 29, 12, .45); }
@media (max-width: 760px) {
  .milestones::before { display: none; }
  .milestones li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .year { justify-self: start; text-align: left; padding: 9px 14px; }
  .milestones .ph { width: 74%; max-width: 280px; justify-self: start; }
  .milestones li:nth-child(even) .ph { justify-self: end; }
}

/* feature list: stamp in its own column, text beside it (and wrapping under it) */
.features { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 12px; }
.features li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.features li > span:last-child { min-width: 0; }
[data-state='observed'] .features li[data-l='interpreted'] { display: none; }
[data-state='interpreted'] .features li[data-l='observed'] { opacity: .45; }

/* comparison gallery: a scroller with bronze arrow keys */
.carousel .track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 24%); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 4px 22px; grid-template-columns: none; scrollbar-width: thin; scrollbar-color: rgba(216, 180, 108, .5) transparent; }
.carousel .track > * { scroll-snap-align: start; }
.car-btns { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 6px; }
.car-btns .chip { width: 48px; height: 48px; padding: 0; font-size: 1.2rem; }
@media (max-width: 600px) { .carousel .track { grid-auto-columns: 72%; } }

/* magnifier: hover or focus on a pointer, tap to lock on a touch screen */
.zoom { overflow: hidden; border-radius: 0; cursor: zoom-in; touch-action: manipulation; }
.zoom img { transition: transform .35s ease; transform-origin: var(--zx, 50%) var(--zy, 50%); box-shadow: 0 0 0 1px rgba(216, 180, 108, .4); }
.zoom:hover img, .zoom:focus-visible img, .zoom.on img { transform: scale(2.1); }
.zoom.on { cursor: zoom-out; }
.zoom .label { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* scale: the figure drawn beside a person, labels set short and centred */
.scale { margin-top: 22px; }
.scale-row { display: flex; align-items: flex-end; gap: 36px; justify-content: center; flex-wrap: wrap; padding-top: 8px; }
.scale-row > div { display: grid; justify-items: center; gap: 10px; text-align: center; }
.scale .label { font-size: .74rem; letter-spacing: .14em; line-height: 1.5; margin: 0; }
.person { width: 34px; height: 92px; background: var(--mint); -webkit-mask: radial-gradient(circle at 50% 12px, #000 11px, transparent 12px), linear-gradient(#000, #000) 50% 100% / 26px 64px no-repeat; mask: radial-gradient(circle at 50% 12px, #000 11px, transparent 12px), linear-gradient(#000, #000) 50% 100% / 26px 64px no-repeat; }
.scale figcaption { font-size: .96rem; margin-top: 18px; color: var(--mint); }

/* tiers: bronze tiles that open; the diamond turns when open */
.tiers { display: grid; gap: 12px; margin-top: 18px; }
.tiers details { background: linear-gradient(180deg, rgba(24, 48, 44, .55), rgba(8, 22, 20, .6)); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .38); padding: 0 18px; }
.tiers details[open] { padding-bottom: 14px; box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .7), inset 3px 0 0 var(--gold); }
.tiers summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; list-style: none; cursor: pointer; font: 500 1.08rem/1.25 var(--display); letter-spacing: .03em; color: var(--gold-hi); }
.tiers summary::-webkit-details-marker { display: none; }
.tiers summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease-spring); }
.tiers details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.tiers p { margin: 4px 0 0; }

.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin: 22px 0 34px; }
.vs-mid { font: italic 500 3rem/1 var(--body); color: var(--gold); }
.vs-art { margin: 0; display: grid; place-items: center; gap: 12px; }
.vs-art .line { height: min(420px, 60vw); width: auto; }
.vs-art figcaption { font-size: .96rem; text-align: center; max-width: 34ch; }
@media (max-width: 700px) { .vs { grid-template-columns: 1fr; } .vs-mid { text-align: center; } }
.modes { margin: 18px 0; }
.modes[data-state='species'] [data-m='icon'], .modes[data-state='icon'] [data-m='species'] { display: none; }

/* quiz: answers are full-width tablets (44px+), the verdict is set in hand lettering */
.quiz { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; margin-top: 24px; }
.q-card { padding: 16px; background: linear-gradient(180deg, rgba(24, 48, 44, .55), rgba(8, 22, 20, .6)); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .3); transition: box-shadow .3s; }
.q-card .chips { display: grid; gap: 8px; margin-top: 14px; }
.q-card .chip { width: 100%; justify-content: flex-start; text-align: left; min-height: 46px; }
.q-card .result { min-height: 1.5em; margin: 12px 0 2px; font: 600 1.42rem/1.2 var(--hand); color: var(--gold-hi); }
.q-card.ok { box-shadow: inset 0 0 0 1px var(--jade); }
.q-card.ok .result { color: var(--jade); }
.q-card.done:not(.ok) { box-shadow: inset 0 0 0 1px rgba(164, 106, 78, .9); }
.q-card.done:not(.ok) .result { color: #f0b79a; }
.q-card .hint { display: none; font-size: 1rem; color: var(--mint); margin: 4px 0 0; }
.q-card.done .hint { display: block; }

/* two drawings side by side; on phones they share the row and never run off it */
.duo { display: flex; gap: 30px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.duo .line { height: 260px; width: auto; }
@media (max-width: 600px) { .duo { gap: 18px; } .duo .line { height: auto; width: min(44%, 180px); } }

/* trace: a ledger of layers; traced rows are lit, the interpreted row is dashed */
.steps { list-style: none; padding: 0; margin: 18px 0 16px; display: grid; border-top: 1px solid rgba(216, 180, 108, .28); }
.steps li { border-bottom: 1px solid rgba(216, 180, 108, .2); }
.steps li:last-child { border-bottom-style: dashed; border-bottom-color: rgba(216, 180, 108, .55); }
.steps .chip { width: 100%; min-height: 52px; justify-content: flex-start; text-align: left; gap: 14px; padding: 10px 8px; border: 0; background: none; box-shadow: none; font: 600 .98rem/1.25 var(--display); letter-spacing: .04em; color: var(--mint); }
.steps .chip[aria-pressed='true'] { color: var(--ivory); background: linear-gradient(90deg, rgba(216, 180, 108, .22), rgba(216, 180, 108, .03) 75%, transparent); box-shadow: inset 3px 0 0 var(--gold); }
.steps .chip.interp { color: var(--gold); }
.note { min-height: 2.6em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 1rem; color: var(--mint); }
@keyframes dash { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* the sacred tree: markers are cast bronze bosses with a 44px hit area; on phones the detail sits under the photo */
.tree { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); margin-top: 26px; align-items: start; }
.tree-photo { position: relative; border-radius: 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(216, 180, 108, .4), 0 30px 60px -30px #000; }
.spot { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 36% 30%, #fff4cf, var(--gold) 48%, #8a6428 100%); color: #24180a; font: 700 .84rem var(--display);
  box-shadow: 0 0 0 2px rgba(8, 22, 20, .85), 0 0 0 3px rgba(216, 180, 108, .55), 0 8px 14px -6px #000; transition: transform .25s var(--ease-spring), background .2s; }
.spot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.6); } }
.spot:hover { transform: translate(-50%, -50%) scale(1.08); }
.spot[aria-pressed='true'] { background: radial-gradient(circle at 36% 30%, #fffbe9, var(--gold-hi) 55%, #d8b46c); transform: translate(-50%, -50%) scale(1.12); }
.spot-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 4px; }
.spot-list button { width: 100%; min-height: 48px; display: flex; gap: 14px; align-items: center; text-align: left; background: none; border: 0; border-left: 2px solid transparent; color: var(--mint); padding: 8px 12px; cursor: pointer; font: 500 1.14rem/1.2 var(--body); }
.spot-list button:hover { color: var(--ivory); background: rgba(216, 180, 108, .06); }
.spot-list button[aria-pressed='true'] { color: var(--gold-hi); border-left-color: var(--gold); background: linear-gradient(90deg, rgba(216, 180, 108, .2), rgba(216, 180, 108, .03) 75%, transparent); }
.spot-list span { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff4cf, var(--gold) 55%, #8a6428); color: #24180a; font: 700 .8rem var(--display); }
.spot-panel { min-height: 170px; margin-bottom: 14px; } .spot-panel h3 { color: var(--gold-hi); margin: 10px 0 8px; }
@media (max-width: 820px) {
  .tree { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tree > div:not(.tree-photo) { display: contents; }
  .tree > .tree-photo { order: 0; }
  .tree .spot-panel { order: 1; }
  .tree .spot-list { order: 2; }
  .tree > p.label, .tree p.label { order: 3; }
}

/* materials: a short first look, then the rest on request */
.mat-grid { grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap: 26px 18px; }
.mat-grid [data-capped='true'] { display: none; }
.more-row { margin: 26px 0 0; }

/* condition drawers: a real tab strip with a bronze indicator; scrolls sideways on phones */
.cond-tabs { display: flex; gap: 0; margin: 24px 0 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(216, 180, 108, .3); }
.cond-tabs::-webkit-scrollbar { display: none; }
.cond-tabs button { flex: none; min-height: 48px; padding: 0 16px; background: none; border: 0; color: var(--mint); font: 600 .8rem var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; position: relative; white-space: nowrap; }
.cond-tabs button:hover { color: var(--ivory); }
.cond-tabs button[aria-selected='true'] { color: var(--gold-hi); }
.cond-tabs button[aria-selected='true']::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--bronze); box-shadow: 0 0 10px rgba(244, 226, 176, .4); }
.cond { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.cond .ph { max-width: 420px; }
@media (max-width: 720px) { .cond { grid-template-columns: 1fr; } }

/* crack overlay: a bronze switch (the input stays a real checkbox) */
.check { position: relative; display: flex; gap: 14px; align-items: center; font: 600 1.04rem/1.35 var(--body); margin: 20px 0 8px; cursor: pointer; min-height: 44px; }
.check input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 52px; height: 28px; margin: 0; border: 1px solid rgba(216, 180, 108, .65); background: #07130f; cursor: pointer; transition: background .3s; }
.check input::after { content: ''; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; background: linear-gradient(180deg, #f4e2b0, #b8893f); transition: transform .35s var(--ease-spring); }
.check input:checked { background: #2b4c44; }
.check input:checked::after { transform: translateX(24px); }
.check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.crack { position: relative; margin: 0; }
.crack img { border-radius: 0; width: 100%; }
.crack-plate { position: relative; }
.crack svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; pointer-events: none; }
.crack.on svg { opacity: 1; }
.crack figcaption { margin-top: 10px; }
.flow { padding-left: 1.3em; } .flow li { margin-bottom: 8px; padding-left: 4px; }
ol.flow li::marker { color: var(--gold); font-family: var(--display); font-weight: 600; }
.gloss dt { font: 500 1.18rem/1.2 var(--display); color: var(--gold-hi); margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(216, 180, 108, .2); }
.gloss dt:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.gloss dd { margin: 6px 0 0; color: var(--mint); }

/* segmented toggles in chapters share the row; long labels wrap inside their own half */
.ink .toggle { display: flex; width: 100%; }
.ink .toggle button { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.25; text-align: center; padding: 10px 12px; }

/* sources: plates with a gold field, a square search line */
.search { display: block; max-width: 560px; margin: 16px 0 22px; }
.biblio { list-style: none; padding: 0; display: grid; gap: 10px; margin: 0 0 18px; }
.biblio li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 14px 16px; background: rgba(5, 14, 13, .45); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .22); scroll-margin-top: 90px; }
.biblio li:target, .biblio li:focus-within { box-shadow: inset 0 0 0 2px var(--gold); }
.sid { font: 600 1rem var(--display); color: var(--gold); letter-spacing: .06em; padding-top: 2px; }

/* pager: two bronze plates, painted corners */
.pager a::after { content: ''; position: absolute; inset: 4px; pointer-events: none; opacity: .85;
  background: url('../art/ui/corner.webp') 0 0 / 40px no-repeat, url('../art/ui/corner-tr.webp') 100% 0 / 40px no-repeat, url('../art/ui/corner-bl.webp') 0 100% / 40px no-repeat, url('../art/ui/corner-br.webp') 100% 100% / 40px no-repeat; }
.pager a:hover { box-shadow: 0 14px 26px -18px #000, 0 0 0 1px rgba(216, 180, 108, .25); }

/* ---------- Home ---------- */
.hero { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 7vw, 90px); overflow: hidden; --spot-x: 72%; --spot-y: 40%; }

.hero h1 em { display: block; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }

.assemble { height: 330vh; padding: 0; background: radial-gradient(ellipse 60% 50% at 70% 50%, #24504b, var(--night) 65%, var(--night-3)); }
.as-sticky { position: sticky; top: var(--head); height: calc(100dvh - var(--head)); overflow: hidden; }
.as-stage { position: absolute; inset: 0; }
.as-stage > * { position: absolute; }
.as-motes { inset: 0; overflow: hidden; }
.as-motes i { position: absolute; left: var(--x); bottom: -6px; width: 3px; height: 3px; border-radius: 50%; background: rgba(212, 172, 99, .55); animation: mote var(--d) linear var(--dl) infinite; }
@keyframes mote { to { transform: translate(14px, calc(-100dvh - 20px)); } }
.as-case { border: 1.5px solid rgba(212, 172, 99, .7); border-radius: 16px 11px 18px 13px / 12px 17px 12px 16px; background: radial-gradient(ellipse 80% 70% at 50% 0, rgba(255, 238, 200, .16), rgba(255, 249, 237, .02)); box-shadow: inset 0 0 30px rgba(255, 249, 237, .04); }
.as-case::before { content: ''; position: absolute; left: 8px; top: 4px; width: 30%; height: 40%; border-left: 1px solid rgba(255, 249, 237, .18); transform: skewX(-24deg); }
.as-case span { position: absolute; left: 10px; bottom: 8px; font: 600 0.64rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 1px 4px #000; }
.as-piece { will-change: transform; filter: drop-shadow(0 0 .8px rgba(255, 249, 237, .9)) drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); transition: filter .4s; }
.as-piece.joined { filter: none; }
.as-piece > div { position: absolute; inset: -1px; }
.as-seams { overflow: visible; pointer-events: none; }
.as-seams path { fill: none; stroke: var(--gold); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--j, 0)); filter: drop-shadow(0 0 3px rgba(236, 210, 155, .7)); }
.as-halo { width: 0; height: 0; }
.as-halo i { position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h); border: 1.4px solid var(--gold); border-radius: 50%; opacity: calc(var(--g, 0) * .8); transform: scale(calc(.7 + var(--g, 0) * .3)); }
.as-halo i:nth-child(2) { transform: scale(calc(.82 + var(--g, 0) * .36)); opacity: calc(var(--g, 0) * .5); }
.as-halo i:nth-child(3) { transform: scale(calc(.94 + var(--g, 0) * .42)); opacity: calc(var(--g, 0) * .28); }
html.calm .as-motes { display: none; }
.as-copy { position: absolute; z-index: 2; left: max(18px, 5vw); top: clamp(20px, 7vh, 80px); width: min(400px, calc(100% - 36px)); }

.as-steps { list-style: none; padding: 0; margin: 0; display: grid; }
.as-steps li { grid-area: 1 / 1; font: 600 1.6rem/1.2 var(--hand); color: var(--mint); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.as-steps li.on { opacity: 1; transform: none; }
.as-foot { margin-top: 24px; font-size: .86rem; color: var(--mint); }
.as-foot p { margin: 0 0 8px; }
.as-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 249, 237, .1); }
.as-bar span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--gold); }
.assemble.still { height: auto; } .assemble.still .as-sticky { position: relative; top: 0; height: min(90vh, 820px); }
@media (max-width: 1099px) { .assemble { height: 280vh; } .as-copy { top: auto; bottom: 14px; background: rgba(13, 36, 34, .88); padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(212, 172, 99, .3); } .as-copy h2 { font-size: 1.1rem; } .as-copy .label,
.as-foot p:first-child { display: none; } .as-steps li { font-size: 1.2rem; } .as-foot { margin-top: 8px; font-size: .84rem; } }
@media (min-width: 600px) and (max-width: 1099px) { .as-copy { left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 36px)); } .as-copy .label, .as-foot p:first-child { display: block; } .as-steps li { font-size: 1.45rem; } .as-copy h2 { font-size: 1.4rem; } }

.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mosaic button { padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 249, 237, .25); }
.mosaic img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; transition: transform .6s; }
.mosaic button:hover img { transform: scale(1.06); }

/* ---------- Walk the halls ---------- */

.walk { height: calc(100dvh - var(--head)); display: flex; flex-direction: column; background: var(--night-3); }
.walk-bar { height: 58px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid rgba(212, 172, 99, .25); }
.wb-arrow { flex: none; border: 0; background: none; color: var(--gold-hi); cursor: pointer; font-size: 1.1rem; }
.wb-rooms { flex: 1; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 8px; }
.wb-rooms::-webkit-scrollbar { display: none; }
.wb-rooms button { flex: none; min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--mint); font: 600 .76rem var(--display); letter-spacing: .08em; white-space: nowrap; cursor: pointer; }
.wb-rooms button span { color: var(--gold); font-weight: 700; margin-right: 3px; }
.wb-rooms button[aria-selected='true'] { background: var(--bronze); color: #24180a; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); box-shadow: inset 0 0 0 1px rgba(42, 29, 12, .45); }
.wb-rooms button[aria-selected='true'] span { color: #24180a; }
/* the track commits to sideways movement only, so a swipe never drifts diagonally and snaps to the next hall */
.track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-x; }
.track::-webkit-scrollbar { display: none; }
.hall { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; --spot-x: 70%; --spot-y: 15%; }
.hall-in { position: relative; z-index: 1; height: 100%; overflow-y: auto; padding: 0 0 90px; overscroll-behavior-y: contain; }
.hall-in.intro-in { padding: clamp(28px, 6vw, 60px) max(22px, 5vw) 90px; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr)); gap: clamp(20px, 3vw, 32px) clamp(14px, 2.4vw, 26px); align-items: end; }
/* a vitrine: a bronze frame round the glass, the object under a sheen, and a bronze plinth with its label cut into it */
.case { display: grid; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: zoom-in; transition: transform .35s var(--ease-spring); }
.case:hover { transform: translateY(-3px); }
.glass { position: relative; display: block; padding: 9px 9px 0; background: var(--bronze); border-bottom: 3px solid #3d2a11; border-radius: 3px 3px 0 0; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 246, 220, .6), inset 0 0 0 1px rgba(42, 29, 12, .6); }
.glass::after { content: ''; position: absolute; inset: 9px 9px 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .24) 42%, transparent 52%); transform: translateX(-70%); transition: transform .9s ease; }
.glass img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 26px rgba(0, 0, 0, .35); transition: transform .5s var(--ease-spring); }
.case:hover .glass::after, .case:focus-visible .glass::after { transform: translateX(70%); }
.case:hover .glass img { transform: translateY(-3px) scale(1.02); }
.plinth { display: block; padding: 10px 12px 12px; background: var(--bronze); color: #24180a; font: 600 .98rem/1.22 var(--body); border-radius: 0 0 3px 3px; box-shadow: inset 0 0 0 1px rgba(42, 29, 12, .55), 0 18px 24px -18px #000; }
.plinth .label { display: block; font: 700 .56rem/1 var(--display); letter-spacing: .2em; color: #4a3415; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); margin-bottom: 6px; }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .hall.in .case { animation: rise .7s var(--ease-spring) backwards; animation-delay: var(--d); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.walltext { margin-top: 48px; }
.walltext > .label { display: block; margin-bottom: 2px; }
.wt-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 14px 2px 18px; scrollbar-width: none; }
.wt-row::-webkit-scrollbar { display: none; }
.wt-row button { flex: 0 0 min(62vw, 220px); scroll-snap-align: start; display: grid; gap: 9px; padding: 8px 8px 11px; margin: 0; background: #0a1816; border: 1px solid rgba(216, 180, 108, .55); box-shadow: inset 0 0 0 3px #0a1816, inset 0 0 0 4px rgba(216, 180, 108, .2); color: var(--mint); font: 500 .96rem/1.28 var(--body); text-align: left; cursor: zoom-in; }
.wt-row img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin: 0; }
.wt-row span { display: block; padding: 0 2px; }
.intro-in { display: grid; align-content: center; max-width: 760px; margin: 0 auto; }
.intro-in h1 em { color: var(--gold-hi); }
.intro-wheel { position: absolute; width: min(110vw, 900px); right: -30%; top: -10%; opacity: .12; }
.intro-tree { position: absolute; right: 4%; bottom: 0; height: 80%; width: auto; opacity: .5; }
@media (max-width: 700px) { .intro-tree { height: 34%; right: -14%; opacity: .32; } }
.intro-guide { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.swipe { font: 600 1.6rem var(--hand); color: var(--gold-hi); }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .swipe { animation: nudge 1.8s ease-in-out infinite; } }
@keyframes nudge { 50% { transform: translateX(12px); } }
.intro-note { font-size: .9rem; color: var(--mint); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Map ---------- */
.mapview { display: grid; grid-template-columns: minmax(0, 1fr) 360px; height: calc(100dvh - var(--head)); }
.map-stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; background: #1a120a; }
.map-stage.drag { cursor: grabbing; }
.map { width: 100%; height: 100%; display: block; user-select: none; }
/* landmarks are drawn in CSS pixels and scaled by the zoom in map.js, so pins, ribbons and touch areas keep their size on screen */
.room { cursor: pointer; outline: none; }
.rm-hit { fill: transparent; }
.rm-ring { fill: none; stroke: var(--gold-hi); stroke-width: 1.6; stroke-dasharray: 3 4; opacity: 0; transition: opacity .3s; }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .rm-ring { animation: turn 30s linear infinite; transform-box: fill-box; transform-origin: center; } }
@keyframes turn { to { transform: rotate(360deg); } }
.room:hover .rm-ring, .room:focus-visible .rm-ring, .room.on .rm-ring { opacity: 1; }
.rm-pin { pointer-events: none; transform-box: fill-box; transform-origin: 50% 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .65)); }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .room:hover .rm-pin, html:not(.calm) .room.on .rm-pin { animation: pin-bob 1s ease-in-out infinite; } }
@keyframes pin-bob { 50% { transform: translateY(-5px); } }
.rm-ribbon { fill: rgba(8, 18, 16, .9); stroke: var(--gold); stroke-width: 1; }
.rm-name { font: 600 12.5px var(--display); letter-spacing: .06em; fill: var(--gold-hi); }
.room:hover .rm-ribbon, .room:focus-visible .rm-ribbon, .room.on .rm-ribbon { fill: rgba(70, 50, 18, .94); }
/* small screens and far zoom show the pins only; a ribbon appears on hover, focus or selection (layout kept so the ribbon can be measured) */
.map.nolbl .room:not(.on):not(:hover):not(:focus-visible) .rm-tag { visibility: hidden; }
.map-ctrl { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 8px; }
.map-you { position: absolute; left: 12px; bottom: 6px; pointer-events: none; }
.map-you .sprite { pointer-events: auto; }
.map-panel { overflow-y: auto; padding: 24px; background: var(--night-3); border-left: 1px solid rgba(216, 180, 108, .3); }
.map-panel h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
.mp-note { font-size: .86rem; color: var(--mint); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hall-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 2px; }
.hall-list button { width: 100%; display: flex; gap: 12px; align-items: baseline; padding: 8px 10px; background: none; border: 0; color: var(--ivory); text-align: left; cursor: pointer; font: 600 .82rem var(--display); letter-spacing: .06em; }
.hall-list button:hover, .hall-list button:focus-visible { background: rgba(212, 172, 99, .12); }
.hall-list .n { flex: none; width: 34px; font: 600 .7rem var(--display); color: var(--gold); }
.hall-list .sn { display: none; }
.mp-eyebrow { display: block; margin: 18px 0 6px; }
.mp-name { margin: 0 0 6px; }
.mp-walk { margin: 10px 0 18px; }
.mp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-thumbs button { padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(42, 29, 12, .5), 0 0 0 1px rgba(216, 180, 108, .5); }
.mp-thumbs img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; transition: transform .4s; }
.mp-thumbs button:hover img { transform: scale(1.06); }
@media (max-width: 860px) {
  .mapview { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .map-panel { max-height: 46dvh; border-left: 0; border-top: 1px solid rgba(216, 180, 108, .3); padding: 10px 16px 16px; }
  .map-panel::before { content: ''; display: block; width: 44px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: rgba(255, 249, 237, .4); }
  .map-panel h1 { font-size: 1.3rem; margin-bottom: .3em; }
  .mp-default > p:not(.mp-note) { display: none; }
  .mp-note { font-size: .78rem; line-height: 1.4; }
  .hall-list { display: flex; overflow-x: auto; gap: 6px; margin: 12px -16px 0; padding: 2px 16px 6px; scrollbar-width: none; }
  .hall-list::-webkit-scrollbar { display: none; }
  .hall-list li { flex: none; }
  .hall-list button { width: auto; min-height: 44px; padding: 0 14px; align-items: center; border: 1px solid rgba(216, 180, 108, .45); background: rgba(8, 24, 22, .7); white-space: nowrap; font-size: .76rem; }
  .hall-list .n { width: auto; }
  .hall-list .full { display: none; }
  .hall-list .sn { display: inline; }
  .mp-thumbs { display: flex; overflow-x: auto; gap: 8px; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .mp-thumbs button { flex: 0 0 84px; scroll-snap-align: start; }
  .map-stage .map-ctrl { left: 50%; right: auto; bottom: 10px; transform: translateX(-50%); grid-auto-flow: column; gap: 6px; padding: 5px; background: rgba(5, 16, 15, .86); box-shadow: 0 0 0 1px rgba(216, 180, 108, .55), 0 8px 18px -8px #000; }
  .map-stage .map-ctrl button { width: 44px; height: 44px; }
  .map-you { display: none; }
}

/* ---------- Atlas, record, film ---------- */
.atlas-tools { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.atlas-tools .search { flex: 1; min-width: 240px; margin: 0; }
.atlas-tools .toggle { display: inline-flex; width: auto; }
.atlas-tools .toggle button { flex: none; }
.search input { width: 100%; font: 500 1.06rem var(--body); padding: 13px 18px; border-radius: 0; border: 1px solid rgba(216, 180, 108, .6); background: rgba(5, 14, 13, .6); color: var(--ivory); box-shadow: inset 0 0 0 3px #0c201d, inset 0 0 0 4px rgba(216, 180, 108, .16); }
.search input::placeholder { color: rgba(179, 201, 193, .75); }
.search input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.result { margin: 16px 0 8px; color: var(--mint); }
.atlas { list-style: none; padding: 0; margin: 10px 0 0; }
.atlas button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: zoom-in; }
.atlas.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap: 26px 20px; }
/* museum mounts: a dark mat, a gold hairline and a shadow */
.atlas.grid img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; box-shadow: 0 0 0 5px #0b1a18, 0 0 0 6px rgba(216, 180, 108, .5), 0 16px 24px -16px #000; transition: transform .4s var(--ease-spring); }
.atlas.grid button:hover img { transform: translateY(-3px); }
.atlas .a-body { display: grid; gap: 3px; padding-top: 14px; }
.atlas .a-body > .label { font-size: .74rem; }
.atlas b { font: 500 .98rem/1.25 var(--display); color: var(--ivory); }
.atlas.grid .a-desc { display: none; }
.atlas.list { display: grid; gap: 10px; }
.atlas.list button { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 10px; background: linear-gradient(180deg, #14352f, #0a1c1a); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .35); }
.atlas.list img { aspect-ratio: 3 / 4; object-fit: cover; width: 96px; box-shadow: 0 0 0 1px rgba(216, 180, 108, .5); }
.atlas.list .a-body { padding: 0; }
.atlas.list .a-desc { font-size: .92rem; color: var(--mint); }
.chead.short { min-height: 0; padding-block: clamp(34px, 6vw, 64px) clamp(22px, 3vw, 36px); }
.chead.short .art { min-height: 0; }
.chead.short .art .sprite { position: relative; }
@media (max-width: 600px) { .chead.short .art { display: none; } }
.empty { padding: 40px 0; text-align: center; color: var(--mint); }
.record .crumbs a { color: var(--gold-hi); }
.rec-photo { margin: 0; } .rec-photo button { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; }
.rec-photo img { width: 100%; border-radius: 2px; box-shadow: 0 0 0 1px rgba(212, 172, 99, .35), 0 30px 60px -30px #000; }
.rec-photo figcaption { margin-top: 10px; overflow-wrap: anywhere; font-size: .86rem; }
.rec-label { border-left: 2px solid var(--gold); padding-left: 14px; font: 500 1.15rem var(--display); color: var(--gold-hi); }
.rec-label .label { display: block; margin-bottom: 4px; }

.chead .art .sprite + .sprite { left: auto; right: 10%; }
.player-wrap { padding-block: 24px 64px; }
/* the animatic sits in a bronze frame with painted corners, like the key art plates */
.player { position: relative; padding: clamp(14px, 2.2vw, 22px); background: #0a1a17; border: 1px solid rgba(216, 180, 108, .6); box-shadow: inset 0 0 0 4px #0a1a17, inset 0 0 0 5px rgba(216, 180, 108, .32), 0 30px 60px -30px #000; }
.player::before { content: ''; position: absolute; inset: 4px; pointer-events: none; z-index: 4;
  background: url('../art/ui/corner.webp') 0 0 / 56px no-repeat, url('../art/ui/corner-tr.webp') 100% 0 / 56px no-repeat, url('../art/ui/corner-bl.webp') 0 100% / 56px no-repeat, url('../art/ui/corner-br.webp') 100% 100% / 56px no-repeat; }
.stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night-3); box-shadow: 0 0 0 1px rgba(5, 16, 15, .9), 0 0 0 2px rgba(216, 180, 108, .35); }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease; background: radial-gradient(ellipse at center, #24504b, var(--night-3) 75%); }
.bg.show { opacity: 1; }
.player.playing .bg.show { animation: kb 9s ease-out both; }
@keyframes kb { to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .player.playing .bg.show { animation: none; } }
html.calm .player.playing .bg.show { animation: none; }
.kinetic { position: absolute; left: 5%; top: 9%; max-width: 62%; font: 450 clamp(1.1rem, 3.4vw, 2.8rem)/1.05 var(--display); color: var(--gold-hi); text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }
.kinetic span { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; }
.kinetic.on span { opacity: 1; transform: none; }
html.calm .kinetic span { transition: none; transform: none; }
.cast-on { position: absolute; right: 3%; bottom: 14%; display: flex; gap: 4px; }
.cast-on .sprite { --gs: clamp(60px, 11vw, 130px) !important; pointer-events: none; }
.subs { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: min(86%, 900px); text-align: center; font: 600 clamp(.82rem, 1.6vw, 1.12rem)/1.4 var(--body); }
/* one caption card under the picture (the old per-line boxes overlapped at the line seams) */
.subs:not(:empty) { display: inline-block; max-width: 100%; background: rgba(5, 16, 15, .88); padding: 8px 16px 10px; box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .3), 0 10px 24px -12px #000; }
.subs span { background: none; padding: 0; }
.player.nocc .subs { display: none; }
/* which kind of picture is on screen: a gold tag for the painted illustrations, ivory for our photographs */
.shot-tag { position: absolute; right: 12px; top: 12px; z-index: 3; max-width: calc(100% - 24px); margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; padding: 6px 10px; background: rgba(5, 16, 15, .84); color: var(--mint); border: 1px solid rgba(216, 180, 108, .45); font-size: .8rem; letter-spacing: .08em; text-align: right; }
.shot-tag .kind { padding: 2px 7px; border: 1px solid currentColor; color: var(--ivory); text-transform: uppercase; font-size: .78rem; }
.shot-tag .kind.art { background: var(--gold); border-color: var(--gold); color: #24180a; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.controls .play { min-width: 150px; }
.skips { display: flex; gap: 8px; }
.skip { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid #3d2a11; cursor: pointer; color: #24180a; background: var(--bronze); box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .4); transition: filter .2s, transform .2s; }
.skip:hover { filter: brightness(1.12); }
.skip:active { transform: translateY(1px); }
.skip:focus-visible, .bar:focus-visible, .check input:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.bar { position: relative; flex: 1 1 260px; min-height: 44px; cursor: pointer; touch-action: none; }
.bar .track { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; background: rgba(255, 249, 237, .12); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .4); }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #8a6428, var(--gold-hi)); }
.bar .tick { position: absolute; top: 50%; width: 2px; height: 14px; margin-top: -7px; background: rgba(255, 249, 237, .5); }
.bar .knob { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; rotate: 45deg; background: radial-gradient(circle at 40% 35%, #fff4d0, var(--gold) 60%, #8a6a2c); box-shadow: 0 0 0 2px #05100f, 0 0 12px rgba(244, 226, 176, .55); }
.time { min-width: 10ch; font-size: .84rem; letter-spacing: .08em; color: var(--mint); font-variant-numeric: tabular-nums; }
.controls .check { margin: 0; min-height: 44px; font: 600 .92rem/1.2 var(--label); letter-spacing: .06em; color: var(--mint); }
@media (max-width: 600px) {
  .kinetic { top: 80px; max-width: 92%; font-size: 1.05rem; }
  .shot-tag { left: 8px; right: 8px; top: 8px; max-width: none; justify-content: flex-start; text-align: left; font-size: .72rem; }
  .controls .bar { order: -1; flex: 1 0 100%; }
  .controls .time { margin-left: auto; }
  .controls .check { flex: 1 1 auto; }
}
/* the transcript sits on the bronze ink surface, one plate per scene */
.act { margin: 40px 0 14px; color: var(--gold-hi); font-size: 1.45rem; }
.act:first-of-type { margin-top: 8px; }
.shots { list-style: none; padding: 0; display: grid; gap: 12px; }
.shots li { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto; gap: 18px; padding: 16px; background: rgba(12, 32, 29, .6); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .3); scroll-margin-top: 96px; }
.shots li.now { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(216, 180, 108, .08); }
.shots p { margin: 0 0 8px; }
.shots p.label { color: var(--mint); }
.jump { display: grid; gap: 6px; align-content: start; min-height: 44px; padding: 0; text-align: left; background: none; border: 0; color: var(--ivory); cursor: pointer; }
.jump b { font: 400 1.2rem/1.2 var(--display); color: var(--gold-hi); }
.jump:hover b { color: #fff4d0; }
.jump:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.tag-art { justify-self: start; margin-top: 4px; padding: 2px 8px; border: 1px solid rgba(216, 180, 108, .6); color: var(--gold); font-size: .74rem; }
.refs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sthumbs { display: flex; gap: 6px; align-content: start; }
.sthumbs button { padding: 0; border: 0; background: none; cursor: zoom-in; }
.sthumbs button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.sthumbs img { width: 52px; height: 70px; object-fit: cover; box-shadow: 0 0 0 1px rgba(216, 180, 108, .5); }
@media (max-width: 820px) { .shots li { grid-template-columns: minmax(0, 1fr); } .sthumbs { order: 3; } }

/* =====================================================================
   Texture and life
   Grain, patina and plaster are baked into each surface (no blend layers, cheap on phones).
   Each section also carries an .amb layer: light beams, rising dust and drifting drawings.
   ===================================================================== */
:root {
  --seal: #b4492f;
  /* fine ivory speckle for dark walls */
  --tx-speck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .88 0 0 0 -.9 .48'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* fine dark speckle for pale walls */
  --tx-grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 -1.1 .58'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* verdigris patina blooms */
  --tx-patina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .62 0 0 0 0 .55 1.3 0 0 0 -.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* plaster mottling */
  --tx-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .06 .8 0 0 0 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* worn-ink holes for seals */
  --tx-worn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 10.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* cloud-and-thunder meander (leiwen), one 48 x 24 tile */
  --leiwen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M1 23V1h22v18H5V5h14v10H9V9h6v3'/%3E%3Cpath d='M47 1v22H25V5h18v14H29V9h10v6h-6v-3'/%3E%3Cpath d='M23 23h2'/%3E%3C/svg%3E");
}

html, body { overflow-x: clip; }
.night,
.wall,
.ink,
.chead { overflow-x: clip; }

.hall.h-night { background-image: var(--tx-speck), var(--tx-patina), radial-gradient(600px circle at var(--spot-x) var(--spot-y), #2a5a54, var(--night) 60%, var(--night-3)); background-size: 240px 240px, cover, auto; }
.hall.h-wall { background-image: var(--tx-speck), var(--tx-mottle), radial-gradient(600px circle at var(--spot-x) var(--spot-y), #8b7a6c, var(--wall) 55%, var(--wall-2)); }

/* stacking: the ambience sits behind each section's own content */
:where(.night,
.wall,
.ink,
.hall) > :where(:not(.amb,
.frieze)) { position: relative; }
.amb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.amb > div { position: absolute; inset: 0; }
.beams b { position: absolute; top: -8%; left: var(--bx); width: clamp(160px, 30%, 420px); height: 115%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 238, 200, .17), rgba(255, 238, 200, .05) 55%, transparent 88%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  animation: sway var(--bd) ease-in-out infinite alternate; }
.beams b + b { animation-direction: alternate-reverse; opacity: .7; }
@keyframes sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.motes i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 6px rgba(236, 210, 155, .8); opacity: 0; animation: dust var(--d) ease-in-out var(--dl) infinite; }
.wall .motes i, .h-wall .motes i { background: var(--ivory); box-shadow: none; }

@keyframes dust { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: .85; } 75% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--dx), -110px); } }
.drift { position: absolute; display: block; aspect-ratio: var(--ar, 1); max-width: 46%; background: var(--gold); opacity: .11; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  translate: 0 calc(var(--sy, 0px) * var(--pz) * -1); rotate: var(--r0); animation: float var(--d) ease-in-out var(--dl) infinite alternate; }
.wall .drift, .h-wall .drift { background: var(--ivory); opacity: .1; }

@keyframes float { from { transform: translateY(-14px) rotate(-5deg) scale(.96); } to { transform: translateY(14px) rotate(5deg) scale(1.04); } }

/* the cloud-and-thunder frieze along the top of each wall */
.frieze { position: absolute; z-index: 0; left: 0; right: 0; top: 14px; height: 24px; background: var(--fc, rgba(212, 172, 99, .5)); pointer-events: none;
  -webkit-mask: var(--leiwen) 0 0 / 48px 24px repeat-x; mask: var(--leiwen) 0 0 / 48px 24px repeat-x; animation: march 60s linear infinite; }
.frieze::before, .frieze::after { content: none; }
.wall > .frieze { --fc: rgba(255, 249, 237, .38); }

@keyframes march { to { -webkit-mask-position: 480px 0; mask-position: 480px 0; } }

/* gold foil headings: a slow light passes across the lettering */
.night h1, .night h2, .h-night h2, .h-night h1 {
  background: linear-gradient(105deg, var(--gold) 0 36%, #fff4d6 46%, var(--gold-hi) 52%, var(--gold) 62% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 8s ease-in-out infinite; }
.night h1 em, .night h2 em, .h-night h1 em { color: transparent; }
@keyframes foil { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }

/* printed line art: a second, offset verdigris pass, like a hand-pulled print slightly out of register */
.chead .art .line,
.intro-wheel { filter: drop-shadow(5px 4px 0 rgba(76, 133, 119, .55)) var(--glow); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .chead .art .line { animation: breathe 6s ease-in-out infinite; }
}
@keyframes breathe { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.2deg); } }

/* museum-mount corners on every photograph */
.ph button.frame::before, .glass::before, .mosaic button::before { content: ''; position: absolute; inset: 5px; z-index: 2; pointer-events: none; --c: rgba(236, 210, 155, .9);
  background: linear-gradient(var(--c), var(--c)) 0 0 / 14px 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 14px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 14px 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 14px,
    linear-gradient(var(--c), var(--c)) 0 100% / 14px 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 14px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 14px 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 14px;
  background-repeat: no-repeat; opacity: .55; transition: inset .35s var(--ease-spring), opacity .3s; }
.ph button.frame:hover::before, .case:hover .glass::before, .mosaic button:hover::before { inset: 10px; opacity: 1; }
.mosaic button { position: relative; }
.glass::before { inset: 4px 4px 0; --c: rgba(42, 29, 12, .7); }

/* chapter tiles: lift, tilt, the drawing wobbles */

@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.05); } 60% { transform: rotate(3deg) scale(1.06); } }

/* walking halls: a huge outlined hall number behind each one */

/* the walk and map are full-screen: no page scroll underneath */
body[data-screen='walk'], body[data-screen='map'] { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
body[data-screen='walk'] .foot, body[data-screen='map'] .foot { display: none; }

/* page arrival */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) #main.enter > * > :where(.amb) { animation: none; }
  html:not(.calm) #main.enter::before { content: ''; position: fixed; z-index: 55; left: 0; right: 0; top: var(--head); height: 2px; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); animation: sweep .9s ease-out forwards; pointer-events: none; }
  html:not(.calm) #main.enter > section:first-child, html:not(.calm) #main.enter > .walk, html:not(.calm) #main.enter > .chead { animation: arrive .8s var(--ease-spring) both; }
}
@keyframes sweep { from { transform: scaleX(0); opacity: 1; } 70% { opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
@keyframes arrive { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px); } }
#main.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, 0); } }

/* ---------- Cameos: a guide wanders through ---------- */
.cameo { position: fixed; z-index: 45; border: 0; padding: 0; background: none; cursor: pointer; }
.cameo .sprite { display: block; pointer-events: none; }
.cameo .sprite i { animation: none; filter: drop-shadow(0 0 8px rgba(236, 210, 155, .8)); }
.cameo-say { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); white-space: nowrap; font: 600 1.15rem/1 var(--hand); color: var(--night-2); background: var(--ivory); padding: 4px 10px 5px; border-radius: 12px; box-shadow: 0 0 0 1.5px var(--gold); opacity: 0; animation: say 7s ease forwards; }
@keyframes say { 0%, 25% { opacity: 0; transform: translate(-50%, 6px); } 32%, 70% { opacity: 1; transform: translate(-50%, 0); } 80%, 100% { opacity: 0; } }
.cameo.peek { left: var(--cx); bottom: 0; animation: peek 7s ease-in-out forwards; }
@keyframes peek { 0% { transform: translateY(105%); } 18%, 30% { transform: translateY(18%); } 36% { transform: translateY(24%) rotate(-6deg); } 44%, 70% { transform: translateY(12%) rotate(4deg); } 100% { transform: translateY(110%); } }
.cameo.fly { top: 24vh; left: 0; animation: fly-l 7s linear forwards; }
.cameo.fly.r { animation-name: fly-r; }
@keyframes fly-l { 0% { transform: translate(-120px, 0); } 25% { transform: translate(22vw, -40px); } 50% { transform: translate(48vw, 10px); } 75% { transform: translate(74vw, -30px); } 100% { transform: translate(calc(100vw + 40px), 0); } }
@keyframes fly-r { 0% { transform: translate(calc(100vw + 40px), 0); } 25% { transform: translate(74vw, -40px); } 50% { transform: translate(48vw, 10px); } 75% { transform: translate(22vw, -30px); } 100% { transform: translate(-120px, 0); } }
.cameo.trot { bottom: 2px; left: 0; animation: fly-l 9s linear forwards; }
.cameo.trot.r { animation-name: fly-r; }
.cameo.trot .sprite { animation: trot .5s ease-in-out infinite; }
@keyframes trot { 50% { transform: translateY(-10px); } }
.cameo.r .sprite { transform: scaleX(-1); }
.cameo.caught { animation: caught .8s var(--ease-spring) forwards !important; }
.cameo.caught .cameo-say { display: none; }
@keyframes caught { 0% { scale: 1; } 40% { scale: 1.5; rotate: -12deg; opacity: 1; } 100% { scale: 0; rotate: 40deg; opacity: 0; } }

/* ---------- Seals and the passport ---------- */
.seal { position: relative; display: inline-grid; place-items: center; width: var(--ss, 64px); aspect-ratio: 1; border-radius: 22%; background: var(--seal); flex: none;
  -webkit-mask: var(--tx-worn) 0 0 / 120px 120px; mask: var(--tx-worn) 0 0 / 120px 120px; transform: rotate(-4deg); }
.seal::before { content: ''; position: absolute; inset: 6%; border: max(1.5px, calc(var(--ss, 64px) * .03)) solid rgba(255, 249, 237, .9); border-radius: 18%; }
.seal.g, .seal.g::before { border-radius: 50%; }
.seal i { width: 62%; height: 62%; background: var(--ivory); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.seal em { position: absolute; right: 11%; bottom: 8%; font: 800 calc(var(--ss, 64px) * .14)/1 var(--body); font-style: normal; color: var(--ivory); }
.stamp-fx { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 18px; pointer-events: none; }
.stamp-fx::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(5, 16, 15, .55), transparent 65%); animation: fade-in .25s both; }
.stamp-fx.go::before { opacity: 0; transition: opacity .4s; }
.seal.big { --ss: min(46vw, 220px); grid-area: 1 / 1; animation: slam .55s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 0 0 0 transparent; }
@keyframes slam { 0% { transform: translate(var(--fx, 0), var(--fy, 0)) scale(.3) rotate(20deg); opacity: 0; } 45% { transform: scale(2.1) rotate(-20deg); opacity: 1; } 75% { transform: scale(.9) rotate(-5deg); } 100% { transform: scale(1) rotate(-7deg); } }
.stamp-fx.go .seal.big { animation: home .6s cubic-bezier(.6, 0, .8, .4) forwards; }
@keyframes home { from { transform: scale(1) rotate(-7deg); } to { transform: translate(var(--tx, 0), var(--ty, -40vh)) scale(.12) rotate(-30deg); opacity: .6; } }
.stamp-fx u { grid-area: 1 / 1; width: 12px; height: 12px; border-radius: 50%; background: var(--seal); opacity: 0; animation: splat .7s ease-out .32s both; }
.stamp-fx u:nth-of-type(3n) { width: 7px; height: 7px; }
@keyframes splat { 0% { opacity: .9; transform: rotate(var(--a)) translateX(30px) scale(1.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(.4); } }
.stamp-cap { grid-area: 2 / 1; position: relative; justify-self: center; max-width: min(88vw, 420px); text-align: center; font: 600 clamp(1.15rem, 4.8vw, 1.5rem)/1.2 var(--hand); color: var(--ivory); background: var(--night-3); border: 1px solid var(--gold); padding: 8px 18px; border-radius: 18px; box-shadow: 0 0 0 3px var(--night-3), 0 0 0 4px rgba(216, 180, 108, .35); animation: fade-up .4s .45s both; }
.stamp-cap b { color: var(--gold-hi); font-weight: 600; }
.stamp-fx.go .stamp-cap { opacity: 0; transition: opacity .2s; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }

.pass-btn.ping { animation: boing .7s var(--ease-spring); }
@media (max-width: 420px) { .nav .pass-btn span:last-child { display: none; } .brand { font-size: .98rem; } }
.passport .pp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(780px, calc(100% - 24px)); max-height: calc(100% - 32px); overflow: auto; padding: clamp(40px, 6vw, 56px) clamp(26px, 5vw, 48px);
  background: url('../art/ui/corner.webp') 0 0 / 84px no-repeat, url('../art/ui/corner-tr.webp') 100% 0 / 84px no-repeat, url('../art/ui/corner-bl.webp') 0 100% / 84px no-repeat, url('../art/ui/corner-br.webp') 100% 100% / 84px no-repeat,
    radial-gradient(ellipse 80% 50% at 50% 0, rgba(216, 180, 108, .12), transparent 70%), linear-gradient(180deg, #0f2824, var(--night-3));
  color: var(--ivory); border: 1px solid rgba(216, 180, 108, .45); border-radius: 4px; box-shadow: 0 40px 90px -20px #000; }
.passport .pp h2 { color: var(--gold-hi); }
.passport .pp .label { color: var(--gold); }
.passport .pp > p { color: var(--mint); }
.passport .sh-x { top: 14px; right: 14px; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 12px; margin: 22px 0; }
.pp-cell { display: grid; justify-items: center; text-align: center; gap: 4px; font-size: .8rem; line-height: 1.25; color: var(--mint); }
.pp-cell b { font: 600 .92rem/1.2 var(--display); color: var(--ivory); margin-top: 4px; min-height: 2.4em; display: grid; align-content: start; }
.pp-cell small { color: var(--mint); opacity: .85; }
.pp-cell .seal { --ss: 72px; }
.pp-cell:not(.got) .seal { background: rgba(216, 180, 108, .05); outline: 1.5px dashed rgba(216, 180, 108, .45); outline-offset: -2px; -webkit-mask: none; mask: none; }
.pp-cell:not(.got) .seal::before { border-color: transparent; }
.pp-cell:not(.got) .seal i { background: rgba(216, 180, 108, .4); }
.pp-cell:not(.got) .seal em { color: var(--gold-hi); }
.pp-cell .seal em { font-size: max(12px, calc(var(--ss, 72px) * .15)); }
.pp-cell.got b { color: var(--gold-hi); }
.pp-foot { font-size: .88rem; color: var(--mint); }
.pp-foot .ev { color: #f0b79a; }

/* =====================================================================
   Bronze Legend: painted key art, carved capitals, thin gold frames
   ===================================================================== */
.top { background: linear-gradient(180deg, rgba(5, 16, 15, .92), rgba(5, 16, 15, .7)); border-bottom: 1px solid rgba(216, 180, 108, .28); }
body[data-screen='home'] .top { position: fixed; left: 0; right: 0; background: linear-gradient(180deg, rgba(5, 16, 15, .7), transparent); border-bottom-color: transparent; transition: background .4s; }
body[data-screen='home'].scrolled .top { background: rgba(5, 16, 15, .9); border-bottom-color: rgba(216, 180, 108, .28); }
.brand { gap: 12px; }
.brand-zh { font: 1.55rem/1 var(--han); color: var(--gold-hi); }
.brand-en { font: 600 .74rem/1 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--ivory); }
.nav a, .nav button { font: 600 .7rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); }
.nav a[aria-current='page'] { background: none; color: var(--gold-hi); box-shadow: inset 0 -1px 0 var(--gold); border-radius: 0; }
.menu a { font: 600 .9rem var(--display); letter-spacing: .08em; }

/* centred section titles with the ornament line */
.st { text-align: center; }
.st p { margin-inline: auto; color: var(--mint); font-size: 1.2rem; max-width: 36ch; }
h2.centre::after { margin-inline: auto; }

/* ---------- key art ---------- */
.key { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--night-3); }
.key picture img { position: absolute; inset: 0; width: 100%; height: 108%; object-fit: cover; object-position: 50% 40%; }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .key picture img { animation: push 34s ease-in-out infinite alternate; } }
@keyframes push { from { scale: 1.02; } to { scale: 1.12; } }
.key::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 16, 15, .55), transparent 26%, transparent 52%, rgba(5, 16, 15, .85) 82%, var(--night-3)); }
.key::before { content: ''; position: absolute; z-index: 3; inset: calc(var(--head) + 8px) 10px 10px; border: 1px solid rgba(216, 180, 108, .3); pointer-events: none; }
.embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.embers i { position: absolute; bottom: -6px; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 8px 2px rgba(244, 226, 176, .55); animation: ember linear infinite; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), -85svh); opacity: 0; } }
.key-logo { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--head) + 7svh); text-align: center; padding: 0 16px; }
.crest { display: block; position: relative; width: 44px; height: 44px; margin: 0 auto 16px; border: 1px solid var(--gold); transform: rotate(45deg); }
.crest::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--gold-hi); }
.crest::after { content: ''; position: absolute; inset: 16px; background: var(--gold-hi); box-shadow: 0 0 18px var(--gold-hi); }
.key-logo h1 { margin: 0; font: 600 clamp(2.3rem, 10.5vw, 6.4rem)/.95 var(--display); letter-spacing: .14em; margin-right: -.14em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff7de 8%, var(--gold) 55%, #8a6b33); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .75)); }
.key-sub { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px auto 0; font: 500 clamp(.68rem, 2.4vw, .95rem)/1 var(--display); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: var(--ivory); text-shadow: 0 2px 10px #000; max-width: none; }
.key-sub::before, .key-sub::after { content: ''; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.key-sub::after { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .key-logo h1 { animation: rise-in 1.6s .2s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.calm) .key-sub, html:not(.calm) .crest { animation: rise-in 1.4s .7s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.calm) .key-foot { animation: rise-in 1.2s 1.1s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
.crest { animation-name: rise-in; }
.key-foot { position: absolute; z-index: 4; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); display: grid; justify-items: center; text-align: center; padding: 0 20px; }
.key-lede { font: italic 500 1.2rem/1.45 var(--body); color: var(--ivory); text-shadow: 0 2px 12px #000; max-width: 36ch; margin-bottom: 14px; }
.key-cta { display: flex; flex-wrap: wrap; justify-content: center; }
.key-cue { display: grid; justify-items: center; gap: 8px; margin-top: 14px; font: 600 .64rem var(--display); letter-spacing: .4em; text-transform: uppercase; color: var(--gold-hi); text-decoration: none; }
.key-cue i { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.key-credit { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); top: calc(var(--head) + 16px); white-space: nowrap; display: flex; gap: 10px; align-items: center; font: 600 .62rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 236, 220, .8); text-shadow: 0 1px 8px #000; }
.key-credit .ev { font-size: .64rem; padding: 3px 6px; }
@media (max-width: 600px) { .key-lede { font-size: 1.08rem; } .key-credit { display: none; } }

/* ---------- story plate ---------- */
.story-plate { padding: clamp(70px, 10vw, 120px) 0 clamp(50px, 8vw, 90px); background: var(--night-3); }
.plate { position: relative; margin: 36px 0 30px; }
.plate img { width: 100%; aspect-ratio: 16 / 9; min-height: 340px; object-fit: cover; -webkit-mask: linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent); }
.plate::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(5, 16, 15, .82) 70%); }
.plate figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 6%; text-align: center; padding: 0 20px; }
.plate figcaption p { font: italic 500 clamp(1.3rem, 3vw, 2rem)/1.35 var(--body); color: var(--ivory); text-shadow: 0 2px 16px #000, 0 0 3px #000; margin: 0 auto 8px; }
.plate figcaption .label { color: var(--gold-hi); text-shadow: 0 1px 6px #000; }

/* ---------- they all connect, on ink ---------- */
.assemble { background: radial-gradient(ellipse 60% 50% at 70% 50%, #163a35, var(--night-3) 70%); }
.as-copy h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-style: normal; }
.as-steps li { font: italic 500 1.5rem/1.25 var(--body); color: var(--gold-hi); }

/* ---------- guides: select screen ---------- */
.guides-sec { padding: clamp(70px, 10vw, 120px) 0 40px; background: radial-gradient(ellipse 70% 55% at 50% 62%, #173a35, var(--night-3) 72%); overflow: hidden; }
.cast-stage { position: relative; max-width: 980px; margin: 18px auto 0; height: min(84svh, 760px); }
.cast-art { position: absolute; left: 50%; top: 0; height: calc(100% - 96px); width: auto; max-width: none; translate: -50% 0;
  -webkit-mask: radial-gradient(ellipse 48% 48% at 50% 50%, #000 60%, transparent 74%); mask: radial-gradient(ellipse 48% 48% at 50% 50%, #000 60%, transparent 74%); }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .cast-art { animation: hover 5s ease-in-out infinite; } }
@keyframes hover { 50% { transform: translateY(-10px); } }
.cast-quote { position: absolute; z-index: 2; right: 6%; top: 6%; max-width: 200px; font: 600 1.45rem/1.05 var(--hand); color: var(--gold-hi); rotate: 4deg; text-shadow: 0 2px 10px #000; }
.cast-name { position: absolute; z-index: 2; left: 6%; bottom: 124px; display: grid; justify-items: start; gap: 4px; }
.cast-name b { font: 600 clamp(2.6rem, 12vw, 5.2rem)/.9 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ivory); text-shadow: 0 4px 22px rgba(0, 0, 0, .85); }
.cast-name > span:not(.ev) { font: italic 500 1.25rem var(--body); color: var(--gold-hi); text-shadow: 0 2px 10px #000; }
.cast-pick { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 14px; }
.cast-pick button { width: 56px; height: 56px; padding: 0; border: 1px solid rgba(216, 180, 108, .5); background: var(--night-2); rotate: 45deg; overflow: hidden; cursor: pointer; transition: box-shadow .3s, border-color .3s; }
.cast-pick img { width: 150%; max-width: none; height: 150%; margin: -25%; object-fit: cover; rotate: -45deg; }
.cast-pick button[aria-selected='true'] { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(216, 180, 108, .3), 0 0 22px rgba(244, 226, 176, .45); }

/* ---------- the halls: painted panels ---------- */
.realm { padding: clamp(70px, 10vw, 120px) 0 60px; background: var(--night-3); }
.lands { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px max(18px, calc((100vw - 1200px) / 2)) 26px; scrollbar-width: none; }
.lands::-webkit-scrollbar { display: none; }
.land { position: relative; flex: 0 0 min(82vw, 420px); aspect-ratio: 4 / 5; scroll-snap-align: center; overflow: hidden; text-decoration: none; color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .4); }
.land > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.2s ease; }
.land { isolation: isolate; }
.land:hover > img { transform: scale(1.06); }
.land::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(5, 16, 15, .96)); }
.land::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(244, 226, 176, .25); pointer-events: none; }
.land-zh { position: absolute; top: 18px; right: 16px; writing-mode: vertical-rl; font: 2.1rem/1.05 var(--han); color: var(--ivory); text-shadow: 0 2px 12px #000; }
.land-t { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.land-t b { display: block; font: 600 1.35rem/1.15 var(--display); letter-spacing: .05em; margin: 6px 0 12px; }
.land-ph { display: flex; align-items: flex-end; gap: 6px; }
.land-ph img { width: 44px; height: 58px; object-fit: cover; box-shadow: 0 0 0 1px rgba(244, 226, 176, .5); }
.land-ph em { margin-left: 6px; font: italic 500 1rem var(--body); color: var(--mint); }

/* ---------- chapters: painted cards ---------- */
.chapters-sec { padding: clamp(60px, 9vw, 110px) 0; background: linear-gradient(var(--night-3), #0a1a18); }
.chaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; margin-top: 30px; }
.chap { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; text-decoration: none; color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .35); }
.chap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: saturate(.9); transition: transform 1s ease, filter .5s; }
.chap:hover img { transform: scale(1.05); filter: saturate(1.1); }
.chap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 16, 15, .9), rgba(5, 16, 15, .2) 75%); }
.chap-t { position: absolute; left: 18px; bottom: 16px; right: 70px; }
.chap-t b { display: block; font: 600 1.1rem/1.2 var(--display); letter-spacing: .05em; margin-top: 4px; }
.chap-zh { position: absolute; right: 14px; top: 12px; writing-mode: vertical-rl; font: 1.6rem/1 var(--han); color: var(--gold-hi); text-shadow: 0 2px 10px #000; }

.archive-sec { padding: clamp(60px, 9vw, 110px) 0; background: #0a1a18; }

/* ---------- chapter openings: a painted plate ---------- */
.chead { position: relative; min-height: min(86svh, 760px); display: grid; align-items: end; padding: 0 0 clamp(30px, 5vw, 60px); overflow: hidden; background: var(--night-3); }
.chead-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .chead-art { animation: push 30s ease-in-out infinite alternate; } }
.chead::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 16, 15, .35), transparent 30%, rgba(5, 16, 15, .55) 62%, var(--night-3) 96%); }
.chead::after { content: ''; position: absolute; z-index: 1; inset: 10px; border: 1px solid rgba(216, 180, 108, .3); pointer-events: none; }
.chead-in { position: relative; z-index: 2; }
.chead-in h1 { font-size: clamp(2rem, 6vw, 4rem); text-shadow: 0 4px 22px rgba(0, 0, 0, .8); max-width: 18ch; }
.chead-in .label { text-shadow: 0 1px 10px #000, 0 0 3px #000; }
.film-note { margin-top: .9em; max-width: 60ch; font-size: .98rem; }
.chead-in .lede { color: var(--ivory); text-shadow: 0 2px 12px #000; }
.chead .han { z-index: 2; top: calc(var(--head) * 0 + 28px); right: max(22px, var(--gutter)); font: clamp(2.2rem, 5vw, 3.6rem)/1.05 var(--han); color: var(--ivory); text-shadow: 0 2px 16px #000; letter-spacing: 0; }
.chead-guide { position: absolute; z-index: 2; right: max(16px, 4vw); bottom: 128px; }
.chead-guide .sprite { --sprite-c: var(--gold-hi); }
.chead-credit { text-shadow: 0 1px 8px #000, 0 0 2px #000; position: absolute; z-index: 2; left: 22px; top: 22px; font: 600 .74rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 236, 220, .75); }
.chead-credit .ev { font-size: .7rem; padding: 4px 7px; }
@media (max-width: 700px) { .chead-guide { display: none; } }

/* ---------- walking halls: each opens on its painting ---------- */
.hall.h-night, .hall.h-wall { background: var(--night-3); }
.hall-plate { position: relative; min-height: min(62vh, 520px); display: grid; align-items: end; overflow: hidden; margin-bottom: clamp(22px, 4vw, 40px); }
.hall-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .hall.in .hall-plate > img { animation: push 26s ease-in-out infinite alternate; } }
.hall-plate::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 30%, rgba(5, 16, 15, .7) 70%, var(--night-3)); }
.hall-plate::after { content: ''; position: absolute; z-index: 1; inset: 8px 8px 0; border: 1px solid rgba(216, 180, 108, .3); border-bottom: 0; pointer-events: none; }
.hall-title { position: relative; z-index: 2; padding: 0 max(18px, 5vw) 6px; }
.hall-title h2 { font-size: clamp(1.6rem, 4.6vw, 3rem); text-shadow: 0 4px 20px rgba(0, 0, 0, .85); max-width: 20ch; }
.hall-title p { margin: 0; color: var(--ivory); text-shadow: 0 2px 10px #000; max-width: 44ch; font-style: italic; }
.hall-zh { position: absolute; z-index: 2; top: 18px; right: max(18px, 5vw); writing-mode: vertical-rl; font: clamp(2rem, 4.4vw, 3.2rem)/1.05 var(--han); color: var(--ivory); text-shadow: 0 2px 14px #000; }
.hall-guide { position: absolute; z-index: 2; right: max(14px, 4vw); bottom: 4px; }
.hall-guide .sprite { --sprite-c: var(--gold-hi); }
.hall .cases, .hall .walltext { padding-inline: max(18px, 5vw); }

/* ---------- painted world map ---------- */

/* calmer surfaces for the painted direction: ink, a faint patina, no speckle */
.night { background-image: var(--tx-patina), radial-gradient(ellipse 70% 60% at var(--spot-x, 70%) var(--spot-y, 30%), #17372f 0%, var(--night) 62%, var(--night-3) 100%); background-size: cover, auto; }
/* the 700px patina tile is stretched over the section so its edges never show as a seam */
.wall { background-image: linear-gradient(180deg, rgba(0, 0, 0, .1), transparent 30%, rgba(0, 0, 0, .14)); }

.rec-cap { margin-top: 10px; font: italic 500 .95rem/1.4 var(--body); color: var(--mint); word-break: break-word; }

/* =====================================================================
   Carved bronze UI: stepped corners, square-spiral (leiwen) end caps, eye dividers.
   Drawn from the bronzes' own ornament; buttons read as cast tablets, not pills.
   ===================================================================== */
:root {
  --steps: polygon(10px 0, calc(100% - 10px) 0, calc(100% - 10px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) calc(100% - 5px), calc(100% - 10px) calc(100% - 5px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 10px), 0 calc(100% - 10px), 0 10px, 5px 10px, 5px 5px, 10px 5px);
  --steps-sm: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
  --bronze: linear-gradient(180deg, #f6e3ad 0%, #d9b46a 38%, #a9803c 72%, #7c5a24 100%);
  --spiral-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 15V1.5H14.5V12H4.5V4.5H11.5V9H7.5V7' fill='none' stroke='%232a1d0c' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  --spiral-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 15V1.5H1.5V12H11.5V4.5H4.5V9H8.5V7' fill='none' stroke='%232a1d0c' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  --spiral-l-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 15V1.5H14.5V12H4.5V4.5H11.5V9H7.5V7' fill='none' stroke='%23d8b46c' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  --spiral-r-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 15V1.5H1.5V12H11.5V4.5H4.5V9H8.5V7' fill='none' stroke='%23d8b46c' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  --frame-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d8b46c' stroke-width='1.2'%3E%3Cg id='c'%3E%3Cpath d='M4 30V18H10V10H18V4H30M8 30V22H14V14H22V8H30' /%3E%3Cpath d='M13 31V13H31V27H17V17H27V23H22' stroke-width='1.6'/%3E%3Cpath d='M30 4H40M30 8H40M4 30V40M8 30V40'/%3E%3C/g%3E%3Cuse href='%23c' transform='translate(120 0) scale(-1 1)'/%3E%3Cuse href='%23c' transform='translate(0 120) scale(1 -1)'/%3E%3Cuse href='%23c' transform='translate(120 120) scale(-1 -1)'/%3E%3Cpath d='M40 4H80M40 8H80M40 116H80M40 112H80M4 40V80M8 40V80M116 40V80M112 40V80'/%3E%3C/g%3E%3C/svg%3E");
  --divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 16'%3E%3Cg fill='none' stroke='%23d8b46c' stroke-width='1.2'%3E%3Cpath d='M0 8H58M122 8H180'/%3E%3Cpath d='M58 13V3H70V11H62V6H67V8' /%3E%3Cpath d='M122 13V3H110V11H118V6H113V8'/%3E%3Cpath d='M76 8Q90 -1 104 8Q90 17 76 8Z' stroke-width='1.4'/%3E%3C/g%3E%3Ccircle cx='90' cy='8' r='2.8' fill='%23d8b46c'/%3E%3C/svg%3E");
}
.ff-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 8px 6px 0; min-height: 50px; padding: 15px 44px; border: 0; cursor: pointer;
  font: 700 .74rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: #24180a; text-shadow: 0 1px 0 rgba(255, 244, 214, .55);
  background: #3a2710; clip-path: var(--steps); transition: transform .2s, filter .25s; }
.ff-btn::before { content: ''; position: absolute; z-index: -1; inset: 2px; clip-path: var(--steps); background: var(--tx-patina), var(--bronze); }
.ff-btn::after { content: ''; position: absolute; z-index: -1; inset: 6px; clip-path: var(--steps-sm); background: var(--spiral-l) 10px 50% / 13px no-repeat, var(--spiral-r) calc(100% - 10px) 50% / 13px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(42, 29, 12, .55); }
.ff-btn:hover { filter: brightness(1.1) saturate(1.1); transform: translateY(-1px); }
.ff-btn:active { transform: translateY(1px); filter: brightness(.92); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .ff-btn::before { background: linear-gradient(105deg, transparent 35%, rgba(255, 250, 230, .55) 47%, transparent 58%) -150% 0 / 250% 100% no-repeat, var(--tx-patina), var(--bronze); animation: glint 5s ease-in-out infinite; }
}
@keyframes glint { 0%, 55% { background-position: -150% 0, 0 0, 0 0; } 100% { background-position: 250% 0, 0 0, 0 0; } }
.ff-btn.ghost { color: var(--gold-hi); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); background: var(--gold); }
.ff-btn.ghost::before, html:not(.calm) .ff-btn.ghost::before { inset: 1.5px; background: radial-gradient(ellipse at 50% 0, rgba(216, 180, 108, .22), transparent 70%), #0c201d; animation: none; }
.ff-btn.ghost::after { background: var(--spiral-l-gold) 10px 50% / 13px no-repeat, var(--spiral-r-gold) calc(100% - 10px) 50% / 13px no-repeat; box-shadow: inset 0 0 0 1px rgba(216, 180, 108, .35); }
.ff-btn.ghost:hover { filter: brightness(1.2); }

/* header controls: small stepped tablets */
/* HUD tablets: the same painted plates as the buttons. Dark plate when idle, gold when open or pressed. */
.nav .menu-btn, .nav .pass-btn, .menu .quick a, .foot #calm-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 4px 18px;
  border: 0; border-style: solid; border-width: 7px 17px; border-image: url('../art/ui/btn-dark.webp') 44 182 fill / 7px 17px stretch; background: none;
  color: var(--gold-hi); font: 700 .72rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px 4px #000; border-radius: 0;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); cursor: pointer; transition: filter .25s, transform .25s; }
.nav .menu-btn:hover, .nav .pass-btn:hover, .menu .quick a:hover, .foot #calm-btn:hover { background: none; filter: brightness(1.2) drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); transform: translateY(-1px); }
.nav .menu-btn[aria-expanded='true'] { border-image-source: url('../art/ui/btn-gold.webp'); color: #2a1a06; text-shadow: 0 1px 0 rgba(255, 240, 200, .6); }
.nav .pass-btn { padding-left: 14px; margin-right: 10px; }
.nav .pass-btn.ping { animation: boing .7s var(--ease-spring); }
.nav .pass-btn span:last-child { opacity: .65; font-weight: 700; letter-spacing: 0; }
/* passport token: the bronze medallion with a red seal in its centre */
.pass-ico { flex: none; width: 26px; height: 26px; background: url('../art/ui/medallion.webp') center / contain no-repeat; position: relative; }
.pass-ico::after { content: ''; position: absolute; inset: 31%; background: var(--seal); transform: rotate(-6deg); -webkit-mask: var(--tx-worn) 0 0 / 60px 60px; mask: var(--tx-worn) 0 0 / 60px 60px; }
/* header ornament: a carved meander edge under the bar */
.top::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 7px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(216, 180, 108, .55) 20%, rgba(216, 180, 108, .55) 80%, transparent);
  -webkit-mask: var(--leiwen) 0 0 / 16px 7px repeat-x; mask: var(--leiwen) 0 0 / 16px 7px repeat-x; opacity: .6; }

/* frames: stepped spiral corners and a double rule, via border-image */
.key::before, .chead::after, .hall-plate::after, .land::after { border: 26px solid transparent; border-image: var(--frame-gold) 40 / 26px stretch; opacity: .85; }

.land::after { inset: 6px; border-width: 20px; border-image-width: 20px; opacity: .9; }
.chap::after { content: ''; position: absolute; inset: 5px; border: 16px solid transparent; border-image: var(--frame-gold) 40 / 16px stretch; opacity: .75; pointer-events: none; }
.land, .chap { box-shadow: none; }

/* section divider: a spiral-capped rule with a bronze eye */

/* guide picker: stepped bronze tiles instead of tilted diamonds */
.cast-pick button { rotate: none; border: 0; width: 60px; height: 72px; clip-path: var(--steps-sm); background: var(--gold); padding: 1.5px; }
.cast-pick img { rotate: none; width: 100%; height: 100%; margin: 0; clip-path: var(--steps-sm); object-position: 50% 30%; }
.cast-pick button[aria-selected='true'] { background: var(--bronze); padding: 3px; box-shadow: none; filter: drop-shadow(0 0 10px rgba(244, 226, 176, .6)); }
.cast-pick button:not([aria-selected='true']) img { filter: grayscale(.6) brightness(.7); }

/* chips and toggles: stepped too */
.walk-bar [role='tab'] { border-radius: 0; clip-path: var(--steps-sm); }
.toggle { border-radius: 0; }
/* keep text inside the carved frames */
.chead-in { padding-inline: max(44px, var(--gutter)); }
.chead .han { top: 44px; right: 44px; }
.chead-credit { left: 44px; top: 44px; }
@media (max-width: 700px) { .chead-credit { max-width: 62%; white-space: normal; line-height: 1.7; } }
.hall-title { padding-inline: max(42px, 5vw); }
.hall-zh { top: 40px; right: max(40px, 5vw); }
.chap-t { left: 32px; bottom: 26px; }
.chap-zh { right: 28px; top: 24px; }
.land-t { left: 34px; right: 30px; bottom: 32px; }
.land-zh { top: 34px; right: 30px; }
@media (max-width: 600px) { .chead-in h1 { font-size: 1.9rem; } .chead-in .lede { font-size: 1.12rem; } }

/* =====================================================================
   Painted bronze UI (Codex, cut from green screen): app/art/ui/
   ===================================================================== */
/* buttons: a cast plate stretched through its plain centre, the bird-and-spiral caps kept whole */
.ff-btn, .ff-btn.ghost { clip-path: none; background: none; min-height: 58px; padding: 6px 8px; margin: 6px 6px 6px 0;
  border-style: solid; border-width: 11px 50px; border-image: url('../art/ui/btn-gold.webp') 44 182 fill / 11px 50px stretch;
  color: #2a1a06; text-shadow: 0 1px 0 rgba(255, 240, 200, .6); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.ff-btn::before, .ff-btn::after, html:not(.calm) .ff-btn::before, .ff-btn.ghost::before, html:not(.calm) .ff-btn.ghost::before { content: none; }
.ff-btn.ghost { border-image-source: url('../art/ui/btn-dark.webp'); color: var(--gold-hi); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.ff-btn:hover { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)) brightness(1.12); }
.ff-btn:active { transform: translateY(2px) scale(.98); }

/* frames: four painted mask corners over a fine gold rule */
.key::before, .chead::after, .hall-plate::after, .land::after, .chap::after { border: 1px solid rgba(216, 180, 108, .35); border-image: none; opacity: 1;
  background: url('../art/ui/corner.webp') 0 0 / var(--cs, 110px) no-repeat, url('../art/ui/corner-tr.webp') 100% 0 / var(--cs, 110px) no-repeat,
    url('../art/ui/corner-bl.webp') 0 100% / var(--cs, 110px) no-repeat, url('../art/ui/corner-br.webp') 100% 100% / var(--cs, 110px) no-repeat; }
.key::before { inset: calc(var(--head) + 6px) 6px 6px; --cs: clamp(78px, 11vw, 140px); }
.chead::after { inset: 6px; --cs: clamp(70px, 9vw, 120px); }
.hall-plate::after { inset: 6px 6px 0; border-bottom: 0; --cs: clamp(64px, 8vw, 100px); background: url('../art/ui/corner.webp') 0 0 / var(--cs) no-repeat, url('../art/ui/corner-tr.webp') 100% 0 / var(--cs) no-repeat; }
.land::after { inset: 6px; --cs: 64px; }
.chap::after { inset: 5px; --cs: 52px; }

/* section divider: the bronze eye between two birds */
h2::after { width: 230px; height: 28px; background: url('../art/ui/divider.webp') 50% 50% / contain no-repeat; }
h2:not(.centre)::after { background-position: 0 50%; }

/* hall number on a bronze plaque */
.hall-title .label { display: inline-grid; place-items: center; min-width: 190px; height: 62px; padding: 18px 26px 6px; margin-bottom: 6px; background: url('../art/ui/plaque.webp') center / 100% 100% no-repeat; color: var(--gold-hi); text-shadow: 0 1px 4px #000; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }

/* guide picker: portraits in painted bronze frames */
.cast-pick button, .cast-pick button[aria-selected='true'] { position: relative; width: 62px; height: 84px; padding: 0; clip-path: none; background: none; filter: none; }
.cast-pick img { position: absolute; inset: 9% 9% 6%; width: 82%; height: 85%; clip-path: none; object-fit: cover; }
.cast-pick button::after { content: ''; position: absolute; inset: 0; background: url('../art/ui/tile.webp') center / 100% 100% no-repeat; }
.cast-pick button[aria-selected='true'] { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 0 12px rgba(244, 226, 176, .55)); }
.cast-pick { gap: 8px; }
/* the title crest: a painted bronze medallion */
.crest { width: 74px; height: 74px; border: 0; transform: none; background: url('../art/ui/medallion.webp') center / contain no-repeat; filter: drop-shadow(0 0 16px rgba(244, 226, 176, .45)); }
.crest::before { content: none; }
.crest::after { inset: 32%; border-radius: 50%; background: radial-gradient(circle, #fff6d8, var(--gold) 60%, transparent 72%); box-shadow: 0 0 20px var(--gold-hi); }
.hall-title .label { min-width: 0; width: fit-content; padding: 20px 74px 8px; font-size: .62rem; white-space: nowrap; }
@media (max-width: 600px) { .hall-title .label { padding: 20px 50px 8px; font-size: .56rem; letter-spacing: .2em; } .hall-title p { padding-right: 84px; } }
/* round controls become bronze medallions */
.map-ctrl button, .wb-arrow, .sh-x, .sh-nav, .passport .sh-x { border: 0; border-radius: 50%; color: var(--gold-hi); text-shadow: 0 1px 4px #000; font-weight: 700;
  background: url('../art/ui/medallion.webp') center / contain no-repeat, radial-gradient(circle, #0c201d 0 42%, transparent 43%); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); transition: transform .3s; }
.map-ctrl button:hover, .wb-arrow:hover, .sh-x:hover, .sh-nav:hover { transform: rotate(20deg) scale(1.06); }
.map-ctrl button, .wb-arrow { width: 52px; height: 52px; }
.sh-x { width: 50px; height: 50px; }

/* phone header: the tablets shrink so brand, passport and chapters fit 320 to 390 */
@media (max-width: 480px) { .brand-en { display: none; } .top .wrap { gap: 8px; } .nav .menu-btn, .nav .pass-btn { padding: 4px 9px; border-width: 7px 11px; border-image-width: 7px 11px; font-size: .64rem; letter-spacing: .08em; } .nav .pass-btn { margin-right: 4px; padding-left: 8px; } }
@media (max-width: 340px) { .brand-zh { font-size: 1.3rem; } .nav .menu-btn, .nav .pass-btn { font-size: .6rem; } }

/* Faces: features pinned on a real photograph (replaces the old drawn diagram) */
.anno { position: relative; margin: 0; }
.anno-img { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #05100f; cursor: zoom-in; overflow: hidden; box-shadow: 0 0 0 1px rgba(216, 180, 108, .45), 0 24px 40px -20px #000; }
.anno-img img { width: 100%; aspect-ratio: 900 / 720; object-fit: cover; object-position: 50% 0; filter: saturate(1.05) contrast(1.05); }
.anno .pin { position: absolute; left: var(--x); top: var(--y); z-index: 2; pointer-events: none; transition: opacity .4s, transform .4s; }
.pin i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font: 700 .8rem/1 var(--display); font-style: normal; color: #24180a;
  background: radial-gradient(circle at 40% 35%, #fff4d0, var(--gold) 60%, #8a6a2c); box-shadow: 0 0 0 2px rgba(5, 16, 15, .8), 0 0 16px rgba(244, 226, 176, .7); }
.pin i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gold-hi); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { html:not(.calm) .pin i::after { animation: ping 2.4s ease-out infinite; } }
.pin b { position: absolute; top: -14px; right: 22px; white-space: nowrap; padding: 5px 10px; font: 600 .7rem/1.2 var(--display); letter-spacing: .08em; color: var(--gold-hi); background: rgba(5, 16, 15, .88); border: 1px solid rgba(216, 180, 108, .6); }
.pin.r b { right: auto; left: 22px; }
.pin.q i { background: #0c201d; color: var(--gold-hi); box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(244, 226, 176, .5); }
.pin.q b { border-style: dashed; font-family: var(--hand); font-size: 1.05rem; letter-spacing: 0; font-weight: 600; text-transform: none; }
#faces-lab[data-state='observed'] .pin[data-l='interpreted'] { opacity: 0; transform: scale(.6); }
#faces-lab[data-state='interpreted'] .pin[data-l='observed'] { opacity: .35; }
.anno figcaption { margin-top: 12px; font: italic 500 .98rem/1.4 var(--body); color: var(--mint); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 420px) { .pin b { font-size: .6rem; padding: 4px 7px; } .pin.q b { font-size: .92rem; } }
.pin b { white-space: normal; width: max-content; max-width: min(46vw, 260px); text-align: right; }
.pin.r b { text-align: left; }
@media (max-width: 600px) { .pin b { max-width: 34vw; } }
#faces-lab[data-state='interpreted'] .pin[data-l='observed'] b { opacity: 0; }
/* hand-drawn study plates on parchment */
.anno.study .anno-img { background: #e9d6ad; box-shadow: 0 0 0 1px rgba(216, 180, 108, .6), 0 0 0 6px rgba(5, 16, 15, .9), 0 0 0 7px rgba(216, 180, 108, .35), 0 30px 50px -24px #000; }
.anno.study .anno-img img { aspect-ratio: 1100 / 880; object-fit: cover; filter: none; }
@media (max-width: 600px) { .pin.r b { max-width: 17vw; padding-inline: 6px; } }
/* the visitor photo a study was drawn from, pinned onto the plate like a print */
.src-photo { position: absolute; z-index: 3; right: -6px; bottom: 44px; width: clamp(96px, 26%, 170px); padding: 6px 6px 4px; border: 0; cursor: zoom-in;
  background: #f3ecdc; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .7); rotate: 4deg; transition: rotate .3s, transform .3s; }
.src-photo::before { content: ''; position: absolute; left: 50%; top: -9px; width: 46px; height: 16px; translate: -50% 0; rotate: -3deg; background: rgba(216, 180, 108, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.src-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.src-photo span { display: block; margin-top: 4px; font: 600 1rem/1 var(--hand); color: #2a1d0c; text-align: center; }
.src-photo:hover { rotate: 0deg; transform: scale(1.05); }

/* =====================================================================
   Type: Marcellus (titles, flared Roman capitals), Alegreya (reading, calligraphic),
   Alegreya SC (labels, buttons, stamps), Zhi Mang Xing (Chinese), Caveat (guides).
   Marcellus has one weight, so headings never fake bold.
   ===================================================================== */
h1, h2, h3, .key-logo h1, .cast-name b, .land-t b, .chap-t b, .hall-title h2, .chead-in h1 { font-weight: 400; font-synthesis: none; }
h1, h2 { letter-spacing: .02em; }
.key-logo h1 { letter-spacing: .1em; margin-right: -.1em; }
.label, .ev, .cite, .ref, .ff-btn, .nav a, .nav button, .pass-btn, .chip, .toggle button, .walk-bar button, .key-sub, .key-cue, .chead-credit, .key-credit,
.menu .n, .hall-list button, .hall-list .n, .rm-name, .as-case span, .stamp-cap b, .pp-cell b, .plinth .label, .pin b, .src-photo span + * { font-family: var(--label); font-weight: 500; }
.lede, .key-lede, .plate figcaption p, .hall-title p, .cast-name > span:not(.ev) { font-family: var(--body); font-style: italic; }
p, li { font-variant-numeric: oldstyle-nums; }
.label, .ff-btn, .ev { font-variant-numeric: lining-nums; }
.lede, .key-lede, .chead-in .lede, .hall-title p { font-weight: 400; }
.pass-btn, .nav, .ff-btn, .chip, .label, .ev, .stamp-cap, .pp-cell, .rm-name, .hall-list, .menu { font-variant-numeric: lining-nums; }

/* ---- Hand-drawn plates (pass 4). Every drawing is pinned beside the photograph it was made from. ---- */
.anno.study.sq .anno-img img { aspect-ratio: 1 / 1; }
.anno.study.wide .anno-img img { aspect-ratio: 1500 / 844; }
.anno.study.strip .anno-img img { aspect-ratio: 1600 / 533; }
.anno.study.tall .anno-img img { aspect-ratio: 760 / 1267; }
.anno.study .anno-img { background: #e9d6ad; }
.drawn svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wheel .drawn svg g[class^='l'] { opacity: .3; transition: opacity .5s; }
.wheel .drawn svg g.on { opacity: 1; }
.wheel .tr { stroke-dasharray: 100; stroke-dashoffset: 0; }
.wheel .drawn svg.animate g.on .tr { animation: dash 1.3s ease forwards; }
.wheel figcaption { font: italic 500 .98rem/1.4 var(--body); color: var(--mint); }
.anno.study.strip .src-photo.l { left: 8px; right: auto; }
.anno.study.strip .src-photo:not(.l) { right: 8px; }
.strip-wrap { position: relative; }
.anno.study.strip figcaption { margin-top: 58px; }
.anno.study.strip .src-photo { bottom: -46px; width: clamp(96px, 12%, 132px); }
.anno.study.strip .src-photo img { aspect-ratio: 4 / 3; }
.anno.study.strip .src-photo.l::before, .anno.study.strip .src-photo:not(.l)::before { top: -8px; }
@media (max-width: 600px) {
  .anno.study.strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  .strip-wrap { display: contents; }
  .anno.study.strip .anno-img { flex: 0 0 100%; }
  .anno.study.strip .src-photo { position: relative; flex: 0 0 calc(50% - 6px); width: auto; right: auto; left: auto; bottom: auto; }
  .anno.study.strip figcaption { flex: 0 0 100%; margin-top: 8px; }
}
.pit-claims { display: grid; gap: 0 clamp(22px, 4vw, 56px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-top: 18px; }
.pit-claims .claim:last-child { grid-column: 1 / -1; }
.pit { margin-top: 40px; }
.pit-key { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; font: 600 .95rem/1.3 var(--label); letter-spacing: .04em; color: var(--mint); }
.pit-key li { display: flex; gap: 10px; align-items: center; }
.pit-key span { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 700 .78rem/1 var(--display); color: #24180a; background: radial-gradient(circle at 40% 35%, #fff4d0, var(--gold) 60%, #8a6a2c); }
@media (max-width: 899px) { .pit .pin b { display: none; } .pit-claims { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .pit-key { display: none; } }
.pit .pin b { font-family: var(--label); font-weight: 500; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.pit .src-photo { top: 12px; bottom: auto; right: -6px; width: 22%; }
.pit .pin i { width: 26px; height: 26px; left: -13px; top: -13px; font-size: .74rem; }

/* casting steps: one row of four under the plate, two then one on smaller screens */
ol.cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(14px, 2.4vw, 28px); list-style: none; padding: 0; margin: 34px 0 22px; }
ol.cast li { position: relative; padding-top: 16px; border-top: 1px solid rgba(216, 180, 108, .45); }
ol.cast .n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%; font: 700 .9rem/1 var(--display); color: #24180a;
  background: radial-gradient(circle at 40% 35%, #fff4d0, var(--gold) 60%, #8a6a2c); box-shadow: 0 0 0 2px rgba(5, 16, 15, .8); }
ol.cast h3 { margin: 0 0 6px; font-size: 1.16rem; color: var(--gold-hi); }
ol.cast p { margin: 0; color: var(--mint); font-size: 1rem; line-height: 1.5; }
@media (max-width: 900px) { ol.cast { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } }
@media (max-width: 560px) { ol.cast { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  ol.cast li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  ol.cast .n { grid-row: span 2; margin: 0; } ol.cast h3, ol.cast p { grid-column: 2; } }

/* sacred tree: photograph or study plate, one switch, the same numbered markers */
.tv-toggle { margin: 0 0 12px; }
.tv-toggle button { min-height: 44px; }
.tree-photo[data-state='plate'] .tv-photo { display: none; }
.tree-photo:not([data-state='plate']) .tv-plate { display: none; }
.tree-photo { box-shadow: none; }
.tv-photo { position: relative; box-shadow: 0 0 0 1px rgba(216, 180, 108, .4), 0 30px 60px -30px #000; }
.tv-plate { margin: 0; }
.tv-pin { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.tv-pin i { position: absolute; inset: 9px; display: grid; place-items: center; border-radius: 50%; font: 700 .85rem/1 var(--display); font-style: normal; color: #24180a;
  background: radial-gradient(circle at 40% 35%, #fff4d0, var(--gold) 60%, #8a6a2c); box-shadow: 0 0 0 2px rgba(5, 16, 15, .85), 0 0 12px rgba(244, 226, 176, .6); transition: transform .3s; }
.tv-pin:hover i { transform: scale(1.1); }
.tv-pin[aria-pressed='true'] i { transform: scale(1.22); box-shadow: 0 0 0 2px #fff4d0, 0 0 0 4px rgba(5, 16, 15, .9), 0 0 18px rgba(244, 226, 176, .9); }
html.calm .tv-pin i, html.calm .tv-pin i { transition: none; }
html.calm .wheel .drawn svg g[class^='l'] { transition: none; }
html.calm .bg { transition: none; }
.tv-pin:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.tv-plate .src-photo { bottom: 44px; }
/* on phones the print hangs off the plate's lower corner, so the caption never runs under it */
@media (max-width: 600px) {
  .anno.study:not(.pit):not(.strip) > .src-photo { position: relative; display: block; right: auto; bottom: auto; margin: -58px 0 0 auto; width: 36%; rotate: 3deg; }
}
@media (max-width: 600px) { .anno.study:not(.pit):not(.strip) > .src-photo { margin-top: -120px; width: 32%; margin-right: -4px; } }

/* ===== AUDIO (agent) ===== */
/* header toggle: the same painted dark plate as the other header tiles, with a medallion and three bars */
.nav .sfx-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 10px 0 0; padding: 4px 16px 4px 12px;
  border: 0; border-style: solid; border-width: 7px 17px; border-image: url('../art/ui/btn-dark.webp') 44 182 fill / 7px 17px stretch; background: none;
  color: var(--gold-hi); font: 700 .72rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 4px #000; border-radius: 0;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); cursor: pointer; transition: filter .25s, transform .25s; }
.nav .sfx-btn:hover { background: none; filter: brightness(1.2) drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); transform: translateY(-1px); }
.nav .sfx-btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.nav .sfx-btn[aria-pressed='true'] { color: var(--gold-hi); }
.sfx-ico { position: relative; flex: none; width: 26px; height: 26px; box-sizing: border-box; padding-bottom: 6px; display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  background: url('../art/ui/medallion.webp') center / contain no-repeat; }
.sfx-ico i { width: 3px; height: 6px; border-radius: 2px; background: var(--gold-hi); opacity: .3; box-shadow: 0 0 0 1px rgba(5, 16, 15, .7); transition: opacity .3s; }
.sfx-ico i:nth-child(2) { height: 10px; }
.sfx-ico i:nth-child(3) { height: 14px; }
.sfx-btn[data-level='1'] .sfx-ico i:nth-child(1), .sfx-btn[data-level='2'] .sfx-ico i:nth-child(-n+2), .sfx-btn[data-level='3'] .sfx-ico i { opacity: 1; }
.sfx-btn[data-level='0'] .sfx-ico { filter: saturate(.4) brightness(.8); }
.sfx-btn[data-level='0'] .sfx-txt { opacity: .7; }
@media (max-width: 480px) { .nav .sfx-btn { padding: 4px 9px; border-width: 7px 11px; border-image-width: 7px 11px; margin-right: 6px; gap: 6px; } .sfx-txt { display: none; } }

/* the title prompt: a painted-title card in the centre of the key art, once per visit */
.sfx-ask { position: absolute; z-index: 5; left: 50%; top: 50%; translate: -50% -50%; width: min(440px, calc(100% - 32px)); box-sizing: border-box; padding: 20px 18px 18px; text-align: center;
  background: radial-gradient(ellipse at 50% 20%, rgba(14, 36, 32, .94), rgba(5, 16, 15, .92) 72%); border: 1px solid rgba(216, 180, 108, .5);
  box-shadow: 0 0 0 4px rgba(5, 16, 15, .55), 0 24px 60px rgba(0, 0, 0, .6); animation: sfx-in .9s .5s cubic-bezier(.2, .7, .2, 1) both; transition: opacity .6s, translate .6s; }
.sfx-ask.gone { opacity: 0; translate: -50% -60%; pointer-events: none; }
.sfx-ask > .label { color: var(--gold); }
.sfx-ask-t { margin: 6px 0 4px; font: 400 clamp(1.6rem, 7vw, 2.2rem)/1.1 var(--display); color: var(--gold-hi); text-shadow: 0 2px 10px #000; }
.sfx-ask-s { margin: 0 0 12px; font: italic 500 1rem/1.45 var(--body); color: var(--ivory); text-shadow: 0 1px 6px #000; }
.sfx-ask-b { display: flex; flex-wrap: wrap; justify-content: center; }
.sfx-ask-b .ff-btn { margin: 4px 6px; }
@keyframes sfx-in { from { opacity: 0; translate: -50% -40%; } to { opacity: 1; translate: -50% -50%; } }
html.calm .sfx-ask { animation: none; }

/* ===== FX (agent) ===== */
/* Canvas layers: gold dust (under the header) and the ink-wash wipe (over everything but dialogs). */
.fx-dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
.fx-ink { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 300; pointer-events: none; display: none; }
.fx-ink.on { display: block; }

/* Guide quips: a small painted speech plate that pops above a tapped guide */
.fx-say { position: fixed; z-index: 60; translate: -50% -100%; max-width: min(250px, calc(100vw - 32px)); padding: 10px 14px 11px; pointer-events: none; opacity: 0;
  background: #0c201d; border: 1px solid rgba(216, 180, 108, .7); box-shadow: inset 0 0 0 3px #0c201d, inset 0 0 0 4px rgba(216, 180, 108, .22), 0 14px 30px -10px #000;
  font: italic 500 .98rem/1.35 var(--body); color: var(--ivory); text-align: center; }
.fx-say::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: #0c201d; border: 1px solid rgba(216, 180, 108, .7); border-top: 0; border-left: 0; rotate: 45deg; }
.fx-say.on { opacity: 1; animation: fx-say 1.9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fx-say { 0% { transform: translateY(8px) scale(.9); opacity: 0; } 12% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
html.calm .fx-say { display: none; }

/* Walk: each painting drifts and zooms as its hall passes the eye; tilt adds depth on top */
.hall-plate > img { transform: scale(var(--fx-z, 1.06)); translate: calc(var(--fx-tx, 0px) + var(--fx-sx, 0px)) var(--fx-ty, 0px); }
.chead-art { transform: scale(1.04); translate: var(--fx-tx, 0px) var(--fx-ty, 0px); }
.cast-art { translate: var(--fx-tx, 0px) var(--fx-ty, 0px); }
.key picture { position: absolute; inset: 0; display: block; transform: perspective(1100px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) scale(1.03); }
html.calm .hall-plate > img, html.calm .chead-art, html.calm .cast-art, html.calm .key picture { transform: none; translate: none; }
html.calm .hall-plate > img { transform: none; }

/* Bronze buttons: a glint sweeps across on tilt and hover, and the pressed-in feel on touch */
.ff-btn::after, .ff-btn.ghost::after { content: ''; position: absolute; z-index: -1; inset: 0; clip-path: none; box-shadow: none; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 246, 214, .55) 50%, transparent 58%) var(--fx-gl, 0%) 0 / 240% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .ff-btn:hover::after { animation: fx-glint 1s ease-out 1; }
}
@keyframes fx-glint { from { background-position: 100% 0; } to { background-position: 0 0; } }
html.calm .ff-btn::after { display: none; }
.ff-btn:active, .chip:active { filter: brightness(.94); }
.chip:active { transform: translateY(1px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(216, 180, 108, .35); }

/* Scroll reveals: heads bleed in from the left, plates rise out of the ink, panel corners slide home */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .fx-head.fx-rv:not(.fx-in) { clip-path: inset(0 100% 0 0); opacity: 0; }
  html:not(.calm) .fx-head.fx-in { animation: fx-head 1.1s var(--fxd, 0ms) cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes fx-head { from { clip-path: inset(0 100% 0 0); opacity: 0; filter: blur(5px); } 60% { opacity: 1; filter: blur(0); } to { clip-path: inset(-30px -30px -30px -30px); opacity: 1; filter: none; } }
  /* the bronze eye under the head opens, then blinks once */
  html:not(.calm) .fx-head.fx-in::after { animation: fx-eye 1.3s calc(var(--fxd, 0ms) + 380ms) cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 50%; }
  @keyframes fx-eye { 0% { transform: scaleY(.04); opacity: 0; } 35% { transform: scaleY(1.06); opacity: 1; } 52% { transform: scaleY(.12); } 70% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 1; } }

  html:not(.calm) .fx-plate.fx-rv:not(.fx-in) { clip-path: inset(0 0 100% 0); }
  html:not(.calm) .fx-plate.fx-in { animation: fx-plate 1.2s var(--fxd, 0ms) cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes fx-plate { from { clip-path: inset(0 0 100% 0); filter: brightness(.55) blur(3px); } 55% { filter: brightness(1) blur(0); } to { clip-path: inset(-24px -24px -24px -24px); filter: none; } }

  html:not(.calm) .fx-frame:not(.fx-in) { background-position: -26px -26px, calc(100% + 26px) -26px, -26px calc(100% + 26px), calc(100% + 26px) calc(100% + 26px), 0 0; }
  html:not(.calm) .fx-frame.fx-in { animation: fx-corners 1s var(--fxd, 0ms) cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes fx-corners { to { background-position: 0 0, 100% 0, 0 100%, 100% 100%, 0 0; } }
}

/* Seals: the collected ones shimmer, and the stamp fx carries a gold flash when it lands */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .pp-cell.got .seal::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 250, 230, .55) 50%, transparent 60%) 160% 0 / 260% 100% no-repeat; animation: fx-shimmer 3.6s ease-in-out infinite; }
}
@keyframes fx-shimmer { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

/* The title mask: eyes glow, a shockwave runs out, the hint plate waits to be tapped */
.key { isolation: isolate; }
.fx-eyes { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; width: 0; height: 0; }
.fx-eyes i { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 250, 222, .9) 0 10%, rgba(255, 210, 116, .5) 32%, rgba(214, 156, 58, .18) 58%, transparent 70%); }
.fx-eyes b { position: absolute; left: 0; top: 0; width: 300px; height: 300px; border-radius: 50%; opacity: 0;
  border: 2px solid rgba(255, 236, 180, .9); box-shadow: 0 0 18px rgba(244, 226, 176, .55); }
.key.awake .fx-eyes i { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .key.awake .fx-eyes i { animation: fx-eye-glow 2.6s ease-in-out infinite; }
  html:not(.calm) .key.shock .fx-eyes b { animation: fx-shock 1.4s cubic-bezier(.1, .6, .2, 1) both; }
  html:not(.calm) .key.shock .fx-eyes b + b { animation-delay: .32s; }
}
@keyframes fx-eye-glow { 0%, 100% { opacity: .5; scale: .88; } 50% { opacity: .9; scale: 1.06; } }
@keyframes fx-shock { 0% { opacity: .95; scale: .05; } 100% { opacity: 0; scale: 1.25; } }
.fx-hint { position: absolute; left: 0; top: 0; z-index: 5; translate: -50% -100%; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px 8px 14px; margin: 0;
  background: rgba(8, 24, 22, .82); color: var(--gold-hi); border: 1px solid rgba(216, 180, 108, .7); border-radius: 0; cursor: pointer;
  box-shadow: inset 0 0 0 3px #0c201d, inset 0 0 0 4px rgba(216, 180, 108, .25), 0 10px 26px -8px #000; font: 600 .74rem/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.fx-hint[hidden] { display: none; }
.fx-hint:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.fx-hint-eye { position: relative; width: 20px; height: 11px; border: 1.5px solid var(--gold-hi); border-radius: 50% / 50%; }
.fx-hint-eye::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--gold-hi); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .fx-hint { animation: fx-hint 2.6s ease-in-out infinite; }
}
@keyframes fx-hint { 0%, 100% { box-shadow: inset 0 0 0 3px #0c201d, inset 0 0 0 4px rgba(216, 180, 108, .25), 0 10px 26px -8px #000; } 50% { box-shadow: inset 0 0 0 3px #0c201d, inset 0 0 0 4px rgba(216, 180, 108, .4), 0 0 22px rgba(244, 226, 176, .55); } }
/* the sound choice takes the title screen's button slot, like a game title prompt */
.key-foot .sfx-ask { position: relative; left: auto; top: auto; translate: none; width: min(440px, 100%); padding: 0; background: none; border: 0; box-shadow: none; }
.key-foot .sfx-ask::before, .key-foot .sfx-ask::after { content: none; }
.key-foot .sfx-ask.gone { translate: 0 -10px; }
.key.asking .key-lede, .key.asking .key-cta, .key.asking .key-cue, .key.asking .fx-hint { display: none; }
.key-foot .sfx-ask { animation: sfx-in-foot .9s .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sfx-in-foot { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.key-foot .sfx-ask-t { font-size: clamp(1.4rem, 6vw, 2rem); }