/* ============================================================
   BASE - reset and element defaults
   Consumes tokens only. No literal values.
   ============================================================ */

/* ---- Reset ---- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
}

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

input,
button,
textarea,
select { font: inherit; color: inherit; }


/* ---- Headings ---- */

h1, h2, h3, h4 {
  color: var(--text-strong);
  text-wrap: balance;          /* keeps display type off orphan lines */
  /* Only the weights we actually ship exist. Without this the browser
     fakes 500/600 Cormorant and any italic, which looks broken at size. */
  font-synthesis: none;
}

h1, h2, h3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-display);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-display);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-normal);
}

/* h4 is a small heading, so it earns hierarchy from weight rather than
   size. Cormorant at body size reads lighter than the Inter paragraph
   underneath it and inverts the hierarchy. Components that genuinely want
   display type at this level set it explicitly (see .card__title). */
h4 {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}


/* ---- Prose ---- */

p { text-wrap: pretty; }

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

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--underline);
  transition: color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
}

a:hover {
  color: var(--text-strong);
  border-bottom-color: var(--text-strong);
}

strong { font-weight: var(--fw-semibold); }

ul, ol { padding-left: var(--sp-5); }

li + li { margin-top: var(--sp-2); }

blockquote { margin: 0; }

hr {
  border: 0;
  border-top: var(--border-hair);
  margin: var(--sp-7) 0;
}

::selection {
  background: var(--c-clay-wash);
  color: var(--text);
}


/* ---- German typography ----
   Her copy is long-form with compounds like "Grundtonbestimmung"
   and "Einfuehlungsvermoegen" that break narrow columns without
   hyphenation. Requires lang="de" on <html>. */

:lang(de) p,
:lang(de) li,
:lang(de) blockquote {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* Never hyphenate display type or leads - it reads as a defect at size.
   These selectors MUST keep the :lang(de) prefix. The rule above is
   `:lang(de) p` (specificity 0,1,1); a bare class (0,1,0) loses to it and
   the declaration silently does nothing. */
:lang(de) h1,
:lang(de) h2,
:lang(de) h3,
:lang(de) .u-display,
:lang(de) .lead,
:lang(de) .pullquote,
:lang(de) .quote__text,
:lang(de) .values__item,
:lang(de) .qual__name {
  hyphens: manual;
  -webkit-hyphens: manual;
}


/* ---- Accessibility ---- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Focus rings are never removed. If this rule is ever deleted,
   the framework has been violated. */

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-4);
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--ff-micro);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
  border: 0;
  transform: translateY(calc(-100% - var(--sp-5)));
  transition: transform var(--dur-micro) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--bg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---- Reduced motion ----
   Drop every transform and animation, and make sure nothing that
   relies on a reveal stays invisible. */

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}