/* ==========================================================================
   Digital Unicorn: base
   ==========================================================================
   Font loading, reset, and the handful of global rules the whole site sits
   on. Load order matters: tokens.css, then this, then type.css, motion.css,
   and finally the section stylesheets.

   The reset below deliberately reproduces the parts of Tailwind's preflight
   the design depended on. Dropping Tailwind means dropping preflight too,
   and without these rules headings, lists, buttons and images all revert to
   browser defaults and the layout breaks. This is not boilerplate. Read
   before trimming.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Aeonik. Self-hosted, four weights.

   LICENCE: Aeonik is a commercial typeface from CoType Foundry. These files
   are licensed to Digital Unicorn. Confirm the licence covers the production
   domain and any contractor who receives this package before deploying.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* Every element carries the token border colour, so adding a border style
     anywhere picks up the design system without restating the colour. */
  border-color: var(--border);
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Anchor links and in-page navigation land softly, except for people who
     asked not to be moved. */
  scroll-behavior: smooth;
}

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

body {
  min-height: 100dvh;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings inherit rather than carrying browser sizes, because size comes
   from the type scale classes. An <h2> with no .text-* class should look
   like body text, not like a random 1.5em, so that a missing class is
   visible in review instead of silently passing. */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

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

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

/* Form controls do not inherit typography by default, which is how a form
   ends up in the browser's system font while the rest of the page is Aeonik. */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  appearance: button;
  background-color: transparent;
  background-image: none;
  border: 0;
  cursor: pointer;
}

:disabled { cursor: default; }

textarea { resize: vertical; }

::placeholder { color: var(--subtle-foreground); opacity: 1; }

/* The hidden attribute must win over any display rule. A component that sets
   display:flex or display:grid silently ignores [hidden] otherwise, which
   surfaces as an element that simply refuses to hide. Worth the !important:
   there is no case where markup says hidden and we mean visible. */
[hidden] { display: none !important; }

/* Block display stops the phantom descender gap under an image sitting in a
   line box. max-width keeps media inside its container on small screens. */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

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

table {
  border-collapse: collapse;
  border-color: inherit;
  text-indent: 0;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

/* --------------------------------------------------------------------------
   Focus. Visible for keyboard users, quiet for mouse users. Never remove the
   outline without putting an equally visible replacement in its place.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--container-gutter-md); }
}

/* Available to screen readers, invisible on screen. Use for the skip link
   and for labels a sighted user gets from context. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The skip link is visually hidden until focused, then lands in the top left
   above everything. First tab stop on every page. */
.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: visible;
  clip-path: none;
  background: var(--brand);
  color: var(--brand-foreground);
  border-radius: var(--radius-md);
}

/* Section preview mode, set by assets/js/section-preview.js when the page is
   loaded with "?only=<id>". The roadmap decks embed one section in an iframe
   sized to that section, so the page must not reserve height for the rest of
   it. Scoped to the attribute: none of this reaches a normal visit. */
html[data-only],
html[data-only] body {
  min-height: 0;
  overflow: visible;
}

/* The navbar is sticky. On its own there is nothing to stick against, and a
   sticky box with no scroll context leaves a gap at the top of the frame. */
html[data-only="navbar"] [data-navbar] {
  position: static;
}