/* =============================================================================
   Base layer

   Equivalent to Tailwind's preflight, trimmed to what this page needs.

   Font licensing: Century Gothic is a commercial Monotype typeface. It is not
   on Google Fonts and cannot be served freely from the web, so Questrial is
   loaded as its visual substitute (geometric, monoline, small x-height) and
   Roboto carries the body copy. If the client buys a Century Gothic web
   license, drop the .woff2 files in assets/fonts/ and uncomment the @font-face
   rules below: nothing else changes, because every rule resolves through
   --font-display and that stack already starts with 'Century Gothic'.

   The brandbook script faces (Byliner Script, Sparkling Valentine) are out of
   the web identity and are not used anywhere on this page.
   ========================================================================== */

/*
@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/century-gothic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/century-gothic-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
*/

*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

/* The dark panel overflows the grid on purpose. Clip the overflow instead of
   letting it produce a horizontal scrollbar. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1,
h2,
p,
ul,
ol {
  margin: 0;
}

/* Headings carry meaning, not a size: typography comes from utilities. */
h2 {
  font-size: inherit;
  font-weight: inherit;
}

/* Safari + VoiceOver drop list semantics when list-style is none, which is why
   every list in the markup carries an explicit role="list". A linter may call
   that role redundant; per spec it is, but the announcement is not. */
ul,
ol {
  padding: 0;
  list-style: none;
}

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

svg {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--color-brick);
  outline-offset: var(--spacing-1);
}