/* The Collective: the DJ cards on the Collective page and the social links in the
   footer. (Until 2026-09-16 the DJs were doors in the top row too; Miles folded them
   into The Collective, so the row rule below now holds eight doors with room over.)

   Nothing here introduces a colour, a family, a weight or a motion. It is
   spacing and a row that has to hold nine doors instead of seven.

   Own file on purpose: site.css is being worked on at the same desk-width by
   another pass, and these rules have to be able to move on their own. */

/* ---------- nine doors, one row ----------
   Between the phone (which scrolls its row sideways, below 43.75rem) and the wide
   window (which lets the row find its own width), the row is given the whole line
   and has to fit nine doors in it. Measured, not guessed: at 805 the row has 734px
   and the nine doors need 633px of words, so the gap between them has to come in
   from 1.5rem to .75rem or the row wraps, the header grows by 48px, and every
   pinned opening on all ten pages moves. Only the gap changes — no type size, no
   padding, so the header's own height is exactly what it was with seven. */
@media (min-width: 43.76rem) and (max-width: 64rem) {
  .motion-study .site-header nav { column-gap: .75rem; }
}

/* Just above that, the row sits on its own line UNDER the logo and under the motion
   buttons' corner (which ends 16px above it), yet the header still kept 15rem clear on
   the right for those buttons, leaving the eight doors ~700px of an 800px need: from
   1025 to 1125 the row wrapped and the header grew from 153 to 201 (2026-09-18). So in
   that band the row takes the whole line, the way the narrower rule above does. The
   band stops at 80rem, well before ~1350, where the row moves up beside the logo and
   the 15rem is needed again. Measured every 10px 1025-1440 on every page. */
@media (min-width: 64.0625rem) and (max-width: 80rem) {
  .motion-study .site-header { padding-right: var(--edge); }
  .motion-study .site-header nav { flex-basis: 100%; }
}

/* ---------- the four cards on the Collective page ----------
   A card is a run of words with the man's name on it and his photograph under it.
   The photograph is what makes the figure break away at that section, so it is part
   of the card and not decoration. */
.motion-study :is(#dj-miles, #dj-brandon, #dj-lee, #dj-ninja) { margin-top: 2.5rem; }
.motion-study :is(#dj-miles, #dj-brandon, #dj-lee, #dj-ninja) h2 { margin-bottom: .25rem; }
.motion-study :is(#dj-miles, #dj-brandon, #dj-lee, #dj-ninja) + .figure { margin-top: 1rem; }

/* ---------- the footer's two accounts ---------- */
.motion-study .footer-social { margin-bottom: .35rem; }
.motion-study .footer-social a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- "Our DJs" and "Check your date" (2026-09-18) ----------
   After SCE Event Group's menu: the team behind one door, each DJ by name, and the
   one action a client came for set apart as a button at the end of the row. The strip
   hangs under the header (position absolute), so opening it moves nothing on the page
   and the header's measured height is unchanged. */
.motion-study .site-header .nav-djs::after { content: " \25BE"; font-size: .8em; }
.motion-study .site-header .nav-cta {
  padding-inline: .9rem;
  border-radius: var(--room-radius);
  background: var(--room-light);
  color: var(--room-ground);
  font-weight: 500;
}
.motion-study .site-header .nav-cta:hover { text-decoration: none; filter: brightness(1.08); }
.motion-study .site-header .nav-cta[aria-current="page"] { color: var(--room-ground); text-decoration: none; }
.motion-study .dj-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% - .5rem);
  left: var(--edge);
  right: var(--edge);
  border: 1px solid color-mix(in srgb, var(--room-light) 35%, transparent);
  border-radius: var(--room-radius);
  background: var(--room-ground);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .45);
}
.motion-study .dj-menu[hidden] { display: none; }
.motion-study .dj-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin: 0;
  padding: .5rem 1.25rem;
  list-style: none;
}
.motion-study .dj-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.0625rem;
  text-decoration: none;
}
.motion-study .dj-menu a:hover,
.motion-study .dj-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }
@media (max-width: 43.75rem) {
  .motion-study .dj-menu ul { flex-direction: column; padding-block: .75rem; }
}
/* The header and <main> are both layer 1, and <main> comes later, so it paints over
   anything hanging out of the header. While the strip is open the header is lifted to
   3: above <main> (1) and the section plates (2), still under the motion controls (10). */
.motion-study .site-header:has(.dj-menu:not([hidden])) { z-index: 3; }

/* ---------- the rebuild, 2026-09-18 ----------
   The opening film fills the opening section behind the words. It is painted at part
   strength over the dark ground, so the record of light (drawn on the canvas behind
   <main>) shows through it, faded: Miles's "the film with the record faded behind it".
   A gradient from the left keeps the headline readable over any frame. */
.motion-study .scene--record:has(> .hero-film) { overflow: hidden; }
.motion-study .hero-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  pointer-events: none;
}
.motion-study .scene--record:has(> .hero-film)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgb(16 13 18 / .88) 0%, rgb(16 13 18 / .55) 45%, rgb(16 13 18 / 0) 75%);
  pointer-events: none;
}
.motion-study .scene--record:has(> .hero-film) > .hero-copy { position: relative; z-index: 1; }
.motion-study .scene--record:has(> .hero-film) > .hero-art { z-index: 1; }
.motion-study .hero--lead:has(> .hero-film) .hero-copy { width: 48%; max-width: 560px; }
.motion-study .hero--lead:has(> .hero-film) h1 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
.motion-study .hero-copy .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 43.75rem) {
  .motion-study .scene--record:has(> .hero-film)::before {
    background: linear-gradient(180deg, rgb(16 13 18 / .85) 0%, rgb(16 13 18 / .6) 60%, rgb(16 13 18 / .3) 100%);
  }
  .motion-study .hero--lead:has(> .hero-film) .hero-copy { width: auto; }
  .motion-study .hero--lead:has(> .hero-film) h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) { .motion-study .hero-film { opacity: .45; } }

/* A client's own words: set large, in the page's own type, with who said it. */
.motion-study .quote { margin: 2.5rem 0; max-width: 46rem; }
.motion-study .quote blockquote { margin: 0; }
.motion-study .quote blockquote p:first-child {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--room-type);
  text-wrap: balance;
}
.motion-study .quote blockquote p + p { margin-top: .9rem; color: var(--room-muted); font-size: 1.125rem; }
.motion-study .quote-who {
  margin-top: 1rem;
  color: var(--room-light);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The Savvy Sounds logo in the header (2026-09-18: "where the hell is my Savvy Sounds
   logo?"). The old site's own mark, recoloured to the page's cream. It is painted INSIDE
   the typed name's own box, and the letters are made see-through: the header keeps
   exactly the height it was measured and pinned at, at every width, and the name is
   still there for screen readers and search. The file is 528 px wide, drawn at ~180. */
.motion-study .site-header .wordmark {
  color: transparent;
  background: var(--logo) left center / contain no-repeat;
}
.motion-study .site-header .wordmark span { color: transparent; }
.motion-study .site-header .wordmark:focus-visible { outline-color: var(--room-light); }

/* A link row has to look like a link (Miles, 2026-09-18: visitors "don't know that
   these are clickable"). The title is set apart from the words under it: warm light,
   a size up, and an arrow that steps forward on hover. The note stays muted. */
.motion-study .links .link-label { color: var(--room-light); font-size: 1.125rem; }
.motion-study .links .link-arrow { display: inline-block; transition: transform .2s ease; }
.motion-study .links a:hover .link-arrow,
.motion-study .links a:focus-visible .link-arrow { transform: translateX(.25em); }
@media (prefers-reduced-motion: reduce) {
  .motion-study .links .link-arrow { transition: none; }
}
/* The label a size up needs room for its arrow on one line: "Hey Mister DJ on
   Mixcloud" left the arrow alone on a second line in the old 14rem column. */
@media (min-width: 64.0625rem) {
  .motion-study .links a { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}
/* A case study's beat names: The brief, The challenge, The approach, The result. */
.motion-study .copy .beat { display: block; color: var(--room-light); font-weight: 500; margin-bottom: .2rem; }