/* ══════════════════════════════════════════════════════════════
   Museum of the Bible Korea — Design System
   museumofthebiblekorea.com
   ══════════════════════════════════════════════════════════════ */

/* ── 0. Old Hangul (옛한글) subset — self-hosted, scoped to .verse-kr only.
   The Google-hosted 'Noto Serif KR' webfont strips the Hangul Jamo block
   (U+1100–11FF), so archaic combining jamo (e.g. arae-a, ᄯ) render as tofu
   boxes in Google's subset. This is a ~39KB subset of the full Noto Serif KR
   OTF, cut down to exactly the characters used in .verse-kr quotes across
   the site (raw jamo + the modern Hangul/Hanja/punctuation they appear
   alongside) — not a general-purpose webfont. See assets/fonts/. ── */
@font-face {
  font-family: 'MOTB Verse KR Old Hangul';
  src: url('assets/fonts/verse-kr-oldhangul.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+1102, U+1109, U+110C, U+1112, U+112F, U+1165-1166, U+119E, U+11A8, U+11AF, U+2026, U+4E0A, U+4E16, U+4EA1, U+5B50, U+6C38, U+6EC5, U+7368, U+751F, U+8005, U+AC00, U+AC70, U+AC8C, U+ACE0, U+ACE8, U+ACFC, U+AE30, U+B098, U+B0AB, U+B0B4, U+B108, U+B124, U+B179, U+B17C, U+B294, U+B2C8, U+B2D8, U+B2E4, U+B2F9, U+B354, U+B3C4, U+B3D9, U+B450, U+B514-B515, U+B77C, U+B78C, U+B791, U+B7EC, U+B7FC, U+B824, U+B86C, U+B97C, U+B9AC, U+B9C8, U+B9D0, U+BAAC, U+BABB, U+BB34, U+BB3C, U+BC0B, U+BCF4, U+BD80, U+BE0C, U+BE7C, U+C068, U+C0AC, U+C0E4, U+C0F9, U+C138, U+C154, U+C168, U+C18C, U+C2DC, U+C2EC, U+C544, U+C54A, U+C557, U+C5B4, U+C5C7, U+C5D0, U+C5EC, U+C6B0, U+C6CC, U+C73C, U+C740, U+C744, U+C74C, U+C758, U+C774, U+C787, U+C800, U+C81C, U+C8FC, U+C990, U+C9C0, U+CC98, U+CDE8, U+CE05, U+CE58, U+D130, U+D558, U+D638, U+D648, U+D654, U+D76C, U+D79D;
}

/* ── 31a. Art Note (copyright-safe stand-in for artwork we can't reproduce) ── */
.art-note{border:1px dashed var(--c-border);border-radius:var(--r-lg);padding:2.75rem 1.75rem;text-align:center;background:linear-gradient(135deg,rgba(10,60,143,.14),rgba(194,134,21,.05));margin:1.5rem 0}
.art-note .glyph{font-size:1.8rem;color:var(--c-gold);margin-bottom:.85rem;font-family:var(--f-en-serif)}
.art-note .cap{font-size:.85rem;color:var(--c-muted);line-height:1.7;max-width:50ch;margin:0 auto}
.art-note .cap a{color:var(--c-gold);text-decoration:underline;text-underline-offset:2px}
.art-note .cap a:hover{color:var(--c-gold-lt)}

/* ── 31b. Now Showing card (entry threshold) ── */
.now-showing{display:block;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:1.75rem 2rem;background:linear-gradient(135deg,rgba(194,134,21,.1),var(--c-panel));transition:var(--ease)}
.now-showing:hover{border-color:var(--c-gold);transform:translateY(-2px)}
.now-showing .ns-title{font-family:var(--f-en-serif);font-size:1.3rem;font-weight:700;color:var(--c-white);margin:.4rem 0}
body.lang-ko .now-showing .ns-title{font-family:var(--f-ko-serif)}

/* ── 1. Design Tokens ── */
:root {
  --c-bg:       #050F1F;
  --c-bg-mid:   #071628;
  --c-bg-light: #0D2040;
  --c-navy:     #0A3C8F;
  --c-navy-mid: #0D2A6B;
  --c-gold:     #C28615;
  --c-gold-lt:  #D9A030;
  --c-gold-dim: rgba(194,134,21,0.35);
  --c-white:    #FFFFFF;
  --c-off:      #F0EAD8;
  --c-muted:    #7A90A8;
  --c-border:   rgba(194,134,21,0.22);
  --c-panel:    rgba(10,60,143,0.12);

  --f-en-serif: 'Playfair Display', Georgia, serif;
  --f-en-sans:  'Inter', -apple-system, sans-serif;
  --f-ko-serif: 'Noto Serif KR', 'Malgun Gothic', serif;
  --f-ko-sans:  'Noto Sans KR', 'Malgun Gothic', sans-serif;

  --nav-h: calc(60px + env(safe-area-inset-top));
  --docent-w: 300px;
  --content-max: 860px;

  --r: 4px;
  --r-lg: 12px;
  --ease: 0.28s ease;
}

/* ── 2. Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--c-bg);color:var(--c-white);font-family:var(--f-en-sans);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lang-ko{font-family:var(--f-ko-sans)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}

/* ── 3. Bilingual System ── */
.ko{display:none}
span.ko{display:none}
.en{display:block}
span.en{display:inline}
body.lang-ko .ko{display:block}
body.lang-ko span.ko{display:inline}
body.lang-ko .en{display:none}
body.lang-ko span.en{display:none}

/* ── 4. Typography ── */
.t-display{font-family:var(--f-en-serif);font-size:clamp(2.6rem,6vw,5.2rem);line-height:1.08;font-weight:900;letter-spacing:-.015em}
body.lang-ko .t-display{font-family:var(--f-ko-serif)}
.t-title{font-family:var(--f-en-serif);font-size:clamp(1.7rem,3.5vw,2.8rem);line-height:1.2;font-weight:700}
body.lang-ko .t-title{font-family:var(--f-ko-serif)}
.t-heading{font-family:var(--f-en-serif);font-size:clamp(1.25rem,2.2vw,1.85rem);line-height:1.25;font-weight:700}
body.lang-ko .t-heading{font-family:var(--f-ko-serif)}
.t-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-gold);font-weight:500}
.t-body{font-size:1.02rem;line-height:1.85;color:var(--c-off)}
.t-caption{font-size:.82rem;color:var(--c-muted);line-height:1.55}
.t-gold{color:var(--c-gold)}
.t-muted{color:var(--c-muted)}
.serif{font-family:var(--f-en-serif)}
body.lang-ko .serif{font-family:var(--f-ko-serif)}

/* ── 5. Site Nav ── */
.site-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 2rem 0;background:rgba(5,15,31,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--c-border);z-index:1000}
.nav-brand{display:flex;align-items:center;gap:.5rem}
.nav-brand a{display:flex;align-items:center;gap:.5rem;background:none;-webkit-tap-highlight-color:transparent}
.nav-brand-text{font-family:var(--f-en-serif);font-size:.72rem;font-weight:700;color:var(--c-gold);letter-spacing:.1em;text-transform:uppercase}
body.lang-ko .nav-brand-text{font-family:var(--f-ko-serif);letter-spacing:.04em;text-transform:none}
.nav-loc{font-size:.72rem;color:var(--c-muted);letter-spacing:.06em;text-align:center}
.nav-controls{display:flex;align-items:center;gap:.75rem}
.nav-hamburger{display:none;width:36px;height:36px;flex:none;align-items:center;justify-content:center;background:none;border:1px solid var(--c-border);border-radius:8px;color:var(--c-gold);font-size:1.15rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:var(--ease)}
.nav-hamburger:hover,.nav-hamburger[aria-expanded="true"]{border-color:var(--c-gold);background:rgba(194,134,21,.08)}
.lang-btn{font-size:.72rem;padding:5px 13px;border:1px solid var(--c-border);border-radius:20px;color:var(--c-gold);letter-spacing:.05em;transition:var(--ease)}
.lang-btn:hover{background:var(--c-gold-dim);border-color:var(--c-gold)}
.nav-link{font-size:.72rem;color:var(--c-muted);transition:var(--ease)}
.nav-link:hover{color:var(--c-white)}

/* ── 6. Room Jump Nav ── */
.room-jump{position:fixed;left:.75rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px;z-index:900}
.jump-dot{width:8px;height:8px;border-radius:50%;background:rgba(122,144,168,.35);border:1px solid transparent;transition:var(--ease);cursor:pointer;display:block}
.jump-dot:hover,.jump-dot.active{background:var(--c-gold);border-color:var(--c-gold);transform:scale(1.4)}

/* ── 7. Museum Two-Column Layout ── */
.museum-layout{display:grid;grid-template-columns:1fr var(--docent-w);padding-top:var(--nav-h)}
.rooms-col{min-width:0}

/* ── 8. AI Docent Sidebar ── */
.ai-docent{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));background:rgba(6,19,38,.97);border-left:1px solid var(--c-border);display:flex;flex-direction:column;overflow:hidden}
.docent-hd{padding:1rem 1.25rem;border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:.75rem;cursor:pointer;flex-shrink:0}
.docent-orb{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--c-navy),var(--c-gold));display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.docent-ttl{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold)}
.docent-badge{margin-left:auto;font-size:.62rem;padding:2px 8px;border-radius:10px;background:var(--c-gold);color:var(--c-navy);font-weight:600;display:none}
.docent-body{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.docent-ctx{font-size:.78rem;color:var(--c-muted);line-height:1.55;padding:.65rem .85rem;background:rgba(10,60,143,.15);border-radius:var(--r);border-left:2px solid var(--c-navy)}
.docent-insight{font-size:.82rem;color:var(--c-off);line-height:1.7}
.docent-insight strong.docent-who{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--c-gold);margin-bottom:5px}
.docent-insight p{margin:0 0 .6em}
.docent-insight p:last-child{margin-bottom:0}
.docent-insight p strong{color:var(--c-gold);font-weight:600}
.docent-insight p em{color:var(--c-gold-lt);font-style:italic}
.docent-foot{border-top:1px solid var(--c-border);padding:1rem 1.25rem;flex-shrink:0}
.docent-input-wrap{display:flex;gap:7px;align-items:flex-end;margin-bottom:.5rem}
.docent-input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--c-border);border-radius:var(--r);padding:9px 11px;color:var(--c-white);font-size:.82rem;font-family:inherit;resize:none;height:40px;transition:var(--ease);line-height:1.4}
.docent-input:focus{outline:none;border-color:var(--c-gold);background:rgba(194,134,21,.05)}
.docent-input::placeholder{color:var(--c-muted)}
.docent-send{width:36px;height:36px;border-radius:var(--r);background:var(--c-gold);color:var(--c-bg);font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:var(--ease);flex-shrink:0}
.docent-send:hover{background:var(--c-gold-lt)}
.docent-note{font-size:.65rem;color:var(--c-muted);text-align:center}

/* ── 9. Wing Hero ── */
.wing-hero{min-height:58vh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 5rem) 3.5rem 3rem;background:linear-gradient(160deg,rgba(10,60,143,.22) 0%,rgba(5,15,31,.95) 70%);border-bottom:1px solid var(--c-border);position:relative;overflow:hidden}
.wing-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 15% 50%,rgba(10,60,143,.28) 0%,transparent 55%),radial-gradient(ellipse at 85% 20%,rgba(194,134,21,.08) 0%,transparent 50%);pointer-events:none}
.wing-num{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.6rem}
.wing-title{font-family:var(--f-en-serif);font-size:clamp(2.4rem,5.5vw,5rem);font-weight:900;line-height:1.06;margin-bottom:.5rem;position:relative}
body.lang-ko .wing-title{font-family:var(--f-ko-serif)}
.wing-sub{font-size:1.05rem;color:var(--c-muted);max-width:560px;margin-bottom:1.5rem}
.wing-scroll{display:flex;align-items:center;gap:.65rem;font-size:.72rem;color:var(--c-muted);letter-spacing:.12em;text-transform:uppercase}
.wing-scroll::before{content:'';display:block;width:22px;height:1px;background:var(--c-gold)}

/* ── 10. Room Sections ── */
.room{padding:5.5rem 3.5rem;position:relative}
.room+.room{border-top:1px solid var(--c-border)}
.room-hd{margin-bottom:3rem}
.room-num{display:inline-block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.6rem}
.room-title{font-family:var(--f-en-serif);font-size:clamp(1.9rem,3.8vw,3.2rem);font-weight:900;line-height:1.1;margin-bottom:.9rem}
body.lang-ko .room-title{font-family:var(--f-ko-serif)}
.room-intro{font-size:1.05rem;color:var(--c-off);max-width:680px;line-height:1.85;border-left:3px solid var(--c-gold);padding-left:1.25rem;margin-top:1rem}

/* ── 11. Timeline ── */
.timeline{position:relative;padding-left:2px;margin:3rem 0}
.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--c-gold) 8%,var(--c-gold) 92%,transparent)}
.tl-item{display:grid;grid-template-columns:72px 1fr;gap:1.25rem;padding:1.75rem 0 1.75rem 1.75rem;position:relative}
.tl-item::before{content:'';position:absolute;left:-5px;top:1.85rem;width:12px;height:12px;border-radius:50%;background:var(--c-gold);border:2px solid var(--c-bg);box-shadow:0 0 0 2px var(--c-gold)}
.tl-year{font-family:var(--f-en-serif);font-size:1rem;font-weight:700;color:var(--c-gold);line-height:1.2;padding-top:3px}
.tl-body h3{font-family:var(--f-en-serif);font-size:1rem;font-weight:700;color:var(--c-white);margin-bottom:5px}
body.lang-ko .tl-body h3{font-family:var(--f-ko-serif)}
.tl-body p{font-size:.88rem;color:var(--c-off);line-height:1.72}

/* ── 12. Artifact Cards ── */
.artifacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:2.5rem 0}
.artifact{background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:1.25rem;transition:var(--ease);position:relative;overflow:hidden}
.artifact::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--c-gold),transparent);opacity:0;transition:var(--ease)}
.artifact:hover{border-color:var(--c-gold);background:rgba(10,60,143,.22);transform:translateY(-2px)}
.artifact:hover::after{opacity:1}
.artifact-n{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.3rem}
.artifact-yr{font-family:var(--f-en-serif);font-size:1.75rem;font-weight:900;color:var(--c-white);line-height:1;margin-bottom:4px}
.artifact-name{font-size:.9rem;font-weight:600;color:var(--c-off);margin-bottom:.3rem;line-height:1.3}
.artifact-desc{font-size:.8rem;color:var(--c-muted);line-height:1.6}
.artifact.milestone{box-shadow:inset 3px 0 0 var(--c-gold);background:linear-gradient(90deg,rgba(194,134,21,.14),var(--c-panel) 70%)}
.artifact-flag{display:inline-block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;background:var(--c-gold);color:var(--c-bg);font-weight:600;padding:3px 7px;border-radius:2px;margin-left:8px;vertical-align:2px;white-space:nowrap}

/* ── 13. Quote Block ── */
.quote-block{margin:2.5rem 0;padding:2.5rem 2rem;background:linear-gradient(135deg,rgba(10,60,143,.18),rgba(194,134,21,.04));border-left:4px solid var(--c-gold);border-radius:0 var(--r-lg) var(--r-lg) 0;position:relative}
.quote-block::before{content:'"';position:absolute;top:-18px;left:1.5rem;font-family:var(--f-en-serif);font-size:7rem;color:rgba(194,134,21,.18);line-height:1;pointer-events:none}
.quote-text{font-family:var(--f-en-serif);font-size:clamp(1.1rem,2.2vw,1.55rem);line-height:1.55;color:var(--c-white);font-style:italic;position:relative;z-index:1;margin-bottom:.75rem}
body.lang-ko .quote-text{font-family:var(--f-ko-serif);font-style:normal}
.quote-attr{font-size:.82rem;color:var(--c-gold);letter-spacing:.05em}

/* ── 13b. Scripture Quote (primary-source text quoted directly on an
   artifact, rather than only described -- shows original + gloss together,
   not toggled by lang, since both are the point) ── */
.scripture-quote{margin-top:1rem;padding:1rem 1.1rem;background:rgba(194,134,21,.06);border:1px solid var(--c-border);border-left:3px solid var(--c-gold);border-radius:0 var(--r) var(--r) 0}
.scripture-quote .verse-kr{font-family:'MOTB Verse KR Old Hangul',var(--f-ko-serif);font-size:.92rem;line-height:1.75;color:var(--c-gold-lt);margin-bottom:.5rem}
.scripture-quote .verse-en{font-family:var(--f-en-serif);font-style:italic;font-size:.82rem;line-height:1.55;color:var(--c-off);margin-bottom:.5rem}
.scripture-quote .verse-ref{font-size:.68rem;color:var(--c-gold);letter-spacing:.03em;margin-bottom:.45rem}
.scripture-quote .verse-caption{font-size:.78rem;color:var(--c-muted);line-height:1.55;margin-bottom:.6rem}
.scripture-quote .verse-note{font-size:.66rem;color:var(--c-muted);line-height:1.55;opacity:.8;padding-top:.55rem;border-top:1px solid var(--c-border)}

/* ── 14. Stats Row ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:2.5rem 0}
.stat{text-align:center;padding:1.75rem 1rem;border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-panel)}
.stat-n{font-family:var(--f-en-serif);font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:900;color:var(--c-gold);line-height:1;margin-bottom:6px}
.stat-l{font-size:.75rem;color:var(--c-muted);line-height:1.4;letter-spacing:.04em}

/* ── 15. Person Feature ── */
.person{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;padding:1.5rem;background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--r-lg);margin:2.5rem 0}
.person-init{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--c-navy),var(--c-navy-mid));border:2px solid var(--c-gold);display:flex;align-items:center;justify-content:center;font-family:var(--f-ko-serif);font-size:1.8rem;font-weight:700;color:var(--c-gold);flex-shrink:0}
.person-name{font-family:var(--f-en-serif);font-size:1.35rem;font-weight:700;margin-bottom:3px}
body.lang-ko .person-name{font-family:var(--f-ko-serif)}
.person-role{font-size:.72rem;color:var(--c-gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem}
.person-bio{font-size:.88rem;color:var(--c-off);line-height:1.75}

/* ── 16. Country Card (Wing 4) ── */
.country{border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;margin:1.5rem 0;background:var(--c-panel)}
.country-hd{padding:1.25rem 1.5rem;background:linear-gradient(135deg,rgba(10,60,143,.28),rgba(5,15,31,.8));border-bottom:1px solid var(--c-border);display:flex;align-items:flex-start;gap:1rem}
.country-flag{width:44px;height:30px;border-radius:3px;background:rgba(194,134,21,.15);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.country-name{font-family:var(--f-en-serif);font-size:1.4rem;font-weight:700;line-height:1.15;margin-bottom:3px}
body.lang-ko .country-name{font-family:var(--f-ko-serif)}
.country-dates{font-size:.75rem;color:var(--c-gold);letter-spacing:.05em}
.country-body{padding:1.25rem 1.5rem}
.country-body p{font-size:.92rem;color:var(--c-off);line-height:1.8}
.country-body p+p{margin-top:.7rem}
.country-hl{margin-top:1rem;padding:.6rem 1rem;background:rgba(194,134,21,.07);border-left:3px solid var(--c-gold);border-radius:0 var(--r) var(--r) 0;font-size:.88rem;color:var(--c-off);font-style:italic}

/* ── 17. Note Panel ── */
.note{padding:1rem 1.25rem;border-radius:var(--r);background:rgba(10,60,143,.2);border:1px solid rgba(10,60,143,.45);font-size:.88rem;color:var(--c-off);line-height:1.75;margin:1.25rem 0}
.note.gold{background:rgba(194,134,21,.07);border-color:rgba(194,134,21,.28)}

/* ── 18. Wing Footer Nav ── */
.wing-footer{padding:2.5rem 3.5rem;border-top:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.w-nav-btn{display:flex;align-items:center;gap:.6rem;padding:.65rem 1.25rem;border:1px solid var(--c-border);border-radius:var(--r);font-size:.88rem;color:var(--c-off);transition:var(--ease)}
.w-nav-btn:hover{border-color:var(--c-gold);color:var(--c-gold)}
.w-nav-btn.primary{background:var(--c-gold);color:var(--c-bg);border-color:var(--c-gold);font-weight:600}
.w-nav-btn.primary:hover{background:var(--c-gold-lt);color:var(--c-bg)}

/* ── 19. Institution Banner ── */
.institution-banner{background:#050F1F;background-image:linear-gradient(rgba(10,60,143,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(10,60,143,.18) 1px,transparent 1px);background-size:48px 48px;padding:calc(var(--nav-h) + 4rem) 2rem 4rem;text-align:center;border-bottom:1px solid rgba(194,134,21,.25)}
.institution-banner-inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.institution-logo{opacity:.9}
.institution-location{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--c-gold);margin:0}
.institution-name{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,6vw,3.8rem);font-weight:700;color:#fff;line-height:1.15;margin:0;letter-spacing:.01em}
.institution-sub{font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--c-gold);opacity:.85;margin:0;line-height:1.6;font-style:italic}
.institution-rule{width:80px;height:1px;background:var(--c-gold);opacity:.45;margin-top:.4rem}

/* ── 19. Entry Page ── */
.entry-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:calc(var(--nav-h) + 3rem) 2rem 3rem;position:relative;overflow:hidden}
.entry-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(10,60,143,.35) 0%,transparent 60%),radial-gradient(ellipse at 50% 85%,rgba(194,134,21,.07) 0%,transparent 50%);pointer-events:none}
.entry-verse-ref{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-gold);margin-bottom:1.1rem}
.entry-verse{font-family:var(--f-en-serif);font-size:clamp(1.45rem,3.2vw,2.4rem);line-height:1.48;font-style:italic;max-width:780px;color:var(--c-off);position:relative;z-index:1}
body.lang-ko .entry-verse{font-family:var(--f-ko-serif);font-style:normal}
.entry-rule{width:72px;height:1px;background:linear-gradient(to right,transparent,var(--c-gold),transparent);margin:2rem auto}
.entry-title{font-family:var(--f-en-serif);font-size:clamp(1.9rem,5.5vw,4.2rem);font-weight:900;line-height:1.08;margin-bottom:.5rem;position:relative;z-index:1}
body.lang-ko .entry-title{font-family:var(--f-ko-serif)}
.entry-thesis{font-family:var(--f-en-serif);font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:700;color:var(--c-gold-lt);margin-bottom:.9rem;position:relative;z-index:1}
body.lang-ko .entry-thesis{font-family:var(--f-ko-serif)}
.entry-sub{font-size:.85rem;color:var(--c-muted);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2.5rem}
.btn-gold{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2rem;background:var(--c-gold);color:var(--c-bg);font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r);transition:var(--ease);cursor:pointer;font-family:inherit}
.btn-gold:hover{background:var(--c-gold-lt);transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2rem;border:1px solid var(--c-border);color:var(--c-off);font-size:.9rem;border-radius:var(--r);transition:var(--ease)}
.btn-ghost:hover{border-color:var(--c-gold);color:var(--c-gold)}

/* ── 20. Tour Selector ── */
.tour-sel{padding:4rem 2rem;max-width:980px;margin:0 auto}
.tour-paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.85rem;margin:2rem 0 1.75rem}
.path-btn{padding:1.25rem .9rem;border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-panel);text-align:center;cursor:pointer;transition:var(--ease);font-family:inherit}
.path-btn:hover,.path-btn.sel{border-color:var(--c-gold);background:rgba(194,134,21,.1)}
.path-btn.sel{box-shadow:0 0 0 1px var(--c-gold)}
.path-icon{font-size:1.7rem;margin-bottom:.5rem}
.path-name{font-size:.88rem;font-weight:600;color:var(--c-white);margin-bottom:3px}
.path-desc{font-size:.73rem;color:var(--c-muted);line-height:1.4}

/* ── 21. Museum Map (Entry) ── */
.museum-map{max-width:880px;margin:0 auto;padding:0 2rem 4rem}
.map-grid{border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;display:grid;gap:1px;background:var(--c-border)}
.map-row{display:block;padding:1.5rem 2rem;background:var(--c-bg-mid);transition:background var(--ease)}
.map-row:hover{background:var(--c-bg-light)}
.map-row-num{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.3rem}
.map-row-title{font-family:var(--f-en-serif);font-size:1.2rem;font-weight:700;margin-bottom:.2rem}
body.lang-ko .map-row-title{font-family:var(--f-ko-serif)}
.map-row-meta{font-size:.78rem;color:var(--c-muted)}

/* ── 22. Exit Room ── */
.exit-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:calc(var(--nav-h) + 3rem) 2rem 3rem;position:relative;overflow:hidden}
.exit-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;max-width:760px;width:100%;margin:2.5rem auto 0}
.exit-opt{display:block;padding:1.75rem 1.25rem;border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-panel);text-align:center;transition:var(--ease);color:var(--c-white)}
.exit-opt:hover{border-color:var(--c-gold);background:rgba(194,134,21,.1);transform:translateY(-3px)}
.exit-opt-icon{font-size:2rem;margin-bottom:.75rem}
.exit-opt-title{font-family:var(--f-en-serif);font-size:1.05rem;font-weight:700;margin-bottom:.4rem}
body.lang-ko .exit-opt-title{font-family:var(--f-ko-serif)}
.exit-opt-desc{font-size:.8rem;color:var(--c-muted);line-height:1.5}

/* ── 23. NK Room (Dark/Memorial) ── */
.nk-room{background:linear-gradient(to bottom,#030C1A,var(--c-bg))}
.nk-room .room-num{color:#6B7D8E}
.nk-room .room-title{color:#C8D0D8}
.memorial{border:1px solid rgba(100,110,120,.28);border-radius:var(--r-lg);padding:1.5rem;background:rgba(15,18,24,.5);margin:1.5rem 0}
.nk-verse{font-family:var(--f-en-serif);font-size:1.1rem;font-style:italic;color:#B0B8C4;text-align:center;margin:2rem 0;padding:1.5rem;border-top:1px solid rgba(100,110,120,.2);border-bottom:1px solid rgba(100,110,120,.2)}
body.lang-ko .nk-verse{font-family:var(--f-ko-serif);font-style:normal}

/* ── 24. Gold Divider ── */
.gold-line{height:1px;background:linear-gradient(to right,transparent,var(--c-gold),transparent);margin:2.5rem 0}
.gold-line.narrow{max-width:80px;margin-left:0}
.gold-line.center{max-width:80px;margin-left:auto;margin-right:auto}

/* ── 25. Scroll Reveal ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:none}

/* ── 26. Footer ── */
.site-footer{padding:2.5rem 2rem;border-top:1px solid var(--c-border);background:var(--c-bg-mid)}
/* The cinematic lane's docent is a collapsed 54px bottom sheet pinned over
   the page (see .ai-docent.sheet-mode) -- give the footer enough bottom
   clearance so its last content (e.g. the "Continue to the full exhibit"
   button) can scroll clear of that bar instead of sitting underneath it. */
body.cine-page .site-footer{padding-bottom:calc(54px + env(safe-area-inset-bottom) + 24px)}
/* The cine-scroll container's scroll-snap-type is mandatory, but only the
   .cine-panel scenes carried scroll-snap-align -- with no snap point of its
   own, the footer could never fully settle into view; scrolling always
   snapped back to the last scene, leaving the footer (and its "Continue to
   the full exhibit" button) unreachable. Giving it a snap point fixes that. */
.cine-scroll .site-footer{scroll-snap-align:start}
.footer-inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
.footer-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.footer-org{font-size:.82rem;color:var(--c-off);letter-spacing:.02em}
.footer-links{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.footer-links a{font-size:.78rem;color:var(--c-muted);transition:var(--ease)}
.footer-links a:hover{color:var(--c-white)}
.footer-sep{color:var(--c-border);font-size:.75rem;user-select:none}
.footer-copy{font-size:.72rem;color:var(--c-muted);margin-top:.2rem}

/* ── 27. Room Hero Photo ── */
.room-hero{margin:2.5rem 0;position:relative;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;max-height:420px}
.room-hero img{width:100%;object-fit:cover;object-position:center 40%;display:block;filter:brightness(.88) contrast(1.06) saturate(.95);cursor:pointer}
.room-hero .rh-cap{position:absolute;bottom:0;left:0;right:0;padding:1.25rem 1.25rem .75rem;background:linear-gradient(transparent, rgba(5,15,31,.75) 35%, rgba(5,15,31,.96));font-size:.85rem;color:var(--c-gold-lt);font-style:italic;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.room-hero .rh-cap b{color:var(--c-gold);font-style:normal;font-weight:600}

/* ── 28. Artifact Thumbnail + Lightbox ── */
.artifact-thumb{width:100%;height:110px;object-fit:cover;border-radius:var(--r);margin-top:.75rem;opacity:.85;filter:brightness(.85) contrast(1.08) saturate(.92);cursor:pointer;transition:var(--ease)}
.artifact-thumb:hover{opacity:1;transform:scale(1.02)}
#lb{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:1rem}
#lb.open{display:flex}
#lb img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:var(--r);box-shadow:0 8px 40px rgba(0,0,0,.6)}
#lb .lb-cap{color:var(--c-off);font-size:.92rem;text-align:center;max-width:600px;line-height:1.6;padding:0 1rem}
#lb .lb-close{position:absolute;top:20px;right:24px;color:var(--c-muted);font-size:2rem;cursor:pointer;line-height:1;background:none;border:none;padding:.25rem .5rem}
#lb .lb-close:hover{color:var(--c-white)}

/* ── 29. Social/Painting Prologue (Wing 2) ── */
.social-visual{margin:2rem 0 2.5rem}
.social-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold);margin-bottom:1.25rem}
.painting-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.5rem}
.painting{position:relative;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel)}
.painting img{width:100%;height:280px;object-fit:contain;display:block;cursor:pointer;filter:brightness(.9) contrast(1.03) saturate(.85) sepia(.08);transition:filter .4s}
.painting:hover img{filter:brightness(.98) contrast(1.01) saturate(.95) sepia(.02)}
.painting .p-era{position:absolute;top:.6rem;left:.6rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(5,15,31,.82);color:var(--c-muted);padding:.25rem .6rem;border-radius:2px}
.painting .p-cap{padding:1rem 1.1rem;font-size:.85rem;color:var(--c-off);line-height:1.65;border-top:1px solid var(--c-border)}
.painting .p-cap b{color:var(--c-gold)}
.credit{margin-top:.6rem;font-size:.7rem}
.credit summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.3rem;color:var(--c-muted);transition:var(--ease)}
.credit summary::-webkit-details-marker{display:none}
.credit summary:hover{color:var(--c-gold)}
.credit p{margin-top:.35rem;color:var(--c-muted);line-height:1.5}
.credit a{color:var(--c-gold);word-break:break-all}
.social-pull{font-family:var(--f-en-serif);font-style:italic;font-size:1.15rem;color:var(--c-white);border-left:3px solid var(--c-gold);padding-left:1.25rem;margin:1.5rem 0;max-width:56ch;line-height:1.6}
body.lang-ko .social-pull{font-family:var(--f-ko-serif);font-style:normal}
.painting-solo{max-width:360px;margin:0 auto 1.5rem}

/* ── 30. Timeline Wall Graphics ── */
.timeline-wall{display:grid;grid-template-columns:1fr;gap:.85rem;margin:1.5rem 0}
.twall{position:relative;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow-x:auto;overflow-y:hidden}
.twall svg{width:100%;min-width:800px;height:auto}

/* ── 31. Lens Bar (mode + lang door, persistent header control) ── */
.lensbar-seg{display:flex;border:1px solid var(--c-border);border-radius:20px;overflow:hidden;flex:none}
.lensbar-seg button{background:transparent;border:0;color:var(--c-muted);font-family:inherit;font-size:.68rem;letter-spacing:.03em;padding:5px 11px;cursor:pointer;transition:var(--ease);white-space:nowrap}
.lensbar-seg button.on{background:var(--c-gold);color:var(--c-bg);font-weight:600}
.lensbar-seg button:not(.on):hover{background:var(--c-gold-dim);color:var(--c-white)}
.showme-btn{font-size:.68rem;color:var(--c-muted);border:1px solid var(--c-border);border-radius:20px;padding:5px 13px;transition:var(--ease);white-space:nowrap}
.showme-btn:hover{border-color:var(--c-gold);color:var(--c-gold)}
.nav-controls{flex-wrap:wrap;row-gap:.4rem;justify-content:flex-end}

/* ── 32. Entry Intake Overlay (one-choice, the door at first visit) ── */
.intake-ov{position:fixed;inset:0;z-index:2000;background:rgba(3,7,17,.86);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;overflow-y:auto;padding:calc(var(--nav-h) + 24px) 20px 40px}
.intake-ov.show{display:flex}
.intake-card{max-width:560px;width:100%;border:1px solid var(--c-border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(10,60,143,.2),rgba(5,15,31,.7));padding:2.4rem 2rem}
.intake-cross{text-align:center;color:var(--c-gold-lt);font-size:1.5rem;opacity:.9;margin-bottom:.6rem}
.intake-verse{font-family:var(--f-en-serif);font-style:italic;text-align:center;color:var(--c-muted);margin:0 0 .5rem;font-size:.95rem}
body.lang-ko .intake-verse{font-family:var(--f-ko-serif);font-style:normal}
.intake-thesis{text-align:center;color:var(--c-gold);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .9rem}
body.lang-ko .intake-thesis{letter-spacing:.04em;text-transform:none}
.intake-welcome{text-align:center;color:var(--c-off);max-width:42ch;margin:0 auto 1.6rem;font-size:.95rem;line-height:1.6}
.intake-choice{display:grid;gap:.85rem}
.intake-opt{display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--c-border);border-radius:var(--r);color:var(--c-white);font-family:inherit;padding:1.15rem 1.25rem;cursor:pointer;transition:var(--ease)}
.intake-opt:hover{border-color:var(--c-gold);background:rgba(194,134,21,.08)}
.intake-opt .t{font-family:var(--f-en-serif);font-size:1.1rem;color:var(--c-white)}
body.lang-ko .intake-opt .t{font-family:var(--f-ko-serif)}
.intake-opt .t b{color:var(--c-gold-lt);font-weight:700}
.intake-opt .s{display:block;color:var(--c-muted);font-size:.82rem;margin-top:.4rem;line-height:1.5}
.intake-juststart{display:block;margin:1.3rem auto 0;background:none;border:0;color:var(--c-muted);font-size:.8rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.intake-juststart:hover{color:var(--c-off)}

/* ── 33. Cinematic Lane (Highlights) ── */
body.cine-page{overflow:hidden}
.cine-scroll{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.cine-scroll::-webkit-scrollbar{width:0}
.cine-panel{position:relative;min-height:100%;height:100%;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;padding:5.5rem 1.75rem 4.5rem;overflow:hidden}
.cine-panel .cine-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.32}
.cine-panel .cine-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(5,15,31,.55),rgba(5,15,31,.93) 65%)}
.cine-credit{position:absolute;top:14px;right:16px;z-index:2;font-size:.56rem;letter-spacing:.08em;color:var(--c-muted);background:rgba(5,15,31,.6);padding:3px 8px;border-radius:2px;max-width:46vw;text-align:right}
.cine-credit a{color:var(--c-muted);text-decoration:underline}
.cine-inner{position:relative;z-index:3;max-width:640px;margin:0 auto;width:100%}
.cine-eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.cine-eyebrow .num{font-family:var(--f-en-serif);font-style:italic;color:var(--c-gold);font-size:1.2rem}
.cine-eyebrow .era{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.cine-h1{font-family:var(--f-en-serif);font-weight:700;font-size:clamp(1.8rem,5.4vw,3rem);line-height:1.1;max-width:16ch}
body.lang-ko .cine-h1{font-family:var(--f-ko-serif)}
.cine-h1 i{font-style:italic;color:var(--c-gold-lt)}
.cine-line{margin-top:1rem;color:var(--c-off);font-size:clamp(.98rem,2vw,1.12rem);max-width:40ch;line-height:1.7}
.cine-acts{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.cine-peekbtn{background:transparent;border:1px solid var(--c-border);color:var(--c-off);padding:.55rem .95rem;font-size:.84rem;border-radius:var(--r);cursor:pointer;transition:var(--ease);font-family:inherit}
.cine-peekbtn:hover{border-color:var(--c-gold);color:var(--c-white)}
.cine-peekbtn .chev{color:var(--c-gold);margin-left:5px;display:inline-block;transition:.2s}
.cine-peekbtn.open .chev{transform:rotate(180deg)}
.cine-askbtn{background:var(--c-gold);border:0;color:var(--c-bg);font-weight:600;padding:.6rem 1.1rem;font-size:.84rem;border-radius:var(--r);cursor:pointer;font-family:inherit}
.cine-askbtn:hover{background:var(--c-gold-lt)}
.cine-peek{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease,margin .3s ease;opacity:0}
.cine-peek.open{max-height:360px;opacity:1;margin-top:1.1rem}
.cine-peek .pk{border-left:2px solid var(--c-gold);padding-left:1rem;max-width:54ch}
.cine-peek .pk p{color:var(--c-off);font-size:.92rem;line-height:1.7}
.cine-peek .pk p+p{margin-top:.6rem}
.cine-peek .pk .mark{color:var(--c-gold-lt);font-weight:600}
.cine-cue{position:absolute;bottom:1.1rem;left:0;right:0;z-index:3;text-align:center;color:var(--c-muted);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;animation:cinebob 2.4s ease-in-out infinite}
@keyframes cinebob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:560px){.cine-credit{max-width:70vw}}

/* ── 34. Docent Sheet Mode (forced bottom-sheet for the cinematic lane) ── */
.ai-docent.sheet-mode{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;max-height:64vh;border-left:none;border-top:1px solid var(--c-border);border-radius:14px 14px 0 0;transform:translateY(calc(100% - 54px));transition:transform .32s cubic-bezier(.3,.7,.3,1);z-index:1600;box-shadow:0 -10px 30px rgba(0,0,0,.4)}
.ai-docent.sheet-mode.open{transform:translateY(0)}
.cine-scrim{position:fixed;inset:0;z-index:1550;background:rgba(3,6,14,.6);opacity:0;pointer-events:none;transition:.25s}
.cine-scrim.open{opacity:1;pointer-events:auto}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:1000px){
  .museum-layout{grid-template-columns:1fr}
  .ai-docent{position:fixed;bottom:0;left:0;right:0;height:auto;max-height:55vh;border-left:none;border-top:1px solid var(--c-border);transform:translateY(calc(100% - 50px));transition:transform .3s ease;z-index:800;top:auto}
  .ai-docent.open{transform:none}
  .room-jump{display:none}
}
@media(max-width:720px){
  .wing-hero,.room{padding-left:1.5rem;padding-right:1.5rem}
  .wing-footer,.wing-footer.wing-footer{padding:1.75rem 1.5rem}
  .wing-footer{flex-direction:column;align-items:stretch;text-align:center}
  .tour-paths{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .exit-options{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .site-nav{padding:env(safe-area-inset-top) 1.25rem 0}
  .nav-loc{display:none}
  .museum-map{padding:0 1.25rem 3rem}
}
@media(max-width:768px){
  /* Single compact row: logo mark left, hamburger right. Everything else
     (mode toggle, lang toggle, Special Exhibition, Show me, Entry) moves
     into a dropdown panel opened by the hamburger -- see initNavMenu(). */
  .site-nav{padding:env(safe-area-inset-top) 1rem 0}
  .nav-brand-text{display:none}
  .nav-loc{display:none}
  .nav-hamburger{display:flex}
  .nav-controls{
    display:none;
    position:fixed;
    top:var(--nav-h);
    left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
    background:rgba(5,15,31,.97);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--c-border);
    padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    z-index:1000;
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
  }
  .nav-controls.open{display:flex}
  .nav-controls .lensbar-seg{width:100%}
  .nav-controls .lensbar-seg button{flex:1;text-align:center}
  .nav-controls .showme-btn,.nav-controls .lang-btn,.nav-controls .nav-link{width:100%;text-align:center;padding:.65rem;border-radius:var(--r);border:1px solid var(--c-border)}
}
@media(max-width:480px){
  .artifacts{grid-template-columns:1fr}
  .tour-paths{grid-template-columns:1fr}
  .tl-item{grid-template-columns:56px 1fr}
  .painting-pair,.timeline-wall{grid-template-columns:1fr}
  .painting img{height:240px}
  .room-hero{max-height:280px}
}
@media(max-width:560px){
  .cine-panel{padding:4.5rem 1.25rem 4rem}
  .intake-card{padding:1.9rem 1.4rem}
}
@media(max-width:768px){
  /* An open "A little more" peek can make a scene's content taller than
     the fixed-height scroll-snap panel. Let that panel scroll internally
     (rather than clip the overflow or fight the outer mandatory snap),
     with enough bottom clearance for the collapsed AI Docent bar. The
     outer .cine-scroll's snap behavior is untouched -- .peek-open only
     ever applies to whichever single panel currently has an open peek. */
  .cine-panel.peek-open{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
    padding-bottom:calc(4rem + 54px + env(safe-area-inset-bottom));
  }
  /* The peek's own 360px cap (sized for desktop) clips longer scenes (e.g.
     Scene II) well before the panel-scroll fix above even comes into play.
     Let it grow to its natural height on mobile; the now-scrollable panel
     takes over from there. */
  .cine-peek.open{max-height:none}
}