/* Tom Noakes — Bonin, airier.
   One text size. Flush left. The film is the only thing that changes scale. */

:root{
  --black:#000;
  --white:#fff;
  --grey:#8a8a8a;
  --recede:#3a3a3a;
  --g:18px;
  --type:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --size:clamp(16px,1.25vw,19px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);-webkit-text-size-adjust:100%}
body{
  min-height:100svh;
  display:flex;flex-direction:column;
  color:var(--white);
  font-family:var(--type);
  font-size:var(--size);
  line-height:1.75;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--white);outline-offset:3px}

/* ── the room ─────────────────────────────── */
.room{position:fixed;inset:0;z-index:0;pointer-events:none}
.room img{width:100%;height:100%;object-fit:cover;opacity:0}   /* hard cut, no fade */
.room.on img{opacity:1}
.scrim{position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(0,0,0,.42);transition:background .25s}
body.lit .scrim{background:rgba(0,0,0,.30)}

/* ── header bar ───────────────────────────── */
.sig{
  position:fixed;top:0;left:0;right:0;z-index:4;
  background:var(--black);
  transition:background .25s;
  padding:var(--g) var(--g) calc(var(--g)*.8);
}
body.lit .sig{background:transparent}   /* never a black bar over the film */
.sig img{display:block;width:clamp(120px,12vw,180px);height:auto}

/* ── the index ────────────────────────────── */
main{
  position:relative;z-index:2;flex:1;
  /* clear the fixed header (logo height ~= width x 401/1485) and footer bars */
  padding:calc(var(--g)*1.8 + clamp(120px,12vw,180px)*0.27 + 10px) var(--g) calc(var(--g)*4.5);
}
.index{display:flex;flex-direction:column;align-items:flex-start}
.work{
  cursor:pointer;
  max-width:100%;
  transition:color .18s;
}
.work i{font-style:normal;color:var(--grey);transition:color .18s}
body.lit .work:not(.on){color:var(--recede)}
body.lit .work:not(.on) i{color:var(--recede)}
.work.on i{color:var(--white)}

/* ── contact ──────────────────────────────── */
.foot{
  position:fixed;left:0;right:0;bottom:0;z-index:4;
  background:var(--black);
  transition:background .25s;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--g);
  padding:calc(var(--g)*.7) var(--g) calc(var(--g)*.8 + env(safe-area-inset-bottom));
  font-size:12px;line-height:1.6;color:var(--grey);
}
body.lit .foot{background:transparent}
.foot a:hover{color:var(--white)}
.rep{display:flex;flex-wrap:wrap;gap:1.7em}
.rep i{font-style:normal;color:#555;margin-left:.45em;font-size:11px}

/* ── lightbox ─────────────────────────────── */
.light{position:fixed;inset:0;z-index:20;background:var(--black)}
.light[hidden]{display:none}
.light-f,.light-f iframe{width:100%;height:100%;border:0}
.light-x{position:absolute;top:var(--g);right:var(--g);z-index:21;font-size:36px;font-weight:300;line-height:1;padding:4px 8px}

/* ── touch ────────────────────────────────── */
@media (hover:none) and (pointer:coarse){
  :root{--size:17px}
  body{line-height:1.9}
  main{padding-bottom:calc(var(--g)*7)}

  /* Touch: the index stays; the film sits further back and the
     unselected titles read brighter than on desktop. */
  body.lit .scrim{background:rgba(0,0,0,.65)}   /* darker behind the list */
  body.lit .work:not(.on){color:#878787}        /* brighter again — stays legible over the film */
  body.lit .work:not(.on) i{color:#878787}

  /* Instagram on its own row; the six reps in a tidy 2x3 beneath it */
  .foot{display:block}
  .foot > a:first-child{display:block;margin-bottom:9px}
  .rep{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
}

@media (prefers-reduced-motion:reduce){
  .scrim,.work,.work i{transition:none}
}