*{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(188, 188, 194, .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 16% 12%, rgba(140,140,152,.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(174,174,184,.1), 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(220,220,226,.07), rgba(255,255,255,.01) 42%, transparent 72%);
  filter:blur(4px); pointer-events:none;
}
.silver-rings{
  position:absolute; border-radius:999px; border:1px solid rgba(215,215,224,.12);
  pointer-events:none; opacity:.45;
}
.ring-a{width:280px; height:280px; right:10%; top:10%;}
.ring-b{width:380px; height:380px; right:0%; top:2%; opacity:.22;}
.luther-fullbody{
  position:absolute; left:19%; 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-cards{left:52%; top:17%; width:148px}
.relic-cards .relic-label{left:88px; top:-18px}
.relic-cards .relic-line{left:18px; top:72px; width:118px; transform:rotate(-8deg)}
.relic-cards .relic-dot{left:134px; top:62px}

.relic-cuffs{left:10%; top:52%; width:168px}
.relic-cuffs .relic-label{left:0; top:-24px}
.relic-cuffs .relic-line{left:124px; top:56px; width:72px; transform:rotate(-10deg)}
.relic-cuffs .relic-dot{left:194px; top:48px}

.relic-eye{left:24%; top:6%; width:146px}
.relic-eye .relic-label{left:-6px; top:-28px}
.relic-eye .relic-line{left:74px; top:-4px; width:108px; transform:rotate(12deg)}
.relic-eye .relic-dot{left:176px; top:-12px}

.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));
}
.card-fan{
  position:absolute; border:1px solid rgba(214,214,222,.08); border-radius:18px;
  width:110px; height:150px; transform-origin:center center; pointer-events:none;
}
.fan-a{right:20%; top:12%; transform:rotate(8deg)}
.fan-b{right:15%; top:15%; transform:rotate(18deg); opacity:.52}
.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}
  .luther-fullbody{left:14%; 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}
  .luther-fullbody{left:9%; height:56vh}
  .relic-eye{left:21%; top:8%; width:114px}
  .relic-eye .relic-line{width:74px}
  .relic-eye .relic-dot{left:138px}
  .relic-cards{left:54%; top:18%; width:112px}
  .relic-cards .relic-label{left:60px}
  .relic-cards .relic-line{width:76px}
  .relic-cards .relic-dot{left:88px}
  .relic-cuffs{left:2%; top:58%; width:122px}
  .relic-cuffs .relic-line{width:42px}
  .relic-cuffs .relic-dot{left:144px}
  .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)}