/* The hub: a dark hall, one lit window per project, set like a studio's production slate.
   One face, Archivo, used across its width axis: extended for the name, normal for text, condensed caps for labels. */
:root{
  --night:#0a0908; --ink:#ede7dd; --ink-2:#a9a093; --ink-3:#8f877b; --gold:#c9a45f;
  --face:"Archivo",system-ui,sans-serif;
  --gut:clamp(16px,3.2vw,56px); --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
html{background:var(--night)}
body{background:var(--night);color:var(--ink);font:400 15px/1.5 var(--face);font-stretch:100%;overflow:hidden;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::selection{background:var(--gold);color:var(--night)}
a{color:inherit;text-underline-offset:.3em;text-decoration-thickness:1px;text-decoration-color:var(--ink-3)}
a:hover{text-decoration-color:var(--gold)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}

/* the slate: name left, credit right, one baseline */
.who{position:fixed;left:var(--gut);right:var(--gut);top:clamp(22px,4.5vh,44px);z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.who h1{font:600 clamp(26px,2.9vw,46px)/.9 var(--face);font-stretch:125%;text-transform:uppercase;letter-spacing:.01em}
.who p{display:grid;justify-items:end;text-align:right;color:var(--ink-2);font-size:14px;line-height:1.45}
.who p b{font-weight:500;color:var(--ink)}

/* The windows: DOM owns layout and hit areas, the canvas paints the light into these rects.
   The playable project stands widest; the ones in preparation wait narrower until hovered. */
.hall{position:fixed;left:var(--gut);right:var(--gut);top:clamp(104px,15vh,150px);height:min(58vh,calc(100vh - 300px));display:flex;gap:clamp(8px,.9vw,14px);z-index:2}
.win{position:relative;flex:1 1 0;min-width:0;display:block;text-decoration:none;color:var(--ink);transition:flex-grow 1.1s var(--ease);outline-offset:6px}
.win.live{flex-grow:2.1}
.hall:hover .win,.hall:focus-within .win{flex-grow:.8}
.hall .win:hover,.hall .win:focus-visible,.hall .win.lit{flex-grow:3.4}

.label{position:absolute;left:0;right:0;top:100%;padding-top:16px;display:grid;gap:3px;opacity:.8;transition:opacity .6s var(--ease)}
.win.live .label,.win:hover .label,.win:focus-visible .label,.win.lit .label{opacity:1}
.label b{font-weight:500;font-size:clamp(15px,1.15vw,18px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.label i{font-style:normal;color:var(--ink-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.label em{font-style:normal;font-size:11px;font-weight:600;font-stretch:75%;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.soon .label em{color:var(--ink-2)}
.soon{cursor:default}

.foot{position:fixed;left:var(--gut);right:var(--gut);bottom:clamp(16px,3vh,28px);z-index:2;display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline;font-size:13px;color:var(--ink-2)}
.foot a{color:var(--ink);font-weight:500;font-stretch:75%;letter-spacing:.14em;text-transform:uppercase;font-size:11px;text-decoration:none}
.foot a:hover{color:var(--gold)}
.credit{margin-left:auto;font-size:12px;color:var(--ink-3)}

/* Entering a project: the room goes dark behind the dive */
.veil{position:fixed;inset:0;z-index:5;background:var(--night);opacity:0;pointer-events:none;transition:opacity .7s .55s ease-in}
body.entering .veil{opacity:1}
body.entering .who,body.entering .foot,body.entering .label{opacity:0;transition:opacity .4s}

/* Phones: the windows become stacked bands; the one in the middle of the screen is lit */
@media (max-width:760px){
  body{overflow:auto}
  .who{position:relative;left:auto;right:auto;top:auto;padding:28px var(--gut) 0;flex-direction:column;align-items:flex-start;gap:12px}
  .who p{justify-items:start;text-align:left}
  .hall{position:relative;left:auto;right:auto;top:auto;height:auto;flex-direction:column;gap:110px;padding:36px var(--gut) 124px}
  .win,.win.live{flex:none;height:46vw;min-height:170px}
  .hall:hover .win,.hall .win:hover{flex-grow:0}
  .foot{position:relative;left:auto;right:auto;bottom:auto;padding:0 var(--gut) 32px}
  .credit{margin-left:0;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.win{transition:none}}