@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap');

:root {
  --paper: #f5f0e7;
  --gold: #b4863a;
  --black: #0e0d0c;
}

*, *::before, *::after { box-sizing: border-box }
html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden }
body { margin: 0; font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; line-height: 1.5 }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px }
img { max-width: 100%; display: block }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }

/* ─── LANDING PAGE (unchanged) ─── */
body.landing-v2-body { background: #070605; overflow: hidden }
.landing-v2 { position: relative; min-height: 100svh; width: 100%; overflow: hidden; background: #070605; display: grid; place-items: center }
.landing-v2-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.92) contrast(1.05) brightness(.74); transform: scale(1.015) }
.landing-v2-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%,rgba(0,0,0,.02),rgba(0,0,0,.42) 62%,rgba(0,0,0,.74) 100%),linear-gradient(90deg,rgba(0,0,0,.56),rgba(0,0,0,.08) 35%,rgba(0,0,0,.08) 65%,rgba(0,0,0,.56)) }
.landing-mark { position: absolute; top: clamp(18px,3.4vw,38px); left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(245,240,231,.92); text-decoration: none; font-size: clamp(13px,1.4vw,18px); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; text-align: center; text-shadow: 0 2px 22px rgba(0,0,0,.55); white-space: nowrap }
.landing-choices { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr }
.landing-choice { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; color: rgba(245,240,231,.86); text-decoration: none; isolation: isolate; outline-offset: -12px }
.landing-choice::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; background: rgba(0,0,0,.22); z-index: -1 }
.landing-choice:hover::before, .landing-choice:focus-visible::before { opacity: 1 }
.landing-choice .choice-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(9px,1.2vw,15px); width: min(40vw,520px); min-height: clamp(116px,17vw,178px); padding: clamp(18px,3vw,30px) clamp(20px,3.5vw,42px); border: 1px solid rgba(245,240,231,.52); background: rgba(10,8,7,.30); backdrop-filter: blur(5px); box-shadow: 0 18px 50px rgba(0,0,0,.22); text-align: center; text-transform: uppercase; text-shadow: 0 3px 28px rgba(0,0,0,.78); transition: transform .2s ease,background .2s ease,border-color .2s ease }
.landing-choice .choice-card strong { display: block; font-size: clamp(20px,3.2vw,44px); line-height: .98; font-weight: 650; letter-spacing: -.035em }
.landing-choice .choice-card em { display: block; font-style: normal; font-size: clamp(12px,1.05vw,16px); line-height: 1.15; font-weight: 500; letter-spacing: .08em; color: rgba(245,240,231,.72) }
.landing-choice:hover .choice-card, .landing-choice:focus-visible .choice-card { transform: translateY(-3px); background: rgba(10,8,7,.52); border-color: rgba(245,240,231,.85) }
.work-choice { border-right: 1px solid rgba(245,240,231,.20) }
.lost-choice .choice-card { color: #f5e7c8; border-color: rgba(180,134,58,.70) }
.landing-choice { overflow: hidden }
.landing-choice .choice-card { position: relative; z-index: 4 }
.choice-scene { position: absolute; inset: 0; pointer-events: none; z-index: 3 }
.scene-actor { position: absolute; display: block; max-width: none; background: transparent !important; filter: drop-shadow(0 12px 28px rgba(0,0,0,.38)); opacity: 0 }
.lost-choice { overflow: hidden }
.monster-actor { width: min(26vw,300px); left: 50%; bottom: calc(50% - 12px); top: auto; transform: translateX(-50%) translateY(100%) scaleX(-1) scale(.92); transform-origin: center bottom; transition: transform .35s cubic-bezier(.22,.8,.28,1),opacity .3s ease }
.lost-choice:hover .monster-actor, .lost-choice:focus-visible .monster-actor { opacity: 1; transform: translateX(-50%) translateY(0%) scaleX(-1) scale(1); animation: monster-idle 2.4s ease-in-out infinite }
.lost-choice.is-animating .monster-actor { opacity: 1; animation: monster-enter 0.55s cubic-bezier(.22,.8,.28,1) forwards }
@keyframes monster-idle { 0%,100%{transform:translateX(-50%) translateY(0%) scaleX(-1) scale(1) rotate(0deg)}30%{transform:translateX(-50%) translateY(-6%) scaleX(-1) scale(1.03) rotate(2deg)}60%{transform:translateX(-50%) translateY(-4%) scaleX(-1) scale(1.01) rotate(-1.5deg)} }
@keyframes monster-enter { 0%{opacity:1;transform:translateX(-50%) translateY(0%) scaleX(-1) scale(1) rotate(0deg)}40%{transform:translateX(-50%) translateY(-18%) scaleX(-1) scale(1.08) rotate(3deg)}100%{opacity:1;transform:translateX(-50%) translateY(-10%) scaleX(-1) scale(1.05) rotate(0deg)} }

/* ─── RESPONSIVE ─── */
@media(max-width:960px) {
  .hero, .split, .contact-layout { grid-template-columns: 1fr }
  .hero-card { max-width: 560px }
  .exhibits-grid { grid-template-columns: 1fr 1fr }
  .section-head { display: block; margin-bottom: 22px }
  .section-head p { margin-top: 10px }
  .work-section-head { grid-template-columns: 1fr }
  .card, .card.wide { grid-column: 1/-1 }
  .cat-nav a { padding: 12px 14px 10px; font-size: 10px }
  .landing-choices { grid-template-columns: 1fr; align-content: center; gap: 14px; padding: 86px 18px 34px }
  .landing-choice { min-height: 34svh; border: 0 }
  .work-choice { border-right: 0; border-bottom: 1px solid rgba(245,240,231,.18) }
  .landing-choice .choice-card { width: min(86vw,460px); min-height: 118px }
  body.landing-v2-body { overflow: auto }
  .landing-v2 { min-height: 100svh }
  .monster-actor { width: min(50vw,220px) }
}
@media(max-width:640px) {
  .nav { padding: 11px 16px }
  .nav-links { font-size: 10px; gap: 10px }
  .masonry { columns: 2 120px }
  .actions { display: grid }
  .button { width: 100%; text-align: center }
  .list li { grid-template-columns: 1fr; gap: 3px }
  .contact-row { grid-template-columns: 1fr; gap: 3px }
  .exhibits-grid { grid-template-columns: 1fr }
  .highlight-band-inner { flex-direction: column }
  .card .card-img-wrap img { aspect-ratio: 3/2 }
}
@media(max-width:400px) { .masonry { columns: 1 } }
@media(prefers-reduced-motion:reduce) { .scene-actor { display: none } .masonry-item img, .card-img-wrap img { transition: none } }