/* =========================================================================
   Max Hirt Webdesign – site.css
   1. Tokens  2. Base  3. Layout & type  4. Header/Menu  5. Buttons & UI
   6. Sections  7. Pages  8. Footer  9. Motion  10. Reduced motion
   ========================================================================= */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --ink: #f4efe7;
  --ink-2: #ece5da;
  --ink-3: #e2d9cc;
  --field: #fffdf9;
  --text: #1d1916;
  --text-muted: #5b534a;
  --text-dim: #675e54;
  --accent: #8a5a24;
  --on-accent: #ffffff;
  --accent-soft: rgba(138, 90, 36, 0.1);
  --glow: rgba(176, 122, 60, 0.16);
  --taupe: #5a4f47;
  --line: rgba(29, 25, 22, 0.12);
  --line-strong: rgba(29, 25, 22, 0.26);
  --shadow: rgba(60, 44, 28, 0.18);
  --success: #3f7a4a;
  --danger: #a93a26;

  --f-display: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-brand: "Montserrat", var(--f-body);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --fs-3xl: clamp(2.75rem, 1.5rem + 5.4vw, 6.5rem);
  --fs-hero: clamp(3.4rem, 1.4rem + 9.2vw, 11.5rem);

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --sp-9: 6rem; --sp-10: 9rem;
  --section: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --max: 88rem;

  --r-sm: 6px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --d-fast: 180ms; --d-med: 420ms; --d-slow: 900ms; --d-xslow: 1300ms;

  --z-header: 50; --z-menu: 60; --z-cursor: 80; --z-intro: 100; --z-skip: 110;
  color-scheme: light;
}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--sp-4); top: var(--sp-4); z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5); background: var(--text); color: var(--ink);
  border-radius: var(--r-pill); font-weight: 600; text-decoration: none;
  transform: translateY(-200%); transition: transform var(--d-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* Subtle film grain – single tiny SVG, GPU-cheap */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}