/* ==========================================================================
   WCHIWA
   The site borrows the language of film and the recording session. The
   homepage opens on a title card ("Music by") inside a projected frame,
   marked only at its corners, with live timecode at 25 frames a second, the
   UK broadcast rate. Down the left margin runs a track lane: scroll and the
   page records, laying down a red take with its waveform behind the record
   head, as a DAW does. White on black throughout, with record red as the one
   colour; type is a Futura cut set at title-card scale; nothing sits in a box.
   ========================================================================== */
:root {
  --bg: #000000;
  --fg: #ffffff;
  --muted: #a3a3a3;   /* secondary text */
  --text: #d6d6d6;    /* long-form reading in blog posts */
  --faint: #7c7c7c;   /* labels, frame marks */
  --rule: #2c2c2c;    /* hairlines */
  --block: #161616;   /* filled time in the booking calendar */
  --rec: #e5352b;     /* record red: the take and the REC light, nothing else */
  --whatsapp: #25d366; /* WhatsApp's green, only on the WhatsApp mark */
  --shadow: rgba(0, 0, 0, 0.55);
  --scrim-in: rgba(0, 0, 0, 0.25);
  --scrim-out: rgba(0, 0, 0, 0.8);

  --sans: "Jost", "Futura PT", Futura, "Century Gothic", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --measure: 62ch;
  --section: clamp(4.5rem, 2.5rem + 6vw, 9rem);
  --ease: cubic-bezier(0.16, 0.84, 0.24, 1);

  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html.menu-open, html.menu-open body { overflow: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
cite { font-style: italic; }
strong { font-weight: 500; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
::selection { background: var(--fg); color: var(--bg); }

/* Film grain over everything. */
body::after {
  content: "";
  position: fixed;
  inset: -100px;
  z-index: 90;
  pointer-events: none;
  opacity: 0.055;
  background-size: 180px 180px;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  body::after { animation: grain 0.8s steps(1) infinite; }
}
/* The grain moves by transform on its own layer, so it costs the page no repaints. */
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-37px, 52px); }
  40% { transform: translate(61px, -23px); }
  60% { transform: translate(-84px, -66px); }
  80% { transform: translate(45px, 91px); }
}

/* The left margin is wider than the right: it holds the track lane that
   records as the page scrolls. */
:root { --rail: 40px; --st-x: 4px; --st-w: 34px; }
@media (min-width: 760px) { :root { --rail: 84px; --st-x: 16px; --st-w: 60px; } }
@media (min-width: 1100px) { :root { --rail: 124px; --st-x: 28px; --st-w: 88px; } }
.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-left: max(var(--rail), calc(env(safe-area-inset-left, 0px) + var(--rail)));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 760px) {
  .wrap { padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
.label {
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
}
.label a { color: inherit; text-decoration: none; transition: color 0.2s; }
.label a:hover { color: var(--fg); }
.status { color: var(--fg); }
.status::before { content: "\2014"; margin-right: 0.75em; color: var(--faint); }
.h1 {
  font-weight: 300;
  font-size: clamp(2.7rem, 1.3rem + 5.6vw, 6.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 {
  font-weight: 300;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h3 { font-weight: 500; font-size: 1.125rem; line-height: 1.35; letter-spacing: 0.01em; }
.dek {
  max-width: 44ch;
  font-weight: 300;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.muted { color: var(--muted); }
.prose { display: grid; gap: 1.15rem; align-content: start; min-width: 0; }
.prose p { max-width: var(--measure); color: var(--muted); text-wrap: pretty; }
.prose .intro {
  font-weight: 300;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.45;
  color: var(--fg);
}
.prose .h2:not(:first-child) { margin-top: 1.75rem; }
.text-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--faint);
  transition: text-decoration-color 0.2s;
}
.text-link:hover { text-decoration-color: var(--fg); }

/* ---------- Buttons and arrows ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  border-radius: 0;
  font-weight: 500;
  font-size: 0.76rem;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { background: transparent; color: var(--fg); }
.btn--line { background: transparent; color: var(--fg); border-color: var(--faint); }
.btn--line:hover { border-color: var(--fg); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.arrow { flex: none; display: inline-block; line-height: 1; transition: transform 0.4s var(--ease); }
.arrow::before { content: "\2192"; }
.arrow--down { transform: rotate(90deg); }
/* the top of a lesson page: book straight away, or read on first */
.head-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.2rem; margin-top: 0.4rem; }
.btn--book { min-height: 60px; padding: 1rem 2.1rem; gap: 0.75rem; font-size: 0.86rem; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); animation: book-call 2.8s var(--ease) 1.2s 2; }
.btn--book:hover .arrow--down { transform: rotate(90deg) translateX(4px); }
@keyframes book-call { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); } 70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.read-on { display: inline-flex; align-items: center; gap: 0.8rem; min-height: 44px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.read-on:hover { color: var(--fg); }
.read-on-cue { position: relative; width: 1px; height: 34px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.read-on-cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--fg); animation: read-drop 1.9s var(--ease) infinite; }
@keyframes read-drop { to { top: 100%; } }
.head-choice + .status { margin-top: 0.2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a finger gliding down the line: you can scroll */
.read-on-cue { overflow: visible; height: 46px; }
.read-on-hand { position: absolute; left: 50%; top: 0; width: 28px; height: 28px; margin-left: -12px; color: var(--fg); animation: hand-glide 1.9s var(--ease) infinite; }
.read-on-hand .ico { width: 28px; height: 28px; fill: rgba(0, 0, 0, 0.6); stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hand-glide { 0% { transform: translateY(-4px); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
/* London: work out the price from a postcode */
.price-check .wrap { display: grid; gap: 1rem; justify-items: start; max-width: 46rem; margin-left: 0; }
.price-intro { color: var(--text); max-width: 56ch; }
.price-form { display: flex; flex-wrap: wrap; gap: 0.8rem; width: 100%; margin-top: 0.4rem; }
.price-form input { flex: 1 1 14rem; min-height: 56px; padding: 0 1.1rem; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.35); color: var(--fg); font: inherit; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 0; }
.price-form input::placeholder { text-transform: none; letter-spacing: 0; color: var(--faint); }
.price-form input:focus { outline: none; border-color: var(--fg); }
.price-form .btn { min-height: 56px; }
.price-form.is-busy .btn { opacity: 0.5; pointer-events: none; }
.price-result { display: grid; gap: 0.6rem; padding: 1.3rem 1.4rem; border-left: 1px solid var(--fg); background: rgba(0, 0, 0, 0.45); width: 100%; }
.price-figure { font-weight: 300; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; }
@media (prefers-reduced-motion: reduce) { .read-on-hand { animation: none; top: 12px; } }
/* room above anything jumped to (as each target's own margin: the scroller's scroll-padding
   would also move the start of the pool's scroll timeline on phones) */
[id] { scroll-margin-top: 1.5rem; }
.anchor-more { display: block; height: 0; scroll-margin-top: 104px; }
#book { scroll-margin-top: 64px; }
@media (prefers-reduced-motion: reduce) { .btn--book, .read-on-cue::after { animation: none; } }
.arrow--play::before { content: "\25B6\FE0E"; font-size: 0.75em; }
.arrow--back::before { content: "\2190"; }
a:hover .arrow { transform: translateX(6px); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9rem;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ---------- Header ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  padding: 0.75rem 1.1rem; background: var(--fg); color: var(--bg); text-decoration: none;
}
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); top: 12px; }
.site-header { position: relative; z-index: 40; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
  padding-block: 1rem;
}
.brand {
  position: relative;
  z-index: 2;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.menu-toggle {
  display: none;
  position: relative;
  z-index: 2;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.5rem 0 0.5rem 0.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.menu-toggle::after {
  content: "";
  width: 22px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transition: height 0.25s;
}
.menu-toggle[aria-expanded="true"]::after { height: 0; border-bottom: 0; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 2.25rem; }
.site-nav a {
  display: inline-block;
  padding-block: 0.5rem;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--fg); }
.site-nav a[aria-current] { box-shadow: inset 0 -1px 0 var(--fg); }

/* The lesson pages, listed under Lessons: a drop-down on desktop, a line
   of small links in the phone menu. */
.site-nav .nav-sub-list { display: none; }
@media (min-width: 860px) {
  .nav-sub { position: relative; }
  .site-nav .nav-sub-list {
    position: absolute;
    top: 100%;
    left: -1.25rem;
    display: grid;
    gap: 0;
    min-width: 12.5rem;
    padding: 0.4rem 1.25rem 0.9rem;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.35rem);
    transition: opacity 0.25s, transform 0.4s var(--ease), visibility 0s 0.4s;
  }
  .nav-sub:hover .nav-sub-list,
  .nav-sub:focus-within .nav-sub-list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s, transform 0.4s var(--ease);
  }
  .site-nav .nav-sub-list a { padding-block: 0.4rem; }
}

@media (max-width: 859px) {
  .site-nav ul { gap: 0.1rem 1.4rem; }
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    align-content: center;
    padding-top: calc(6rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    padding-left: max(var(--rail), calc(env(safe-area-inset-left, 0px) + var(--rail)));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0s 0.35s;
  }
  .js .site-nav.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s; }
  .js .site-nav ul { flex-direction: column; gap: 0; perspective: 800px; }
  .js .site-nav > ul > li { opacity: 0; transform: rotateX(-28deg) translateY(12px); transform-origin: 50% 0; transition: opacity 0.4s ease, transform 0.6s var(--ease); }
  .js .site-nav.is-open > ul > li { opacity: 1; transform: none; }
  .js .site-nav > ul > li:nth-child(2) { transition-delay: 0.06s; }
  .js .site-nav > ul > li:nth-child(3) { transition-delay: 0.12s; }
  .js .site-nav > ul > li:nth-child(4) { transition-delay: 0.18s; }
  .js .site-nav > ul > li:nth-child(5) { transition-delay: 0.24s; }
  .js .site-nav a {
    display: block;
    padding-block: 0.45rem;
    font-weight: 300;
    font-size: clamp(2.3rem, 10vw, 3.4rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--fg);
  }
  .js .site-nav a[aria-current] { box-shadow: none; font-style: italic; }
  .js .site-nav .nav-sub-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1.35rem;
    margin-bottom: 0.6rem;
  }
  .js .site-nav .nav-sub-list a {
    padding-block: 0.4rem;
    font-weight: 500;
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .js .site-nav .nav-sub-list a[aria-current] { font-style: normal; color: var(--fg); text-decoration: underline; text-underline-offset: 0.5em; }
}

/* ---------- Home: the opening shot ---------- */
/* The homepage opens full-screen on the picture. Scrolling pulls the camera back
   until the picture sits in its frame, marked at the corners, like a title card on
   a screen. The script sets the box and clip each frame; without it, the framed
   state shows. */
.hero--cinema {
  --bt: 76px; --bl: 40px; --br: 16px; --bb: 0px;   /* the title box */
  --ct: 0px; --cl: 0px; --cr: 0px; --cb: 0px;      /* the picture's clip */
  --p: 1;
  position: relative;
  height: 100vh;
  height: 100svh;
}
.js .hero--cinema { --p: 0; height: 138vh; height: 138svh; }
.cinema-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 1400px; touch-action: pan-y; }
.cinema-stage > .frame-photo { z-index: 0; clip-path: inset(var(--ct) var(--cr) var(--cb) var(--cl)); }
.cinema-stage > .frame-photo img, .cinema-stage > .frame-photo video {
  transform: scale(calc(1.14 - 0.14 * var(--p)));
  translate: calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px);
}
.cinema-box {
  --mark: rgba(255, 255, 255, calc(0.25 + 0.45 * var(--p)));
  --arm: 34px;
  container-type: inline-size;
  position: absolute;
  top: var(--bt);
  left: var(--bl);
  right: var(--br);
  bottom: var(--bb);
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.75rem;
  padding: 3.5rem 1rem;
  background:
    linear-gradient(var(--mark), var(--mark)) top left / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top left / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / 1px var(--arm) no-repeat;
  /* The card is a plate in space: it tilts with the pointer (or the phone), and
     leans back a few degrees mid pull-back as the camera cranes. */
  transform-style: preserve-3d;
  transform: rotateX(calc((var(--rx, 0) + var(--p) * (1 - var(--p)) * 14) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
  will-change: transform;
}
.cinema-box .title-card { transform: scale(calc(1.12 - 0.12 * var(--p))); transform-style: preserve-3d; }
.cinema-box .tc-credit { transform: translateZ(30px); }
.cinema-box .tc-name { transform: translateZ(76px); }
.cinema-box .tc-roles { transform: translateZ(46px); }
.cinema-box .frame-meta { transform: translateZ(14px); }
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  translate: -50% 0;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: calc(1 - var(--p) * 5);
  pointer-events: none;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--fg), var(--fg)) 0 -46px / 1px 46px no-repeat, rgba(255, 255, 255, 0.2);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue::after { animation: cue 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
}
@keyframes cue { 0% { background-position: 0 -46px, 0 0; } 60%, 100% { background-position: 0 46px, 0 0; } }
@media (max-width: 859px) { .scroll-cue { bottom: 3.6rem; } }
/* Over the opening shot the header sits on the picture. */
html:has(.hero--cinema) .site-header { position: absolute; top: 0; left: 0; right: 0; }

.frame-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.frame-photo img, .frame-photo video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04) brightness(0.6); }
.frame-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, var(--scrim-in), var(--scrim-out));
}
.frame-meta {
  position: absolute;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.frame-play { display: inline-flex; align-items: baseline; gap: 0.55rem; color: var(--fg); text-decoration: none; }
.frame-play:hover { text-decoration: underline; text-underline-offset: 0.45em; }
@media (max-width: 859px) {
  /* On phones the play control sits under the title card instead of in a corner. */
  .frame-play { position: static; font-size: 0.66rem; }
}
.frame-meta--tl { top: 0.9rem; left: 1.1rem; }
.frame-meta--tr { top: 0.9rem; right: 1.1rem; color: var(--fg); }
.frame-meta--bl { bottom: 0.9rem; left: 1.1rem; }
.frame-meta--br { bottom: 0.9rem; right: 1.1rem; }
@media (min-width: 860px) {
  .frame-meta { font-size: 0.68rem; }
  .frame-meta--tl, .frame-meta--bl { left: 1.6rem; }
  .frame-meta--tr, .frame-meta--br { right: 1.6rem; }
  .frame-meta--tl, .frame-meta--tr { top: 1.25rem; }
  .frame-meta--bl, .frame-meta--br { bottom: 1.25rem; }
}
.title-card {
  display: inline-grid;
  justify-items: stretch;
  gap: clamp(0.65rem, 0.4rem + 0.7vw, 1.1rem);
  text-align: center;
}
.tc-credit {
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.tc-name {
  font-weight: 500;
  font-size: clamp(2.6rem, 0.6rem + 13.5vw, 11rem);
  font-size: min(11rem, 18.5cqi);
  line-height: 0.86;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
}
.tc-name > span { display: inline-block; }
.tc-roles {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 400;
  font-size: clamp(0.62rem, 0.5rem + 0.55vw, 1.05rem);
  font-size: clamp(0.62rem, 3.6cqi, 1.05rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.tc-roles span:last-child { margin-right: -0.3em; }
@media (max-width: 359px) {
  .tc-roles { letter-spacing: 0.2em; }
  .tc-roles span:last-child { margin-right: -0.2em; }
}
@media (prefers-reduced-motion: no-preference) {
  /* After the shutter opens: the credit, then WCHIWA letter by letter, then the roles. */
  .title-card > .tc-credit { animation: title-in 1.6s 0.55s var(--ease) both; }
  .title-card > .tc-roles { animation: title-in 1.6s 1.25s var(--ease) both; }
  .tc-name > span { animation: letter-in 1.3s calc(0.7s + var(--i) * 0.08s) var(--ease) both; }
  .cinema-box .frame-meta { animation: meta-in 1.2s 1.4s ease both; }
  .cinema-stage > .frame-photo img, .cinema-stage > .frame-photo video { animation: push-in 40s linear both; }
}
@keyframes title-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes letter-in { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
@keyframes meta-in { from { opacity: 0; } }
@keyframes push-in { from { scale: 1; } to { scale: 1.08; } }

/* ---------- Scene heads: the page title over a full-bleed picture ---------- */
.page-head--scene {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(100vh, 920px);
  min-height: min(100svh, 920px);
  padding-top: calc(76px + 3rem);
}
.scene-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.scene-media::before { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--lq, none); }
.scene-media img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04) brightness(0.55); transition: opacity 0.9s ease; }
.scene-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.12) 28%, rgba(0, 0, 0, 0.5) 60%, #000 100%);
}
.page-head--scene .dek { color: var(--text); }
.js .page-head--scene > .wrap {
  transform: perspective(1000px) rotateX(calc(var(--lean, 0) * 18deg)) translateY(calc(var(--lean, 0) * -28px));
  transform-origin: 50% 100%;
  opacity: calc(1 - var(--lean, 0) * 0.85);
}
.page-head--scene .label, .page-head--scene .subnav-home { color: var(--muted); }
.page-head--scene .subnav ul a { color: var(--text); }
html:has(.page-head--scene) .site-header { position: absolute; top: 0; left: 0; right: 0; }
.hero--cinema + .clients { padding-top: clamp(3.5rem, 2rem + 4vw, 6rem); }

/* ---------- The film strip: the work runs sideways as you scroll ---------- */
.strip { position: relative; padding-block: clamp(1rem, 0.5rem + 2vw, 2.5rem) clamp(4rem, 2.5rem + 4vw, 7rem); }
.strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem); }
.strip-head .label { margin-bottom: 0.6rem; }
.strip-heading { font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem); line-height: 1; letter-spacing: -0.015em; }
.strip-count { font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.strip-count span:last-child { color: var(--faint); }
/* Cards slide away under the track lane rather than across it. */
.strip.is-pinned .strip-stage { clip-path: inset(0 0 0 calc(max(0px, (100vw - 1320px) / 2) + var(--rail) - 14px)); }
.strip-track {
  --strip-left: calc(max(0px, (100vw - 1320px) / 2) + var(--rail));
  --strip-right: calc(max(0px, (100vw - 1320px) / 2) + 16px);
  list-style: none;
  display: flex;
  gap: clamp(1.25rem, 0.8rem + 1.8vw, 2.75rem);
  padding: 0 var(--strip-right) 0 var(--strip-left);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--strip-left);
  scrollbar-width: none;
}
@media (min-width: 760px) { .strip-track { --strip-right: calc(max(0px, (100vw - 1320px) / 2) + 40px); } }
.strip-track::-webkit-scrollbar { display: none; }
.strip-card { flex: 0 0 min(80vw, 780px); scroll-snap-align: start; min-width: 0; }
@media (min-width: 760px) { .strip-card { flex-basis: min(64vw, 780px, (100vh - 21rem) * 16 / 9); } }
.strip.is-pinned { padding: 0; }
.strip.is-pinned .strip-stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.strip.is-pinned .strip-stage { perspective: 1600px; }
.strip.is-pinned .strip-track { overflow: visible; will-change: transform; transform-style: preserve-3d; }
/* Cards pushed back in depth sit behind the track's own plane, which would take the
   click: the planes let pointer events through, the cards catch them. */
.strip.is-pinned .strip-stage, .strip.is-pinned .strip-track { pointer-events: none; }
.strip.is-pinned .strip-card { pointer-events: auto; }
.strip.is-pinned .strip-card {
  --k: 1;
  transform: rotateY(calc(var(--ry, 0) * var(--k) * 1deg)) translateZ(calc(var(--z, 0) * var(--k) * 1px));
  will-change: transform;
}
/* On a phone the cards nearly fill the screen, so they turn less. */
@media (max-width: 759px) { .strip.is-pinned .strip-card { --k: 0.5; } }
.strip-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: var(--dim, 0);
  pointer-events: none;
}
.strip-tc, .strip-play, .strip-frame::after { z-index: 2; }
.strip-link { display: grid; gap: 0.55rem; align-content: start; text-decoration: none; }
.strip-frame {
  --mark: var(--faint);
  --arm: 18px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.75rem;
  background: #0b0b0b;
}
.strip-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) brightness(0.84);
  transition: opacity 0.8s var(--ease), transform 1.4s var(--ease), filter 0.9s var(--ease);
}
.strip-card:hover .strip-frame > img, .strip-frame:hover > img { filter: contrast(1.02) brightness(0.95); }
.js .strip-frame > img { opacity: 0; }
.js .strip-frame > img.is-loaded { opacity: 1; }
.strip-slate { display: grid; justify-items: center; gap: 0.7rem; padding: 1.5rem; text-align: center; }
.strip-kicker { font-weight: 300; font-style: italic; font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.15rem); color: var(--muted); }
.strip-slate-title {
  font-weight: 500;
  font-size: clamp(1.5rem, 0.9rem + 3vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.strip-tc { position: absolute; top: 0.95rem; right: 1.05rem; font-size: 0.66rem; letter-spacing: 0.2em; color: var(--fg); font-variant-numeric: tabular-nums; }
.strip-play {
  position: absolute;
  left: 1.05rem;
  bottom: 0.9rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7);
}
.strip-link:hover .strip-frame { --mark: var(--fg); }
.strip-link:hover .strip-frame > img { transform: scale(1.04); }
.strip-meta { display: flex; align-items: baseline; gap: 1rem; }
.strip-no { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--faint); font-variant-numeric: tabular-nums; }
.strip-title { font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.08; letter-spacing: -0.01em; }
.strip .work-note { max-width: 52ch; font-size: 0.975rem; }

/* ---------- Clients, running like credits ---------- */
.clients { padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); perspective: 1200px; }
.js .marquee { rotate: y 22deg; transform-origin: 50% 50%; padding-block: 0.5rem; }
.clients .label { margin-bottom: 1.4rem; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track { list-style: none; display: flex; width: max-content; }
.marquee-track li {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem;
  white-space: nowrap;
  font-weight: 500;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.45rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.marquee-track li::after { content: "/"; font-weight: 300; letter-spacing: 0; color: var(--faint); }
.marquee-track img { display: block; height: clamp(24px, 12px + 1.6vw, 36px); width: auto; max-width: none; filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 46s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .js .marquee { rotate: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; width: auto; row-gap: 1rem; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .marquee-track li[aria-hidden="true"] { display: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Selected work: three pieces in a row on the home page ---------- */
.selected { list-style: none; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 760px) { .selected { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.selected .strip-card { flex: none; }
.selected-actions .btn { gap: 0.75rem; }
.selected-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.selected .strip-title { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); }
.selected .strip-slate-title { font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.7rem); }
.selected .strip-kicker { font-size: 0.9rem; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--flush-top { padding-top: 0; }
.section-head { display: grid; gap: 1rem; max-width: 52rem; margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); }
.section-head--tight { gap: 0.9rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.section-head--tight .section-label { margin-bottom: 0; }
.section-label { margin-bottom: 1.4rem; }

/* Statement */
.statement { display: grid; gap: 1.75rem; justify-items: start; }
.statement-text {
  max-width: 25ch;
  font-weight: 300;
  font-size: clamp(1.75rem, 1.05rem + 3vw, 3.6rem);
  line-height: 1.17;
  letter-spacing: -0.012em;
  color: var(--faint);
  text-wrap: balance;
}
.statement-text em { font-style: normal; color: var(--fg); }

/* ---------- Two paths: production, then lessons ---------- */
.path { padding-bottom: clamp(3.5rem, 2rem + 4vw, 6.5rem); }
.path-inner { display: grid; gap: 1.75rem 3rem; }
@media (min-width: 960px) {
  .path-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
}
.path-head { display: grid; gap: 0.9rem; min-width: 0; }
.path-no { margin-right: 0.9em; color: var(--fg); }
.services-head { display: grid; gap: 0.9rem; margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); }
.services-head .section-label { margin-bottom: 0; }
.services-note { max-width: 44ch; color: var(--muted); }
.path-title {
  font-weight: 300;
  font-size: clamp(3.4rem, 1.1rem + 10.5vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin-left: -0.05em;
}
.path-title a { display: inline-block; text-decoration: none; transition: letter-spacing 0.7s var(--ease); }
.path-title a:hover { letter-spacing: 0; }
.path-body { display: grid; gap: 1.6rem; min-width: 0; }
.path-body > p { max-width: 44ch; color: var(--muted); }
.path-links { list-style: none; border-top: 1px solid var(--rule); }
.pairs { max-width: 56rem; }
@media (max-width: 559px) {
  .pairs a { flex-wrap: wrap; row-gap: 0.2rem; }
  .pairs .pl-name { flex: 1 1 0; }
  .pairs .arrow { order: 2; }
  .pairs .pl-note { order: 3; flex: 1 0 100%; margin-left: 0; text-align: left; }
}
.section-head > p:not(.label) { max-width: 52ch; }
.path-links a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.pl-name { font-weight: 500; }
.pl-note { margin-left: auto; font-size: 0.9rem; color: var(--muted); text-align: right; }
/* Each service ends on its one action. */
.path-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.4rem; }
.path-cta-note { font-size: 0.9rem; color: var(--muted); }

/* ---------- Stills: photographs cut like film frames ---------- */
.still {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin: 0;
  background: var(--block);
}
@media (min-width: 860px) { .still--path, .still--feature, .still--post, .still--wide { aspect-ratio: 2.39 / 1; } }
.still img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
  transition: transform 1.4s var(--ease), opacity 0.9s ease;
}
a.still:hover img, .still--wide:hover img, .post-feature:hover .still img { transform: scale(1.035); }
.still-wrap { margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
.still--path { --mark: rgba(255, 255, 255, 0.75); --arm: 28px; }
/* The two service photos on the home page are simply there: no fade on arrival. */
.still--path img { transition: transform 1.4s var(--ease); }
.still--path::after { z-index: 1; }
.still-wrap--page { margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.still--post { margin-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* A photo pulls into focus: its frame carries a tiny soft copy (--lq, inlined by the
   build) that shows while the real one loads, and the real one fades in over it once
   the script marks it ready. A photo that was already there shows at once, and the
   soft copy is dropped once the fade is over. */
:is(.still, .shot, .scene-media, .post-thumb)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lq, none) center / cover no-repeat;
  filter: blur(10px);
  transform: scale(1.06);
  pointer-events: none;
}
:is(.still, .shot, .scene-media, .post-thumb).is-set::before { display: none; }
.js :is(.still, .shot, .scene-media, .post-thumb) img:not(.is-ready) { opacity: 0; }

/* The studio, as a contact sheet: one large frame with smaller ones beside it. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.9rem);
}
.shot { position: relative; min-width: 0; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--block); }
.shot:first-child { grid-column: 1 / -1; }
.gallery[data-count="2"] .shot:first-child { grid-column: auto; }
.shot img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
  transition: transform 1.4s var(--ease), opacity 0.9s ease;
}
.shot:hover img { transform: scale(1.035); }
@media (min-width: 760px) {
  .gallery[data-count="3"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .gallery[data-count="3"] .shot:first-child { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
}

/* ---------- Blog ---------- */
.post-meta-line {
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
.post-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--block); }
.post-thumb img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 1.4s var(--ease), opacity 0.9s ease;
}
.post-card:hover .post-thumb img, .post-row:hover .post-thumb img { transform: scale(1.04); }

.post-grid { list-style: none; display: grid; gap: 2.75rem 2rem; }
@media (min-width: 760px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: grid; gap: 0.75rem; align-content: start; text-decoration: none; }
.post-card .post-thumb { margin-bottom: 0.45rem; }
.post-card-title {
  font-weight: 300;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  text-wrap: balance;
}

.post-feature { display: grid; gap: 1rem; text-decoration: none; }
.post-feature .still { margin-bottom: 0.75rem; }
.post-feature-title {
  max-width: 22ch;
  font-weight: 300;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.post-feature-dek { max-width: 54ch; color: var(--muted); }
.post-feature .link-arrow { margin-top: 0.4rem; }

.post-list { list-style: none; margin-top: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--rule); }
.post-list--more { margin-top: 0; }
.post-row {
  display: grid;
  gap: 1.1rem 2.25rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
@media (min-width: 760px) {
  .post-row { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: center; }
  .post-row--soon { grid-template-columns: minmax(0, 1fr); }
}
.post-row-text { display: grid; gap: 0.55rem; min-width: 0; }
.post-row-title {
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  line-height: 1.12;
  text-wrap: balance;
}
.post-row-dek { max-width: 56ch; color: var(--muted); }

.post-head .wrap { gap: 1.1rem; }
.post-title { max-width: 18ch; }
.post-body { max-width: 66ch; }
.post-body p { font-size: 1.125rem; line-height: 1.75; color: var(--text); }
.post-body h2 {
  margin-top: 1.75rem;
  font-weight: 300;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.post-body blockquote { margin: 1.25rem 0; padding-left: 1.5rem; border-left: 1px solid var(--rec); }
.post-body blockquote p {
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem);
  line-height: 1.3;
  color: var(--fg);
}
.post-author {
  display: grid;
  gap: 0.6rem;
  max-width: 66ch;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.post-author p:not(.label) { color: var(--muted); }
.post + .rule-divider { margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }

/* ---------- Showreel and work: frames you can play ---------- */
/* Corner marks, drawn over whatever sits in the frame. */
.reel::after, .clip-frame::after, .strip-frame::after, .still--path::after, .door::after, .screen-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) top left / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top left / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / 1px var(--arm) no-repeat;
  transition: opacity 0.3s;
}
.reel {
  --mark: var(--faint);
  --arm: 26px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.9rem;
  min-height: 300px;
  padding: 3.5rem 1.25rem;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
}
@media (min-width: 860px) { .reel { --arm: 34px; aspect-ratio: 2.39 / 1; min-height: 0; } }
/* The films on the lesson pages: the introduction in a wide frame, the licks (vertical
   shorts) in tall frames. Each keeps the shape of its video, so nothing jumps when it
   plays. On wide screens the tall frames stand beside the wide one at the same height:
   a 16:9 frame and a 9:16 frame of one height have widths in the ratio 256:81. */
.watch { --gap: 0.9rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.watch > .reel--watch:not(.reel--short) { grid-column: 1 / -1; order: 0; }
.watch > .reel--short { order: 1; }
.reel--watch { aspect-ratio: 16 / 9; min-height: 0; padding: 2rem 1.25rem; }
.reel--short { aspect-ratio: 9 / 16; min-height: 0; padding: 1.5rem 0.9rem; gap: 0.6rem; }
.reel--short .reel-title { max-width: 14ch; font-size: clamp(1rem, 0.85rem + 0.55vw, 1.35rem); }
.reel--short .reel-cta { font-size: 0.62rem; }
.reel--short .frame-meta { font-size: 0.58rem; }
@media (min-width: 860px) {
  .watch { grid-template-columns: 256fr repeat(var(--per, 1), 81fr); align-items: start; }
  .watch > .reel--watch:not(.reel--short) { grid-column: auto; }
  .watch > .reel--short { order: 0; }
}
.reel > img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) brightness(0.78);
  transition: opacity 1.2s var(--ease), transform 1.6s var(--ease), filter 0.9s var(--ease);
}
/* A soft shade behind the words, so the still can stay light. */
.reel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.35));
}
.reel > :not(img) { position: relative; z-index: 1; }
.reel > .frame-meta { position: absolute; }
.reel-title, .reel-cta, .reel > .frame-meta { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 22px rgba(0, 0, 0, 0.45); }
.reel:hover { --mark: var(--fg); }
/* Reach for a frame and it comes alive in colour; the film then plays in colour anyway. */
.reel:hover > img, .reel:focus-visible > img, .reel:active > img { transform: scale(1.035); filter: contrast(1.02) brightness(0.92); }
.reel-title {
  max-width: 18ch;
  font-weight: 300;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.reel-cta, .clip-play {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.reel-cta { margin-top: 0.4rem; }
.reel:hover .arrow { transform: translateX(6px); }
.js .reel > img, .js .clip-frame > img { opacity: 0; }
.js .reel > img.is-loaded, .js .clip-frame > img.is-loaded { opacity: 1; }

/* The reel's chapters, listed like an edit: timecode, title, what it is. */
.reel-chapters { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }
.reel-chapters > .label, .clips-wrap > .label { margin-bottom: 1.1rem; }
.chapter-list { list-style: none; border-top: 1px solid var(--rule); }
.chapter-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tc watch" "title title" "type type" "note note";
  gap: 0.4rem 1.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: padding-left 0.5s var(--ease);
}
.ch-tc { grid-area: tc; font-size: 0.82rem; letter-spacing: 0.14em; color: var(--faint); font-variant-numeric: tabular-nums; transition: color 0.2s; }
.chapter-list .work-title { grid-area: title; }
.chapter-list .work-type { grid-area: type; }
.chapter-list .work-note { grid-area: note; }
.chapter-list .work-watch { grid-area: watch; margin: 0; }
@media (min-width: 960px) {
  .chapter-list a {
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.4fr) auto;
    grid-template-areas: "tc title type note watch";
    align-items: baseline;
  }
}
.chapter-list a:hover { padding-left: 0.75rem; }
.chapter-list a:hover .ch-tc { color: var(--fg); }
.chapter-list a:hover .work-watch { text-decoration: underline; }

/* Pieces with their own film. */
.clips-wrap { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.clips { list-style: none; display: grid; gap: 2.75rem 2rem; }
@media (min-width: 700px) { .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .clips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clip { display: grid; gap: 0.6rem; align-content: start; min-width: 0; text-decoration: none; }
.clip-frame {
  --mark: var(--faint);
  --arm: 16px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.65rem;
  background: var(--block);
}
.clip-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04) brightness(0.8);
  transition: opacity 0.8s var(--ease), transform 1.4s var(--ease);
}
.clip-slate { padding: 1rem; font-weight: 300; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); text-align: center; color: var(--muted); }
.clip-play { position: absolute; left: 0.95rem; bottom: 0.8rem; font-size: 0.66rem; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
.clip:hover .clip-frame { --mark: var(--fg); }
.clip:hover .clip-frame > img { transform: scale(1.04); }
.clip-title { font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; }
.clip .work-note { font-size: 0.975rem; }

/* ---------- Screening room: the in-page player ---------- */
html.screen-open { overflow: hidden; }
.screen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(16px, 4vw);
  border: 0;
  background: transparent;
  color: var(--fg);
  overflow: hidden;
}
.screen[open] { display: grid; place-items: center; }
.screen::backdrop { background: rgba(0, 0, 0, 0.95); }
.screen-frame {
  --mark: var(--faint);
  --arm: 26px;
  position: relative;
  width: min(100%, 1280px, calc((100vh - 10rem) * 16 / 9));
  width: min(100%, 1280px, calc((100dvh - 10rem) * 16 / 9));
  aspect-ratio: 16 / 9;
}
.screen-frame::before { inset: -14px; }
.screen-video { position: absolute; inset: 0; background: #000; display: grid; place-items: center; }
.screen-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.screen-video wistia-player { display: block; width: 100%; max-height: 100%; }
/* the showreel frame once the film is playing in it */
.reel--live { padding: 0; min-height: 0; display: grid; place-items: center; background: #000; aspect-ratio: 16 / 9; cursor: default; }
.reel--live::before { content: none; }
.reel--live wistia-player { display: block; width: 100%; }
.reel--live iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.reel--live .screen-note { padding: 2rem; color: var(--muted); }
.screen-note { display: grid; place-items: center; height: 100%; padding: 1.5rem; text-align: center; color: var(--muted); }
.screen-meta {
  position: absolute;
  margin: 0;
  font-weight: 500;
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.screen-meta--tl { left: 0; bottom: calc(100% + 1.6rem); max-width: 60%; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.screen-meta--tr { right: -0.5rem; bottom: calc(100% + 0.85rem); }
.screen-meta--bl { left: 0; top: calc(100% + 1.6rem); }
.screen-meta--br { right: 0; top: calc(100% + 1.6rem); color: var(--muted); text-decoration: none; display: inline-flex; gap: 0.6rem; }
.screen-meta--br:hover { color: var(--fg); }
.screen-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg);
}
.screen-close:hover { text-decoration: underline; text-underline-offset: 0.4em; }
@media (prefers-reduced-motion: no-preference) {
  .screen[open] .screen-frame { animation: screen-in 0.7s var(--ease) both; }
  .screen[open]::backdrop { animation: screen-fade 0.45s ease both; }
}
@keyframes screen-in { from { opacity: 0; transform: scale(0.97); } }
@keyframes screen-fade { from { opacity: 0; } }

.aside-note { margin-top: 2.5rem; max-width: 56ch; color: var(--muted); }

/* ---------- Closing ---------- */
.closing-inner { display: grid; gap: 1.4rem; justify-items: start; }
.closing-title {
  font-weight: 300;
  font-size: clamp(3.1rem, 1.1rem + 8.5vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-left: -0.04em;
}
.closing-inner > .actions { margin-top: 0.5rem; }
/* the last step on the Lessons page: three places to choose from, large and plain to press */
.pick-label { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg); }
.pick-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg); animation: pick-beat 1.6s var(--ease) infinite; }
@keyframes pick-beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
.pick { list-style: none; display: grid; gap: 0.9rem; width: 100%; }
.pick-card {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 1.1rem; align-items: center;
  padding: 1.3rem 1.4rem; min-height: 96px; color: var(--fg); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s, transform 0.35s var(--ease);
}
.pick-card .ico { grid-row: 1 / 3; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pick-name { font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.05; letter-spacing: -0.01em; }
.pick-note { grid-column: 2; font-size: 0.86rem; color: var(--muted); transition: color 0.35s; }
.pick-go { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.pick-card:hover, .pick-card:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pick-card:hover .pick-note, .pick-card:focus-visible .pick-note { color: rgba(0, 0, 0, 0.6); }
.pick-card:hover .arrow { transform: translateX(6px); }
/* arriving with a lesson already chosen, the three light up once in turn */
.is-picking .pick-card { animation: pick-call 1.4s var(--ease) both; animation-delay: calc(0.5s + var(--n, 0) * 0.18s); }
.pick li:nth-child(2) .pick-card { --n: 1; }
.pick li:nth-child(3) .pick-card { --n: 2; }
@keyframes pick-call { 0% { border-color: rgba(255, 255, 255, 0.28); } 30% { border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 40px rgba(255, 255, 255, 0.18); } 100% { border-color: rgba(255, 255, 255, 0.28); box-shadow: none; } }
@media (min-width: 900px) {
  .pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; row-gap: 0.35rem; padding: 1.6rem 1.6rem 1.4rem; min-height: 230px; align-content: start; }
  .pick-card .ico { grid-row: auto; margin-bottom: 1.4rem; width: 34px; height: 34px; }
  .pick-note { grid-column: 1; }
  .pick-go { grid-column: 1; grid-row: auto; margin-top: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .pick-dot, .is-picking .pick-card { animation: none; } }
.email-copy { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.1rem; max-width: 100%; }
.closing-inner > .email-copy { margin-top: 1rem; }

/* Two doors at the end of the page: one into production, one into lessons. On wide
   screens they stand turned towards the reader, like panels on a curved wall; the one
   under the pointer squares up and steps forward. */
.doors {
  display: grid;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  justify-self: stretch;
  width: 100%;
  margin-top: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  perspective: 1400px;
}
.door {
  --mark: var(--faint);
  --arm: 22px;
  --dr: 0;
  --up: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  min-height: clamp(16rem, 11rem + 14vw, 23rem);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.62);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.4s, background-color 0.4s, transform 0.55s var(--ease);
}
.door::after { opacity: 0.7; }
.door:hover { border-color: var(--faint); background: rgba(0, 0, 0, 0.8); }
.door:hover::after { opacity: 1; }
.door-label { color: var(--muted); }
.door-body { display: grid; gap: 0.9rem; align-content: start; }
.door-title {
  font-weight: 300;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.door-note { max-width: 36ch; color: var(--muted); }
/* What each door opens onto, at a glance. */
.door-kit { display: flex; flex-wrap: wrap; gap: 0.55rem 1.2rem; margin-top: 0.5rem; }
.kit { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; line-height: 1.2; color: var(--text); }
.kit small { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.ico {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: round;
  color: var(--muted);
  transition: color 0.35s;
}
.door:hover .ico { color: var(--fg); }
.door > .btn { justify-self: start; gap: 0.6rem; }
.door:hover > .btn { background: transparent; color: var(--fg); }
.door:hover .arrow { transform: translateX(6px); }
@media (min-width: 760px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door { transform: rotateY(calc(var(--dr) * 1deg)); }
  .door:first-child { --dr: -11; }
  .door:last-child { --dr: 11; }
  .door:hover { --dr: 0; --up: 28; }
  .js .door.tilt {
    transform: rotateY(calc((var(--dr) + var(--hy, 0)) * 1deg)) rotateX(calc(var(--hx, 0) * 1deg)) translateZ(calc(var(--up) * 1px));
    transition: border-color 0.4s, background-color 0.4s, transform 0.55s var(--ease);
  }
}
@media (max-width: 759px) {
  .js .door.tilt { transform: none; }
}
/* Three doors, for the three places lessons happen. */
.doors--three .door-body > .ico { width: 30px; height: 30px; margin-bottom: 0.2rem; }
.door--place .door-note { max-width: 30ch; }
@media (min-width: 760px) {
  .doors--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doors--three .door:first-child { --dr: -12; }
  .doors--three .door:nth-child(2) { --dr: 0; }
  .doors--three .door:last-child { --dr: 12; }
  .doors--three .door:hover { --dr: 0; }
}

/* ---------- The map: Daniel at the centre, the work wired to him ---------- */
/* The home page opens on one card. The portrait and name sit in the middle; the
   branches of the work stand around it, production to the left, lessons to the
   right, writing on a lower shelf, each wired to the centre like a patchbay: a
   socket on the panel, a lead running to it, and signal running down the lead under
   the pointer. The leads are drawn by script from where the pieces land, so they
   follow the layout; without script the panels stand on their own. On tablets the
   panels move under the portrait; on phones they stack on one line. */
.map {
  --p: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(76px + 1.5rem);
  padding-bottom: 4.5rem;
}
.map-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.map-backdrop .frame-photo img, .map-backdrop .frame-photo video { filter: saturate(0.9) contrast(1.04) brightness(0.32); }
.map-backdrop .frame-photo::after { background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9) 72%); }
@media (prefers-reduced-motion: no-preference) {
  .map-backdrop .frame-photo img, .map-backdrop .frame-photo video { animation: push-in 60s linear both; }
}
html:has(.map) .site-header { position: absolute; top: 0; left: 0; right: 0; }
.map .scroll-cue { opacity: 0.9; }
@media (max-width: 759px) { .map .scroll-cue { display: none; } }
.map-wrap { padding-right: max(var(--rail), env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .map-wrap { padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
.map-grid { position: relative; display: grid; justify-items: center; gap: 2.5rem; perspective: 1600px; }
.map-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* the leads: a faint line, a glow that comes up when live, and the signal running along it */
.wire, .wire-glow, .wire-pulse { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wire { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; transition: stroke 0.4s, stroke-dashoffset 1.1s var(--ease); }
.wire-glow { stroke: rgba(255, 255, 255, 0); stroke-width: 7; filter: blur(5px); transition: stroke 0.45s; }
.wire-pulse { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 14 4000; opacity: 0; transition: opacity 0.3s; }
.wire-set.is-live .wire { stroke: rgba(255, 255, 255, 0.7); }
.wire-set.is-live .wire-glow { stroke: rgba(255, 255, 255, 0.16); }
.wire-set.is-live .wire-pulse { opacity: 1; animation: wire-flow 1.4s linear infinite; }
@keyframes wire-flow { from { stroke-dashoffset: 14px; } to { stroke-dashoffset: calc(var(--len) * -1); } }
@media (prefers-reduced-motion: reduce) {
  .wire { transition: stroke 0.4s; }
  .wire-set.is-live .wire-pulse { animation: none; opacity: 0; }
}
/* the socket a lead plugs into */
.jack {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #000 0 30%, #7a7a7e 33%, #2b2b2e 55%, #58585d 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 0 4px rgba(0, 0, 0, 0.65), 0 0 14px rgba(0, 0, 0, 0.8);
  transition: box-shadow 0.4s;
}
.branch:hover .jack, .branch:focus-within .jack {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 4px rgba(0, 0, 0, 0.65), 0 0 16px rgba(255, 255, 255, 0.25);
}

/* the centre */
.core { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.95rem; width: min(100%, 19.5rem); text-align: center; }
@media (min-width: 1100px) { .core { width: 17rem; } }
.core-ring {
  display: grid;
  place-items: center;
  width: clamp(150px, 100px + 7vw, 190px);
  aspect-ratio: 1;
  padding: 7px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #3d3d41, #17171a 28%, #2e2e32 50%, #121214 72%, #3d3d41);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 36px 60px -24px rgba(0, 0, 0, 0.95);
  transition: box-shadow 0.5s;
}
.core:hover .core-ring { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.8), 0 36px 60px -24px rgba(0, 0, 0, 0.95), 0 0 40px rgba(255, 255, 255, 0.08); }
.core-ring > * { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: saturate(0.9) contrast(1.02); }
.core-name {
  font-weight: 500;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem);
  line-height: 1;
  letter-spacing: 0.16em;
  margin-right: -0.16em;
}
.core-name > span { display: inline-block; }
.core-roles {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  font-weight: 400;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.core-roles span { margin-right: -0.3em; }
.core-note { font-weight: 300; font-size: 0.98rem; color: var(--muted); }
.core-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; margin-top: 0.15rem; }
.core-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}
.core-links a:hover { text-decoration: underline; text-underline-offset: 0.45em; }

/* the panels */
.branches { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2rem; width: 100%; }
.branch {
  --dr: 0;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  width: min(100%, 25rem);
  padding: 1.35rem 1.45rem 1.5rem;
  border: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: rotateY(calc(var(--dr) * 1deg));
  transition: border-color 0.4s, background-color 0.4s;
}
.branch:hover, .branch:focus-within { border-color: var(--faint); background: rgba(0, 0, 0, 0.86); }
.branch-card { display: grid; gap: 0.7rem; color: var(--fg); text-decoration: none; }
.branch-label { color: var(--muted); }
.branch-title { font-weight: 300; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1; letter-spacing: -0.02em; }
.branch-text { font-size: 0.92rem; line-height: 1.5; color: var(--muted); max-width: 36ch; text-wrap: pretty; }
/* what the branch splits into: a bus line, and each item tapped off it with a stem */
.twigs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.twigs li { display: flex; }
.twigs a {
  padding-left: 0.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.twigs a:hover { color: var(--fg); border-color: var(--fg); }
.branch-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.branch-cta .btn { min-height: 44px; padding: 0.65rem 1.2rem; }
.branch-cta-note { font-size: 0.84rem; color: var(--muted); }

/* phones: one column, the lead runs down the middle from panel to panel */
@media (max-width: 759px) {
  .jack { top: -7px; left: 50%; translate: -50% 0; }
}
/* tablets and up: writing is a lower shelf, wide and short */
@media (min-width: 760px) {
  .branch--writing {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "card text cta" "card twigs cta";
    align-items: start;
    column-gap: 1.75rem;
    row-gap: 0.8rem;
    width: 100%;
    max-width: 46rem;
  }
  .branch--writing .branch-card { grid-area: card; }
  .branch--writing .branch-text { grid-area: text; max-width: 48ch; }
  .branch--writing .twigs { grid-area: twigs; }
  .branch--writing .branch-cta { grid-area: cta; align-self: center; flex-direction: column; align-items: flex-end; gap: 0.45rem; text-align: right; }
  .branch--writing .jack { top: -7px; left: 50%; translate: -50% 0; }
}
/* tablets: the portrait above, production and lessons side by side beneath it */
@media (min-width: 760px) and (max-width: 1099px) {
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "core core" "a b" "c c"; column-gap: 2rem; row-gap: 4.25rem; }
  .core { grid-area: core; }
  .branches { display: contents; }
  .branch--production { grid-area: a; justify-self: end; }
  .branch--lessons { grid-area: b; justify-self: start; }
  .branch--writing { grid-area: c; justify-self: center; }
  .branch--production .jack, .branch--lessons .jack { top: -7px; left: 50%; translate: -50% 0; }
}
/* wide screens: the centre with production to its left and lessons to its right, the
   side panels turned a little towards the centre, writing on the shelf beneath */
@media (min-width: 1100px) {
  .map-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "a core b" "c c c";
    column-gap: clamp(3rem, 1rem + 5vw, 8rem);
    row-gap: 3rem;
    align-items: center;
  }
  .core { grid-area: core; }
  .branches { display: contents; }
  .branch--production { grid-area: a; justify-self: end; --dr: 7; }
  .branch--lessons { grid-area: b; justify-self: start; --dr: -7; }
  .branch--production, .branch--lessons { max-width: 21.5rem; }
  .branch--writing { grid-area: c; justify-self: center; }
  .branch--production .jack { right: -7px; top: 50%; translate: 0 -50%; }
  .branch--lessons .jack { left: -7px; top: 50%; translate: 0 -50%; }
}
@media (min-width: 1320px) {
  .branch { padding: 1.6rem 1.75rem 1.75rem; }
}

/* ---------- The field: a dark stage, Daniel at the centre, the work around him ---------- */
/* The home page opens on a place. The floor, the lights, the cables and the things
   standing in the light are painted on a canvas by the script, in perspective; the
   names are real text laid over it, each moved and scaled flat to where its thing
   stands. Nothing here is a 3D transform, so nothing flickers. Without script the
   places are a plain row of links under the name. */
section.field {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  background: #000;
}
html:has(section.field) .site-header { position: absolute; top: 0; left: 0; right: 0; }
.field-stage { position: absolute; inset: 0; overflow: clip; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
/* Scrolling on, the camera pulls back and the pool settles into a frame in the page,
   marked at the corners like the frames below it, and the page carries on round it.
   The script sets the frame (--ct/--cr/--cb/--cl) and how far along it is (--fp). */
.js section.field { height: 200vh; height: 200svh; }
/* the page carries straight on under the room: the next section rises into the dark
   below the desk as soon as the camera has pulled back, with no empty scroll between */
.js .field.has-studio { margin-bottom: -55vh; margin-bottom: -55svh; }
.js .field.has-studio + * { position: relative; z-index: 1; opacity: var(--room-in, 0); transform: translateY(calc((1 - var(--room-in, 0)) * 24px)); }
/* Phones: the room is not drawn live. The pool pulls back onto the screen of a photograph
   of the room (.has-still, set up by field.js), by transforms the browser runs itself as
   the page scrolls, so they stay in step with the thumb however fast it moves. A shorter
   run than the desk's; the page rises into the dark under the desk as there. Where no
   photograph fits the screen (tablets, reduced motion), the pool is one screen and the
   page scrolls straight on (.no-still). */
@media (pointer: coarse), (max-width: 759px) {
  .js section.field { height: 175vh; height: 175svh; }
  .js .field.has-still { margin-bottom: -50vh; margin-bottom: -50svh; }
  .js section.field.no-still { height: 100vh; height: 100svh; margin-bottom: 0; }
  .js .field-canvas, .js .field-layer { clip-path: none; }
}
/* the photograph: a box the size of the stage that the camera move transforms, and in it
   the picture, placed once where the move ends (field.js sets both transforms) */
.room-still { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.room-still img { position: absolute; max-width: none; transform-origin: 50% 50%; will-change: transform; }
/* the pool's frame: a 16:9 window on the pool, stretched to the whole screen at the start
   and drawn in to the screen's shape as the camera pulls back; the pool inside it is
   stretched the other way, so the water itself never distorts */
.pool-crop { position: absolute; left: 0; width: 100%; z-index: 1; overflow: hidden; transform-origin: 50% 50%; will-change: transform; }
.pool-crop .field-canvas { transform-origin: 50% 50%; will-change: transform; }
.has-still .field-room, .has-still .field-frame, .has-still .field-caption { display: none; }
.js .field.has-still + * { position: relative; z-index: 1; }
/* the move itself, as animations driven by the page's scroll where the browser can run
   them (field.js writes the keyframes for this screen and the stretch of scroll they
   cover, and drives the same move by script where it cannot) */
@supports (animation-timeline: scroll()) {
  .has-still .pool-crop, .has-still .pool-crop .field-canvas, .has-still .room-still, .has-still .field-layer, .has-still .field-hint, .has-still .field-sound, .js .field.has-still + * {
    animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root);
  }
  .has-still .pool-crop { animation-name: pool-crop; }
  .has-still .pool-crop .field-canvas { animation-name: pool-fix; }
  .has-still .room-still { animation-name: room-still; }
  .has-still .field-layer, .has-still .field-hint, .has-still .field-sound { animation-name: field-fade; }
  .js .field.has-still + * { animation-name: field-next; }
}
@keyframes field-fade { 0% { opacity: 1; } 16%, 100% { opacity: 0; } }
/* once faded, the names cannot be pressed by mistake (field.js sets the class as it goes) */
.has-still.is-away .field-layer, .has-still.is-away .field-hint, .has-still.is-away .field-sound { visibility: hidden; }
@keyframes field-next { 0%, 30% { opacity: 0; transform: translateY(24px); } 65%, 100% { opacity: 1; transform: none; } }
.js .field-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.js .field-canvas, .js .field-layer { clip-path: inset(var(--ct, 0px) var(--cr, 0px) var(--cb, 0px) var(--cl, 0px)); }
/* The room behind the screen: it comes up as the pool shrinks onto the monitor. */
.field-room { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: var(--fp, 0); pointer-events: none; }
html:not(.js) .field-room { display: none; }
.room-photo {
  position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover;
  filter: saturate(0.9) contrast(1.04) brightness(0.45) blur(calc((1 - var(--fp, 0)) * 6px + 1.5px));
  transform: scale(calc(1.18 - 0.18 * var(--fp, 0)));
}
.room-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0.15), rgba(0,0,0,0.85) 75%); }
/* the desk the monitor stands on, and the stand */
.room-desk {
  position: absolute; left: 0; right: 0; z-index: 1;
  top: calc(100% - var(--cb, 0px) + 9vh);
  bottom: 0;
  background: linear-gradient(180deg, #2a2a2c 0, #121213 2px, #0a0a0b 40%, #050505);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.08);
}
.room-stand {
  position: absolute; z-index: 1;
  left: calc(var(--cl, 0px) + (100% - var(--cl, 0px) - var(--cr, 0px)) / 2 - 22px);
  width: 44px;
  top: calc(100% - var(--cb, 0px) + 12px);
  height: calc(9vh - 12px);
  background: linear-gradient(90deg, #121214, #333336 45%, #1b1b1d);
}
.room-stand::after { content: ""; position: absolute; left: -70px; right: -70px; bottom: -6px; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #3a3a3d, #141416); }
.field-frame {
  box-shadow:
    0 0 0 calc(12px * var(--fp, 0)) #0b0b0c,
    0 0 0 calc(12px * var(--fp, 0) + 1px) rgba(255, 255, 255, calc(0.14 * var(--fp, 0))),
    0 40px 80px rgba(0, 0, 0, calc(0.8 * var(--fp, 0)));
  --mark: rgba(255, 255, 255, calc(0.25 * var(--fp, 0)));
  --arm: 34px;
  position: absolute;
  z-index: 4;
  top: var(--ct, 0px); right: var(--cr, 0px); bottom: var(--cb, 0px); left: var(--cl, 0px);
  pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) top left / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top left / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / 1px var(--arm) no-repeat;
}
.js .field-hint, .js .field-links, .js .field-sound { opacity: calc(1 - var(--fp, 0) * 2.2); }
.js .field-layer .spot--place, .js .field-layer .spot--centre { opacity: calc(1 - var(--fp, 0) * 1.6); }
.has-studio .field-layer .spot--place, .has-studio .field-layer .spot--centre { opacity: calc(1 - var(--fp, 0) * 5); }
.field-caption {
  position: absolute;
  z-index: 4;
  left: var(--cl, 0px);
  bottom: calc(var(--cb, 0px) - 2.2rem);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: calc((var(--fp, 0) - 0.6) * 2.5);
  pointer-events: none;
}
.field-stage.is-dragging { cursor: grabbing; }
.field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.field-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.field-layer a, .field-layer button { pointer-events: auto; }
.spots { list-style: none; }
.sats { list-style: none; }
/* every name is placed by the script: transform from the top-left of the stage */
.js .spot, .js .sat, .js .spot--centre { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.js .spot .node-mark, .js .spot--centre .node-plate, .js .sat-link { transform-origin: 0 0; }
.spot--centre .node-plate { display: grid; justify-items: center; gap: 0.7rem; width: max-content; text-align: center; }
.spot--centre .core-name { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
.spot--centre .core-roles { font-size: 0.62rem; }

/* a place's name, floating over its light */
.node-mark { position: relative; display: block; width: max-content; color: var(--fg); text-decoration: none; }
.node-plate { position: relative; display: grid; justify-items: center; gap: 0.3rem; padding: 0.2rem 0.4rem 0.9rem; text-align: center; }
.node-plate::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 0.6rem; background: rgba(255, 255, 255, 0.4); transition: background-color 0.35s, height 0.35s; }
.node-role { font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text); }
.node-name { font-weight: 300; font-size: clamp(2rem, 1.3rem + 1.6vw, 3rem); line-height: 1; letter-spacing: -0.01em; }
.node-go { margin-top: 0.2rem; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; }
.node-go::after { content: " \2192"; }
.node-mark:hover .node-plate::after, .node-mark:focus-visible .node-plate::after { background: var(--fg); height: 0.9rem; }
@media (hover: hover) { .node-mark:hover .node-go { color: var(--fg); } }
.node-mark:focus-visible { outline-offset: 6px; }
.is-open .node-go { visibility: hidden; }
.is-open .node-mark .node-plate { opacity: 0; transition: opacity 0.4s; }
.node-mark { opacity: var(--fade, 1); }
/* while one place is open, the others step back entirely so nothing can be pressed by mistake */
.is-focused .spot--place:not(.is-open) .node-mark { opacity: 0; pointer-events: none; }
.is-open .node-mark { pointer-events: none; }
.is-open .node-dot { pointer-events: auto; }
.node-mark, .node-plate--centre { transition: opacity 0.6s; }
.js section.field:not(.is-ready) .node-mark, .js section.field:not(.is-ready) .node-plate--centre { opacity: 0; }
.is-focused .node-plate--centre { opacity: 0.25; }
.spot--centre .node-plate { padding: 0; gap: 0.7rem; }
.spot--centre .node-plate::after { display: none; }
.spot--centre .core-name { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); }
.spot--centre .core-roles { font-size: 0.6rem; }
/* the pressable ring over the light itself, part of its link */
.node-dot, .sat-dot { position: absolute; left: 50%; top: 100%; width: 44px; height: 44px; margin: -8px 0 0 -22px; border-radius: 50%; }
.sat-dot { width: 36px; height: 36px; margin: -6px 0 0 -18px; }
html:not(.js) .node-dot, html:not(.js) .sat-dot { display: none; }

/* the small names that surface round an open place */
.sat { visibility: hidden; }
.is-open .sat { visibility: visible; }
.sat-link {
  position: relative;
  display: block;
  width: max-content;
  max-width: 11rem;
  color: var(--fg);
  padding: 0.1rem 0.3rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-shadow: 0 0 6px #000, 0 0 14px rgba(0, 0, 0, 0.9), 0 0 28px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease), color 0.3s;
  transition-delay: 0s;
}
.sat-link .ico { display: block; width: 1.6rem; height: 1.6rem; margin: 0 auto 0.4rem; fill: none; stroke: currentColor; stroke-width: 1.5; filter: drop-shadow(0 0 6px #000) drop-shadow(0 0 12px #000); stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.sat-name { display: block; }
.sat-link::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 0.45rem; background: rgba(255, 255, 255, 0.35); }
.is-open .sat-link { opacity: 1; transition-delay: calc(0.45s + var(--i, 0) * 0.14s); }
.sat-link:hover, .sat-link:focus-visible { color: var(--fg); }
.sat-link:hover::after { background: var(--fg); }
html:not(.js) .sat { visibility: visible; }
html:not(.js) .sat-link { opacity: 1; }
.field.is-flat { background: radial-gradient(ellipse at 50% 80%, #111 0%, #000 70%); }
.field.is-flat .field-canvas { display: none; }
.studio-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none; }
/* as the page rises into the room, the foot of the picture sinks into the dark under it */
.studio-canvas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--room-in, 0) * 42%), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--room-in, 0) * 42%), transparent 100%); }
.field-layer { z-index: 2; }
.has-studio .field-room, .has-studio .field-frame { display: none; }
/* in the room, the page's own backdrop shows through behind the gear */
.field.is-room { background: transparent; }
/* without script: a plain row under the name */
html:not(.js) section.field { height: auto; min-height: 0; padding: 120px 0 4rem; }
html:not(.js) .field-stage { position: static; }
html:not(.js) .field-canvas { display: none; }
html:not(.js) .field-layer { position: static; display: grid; gap: 2rem; justify-items: center; }
html:not(.js) .spots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
html:not(.js) .sats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
html:not(.js) .node-room, html:not(.js) .field-hint { display: none; }

/* the panel that opens with a place: its text and the two ways in */
.field-panel {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 1.1rem;
  align-content: start;
  --mark: var(--muted);
  --arm: 18px;
  padding: 1.5rem 1.6rem 1.7rem;
  background:
    linear-gradient(var(--mark), var(--mark)) top left / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top left / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / 1px var(--arm) no-repeat,
    rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}
.field-panel.is-in { opacity: 1; transform: none; }
@media (min-width: 1100px) {
  .field-panel { right: max(40px, env(safe-area-inset-right, 0px)); top: 50%; width: min(21rem, calc(100vw - 2 * var(--rail))); translate: 0 -50%; }
}
@media (max-width: 1099px) {
  .field-panel { left: 0; right: 0; bottom: 0; max-height: 46%; overflow: auto; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); --mark: transparent; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .field-panel { padding-left: var(--rail); padding-right: 40px; max-height: 42%; }
  .panel-body { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: start; }
  .panel-side { display: grid; gap: 0.7rem; justify-items: end; text-align: right; padding-top: 0.2rem; }
  .panel-side .panel-actions { justify-content: flex-end; }
}
.panel-back {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.panel-back:hover { color: var(--fg); }
.panel-body { display: grid; gap: 0.9rem; outline: none; }
.panel-main, .panel-side { display: grid; gap: 0.8rem; }
.panel-title { font-weight: 300; font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; }
.panel-text { color: var(--text); font-size: 0.95rem; line-height: 1.5; text-wrap: pretty; }
.panel-where { color: var(--muted); font-size: 0.88rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.panel-actions .btn { min-height: 44px; padding: 0.65rem 1.1rem; }
.panel-note { font-size: 0.82rem; color: var(--muted); }
.panel-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin-top: 0.2rem; }
.panel-list a .ico { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.panel-list a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); text-decoration: none; padding-left: 0.45rem; border-left: 1px solid rgba(255, 255, 255, 0.35); }
.panel-list a:hover { color: var(--fg); border-color: var(--fg); }

/* the line of help at the foot, and the two small links */
.field-hint, .field-links {
  position: absolute;
  z-index: 2;
  bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 0.7rem 1.4rem;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.field-hint { left: max(var(--rail), env(safe-area-inset-left, 0px)); transition: opacity 0.6s; }
.field-hint .hint-sep { color: var(--faint); }
.field.is-focused .field-hint, .field.is-touched .hint-drag, .field.is-touched .hint-sep { opacity: 0; }
.field-links { right: calc(max(16px, env(safe-area-inset-right, 0px)) + 7.5rem); }
@media (min-width: 760px) { .field-links { right: calc(max(40px, env(safe-area-inset-right, 0px)) + 7.5rem); } }
/* the sound switch: off until someone asks */
.field-sound {
  position: absolute;
  z-index: 2;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.1rem;
  border: 0;
  background: none;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s;
}
@media (min-width: 760px) { .field-sound { right: max(40px, env(safe-area-inset-right, 0px)); } }
.field-sound:hover, .field-sound.is-on { color: var(--fg); }
.field-sound b { font-weight: 500; color: var(--fg); }
.sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 10px; }
.sound-bars i { flex: 1; height: 30%; background: currentColor; transform-origin: bottom; }
.sound-bars i:nth-child(2) { height: 60%; }
.sound-bars i:nth-child(3) { height: 100%; }
.sound-bars i:nth-child(4) { height: 45%; }
@media (prefers-reduced-motion: no-preference) {
  .field-sound.is-on .sound-bars i { animation: bars 0.9s ease-in-out infinite alternate; }
  .field-sound.is-on .sound-bars i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.2s; }
  .field-sound.is-on .sound-bars i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.4s; }
  .field-sound.is-on .sound-bars i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.1s; }
}
@keyframes bars { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
.field.is-focused .field-sound { opacity: 1; }
.field-links a { display: inline-flex; align-items: baseline; gap: 0.5rem; color: var(--fg); text-decoration: none; pointer-events: auto; }
.field-links a:hover { text-decoration: underline; text-underline-offset: 0.45em; }
.field.is-focused .field-links { opacity: 0; pointer-events: none; }
@media (max-width: 759px) {
  .field-hint { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); font-size: 0.56rem; }
  .field-links { display: none; }
  .field-sound { font-size: 0.56rem; bottom: calc(2.6rem + env(safe-area-inset-bottom, 0px)); }
  .field.is-focused .field-sound { display: none; }
  .node-name { font-size: 1.5rem; }
  .node-role, .node-go { font-size: 0.58rem; }
  .sat-link { font-size: 0.64rem; letter-spacing: 0.12em; max-width: 7rem; padding-bottom: 0.5rem; }
  .sat-link .ico { width: 1.15rem; height: 1.15rem; margin-bottom: 0.25rem; }
  .is-focused .node-plate--centre { opacity: 0.1; }
  .spot--centre .core-name { font-size: 1.7rem; }
}


/* the Production page's pool: the rooms */
.field--rooms .spot--centre .core-name--small { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: 0.06em; margin-right: -0.06em; font-weight: 300; }
.core-kicker { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.node-status { font-size: 0.52rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); }

/* ---------- The studio: six sound-room doors along a curved wall ---------- */
/* The doors are drawn, not photographed: a charcoal slab in a jamb, a small window
   with the room's glow behind it, a brushed nameplate, a padded panel carrying the
   room's symbol, a pull handle, a kick plate, and the lamp above the frame. */
.studio { --rx: 0; --ry: 0; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); overflow-x: clip; }
.studio-room { position: relative; max-width: 980px; margin-inline: auto; padding-top: 1.25rem; }
/* the wall the doors are set in, lit from above, and the floor they stand on */
.studio-room::before {
  content: "";
  position: absolute;
  inset: 0 -10% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.stations { position: relative; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.station { position: relative; min-width: 0; }
.station-link { position: relative; display: grid; gap: 0.9rem; color: var(--fg); text-decoration: none; transition: transform 0.5s var(--ease); }

.door-frame {
  --jamb: 7px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 10 / 18;
  padding: var(--jamb);
  background: linear-gradient(180deg, #2c2c2e, #1c1c1e 40%, #151517);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    0 34px 40px -22px rgba(0, 0, 0, 0.9);
}
/* the floor shadow at the foot of the door */
.door-frame::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -18px;
  height: 18px;
  background: radial-gradient(ellipse at 50% 0, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}
.door-lamp {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 32px;
  height: 11px;
  translate: -50% 0;
  background: linear-gradient(180deg, #262628, #111113);
  border: 1px solid #38383a;
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
}
.door-lamp::after {
  content: "";
  position: absolute;
  inset: 2px 4px;
  background: radial-gradient(ellipse at 50% 40%, #3a3436, #141214 70%);
  border-radius: 1px;
  transition: background 0.4s;
}
.door-slab {
  position: absolute;
  inset: var(--jamb);
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #2a2a2c 0%, #1e1e20 55%, #171719 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.07),
    inset -1px -1px 0 rgba(0, 0, 0, 0.7),
    inset 0 0 40px rgba(0, 0, 0, 0.45);
}
/* the window: dark glass, the room's light behind it, a reflection across it */
.door-window {
  position: absolute;
  top: 7%;
  left: 36%;
  width: 28%;
  height: 19%;
  border: 2px solid #3d3d40;
  border-radius: 2px;
  background:
    linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.09) 44%, rgba(255, 255, 255, 0.02) 52%, transparent 60%),
    radial-gradient(ellipse at 50% 70%, rgba(255, 244, 230, 0.16), rgba(255, 244, 230, 0.03) 55%, rgba(0, 0, 0, 0) 80%),
    #0b0b0c;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.5s, background-color 0.5s;
}
.door-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 65%, rgba(255, 244, 230, 0.32), rgba(255, 244, 230, 0) 65%);
  opacity: 0;
  transition: opacity 0.5s;
}
.station-link:hover .door-window::after { opacity: 1; }
.station-link:hover .door-window { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 244, 230, 0.12); }
.station-link:hover .door-lamp::after { background: radial-gradient(ellipse at 50% 40%, #6b6467, #1a181a 75%); }
/* the nameplate: brushed steel, the words cut in */
.door-plate {
  position: absolute;
  top: 26.5%;
  left: 14%;
  width: 72%;
  display: grid;
  gap: 2px;
  padding: 5px 6px 6px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #9a9a9c, #626264 48%, #7e7e80 52%, #8d8d8f);
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: #1a1a1b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}
.door-plate-no { font-weight: 500; font-size: 0.48rem; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.75; }
.door-plate-name { font-weight: 600; font-size: 0.56rem; line-height: 1.25; letter-spacing: 0.16em; text-transform: uppercase; text-wrap: balance; }
/* the padded panel, quilted, with the room's symbol set into it */
.door-pad {
  position: absolute;
  top: 47%;
  left: 12%;
  width: 76%;
  height: 31%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.11) 0 1.2px, transparent 2px) 0 0 / 22px 22px,
    linear-gradient(135deg, rgba(255, 255, 255, 0.045) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.045) 50%, rgba(255, 255, 255, 0.045) 75%, transparent 75%) 0 0 / 22px 22px,
    linear-gradient(45deg, rgba(0, 0, 0, 0.3) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.3) 75%, transparent 75%) 0 0 / 22px 22px,
    #202022;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 6px 14px rgba(0, 0, 0, 0.5);
}
/* the pictogram sign: a black plate with a steel rim, the symbol in white */
.door-pad .ico {
  box-sizing: content-box;
  width: 36%;
  height: auto;
  aspect-ratio: 1;
  padding: 9%;
  background: linear-gradient(180deg, #121214, #09090a);
  border: 1px solid #5a5a5c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  stroke-width: 1.6;
  transition: color 0.4s, box-shadow 0.4s;
}
.station-link:hover .door-pad .ico { color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 244, 230, 0.12); }
/* the handle: a vertical pull with two mounts */
.door-handle {
  position: absolute;
  top: 46%;
  right: 7%;
  width: 5px;
  height: 32%;
  border-radius: 3px;
  background: linear-gradient(90deg, #3b3b3d, #c2c2c4 40%, #8a8a8c 70%, #4a4a4c);
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.door-handle::before, .door-handle::after {
  content: "";
  position: absolute;
  left: -2px;
  width: 9px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4b4b4d, #a9a9ab 50%, #5a5a5c);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.7);
}
.door-handle::before { top: 6%; }
.door-handle::after { bottom: 6%; }
/* a note taped to a door still being built */
.door-sign {
  position: absolute;
  left: 18%;
  bottom: 9%;
  width: 64%;
  padding: 5px 4px 4px;
  background: #e8e4da;
  color: #1f1f1f;
  font-weight: 500;
  font-size: 0.46rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-2.5deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}
.door-sign::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 34%;
  height: 8px;
  translate: -50% 0;
  background: rgba(255, 255, 255, 0.45);
  transform: rotate(3deg);
}
/* the caption under each door */
.station-text { display: grid; gap: 0.4rem; justify-items: start; padding-inline: 2px; }
.station-name { font-weight: 300; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.station-note { font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.status-tag { display: inline-block; padding: 0.25rem 0.5rem; border: 1px solid var(--rule); font-weight: 500; font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.works-none .status-tag { margin-right: 0.6rem; vertical-align: middle; }
.station-go { margin-top: 0.2rem; font-weight: 500; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); }
.station-link:hover .station-go { color: var(--fg); }
.station-link:hover .arrow { transform: translateX(6px); }
@media (min-width: 760px) { .stations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
@media (min-width: 1100px) {
  /* One row of six along a curved wall: each door turned to face the reader, the
     outer ones the most, with its edge showing. The wall turns a little with the pointer. */
  .studio { perspective: 1700px; perspective-origin: 50% 35%; }
  .studio-room {
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
    transition: transform 0.6s var(--ease);
    pointer-events: none;
  }
  .stations { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; transform-style: preserve-3d; pointer-events: none; }
  .station { pointer-events: none; transform-style: preserve-3d; }
  .station-link { pointer-events: auto; transform-style: preserve-3d; }
  .station:nth-child(1) .station-link { --dr: -17; --edge: 1; }
  .station:nth-child(2) .station-link { --dr: -10; --edge: 1; }
  .station:nth-child(3) .station-link { --dr: -3; --edge: 1; }
  .station:nth-child(4) .station-link { --dr: 3; --edge: 0; }
  .station:nth-child(5) .station-link { --dr: 10; --edge: 0; }
  .station:nth-child(6) .station-link { --dr: 17; --edge: 0; }
  .js .station-link { transform: rotateY(calc(var(--dr, 0) * 1deg)); }
  .js .station-link:hover { transform: rotateY(0) translateZ(48px); }
  .door-frame { transform-style: preserve-3d; }
  /* the thickness of the door and its jamb, on the edge turned towards the reader */
  .door-frame::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    left: calc(var(--edge, 1) * 100% - var(--edge, 1) * 16px);
    background: linear-gradient(180deg, #232325, #111113);
    transform-origin: calc(var(--edge, 1) * 100%) 50%;
    transform: rotateY(calc((var(--edge, 1) * 2 - 1) * -90deg));
    backface-visibility: visible;
  }
}

/* ---------- Inner page heads ---------- */
.page-head { padding-top: clamp(2.5rem, 1.5rem + 5vw, 7rem); }
.page-head .wrap { display: grid; gap: 1.3rem; justify-items: start; }
.page-head .actions { margin-top: 0.6rem; }
.proof { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.9rem; margin-top: 0.4rem; }
.proof .text-link, .aside .text-link { text-decoration-color: var(--muted); text-underline-offset: 0.3em; }

/* Lessons section nav: back to the hub, and across to each location. */
.subnav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2.25rem; margin-block: -0.5rem; }
.subnav-home {
  padding-block: 0.5rem;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
  transition: color 0.2s;
}
.subnav-home:hover, .subnav-home[aria-current] { color: var(--fg); }
.subnav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.subnav ul a {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: 1.05rem;
  color: var(--muted);
  text-decoration: none;
  text-underline-offset: 0.4em;
  transition: color 0.2s;
}
.subnav ul a:hover { color: var(--fg); }
.subnav ul a[aria-current] { color: var(--fg); text-decoration: underline; }
/* Hairlines that close page heads and separate the main sections. */
.rule { height: 1px; background: var(--rule); }
.rule--head {
  justify-self: stretch;
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.rule-divider { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }

/* The track lane, drawn by script beside the content column. */
.recorder {
  position: fixed;
  top: 0;
  left: calc(env(safe-area-inset-left, 0px) + max(0px, (100vw - 1320px) / 2) + var(--st-x));
  z-index: 30;
  width: var(--st-w);
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
}
@media print { .recorder { display: none; } }

/* Lesson facts, strung on one line. */
.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0;
  margin-top: 0.5rem;
  font-weight: 300;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
}
.facts li:not(:last-child)::after { content: "/"; margin-inline: 0.85rem; color: var(--faint); }
.facts strong { font-weight: 500; }

/* ---------- Split layout ---------- */
.split { display: grid; gap: clamp(2.75rem, 1rem + 4vw, 6rem); }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}
.aside { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.aside > p:not(.label) { color: var(--muted); }
.aside > .label:not(:first-child) { margin-top: 1.5rem; }
@media (min-width: 960px) { .aside { padding-left: 2.75rem; border-left: 1px solid var(--rule); } }

/* ---------- Proof: the Google rating ---------- */
.proof-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 2.2rem; }
.rating { display: inline-flex; align-items: baseline; gap: 0.75rem; text-decoration: none; color: var(--muted); transition: color 0.2s; }
.rating:hover, .rating:focus-visible { color: var(--fg); }
.rating-stars { font-size: 0.82rem; letter-spacing: 0.18em; color: var(--fg); }
.rating-text { font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; }
.rating-count { margin-left: 0.9em; color: var(--faint); }
.rating-count::before { content: "\00b7"; margin-right: 0.9em; }

/* ---------- Standing: credits, training, teaching ---------- */
.creds { margin: 0; display: grid; gap: 1.5rem clamp(2rem, 1rem + 3vw, 4rem); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1.6rem 0; }
@media (min-width: 760px) { .creds { grid-template-columns: 1.6fr 1fr 1fr; } }
.cred { display: grid; gap: 0.5rem; min-width: 0; }
.cred dt { margin: 0; font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.cred dd { margin: 0; font-weight: 300; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.45; color: var(--fg); text-wrap: pretty; }

/* ---------- The studio: what it is equipped with ---------- */
@media (min-width: 960px) { .split--kit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kit-list { margin: 0; border-top: 1px solid var(--rule); align-self: start; }
.kit-row { display: grid; grid-template-columns: minmax(7.5rem, 0.6fr) minmax(0, 1.4fr); gap: 1rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.kit-row dt { margin: 0; font-weight: 500; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); padding-top: 0.35em; }
.kit-row dd { margin: 0; font-weight: 300; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.4; color: var(--fg); }

/* ---------- How it works: the numbered steps (styled with the process steps below) ---------- */
@media (min-width: 760px) { .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps--3 p { max-width: 36ch; }

/* ---------- Questions (the accordion itself is .faq, further down) ---------- */
@media (min-width: 960px) { .split--faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.split--faq .section-head { margin-bottom: 0; }

/* ---------- Lessons hub ---------- */
.places { border-top: 1px solid var(--rule); }
.place {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name name" "info arrow";
  gap: 0.9rem 1.5rem;
  align-items: end;
  padding-block: clamp(1.75rem, 1rem + 2.2vw, 3rem);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
@media (min-width: 860px) {
  .place { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; grid-template-areas: "name info arrow"; }
}
.place-name {
  grid-area: name;
  font-weight: 300;
  font-size: clamp(2.9rem, 1.2rem + 6.8vw, 7.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  transition: letter-spacing 0.7s var(--ease);
}
.place:hover .place-name { letter-spacing: 0; }
.place-info { grid-area: info; display: grid; gap: 0.2rem; min-width: 0; color: var(--muted); }
.place-info strong { font-weight: 400; font-size: 1.15rem; color: var(--fg); }
.place .arrow { grid-area: arrow; font-size: 1.5rem; }

.method { display: grid; gap: 2.5rem clamp(2rem, 1rem + 4vw, 5rem); }
@media (min-width: 760px) { .method { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.method > div { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.method p { max-width: 52ch; color: var(--muted); }

.setlist { list-style: none; border-top: 1px solid var(--rule); }
.setlist li { display: grid; gap: 0.3rem 2rem; padding-block: 1.4rem; border-bottom: 1px solid var(--rule); min-width: 0; }
@media (min-width: 760px) {
  .setlist li { grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr); align-items: baseline; }
}
.set-name { font-weight: 300; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.1; letter-spacing: -0.01em; }
.set-note { max-width: 52ch; color: var(--muted); }
/* With a mark: the icon takes a narrow first column, the note sits under the name on a phone */
.setlist li.set-row { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.set-row .ico { width: 2.2rem; height: 2.2rem; stroke-width: 1.1; margin-top: 0.45rem; grid-row: 1 / span 2; color: var(--fg); transition: transform 0.5s var(--ease); }
.set-row:hover .ico { transform: translateY(-2px); }
.set-row .set-note { grid-column: 2; }
@media (min-width: 760px) {
  .setlist li.set-row { grid-template-columns: 2.4rem minmax(10rem, 20rem) minmax(0, 1fr); column-gap: 1rem 2rem; align-items: baseline; }
  .set-row .ico { grid-row: auto; align-self: center; margin-top: 0; }
  .set-row .set-note { grid-column: 3; }
}

.faq { max-width: 56rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.2rem;
  list-style: none;
  cursor: pointer;
  font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.35s var(--ease), color 0.2s;
}
.faq summary:hover::after { color: var(--fg); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 60ch; padding-bottom: 1.4rem; color: var(--muted); }

/* ---------- Forms: lines, not boxes ---------- */
.book-head { display: grid; gap: 0.9rem; max-width: 44rem; margin-bottom: 2.75rem; }
.book-head p { color: var(--muted); }
.form { display: grid; gap: 1.9rem; max-width: 780px; min-width: 0; }
.field-row { display: grid; gap: 1.9rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 0.3rem; min-width: 0; }
.field > label, .choice legend {
  font-weight: 500;
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
.opt { font-weight: 400; letter-spacing: 0.06em; text-transform: none; }
.form input:not([type="radio"]), .form select, .form textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0;
  background: transparent;
  color: var(--fg);
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s;
}
.form textarea { min-height: 120px; resize: vertical; }
.form select {
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 10px) 52%, calc(100% - 5px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.form select option { background: var(--bg); color: var(--fg); }
.form input:not([type="radio"]):focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--fg); }
.form ::placeholder { color: var(--faint); opacity: 1; }
.choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice legend { margin-bottom: 0.7rem; padding: 0; }
.options { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; }
.option { position: relative; display: inline-flex; cursor: pointer; }
.option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.option span {
  padding-bottom: 0.3rem;
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--faint);
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.option:hover span { color: var(--muted); }
.option input:checked + span { color: var(--fg); border-bottom-color: var(--fg); }
.option input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 4px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 0.5rem; }
.form-note { max-width: 36ch; font-size: 0.875rem; color: var(--faint); }
.form-status::before { content: "\2014"; margin-right: 0.75em; color: var(--faint); }
.hp { display: none; }

/* ---------- Booking: pick a time and pay, or send an enquiry ---------- */
.booking { max-width: 780px; min-width: 0; }
.booking-tabs { display: flex; flex-wrap: wrap; gap: 0 2rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--rule); }
.booking-tabs [role="tab"] {
  margin-bottom: -1px;
  padding: 0.95rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s;
}
.booking-tabs [role="tab"]:hover { color: var(--fg); }
.booking-tabs [role="tab"][aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
@media (max-width: 400px) {
  .booking-tabs { gap: 0 1.25rem; }
  .booking-tabs [role="tab"] { letter-spacing: 0.16em; }
}

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cal-range { font-weight: 300; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-variant-numeric: tabular-nums; }
.cal-nav { display: flex; margin-right: -0.75rem; }
.cal-step {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--fg);
}
.cal-step[disabled] { color: var(--rule); cursor: default; }
.cal-step:not([disabled]):hover .arrow { transform: translateX(4px); }
.cal-step:not([disabled]):hover .arrow--back { transform: translateX(-4px); }
/* Days run across, hours run down; taken time is filled, like regions on a track. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-day { display: grid; justify-items: center; gap: 0.15rem; padding-bottom: 0.7rem; }
.cal-dow { font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.cal-date { font-weight: 300; font-size: 1.2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cal-cell, .cal-slot { display: block; height: 2.15rem; }
.cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--block);
  box-shadow: inset 0 1px 0 var(--rule);
  font-weight: 500;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  -webkit-user-select: none;
  user-select: none;
}
.cal-cell--past { background: transparent; box-shadow: inset 0 1px 0 var(--block); }
.cal-slot {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 1px solid var(--muted);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.cal-slot:hover, .cal-slot[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
@media (max-width: 480px) {
  .cal-grid { gap: 3px; }
  .cal-slot { font-size: 0.74rem; }
  .cal-cell { font-size: 0.48rem; letter-spacing: 0.05em; }
  .cal-date { font-size: 1.05rem; }
}
.cal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.1rem; font-size: 0.85rem; color: var(--faint); }
.cal-legend li { display: inline-flex; align-items: center; gap: 0.6rem; }
.cal-key { width: 22px; height: 12px; background: var(--block); box-shadow: inset 0 1px 0 var(--rule); }
.cal-key--open { background: transparent; border: 1px solid var(--muted); box-shadow: none; }
/* The chosen hour, then the few details to go with it. */
.cal-pick {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.cal-summary { font-weight: 300; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); }
.cal-form { display: grid; gap: 1.25rem; }
.cal-form textarea::placeholder { color: var(--faint); }
.cal-form .form-foot { margin-top: 0.25rem; }
.cal-first { margin-top: 2rem; color: var(--muted); }
.cal-first .text-link { padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
[data-cal-status] { color: var(--muted); }
[data-cal-status][hidden] { display: none; }

/* Booking bar on phones. */
.book-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.6rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--bg);
  color: var(--fg);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 40px var(--shadow);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease);
}
.book-bar.is-visible { transform: none; }
.book-bar p { font-size: 0.9rem; white-space: nowrap; }
.book-bar .btn { min-height: 44px; padding: 0.55rem 0.95rem; }
.book-bar-actions { display: flex; align-items: center; gap: 0.5rem; }
.book-bar-wa { padding: 0.55rem 0.7rem; gap: 0.45rem; }
.book-bar-wa .ico { width: 1.25rem; height: 1.25rem; color: var(--whatsapp); }
.book-bar-wa-label { font-size: 0.58rem; letter-spacing: 0.1em; }
.ask-wa .ico { color: var(--whatsapp); }
@media (max-width: 374px) { .book-bar-wa-label { display: none; } .book-bar p { font-size: 0.8rem; } }
@media (min-width: 960px) { .book-bar { display: none; } }

/* ---------- Production ---------- */
.work-title { font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.1; letter-spacing: -0.01em; }
.work-one .strip-link { display: grid; gap: 0.55rem; max-width: 56rem; }
.work-one .strip-frame { aspect-ratio: 16 / 9; }
.works-none { max-width: 52ch; }
.rooms-list .ico { flex: none; width: 22px; height: 22px; align-self: center; color: var(--muted); }
.rooms-list a:hover .ico { color: var(--fg); }
.aside-list { list-style: none; display: grid; gap: 0.4rem; }
.aside-list li { padding-left: 1.1rem; text-indent: -1.1rem; }
.aside-list li::before { content: "/"; margin-right: 0.55rem; color: var(--faint); }
.work-type { font-weight: 500; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); }
.work-role { font-size: 0.9rem; color: var(--text); }
.work-note { max-width: 56ch; color: var(--muted); }
/* A card that plays an audio file: the button is the card, and a line along the
   bottom of its frame fills as the piece plays. */
button.strip-link { width: 100%; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.strip-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 2px; }
.strip-bar-fill { display: block; width: 0; height: 100%; background: var(--fg); transition: width 0.25s linear; }
.strip-card.is-playing .strip-play .arrow--play::before { content: "\2016"; }
.work-watch {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.5rem;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.service {
  display: grid;
  gap: 1.1rem clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 2.5rem;
}
@media (min-width: 960px) { .service { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.service-head { display: grid; gap: 0.8rem; align-content: start; min-width: 0; }
.service-body { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.service-body p { max-width: 58ch; color: var(--muted); }
.inline-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem 0; margin-top: 0.25rem; }
.inline-list li { font-size: 0.975rem; }
.inline-list li:not(:last-child)::after { content: "/"; margin-inline: 0.8rem; color: var(--faint); }

.steps { list-style: none; counter-reset: step; display: grid; gap: 2.25rem 2.5rem; }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; display: grid; gap: 0.6rem; align-content: start; min-width: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.steps li::before {
  content: counter(step);
  font-weight: 200;
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.steps p { color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 2.25rem; border-top: 1px solid var(--rule); }
/* the room behind the page is blurred and dimmed here, so the small links read cleanly */
.site-footer { position: relative; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.footer-grid { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); } }
.footer-brand, .footer-col { display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
.footer-brand .brand { font-size: 1.05rem; }
.footer-col ul { list-style: none; display: grid; gap: 0.55rem; }
.footer-col a, .footer-mail { font-size: 0.95rem; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-mail-line { margin: 0; font-size: 0.95rem; color: var(--muted); }
.footer-mail-line .footer-mail { color: var(--text); }
.footer-col a { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-col a .ico { width: 18px; height: 18px; color: var(--faint); transition: color 0.2s; }
.footer-col a:hover .ico { color: var(--fg); }
/* phones: two columns, production beside lessons, site beside elsewhere */
@media (max-width: 759px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col a { font-size: 0.86rem; gap: 0.5rem; align-items: flex-start; }
  .footer-col a .ico { width: 16px; height: 16px; margin-top: 0.1rem; }
}
.footer-col a:hover, .footer-mail:hover { color: var(--fg); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--faint);
}
.footer-base p:nth-child(2) { margin-left: auto; }
.preview-stamp { flex-basis: 100%; margin-left: 0; font-size: 0.72rem; text-align: right; color: var(--muted); }
/* The last frame of every page: the name, edge to edge, like the end of the credits. */
.footer-mark {
  margin: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0 0;
  overflow: hidden;
  font-weight: 500;
  font-size: 17.6vw;
  line-height: 0.8;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  white-space: nowrap;
  color: var(--fg);
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- The room ---------- */
.world { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.world.is-on { opacity: 1; }
.field-on .world { opacity: 0; }
/* Each block of a page arrives from the depth of the room and settles into place. */
.js .dolly { transform: perspective(1400px) translateZ(calc(var(--dz, 0) * -260px)); }

/* ---------- Motion: the shutter, depth, reveals ---------- */
/* Every page opens like a projector shutter: a line of light, then the two halves
   part. Leaving a page closes it again. This is pure CSS on the way in, so a page
   can never stay hidden. */
.shutter { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .shutter { position: fixed; inset: 0; z-index: 95; display: block; pointer-events: none; }
  .shutter::before, .shutter::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 50.5%;
    background: #000;
    transition: transform 0.34s cubic-bezier(0.7, 0, 0.3, 1);
  }
  .shutter::before { top: 0; transform: translateY(-101%); animation: shutter-top 0.9s 0.18s cubic-bezier(0.7, 0, 0.2, 1) backwards; }
  .shutter::after { bottom: 0; transform: translateY(101%); animation: shutter-bottom 0.9s 0.18s cubic-bezier(0.7, 0, 0.2, 1) backwards; }
  .shutter-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
    height: 1px;
    background: var(--fg);
    opacity: 0;
    animation: shutter-line 0.75s ease-out both;
  }
  .is-leaving .shutter::before, .is-leaving .shutter::after { transform: translateY(0); }
  .js main { transform-origin: 50% 50vh; animation: page-in 1.1s 0.15s var(--ease) both; }
  .js.is-leaving main {
    animation: none;
    transform: perspective(1200px) translateZ(-180px) rotateX(2deg);
    opacity: 0.45;
    transition: transform 0.42s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.42s;
  }
}
@keyframes page-in { from { transform: perspective(1200px) translateZ(-150px); opacity: 0.35; } to { transform: none; opacity: 1; } }
@keyframes shutter-top { from { transform: translateY(0); } }
@keyframes shutter-bottom { from { transform: translateY(0); } }
@keyframes shutter-line {
  0% { opacity: 1; transform: scaleX(0); }
  35% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

/* Titles rise out of a matte as they come into view (the script adds .reveal). */
.reveal {
  opacity: 0;
  transform: perspective(900px) rotateX(46deg) translateY(0.3em);
  transform-origin: 50% 100%;
  transition: opacity 0.9s var(--ease), transform 1.2s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.footer-mark.reveal { transform: perspective(1400px) rotateX(82deg); transition-duration: 1.2s, 1.6s; }
.footer-mark.reveal.is-in { transform: none; }

/* Photos sit a little larger than their frames and drift as you scroll. */
.js :is(.still, .shot, .scene-media) img {
  position: absolute;
  left: 0;
  top: -9%;
  width: 100%;
  height: 118%;
  translate: calc(var(--mx, 0) * -16px) calc(var(--dy, 0) * 1% + var(--my, 0) * -10px);
  will-change: translate;
}
.js .tilt {
  transform: perspective(1200px) rotateX(calc((var(--sx, 0) + var(--hx, 0)) * 1deg)) rotateY(calc(var(--hy, 0) * 1deg));
  transition: transform 0.35s ease-out;
}

/* The statement lights up as you read it. */
.statement-text .w { transition: opacity 0.45s ease; }
.js .statement-text .w { opacity: 0.5; }
.js .statement-text .w.on { opacity: 1; }

/* Desktop: the pointer itself is a viewfinder (drawn by the system, so it can't lag),
   and a larger frame locks onto links and buttons. */
@media (pointer: fine) {
  .js { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 11V3h8M21 3h8v8M29 21v8h-8M11 29H3v-8' fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='3.5' stroke-linecap='square'/%3E%3Cpath d='M3 11V3h8M21 3h8v8M29 21v8h-8M11 29H3v-8' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") 16 16, auto; }
  .js :is(a, button, summary, label.option, .copy, .cal-slot, .cal-step, [role="tab"]) { cursor: inherit; }
  .js :is(input, textarea, select) { cursor: auto; }
  .js.is-locked { cursor: none; }
}
.finder { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .finder {
    --mark: var(--fg);
    --arm: 9px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 96;
    display: block;
    width: 34px;
    height: 34px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    background:
      linear-gradient(var(--mark), var(--mark)) top left / var(--arm) 1px no-repeat,
      linear-gradient(var(--mark), var(--mark)) top left / 1px var(--arm) no-repeat,
      linear-gradient(var(--mark), var(--mark)) top right / var(--arm) 1px no-repeat,
      linear-gradient(var(--mark), var(--mark)) top right / 1px var(--arm) no-repeat,
      linear-gradient(var(--mark), var(--mark)) bottom left / var(--arm) 1px no-repeat,
      linear-gradient(var(--mark), var(--mark)) bottom left / 1px var(--arm) no-repeat,
      linear-gradient(var(--mark), var(--mark)) bottom right / var(--arm) 1px no-repeat,
      linear-gradient(var(--mark), var(--mark)) bottom right / 1px var(--arm) no-repeat;
    mix-blend-mode: difference;
  }
  .js .finder.is-on { opacity: 1; }
  .js .finder.is-locked { --arm: 14px; }
  .finder-label {
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: 0.6rem;
    translate: -50% 0;
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--fg);
    white-space: nowrap;
  }
}

/* Smooth scrolling (Lenis) on desktop. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Reviews (real Google reviews, added in build.py) ---------- */
.reviews { list-style: none; display: grid; gap: 2.5rem 3rem; }
@media (min-width: 960px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reviews li { display: grid; gap: 1rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.review p { font-weight: 300; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.45; text-wrap: pretty; }
.review p::before { content: "\201C"; }
.review p::after { content: "\201D"; }
.review-by { font-size: 0.875rem; color: var(--faint); }
.review-by span { color: var(--fg); font-weight: 500; }

/* On phones the page doesn't zoom in or out in depth when you follow a link (it read as
   the page popping up); it fades instead. */
@media (max-width: 759px) and (prefers-reduced-motion: no-preference) {
  .js main { animation: page-fade 0.5s ease both; }
  .js.is-leaving main { transform: none; opacity: 0.6; transition: opacity 0.3s; }
}
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }

/* Below a form: the address, for anyone who would rather write. */
.form-alt { margin-top: 2rem; color: var(--muted); }

/* A portrait behind a page title: on wide screens the picture sits to the right, so the
   face is clear of the title, and fades out towards the words. */
@media (min-width: 960px) {
  .js .scene-media--portrait img, .scene-media--portrait img {
    position: absolute; top: 0; left: auto; right: 0; width: 62%; height: 100%;
    object-fit: cover; object-position: 30% 30%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
    mask-image: linear-gradient(to right, transparent, #000 35%);
  }
}

/* The quick ways to ask, beside the form, and what happens next. */
.ask { margin-top: 1.4rem; display: grid; gap: 0.7rem; }
.ask-lead { font-size: 0.875rem; color: var(--muted); }
.ask .btn .ico { width: 1.1rem; height: 1.1rem; margin-right: 0.55rem; }
.next { list-style: none; counter-reset: next; margin: 1.6rem 0 0; display: grid; gap: 0.55rem; max-width: 52ch; }
.next li { counter-increment: next; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; align-items: baseline; color: var(--muted); font-size: 0.95rem; }
.next li::before { content: counter(next); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--fg); }

/* ---------- Tiles: a point each, with a mark, a line, and the rest on request ---------- */
.tiles { list-style: none; display: grid; gap: 0 clamp(2rem, 1rem + 3vw, 4rem); border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles li { border-top: 1px solid var(--rule); min-width: 0; }
.tile { padding: 1.5rem 0 1.4rem; }
.tile summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.3rem 1rem; align-items: start; }
.tile summary::-webkit-details-marker { display: none; }
.tile .ico { grid-row: 1 / span 3; width: 2.2rem; height: 2.2rem; stroke-width: 1.1; color: var(--fg); margin-top: 0.1rem; transition: transform 0.5s var(--ease); }
.tile:hover .ico { transform: translateY(-2px); }
.tile-title { font-weight: 300; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.2; color: var(--fg); }
.tile-line { color: var(--muted); font-size: 0.95rem; text-wrap: pretty; }
.tile-more { margin-top: 0.3rem; font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); transition: color 0.2s; }
.tile-more::after { content: " +"; }
.tile[open] .tile-more::after { content: " \2212"; }
.tile:hover .tile-more { color: var(--fg); }
.tile p { margin: 0.9rem 0 0 3.4rem; max-width: 46ch; color: var(--muted); font-size: 0.95rem; }
@media (prefers-reduced-motion: no-preference) { .tile[open] p { animation: faq-in 0.45s var(--ease) both; } }

/* ---------- Topics: what the lessons cover, as marks and words ---------- */
.topics { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .topics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.topics li { display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 0; border-top: 1px solid var(--rule); font-weight: 300; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.topics .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.2; color: var(--fg); }

/* marks on the steps, the studio list and the quick links */
.steps--3 li { grid-template-columns: 1fr; }
.steps li .ico { width: 1.8rem; height: 1.8rem; stroke-width: 1.1; color: var(--fg); }
.kit-row dt { display: flex; align-items: center; gap: 0.6rem; }
.kit-row dt .ico { width: 1.3rem; height: 1.3rem; stroke-width: 1.2; color: var(--fg); }
.pairs a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; }
.pairs a .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.2; }
.next li { grid-template-columns: 1.6rem 1.4rem 1fr; }
.next li .ico { width: 1.1rem; height: 1.1rem; stroke-width: 1.3; color: var(--fg); align-self: center; }

/* ---------- Reviews: cards to swipe through, this page's own first ---------- */
.quotes-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; max-width: none; }
.quotes-nav { display: flex; margin-right: -0.75rem; }
.quotes-nav[hidden] { display: none; }
@media (max-width: 759px) { .quotes-nav { display: none; } }
.quotes-track {
  --strip-left: calc(max(0px, (100vw - 1320px) / 2) + var(--rail));
  --strip-right: calc(max(0px, (100vw - 1320px) / 2) + 16px);
  list-style: none;
  display: flex;
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
  padding: 0 var(--strip-right) 0 var(--strip-left);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--strip-left);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
@media (min-width: 760px) { .quotes-track { --strip-right: calc(max(0px, (100vw - 1320px) / 2) + 40px); } }
.quotes-track::-webkit-scrollbar { display: none; }
.quote-card {
  flex: 0 0 min(82vw, 22rem);
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: 1.4rem 0 0.4rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) { .quote-card { flex-basis: clamp(17rem, 27vw, 23rem); } }
.quote-head { display: flex; align-items: center; gap: 0.9rem; }
.quote-face { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--rule); background: var(--block); color: var(--fg); font-weight: 400; font-size: 1.05rem; object-fit: cover; }
.quote-stars { font-size: 0.82rem; letter-spacing: 0.18em; color: var(--fg); }
.quote-card .review p { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.5; }
.quotes-all { margin-top: 1.6rem; }

/* ---------- Standing: the names as a ribbon, then training and teaching ---------- */
.creds-section .section-label { margin-bottom: 1.1rem; }
.js .marquee--flat { rotate: none; padding-block: 0.25rem; }
.marquee--flat .marquee-track li { font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem); }
@media (prefers-reduced-motion: reduce) { .marquee--flat .marquee-track { padding-inline: 0; } }
.creds--2 { margin-top: 1.8rem; border-top: 0; padding-top: 0; }
@media (min-width: 760px) { .creds--2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Styles to tap into the message box ---------- */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: -0.4rem 0 1.2rem; }
.chips-lead { font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); margin-right: 0.35rem; }
.chip {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.chip:hover, .chip:focus-visible { color: var(--fg); border-color: var(--fg); }
.chip[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }

/* ---------- Standing as a ribbon under the title ---------- */
.hero-ribbon { justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; margin-top: 0.6rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.ribbon-lead { font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.hero-ribbon .marquee { min-width: 0; }
.marquee--hero .marquee-track li { font-size: 0.68rem; letter-spacing: 0.2em; gap: 1.6rem; padding-right: 1.6rem; color: var(--text); }
.marquee--hero .marquee-track img { height: 1.1rem; filter: brightness(0) invert(1); opacity: 0.9; }
@media (max-width: 759px) { .hero-ribbon { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } }
@media (prefers-reduced-motion: no-preference) { .marquee--hero .marquee-track { animation-duration: 70s; } }
@media (prefers-reduced-motion: reduce) { .marquee--hero .marquee-track { row-gap: 0.6rem; } }

/* ---------- The films page: frames in rows ---------- */
.watch-more { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.watch-more { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.watch-more .btn { gap: 0.75rem; }
.films { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 2rem); margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.films--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.films--tall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.films .reel { width: 100%; }
.films .reel-title { max-width: 22ch; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem); }
.films .reel--short .reel-title { max-width: 14ch; font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem); }
@media (max-width: 759px) { .films--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- A map inside a tile, in the site's dark ---------- */
.tile-map { margin: 1rem 0 0.4rem 3.4rem; max-width: 36rem; aspect-ratio: 16 / 10; border: 1px solid var(--rule); background: var(--block); overflow: hidden; }
.tile-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: invert(0.92) hue-rotate(180deg) saturate(0.55) brightness(0.9) contrast(0.95); }
@media (max-width: 759px) { .tile-map { margin-left: 0; aspect-ratio: 4 / 3; } }

/* ---------- Student videos: placeholders until the clips arrive ---------- */
.films--students { margin-bottom: 0; }
/* One student video so far: it takes a wide frame rather than a third of the row */
.films--students:has(> :only-child) { grid-template-columns: minmax(0, 38rem); }
.reel--placeholder { cursor: default; border: 1px dashed var(--rule); }
.reel--placeholder .reel-cta { color: var(--faint); }

/* ---------- Placeholders on the staging site ---------- */
.btn.is-placeholder { border-style: dashed; color: var(--faint); cursor: default; }
.read-on--film { gap: 0.8rem; }
/* A small film frame, marked at the corners like the reels below, with a guitar in it.
   The corners breathe so it reads as a live thing, like the drop line beside Read more. */
@property --cue-arm { syntax: "<length>"; inherits: false; initial-value: 9px; }
.film-cue {
  --mark: rgba(255, 255, 255, 0.6);
  --cue-arm: 9px;
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 1.9rem;
  background:
    linear-gradient(var(--mark), var(--mark)) top left / var(--cue-arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top left / 1px var(--cue-arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / var(--cue-arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top right / 1px var(--cue-arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / var(--cue-arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom left / 1px var(--cue-arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / var(--cue-arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom right / 1px var(--cue-arm) no-repeat;
  transition: transform 0.4s var(--ease);
}
.film-cue .ico { width: 1.15rem; height: 1.15rem; stroke-width: 1.4; color: var(--fg); }
.read-on--film:hover .film-cue, .read-on--film:focus-visible .film-cue { --mark: var(--fg); transform: scale(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .film-cue { animation: cue-breathe 2.6s var(--ease) infinite; animation-delay: 0.9s; }
  .film-cue .ico { animation: cue-strum 2.6s var(--ease) infinite; animation-delay: 0.9s; transform-origin: 50% 60%; }
}
@keyframes cue-breathe { 0%, 100% { --cue-arm: 9px; } 50% { --cue-arm: 13px; } }
@keyframes cue-strum { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(0deg); } }

/* ---------- Phones and tablets hold still: no drifting photos, no promoted layers ---------- */
@media (pointer: coarse), (max-width: 759px) {
  .js :is(.still, .shot, .scene-media) img { translate: none; will-change: auto; }
  .js .tilt { transform: none; transition: none; }
  .js .dolly { transform: none; }
  .js .marquee { rotate: none; }
}