/* Tokens are fixed by ADR 0004. No colour is written below this block. */
:root {
  --font-body-family: Assistant, sans-serif;
  --font-heading-family: Assistant, sans-serif;

  --ground-dominant: #663019;
  --ground-secondary: #242833;
  --ground-relief: #FFFFFF;
  --ink-relief: #121212;
  --accent: #334FB4;

  --header-height: 5.6rem;
  --header-cluster: 2.4rem; /* the reference's right-hand icon cluster, kept as space */
  --gutter: 1.6rem;
  --measure: 62rem;
}

@media (min-width: 750px) {
  :root {
    --header-height: 8rem;
    --header-cluster: 13.2rem;
    --gutter: 3.2rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 62.5%; }

body {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  line-height: 1.6;
}

h1, h2 {
  font-family: var(--font-heading-family);
  font-weight: 400;
  line-height: 1.2;
}

a { color: inherit; }

.scheme-dominant { background: var(--ground-dominant); color: var(--ground-relief); }
.scheme-secondary { background: var(--ground-secondary); color: var(--ground-relief); }
.scheme-relief { background: var(--ground-relief); color: var(--ink-relief); }

.policies a { color: var(--accent); }

.announcement {
  margin: 0;
  padding: 1rem var(--gutter);
  background: var(--ground-secondary);
  color: var(--ground-relief);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}

/* Logo only. The side columns hold the geometry the reference gives its
   icon cluster, so the bar keeps its proportions without the controls. */
.header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-height);
  padding: 0 var(--gutter);
  transition: transform 0.15s ease;
}

.header--hidden { transform: translateY(-100%); }

.header__spacer { min-width: var(--header-cluster); }

.header__logo {
  font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 2rem);
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}

main { display: block; }

.placeholder,
.policies {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 6.4rem var(--gutter);
}

.placeholder { min-height: 60vh; }
.placeholder h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); margin-top: 0; }

.policies h1 { font-size: clamp(2.8rem, 7vw, 4.8rem); margin-top: 0; }
.policies h2 { font-size: 2.2rem; margin-top: 4.8rem; }

.policies__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.footer {
  padding: 4.8rem var(--gutter);
  text-align: center;
  font-size: 1.4rem;
}

.footer p { margin: 0.4rem 0; }
.footer__name { font-weight: 700; }

:target { scroll-margin-top: calc(var(--header-height) + 2rem); }

/* Clip beats: full-width, one per Clip, a facade until pressed. Deliberately
   no group wrapper and no shared heading — they are beats in the scroll, not a
   strip (#21). */
.clip { margin: 3.2rem 0 6.4rem; }

.clip__facade,
.clip__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.clip__facade {
  position: relative;
  padding: 0;
  background: var(--ground-secondary);
  color: inherit;
  cursor: pointer;
}

.clip__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The play affordance. Drawn, not an asset — none of the reference site's
   artwork is used. */
.clip__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink-relief) 55%, transparent);
  box-shadow: 0 0 0 0.2rem var(--ground-relief) inset;
}

.clip__play::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 54%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 1.1rem 0 1.1rem 1.8rem;
  border-color: transparent transparent transparent var(--ground-relief);
}

.clip__facade:focus-visible { outline: 0.3rem solid var(--accent); outline-offset: 0.3rem; }

.clip__title {
  max-width: var(--measure);
  margin: 1.6rem auto 0;
  padding: 0 var(--gutter);
  font-size: 1.6rem;
}

/* ── Homepage beats (#22) ────────────────────────────────────────────────
   The scroll is a list of beats. Banners carry photographs, the shop row and
   the body carry the dominant ground, and the announcement, footer and Clip
   facades carry the secondary — roughly the 60/35 split the tokens ask for,
   with white relief kept for the header and /policies. */

.hero {
  max-width: 1200px;
  margin: 0 auto;
}

/* The day-one state: no footage, so the still runs full width and takes the
   banner beats' proportions rather than a video's. */
.hero--still { max-width: none; }
.hero--still .hero__media { aspect-ratio: 1 / 1; }

@media (min-width: 750px) {
  .hero--still .hero__media { aspect-ratio: 3 / 2; }
}

.hero__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* The loop beat, directly under the opener. Centred like the hero, and sat on
   white by `scheme-relief` in the markup: the body is `scheme-dominant`, so
   past 1200px the dominant ground would otherwise show as two bands either side
   of the footage. */
.reel__media {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.banner {
  position: relative;
  margin: 0;
}

.banner__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (min-width: 750px) {
  .banner__media { aspect-ratio: 3 / 2; }
}

/* The reference's banner text box, kept as a legible slab rather than bare
   type over a photograph. */
.banner__text {
  padding: 3.2rem var(--gutter);
  background: var(--ground-secondary);
  color: var(--ground-relief);
  font-size: 1.6rem;
  line-height: 1.5;
}

@media (min-width: 750px) {
  .banner__text {
    position: absolute;
    inset: auto auto 4rem 4rem;
    max-width: 54rem;
    padding: 3.2rem;
    background: color-mix(in srgb, var(--ink-relief) 72%, transparent);
    font-size: 1.8rem;
  }
}

/* The crew paragraph, inside a banner's text box. Held to a readable measure
   rather than running the full width of the slab. */
.crew__text { max-width: 46rem; }

.beat {
  padding: 8rem var(--gutter);
}

.shop { text-align: center; }

.shop__empty {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.3;
}

/* ── Scroll reveal (#23) ──────────────────────────────────────────────────
   The hidden state is scoped to .js-reveal, a class only /reveal.js sets, and
   it sets it only when it is actually going to animate. No script, no
   IntersectionObserver, or reduced motion means the class never lands and the
   page renders as though these rules were not here. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Motion is opted out of at the operating-system level, and this honours it
   for everything on the page. It sits last so it wins on ordering, and it
   forces reveal targets visible even if the document somehow got flagged. */
@media (prefers-reduced-motion: reduce) {
  .header { transition: none; }
  html { scroll-behavior: auto; }

  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}