/* ============================================================================
   Multi-Hyphenate — design foundation
   ----------------------------------------------------------------------------
   TYPE DECISION (documented, do not relitigate per page):

   Wordmark    → the canonical image mark. It is never rebuilt as live type.
   Anybody     → display. Variable (wght 100-900, wdth 50-150). Set slightly
                 narrow and heavy so headings read like a title card instead of
                 an agency banner. Ships locally as woff2.
   PT Serif    → editorial body, ledes, pull quotes. Ships locally.
   system mono → index numbers, nav, meta, small labels. No download cost.

   Syne is banned by tools/check-site.mjs. Berkshire Swash is excluded from
   dist by tools/build.mjs, so it cannot be used in production CSS.
   CSP is default-src 'self': every face here is local. No CDN.
   ----------------------------------------------------------------------------
   TOKEN CONTRACT — the names below are frozen. Other pages code against them.
   Rename nothing. Add if you must.
   ========================================================================= */

@font-face {
  font-family: "Anybody";
  src: url("../assets/fonts/anybody-latin-standard-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("../assets/fonts/pt-serif-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("../assets/fonts/pt-serif-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* THE RAIL HEIGHT, defined once, here, because base.css is the only
     stylesheet all six routes load. It used to live in chrome.css, which the
     landing does not load — so the landing fell back to a container-relative
     `8.2cqh` while every other page used chrome.css's viewport clamp. Two
     formulas, and the rail changed height between the landing and the rest of
     the site. Viewport units, not container units, so it cannot depend on
     which element it happens to be resolved inside. */
  --mh-bottom-nav-h: max(4.75rem, 8.2svh);

  /* Ground. Deep teal, not black. */
  --ground: #062b30;
  --ground-deep: #041e22;
  --ground-raised: #0a3a3f;

  /* Ink on ground. All three clear AA over --ground:
     --paper 12.8:1, --paper-dim 8.5:1, --paper-faint 5.6:1 */
  --paper: #f4ece0;
  --paper-dim: #c8c3b6;
  --paper-faint: #97a09a;

  /* Brand. --gold 7.8:1 and --coral 5.2:1 over --ground, both safe as text.
     --teal-accent is a RULE AND FILL colour only. Never set text in it. */
  --gold: #f2ad63;
  --coral: #e87945;
  --teal-accent: #0d5155;
  --mh-nav-accent: #ef5c32;

  --line: rgba(244, 236, 224, 0.15);
  --line-strong: rgba(244, 236, 224, 0.32);

  --font-display: "Anybody", "Helvetica Neue", Arial, sans-serif;
  --font-body: "PT Serif", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* One title-rail voice shared by the landing nav and inner-page chrome. */
  --mh-nav-size: max(1rem, 3.45svh);
  --mh-nav-tracking: 0.24em;
  --mh-nav-weight: 560;
  --mh-nav-hover-weight: 760;
  --mh-nav-stretch: 66%;
  --mh-nav-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --step--1: clamp(0.8rem, 0.76rem + 0.16vw, 0.88rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.14rem);
  --step-1: clamp(1.12rem, 1rem + 0.55vw, 1.4rem);
  --step-2: clamp(1.3rem, 1.05rem + 1.15vw, 1.85rem);
  --step-3: clamp(1.55rem, 1.15rem + 1.9vw, 2.5rem);
  --step-4: clamp(1.9rem, 1.25rem + 3.1vw, 3.5rem);
  --step-5: clamp(2.3rem, 1.4rem + 4.6vw, 5rem);
  --step-6: clamp(2.6rem, 1.45rem + 7.4vw, 7.4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  --space-7: clamp(3rem, 2rem + 3.2vw, 5rem);
  --space-8: clamp(4.5rem, 3rem + 5vw, 8rem);
  --space-9: clamp(7rem, 4rem + 10vw, 13rem);

  /* Matched to chrome.css --mh-pad / --mh-header-h so page gutters line up
     with the header's own edges at every width. Change both or neither. */
  --page-pad: clamp(1.15rem, 4vw, 4.5rem);
  --header-h: clamp(4.4rem, 5.4vw, 6rem);

  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;

  color-scheme: dark;
}

@media (max-width: 560px), (max-aspect-ratio: 4 / 5) {
  :root {
    --mh-nav-size: clamp(1.05rem, 5.1vw, 1.42rem);
    --mh-nav-tracking: 0.14em;
  }
}

/* ---------------------------------------------------------------- elements */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 17.5rem;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--paper);
  background: var(--ground);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* js/shared.js measures the real chrome and publishes --mh-header-h; fall back
   to the static token before it runs so nothing jumps. */
body:not(.home) {
  padding-top: 0;
}

:where(section, article, div)[id] {
  scroll-margin-top: calc(var(--mh-header-h, var(--header-h)) + var(--space-5));
}

body > main,
body > section,
body > footer {
  position: relative;
  z-index: 1;
}

img,
video,
iframe,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

hr {
  height: 1px;
  margin: 0;
  background: var(--line);
  border: 0;
}

::selection {
  color: var(--ground-deep);
  background: var(--gold);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Gold on gold is invisible: swap the ring on warm-filled controls. */
.skip-link:focus-visible {
  outline-color: var(--paper);
}

/* The filter is injected as an invisible SVG definition by the shared and
   landing scripts. It never occupies layout or enters the accessibility tree. */
.mh-nav-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.mh-bottom-rail a > span,
.optical-nav a > span {
  display: inline-block;
}

.mh-bottom-rail a:hover > span,
.mh-bottom-rail a:focus-visible > span,
.optical-nav a:hover > span,
.optical-nav a:focus-visible > span {
  filter: url("#mh-nav-liquid");
}

/* -------------------------------------------------------------- typography */

h1,
h2,
h3,
h4,
.display {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 680;
  font-stretch: 92%;
  font-variation-settings: "wdth" 92, "wght" 680;
  line-height: 0.94;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-6);
  line-height: 0.9;
  letter-spacing: -0.034em;
}

h2 {
  font-size: var(--step-5);
}

h3 {
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.022em;
}

h4 {
  font-size: var(--step-1);
  line-height: 1.1;
}

p {
  margin: 0 0 var(--space-5);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--step--1);
}

.lede {
  max-width: 32rem;
  color: var(--paper-dim);
  font-size: var(--step-1);
  line-height: 1.5;
  text-wrap: pretty;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- utilities */

.wrap {
  width: min(100%, 96rem);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* -------------------------------------------------------------- skip + nav */

.skip-link {
  position: fixed;
  left: var(--space-4);
  top: var(--space-3);
  z-index: 150;
  padding: 0.7rem 0.9rem;
  color: var(--ground-deep);
  background: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Motion is a user choice, so the control stays visibly textual and easy to
   find without becoming another rounded component in the chrome. */
.motion-toggle {
  position: fixed;
  left: calc(29.2% + clamp(0.55rem, 1.075vw, 1.2rem));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 240;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  color: #080b0a;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  transform: translateX(-50%);
  transition: color var(--dur-fast) var(--ease);
}

.motion-toggle::before {
  content: "Ⅱ";
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62, "wght" 780;
  line-height: 1;
}

.motion-toggle:hover,
.motion-toggle:focus-visible {
  color: var(--ground-deep);
}

.motion-toggle[aria-pressed="true"] {
  color: var(--ground-deep);
}

.motion-toggle[aria-pressed="true"]::before {
  content: "▶";
  font-size: 0.8rem;
}

.motion-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.noscript-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  padding-inline: var(--page-pad);
  overflow-x: auto;
  color: var(--paper);
  background: var(--ground-deep);
  border-bottom: 1px solid var(--line-strong);
  scrollbar-width: thin;
}

.noscript-nav a {
  flex: 0 0 auto;
  padding: 0.8rem 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.noscript-nav a:first-child {
  margin-right: auto;
  padding-left: 0;
  color: var(--gold);
}

/* The house call to action: a drawn arrow with a restrained pointer nudge. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}

.arrow-link .arrow {
  position: relative;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.arrow-link .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.arrow-link:hover,
.arrow-link:focus-visible {
  color: var(--gold);
}

/* ------------------------------------------------------------------ media */

.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  background: var(--ground-deep);
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}

.video-facade:focus-visible img {
  opacity: 1;
}

/* A transform is useful only where a hover pointer actually exists. Touch
   and coarse pointers keep the poster steady instead of receiving a fake
   hover state. */
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover .arrow,
  .arrow-link:focus-visible .arrow {
    transform: translateX(0.28rem);
  }

  .video-facade:hover img {
    opacity: 1;
    transform: scale(1.02);
  }
}

@media (hover: none), (pointer: coarse) {
  .video-facade:hover img,
  .page-work .video-facade:hover img {
    transform: none !important;
  }
}

.play-badge {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 2.9rem;
  height: 2.9rem;
  background: var(--coral);
}

.play-badge::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 0.9rem;
  width: 0;
  height: 0;
  border-top: 0.55rem solid transparent;
  border-bottom: 0.55rem solid transparent;
  border-left: 0.8rem solid var(--ground-deep);
}

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 760px) {
  :root {
    --header-h: 4.3rem;
  }

  .motion-toggle {
    left: calc(31.8% + clamp(0.55rem, 1.075vw, 1.2rem));
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .mh-bottom-rail a:hover > span,
  .mh-bottom-rail a:focus-visible > span,
  .optical-nav a:hover > span,
  .optical-nav a:focus-visible > span {
    filter: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  .play-badge {
    border: 1px solid ButtonText;
  }

  .arrow-link .arrow,
  .arrow-link .arrow::after {
    border-color: LinkText;
    background: LinkText;
  }

  .motion-toggle {
    color: ButtonText;
    border-color: ButtonText;
  }
}

/* Portrait screens: the landing tessellation is authored against a taller rail,
   so every route steps up together. Lives here, beside the default, because a
   split definition is what made the landing and the inner pages disagree. */
@media (max-width: 560px), (max-aspect-ratio: 4 / 5) {
  :root { --mh-bottom-nav-h: max(4.75rem, 10.4svh); }
}