/* ============================================================
   MERIDIAN — Layer 2: base
   Reset, element typography, focus, a11y utilities, layout primitives.
   Consumes tokens only. Ref: MERIDIAN-BUILD §5, §7, §15.
   ============================================================ */
@layer tokens, base, components, sections, motion;

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

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-body);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  h1 { font-size: var(--text-hero); line-height: var(--lh-tight); letter-spacing: -0.02em; }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  p { margin: 0; text-wrap: pretty; }

  a { color: var(--accent-text); text-decoration: none; }
  a:hover { color: var(--accent-deep); }

  img, svg, iframe { max-width: 100%; display: block; }
  button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
  ul, ol { margin: 0; padding: 0; list-style: none; }

  /* Focus: visible, amber, offset (keyboard only) */
  :focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 3px; border-radius: 2px; }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--accent-wash); color: var(--ink); }

  /* Layout primitives */
  .container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .section { padding-block: var(--section-pad); position: relative; }
  .section--sunken { background: var(--surface-sunken); }

  /* Reserve the left rail for the meridian on wide viewports — ONLY on pages
     that actually render the thread (the index). Subpages stay symmetric. */
  @media (min-width: 1080px) {
    /* The longest station label ("T-0 · today") overruns --rail-w, so floor the
       reservation at that real extent plus a gap. Without the floor, a
       full-width shell leaves the thread almost touching the content edge. */
    .has-thread .container { padding-left: max(calc(var(--rail-w) + var(--gutter)), 152px); }
  }

  /* A11y utilities */
  .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;
  }
  .skip-link {
    position: absolute; left: var(--sp-2); top: -60px;
    z-index: var(--z-drawer);
    background: var(--console); color: var(--ink-on-dark);
    padding: 10px 18px; border-radius: var(--r-sm);
    transition: top var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus { top: var(--sp-2); color: var(--ink-on-dark); }
}