/* ------------------------------------------------------------------
   Shared stylesheet for the static marketing pages (the landing page at
   the locale root, /privacy/, /terms/, /articles/*).

   These pages are prerendered HTML in public/ and ship as-is, so they
   cannot import src/index.css or the Tailwind build. The token block
   below is a verbatim copy of the one in src/index.css: same values,
   same measured WCAG ratios. This file is the static equivalent of
   index.css, which is why hex literals live here and nowhere else on
   these pages.

   The static pages have no theme toggle and nothing to persist it in,
   so the palette follows prefers-color-scheme: dark by default, light
   when the system asks for it.
   ------------------------------------------------------------------ */

/* ============ DARK (default) ============
   every value below checked against --bg
   text      #F7F5F0  16.2:1
   body      #E6E2DA  13.4:1
   soft      #CBD2DB  10.1:1
   faint     #ADB7C4   7.2:1
   lamp      #F5CE7E  11.6:1
   sage      #A5C7B6   9.7:1
   rust      #E39B85   8.1:1
*/
:root {
  --bg: #161b23;
  --bg-deep: #10141a;
  --surface: #212934;
  --surface-hi: #2c3542;

  --text: #f7f5f0;
  --text-body: #e6e2da;
  --text-soft: #cbd2db;
  --text-faint: #adb7c4;

  --lamp: #f5ce7e;
  --lamp-line: #b08f4b;
  --lamp-wash: rgba(245, 206, 126, 0.12);
  --lamp-glow: rgba(245, 206, 126, 0.09);

  --sage: #a5c7b6;
  --rust: #e39b85;

  --edge: rgba(247, 245, 240, 0.15);
  --hover: rgba(247, 245, 240, 0.06);
  --smoothing: auto; /* NOT antialiased: thins light text on dark */
}

/* ============ LIGHT ============
   text      #14181F  16.8:1
   body      #2E353F  11.9:1
   soft      #49525E   8.1:1
   faint     #5C6572   6.3:1
   lamp      #7E5310   6.6:1
*/
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f3ed;
    --bg-deep: #ede9e1;
    --surface: #fffdf8;
    --surface-hi: #e8e3d9;

    --text: #14181f;
    --text-body: #2e353f;
    --text-soft: #49525e;
    --text-faint: #5c6572;

    --lamp: #7e5310;
    --lamp-line: #c3993f;
    --lamp-wash: rgba(126, 83, 16, 0.1);
    --lamp-glow: rgba(200, 150, 60, 0.14);

    --sage: #39634f;
    --rust: #93412c;

    --edge: rgba(20, 24, 31, 0.16);
    --hover: rgba(20, 24, 31, 0.05);
    --smoothing: antialiased;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text-body);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.64;
  -webkit-font-smoothing: var(--smoothing);
  overflow-x: hidden;
}

/* The one warm light source, top left. */
body::before {
  content: '';
  position: fixed;
  top: -30vh;
  left: -20vw;
  width: 90vw;
  height: 90vh;
  /* Fade ends exactly at the element edges; the prototype's circle
     gradient was still mid-fade at the bottom edge and cut off hard. */
  background: radial-gradient(
    ellipse closest-side at center,
    var(--lamp-glow) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

/* ---------- type ---------- */

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.15em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-faint);
}

h1,
h2,
h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  color: var(--text);
}
h1 {
  font-size: clamp(32px, 7.4vw, 48px);
  line-height: 1.08;
  margin: 12px 0 0;
  max-width: 20ch;
}
h1 em {
  font-style: italic;
  color: var(--lamp);
}
h2 {
  font-size: clamp(24px, 5.5vw, 32px);
  line-height: 1.16;
  margin: 0 0 16px;
  max-width: 26ch;
}
h3 {
  font-size: clamp(20px, 4.4vw, 24px);
  line-height: 1.2;
  margin: 26px 0 10px;
  max-width: 30ch;
}

p {
  color: var(--text-body);
  max-width: 58ch;
}
p + p {
  margin-top: 14px;
}

.lede {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 4.6vw, 25px);
  line-height: 1.48;
  color: var(--text);
  margin-top: 18px;
  max-width: 46ch;
}

a {
  color: var(--lamp);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover,
a:focus-visible {
  color: var(--text);
}

strong,
b {
  color: var(--text);
  font-weight: 500;
}

section {
  padding: 34px 0;
  border-top: 1px solid var(--edge);
}
section:first-of-type {
  border-top: none;
}

/* ---------- lists ---------- */

ul.plain,
ol.plain {
  list-style: none;
  max-width: 58ch;
}
ul.plain li,
ol.plain li {
  padding: 12px 0 12px 22px;
  position: relative;
  border-bottom: 1px solid var(--edge);
  color: var(--text-body);
}
ul.plain li:last-child,
ol.plain li:last-child {
  border-bottom: none;
}
ul.plain li::before,
ol.plain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 1.5px;
  background: var(--lamp-line);
}
ul.plain.myth li::before {
  background: var(--rust);
}

/* Bulleted prose inside articles. */
ul.tight {
  list-style: none;
  max-width: 58ch;
  margin-top: 8px;
}
ul.tight li {
  position: relative;
  padding: 5px 0 5px 18px;
  color: var(--text-body);
  line-height: 1.55;
}
ul.tight li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 7px;
  height: 1.5px;
  background: var(--lamp-line);
}

/* ---------- blocks ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 22px;
  margin-top: 18px;
}
.card h3 {
  margin-top: 0;
}

.caveat {
  border-left: 2px solid var(--rust);
  padding: 2px 0 2px 16px;
  margin: 22px 0;
  color: var(--text-soft);
  font-size: 15px;
  max-width: 56ch;
}

.register {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 22px 0 6px;
}

.draft-note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--rust);
  border-radius: 3px;
  padding: 10px 14px;
  margin-top: 16px;
  max-width: 58ch;
}

.meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--text-faint);
  margin-top: 10px;
}

.footnote {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--edge);
  color: var(--text-soft);
  font-size: 15px;
  max-width: 56ch;
}

/* ---------- controls ---------- */

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 20px;
  border-radius: 3px;
  min-height: 46px;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.btn:hover,
.btn:focus-visible {
  border-color: var(--lamp-line);
  background: var(--hover);
  color: var(--text);
}
.btn.primary {
  border-color: var(--lamp-line);
  color: var(--lamp);
}
.btn.primary:hover,
.btn.primary:focus-visible {
  background: var(--lamp-wash);
  border-color: var(--lamp);
  color: var(--lamp);
}

.btn-note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

/* ---------- masthead and footer ---------- */

.masthead {
  display: flex;
  /* Centred, not baseline: the bar now ends in a button, and a button
     aligned on its label's baseline sits visibly low. */
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding-bottom: 22px;
}
.wordmark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 21px;
  color: var(--text);
  text-decoration: none;
  /* Transparent by default so the current-page rule below can colour it
     without moving anything. */
  border-bottom: 1px solid transparent;
}
.wordmark:hover {
  color: var(--lamp);
}

/* The nav is pushed to the right by the margin rather than by
   justify-content, so that when it wraps to its own line it keeps its
   alignment and the wordmark stays where it was. */
.nav {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-left: auto;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
}
.nav-link {
  color: var(--text-soft);
  text-decoration: none;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--text);
  border-bottom-color: var(--lamp-line);
}

/* Where you are, said quietly: the full-strength text colour and a hairline.
   No fill, no weight change, nothing that competes with the button. */
.nav-link[aria-current='page'],
.wordmark[aria-current='page'] {
  color: var(--text);
  border-bottom-color: var(--lamp-line);
}

/* Smaller than a body button. It is the one thing in the bar that must
   survive every width, so it is sized to fit rather than to impress. */
.nav-cta {
  font-size: 14px;
  padding: 9px 14px;
  min-height: 38px;
}

/* Below the phone breakpoint the masthead note goes. It is the only thing in
   the bar that is not a destination, the landing page repeats it in the
   footer, and dropping it is what keeps the wordmark, the two links and the
   button on two lines rather than three. */
@media (max-width: 560px) {
  .masthead-note {
    display: none;
  }
  /* A point smaller and tighter. German is the width that decides this:
     "Datenschutz" plus "Nutzungsbedingungen" plus the button is the longest
     bar of the seven locales, and it fits on one wrapped row at these
     numbers. The bar wraps rather than scrolls in any case. */
  .nav {
    gap: 8px 12px;
    font-size: 13px;
  }
  .nav-cta {
    font-size: 13px;
    padding: 9px 12px;
  }
}

.site-footer {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--text-faint);
}
.site-footer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.site-footer a {
  color: var(--text-soft);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--lamp);
}
.site-footer p {
  color: var(--text-faint);
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

:focus-visible {
  outline: 1px solid var(--lamp-line);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}