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

/* ---------- 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; }

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

  /* 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; }
}