@layer reset, tokens, base, layout, components, utilities;

/* ============ RESET ============ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ol, ul, figure { margin: 0; }
  ol, ul { padding: 0; }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
}

/* ============ TOKENS ============ */
/* Source: brief § 3 / handoff § 1. Only colours change in dark mode. */
@layer tokens {
  :root {
    --color-paper: #f7f4ee; --color-paper-raised: #fbfaf6; --color-ink: #1e1b17; --color-ink-muted: #625b50; --color-ink-faint: #756d61;
    --color-line: #e5dfd4; --color-line-strong: #9b9283; --color-accent: #2b4870; --color-accent-hover: #213a5c; --color-on-accent: #fbfaf6;
    --color-accent-soft: #e4e9f0; --color-selection: #d6e0ee; --color-focus: #2b4870;
    --color-ok: #3d6b47; --color-ok-soft: #e5eee3; --color-wait: #8a5510; --color-wait-soft: #f6ead5;
    --color-error: #9b3a2c; --color-error-soft: #f6e3dd; --color-field: #f1ede5;
    --font-text: 'Literata', Georgia, serif; --font-ui: 'Instrument Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --text-h2: 27px; --text-body: 20px; --text-ui: 14px; --text-small: 13px; --leading-body: 1.6;
    --text-section: 16px; --text-mono: 14px; --text-stat: 28px;
    --text-fluid: clamp(18px, 16px + .4cqi, 20px);
    --radius-s: 4px; --radius-m: 6px; --radius-l: 10px; --radius-pill: 999px;
    --size-hit: 44px; --size-marker: 16px; --width-subnav: 220px; --measure: 680px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-paper: #1c1a17; --color-paper-raised: #23211d; --color-ink: #ece6dc; --color-ink-muted: #aaa194; --color-ink-faint: #938a7d;
      --color-line: #34302a; --color-line-strong: #6c665c; --color-accent: #a9bedc; --color-accent-hover: #bccde5; --color-on-accent: #15202e;
      --color-accent-soft: #26303d; --color-selection: #33415a; --color-focus: #a9bedc;
      --color-ok: #8fc19a; --color-ok-soft: #223026; --color-wait: #e0b56a; --color-wait-soft: #33291a;
      --color-error: #e59a8a; --color-error-soft: #3a2420; --color-field: #262320;
    }
  }
}

/* ============ BASE ============ */
@layer base {
  /* Self-hosted, Latin subset (covers German umlauts, ß, €). SIL OFL, see assets/fonts/LICENSES/. */
  @font-face {
    font-family: 'Literata';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/literata-latin-opsz-normal.woff2) format('woff2');
  }
  @font-face {
    font-family: 'Literata';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/literata-latin-opsz-italic.woff2) format('woff2');
  }
  @font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/instrument-sans-latin-wght-normal.woff2) format('woff2');
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  }

  html { background: var(--color-paper); }

  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font: 15px/1.55 var(--font-ui); /* base inherited by the handoff reference */
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--color-selection); }

  a { color: var(--color-accent); text-underline-offset: 3px; }
  a:hover { color: var(--color-accent-hover); }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  summary:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ============ LAYOUT ============ */
@layer layout {
  /* Container for cqi values and the 720 px header query. Must wrap header, main and footer. */
  .rl {
    container-type: inline-size;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .rl > main { flex: 1; width: 100%; }

  .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4cqi, 32px);
  }
}

/* ============ COMPONENTS ============ */
/* Reference: handoff block "LANDINGPAGE: REFERENZ-CSS". Names and values kept so both can be compared line by line. */
@layer components {
  /* --- Header --- */
  .rl-header { position: relative; border-bottom: 1px solid var(--color-line); }
  .rl-header .wrap { min-height: 64px; display: flex; align-items: center; gap: 24px; }

  .rl-mark { display: flex; align-items: baseline; gap: 6px; margin-right: auto; color: var(--color-ink); text-decoration: none; }
  .rl-mark:hover { color: var(--color-ink); }
  .rl-mark:focus-visible { outline-offset: 4px; }
  .rl-mark b { font: 600 19px var(--font-text); letter-spacing: -.01em; }
  .rl-mark small { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--color-ink-muted); }

  .rl-nav { display: flex; align-items: center; gap: 4px; }
  .rl-nav a { min-height: var(--size-hit); padding: 0 12px; display: flex; align-items: center; gap: 3px; font-size: var(--text-ui); font-weight: 500; color: var(--color-ink-muted); text-decoration: none; }
  .rl-nav a:hover { color: var(--color-ink); }
  .rl-nav a:focus-visible { outline-offset: -4px; }
  .rl-nav a.btn-s { margin-left: 8px; min-height: 0; height: 38px; padding: 0 16px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-m); font-weight: 600; color: var(--color-ink); }
  .rl-nav a.btn-s:hover { border-color: var(--color-ink-muted); }
  .rl-nav a.btn-s:focus-visible { outline-offset: 2px; }

  /* Mobile menu: <details>, hidden from 720 px. The summary sits in the header row, the list flows below it. */
  .rl-menu { display: none; }
  .rl-menu-btn {
    position: absolute; top: 10px; right: clamp(20px, 4cqi, 32px);
    height: var(--size-hit); padding: 0 14px; display: flex; align-items: center;
    border: 1px solid var(--color-line-strong); border-radius: var(--radius-m);
    background: transparent; color: var(--color-ink);
    font: 600 var(--text-ui) var(--font-ui); cursor: pointer; list-style: none;
  }
  .rl-menu-btn::-webkit-details-marker { display: none; }
  .rl-menu-btn__open,
  .rl-menu[open] .rl-menu-btn__closed { display: none; }
  .rl-menu[open] .rl-menu-btn__open { display: inline; }
  .rl-menu__list { display: flex; flex-direction: column; padding: 0 clamp(20px, 4cqi, 32px) 12px; }
  .rl-menu__list a { min-height: 48px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-line); font-size: 16px; font-weight: 500; color: var(--color-ink); text-decoration: none; }
  .rl-menu__list a:focus-visible { outline-offset: -2px; }
  .rl-menu__list a span { color: var(--color-ink-muted); }

  @container (max-width: 719px) {
    .rl-nav { display: none; }
    .rl-menu { display: block; }
  }

  /* --- Hero --- */
  .rl-hero { max-width: 920px; padding: clamp(48px, 8cqi, 112px) 0 clamp(56px, 8cqi, 104px); display: flex; flex-direction: column; gap: 28px; }
  .rl-hero h1 { font: 600 clamp(2.5rem, 1.6rem + 2.4cqi, 3.5rem)/1.1 var(--font-text); letter-spacing: -.015em; text-wrap: balance; }
  .rl-lede { max-width: var(--measure); font-family: var(--font-text); font-size: var(--text-fluid); line-height: var(--leading-body); color: var(--color-ink-muted); text-wrap: pretty; }
  .rl-ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

  .rl-status { align-self: flex-start; display: flex; align-items: center; gap: 9px; font-size: var(--text-ui); font-weight: 500; color: var(--color-ink-muted); text-decoration: none; font-variant-numeric: tabular-nums; }
  .rl-status:hover { color: var(--color-ink); }
  .rl-status:focus-visible { outline-offset: 4px; }
  .rl-status i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-accent); display: flex; align-items: center; justify-content: center; }
  .rl-status i::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); }

  /* "In progress" marker: a soft halo that grows and fades, so the current stage reads as live.
     Used by the hero status line and the active stage in the timeline. Off with reduced motion. */
  @keyframes rl-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); }
    70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent); }
  }
  .rl-status i,
  .tl li.active .dot { animation: rl-pulse 2s ease-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    .rl-status i,
    .tl li.active .dot { animation: none; }
  }

  /* --- Buttons --- */
  .btn { height: 48px; padding: 0 20px; display: flex; align-items: center; gap: 4px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-m); color: var(--color-ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
  .btn:hover { border-color: var(--color-ink-muted); color: var(--color-ink); }
  .btn span { color: var(--color-ink-muted); }
  .btn.primary { padding: 0 22px; border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; }
  .btn.primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }

  /* --- Two-column section: title left (220), content right (680). Wraps via flex-wrap, no breakpoint. --- */
  .rl-sec { display: flex; flex-wrap: wrap; gap: 12px 64px; padding: 40px 0 56px; border-top: 1px solid var(--color-line); }
  .rl-sec > .t { flex: 1 0 180px; max-width: var(--width-subnav); margin: 0; padding-top: 6px; font-size: var(--text-section); font-weight: 600; }
  .rl-sec > .c { flex: 1 1 420px; min-width: 0; max-width: var(--measure); }

  .prose { display: flex; flex-direction: column; gap: 1em; font-family: var(--font-text); font-size: var(--text-fluid); line-height: var(--leading-body); text-wrap: pretty; }

  .numlist { list-style: none; }
  .numlist li { display: flex; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
  .numlist li span { flex: none; width: 22px; font: var(--text-small) var(--font-mono); color: var(--color-ink-muted); }
  .numlist li b { font: 400 var(--text-fluid)/1.45 var(--font-text); }

  .pills { margin: 0 0 18px; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
  .pills li { padding: 7px 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); font-size: 15px; }
  .muted-prose { font-family: var(--font-text); font-size: var(--text-fluid); line-height: var(--leading-body); color: var(--color-ink-muted); }

  /* --- Roadmap --- */
  .rl-sec.road { gap: 20px 64px; padding-bottom: 64px; }
  .road .t { display: flex; flex-direction: column; gap: 10px; }
  .road .t h2 { font-size: var(--text-section); font-weight: 600; }
  .road .t p { font-size: var(--text-ui); font-weight: 400; line-height: 1.55; color: var(--color-ink-muted); }
  .road .t small { font-size: var(--text-small); font-weight: 400; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }

  /* Stage timeline: rail (line, dot, line) left, content right. */
  .tl { list-style: none; }
  .tl li { display: flex; gap: clamp(14px, 2cqi, 20px); }
  .tl .rail { flex: none; width: var(--size-marker); display: flex; flex-direction: column; align-items: center; }
  .tl .rail::before { content: ""; width: 2px; height: 20px; background: var(--line-in, var(--color-line)); }
  .tl .rail::after { content: ""; flex: 1; width: 2px; background: var(--line-out, var(--color-line)); }
  .tl li:first-child .rail::before,
  .tl li:last-child .rail::after { background: transparent; }
  .tl .dot { flex: none; width: var(--size-marker); height: var(--size-marker); border-radius: 50%; border: 2px dashed var(--color-line-strong); background: var(--color-paper); color: var(--color-paper); display: flex; align-items: center; justify-content: center; }
  .tl .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 0 18px; border-bottom: 1px solid var(--color-line); }
  .tl .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .tl .num { font: var(--text-mono) var(--font-mono); color: var(--color-ink-muted); }
  .tl .name { flex: 1 1 220px; font: 400 var(--text-fluid)/1.35 var(--font-text); color: var(--color-ink-muted); text-wrap: pretty; }
  .tl .state { font-size: var(--text-small); font-weight: 600; color: var(--color-ink-muted); white-space: nowrap; }
  .tl .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding-left: clamp(0px, 4cqi, 34px); font-size: var(--text-small); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
  .tl .meta a { color: var(--color-accent); font-weight: 500; text-underline-offset: 3px; }
  .tl .meta a:hover { color: var(--color-accent-hover); }
  .tl .meta .now { color: var(--color-ink); }
  .tl li.done { --line-in: var(--color-ok); --line-out: var(--color-ok); }
  .tl li.done .dot { border-style: solid; border-color: var(--color-ok); background: var(--color-ok); }
  .tl li.active { --line-in: var(--color-ok); }
  .tl li.active .dot { border-style: solid; border-color: var(--color-accent); }
  .tl li.active .dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
  .tl li.done .name,
  .tl li.active .name { font-weight: 600; color: var(--color-ink); }
  .tl li.done .state { color: var(--color-ok); }
  .tl li.active .state { color: var(--color-accent); }

  /* --- Latest posts: the whole row is a link --- */
  .posts { display: flex; flex-direction: column; }
  .post { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink); text-decoration: none; }
  .post:hover { color: var(--color-accent); }
  .post .m { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-small); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
  .post .m span:first-child { font-family: var(--font-mono); }
  .post .h { font: 600 var(--text-fluid)/1.35 var(--font-text); text-wrap: pretty; }
  .post .h i { font: 400 .8em var(--font-ui); color: var(--color-ink-muted); font-style: normal; }
  .textlink { align-self: flex-start; margin-top: 18px; display: inline-flex; gap: 3px; font-size: var(--text-ui); font-weight: 600; color: var(--color-accent); text-underline-offset: 3px; }
  .textlink:hover { color: var(--color-accent-hover); }

  /* --- Follow: where to follow the build (FOLLOW-1). Rows reuse the post row. --- */
  .follow { display: flex; flex-direction: column; }
  .follow h2 { margin: 0 0 8px; font: 600 var(--text-h2)/1.25 var(--font-text); text-wrap: balance; }
  .channels { list-style: none; }
  .channel .d { font-size: 15px; line-height: 1.55; color: var(--color-ink-muted); text-wrap: pretty; }

  .rl-sec.cost { padding-bottom: 72px; }
  .cost h2 { margin: 0 0 12px; font: 600 var(--text-stat)/1.2 var(--font-text); text-wrap: balance; }
  .cost p { font-size: 15px; line-height: 1.55; color: var(--color-ink-muted); text-wrap: pretty; }

  /* --- Footer --- */
  .rl-footer { border-top: 1px solid var(--color-line); }
  .rl-footer .wrap { padding-top: 28px; padding-bottom: 44px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: var(--text-small); color: var(--color-ink-muted); }
  .rl-footer__text { display: flex; flex-direction: column; gap: 8px; }
  .rl-footer__text span:first-child { color: var(--color-ink); }
  .rl-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; }
  .rl-footer a { color: var(--color-ink-muted); }
  .rl-footer a span[aria-hidden] { margin-left: .25em; } /* "GitHub ↗" */
  .rl-footer a:hover { color: var(--color-ink); }

  /* --- Imprint, privacy --- */
  .page {
    max-width: var(--measure);
    padding: clamp(48px, 8cqi, 96px) 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-family: var(--font-text);
    font-size: var(--text-fluid);
    line-height: var(--leading-body);
    text-wrap: pretty;
  }
  .page h1 { font: 600 clamp(2rem, 1.5rem + 1.6cqi, 2.75rem)/1.15 var(--font-text); letter-spacing: -.01em; text-wrap: balance; }
  .page__head { display: flex; flex-direction: column; gap: 10px; }
  .page__meta { font: 400 var(--text-small)/1.5 var(--font-ui); color: var(--color-ink-muted); }
  .page__note { padding: 12px 16px; border-left: 3px solid var(--color-line-strong); background: var(--color-paper-raised); font: 400 var(--text-ui)/1.55 var(--font-ui); color: var(--color-ink-muted); }
  .page section { display: flex; flex-direction: column; gap: .75em; padding-top: 28px; border-top: 1px solid var(--color-line); }
  .page h2 { font: 600 clamp(21px, 19px + .5cqi, 24px)/1.3 var(--font-text); text-wrap: balance; }
  .page h3 { margin-top: .5em; font: 600 var(--text-section)/1.4 var(--font-ui); }
  .page ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: .25em; }
  .page li::marker { color: var(--color-ink-muted); }
  .page a { overflow-wrap: anywhere; }
  .page a span[aria-hidden] { margin-left: .2em; }

  /* Draft marker for legal text Kay hasn't approved yet (LEGAL-1). Must be gone before go-live (DEPLOY-1). */
  .draft { background: var(--color-wait-soft); outline: 1px dashed var(--color-wait); outline-offset: 2px; }
  div.draft { display: flex; flex-direction: column; gap: .75em; padding: 8px 10px; }
  .draft::before { content: "Draft"; margin-right: .5em; font: 600 11px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--color-wait); }
  .draft:lang(de)::before { content: "Entwurf"; }

  /* --- 404 --- */
  .not-found {
    max-width: var(--measure);
    padding: clamp(48px, 8cqi, 112px) 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: var(--font-text);
    font-size: var(--text-fluid);
    line-height: var(--leading-body);
  }
  .not-found__code { font: var(--text-mono) var(--font-mono); color: var(--color-ink-muted); }
  .not-found h1,
  .not-found__headline { font: 600 var(--text-h2)/1.25 var(--font-text); }
  .not-found div { display: flex; flex-direction: column; gap: 8px; }
  .not-found div + div { padding-top: 20px; border-top: 1px solid var(--color-line); }
}

/* ============ UTILITIES ============ */
@layer utilities {
  .sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}