/* ============================================================
   AJ NORDIN STUDIO — direction: The dark room
   One dark field from top to bottom, and in it, lit things.
   ============================================================ */

:root {
  /* type steps (five) */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13–14px */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17–19px */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);       /* 20–26px */
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);              /* 32–64px */
  --step-hero: clamp(88px, 13vw, 200px);                       /* home hero */

  /* colour — green-black and bone, accent taken from the genre */
  --bg: #141715;
  --surface: #1c211e;
  --surface-2: #20261f;
  --surface-3: #232026;
  --ink: #e6e4da;
  --muted: #9aa096;
  --accent: #b3362e;
  --accent-bright: #e05252;
  --paper: #e4e7e3;
  --paper-ink: #161a18;
  --ink-soft: #b9bfb5;

  /* type */
  --font-body: 'Work Sans', 'Helvetica Neue', sans-serif;

  /* frame */
  --gutter: clamp(16px, 4vw, 32px);
  --gap: clamp(16px, 2vw, 32px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --move: 600ms var(--ease);
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

img, video { display: block; max-width: 100%; height: auto; }

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

h1, h2, h3 {
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.0;
  text-wrap: balance;
}

p { text-wrap: pretty; max-width: 62ch; }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

button { cursor: pointer; background: none; border: none; color: inherit; font: inherit; }

.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;
}

/* ---------- frame helpers ---------- */

.wrap {
  padding-inline: var(--gutter);
  max-width: 1680px;
  margin-inline: auto;
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

/* ---------- buttons & links ---------- */

.btn {
  display: inline-block;
  background: var(--paper);
  color: var(--paper-ink);
  font-size: var(--step-body);
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 8px;
  line-height: 1.2;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { background: var(--accent); color: var(--ink); }
.btn:active { transform: translateY(1px); }

.tlink {
  display: inline-block;
  font-size: var(--step-body);
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 3px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 6px;
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
}
.tlink:hover { color: var(--accent-bright); text-decoration-color: var(--accent-bright); }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 22px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  background: var(--bg);
}

.site-header nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 36px); }

.lang-toggle {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  transition: color 180ms var(--ease);
}
.lang-toggle:hover, .lang-toggle:focus-visible { color: var(--ink); }

.wordmark {
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.wordmark strong { font-weight: 500; color: var(--ink); }
.wordmark span { color: var(--muted); }

.nav-links {
  display: flex;
  gap: clamp(18px, 2.5vw, 36px);
  list-style: none;
}
.nav-links a {
  font-size: var(--step-small);
  font-weight: 400;
  color: var(--muted);
  padding: 4px 0;
  transition: color 180ms var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: 6px; }

/* mobile menu */
.menu-toggle { display: none; }
.nav-menu {
  display: flex;
  gap: clamp(18px, 2.5vw, 36px);
  list-style: none;
}

/* ---------- hero (home) ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.hero::after {           /* neutral scrim, the one allowed exception */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 11, 0.28);
}

.hero > * { position: relative; z-index: 2; }

.hero-title {
  position: absolute;
  left: 0; right: 0; top: 64px; bottom: 0;
}
.hero-title .line {
  display: block;
  font-size: var(--step-hero);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.hero-title .line-1 { position: absolute; top: 8px; left: 0; }
.hero-title .line-2 { position: absolute; bottom: 24px; left: 28vw; }

.hero-lead {
  position: absolute;
  left: 30vw;
  top: 48%;
  max-width: 44ch;
  font-size: var(--step-body);
  line-height: 1.55;
}
.hero-lead .btn { margin-top: 20px; }

/* masked line reveal — the signature move */
.hero-title .line, .hero-lead {
  opacity: 0;
}
.js .hero-title .line {
  transform: translateY(110%);
  clip-path: inset(-20% 0 0 0);
  transition: transform 760ms var(--ease), opacity 760ms var(--ease);
}
.js .hero-title .line-2 { transition-delay: 110ms; }
.js .hero-lead { transform: translateY(24px); transition: transform 760ms var(--ease), opacity 760ms var(--ease); transition-delay: 250ms; }
.js .hero.loaded .hero-title .line { transform: translateY(0); opacity: 1; }
.js .hero.loaded .hero-lead { transform: translateY(0); opacity: 1; }
.no-js .hero-title .line, .no-js .hero-lead { opacity: 1; }

/* ---------- section rhythm ---------- */

section { position: relative; }
.section { padding-block: clamp(96px, 18vh, 240px); }

.page-head {
  padding-top: clamp(140px, 22vh, 220px);
  padding-bottom: clamp(24px, 5vh, 64px);
}
.page-head h1 {
  font-size: clamp(56px, 7vw, 112px);
}
.page-head { padding-top: clamp(120px, 16vh, 180px); padding-bottom: clamp(24px, 5vh, 64px); }
.head-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.head-grid .head-text { grid-column: 1 / 7; }
.head-grid img { grid-column: 7 / 13; width: 100%; }
.page-head .lead {
  margin-top: clamp(18px, 3vh, 32px);
  font-size: var(--step-lead);
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink);
  max-width: 34ch;
}

h2.section-title {
  font-size: var(--step-head);
  margin-bottom: clamp(32px, 6vh, 72px);
}

/* ---------- intro: staircase statement ---------- */

.stair-section {
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: center;
  padding-block: clamp(64px, 10vh, 120px);
}

.stair {
  grid-column: 1 / 9;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.stair span { display: block; }
.stair span:nth-child(1) { padding-left: 0; }
.stair span:nth-child(2) { padding-left: 8vw; }
.stair span:nth-child(3) { padding-left: 16vw; color: var(--accent-bright); }

.stair-photos {
  grid-column: 10 / 13;
  display: grid;
  gap: 16px;
}
.stair-photos img { width: 100%; }

.stair-note {
  grid-column: 1 / 9;
  align-self: end;
  font-size: var(--step-small);
  color: var(--ink-soft);
  color: var(--muted);
  max-width: 48ch;
  margin-top: clamp(32px, 6vh, 64px);
}

/* ---------- work: loose scatter ---------- */

.scatter { padding-top: clamp(64px, 10vh, 120px); }
.scatter-heading {
  font-size: var(--step-head);
  padding-bottom: clamp(32px, 6vh, 64px);
}

.film {
  margin-bottom: clamp(140px, 26vh, 300px);
}
.film:last-of-type { margin-bottom: 0; }

.film-name {
  font-size: var(--step-small);
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.film-desc {
  font-size: var(--step-body);
  margin-top: 14px;
  max-width: 52ch;
}

.film img { transition: transform 700ms var(--ease); }
.film:hover img { transform: scale(1.015); }
.film-p1 { grid-column: 1 / 7; }
.film-p1 img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.film-p2 { grid-column: 9 / 13; margin-top: -160px; }
.film-p2 img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.film-p3 { grid-column: 3 / 10; }
.film-p3 img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

.scatter-remark {
  grid-column: 1 / 5;
  font-size: var(--step-lead);
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
  max-width: 30ch;
}

/* ---------- showcase: cards crossing a held photograph ---------- */

.carousel-wrap {
  position: relative;
  height: 300svh;
}
.carousel-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.stage-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.35) contrast(1.05);
}
.stage-photo::after { content: ""; }
.carousel-heading {
  position: absolute;
  top: clamp(96px, 14vh, 160px);
  left: var(--gutter);
  z-index: 3;
  font-size: clamp(40px, 4.4vw, 68px);
  max-width: 13ch;
}
.carousel-heading .tlink {
  font-size: var(--step-body);
  margin-top: 18px;
  color: var(--muted);
}
.carousel-heading .tlink:hover { color: var(--ink); }

.card-track {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 40px;
  padding-left: 60vw;
  will-change: transform;
}
.showreel-card {
  flex: 0 0 auto;
  width: min(640px, 82vw);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.showreel-card img {
  width: 100%;
  aspect-ratio: 16 / 10.5;
  object-fit: cover;
}
.showreel-card .panel {
  padding: 26px 28px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  min-height: 150px;
}
.showreel-card .panel h3 {
  font-size: clamp(30px, 2.6vw, 44px);
  line-height: 1;
}
.showreel-card .panel p {
  font-size: var(--step-body);
  line-height: 1.5;
  color: var(--muted);
  max-width: 26ch;
  text-align: right;
}
.showreel-card .panel p strong { color: var(--ink); font-weight: 500; }
.card-1 .panel { background: var(--surface-2); }
.card-2 .panel { background: var(--surface-3); }
.card-3 .panel { background: #1e2429; }

/* ---------- gallery: photographs gathered round a heading ---------- */

.mosaic {
  position: relative;
  min-height: 88svh;
  display: grid;
  place-items: center;
  padding-block: clamp(80px, 14vh, 160px);
  overflow: hidden;
}
.mosaic-centre {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--gutter);
}
.mosaic-centre h2 {
  font-size: clamp(32px, 2.6vw, 40px);
  font-weight: 300;
  line-height: 1.1;
}
.mosaic-centre p {
  margin: 18px auto 0;
  font-size: var(--step-body);
  color: var(--muted);
  max-width: 40ch;
}
.mosaic-centre .tlink { margin-top: 22px; }
.mosaic img {
  position: absolute;
  width: clamp(120px, 13vw, 200px);
  aspect-ratio: 9 / 10;
  object-fit: cover;
  will-change: transform;
  z-index: 1;
}
.mosaic .m1 { left: 8%;  top: 5%; }
.mosaic .m2 { left: 23%; top: 52%; }
.mosaic .m3 { left: 37%; top: 10%; }
.mosaic .m4 { right: 36%; top: 58%; }
.mosaic .m5 { right: 21%; top: 8%; }
.mosaic .m6 { right: 7%;  top: 54%; }

/* ---------- about: title over banner, exhibits pass ---------- */

.pin-wrap { position: relative; }
.pin-stage {
  position: relative;
  isolation: isolate;
  height: max(88svh, 66.7vw);   /* banner is 3:2, so this shows it with almost no crop */
  min-height: 480px;
  display: grid;
  place-items: center;
  align-content: start;         /* title at the top, face shows below it */
  padding-top: 15svh;
}
/* banner.webp behind the title, fading into the page background */
.pin-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;  /* keep the top of the photo, no head crop */
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
}
.pin-stage > .reveal { position: relative; z-index: 1; padding-inline: var(--gutter); }
.pin-stage h1 {
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 400;
  font-size: clamp(30px, 6vw, 96px);
  text-align: center;
  opacity: 1;
  color: rgba(230, 228, 218, 0.9);   /* lower = more see-through */
}
.pin-sub {
  text-align: center;
  margin-inline: auto;
  max-width: none;
  font-family: "Courier Prime", "Courier New", monospace;
  font-style: italic;
  font-size: var(--step-body);
  color: rgba(185, 191, 181, 0.9);
  margin-top: 18px;
}
.exhibit-flow { position: relative; z-index: 1; }
.exhibit-flow { margin-top: 20vh; } /* gap before the first exhibit (Actor); raise to push it further down */
.exhibit {
  margin-bottom: 14vh;
  width: clamp(320px, 38vw, 620px);
}
.exhibit:last-child { margin-bottom: 6vh; }
.exhibit img { width: 100%; }
.exhibit-meta { margin-top: 16px; }
.exhibit-meta .name { font-size: var(--step-body); font-weight: 500; }
.exhibit-meta .role { font-size: 14px; color: var(--muted); margin-top: 2px; }
.exhibit-meta .line { font-size: var(--step-body); color: var(--ink-soft); margin-top: 10px; max-width: 34ch; }
.exhibit-l { margin-left: auto; }
.exhibit-r { margin-left: 8vw; }

/* ---------- two-column practical blocks ---------- */

.duo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.duo .duo-media { grid-column: 1 / 7; }
.duo .duo-media img { width: 100%; }
.duo .duo-text { grid-column: 8 / 13; padding-top: 8px; }
.duo.flip .duo-media { grid-column: 7 / 13; }
.duo.flip .duo-text { grid-column: 1 / 6; }
.duo .duo-text h3 { font-size: var(--step-lead); font-weight: 500; margin-bottom: 16px; }
.duo .duo-text p { color: var(--ink-soft); margin-bottom: 16px; }
.duo .duo-text p strong { color: var(--ink); font-weight: 500; }

/* ---------- grading before/after ---------- */

.grade-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.grade-pair figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.grade-pair figcaption {
  font-size: var(--step-small);
  color: var(--muted);
  margin-top: 10px;
}
.grade-pair .before img { filter: saturate(0.25) brightness(1.18) contrast(0.82); }

/* ---------- showreel builder (live thing) ---------- */

.builder { max-width: 1080px; }
.builder-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.builder input { position: absolute; opacity: 0; pointer-events: none; }
.builder label.card {
  display: block;
  background: var(--surface);
  border-radius: 8px;
  padding: 24px;
  cursor: pointer;
  transition: background 180ms var(--ease);
}
.builder label.card:hover { background: var(--surface-2); }
.builder label.card h3 { font-size: var(--step-lead); font-weight: 500; margin-bottom: 8px; }
.builder label.card p { font-size: var(--step-body); color: var(--muted); }
.builder input:checked + label.card { background: var(--accent); }
.builder input:checked + label.card h3,
.builder input:checked + label.card p { color: var(--ink); }
.builder input:focus-visible + label.card { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.builder-out { margin-top: 28px; }
.builder-out .readout { display: none; }
.builder-out .readout .figure {
  font-size: var(--step-head);
  line-height: 1;
  margin-bottom: 10px;
}
.builder-out .readout .note { font-size: var(--step-body); color: var(--muted); margin-bottom: 20px; }
#b1:checked ~ .builder-out .r1 { display: block; }
#b2:checked ~ .builder-out .r2 { display: block; }
#b3:checked ~ .builder-out .r3 { display: block; }

/* ---------- contact: visit card on a photograph ---------- */

.visit-section {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}
.visit-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.visit-card {
  position: absolute;
  top: 60px; right: 0;
  border-radius: 8px 0 0 8px;
  width: min(400px, calc(100vw - 120px));
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 8px;
  padding: 32px;
}
.visit-card h1, .visit-card h2 { font-size: 28px; font-weight: 300; color: var(--paper-ink); margin-bottom: 22px; }
.visit-card dl { margin-bottom: 26px; }
.visit-card dl div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.visit-card dt { font-size: var(--step-small); color: #514f47; }
.visit-card dd { font-size: var(--step-small); font-weight: 500; color: var(--paper-ink); }
.visit-card .btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--accent);
  color: var(--ink);
  padding: 15px 0;
  border-radius: 8px;
}
.visit-card .btn:hover { background: #161a18; color: var(--paper); }

.visit-more { padding-top: clamp(64px, 10vh, 120px); }
.write-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; margin-bottom: clamp(32px, 6vh, 56px); }
.write-grid h2 { grid-column: 1 / 4; margin-bottom: 0; }
.write-col { grid-column: 4 / 13; display: grid; gap: 20px; }
.write-col p { max-width: 70ch; margin-bottom: 0; }
.get-list { list-style: disc; padding-left: 22px; margin-top: 6px; }
.get-list li { margin-bottom: 10px; }
.get-list li:last-child { margin-bottom: 0; }
.get-list li::marker { color: var(--accent); }
.contact-pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: clamp(32px, 6vh, 56px); }
.contact-pics img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.visit-more h2 { font-size: var(--step-lead); font-weight: 500; margin-bottom: 18px; }
.visit-more p { color: var(--ink-soft); margin-bottom: 14px; max-width: 62ch; }

/* ---------- CV table ---------- */

.cv-table { width: 100%; border-collapse: collapse; font-size: var(--step-body); }
.cv-table th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  padding: 12px 16px 12px 0;
  font-size: var(--step-small);
}
.cv-table td {
  padding: 12px 16px 12px 0;
  color: var(--ink-soft);
  vertical-align: top;
}
.cv-table td:first-child { color: var(--ink); white-space: nowrap; }

.cv-cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.cv-bio { grid-column: 1 / 8; }
.cv-bio p { color: var(--ink-soft); margin-bottom: 18px; }
.cv-bio p strong { color: var(--ink); font-weight: 500; }
.cv-side { grid-column: 9 / 13; }
.cv-side h3, .cv-bio h3 { font-size: var(--step-lead); font-weight: 500; margin: 34px 0 14px; }
.cv-side ul { list-style: none; }
.cv-side li { font-size: var(--step-body); color: var(--ink-soft); padding: 6px 0; }

/* ---------- CTA band ---------- */

.cta-band { text-align: left; padding-block: clamp(80px, 14vh, 160px); }
.cta-band h2 { font-size: var(--step-head); max-width: 16ch; margin-bottom: 28px; }

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

.site-footer {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(48px, 8vh, 96px);
  background: #101312;
  padding: clamp(48px, 7vh, 80px) var(--gutter) 28px;
}
.site-footer .cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  max-width: 1680px;
  margin-inline: auto;
  width: 100%;
}
.cols-3 { grid-template-columns: repeat(3, 1fr); }
section[id] { scroll-margin-top: 88px; }
.coming-note { margin-top: 28px; color: var(--muted); }
.fcol h3 { font-size: var(--step-small); font-weight: 500; margin-bottom: 14px; color: var(--ink); }
.fcol ul { list-style: none; }
.fcol li { font-size: var(--step-small); color: var(--muted); padding: 4px 0; }
.fcol a { color: var(--muted); transition: color 180ms var(--ease); }
.fcol a:hover { color: var(--ink); }
.footer-mark {
  align-self: end;
  font-size: 9.6vw;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.95;
  white-space: nowrap;
  color: var(--ink);
}
.footer-legal {
  padding-top: 18px;
  font-size: var(--step-small);
  color: var(--muted);
}
main { position: relative; z-index: 1; background: var(--bg); }

/* ---------- reveal entrances ---------- */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms ease, transform 900ms ease; }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero-title .line, .hero-lead { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   phone
   ============================================================ */

@media (max-width: 760px) {

  .site-header { padding: 16px var(--gutter); }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--ink);
  }
  .menu-toggle .bars {
    width: 22px; height: 14px;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    position: relative;
  }
  .menu-toggle .bars::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 5px;
    border-top: 2px solid var(--ink);
  }
  .nav-menu {
    position: fixed;
    top: 60px;
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    gap: 4px;
    background: #101312;
    border-radius: 8px;
    padding: 18px 20px;
    display: none;
  }
  .nav-open .nav-menu { display: flex; }
  .nav-menu a { font-size: 17px; padding: 10px 0; display: block; }

  /* hero — absolute placement per the blueprint */
  .hero { min-height: 560px; }
  .hero-title {
    position: absolute; left: 0; right: 0; top: 54px; bottom: 0;
    display: block;
  }
  .hero-title .line { font-size: 19vw; }
  .hero-title .line-1 { padding-top: 34px; padding-inline: var(--gutter); }
  .hero-title .line-2 {
    position: absolute;
    right: var(--gutter); bottom: 20px;
    margin-left: 0;
    text-align: right;
    padding-bottom: 0;
  }
  .hero-lead {
    position: absolute;
    top: 46%;
    left: var(--gutter); right: var(--gutter);
    margin-left: 0;
    padding: 0;
  }
  .hero-lead .btn { margin-top: 16px; }

  /* staircase */
  .stair-section { grid-template-columns: 1fr; align-items: start; padding-top: 20vh; }
  .stair { grid-column: 1 / -1; font-size: clamp(20px, 5.8vw, 24px); }
  .stair span:nth-child(2) { padding-left: 6vw; }
  .stair span:nth-child(3) { padding-left: 12vw; }
  .stair-photos { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 8px; }
  .stair-note { grid-column: 1 / -1; margin-top: 20px; }

  /* scatter */
  .film { margin-bottom: 72px; margin-top: 0 !important; }
  .film-p1, .film-p2, .film-p3 { grid-column: 1 / -1; }
  .film-p1 img, .film-p3 img { aspect-ratio: 4 / 3; }
  .film-p2 { width: 68%; margin-left: auto; }
  .film-p2 img { aspect-ratio: 4 / 5; }
  .film-p3 { width: 86%; }
  .scatter-remark { grid-column: 1 / -1; margin: 72px 0; }

  /* carousel — no pin, stack */
  .carousel-wrap { height: auto; }
  .carousel-stage { position: static; height: auto; overflow: visible; display: block; padding-top: clamp(80px, 12vh, 120px); }
  .stage-photo { display: none; }
  .carousel-heading { position: static; padding: 0 var(--gutter); margin-bottom: 28px; font-size: 9vw; max-width: none; }
  .card-track { padding-left: var(--gutter); padding-right: var(--gutter); flex-direction: column; gap: 24px; }
  .showreel-card { width: 100%; }
  .showreel-card .panel { flex-direction: column; align-items: flex-start; min-height: 0; }
  .showreel-card .panel p { text-align: left; max-width: none; }

  /* mosaic — two columns around the heading */
  .mosaic { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 56px; }
  .mosaic-centre { grid-column: 1 / -1; padding-block: 20px; }
  .mosaic-centre h2 { font-size: 7vw; }
  .mosaic img { position: static; width: 100%; margin: 0; }

  /* about — title at top, banner behind, exhibits below */
  .pin-stage { height: auto; min-height: 0; padding: 16vh 0 55vw; }
  .exhibit-flow { margin-top: 12vh; }
  .exhibit { width: 88%; margin-bottom: 64px; }
  .exhibit-l { margin-left: auto; }
  .exhibit-r { margin-left: 0; }

  /* head grid + duo */
  .head-grid .head-text, .head-grid img { grid-column: 1 / -1; }
  .head-grid img { margin-top: 24px; }
  .duo .duo-media, .duo .duo-text,
  .duo.flip .duo-media, .duo.flip .duo-text { grid-column: 1 / -1; }
  .duo .duo-text { padding-top: 20px; }

  /* visit card */
  .visit-section { min-height: 0; }
  .visit-photo { position: relative; height: 31svh; }
  .visit-card {
    position: relative;
    top: -48px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    margin-inline: var(--gutter);
    padding: 22px;
  }
  .visit-card h2 { margin-bottom: 16px; }
  .visit-card dl { margin-bottom: 18px; }
  .visit-card dl div { padding: 5px 0; }
  .visit-more { padding-top: 0; margin-top: -16px; }
  .write-grid h2, .write-col { grid-column: 1 / -1; }
  .contact-pics { grid-template-columns: 1fr; gap: 16px; }
  .cv-bio, .cv-side { grid-column: 1 / -1; }
  .cv-side { margin-top: 32px; }

  /* footer */
  .site-footer { min-height: 0; position: static; padding-top: 56px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .footer-mark { font-size: 10vw; white-space: nowrap; }
  .footer-legal { padding-top: 10px; }

  /* builder */
  .builder-cards { grid-template-columns: 1fr; }
}

.exhibit .actor-photo { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }