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

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, dl, dd { margin: 0; }
  button, input, textarea, select { font: inherit; }
  img, picture, svg { display: block; max-width: 100%; }
}

@layer tokens {
  :root {
    --color-canvas: #f7f8f5;
    --color-surface: #ffffff;
    --color-text: #20231f;
    --color-muted: #62685f;
    --color-brand: #315c4b;
    --color-brand-strong: #1f4235;
    --color-accent: #d9a441;
    --color-accent-soft: #f5ead3;
    --color-border: #d8d8cf;
    --shadow-soft: 0 1rem 3rem rgb(32 35 31 / 8%);
    --radius-sm: 0.75rem;
    --radius-lg: 1.5rem;
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --shell: 72rem;
  }
}

@layer base {
  body {
    min-height: 100vh;
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
  }

  a { color: inherit; }

  h1, h2, h3 { line-height: 1.18; text-wrap: balance; }

  h2 { font-size: clamp(1.75rem, 4vw, 3rem); }

  :focus-visible {
    outline: 0.2rem solid #0b66c3;
    outline-offset: 0.2rem;
  }
}

@layer layout {
  .shell {
    width: min(100% - 2rem, var(--shell));
    margin-inline: auto;
  }

  .site-header {
    position: sticky;
    z-index: 5;
    top: 0;
    border-bottom: 1px solid var(--color-border);
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(1rem);
  }

  .site-header__inner,
  .site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 4.5rem;
  }

  .site-footer {
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.875rem;
  }

  .site-footer__inner { padding-block: var(--space-4); }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 10;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: white;
    transform: translateY(-200%);
  }

  .skip-link:focus { transform: translateY(0); }

  .brand {
    display: block;
    text-decoration: none;
  }

  .brand__logo { width: clamp(10rem, 20vw, 12.5rem); height: auto; }

  .nav-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding-inline: var(--space-3);
    border-radius: 999px;
    text-decoration: none;
  }

  .nav-link:hover { background: var(--color-canvas); }

  .desktop-nav,
  .footer-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .footer-nav { gap: var(--space-4); }

  .footer-nav a { text-underline-offset: 0.2em; }

  .mobile-nav { display: none; }
}

@media (max-width: 48rem) {
  .site-header__inner,
  .site-footer__inner { min-height: 4rem; }
  .site-footer__inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: var(--space-3); }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; position: relative; }
  .mobile-nav summary { cursor: pointer; font-weight: 700; list-style: none; padding: var(--space-2); }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav nav {
    position: absolute;
    right: 0;
    display: grid;
    width: 13rem;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .skip-link { transition: transform 160ms ease; }
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}