/* =========================================================================
   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; }
/* They are links now, so they have to look like something you can press. */
#shell .top a.meta{
  text-decoration:none; border-bottom:1px solid transparent;
  padding-bottom:.15em; transition:border-color .25s ease, opacity .25s ease;
}
#shell .top a.meta:hover,
#shell .top a.meta:focus-visible{ border-bottom-color:currentColor; }

/* ── 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;
  /* One line is visible at a time. The old version faded a line out over .85s
     while moving it over 1.2s, and started the next one before either had
     finished, so two lines were on screen together, at different speeds, drifting
     past each other. The script now fades one out completely and only then fades
     the next in, and both properties run for the same length on the same curve,
     so nothing overtakes anything. */
  opacity:0; transform:translateY(.45rem);
  transition:opacity .6s var(--ease), transform .6s 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; }
}


/* Staggered two-line variant: the first line sits back to the left, the second
   steps right and opens on a blue ampersand. Two lines, not three. */
#titles .title.amp2{ text-align:center; }
#titles .title.amp2 .l1,
#titles .title.amp2 .l2{ display:block; }
#titles .title.amp2 .l1{ transform:translateX(-1.4em); }
#titles .title.amp2 .l2{ transform:translateX(1.4em); font-style:italic; white-space:nowrap; }
#titles .title.amp2 .amp-mark{
  /* the generic rule above sets every span in .title to display:block, which
     dropped the ampersand onto a line of its own. */
  display:inline; font-style:italic; color:var(--patina-lift);
  font-size:.72em; padding-right:.1em;
}