/* Private full-site preview. The approved study's world is inherited unchanged;
   this file adds the page shell, the section layouts and the local inquiry form.
   Type families, weights and motion stay with that world. */
@import url("../motion-study/style.css");

/* Keep the dark room; lift supporting copy for comfortable sustained reading. */
html[data-study="room"] { --room-muted: #d0c7cf; }

/* ---------- shell ---------- */
.motion-study :is(.site-header, .site-footer) { position: relative; z-index: 1; }

.motion-study .site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2.5rem;
  padding: 1.75rem calc(var(--edge) + 15rem) 1.25rem var(--edge);
}
.motion-study .site-header nav { gap: .25rem 1.5rem; }
.motion-study .site-header nav a[aria-current="page"] {
  color: var(--room-light);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
}

.motion-study .site-footer {
  margin-inline: var(--edge);
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--room-line);
  color: var(--room-muted);
  font-size: .8125rem;
}
.motion-study .site-footer nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0 2rem;
  margin-bottom: 1rem;
}
.motion-study .site-footer nav a { font-size: .8125rem; }
.motion-study .site-footer p { max-width: 52ch; }
.motion-study .footer-top { display: inline-flex; align-items: center; min-height: 44px; }

/* Reading stays legible when Pause holds the canvas and the page keeps scrolling.
   The slab itself — colour, corner, pad, which elements get one — is owned by
   motion-study/style.css and is the same slab on every page. What belongs here is
   only what this site's own layouts need on top of it.

   The footer's ten links are a grid of equal columns: shrunk to its contents it
   would collapse the columns, so that one nav keeps its width and carries the
   slab across the row.

   The inquiry used to be the exception to see-through: every part of it wore the
   solid ground, because a room moving behind a half-typed answer is a distraction.
   It was still a black box round a run of words, which is the thing Miles asked to
   have taken away, so it has gone with the rest. The form's own controls — the
   input boxes, the button, the summary — keep their grounds, because those are
   controls and not sentences. */
.motion-study .site-footer nav { width: auto; }

/* ---------- type and small parts ---------- */
.motion-study h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.motion-study .kicker { color: var(--room-muted); font-size: .875rem; }
.motion-study .copy > * + * { margin-top: 1.5rem; }
.motion-study .copy p { max-width: 34ch; color: var(--room-muted); }
.motion-study .copy :is(h1, h2) + p { margin-top: 1.75rem; }
.motion-study .note { max-width: 46ch; font-size: .875rem; }
.motion-study .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1.75rem;
  background: none;
}
.motion-study .actions .enquire-link { margin-top: 0; }
.motion-study .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--room-light);
}
.motion-study .anchor-mark { display: block; scroll-margin-top: 7rem; }

/* ---------- section layouts ---------- */
/* Event copy stays beside its own proof; native portrait films keep the full frame. */
.motion-study .event-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .7fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 74rem;
  scroll-margin-top: 6rem;
}
.motion-study .event-story > .figure { width: 100%; max-width: 24rem; margin: 0; justify-self: center; }
.motion-study .event-story--photo { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.motion-study .event-story--photo > .figure { max-width: none; }
.motion-study .event-story .copy p { max-width: 42ch; }
.motion-study .event-story .copy h2 { font-size: clamp(2.25rem, 4.5vw, 4.5rem); }
@media (max-width: 43.75rem) {
  .motion-study .event-story, .motion-study .event-story--photo { grid-template-columns: minmax(0, 1fr); }
  .motion-study .event-story > .figure { max-width: 24rem; }
}

.motion-study .scene.l-one { display: block; padding: clamp(5rem, 9vw, 9.5rem) var(--edge); }
.motion-study .scene.l-one > * + * { margin-top: clamp(2.5rem, 4.5vw, 4.5rem); }

.motion-study .scene.l-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem 8%;
  padding: clamp(5rem, 9vw, 9.5rem) var(--edge);
}
.motion-study .scene.l-two--lean { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.motion-study .l-two-reverse .col--lead { order: 2; }
.motion-study .col { min-width: 0; }
.motion-study .col > * + * { margin-top: clamp(2rem, 3vw, 3rem); }

.motion-study .scene.l-close {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 5%;
  padding: clamp(3.5rem, 6vw, 6rem) var(--edge) clamp(5rem, 8vw, 8rem);
  min-height: 34rem;
}
.motion-study .scene.l-close .copy h2 { font-size: clamp(3rem, 5.6vw, 4.8rem); }

/* Empty scene geometry. The engine reads these and owns everything that moves. */
.motion-study .field { position: relative; }
.motion-study .field--tall { height: clamp(16rem, 28vw, 24rem); }
.motion-study .field--mid { height: clamp(12rem, 20vw, 18rem); }
.motion-study .field--low { height: clamp(9rem, 14vw, 13rem); }
.motion-study .field .scene-anchor { inset: .75rem 0; }

/* ---------- hero variants ---------- */
.motion-study .hero-field {
  position: relative;
  height: calc(clamp(21rem, 56svh, 32rem) + 2.5rem);
}
.motion-study .hero-field > .scene-anchor { inset: 0 0 2.5rem; }
.motion-study :is(.hero--column, .hero--profile, .hero--quiet) .hero-copy { width: 100%; max-width: 32rem; }
.motion-study :is(.hero--column, .hero--profile, .hero--quiet) h1 { font-size: clamp(3.1rem, 5.8vw, 4.8rem); }

.motion-study .scene.hero--column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 4%;
  min-height: max(28rem, calc(100svh - 11rem));
  padding: 1rem var(--edge) 3.5rem;
}
.motion-study .scene.hero--quiet {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 5%;
  min-height: max(26rem, calc(100svh - 12rem));
  padding: 1.5rem var(--edge) 4rem;
}
.motion-study .scene.hero--profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  align-items: start;
  gap: 6%;
  padding: 1.5rem var(--edge) 4rem;
}
.motion-study :is(.hero--column, .hero--quiet) > .hero-copy { grid-column: 1; }
.motion-study :is(.hero--column, .hero--quiet) > .hero-field { grid-column: 2; }
.motion-study .hero--quiet .hero-field { height: calc(clamp(18rem, 44svh, 26rem) + 2.5rem); }
.motion-study .hero--profile > :is(.hero-copy, .hero-field) { grid-column: 1; }
.motion-study .hero--profile > .figure { grid-column: 2; grid-row: 1 / span 2; }
.motion-study .hero--profile .hero-field {
  height: calc(clamp(14rem, 30svh, 19rem) + 2.5rem);
  margin-top: 2.75rem;
}

/* ---------- photographs and films ---------- */
.motion-study .figure { min-width: 0; }
.motion-study .figure picture { display: block; }
.motion-study .figure--wide { width: 100%; }
.motion-study .figure--full { width: min(100%, 74rem); margin-inline: auto; }
.motion-study .figure--right { width: min(88%, 68rem); margin-left: auto; }
.motion-study .figure--tall { width: 100%; max-width: 30rem; }
.motion-study .figure--small { width: 100%; max-width: 19rem; }
.motion-study .figure figcaption { display: grid; gap: .4rem; }
.motion-study .source { color: var(--room-muted); font-size: .8125rem; max-width: 46ch; }
.motion-study video { display: block; width: 100%; height: auto; background: #000; }
.motion-study .sound audio { display: block; width: 100%; min-height: 54px; }
.motion-study .sound .note { margin-top: 1rem; }

/* Wedding evidence: one event in three photographs, then two native films.
   The portrait uses a display crop; the production image keeps its full frame. */
.motion-study .media-group { width: min(100%, 74rem); margin-inline: auto; }
.motion-study .media-grid { display: grid; gap: 1.5rem; min-width: 0; }
.motion-study .media-grid > .figure { width: 100%; max-width: none; margin: 0; }
.motion-study .media-grid--photos { grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); }
.motion-study .media-grid--photos > .figure:first-child { grid-row: span 2; position: relative; min-height: 0; }
.motion-study .media-grid--photos > .figure:first-child img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
}
.motion-study .media-group-caption { margin-top: 1rem; color: var(--room-muted); font-size: .875rem; }
.motion-study .media-grid--films { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 43.75rem) {
  .motion-study .media-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .motion-study .media-grid--photos > .figure:first-child { grid-row: auto; aspect-ratio: 1; }
}

/* ---------- lists, links, questions, entries ---------- */
.motion-study .notes { margin: 0; }
.motion-study .notes > div {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: .35rem 2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--room-line);
}
.motion-study .notes > div:last-child { border-bottom: 1px solid var(--room-line); }
.motion-study .notes dt { font-weight: 500; }
.motion-study .notes dd { margin: 0; color: var(--room-muted); }
.motion-study h3 + .notes { margin-top: 1.5rem; }

.motion-study .links { margin: 0; padding: 0; list-style: none; }
.motion-study .links li { border-top: 1px solid var(--room-line); }
.motion-study .links li:last-child { border-bottom: 1px solid var(--room-line); }
.motion-study .links a {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: .35rem 2rem;
  padding: 1.25rem 0;
  text-decoration: none;
}
.motion-study .links a:hover .link-label { text-decoration: underline; text-decoration-thickness: 2px; }
.motion-study .link-label { font-weight: 500; }
.motion-study .link-note { color: var(--room-muted); }
.motion-study h3 + .links { margin-top: 1.5rem; }

/* ---------- find your night: one room, four ways in ----------
   Existing photographs keep their source and phone derivatives. The solid copy
   ground makes the choice and inquiry readable over the moving record. */
.motion-study .night-preview { isolation: isolate; }
.motion-study .night-preview > h2 { max-width: none; }
.motion-study .night-intro { margin-top: 1rem; color: var(--room-muted); }
.motion-study .night-tabs {
  display: grid;
  /* One row of equal tabs however many kinds of night there are (four or five), so
     none is left alone on a second row (10-31). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 2rem;
  border-block: 1px solid var(--room-line);
  background: var(--room-ground);
}
.motion-study .night-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  padding: .875rem 1rem;
  color: var(--room-muted);
  text-align: center;
  text-decoration: none;
  font-size: clamp(.9375rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
}
.motion-study .night-tab:hover { color: var(--room-type); background: #211a24; }
.motion-study .night-tab[aria-selected="true"] { color: var(--room-ground); background: var(--room-light); }
.motion-study .night-tab:focus-visible { outline: 2px solid var(--room-type); outline-offset: -6px; }
.motion-study .night-tab[aria-selected="true"]:focus-visible { outline-color: var(--room-ground); }
.motion-study .night-panels { background: var(--room-ground); }
.motion-study .night-panel {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: stretch;
  scroll-margin-top: 6rem;
}
.motion-study .night-panel[hidden] { display: none; }
.motion-study .night-panel + .night-panel { margin-top: 2.5rem; }
.motion-study .night-preview[data-enhanced] .night-panel { margin-top: 0; }
.motion-study .night-panel > .figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  margin: 0;
}
.motion-study .night-panel .figure > picture { display: block; min-height: 0; }
.motion-study .night-panel .figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 24rem;
  max-height: 36rem;
  object-fit: cover;
  border-radius: 0;
}
.motion-study .night-panel .figure figcaption {
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: .75rem 1.25rem;
  color: var(--room-muted);
  font-size: .8125rem;
  line-height: 1.5;
  background: #211a24;
}
.motion-study .night-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: #211a24;
}
.motion-study .night-copy h3 {
  min-height: 2.2em;
  font-size: clamp(1.75rem, 3.1vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.motion-study .night-description {
  max-width: 34ch;
  min-height: 7.5em;
  margin-top: 1.5rem;
  color: var(--room-muted);
  font-size: 1rem;
  line-height: 1.5;
}
.motion-study .night-copy .actions {
  align-items: flex-start;
  flex-direction: column;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1.5rem;
}
.motion-study .night-copy .enquire-link { text-align: center; }
.motion-study .night-copy .text-link { color: var(--room-type); font-size: .9375rem; }
/* Match the proof to the event, keeping the client's wording and team credit
   attached. These are excerpts, not a combined rating or a rotating review. */
.motion-study .quote .quote-context {
  margin-top: .5rem;
  max-width: 48ch;
  color: var(--room-muted);
  font-size: .875rem;
  line-height: 1.5;
}
.motion-study .night-copy .night-description { min-height: 0; }
.motion-study .night-copy .quote {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--room-line);
}
.motion-study .night-copy .quote blockquote p:first-child {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.3;
  text-wrap: pretty;
}
.motion-study .night-copy .quote-who,
.motion-study .client-notes .quote-who {
  letter-spacing: 0;
  text-transform: none;
  font-size: .9375rem;
  line-height: 1.5;
}
.motion-study .client-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  scroll-margin-top: 6rem;
}
.motion-study .client-note { border-top: 1px solid var(--room-line); padding-top: 1.5rem; }
.motion-study .client-note h3 { color: var(--room-muted); font-size: 1rem; }
.motion-study .client-note .quote { margin: 1.5rem 0 0; }
.motion-study .client-note .quote blockquote p:first-child {
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  line-height: 1.3;
  text-wrap: pretty;
}
@media (max-width: 56rem) {
  .motion-study .client-notes { grid-template-columns: 1fr; gap: 2rem; }
  .motion-study .client-note .quote { max-width: 40rem; }
  .motion-study .night-panel { grid-template-columns: 1fr; }
  .motion-study .night-panel .figure img { min-height: 0; max-height: none; aspect-ratio: 16 / 9; }
  .motion-study .night-copy { padding: 1.5rem; }
  .motion-study .night-copy h3 { font-size: 2rem; }
  .motion-study .night-description { min-height: 4.5em; margin-top: 1rem; }
  .motion-study .night-copy .actions { padding-top: 1.25rem; }
}
@media (max-width: 43.75rem) {
  .motion-study .night-tabs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; }
  .motion-study .night-tab { min-height: 3.25rem; padding: .75rem .5rem; font-size: .9375rem; }
  /* A line under every row but the last; an odd last tab spans both columns. */
  .motion-study .night-tab:not(:last-child) { border-bottom: 1px solid var(--room-line); }
  .motion-study .night-tab:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .motion-study .night-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .motion-study .night-panel .figure img { aspect-ratio: 16 / 10; }
  .motion-study .night-panel .figure figcaption { padding: .625rem 1rem; min-height: 2.75rem; font-size: .75rem; }
  .motion-study .night-copy { padding: 1.5rem 1rem 1rem; }
  .motion-study .night-copy h3 { font-size: clamp(1.75rem, 8vw, 2rem); }
  .motion-study .night-description { min-height: 6em; }
  .motion-study .night-copy .actions { align-items: stretch; }
  .motion-study .night-copy .text-link { justify-content: center; }
}

/* ---------- picture cards (10-20 rebuild, look A) ----------
   Event types and DJs lead with a real photograph. Two columns on a wide screen,
   one column of photo-and-words rows on a phone for the events, a row of four faces. */
.motion-study :is(.doors, .faces) { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.motion-study .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.motion-study .door {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: .625rem;
  border-radius: var(--room-radius);
  background: color-mix(in srgb, var(--room-ground) 70%, #2a2230);
  text-decoration: none;
  border: 1px solid transparent;
}
.motion-study .door:hover, .motion-study .door:focus-visible { border-color: var(--room-light); }
.motion-study .door-photo { display: block; width: 7rem; height: 7rem; max-width: 100%; background: center / cover no-repeat; border-radius: calc(var(--room-radius) - 4px); }
.motion-study .door-copy { display: grid; gap: .3rem; min-width: 0; }
.motion-study .door-label { font-weight: 600; font-size: 1.125rem; }
.motion-study .door-note { color: var(--room-muted); font-size: .9375rem; line-height: 1.45; }

.motion-study .faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Each card takes its whole column, so every face is the same size. Before 10-31 the
   plate rule's `li { width: fit-content }` shrank each card to its name and role, which
   made Lee's photo half the size of Miss Ninja's. */
.motion-study .faces > li { width: auto; min-width: 0; }
.motion-study .face { display: grid; gap: .35rem; width: 100%; text-decoration: none; }
.motion-study .face-photo { display: block; width: 100%; aspect-ratio: 3 / 4; max-width: 13rem; background: center 25% / cover no-repeat; border-radius: calc(var(--room-radius) - 4px); }
.motion-study .face:hover .face-name, .motion-study .face:focus-visible .face-name { text-decoration: underline; text-decoration-thickness: 2px; }
.motion-study .face-name { margin-top: .25rem; font-weight: 600; line-height: 1.2; }
.motion-study .face-role { color: var(--room-muted); font-size: .875rem; line-height: 1.35; }
.motion-study .faces-more { margin-top: 1.25rem; }

.motion-study .faq details { border-top: 1px solid var(--room-line); }
.motion-study .faq details:last-of-type { border-bottom: 1px solid var(--room-line); }
.motion-study .faq summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: .75rem 0;
  font-weight: 500;
  cursor: pointer;
}
.motion-study .faq summary::marker { color: var(--room-light); }
.motion-study .faq p { max-width: 46ch; padding-bottom: 1.25rem; color: var(--room-muted); }

.motion-study .entries { display: grid; gap: clamp(2.5rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; }
.motion-study .entries > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: 1.5rem 8%;
  align-items: start;
  padding-top: 1.5rem;
  border-top: 1px solid var(--room-line);
}
/* Two slabs bleed .375rem towards each other, so a .6rem gap would have them
   overlap and read as a darker band. .95rem leaves daylight between them. */
.motion-study .entry-copy > * + * { margin-top: .95rem; }
.motion-study .entry-meta { color: var(--room-light); font-size: .875rem; }
.motion-study .entries p:not(.entry-meta) { max-width: 44ch; color: var(--room-muted); }

/* ---------- inquiry form: opaque, still, and local ---------- */
.motion-study .inquiry { width: 100%; max-width: 34rem; }
.motion-study .inquiry .anchor-mark { scroll-margin-top: 1rem; }
.motion-study .inquiry fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.motion-study .inquiry-summary { overflow-wrap: anywhere; }
.motion-study .faq summary::after { content: '+'; margin-left: auto; padding-left: 1rem; }
.motion-study .faq details[open] summary::after { content: '−'; }
.motion-study .field-row { display: grid; gap: .4rem; margin-top: 1.5rem; background: none; }
.motion-study .field-row label { font-size: .9375rem; }
.motion-study .inquiry-more { margin-top: 1.75rem; border-block: 1px solid var(--room-line); }
.motion-study .inquiry-more summary {
  min-height: 52px;
  padding-block: .85rem;
  color: var(--room-type);
  cursor: pointer;
  font-size: .9375rem;
}
.motion-study .inquiry-more summary span { color: var(--room-muted); }
.motion-study .inquiry-more summary:focus-visible { outline: 3px solid var(--room-light); outline-offset: 3px; }
.motion-study .inquiry-more[open] { padding-bottom: 1.5rem; }
.motion-study .inquiry-more > .hint { margin-top: .25rem; }
.motion-study .hint { color: var(--room-muted); font-size: .8125rem; }
.motion-study .req { color: var(--room-light); }
.motion-study :is(input, select, textarea) {
  width: 100%;
  min-height: 52px;
  padding: .75rem .9rem;
  border: 1px solid var(--room-line);
  border-radius: var(--room-radius);
  background: var(--room-ground);
  color: var(--room-type);
  font: inherit;
  font-size: 1rem;
}
.motion-study textarea { min-height: 8rem; line-height: 1.5; resize: vertical; }
.motion-study :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--room-light);
  outline-offset: 2px;
  border-color: var(--room-light);
}
.motion-study .no-send { color: var(--room-light); font-size: .875rem; }
.motion-study .inquiry-summary {
  display: block;
  margin-top: 2rem;
  /* Even to the eye, like every other slab: the sideways pad is the larger one
     because the 1.55 line-height already leaves clear space above and below. */
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--room-line);
  border-radius: var(--room-radius);
  background: var(--room-ground);
  font-size: .9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.motion-study .inquiry-summary:focus-visible { outline: 3px solid var(--room-light); outline-offset: 3px; }

/* ---------- narrower rooms ---------- */
@media (max-width: 64rem) {
  .motion-study .site-header { align-items: flex-start; padding-right: var(--edge); }
  .motion-study .site-header .wordmark { margin-right: 15rem; }
  .motion-study .site-header nav { flex-basis: 100%; }
  .motion-study .scene.l-two { gap: 2.5rem 6%; }
  .motion-study .figure--tall { max-width: 26rem; }
  .motion-study .entries > li { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); }
  .motion-study .notes > div, .motion-study .links a { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
}

@media (max-width: 43.75rem) {
  .motion-study .site-header {
    padding-top: calc(4.5rem + env(safe-area-inset-top));
    padding-bottom: .75rem;
    gap: .625rem;
  }
  .motion-study .site-header .wordmark { margin-right: 0; font-size: 1.5rem; }
  .motion-study .scene.hero--column,
  .motion-study .scene.hero--profile,
  .motion-study .scene.hero--quiet {
    display: block;
    min-height: 0;
    padding: 1.5rem var(--edge) 3rem;
  }
  .motion-study .hero-field,
  .motion-study .hero--quiet .hero-field,
  .motion-study .hero--profile .hero-field {
    height: clamp(19rem, 72vw, 30rem);
    margin-top: 2.5rem;
  }
  .motion-study .hero--profile > .figure { margin-top: 2.5rem; max-width: 24rem; }
  .motion-study .scene.hero--profile { display: flex; flex-direction: column; gap: 0; }
  .motion-study .hero--profile > .hero-copy { order: 0; }
  .motion-study .hero--profile > .hero-field { order: 1; }
  .motion-study .hero--profile > .figure { order: 2; }
  .motion-study .scene.l-one { padding-block: 4.5rem; }
  .motion-study .scene.l-two, .motion-study .scene.l-close {
    display: block;
    min-height: 0;
    padding-block: 4.5rem;
  }
  .motion-study .l-two-reverse .col--lead { order: 0; }
  .motion-study .col + .col, .motion-study .scene.l-close > * + * { margin-top: 2.5rem; }
  .motion-study :is(.figure--tall, .figure--right, .figure--small) { width: 100%; max-width: none; }
  /* Stacked on a phone, the same daylight between one slab and the next. */
  .motion-study .notes > div, .motion-study .links a { grid-template-columns: 1fr; gap: .95rem; }
  .motion-study .doors { grid-template-columns: 1fr; }
  .motion-study .door { grid-template-columns: 5.25rem minmax(0, 1fr); gap: .875rem; }
  .motion-study .door-photo { width: 5.25rem; height: 5.25rem; }
  .motion-study .faces { gap: .5rem; }
  .motion-study .face-name { font-size: .875rem; }
  .motion-study .face-role { font-size: .75rem; }
  .motion-study .entries > li { grid-template-columns: 1fr; }
  /* On a phone the figure SITS in these boxes (motion.js, "a phone: the figure
     sits in the box the page reserved for it"), so each is tall enough to hold the
     whole record at the phone's base size: the box is as wide as the column
     (~21rem at 375) and the fit takes the shorter side, so shorter than that and
     the figure comes back as the business card of 2026-09-11. */
  .motion-study .field--tall { height: 22rem; }
  .motion-study .field--mid { height: 21rem; }
  .motion-study .field--low { height: 20rem; }
  .motion-study .site-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the phone opening ----------
   A phone arrives at this page and must see the record, not a sliver of it under
   the button. Three things buy the room: the navigation stops costing two stacked
   rows, the header and the opening copy tighten, and the opening scene becomes a
   column that fills the first screen so the record takes whatever the words leave.
   The record's own instruction moves above it, where it stays readable even when
   the reserved space runs past the fold. Numbers per width: VERIFY.md §10. */
@media (max-width: 43.75rem) {
  /* One row, scrolled sideways, instead of two rows stacked. The vertical padding
     and its matching negative margin keep the focus ring out of the scroller's
     own clip without costing the row any height. */
  .motion-study .site-header nav {
    flex-wrap: nowrap;
    column-gap: 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: -.625rem calc(var(--edge) * -1);
    padding: .625rem var(--edge);
    /* The right edge fades, so a row that runs off the screen reads as a row that
       carries on rather than a word that got cut. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .motion-study .site-header nav::-webkit-scrollbar { display: none; }
  .motion-study .site-header nav a { flex: none; }

  /* The opening scene fills the first screen. 12.5rem is the phone header above
     it, measured; verify-phone.mjs fails if the header ever outgrows it. */
  .motion-study .scene.hero--lead,
  .motion-study .scene.hero--column,
  .motion-study .scene.hero--quiet,
  .motion-study .scene.hero--profile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: calc(100svh - 12.5rem);
    padding: 1rem var(--edge) 1rem;
  }
  .motion-study :is(.hero--lead, .hero--column, .hero--quiet, .hero--profile) > .hero-copy { flex: none; }
  .motion-study :is(.hero--lead, .hero--column, .hero--quiet, .hero--profile) .hero-intro { margin-top: 1rem; }
  .motion-study :is(.hero--lead, .hero--column, .hero--quiet, .hero--profile) .hero-copy .actions { margin-top: 1.25rem; }
  .motion-study .hero-copy .date-bar { margin-top: 1.25rem; }
  .motion-study .hero-copy .date-bar + .actions { margin-top: .25rem; }

  /* Edge to edge, and as tall as the first screen allows. Home's record is sized
     from the window, so its space only has to hold the centre; the other nine are
     fitted to this box, so theirs carries a floor that keeps the record large. */
  .motion-study :is(.hero--lead, .hero--column, .hero--quiet, .hero--profile) > :is(.hero-art, .hero-field) {
    position: relative;
    top: auto;
    right: auto;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    margin: .75rem calc(var(--edge) * -1) 0;
    transform: none;
  }
  .motion-study .hero--lead > .hero-art { min-height: 14rem; }
  .motion-study :is(.hero--column, .hero--quiet, .hero--profile) > .hero-field { min-height: 25rem; }

  /* On the nine fitted openings the reserved space runs past the fold, so the
     strip that carries "Drag to turn · Scroll to explore" moves from the bottom of
     the art to the top, where the line stays on the first screen. Home's space
     ends on the first screen, so its line stays where it has always been —
     underneath, clear of the record instead of cutting across its top edge. */
  .motion-study :is(.hero--column, .hero--quiet, .hero--profile) .hero-field > .scene-anchor,
  .motion-study :is(.hero--column, .hero--quiet, .hero--profile) .motion-surface {
    inset: 1.75rem 0 0;
  }
  .motion-study :is(.hero--column, .hero--quiet, .hero--profile) .art-instruction {
    top: 0;
    bottom: auto;
    padding-inline: var(--edge);
  }
  .motion-study .hero--lead .art-instruction { padding-inline: var(--edge); }
}

@media (scripting: none) {
  .motion-study .site-header { padding-top: 1.75rem; padding-right: var(--edge); }
  .motion-study .site-header .wordmark { margin-right: 0; }
}

/* ---------- the phone's top bar (10-20 rebuild, look A) ----------
   Wider screens keep the full row of pages exactly as before: the two phone-only
   controls are hidden and the menu wrapper steps out of the layout. On a phone the
   header becomes one short bar that stays at the top while the page scrolls: logo,
   "Check your date", Menu. Menu opens every page, the DJs and the motion buttons
   underneath it. Without scripts the full list shows (the rule under scripting: none). */
.motion-study .header-cta,
.motion-study .menu-toggle { display: none; }
.motion-study .site-menu { display: contents; }

@media (max-width: 43.75rem) and (scripting: enabled) {
  .motion-study .site-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 4;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    padding: .625rem var(--edge);
    background: color-mix(in srgb, var(--room-ground) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--room-line) 45%, transparent);
  }
  .motion-study .site-header .wordmark { margin-right: auto; font-size: 1.125rem; }
  .motion-study .header-cta,
  .motion-study .menu-toggle {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: 44px;
    padding: 0 .875rem;
    border-radius: var(--room-radius);
    font: inherit;
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
  }
  .motion-study .header-cta { background: var(--room-light); color: var(--room-ground); }
  .motion-study .menu-toggle { border: 1px solid var(--room-line); background: transparent; color: var(--room-type); cursor: pointer; }
  .motion-study .menu-toggle[aria-expanded="true"] { border-color: var(--room-light); color: var(--room-light); }

  .motion-study .site-menu { display: none; }
  .motion-study .site-header.menu-open .site-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100svh - 4rem - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem var(--edge) 5.5rem;
    background: var(--room-ground);
    border-bottom: 1px solid var(--room-line);
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .45);
  }
  /* The links and the DJ list share one column, so the DJs sit right under their door. */
  .motion-study .site-menu nav { display: contents; }
  .motion-study .site-menu nav a { order: 2; }
  .motion-study .site-menu .nav-events { order: 0; }
  .motion-study .site-menu .event-menu { order: 1; }
  .motion-study .site-menu .nav-djs { order: 3; }
  .motion-study .site-menu .nav-djs ~ a { order: 5; }
  .motion-study .site-menu #dj-menu { order: 4; }
  .motion-study .site-menu nav a { font-size: 1.125rem; border-bottom: 1px solid color-mix(in srgb, var(--room-line) 40%, transparent); }
  .motion-study .site-menu .nav-cta { display: none; }
  .motion-study .site-header .site-menu :is(.nav-djs, .nav-events)::after { content: none; }
  /* On a phone the DJs are simply listed under their door, no strip to open. */
  .motion-study .site-menu .dj-menu,
  .motion-study .site-menu .dj-menu[hidden] {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .motion-study .site-menu .dj-menu ul { padding: 0 0 0 1rem; }
  .motion-study .site-menu .dj-menu a { font-size: 1rem; color: var(--room-muted); }

  /* The motion buttons live in the open menu, at the bottom of the screen. */
  .motion-study .motion-controls { display: none; }
  html.menu-open .motion-study .motion-controls {
    display: flex;
    top: auto;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right: var(--edge);
    left: var(--edge);
    justify-content: flex-end;
  }

  /* The opening fills the screen under the short bar (it was 12.5rem of header). */
  .motion-study .scene.hero--lead,
  .motion-study .scene.hero--column,
  .motion-study .scene.hero--quiet,
  .motion-study .scene.hero--profile { min-height: calc(100svh - 4rem); }
}

/* The First Pressing keeps its desktop line breaks, but gives the phone's opening
   room for the offer, both actions and the record without shortening the copy. */
.motion-study .heading--flow-phone > span { display: block; }
@media (max-width: 43.75rem) {
  .motion-study .hero--pressing h1 { font-size: clamp(2.25rem, 9.6vw, 2.65rem); }
  .motion-study .hero--pressing .heading--flow-phone > span { display: inline; }
  .motion-study .hero--pressing .hero-intro { max-width: none; font-size: 1rem; line-height: 1.4; }
  .motion-study .hero--pressing .hero-copy .actions { margin-top: 1rem; gap: .5rem .75rem; }
}

/* ---------- the contact page: pick the night first (option B, 2026-10-27) ----------
   The question, then the form, in the first screen. The record of light sits in its
   own column on a wide window and below the form on a phone. The fields keep their
   own solid ground, so nothing moves behind the typing; the words around them sit
   straight on the room like every other page's (no box behind a run of words). */
.motion-study .scene.hero--ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  grid-template-rows: auto 1fr;
  column-gap: 6%;
  padding: 1.5rem var(--edge) 4rem;
}
.motion-study .hero--ask > .hero-copy { grid-column: 1; width: 100%; max-width: none; }
.motion-study .hero--ask h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); }
.motion-study .hero--ask > .inquiry {
  grid-column: 1;
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
}
.motion-study .hero--ask > .hero-field {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  position: sticky;
  top: 2rem;
  height: calc(clamp(18rem, 52svh, 30rem) + 2.5rem);
}
.motion-study .chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.motion-study .chip-set { display: flex; flex-wrap: wrap; gap: .5rem; }
.motion-study .chip { position: relative; display: inline-flex; }
.motion-study .chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.motion-study .chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--room-line);
  border-radius: 999px;
  color: var(--room-type);
  font-size: .9375rem;
  line-height: 1.2;
  pointer-events: none;
}
.motion-study .chip input:checked + span {
  border-color: var(--room-light);
  background: var(--room-light);
  color: var(--room-ground);
}
.motion-study .chip input:focus-visible + span { outline: 3px solid var(--room-light); outline-offset: 2px; }
.motion-study .chip input:disabled + span { opacity: .55; }
.motion-study .hero--ask .chips + .field-row { margin-top: 1.25rem; }
.motion-study .hero--ask .field-row { margin-top: 1rem; }
.motion-study .hero--ask textarea { min-height: 6rem; }
.motion-study .hero--ask .inquiry-more { margin-top: 1.25rem; }
.motion-study .hero--ask .inquiry .actions { margin-top: 1.25rem; }
.motion-study .inquiry .fine { margin-top: .75rem; color: var(--room-muted); font-size: .875rem; }
.motion-study .date-carried { margin-top: .75rem; color: var(--room-light); font-size: .9375rem; }

/* Home's opening asks for the date (2026-10-30): the field and the button on one
   row, the button keeping its own size so the field takes what is left. */
.motion-study .date-bar { margin-top: 1.75rem; max-width: 30rem; }
.motion-study .date-bar label { display: block; margin-bottom: .5rem; color: var(--room-type); font-size: .9375rem; }
.motion-study .date-bar-row { display: flex; gap: .625rem; }
.motion-study .date-bar input { flex: 1 1 auto; min-width: 0; min-height: 56px; }
.motion-study .date-bar .enquire-link { flex: none; margin-top: 0; border: 0; cursor: pointer; font-family: inherit; }
.motion-study .date-bar + .actions { margin-top: .75rem; }

@media (max-width: 43.75rem) {
  .motion-study .scene.hero--ask {
    display: flex;
    flex-direction: column;
    padding: 1rem var(--edge) 2.5rem;
  }
  .motion-study .hero--ask h1 { font-size: clamp(2rem, 9vw, 2.4rem); }
  .motion-study .hero--ask > .inquiry { margin-top: 1rem; }
  .motion-study .hero--ask .chips + .field-row { margin-top: 1rem; }
  .motion-study .hero--ask .field-row { margin-top: .875rem; }
  .motion-study .hero--ask textarea { min-height: 5.25rem; }
  .motion-study .hero--ask .inquiry-more { margin-top: 1rem; }
  .motion-study .hero--ask .inquiry .actions { margin-top: 1rem; }
  .motion-study .hero--ask > .hero-field {
    position: relative;
    top: auto;
    align-self: stretch;
    height: 22rem;
    margin: 2rem calc(var(--edge) * -1) 0;
  }
  .motion-study .hero--ask .hero-field > .scene-anchor,
  .motion-study .hero--ask .motion-surface { inset: 1.75rem 0 0; }
  .motion-study .hero--ask .art-instruction { top: 0; bottom: auto; padding-inline: var(--edge); }
  .motion-study .hero--ask .inquiry .actions .enquire-link { width: 100%; justify-content: center; }
}

/* Set the tone: a musical starting point next to the real, editable inquiry.
   This extends the established form; no new steps or required answers. */
.motion-study .scene.hero--tone { display: block; min-height: 0; }
.motion-study .hero--tone > .hero-copy { max-width: none; }
.motion-study .hero--tone .hero-intro { margin-top: .7rem; font-size: 1.125rem; }
.motion-study .hero--tone > .inquiry { max-width: none; margin-top: 1.5rem; }
.motion-study .hero--tone .chips { margin-top: 0; }
.motion-study .tone-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 4.5vw, 5rem);
  margin-top: 2rem;
}
.motion-study .tone-studio { min-width: 0; }
.motion-study .tone-stage { position: relative; min-height: 24rem; overflow: hidden; background: var(--room-ground); }
.motion-study .tone-stage .figure { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.motion-study .tone-stage :is(picture, img) { width: 100%; height: 100%; }
.motion-study .tone-stage img { object-fit: cover; object-position: 55% 50%; }
.motion-study .tone-stage::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(16,13,18,.96) 0%, rgba(16,13,18,.65) 60%, rgba(16,13,18,0) 100%);
  pointer-events: none;
}
.motion-study .tone-stage-copy { position: absolute; z-index: 1; inset: auto 1.75rem 1.6rem; }
.motion-study .tone-stage h2 { max-width: 8ch; font-size: clamp(2.8rem, 4.6vw, 4.7rem); line-height: .98; }
.motion-study .tone-stage-copy p { margin-top: .8rem; max-width: 31ch; color: var(--room-type); font-size: 1rem; }
.motion-study .tone-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.motion-study .tone-choices button {
  position: relative; display: flex; align-items: center;
  padding: .9rem .85rem; min-height: 4rem;
  border: 1px solid var(--room-line); border-top: 0; border-radius: 0;
  background: var(--room-ground); color: var(--room-type);
  text-align: left; font-size: .9375rem; line-height: 1.3; cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}
.motion-study .tone-choices button + button { border-left: 0; }
.motion-study .tone-choices button:hover { background: #2b222d; }
.motion-study .tone-choices button[aria-pressed="true"] { background: var(--room-light); color: var(--room-ground); }
.motion-study .tone-choices button:focus-visible { z-index: 2; outline-offset: -5px; }
.motion-study .tone-choices button[aria-pressed="true"]:focus-visible { outline-color: var(--room-ground); }
.motion-study .tone-choices button:disabled { opacity: .55; cursor: default; }
.motion-study .tone-help { margin-top: .85rem; font-size: .875rem; color: var(--room-muted); }
.motion-study .tone-status { margin-top: .5rem; font-size: .875rem; color: var(--room-light); }
.motion-study .tone-status:empty { display: none; }
.motion-study .tone-add { margin-top: .5rem; min-height: 44px; padding: .3rem 0; border: 0; border-radius: 0; background: none; color: var(--room-light); cursor: pointer; font: inherit; font-size: .9375rem; text-decoration: underline; text-underline-offset: .25em; }
.motion-study .tone-add:disabled { color: var(--room-muted); cursor: default; }
.motion-study .tone-caption { margin-top: 1rem; color: var(--room-muted); font-size: .75rem; }
.motion-study .tone-details { min-width: 0; }
.motion-study .tone-details > :first-child { margin-top: 0; }
.motion-study .tone-details textarea { min-height: 9rem; caret-color: var(--room-light); }
.motion-study .tone-contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.motion-study .tone-details .actions { align-items: flex-start; flex-direction: column; gap: .75rem; }
.motion-study .tone-details .actions .enquire-link { width: 100%; justify-content: center; }
.motion-study .hero--tone > .hero-field { position: relative; grid-column: auto; grid-row: auto; top: auto; height: 10rem; margin-top: 2.5rem; }
.motion-study .hero--tone .hero-field > .scene-anchor,
.motion-study .hero--tone .motion-surface { inset: 0 0 2.5rem; }
.motion-study .hero--tone .hero-field .art-instruction { bottom: 0; top: auto; }
@media (prefers-reduced-motion: reduce) {
  .motion-study .tone-choices button { transition: none; }
}
/* The inquiry and its choices must share a short laptop's first screen. */
@media (min-width: 56rem) and (max-height: 50rem) {
  .motion-study .scene.hero--tone { padding-top: .75rem; }
  .motion-study .hero--tone > .hero-copy { display: flex; align-items: baseline; gap: 1.75rem; }
  .motion-study .hero--tone h1 { font-size: 3.25rem; flex: none; }
  .motion-study .hero--tone .hero-intro { margin: 0; font-size: 1rem; }
  .motion-study .hero--tone > .inquiry { margin-top: 1rem; }
  .motion-study .tone-layout { margin-top: 1.25rem; }
  .motion-study .tone-stage { min-height: 14rem; }
  .motion-study .tone-stage-copy { inset-inline: 1.25rem; bottom: 1.2rem; }
  .motion-study .tone-stage h2 { max-width: none; font-size: 3.25rem; }
  .motion-study .tone-choices button { min-height: 4rem; padding-block: .75rem; }
  .motion-study .tone-details textarea { min-height: 6rem; }
  .motion-study .hero--tone .inquiry-more { margin-top: .75rem; }
  .motion-study .hero--tone .inquiry .actions { margin-top: .75rem; }
}
@media (max-width: 56rem) {
  .motion-study .tone-layout { gap: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .motion-study .tone-contact-fields { grid-template-columns: 1fr; gap: 0; }
  .motion-study .tone-stage { min-height: 22rem; }
  .motion-study .tone-stage-copy { inset-inline: 1.1rem; }
  .motion-study .tone-choices button { padding-inline: .65rem; font-size: .875rem; }
}
@media (max-width: 43.75rem) {
  /* Phones keep option B's first screen (Miles, 10-27): the form first, the
     mood picker below the send button. Tab order still reads picker-then-note.
     The note shows four tight lines (drag or type to grow) and the intro sits
     close under the question, so Send stays on the first phone screen. */
  .motion-study .tone-layout { grid-template-columns: 1fr; gap: 1.5rem; margin-top: .5rem; }
  .motion-study .tone-layout > .tone-studio { order: 2; }
  .motion-study .tone-details textarea { height: 6rem; min-height: 0; }
  /* The question stands alone on phones, exactly as option B shipped; the intro
     line returns at tablet width where the first screen has room for it. */
  .motion-study .hero--tone .hero-intro { display: none; }
  .motion-study .hero--tone .hero-intro { font-size: 1rem; max-width: none; }
  .motion-study .tone-stage { min-height: 10.5rem; }
  .motion-study .tone-stage img { object-position: 50% 58%; }
  .motion-study .tone-stage-copy { inset: auto 1.1rem 1.1rem; }
  .motion-study .tone-stage h2 { max-width: none; font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
  .motion-study .tone-stage-copy p { margin-top: .4rem; font-size: .9375rem; }
  .motion-study .tone-choices button { min-height: 5rem; padding: .75rem .55rem; }
  .motion-study .tone-caption { margin-top: .5rem; }
  .motion-study .tone-details textarea { min-height: 6rem; }
  .motion-study .hero--tone .chip span { padding-inline: .6rem; font-size: .875rem; }
  .motion-study .tone-help a { display: inline-flex; align-items: center; min-height: 44px; }
  .motion-study .hero--tone > .hero-field { height: 8rem; margin-top: 1.5rem; }
}

/* Mixes opens on listening. The archive and the four motion scenes keep their
   existing order; the opening spends its space on a real recording and choices. */
.motion-study .scene.hero--listening { display: block; min-height: 0; padding: 1.25rem var(--edge) 2rem; }
.motion-study .hero--listening .hero-copy { max-width: 55rem; width: 100%; }
.motion-study .hero--listening h1 { font-size: clamp(2.5rem, 5.3vw, 4.8rem); line-height: 1.02; }
.motion-study .hero--listening .hero-intro { max-width: 51ch; margin-top: .8rem; font-size: 1.125rem; }
.motion-study .hero--listening > .hero-field { height: 8rem; margin-top: 1.5rem; }
.motion-study .listening-room { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(15rem, 1fr); column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 1rem; align-items: start; margin-top: 1.75rem; }
.motion-study .listen-stage { min-width: 0; grid-column: 1; grid-row: 1 / span 2; }
.motion-study .listen-library { grid-column: 2; grid-row: 1; }
.motion-study .listen-postscript { grid-column: 2; grid-row: 2; }
.motion-study .listen-panel[hidden], .motion-study .listen-retry[hidden] { display: none; }
.motion-study .listen-panel + .listen-panel { margin-top: 3rem; }
.motion-study .is-enhanced .listen-panel { margin-top: 0; }
.motion-study .listen-panel > .figure { margin: 0; }
.motion-study .listen-panel > .figure:not(.embed) :is(img, picture) { width: 100%; height: 14.5rem; object-fit: cover; }
.motion-study .listen-panel > .figure:not(.embed):not(.guest-video) figcaption { display: none; }
.motion-study .listen-caption { margin: .8rem 0 .65rem; }
.motion-study .listen-caption h2 { font-size: 1.45rem; line-height: 1.2; margin: 0; }
.motion-study .listen-caption p { color: var(--room-muted); font-size: .875rem; margin-top: .35rem; }
.motion-study .listen-panel .sound { margin: 0; max-width: none; }
.motion-study .listen-panel audio { display: block; width: 100%; height: 44px; }
.motion-study .listen-panel .sound .note { display: none; }
.motion-study .listen-panel .embed figcaption { font-size: .875rem; line-height: 1.4; }
.motion-study .listen-panel .embed figcaption .source { display: none; }
.motion-study .listen-status { color: var(--room-muted); font-size: .8125rem; line-height: 1.4; margin-top: .65rem; min-height: 1.15rem; }
.motion-study .listen-action { margin-top: 1rem; }
.motion-study .listen-action .enquire-link { min-height: 46px; display: inline-flex; align-items: center; }
.motion-study .listen-fallback { display: flex; gap: .4rem; flex-wrap: wrap; font-size: .8125rem; margin-top: .5rem; }
.motion-study .listen-instruction { font-size: 1rem; color: var(--room-muted); margin: 0 0 .9rem; }
.motion-study .listen-choices { display: grid; border-top: 1px solid var(--room-line); }
.motion-study .listen-choice { display: flex; flex-direction: column; gap: .3rem; padding: 1rem .9rem; border-bottom: 1px solid var(--room-line); color: var(--room-type); text-decoration: none; font-size: 1.125rem; line-height: 1.25; min-width: 0; }
.motion-study .listen-choice-detail { font-size: .75rem; color: var(--room-muted); }
.motion-study .listen-choice:hover { background: var(--room-ground); color: var(--room-light); }
.motion-study .listen-choice[aria-selected="true"] { color: var(--room-ground); background: var(--room-light); }
.motion-study .listen-choice[aria-selected="true"] .listen-choice-detail { color: var(--room-ground); }
.motion-study .listen-choice:focus-visible { outline: 3px solid var(--room-light); outline-offset: -5px; }
.motion-study .listen-choice[aria-selected="true"]:focus-visible { outline-color: var(--room-ground); }
.motion-study .listen-library-note { color: var(--room-muted); font-size: .875rem; line-height: 1.5; max-width: 30ch; margin-top: 1.25rem; }
.motion-study .listen-archive-link { display: inline-block; margin-top: 1rem; font-size: .875rem; }
.motion-study .listen-retry, .motion-study .music-reference-add { color: var(--room-light); background: none; border: 0; padding: .35rem 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.motion-study .music-reference { margin-top: 1rem; }
.motion-study .music-reference-add[hidden] { display: none; }
.motion-study .music-reference-add:disabled { color: var(--room-muted); cursor: default; }
@media (max-width: 48rem) {
  .motion-study .scene.hero--listening { padding-top: 1rem; }
  .motion-study .hero--listening .hero-intro { font-size: 1rem; line-height: 1.5; }
  .motion-study .listening-room { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.25rem; }
  .motion-study .listen-library { grid-column: 1; grid-row: 1; }
  .motion-study .listen-stage { grid-column: 1; grid-row: 2; }
  .motion-study .listen-postscript { grid-column: 1; grid-row: 3; }
  .motion-study .listen-caption h2 { font-size: 1.25rem; }
  .motion-study .listen-caption p { font-size: .8125rem; }
  .motion-study .listen-panel > .figure:not(.embed) :is(img, picture) { height: 11.5rem; }
  .motion-study .listen-panel .embed-play-words { max-width: 26ch; }
  .motion-study .listen-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-study .listen-choice { font-size: .9375rem; padding: .75rem .65rem; min-height: 48px; }
  .motion-study .listen-choice-detail { display: none; }
  .motion-study .listen-choice:last-child { grid-column: 1 / -1; }
  .motion-study .listen-library-note { max-width: 42ch; margin-top: 0; }
  .motion-study .hero--listening > .hero-field { height: 6rem; }
}

/* Artist and hospitality openings: real performance first, inside the existing world. */
.motion-study .scene.hero--artist { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1rem 6%; min-height: 0; }
.motion-study .hero--artist .hero-copy { max-width: 36rem; }
.motion-study .hero--artist h1 { font-size: clamp(2.8rem, 4.8vw, 4.8rem); }
.motion-study .hero--artist .hero-intro { max-width: 40ch; }
.motion-study .hero--artist .sound { margin-top: 1rem; }
.motion-study .hero--artist .hero-copy .note { margin-top: 1.25rem; max-width: 46ch; }
.motion-study .hero--artist > .figure { align-self: center; margin: 0; width: 100%; }
.motion-study .hero--artist > .figure:not(.embed) img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.motion-study .hero--artist .hero-field { height: 8rem; min-height: 0; margin-top: 0; }
.motion-study .hero--artist .hero-field > .scene-anchor { inset: 0 0 2rem; }
@media (max-width: 43.75rem) {
  .motion-study .scene.hero--artist { display: flex; min-height: 0; gap: 0; padding-top: 1.25rem; }
  .motion-study .hero--artist h1 { font-size: clamp(2.35rem, 10vw, 3.1rem); }
  .motion-study .hero--artist .hero-intro { font-size: 1rem; line-height: 1.5; }
  .motion-study .hero--artist .hero-copy .actions { gap: .5rem 1rem; }
  .motion-study .hero--artist > .figure { order: 1; max-width: none; margin-top: 1.5rem; }
  .motion-study .hero--artist > .hero-field { order: 2; height: 8rem; min-height: 0; margin: 1rem 0 0; width: 100%; flex: none; }
  .motion-study .hero--artist .hero-field > .scene-anchor,
  .motion-study .hero--artist .motion-surface { inset: 1.75rem 0 0; }
}

/* The guest moment keeps its full landscape frame and waits for a deliberate play. */
.motion-study .guest-video { width: 100%; }
.motion-study .guest-video video { aspect-ratio: 16 / 9; object-fit: contain; }
.motion-study .guest-video .actions { margin-top: .875rem; gap: .35rem 1.25rem; }
.motion-study .guest-video .enquire-link { font-size: .9375rem; }
.motion-study .moment-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3rem 6%; }
.motion-study .moment-preview > .guest-video { margin: 0; }
@media (max-width: 43.75rem) {
  .motion-study .moment-preview { grid-template-columns: 1fr; gap: 1.5rem; }
}