/* Metric-matched fallback for Inter. Overriding the ascent/descent/size of a local
   grotesque makes the fallback occupy the SAME vertical space as Inter, so the page
   does not re-wrap if the webfont arrives late (or, under display=optional, never
   swaps in at all on a slow connection). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%;
}

/* ── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  background: linear-gradient(135deg, var(--color-ocean) 0%, var(--color-wave) 45%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  color: var(--color-ocean);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-dawn);
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-wave);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

h4, h5, h6 {
  font-size: 1rem;
  color: var(--color-ocean);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
}

/* ── Links ──────────────────────────────────────────────────────────────── */
a {
  color: var(--color-wave);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-sunset);
  text-decoration: underline;
}

/* Visited links: slightly muted but still readable */
a:visited {
  color: var(--color-visited);
}

/* ── Inline code — blends with prose, no box or highlight ───────────────── */
:not(pre) > code {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.9em;
  font-family: var(--font-mono);
  color: inherit;
  /* Long inline tokens (URLs, Accept strings, /cdn-cgi/image/… paths) must wrap
     instead of forcing the page wider than the viewport on narrow screens. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* In table headers (dark background), inherit white from thead tr so code
   remains legible — var(--color-text) is near-black and fails contrast there */
thead :not(pre) > code {
  color: inherit;
}

/* ── Lists ──────────────────────────────────────────────────────────────── */
ul, ol {
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}

li { margin-bottom: var(--space-xs); }

/* ── Blockquote ─────────────────────────────────────────────────────────── */
blockquote {
  border-left: 4px solid var(--color-gold);
  background: var(--color-sand);
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Strong / em ────────────────────────────────────────────────────────── */
/* Inherit the surrounding colour rather than tinting. Bold already carries the emphasis,
   and a tinted <strong> sits close enough to the link colour in dark mode that inline
   <code> inside it reads as a link. */
strong { color: inherit; font-weight: 700; }
em { color: var(--color-text-muted); }

/* ── Images ─────────────────────────────────────────────────────────────── */
img { max-width: 100%; height: auto; display: block; }

/* ── HR ─────────────────────────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: var(--space-2xl) 0;
}