/* Private motion study only. Layout supplies empty scene geometry; motion.js owns movement. */
html[data-study="room"] {
  color-scheme: dark;
  background: #100d12;
  scroll-padding-top: 6rem;
  scrollbar-color: #bdb3bc #100d12;
  --room-ground: #100d12;
  --room-type: #f4f0e8;
  --room-muted: #bdb3bc;
  --room-light: #d9c5a0;
  --room-line: #71656f;
  /* There is NO plate. Every run of words on this site used to sit on a
     see-through slab of rgba(16, 13, 18, .74); Miles, looking at the live site on
     2026-09-14: "I don't know why there are still black boxes around the text.
     That is very distracting when the tool breaks apart." The slab is gone
     entirely and the words sit directly on the room.
     What kept them readable was the slab. What keeps them readable now is the
     ENGINE: ink that passes behind a word is drawn at .12 of its brightness and
     half its width (BEHIND_WORDS and BEHIND_SIZE in motion.js), and ink that would
     land on a photograph or a film is not drawn at all. Every one of those numbers
     is proved off the painted picture, page by page, in VERIFY.md §22 — nothing
     here may put a ground back behind a run of words. */
  --room-radius: 12px;
  /* Kept because the rest of the site sets its own small distances against them
     and because the engine's quiet margin is measured in the same terms, but they
     no longer bleed a slab outward from anything.
     One pad for the whole page, in rem and not em. A .7em pad on a 96px headline
     is 67px — wider than a phone's whole side margin — and a pad that grows with
     the type does not read as "even" from one block to the next, which is the
     thing that was asked for. The sideways pad is twice the up-and-down one
     because 1.6 line-height already leaves about .3em clear above the first line
     and below the last: 6px of pad plus that leading measures the same to the eye
     as 12px of pad beside the words. Measured four sides at a time, VERIFY.md §21. */
  --plate-pad-x: .75rem;
  --plate-pad-y: .375rem;
  --plate-pad: var(--plate-pad-y) var(--plate-pad-x);
  /* Past about 1,600 wide the margins grow instead of the words, so a big monitor gets a
     90rem (1,440px) column; full-bleed photos and films still fill the screen (10-31). */
  --edge: max(clamp(1.25rem, 4.4vw, 5rem), calc((100vw - 90rem) / 2));
  --room-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

.motion-study,
.motion-study * { box-sizing: border-box; }

.motion-study {
  margin: 0;
  background: var(--room-ground);
  color: var(--room-type);
  font-family: var(--room-font);
  font-stretch: 100%;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

.motion-study ::selection { background: var(--room-light); color: var(--room-ground); }
.motion-study :is(h1, h2, p, figure) { margin: 0; }
.motion-study :is(h1, h2) {
  font-weight: 450;
  font-stretch: 100%;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.motion-study h1 { font-size: clamp(3.8rem, 7.3vw, 6rem); }
.motion-study h2 { font-size: clamp(2.9rem, 5.35vw, 4.8rem); }
.motion-study p { text-wrap: pretty; }
.motion-study a { color: inherit; text-underline-offset: .3em; }
.motion-study :is(a, button) { -webkit-tap-highlight-color: transparent; }
.motion-study :is(a, button):focus-visible {
  outline: 3px solid var(--room-light);
  outline-offset: 6px;
}
.motion-study a:hover { text-decoration-thickness: 2px; }
.motion-study button { font: inherit; }
.motion-study img { display: block; width: 100%; height: auto; }
.motion-study figure { min-width: 0; }
.motion-study figcaption { margin-top: 1rem; color: var(--room-muted); font-size: .875rem; }
.motion-study [hidden] { display: none !important; }

.motion-study .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.motion-study .skip-link {
  position: fixed;
  z-index: 20;
  top: -8rem;
  left: var(--edge);
  padding: .75rem 1rem;
  border-radius: var(--room-radius);
  background: var(--room-light);
  color: var(--room-ground);
}
.motion-study .skip-link:focus { top: 1rem; }

.motion-study #room-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.motion-study :is(.study-header, main, .study-footer) { position: relative; z-index: 1; }
.motion-study main:focus { outline: none; }
.motion-study .scene { position: relative; background: transparent; scroll-margin-top: 6rem; }
.motion-study .scene-anchor { position: absolute; inset: 0; pointer-events: none; }

.motion-study .study-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.75rem calc(var(--edge) + 15rem) 1.75rem var(--edge);
}
.motion-study .wordmark {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-decoration: none;
}
.motion-study .wordmark span {
  display: block;
  margin-top: .3rem;
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: 0;
}
.motion-study nav { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; }
.motion-study nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
  text-decoration: none;
}
.motion-study nav a:hover { text-decoration: underline; }

.motion-study .motion-controls {
  position: fixed;
  top: 1.75rem;
  right: var(--edge);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .5rem;
  visibility: hidden;
}
.motion-study .motion-controls button {
  min-height: 44px;
  padding: .5rem .875rem;
  border: 1px solid var(--room-line);
  border-radius: var(--room-radius);
  background: var(--room-ground);
  color: var(--room-type);
  font-size: .875rem;
  line-height: 1.4;
  cursor: pointer;
}
.motion-study .motion-controls button:hover { border-color: var(--room-light); }
.motion-study .motion-controls button[aria-pressed="true"] { color: var(--room-light); border-color: var(--room-light); }
.motion-study .motion-controls button:disabled { color: var(--room-muted); cursor: default; }
.motion-study .controls-note { display: none; }

.motion-study .scene--record {
  display: flex;
  align-items: center;
  min-height: max(30rem, calc(100svh - 7.25rem));
  padding: 2rem var(--edge) 3rem;
}
.motion-study .hero-copy { width: 39%; max-width: 420px; }
/* ---------- the measure the words are set to ----------
   There is no slab here any more, and nothing in this block paints a ground. What
   is left is the one property the slab brought with it and which is worth keeping
   on its own: every run of words is set to its own measure rather than to the full
   width of the column it sits in. It cannot move a letter — fit-content is still
   capped by the column and by any max-width, so a line breaks exactly where it
   broke before; it only stops the slab running on past the last word.

   The pseudo is position:absolute, so it is NOT a flex or grid item and cannot
   disturb the rows it sits in (nav, .field-row, figcaption, summary are all
   flex or grid). Ink drawn behind these is dimmed, not refused — motion.js. */
.motion-study :is(h1, h2, h3, p, nav, li, dt, dd, summary, figcaption, label,
                  .hint, .no-send, .entry-meta, .link-label, .link-note) {
  position: relative;
  width: fit-content;
  background-color: transparent;
}
/* A slab hugs its own words downwards too: left to stretch, a one-word term in a
   two-line row gets a slab twice the height of the word it carries. Only the runs
   of words that sit INSIDE somebody's row — never a row itself. Applied to nav as
   well, it took the header's baseline alignment away and moved the opening of all
   ten pages up by five pixels at 1440.
   Not .no-send either, and for the opposite reason: it is the "nothing is sent"
   note beside the form's button, and that row already centres what it carries, so
   the note was never going to stretch and never needed this. Pinned to the top of
   a 56px button's row it sat 18px above the button it belongs to. This rule is for
   the rows that would otherwise stretch, and for nothing else. */
.motion-study :is(dt, dd, label, figcaption, .hint, .entry-meta,
                  .link-label, .link-note) { align-self: start; }
.motion-study :is(h1, h2, h3, p, nav, li, dt, dd, summary, figcaption, label,
                  .hint, .no-send, .entry-meta, .link-label, .link-note)::before {
  content: none;
}
/* Carrying no words of their own, or holding a row together rather than a
   sentence. These keep their full width; shrinking them would break the row they
   live in. */
.motion-study :is(.actions, .field-row, .source, .controls-note),
.motion-study :is(.links li, .entries > li) { width: auto; }
/* Read to a blind visitor and drawn nowhere. It is 1px wide on purpose, and
   width:auto on one of these made the document 1442px wide and hung a scrollbar
   under every page at every width. Caught by verify-plates, 2026-09-10. */
.motion-study .visually-hidden { width: 1px; }
/* A question row is a control, not a sentence: its content is the words AND the
   +/− at the far end of the row, so the row IS as wide as what it carries. It
   keeps the slab and the corners and gives up only the shrink. */
.motion-study summary { width: auto; }
/* Both of these are pinned to the sides of the art with left:0;right:0, so a
   fit-content box would land hard against the left edge instead of under the
   middle of the record. auto margins put it back in the middle. */
.motion-study :is(.art-instruction, .fallback-note) { margin-inline: auto; }
.motion-study .hero-intro { max-width: 33ch; margin-top: 1.65rem; color: var(--room-muted); }
.motion-study .enquire-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  max-width: 100%;
  margin-top: 1.75rem;
  padding: .875rem 1.35rem;
  border-radius: var(--room-radius);
  background: var(--room-light);
  color: var(--room-ground);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
}
.motion-study .enquire-link:hover { background: var(--room-type); }
.motion-study .enquire-link:active { background: var(--room-muted); }
.motion-study .hero-art {
  position: absolute;
  top: 54%;
  right: 3%;
  width: 50%;
  height: calc(clamp(29rem, 72svh, 41rem) + 2.5rem);
  transform: translateY(-50%);
}
.motion-study .hero-art > .scene-anchor,
.motion-study .motion-surface { inset: 0 0 2.5rem; }
.motion-study .motion-surface {
  position: absolute;
  z-index: 2;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--room-type);
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  visibility: hidden;
}
.motion-study .motion-surface:active { cursor: grabbing; }
.motion-study .motion-surface:focus-visible { outline-offset: 0; }
.motion-study .record-fallback {
  position: absolute;
  inset: 0 0 2.5rem;
  width: 100%;
  height: calc(100% - 2.5rem);
  color: var(--room-light);
  pointer-events: none;
}
.motion-study .art-instruction,
.motion-study .fallback-note {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--room-muted);
  font-size: .8125rem;
  text-align: center;
}
.motion-study .art-instruction { display: none; }
.motion-study .art-instruction span { padding-inline: .25rem; }
/* The engine's first painted-frame report retires the fallback. No second readiness writer. */
.motion-study #room-field[data-frames]:not([data-error]) ~ .motion-controls,
.motion-study #room-field[data-frames]:not([data-error]) ~ main .motion-surface { visibility: visible; }
.motion-study #room-field[data-frames]:not([data-error]) ~ main :is(.record-fallback, .fallback-note) { display: none; }
.motion-study #room-field[data-frames]:not([data-error]) ~ main .art-instruction { display: block; }
.motion-study .no-script-note { color: var(--room-muted); font-size: .875rem; }

.motion-study .scene--room { padding: clamp(6rem, 10vw, 10rem) var(--edge) 0; }
.motion-study .room-opening {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 3rem 9%;
}
.motion-study .room-opening p { max-width: 34ch; padding-bottom: .25rem; color: var(--room-muted); }
.motion-study .room-air { position: relative; height: clamp(13rem, 24vw, 22rem); margin-block: 2rem; }
.motion-study .room-air .scene-anchor { inset: 1rem 8%; }
.motion-study .room-photograph { width: min(88%, 68rem); margin-left: auto; }
.motion-study .room-photograph img { aspect-ratio: 1400 / 934; }
.motion-study .room-photograph figcaption { text-align: right; margin-inline-start: auto; }

.motion-study .scene--portrait {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12%;
  padding: clamp(7rem, 14vw, 13rem) var(--edge);
}
.motion-study .about-copy p { max-width: 27ch; margin-top: 1.75rem; color: var(--room-muted); }
.motion-study .portrait-air { position: relative; height: clamp(10rem, 16vw, 15rem); margin-top: 3rem; }
.motion-study .portrait-air .scene-anchor { inset: .75rem 0; }
.motion-study .portrait-photograph { width: 100%; max-width: 31.25rem; justify-self: end; }
.motion-study .working-portrait { aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% center; }

.motion-study .scene--close {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 5%;
  padding: 4rem var(--edge) 7rem;
  min-height: 39rem;
}
.motion-study .close-copy h2 { font-size: clamp(3.25rem, 6.2vw, 5.6rem); }
.motion-study .close-intro { max-width: 34ch; margin-top: 2rem; color: var(--room-muted); }
.motion-study .preview-note { max-width: 38ch; margin-top: 1.25rem; color: var(--room-muted); font-size: .875rem; }
.motion-study .close-air { position: relative; height: clamp(17rem, 30vw, 29rem); }
.motion-study .close-air .scene-anchor { inset: 1rem 0; }

.motion-study .study-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-inline: var(--edge);
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--room-line);
  color: var(--room-muted);
  font-size: .8125rem;
}
.motion-study .study-footer a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 64rem) {
  .motion-study .study-header { padding-right: var(--edge); align-items: flex-start; }
  .motion-study .wordmark { margin-right: 15rem; }
  .motion-study nav { flex-basis: 100%; }
  .motion-study .scene--record { min-height: max(30rem, calc(100svh - 10rem)); }
  .motion-study .hero-copy { width: 43%; }
  .motion-study .hero-art { right: 1.5%; width: 51%; }
  .motion-study h1 { font-size: clamp(3.4rem, 7.3vw, 4.6rem); }
  .motion-study .room-opening { grid-template-columns: 1.2fr 1fr; gap: 3rem 6%; }
  .motion-study h2 { font-size: clamp(2.65rem, 5.2vw, 3.6rem); }
  .motion-study .scene--portrait { gap: 8%; }
  .motion-study .scene--close { grid-template-columns: 1.35fr 1fr; }
  .motion-study .close-copy h2 { font-size: clamp(2.8rem, 6.2vw, 4rem); }
}

@media (max-width: 43.75rem) {
  html[data-study="room"] { scroll-padding-top: 5.5rem; }
  .motion-study .motion-controls {
    top: 0;
    right: 0;
    left: 0;
    padding: calc(.5rem + env(safe-area-inset-top)) var(--edge) .5rem;
    border-bottom: 1px solid var(--room-line);
    background: var(--room-ground);
  }
  /* .8125rem, not .75: 12px was the smallest text anywhere on the site and the
     only size below the small print everywhere else, and it only ever appeared on
     a phone, which is where small text is hardest. It sits in the fixed control
     bar, so the size costs the page nothing — no reflow, no re-wrap. */
  .motion-study .controls-note { display: block; margin-right: auto; color: var(--room-muted); font-size: .8125rem; }
  .motion-study .study-header { padding-top: calc(5.25rem + env(safe-area-inset-top)); padding-bottom: 1rem; gap: .875rem; }
  .motion-study .wordmark { margin-right: 0; font-size: 1.5rem; }
  .motion-study nav { gap: .25rem 1.75rem; }
  .motion-study .scene--record { display: block; min-height: 0; padding-top: 1.5rem; padding-bottom: 2rem; }
  .motion-study .hero-copy { width: 100%; max-width: 30rem; }
  .motion-study h1 { font-size: clamp(3.7rem, 13vw, 5.3rem); }
  .motion-study .hero-intro { max-width: 34ch; margin-top: 1.25rem; }
  .motion-study .hero-art {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: clamp(21rem, 75vw, 33rem);
    margin-top: 2.5rem;
    transform: none;
  }
  .motion-study .scene--room { padding-top: 5rem; }
  .motion-study .room-opening { display: block; }
  .motion-study h2 { font-size: clamp(2.55rem, 8.7vw, 3.7rem); }
  .motion-study .room-opening p { margin-top: 1.75rem; max-width: 35ch; }
  .motion-study .room-air { height: 11rem; margin-block: 1.5rem; }
  .motion-study .room-air .scene-anchor { inset: .75rem 0; }
  .motion-study .room-photograph { width: 100%; }
  .motion-study .room-photograph figcaption { text-align: left; margin-inline-start: 0; }
  .motion-study .scene--portrait { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 6rem; }
  .motion-study .about-copy p { max-width: 29ch; margin-top: 1.5rem; }
  .motion-study .portrait-air { height: 8rem; margin-top: 2rem; }
  .motion-study .portrait-photograph { max-width: 28rem; justify-self: start; }
  .motion-study .scene--close { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; padding-top: 1rem; padding-bottom: 3rem; }
  .motion-study .close-copy h2 { font-size: clamp(3rem, 10.8vw, 4.6rem); }
  .motion-study .close-intro { margin-top: 1.5rem; }
  .motion-study .close-air { height: 13rem; }
  .motion-study .study-footer { align-items: flex-start; gap: .5rem 1rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .motion-study .study-footer p:first-child { flex-basis: 100%; }
}

@media (max-width: 22rem) {
  .motion-study .controls-note { display: none; }
  .motion-study .motion-controls { justify-content: flex-end; }
  .motion-study nav { column-gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-study="room"] { scroll-behavior: auto; }
}

@media (scripting: none) {
  .motion-study .motion-controls,
  .motion-study .motion-surface,
  .motion-study .art-instruction { display: none; }
  .motion-study .fallback-note { display: block; }
  .motion-study .study-header { padding-top: 1.75rem; padding-right: var(--edge); }
  .motion-study .wordmark { margin-right: 0; }
  .motion-study .no-script-note { margin-top: 1.5rem; }
}