/* ─────────────────────────────────────────────────────
   Max Junk — portfolio
   One typeface (Archivo, variable width + weight) used at
   different widths: compressed black for the name and titles,
   compressed bold for captions and nav, normal width for reading.
   ───────────────────────────────────────────────────── */

:root {
  --ground: #0b0b0b;
  --ink: #f2f1ee;
  --muted: #8e9196;        /* subtitles, labels */
  --faint: #4c4c4c;        /* inactive nav, rules on hover */
  --hair: #232323;
  --frame: #161616;        /* empty still while loading */
  --gutter: clamp(14px, 1.25vw, 20px);
  --gap: clamp(10px, 1.1vw, 16px);
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.35;
  
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--ground); }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.wrap { padding-inline: var(--gutter); }

/* Type roles — all Archivo, different widths */
.cx, .site-head, .caption, .label, .meta, .count, .pager, .video-label, .foot {
  
  letter-spacing: -0.01em;
}
.label { font-weight: 500; text-transform: uppercase; font-size: 13px; letter-spacing: 0.01em; color: var(--muted); }
.meta  { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Header ─────────────────────────────────────────── */
.site-head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-block: 16px 22px;
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  /* soft frosted fade, like a matte box flag */
  background: linear-gradient(var(--ground) 45%, rgba(11,11,11,0));
}
.site-head::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(#000 40%, transparent);
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  pointer-events: none;
}
.nav { display: flex; gap: 14px; }
.nav.right { justify-content: flex-end; }
.nav a { color: var(--ink); transition: color .2s; }
.nav a[aria-current="page"] { color: var(--faint); }
.nav a:hover { color: var(--muted); }
.mark {
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
/* On the home page the big name is the logo; the small one appears once you scroll past it */
.has-hero .mark { opacity: 0; transform: translateY(6px); pointer-events: none; }
.has-hero.past-hero .mark { opacity: 1; transform: none; pointer-events: auto; }

/* ── Home hero ──────────────────────────────────────── */
[data-fit] { width: max-content; max-width: none; }
.hero { padding-block: 0 clamp(28px, 4vw, 56px); overflow: hidden; }
.hero h1 {
  margin: 0;
  font-weight: 500;
  
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-size: clamp(26px, 2.9vw, 44px);
}
.hero .sub {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: clamp(6px, .6vw, 10px);
  
  font-weight: 400;
  font-size: clamp(15px, 1.45vw, 22px);
  line-height: 1;
  text-transform: uppercase;
}
.hero .sub span:last-child:not(:first-child) { color: var(--muted); }

/* ── Grid ───────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 64px) var(--gap);
  padding-bottom: clamp(56px, 7vw, 110px);
}
.grid.odd > .tile:first-child { grid-column: 1 / -1; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

.tile { display: flex; flex-direction: column; gap: 9px; }

/* caption sits above the still, like a slate */
.caption {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  font-size: 16px;
  line-height: 1.12;
}
.caption .t { font-weight: 500; }
.caption .s { font-weight: 400; color: var(--muted); }
.caption .n { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.caption .r { font-weight: 400; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  background: var(--frame);
}
.frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .5s var(--ease), transform 1.2s var(--ease);
}
.frame img.on.ready { opacity: 1; transform: none; }
.tile:hover .frame img.on { transform: scale(1.012); }

.count {
  position: absolute; left: 10px; bottom: 9px;
  font-weight: 500; font-size: 13px;
  color: #fff;
  mix-blend-mode: difference;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .25s;
}
.tile.cycling .count { opacity: 1; }

/* ── Project page ───────────────────────────────────── */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}
/* overscan 2px so the player never shows a hairline on a half pixel */
.player iframe {
  position: absolute; top: -2px; left: -2px;
  width: calc(100% + 4px); height: calc(100% + 4px);
  border: 0; display: block;
}
.video-label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding-bottom: 9px;
  font-size: 16px; font-weight: 500;
}
.video-label .meta { font-weight: 400; }
.more-video { padding-top: clamp(28px, 3.5vw, 52px); }

.project-info {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px var(--gap);
  padding-block: clamp(28px, 3.5vw, 52px) clamp(44px, 5vw, 80px);
}
.project-info h1 {
  margin: 0;
  font-weight: 500;
  
  text-transform: uppercase;
  font-size: clamp(28px, 2.9vw, 42px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.project-info h1 span { display: block; color: var(--muted); }
.credits {
  margin: 0;
  align-self: end;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 7px 22px;
  font-size: 15px;
}
.credits dt { padding-top: 1px; }
.credits dd { margin: 0;  font-weight: 500; }
@media (max-width: 760px) { .project-info { grid-template-columns: 1fr; } }

.stills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding-bottom: clamp(56px, 6vw, 96px);
}
.stills img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--frame); }
.stills img:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
@media (max-width: 720px) { .stills { grid-template-columns: 1fr; } }

.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  padding-block: 18px clamp(48px, 6vw, 96px);
  border-top: 1px solid var(--ink);
}
.pager a { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pager a:last-child { text-align: right; align-items: flex-end; }
.pager .t {
  font-weight: 500; text-transform: uppercase;
  font-size: clamp(20px, 2vw, 30px); line-height: 1; letter-spacing: -0.005em;
  transition: color .2s;
}
.pager a:hover .t { color: var(--muted); }

/* ── Contact ────────────────────────────────────────── */
.contact {
  padding-block: clamp(24px, 6vw, 90px) clamp(60px, 8vw, 120px);
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
}
.contact dd { margin: 0; }
.contact .row { display: grid; grid-template-columns: 160px 1fr; align-items: start; gap: 16px; }
.contact .row .label { padding-top: .9em; }
.contact .big {
   font-weight: 500; text-transform: uppercase;
  font-size: clamp(34px, 6.4vw, 110px); line-height: 1; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.contact a.big:hover { color: var(--muted); }
@media (max-width: 600px) { .contact .row { grid-template-columns: 1fr; gap: 4px; } }

/* ── Footer ─────────────────────────────────────────── */
.foot {
  display: flex; justify-content: space-between; gap: 16px;
  padding-block: 18px 22px;
  border-top: 1px solid var(--hair);
  font-weight: 500; font-size: 13px; text-transform: uppercase; color: var(--muted);
}
.foot a:hover { color: var(--ink); }

/* ── Page fade-in ───────────────────────────────────── */
main, .hero { animation: rise .7s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Preview password screen ────────────────────────── */
.gated body > *:not(#gate) { display: none; }
#gate {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--gutter);
}
#gate .big {
   font-weight: 500; text-transform: uppercase;
  font-size: 22vw; line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
}
.gate-box { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); }
.gate-row { display: flex; gap: 8px; }
.gate-row input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 16px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--ink);
  padding: 8px 0; border-radius: 0;
}
.gate-row input:focus { outline: none; }
.gate-row button {
  font: inherit;  font-weight: 500; font-size: 15px; text-transform: uppercase;
  color: var(--ground); background: var(--ink);
  border: 0; padding: 0 18px; cursor: pointer;
}
.gate-err { margin: 0; color: var(--ink); }
#gate .label {  }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.gate-name {
   font-weight: 500; text-transform: uppercase;
  font-size: clamp(56px, 9vw, 140px); line-height: 1; letter-spacing: -0.01em;
}
.gate-name span {
  display: block; margin-top: 14px;
  font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0;
}

/* ── Phones: first three stills side by side, no cycling ── */
@media (max-width: 720px) {
  .frame {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    background: none;
    overflow: visible;
  }
  .frame img {
    position: static;
    width: 100%; height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    opacity: 1;
    transform: none;
    background: var(--frame);
  }
  .frame img:nth-of-type(n+4), .frame .count { display: none; }
  .grid { gap: 44px; }
}
@media (max-width: 520px) {
  .site-head { grid-template-columns: auto auto; justify-content: space-between; font-size: 13px; }
  .site-head .mark { display: none; }
  .nav { gap: 12px; }
}