/* ═══════════════════════════════════════════════════════════════
   The Museum of Emergence — house style
   Ink: near-black gallery wall. Light: warm gilt. Rules: hairline.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:        #08090b;
  --ink-2:      #0e1013;
  --ink-3:      #15181c;
  --paper:      #e9e5dd;
  --paper-dim:  #9a978f;
  --paper-faint:#5d5b56;
  --gilt:       #e0c589;
  --gilt-deep:  #b2914d;
  --accent:     #e0c589;          /* overridden per exhibit */
  --hair:       rgba(233,229,221,.13);
  --hair-soft:  rgba(233,229,221,.07);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
::selection{ background:var(--gilt); color:var(--ink); }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
canvas{ display:block; }
kbd{
  font-family:var(--mono); font-size:.68em; padding:.15em .42em;
  border:1px solid var(--hair); border-radius:3px; color:var(--paper-dim);
  background:rgba(255,255,255,.02);
}

/* film grain over everything ------------------------------------ */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 6s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,3%)} 100%{transform:translate(0,0)}
}

.view[hidden]{ display:none !important; }

/* ════════════════════════ HERO ════════════════════════ */
.hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; }
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.46; }
.hero-veil{
  position:absolute; inset:0;
  background:
    /* a pool of ink directly behind the type, so the wall stays a wall */
    radial-gradient(56% 44% at 50% 46%, rgba(8,9,11,.88) 0%, rgba(8,9,11,.46) 58%, transparent 100%),
    radial-gradient(120% 85% at 50% 42%, rgba(8,9,11,.18) 0%, rgba(8,9,11,.70) 52%, rgba(8,9,11,.97) 100%),
    linear-gradient(to bottom, rgba(8,9,11,.72) 0%, transparent 24%, transparent 58%, var(--ink) 100%);
}
.hero-inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 var(--pad);
}
.kicker{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gilt); margin:0 0 clamp(1.4rem,4vh,2.6rem); opacity:0;
  animation:rise 1.1s var(--ease) .25s forwards;
}
.hero-title{
  font-family:var(--display); font-weight:300; font-size:clamp(2.9rem, 10.5vw, 8.5rem);
  line-height:.94; letter-spacing:-.025em; margin:0;
  font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 1;
  opacity:0; animation:rise 1.3s var(--ease) .4s forwards;
}
.hero-title em{
  font-style:italic; font-weight:300; font-size:.52em; color:var(--gilt);
  display:inline-block; padding:0 .12em; vertical-align:.16em;
  font-variation-settings:"opsz" 90, "WONK" 1;
}
.hero-sub{
  max-width:34ch; margin:clamp(1.5rem,4vh,2.4rem) 0 0; font-size:clamp(.95rem,1.7vw,1.15rem);
  color:var(--paper-dim); font-weight:300; letter-spacing:.005em;
  opacity:0; animation:rise 1.3s var(--ease) .62s forwards;
}
.hero-cue{
  position:absolute; bottom:clamp(1.6rem,5vh,3.2rem); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem; text-decoration:none;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper-faint); opacity:0; animation:rise 1.2s var(--ease) 1s forwards;
  transition:color .4s;
}
.hero-cue:hover{ color:var(--gilt); }
.hero-cue svg{ animation:bob 2.6s var(--ease) infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(5px);opacity:1} }
@keyframes rise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }
.hero-credit{
  position:absolute; z-index:2; bottom:clamp(1.6rem,5vh,3.2rem); right:var(--pad);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-faint); text-align:right; max-width:15ch; line-height:1.9;
  opacity:0; animation:rise 1.2s var(--ease) 1.4s forwards;
}
@media(max-width:700px){ .hero-credit{ display:none; } }

/* ════════════════════ WALL TEXT ════════════════════ */
.wall-text{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,62ch) minmax(0,1fr);
  padding:clamp(4rem,14vh,10rem) var(--pad) clamp(3rem,10vh,7rem);
  position:relative;
}
.wall-rule{ grid-column:1; justify-self:end; width:1px; background:linear-gradient(to bottom,transparent,var(--hair) 22%,var(--hair) 78%,transparent); margin-right:clamp(1rem,4vw,4rem); }
.wall-body{ grid-column:2; }
.wall-body p{ margin:0 0 1.5em; color:#c9c5bd; font-size:clamp(1rem,1.35vw,1.09rem); }
.wall-lead{
  font-family:var(--display) !important; font-weight:300; font-style:italic;
  font-size:clamp(1.6rem,3.6vw,2.5rem) !important; line-height:1.24; color:var(--paper) !important;
  letter-spacing:-.015em; margin-bottom:1.1em !important;
  font-variation-settings:"opsz" 80,"WONK" 1;
}
.wall-body strong{ font-weight:500; color:var(--paper); }
.wall-body em{ color:var(--gilt); font-style:italic; }
.wall-sign{
  font-family:var(--mono); font-size:.66rem !important; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-faint) !important; margin-top:2.6em !important;
}
@media(max-width:860px){
  .wall-text{ grid-template-columns:1fr; }
  .wall-rule{ display:none; } .wall-body{ grid-column:1; }
}

/* ════════════════════ GALLERY ════════════════════ */
.gallery{ padding:clamp(2rem,6vh,4rem) var(--pad) clamp(4rem,12vh,8rem); }
.gallery-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding-bottom:1.4rem; margin-bottom:clamp(2rem,5vh,3.5rem);
  border-bottom:1px solid var(--hair);
}
.gallery-head h2{
  font-family:var(--mono); font-weight:400; font-size:.66rem; letter-spacing:.36em;
  text-transform:uppercase; color:var(--gilt); margin:0;
}
.ghost-btn{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-faint); border:1px solid var(--hair); padding:.6em 1.1em; border-radius:2px;
  transition:all .35s var(--ease); white-space:nowrap;
}
.ghost-btn:hover{ color:var(--ink); background:var(--gilt); border-color:var(--gilt); }
.ghost-btn[data-on="1"]{ color:var(--ink); background:var(--gilt); border-color:var(--gilt); }

.grid{
  display:grid; gap:clamp(1rem,2.2vw,1.9rem);
  grid-template-columns:repeat(auto-fill, minmax(clamp(240px,26vw,330px), 1fr));
}
.card{
  position:relative; display:block; text-decoration:none; border:1px solid var(--hair-soft);
  background:var(--ink-2); overflow:hidden; isolation:isolate;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.card:hover{ border-color:rgba(233,229,221,.28); transform:translateY(-3px); }
.card-frame{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#050607; }
.card-frame canvas{ position:absolute; inset:0; width:100%; height:100%; }
.card-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 95% at 50% 45%, transparent 40%, rgba(5,6,7,.62) 100%);
}
.card-meta{ padding:1.1rem 1.15rem 1.25rem; position:relative; }
.card-num{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.26em; color:var(--card-accent,var(--gilt));
  display:block; margin-bottom:.5rem;
}
.card-title{
  font-family:var(--display); font-weight:400; font-size:1.5rem; line-height:1.06;
  letter-spacing:-.012em; margin:0 0 .38rem; font-variation-settings:"opsz" 60,"WONK" 1;
}
.card-attr{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--paper-faint);
  margin:0 0 .7rem; text-transform:uppercase;
}
.card-desc{ margin:0; font-size:.85rem; line-height:1.62; color:var(--paper-dim); }
.card-tape{
  position:absolute; top:0; left:0; height:2px; width:0; background:var(--card-accent,var(--gilt));
  transition:width .6s var(--ease); z-index:3;
}
.card:hover .card-tape{ width:100%; }
.card-badge{
  position:absolute; top:.7rem; right:.7rem; z-index:3;
  font-family:var(--mono); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-faint); background:rgba(8,9,11,.62); backdrop-filter:blur(6px);
  padding:.3em .6em; border:1px solid var(--hair-soft); border-radius:2px;
}

/* ════════════════════ COLOPHON ════════════════════ */
.colophon{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  padding:clamp(3rem,8vh,5rem) var(--pad) clamp(4rem,10vh,6rem);
  border-top:1px solid var(--hair);
}
.colo-col h3{
  font-family:var(--mono); font-weight:400; font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gilt); margin:0 0 1.1rem;
}
.colo-col p{ margin:0 0 1rem; font-size:.82rem; line-height:1.75; color:var(--paper-dim); }
.colo-meta a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--hair); }
.colo-meta a:hover{ color:var(--gilt); border-color:var(--gilt); }
.refs{ list-style:none; margin:0; padding:0; }
.refs li{
  font-size:.74rem; line-height:1.6; color:var(--paper-faint); padding:.42rem 0;
  border-bottom:1px solid var(--hair-soft);
}
.refs li b{ font-weight:400; color:var(--paper-dim); }

/* ════════════════════ EXHIBIT STAGE ════════════════════ */
#exhibit{ position:fixed; inset:0; z-index:100; background:#050607; }
#stage{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.stage-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 50%, transparent 52%, rgba(0,0,0,.55) 100%);
}

.topbar{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(.9rem,2.4vh,1.5rem) clamp(1rem,3vw,2rem);
  background:linear-gradient(to bottom, rgba(5,6,7,.82), transparent);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.tb-back{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-dim); transition:color .3s;
}
.tb-back:hover{ color:var(--accent); }
.tb-mid{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-nav{ display:flex; align-items:center; gap:.35rem; }
.tb-nav button{
  width:30px; height:30px; border:1px solid var(--hair); border-radius:2px;
  color:var(--paper-dim); font-size:1.05rem; line-height:1; transition:all .3s var(--ease);
}
.tb-nav button:hover{ color:var(--ink); background:var(--accent); border-color:var(--accent); }
.tb-index{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--paper-faint);
  min-width:4.2em; text-align:center;
}

/* ── placard ── */
.placard{
  position:absolute; z-index:20; left:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vh,2rem);
  width:min(378px, calc(100vw - 2rem)); max-height:min(72vh, 640px);
  background:rgba(10,11,14,.80); backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--hair); border-radius:3px;
  box-shadow:0 24px 70px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform .55s var(--ease), opacity .45s var(--ease);
  display:flex; flex-direction:column;
}
.placard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent 78%);
}
.placard.hidden{ transform:translateY(calc(100% + 3rem)); opacity:0; pointer-events:none; }
.placard-toggle{
  position:absolute; top:.55rem; right:.55rem; z-index:2; width:26px; height:26px;
  color:var(--paper-faint); border-radius:2px; display:grid; place-items:center;
  transition:all .3s;
}
.placard-toggle:hover{ color:var(--accent); background:rgba(255,255,255,.05); }
.placard.hidden .placard-toggle{ transform:rotate(180deg); }
.placard-scroll{ overflow-y:auto; overscroll-behavior:contain; padding:1.35rem 1.4rem 1.4rem; }
.placard-scroll::-webkit-scrollbar{ width:3px; }
.placard-scroll::-webkit-scrollbar-thumb{ background:var(--hair); }

.p-num{
  font-family:var(--mono); font-size:.57rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .55rem;
}
.p-title{
  font-family:var(--display); font-weight:400; font-size:2rem; line-height:1; letter-spacing:-.018em;
  margin:0 0 .5rem; font-variation-settings:"opsz" 80,"WONK" 1;
}
.p-attr{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.09em; color:var(--paper-faint);
  margin:0 0 1rem; line-height:1.65;
}
.p-hair{ height:1px; background:var(--hair); margin:0 0 1rem; }
.p-text{ margin:0 0 1.1rem; font-size:.845rem; line-height:1.75; color:#bdb9b1; }
.p-text em{ color:var(--accent); font-style:italic; }

.p-rule{ margin:0 0 1.25rem; border-top:1px solid var(--hair-soft); border-bottom:1px solid var(--hair-soft); }
.p-rule summary{
  cursor:pointer; list-style:none; padding:.7rem 0;
  font-family:var(--mono); font-size:.57rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-faint); transition:color .3s; user-select:none;
}
.p-rule summary::-webkit-details-marker{ display:none; }
.p-rule summary::before{ content:"+ "; color:var(--accent); }
.p-rule[open] summary::before{ content:"− "; }
.p-rule summary:hover{ color:var(--paper-dim); }
.p-code{
  font-family:var(--mono); font-size:.66rem; line-height:1.68; color:#9fb8a8;
  margin:0 0 .9rem; padding:.85rem .9rem; background:rgba(0,0,0,.4);
  border-left:2px solid var(--accent); border-radius:0 2px 2px 0;
  white-space:pre-wrap; overflow-x:auto;
}

/* ── controls ── */
.p-controls{ display:flex; flex-direction:column; gap:.85rem; margin-bottom:1.25rem; }
.ctrl label{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper-dim); margin-bottom:.42rem;
}
.ctrl label b{ font-weight:400; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.ctrl input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:14px; background:transparent; cursor:grab;
}
.ctrl input[type=range]:active{ cursor:grabbing; }
.ctrl input[type=range]::-webkit-slider-runnable-track{
  height:1px; background:var(--hair); border-radius:1px;
}
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; margin-top:-5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 0 rgba(224,197,137,.22); transition:box-shadow .3s, transform .2s;
}
.ctrl input[type=range]:hover::-webkit-slider-thumb{ box-shadow:0 0 0 6px rgba(224,197,137,.14); }
.ctrl input[type=range]::-moz-range-track{ height:1px; background:var(--hair); }
.ctrl input[type=range]::-moz-range-thumb{ width:11px; height:11px; border:none; border-radius:50%; background:var(--accent); }
.ctrl select{
  width:100%; background:rgba(0,0,0,.42); border:1px solid var(--hair); border-radius:2px;
  color:var(--paper); font-family:var(--mono); font-size:.66rem; padding:.5em .6em; cursor:pointer;
}
.ctrl select:focus{ outline:1px solid var(--accent); }

.p-actions{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.act{
  flex:1 1 auto; font-family:var(--mono); font-size:.57rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-dim); border:1px solid var(--hair); border-radius:2px; padding:.62em .5em;
  transition:all .3s var(--ease); white-space:nowrap;
}
.act:hover{ color:var(--ink); background:var(--accent); border-color:var(--accent); }
.p-hint{
  margin:0 0 .7rem; font-family:var(--mono); font-size:.57rem; line-height:1.75; letter-spacing:.05em;
  color:var(--paper-faint);
}
.p-hint::before{ content:"↳ "; color:var(--accent); }
.p-fps{
  margin:0; font-family:var(--mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase;
  color:#3f3e3b; font-variant-numeric:tabular-nums;
}

.wander-bar{ position:absolute; left:0; right:0; bottom:0; height:2px; z-index:30; background:rgba(255,255,255,.05); }
.wander-fill{ height:100%; width:0; background:var(--accent); }

.ui-hidden .topbar{ opacity:0; transform:translateY(-100%); pointer-events:none; }

@media(max-width:640px){
  .placard{
    left:0; right:0; bottom:0; width:100%; max-height:56vh; border-radius:0;
    border-left:none; border-right:none; border-bottom:none;
  }
  .p-title{ font-size:1.6rem; }
  .tb-mid{ display:none; }
}

/* ════════════════════ BOOT ════════════════════ */
.boot{
  position:fixed; inset:0; z-index:9500; background:var(--ink);
  display:grid; place-content:center; justify-items:center; gap:1.6rem;
  transition:opacity .7s var(--ease), visibility .7s;
}
.boot.done{ opacity:0; visibility:hidden; }
.boot p{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper-faint); margin:0;
}
.boot-ring{
  width:38px; height:38px; border:1px solid var(--hair); border-top-color:var(--gilt);
  border-radius:50%; animation:spin 1.1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}
.stage{position:absolute;inset:0}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}

.gl-notice{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.5rem;text-align:center;padding:1rem;background:#0b0d10}
.gl-notice span{font-family:var(--display);font-size:1.4rem;color:var(--paper-dim)}
.gl-notice small{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);line-height:1.8;max-width:24ch}

/* ── Room IX: the card that is a door, not a window ── */
.card-door{ --card-accent:#e0c589; }
.door-frame{
  display:grid; place-content:center; justify-items:center; gap:1.4rem;
  background:
    repeating-linear-gradient(135deg, rgba(224,197,137,.030) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #101216, #0a0b0e);
}
.door-mark{ display:flex; gap:.55rem; align-items:center; }
.door-mark span{
  width:9px; height:9px; border:1px solid var(--gilt); border-radius:50%;
  animation:doorpulse 3.4s var(--ease) infinite;
}
.door-mark span:nth-child(2){ animation-delay:.42s; }
.door-mark span:nth-child(3){ animation-delay:.84s; }
@keyframes doorpulse{
  0%,100%{ opacity:.28; transform:scale(1); }
  45%{ opacity:1; transform:scale(1.55); background:rgba(224,197,137,.22); }
}
.door-kick{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper-faint); margin:0; text-align:center;
}
.card-door:hover .door-frame{ background:
    repeating-linear-gradient(135deg, rgba(224,197,137,.055) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #14171c, #0a0b0e); }

.room-index{ list-style:none; margin:0; padding:0; }
.room-index li{ font-size:.76rem; line-height:1.6; color:var(--paper-faint); padding:.3rem 0; }
.room-index a{ color:var(--paper-dim); text-decoration:none; border-bottom:1px solid transparent; }
.room-index a:hover{ color:var(--gilt); border-color:var(--gilt); }