/* ── Josefin Sans – self-hosted ─────────────────────────────────────── */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/josefin-sans-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/josefin-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/josefin-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/josefin-sans-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/josefin-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/josefin-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens via Bootstrap CSS variables ─────────────────────── */
:root {
  --bs-body-font-family: 'Josefin Sans', sans-serif;
  --bs-heading-font-family: 'Josefin Sans', sans-serif;
  --bs-font-monospace: 'Josefin Sans', sans-serif;
  --bs-body-bg: #f9f7f4;
  --bs-body-color: #2c2c2c;
  --bs-body-line-height: 1.7;
  --bs-link-color: #444;
  --bs-link-color-rgb: 68, 68, 68;
  --bs-link-hover-color: #2c2c2c;
  --bs-link-hover-color-rgb: 44, 44, 44;
  --bs-focus-ring-color: rgba(68, 68, 68, 0.2);
}

/* ── Force Josefin Sans everywhere ──────────────────────────────────── */
/* The * selector covers the base case, but Bootstrap's element/class     */
/* selectors (h1-h6, input, button, …) have higher specificity and would  */
/* override it. We therefore also declare the font explicitly on those.   */
*, *::before, *::after {
  font-family: 'Josefin Sans', sans-serif;
}

body {
  font-family: 'Josefin Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Josefin Sans', sans-serif;
}

input, button, select, textarea, optgroup {
  font-family: 'Josefin Sans', sans-serif;
}

code, pre, kbd, samp {
  font-family: 'Josefin Sans', sans-serif;
}

/* ── Global link reset ───────────────────────────────────────────────── */
a,
a:visited {
  color: #444;
  text-decoration: none;
}

a:hover {
  color: #2c2c2c;
  text-decoration: underline;
}

a:focus-visible {
  outline: 1px solid #888;
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Typography ─────────────────────────────────────────────────────── */
.lynx-heading {
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: 0.03em;
  color: #444;
}

.lynx-section-heading {
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e8e4df;
}

.lynx-sub-heading {
  font-size: 0.85rem;
  font-weight: bold;
  color: #666;
}

.lynx-muted-text {
  font-size: 0.75rem;
  color: #aaa;
}

.lynx-muted-text a,
.lynx-muted-text a:visited {
  color: #aaa;
}

/* ── Content width constraints ──────────────────────────────────────── */
.lynx-content-narrow {
  max-width: 520px;
}

.lynx-content-wide {
  max-width: 680px;
}

/* ── Content pages (Impressum, Datenschutz, …) ──────────────────────── */
.lynx-content-narrow p,
.lynx-content-wide p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #444;
}

.lynx-content-narrow ul,
.lynx-content-wide ul {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #444;
}

.lynx-content-narrow li,
.lynx-content-wide li {
  margin-bottom: 0.4rem;
}

/* ── Index / TOC links ──────────────────────────────────────────────── */
.lynx-index-link,
.lynx-index-link:visited {
  color: #888;
}

.lynx-index-link:hover {
  color: #444;
  text-decoration: underline;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.lynx-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  background-color: #fff;
  padding: 0.75rem 1rem;
  border-top: 1px solid #eee;
}

.lynx-footer-link,
.lynx-footer-link:visited {
  color: #888;
  text-decoration: none;
}

.lynx-footer-link:hover {
  color: #444;
  text-decoration: underline;
}

.lynx-footer-sep {
  color: #ccc;
  margin: 0 0.5rem;
}