/* =========================================================================
   THE LEDGER — the overture
   The only place the two paths run at the same time.
   ========================================================================= */

body{
  background:#000; color:var(--on-ink);
  height:100svh; overflow:hidden;
}

/* ── the stage ─────────────────────────────────────────────────────────── */
#stage{ position:fixed; inset:0; z-index:0; background:#000; }

#stage .col{
  position:absolute; top:0; bottom:0; width:50%;
  overflow:hidden;
}
#stage .col.left{ left:0; }
#stage .col.right{ right:0; }

#stage .col img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity .14s linear;
  will-change:opacity;
}
#stage .col img.on{ opacity:1; }

/* one collection, two temperatures — and dim enough to carry type */
#stage .col.left  img{ filter:grayscale(1) contrast(1.12) brightness(.5) sepia(.5) hue-rotate(-14deg) saturate(1.7); }
#stage .col.right img{ filter:grayscale(1) contrast(1.02) brightness(.62) sepia(.34) hue-rotate(102deg) saturate(.85); }

/* the seam */
#stage .seam{
  position:absolute; top:0; bottom:0; left:50%; width:1px; z-index:3;
  background:linear-gradient(transparent,var(--gold) 12%,var(--gold) 88%,transparent);
  opacity:.55;
}

/* scrim: a vignette plus an overall damp, so nothing ever flashes bright */
#stage .scrim{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(120% 85% at 50% 50%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.94) 100%),
    linear-gradient(rgba(12,10,9,.42), rgba(12,10,9,.42));
}

/* ── the frame furniture ───────────────────────────────────────────────── */
#shell{
  position:relative; z-index:4;
  height:100svh; display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(1.1rem,3vw,2.2rem);
}
#shell .top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
#shell .top .meta{ color:rgba(232,224,213,.5); }
#shell .top .l{ color:var(--oxide-lift); }
#shell .top .r{ color:var(--patina-lift); text-align:right; }

/* ── the type sequence ─────────────────────────────────────────────────── */
#titles{
  align-self:center; text-align:center; position:relative;
  display:grid; place-items:center; min-height:min(46svh,26rem);
}
#titles .line{
  grid-area:1/1; margin:0; max-width:22ch;
  font-family:var(--font-display);
  font-size:clamp(1.9rem,6.2vw,4.6rem);
  line-height:1.06; letter-spacing:-.025em; color:#fff;
  opacity:0; transform:translateY(.7rem) scale(.985);
  transition:opacity .85s var(--ease), transform 1.2s var(--ease);
  text-shadow:0 2px 40px rgba(0,0,0,.7);
}
#titles .line.on{ opacity:1; transform:none; }
#titles .line em{ font-style:italic; }
#titles .line.quiet{
  font-family:var(--font-meta); font-size:clamp(.7rem,1.5vw,.86rem);
  letter-spacing:.2em; text-transform:uppercase; max-width:34ch;
  line-height:2; color:rgba(232,224,213,.85);
}

/* the resolved title */
#titles .title{ max-width:none; }
#titles .title span{ display:block; }
#titles .title span:last-child{ font-style:italic; }

/* ── the gate ──────────────────────────────────────────────────────────── */
#gate{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(1rem,4vw,3.5rem); align-items:end;
  opacity:0; transform:translateY(1rem); pointer-events:none;
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
#gate.on{ opacity:1; transform:none; pointer-events:auto; }

.door{
  display:block; text-decoration:none; padding:1.1rem 0 0;
  border-top:1px solid rgba(232,224,213,.22);
  transition:border-color .5s var(--ease);
}
.door.r{ text-align:right; }
.door .meta{ color:var(--oxide-lift); }
.door.r .meta{ color:var(--patina-lift); }
.door h2{
  font-size:clamp(1.05rem,2.1vw,1.55rem); margin:.4rem 0 .45rem; color:#fff;
}
.door p{
  font-size:.84rem; margin:0; max-width:24rem; color:rgba(232,224,213,.62);
}
.door.r p{ margin-left:auto; }
.door:hover,.door:focus-visible{ border-top-color:var(--gold); }
.door:hover h2{ font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60; }
.door .go{
  display:inline-block; margin-top:.7rem;
  font-family:var(--font-meta); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}

#gate .mid{
  align-self:center; text-align:center; padding-bottom:.4rem;
  display:flex; flex-direction:column; gap:.55rem; align-items:center;
}
#gate .mid a{
  font-family:var(--font-meta); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(232,224,213,.5); text-decoration:none;
  border-bottom:1px solid rgba(232,224,213,.2); padding-bottom:.15rem;
}
#gate .mid a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* ── controls ──────────────────────────────────────────────────────────── */
/* top centre, so it never collides with the two doors */
#controls{
  position:fixed; left:50%; transform:translateX(-50%);
  top:calc(clamp(1.1rem,3vw,2.2rem) + 2.1rem);
  z-index:6; display:flex; gap:.5rem;
}
#controls button{
  font-family:var(--font-meta); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; cursor:pointer;
  color:rgba(232,224,213,.6); background:rgba(0,0,0,.45);
  border:1px solid rgba(232,224,213,.22); border-radius:999px;
  padding:.5rem .9rem; backdrop-filter:blur(6px);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
#controls button:hover{ color:var(--gold); border-color:var(--gold); }
#controls button[hidden]{ display:none; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 720px){
  #stage .col{ width:100%; height:50%; }
  #stage .col.left{ top:0; bottom:auto; }
  #stage .col.right{ top:50%; bottom:0; right:0; }
  #stage .seam{
    left:0; right:0; width:auto; top:50%; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent);
  }
  #gate{ grid-template-columns:1fr; gap:1.4rem; }
  .door.r{ text-align:left; }
  .door.r p{ margin-left:0; }
  #gate .mid{ order:3; flex-direction:row; flex-wrap:wrap; justify-content:center; }
  #shell{ padding-bottom:4.5rem; }
  #titles{ min-height:min(34svh,18rem); }
}

/* ── motion off ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  #stage .col img{ transition:opacity .9s linear; }
  #titles .line{ transition:opacity .4s linear; transform:none; }
  #gate{ transition:opacity .4s linear; transform:none; }
}
body.calm #stage .col img{ transition:opacity 1.1s linear; }

/* ── the content note, under the gate ──────────────────────────────────── */
#note{
  margin:clamp(1.4rem,3.5vh,2.6rem) auto 0; max-width:44rem; text-align:center;
  opacity:0; transform:translateY(.6rem); pointer-events:none;
  transition:opacity 1.2s var(--ease) .25s, transform 1.2s var(--ease) .25s;
}
#gate.on ~ #note{ opacity:1; transform:none; pointer-events:auto; }
#note .lab{
  display:block; font-family:var(--font-meta); font-size:.58rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,224,213,.42); margin-bottom:.55rem;
}
#note p{
  font-size:.76rem; line-height:1.6; margin:0 0 .5rem;
  color:rgba(232,224,213,.5);
}
#note p:last-child{ margin-bottom:0; }
#note em{ color:rgba(232,224,213,.68); font-style:italic; }
@media (max-width:640px){ #note p{ font-size:.72rem; } }
#note .brief{ display:none; }
@media (max-width:760px), (max-height:760px){
  #note{ margin-top:.55rem; }
  #note .lab{ margin-bottom:.35rem; font-size:.54rem; }
  #note p{ font-size:.68rem; line-height:1.5; }
  #note .full{ display:none; }
  #note .brief{ display:block; }
}