/* ============================================================
   EMRE ARIKAN — portfolio
   ------------------------------------------------------------
   Colour
     --ink        #000000  page background (true black, so the reel
                           and the ripple sit on nothing)
     --coal       #101010  raised surfaces: players, form fields
     --bone       #f2efe9  primary text (19.5:1 on ink)
     --ash        #bdb9b2  secondary text (11.4:1)
     --smoke      #8a8781  tertiary text, 14px and up only (5.9:1)
     --signal     #e5342a  the red: logo dot, ripple, play buttons,
                           focus. Fills and borders only.
     --signal-text #ff5a4e same red lifted for text (6.8:1)
   Type
     Display  Syne 700/800 (art-school grotesque, wide at heavy weights)
     Text     Archivo (grotesque, legible at small sizes)
   Rules of the house
     - Syne for anything you look at, Archivo for anything you read.
     - Red is a signal, never a field.
     - Space separates sections; lines only where they carry
       structure (lists, tables, form fields).
   ============================================================ */

:root {
  --ink: #000000;
  --coal: #101010;
  --coal-2: #181818;
  --bone: #f2efe9;
  --ash: #bdb9b2;
  --smoke: #8a8781;
  --line: rgba(242, 239, 233, 0.16);
  --line-strong: rgba(242, 239, 233, 0.34);
  --signal: #e5342a;
  --signal-text: #ff5a4e;

  /* legacy names, kept so older snippets and the admin still resolve */
  --bg: var(--ink);
  --panel: var(--coal);
  --text: var(--bone);
  --secondary: var(--ash);
  --muted: var(--smoke);
  --hairline: var(--line);
  --hairline-strong: var(--line-strong);
  --accent: var(--signal);
  --accent-text: var(--signal-text);
  --grey-deco: #4a4845;

  /* Syne: a grotesque drawn for an art centre; its heavy weights get wide
     and odd in a way a plain grotesque never does */
  --display: "Syne", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-w: 700;
  --serif: var(--display);
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--serif);
  --font-body: var(--sans);
  --font-mono: var(--sans);

  /* type scale, perfect fourth (1.333) from 17px body */
  --t-label: 13px;
  --t-small: 15px;
  --t-body: 17px;
  --t-lede: clamp(19px, 1.6vw, 23px);
  --t-h3: clamp(26px, 2.4vw, 34px);
  --t-h2: clamp(34px, 4.2vw, 60px);
  --t-h1: clamp(48px, 8.4vw, 132px);
  --t-hero: clamp(64px, 13.5vw, 232px);

  --max-w: 1440px;
  --pad-x: clamp(20px, 4vw, 64px);
  --nav-h: 72px;
  --gap: clamp(16px, 2vw, 28px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ---------- type ---------- */

.display,
.h1, .h2, .h3 {
  font-family: var(--serif);
  font-weight: var(--display-w);
  letter-spacing: -0.015em;
  line-height: 0.98;
  text-wrap: balance;
}
.h1 { font-size: var(--t-h1); letter-spacing: -0.025em; margin-left: -0.03em; }
.h2 { font-size: var(--t-h2); line-height: 1.04; }
.h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.005em; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--bone);
  max-width: 36ch;
  text-wrap: pretty;
}

.label,
.mono {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--smoke);
}

.prose p {
  color: var(--ash);
  max-width: 64ch;
  text-wrap: pretty;
}
.prose p + p { margin-top: 1em; }
.prose p:first-child { color: var(--bone); }

/* ---------- layout ---------- */

.wrap {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

main { min-height: calc(100vh - var(--nav-h)); display: block; }

.page-head {
  padding-top: calc(var(--nav-h) + clamp(56px, 12vh, 140px));
  padding-bottom: clamp(48px, 9vh, 110px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 28px;
  align-items: end;
}
.page-head > .h1,
.page-head > h1 { grid-column: 1 / -1; font-size: var(--t-h1); }
.page-head > .lede { grid-column: 1 / span 6; }
.page-head > .label { grid-column: 1 / -1; }
.page-head-tight { padding-top: clamp(56px, 10vh, 120px); }

@media (min-width: 900px) {
  .page-head.split > h1 { grid-column: 1 / span 8; }
  .page-head.split > .lede { grid-column: 9 / -1; justify-self: end; padding-bottom: 0.6em; }
}

.section { padding-top: clamp(56px, 10vh, 120px); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(28px, 5vh, 56px);
}
.section-head a {
  font-size: var(--t-small);
  color: var(--ash);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.section-head a:hover { color: var(--bone); border-color: var(--signal); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  z-index: 100;
  transition: background 260ms ease, border-color 260ms ease;
  border-bottom: 1px solid transparent;
}
.nav.solid,
body:not([data-page="home"]) .nav,
body.no-hero .nav {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}

.nav .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-brand {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: var(--display-w);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 44px;
}
.nav-brand em {
  font-size: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal);
  margin-left: 9px;
  transform: translateY(-1px);
  transition: transform 220ms var(--ease);
}
.nav-brand:hover em { transform: translateY(-1px) scale(1.35); }

.nav-links {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  list-style: none;
}
.nav-links a {
  position: relative;
  font-size: var(--t-small);
  font-weight: 450;
  color: var(--ash);
  padding: 10px 0;
  transition: color 160ms ease;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] { color: var(--bone); }
.nav-links a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--signal);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--bone);
  font-size: var(--t-small);
  min-height: 44px;
  padding: 0 2px;
  cursor: pointer;
}

/* phones: links collapse into a full-screen menu */
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 10px; }
  .nav-toggle::after {
    content: "";
    width: 18px; height: 7px;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transition: transform 220ms ease;
  }
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    background: var(--ink);
    flex-direction: column;
    gap: 0;
    padding: 24px var(--pad-x);
    visibility: hidden;
    opacity: 0;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links a {
    display: block;
    font-family: var(--serif);
  font-weight: var(--display-w);
    font-size: 44px;
    line-height: 1.1;
    color: var(--bone);
    padding: 18px 0;
  }
  .nav-links a[aria-current="page"]::before {
    left: auto; right: 0; bottom: auto; top: 50%;
    width: 10px; height: 10px; margin: -5px 0 0;
  }
  /* backdrop-filter makes the nav a containing block for fixed children,
     which would trap the overlay inside the 64px bar */
  body.menu-open .nav {
    background: var(--ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: var(--line);
  }
  body.menu-open .nav-links {
    visibility: visible;
    opacity: 1;
    transition: opacity 220ms ease;
  }
  body.menu-open { overflow: hidden; }
}

/* ---------- home hero: the reel, nothing on top of it ---------- */
/* a little shorter than the screen so the Visual / Audio switch peeks
   in at the bottom and invites the scroll */

.hero {
  position: relative;
  height: calc(100vh - clamp(96px, 15vh, 160px));
  height: calc(100svh - clamp(96px, 15vh, 160px));
  min-height: 420px;
  overflow: hidden;
  background: var(--ink);
}
.hero-media,
.hero-media video,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-media video,
.hero-media img {
  object-fit: cover;
  opacity: 0;
  filter: grayscale(var(--reel-gray, 0));
  transition: opacity 1200ms ease;
}
.hero-media.on video,
.hero-media.on img { opacity: var(--reel-opacity, 1); }

/* only enough shade to keep the nav and the sound button readable */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 24%);
}
.hero-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding-bottom: clamp(16px, 3vh, 32px);
}

/* phones without a phone version of the reel: show it at its own 16:9
   shape under the bar instead of cropping a sliver out of the middle */
.hero.band {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin-top: var(--nav-h);
}
.hero.band .hero-bar { padding-bottom: 10px; }
.hero.band .btn-sound { min-height: 38px; padding: 0 14px 0 12px; font-size: 14px; }

/* ---------- sound toggle ---------- */

.btn-sound {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px 0 16px;
  border: 1.5px solid rgba(242, 239, 233, 0.7);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.btn-sound svg { width: 20px; height: 20px; flex: none; }
.btn-sound .waves { opacity: 0; transition: opacity 180ms ease; }
.btn-sound .cross { opacity: 1; transition: opacity 180ms ease; }
.btn-sound[aria-pressed="true"] .waves { opacity: 1; }
.btn-sound[aria-pressed="true"] .cross { opacity: 0; }
.btn-sound:hover,
.btn-sound:focus-visible { border-color: var(--bone); background: rgba(0, 0, 0, 0.6); }
.btn-sound[aria-pressed="true"] { border-color: var(--signal); }

/* ---------- selected work: Visual / Audio switch over the ripple ---------- */

.works {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(20px, 3.5vh, 40px);
  padding-bottom: clamp(72px, 13vh, 150px);
}
body.no-hero .works { padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 96px)); }

#works-ripple {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--ripple-opacity, 1);
}

.switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line-strong);
}
.switch-tab {
  position: relative;
  container-type: inline-size;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--bone);
  text-align: left;
  cursor: pointer;
  padding: 0 var(--gap) clamp(18px, 3vh, 30px) 0;
}
.switch-tab + .switch-tab { padding-left: var(--gap); padding-right: 0; }
.switch-tab:focus-visible { outline-offset: 6px; }

.t-name {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.1em;
  font-family: var(--display);
  font-weight: 800;
  /* present under the reel without competing with it */
  font-size: clamp(30px, 11cqi, 84px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-left: -0.03em;
  white-space: nowrap;
  color: var(--bone);
  transition: color 240ms ease, text-shadow 240ms ease;
}
/* The side you're not on is drawn in outline. A text stroke would trace
   every overlapping contour inside the variable font's letters, which is
   what showed as lines crossing through them. Instead the letters are
   filled with the page black and ringed with a 1px shadow, so only the
   outer edge of each letter can show. */
.switch-tab[aria-selected="false"] .t-name {
  color: var(--ink);
  --o: var(--smoke);
  text-shadow:
    1px 0 0 var(--o), -1px 0 0 var(--o), 0 1px 0 var(--o), 0 -1px 0 var(--o),
    0.7px 0.7px 0 var(--o), -0.7px 0.7px 0 var(--o), 0.7px -0.7px 0 var(--o), -0.7px -0.7px 0 var(--o);
}
.switch-tab[aria-selected="false"]:hover .t-name { --o: var(--bone); }
.t-name::after {
  content: "";
  width: 0.13em;
  height: 0.13em;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--signal);
  transform: scale(0);
  transition: transform 300ms var(--ease);
}
.switch-tab[aria-selected="true"] .t-name::after { transform: scale(1); }

.t-text {
  display: block;
  margin-top: 14px;
  font-size: var(--t-small);
  color: var(--ash);
  max-width: 40ch;
}
.switch-tab[aria-selected="true"] .t-text { color: var(--bone); }

/* red rule under the chosen side */
.switch-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: var(--gap);
  bottom: -2px;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease);
}
.switch-tab + .switch-tab::after { left: var(--gap); right: 0; }
.switch-tab[aria-selected="true"]::after { transform: scaleX(1); }

.works-panels { display: grid; }
/* both panels share one cell, so the section is as tall as the taller
   one whichever side is chosen; "See more" sits at the same spot on both */
.works-panel { grid-area: 1 / 1; padding-top: clamp(32px, 6vh, 64px); display: flex; flex-direction: column; }
.works-panel[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.works-panel .works-more { margin-top: auto; padding-top: clamp(36px, 6vh, 60px); }
.works-panel.entering { animation: panel-in 420ms var(--ease) both; }
/* On narrow screens the audio players stack into a much taller column, so
   sharing one cell left a big empty gap under the projects. There, the
   hidden panel leaves the flow and the section fits the side you're on. */
@media (max-width: 820px) {
  .works-panels { position: relative; }
  .works-panel[hidden] { position: absolute; top: 0; left: 0; right: 0; }
  .works-panel .works-more { margin-top: 0; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--gap);
  row-gap: 40px;
}
.works-grid .project-card,
.works-grid .project-card.full { grid-column: auto; }
.works-grid .card-media,
.works-grid .project-card.full .card-media { aspect-ratio: 4 / 5; }
.works-grid .project-card h3,
.works-grid .project-card.full h3 { font-size: clamp(20px, 1.7vw, 26px); }
.works-grid .card-summary { display: none; }

.works-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.works-more { margin-top: clamp(36px, 6vh, 60px); }
.works-panel > .works-grid,
.works-panel > .works-tracks { flex: none; }
.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 26px;
  border: 1.5px solid var(--bone);
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 500;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-more::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal);
}
.btn-more:hover { background: var(--bone); color: var(--ink); }

/* ---------- play buttons ---------- */

.btn-reel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 0;
  color: var(--bone);
  cursor: pointer;
  font-size: var(--t-small);
  font-weight: 500;
  padding: 0;
  min-height: 44px;
}
.btn-reel .disc {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--bone);
  display: grid;
  place-items: center;
  flex: none;
  transition: background 220ms ease, border-color 220ms ease, transform 300ms var(--ease);
}
.btn-reel .disc svg { width: 16px; height: 16px; fill: currentColor; margin-left: 3px; }
.btn-reel:hover .disc,
.btn-reel:focus-visible .disc {
  background: var(--signal);
  border-color: var(--signal);
  transform: scale(1.06);
}

/* ---------- visual page: heading beside a contained reel ---------- */

.visual-head {
  padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 96px));
  padding-bottom: clamp(56px, 10vh, 120px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 32px;
  align-items: end;
}
.visual-head .head-text { grid-column: 1 / span 4; }
.visual-head h1 { font-size: clamp(48px, 6.4vw, 104px); }
.visual-head .lede { margin-top: 20px; }
.visual-head.no-reel .head-text { grid-column: 1 / -1; }
.visual-head.no-reel h1 { font-size: var(--t-h1); }

.reel-box {
  grid-column: 5 / -1;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--coal);
  overflow: hidden;
}
.reel-box video,
.reel-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(var(--reel-gray, 0));
}
.reel-box .btn-sound { position: absolute; right: 14px; bottom: 14px; z-index: 2; }

/* ---------- theater: full-screen player with sound ---------- */

.theater {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 8vh, 88px) clamp(0px, 4vw, 64px);
  opacity: 0;
  transition: opacity 260ms ease;
}
.theater.on { opacity: 1; }
.theater-frame {
  position: relative;
  width: 100%;
  max-width: calc((100vh - 176px) * 16 / 9);
  aspect-ratio: 16 / 9;
  background: #000;
}
.theater-frame video,
.theater-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.theater-close {
  position: absolute;
  top: 14px;
  right: clamp(12px, 3vw, 40px);
  background: transparent;
  border: 0;
  color: var(--bone);
  font-size: var(--t-small);
  min-height: 44px;
  padding: 0 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.theater-close::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--signal);
}
body.theater-open { overflow: hidden; }

/* ---------- project grid ---------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: clamp(48px, 8vh, 96px);
  padding-bottom: clamp(32px, 6vh, 72px);
}

.project-card { grid-column: span 6; display: block; }
.project-card.full { grid-column: 1 / -1; }

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--coal);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-card.full .card-media { aspect-ratio: 21 / 9; }

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.card-media .card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.card-media .card-video.on { opacity: 1; }
.project-card:hover .card-media img { transform: scale(1.025); }

.card-media .media-empty,
.media-empty {
  font-size: var(--t-small);
  color: var(--smoke);
}

.card-text {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: baseline;
  margin-top: 20px;
}
.project-card h3 {
  font-family: var(--serif);
  font-weight: var(--display-w);
  font-size: var(--t-h3);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.project-card.full h3 { font-size: clamp(30px, 3.4vw, 48px); }
.project-card:hover h3,
.project-card:focus-visible h3 { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 0.07em; text-underline-offset: 0.12em; }
.card-year {
  font-size: var(--t-small);
  color: var(--smoke);
  font-variant-numeric: tabular-nums;
}
.card-summary {
  grid-column: 1 / -1;
  margin-top: 8px;
  color: var(--ash);
  font-size: var(--t-small);
  max-width: 58ch;
}

/* ---------- project detail ---------- */

.project-head {
  padding-top: calc(var(--nav-h) + clamp(40px, 9vh, 110px));
  padding-bottom: clamp(36px, 6vh, 72px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 32px;
}
.project-head .back-link { grid-column: 1 / -1; }
.project-head h1 { grid-column: 1 / -1; font-size: var(--t-h1); }
.project-head .lede { grid-column: 1 / span 6; max-width: 40ch; }

.project-meta {
  grid-column: 8 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  align-self: start;
}
.project-meta div { border-top: 1px solid var(--line); padding-top: 10px; }
.project-meta dt { font-size: var(--t-label); color: var(--smoke); font-weight: 500; }
.project-meta dd { font-size: var(--t-small); color: var(--bone); margin-top: 2px; }

.back-link {
  font-size: var(--t-small);
  color: var(--ash);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  justify-self: start;
  transition: color 160ms ease;
}
.back-link::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  transition: width 220ms var(--ease);
}
.back-link:hover { color: var(--bone); }
.back-link:hover::before { width: 28px; }

/* main video / feature media */
.feature {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--coal);
  overflow: hidden;
}
.feature > video,
.feature > img,
.feature > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.feature.playing > video { object-fit: contain; background: #000; }
.feature-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(18px, 3vw, 40px);
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 45%);
  border: 0;
  width: 100%;
  cursor: pointer;
  color: var(--bone);
  text-align: left;
}
.feature-cover:hover .disc,
.feature-cover:focus-visible .disc {
  background: var(--signal);
  border-color: var(--signal);
}
.feature-cover:focus-visible { outline-offset: -4px; }
.feature.full-bleed { aspect-ratio: auto; height: min(100svh, 56.25vw); }

/* content blocks */
.blocks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: clamp(48px, 8vh, 104px);
  padding-top: clamp(48px, 8vh, 104px);
  padding-bottom: clamp(48px, 8vh, 104px);
}
.blk { grid-column: 1 / -1; min-width: 0; }

/* Every block sits on the same 12 columns. Halves meet at the centre
   line, so text, split images, pairs and 2/3/4-up grids all share the
   same edges and gutters. */
.blk-text { grid-column: 1 / span 6; text-align: left; }
.blk-text.at-centre { grid-column: 4 / span 6; text-align: center; }
.blk-text.at-right { grid-column: 7 / span 6; text-align: right; }
.blk-text.at-centre .prose p { margin-left: auto; margin-right: auto; }
.blk-text.at-right .prose p { margin-left: auto; }
.blk-text h2 {
  font-family: var(--serif);
  font-weight: var(--display-w);
  font-size: var(--t-h3);
  line-height: 1.12;
  margin-bottom: 18px;
}
.blk-text .prose p { font-size: 18px; line-height: 1.7; }
/* one reading style for every text on a project page */
.blocks .prose p,
.blocks .prose p:first-child { color: var(--bone); font-size: 18px; line-height: 1.7; }

.blk-image.narrow { grid-column: 4 / span 6; }
.blk-image.full {
  grid-column: 1 / -1;
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
}
@media (min-width: 1441px) {
  .blk-image.full {
    margin-left: calc((100vw - var(--max-w)) / -2 - var(--pad-x));
    margin-right: calc((100vw - var(--max-w)) / -2 - var(--pad-x));
  }
}




.blk-split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 28px;
  align-items: center;
}
.blk-split .split-media { grid-column: 1 / span 6; }
/* the text half starts exactly where right-hand images start */
.blk-split .split-text { grid-column: 7 / span 5; padding-left: 0; }
.blk-split.right .split-media { grid-column: 7 / span 6; order: 2; }
.blk-split.right .split-text { grid-column: 1 / span 5; order: 1; }
.blk-split .split-text.ta-centre { text-align: center; }
.blk-split .split-text.ta-right { text-align: right; }
.blk-split .split-text.ta-right .prose p { margin-left: auto; }
.blk-split .split-text.ta-centre .prose p { margin-left: auto; margin-right: auto; }
.blk-split .prose p { font-size: 18px; line-height: 1.7; }
.blk-split h2 {
  font-family: var(--serif);
  font-weight: var(--display-w);
  font-size: var(--t-h3);
  line-height: 1.12;
  margin-bottom: 16px;
}

.blk figcaption,
.blk .caption {
  margin-top: 12px;
  font-size: var(--t-label);
  color: var(--smoke);
  max-width: 70ch;
}
.blk-image.full figcaption { padding-left: var(--pad-x); padding-right: var(--pad-x); }

.blk-video.loop video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--coal); }

.gallery-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--coal);
  cursor: zoom-in;
  overflow: hidden;
}
.gallery-item img { width: 100%; height: auto; display: block; }

.cross-link {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0 6px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 180ms ease;
}
.cross-link:hover { border-color: var(--signal); }
.cross-link .label { color: var(--smoke); }
.cross-link span:last-child { font-family: var(--serif);
  font-weight: var(--display-w); font-size: 24px; line-height: 1.2; }

/* next project */
.next-project {
  display: block;
  border-top: 1px solid var(--line-strong);
  padding-top: clamp(28px, 5vh, 48px);
  padding-bottom: clamp(48px, 9vh, 110px);
}
.next-project .label { display: block; margin-bottom: 10px; }
.next-project .h1 { font-size: clamp(44px, 7vw, 112px); transition: color 200ms ease; }
.next-project:hover .h1 { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 0.07em; text-underline-offset: 0.12em; }

/* ---------- audio page ---------- */

.audio-section {
  padding-top: clamp(48px, 9vh, 104px);
  padding-bottom: clamp(48px, 9vh, 104px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 32px;
}
.audio-section > aside { grid-column: 1 / span 4; }
.audio-section > :not(aside) { grid-column: 6 / -1; min-width: 0; }

.audio-section > aside h2 {
  font-family: var(--serif);
  font-weight: var(--display-w);
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.audio-section > aside p {
  margin-top: 16px;
  color: var(--ash);
  font-size: var(--t-small);
  max-width: 40ch;
}

.track-list { display: grid; gap: 14px; }

.player {
  background: var(--coal);
  padding: 22px 24px 20px;
}
.player-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.player-title {
  font-family: var(--serif);
  font-weight: var(--display-w);
  font-size: 24px;
  line-height: 1.15;
}
.player-desc { margin-top: 6px; font-size: var(--t-small); color: var(--ash); max-width: 52ch; }

.player-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}
.player-body { margin-top: 4px; }

.btn-play {
  width: 46px;
  height: 46px;
  flex: none;
  border: 1.5px solid var(--bone);
  border-radius: 50%;
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 160ms ease, background 160ms ease;
}
.btn-play:hover { border-color: var(--signal); background: var(--signal); }
.btn-play svg { width: 14px; height: 14px; fill: currentColor; }
.btn-start svg { width: 13px; height: 13px; margin-left: 2px; }

.progress { flex: 1; height: 32px; display: flex; align-items: center; cursor: pointer; }
.progress-track { position: relative; width: 100%; height: 2px; background: var(--line-strong); }
.progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--signal); }
.progress-fill::after {
  content: "";
  position: absolute;
  right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--signal);
}

.player-time {
  font-size: var(--t-label);
  color: var(--ash);
  min-width: 84px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ab-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
}
.ab-toggle button {
  font-size: var(--t-label);
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ash);
  padding: 7px 16px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.ab-toggle button.active { background: var(--bone); color: var(--ink); }

.player .media-empty { margin-top: 14px; display: block; }

.wave-wrap { flex: 1; position: relative; min-width: 0; }
.wave { display: block; width: 100%; height: 64px; cursor: pointer; touch-action: manipulation; }
.wave-labels {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.wave-labels span { font-size: 11px; color: var(--smoke); line-height: 1; }
.player-hint { font-size: var(--t-small); color: var(--ash); }

/* process: a real sequence, so it is numbered */
.process-list { display: grid; gap: 0; counter-reset: step; }
.process-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.process-step:first-child { border-top: 1px solid var(--line); }
.process-step .n {
  font-family: var(--serif);
  font-weight: var(--display-w);
  font-size: 30px;
  line-height: 1;
  color: var(--bone);
}
.process-step p { color: var(--ash); max-width: 60ch; }
.audio-section .cross-link { margin-top: 36px; }

.credits { list-style: none; }
.credits li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.credits li:first-child { border-top: 1px solid var(--line); }
.credits .c-work { font-family: var(--serif);
  font-weight: var(--display-w); font-size: 22px; line-height: 1.2; }
.credits .c-work small { font-family: var(--sans); font-size: var(--t-small); color: var(--ash); margin-left: 10px; }
.credits .c-credit { font-size: var(--t-small); color: var(--ash); white-space: nowrap; }

.ripple-host { position: relative; }
#audio-ripple {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.ripple-host > *:not(#audio-ripple) { position: relative; z-index: 1; }

/* ---------- about ---------- */

.about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 40px;
  padding-bottom: clamp(48px, 9vh, 104px);
}
.about-photo {
  grid-column: 1 / span 5;
  aspect-ratio: 4 / 5;
  background: var(--coal);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.08); }
.about-bio { grid-column: 7 / -1; }
.about-bio > p:first-child {
  font-family: var(--serif);
  font-weight: var(--display-w);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin-bottom: 32px;
  text-wrap: balance;
}
.about-bio [data-bind="about.bio"] p { color: var(--ash); max-width: 60ch; }
.about-bio [data-bind="about.bio"] p + p { margin-top: 1em; }

.fact-rows { margin-top: 48px; }
.fact-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.fact-row:last-child { border-bottom: 1px solid var(--line); }
.fact-row p { color: var(--bone); }

/* ---------- contact ---------- */
/* the form is the main thing here: the words stay quiet beside it, and
   both columns start on the same line */

.contact-page {
  padding-top: calc(var(--nav-h) + clamp(48px, 10vh, 120px));
  padding-bottom: clamp(64px, 12vh, 140px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 56px;
  align-items: start;
}
.contact-side { grid-column: 1 / span 4; }
.contact-form { grid-column: 6 / -1; display: grid; gap: 34px; align-content: start; }

.contact-title {
  font-family: var(--display);
  font-weight: var(--display-w);
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-left: -0.03em;
}
.contact-blurb {
  margin-top: 18px;
  font-size: var(--t-body);
  color: var(--ash);
  max-width: 34ch;
}
.contact-direct {
  margin-top: clamp(40px, 8vh, 80px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.contact-direct .label { display: block; margin-bottom: 6px; }
.contact-email {
  font-family: var(--display);
  font-weight: var(--display-w);
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: inline-block;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 180ms ease;
  overflow-wrap: anywhere;
}
.contact-email:hover { border-color: var(--signal); }
.contact-direct p { color: var(--ash); margin-top: 12px; font-size: var(--t-small); max-width: 36ch; }

/* a form you can actually write in */
.contact-form .field label { font-size: 14px; margin-bottom: 4px; }
.contact-form .field input,
.contact-form .field textarea { font-size: clamp(19px, 1.5vw, 22px); padding: 12px 0 14px; }
.contact-form .field textarea { min-height: 240px; }
.form-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.contact-form .btn { min-height: 56px; padding: 0 36px; font-size: 16px; }

.socials { margin-top: 32px; display: flex; gap: 28px; flex-wrap: wrap; }
.socials a {
  font-size: var(--t-small);
  color: var(--bone);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 160ms ease;
}
.socials a:hover { border-color: var(--signal); }

.field label {
  display: block;
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--ash);
  margin-bottom: 6px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  padding: 8px 0 10px;
  transition: border-color 160ms ease;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-bottom-color: var(--signal); }

.btn {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  background: var(--bone);
  border: 1px solid var(--bone);
  border-radius: 999px;
  color: var(--ink);
  padding: 13px 26px;
  min-height: 44px;
  cursor: pointer;
  justify-self: start;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }

.form-note { font-size: var(--t-small); color: var(--ash); }
.form-note.ok { color: var(--bone); }
.form-note.err { color: var(--signal-text); }

.field.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- closing CTA ---------- */

.cta {
  container-type: inline-size;
  border-top: 1px solid var(--line-strong);
  padding-top: clamp(40px, 8vh, 96px);
  padding-bottom: clamp(40px, 8vh, 96px);
  display: grid;
  gap: 14px;
}
.cta h2 { font-size: var(--t-small); font-weight: 500; color: var(--ash); font-family: var(--sans); }
.cta a {
  font-family: var(--serif);
  font-weight: var(--display-w);
  font-size: clamp(22px, 5vw, 96px);
  /* sized to the column so the address stays on one line in Syne */
  font-size: min(5cqi, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  justify-self: start;
  white-space: nowrap;
  transition: color 200ms ease;
}
.cta a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 0.07em; text-underline-offset: 0.12em; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--line); }
body[data-page="home"] .footer { border-top-color: var(--line); }
.footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 28px;
  flex-wrap: wrap;
  padding-top: 24px;
  padding-bottom: 24px;
}
.footer span,
.footer a { font-size: var(--t-label); color: var(--ash); }
.footer a:hover { color: var(--bone); }
.footer .foot-links { display: inline-flex; gap: 22px; }
.cv-link { color: var(--bone); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; }
.cv-link:hover { text-decoration-thickness: 2px; }
.footer .avail { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); }
.footer .avail::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  animation: pulse-dot 2.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------- anti-flash ---------- */

html:not(.content-ready) [data-bind] { opacity: 0; }
[data-bind] { transition: opacity 220ms ease; }

/* reveal is kept as a hook but no longer animates: sections simply
   appear, and the hero carries the only entrance */
.reveal { opacity: 1; }

/* ---------- page transition ---------- */

.veil { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.veil-sheet { position: absolute; inset: 0; background: var(--ink); opacity: 0; }
.veil-dot {
  position: absolute;
  width: 0; height: 0;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--signal);
  box-shadow: 0 0 26px rgba(229, 52, 42, 0.3), 0 0 90px rgba(229, 52, 42, 0.1);
  transform: translate(-50%, -50%);
  will-change: width, height;
  visibility: hidden;
}
body.page-out .veil-dot {
  visibility: visible;
  width: calc(var(--r, 100vmax) * 2);
  height: calc(var(--r, 100vmax) * 2);
  transition: width 300ms cubic-bezier(.45, 0, .2, 1), height 300ms cubic-bezier(.45, 0, .2, 1);
}
html[data-transition="fade"] .veil-dot { display: none; }
html[data-transition="fade"] body.page-out .veil-sheet { opacity: 1; transition: opacity 200ms ease; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.lightbox.on { opacity: 1; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lightbox-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 64px);
  font-size: var(--t-label);
  color: var(--ash);
}
.lightbox button {
  background: transparent;
  border: 1.5px solid var(--line-strong);
  color: var(--bone);
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: border-color 160ms ease, background 160ms ease;
}
.lightbox button:hover { border-color: var(--signal); background: var(--signal); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: clamp(10px, 2vw, 28px); }
.lightbox-next { right: clamp(10px, 2vw, 28px); }
.lightbox-close { position: absolute; top: clamp(12px, 2vw, 28px); right: clamp(12px, 2vw, 28px); }
body.lightbox-open { overflow: hidden; }

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 500;
  background: var(--bone);
  color: var(--ink);
  padding: 12px 18px;
  font-size: var(--t-small);
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .visual-head .head-text { grid-column: 1 / span 5; }
  .reel-box { grid-column: 6 / -1; }
  .blk-image.narrow { grid-column: 2 / span 10; }
  .project-meta { grid-column: 7 / -1; }
}

@media (max-width: 820px) {
  :root { --nav-h: 64px; }
  .works-tracks { grid-template-columns: 1fr; }
  .visual-head .head-text,
  .reel-box { grid-column: 1 / -1; }
  .visual-head .reel-box { order: -1; }
  .t-text { font-size: 14px; }
  .project-card { grid-column: 1 / -1; }
  .project-card.full .card-media { aspect-ratio: 4 / 3; }
  .page-head > .lede { grid-column: 1 / -1; }
  .project-head .lede,
  .project-meta { grid-column: 1 / -1; }
  .blk-text,
  .blk-text.at-centre,
  .blk-text.at-right,
  .blk-image.narrow { grid-column: 1 / -1; }
  .blk-split .split-media,
  .blk-split .split-text,
  .blk-split.right .split-media,
  .blk-split.right .split-text { grid-column: 1 / -1; order: 0; }
  .audio-section > aside,
  .audio-section > :not(aside) { grid-column: 1 / -1; }
  .about-photo { grid-column: 1 / span 9; }
  .about-bio { grid-column: 1 / -1; }
  .contact-side,
  .contact-form { grid-column: 1 / -1; }
  .contact-direct { margin-top: 32px; }
  .contact-form .field textarea { min-height: 180px; }
  .fact-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 560px) {
  .player { padding: 18px; }
  .player-controls { flex-wrap: wrap; }
  .wave-wrap { order: 3; flex-basis: 100%; }
  .wave { height: 56px; }
  .process-step { grid-template-columns: 40px 1fr; gap: 12px; }
  .credits li { flex-direction: column; gap: 2px; }
  .credits .c-work small { display: block; margin: 2px 0 0; }
  .btn-reel .disc { width: 56px; height: 56px; }
  .t-text { font-size: 13px; margin-top: 8px; }
  .switch-tab { padding-right: 10px; }
  .switch-tab + .switch-tab { padding-left: 10px; }
  .works-grid { column-gap: 12px; row-gap: 28px; }
  .works-grid .project-card h3 { font-size: 18px; }
  .works-grid .card-year { display: none; }
  .about-photo { grid-column: 1 / -1; }
}

/* cover image at the top of a project with no main video: a 16:9 band */
.feature-still {
  aspect-ratio: 21 / 9;
  max-height: 62vh;
  width: 100%;
  overflow: hidden;
  background: var(--coal);
}
.feature-still img { width: 100%; height: 100%; object-fit: cover; }

/* pairs and image grids: equal columns with the page's own gutter, so a
   2-up gap sits exactly on the centre line and a 3-up gap on the
   4-column marks. Every image in a block shares one shape: square,
   portrait, landscape, or "match" (the average shape of the images). */
.blk-pair .grid-items,
.blk-grid .grid-items {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--gap);
}
.blk-pair .gallery-item img,
.blk-grid .gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 3 / 2);
  object-fit: cover;
}
.blk-pair.square,  .blk-grid.square   { --ar: 1; }
.blk-pair.portrait, .blk-grid.portrait { --ar: 4 / 5; }
.blk-pair.landscape, .blk-grid.landscape { --ar: 3 / 2; }

@media (max-width: 820px) {
  .feature-still { aspect-ratio: 16 / 9; }
  .blk-grid .grid-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk-pair .grid-items { grid-template-columns: 1fr; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}