/* ============================================================
   BASE
   Reset, typography, page chrome, global primitives.
   Depends on tokens.css.
   ============================================================ */

@layer base {

  /* ---- Reset ---- */
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html:focus-within { scroll-behavior: smooth; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; }
  :where(ul, ol) { list-style-position: inside; }

  /* ---- Root typography ---- */
  html {
    font-family: 'Hanken Grotesque', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    font-optical-sizing: auto;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: var(--bg);

    /* Allow height auto to be interpolated (Baseline 2024). Needed
       for <details> open/close smooth animations in projects.css. */
    interpolate-size: allow-keywords;
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-size: var(--fs-body);
    min-height: 100dvh;
    overflow-x: clip;
    transition: background-color var(--t-med) var(--ease),
                color var(--t-med) var(--ease);
  }

  ::selection { background: var(--fg); color: var(--bg); }

  p { text-wrap: pretty; }
  :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
    font-weight: 400;
    line-height: 1.1;
  }

  /* ---- Display & heading helpers ----
     Only the utility classes actually consumed by markup are kept.
     .serif is used widely. .h2/.h3 are used sparingly in services.
     .label/.small/.reading are used across pages.
     Dropped: .h1, .display, .stack (no consumers). */
  .serif   { font-family: 'Young Serif', Georgia, 'Times New Roman', serif;
             font-weight: 400; }
  .h2      { font-size: var(--fs-h2);      letter-spacing: var(--track-tight); }
  .h3      { font-size: var(--fs-h3);      line-height: 1.3; }
  .label   { font-size: var(--fs-small); letter-spacing: var(--track-wide);
             text-transform: uppercase; color: var(--mid); }
  .small   { font-size: var(--fs-small); color: var(--mid); }
  .reading { max-width: var(--reading-max); }

  /* ---- Focus ---- */
  :focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* ---- Layout utilities ---- */
  .edge { padding-inline: var(--edge); }
  .wrap { max-width: var(--content-max); margin-inline: auto; }

  /* ---- Skip link ---- */
  .skip-link {
    position: fixed;
    top: var(--s-2); left: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--fg); color: var(--bg);
    font-size: var(--fs-small);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    z-index: 200;
    transform: translateY(-150%);
    transition: transform var(--t-fast) var(--ease);
  }
  .skip-link:focus { transform: translateY(0); }

  /* ---- Scroll-driven reveal ---- */
  /* Uses animation-timeline: view() where supported.
     Falls back to visible content (no flash) where not. */
  .reveal {
    opacity: 1;
    transform: none;
  }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ---- View transitions (cross-page navigation) ---- */
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: var(--ease);
  }

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

  /* ---- Below-the-fold optimisation ---- */
  .contain {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
}