/*
 * devmatiker.com: one static page. Only system fonts and files from this origin, so the
 * content security policy (_headers) allows styles and images from 'self' and nothing else.
 * Layers keep the cascade predictable: reset < tokens < base < layout < components.
 */
@layer reset, tokens, base, layout, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, dl, dd { margin: 0; }
  ul[class], nav ul { list-style: none; padding: 0; }
  img, svg { display: block; max-inline-size: 100%; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --bg: light-dark(#f5f6f4, #0f1513);
    --surface: light-dark(#ffffff, #161e1b);
    --fg: light-dark(#16201c, #e3ebe7);
    --muted: light-dark(#4d5b54, #9eb0a8);
    --rule: light-dark(#d9dfdb, #26322d);
    --accent: light-dark(#0b6e55, #3fc79f);
    --accent-fg: light-dark(#ffffff, #0b1411);
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
    --space-s: 0.75rem;
    --space-m: 1.25rem;
    --space-l: 2.5rem;
    --radius: 0.5rem;
    --measure: 62ch;
  }

  /* Browsers from before light-dark() (2024) get the same palette from a media query. */
  @supports not (color: light-dark(#000, #fff)) {
    :root {
      --bg: #f5f6f4; --surface: #ffffff; --fg: #16201c; --muted: #4d5b54;
      --rule: #d9dfdb; --accent: #0b6e55; --accent-fg: #ffffff;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0f1513; --surface: #161e1b; --fg: #e3ebe7; --muted: #9eb0a8;
        --rule: #26322d; --accent: #3fc79f; --accent-fg: #0b1411;
      }
    }
  }
}

@layer base {
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  body {
    background: var(--bg);
    color: var(--fg);
    font: 1rem/1.65 var(--font-sans);
    padding-inline: max(1rem, 4vw);
  }
  h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
  h1 { font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: -0.02em; }
  h2 { font-size: 1.5rem; letter-spacing: -0.01em; margin-block-end: var(--space-m); }
  h3 { font-size: 1.0625rem; margin-block-end: 0.375rem; }
  p { text-wrap: pretty; }
  a { color: var(--accent); text-underline-offset: 0.18em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--accent); color: var(--accent-fg); }
}

@layer layout {
  .site-header, main, .site-footer { max-inline-size: 61.25rem; margin-inline: auto; }
  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-l);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--rule);
  }
  .hero { padding-block: clamp(3rem, 10vw, 6rem) var(--space-l); }
  .section { padding-block: var(--space-l); border-block-start: 1px solid var(--rule); }
  .site-footer {
    padding-block: 1.75rem var(--space-l);
    border-block-start: 1px solid var(--rule);
    color: var(--muted);
  }
  .site-footer p + p { margin-block-start: 0.25rem; }
}

@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -3rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: 600;
    text-decoration: none;
  }
  .skip-link:focus-visible { inset-block-start: 1rem; }

  .brand { font: 600 1.125rem/1 var(--font-mono); color: var(--fg); text-decoration: none; }
  .brand-prompt { color: var(--accent); }
  nav ul { display: flex; flex-wrap: wrap; gap: var(--space-m); }
  nav a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; }
  nav a:hover { color: var(--fg); }

  .eyebrow {
    margin-block-end: 1rem;
    font: 500 0.8125rem/1.4 var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--accent);
  }
  .lead {
    max-inline-size: var(--measure);
    margin-block-start: var(--space-m);
    font-size: 1.125rem;
    color: var(--muted);
  }
  .lead strong { color: var(--fg); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: 1.75rem; }
  .button {
    display: inline-block;
    padding: 0.6875rem 1.125rem;
    border: 1px solid var(--accent);
    border-radius: 0.375rem;
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: 600;
    text-decoration: none;
  }
  .button-secondary { background: transparent; color: var(--accent); }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1rem;
  }
  .card {
    block-size: 100%;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .card p { color: var(--muted); font-size: 0.9375rem; }

  .facts > div {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 0.875rem;
    border-block-end: 1px solid var(--rule);
  }
  .facts dt { font: 500 0.8125rem/1.9 var(--font-mono); text-transform: lowercase; }
  .facts dd { color: var(--muted); }
  @media (width < 35rem) {
    .facts > div { grid-template-columns: 1fr; gap: 0.125rem; }
  }

  .section > p { max-inline-size: var(--measure); color: var(--muted); }
}