/* ═══════════════════════════════════════════════════════════════
   Museum of Curiosities - Amisha Yadav
   Static conversion of the Next.js portfolio
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   FONTS - bundled locally in /fonts (self-contained, works offline).
   Restaglick → display headings   (drop the licensed .woff2 in /fonts;
                                     falls back to Cormorant Garamond)
   Inter      → body + labels       (free / OFL, bundled)
   ═══════════════════════════════════════════════════════════════ */
@font-face { /* Restaglick - display face (single weight; reused for 400 & 700) */
  font-family: 'Restaglick'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/restaglick.ttf') format('truetype');
}
@font-face {
  font-family: 'Restaglick'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/restaglick.ttf') format('truetype');
}
@font-face { /* Cormorant Garamond - free fallback for the display headings */
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fonts/CormorantGaramond-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('fonts/CormorantGaramond-Italic.woff2') format('woff2');
}
@font-face { /* Inter - free body + labels */
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-Italic.woff2') format('woff2');
}

:root {
  --oxblood: #3A0F18;
  --burgundy: #5A1E2B;
  --charcoal: #121212;
  --walnut: #2B1D16;
  --gold: #B88A44;
  --bronze: #7A5A32;
  --ivory: #E8DCCB;
  --copper: #9A5B3D;
  /* ── Typography ───────────────────────────────────────────────
     Restaglick = display headings (free fallback: Cormorant Garamond)
     Inter      = body copy AND the archival labels
     Editorial tracking: headings 0, body slightly tight (-0.02em). */
  --serif: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;  /* headings — Inter */
  --sans:  'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;  /* body */
  --mono:  'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;  /* labels */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--charcoal);
  color: var(--ivory);
  font-family: var(--sans);
  letter-spacing: -0.04em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.accent-burgundy { color: var(--burgundy); }
.accent-gold { color: var(--gold); }

/* ── Global noise overlay ───────────────────────────────────── */
.global-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 300;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ── Shared museum plaque ───────────────────────────────────── */
.plaque { border-left: 2px solid var(--bronze); padding-left: 12px; }
.plaque--light { border-left-color: var(--gold); }
.plaque-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(122, 90, 50, 0.73); margin-bottom: 2px;
}
.plaque--light .plaque-label { color: rgba(184, 138, 68, 0.8); }
.plaque-value { font-family: var(--mono); font-size: 12px; color: var(--walnut); letter-spacing: 0.05em; }
.plaque--light .plaque-value { color: var(--ivory); }

/* ── Room label ─────────────────────────────────────────────── */
.room-label { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.room-rule { width: 32px; height: 1px; background: var(--bronze); }
.room-label--light .room-rule { background: var(--gold); }
.room-label p {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--bronze);
}
.room-label--light p { color: var(--gold); }

/* ── Exhibit light ──────────────────────────────────────────── */
.exhibit-light {
  pointer-events: none; position: absolute; left: 0; right: 0; top: 0; height: 200px;
}
.el-08 { background: radial-gradient(ellipse 60% 200px at 50% 0%, rgba(184,138,68,0.08) 0%, transparent 100%); }
.el-10 { background: radial-gradient(ellipse 60% 200px at 50% 0%, rgba(184,138,68,0.10) 0%, transparent 100%); }
.el-12 { background: radial-gradient(ellipse 60% 200px at 50% 0%, rgba(184,138,68,0.12) 0%, transparent 100%); }

/* ── Headings ───────────────────────────────────────────────── */
.h2 {
  font-family: var(--serif); font-weight: 700; color: var(--ivory);
  line-height: 1.05; font-size: clamp(40px, 5vw, 68px);
}

/* ═══════════════════════════════════════════════════════════════
   TICKET INTRO
   ═══════════════════════════════════════════════════════════════ */
.ticket-screen {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: var(--charcoal);
  transition: opacity 0.8s ease;
}
.ticket-screen.fade-out { opacity: 0; pointer-events: none; }
.ticket-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}
.ticket-card {
  position: relative; width: 100%; max-width: 480px; background: var(--ivory);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  clip-path: polygon(0 0, 100% 0, 100% 18%, 97% 22%, 100% 26%, 100% 100%, 0 100%, 0 26%, 3% 22%, 0 18%);
  transform: scale(0.88) translateY(30px) rotate(-1.5deg); opacity: 0;
  animation: ticket-in 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes ticket-in { to { transform: scale(1) translateY(0) rotate(-1.5deg); opacity: 1; } }
.ticket-card.accepted { animation: ticket-straighten 0.9s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes ticket-straighten { to { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; } }
.ticket-stripe { height: 6px; background: var(--burgundy); width: 100%; }
.ticket-body { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.ticket-perf { border-top: 2px dashed rgba(43,29,22,0.2); margin-bottom: 4px; }
.ticket-header { display: flex; justify-content: space-between; align-items: flex-start; }
.ticket-eyebrow {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(43,29,22,0.6); margin-bottom: 6px;
}
.ticket-title { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--charcoal); line-height: 1.1; }
.ticket-number {
  font-family: var(--mono); font-size: 10px; color: var(--walnut);
  border: 1px solid rgba(43,29,22,0.27); padding: 4px 8px; letter-spacing: 0.1em;
}
.ticket-divider { border-top: 1px solid rgba(43,29,22,0.13); }
.ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ticket-tagline {
  font-family: var(--serif); font-size: 15px; font-style: italic;
  color: rgba(43,29,22,0.8); line-height: 1.6;
}
.ticket-status-row {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; border-top: 1px solid rgba(43,29,22,0.13);
}
.ticket-status-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  color: rgba(43,29,22,0.53); text-transform: uppercase; margin-bottom: 4px;
}
.ticket-status-value { font-family: var(--mono); font-size: 13px; color: #2D6A4F; letter-spacing: 0.1em; font-weight: 600; }
.ticket-btn {
  display: flex; align-items: center; gap: 8px; position: relative; overflow: hidden;
  background: var(--charcoal); color: var(--ivory); padding: 10px 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: transform 0.15s ease;
}
.ticket-btn:hover { transform: scale(1.04); }
.ticket-btn:active { transform: scale(0.96); }
.ticket-btn span { position: relative; z-index: 10; }
.ticket-stamp {
  position: absolute; top: 50%; right: 48px; transform: translateY(-50%) scale(2.5) rotate(-25deg);
  opacity: 0; pointer-events: none;
}
.ticket-stamp.show { animation: stamp-in 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes stamp-in { to { transform: translateY(-50%) scale(1) rotate(-18deg); opacity: 0.9; } }
.ticket-stamp-inner {
  border: 4px solid var(--burgundy); color: var(--burgundy); font-family: var(--mono);
  font-size: 28px; font-weight: 900; padding: 6px 14px; transform: rotate(-18deg); letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════
   MUSEUM GATES
   ═══════════════════════════════════════════════════════════════ */
.gates-screen { position: fixed; inset: 0; z-index: 50; display: flex; }
.gate {
  width: 50%; height: 100%; display: flex; align-items: center; position: relative;
  overflow: hidden; background: var(--charcoal);
}
.gate--left { justify-content: flex-end; border-right: 1px solid rgba(184,138,68,0.13); }
.gate--right { justify-content: flex-start; border-left: 1px solid rgba(184,138,68,0.13); }
.gates-open .gate--left { animation: gate-left 2s cubic-bezier(0.77,0,0.175,1) 0.8s forwards; }
.gates-open .gate--right { animation: gate-right 2s cubic-bezier(0.77,0,0.175,1) 0.8s forwards; }
@keyframes gate-left { to { transform: translateX(-100%); } }
@keyframes gate-right { to { transform: translateX(100%); } }
.gate-texture { position: absolute; inset: 0; pointer-events: none; }
.gate-texture--left { background: radial-gradient(ellipse at 80% 50%, rgba(90,30,43,0.09) 0%, transparent 70%); }
.gate-texture--right { background: radial-gradient(ellipse at 20% 50%, rgba(90,30,43,0.09) 0%, transparent 70%); }
.gate-ornament {
  position: absolute; top: 50%; transform: translateY(-50%); width: 2px; height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(184,138,68,0.4), transparent);
}
.gate-ornament--left { right: 0; }
.gate-ornament--right { left: 0; }
.gate-ghost {
  font-family: var(--serif); font-size: clamp(60px,12vw,160px); color: rgba(232,220,203,0.016);
  font-weight: 700; user-select: none; position: absolute; white-space: nowrap;
}
.gate-ghost--left { right: -10%; }
.gate-ghost--right { left: -10%; }
.gate-entry {
  font-family: var(--mono); font-size: 10px; color: rgba(184,138,68,0.4); letter-spacing: 0.3em;
  text-transform: uppercase; position: absolute; bottom: 40px; writing-mode: vertical-rl;
}
.gate-entry--left { right: 40px; }
.gate-entry--right { left: 40px; }
.gate-center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; animation: gate-center-out 0.6s ease 0.5s forwards;
}
@keyframes gate-center-out { to { opacity: 0; transform: scale(0.8); } }
.gate-center p {
  font-family: var(--mono); font-size: 11px; color: rgba(232,220,203,0.53);
  letter-spacing: 0.4em; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════ */
.hall { position: relative; min-height: 100vh; background: var(--charcoal); animation: fade-in 0.6s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex;
  justify-content: space-between; align-items: center; padding: 20px 32px;
  transition: background 0.5s, backdrop-filter 0.5s, border-color 0.5s;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  background: rgba(18,18,18,0.88); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(232,220,203,0.04);
}
.nav-logo { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ivory); }
.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-links a:not(.nav-contact) {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(232,220,203,0.6); transition: color 0.2s;
}
.nav-links a:not(.nav-contact):hover { color: var(--gold); }
.nav-contact {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ivory); background: var(--burgundy); padding: 8px 16px;
}
@media (max-width: 767px) { .nav-links { display: none; } }

/* ── Floating contact ───────────────────────────────────────── */
.floating-contact {
  position: fixed; bottom: 32px; right: 32px; z-index: 80; display: flex; align-items: center; gap: 8px;
  background: var(--burgundy); color: var(--ivory); padding: 12px 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  box-shadow: 0 8px 32px rgba(90,30,43,0.4); transition: transform 0.2s;
  opacity: 0; animation: fade-up 0.6s ease 1s forwards;
}
.floating-contact:hover { transform: scale(1.05); }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT HELPERS
   ═══════════════════════════════════════════════════════════════ */
.section { position: relative; padding: 112px 32px; }
.container { position: relative; z-index: 10; margin: 0 auto; }
.container--xl { max-width: 1280px; }
.container--md { max-width: 896px; }
@media (min-width: 768px) { .section { padding-left: 80px; padding-right: 80px; } }

.bg-walnut, .bg-charcoal, .bg-oxblood, .bg-about, .bg-curator, .bg-contact {
  position: absolute; inset: 0;
}
.bg-walnut { background: var(--walnut); }
.bg-charcoal { background: var(--charcoal); }
.bg-oxblood { background: var(--oxblood); }
.bg-about { background: linear-gradient(180deg, var(--charcoal) 0%, rgba(58,15,24,0.27) 50%, var(--charcoal) 100%); }
.bg-curator { background: linear-gradient(180deg, var(--charcoal) 0%, rgba(58,15,24,0.2) 60%, var(--charcoal) 100%); }
.bg-contact { background: linear-gradient(180deg, var(--charcoal) 0%, var(--walnut) 100%); }

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden; padding: 128px 32px 96px;
}
@media (min-width: 768px) { .hero { padding-left: 80px; padding-right: 80px; } }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(180deg, var(--walnut) 0%, var(--charcoal) 100%); }
.hero-arch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none;
  width: 70vw; height: 90vh; border: 1px solid rgba(184,138,68,0.04); border-top: none;
  border-radius: 0 0 50% 50%;
}
.hero-spotlight {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 20%, rgba(184,138,68,0.06) 0%, transparent 70%);
}
.hero-roomtag {
  position: absolute; top: 100px; right: 40px; font-family: var(--mono); font-size: 9px;
  color: rgba(184,138,68,0.33); letter-spacing: 0.3em; text-transform: uppercase; writing-mode: vertical-rl;
}
.hero-inner { position: relative; z-index: 10; max-width: 1152px; margin: 0 auto; width: 100%; }
.hero-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.hero-rule { width: 48px; height: 1px; background: var(--gold); }
.hero-eyebrow p {
  font-family: var(--mono); font-size: 10px; color: var(--gold);
  letter-spacing: 0.3em; text-transform: uppercase;
}
.hero-title {
  font-family: var(--serif); font-size: clamp(52px,8vw,120px); font-weight: 700;
  color: var(--ivory); line-height: 0.92; margin-bottom: 32px;
}
.hero-sub {
  font-size: clamp(17px,2vw,22px); color: rgba(232,220,203,0.6);
  max-width: 560px; line-height: 1.65; margin-bottom: 52px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.btn-primary {
  display: flex; align-items: center; gap: 12px; background: var(--burgundy); color: var(--ivory);
  padding: 14px 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; transition: transform 0.15s;
}
.btn-primary:hover { transform: scale(1.03); }
.btn-primary:active { transform: scale(0.97); }
.hero-link {
  font-family: var(--mono); font-size: 10px; color: rgba(232,220,203,0.4);
  letter-spacing: 0.15em; text-transform: uppercase;
}
.hero-scroll {
  position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
  color: rgba(184,138,68,0.33); animation: bob 2.5s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ═══════════════════════════════════════════════════════════════
   ROOM 01 - ABOUT
   ═══════════════════════════════════════════════════════════════ */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 80px; align-items: center; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.about-grid .h2 { line-height: 1.05; margin-bottom: 40px; }
.about-body { display: flex; flex-direction: column; gap: 24px; font-size: 18px; line-height: 1.8; color: rgba(232,220,203,0.8); margin-bottom: 40px; }
.tags { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 16px; }
.tags span {
  border: 1px solid rgba(184,138,68,0.27); color: rgba(184,138,68,0.8); padding: 6px 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
}
.about-portrait-wrap { position: relative; }
.portrait-frame {
  border: 10px solid var(--walnut);
  box-shadow: 0 0 0 1px rgba(184,138,68,0.2), 0 40px 80px rgba(0,0,0,0.6); overflow: hidden;
}
.portrait-img { width: 100%; object-fit: cover; aspect-ratio: 4/5; display: block; filter: contrast(1.1) sepia(0.2); }
.quote-card {
  position: absolute; bottom: -32px; right: -32px; padding: 32px; background: var(--burgundy);
  max-width: 260px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
@media (max-width: 767px) { .quote-card { display: none; } }
.quote-text { font-family: var(--serif); font-size: 18px; color: var(--ivory); font-style: italic; line-height: 1.5; }
.quote-author {
  font-family: var(--mono); font-size: 9px; color: rgba(232,220,203,0.4);
  letter-spacing: 0.2em; text-transform: uppercase; margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   ROOM 02 - JOURNEY
   ═══════════════════════════════════════════════════════════════ */
.section--journey { overflow: hidden; }
.mb-journey { font-size: clamp(36px,4vw,56px); margin-bottom: 64px; line-height: 1.1; }
.timeline { position: relative; }
.timeline-line {
  position: absolute; left: 72px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, rgba(184,138,68,0.27), rgba(184,138,68,0.07)); display: none;
}
@media (min-width: 768px) { .timeline-line { display: block; } }
.journey-step { display: flex; gap: 32px; align-items: flex-start; padding-bottom: 40px; position: relative; }
@media (min-width: 768px) { .journey-step { gap: 64px; } }
.journey-year-col { width: 72px; flex-shrink: 0; padding-top: 4px; display: flex; flex-direction: column; align-items: flex-end; }
.journey-year { font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing: 0.05em; }
.journey-node {
  margin-top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze);
  border: 1px solid rgba(184,138,68,0.4); margin-right: -4px; position: relative; z-index: 10; display: none;
}
@media (min-width: 768px) { .journey-node { display: block; } }
.journey-step.current .journey-node { background: var(--gold); }
.journey-content {
  flex: 1; padding: 24px; transition: transform 0.3s; background: rgba(18,18,18,0.53);
  border-left: 2px solid rgba(122,90,50,0.27);
}
.journey-step:hover .journey-content { transform: translateX(8px); }
.journey-step.current .journey-content { background: rgba(90,30,43,0.27); border-left-color: rgba(184,138,68,0.27); }
.journey-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.journey-role { font-family: var(--serif); font-size: 22px; color: var(--ivory); font-weight: 700; }
.journey-org { font-family: var(--mono); font-size: 10px; color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; }
.journey-current-tag {
  font-family: var(--mono); font-size: 9px; color: var(--gold); border: 1px solid rgba(184,138,68,0.33);
  padding: 4px 10px; letter-spacing: 0.15em; text-transform: uppercase; flex-shrink: 0;
}
.journey-note { font-size: 16px; color: rgba(232,220,203,0.53); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   ROOM 03 - CURATOR
   ═══════════════════════════════════════════════════════════════ */
.curator-grid { display: grid; grid-template-columns: 1fr; gap: 80px; }
@media (min-width: 1024px) { .curator-grid { grid-template-columns: 1fr 1fr; } }
.curator-left { display: flex; flex-direction: column; gap: 64px; }
.mb-28 { margin-bottom: 28px; }
.curator-left .h2 { font-size: clamp(36px,4vw,60px); }
.curator-bio { font-size: 18px; color: rgba(232,220,203,0.8); line-height: 1.75; }
.philosophy { padding: 32px; background: rgba(90,30,43,0.13); border-left: 3px solid var(--burgundy); }
.philosophy-label { font-family: var(--mono); font-size: 9px; color: var(--gold); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 12px; }
.philosophy-quote { font-family: var(--serif); font-size: 22px; color: var(--ivory); font-style: italic; line-height: 1.5; }
.curator-sublabel { font-family: var(--mono); font-size: 9px; color: var(--gold); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 20px; }
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skill-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid rgba(232,220,203,0.07); }
.skill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); flex-shrink: 0; }
.skill-item span { font-family: var(--mono); font-size: 11px; color: rgba(232,220,203,0.8); letter-spacing: 0.05em; }
.curator-right { display: flex; flex-direction: column; gap: 32px; }
.award {
  position: relative; overflow: hidden; background: var(--walnut);
  border: 1px solid rgba(184,138,68,0.13); padding: 24px 28px;
}
.award-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, rgba(184,138,68,0.6), transparent); }
.award-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.award-title { font-family: var(--serif); font-size: 20px; color: var(--ivory); font-weight: 700; margin-bottom: 6px; }
.award-org { font-family: var(--mono); font-size: 10px; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.award-project { font-family: var(--mono); font-size: 10px; color: rgba(232,220,203,0.33); letter-spacing: 0.05em; }
.award-year { font-family: var(--mono); font-size: 11px; color: rgba(184,138,68,0.6); letter-spacing: 0.1em; flex-shrink: 0; }
.featured-note { padding: 24px; border: 1px dashed rgba(184,138,68,0.13); }
.featured-note p { font-family: var(--mono); font-size: 10px; color: rgba(232,220,203,0.33); letter-spacing: 0.1em; line-height: 1.8; }

/* ═══════════════════════════════════════════════════════════════
   ROOM 04 - EXHIBITS
   ═══════════════════════════════════════════════════════════════ */
.exhibits-texture {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(232,220,203,0.012) 0px, rgba(232,220,203,0.012) 1px, transparent 1px, transparent 80px);
}
.exhibits-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 80px; }
@media (min-width: 768px) { .exhibits-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.exhibits-head .h2 { font-size: clamp(40px,5vw,68px); }
.exhibits-intro { font-family: var(--mono); font-size: 11px; color: rgba(232,220,203,0.33); letter-spacing: 0.1em; max-width: 280px; line-height: 1.7; }
.exhibit-grid { display: grid; grid-template-columns: 1fr; column-gap: 48px; row-gap: 96px; }
@media (min-width: 768px) { .exhibit-grid { grid-template-columns: 1fr 1fr; } .exhibit-card:nth-child(even) { margin-top: 96px; } }
.exhibit-card { cursor: pointer; }
.exhibit-frame-wrap { position: relative; }
.exhibit-spotlight {
  position: absolute; top: -48px; left: 50%; transform: translateX(-50%); pointer-events: none;
  width: 200px; height: 100px; background: radial-gradient(ellipse at 50% 0%, rgba(184,138,68,0.09) 0%, transparent 80%);
}
.exhibit-frame {
  position: relative; overflow: hidden; border: 8px solid var(--walnut);
  box-shadow: 0 0 0 1px rgba(184,138,68,0.13), 0 30px 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(232,220,203,0.024);
}
.exhibit-img { width: 100%; object-fit: cover; aspect-ratio: 4/5; display: block; filter: contrast(1.05) saturate(0.9); transition: transform 1.2s; }
.exhibit-card:hover .exhibit-img { transform: scale(1.05); }
.exhibit-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.5s; background: rgba(58,15,24,0.53); backdrop-filter: blur(2px);
}
.exhibit-card:hover .exhibit-overlay { opacity: 1; }
.exhibit-inspect {
  display: flex; align-items: center; gap: 12px; border: 1px solid rgba(184,138,68,0.4);
  color: var(--ivory); padding: 14px 24px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.exhibit-inspect svg { color: var(--gold); }
.exhibit-label { margin-top: 24px; padding: 20px; background: var(--walnut); border-top: 2px solid rgba(184,138,68,0.33); }
.exhibit-label-head { display: flex; justify-content: space-between; align-items: flex-start; }
.exhibit-label-id { font-family: var(--mono); font-size: 9px; color: var(--gold); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 4px; }
.exhibit-label-title { font-family: var(--serif); font-size: 26px; color: var(--ivory); font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.exhibit-label-meta { font-family: var(--mono); font-size: 10px; color: rgba(232,220,203,0.33); letter-spacing: 0.05em; }
.exhibit-label-arrow { color: var(--gold); opacity: 0; transition: opacity 0.3s; }
.exhibit-card:hover .exhibit-label-arrow { opacity: 1; }
.exhibit-label-note { margin-top: 12px; font-family: var(--mono); font-size: 9px; color: rgba(232,220,203,0.27); letter-spacing: 0.08em; }

/* ═══════════════════════════════════════════════════════════════
   ROOM 05 - ARCHIVES
   ═══════════════════════════════════════════════════════════════ */
.archives-texture {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(232,220,203,0.012) 0px, rgba(232,220,203,0.012) 1px, transparent 1px, transparent 40px);
}
.archives-head { display: flex; flex-direction: column; gap: 32px; margin-bottom: 80px; }
@media (min-width: 768px) { .archives-head { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.archives-head .h2 { font-size: clamp(38px,4.5vw,62px); }
.archives-intro { font-size: 17px; color: rgba(232,220,203,0.4); max-width: 360px; line-height: 1.7; }
.archive-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .archive-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .archive-grid { grid-template-columns: 1fr 1fr 1fr; } }
.archive-card {
  border: 1px solid rgba(232,220,203,0.09); padding: 32px; background: rgba(18,18,18,0.27);
  backdrop-filter: blur(4px); transition: background 0.3s, transform 0.3s; cursor: pointer;
}
.archive-card:hover { background: rgba(90,30,43,0.27); transform: translateY(-8px); }
.archive-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.archive-index { font-family: var(--mono); font-size: 9px; color: rgba(232,220,203,0.27); letter-spacing: 0.2em; text-transform: uppercase; }
.archive-year { font-family: var(--mono); font-size: 9px; color: rgba(184,138,68,0.53); letter-spacing: 0.1em; }
.archive-rule { width: 32px; height: 1px; background: rgba(184,138,68,0.33); margin-bottom: 20px; }
.archive-title { font-family: var(--serif); font-size: 22px; color: var(--ivory); font-weight: 700; margin-bottom: 8px; line-height: 1.2; }
.archive-type { font-family: var(--mono); font-size: 9px; color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; }
.archive-desc { font-size: 14px; color: rgba(232,220,203,0.47); line-height: 1.6; }
.archive-icon { display: flex; justify-content: flex-end; margin-top: 24px; color: rgba(232,220,203,0.13); transition: color 0.3s; }
.archive-card:hover .archive-icon { color: rgba(184,138,68,0.6); }

/* ═══════════════════════════════════════════════════════════════
   ROOM 06 - CONTACT
   ═══════════════════════════════════════════════════════════════ */
.contact-head { text-align: center; margin-bottom: 64px; }
.contact-head .h2 { font-size: clamp(38px,5vw,70px); margin-bottom: 20px; }
.contact-sub { font-size: 18px; color: rgba(232,220,203,0.47); line-height: 1.7; max-width: 480px; margin: 0 auto; }
.guestbook {
  padding: 40px; background: var(--charcoal); border: 1px solid rgba(184,138,68,0.13);
  box-shadow: 0 40px 80px rgba(0,0,0,0.4); display: flex; flex-direction: column; gap: 32px;
}
@media (min-width: 768px) { .guestbook { padding: 56px; } }
.guestbook-deco { border-top: 2px solid rgba(184,138,68,0.33); padding-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.guestbook-vol { font-family: var(--mono); font-size: 9px; color: rgba(184,138,68,0.53); letter-spacing: 0.3em; text-transform: uppercase; }
.guestbook-date { font-family: var(--mono); font-size: 9px; color: rgba(232,220,203,0.2); letter-spacing: 0.1em; }
.field-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 12px; }
.field label { font-family: var(--mono); font-size: 9px; color: rgba(232,220,203,0.33); letter-spacing: 0.2em; text-transform: uppercase; }
.field input, .field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(232,220,203,0.13);
  padding-bottom: 10px; font-family: var(--sans); font-size: 16px; color: var(--ivory); resize: none;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(232,220,203,0.3); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: rgba(184,138,68,0.5); }
.btn-submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--burgundy); color: var(--ivory); padding: 18px; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; transition: transform 0.15s;
}
.btn-submit:hover { transform: scale(1.02); }
.btn-submit:active { transform: scale(0.98); }
.socials { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 80px; }
.socials-rule { width: 1px; height: 40px; background: rgba(184,138,68,0.27); }
.socials-label { font-family: var(--mono); font-size: 9px; color: rgba(232,220,203,0.27); letter-spacing: 0.3em; text-transform: uppercase; }
.socials-links { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; }
.socials-links a { font-family: var(--serif); font-size: 18px; color: rgba(232,220,203,0.53); transition: color 0.2s; }
.socials-links a:hover { color: var(--gold); }

/* ── Footer ─────────────────────────────────────────────────── */
.footer { padding: 40px 32px; text-align: center; border-top: 1px solid rgba(232,220,203,0.03); }
.footer-inner { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 16px; max-width: 1280px; margin: 0 auto; }
@media (min-width: 768px) { .footer-inner { flex-direction: row; } }
.footer-logo { font-family: var(--serif); font-size: 20px; font-weight: 700; color: rgba(232,220,203,0.33); }
.footer-copy { font-family: var(--mono); font-size: 9px; color: rgba(232,220,203,0.2); letter-spacing: 0.4em; text-transform: uppercase; }
.footer-studio { font-family: var(--mono); font-size: 9px; color: rgba(184,138,68,0.33); letter-spacing: 0.15em; }

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.casestudy { position: fixed; inset: 0; z-index: 110; overflow-y: auto; background: var(--charcoal); animation: fade-in 0.3s ease; }
.casestudy .exhibit-light { z-index: 1; }
.cs-layout { min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .cs-layout { flex-direction: row; } }
.cs-painting {
  width: 100%; display: flex; align-items: center; justify-content: center; padding: 32px;
  position: relative; z-index: 20; background: var(--walnut); box-shadow: 20px 0 60px rgba(0,0,0,0.6);
}
@media (min-width: 1024px) {
  .cs-painting { width: 45%; height: 100vh; position: sticky; top: 0; padding: 64px; }
}
.cs-painting-inner { position: relative; width: 100%; max-width: 420px; }
.cs-spotlight {
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%); pointer-events: none;
  width: 300px; height: 200px; background: radial-gradient(ellipse at 50% 0%, rgba(184,138,68,0.13) 0%, transparent 70%);
}
.cs-frame {
  border: 12px solid var(--oxblood); overflow: hidden;
  box-shadow: 0 0 0 2px rgba(184,138,68,0.27), inset 0 0 0 1px rgba(184,138,68,0.13), 0 30px 80px rgba(0,0,0,0.7);
}
.cs-frame img { width: 100%; object-fit: cover; aspect-ratio: 4/5; display: block; }
.cs-plaque { margin-top: 24px; padding: 16px; background: var(--oxblood); border-top: 2px solid rgba(184,138,68,0.4); }
.cs-plaque-id { font-family: var(--mono); font-size: 9px; color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px; }
.cs-plaque-title { font-family: var(--serif); font-size: 22px; color: var(--ivory); font-weight: 700; }
.cs-plaque-note { font-family: var(--mono); font-size: 10px; color: rgba(232,220,203,0.4); margin-top: 4px; letter-spacing: 0.05em; }
.cs-content { width: 100%; padding: 64px 32px; color: var(--ivory); }
@media (min-width: 1024px) { .cs-content { width: 55%; padding: 64px 80px; } }
.cs-inner { max-width: 672px; margin: 0 auto; }
.cs-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 64px; }
.cs-eyebrow { font-family: var(--mono); font-size: 10px; color: var(--gold); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 12px; }
.cs-title { font-family: var(--serif); font-size: clamp(36px,5vw,60px); font-weight: 700; color: var(--ivory); line-height: 1.05; }
.cs-close {
  display: flex; align-items: center; gap: 8px; border: 1px solid rgba(232,220,203,0.13);
  color: var(--ivory); padding: 10px 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; transition: opacity 0.2s; flex-shrink: 0;
}
.cs-close:hover { opacity: 0.6; }
.cs-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0; margin-bottom: 64px; border-top: 1px solid rgba(232,220,203,0.07); border-bottom: 1px solid rgba(232,220,203,0.07); }
@media (min-width: 768px) { .cs-meta { grid-template-columns: repeat(4, 1fr); } }
.cs-section { margin-bottom: 48px; }
.cs-section h3 { font-family: var(--serif); font-size: 28px; color: var(--gold); margin-bottom: 16px; }
.cs-section p { font-size: 17px; line-height: 1.75; color: rgba(232,220,203,0.8); }
.cs-process-divider { margin: 48px 0; border-top: 1px solid rgba(232,220,203,0.07); }
.cs-process-divider p { font-family: var(--mono); font-size: 9px; color: var(--gold); letter-spacing: 0.3em; text-transform: uppercase; margin-top: 12px; }
.cs-outcomes { margin-bottom: 80px; }
.cs-outcomes h3 { font-family: var(--serif); font-size: 28px; color: var(--gold); margin-bottom: 20px; }
.cs-outcome { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.cs-outcome-num { font-family: var(--mono); font-size: 9px; color: var(--gold); margin-top: 6px; letter-spacing: 0.1em; }
.cs-outcome p { font-size: 17px; line-height: 1.6; color: rgba(232,220,203,0.8); }
.cs-more { padding: 64px 0; border-top: 1px solid rgba(232,220,203,0.07); }
.cs-more-eyebrow { font-family: var(--mono); font-size: 10px; color: var(--gold); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 28px; }
.cs-more-title { font-family: var(--serif); font-size: 32px; color: var(--ivory); margin-bottom: 28px; }
.cs-more-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .cs-more-grid { grid-template-columns: 1fr 1fr 1fr; } }
.cs-more-card { cursor: pointer; }
.cs-more-frame { border: 6px solid var(--walnut); box-shadow: 0 0 0 1px rgba(184,138,68,0.13); overflow: hidden; margin-bottom: 10px; }
.cs-more-frame img { width: 100%; object-fit: cover; aspect-ratio: 1; display: block; transition: transform 0.7s; }
.cs-more-card:hover .cs-more-frame img { transform: scale(1.05); }
.cs-more-card:hover { transform: translateY(-6px); transition: transform 0.3s; }
.cs-more-id { font-family: var(--mono); font-size: 9px; color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; }
.cs-more-name { font-family: var(--serif); font-size: 16px; color: var(--ivory); }
.cs-contact { padding: 64px 0; border-top: 1px solid rgba(232,220,203,0.07); }
.cs-contact h3 { font-family: var(--serif); font-size: 36px; color: var(--ivory); margin-bottom: 8px; }
.cs-contact-sub { font-size: 16px; color: rgba(232,220,203,0.47); margin-bottom: 28px; }
.cs-contact-link { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; transition: gap 0.2s; }
.cs-contact-link:hover { gap: 20px; }

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal--left { transform: translateX(-30px); }
.reveal--right { transform: translateX(30px); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MULTIPAGE - navigation, page chrome, directory
   ═══════════════════════════════════════════════════════════════ */

/* Navbar tweaks for multipage */
.nav-links a.active { color: var(--gold); }
.navbar--solid {
  background: rgba(18,18,18,0.88); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(232,220,203,0.04);
}
.nav-toggle {
  display: none; color: var(--ivory); padding: 6px;
}
@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; width: 78%; max-width: 320px;
    flex-direction: column; align-items: flex-start; gap: 28px;
    background: rgba(18,18,18,0.97); backdrop-filter: blur(24px);
    padding: 96px 32px 32px; z-index: 70;
    transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    border-left: 1px solid rgba(184,138,68,0.13);
  }
  .nav-links.open { transform: translateX(0); display: flex; }
  .nav-links a:not(.nav-contact) { font-size: 12px; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 65;
    opacity: 0; pointer-events: none; transition: opacity 0.4s;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* Inner-page main wrapper - clears the fixed navbar */
.page { position: relative; min-height: 100vh; }

/* Page intro header band (room label + title) */
.page-head { position: relative; padding: 152px 32px 0; }
@media (min-width: 768px) { .page-head { padding-left: 80px; padding-right: 80px; } }
.page-head-inner { position: relative; z-index: 10; max-width: 1280px; margin: 0 auto; }
.page-kicker {
  font-family: var(--mono); font-size: 10px; color: var(--gold);
  letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 16px;
}
.page-title {
  font-family: var(--serif); font-size: clamp(44px,7vw,96px); font-weight: 700;
  color: var(--ivory); line-height: 0.95;
}

/* Section top padding so first section clears fixed navbar */
.page > .section:first-child { padding-top: 144px; }

/* ── Home hero CTA now links across pages (no change needed) ── */

/* ── Gallery Directory (home) ─────────────────────────────── */
.section--directory { position: relative; }
.directory-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(184,138,68,0.13); border: 1px solid rgba(184,138,68,0.13); }
@media (min-width: 768px) { .directory-grid { grid-template-columns: 1fr 1fr; } }
.dir-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 40px 36px; background: var(--charcoal); transition: background 0.3s; position: relative; overflow: hidden;
}
.dir-card:hover { background: rgba(90,30,43,0.27); }
.dir-card-num { font-family: var(--mono); font-size: 10px; color: var(--gold); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 10px; }
.dir-card-title { font-family: var(--serif); font-size: 30px; color: var(--ivory); font-weight: 700; line-height: 1.05; margin-bottom: 8px; }
.dir-card-desc { font-family: var(--mono); font-size: 10px; color: rgba(232,220,203,0.4); letter-spacing: 0.08em; line-height: 1.6; max-width: 320px; }
.dir-card-arrow { color: var(--gold); flex-shrink: 0; transition: transform 0.3s; }
.dir-card:hover .dir-card-arrow { transform: translate(4px,-4px); }

/* ── Project (case study) page wrapper ────────────────────── */
.project-page { position: relative; }
.cs-back {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(232,220,203,0.13);
  color: var(--ivory); padding: 10px 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; transition: opacity 0.2s; flex-shrink: 0; text-transform: uppercase;
}
.cs-back:hover { opacity: 0.6; }
.project-page .cs-painting { padding-top: 112px; }
@media (min-width: 1024px) { .project-page .cs-painting { padding-top: 64px; } }
.project-page .cs-content { padding-top: 112px; }

/* ═══════════════════════════════════════════════════════════════
   ITERATION 2 - atmosphere, materials, readability, motifs
   "An Indian Museum of Ideas, after closing hours."
   ═══════════════════════════════════════════════════════════════ */

/* ── Deeper contrast base ─────────────────────────────────────── */
body { background: #0D0D0D; }
.bg-charcoal { background: #0D0D0D; }

/* ── Readability: larger type, more breathing room ────────────── */
.section { padding-top: 132px; padding-bottom: 132px; }
.page > .section:first-child { padding-top: 164px; }
.h2 { font-size: clamp(44px, 5.6vw, 78px); letter-spacing: -0.04em; }
.about-body { font-size: 19px; line-height: 1.9; }
.about-body { gap: 26px; color: rgba(232,220,203,0.86); }
.curator-bio { font-size: 20px; line-height: 1.85; color: rgba(232,220,203,0.88); }
.hero-sub { font-size: clamp(19px, 2vw, 24px); line-height: 1.7; color: rgba(232,220,203,0.66); }
.exhibits-intro, .archives-intro { font-size: 16px; }
.philosophy-quote { font-size: 24px; line-height: 1.55; }
.section--exhibits .exhibit-label-title { font-size: 28px; }

/* Page title used inside section bodies */
.page-title-inline {
  font-family: var(--serif); font-weight: 700; color: var(--ivory);
  font-size: clamp(44px, 6vw, 86px); line-height: 0.98; letter-spacing: -0.015em;
  margin-bottom: 8px;
}

/* ── Materials & textures (subtle, never noisy) ───────────────── */
.tex-wall::after, .tex-walnut::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.tex-wall::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.32), transparent 16%, transparent 84%, rgba(0,0,0,0.42)),
    repeating-linear-gradient(90deg, rgba(232,220,203,0.016) 0 1px, transparent 1px 168px);
}
.tex-walnut::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.34), transparent 18%, transparent 82%, rgba(0,0,0,0.46)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(184,138,68,0.05), transparent 60%);
}

/* ── Signature motif: archival catalog tag ────────────────────── */
.catalog-tag {
  position: absolute; top: 28px; right: 26px; z-index: 11; writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(184,138,68,0.45); border-left: 1px solid rgba(184,138,68,0.28); padding: 12px 0 12px 9px;
}
@media (max-width: 980px) { .catalog-tag { display: none; } }

/* Wall plate label above framed displays */
.frame-plate {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 6; white-space: nowrap;
  background: var(--oxblood); color: var(--gold); font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 14px; border: 1px solid rgba(184,138,68,0.4);
}

/* ── Navbar: tighten for six links, keep translucent blur ─────── */
.nav-links { gap: 26px; }
@media (min-width: 768px) and (max-width: 1140px) {
  .nav-links { gap: 16px; }
  .nav-links a:not(.nav-contact) { font-size: 9px; letter-spacing: 0.12em; }
}
.navbar.scrolled { background: rgba(13,13,13,0.72); backdrop-filter: blur(22px) saturate(1.1); }

/* ═══ HERO - cinematic arrival ════════════════════════════════ */
.hero-title { line-height: 0.96; padding-bottom: 6px; }
.hero-spotlight {
  background: radial-gradient(ellipse 55% 62% at 50% 10%, rgba(184,138,68,0.16) 0%, transparent 66%);
}
.hero::after { /* warm floor glow + vignette for depth */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 80% 40% at 50% 108%, rgba(90,30,43,0.42), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.3), transparent 24%, transparent 70%, rgba(0,0,0,0.55));
}
.hero-arch { border-color: rgba(184,138,68,0.10); box-shadow: 0 0 120px rgba(184,138,68,0.04) inset; }
.hero-inner, .hero-scroll, .hero-roomtag { position: relative; z-index: 3; }

/* Floating dust motes */
.dust-field { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.dust {
  position: absolute; bottom: -12px; border-radius: 50%; background: rgba(232,220,203,0.85);
  filter: blur(0.4px); animation-name: dust-rise; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes dust-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(-105vh) translateX(var(--drift, 0)); opacity: 0; }
}

/* ═══ ROOM 01 - THE HUMAN ═════════════════════════════════════ */
.human-lead {
  font-family: var(--serif); font-style: italic; font-size: clamp(23px, 3vw, 36px);
  color: rgba(232,220,203,0.94); line-height: 1.38; max-width: 920px; margin: 6px 0 60px;
}
.human-closing {
  font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.6;
  color: var(--gold); margin-top: 6px;
}
.section--facets { position: relative; }
.facets-head { max-width: 720px; margin-bottom: 56px; }
.facets-intro { font-size: 18px; color: rgba(232,220,203,0.56); line-height: 1.7; margin-top: 16px; }
.facets-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: rgba(184,138,68,0.16); border: 1px solid rgba(184,138,68,0.16); position: relative; z-index: 10;
}
@media (min-width: 700px) { .facets-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .facets-grid { grid-template-columns: 1fr 1fr 1fr; } }
.facet { background: #0D0D0D; padding: 38px 32px; position: relative; transition: background 0.35s; }
.facet:hover { background: rgba(90,30,43,0.32); }
.facet-num { font-family: var(--mono); font-size: 15px; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 18px; }
.facet-label { font-family: var(--serif); font-size: 26px; color: var(--ivory); font-weight: 700; margin-bottom: 12px; }
.facet-body { font-size: 16px; line-height: 1.72; color: rgba(232,220,203,0.64); }

/* ═══ ROOM 02 - THE EXHIBITION ROUTE (railway map) ════════════ */
.route-header {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-end; margin: 8px 0 68px;
}
.route-subtitle { font-size: 18px; color: rgba(232,220,203,0.62); line-height: 1.7; max-width: 560px; margin-top: 18px; }
.route-ticket-stub {
  border: 1px dashed rgba(184,138,68,0.45); padding: 18px 24px; background: rgba(58,15,24,0.55); min-width: 210px;
  position: relative;
}
.route-ticket-stub::before, .route-ticket-stub::after {
  content: ''; position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--walnut);
}
.route-ticket-stub::before { left: -8px; transform: translateY(-50%); }
.route-ticket-stub::after { right: -8px; transform: translateY(-50%); }
.stub-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(184,138,68,0.75); margin-bottom: 8px; }
.stub-line { font-family: var(--serif); font-size: 22px; color: var(--ivory); }
.stub-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232,220,203,0.42); margin-top: 8px; }

.route { position: relative; }
.route-stop {
  display: grid; grid-template-columns: 28px 116px 1fr; gap: 0 28px; align-items: start;
}
.route-rail { position: relative; display: flex; justify-content: center; align-self: stretch; }
.route-rail::before {
  content: ''; position: absolute; top: 8px; bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 2px; background: linear-gradient(to bottom, rgba(184,138,68,0.5), rgba(184,138,68,0.16));
}
.route-stop:last-child .route-rail::before { bottom: auto; height: 44px; }
.route-node {
  position: relative; z-index: 2; width: 14px; height: 14px; border-radius: 50%;
  background: #0D0D0D; border: 2px solid var(--bronze); margin-top: 6px;
}
.route-stop.current .route-node { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 4px rgba(184,138,68,0.18); }
.route-node-pulse { position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(184,138,68,0.5); animation: route-pulse 2.6s ease-out infinite; }
@keyframes route-pulse { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } }
.route-platform { padding-top: 4px; }
@media (max-width: 760px) { .route-stop { grid-template-columns: 24px 1fr; } .route-platform { display: none; } }
.route-stopno { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(184,138,68,0.65); margin-bottom: 6px; }
.route-year { font-family: var(--serif); font-size: 26px; color: var(--ivory); }
.route-card {
  margin-bottom: 30px; padding: 22px 26px; background: rgba(18,18,18,0.6);
  border-left: 2px solid rgba(184,138,68,0.3); transition: transform 0.3s, background 0.3s;
}
.route-stop.current .route-card { background: rgba(90,30,43,0.34); border-left-color: var(--gold); }
.route-stop:hover .route-card { transform: translateX(6px); }
.route-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.route-station { font-family: var(--serif); font-size: 24px; color: var(--ivory); font-weight: 700; line-height: 1.1; }
.route-service { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-top: 5px; }
.route-now { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(184,138,68,0.5); padding: 4px 10px; white-space: nowrap; }
.route-ticket { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: rgba(232,220,203,0.35); border: 1px solid rgba(232,220,203,0.12); padding: 4px 8px; white-space: nowrap; }
.route-note { font-size: 16px; line-height: 1.7; color: rgba(232,220,203,0.62); }
.route-note + .route-note { margin-top: 12px; }

/* ═══ ROOM 03 - THE CURATOR (artifacts) ══════════════════════ */
.award {
  padding: 28px 30px; background: linear-gradient(180deg, var(--walnut), #20140F);
  border: 1px solid rgba(184,138,68,0.2); box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.award-title { font-size: 22px; }
.experience-list { display: flex; flex-direction: column; }
.exp-row {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; align-items: baseline;
  padding: 16px 2px; border-bottom: 1px solid rgba(232,220,203,0.08);
}
.exp-year { font-family: var(--mono); font-size: 12px; color: var(--gold); }
.exp-role { font-family: var(--serif); font-size: 19px; color: var(--ivory); }
.exp-org { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(232,220,203,0.5); text-align: right; }
.recognition-block { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(184,138,68,0.18); }
.recognition-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.rec-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(232,220,203,0.72); border: 1px solid rgba(184,138,68,0.28); padding: 8px 14px;
}

/* ═══ ROOM 04 - EXHIBITS (artifacts on a gallery wall) ═══════ */
.section--exhibits .exhibit-grid { row-gap: 120px; }
.exhibit-frame {
  border: 12px solid var(--walnut);
  box-shadow: 0 0 0 1px rgba(184,138,68,0.4), 0 44px 90px rgba(0,0,0,0.75), inset 0 0 0 4px rgba(13,13,13,0.7);
}
.exhibit-spotlight { width: 240px; height: 130px; background: radial-gradient(ellipse at 50% 0%, rgba(184,138,68,0.16) 0%, transparent 78%); }
.exhibit-label {
  background: linear-gradient(180deg, var(--walnut), #20140F); border-top: 2px solid var(--gold); padding: 22px;
}
.exhibit-card:hover .exhibit-frame { box-shadow: 0 0 0 1px rgba(184,138,68,0.6), 0 50px 100px rgba(0,0,0,0.8); }

/* ═══ PROJECT DETAIL - exhibition acts ═══════════════════════ */
.cs-section p { font-size: 19px; line-height: 1.85; color: rgba(232,220,203,0.84); }
.cs-section h3 { font-size: 30px; }
.cs-outcome p { font-size: 18px; }
.cs-act {
  display: flex; align-items: center; gap: 18px; margin: 56px 0 32px; padding-top: 22px;
  border-top: 1px solid rgba(184,138,68,0.22);
}
.cs-act-roman { font-family: var(--serif); font-size: 42px; color: rgba(184,138,68,0.5); line-height: 1; }
.cs-act p { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   ROUND 3 - museum environment, materials, contrast, frames, type
   ═══════════════════════════════════════════════════════════════ */

/* New tonal tokens for stronger contrast / Indian editorial warmth */
:root {
  --wine: #8A2E3E;          /* brighter signature burgundy for accents */
  --gold-dim: rgba(184,138,68,0.4);
  --ink: #1A1410;           /* near-black warm ink */
  --wall: #0F0C0A;          /* warm gallery-wall base */
}

body { background: var(--wall); letter-spacing: -0.02em; }

/* ── Typography: editorial tracking + line-height ─────────────── */
.h2, .hero-title, .page-title-inline, .ticket-title, .cs-title, .facet-label,
.route-station, .award-title, .exhibit-label-title, .dir-card-title, .archive-title,
.quote-text, .philosophy-quote, .human-lead, .human-closing, .route-year, .stub-line,
.cs-section h3, .cs-more-title, .cs-contact h3, .footer-logo, .nav-logo, .ticket-curator-name {
  letter-spacing: 0;
}
.hero-title, .h2, .page-title-inline, .cs-title, .ticket-title { line-height: 1.12; }
.facet-num, .room-watermark { letter-spacing: 0; }

/* Stronger reading contrast */
.about-body, .curator-bio { color: rgba(232,220,203,0.92); }
.cs-section p, .cs-outcome p, .route-note, .facet-body, .journey-note { color: rgba(232,220,203,0.86); }
.hero-sub { color: rgba(232,220,203,0.8); }
.accent-burgundy { color: var(--wine); }

/* ═══ MUSEUM ENVIRONMENT - every room is a wall with depth ═══════
   ::before = aged-paper surface + wall panel seams
   ::after  = picture-rail downlight + baseboard shadow + vignette   */
.section::before, .hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 190px);
  background-size: 200px 200px, auto;
  mix-blend-mode: overlay; opacity: 0.38;
}
.section::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 58px, rgba(184,138,68,0.16) 58px, rgba(184,138,68,0.16) 59px, transparent 59px),
    radial-gradient(120% 70% at 50% 26px, rgba(184,138,68,0.06), transparent 60%),
    linear-gradient(180deg, transparent 92%, rgba(0,0,0,0.5)),
    radial-gradient(120% 85% at 50% 34%, transparent 52%, rgba(0,0,0,0.32));
}
/* keep the old tex overlays from doubling up the vignette */
.tex-wall::after, .tex-walnut::after { content: none; }

/* Indian-archival catalog tag stays; make room number a faint wall watermark */
.room-watermark {
  position: absolute; top: 64px; right: 4%; z-index: 1; pointer-events: none; line-height: 1;
  font-family: var(--serif); font-weight: 700; font-size: clamp(140px, 20vw, 320px);
  color: rgba(184,138,68,0.045);
}
@media (max-width: 760px) { .room-watermark { font-size: 160px; top: 40px; } }

/* ═══ ADMISSION TICKET - less copy, dominant CTA ════════════════ */
.ticket-card { max-width: 440px; }
.ticket-body { padding: 36px 34px 34px; gap: 20px; }
.ticket-eyebrow { color: rgba(43,29,22,0.5); margin: 0; }
.ticket-title { font-size: clamp(34px, 7vw, 46px); font-weight: 700; color: var(--ink); margin: -4px 0 0; }
.ticket-curator { margin-top: -4px; }
.ticket-curator-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(43,29,22,0.5); margin-bottom: 4px; }
.ticket-curator-name { font-family: var(--serif); font-size: 24px; color: var(--ink); }
.ticket-tagline { font-size: 15px; margin: 0; color: rgba(43,29,22,0.72); }
.ticket-status-row { display: flex; align-items: center; gap: 12px; border-top: none; padding-top: 0; }
.ticket-status-label { margin: 0; }
.ticket-status-value { font-size: 12px; }
.ticket-btn {
  width: 100%; justify-content: center; gap: 12px; margin-top: 6px;
  background: var(--burgundy); color: var(--ivory); padding: 20px 24px;
  font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--gold-dim);
  box-shadow: 0 16px 34px rgba(90,30,43,0.5);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.ticket-btn:hover { background: var(--wine); transform: translateY(-2px); box-shadow: 0 20px 44px rgba(138,46,62,0.55); }
.ticket-btn:active { transform: translateY(0) scale(0.99); }

/* ═══ EXHIBIT FRAMES - custom museum framing + attached plaque ══ */
.exhibit-frame {
  border: 10px solid #2A1C14;
  box-shadow:
    0 0 0 1px var(--gold-dim),
    inset 0 0 0 3px rgba(13,13,13,0.85),
    inset 0 0 0 4px rgba(184,138,68,0.4),
    0 46px 90px rgba(0,0,0,0.78);
}
/* gilt corner brackets */
.exhibit-frame-wrap::before, .exhibit-frame-wrap::after {
  content: ''; position: absolute; width: 22px; height: 22px; z-index: 4; pointer-events: none;
  border: 2px solid rgba(184,138,68,0.55);
}
.exhibit-frame-wrap::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
.exhibit-frame-wrap::after { bottom: -3px; right: -3px; border-left: none; border-top: none; }
/* the title plaque, mounted to the wall directly under the frame */
.exhibit-label {
  width: 88%; margin: -2px auto 0; position: relative; text-align: left;
  background: linear-gradient(180deg, #2C1D14, #190F0A);
  border: 1px solid var(--gold-dim); border-top: 2px solid var(--gold);
  padding: 20px 24px 22px;
  box-shadow: 0 18px 34px rgba(0,0,0,0.55);
}
.exhibit-label::before, .exhibit-label::after { /* mounting screws */
  content: ''; position: absolute; top: 10px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold), #4A3A1E);
}
.exhibit-label::before { left: 12px; }
.exhibit-label::after { right: 12px; }

/* Case-study plaque under the painting - same brass treatment */
.cs-plaque { background: linear-gradient(180deg, #2C1D14, #190F0A); border-top: 2px solid var(--gold); }

/* ═══ ARCHIVE STAMP + CURATOR NOTE (worldbuilding) ══════════════ */
.archive-stamp {
  position: absolute; top: 120px; right: 6%; z-index: 9; pointer-events: none;
  transform: rotate(-9deg); border: 3px double rgba(138,46,62,0.5); color: rgba(138,46,62,0.55);
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 8px 14px;
}
@media (max-width: 900px) { .archive-stamp { display: none; } }
.curator-note {
  font-family: var(--serif); font-style: italic; font-size: 17px; color: rgba(184,138,68,0.7);
  border-left: 2px solid var(--gold-dim); padding-left: 16px; margin-top: 28px; max-width: 420px;
}
.curator-note::before { content: 'Curator’s note - '; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(184,138,68,0.55); display: block; margin-bottom: 6px; }

/* Hide the floating contact on the contact page (single clear path) */
body[data-page="contact"] .floating-contact { display: none; }

/* Global museum base - aged-paper wall behind everything, so the
   environment continues onto project pages and any transparent area. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(130% 90% at 50% 28%, transparent 48%, rgba(0,0,0,0.5));
  background-size: 220px 220px, auto;
  opacity: 0.42;
}
/* Project detail panels pick up the same warm grain for continuity */
.cs-painting::after, .cs-content::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.3;
}
.cs-content { position: relative; }
.cs-content .cs-inner { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   ROUND 4 - cinematic museum arrival + gallery worldbuilding
   ═══════════════════════════════════════════════════════════════ */
:root {
  --stone-1: #CBA875; --stone-2: #A07C4C; --stone-3: #6E5230; --stone-4: #46341D;
  --night: #0B0908;
}

/* ── Scroll-driven approach scene ─────────────────────────────── */
.approach { position: relative; height: 360vh; z-index: 1; }
.approach-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  --p: 0; --door: 0; --enter: 0;
  background: radial-gradient(120% 100% at 50% 16%, #2A1A16 0%, #150D0C 46%, var(--night) 100%);
}
.sky { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 28%, rgba(184,138,68,0.10), transparent 60%); }
.approach-stars { position: absolute; inset: 0; pointer-events: none; }
.astar { position: absolute; border-radius: 50%; background: rgba(232,220,203,0.9); animation: astar-tw ease-in-out infinite alternate; }
@keyframes astar-tw { from { opacity: 0.1; } to { opacity: 0.55; } }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #1A120C, #0A0706); }

/* the building - scales toward the visitor with scroll */
.museum {
  position: absolute; left: 50%; bottom: 15%;
  width: min(880px, 92vw); height: min(540px, 62vh);
  transform: translateX(-50%) scale(calc(0.80 + var(--p) * 1.4));
  transform-origin: 50% 80%; will-change: transform;
}
.m-glow {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: 130%; height: 130%; pointer-events: none;
  background: radial-gradient(ellipse 46% 40% at 50% 50%, rgba(184,138,68, calc(0.10 + var(--p) * 0.24)), transparent 70%);
}
.m-facade { position: absolute; left: 4%; right: 4%; bottom: 12%; height: 47%; z-index: 1; background: linear-gradient(180deg, #3A2A1A, #211509); box-shadow: inset 0 22px 44px rgba(0,0,0,0.55); }
.m-colonnade { position: absolute; left: 6%; right: 6%; bottom: 12%; height: 42%; z-index: 2; display: flex; justify-content: space-between; gap: 1.2%; }
.col {
  flex: 1; height: 100%; position: relative; border-radius: 3px 3px 0 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.38), transparent 16%, transparent 84%, rgba(0,0,0,0.42)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, rgba(0,0,0,0.12) 2px 5px),
    linear-gradient(180deg, var(--stone-1), var(--stone-2));
  box-shadow: inset 0 -12px 20px rgba(0,0,0,0.3);
}
.col::before { content: ''; position: absolute; top: -4px; left: -16%; right: -16%; height: 9px; background: linear-gradient(180deg, var(--stone-1), var(--stone-3)); border-radius: 2px; }
.col::after { content: ''; position: absolute; bottom: 0; left: -12%; right: -12%; height: 8px; background: linear-gradient(180deg, var(--stone-2), var(--stone-4)); }
.m-entablature {
  position: absolute; left: 2%; right: 2%; bottom: 54%; height: 8%; z-index: 3;
  background: linear-gradient(180deg, var(--stone-2), var(--stone-3));
  border-top: 2px solid rgba(184,138,68,0.45); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.m-frieze { font-family: var(--mono); font-size: clamp(7px, 1.05vw, 12px); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(20,14,10,0.82); font-weight: 600; }
.m-pediment {
  position: absolute; left: 5%; right: 5%; bottom: 61.5%; height: 15%; z-index: 4;
  background: linear-gradient(180deg, var(--stone-1), var(--stone-3));
  clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: inset 0 -6px 12px rgba(0,0,0,0.3);
}
.m-dome {
  position: absolute; left: 50%; bottom: 74%; transform: translateX(-50%); width: 15%; height: 13%; z-index: 2;
  background: radial-gradient(circle at 42% 78%, var(--stone-1), var(--stone-3));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; box-shadow: inset -6px -4px 12px rgba(0,0,0,0.35);
}
.m-finial { position: absolute; left: 50%; top: -16%; transform: translateX(-50%); width: 3px; height: 18%; background: var(--gold); box-shadow: 0 0 8px rgba(184,138,68,0.6); }
.m-finial::after { content: ''; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(184,138,68,0.7); }
.m-doorway {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); width: 15%; height: 37%; z-index: 5; overflow: hidden;
  background: #0A0706; border-radius: 50% 50% 0 0 / 16% 16% 0 0;
  box-shadow: inset 0 0 0 3px var(--stone-3), inset 0 0 30px rgba(0,0,0,0.9);
}
.m-interior-glow { position: absolute; inset: 0; opacity: var(--door); background: radial-gradient(ellipse 80% 70% at 50% 62%, rgba(255,212,142,0.95), rgba(184,120,60,0.5) 52%, transparent 82%); }
.m-door { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(180deg, #34241A, #1B110B); box-shadow: inset 0 0 0 2px rgba(184,138,68,0.22); }
.m-door--l { left: 0; transform: translateX(calc(var(--door) * -103%)); }
.m-door--r { right: 0; transform: translateX(calc(var(--door) * 103%)); }
.m-steps {
  position: absolute; left: -7%; right: -7%; bottom: 0; height: 13%; z-index: 5;
  background: linear-gradient(180deg, var(--stone-2) 0 34%, var(--stone-3) 34% 67%, var(--stone-4) 67% 100%);
  box-shadow: 0 -2px 0 rgba(184,138,68,0.12);
}
.m-banner {
  position: absolute; bottom: 28%; width: 6.5%; height: 40%; z-index: 6;
  background: linear-gradient(180deg, var(--burgundy), var(--oxblood));
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 10%;
  box-shadow: 0 12px 22px rgba(0,0,0,0.45);
  clip-path: polygon(0 0, 100% 0, 100% 93%, 50% 100%, 0 93%);
  opacity: clamp(0, calc((var(--p) - 0.12) * 4), 1);
}
.m-banner span { font-family: var(--mono); font-size: clamp(6px, 0.85vw, 10px); letter-spacing: 0.18em; color: rgba(232,220,203,0.92); writing-mode: vertical-rl; text-transform: uppercase; }
.m-banner--l { left: 12%; } .m-banner--r { right: 12%; }
.m-uplight { position: absolute; bottom: 4%; width: 32%; height: 54%; z-index: 6; pointer-events: none; filter: blur(8px); background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(184,138,68, calc(0.12 + var(--p) * 0.3)), transparent 70%); }
.m-uplight--l { left: 4%; } .m-uplight--r { right: 4%; }

.approach-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 44%, rgba(0,0,0,0.62)); }
.enter-glow { position: absolute; inset: 0; pointer-events: none; opacity: var(--enter); background: radial-gradient(circle at 50% 60%, rgba(255,224,168,0.98), rgba(206,142,72,0.85) 28%, rgba(120,40,50,0.6) 60%, rgba(10,8,6,0.45)); }
.approach-cue { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); text-align: center; opacity: clamp(0, calc(1 - var(--p) * 10), 1); }
.approach-cue-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(184,138,68,0.7); margin-bottom: 8px; }
.approach-cue-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232,220,203,0.72); }
.cue-arrow { display: block; margin-top: 10px; font-size: 16px; color: rgba(184,138,68,0.85); animation: bob 2s ease-in-out infinite; }

/* ── Arrival atrium - warmer, like emerging into a lit hall ────── */
.entrance-atrium .hero-bg { background: linear-gradient(180deg, #2A1A14 0%, var(--walnut) 32%, var(--charcoal) 100%); }
.entrance-atrium .hero-spotlight { background: radial-gradient(ellipse 60% 72% at 50% 6%, rgba(184,138,68,0.22) 0%, transparent 64%); }

/* ── Gallery entrance sign (suspended) ────────────────────────── */
.gallery-sign {
  position: relative; display: inline-flex; align-items: center; gap: 14px; margin: 0 0 26px; padding: 12px 22px;
  background: linear-gradient(180deg, #2A1C14, #1A1009); border: 1px solid var(--gold-dim); border-top: 2px solid var(--gold);
  box-shadow: 0 16px 30px rgba(0,0,0,0.5);
}
.gallery-sign::before { content: ''; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 1px; height: 18px; background: var(--gold-dim); }
.gallery-sign-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); }
.gallery-sign-name { font-family: var(--serif); font-size: clamp(15px, 1.7vw, 21px); color: var(--ivory); }

/* ── Archway / corridor divider between rooms ─────────────────── */
.archway { position: relative; height: 132px; display: flex; align-items: center; justify-content: center; background: var(--wall); overflow: hidden; }
.archway::before {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(700px, 86vw); height: 264px; border: 1px solid rgba(184,138,68,0.2); border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(184,138,68,0.05), transparent 70%);
}
.archway-label { position: relative; z-index: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(184,138,68,0.6); background: var(--wall); padding: 0 16px; }

@media (prefers-reduced-motion: reduce) { .cue-arrow, .astar { animation: none; } }

/* ═══════════════════════════════════════════════════════════════
   ROUND 5 - carved entrance gate, design engravings, threshold
   "If graphic design had an ancient civilization, these are the carvings."
   ═══════════════════════════════════════════════════════════════ */

/* Engraving artwork - graphic-design glyphs carved as line-work */
:root {
  --engrave-col: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='1040' viewBox='0 0 130 1040'><g fill='none' stroke='%23B88A44' stroke-width='2'><line x1='22' y1='42' x2='108' y2='42'/><line x1='22' y1='96' x2='108' y2='96'/><line x1='22' y1='70' x2='108' y2='70' stroke-dasharray='4 5'/><path d='M65 40 L46 96 M65 40 L84 96 M54 79 L76 79'/><rect x='32' y='150' width='66' height='66'/><line x1='32' y1='172' x2='98' y2='172'/><line x1='32' y1='194' x2='98' y2='194'/><line x1='54' y1='150' x2='54' y2='216'/><line x1='76' y1='150' x2='76' y2='216'/><path d='M32 216 A66 66 0 0 1 98 150'/><circle cx='65' cy='300' r='21'/><rect x='44' y='279' width='42' height='42'/><path d='M65 281 L85 317 L45 317 Z'/><text x='65' y='420' font-family='Georgia,serif' font-size='56' fill='%23B88A44' stroke='none' text-anchor='middle'>&amp;</text><rect x='40' y='474' width='50' height='38'/><path d='M32 466 L32 480 M32 466 L46 466 M98 466 L98 480 M98 466 L84 466 M32 520 L32 506 M32 520 L46 520 M98 520 L98 506 M98 520 L84 520'/><circle cx='65' cy='566' r='11'/><line x1='65' y1='550' x2='65' y2='582'/><line x1='49' y1='566' x2='81' y2='566'/><text x='65' y='700' font-family='Georgia,serif' font-size='60' fill='%23B88A44' stroke='none' text-anchor='middle'>Q</text><path d='M65 742 L82 772 L65 814 L48 772 Z'/><line x1='65' y1='774' x2='65' y2='812'/><circle cx='65' cy='773' r='3'/><text x='65' y='888' font-family='Georgia,serif' font-size='17' fill='%23B88A44' stroke='none' text-anchor='middle' letter-spacing='3'>MMXXVI</text><line x1='32' y1='928' x2='98' y2='928'/><line x1='32' y1='923' x2='32' y2='933'/><line x1='49' y1='925' x2='49' y2='931'/><line x1='65' y1='923' x2='65' y2='933'/><line x1='81' y1='925' x2='81' y2='931'/><line x1='98' y1='923' x2='98' y2='933'/><path d='M42 992 Q65 972 88 992 Q65 1012 42 992 Z'/><circle cx='65' cy='992' r='6'/></g></svg>");
  --engrave-frieze: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='70' viewBox='0 0 480 70'><g fill='none' stroke='%23B88A44' stroke-width='1.6'><circle cx='40' cy='35' r='13'/><rect x='27' y='22' width='26' height='26'/><path d='M120 22 L133 48 L107 48 Z'/><circle cx='120' cy='40' r='9'/><rect x='180' y='23' width='30' height='24'/><line x1='180' y1='35' x2='210' y2='35'/><line x1='195' y1='23' x2='195' y2='47'/><path d='M280 20 L292 38 L280 56 L268 38 Z'/><line x1='280' y1='40' x2='280' y2='56'/><path d='M340 24 L356 24 M340 24 L340 38 M380 24 L364 24 M380 24 L380 38 M340 50 L356 50 M340 50 L340 38 M380 50 L364 50 M380 50 L380 38'/><circle cx='440' cy='35' r='6'/><line x1='424' y1='35' x2='456' y2='35'/><line x1='440' y1='19' x2='440' y2='51'/></g></svg>");
}

/* ── The carved gate (foreground) - camera dollies through it ──── */
.gate {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  transform: scale(calc(1 + var(--p) * 2.4)); transform-origin: 50% 54%;
  opacity: clamp(0, calc(1 - (var(--p) - 0.82) / 0.18), 1);
}
.gate-corridor {
  position: absolute; top: 21%; bottom: 0; left: 34%; right: 34%;
  background: radial-gradient(ellipse 90% 80% at 50% 72%, rgba(255,210,140, calc(0.05 + var(--p) * 0.62)), rgba(120,60,30,0.18) 58%, transparent 86%);
}
.gate-jamb {
  position: absolute; top: -2%; bottom: 0; width: 34%; overflow: hidden;
  background: linear-gradient(90deg, #140C07, #2B1D14 38%, #241710 62%, #100A06);
  box-shadow: inset 0 0 70px rgba(0,0,0,0.7);
}
.gate-jamb--l { left: 0; border-right: 2px solid rgba(184,138,68,0.22); }
.gate-jamb--r { right: 0; border-left: 2px solid rgba(184,138,68,0.22); }
.gate-engrave {
  position: absolute; inset: 0; background-image: var(--engrave-col);
  background-repeat: repeat-y; background-position: center top; background-size: 58% auto;
  opacity: calc(0.3 + var(--p) * 0.55);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.6));
}
.gate-lintel {
  position: absolute; top: -2%; left: 0; right: 0; height: 21%; overflow: hidden;
  background: linear-gradient(180deg, #2B1D14, #140C07);
  box-shadow: inset 0 -12px 30px rgba(0,0,0,0.6), 0 10px 24px rgba(0,0,0,0.5);
  border-bottom: 2px solid rgba(184,138,68,0.26);
  display: flex; align-items: center; justify-content: center;
}
.gate-frieze {
  position: absolute; inset: 0; background-image: var(--engrave-frieze);
  background-repeat: repeat-x; background-position: center; background-size: auto 64%;
  opacity: calc(0.28 + var(--p) * 0.5);
}
.gate-wordmark {
  position: relative; font-family: var(--serif); font-size: clamp(15px, 2.3vw, 32px);
  letter-spacing: 0.06em; color: var(--gold); text-shadow: 0 2px 5px rgba(0,0,0,0.7);
}
.gate-arch {
  position: absolute; top: 19%; left: 33%; right: 33%; height: 17%;
  border: 2px solid rgba(184,138,68,0.3); border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.gate-rim { position: absolute; inset: 0; box-shadow: inset 0 0 140px rgba(0,0,0,0.72); }

/* layering of approach overlays */
.approach-vignette { z-index: 8; }
.enter-glow { z-index: 20; }
.approach-cue { z-index: 21; }

/* ── Carved friezes carry the stone inside ────────────────────── */
.atrium-frieze {
  position: absolute; left: 0; right: 0; top: 78px; height: 44px; z-index: 2; pointer-events: none;
  background-image: var(--engrave-frieze); background-repeat: repeat-x; background-position: center; background-size: auto 58%;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.footer-frieze {
  height: 46px; margin: 0 auto 26px; max-width: 1280px;
  background-image: var(--engrave-frieze); background-repeat: repeat-x; background-position: center; background-size: auto 58%;
  opacity: 0.18; border-top: 1px solid var(--gold-dim);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ── Atrium reads as an enclosed gallery room ─────────────────── */
.entrance-atrium { box-shadow: inset 150px 0 200px -50px rgba(0,0,0,0.6), inset -150px 0 200px -50px rgba(0,0,0,0.6); }
.entrance-atrium .hero-arch { border-color: rgba(184,138,68,0.18); }

/* Coherent forward dolly - building stays centered in the gate opening,
   both planes zoom toward the same focal point (screen centre). */
.museum {
  top: 48%; bottom: auto;
  transform: translate(-50%, -50%) scale(calc(0.90 + var(--p) * 0.85));
  transform-origin: 50% 50%;
}
.gate { transform-origin: 50% 50%; }

/* Override the legacy two-panel ".gate" rule (width:50%) so the carved
   entrance gate fills the whole stage and frames the building centrally. */
.gate {
  width: 100% !important; height: 100% !important; display: block !important;
  background: transparent !important; overflow: visible !important;
  align-items: initial !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROUND 6 - museum-grade exhibit frames (artifacts behind glass)
   Ornate gilt molding reinterpreted in graphic-design language.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --ornament: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='none' stroke='%23E6C994' stroke-width='1.5'><circle cx='22' cy='22' r='13'/><path d='M22 11 L31 28 L13 28 Z'/><path d='M22 3 L22 8 M3 22 L8 22'/><circle cx='22' cy='22' r='2.4' fill='%23E6C994' stroke='none'/></g></svg>");
  --gilt: linear-gradient(135deg, #E6C994 0%, #C19A5C 26%, #8A6A3A 55%, #5A4324 80%, #34271500 100%), linear-gradient(135deg, #E6C994 0%, #C19A5C 26%, #8A6A3A 55%, #5A4324 80%, #342715 100%);
}

/* ── Gallery wall arrangement ─────────────────────────────────── */
.section--exhibits .exhibit-grid { grid-template-columns: 1fr 1fr; column-gap: 80px; row-gap: 150px; }
@media (max-width: 760px) { .section--exhibits .exhibit-grid { grid-template-columns: 1fr; row-gap: 110px; } }
@media (min-width: 768px) { .artifact:nth-child(even) { margin-top: 120px; } }

/* ── One artifact: spotlight + frame + mounted plaque ─────────── */
.artifact { position: relative; display: block; padding-top: 46px; }
.artifact-spot {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  width: 78%; height: 180px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 58% 100% at 50% 0%, rgba(184,138,68,0.18), transparent 72%);
  opacity: 0.65; transition: opacity 0.5s, height 0.5s;
}
.artifact:hover .artifact-spot { opacity: 1; height: 210px; }

/* the ornate gilt molding */
.frame {
  position: relative; z-index: 1; padding: 34px; border-radius: 2px;
  background: linear-gradient(135deg, #E6C994 0%, #C19A5C 24%, #8A6A3A 52%, #5A4324 78%, #34271A 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,246,220,0.55),
    0 0 0 1px #0E0805,
    0 64px 70px -30px rgba(0,0,0,0.92),
    0 26px 42px rgba(0,0,0,0.5);
  transition: box-shadow 0.5s, transform 0.5s;
}
.artifact:hover .frame {
  transform: translateY(-7px);
  box-shadow:
    inset 0 0 0 1px rgba(255,250,228,0.7),
    0 0 0 1px #0E0805,
    0 92px 96px -30px rgba(0,0,0,0.95),
    0 36px 56px rgba(0,0,0,0.58);
}

/* engraved design friezes along the top & bottom rails of the molding */
.frame-frieze {
  position: absolute; left: 30px; right: 30px; height: 20px; z-index: 3; pointer-events: none;
  background-image: var(--engrave-frieze); background-repeat: repeat-x; background-position: center; background-size: auto 86%;
  opacity: 0.5; mix-blend-mode: multiply; transition: opacity 0.5s;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.frame-frieze--t { top: 7px; } .frame-frieze--b { bottom: 7px; }
.artifact:hover .frame-frieze { opacity: 0.78; }

/* design-glyph corner ornaments */
.frame-corner {
  position: absolute; width: 30px; height: 30px; z-index: 4; pointer-events: none;
  background: var(--ornament) center/contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.45));
}
.frame-corner--tl { top: 4px; left: 4px; }
.frame-corner--tr { top: 4px; right: 4px; transform: scaleX(-1); }
.frame-corner--bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.frame-corner--br { bottom: 4px; right: 4px; transform: scale(-1, -1); }

/* the artwork window - gold fillet + dark mat via shadow rings, behind glass */
.frame-window {
  position: relative; z-index: 2; overflow: hidden; background: #0A0706;
  box-shadow:
    0 0 0 2px rgba(184,138,68,0.85),
    0 0 0 15px #15100A,
    0 0 0 17px rgba(184,138,68,0.4),
    inset 0 0 30px rgba(0,0,0,0.7);
}
.artifact-img {
  display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  filter: contrast(1.05) saturate(0.9) brightness(0.9); transition: filter 0.5s, transform 1.3s;
}
.artifact:hover .artifact-img { filter: contrast(1.08) saturate(0.98) brightness(1.04); transform: scale(1.045); }
.frame-glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 26%, transparent 48%, transparent 74%, rgba(255,255,255,0.05) 100%);
  opacity: 0.7; transition: opacity 0.5s;
}
.artifact:hover .frame-glass { opacity: 0.9; }

/* the brass catalog plaque, mounted onto the frame's bottom rail */
.artifact-plaque {
  position: relative; z-index: 5; width: 74%; margin: -22px auto 0; text-align: center;
  padding: 15px 20px 17px; border-radius: 1px; color: #1A1109;
  background: linear-gradient(180deg, #D6B47E 0%, #B08C4E 48%, #856438 100%);
  box-shadow: 0 14px 26px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,248,224,0.6), inset 0 -2px 6px rgba(0,0,0,0.28);
  transition: box-shadow 0.5s, transform 0.5s;
}
.artifact-plaque::before, .artifact-plaque::after {
  content: ''; position: absolute; top: 9px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #6E5230, #2A1C10);
}
.artifact-plaque::before { left: 11px; } .artifact-plaque::after { right: 11px; }
.plaque-collection { font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(26,17,9,0.72); margin-bottom: 6px; transition: color 0.4s; }
.plaque-title { font-family: var(--serif); font-size: 22px; line-height: 1.05; color: #19100A; }
.plaque-disc { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(26,17,9,0.62); margin-top: 7px; }
.artifact:hover .artifact-plaque {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,252,236,0.85), 0 0 26px rgba(184,138,68,0.32);
}
.artifact:hover .plaque-collection { color: rgba(26,17,9,0.92); }

/* ── Mini artifacts (More Exhibits on project pages) ──────────── */
.cs-more-grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .cs-more-grid { grid-template-columns: 1fr; } }
.artifact--mini { padding-top: 30px; }
.artifact--mini .frame { padding: 20px; }
.artifact--mini .frame-window { box-shadow: 0 0 0 2px rgba(184,138,68,0.8), 0 0 0 9px #15100A, 0 0 0 10px rgba(184,138,68,0.4); }
.artifact--mini .frame-frieze { left: 18px; right: 18px; height: 13px; }
.artifact--mini .frame-corner { width: 20px; height: 20px; }
.artifact--mini .artifact-img { aspect-ratio: 1; }
.artifact--mini .artifact-plaque { width: 84%; margin-top: -16px; padding: 11px 12px 13px; }
.artifact--mini .plaque-title { font-size: 16px; }
.artifact--mini .plaque-disc { display: none; }

/* ── Case-study painting + portrait share the gilt molding ────── */
.cs-frame, .portrait-frame {
  border: none !important; padding: 30px; overflow: visible;
  background: linear-gradient(135deg, #E6C994 0%, #C19A5C 24%, #8A6A3A 52%, #5A4324 78%, #34271A 100%);
  box-shadow: inset 0 0 0 1px rgba(255,246,220,0.5), 0 0 0 1px #0E0805, 0 64px 70px -30px rgba(0,0,0,0.9), 0 26px 42px rgba(0,0,0,0.5);
}
.cs-frame img, .portrait-img {
  box-shadow: 0 0 0 2px rgba(184,138,68,0.85), 0 0 0 13px #15100A, 0 0 0 15px rgba(184,138,68,0.4);
}

/* ── Round 6 refinement: recessed engraved channel on all 4 rails ─ */
.frame { padding: 36px; }
.frame-channel {
  position: absolute; inset: 17px; z-index: 1; background: #15100A;
  box-shadow: inset 0 0 0 1px rgba(184,138,68,0.4), inset 0 2px 7px rgba(0,0,0,0.75);
}
.frame-frieze {
  position: absolute; opacity: 0.72; transition: opacity 0.5s;
}
.frame-frieze--t, .frame-frieze--b {
  left: 22px; right: 22px; height: 13px;
  background: var(--engrave-frieze) repeat-x center / auto 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.frame-frieze--t { top: 2px; } .frame-frieze--b { bottom: 2px; }
.frame-frieze--l, .frame-frieze--r {
  top: 22px; bottom: 22px; width: 13px;
  background: var(--engrave-col) repeat-y center / 100% auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}
.frame-frieze--l { left: 2px; } .frame-frieze--r { right: 2px; }
.artifact:hover .frame-frieze { opacity: 0.95; }

.frame-corner { position: absolute; width: 22px; height: 22px; z-index: 2; background: var(--ornament) center/contain no-repeat; }
.frame-corner--tl { top: -3px; left: -3px; }
.frame-corner--tr { top: -3px; right: -3px; transform: scaleX(-1); }
.frame-corner--bl { bottom: -3px; left: -3px; transform: scaleY(-1); }
.frame-corner--br { bottom: -3px; right: -3px; transform: scale(-1, -1); }

/* window: just a gold fillet now (the channel provides the recess) */
.frame-window {
  position: relative; z-index: 2; overflow: hidden; background: #0A0706;
  box-shadow: 0 0 0 2px rgba(184,138,68,0.85), inset 0 0 26px rgba(0,0,0,0.7);
}

/* mini frames: tighter channel */
.artifact--mini .frame { padding: 22px; }
.artifact--mini .frame-channel { inset: 11px; }
.artifact--mini .frame-frieze--t, .artifact--mini .frame-frieze--b { left: 14px; right: 14px; height: 9px; }
.artifact--mini .frame-frieze--l, .artifact--mini .frame-frieze--r { top: 14px; bottom: 14px; width: 9px; }
.artifact--mini .frame-corner { width: 16px; height: 16px; }
.artifact--mini .frame-window { box-shadow: 0 0 0 2px rgba(184,138,68,0.8), inset 0 0 16px rgba(0,0,0,0.7); }

/* ═══════════════════════════════════════════════════════════════
   ROUND 8 - the gateway portal (a designer's ruin); one continuous walk
   ═══════════════════════════════════════════════════════════════ */
.portal { height: 400vh; }
.portal-stage {
  background: radial-gradient(125% 100% at 50% 32%, #1C1410 0%, #120C0A 52%, #080605 100%);
}

/* BEYOND THE ARCH - the museum interior + Gallery I content */
.portal-interior { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.portal-depth { position: absolute; inset: 0; background: radial-gradient(95% 85% at 50% 74%, #2A1A12 0%, #140D0A 46%, #070504 100%); }
.portal-light {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 44% at 50% 60%, rgba(255,206,146,0.30), transparent 70%);
  opacity: calc(0.22 + var(--p) * 0.78);
}
.portal-stars { position: absolute; inset: 0; pointer-events: none; }
.portal-content {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 2; text-align: center; padding: 0 32px;
  transform: translateY(-50%) scale(calc(0.965 + var(--p) * 0.035));
  opacity: clamp(0, calc((var(--p) - 0.42) / 0.36), 1);
}
.portal-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.portal-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; }
.portal-rule { width: 40px; height: 1px; background: var(--gold); }
.portal-title { font-family: var(--serif); font-size: clamp(52px, 8vw, 116px); font-weight: 700; color: var(--ivory); line-height: 1.04; letter-spacing: 0; margin-bottom: 24px; }
.portal-sub { font-size: clamp(17px, 2vw, 21px); color: rgba(232,220,203,0.72); line-height: 1.65; max-width: 560px; margin: 0 auto 40px; }
.portal-cta { display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* THE GATEWAY - scales gently as you walk toward it, then dissolves at the threshold */
.portal-arch {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  transform: scale(calc(0.92 + var(--p) * 3.0)); transform-origin: 50% 64%;
  opacity: clamp(0, calc(1 - (var(--p) - 0.86) / 0.14), 1);
  filter: brightness(calc(0.82 + var(--p) * 0.5)) saturate(1.55) contrast(1.06);
  will-change: transform;
}
.portal-svg { width: 100%; height: 100%; display: block; }
.portal-threshold {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--enter, 0);
  background: radial-gradient(circle at 50% 60%, rgba(255,226,172,0.55), rgba(168,86,52,0.32) 42%, transparent 76%);
}
.portal .approach-cue { z-index: 5; bottom: 9%; opacity: clamp(0, calc(1 - var(--p) * 9), 1); }

/* Chrome stays hidden during the walk; appears once the threshold is crossed */
body[data-page="home"] .floating-contact { opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity 0.6s, transform 0.6s; animation: none; }
body[data-page="home"].entered .floating-contact { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .portal-arch { transform: scale(1.4); }
  .portal-content { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   ROUND 9 - carved (not decorated), longer dwell, no opacity fades.
   Reveal is spatial: content approaches from depth; arch scales past.
   --a = architecture progress (completes at p≈0.6, then the hero rests).
   ═══════════════════════════════════════════════════════════════ */
.portal { height: 460vh; }

/* Hero never fades - it travels forward from inside the hall, then holds. */
.portal-content {
  opacity: 1 !important;
  transform: translate(0, calc(-50% + (1 - var(--a, 0)) * 9vh)) scale(calc(0.66 + var(--a, 0) * 0.34));
}

/* The gateway scales gently past the camera (no opacity dissolve). */
.portal-arch {
  transform: scale(calc(0.92 + var(--a, 0) * 3.9));
  transform-origin: 50% 62%;
  opacity: 1;
  filter: brightness(calc(0.8 + var(--a, 0) * 0.55));
}

/* Interior lighting grows with proximity (light, not opacity-on-text). */
.portal-light { opacity: calc(0.24 + var(--a, 0) * 0.76); }
.portal-threshold { opacity: 0; }
.portal .approach-cue { opacity: clamp(0, calc(1 - var(--a, 0) * 5), 1); }

@media (prefers-reduced-motion: reduce) {
  .portal-arch { transform: scale(2.4); }
  .portal-content { transform: translateY(-50%) scale(1); }
}

/* Start the hero further back so at rest it's only a distant hint beyond the
   gate ("something beyond"); it becomes readable purely by approaching. */
.portal-content {
  transform: translate(0, calc(-50% + (1 - var(--a, 0)) * 15vh)) scale(calc(0.4 + var(--a, 0) * 0.6));
}

/* ═══════════════════════════════════════════════════════════════
   ROUND 10 - restraint pass: depth over decoration
   ═══════════════════════════════════════════════════════════════ */

/* (3) Parallax - give background layers room to drift without gaps */
.parallax-layer { will-change: transform; }
.section .bg-about.parallax-layer, .section .bg-curator.parallax-layer,
.section .bg-contact.parallax-layer, .section .bg-walnut.parallax-layer,
.section .bg-oxblood.parallax-layer, .section .bg-charcoal.parallax-layer {
  top: -8%; bottom: -8%;
}

/* (8) Abstract jali / manuscript atmosphere woven into the gallery walls -
   extremely low opacity, neutral, never competes with the exhibits. */
.section::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23E8DCCB' stroke-opacity='0.5' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='42'/%3E%3Ccircle cx='84' cy='0' r='42'/%3E%3Ccircle cx='0' cy='84' r='42'/%3E%3Ccircle cx='84' cy='84' r='42'/%3E%3Ccircle cx='42' cy='42' r='42'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 190px);
  background-size: 86px 86px, 200px 200px, auto;
  mix-blend-mode: overlay; opacity: 0.34;
}

/* (2) Reduce visual noise - soften borders & non-functional graphics */
.tags span { border-color: rgba(184,138,68,0.15); }
.skill-item { border-color: rgba(232,220,203,0.05); }
.rec-chip { border-color: rgba(184,138,68,0.15); }
.catalog-tag { opacity: 0.55; }
.directory-grid { background: rgba(184,138,68,0.08); border-color: rgba(184,138,68,0.08); }
.exhibits-texture, .archives-texture { opacity: 0.5; }
.featured-note { border-style: solid; border-color: rgba(184,138,68,0.1); }

/* (7) Frames - preserved objects, not containers: muted, crafted, restrained.
   (Literal glyph friezes & corner ornaments removed; recessed channel kept.) */
.frame-frieze, .frame-corner { display: none; }
.frame {
  background: linear-gradient(135deg, #8E774A 0%, #6E5836 42%, #49391F 76%, #2C2213 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,246,220,0.28),
    0 0 0 1px #0E0805,
    0 52px 60px -28px rgba(0,0,0,0.82),
    0 22px 36px rgba(0,0,0,0.45);
}
.artifact:hover .frame {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(255,250,228,0.4),
    0 0 0 1px #0E0805,
    0 78px 84px -28px rgba(0,0,0,0.9),
    0 30px 48px rgba(0,0,0,0.5);
}
.frame-channel { box-shadow: inset 0 0 0 1px rgba(184,138,68,0.28), inset 0 2px 7px rgba(0,0,0,0.7); }
.frame-window { box-shadow: 0 0 0 2px rgba(184,138,68,0.55), inset 0 0 26px rgba(0,0,0,0.7); }
.artifact-plaque { background: linear-gradient(180deg, #C2A368 0%, #9C7C46 50%, #75592F 100%); }

/* (1) Infinite corridor sentinel */
.exhibit-sentinel { width: 100%; height: 1px; }

/* ═══════════════════════════════════════════════════════════════
   REVISION 11–12 - orientation tools (Back · Back-to-Top), restraint
   ═══════════════════════════════════════════════════════════════ */
.nav-left { display: flex; align-items: center; gap: 18px; }
.nav-back {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(232,220,203,0.5); transition: color 0.25s;
}
.nav-back svg { width: 13px; height: 13px; }
.nav-back:hover { color: var(--gold); }
body[data-page="home"] .nav-back { display: none; }
@media (max-width: 760px) { .nav-back span { display: none; } }

.to-top {
  position: fixed; bottom: 32px; left: 32px; z-index: 80;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: rgba(15,12,10,0.7); backdrop-filter: blur(10px);
  border: 1px solid rgba(184,138,68,0.22); color: rgba(232,220,203,0.65);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.4s, transform 0.4s, color 0.25s, border-color 0.25s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--gold); border-color: rgba(184,138,68,0.5); }
body[data-page="home"]:not(.entered) .to-top { display: none; }
@media (max-width: 760px) { .to-top { bottom: 22px; left: 20px; width: 38px; height: 38px; } }

/* ═══════════════════════════════════════════════════════════════
   REVISION 13 - denser collection, cleaner hierarchy, Rajasthani tone
   ═══════════════════════════════════════════════════════════════ */

/* (3/8) Gallery sign is now a single clean kicker (no box, no duplication) */
.gallery-sign { display: inline-flex; align-items: center; background: none; border: none; box-shadow: none; padding: 0; margin: 0 0 18px; }
.gallery-sign::before { display: none; }
.gallery-sign-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); }

/* (8C) The Human title becomes the identity anchor of the page */
.section--about .page-title-inline { font-size: clamp(52px, 7.6vw, 104px); line-height: 0.98; letter-spacing: -0.04em; }
.section--about .human-lead { font-size: clamp(17px, 1.7vw, 21px); opacity: 0.82; }

/* (1) Exhibit collection → 4 across, compact crafted frames, even rhythm */
.section--exhibits .exhibit-grid {
  grid-template-columns: repeat(4, 1fr); column-gap: 38px; row-gap: 84px;
}
@media (max-width: 1100px) { .section--exhibits .exhibit-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 72px; } }
@media (max-width: 600px)  { .section--exhibits .exhibit-grid { grid-template-columns: 1fr; row-gap: 64px; } }
.section--exhibits .artifact { padding-top: 32px; }
.section--exhibits .artifact:nth-child(even) { margin-top: 0; }
.section--exhibits .artifact-spot { height: 120px; top: -16px; width: 84%; }
.section--exhibits .frame { padding: 18px; }
.section--exhibits .frame-channel { inset: 10px; }
.section--exhibits .frame-window { box-shadow: 0 0 0 2px rgba(184,138,68,0.5), inset 0 0 16px rgba(0,0,0,0.7); }
.section--exhibits .artifact-img { aspect-ratio: 4 / 5; }
.section--exhibits .artifact-plaque { width: 88%; margin-top: -16px; padding: 11px 12px 13px; }
.section--exhibits .artifact-plaque::before, .section--exhibits .artifact-plaque::after { top: 7px; width: 4px; height: 4px; }
.section--exhibits .plaque-title { font-size: 16px; }
.section--exhibits .plaque-disc { font-size: 8px; letter-spacing: 0.08em; margin-top: 5px; }

/* (7) Footer becomes a faded archival texture, part of the environment */
.footer { position: relative; background: linear-gradient(180deg, transparent 0%, rgba(58,15,24,0.10) 100%); }
.footer-frieze {
  height: 54px; opacity: 0.13; mix-blend-mode: overlay; border-top: 1px solid rgba(184,138,68,0.12);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23E8DCCB' stroke-opacity='0.6' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='42'/%3E%3Ccircle cx='84' cy='0' r='42'/%3E%3Ccircle cx='0' cy='84' r='42'/%3E%3Ccircle cx='84' cy='84' r='42'/%3E%3Ccircle cx='42' cy='42' r='42'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fg)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 72px 72px, 160px 160px; background-repeat: repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* ── Human page consistency fix ───────────────────────────────────
   All three sections share one label style (rule-less gold kicker) and
   the two continuation titles match each other, sitting clearly below
   the 104px page-title identity anchor. */
.section--facets .room-rule, .section--curator .room-rule { display: none; }
.section--facets .room-label, .section--curator .room-label { gap: 0; margin-bottom: 18px; }
.section--facets .room-label p, .section--curator .room-label p { font-size: 11px; letter-spacing: 0.32em; }
.section--facets .facets-head .h2,
.section--curator .curator-left .h2 { font-size: clamp(34px, 4vw, 58px); letter-spacing: -0.04em; line-height: 1.04; }

/* ── Fix: stop section backgrounds bleeding across boundaries ──────
   The parallax overscan (bg layers sized -8% top/bottom) was visible
   because sections didn't clip. Clipping keeps each gallery's wall (and
   its drift) inside its own room - no overlapping bands or footer seam.
   The overscan still absorbs the small parallax travel, so no gaps. */
.section { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   THE CURATOR'S LENS - a frosted crystal-glass viewing orb. Inverted
   optics at its core (kept intact), archival engravings inside, floating
   inertia, a hover glow, and exhibit metadata over artwork.
   ═══════════════════════════════════════════════════════════════ */
.cursor-orb {
  position: fixed; top: 0; left: 0; z-index: 250; pointer-events: none;
  width: 46px; height: 46px; border-radius: 50%;
  /* the kept invert lives on the orb itself (must NOT be a child of the
     transformed element, or the backdrop sampling breaks) */
  -webkit-backdrop-filter: invert(1) blur(0.6px); backdrop-filter: invert(1) blur(0.6px);
  opacity: 0; transition: opacity 0.28s ease,
    width 0.3s cubic-bezier(0.22, 0.9, 0.24, 1), height 0.3s cubic-bezier(0.22, 0.9, 0.24, 1);
  will-change: transform;
  box-shadow: 0 10px 26px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.16);
}
.cursor-orb.show { opacity: 1; }
.cursor-orb > * { position: absolute; inset: 0; border-radius: 50%; }

/* crystal glass surface - kept to the rim + a small light-catch so the
   inverted view reads clearly through the transparent centre */
.orb-glass {
  background:
    radial-gradient(closest-side, transparent 62%, rgba(255,255,255,0.16) 88%, rgba(255,255,255,0.02) 100%),
    radial-gradient(52% 52% at 30% 22%, rgba(255,255,255,0.28), transparent 48%);
  box-shadow:
    inset 0 1px 4px rgba(255,255,255,0.26),
    inset 0 -4px 9px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.16);
  mix-blend-mode: screen; transition: filter 0.4s ease;
}
.orb-engrave { opacity: 0.9; transition: opacity 0.4s ease; }

/* perimeter glow - appears on artwork hover */
.orb-glow {
  inset: -7px; opacity: 0; transition: opacity 0.45s ease, box-shadow 0.45s ease;
  box-shadow: 0 0 0 0 rgba(184,138,68,0);
}

/* states */
.cursor-orb.over-text {
  width: 92px; height: 92px;
  /* invert + fisheye bulge of the text beneath */
  -webkit-backdrop-filter: invert(1) url(#orbFisheye);
          backdrop-filter: invert(1) url(#orbFisheye);
}
.cursor-orb.over-art  { width: 122px; height: 122px; }
.cursor-orb.over-art .orb-glass { filter: brightness(1.06) saturate(1.03); }
.cursor-orb.over-art .orb-engrave { opacity: 1; }
.cursor-orb.over-art .orb-glow {
  opacity: 1; box-shadow: 0 0 30px 7px rgba(184,138,68,0.42), 0 0 14px 2px rgba(255,248,228,0.4);
}

/* the focused artwork receives an elegant spotlight */
.lens-focus img { filter: brightness(1.12) saturate(1.06) contrast(1.03); transition: filter 0.5s ease; }
.lens-focus .frame { transition: box-shadow 0.5s ease; }

@media (hover: none), (pointer: coarse) { .cursor-orb { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-orb { display: none; } }

/* The orb replaces the cursor - hide the system cursor while it's active.
   Gated on .orb-active (added by JS only when the orb is shown), so touch /
   reduced-motion users keep their normal cursor. */
html.orb-active, html.orb-active * { cursor: none !important; }

/* ── Portal: atmospheric depth + architectural edge occlusion ──────
   The carved wall recedes into shadow toward the frame; columns/walls
   imply foreground framing. No blur, no patches - smooth tonal falloff. */
.portal-atmos {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background:
    /* corner ambient occlusion - where walls meet, darkest in the lower corners */
    radial-gradient(78% 66% at 0% 100%,   rgba(4,3,2,0.82), transparent 64%),
    radial-gradient(78% 66% at 100% 100%, rgba(4,3,2,0.82), transparent 64%),
    radial-gradient(66% 56% at 0% 0%,     rgba(4,3,2,0.62), transparent 66%),
    radial-gradient(66% 56% at 100% 0%,   rgba(4,3,2,0.62), transparent 66%),
    /* directional light from above - the floor-side recedes deeper */
    linear-gradient(180deg, transparent 42%, rgba(5,3,2,0.5) 100%),
    /* soft edge occlusion */
    linear-gradient(90deg,  rgba(6,4,3,0.62), transparent 18%),
    linear-gradient(-90deg, rgba(6,4,3,0.62), transparent 18%),
    /* one very large, gentle pool of light around the arch (no hard ring) */
    radial-gradient(150% 125% at 50% 39%, transparent 56%, rgba(7,5,3,0.4) 100%);
}
/* fine grain over the falloff - breaks banding so it reads photographic, not painted */
.portal-atmos::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY - portfolio structure (info · contribution · gallery ·
   curator's note · prev/next nav)
   ═══════════════════════════════════════════════════════════════ */
/* Project information block */
.cs-info {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px;
  padding: 26px 0; margin-bottom: 8px;
  border-top: 1px solid rgba(232,220,203,0.1); border-bottom: 1px solid rgba(232,220,203,0.1);
}
.cs-info-wide { grid-column: 1 / -1; }
.cs-info-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.cs-info-val { font-family: var(--serif); font-size: 17px; color: var(--ivory); line-height: 1.3; }
.cs-info-wide .cs-info-val { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: rgba(232,220,203,0.82); text-transform: uppercase; }
@media (max-width: 560px) { .cs-info { grid-template-columns: 1fr 1fr; } }

/* My contribution */
.cs-contribution p { font-size: 17px; line-height: 1.78; color: rgba(232,220,203,0.86); margin-bottom: 14px; }
.cs-contribution p:first-child { font-size: 19px; color: rgba(232,220,203,0.94); }
.cs-contribution p:last-child { margin-bottom: 0; }

.cs-section-intro { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; line-height: 1.8; text-transform: uppercase; color: rgba(232,220,203,0.5); margin-bottom: 30px; max-width: 540px; }

/* Collection material plates */
.plate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 16px; }
.plate-frame { padding: 11px; background: linear-gradient(135deg, #6e5740, #3a2c1c); box-shadow: 0 0 0 1px #0e0805, 0 30px 42px -24px rgba(0,0,0,0.82); }
.plate-art {
  position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(184,138,68,0.4), inset 0 0 44px rgba(0,0,0,0.6);
  display: flex; align-items: flex-end;
}
.plate-no { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232,220,203,0.62); padding: 10px 12px; }
.plate-label { font-family: var(--serif); font-size: 16px; color: var(--ivory); margin-top: 12px; }

/* Curator's note */
.cs-curator { margin: 6px 0 50px; padding: 30px 32px; border-left: 2px solid var(--gold); background: rgba(90,30,43,0.1); }
.cs-curator p { font-family: var(--serif); font-size: 19px; font-style: italic; line-height: 1.7; color: rgba(232,220,203,0.9); margin-bottom: 16px; }
.cs-curator-sign { font-family: var(--mono) !important; font-style: normal !important; font-size: 10px !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold) !important; margin: 4px 0 0 !important; }

/* Previous / next exhibit navigation */
.cs-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 44px; border-top: 1px solid rgba(232,220,203,0.1); }
.cs-nav-link { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid rgba(232,220,203,0.08); transition: background 0.3s, border-color 0.3s; }
.cs-nav-link:hover { background: rgba(90,30,43,0.22); border-color: rgba(184,138,68,0.32); }
.cs-nav-next { flex-direction: row-reverse; }
.cs-nav-thumb { width: 56px; height: 56px; flex-shrink: 0; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(184,138,68,0.3); }
.cs-nav-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cs-nav-next .cs-nav-text { align-items: flex-end; }
.cs-nav-dir { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.cs-nav-dir svg { width: 12px; height: 12px; }
.cs-nav-name { font-family: var(--serif); font-size: 17px; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 560px) { .cs-nav { grid-template-columns: 1fr; } .cs-nav-next { flex-direction: row; } .cs-nav-next .cs-nav-text { align-items: flex-start; } }

/* ═══════════════════════════════════════════════════════════════
   REVISION 10 - THE CURATOR'S ARCHIVE (project detail page)
   A single flowing narrative of artifacts on a conservation table.
   Replaces the sticky split-screen case-study layout.
   ═══════════════════════════════════════════════════════════════ */

/* Walnut gallery wall - same base, vignette AND interlocking-circles jali
   pattern as the .tex-walnut sections elsewhere (see .section::before), so the
   carved-circle texture reads through exactly as it does on the other pages. */
.project-page { background: var(--walnut); overflow-x: hidden; }
.project-page::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 36%, transparent 56%, rgba(0,0,0,0.32)),
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(184,138,68,0.05), transparent 60%),
    linear-gradient(180deg, #2B1D16 0%, #281520 52%, #221710 100%);
}
.project-page::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%239A5B3D' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='42'/%3E%3Ccircle cx='84' cy='0' r='42'/%3E%3Ccircle cx='0' cy='84' r='42'/%3E%3Ccircle cx='84' cy='84' r='42'/%3E%3Ccircle cx='42' cy='42' r='42'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 86px 86px;
  opacity: 0.05;
}
.arc-toplight {
  position: absolute; top: 0; left: 0; right: 0; height: 70vh; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% -8%, rgba(184,138,68,0.16) 0%, transparent 62%);
}

.archive { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; padding: 132px 32px 56px; }

/* ── Header / title plate - left aligned ──────────────────────── */
.arc-head { max-width: 820px; margin: 0 0 14px; text-align: left; }
.arc-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 44px;
  border: 1px solid rgba(232,220,203,0.14); color: var(--ivory);
  padding: 10px 16px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; transition: opacity 0.2s, border-color 0.2s;
}
.arc-back:hover { opacity: 0.7; border-color: rgba(184,138,68,0.4); }
.arc-back svg { width: 13px; height: 13px; }
.arc-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.arc-title { font-family: var(--serif); font-weight: 700; color: var(--ivory); font-size: clamp(46px, 8vw, 88px); line-height: 0.98; letter-spacing: -0.04em; }
.arc-meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px 48px; margin: 32px 0 30px; padding: 22px 0; border-top: 1px solid rgba(232,220,203,0.1); border-bottom: 1px solid rgba(232,220,203,0.1); }
.arc-meta-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.arc-meta-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.arc-meta-val { font-family: var(--sans); font-size: 15px; color: var(--ivory); letter-spacing: 0.01em; }
.arc-intro { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.7; color: rgba(232,220,203,0.74); max-width: 680px; margin: 0; }

/* ── The single hero image (the only image on the page) ───────── */
.arc-hero { margin: 30px 0 8px; }
.arc-hero-frame {
  position: relative; padding: 12px; background: linear-gradient(135deg, #6e5740, #3a2c1c);
  box-shadow: 0 0 0 1px #0e0805, 0 44px 64px -42px rgba(0,0,0,0.9);
}
.arc-hero-frame img {
  display: block; width: 100%; height: clamp(280px, 46vh, 520px); object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(184,138,68,0.4), inset 0 0 60px rgba(0,0,0,0.5);
}
.arc-hero-cap { margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,220,203,0.5); }

/* ── Sections: heading + paragraphs, left aligned ─────────────── */
.arc-move, .arc-lead, .arc-impact { max-width: 760px; margin: 0; padding: 52px 0; position: relative; border-top: 1px solid rgba(184,138,68,0.08); }
.arc-move-head { display: flex; align-items: baseline; gap: 18px; text-align: left; margin-bottom: 20px; }
.arc-no { font-family: var(--serif); font-size: 30px; color: rgba(184,138,68,0.5); line-height: 1; flex-shrink: 0; }
.arc-move-title { font-family: var(--serif); font-weight: 700; color: var(--ivory); font-size: clamp(26px, 4vw, 40px); line-height: 1.05; }
.arc-text { font-size: 18px; line-height: 1.85; color: rgba(232,220,203,0.82); max-width: 720px; }
.arc-text + .arc-text { margin-top: 18px; }

/* In-section bulleted list (e.g. asset lists, observations) */
.arc-list { list-style: none; margin: 18px 0; max-width: 720px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.arc-list li {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: rgba(232,220,203,0.78);
  padding: 7px 14px; border: 1px solid rgba(184,138,68,0.22); background: rgba(184,138,68,0.05);
}
.arc-text + .arc-list, .arc-list + .arc-text { margin-top: 18px; }

/* Sub-sections within a chapter (e.g. Process & Execution) */
.arc-sub + .arc-sub { margin-top: 34px; }
.arc-sub-title { font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--gold); line-height: 1.2; margin-bottom: 12px; }

/* My Contribution - opening lead block */
.arc-lead-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.arc-lead-label::before { content: ''; width: 22px; height: 1px; background: var(--gold); opacity: 0.55; }
.arc-lead .arc-text:first-of-type { font-size: 21px; line-height: 1.7; color: rgba(232,220,203,0.94); }

/* Design Impact - numbered list */
.arc-impact-list { list-style: none; margin-top: 6px; }
.arc-impact-item { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(232,220,203,0.08); }
.arc-impact-item:first-child { border-top: 1px solid rgba(232,220,203,0.08); }
.arc-impact-no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--gold); padding-top: 6px; flex-shrink: 0; }
.arc-impact-item p { font-size: 18px; line-height: 1.7; color: rgba(232,220,203,0.82); }

/* The conservation table - full page width, each artifact under a spotlight.
   Breaks out of the centered reading column to span the whole viewport. */
.artifact-table {
  position: relative; width: 100vw; max-width: 1600px;
  margin-left: 50%; transform: translateX(-50%);
  padding: 60px clamp(28px, 7vw, 140px) 54px;
  background:
    radial-gradient(ellipse 64% 56% at 50% 30%, rgba(184,138,68,0.12) 0%, transparent 68%),
    linear-gradient(158deg, #241a12 0%, #170f0a 58%, #100a06 100%);
  border-top: 1px solid rgba(184,138,68,0.16);
  border-bottom: 1px solid rgba(184,138,68,0.16);
  box-shadow: inset 0 1px 0 rgba(184,138,68,0.08), inset 0 0 90px rgba(0,0,0,0.5), 0 54px 84px -52px rgba(0,0,0,0.92);
}
.artifact-stage { position: relative; max-width: 1120px; margin: 0 auto; }
.art-svg { display: block; width: 100%; height: auto; }
/* Subtle hand-placed tilt on the artifact paper (table bar stays level) */
.arc-move:nth-child(odd)  .art-svg { transform: rotate(0.5deg); }
.arc-move:nth-child(even) .art-svg { transform: rotate(-0.6deg); }
.art-tag {
  position: absolute; right: 6px; bottom: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(232,220,203,0.5); background: rgba(12,8,5,0.72); border: 1px solid rgba(184,138,68,0.22);
  padding: 6px 10px;
}
/* Brass corner brackets framing the artifact (not the full-width band) */
.tcorner { position: absolute; width: 24px; height: 24px; border: 1.5px solid rgba(184,138,68,0.45); }
.tc-tl { top: -16px; left: -16px; border-right: none; border-bottom: none; }
.tc-tr { top: -16px; right: -16px; border-left: none; border-bottom: none; }
.tc-bl { bottom: -16px; left: -16px; border-right: none; border-top: none; }
.tc-br { bottom: -16px; right: -16px; border-left: none; border-top: none; }

/* Design documentation set beneath the artifact - Context / Design
   Thinking / Outcome, etc. Reads like a designer's archive, not quotes. */
.arc-docset { max-width: 760px; margin: 50px auto 0; }
.arc-doc + .arc-doc { margin-top: 30px; }
.arc-doc-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.arc-doc-label::before { content: ''; width: 22px; height: 1px; background: var(--gold); opacity: 0.55; }
.arc-doc-text { font-size: 17px; line-height: 1.85; color: rgba(232,220,203,0.82); }

/* The single, reflective Curator's Note that closes the archive (no image) */
.arc-curator { max-width: 720px; margin: 0; padding: 32px 38px; border-left: 2px solid var(--gold); background: rgba(90,30,43,0.12); }
.arc-curator p { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.62; color: rgba(232,220,203,0.9); margin-bottom: 16px; }
.arc-curator p:last-of-type { margin-bottom: 0; }
.arc-curator-sign {
  font-family: var(--mono) !important; font-style: normal !important; font-size: 10px !important;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold) !important; margin-top: 18px !important;
}

/* Footer continuation */
.arc-foot { max-width: 760px; margin: 40px auto 0; padding-top: 16px; }
.arc-foot-label { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; }
.arc-foot .cs-nav { border-top: none; padding-top: 0; }

@media (max-width: 680px) {
  .archive { padding-top: 116px; }
  .arc-move, .arc-lead, .arc-impact { padding: 42px 0; }
  .arc-move-head { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-move .art-svg { transform: none; }
  .arc-cue { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   REVISION 12 - EXHIBIT MATERIALS (living museum archive collage)
   Appears after Outcomes, before the Curator's Note. Artifacts are
   spread across a conservation table with depth, tilt, float & parallax.
   ═══════════════════════════════════════════════════════════════ */
.arc-materials { border-top: 1px solid rgba(184,138,68,0.08); padding: 56px 0 72px; }
.arc-materials-intro {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; line-height: 1.9;
  text-transform: uppercase; color: rgba(232,220,203,0.5); max-width: 560px; margin: -4px 0 8px;
}
/* Full-width 3-column masonry (breaks out of the reading column).
   Images keep their natural aspect; nothing is cropped. */
.materials-stage {
  width: 100vw; margin-left: 50%; transform: translateX(-50%); margin-top: 34px;
  column-count: 3; column-gap: 30px;
  padding: 0 clamp(20px, 4vw, 64px);
}
.material { break-inside: avoid; margin-bottom: 30px; opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.material.in { opacity: 1; transform: none; }
.material-art {
  position: relative; padding: 13px;
  background: linear-gradient(158deg, #241a12 0%, #160f0a 70%, #110b07 100%);
  border: 1px solid rgba(184,138,68,0.16);
  box-shadow: inset 0 1px 0 rgba(184,138,68,0.06), 0 40px 56px -38px rgba(0,0,0,0.92);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s;
}
.material:hover .material-art { transform: translateY(-8px); box-shadow: inset 0 1px 0 rgba(184,138,68,0.06), 0 56px 72px -38px rgba(0,0,0,0.95); }
.material-art .art-svg, .material-art img { display: block; width: 100%; height: auto; }
/* Caption hidden on the grid cards (kept in DOM for the lightbox label) */
.material-cap {
  display: none;
  position: absolute; left: 13px; right: 13px; bottom: 13px;
  padding: 28px 16px 14px; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, transparent, rgba(9,6,4,0.92));
}
.material-no { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.material-name { font-family: var(--serif); font-size: 17px; color: var(--ivory); line-height: 1.15; }

@media (max-width: 1000px) { .materials-stage { column-count: 2; column-gap: 24px; } .material { margin-bottom: 24px; } }
@media (max-width: 620px)  { .materials-stage { column-count: 1; padding: 0 20px; } }
@media (prefers-reduced-motion: reduce) {
  .material { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   REVISION 13 - MUSEUM ENDING (reserve collection + close + contact)
   Appears after the Curator's Note on each exhibit. Full-bleed.
   ═══════════════════════════════════════════════════════════════ */
.museum-end { position: relative; z-index: 3; background: #0a0705; overflow: hidden; }

/* Slow transition into the darker, quieter reserve wing */
.mend-transition { position: relative; height: clamp(240px, 40vh, 440px); }
.mend-rays {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 90% at 28% -16%, rgba(184,138,68,0.12), transparent 60%),
    radial-gradient(ellipse 38% 80% at 70% -16%, rgba(184,138,68,0.08), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(8,5,3,0.55) 46%, #0a0705 100%);
}
.mend-dustfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mend-dust {
  position: absolute; bottom: -12px; width: var(--sz, 2px); height: var(--sz, 2px); border-radius: 50%;
  background: rgba(232,220,203,0.8); animation: mendDust linear infinite;
}
@keyframes mendDust {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 1; } 88% { opacity: 1; }
  100% { transform: translateY(-400px) translateX(22px); opacity: 0; }
}

/* Section heading */
.mend-head { position: relative; z-index: 2; max-width: 900px; margin: -56px auto 0; padding: 0 32px; text-align: center; }
.mend-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.mend-title { font-family: var(--serif); font-weight: 700; color: var(--ivory); font-size: clamp(40px, 7.4vw, 80px); line-height: 0.98; letter-spacing: -0.04em; }
.mend-intro { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2vw, 20px); line-height: 1.7; color: rgba(232,220,203,0.6); max-width: 600px; margin: 26px auto 0; }

/* The archive wall - infinite, slow, seamless horizontal drift */
.archive-wall {
  position: relative; overflow: hidden; margin-top: 60px; padding: 36px 0 52px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.archive-track { display: flex; align-items: center; width: max-content; height: 300px; animation: archiveScroll 150s linear infinite; will-change: transform; }
.archive-track--b { animation-direction: reverse; margin-top: 16px; }
@keyframes archiveScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Passive, non-interactive artifacts - atmosphere and scale only */
.archive-piece { position: relative; flex: 0 0 auto; margin-right: 54px; pointer-events: none; }
.archive-piece[data-i="0"] { width: 288px; transform: translateY(0)    rotate(-2deg);  z-index: 3; }
.archive-piece[data-i="1"] { width: 232px; transform: translateY(30px) rotate(1.6deg); z-index: 2; margin-left: -28px; }
.archive-piece[data-i="2"] { width: 320px; transform: translateY(-18px) rotate(2.2deg); z-index: 5; }
.archive-piece[data-i="3"] { width: 252px; transform: translateY(34px) rotate(-1.6deg); z-index: 4; margin-left: -24px; }
.archive-piece[data-i="4"] { width: 300px; transform: translateY(-8px) rotate(1deg);  z-index: 3; }
.archive-piece[data-i="5"] { width: 264px; transform: translateY(22px) rotate(-2.2deg); z-index: 6; margin-left: -32px; }

.archive-card {
  position: relative; padding: 13px;
  background: linear-gradient(158deg, #241a12 0%, #160f0a 70%, #110b07 100%);
  border: 1px solid rgba(184,138,68,0.16);
  box-shadow: 0 34px 50px -32px rgba(0,0,0,0.92);
}
.archive-card .art-svg { display: block; width: 100%; height: auto; }

/* Closing statement */
.mend-closing { text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.4; color: rgba(232,220,203,0.84); max-width: 760px; margin: 20px auto 0; padding: 0 32px; }

/* Final contact - clean and confident */
.mend-contact { text-align: center; padding: 96px 32px 116px; }
.mend-contact-title { font-family: var(--serif); font-weight: 700; color: var(--ivory); font-size: clamp(34px, 6.2vw, 70px); line-height: 1.0; letter-spacing: -0.04em; }
.mend-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 42px; }
.mend-link {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px;
  border: 1px solid rgba(184,138,68,0.3); color: var(--ivory);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s;
}
.mend-link:hover { background: rgba(184,138,68,0.12); border-color: var(--gold); }
.mend-link svg { width: 13px; height: 13px; opacity: 0.7; }

@media (max-width: 760px) {
  .archive-track { height: 240px; animation-duration: 110s; }
  .archive-piece { margin-right: 34px; }
  .mend-contact { padding: 72px 24px 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .archive-track { animation: none; }
  .mend-dust { display: none; }
}

/* ── Exhibits page - one project per row (curated list) ─────────── */
.exhibit-list { display: flex; flex-direction: column; margin-top: 10px; }
.exhibit-row {
  display: grid; grid-template-columns: 60px minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 40px; align-items: center; padding: 42px 0;
  border-top: 1px solid rgba(184,138,68,0.14);
}
.exhibit-row:last-child { border-bottom: 1px solid rgba(184,138,68,0.14); }
.exhibit-row-no { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); color: rgba(184,138,68,0.5); line-height: 1; }
.exhibit-row-frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #0e0a07;
  box-shadow: 0 0 0 1px rgba(184,138,68,0.22), 0 32px 52px -34px rgba(0,0,0,0.9);
}
.exhibit-row-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.exhibit-row-glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,255,0.06), transparent 42%), radial-gradient(120% 80% at 50% 0%, rgba(184,138,68,0.12), transparent 60%);
}
.exhibit-row-meta { display: flex; flex-direction: column; gap: 12px; }
.exhibit-row-title { font-family: var(--serif); font-weight: 700; color: var(--ivory); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.02; transition: color 0.3s; }
.exhibit-row-disc { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.exhibit-row-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232,220,203,0.55); transition: color 0.3s, gap 0.3s; }
.exhibit-row-cta svg { width: 13px; height: 13px; }
.exhibit-row:hover .exhibit-row-img { transform: scale(1.05); }
.exhibit-row:hover .exhibit-row-title { color: var(--gold); }
.exhibit-row:hover .exhibit-row-cta { color: var(--ivory); gap: 14px; }
@media (max-width: 760px) {
  .exhibit-row { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; }
  .exhibit-row-no { font-size: 22px; }
}

/* ── Exhibit Materials - clickable cards open a fullscreen viewer ── */
.material { cursor: pointer; }
.material:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

/* Fullscreen artifact lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s ease;
}
.lightbox.open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(8,5,4,0.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; }
.lightbox-stage {
  position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px;
  max-width: 94vw; transform: scale(0.95); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.lightbox.open .lightbox-stage { transform: scale(1); }
.lightbox-art { display: flex; }
.lightbox-art .art-svg {
  display: block; width: min(90vw, 1100px, calc(80vh * 1.391)); height: auto;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.92);
}
.lightbox-art img {
  display: block; width: auto; height: auto; max-width: min(94vw, 1280px); max-height: 86vh;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.92);
}
.lightbox-cap { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.lightbox-no { font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.lightbox-name { font-family: var(--serif); font-size: 20px; color: var(--ivory); }
.lightbox-close, .lightbox-nav {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(232,220,203,0.2); background: rgba(12,8,5,0.5); color: var(--ivory);
  cursor: pointer; transition: background 0.3s, border-color 0.3s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(90,30,43,0.45); border-color: var(--gold); }
.lightbox-close { top: 26px; right: 26px; width: 46px; height: 46px; }
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox-nav svg { width: 18px; height: 18px; }
.lightbox-prev { left: 26px; }
.lightbox-next { right: 26px; }
@media (max-width: 640px) {
  .lightbox-art .art-svg, .lightbox-art img { width: 92vw; max-width: 92vw; }
  .lightbox-close { top: 16px; right: 16px; width: 42px; height: 42px; }
  .lightbox-nav { top: auto; bottom: 22px; transform: none; width: 44px; height: 44px; }
  .lightbox-prev { left: 24px; }
  .lightbox-next { right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-stage { transition: none; }
}

/* ── Home hero (replaces the cinematic portal walk) ───────────── */
.home-hero {
  position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 150px 28px 96px; overflow: hidden; background: var(--charcoal);
}
.home-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 56% 60% at 50% 30%, rgba(184,138,68,0.13), transparent 64%),
    radial-gradient(ellipse 90% 55% at 50% 105%, rgba(90,30,43,0.28), transparent 72%),
    linear-gradient(180deg, var(--charcoal) 0%, #170d11 55%, var(--charcoal) 100%);
}
/* Same interlocking-circles jali pattern as the rest of the site (.section::before) */
.home-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23E8DCCB' stroke-opacity='0.5' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='42'/%3E%3Ccircle cx='84' cy='0' r='42'/%3E%3Ccircle cx='0' cy='84' r='42'/%3E%3Ccircle cx='84' cy='84' r='42'/%3E%3Ccircle cx='42' cy='42' r='42'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 86px 86px, 200px 200px;
  mix-blend-mode: overlay; opacity: 0.34;
}
.home-hero-inner { position: relative; z-index: 1; max-width: 920px; }
.home-hero-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 30px;
}
.home-hero-title {
  font-family: var(--serif); font-weight: 700; color: var(--ivory);
  font-size: clamp(64px, 13vw, 156px); line-height: 0.9; letter-spacing: -0.04em;
}
.home-hero-sub {
  font-family: var(--mono); font-size: clamp(11px, 1.5vw, 14px); letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(232,220,203,0.6); margin-top: 28px;
}
.home-hero-cta { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: center; align-items: center; margin-top: 48px; }

/* ── Human page - "Galleries Inside My Head" list ─────────────── */
.human-galleries { margin-top: 18px; }
.human-gallery { display: flex; flex-direction: column; gap: 4px; }
.human-gname { font-family: var(--serif); font-size: 20px; color: var(--ivory); line-height: 1.1; }
.human-gdesc { font-size: 16px; line-height: 1.65; color: rgba(232,220,203,0.66); }

/* ═══════════════════════════════════════════════════════════════
   HUMAN PAGE — Curator Dossier (portrait + artifact card grid)
   ═══════════════════════════════════════════════════════════════ */
.curator-dossier { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 132px 32px 72px; }
.dossier-head { max-width: 760px; margin: 0 0 44px; text-align: left; }
.dossier-intro { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2vw, 20px); line-height: 1.7; color: rgba(232,220,203,0.7); max-width: 620px; margin: 22px 0 0; }

.dossier-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 920px) { .dossier-grid { grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.3fr); gap: 52px; } }

/* Portrait — sticky on desktop, stacks on mobile */
.dossier-portrait { position: static; }
@media (min-width: 920px) { .dossier-portrait { position: sticky; top: 96px; } }
.portrait-mount {
  padding: 12px; background: linear-gradient(135deg, #6e5740, #3a2c1c);
  box-shadow: 0 0 0 1px #0e0805, 0 44px 64px -42px rgba(0,0,0,0.9);
}
.portrait-img {
  aspect-ratio: 3 / 4; background-size: cover; background-position: center top;
  background-color: #1c140d;
  box-shadow: inset 0 0 0 1px rgba(184,138,68,0.4), inset 0 0 60px rgba(0,0,0,0.5);
}
.portrait-plate { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--gold); }
.portrait-plate-id { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.portrait-plate-name { font-family: var(--serif); font-size: 26px; color: var(--ivory); line-height: 1.1; }
.portrait-plate-note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,220,203,0.5); margin-top: 8px; }

/* Artifact cards — museum catalog aesthetic */
/* Single column so the cards form a tall scrolling route beside the
   sticky portrait (and the vertical museum line connects them). */
.dossier-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
.artifact-card {
  position: relative; overflow: hidden; padding: 22px 22px 24px;
  background: linear-gradient(158deg, #241a12 0%, #180f0a 72%, #130c07 100%);
  border: 1px solid rgba(184,138,68,0.18);
  box-shadow: inset 0 1px 0 rgba(184,138,68,0.06), 0 30px 44px -34px rgba(0,0,0,0.85);
}
.artifact-card::after { /* subtle paper grain */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}
.artifact-card-head {
  position: relative; z-index: 1; display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid rgba(184,138,68,0.2);
}
.artifact-card-no { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--gold); flex-shrink: 0; }
.artifact-card-label { font-family: var(--serif); font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); color: var(--ivory); line-height: 1.1; }
.artifact-card-text { position: relative; z-index: 1; font-size: 15px; line-height: 1.7; color: rgba(232,220,203,0.8); }

@media (max-width: 560px) { .curator-dossier { padding-top: 116px; } }

/* ── Human page — professional wing (placard · timeline · doorway) ── */
.current-exhibit { max-width: 980px; margin: 72px 0 0; padding-top: 60px; border-top: 1px solid rgba(184,138,68,0.18); }

/* Current Exhibit — brass museum placard */
.placard {
  position: relative; padding: 32px 34px 34px;
  background: linear-gradient(158deg, #2a1f14 0%, #1a1009 100%);
  border: 1px solid rgba(184,138,68,0.3);
  box-shadow: inset 0 1px 0 rgba(184,138,68,0.1), 0 32px 52px -38px rgba(0,0,0,0.85);
}
.placard::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(184,138,68,0.16); pointer-events: none; }
.placard-label {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid rgba(184,138,68,0.24);
}
.placard-body { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .placard-body { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; } }
.placard-role { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); color: var(--ivory); line-height: 1.04; }
.placard-org { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-top: 12px; }
.placard-desc { font-size: 16px; line-height: 1.72; color: rgba(232,220,203,0.8); }

/* Timeline preview — scannable route */
.timeline-preview { max-width: 980px; margin: 44px 0 0; }
.tp-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.tp-list { list-style: none; }
.tp-row { display: grid; grid-template-columns: 128px 1fr; gap: 26px; align-items: baseline; padding: 15px 2px; border-top: 1px solid rgba(232,220,203,0.08); transition: background 0.3s; }
.tp-row:last-child { border-bottom: 1px solid rgba(232,220,203,0.08); }
.tp-year { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--gold); }
.tp-title { font-family: var(--serif); font-size: clamp(17px, 2vw, 21px); color: var(--ivory); }
@media (max-width: 520px) { .tp-row { grid-template-columns: 1fr; gap: 3px; } }

/* Gallery transition — a doorway into the Journey */
.gallery-transition {
  position: relative; max-width: 980px; margin: 64px 0 0; padding: 58px 40px 54px; text-align: center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(184,138,68,0.12), transparent 66%),
    linear-gradient(158deg, #271c12 0%, #160d08 100%);
  border: 1px solid rgba(184,138,68,0.26);
}
.gallery-transition::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(184,138,68,0.14); pointer-events: none; }
.gt-eyebrow { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.gt-lead { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2vw, 19px); color: rgba(232,220,203,0.72); max-width: 540px; margin: 0 auto 22px; line-height: 1.6; }
.gt-title { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 5vw, 52px); color: var(--ivory); line-height: 1.02; }
.gt-desc { font-size: 16px; line-height: 1.7; color: rgba(232,220,203,0.66); max-width: 560px; margin: 18px auto 0; }
.gt-cta {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 38px;
  padding: 18px 34px; border: 1px solid rgba(184,138,68,0.42); color: var(--ivory);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  background: rgba(184,138,68,0.06); transition: background 0.35s, border-color 0.35s, gap 0.35s;
}
.gt-cta:hover { background: rgba(184,138,68,0.16); border-color: var(--gold); gap: 20px; }
.gt-cta svg { width: 15px; height: 15px; }

/* ── Human page — sticky curator enhancements ─────────────────── */
/* The overflow-x:hidden on .project-page breaks position:sticky; the
   Human page has no full-bleed elements, so let it scroll normally. */
body[data-page="about"] .project-page { overflow: visible; }

/* Small "Current Exhibit" badge beneath the portrait */
.portrait-current {
  margin-top: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid rgba(184,138,68,0.22); background: rgba(184,138,68,0.05);
}
.pc-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.pc-role { font-family: var(--serif); font-size: 19px; color: var(--ivory); line-height: 1.1; }
.pc-period { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(232,220,203,0.6); }

/* Vertical museum line connecting the curator cards */
.dossier-cards { position: relative; }
@media (min-width: 920px) {
  .dossier-cards::before {
    content: ''; position: absolute; left: -27px; top: 4px; bottom: 4px; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(184,138,68,0.42) 9%, rgba(184,138,68,0.42) 91%, transparent);
  }
}

/* Active card — highlighted as it enters the viewport */
.artifact-card { transition: border-color 0.45s ease, box-shadow 0.45s ease; }
.artifact-card.active { border-color: rgba(184,138,68,0.55); box-shadow: inset 0 1px 0 rgba(184,138,68,0.12), 0 30px 44px -34px rgba(0,0,0,0.85), 0 0 22px -6px rgba(184,138,68,0.25); }
.artifact-card-no { transition: color 0.45s ease; }
.artifact-card.active .artifact-card-no { color: #f1d6a0; }

/* Gallery transition — centered doorway with extra air */
.gallery-transition { margin-left: auto; margin-right: auto; }
.gt-centered { margin-top: 84px; padding: 74px 40px 70px; }

/* Contact-only ending (Archive Collection hidden) */
.museum-end--contact { border-top: 1px solid rgba(184,138,68,0.12); background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(184,138,68,0.06), transparent 60%), #0a0705; }

/* ── Human page — "Continue The Visit" dual-path crossroads ────── */
.continue-visit { max-width: 980px; margin: 72px 0 0; padding-top: 60px; border-top: 1px solid rgba(184,138,68,0.18); }
.cv-head { margin-bottom: 30px; }
.cv-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.cv-copy { font-family: var(--serif); font-size: clamp(16px, 2vw, 20px); line-height: 1.6; color: rgba(232,220,203,0.74); max-width: 600px; }
.cv-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 680px) { .cv-grid { grid-template-columns: 1fr 1fr; } }

/* Direction-sign cards */
.cv-card {
  position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 30px 28px 26px;
  background: linear-gradient(158deg, #271c12 0%, #160d08 100%);
  border: 1px solid rgba(184,138,68,0.26);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s, box-shadow 0.4s;
}
.cv-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(184,138,68,0.14); pointer-events: none; }
.cv-card:hover { transform: translateY(-4px); border-color: rgba(184,138,68,0.5); box-shadow: 0 30px 46px -34px rgba(0,0,0,0.85); }
.cv-card-no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--gold); }
.cv-card-title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3vw, 32px); color: var(--ivory); margin: 14px 0 12px; line-height: 1.04; }
.cv-card-desc { font-size: 15px; line-height: 1.65; color: rgba(232,220,203,0.72); flex: 1; }
.cv-card-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); transition: gap 0.35s, color 0.35s; }
.cv-card-cta svg { width: 14px; height: 14px; }
.cv-card:hover .cv-card-cta { color: var(--ivory); gap: 16px; }

/* ── Impact & Results — large museum-plaque stat displays ──────── */
.impact-results { max-width: 980px; margin: 0; padding: 56px 0; border-top: 1px solid rgba(184,138,68,0.08); }
.ir-stats { display: flex; flex-wrap: wrap; gap: 44px 72px; margin: 10px 0 40px; }
.ir-stat { display: flex; flex-direction: column; gap: 12px; }
.ir-value {
  font-family: var(--serif); font-weight: 700; color: var(--ivory);
  font-size: clamp(46px, 8vw, 92px); line-height: 0.92; letter-spacing: -0.04em;
}
.ir-value--text { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.05; max-width: 9ch; }
.ir-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); max-width: 240px; line-height: 1.4;
}
.ir-context { max-width: 680px; }
.ir-context p { font-size: 17px; line-height: 1.8; color: rgba(232,220,203,0.78); }
.ir-context p + p { margin-top: 16px; }