/* ============================================================
   Ofnstube · base.css
   Self-hosted fonts (DSGVO — no Google CDN), reset, base elements.
   ============================================================ */

/* — Self-hosted variable fonts (WOFF2) — */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-variable-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* — Reset — */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--smoked-black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
}

/* Lenis is active -> CSS smooth-scroll off; Lenis owns the loop */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* — Headings (A: line-height >= 1.05, hyphens none) — */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--bone);
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
  font-weight: 560;
}
h1 { font-size: var(--fs-h1); font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0; }
h2 { font-size: var(--fs-h2); font-variation-settings: 'opsz' 90,  'SOFT' 0, 'WONK' 0; }
h3 { font-size: var(--fs-h3); font-variation-settings: 'opsz' 48;  font-weight: 580; }
h4 { font-size: var(--fs-h4); font-variation-settings: 'opsz' 30;  font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}
img { height: auto; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}
button { background: none; border: none; cursor: pointer; }

strong, b { font-weight: 640; }
em, i { font-style: italic; }

::selection {
  background: var(--ember-orange);
  color: var(--smoked-black);
}

/* — Focus (BFSG — visible ember focus ring) — */
:focus-visible {
  outline: 2px solid var(--ember-orange);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* — Scrollbar — */
* { scrollbar-color: var(--ink-700) var(--smoked-black); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-sunken); }
::-webkit-scrollbar-thumb {
  background: var(--ink-700);
  border-radius: var(--r-pill);
  border: 2px solid var(--surface-sunken);
}
::-webkit-scrollbar-thumb:hover { background: var(--ember-deep); }

/* — Skip-link (a11y) — */
.skip-link {
  position: absolute;
  left: 50%;
  top: -64px;
  transform: translateX(-50%);
  z-index: var(--z-modal);
  background: var(--ember-orange);
  color: var(--smoked-black);
  font-weight: 640;
  padding: 12px 22px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus-visible { top: 0; outline-offset: -3px; }

/* — Screen-reader-only — */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* — Reduced motion (BFSG) — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* — Stage 1.5 · Bavarian grain texture (subtle, all surfaces) — */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}