/* ==========================================================================
   MAYFIELD V2 — BASE
   Reset, document defaults and the type classes the design names.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  /* The design is edge-to-edge black/white/acid with no horizontal movement;
     `clip` rather than `hidden` so it never becomes a scroll container and
     breaks the sticky panels. */
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

p { margin: 0; }
h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* A plain `hidden` attribute loses to any display rule, and the weather badge
   toggles between an icon and a word using it. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- Type ----------------------------------------------------------------
   Named after the Figma styles so the mapping stays obvious.
   -------------------------------------------------------------------------- */

/* [figma Global/Title/Title 58 | Title 40] */
.t-title {
  font-weight: var(--w-xbold);
  font-size: var(--t-title);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
}

/* The display slabs — video panel, marquee, footer stamp. Crushed leading. */
.t-slab {
  font-weight: var(--w-xbold);
  line-height: var(--lh-crush);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
}

/* [figma Global/Body/Body 22 | Body 18] */
.t-body { font-size: var(--t-body); line-height: var(--lh-body); }

/* [figma Global/Caps/Caps 15] — every button, nav item and label. */
.t-caps {
  font-size: var(--t-caps);
  line-height: var(--lh-flat);
  text-transform: uppercase;
}

/* [figma Global/Caps/Caps 18] — the menu overlay links. */
.t-caps-l {
  font-size: var(--t-caps-l);
  line-height: var(--lh-flat);
  text-transform: uppercase;
}

/* [figma Global/Caps/Overline 13] — a form field's label. */
.t-over {
  font-size: var(--t-over);
  line-height: var(--lh-body);
  text-transform: uppercase;
}

/* [figma Global/Body/Footnote 11] */
.t-foot { font-size: var(--t-foot); line-height: var(--lh-foot); }

/* ---- Layout primitives --------------------------------------------------- */

.wrap { padding-inline: var(--gutter); }

.stack > * + * { margin-block-start: var(--flow, var(--s-6)); }