/* Base: reset, document defaults, type classes. */

*, *::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);
  /* clip, not hidden: hidden makes a scroll container and breaks 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; }

/* Make [hidden] beat component display rules. */
[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) ---------------------------------- */

/* [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;
}

/* Display slabs: video panel, marquee, footer stamp. */
.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] buttons, nav, labels */
.t-caps {
  font-size: var(--t-caps);
  line-height: var(--lh-flat);
  text-transform: uppercase;
}

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

/* [figma Global/Caps/Overline 13] form field 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)); }