*{box-sizing:border-box} html,body{margin:0;min-height:100%}
[hidden]{display:none !important;}
:root{
  --bg:#090909;
  --text:#f2efe8;
  --muted:#c4beb4;
  --line:rgba(255,255,255,.09);
  --accent-glow:rgba(132, 177, 112, .28);
  --shadow:0 22px 64px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(158,198,138,.08), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.035), transparent 16%),
    linear-gradient(180deg, #17171d 0%, #0d0d11 42%, #090909 100%);
}
.grain{position:fixed; inset:0; pointer-events:none; opacity:.07;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.28) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.16) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.14) 0 1px, transparent 1px);
  background-size:180px 180px, 220px 220px, 160px 160px;
}
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:flex-end; justify-content:space-between;
  padding:22px 30px 18px; border-bottom:1px solid var(--line); background:rgba(8,8,10,.74); backdrop-filter:blur(16px);}
.eyebrow,.character-kicker,.panel-kicker,.detail-type,.fact-label{margin:0; text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--muted);}
h1,h2,h3{margin:0; font-family:"Cormorant Garamond",serif}
h1{font-size:2.2rem}
main{padding:28px 28px 42px}
.ghost-btn{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); border-radius:999px; padding:12px 18px; cursor:pointer;}
.preview-stage{min-height:calc(100vh - 145px); display:grid; grid-template-columns:minmax(300px,460px) minmax(360px,560px); gap:42px; align-items:center;}
.preview-copy h2{font-size:3.1rem; line-height:.94; margin:.18rem 0 .9rem}
.lede{max-width:38rem; color:var(--muted); line-height:1.75}
.preview-card{position:relative; min-height:620px; border:none; cursor:pointer; border-radius:34px; overflow:hidden;
  background:linear-gradient(180deg, rgba(22,22,26,.96), rgba(11,11,14,.98)), radial-gradient(circle at 50% 32%, rgba(151,190,131,.12), transparent 34%);
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.08);}
.preview-card__frame{position:absolute; inset:24px; border:1px solid rgba(255,255,255,.06); border-radius:26px;}
.preview-card__image{position:absolute; left:50%; bottom:98px; transform:translateX(-50%); width:min(72%, 420px); max-height:430px; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.42));}
.preview-card__copy{position:absolute; left:0; right:0; bottom:0; padding:24px 28px 26px; background:linear-gradient(180deg, transparent, rgba(10,10,12,.9));}
.preview-card__copy h3{font-size:2.2rem}
.preview-card__copy p{margin:.42rem 0 0; color:var(--muted)}

.museum-shell{min-height:calc(100vh - 175px); display:grid; grid-template-columns:58% 42%; border-radius:34px; overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); background:linear-gradient(180deg, rgba(18,18,22,.95), rgba(10,10,12,.98)); position:relative;}
.museum-grid{position:absolute; inset:0; pointer-events:none; opacity:.14;
  background:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:120px 120px; mask-image:linear-gradient(180deg, rgba(0,0,0,.7), transparent 95%);}
.museum-left,.museum-right{position:relative; min-height:780px}
.museum-left{padding:24px 12px 24px 18px; background:radial-gradient(circle at 34% 32%, rgba(255,255,255,.05), transparent 30%), linear-gradient(180deg, rgba(18,18,22,.18), rgba(12,12,14,.22));}
.spotlight{position:absolute; left:14%; top:10%; width:52%; height:68%; background:radial-gradient(circle at 50% 40%, rgba(191, 221, 176, .08), rgba(255,255,255,.01) 42%, transparent 72%); filter:blur(4px); pointer-events:none;}
.jasmine-fullbody{position:absolute; left:16%; bottom:0; height:min(84vh, 830px); max-width:none; filter:drop-shadow(0 22px 32px rgba(0,0,0,.42));}
.relic{position:absolute; background:transparent; border:none; padding:0; cursor:pointer; z-index:4; transition:transform .28s ease, filter .28s ease, opacity .28s ease; filter:drop-shadow(0 12px 24px rgba(0,0,0,.28));}
.relic img{display:block; width:100%; height:auto}
.relic:hover,.relic.active{transform:translateY(-4px) scale(1.03); filter:drop-shadow(0 0 16px var(--accent-glow)) drop-shadow(0 12px 24px rgba(0,0,0,.28));}
.relic-label{position:absolute; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#ddd6ce; white-space:nowrap;}
.relic-line{position:absolute; height:1px; background:rgba(255,255,255,.26);}
.relic-dot{position:absolute; width:8px; height:8px; border-radius:50%; background:#f0ece5; box-shadow:0 0 0 5px rgba(255,255,255,.06);}

.relic-core{left:31%; top:12%; width:42px}
.relic-core .relic-label{left:-4px; top:-28px}
.relic-core .relic-line{left:16px; top:-2px; width:142px; transform:rotate(16deg)}
.relic-core .relic-dot{left:156px; top:-12px}

.relic-rod{left:50%; top:19%; width:116px}
.relic-rod .relic-label{left:76px; top:-18px}
.relic-rod .relic-line{left:18px; top:58px; width:110px; transform:rotate(-6deg)}
.relic-rod .relic-dot{left:124px; top:50px}

.relic-eye{left:5%; top:56%; width:150px}
.relic-eye .relic-label{left:0; top:-24px}
.relic-eye .relic-line{left:94px; top:52px; width:72px; transform:rotate(-10deg)}
.relic-eye .relic-dot{left:164px; top:44px}

.museum-right{padding:30px 28px 24px 6px; background:radial-gradient(circle at 74% 24%, rgba(255,255,255,.04), transparent 18%), linear-gradient(180deg, rgba(16,16,20,.2), rgba(10,10,12,.3));}
.life-ring{position:absolute; right:18%; top:13%; width:260px; height:260px; border-radius:50%; border:1px solid rgba(201, 222, 182, .16); box-shadow:0 0 0 18px rgba(201, 222, 182, .03), 0 0 0 46px rgba(201, 222, 182, .02); opacity:.55;}
.dossier-panel{position:absolute; right:7%; top:12%; width:min(34vw, 500px); padding:30px 30px 24px; border-radius:28px; background:linear-gradient(180deg, rgba(14,14,16,.82), rgba(12,12,14,.92)); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(20px); box-shadow:var(--shadow);}
.dossier-panel h2{font-size:3rem; line-height:.95; margin:.35rem 0 1rem}
.fact-list{display:grid; gap:12px; margin-bottom:22px}
.fact-row{display:grid; gap:4px; padding:12px 14px; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(255,255,255,.03);}
.fact-value{font-size:1rem; color:#eee9df; font-weight:600}
.detail-block{margin-top:10px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08)}
.detail-type{margin-bottom:8px}
.detail-block h3{font-size:2rem; margin-bottom:10px}
.detail-body{margin:0; color:var(--muted); line-height:1.75}
.detail-block ul{margin:18px 0 0; padding-left:18px}
.detail-block li{margin:8px 0; color:#ebe6de}
.small-note{margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.07); color:#c5bdb1; line-height:1.65; font-size:.94rem;}

@media (max-width: 1180px){
  .preview-stage{grid-template-columns:1fr; min-height:auto}
  .museum-shell{grid-template-columns:1fr}
  .museum-left,.museum-right{min-height:unset}
  .museum-left{min-height:740px}
  .jasmine-fullbody{left:10%; height:68vh}
  .museum-right{padding:18px 18px 24px; min-height:760px}
  .dossier-panel{position:relative; right:auto; top:auto; width:100%; max-width:560px; margin-left:auto}
  .life-ring{right:12%; top:8%}
}
@media (max-width: 760px){
  .topbar{padding:18px 18px 16px}
  main{padding:18px}
  .preview-card{min-height:520px}
  .preview-card__image{width:min(78%, 330px); max-height:340px}
  .preview-card__copy h3{font-size:1.9rem}
  .museum-left{min-height:620px}
  .jasmine-fullbody{left:8%; height:55vh}
  .relic-core{left:32%; top:12%; width:34px}
  .relic-core .relic-line{width:92px}
  .relic-core .relic-dot{left:106px}
  .relic-rod{left:54%; top:20%; width:94px}
  .relic-rod .relic-label{left:56px}
  .relic-rod .relic-line{width:72px}
  .relic-rod .relic-dot{left:87px}
  .relic-eye{left:1%; top:58%; width:118px}
  .relic-eye .relic-line{width:52px}
  .relic-eye .relic-dot{left:124px}
  .dossier-panel h2{font-size:2.4rem}
  .life-ring{width:180px; height:180px; right:8%; top:8%}
}


.topbar-actions{display:flex;align-items:center;gap:10px}
.home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  text-decoration:none;
  font-size:.92rem;
}
.home-link:hover{background:rgba(255,255,255,.08)}