@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --color-black: #000;
    --color-white: #fff;
    --color-light-gray: #f4f4f4;
    --color-yellow: #deda37;
    --color-green: #89c8a8;
    --color-blue: #1d3d91;
    --color-orange: #e37a1a;
    --color-pink: #c94c72;
    --font-body: "Source Code Pro", ui-monospace, monospace;
    --font-display: "Silverstone3", cursive;
    --font-typewriter: "JMH Typewriter", ui-monospace, monospace;
    --text-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
    --text-caption: 0.75rem;
    --text-small: 0.875rem;
    --text-meta: clamp(0.875rem, 4vw, 1.125rem);
    --text-menu: 1.25rem;
    --text-card-title: clamp(1.125rem, 5vw, 1.5rem);
    --text-page-title: clamp(2rem, 8vw, 2.5rem);
    --text-section-title: clamp(2.25rem, 11vw, 3.75rem);
    --line-height-tight: 1.1;
    --line-height-ui: 1.2;
    --line-height-card: 1.3;
    --line-height-body: 1.5;
    --transition-fast: 160ms ease;
    --radius-pill: 999px;
    --space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
    --space-s: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
    --space-m: clamp(1.25rem, 1rem + 1vw, 2.5rem);
    --space-l: clamp(2.5rem, 2rem + 2vw, 5rem);
    --page-title-content-gap: clamp(6rem, 8vw, 8rem);
    --content: 48.5rem;
    --wide: 67.25rem;
    --stage: 90rem;
    --nav-rail: 13rem;
    --nav-clearance: calc(var(--nav-rail) + var(--space-m));
    --page-gutter: clamp(1.25rem, 4vw, 5rem);
  }
}

@font-face { font-family: "Silverstone3"; src: url("../fonts/silverstone3.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "Source Code Pro"; src: url("../fonts/source-code-pro-light.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 300; }
@font-face { font-family: "Source Code Pro"; src: url("../fonts/source-code-pro-regular.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "Source Code Pro"; src: url("../fonts/source-code-pro-bold.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 700; }
@font-face { font-family: "JMH Typewriter"; src: url("../fonts/jmh-typewriter-thin.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 100; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { overflow-x: clip; scroll-behavior: smooth; }
  body { margin: 0; overflow-x: clip; }
  img, picture, svg { display: block; max-width: 100%; height: auto; }
  button, input, textarea, select { font: inherit; }
}

@layer base {
  body { color: var(--color-black); background: var(--color-white); font-family: var(--font-body); font-size: var(--text-body); font-weight: 300; line-height: var(--line-height-body); }
  a { color: inherit; text-underline-offset: 0.2em; }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  h1, h2, h3 { line-height: var(--line-height-tight); text-wrap: balance; }
}

@layer layout {
  .layout-container { width: min(var(--wide), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }
  .entry-content > :where(:not(.alignwide):not(.alignfull)) { max-width: var(--content); margin-inline: auto; }
  .entry-content > .alignwide { max-width: var(--wide); margin-inline: auto; }
  .entry-content > .alignfull { width: 100%; }
  .site-main { min-height: 60vh; }
  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-m); }
}

@layer utilities {
  .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .screen-reader-text:focus { position: fixed; z-index: 100000; top: 1rem; left: 1rem; width: auto; height: auto; padding: 0.75rem 1rem; clip: auto; background: var(--color-white); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 64rem) {
  :root { --page-title-content-gap: var(--space-l); }
}