/* ==========================================================================
   Base styles — reset, @font-face declarations, and global element defaults.
   Depends on tokens.css being loaded first. Component classes live in
   site.css.
   ========================================================================== */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: "Unique";
  src: url("../fonts/unique/Unique-VF.36f0e203ef73.woff2") format("woff2-variations"),
       url("../fonts/unique/Unique-VF.36f0e203ef73.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dosis";
  src: url("../fonts/dosis/Dosis-VF.682f3a0f2bb5.woff2") format("woff2-variations"),
       url("../fonts/dosis/Dosis-VF.682f3a0f2bb5.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Covered By Your Grace";
  src: url("../fonts/covered-by-your-grace/CoveredByYourGrace.489dd143d9dd.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Asap Condensed";
  src: url("../fonts/asap-condensed/AsapCondensed-300.9fbe6dbc81ca.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("../fonts/asap-condensed/AsapCondensed-400.b5e29872c1c9.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("../fonts/asap-condensed/AsapCondensed-500.eaf0d8992fff.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("../fonts/asap-condensed/AsapCondensed-600.f6f3edbbc724.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Asap Condensed";
  src: url("../fonts/asap-condensed/AsapCondensed-700.c7226ec7d873.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: auto;
  font-synthesis: none;
}

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

/* <picture> ist nur ein Wrapper um <source>+<img>. display:contents nimmt es aus
   dem Box-Baum, sodass das innere <img> sich exakt wie ein direktes Kind seines
   Rahmens verhält (wichtig für Frames mit width/height:100% + object-fit). */
picture {
  display: contents;
}

/* ---------- Typography defaults ----------
   Headings auto-pull --color-accent (set by the .section--* / tile system in
   landing.css). Outside a section, fall back to currentColor (= body color). */
h1, h2 {
  font-family: var(--font-display);
  font-feature-settings: var(--feature-display);
  font-weight: var(--weight-bold);
  color: var(--color-accent, currentColor);
  margin: 0;
  /* Balance line lengths across all lines — headlines look more
     intentional when "Euer Tag." / "Euer Sound." / "Live." don't end up
     with a lonely orphaned last line. Progressive enhancement; browsers
     without support fall back to greedy wrapping. */
  text-wrap: balance;
}

/* Word-initial caps in Unique headlines: drop ss01 so the wrapped letter
   reverts to Unique's tall, dramatic default glyph (A E I M N U + accented
   forms) at German-orthographic capitalization points. Set server-side by
   the `unique_caps` template filter. */
.u-cap {
  font-feature-settings: "ss01" 0;
}

h1 {
  font-size: var(--text-3xl);
  line-height: var(--line-height-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--text-2xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-spread);
  text-transform: uppercase;
}

h3, h4 {
  font-family: var(--font-ui);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-accent, currentColor);
  margin: 0;
  text-wrap: balance;
}

h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-accent, currentColor);
  margin: 0;
  text-wrap: balance;
}

h3 {
  font-weight: var(--h3-weight, var(--weight-bold));
  font-size: var(--text-l);
  letter-spacing: var(--tracking-h3);
}
h4 {
  font-weight: var(--weight-semibold);
  font-size: var(--text-m);
}

p {
  margin: 0;
  max-width: var(--measure);
  /* Avoid orphans / lone last-word lines in body copy. Less aggressive
     than `balance` — keeps natural reading flow but smooths the bottom. */
  text-wrap: pretty;
}

/* Emphasis must read as a real bold regardless of the surrounding weight. The
   UA default `bolder` is RELATIVE — inside light (300) body copy it only
   resolves to ~400 (regular), which looks unbolded. Pin it to an absolute 700. */
strong,
b {
  font-weight: var(--weight-bold);
}

blockquote {
  margin: 0;
}

/* Lists — minimal global reset only.
   The full content-list styling (note-marker bullet, flex flow, gap, measure
   cap) is opt-in via `.list` in site.css, so Nav/Footer/UI lists in <ul> tags
   stay neutral. */
ul, ol {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: var(--border-thin);
  text-underline-offset: 0.2em;
}

a:focus-visible, button:focus-visible {
  /* Consume --focus-ring-color DIRECTLY (not via a composite --focus-ring
     token): a custom property whose value nests var() is substituted at its
     declaration site, so a composite token would freeze the colour at the root
     Oxford and ignore the per-surface override. Read here, it resolves to the
     focused element's inherited --focus-ring-color (Marian-Light on dark). */
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* ---------- Skip-Link (WCAG 2.4.1) ---------- */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--color-oxford);
  color: var(--color-ivory);
  border-radius: 0.4rem;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  /* Bis zum Fokus außerhalb des Sichtfelds geparkt, bei :focus sichtbar. */
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: translateY(0);
  /* Lokaler, hochkontrastiger Ring (Pear auf der Oxford-Fläche) statt des
     geerbten --focus-ring-color, der auf dunklem Backdrop untergehen kann. */
  outline: 3px solid var(--color-pear);
  outline-offset: 2px;
}