/* Design tokens, reset and base typography. */

:root {
  /* palette */
  --ink: #17284D;
  --paper: #F5F0E1;
  --paper-strong: #FFFFFF;
  --coral: #F2860F;
  --coral-deep: #D9700A;
  --yellow: #EBDA34;
  --ocean: #1D92C3;
  --navy: #1D3557;
  --forest: #41921C;
  --forest-bg: #56A832;
  --violet: #4D33DB;
  --turquoise: #16A0CA;
  --pink: #E72384;
  --brick: #ED2C3A;
  --tan: #DCC192;
  --sky: #CBE9E3;
  --metal: #9DA4A9;

  /* typography */
  --font-display: 'Montserrat', -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body: 'Quicksand', -apple-system, "Segoe UI", system-ui, sans-serif;

  /* brand */
  --logo: url("../assets/img/logo.png");
  --logo-ink: url("../assets/img/logo-ink.png");

  /* Fluid design unit: 1px at the 1180px reference width, shrinking with the
     viewport below it. Used by the decorative holds so they scale on mobile. */
  --u: min(1px, 0.0847vw);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Keeps anchor targets clear of the sticky top bar. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

a { color: inherit; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Visible to screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-deep);
}

/* Shared max-width container. */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.75rem;
  position: relative;
  z-index: 2;
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 1.25rem; }
  html { scroll-padding-top: 4.75rem; }
}

/* Avoid the grey flash on tap, keep :active feedback instead. */
a, button { -webkit-tap-highlight-color: rgba(23, 40, 77, 0.12); }