/* süschef — the table · three rooms
   Type leads (Young Serif / Courier Prime / Caveat, the süschef system);
   the rooms carry the colour. Bar named in table.html head comment. */

:root{
  --paper:#F9F5EC; --ink:#17130E; --pencil:#6E675A;
  --blue:#44688C; --pink:#D98F80;
  --sky:#A9B9C6;        /* room 01 — the balance */
  --pop-yellow:#F5CF00; /* room 02 — the bite */
  --pop-blue:#1E7BBF;
  --rose:#E9C8BF;       /* room 03 — the sculpture */
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;} /* never assisted, never hijacked */
body{
  background:var(--paper); color:var(--ink);
  font-family:'Courier Prime',monospace; font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* masthead strip */
.strip{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:baseline; gap:18px;
  padding:14px 22px; mix-blend-mode:normal;
  background:linear-gradient(var(--paper) 62%, transparent);
}
.mast{
  font-family:'Young Serif',serif; font-size:22px; color:var(--ink);
  text-decoration:none; letter-spacing:-.01em;
}
.mast .u{color:var(--blue);}
.folio-line{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--pencil);
}
.strip-cta{
  margin-left:auto; font-size:11px; letter-spacing:.08em; color:var(--ink);
  text-decoration:none; border:1.5px solid var(--ink); padding:6px 12px;
  background:var(--paper);
}
.strip-cta:hover{background:var(--ink); color:var(--paper);}

/* rooms: tall section, sticky stage — native scroll drives progress */
.room{position:relative; height:280vh;}
.stage{position:sticky; top:0; height:100vh; overflow:hidden;}
.gl{position:absolute; inset:0; width:100%; height:100%; display:block;}

/* captions — the type layer over each room */
.caption{
  position:absolute; left:6vw; bottom:9vh; z-index:5; max-width:34ch;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.caption.on{opacity:1; transform:none;}
.kicker{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:10px;
}
.caption h2, .poster h2{
  font-family:'Young Serif',serif; font-weight:400;
  font-size:clamp(30px,4.6vw,58px); line-height:1.02; letter-spacing:-.015em;
}
.caption p{
  margin-top:12px; font-size:13px; max-width:30ch;
}
/* per-room caption ink, tuned to each backdrop */
#room-balance .caption{color:var(--ink);}
#room-bite .caption{color:#fff;}
#room-bite .caption .kicker{color:#FFE668;}
#room-sculpture .caption{color:#5C3A32;}

/* WebGL-absent fallback: the poster (typography carries the room) */
.poster{display:none;}
.no3d .gl{display:none;}
.no3d .room{height:100vh;}
.no3d .poster{
  display:flex; position:absolute; inset:0; align-items:center;
  padding:0 8vw; background:var(--sky); color:var(--ink);
}
.no3d .poster-inner.alt{color:#fff;}
.no3d #room-bite .poster{background:linear-gradient(var(--pop-yellow) 46%, var(--pop-blue) 46%);}
.no3d #room-sculpture .poster{background:var(--rose); color:#5C3A32;}
.no3d .caption{display:none;}

/* close */
.close{
  min-height:64vh; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:26px; padding:12vh 8vw;
  border-top:2px solid var(--ink);
}
.close-line{
  font-family:'Young Serif',serif; font-size:clamp(24px,3.4vw,42px);
  line-height:1.1; letter-spacing:-.015em; max-width:24ch;
}
.close-ctas{display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  font-family:'Courier Prime',monospace; font-size:13px; letter-spacing:.05em;
  border:2px solid var(--ink); background:var(--ink); color:var(--paper);
  padding:12px 20px; text-decoration:none;
}
.btn.ghost{background:transparent; color:var(--ink);}
.btn:hover{background:var(--blue); border-color:var(--blue); color:#fff;}
.close-note{font-size:11px; color:var(--pencil); max-width:58ch;}

@media (max-width:700px){
  .caption{left:7vw; right:7vw; bottom:7vh;}
  .room{height:240vh;}
}
@media (prefers-reduced-motion: reduce){
  .caption{transition:none;}
}