/* ==========================================================================
   base.css — reset, typography, layout primitives, glass & motion utilities
   Depends on: variables.css
   ========================================================================== */

/* ---- Self-hosted Inter ----------------------------------------------------
   Drop the font files into assets/fonts/ (see DEPLOY.md). Until they are added,
   the fallback stack in --font-sans is used automatically. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;               /* variable-font weight range */
  font-display: swap;
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
}

/* ---- Modern reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-primary); }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- Headings -------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { max-width: 65ch; }

/* ---- Layout primitives ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-12); }
.section--alt { background: var(--color-bg-alt); }
.stack > * + * { margin-top: var(--space-4); }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.lead { font-size: 1.25rem; color: var(--color-text-muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---- Glass utility --------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
}
/* Graceful fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.92); }
}

/* ---- Scroll-reveal animation utilities ------------------------------------
   Elements marked [data-reveal] start hidden; animations.js adds .is-visible. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Accessibility: reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---- Utility: visually hidden (a11y) -------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Inline links in body copy — site-wide.

   A link inside running prose is coloured and BOLD, never underlined. That is
   how the blog already reads, and this makes every other page match it.

   Scoped to text containers (p, li, dd, blockquote, figcaption, td) on purpose:
   nav links, buttons, cards, and the mega menu are NOT prose and must keep
   their own weight, or the whole chrome of the site goes bold.
   Excluded: anything that is really a button (.btn) or a card (a class that
   owns its own type).
   ========================================================================== */
p  > a:not(.btn),
li > a:not(.btn),
dd > a:not(.btn),
td > a:not(.btn),
blockquote a:not(.btn),
figcaption a:not(.btn),
p  a:not(.btn):not([class]),
li a:not(.btn):not([class]) {
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
p  > a:not(.btn):hover,
li > a:not(.btn):hover,
dd > a:not(.btn):hover,
td > a:not(.btn):hover,
blockquote a:not(.btn):hover,
figcaption a:not(.btn):hover {
  color: var(--color-primary);
  text-decoration: none;
}