/* -------- PAPER TEXTURE OVERLAY -------- */
.paper-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.42; /* tweak opacity here */
  mix-blend-mode: multiply;
  background-image: url('./public/assets/paper2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
}
@media (min-resolution: 2dppx) {
  .paper-overlay { background-size: cover; }
}
.intro-gl { position:absolute; inset:0; z-index:1; pointer-events:none; display:block; }
.intro-title, .intro-btn { position:relative; z-index:2; }
/* -------- INTRO OVERLAY -------- */
.intro-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: auto;
}
.intro-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.367);
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  /* text-align: center; */
  /* padding: 32px 40px; */
  /* border-radius: 12px; */
  /* box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); */
}
.intro-title {
  margin: 0 0 16px;
  font-family: 'Jost', sans-serif;
  font-size: clamp(26px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #222;
}
.intro-btn {
  padding: 10px 24px;
  border-radius: 50px;
  border: none;
  background: #222;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.intro-btn:hover { background: #444; }

.fade-out {
  animation: fadeOut 0.6s ease forwards;
}
@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}

/* ===== Intro Screen ===== */
:root{
  --introMaxW: 1200px;
  --introPad: clamp(16px, 3vw, 40px);

  /* Intro assets (update paths if your filenames differ) */
  --introBg: url('./public/assets/home-new-bg.jpg');

  /* Button */
  --btnGreen: #2f5b3f;
  --btnGold: #d9c18c;
  --btnShadow: rgba(0,0,0,.25);

  /* Footer */
  --footerBg: rgba(0,0,0,0.92);
  --footerInk: #ffffff;
}

html, body { height: 100%; }
body { overflow-x: hidden; }

/* Full-screen intro overlay */
.intro-screen{
  position: fixed;
  inset: 0;
  z-index: 19; /* above paper overlay and below HUD/menu */
  display: flex;
  flex-direction: column;
  padding: 0;
  pointer-events: auto;

  /* Background to match the new home look */
  background:
    radial-gradient(1200px 800px at 50% 40%, rgba(255,255,255,0.06), rgba(0,0,0,0.12)),
    var(--introBg) center center / cover no-repeat;
}

/* Main layout: top logos, centered seal+button, footer */
.intro-inner{
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--introPad);
    box-sizing: border-box;
  text-align: center;
}

/* Landing override: use a controlled layout (Intro + Curatorial combined) */
.intro-inner.landing-inner{
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  /* extra bottom padding so content never sits under the fixed footer */
    padding: clamp(34px, 6vh, 56px) 24px calc(24px + 86px);
  max-width: var(--introMaxW);
  margin: 0 auto;
}

/* Top partner logos */
.intro-logos{
  width: 100%;
  padding-left: 0vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 4vw, 70px);
  padding-top: clamp(18px, 4vw, 46px);
  padding-bottom: clamp(10px, 2vw, 18px);
  will-change: transform;
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}
.intro-logos .logo{
  height: clamp(34px, 5.5vw, 70px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.12));
}

/* Center seal + button */


.intro-seal{
  width: min(420px, 30vw);
  height: auto;
  display: block;
  /* margin-top: clamp(18px, 5vh, 40px);
  margin-bottom: clamp(16px, 3vh, 28px); */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18));
}

/* ENTER EXHIBITION / GET STARTED button */
.intro-enter,
.curatorial-cta{
  appearance: none;
  width: fit-content;
  max-width: 90vw;
  cursor: pointer;
  border: 4px solid var(--btnGold);
  border-radius: 999px;
  padding: clamp(14px, 2.2vh, 18px) clamp(26px, 3.2vw, 44px);

  font-family: "Hubballi", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(18px, 2.1vw, 20px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f3f3f3;

  background:
    /* subtle pattern */
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 70% 65%, rgba(0,0,0,0.10), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.10)),
    var(--btnGreen);

  box-shadow:
    0 10px 0 rgba(0,0,0,0.12),
    0 14px 26px var(--btnShadow);
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.intro-enter:hover,
.curatorial-cta:hover{
  filter: brightness(1.03) saturate(1.03);
  transform: translateY(-2px);
  box-shadow:
    0 11px 0 rgba(0,0,0,0.12),
    0 16px 28px var(--btnShadow);
}
.intro-enter:active,
.curatorial-cta:active{
  transform: translateY(1px);
  box-shadow:
    0 9px 0 rgba(0,0,0,0.12),
    0 12px 20px rgba(0,0,0,.20);
}

/* Footer bar (always visible like the comp) */
.intro-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;

  background: var(--footerBg);
  color: var(--footerInk);
  text-align: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.4;

  padding: 18px 14px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* Make sure the canvas stays behind everything */
canvas.webgl{ position: fixed; inset: 0; z-index: 1; }

/* Paper overlay stays between canvas (1) and intro (19) */
.paper-overlay{ z-index: 9; }

@media (max-width: 768px){
  /* keep intro elements centered + prevent image overflow */
  .intro-screen img { max-width: 100%; height: auto; }

  .intro-inner.landing-inner{
    padding: 0;
    text-align: center;
  }

  .intro-inner{
    /* padding: 0 18px; */
    box-sizing: border-box;
    text-align: center;
  }
  

  .intro-logos{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding-top: 28px;
    padding-bottom: 14px;
    padding-left: 0vw;
  }
  .intro-logos .logo{ height: 42px; width: auto; }

  /* seal centered + controlled size (this fixes “drifting left / cropping”) */
  .intro-seal{
   width: min(420px, 88vw);
    margin: 22px auto 22px;
    display: block;
  }

  /* button centered, wide but not edge-to-edge */
  .intro-enter,
  .curatorial-cta{
    width: min(360px, 86vw);
    display: inline-flex;
    justify-content: center;
    text-align: center;

    font-size: 18px;
    letter-spacing: 0.18em;
    padding: 14px 26px;

    margin: 8px auto 22px;
  }

  .intro-footer{
   font-size: 12px;
  padding: 14px 10px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px){
  .intro-logos .logo{ height: 36px; }
  .intro-seal{ width: min(320px, 86vw); }
  .intro-enter,
  .curatorial-cta{
    width: min(330px, 88vw);
    font-size: 16px;
    letter-spacing: 0.16em;
    padding: 12px 22px;
    margin-bottom: 20px;
  }
}

/* ===== Curatorial Overlay (single layout) ===== */
.curatorial{
  position: fixed;
  inset: 0;
  z-index: 18;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, filter 0.6s ease;
  filter: blur(6px);

  /* same paper feel as menu */
  background:
    linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.85)),
    url('./public/assets/paper2.jpg') center center / cover no-repeat;

  /* allow inner to scroll on small screens */
  overflow: hidden;
}

.curatorial.is-visible{
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
}

/* Main content wrapper */
.curatorial-inner{
  height: 100%;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 46px);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(320px, 560px) 1fr;
  gap: clamp(22px, 4vw, 60px);
  align-items: center;
}

/* Left: seal */
.curatorial-seal{
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18));
}

/* Right: copy + CTA */
.curatorial-right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.curatorial-copy{
  width: 100%;
  max-width: 720px;
  color: #111;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
}

/* If you use <p> blocks inside the copy */
.curatorial-copy p{ margin: 0 0 16px; }

/* Optional: the blue italic paragraphs in your comp (keep if your HTML uses these classes) */
.curatorial-copy .curatorial-em{
  color: #0b2a83;
  font-style: italic;
  font-weight: 600;
}

/* CTA: reuse the intro button styling */
.curatorial-cta{
  margin-top: clamp(18px, 3vh, 34px);
}

/* Make the curatorial GET STARTED button look identical to the intro button */
.curatorial-cta .intro-enter{
  margin: 0;
}

/* Mobile: stack, scroll text, reveal CTA only after JS adds .show-cta */
@media (max-width: 768px){
  .curatorial{ overflow: hidden; }

  .curatorial-inner{
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 22px 18px 18px;
  }

  .curatorial-seal{
    max-width: 260px;
    justify-self: center;
  }

  .curatorial-right{
    align-items: center;
    text-align: center;
  }

  .curatorial-copy{
    max-width: 560px;
    width: 100%;

    /* scrollable copy area */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* keep space for footer + CTA */
    max-height: calc(100vh - 240px);
    padding: 8px 6px;
    box-sizing: border-box;
  }

  /* CTA hidden by default on mobile (JS will add .show-cta to .curatorial) */
  .curatorial-cta{
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
  }

  .curatorial.show-cta .curatorial-cta{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .curatorial-cta .intro-enter{
    width: min(360px, 86vw);
  }
}

/* Bottom nav: shared */
.bottom-nav{
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 18px 22px 26px;
  background: rgb(0, 0, 0);
  backdrop-filter: blur(2px);
  z-index: 9000;
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none; /* until visible */
}
.bottom-nav.is-visible{
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}

/* Desktop layout */
.bn-desktop{ display: block; }
.bn-desktop .bn-list{
  display: grid; grid-template-columns: repeat(9, 1fr);
  gap: 22px; align-items: end; list-style: none; margin: 0; padding: 0 8px;
}
.bn-desktop li{
  cursor: pointer; user-select: none; text-align: left; color:#ffffff;
  font: 14px/1.2 "Hubballi", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.bn-desktop .bn-num{ display:block; font-size:12px; opacity:.8; margin-bottom:6px; }
.bn-desktop .bn-bar{
  display:block; height:4px; background:#d9d5cf; border-radius:2px; margin-bottom:6px;
  transition: background-color .25s ease, transform .25s ease;
}
.bn-desktop li.is-active .bn-bar{ background:#a12b2b; transform: scaleX(1.02); }
.bn-desktop .bn-title{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Mobile layout */
.bn-mobile{
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 8px; margin-top: 6px;
}
.bn-arrow{
  width: 44px; height: 44px; border-radius: 999px; border:1px solid #ffffff;
  background: transparent; font-size: 20px; cursor: pointer; color: #ffffff;
}
.bn-dots{ display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px;
  list-style:none; padding:0 8px; margin:0; align-items:center; }
.bn-dots li{ text-align:center; font: 12px/1 system-ui, -apple-system; color:#ffffff; }
.bn-dotbar{ display:block; height:4px; background:#d9d5cf; border-radius:2px; margin-bottom:6px; }
.bn-dots li.is-active .bn-dotbar{ background:#a12b2b; }

/* Responsive switch */
@media (max-width: 768px){
  .bn-desktop{ display:none; }
  .bn-mobile{ display:flex; }

  /* .chapter-content img {
  width: 0%;
  height: auto;
  margin: 1em 0;
  border-radius: 6px;
} */

}

/* ===== Chapter Overlay ===== */
.chapter-overlay {
  position: fixed;
  inset: 0;
  background: #faf9f6;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
  z-index: 12000;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chapter-overlay.active {
  pointer-events: auto;
}

.chapter-overlay.visible {
  opacity: 1;
}

.close-chapter {
  position: fixed;
  top: 20px;
  right: 24px;
  font-size: 28px;
  border: none;
  background: none;
  cursor: pointer;
  color: #111;
  z-index: 14050; /* keep above overlay content by default */
}

/* When the close button lives inside the overlay header, it must NOT be fixed (or it can sit under/over weirdly). */
.chapter-header .close-chapter{
  position: relative;
  top: auto;
  right: auto;
  z-index: 20002;
}

.chapter-content {
  width: 100%;
  /* max-width: 820px; */
  /* start content below the sticky header */
  /* padding: calc(var(--chapterHeaderH, 72px) + 24px) 24px 60px; */
  line-height: 1.6;
  color: #2b2b2b;
  /* font-family: "Hubballi", system-ui, sans-serif; */
}
/* .chapter-content img {
  width: 100%;
  height: auto;
  margin: 1em 0;
  border-radius: 6px;
} */

/* ===== Top-left Menu (hidden until Explore) ===== */

:root{
  --menu-bg: #e3eff2;        /* pale blue overlay */
  --menu-line: #c9b7b2;      /* vertical guide */
  --menu-ink: #2b2b2b;       /* text */
  --menu-accent: #9a2a2a;    /* red */
}
.menu-nav{ position:fixed; top:14px; left:16px; z-index:14000; pointer-events:none; opacity:0; transition:opacity .5s ease; }
.menu-nav.is-visible{ opacity:1; pointer-events:auto; }

.menu-open{ position:absolute; top:0; left:0; background:transparent; border:0; cursor:pointer; font: 900 18px/0.9 'Hubballi', system-ui, -apple-system, Segoe UI, Roboto; letter-spacing:0.25em; color:#2b2b2b; text-align:left;
  transition: transform .5s ease, opacity .5s ease;
  transform: translateY(-6px); opacity: 0;
}

.menu-nav.is-visible .menu-open{ transform: translateY(0); opacity:1; }
.menu-close{ position:fixed; top:20px; right:24px; width:36px; height:36px; border:0; background:transparent; font-size:34px; line-height:34px; color: var(--menu-accent); cursor:pointer; display:none; z-index:14030; }

.menu-panel{
  position:fixed;
  inset:0;
  background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.9)),
              url('./public/assets/paper2.jpg') center center / cover no-repeat;
  border:0;
  border-radius:0;
  padding:84px clamp(24px,4vw,72px);
  box-shadow:none;
  display:none;
  z-index:14020;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
 .menu-panel.open{ display:block; }
.menu-panel::before{ content:""; position:absolute; left:88px; top:128px; bottom:48px; width:2px; background:var(--menu-line); }

/* Desktop two-column layout */
@media (min-width: 769px){
  .menu-panel{ display:none; }
  .menu-panel.open{ display:grid; grid-template-columns: 520px 1fr; gap: clamp(28px, 7vw, 140px); align-items:start; }
  /* Place left column (menu-top) and right column (chapters) side-by-side */
  .menu-top{ grid-column: 1; grid-row: 1; }
  #menuChaptersList{ grid-column: 2; grid-row: 1; align-self: start; }
  .menu-item{ margin:42px 0; }
  .menu-link{ font-size: clamp(36px, 3.4vw, 56px); }
  #menuChaptersList{ display:none; }
  #menuChaptersList.open{ display:block; }
  .chapters{ margin:0; padding:0; }
  .chapters li{ margin:12px 0; }
  .chapters .num{ display:inline-block; width:3ch; text-align:right; margin-right:22px; color:var(--menu-accent); opacity:.95; font: 18px/1 'Hubballi', system-ui; }
  .chapters .chap{ display:flex; align-items:center; justify-content:space-between; width:100%; font-size: clamp(18px, 1.35vw, 22px); padding:16px 20px; border-radius:0; color:var(--menu-ink); background:transparent; border:0; }
  .chapters li.is-active .chap{ background:var(--menu-accent); color:#fff; }
  .chapters li.is-active .chap::after{ content:"→"; display:inline-grid; place-items:center; width:28px; height:28px; border:1.5px solid rgba(255,255,255,0.9); border-radius:999px; margin-left:18px; font-size:16px; }
}

.menu-top{ list-style:none; margin:0; padding:0 0 10px 112px; }
.menu-item{ margin:14px 0; }
.menu-link{ background:none; border:0; cursor:pointer; font: 40px/1 'Hubballi', system-ui, -apple-system, Segoe UI, Roboto; color:var(--menu-ink); display:flex; align-items:center; gap:14px; letter-spacing:0.01em; }
.menu-link .sq{ width:14px; height:14px; border:2px solid var(--menu-accent); display:inline-block; background:transparent; }
.menu-link .dot{ width:12px; height:12px; background:var(--menu-accent); display:inline-block; }
.menu-item.menu-chapters .menu-link .sq{ background:var(--menu-accent); border-color:var(--menu-accent); }
.menu-link .arrow{ margin-left:8px; font-size:20px; opacity:.9; }

.chapters{ list-style:none; margin:14px 0 0 46px; padding:0; display:none; }
.chapters.open{ display:block; }
.chapters li{ margin:6px 0; }
.chapters .num{ margin-right:12px; color:#9a2a2a; font: 16px/1 'Hubballi', system-ui, -apple-system; }
.chapters .chap{ background:none; border:0; cursor:pointer; font: 18px/1.4 'Hubballi', system-ui, -apple-system; color:#2b2b2b; padding:8px 12px; border-radius:6px; }
.chapters li.is-active .chap{ background:#9a2a2a; color:#fff; }

/* Mobile behavior: show chapters list by default */
.chapters-mobile{ display:none; }
@media (max-width: 768px){
  /* full screen, scrollable */
  /* Closed by default on mobile; .open turns it on */
.menu-panel{
  padding:76px 18px 24px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.menu-panel.open{
  display:flex;
  flex-direction:column;
}
  /* order: chapters list first, then the two menu items */
  .chapters-mobile{ order:1; display:block; margin-left:52px; }
  .menu-top{ order:2; padding-left:72px; }

  /* hide the desktop opener on mobile (we show list directly) */
  .menu-item.menu-chapters{ display:none; }

  /* spacing + type */
  .menu-top .menu-item{ margin:26px 0; }
  .menu-link{ 
    font-size:28px; 
    font-weight: bold;
  }

  /* chapters list styling */
  .chapters-mobile{ list-style:none; padding:0; margin-top:6px; }
  .chapters-mobile li{ position:relative; margin:18px 0; padding-left:48px; }
  .chapters-mobile .num{ position:relative; display:inline-block; width:3ch; text-align:right; margin-right:18px; color:var(--menu-accent); font: 18px/1 'Hubballi', system-ui; }
  .chapters-mobile .chap{ font-size:20px; padding:10px 12px; color:var(--menu-ink); background:transparent; border:0; }
  .chapters-mobile li.is-active .chap{ background:var(--menu-accent); color:#fff; }

  /* left vertical guideline + small squares */
  .menu-panel::before{ left:30px; top:94px; bottom:24px; }
  .chapters-mobile li::before, .menu-top .menu-item::before{
    content:""; position:absolute; left:-30px; top:50%; transform:translateY(-50%);
    width:14px; height:14px; border:2px solid var(--menu-accent); background:#e8f1f4;; /* match bg */
  }
  .chapters-mobile li.is-active::before{ background:var(--menu-accent); }
}
@media (min-width: 320px) and (max-width: 680px) {
  .chapters-mobile li{ position:relative; margin:0px 0; padding-left:0px; }
  .menu-top{ order:2; padding-left:17px; }
}

.hover-text {
  position: fixed;
  left: 50%;
  top: 34%;
  transform: translate(-50%, calc(-50% + 12px));

  pointer-events: none;
  z-index: 9999;

  /* text */
  font-family: 'Hubballi', serif;
  font-weight: 400;
  font-size: clamp(25px, 4vw, 30px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111;
  text-align: center;

  /* cream paper-tone panel */
  background: rgba(248, 241, 227, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  padding: 14px 20px;
  border-radius: 10px;

  max-width: min(920px, 92vw);
  line-height: 1.1;

  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
}

.hover-text.show {
  opacity: 1;
  transform: translate(-50%, -350%);
}
@media (max-width: 860px){
.hover-text.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}}
/* -----------------------------
   Landing (Intro + Curatorial)
   ----------------------------- */
/* Reserve space for the fixed footer and keep the landing screen from page-scrolling */
.intro-screen.landing{ overflow: hidden; }

/* Desktop/tablet: keep landing layout stable by reserving footer space (avoid height math that shifts on tall screens) */
@media (min-width: 861px){
  .intro-inner.landing-inner{
    height: auto;           /* let flex sizing handle height */
    min-height: 0;

    /* reserve space so CTA never sits under the fixed footer */
    padding-bottom: calc(24px + 86px);
  }
  

  .landing-stage{
    height: 100%;
    min-height: 0;
  }
}

/* Scroll container for the curatorial note (desktop + mobile)
   NOTE: JS listens to #curatorialScroll, so this wrapper must be the scroller */
.landing-right .curatorial-scroll{
  width: 100%;
  max-width: 640px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  padding-right: 6px; /* gutter so scrollbar doesn't hug text */
  box-sizing: border-box;
}
.landing-stage{
  display: grid;
  grid-template-columns: 1fr;
      align-items: center;
  align-content: start;
  gap: clamp(14px, 2.6vh, 34px);

  /* Avoid pushing the CTA below the fold on short desktop heights */
  min-height: 0;
  padding-top: clamp(6px, 1.2vh, 18px);
  padding-bottom: 0;
  justify-content: center;
}

.landing-left{
  display: grid;
  justify-items: center;
  gap: clamp(12px, 2.4vh, 26px);
  will-change: transform;
}

.landing-right{
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;

  /* allow internal scrolling areas to size correctly */
  min-height: 0;
}

/* Button hidden until expanded */
#cExplore{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: 0ms;
}

/* Expanded state (after clicking ENTER) */
.landing.landing--expanded .landing-stage{
  grid-template-columns: 520px 1fr;
}

.landing.landing--expanded .landing-left{
  /* justify-items: start; */
  transform: translateX(-20px);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

/* Move intro logos along with the seal when expanding */
.landing.landing--expanded .intro-logos{
      /* justify-content: flex-start; */
      padding-left: 2vw;
}

/* Hide ENTER button once expanded */
.landing.landing--expanded #enterBtn{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
}

.landing.landing--expanded .landing-right{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  transition-delay: 250ms;

  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* In expanded state, let the scroll container take remaining height */
.landing.landing--expanded .landing-right .curatorial-scroll{
  flex: 1 1 auto;
  min-height: 0;
  /* Leave more guaranteed space for the CTA on shorter screens */
  max-height: calc(100vh - 340px);
}

/* Desktop/tablet: show CTA after expand */
.landing.landing--expanded #cExplore{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 650ms;
}

@media (min-width: 861px){
  .landing.landing--expanded #cExplore{
    position: sticky;
    bottom: calc(86px + env(safe-area-inset-bottom) + 10px);
    z-index: 60;
    align-self: center;
    margin-top: 10px;
  }
}

/* Ensure CTA never sits under the fixed footer on desktop */
@media (min-width: 861px){
  .landing.landing--expanded #cExplore{
    margin-bottom: 0; /* sticky bottom handles spacing */
  }
}

/* Curatorial copy tweaks (match comp) */
.landing-right .curatorial-copy{
  max-width: none;
  color: #111;
  font-family: 'Jost', sans-serif;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.6;
  /* height: 0; */
}
.landing-right .curatorial-copy p{ margin: 0 0 16px; }
.landing-right .curatorial-quote{
  color: #0b2a83;
  font-style: italic;
  font-weight: 600;
}

/* Short desktop heights: keep ENTER visible (common on laptops / small viewports) */
@media (min-width: 861px){
  .intro-logos{
    padding-top: 14px;
    padding-bottom: 10px;
  }

  .intro-logos .logo{ height: 46px; }

  .landing-left{
    gap: 14px;
  }

  .intro-seal{
    width: min(320px, 26vw);
  }

  .intro-enter{
    font-size: 18px;
    letter-spacing: 0.18em;
    padding: 12px 26px;
  }
}

@media (max-height: 640px) and (min-width: 861px){
  .intro-logos .logo{ height: 40px; }
  .intro-seal{ width: min(280px, 24vw); }
  .intro-enter{ font-size: 16px; padding: 10px 22px; }
}

/* Responsive: stack on small screens, just fade in text */
@media (max-width: 860px){

  
.landing-right .curatorial-copy{
  height: 40vh;
}

  /* --- Simplified mobile architecture: ONE scroll (the page) --- */

  /* Mobile: lock scroll BEFORE expand, allow ONE page scroll AFTER expand */
  html, body{
    height: 100%;
    overflow: hidden;           /* prevents the pre-curatorial landing from scrolling */
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: auto;
  }

  /* Landing (before expand) stays fixed like a true full-screen */
  .intro-screen.landing{
    position: fixed;
    inset: 0;
    height: 100dvh;
    overflow: hidden;
  }

  /* After expand we allow ONE scroll: the page scroll */
  body.landing-expanded{
    height: auto;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.landing-expanded .intro-screen.landing{
    position: relative;
    inset: auto;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }

  .intro-inner.landing-inner,
  .landing-stage,
  .landing-right{
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* Shrink seal after clicking ENTER */
  .landing.landing--expanded .intro-seal{
    width: 15vh;
    transition: width 650ms cubic-bezier(.2,.8,.2,1);
  }

  .landing.landing--expanded .intro-logos{
    justify-content: center;
    padding-left: 0vw;
  }

  .landing.landing--expanded .landing-stage{
    grid-template-columns: 1fr;
  }

  .landing.landing--expanded .landing-left{
    transform: none;
    justify-items: center;
    gap: 10px;
  }

  .landing.landing--expanded #enterBtn{
    display: none;
  }

  /* Curatorial content should NOT be its own scroller */
  .landing-right .curatorial-scroll{
    height: auto;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: auto;
    touch-action: auto;
    padding: 8px 10px;
    padding-bottom: 0;
  }

  /* CTA stays in normal document flow and becomes sticky above footer */
  .landing.landing--expanded #cExplore{
    position: sticky;
    bottom: calc(86px + env(safe-area-inset-bottom));
    align-self: center;
    margin: 16px auto 24px;
    z-index: 60;

    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 500ms ease, transform 500ms ease;
  }

  .landing.landing--expanded.landing--cta #cExplore{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}
/* Mobile behavior:
   - shrink the seal on expand
   - make text area scroll if too tall
   - show GET STARTED only after JS adds .landing--cta */

   /* Top-center logos (similar to menuNav but centered) */
.top-center-logos{
  /* position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%); */
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
  z-index: 45; /* below menu, above canvas */

  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  padding: 10px;
}

.top-center-logos.is-chapter{
  position: static;
  top: 18px;
  left: 50%;
  transform: translateX(0%);
  display: flex;
  gap: 18px;
  align-items: center;
  z-index: 45; /* below menu, above canvas */

  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  padding: 10px;
}

.top-center-logos img{
  height: 28px;
  width: auto;
  display: block;
}

/* Show logos once exhibition starts */
.top-center-logos.is-visible{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 860px){
  .top-center-logos{
     position: fixed;
  /* top: 18px; */
  left: 50%;
  transform: translateX(-50%);
    top: 12px;
  }
  .top-center-logos img{
    height: 22px;
  }
}

/* ==============================
   Chapter Overlay – Sticky Header
   ============================== */

/* Support both ID + class (your CSS uses .chapter-overlay elsewhere) */
#chapterOverlay,
.chapter-overlay{
  --chapterHeaderH: 72px;
}

/* Make sure overlay scroll container doesn't create unexpected stacking issues */
#chapterOverlay,
.chapter-overlay{
  position: fixed;
  inset: 0;
}

/* Sticky white header inside the overlay */
#chapterOverlay .chapter-header,
.chapter-overlay .chapter-header{
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 20000; /* above chapter content */
  height: var(--chapterHeaderH);

  /* Make the white bar impossible to miss */
  background-color: #fff !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;

  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,0.12);

  /* Stronger visual separation */
  box-shadow:
    0 0 0 9999px rgba(255,255,255,1) inset,
    0 10px 28px rgba(0,0,0,0.12);
}

#chapterOverlay .chapter-header__center,
.chapter-overlay .chapter-header__center{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none; /* logos are visual only */
}

#chapterOverlay .chapter-header__center img,
.chapter-overlay .chapter-header__center img{
  max-height: 34px;
  width: auto;
  height: auto;
  display: block;
}

#chapterOverlay .chapter-header__right,
.chapter-overlay .chapter-header__right{
  position: absolute;
  right: 14px;
  /* top: 0; */
  height: var(--chapterHeaderH);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Safety: ensure the header itself always receives pointer events */
#chapterOverlay .chapter-header,
.chapter-overlay .chapter-header{
  pointer-events: auto;
}

/* Ensure chapter content doesn't overlap/paint above header */
#chapterOverlay #chapterContent,
.chapter-overlay #chapterContent,
.chapter-overlay .chapter-content,
#chapterOverlay .chapter-content{
  position: relative;
  z-index: 1;
}
/* # =====================
#    Image lightbox modal
#    (used by script.js)
#    ===================== # */

/* Make artwork images feel clickable */
.chapter-content .art-1-art,
.chapter-content .art-2-art,
.chapter-content .art-3-art,
.chapter-content .art-4-thumb,
.chapter-content .art-4-hero{
  cursor: zoom-in;
}

.image-modal{
  position: fixed;
  inset: 0;
  z-index: 30000; /* above chapter header + overlay */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  padding: 28px;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: zoom-out;
}

.image-modal.is-open{
  display: flex;
}

.image-modal__panel{
  position: relative;
  width: min(1200px, 92vw);
  height: min(720px, 86vh);
  background: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.image-modal__close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #111;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.image-modal__close:hover{
  background: rgba(255,255,255,1);
}

.image-modal__close:focus-visible{
  outline: 3px solid rgba(27,58,120,0.35);
  outline-offset: 3px;
}

@media (max-width: 860px){
  .image-modal{ padding: 16px; }
  .image-modal__panel{
    width: 94vw;
    height: 84vh;
  }
}