/* Base — resets and bare element defaults. Weakest layer; components override. */
@layer base {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  * { margin: 0; }

  /* Turbo frames are custom elements → default display:inline, which collapses
     a frame (and its contents) to content width. Make them block by default;
     components that want an inline frame set their own display. */
  turbo-frame { display: block; }

  /* Always reserve the scrollbar gutter so short/long pages (and toggling
     content) don't shift horizontally when the scrollbar appears/disappears. */
  html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--site-bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--font-size-1);
    line-height: var(--font-lineheight-3);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s var(--ease-3), color 0.2s var(--ease-3);
  }

  /* app shell: header / .canvas / footer stack in the body column.
     The .canvas content panel is defined in canvas.css. */

  h1, h2, h3, h4 { line-height: var(--font-lineheight-1); font-weight: var(--font-weight-7); }
  h1 { font-size: var(--font-size-6); letter-spacing: var(--font-letterspacing-1); }
  h2 { font-size: var(--font-size-4); }
  h3 { font-size: var(--font-size-3); }
  h4 { font-size: var(--font-size-2); }

  a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } /* AAA link; underlined since it's dark */

  img, svg, video { display: block; max-inline-size: 100%; height: auto; }

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

  code, kbd, samp, pre { font-family: var(--font-mono, ui-monospace, monospace); }

  hr { border: none; border-block-start: var(--border-size-1) solid var(--line); }

  :focus-visible { outline: var(--border-size-2) solid var(--accent); outline-offset: 2px; }
}