/* ---------- Tokens ---------- */
:root {
  --bg: #f8f7f4;
  --fg: #111111;
  --placeholder: #cfcecb;
  --muted: #8d8c88;

  --fs: clamp(11px, 0.8vw, 13px);
  --pad: clamp(12px, 1.1vw, 18px);

  /* Strip sizing (preferred sizes). script.js shrinks them when the window is too short
     for the hovered item and its caption, and widens the gap when there are too few
     projects to fill the screen, so each project shows exactly once at rest. */
  --thumb: 19vw;    /* resting width of every item */
  --active: 32vw;   /* width of the hovered item */
  --gap: 0.93vw;

  --ease: cubic-bezier(0.22, 0.7, 0.1, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--fs);
  line-height: 1.2;
  letter-spacing: -0.05em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }

a:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

/* Lenis smooth scrolling (loaded on pages other than the landing page) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr); /* keep the overflowing strip from widening the page */
}

/* ---------- Header / footer bars ---------- */
.bar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: var(--pad);
}

.bar--top { align-items: start; }
.bar--bottom { align-items: end; }

.bar__name { grid-column: 1 / 5; grid-row: 1; justify-self: start; }

.nav {
  grid-column: 9 / 13;
  grid-row: 1;
  justify-self: end;
  display: flex;
  gap: 2.4em;
}

.nav a, .bar__name { transition: opacity 0.2s; }
.nav a:hover, .bar__name:hover { opacity: 0.45; }

/* On pages with a current nav item, the other links are dimmed */
.nav:has([aria-current="page"]) a:not([aria-current="page"]) { opacity: 0.45; }
.nav:has([aria-current="page"]) a:not([aria-current="page"]):hover { opacity: 1; }

.clock time { font-variant-numeric: tabular-nums; }

.bar__contact {
  grid-column: 9 / 11;
  grid-row: 1;
  justify-self: start;
  opacity: 0.4;
}

/* Sits in the same grid cell as the strip, just below it on the left
   (outside the strip's edge fade). --strip-h is set by script.js. */
.scroll-hint {
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  justify-self: start;
  margin-left: var(--pad);
  transform: translateY(calc(var(--strip-h, var(--thumb) * 4 / 3) / 2 + 2.4em));
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* Get out of the way while a project is enlarged */
.page:has(.project.is-active) .scroll-hint { opacity: 0; }

.hint-touch { display: none; }

@media (hover: none) {
  .hint-pointer { display: none; }
  .hint-touch { display: inline; }
}

.bar__contact a { transition: opacity 0.2s; }
.bar__contact a:hover { opacity: 0.45; }

/* ---------- Project strip ---------- */
.stage {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  align-items: center;
  overflow-x: clip;
  /* Fades the outermost items into the background */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.track {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* overflows evenly on both sides */
  gap: var(--gap);
}

.project {
  position: relative;
  flex: 0 0 auto;
  width: var(--thumb);
  transition: width 0.7s var(--ease);
}

.project.is-active { width: var(--active); }

/* Loop mode (set by script.js on the horizontal layout): items sit on a ring
   and are positioned with transforms; widths are animated in JS */
.track.is-looping {
  position: relative;
  display: block;
  height: calc(var(--active) * 4 / 3);
}

.track.is-looping .project {
  position: absolute;
  top: 50%;
  left: 0;
  transition: none;
  will-change: transform;
}

/* Shared by placeholders and real images */
.project__media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--placeholder);
}

.project__caption {
  position: absolute;
  left: 0;
  bottom: calc(100% + 2.3em);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.project__num { margin-bottom: 1.2em; }

.project.is-active .project__caption {
  opacity: 1;
  transition: opacity 0.4s 0.25s;
}

/* ---------- About page ---------- */
.about {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--pad);
  align-items: start;
  align-content: start;
  padding: clamp(32px, 5vh, 64px) var(--pad) clamp(64px, 12vh, 140px);
}

/* Large intro paragraph: gray, with key phrases in black */
.about__intro {
  grid-column: 1 / 9;
  margin: 0;
  font-size: clamp(24px, 2.5vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.045em;
  color: var(--muted);
}

.about__intro strong { font-weight: inherit; color: var(--fg); }

.about__portrait {
  grid-column: 10 / 13;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--placeholder);
}

/* ---------- Project (case study) pages ---------- */
.case {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--pad);
  align-content: start;
  padding: clamp(32px, 5vh, 64px) var(--pad) clamp(64px, 12vh, 140px);
}

.case > * { grid-column: 1 / 13; }

.case__intro {
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  margin-bottom: clamp(40px, 7vh, 88px);
}

.case__lead { grid-column: 1 / 7; }

.case__num { margin-bottom: 1.2em; }

.case__title {
  margin: 0 0 0.7em;
  font-size: clamp(24px, 2.5vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.045em;
}

/* Small gray discipline tag next to the title */
.case__tag {
  margin-left: 0.25em;
  font-size: var(--fs);
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--muted);
  vertical-align: 0.6em;
}

.case__text + .case__text { margin-top: 1em; }
.case__text strong { font-weight: 600; }

.case__text {
  max-width: 40em;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
  letter-spacing: -0.03em;
}

/* Client / Timeline / Role / Year */
.case__meta {
  grid-column: 9 / 13;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8em var(--pad);
  margin: 0;
  padding-top: calc(1.2em + var(--fs) * 1.2); /* line up with the title, past the (02) */
}

.case__meta dt,
.case__label {
  margin: 0 0 0.3em;
  font: inherit;
  color: var(--muted);
}

.case__meta dd { margin: 0; }

.case__media { margin: 0 0 var(--gap); }

.case__media img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--placeholder);
}

.case__pair {
  display: flex;
  gap: var(--gap);
}

/* Let the flex values alone decide the widths */
.case__pair > .case__media { min-width: 0; }

/* Logo on a white panel (2:1, to match a 2:1 image beside it) */
.case__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
  background: #fff;
}

.case__panel img {
  width: 72%;
  background: none;
}

/* Full-width video at its own aspect ratio (e.g. a website recording) */
.case__clip video {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

/* Video on a black panel shaped like the wide mockups (2400 x 1018) */
.case__video {
  display: flex;
  justify-content: center;
  aspect-ratio: 2400 / 1018;
  background: #000;
  overflow: hidden;
}

.case__video video {
  display: block;
  height: 100%;
  width: auto;
}

.case__section {
  grid-column: 1 / 7;
  margin: clamp(56px, 10vh, 120px) 0 clamp(40px, 7vh, 88px);
}

.case__heading {
  margin: 0 0 0.7em;
  font-size: clamp(20px, 1.8vw, 32px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.case__team {
  grid-column: 1 / 10;
  opacity: 0.4;
  margin-top: clamp(56px, 10vh, 120px);
}

/* Uniform 40% block, like the footer contact links */
.case__team .case__label { color: inherit; }

.case__team p {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
  letter-spacing: -0.03em;
}

.case__back {
  justify-self: start;
  margin-top: clamp(40px, 7vh, 88px);
  transition: opacity 0.2s;
}
.case__back:hover { opacity: 0.45; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  :root {
    --fs: 12px;
    --gap: 1vw;
  }

  .bar__contact { grid-column: 7 / 9; }

  .about__intro { grid-column: 1 / 13; }
  .about__portrait { grid-column: 7 / 13; margin-top: 48px; }

  .case__lead,
  .case__section,
  .case__team { grid-column: 1 / 11; }
  .case__meta { grid-column: 1 / 9; grid-row: 2; padding-top: 0; margin-top: 40px; }
  .case__video { aspect-ratio: 3 / 2; } /* taller panel so the phone stays readable */
}

/* ---------- Mobile: vertical list ---------- */
@media (max-width: 700px) {
  .bar--top {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
  }

  .bar__name { grid-column: 1 / 5; }
  .nav { grid-column: 5 / 13; gap: 1.2em; }
  /* Native scrolling on mobile, so no scroll hint */
  .scroll-hint { display: none; }

  /* Contact block gets its own row above the name and nav */
  .bar__contact { grid-column: 1 / 13; margin-bottom: 2.4em; }
  .bar--bottom .bar__name,
  .bar--bottom .nav { grid-row: 2; }

  .stage {
    display: block;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 18vh var(--pad) 22vh;
  }

  .track {
    flex-direction: column;
    align-items: stretch;
    gap: 14vw;
  }

  /* Caption left, image right, on the same 12-column grid as the bars */
  .project,
  .project.is-active {
    width: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }

  .project__caption {
    position: static;
    grid-column: 1 / 5;
    white-space: normal;
    opacity: 0.25;
    transition: opacity 0.4s;
  }

  .project__media { grid-column: 5 / 13; }

  /* About: intro text, then the photo full width */
  .about { padding-top: 6vh; }
  .about__intro { font-size: 26px; }
  .about__portrait { grid-column: 1 / 13; margin-top: 40px; }

  /* Case pages: one column, image pairs stacked */
  .case__lead,
  .case__section,
  .case__team,
  .case__meta { grid-column: 1 / 13; }
  .case__pair { flex-direction: column; }
  .case__pair .case__media { flex: none !important; }
  .case__video { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .project, .project__caption { transition: none !important; }
}