/* Shared styles for every page */

:root {
  --black: #000;
  --white: #fff;
  --grey: #a6a6a6;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --edge: clamp(16px, 2.2vw, 48px); /* distance from the screen edges */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

body {
  background: var(--black);
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

/* WORK / ABOUT roll: on hover the word scrolls up out of an invisible window
   and a copy rises from below, twice, then stops. Leaving plays it in reverse. */
.roll-window {
  display: inline-block;
  vertical-align: bottom;
  height: 1em;
  line-height: 1;
  overflow: hidden;
}

.roll-track {
  display: block;
  transition: transform 0.5s cubic-bezier(0.45, 0, 0.2, 1);
}

.roll-track > span {
  display: block;
  height: 1em;
}

@media (hover: hover) {
  .roll:hover .roll-track {
    transform: translateY(-2em);
  }
}

.roll:focus-visible .roll-track {
  transform: translateY(-2em);
}

@media (prefers-reduced-motion: reduce) {
  .roll-track {
    transition: none;
  }
}

/* Hidden on screen, still read by screen readers and search engines */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- Homepage ---------- */

.home {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Statement, top left */
.intro {
  position: absolute;
  z-index: 2;
  top: var(--edge);
  left: var(--edge);
  right: var(--edge);
  font-size: clamp(18px, 2.75vw, 66px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  pointer-events: none;
}

.intro span {
  display: block;
}

/* WORK and ABOUT, bottom */
.menu {
  position: absolute;
  z-index: 2;
  left: var(--edge);
  right: var(--edge);
  bottom: calc(var(--edge) * 0.55);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 12.4vw;
  line-height: 0.76;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* The ring of loops */
.ring-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.ring-stage.is-ready {
  opacity: 1;
}

.ring-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ring-stage.is-pointing {
  cursor: pointer;
}

/* The project links and their videos stay in the page for keyboards,
   screen readers and search engines, but are drawn on the canvas.
   Kept 1px and nearly transparent (not hidden) so browsers keep playing them. */
.ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  list-style: none;
  opacity: 0.01;
  pointer-events: none;
}

.ring video {
  width: 1px;
  height: 1px;
}

/* If the browser can't draw the ring, show the loops as a simple row */
.ring-stage.is-fallback .ring {
  top: 50%;
  width: 100%;
  height: auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.ring-stage.is-fallback .ring video {
  width: auto;
  height: 30vh;
}

/* ---------- Header (inner pages) ---------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--edge);
  padding: calc(var(--edge) * 0.8) var(--edge);
  font-size: clamp(18px, 2.9vw, 68px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: 0.8em;
}

.site-nav a[aria-current="page"] {
  color: var(--grey);
}


/* ---------- Work page ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
}

.work-item a {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0d0d;
}

.work-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0, 0, 1);
}

/* Hover: the image grows inside its frame (cropping tighter) and the title rolls */
@media (hover: hover) {
  .work-item a:hover img {
    transform: scale(1.06);
  }
}

.work-item a:focus-visible img {
  transform: scale(1.06);
}

.work-title .roll-window {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .work-item img {
    transition: none;
  }
}

/* A soft shade at the bottom so titles stay readable on bright images */
.work-item a::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.work-caption {
  position: absolute;
  z-index: 1;
  left: var(--edge);
  right: var(--edge);
  bottom: var(--edge);
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  line-height: 1.05;
}

.work-title {
  font-size: clamp(16px, 1.75vw, 42px);
  letter-spacing: -0.005em;
}

.work-client {
  font-size: clamp(11px, 1.15vw, 28px);
  color: var(--grey);
}

@media (max-width: 640px) {
  .work-grid {
    grid-template-columns: 1fr;
  }

  .work-item--empty {
    display: none;
  }
}

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

.project {
  width: min(62.5vw, 1600px);
  margin: clamp(32px, 3.6vw, 90px) auto 0;
}

.project-film {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0d0d0d;
}

.project-film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Title and description across the width of the film, credits underneath */
.project-text {
  margin-top: clamp(32px, 3.6vw, 90px);
  font-size: clamp(14px, 0.9vw, 21px);
  line-height: 1.35;
}

.project-title {
  margin-bottom: 1.35em;
  font-size: inherit;
  font-weight: 700;
  text-transform: uppercase;
}

.project-description p + p {
  margin-top: 1.35em;
}

/* Credits: role in grey on the left, names in white on the right, a thin line under each */
.project-credits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(20px, 2vw, 48px);
  margin-top: clamp(28px, 2.6vw, 64px);
  font-family: var(--mono);
  font-size: 0.8em;
  line-height: 1.3;
  list-style: none;
}

.credit {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.2em;
  padding: 0.55em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.credit-role {
  color: var(--grey);
}

.credit-names {
  text-align: right;
}

.credit-note {
  text-align: left;
}

.credit-section {
  grid-column: 1 / -1;
  padding: 1.8em 0 0.55em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  text-transform: uppercase;
}

.other-projects-title {
  margin: clamp(56px, 5.2vw, 130px) 0 clamp(28px, 2.6vw, 64px);
  font-size: clamp(28px, 2.9vw, 68px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .project {
    width: auto;
    margin-left: var(--edge);
    margin-right: var(--edge);
  }

  .project-credits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .project-credits {
    grid-template-columns: 1fr;
  }
}

/* ---------- About page ---------- */

/* Breathing space under the awards */
.about {
  padding-bottom: clamp(48px, 6vw, 144px);
}

/* "Say hello" at the same size as the header */
.about-hello {
  padding: clamp(16px, 1.8vw, 44px) 0;
  text-align: center;
  font-size: clamp(22px, 2.9vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.about-hello-label {
  color: var(--grey);
}

.about-hello-email {
  overflow-wrap: anywhere;
}

/* Portrait on the left, bio beside it */
.about-intro {
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: clamp(24px, 3vw, 72px);
  align-items: start;
}

.about-portrait {
  display: block;
  width: 100%;
  height: auto;
}

.about-bio {
  text-align: justify;
}

/* Awards: like the credits, in two columns, with the year in its own slot */
.project-credits.awards {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0;
}

.awards .credit-section:first-child {
  padding-top: 0;
}

/* Each award: festival on top, what it won underneath */
.awards .credit {
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.25em;
}

.awards .credit-names {
  text-align: left;
}

/* Festival and year in white, what was won in grey */
.awards .credit-role {
  color: var(--white);
}

.awards .credit-names {
  color: var(--grey);
}

.award-year {
  display: inline-block;
  width: 5ch;
}

.award-year:empty {
  display: none;
}

.about .other-projects-title {
  margin-bottom: clamp(20px, 1.8vw, 44px);
}

@media (max-width: 900px) {
  .about-intro {
    grid-template-columns: 1fr;
  }

  .about-portrait {
    width: min(60%, 320px);
  }

  .project-credits.awards {
    grid-template-columns: 1fr;
  }
}

/* Phones, inner pages: roomier header with the name on two lines,
   bigger project titles, centred portrait on ABOUT */
@media (max-width: 640px) {
  .site-header {
    padding: 22px 20px;
    font-size: 6.3vw;
  }

  .site-name {
    display: inline-block;
    width: min-content;
    white-space: normal;
  }

  /* WORK above ABOUT, right-aligned, mirroring the two-line name */
  .site-nav {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .work-title {
    font-size: 4.6vw;
  }

  .work-client {
    font-size: 3.3vw;
  }

  .about-portrait {
    margin: 0 auto;
  }
}

/* Narrow screens: a bigger statement that wraps naturally,
   WORK and ABOUT stacked on top of each other */
@media (max-width: 640px) {
  .intro {
    font-size: 7vw;
  }

  .intro span {
    display: inline;
  }

  .menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.04em;
    font-size: 27vw;
  }
}