/* ==========================================================================
   Created by Sid — Global styles
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-raised: #f2f2f2;
  --fg: #000000;
  --fg-muted: #626262;
  --line: rgba(0, 0, 0, 0.1);
  --line-strong: rgba(0, 0, 0, 0.2);

  --gutter: clamp(20px, 3.4vw, 64px);
  --col-gap: clamp(16px, 2vw, 32px);
  --header-h: 64px;
  /* Corner rounding for every video and image frame: square */
  --radius-media: 0;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);

  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Keep the scrollbar's space when the menu or player locks scrolling, so nothing jumps sideways */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
em { font-style: normal; }

/* Headings and the site name in black */
h1, h2, h3, .wordmark, .card__title, .statement { color: var(--fg); }

::selection { background: var(--fg); color: #fff; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--fg);
  color: #fff;
  font-size: 14px;
}
.skip-link:focus { top: 12px; }

/* Small label used throughout */
.eyebrow {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: -0.016em;
  color: var(--fg-muted);
}

/* One button for every clickable label on the site: a hairline capsule with ink type, light
   enough to leave the films in charge. On hover the line darkens to ink and the capsule
   takes a faint tint */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.button:hover { border-color: var(--fg); background: rgba(0, 0, 0, 0.04); }
.button--small { min-height: 34px; padding: 0 16px; font-size: 13px; }

/* ==========================================================================
   Header
   ========================================================================== */

/* Solid white bar in three parts: wordmark, centred nav, contact */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 0 var(--gutter);
  color: var(--fg);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}
/* White carries on above the bar, so films scrolling up never show through the browser's own
   toolbar area or the bounce at the top of the page */
.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: var(--bg);
  pointer-events: none;
}

/* A hairline appears under the header once the page moves beneath it */
.site-header.is-scrolled { border-bottom-color: var(--line); }

/* The name set in lowercase */
.wordmark {
  justify-self: start;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  white-space: nowrap;
}

.nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}

.nav a {
  padding: 6px 0;
  font-size: 14px;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.nav a[aria-current="page"] { color: var(--fg); }
.nav a:hover { color: var(--fg-muted); }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mobile menu toggle: two equal thin lines with rounded ends, in the header's text colour,
   turning into a cross when the menu opens. The 44px button gives a comfortable touch area;
   the lines sit flush with the page margin */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 1px;
  margin-top: -0.5px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.45s var(--ease);
}
.menu-toggle__icon::before { transform: translateY(-3.5px); }
.menu-toggle__icon::after { transform: translateY(3.5px); }
.menu-open .menu-toggle__icon::before { transform: rotate(45deg); }
.menu-open .menu-toggle__icon::after { transform: rotate(-45deg); }

/* Menu: a white panel beneath the header. It fades and settles into place, and its links
   follow a moment later; large titles set to the right, with open space instead of rules */
.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 45;
  padding: 20px var(--gutter) 40px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.menu-open .mobile-menu { opacity: 1; transform: none; visibility: visible; }

.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  display: block;
  padding: 10px 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-align: right;
  color: var(--fg);
  opacity: 0;
  transform: translateY(-4px);
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.menu-open .mobile-menu nav a { opacity: 1; transform: none; transition-duration: 0.3s, 0.5s, 0.5s; }
.menu-open .mobile-menu nav a:nth-child(1) { transition-delay: 0s, 0.06s, 0.06s; }
.menu-open .mobile-menu nav a:nth-child(2) { transition-delay: 0s, 0.1s, 0.1s; }
.menu-open .mobile-menu nav a:nth-child(3) { transition-delay: 0s, 0.14s, 0.14s; }
.menu-open .mobile-menu nav a:nth-child(4) { transition-delay: 0s, 0.18s, 0.18s; }
.mobile-menu nav a[aria-current="page"] { color: var(--fg); }
.mobile-menu nav a:hover { color: var(--fg-muted); }

/* ==========================================================================
   Homepage
   ========================================================================== */

/* First screen: the headline, sentence and button on top, the 16:9 showreel below, on every
   device. The whole group fits one screen: the reel takes the height left over once the text
   is measured (main.js sets --hero-text-h), never wider than the page. Text and reel share
   that width and are centred, so wide screens keep equal space on both sides */
.hero {
  --hero-pad: clamp(20px, 3.5vh, 56px);
  --hero-gap: clamp(20px, 3vh, 48px);
  /* Screen height minus the header, padding, gap and the measured text */
  --reel-w: min(100%, calc((100vh - var(--header-h) - 2 * var(--hero-pad) - var(--hero-gap) - var(--hero-text-h, 320px)) * 16 / 9));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hero-gap);
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--hero-pad)) var(--gutter) var(--hero-pad);
}

/* As wide as the reel, with the headline, sentence and button centred over it */
.hero__text {
  width: var(--reel-w);
  container-type: inline-size;
  text-align: center;
}

/* One role per line, in a bolder weight. "AI Video Producer" sets about 8.1em wide at this
   weight, so a size of 11.6% of the text column keeps it on one line at every screen size; on
   shorter screens it also scales with the height, leaving more room for the reel */
.hero__title {
  font-weight: 650;
  font-size: clamp(28px, min(11.6cqw, 6.5vh), 72px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.hero__title span { display: block; white-space: nowrap; }

/* A comfortable reading width, centred under the headline */
.hero__lede {
  max-width: min(96cqw, 34em);
  margin: clamp(12px, 2vh, 24px) auto 0;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.hero .button { margin-top: clamp(16px, 2.6vh, 28px); }

.hero__reel { width: var(--reel-w); }

@supports (height: 100svh) {
  .hero { --reel-w: min(100%, calc((100svh - var(--header-h) - 2 * var(--hero-pad) - var(--hero-gap) - var(--hero-text-h, 320px)) * 16 / 9)); }
}

.reel__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-raised);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.reel__video.is-ready { opacity: 1; }


/* About and contact, set apart by a hairline */
.colophon {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 48px;
  padding: clamp(72px, 9vw, 130px) var(--gutter);
  border-top: 1px solid var(--line);
}
.colophon__about { grid-column: 1 / span 6; }
.colophon__contact { grid-column: 8 / span 5; }
.colophon__text {
  max-width: 40em;
  margin: 10px 0 20px;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.012em;
}
.colophon__email {
  display: inline-block;
  margin-top: 10px;
  font-size: clamp(21px, 1.8vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  word-break: break-word;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.colophon__email:hover { color: var(--fg-muted); }

/* ==========================================================================
   Section headings
   ========================================================================== */

.section {
  padding: clamp(80px, 10vw, 150px) var(--gutter);
}
/* The work follows the showreel closely */
.hero + .section { padding-top: clamp(64px, 7vw, 110px); }

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}


/* ==========================================================================
   Page intro (interior pages)
   ========================================================================== */

.page-intro {
  padding: calc(var(--header-h) + clamp(56px, 8vw, 120px)) var(--gutter) clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}

.page-intro__title {
  font-weight: 500;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.page-intro__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: clamp(28px, 4vw, 48px);
  align-items: end;
}

.page-intro__lede {
  max-width: 520px;
  font-size: clamp(19px, 1.4vw, 21px);
  line-height: 1.38;
  color: var(--fg);
  justify-self: end;
}
/* Standing on its own under the title (the not-found page), it starts at the left */
.page-intro > .page-intro__lede { justify-self: start; }

/* ==========================================================================
   Media frames
   ========================================================================== */

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--bg-raised);
  aspect-ratio: 16 / 9;
}

.frame img,
.frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s var(--ease);
}

/* Film grain over the reference frames */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Projects gallery
   ========================================================================== */

/* Category filter as text tabs, each with its count */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.filters button {
  display: inline-flex;
  padding: 6px 0;
  font-size: 16px;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.filters button[aria-pressed="true"] { color: var(--fg); }
.filters button:hover { color: var(--fg-muted); }

/* Every film is set at the same height and keeps its own shape, so all vertical films are one
   size and all wide films are one size, wherever they fall in the rows */
/* Rows that don't fill the width sit in the middle of the page */
.gallery {
  --row: clamp(240px, 26vw, 420px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(36px, 4vw, 60px) clamp(16px, 2vw, 28px);
}
.gallery > .card {
  flex: 0 0 auto;
  width: calc(var(--row) * var(--ar));
  /* A wide film never runs wider than the page; it scales down, keeping its shape */
  max-width: 100%;
}

/* Tablets and up: rows are laid out from a slightly smaller size, then each row stretches to
   fill the width, every film growing in step with its shape so a row keeps one height.
   Growth stops at a quarter more than the set size, so a film left alone never balloons */
@media (min-width: 600px) {
  .gallery > .card {
    flex: var(--ar) 1 auto;
    width: calc(var(--row) * var(--ar) * 0.8);
    max-width: min(100%, calc(var(--row) * var(--ar) * 1.25));
  }
}

.gallery__empty {
  padding: clamp(40px, 6vw, 80px) 0;
  font-size: 17px;
  color: var(--fg-muted);
}

.card a { display: block; }
.card:hover .frame img { opacity: 0.9; }

.card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.card__title {
  font-weight: 500;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.card[hidden] { display: none; }

/* ==========================================================================
   Project detail
   ========================================================================== */

.project-hero {
  padding: calc(var(--header-h) + 48px) var(--gutter) 0;
}

.back-link { margin-bottom: clamp(36px, 5vw, 64px); }

.project-title {
  display: block;
  margin-top: 8px;
  font-weight: 500;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

/* Player keeps the video's own aspect ratio; verticals are capped by height */
.player {
  margin: clamp(32px, 4vw, 56px) var(--gutter) 0;
  overflow: hidden;
  border-radius: var(--radius-media);
}
.player--tall {
  width: min(calc(100% - 2 * var(--gutter)), calc(82vh * 9 / 16));
  margin-left: auto;
  margin-right: auto;
}
.player video { width: 100%; height: 100%; object-fit: contain; }

.project-body {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(40px, 6vw, 120px);
  padding: clamp(56px, 8vw, 120px) var(--gutter);
}

.spec { border-top: 1px solid var(--line); }
.spec div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.spec dt { margin: 0; }
.spec dd { margin: 0; color: var(--fg); }

.prose p {
  font-size: clamp(21px, 1.8vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.next-project {
  display: block;
  padding: clamp(48px, 7vw, 100px) var(--gutter);
  border-top: 1px solid var(--line);
  transition: background-color 0.4s var(--ease);
}
.next-project:hover { background: var(--bg-raised); }

/* Player overlay: film on the left, details on the right */
.viewer-open { overflow: hidden; }

.viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.viewer.is-open { opacity: 1; }
.viewer[hidden] { display: none; }

.viewer__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(20px, 3vw, 48px);
}
.viewer__stage video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 2 * clamp(20px, 3vw, 48px));
  border-radius: var(--radius-media);
}

.viewer__info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding: calc(clamp(20px, 3vw, 48px) + 64px) clamp(24px, 2.6vw, 44px) clamp(24px, 3vw, 48px);
  border-left: 1px solid var(--line);
}
.viewer__title {
  font-weight: 500;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.viewer__summary { font-size: 17px; line-height: 1.47; color: var(--fg); }
/* The details sit at a fixed spot at the top of the panel, so moving between films only
   swaps the values; the title and summary follow below */
.viewer__info .spec { order: -1; margin-bottom: 14px; }

.viewer__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
}
.viewer__step,
.viewer__close {
  padding: 6px 0;
  font-size: 14px;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.viewer__step:hover,
.viewer__close:hover { color: var(--fg-muted); }

.viewer__close {
  position: absolute;
  top: clamp(20px, 3vw, 48px);
  right: clamp(24px, 2.6vw, 44px);
}

/* ==========================================================================
   Workflows
   ========================================================================== */

/* Pipeline: icon nodes on a rail */
.engine {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding-top: 8px;
}
.engine::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: var(--line-strong);
}

.engine li { position: relative; z-index: 1; }
.engine__node {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 0 0 6px var(--bg);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.engine__node svg,
.discipline__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.engine li:hover .engine__node { background: var(--fg); border-color: var(--fg); color: #fff; }
.engine h3 { margin-top: 6px; font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; }
.engine p { margin-top: 4px; font-size: 15px; color: var(--fg-muted); }

.disciplines { border-top: 1px solid var(--line); }

.discipline {
  display: grid;
  grid-template-columns: 1fr 5fr 6fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(36px, 4.4vw, 64px) 0;
  border-bottom: 1px solid var(--line);
}

.discipline__num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.discipline__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--fg);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.discipline:hover .discipline__icon { background: var(--fg); border-color: var(--fg); color: #fff; }

.discipline__title {
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.discipline__text { font-size: clamp(17px, 1.3vw, 19px); color: var(--fg); max-width: 560px; }

/* Labels, not links: a soft grey fill with no outline, so they never read as buttons */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags li {
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--bg-raised);
  font-size: 14px;
  color: var(--fg-muted);
}

/* Reference assets: still + motion study */
.refs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.ref .frame { aspect-ratio: 16 / 9; }

.ref figcaption,
.cast figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}
.ref figcaption strong,
.cast figcaption strong { font-weight: 500; font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; }
.ref figcaption p,
.cast figcaption p { margin-top: 2px; font-size: 15px; color: var(--fg-muted); }

/* Character references: one frame per character */
.cast {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
}
.cast__img { overflow: hidden; border-radius: var(--radius-media); background: var(--bg-raised); }
.cast__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: opacity 0.4s var(--ease);
}
.cast li:hover .cast__img img { opacity: 0.9; }

/* ==========================================================================
   Info
   ========================================================================== */

.info-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(32px, 6vw, 120px);
  padding: clamp(56px, 8vw, 120px) var(--gutter);
  border-bottom: 1px solid var(--line);
}

/* Headline in ink, the rest of the sentence in grey */
.statement {
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.statement span { color: var(--fg-muted); }

.expertise {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.expertise li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.expertise li:nth-child(odd) { padding-right: 24px; }
.expertise li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }

.contact-block {
  padding: clamp(80px, 11vw, 160px) var(--gutter);
}

.contact-email {
  display: inline-block;
  margin-top: 14px;
  font-size: clamp(32px, 5vw, 80px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  word-break: break-word;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.contact-email:hover { color: var(--fg-muted); }

.contact-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.contact-meta p + p { margin-top: 4px; }
.contact-meta .button { margin-top: 10px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 20px var(--gutter) 24px;
  border-top: 1px solid var(--line);
}

.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 12px;
  color: var(--fg-muted);
}
.site-footer__row > span { letter-spacing: 0.02em; }
/* The owner's name is drawn here, not written in the page, so search engines don't index it */
.site-footer__owner::after { content: "SIDDHAN RAJA"; }

.site-footer__row nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__row a { transition: color 0.3s var(--ease); }
.site-footer__row a:hover { color: var(--fg); }

/* ==========================================================================
   Fades
   ========================================================================== */

/* On load */
.site-header,
.reveal { opacity: 0; }
.is-loaded .site-header { opacity: 1; transition: opacity 0.8s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease); }
.is-loaded .reveal {
  opacity: 1;
  transition: opacity 1s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}

/* On scroll */
.in-view { opacity: 0; transition: opacity 0.9s var(--ease); }
.in-view.is-visible { opacity: 1; }

/* Between pages. Where the browser supports page transitions, the old page fades and lifts away
   while the new one fades and settles in; the header holds still across both. Elsewhere the
   content simply fades out before the next page loads */
main, .site-footer { transition: opacity 0.3s var(--ease); }
.is-leaving main, .is-leaving .site-footer { opacity: 0; }

@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: page-out 0.32s var(--ease) both; }
::view-transition-new(root) { animation: page-in 0.55s var(--ease) 0.08s both; }
::view-transition-group(site-header) { animation: none; }
@keyframes page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .discipline { grid-template-columns: 1fr 6fr; }
  .discipline__body { grid-column: 2; }
}

@media (max-width: 860px) {
  :root { --header-h: 56px; }
  .site-header { grid-template-columns: 1fr auto; }
  .site-header .nav,
  .header-actions .button { display: none; }
  .menu-toggle { display: inline-block; }

  .page-intro__row,
  .project-body,
  .info-grid { grid-template-columns: 1fr; }
  .page-intro__lede { justify-self: start; }

  .colophon__about,
  .colophon__contact { grid-column: 1 / -1; }

  .refs { grid-template-columns: 1fr; }

  .viewer { display: block; overflow-y: auto; }
  .viewer[hidden] { display: none; }
  .viewer__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(62vh + 72px);
    padding: 72px 0 0;
  }
  .viewer__stage video { max-width: 100%; max-height: 100%; border-radius: 0; }
  .viewer__info { overflow: visible; padding: 28px var(--gutter) 40px; border-left: 0; }
  .viewer__close { top: 16px; right: var(--gutter); }

  .engine { grid-template-columns: 1fr; gap: 28px; }
  .engine::before { top: 36px; bottom: 28px; left: 28px; right: auto; width: 1px; height: auto; }
  .engine li { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; align-items: start; }
  .engine__node { grid-row: 1 / span 2; margin-bottom: 0; }
  .engine h3 { margin-top: 4px; }
  .engine p { margin-top: 4px; }
  .cast { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }

  .expertise { grid-template-columns: 1fr; }
  .expertise li:nth-child(n) { padding: 14px 0; border-left: 0; }

  .contact-meta { grid-template-columns: 1fr; }

  .section__head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Phones: films run the full width of the screen, on the homepage and the Projects page. Landscape films take a row
   each; vertical films pair up two to a row */
@media (max-width: 599px) {
  .gallery > .card { width: 100%; }
  .gallery > .card--tall { width: calc((100% - clamp(16px, 2vw, 28px)) / 2); }
}

/* Tablets and up: the sentence stays on one line. It sets about 40em wide, so the type eases
   down only when the screen is too narrow for it, and it stays centred on the page even where
   it runs wider than the reel */
@media (min-width: 600px) {
  .hero__lede {
    width: max-content;
    max-width: none;
    margin-left: 50%;
    translate: -50% 0;
    white-space: nowrap;
    font-size: min(clamp(17px, 1.3vw, 21px), calc((100vw - 2 * var(--gutter)) / 41));
  }
}

/* Tablets: taller rows on the Projects page so vertical films stay large, laid out from a
   smaller size so landscape films pair up instead of sitting alone */
@media (min-width: 600px) and (max-width: 1080px) {
  .gallery { --row: clamp(300px, 34vw, 380px); }
  .gallery > .card { width: calc(var(--row) * var(--ar) * 0.7); }
}

@media (max-width: 560px) {
  .discipline { grid-template-columns: 1fr; gap: 16px; }
  .discipline__body { grid-column: 1; }
  .cast { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .site-header, .reveal, .in-view, .reel__video { opacity: 1 !important; }
  .mobile-menu nav a { transform: none !important; }
  .menu-open .mobile-menu nav a { opacity: 1 !important; }
}