/* ==========================================================================
   Reset + base element styles
   ========================================================================== */

/* Website-Schicht (DESIGN.md §2): only values tokens.css does not define.
   tokens.css itself stays untouched. */
:root {
  --site-header-h: 72px;
  --site-section-pad: var(--space-10);
  --site-section-pad-mobile: var(--space-9);
  --site-hero-pad-top: var(--space-12);
  --site-measure-text: 640px;
  --site-measure-lead: 720px;
  --site-measure-headline: 880px;
  --site-tracking-headline: -0.01em;
  --site-duration-reveal: 600ms;
  --site-tracking-caps: 0.04em;
  --site-duration-hero: 1200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--site-header-h); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
/* Long, unbroken words (compound Greek terms especially) have no natural
   break point and will otherwise run past the edge of a narrow viewport
   instead of wrapping. */
h1, h2, h3, p, ul, figure { margin: 0; overflow-wrap: break-word; }
/* Greek display type is set uniformly in Exo 2 (Oxanium has no Greek glyphs,
   so the default stack would mix two faces inside one headline). */
h1, h2 {
  font-family: var(--font-display-greek);
  font-weight: var(--weight-regular);
  letter-spacing: var(--site-tracking-headline);
  color: var(--text-strong);
  text-wrap: balance;
}
:lang(en) h1, :lang(en) h2 { font-family: var(--font-display); }
h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
button { font: inherit; }
::selection { background: var(--blue-100); color: var(--ink-900); }

:where(a, button, select, input, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-3); z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card); color: var(--text-strong);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transform: translateY(-200%);
  transition: transform var(--duration-base) var(--ease-standard);
}
.skip-link:focus-visible { transform: none; }

/* Grain overlay for gradient surfaces */
.has-grain { position: relative; isolation: isolate; }
.has-grain > * { position: relative; z-index: 1; }
.has-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--texture-grain), var(--texture-grain-coarse);
  background-size: 140px 140px, 240px 240px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

@media (max-width: 860px) {
  .container { padding-left: var(--space-6); padding-right: var(--space-6); }
}