/* The hub: a dark hall, one lit window per project. Neutral, so each project keeps its own world. */
:root{
  --night:#0b0a09; --ink:#ece6dc; --ink-2:#a39a8c; --ink-3:#7d756a; --gold:#c9a45f;
  --disp:"Libre Caslon Display",Georgia,serif; --ui:"Hanken Grotesk",system-ui,sans-serif;
  --gut:clamp(16px,3.4vw,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(--ui);overflow:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--night)}
a{color:inherit;text-underline-offset:.25em;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}

.who{position:fixed;left:var(--gut);top:clamp(20px,4vh,40px);z-index:2}
.who h1{font:400 clamp(30px,3.2vw,48px)/1 var(--disp);letter-spacing:-.01em}
.who p{margin-top:8px;color:var(--ink-2);max-width:46ch}

/* The windows: DOM owns layout and hit areas, the canvas paints the light into these rects */
.hall{position:fixed;left:var(--gut);right:var(--gut);top:clamp(116px,17vh,170px);height:52vh;display:flex;gap:clamp(8px,1vw,16px);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}
.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:14px;display:flex;flex-direction:column;gap:2px;opacity:.55;transition:opacity .6s var(--ease)}
.win:hover .label,.win:focus-visible .label,.win.lit .label{opacity:1}
.label b{font:400 clamp(17px,1.4vw,22px)/1.15 var(--disp);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:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.soon .label em{color:var(--ink-3)}
.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;color:var(--ink-2)}
.foot a{color:var(--ink)}
.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;top:auto;padding:28px var(--gut) 0}
  .hall{position:relative;left:auto;right:auto;top:auto;height:auto;flex-direction:column;gap:104px;padding:32px var(--gut) 120px}
  .win{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}}