*{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(164, 60, 60, .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(120,40,40,.09), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.03), 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(140,40,40,.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:.12;
  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,.045), transparent 30%),
    linear-gradient(180deg, rgba(18,18,22,.18), rgba(12,12,14,.22));
}
.cold-halo{
  position:absolute; left:14%; top:12%; width:48%; height:66%;
  background:radial-gradient(circle at 50% 40%, rgba(200,210,220,.055), rgba(255,255,255,.01) 42%, transparent 72%);
  filter:blur(4px); pointer-events:none;
}
.crowd{
  position:absolute; border-radius:999px; border:1px solid rgba(190,190,200,.09);
  pointer-events:none;
}
.crowd-a{width:270px; height:270px; right:8%; top:14%; opacity:.4}
.crowd-b{width:390px; height:390px; right:-4%; top:2%; opacity:.18}
.cain-fullbody{
  position:absolute; left:18%; 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-amulet{left:26%; top:10%; width:116px}
.relic-amulet .relic-label{left:-4px; top:-28px}
.relic-amulet .relic-line{left:48px; top:-4px; width:132px; transform:rotate(12deg)}
.relic-amulet .relic-dot{left:174px; top:-12px}

.relic-mark{left:54%; top:18%; width:190px}
.relic-mark .relic-label{left:94px; top:-18px}
.relic-mark .relic-line{left:20px; top:88px; width:118px; transform:rotate(-8deg)}
.relic-mark .relic-dot{left:134px; top:78px}

.relic-glove{left:8%; top:54%; width:144px}
.relic-glove .relic-label{left:0; top:-24px}
.relic-glove .relic-line{left:102px; top:46px; width:78px; transform:rotate(-10deg)}
.relic-glove .relic-dot{left:178px; top:38px}

.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));
}
.static-band{
  position:absolute; height:1px; left:12%; right:14%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  opacity:.3;
}
.static-a{top:18%}
.static-b{top:23%; opacity:.18}
.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}
  .cain-fullbody{left:12%; 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}
}
@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}
  .cain-fullbody{left:9%; height:55vh}
  .relic-amulet{left:28%; top:11%; width:86px}
  .relic-amulet .relic-line{width:90px}
  .relic-amulet .relic-dot{left:122px}
  .relic-mark{left:56%; top:18%; width:138px}
  .relic-mark .relic-label{left:58px}
  .relic-mark .relic-line{width:76px}
  .relic-mark .relic-dot{left:95px}
  .relic-glove{left:2%; top:58%; width:106px}
  .relic-glove .relic-line{width:44px}
  .relic-glove .relic-dot{left:132px}
  .dossier-panel h2{font-size:2.4rem}
}


.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)}