/* Components from the Figma Components page (43:6). Sizes that are component
   dimensions in Figma (wordmark widths, 44 control, 48 social box) are noted
   where they are not tokens. */

/* ---------- Header (95:625) ---------- */

.site-header {
  --wordmark-w: 140px; /* Figma Header brand slot */
  position: fixed;
  top: var(--layout-frame);
  left: var(--layout-frame);
  right: var(--layout-frame);
  z-index: 50;
  color: var(--text-primary);
}

.site-header__glass {
  position: absolute;
  inset: 0;
  /* Figma: surface/glass at 60% paint opacity, border/glass at 12%, background blur 24. */
  background: color-mix(in srgb, var(--surface-glass) 60%, transparent);
  border-bottom: var(--stroke-hairline) solid color-mix(in srgb, var(--border-glass) 12%, transparent);
  -webkit-backdrop-filter: blur(calc(var(--space-24) / 2));
  backdrop-filter: blur(calc(var(--space-24) / 2));
}

/* header.js trims the glass where red passes under the header. The box itself
   is cut (not clipped), so the blur never picks up the red beyond the edge.
   It also reaches up to the screen edge when the top frame strip is off. */
.site-header .site-header__glass {
  top: calc(var(--glass-clip-top, 0px) - var(--header-ext, 0px));
  bottom: var(--glass-clip-bottom, 0px);
}

/* Cut at a red edge: no hairline, and the blur fades off (it would pull the
   red from below the edge up into the glass). */
.site-header__glass.is-cut {
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header__glass[hidden] {
  display: none;
}

/* Over red chapters: same red as the chapter, so it reads as clear but hides
   what scrolls under it. header.js sets the clip (hidden until then). */
.site-header__red {
  position: absolute;
  inset: 0;
  background: var(--surface-frame);
  clip-path: inset(var(--red-clip-top, 100%) 0 var(--red-clip-bottom, 0px) 0);
}

/* Home only (a trial; DESIGN-NOTES 67): over red, a white line one device
   pixel thin along the header's bottom edge. It shows only where the red
   reaches that edge (the clip above cuts it with the red). */
.home .site-header__red {
  box-shadow: inset 0 calc(var(--stroke-hairline) * -1) var(--color-base-white);
}

@media (min-resolution: 2dppx) {
  .home .site-header__red {
    box-shadow: inset 0 calc(var(--stroke-hairline) * -0.5) var(--color-base-white);
  }
}

.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24) var(--page-inset);
}

.site-header__brand .wordmark {
  width: var(--wordmark-w);
}

.site-header__page {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: var(--space-8);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-transform: uppercase; /* Figma writes the page name in caps ("THE WORK") */
}

.site-header__page-count {
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .site-header {
    --wordmark-w: 112px; /* Figma Header mobile Glass/Clear */
  }

  .site-header__page {
    display: none;
  }
}

/* ---------- Icon buttons (92:98) ---------- */

.icon-button {
  display: inline-grid;
  place-items: center;
  width: calc(var(--space-48) - var(--space-4));
  height: calc(var(--space-48) - var(--space-4));
  flex: none;
  transition: background-color 0.2s var(--motion-easing-standard), color 0.2s var(--motion-easing-standard);
}

.menu-lines {
  display: grid;
  gap: var(--space-4);
  width: var(--space-24);
}

.menu-lines i {
  display: block;
  height: var(--stroke-focus);
  border-radius: var(--stroke-hairline);
  background: currentColor;
}

/* Figma: the three lines sit flush right in the 44 box, so they align with the inset. */
.icon-button--menu {
  place-items: center end;
}

.icon-button--menu:hover {
  color: var(--color-red-500);
}

/* Over a red chapter the header is red, so the hover turns black (DESIGN-NOTES 31). */
.site-header.is-over-red .icon-button--menu:hover {
  color: var(--color-base-black);
}

/* Compact header (desktop, Home from Highlights on; DESIGN-NOTES 34): the
   wordmark fades away, the menu button crosses to the left dimmed and with a
   light motion blur (so the eye is not pulled), and the background
   closes in around it. header.js sets .is-compact (and .has-moved after the
   first change, so nothing plays on load), --menu-shift and --compact-w. */
.site-header {
  --compact-time: calc(var(--motion-entrance-duration) * 2.8); /* about 2 s */
}

.site-header__red {
  transition: right var(--compact-time) var(--motion-easing-standard);
}

.site-header__glass {
  transition:
    right var(--compact-time) var(--motion-easing-standard),
    backdrop-filter 200ms var(--motion-easing-standard),
    -webkit-backdrop-filter 200ms var(--motion-easing-standard);
}

.site-header__red {
  top: calc(var(--header-ext, 0px) * -1); /* up to the screen edge when the top frame strip is off */
}

.site-header__brand {
  transition:
    opacity calc(var(--compact-time) * 0.5) var(--motion-easing-standard),
    transform var(--compact-time) var(--motion-easing-standard),
    visibility 0s;
}

.site-header .icon-button--menu {
  transition:
    color var(--hover-duration) var(--motion-easing-standard),
    transform var(--compact-time) var(--motion-easing-standard);
}

.site-header.is-compact {
  pointer-events: none; /* the empty bar lets clicks through to the page */
}

/* Only the glass closes in to a box. Over red the red layer stays full width
   (red on red, so it reads as clear), so text scrolling up under the header is
   cut along one straight line instead of by a small box (DESIGN-NOTES 50). */
.site-header.is-compact .site-header__glass {
  right: calc(100% - var(--compact-w, 100%));
}

.site-header.is-compact .site-header__brand {
  opacity: 0;
  transform: translateX(calc(var(--space-24) * -1));
  visibility: hidden;
  transition:
    opacity calc(var(--compact-time) * 0.4) var(--motion-easing-standard),
    transform var(--compact-time) var(--motion-easing-standard),
    visibility 0s linear var(--compact-time);
}

.site-header.is-compact .icon-button--menu {
  pointer-events: auto;
  transform: translateX(var(--menu-shift, 0px));
}

/* The smear goes on the lines, not the button, so it never scales the travel. */
.site-header.is-compact .menu-lines {
  animation: menu-cross-a var(--compact-time) var(--motion-easing-standard);
}

.site-header.has-moved:not(.is-compact) .menu-lines {
  animation: menu-cross-b var(--compact-time) var(--motion-easing-standard);
}

.site-header.is-instant :is(.site-header__glass, .site-header__red, .site-header__brand, .icon-button--menu) {
  transition: none;
}

.site-header.is-instant .menu-lines {
  animation: none;
}

/* While it crosses, the button stays in view: it dims to 45% and smears a
   little in the direction of travel (stretched along x, slightly blurred),
   like a motion blur, then settles sharp. The same curve twice, so each change
   of direction restarts it. */
@keyframes menu-cross-a {
  0% { opacity: 1; scale: 1 1; filter: blur(0); }
  30%, 60% { opacity: 0.45; scale: 1.6 1; filter: blur(1.5px); }
  100% { opacity: 1; scale: 1 1; filter: blur(0); }
}

@keyframes menu-cross-b {
  0% { opacity: 1; scale: 1 1; filter: blur(0); }
  30%, 60% { opacity: 0.45; scale: 1.6 1; filter: blur(1.5px); }
  100% { opacity: 1; scale: 1 1; filter: blur(0); }
}

.icon-button--close {
  background: var(--color-red-500);
  color: var(--color-base-white);
}

.icon-button--close:hover {
  background: var(--color-base-white);
  color: var(--color-red-500);
}

.icon-button--outline {
  border: var(--stroke-control) solid var(--border-strong);
}

.icon-button--outline:hover {
  background: var(--border-strong);
  color: var(--surface-canvas);
}

/* ---------- Button (84:14) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-32);
  border: var(--stroke-control) solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: var(--font-family-brand);
  font-size: var(--font-size-button);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s var(--motion-easing-standard), color 0.2s var(--motion-easing-standard);
}

.button:hover {
  background: var(--border-strong);
  color: var(--surface-canvas);
}

.button:focus-visible {
  outline: 0;
  border-width: var(--stroke-focus);
  border-color: var(--border-focus);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.4; /* Figma State=Disabled */
  pointer-events: none;
}

.button[aria-busy="true"] {
  pointer-events: none;
}

.button__spinner {
  width: var(--space-24);
  height: var(--space-24);
  margin: calc(var(--space-4) * -0.5);
  border: var(--stroke-focus) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: racoob-spin 0.8s linear infinite;
}

@keyframes racoob-spin {
  to { transform: rotate(1turn); }
}

/* ---------- Link (335:1815) ---------- */

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-primary);
  transition: color 0.2s var(--motion-easing-standard), gap 0.2s var(--motion-easing-standard);
}

.link:hover {
  gap: var(--space-12);
  color: var(--text-secondary);
}

/* ---------- Nav item (89:63) ---------- */

.nav-list {
  display: grid;
  gap: var(--space-8);
  justify-items: start;
}

/* Hover timing for nav items and socials. Not a Figma variable yet
   (proposed as motion/hover/duration, see DESIGN-NOTES 25). */
:root {
  --hover-duration: 500ms;
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) 0;
  transition: padding var(--hover-duration) var(--motion-easing-standard), color var(--hover-duration) var(--motion-easing-standard);
}

.nav-item:hover {
  padding-left: var(--space-16);
}

.nav-item--footer:hover,
.nav-item--footer[aria-current="page"] {
  color: var(--text-accent);
}

.nav-item__marker {
  position: absolute;
  left: calc(var(--space-12) * -2);
  top: 50%;
  width: var(--space-12);
  height: var(--space-12);
  margin-top: calc(var(--space-12) / -2);
  background: var(--text-accent);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--hover-duration) var(--motion-easing-standard), transform var(--hover-duration) var(--motion-easing-standard);
}

/* Hover shows a soft marker; only the current page keeps it solid. */
.nav-item--menu:hover .nav-item__marker {
  opacity: 0.24;
  transform: none;
}

.nav-item--menu[aria-current="page"] .nav-item__marker {
  opacity: 1;
  transform: none;
}

/* ---------- Social link (89:96) ---------- */

.socials {
  display: flex;
  gap: var(--space-8);
}

.social-link {
  display: grid;
  place-items: center;
  width: var(--space-48);
  height: var(--space-48);
  color: var(--text-primary);
  transition: color var(--hover-duration) var(--motion-easing-standard);
}

.social-link .icon {
  width: var(--space-32);
  height: var(--space-32);
}

.social-link:hover {
  color: var(--text-accent);
}

/* ---------- Contact item (92:133) ---------- */

.contact-item {
  display: grid;
  gap: var(--space-8);
  justify-items: start;
}

.contact-item__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.contact-item__label .icon {
  width: calc(var(--space-16) + var(--space-4));
  height: calc(var(--space-16) + var(--space-4));
  color: var(--text-accent);
}

/* ---------- Menu overlay (Header, State=Open) ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 0 var(--page-margin);
  /* Ink at 90% with a soft background blur, so the page shows faintly
     underneath (DESIGN-NOTES 26). Figma blur 16 = CSS blur 8. */
  background: color-mix(in srgb, var(--surface-canvas) 90%, transparent);
  -webkit-backdrop-filter: blur(calc(var(--effect-glass-blur) / 2));
  backdrop-filter: blur(calc(var(--effect-glass-blur) / 2));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-overlay[hidden] {
  display: none;
}

.menu-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--space-48) + var(--space-96) + var(--space-4)); /* 48 top + 100 brand slot */
  padding-top: var(--space-48);
}

.menu-overlay__top-brand {
  visibility: hidden;
}

.menu-overlay__top-brand .wordmark {
  width: 168px; /* Figma menu tablet top bar */
}

.menu-overlay__body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--layout-gutter);
  align-items: center;
  padding-bottom: var(--layout-section-y);
}

.menu-overlay__main {
  grid-column: 1 / span 6;
  display: grid;
  gap: var(--space-48);
  justify-items: start;
}

.menu-overlay__brand {
  display: grid;
  gap: var(--space-8);
}

.menu-overlay__brand .wordmark {
  width: 196px; /* Figma menu desktop Brand */
}

.menu-overlay__divider {
  width: 196px;
  height: var(--stroke-hairline);
  background: var(--border-default);
}

.menu-overlay__contact {
  grid-column: 8 / span 5;
  display: grid;
  gap: var(--space-32);
  justify-items: start;
}

@media (max-width: 1199px) {
  .menu-overlay__top {
    min-height: 0;
  }

  .menu-overlay__top-brand {
    visibility: visible;
  }

  .menu-overlay__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-64);
    padding-bottom: var(--space-48);
  }

  .menu-overlay__brand,
  .menu-overlay__divider {
    display: none;
  }
}

@media (max-width: 767px) {
  .menu-overlay__top-brand .wordmark {
    width: 140px; /* Figma menu mobile top bar */
  }
}

/* Open and close (not in Figma, DESIGN-NOTES 27). header.js adds .is-open a
   frame after showing the overlay: the ink and its blur fade in, then the
   brand, divider, nav items and contact rise in a stagger on the entrance
   curve (--i sets the order). Closing is one quick fade, no stagger. */
@media (prefers-reduced-motion: no-preference) {
  .menu-overlay {
    --menu-fade: calc(var(--motion-entrance-duration) * 0.6);
    opacity: 0;
    transition: opacity var(--menu-fade) var(--motion-easing-standard);
  }

  .menu-overlay:not(.is-open) {
    transition-duration: calc(var(--menu-fade) * 0.75);
  }

  .menu-overlay.is-open {
    opacity: 1;
  }

  .menu-overlay__brand,
  .menu-overlay__divider,
  .menu-overlay .nav-list > li,
  .menu-overlay__contact > * {
    opacity: 0;
    transform: translateY(var(--space-48));
    transition:
      opacity calc(var(--menu-fade) * 0.75) var(--motion-easing-standard),
      transform calc(var(--menu-fade) * 0.75) var(--motion-easing-standard);
  }

  .menu-overlay__divider {
    transform: scaleX(0);
    transform-origin: left center;
  }

  .menu-overlay.is-open :is(.menu-overlay__brand, .menu-overlay__divider, .nav-list > li, .menu-overlay__contact > *) {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--motion-entrance-duration) var(--motion-easing-standard),
      transform var(--motion-entrance-duration) var(--motion-entrance-easing);
    transition-delay: calc(var(--menu-fade) * 0.3 + var(--i, 0) * 60ms);
  }

  .menu-overlay.is-open .menu-overlay__divider {
    transition-timing-function: var(--motion-easing-standard);
  }

  .menu-overlay__divider { --i: 1; }
  .menu-overlay__contact > :nth-child(1) { --i: 8; }
  .menu-overlay__contact > :nth-child(2) { --i: 9; }
  .menu-overlay__contact > :nth-child(3) { --i: 10; }
}

/* ---------- Footer (90:138) ---------- */

.site-footer {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--surface-canvas);
}

.site-footer__main {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--layout-gutter);
  align-items: center;
  padding: var(--layout-section-y) var(--page-margin);
}

.site-footer__menu {
  grid-column: 1 / span 6;
}

.site-footer__brand {
  grid-column: 8 / span 5;
  display: grid;
  gap: var(--space-24);
  justify-items: center;
  text-align: center;
}

.site-footer__brand .wordmark {
  width: 280px; /* Figma Footer desktop */
}

.site-footer__tagline {
  font-size: var(--font-size-body-lead);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.site-footer__copyright {
  padding: var(--space-16);
  background: var(--color-base-black);
  color: var(--color-base-white);
  text-align: center;
}

@media (max-width: 1199px) {
  .site-footer__main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .site-footer__brand {
    justify-items: start;
    text-align: left;
  }

  .site-footer__brand .wordmark {
    width: 224px; /* Figma Footer tablet */
  }
}

@media (max-width: 767px) {
  .site-footer__brand .wordmark {
    width: 168px; /* Figma Footer mobile */
  }

  /* Mobile tagline uses Body/Strong */
  .site-footer__tagline {
    font-size: var(--font-size-button);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
  }
}

/* ---------- Video player (Media/Video player 337:10247) ---------- */

.media-player {
  display: grid;
  gap: var(--space-24);
  margin: 0;
}

.media-player__mat {
  padding: var(--space-16);
  background: var(--surface-canvas);
}

.media-player__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-base-black);
}

.media-player__poster,
.media-player__frame video,
.media-player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.media-player__frame:not(.is-playing)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-base-black) 35%, transparent);
}

.play-button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--space-128);
  height: var(--space-128);
  border-radius: 50%;
  background: var(--color-base-white);
  color: var(--color-red-500);
  transition: transform 0.25s var(--motion-easing-standard);
}

.play-button svg {
  width: calc(var(--space-32) + var(--space-8));
  margin-left: var(--space-4);
}

.play-button:hover {
  transform: scale(1.06);
}

.media-player--m .play-button {
  width: var(--space-96);
  height: var(--space-96);
}

.media-player--m .play-button svg {
  width: calc(var(--space-24) + var(--space-4) + var(--stroke-focus));
}

.media-player__caption {
  font-size: var(--font-size-body-lead);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.is-playing .play-button,
.is-playing .media-player__poster {
  display: none;
}

.media-player--bare .media-player__mat {
  padding: 0;
  background: none;
}

.media-player--bare {
  gap: var(--space-12);
}

.media-player--bare .media-player__caption {
  font-size: var(--font-size-body-m);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text-secondary);
}

/* ---------- Two-tone standfirst: first sentence primary (the H1), rest secondary, Heading/1 Light ---------- */

.standfirst {
  font-size: var(--font-size-heading-1);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--text-secondary);
}

.standfirst > * {
  display: inline;
  font: inherit;
}

.standfirst__lead {
  color: var(--text-primary);
}