/* =========================================================================
   MCM 2001 — base.css
   Design tokens, modern reset, fluid type and spacing scales.
   Tokens live here so the licensed font swap is a one-line change.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
  /* Colour */
  --blue-brand: #14487E;   /* from the supplied mcm-logo.svg */
  --blue-footer: #243D6B;  /* sampled from the wireframe footer field */
  --ink: #111111;
  --ink-muted: #6B6B6B;
  --paper: #FFFFFF;
  --on-blue-dim: rgba(255, 255, 255, .62);

  /* A very light wash of the brand blue, used for image wells and hairlines so
     the neutral areas of the page belong to the palette rather than sitting in
     a generic grey. */
  --blue-tint: #EDEFF3;
  --blue-hairline: rgba(20, 72, 126, .18);

  /* Typography */
  --font-sans: "Neue Haas Grotesk Display", "Helvetica Neue",
               Helvetica, Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.19, 1, .22, 1);
  --dur-fast: .4s;
  --dur: .8s;
  --dur-slow: 1.2s;

  /* Fluid type scale, 375px to 1600px viewport.
     Unbroken resizing rather than breakpoint jumps. */
  --step--2: clamp(.6875rem, .671rem + .07vw, .75rem);
  --step--1: clamp(.8125rem, .779rem + .14vw, .9375rem);
  /* A half step between -2 and -1, for the footer colophon. Resolves 12px to
     13px. See --step-0-5 for why these exist. */
  --step--1-5: clamp(.75rem, .725rem + .1vw, .8125rem);
  --step-0:  clamp(.9375rem, .896rem + .18vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.023rem + .44vw, 1.5rem);
  /* A half step, sitting between 0 and 1. It exists for the project card
     titles, which wanted more presence than --step-0 gave them without taking
     the jump to --step-1. Resolves 17px to 20px. */
  --step-0-5: clamp(1.0625rem, .98rem + .3vw, 1.25rem);
  --step-2:  clamp(1.375rem, 1.153rem + .95vw, 2.1875rem);
  --step-3:  clamp(1.75rem, 1.342rem + 1.74vw, 3.25rem);
  --step-4:  clamp(2.25rem, 1.434rem + 3.48vw, 5.25rem);
  /* A half step between 3 and 4, for the menu panel's links. Resolves 32px to
     72px. See --step-0-5 for why these exist. */
  --step-3-5: clamp(2rem, 1.55rem + 2.9vw, 4.5rem);
  --step-5:  clamp(3rem, 1.776rem + 5.22vw, 7.5rem);

  /* Fluid spacing scale */
  --space-3xs: clamp(.25rem, .236rem + .06vw, .3125rem);
  --space-2xs: clamp(.5rem, .473rem + .12vw, .625rem);
  --space-xs:  clamp(.75rem, .709rem + .18vw, .9375rem);
  --space-s:   clamp(1rem, .946rem + .23vw, 1.25rem);
  --space-m:   clamp(1.5rem, 1.418rem + .35vw, 1.875rem);
  --space-l:   clamp(2rem, 1.796rem + .87vw, 2.75rem);
  --space-xl:  clamp(3rem, 2.592rem + 1.74vw, 4.5rem);
  --space-2xl: clamp(4rem, 3.184rem + 3.48vw, 7rem);
  --space-3xl: clamp(5.5rem, 4.14rem + 5.8vw, 10.5rem);

  /* The generous white margin the wireframe frames the page with */
  --page-margin: clamp(1.125rem, .49rem + 2.7vw, 3.5rem);
  --gutter: clamp(1rem, .49rem + 2.17vw, 2.875rem);

  color-scheme: light;
}

/* -------------------------------------------------------------------------
   2. Reset
   ---------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img,
video {
  height: auto;
}

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

button {
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.1;
}

ul, ol {
  list-style: none;
  padding: 0;
}

address {
  font-style: normal;
}

figure {
  margin: 0;
}

/* -------------------------------------------------------------------------
   3. Focus
   Every interactive element keeps a visible ring, on any background.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Scrollbar
   scrollbar-color tints the native scrollbar in the brand colour while leaving
   its behaviour alone. Deliberately not ::-webkit-scrollbar, which on macOS
   brings back the classic scrollbar that permanently occupies a gutter, so
   styling it would shift the page's layout to recolour a thing that is usually
   not even on screen.

   The property is inherited, so it is declared once here and overridden only on
   the surfaces where a blue thumb would disappear into a blue ground.
   ---------------------------------------------------------------------- */

:root {
  scrollbar-color: var(--blue-brand) var(--blue-tint);
}

:focus-visible {
  outline: 2px solid var(--blue-brand);
  outline-offset: 4px;
  border-radius: 1px;
}

/* On the blue fields, and over dark photography, a blue ring would disappear
   into the ground behind it, so it reverses to white. */
.site-footer :focus-visible,
.menu :focus-visible,
.site-header--theme-light :focus-visible {
  outline-color: var(--paper);
}

/* -------------------------------------------------------------------------
   4. Utilities
   ---------------------------------------------------------------------- */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   5. Lenis
   The smooth-scroll library needs these hooks to take over the scroller.
   ---------------------------------------------------------------------- */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   6. Reduced motion
   Neutralise every transition and animation. main.js also reads this query
   and drops Lenis, the scroll reveals and the page transitions.
   ---------------------------------------------------------------------- */

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

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