/* Dan Scott, art director. Look taken from the Sue PDF:
   paper #f3f4f6, ink #101216, grey #5f6672, rule #d9dce2,
   Gabarito 500 + 400 only, 12-col grid, 80px margins (20px on phones).
   Home opens on the PDF cover (full screen) and ends on the PDF end page. */

@font-face {
  font-family: "Gabarito";
  src: url("/assets/fonts/gabarito.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --paper: #f3f4f6;
  --ink: #101216;
  --grey: #5f6672;
  --rule: #d9dce2;
  --m: 80px;          /* page margin */
  --g: 24px;          /* gutter */
  --max: 1760px;
}
@media (max-width: 900px) { :root { --m: 40px; } }
@media (max-width: 600px) { :root { --m: 20px; --g: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Gabarito", system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--grey); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img, video, iframe { display: block; max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--m); }

/* ---------- Type ---------- */

.label {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
@media (max-width: 600px) { .label { font-size: 12px; line-height: 14px; } }

.lockup {
  display: block;
  margin: 0;
  font-size: clamp(64px, 8.9vw, 160px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.lockup span { display: block; font-weight: 400; color: var(--grey); }
a.lockup:hover { color: var(--ink); }
/* on phones the name fills the width, like the PDF cover */
@media (max-width: 600px) {
  /* big, but with breathing room on the right so it reads as designed, not stretched */
  .lockup { font-size: calc((100vw - 2 * var(--m)) / 6); letter-spacing: -0.03em; line-height: 1.02; }
  .lockup span { white-space: nowrap; }
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }
@media (max-width: 600px) { .rule { margin: 28px 0; } }

/* ---------- Sheets: PDF cover and end page, full screen ---------- */

.sheet {
  min-height: 100vh;
  min-height: 100svh;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
}
.sheet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--g); }
.sheet-tag { padding-top: 12px; white-space: nowrap; }
.sheet-tag:hover { color: var(--ink); }
.sheet-bottom .rule { margin-top: 0; }

.cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  row-gap: 40px;
}
.cols > div { grid-column: span 6; display: flex; flex-direction: column; gap: 8px; }
.cols h2 {
  margin: 0;
  font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.cols p { margin: 0; font-size: 24px; line-height: 32px; max-width: 30em; }

@media (max-width: 760px) {
  .cols > div { grid-column: 1 / -1; }
  .cols h2 { font-size: 28px; line-height: 34px; }
  .cols p { font-size: 18px; line-height: 26px; }
}
@media (max-width: 600px) {
  .sheet { padding-top: 24px; padding-bottom: 28px; gap: 48px; }
  .sheet-top { flex-direction: column-reverse; gap: 20px; }
  .sheet-tag { padding-top: 0; }
  .cols { row-gap: 28px; }
  .cols h2 { font-size: 26px; line-height: 32px; }
  .cols p { font-size: 17px; line-height: 25px; }
}

.sheet--end { border-top: 1px solid var(--rule); }

/* Contact email stays on one line, whatever the width */
.cols h2.contact-h2 { font-size: clamp(20px, 5vw, 40px); }
.cols h2.contact-h2 a { white-space: nowrap; }

/* ---------- Work grid: full-bleed, edge to edge ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 2400px;
  margin: 0 auto;
}
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }

.tile { display: block; }
.tile:hover { color: var(--ink); }

.media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.media img, .media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .3s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}
.media video { opacity: 0; }
.media.is-playing video { opacity: 1; }
/* phones: taller tiles feel less like thumbnails */
@media (max-width: 600px) { .media { aspect-ratio: 4 / 3; } }

/* brand reveal: the film/still disperses to the name on grey (desktop hover) */
.reveal {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 16px;
  background: var(--paper); color: var(--ink);
  opacity: 0; transform: scale(1.04);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.reveal b { font-weight: 500; font-size: clamp(28px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.02em; }
.reveal span { font-size: 14px; line-height: 18px; letter-spacing: 0.04em; color: var(--grey); }

/* caption under each tile (touch screens) */
.caption {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 14px var(--m) 30px;
}
.caption b { display: block; font-weight: 500; font-size: 20px; line-height: 26px; letter-spacing: -0.01em; }
.caption span { display: block; font-size: 15px; line-height: 20px; color: var(--grey); }

@media (hover: hover) and (pointer: fine) {
  .tile .caption { display: none; }
  .tile:hover .media img, .tile:hover .media video,
  .tile:focus-visible .media img, .tile:focus-visible .media video {
    opacity: 0; transform: scale(1.08); filter: blur(6px);
  }
  .tile:hover .reveal, .tile:focus-visible .reveal {
    opacity: 1; transform: scale(1); transition-delay: .08s;
  }
}
@media (hover: none), (pointer: coarse) { .reveal { display: none; } }

.ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--grey); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}

/* ---------- Project page ---------- */

.top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--g); padding-top: 48px; }
.mini { font-size: 18px; line-height: 24px; font-weight: 500; }
.mini span { display: block; font-weight: 400; color: var(--grey); }
.top nav { display: flex; gap: 24px; padding-top: 4px; }
.top nav a:hover { color: var(--ink); }
@media (max-width: 600px) { .top { padding-top: 24px; } .top nav { gap: 18px; } }

.title {
  margin: 0 0 32px;
  font-size: 56px; line-height: 60px; font-weight: 500; letter-spacing: -0.025em;
}
.title span { display: block; color: var(--grey); font-weight: 400; }

.intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  row-gap: 28px;
  margin-bottom: 48px;
}
.intro-text { grid-column: 1 / span 7; }
.about { margin: 0; font-size: 24px; line-height: 32px; }
.award {
  margin: 16px 0 0;
  font-size: 14px; line-height: 20px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.credits { grid-column: 9 / span 4; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.credits div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; }
.credits dt { font-size: 14px; line-height: 24px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.credits dd { margin: 0; font-size: 18px; line-height: 24px; }

@media (max-width: 760px) {
  .title { font-size: 40px; line-height: 44px; margin-bottom: 20px; }
  .intro-text, .credits { grid-column: 1 / -1; }
  .about { font-size: 19px; line-height: 27px; }
  .intro { margin-bottom: 32px; }
  .credits { border-top: 1px solid var(--rule); padding-top: 20px; }
  .credits div { grid-template-columns: 9em 1fr; }
  .credits dt { font-size: 12px; }
  .credits dd { font-size: 16px; }
}

.film {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  margin-bottom: var(--g);
}
.film img, .film video { width: 100%; height: 100%; object-fit: cover; }
.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film button {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.film button i {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(16,18,22,.72);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.film button i::before {
  content: ""; margin-left: 6px;
  border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.film button:hover i { transform: scale(1.06); background: var(--ink); }

.stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.stills figure { margin: 0; grid-column: 1 / -1; }
.stills figure.portrait { grid-column: auto; }
.stills img { width: 100%; height: auto; }

/* phones: pictures run edge to edge */
@media (max-width: 600px) {
  .film, .stills { margin-left: calc(-1 * var(--m)); margin-right: calc(-1 * var(--m)); }
  .film { margin-bottom: 8px; }
  .film button i { width: 64px; height: 64px; }
  .stills { grid-template-columns: 1fr; gap: 8px; }
  .stills figure.portrait { grid-column: 1 / -1; }
}

/* Other work: a rule + space sets it apart; the label stays in the house style */
.more { border-top: 1px solid var(--rule); margin-top: 72px; }
.more-head { padding: 40px 0 28px; }
@media (max-width: 600px) {
  .more { margin-top: 48px; }
  .more-head { padding: 28px 0 20px; }
}