/* ==========================================================================
   Base: fonts, reset, element defaults
   Depends on tokens.css. Styles bare elements only — no classes.
   ========================================================================== */

/* ---- Webfonts -----------------------------------------------------------
   Self-hosted so there is no third-party request on page load. DM Sans is a
   variable font, so one file covers Medium through Bold; the weight range in
   the descriptor is what lets the browser synthesize 500/600/700 from it.

   The latin and latin-ext subsets are split exactly as Google serves them.
   The unicode-range on each means the browser only downloads latin-ext when
   a page actually uses one of those characters. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-serif-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-serif-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ---- Reset -------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  /* Anchor targets land below the sticky header rather than under it. */
  scroll-padding-top: calc(var(--header-height) + var(--space-l));
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Headings -----------------------------------------------------------
   The two levels do not share a family. H1 is DM Serif Display Regular; H2
   and below are DM Sans SemiBold. Sizes are fixed, per the reference. */

h1 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

h2,
h3,
h4 {
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

h2 {
  font-size: var(--step-2);
}

h3 {
  font-size: var(--step-1);
}

h4 {
  font-size: var(--step-0);
}

/* ---- Typography utilities -----------------------------------------------
   The reference reuses the same two treatments at different points in the
   document outline: the serif 24 appears on the page title, on "How I see
   design", and on "Recent". These classes decouple the look from the heading
   level so the outline can stay semantically correct (one h1 per page)
   without forcing the wrong visual weight. */

.display {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

.heading {
  font-family: var(--font-text);
  font-size: var(--step-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* ---- Text --------------------------------------------------------------- */

p,
li,
dd,
blockquote {
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--weight-bold);
}

small {
  font-size: var(--step--1);
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

blockquote {
  border-left: var(--border-width) solid var(--color-line);
  padding-left: var(--space-m);
}

hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-line);
  margin-block: var(--space-l);
}

/* ---- Links --------------------------------------------------------------
   Links inherit color and are distinguished by an underline on hover, which
   is how the reference treats them. */

a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: opacity var(--duration-fast) var(--ease-out);
}

a:hover {
  text-decoration: underline;
}

/* ---- Lists -------------------------------------------------------------- */

ul,
ol {
  padding-left: 1.25em;
}

/* ---- Media -------------------------------------------------------------- */

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

svg {
  fill: currentColor;
}

figure {
  margin: 0;
}

figcaption {
  color: var(--color-ink-muted);
  font-size: var(--step--1);
  margin-top: var(--space-xs);
}

/* ---- Forms -------------------------------------------------------------- */

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---- Tables ------------------------------------------------------------- */

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border-bottom: var(--border-width) solid var(--color-line);
  padding: var(--space-xs);
  text-align: left;
}

/* ---- Focus --------------------------------------------------------------
   Keyboard-only focus ring. Do not remove without an equally visible
   replacement; it is the primary affordance for keyboard navigation. */

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* ---- Accessibility helpers ---------------------------------------------- */

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

/* First tabbable element on every page; offscreen until focused. */
.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: var(--z-skip-link);
  transform: translateY(-150%);
  background-color: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-m);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---- Reduced motion -----------------------------------------------------
   Zeroing the duration tokens disables component animation globally. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}