*{box-sizing:border-box} html,body{margin:0;min-height:100%}
[hidden]{display:none !important;}
:root{
  --bg:#090909; --text:#f2efe8; --muted:#bfb9af; --line:rgba(255,255,255,.09);
  --accent-glow:rgba(63,17,23,.34); --shadow:0 22px 64px rgba(0,0,0,.5);
}
body{font-family:Inter,system-ui,sans-serif;color:var(--text);background:
radial-gradient(circle at 16% 16%, rgba(63,17,23,.13), transparent 26%),
radial-gradient(circle at 85% 10%, 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}
.topbar-actions{display:flex;align-items:center;gap:10px}
.ghost-btn,.home-link{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;text-decoration:none}
.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(63,17,23,.16), 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:.18;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 32% 36%, rgba(255,255,255,.05), transparent 30%),linear-gradient(180deg, rgba(18,18,22,.18), rgba(12,12,14,.22))}
.spotlight{position:absolute;left:12%;top:12%;width:56%;height:66%;background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), rgba(255,255,255,.02) 42%, transparent 72%);filter:blur(4px);pointer-events:none}
.eli-fullbody{position:absolute;left:12%;bottom:0;height:min(86vh, 870px);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;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-cross{left:26%;top:7%;width:122px}.relic-cross .relic-label{left:-10px;top:-28px}.relic-cross .relic-line{left:48px;top:-4px;width:118px;transform:rotate(12deg)}.relic-cross .relic-dot{left:160px;top:-9px}
.relic-grillz{left:3%;top:49%;width:120px}.relic-grillz .relic-label{left:0;top:-24px}.relic-grillz .relic-line{left:76px;top:16px;width:84px;transform:rotate(-8deg)}.relic-grillz .relic-dot{left:156px;top:11px}
.relic-headphones{left:50%;top:27%;width:156px}.relic-headphones .relic-label{left:106px;top:-18px}.relic-headphones .relic-line{left:18px;top:56px;width:122px;transform:rotate(-6deg)}.relic-headphones .relic-dot{left:140px;top:49px}
.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))}
.waveform{position:absolute;right:10%;top:14%;width:250px;opacity:.16;filter:contrast(1.2)}
.id-card{position:absolute;right:8%;bottom:8%;width:min(30vw, 430px);border-radius:22px;transform:rotate(-4deg);opacity:.74;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.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}.eli-fullbody{left:8%;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}.waveform{right:10%;top:10%}.id-card{right:10%;bottom:4%;width:min(56vw, 420px)}}
@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}.eli-fullbody{left:4%;height:54vh}.relic-cross{left:30%;top:8%;width:96px}.relic-cross .relic-line{width:80px}.relic-cross .relic-dot{left:120px}.relic-grillz{left:1%;top:55%;width:94px}.relic-grillz .relic-line{width:58px}.relic-grillz .relic-dot{left:117px}.relic-headphones{left:51%;top:28%;width:126px}.relic-headphones .relic-label{left:72px}.relic-headphones .relic-line{width:78px}.relic-headphones .relic-dot{left:98px}.dossier-panel h2{font-size:2.4rem}.waveform{width:160px;right:6%;top:11%}.id-card{width:min(64vw, 340px)}}
