/* The first paint, before the app stylesheet exists.

   In development the real stylesheet is injected by JavaScript. In production the
   hashed bundle is loaded without blocking that first paint. This file is the only
   render-blocking CSS: paper colour, ink, and enough layout that the skip link and
   SEO shell never flash as unstyled text in the corner.

   Tokens are copied from global.css. Rules live in a layer below the app's layers so
   the handover is a no-op once the bundle arrives.

   It has to be a file rather than an inline <style>: the site's CSP is style-src 'self'. */

@layer boot, reset, base, components, utilities;

@layer boot {
  html {
    color-scheme: light;
    background: oklch(96% 0.018 83);
    color: oklch(18% 0 0);
  }
  html[data-theme="dark"] {
    color-scheme: dark;
    background: oklch(18% 0.008 80);
    color: oklch(93% 0.008 80);
  }
  html, body { margin: 0; min-height: 100%; }
  body {
    background: inherit;
    color: inherit;
    font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    line-height: 1.5;
  }

  /* Without this, "Skip to puzzle" is a real link at 0,0 until the app CSS arrives. */
  .skip-link {
    position: fixed;
    z-index: 100;
    left: 1rem;
    top: 1rem;
    transform: translateY(-200%);
  }

  .static-shell, .prose-page {
    width: min(100% - 2rem, 55rem);
    margin: 3.5rem auto 4rem;
  }
  .static-shell h1, .prose-page h1 {
    margin: 0.25rem 0 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: clamp(2.25rem, 7vw, 4.6rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
  }
  .eyebrow {
    margin: 0;
    color: oklch(48% 0.15 39);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }
  html[data-theme="dark"] .eyebrow { color: oklch(77% 0.13 52); }
}