/*
  Datenpunk
  Clean editorial system
  ----------------------
  Cool, high-contrast, minimal.
  No beige, no soft UI, no startup cards, no heavy decoration.

  Fonts assumed:
  - Display: Spectral
  - UI / body: Karla
  - Mono: JetBrains Mono
*/

/* ---------- Self-hosted fonts (no Google Fonts requests) ---------- */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/karla-regular-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/karla-regular-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/karla-regular-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/karla-regular-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/karla-italic-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/spectral-roman-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/spectral-roman-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/spectral-roman-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/spectral-roman-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/spectral-italic-400-latin.woff2") format("woff2");
}

:root {
    /* Urban / punk palette: hard ink, neutral off-white, one controlled accent. */
    --color-bg: #ffffff;
    --color-bg-soft: #f4f4f4;
    /* Section bands (featured strip etc.) — keep neutral (no teal cast). */
    /* Featured strip band: light anthracite (neutral grey, no green/blue cast). */
    --color-band: #f2f2f2;
    --color-ink: #0b0d10;
    --color-ink-body: #12161b;
    --color-muted: #55606a;
    --color-rule: #d6d6d6;
    /* Accent: hair copper (warm, editorial, not neon) */
    --color-accent: #b5542a;
    --color-accent-hover: #944322;
    /* Use darker tones for accent-coloured text on white. */
    --color-accent-text: #7a3418;
    --color-accent-text-hover: #5c2712;

    /* Image treatment: cohesive warmth + a touch more punch (project thumbs). */
    --thumb-filter: saturate(1.02) contrast(1.1) brightness(0.97) sepia(0.08)
      hue-rotate(-6deg);
    --thumb-filter-hover: saturate(1.05) contrast(1.12) brightness(1)
      sepia(0.08) hue-rotate(-6deg);

    /* Derived surfaces */
    --color-bg-glass: rgba(255, 255, 255, 0.96);
    --color-overlay: rgba(255, 255, 255, 0.82);
    --shadow-hairline: rgba(0, 0, 0, 0.06);

    /* Stroke weights (reduce “filigree” feeling) */
    --rule-w: 2px;
    --rule-strong-w: 4px;
    --underline-w: 2px;
  
    --font-display: "Spectral", "Georgia", serif;
    --font-ui: "Karla", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
  
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.25rem;
    --space-5: 3.5rem;
    --space-6: 5rem;
    --space-7: 7rem;
  
    --measure: 52rem;
    /*
      Wider editorial canvas: close to the viewport width (like the old featured "breakout"),
      but capped so it doesn't become ridiculous on ultra-wide screens.
    */
    /* Global content width (normal pages) */
    --page-max: 78rem;
    /* Featured strip width (selected projects) */
    --featured-max: min(
      132rem,
      calc(100dvw - var(--gutter-start) - var(--gutter-end))
    );
    /* Global gutters: symmetric so content is centred */
    --gutter-start: clamp(0.95rem, 3.1vw, 2.4rem);
    --gutter-end: clamp(0.95rem, 3.1vw, 2.4rem);

    /* Featured strip: add a bit more side air than the global gutter. */
    --featured-pad-extra: clamp(3.25rem, 9vw, 11rem);
  
    --lh-tight: 1.02;
    --lh-head: 1.08;
    --lh-snug: 1.2;
    --lh-body: 1.65;
    --lh-relaxed: 1.75;
  
    --text-body: clamp(0.95rem, 0.15vw + 0.9rem, 1rem);
  }

  /* ---------- Styling variants (test via URL params) ---------- */

  /* Type “mood” (magazine calm vs cover loud) */
  html[data-mood="calm"] {
    --dp-h1-scale: clamp(3.25rem, 5.6vw + 1.35rem, 6rem);
    --dp-h1-track: -0.045em;
  }

  html[data-mood="cover"] {
    --dp-h1-scale: clamp(3.6rem, 6.4vw + 1.6rem, 6.6rem);
    --dp-h1-track: -0.06em;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-ink-body);
    font-family: var(--font-ui);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  a {
    color: var(--color-ink);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  }
  
  a:hover {
    color: var(--color-ink);
  }

  /* Links are intentionally not underlined site-wide. */
  main a:not(.site-nav__list a):not(.site-title a) {
    text-decoration: none;
    border-bottom: var(--underline-w) solid var(--color-rule);
  }

  main a:not(.site-nav__list a):not(.site-title a):hover {
    border-bottom-color: var(--color-accent);
  }
  
  /* Selected projects: no underlined links. */
  .teaser-list--featured a,
  .teaser--featured a {
    text-decoration: none;
    border-bottom: 0;
  }
  
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  
  p {
    margin: 0 0 1.2rem 0;
    max-width: var(--measure);
  }
  
  small,
  .muted {
    color: var(--color-muted);
  }
  
  /* ---------- Skip link ---------- */
  
  .skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-2);
    z-index: 200;
    padding: var(--space-1) var(--space-3);
    background: var(--color-ink);
    color: var(--color-bg);
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  
  .skip-link:focus {
    left: var(--space-2);
  }
  
  /* ---------- Header ---------- */
  
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg-glass);
    border-bottom: var(--rule-w) solid var(--color-ink);
    backdrop-filter: blur(8px);
  }
  
  .site-header__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-3) var(--gutter-end) var(--space-3) var(--gutter-start);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
  }
  
  .site-title {
    display: none;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink);
  }
  
  .site-title a {
    color: inherit;
    text-decoration: none;
  }
  
  .site-title a:hover {
    color: var(--color-ink);
  }
  
  .site-nav {
    grid-column: 2;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2) var(--space-4);
    min-width: min(100%, 14rem);
  }
  
  .site-nav__list {
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem var(--space-3);
  }
  
  .site-nav__list a {
    display: inline-block;
    padding: 0.35rem 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.1;
    transition: color 0.15s ease, box-shadow 0.15s ease;
  }
  
  .site-nav__list a:hover {
    color: var(--color-ink);
    box-shadow: inset 0 -1px 0 var(--color-accent);
  }

  .site-nav__list a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    box-shadow: inset 0 -1px 0 var(--color-accent);
  }
  
  .site-nav__list a[aria-current="page"] {
    color: var(--color-ink);
    box-shadow: inset 0 -2px 0 var(--color-accent);
  }

  /* Keep brand label hidden (redundant with nav items). */
  
  /* ---------- Language switch ---------- */
  
  .lang-switch {
    display: inline-flex;
    align-items: stretch;
    border: var(--rule-w) solid var(--color-ink);
    background: var(--color-bg);
  }
  
  .lang-switch span[aria-hidden="true"] {
    display: inline;
    padding: 0 0.3rem;
    align-self: center;
    font-size: 0.65rem;
    color: var(--color-rule);
    user-select: none;
  }
  
  .lang-switch button {
    margin: 0;
    padding: 0.45rem 0.6rem;
    min-width: 2.35rem;
    border: none;
    background: transparent;
    color: var(--color-muted);
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  
  .lang-switch button + button {
    border-left: var(--rule-w) solid var(--color-ink);
  }
  
  .lang-switch button:hover {
    background: var(--color-bg-soft);
    color: var(--color-ink);
  }
  
  .lang-switch button[aria-pressed="true"] {
    background: var(--color-ink);
    color: var(--color-bg);
  }
  
  .lang-switch button:focus-visible {
    outline-offset: -2px;
  }
  
  /* Set ENABLE_LANG_SWITCH = true in script.js to show the control again. */
  html.lang-switch-off .lang-switch {
    display: none;
  }
  
  @media (max-width: 640px) {
    .site-header__inner {
      grid-template-columns: 1fr;
    }

    .site-nav {
      grid-column: 1;
      justify-self: stretch;
      justify-content: flex-end;
      padding-top: var(--space-2);
      border-top: 1px solid var(--color-rule);
    }

    .site-nav__list {
      gap: 0.65rem var(--space-3);
    }
  }
  
  /* ---------- Main ---------- */
  
  main {
    counter-reset: section;
    max-width: var(--page-max);
    margin: 0 auto;
    padding:
      clamp(var(--space-5), 7vw, var(--space-6))
      var(--gutter-end)
      clamp(var(--space-6), 10vw, var(--space-7))
      var(--gutter-start);
  }

  /* Project detail pages: reduce whitespace above the first embed. */
  main.main--project {
    padding-top: clamp(var(--space-2), 3vw, var(--space-3));
  }

  main.main--project .embed-frame {
    margin-top: var(--space-1);
  }

  /* Social preview: full-bleed gray band; gutters match main (L/R same as article). */
  main.main--project > .project-social-section {
    background: var(--color-bg-soft);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 var(--gutter-end) 0 var(--gutter-start);
    box-sizing: border-box;
  }
  
  /* ---------- Front masthead ---------- */
  
  .front-masthead {
    margin-bottom: clamp(var(--space-5), 7vw, var(--space-6));
    padding-bottom: var(--space-5);
    border-bottom: 0;
  }

  .front-masthead .hero {
    margin: 0;
    padding: 0;
    border: none;
  }
  
  .front-masthead .hero h1 {
    margin: 0 0 var(--space-2);
    max-width: 10ch;
    font-family: var(--font-display);
    font-size: var(--dp-h1-scale, clamp(3.4rem, 6vw + 1.5rem, 6.3rem));
    font-weight: 700;
    letter-spacing: var(--dp-h1-track, -0.05em);
    line-height: var(--lh-tight);
    color: var(--color-ink);
  }

  .front-masthead .hero h1 .dp-dot {
    color: var(--color-accent);
  }

  .issue-line {
    margin: 0 0 var(--space-2);
    max-width: none;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }

  .issue-line::after {
    content: "";
    height: 1px;
    width: 2.5rem;
    background: var(--color-accent);
    flex: 0 0 auto;
  }

  /* Make the masthead feel more “ink” + attitude. */
  .front-masthead {
    position: relative;
  }

  .front-masthead::after {
    content: "";
    display: block;
    height: var(--rule-strong-w);
    background: var(--color-ink);
    margin-top: var(--space-5);
  }
  
  .front-masthead .tagline {
    margin: 0;
    max-width: 34rem;
    font-family: var(--font-ui);
    font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: var(--lh-relaxed);
    color: var(--color-accent-text);
  }
  
  .front-intro {
    margin: var(--space-3) 0 var(--space-5);
    max-width: var(--measure);
    color: var(--color-accent-text);
    text-align: left;
    hyphens: auto;
  }

  
  /* (Option C) Keep masthead single-column even on wide screens. */
  
  /* ---------- Generic hero ---------- */
  
  .hero:not(.front-masthead .hero) {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: var(--rule-w) solid var(--color-rule);
  }
  
  .hero h1 {
    margin: 0 0 var(--space-2);
    max-width: 12ch;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw + 1.5rem, 4rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: var(--lh-head);
    color: var(--color-ink);
  }
  
  .hero .tagline {
    margin: 0;
    max-width: 32rem;
    font-family: var(--font-ui);
    font-size: clamp(0.95rem, 0.25vw + 0.9rem, 1.05rem);
    font-weight: 700;
    line-height: var(--lh-relaxed);
    color: var(--color-accent);
  }
  
  .lede:not(.front-masthead .lede) {
    margin: 0 0 clamp(var(--space-4), 5vw, var(--space-5));
    max-width: var(--measure);
    font-family: var(--font-ui);
    font-size: clamp(1rem, 0.2vw + 0.95rem, 1.08rem);
    line-height: var(--lh-relaxed);
    letter-spacing: 0;
    color: var(--color-ink-body);
    text-align: left;
    hyphens: auto;
  }
  
  /* ---------- Home: unnumbered preface (above 01) ---------- */
  
  .home-preface {
    margin-bottom: clamp(var(--space-5), 7vw, var(--space-6));
    max-width: var(--measure);
  }
  
  .home-preface__heading {
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-rule);
    font-family: var(--font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
  }
  
  .home-preface p {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: var(--lh-relaxed);
    letter-spacing: 0;
    color: var(--color-ink-body);
    text-align: left;
    hyphens: auto;
  }
  
  /* ---------- Sections ---------- */
  
  .section {
    counter-increment: section;
    margin-bottom: clamp(var(--space-5), 7vw, var(--space-6));
    position: relative;
  }

  /* Home: featured strip sits right under masthead. */
  .section--featured-strip {
    margin-top: calc(var(--space-4) * -1);
    position: relative;
    /* Make featured content read wider (less side padding). */
    --featured-pad-extra: clamp(1.5rem, 4vw, 5rem);
    /* Break out of the main column while staying centred. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding:
      var(--space-3)
      calc(var(--gutter-end) + var(--featured-pad-extra))
      var(--space-5)
      calc(var(--gutter-start) + var(--featured-pad-extra));
  }

  /* Mobile: let the featured carousel go edge-to-edge. */
  @media (max-width: 520px) {
    .section--featured-strip {
      padding-left: 0;
      padding-right: 0;
      --featured-max: 100vw;
    }

    .featured-carousel {
      max-width: 100vw;
    }

    .teaser-list--featured {
      max-width: 100vw;
    }
  }

  /* Full-width soft background band (magazine section feel). */
  .section--featured-strip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--color-band);
    z-index: -1;
  }
  
  .section:last-of-type {
    margin-bottom: 0;
  }
  
  .section h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.65rem 1rem;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: var(--rule-w) solid var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1vw + 1.2rem, 2.125rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: var(--lh-tight);
    color: var(--color-ink);
  }
  
  .section h2::before {
    content: counter(section, decimal-leading-zero);
    font-family: var(--font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-accent);
  }

  .section > p {
    margin: 0 0 var(--space-3);
    max-width: var(--measure);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: var(--lh-relaxed);
    letter-spacing: 0;
    color: var(--color-ink-body);
    text-align: left;
    hyphens: auto;
  }
  
  .section > p:last-child {
    margin-bottom: 0;
  }
  
  .section__foot {
    margin-top: var(--space-3);
  }
  
  .section__foot a {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-text);
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 0.15em;
  }
  
  .section__foot a:hover {
    color: var(--color-accent-text-hover);
    border-bottom-color: var(--color-accent-hover);
  }
  
  .section__continue {
    margin: var(--space-2) 0 0;
  }
  
  .section__continue a {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-rule);
  }
  
  .section__continue a:hover {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
  }
  
  /* ---------- Page titles ---------- */
  
  .page-title {
    margin: 0 0 var(--space-2);
    max-width: 12ch;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3vw + 1.25rem, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: var(--lh-head);
    color: var(--color-ink);
  }
  
  .standfirst {
    margin: 0 0 var(--space-4);
    max-width: var(--measure);
    font-family: var(--font-ui);
    font-size: clamp(0.98rem, 0.2vw + 0.92rem, 1.06rem);
    font-weight: 500;
    line-height: var(--lh-relaxed);
    color: var(--color-muted);
  }
  
  /* ---------- Teasers ---------- */
  
  .teaser-list {
    margin-top: var(--space-3);
    border-top: var(--rule-w) solid var(--color-ink);
  }

  /* Avoid double rule: section heading already has a bottom rule. */
  .section > h2 + .teaser-list {
    margin-top: 0;
    border-top: 0;
  }
  
  .teaser {
    border-bottom: var(--rule-w) solid var(--color-rule);
  }
  
  .teaser__link {
    display: block;
    padding: var(--space-4) 0 var(--space-5);
    color: inherit;
  }
  
  .teaser__link:hover {
    background: transparent;
    color: inherit;
  }
  
  .teaser__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }
  
  .teaser__hed {
    margin: 0 0 var(--space-2);
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 1.1vw + 1.1rem, 1.95rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--color-ink);
    transition: border-color 0.15s ease;
    border-bottom: var(--underline-w) solid transparent;
    display: inline-block;
  }
  
  .teaser__link:hover .teaser__hed {
    border-bottom-color: var(--color-accent);
  }
  
  .teaser__deck {
    margin: 0 0 var(--space-2);
    max-width: var(--measure);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 400;
    line-height: var(--lh-relaxed);
    letter-spacing: 0;
    color: var(--color-muted);
  }
  
  .teaser__read {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent-text);
    transition: letter-spacing 0.15s ease, color 0.15s ease;
  }
  
  .teaser__link:hover .teaser__read {
    letter-spacing: 0.19em;
    color: var(--color-accent-text-hover);
  }
  
  .teaser--linked .teaser__link {
    padding-bottom: var(--space-2);
  }
  
  .teaser__github {
    display: inline-block;
    margin: 0 0 var(--space-5);
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-accent-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-rule);
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  
  .teaser__github:hover,
  .teaser__github:focus-visible {
    color: var(--color-accent-text-hover);
    border-bottom-color: var(--color-accent);
    outline: none;
  }
  
  .teaser__github:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  .teaser__github--placeholder {
    visibility: hidden;
    pointer-events: none;
  }

  .teaser__tags {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    max-width: var(--measure);
  }

  .teaser__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--color-rule);
    background: var(--color-bg);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
  }
  
  .teaser--static {
    padding: var(--space-4) 0 var(--space-5);
  }
  
  .teaser--static .teaser__hed {
    margin: 0 0 var(--space-2);
  }
  
  .teaser--static .teaser__deck {
    margin: 0 0 var(--space-2);
  }
  
  .teaser--static .teaser__read {
    color: var(--color-muted);
    font-weight: 600;
  }
  
  .teaser--has-thumb .teaser__link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-3);
  }
  
  .teaser__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-3);
  }
  
  .teaser__thumb {
    width: min(34vw, 10.5rem);
    max-width: 38%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-bg-soft);
    border: 0;
    box-shadow: 0 1px 0 var(--shadow-hairline), 0 12px 22px rgba(0, 0, 0, 0.06);
    filter: var(--thumb-filter);
    transition: filter 0.2s ease;
  }

  .teaser__link:hover .teaser__thumb,
  .teaser__link:focus-visible .teaser__thumb {
    filter: var(--thumb-filter-hover);
  }

  /* Opt-out for “true” screenshots where colour fidelity matters. */
  .teaser__thumb.thumb--raw {
    filter: none;
  }

  /* Smooth thumbnail reveal (inherits reveal timing). */
  .teaser .teaser__thumb {
    transform: translateY(10px) scale(0.985);
    opacity: 0.001;
    transition: transform 0.65s ease, opacity 0.65s ease;
    will-change: transform, opacity;
  }

  .teaser.reveal--visible .teaser__thumb {
    transform: none;
    opacity: 1;
  }
  
  .teaser__body {
    flex: 1 1 auto;
    min-width: 0;
  }
  
  .teaser--has-thumb .teaser__hed {
    max-width: none;
  }
  
  @media (max-width: 520px) {
    .teaser--has-thumb .teaser__link,
    .teaser__row {
      flex-direction: column;
    }
  
    .teaser--has-thumb .teaser__thumb,
    .teaser__row .teaser__thumb {
      width: 100%;
      max-width: 100%;
      max-height: 12rem;
    }
  }
  
  @media (min-width: 720px) {
    .teaser-list--grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-5);
      row-gap: 0;
      border-top: 1px solid var(--color-ink);
      align-items: stretch;
    }

    .teaser-list--grid .teaser {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      height: 100%;
      border-bottom: 1px solid var(--color-rule);
    }

    /*
      Projects page: magazine grid — thumb above text, equal cell size.
    */
    .teaser-list--grid .teaser--has-thumb .teaser__link {
      flex: 1 1 auto;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-2);
      height: 100%;
    }

    .teaser-list--grid .teaser__row {
      flex: 1 1 auto;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-2);
      height: 100%;
    }

    .teaser-list--grid .teaser--has-thumb .teaser__thumb,
    .teaser-list--grid .teaser__row .teaser__thumb {
      width: 100%;
      max-width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      object-position: center bottom;
    }

    .teaser-list--grid .teaser__body {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .teaser-list--grid .teaser__deck,
    .teaser-list--grid .teaser__tags {
      max-width: none;
    }

    .teaser-list--grid .teaser__deck {
      flex: 1 1 auto;
    }

    /* Denser grid rhythm: less padding/margin inside cards. */
    .teaser-list--grid .teaser__link {
      padding: var(--space-3) 0 var(--space-4);
    }

    .teaser-list--grid .teaser--linked .teaser__link {
      padding-bottom: var(--space-2);
    }

    .teaser-list--grid .teaser--static {
      flex: 1 1 auto;
      padding: var(--space-3) 0 var(--space-4);
      height: 100%;
    }

    .teaser-list--grid .teaser__hed {
      /* Give the accent underline room so it doesn't crowd the deck. */
      padding-bottom: 0.12em;
      margin-bottom: var(--space-2);
    }

    .teaser-list--grid .teaser__deck {
      margin-bottom: var(--space-1);
    }

    .teaser-list--grid .teaser__github {
      margin-top: auto;
      margin-bottom: var(--space-4);
    }
  }

  /* ---------- Home: featured projects (big thumbs, text underneath) ---------- */

  .teaser-list--featured {
    border-top: 0;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2) var(--space-3);
    align-items: stretch;
    /* Wider than the main column, but always centred. */
    width: 100%;
    max-width: var(--featured-max);
    margin: 0 auto;
  }

  /* Featured carousel on home: horizontal scroll with two “pages” (2+2). */
  .featured-carousel {
    position: relative;
    width: 100%;
    max-width: var(--featured-max);
    margin: 0 auto;
  }

  .teaser-list--featured[data-featured-carousel] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Carousel spans the featured max width (centred by parent). */
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    left: auto;
    transform: none;
    padding-bottom: var(--space-2);
    scrollbar-width: thin; /* Firefox */
  }

  .teaser-list--featured[data-featured-carousel]::-webkit-scrollbar {
    height: 8px;
  }

  .teaser-list--featured[data-featured-carousel]::-webkit-scrollbar-thumb {
    background: var(--color-rule);
  }

  /* Featured carousel: 1 card per viewport on smaller screens. */

  /* When the carousel effectively has one page, full-bleed the image. */
  .teaser-list--featured[data-featured-carousel][data-featured-pages="1"] {
    overflow-x: hidden;
    scroll-snap-type: none;
  }

  .teaser-list--featured[data-featured-carousel][data-featured-pages="1"] .teaser--featured .teaser__media {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    margin: 0;
    z-index: 2;
  }

  .teaser-list--featured[data-featured-carousel][data-featured-pages="1"] .teaser--featured .teaser__thumb {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: clamp(18rem, 60vh, 34rem);
    object-fit: contain;
    object-position: center bottom;
  }

  /* Keep the over-image title aligned with featured-strip gutters. */
  .teaser-list--featured[data-featured-carousel][data-featured-pages="1"] .teaser--featured .teaser__media .teaser__hed {
    right: calc(var(--gutter-end) + var(--featured-pad-extra));
    bottom: clamp(0.6rem, 1.1vw, 0.95rem);
  }

  @media (min-width: 1200px) {
    .teaser-list--featured[data-featured-carousel] {
      /* Show two cards in the viewport on large screens. */
      grid-auto-columns: calc((100% - var(--space-3)) / 2);
      grid-template-columns: none;
    }
  }

  /* Slightly shorter images inside the home carousel. */
  .teaser-list--featured[data-featured-carousel] .teaser--featured .teaser__thumb {
    aspect-ratio: auto;
    height: clamp(15rem, 24vw, 22rem);
  }

  /* Mobile: keep featured images taller so they don't read as “tiny”. */
  @media (max-width: 520px) {
    .teaser-list--featured[data-featured-carousel] .teaser--featured .teaser__thumb {
      aspect-ratio: 16 / 9;
    }
  }

  .teaser-list--featured[data-featured-carousel] > article {
    /* Prevent any card from collapsing to 0 width. */
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  @media (min-width: 1200px) {
    .teaser-list--featured[data-featured-carousel] > article {
      min-width: calc((100% - var(--space-3)) / 2);
    }
  }

  .featured-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: var(--space-2);
  }

  .featured-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--color-ink);
    background: transparent;
    padding: 0;
    cursor: pointer;
  }

  .featured-dot[aria-current="true"] {
    background: var(--color-ink);
  }

  @media (min-width: 720px) {
    .teaser-list--featured:not([data-featured-carousel]) {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 1020px) {
    .teaser-list--featured:not([data-featured-carousel]) {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Keep featured projects big: stay at two columns longer. */
  @media (min-width: 1700px) {
    .teaser-list--featured:not([data-featured-carousel]) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  .teaser--featured {
    border-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0;
    padding: 0;
    position: relative;
  }

  .teaser--featured .teaser__link {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .teaser--featured.teaser--has-thumb .teaser__link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .teaser--featured .teaser__row {
    flex-direction: column;
    height: 100%;
    gap: 0;
    /* Match linked-card behaviour: stretch body full width */
    align-items: stretch;
    position: relative;
  }

  .teaser--featured .teaser__thumb {
    width: 100%;
    max-width: 100%;
    /* Slightly taller than 16:9 to read more like a magazine image. */
    aspect-ratio: auto;
    height: clamp(16rem, 26vw, 24rem);
    flex: 0 0 auto;
    /* Keep lower frame (e.g. audience) visible; size unchanged, only crop anchor. */
    object-position: center bottom;
  }

  .teaser--featured .teaser__media {
    position: relative;
  }

  /* Featured thumbs: add contrast + subtle vignette so “bright” images
     (maps, skies, alpine panoramas) don't read washed out. */
  .teaser--featured .teaser__thumb {
    filter: saturate(1.04) contrast(1.12) brightness(0.96);
    transition: filter 0.2s ease;
  }

  .teaser--featured .teaser__link:hover .teaser__thumb,
  .teaser--featured .teaser__link:focus-visible .teaser__thumb {
    filter: saturate(1.06) contrast(1.14) brightness(0.99);
  }

  .teaser--featured .teaser__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        120% 100% at 50% 20%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.08) 55%,
        rgba(0, 0, 0, 0.16) 100%
      ),
      linear-gradient(to top, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0) 55%);
    z-index: 2;
  }

  /* Keep featured grid aligned while still animating: no vertical offset. */
  .teaser-list--featured .reveal {
    transform: none;
  }

  .teaser--featured .teaser__body {
    padding-top: 1.05rem;
    padding-left: clamp(0.7rem, 1vw, 1.05rem);
    padding-right: clamp(0.9rem, 1.2vw, 1.25rem);
    /* Slightly narrower text column than the image */
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    width: 100%;
  }

  .teaser--featured .teaser__hed {
    font-size: clamp(1.55rem, 1.2vw + 1.1rem, 2.1rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  /* Featured: title sits on image, pinned to the image bottom. */
  .teaser--featured .teaser__media .teaser__hed {
    position: absolute;
    right: clamp(0.6rem, 1.1vw, 0.95rem);
    left: auto;
    bottom: clamp(0.6rem, 1.1vw, 0.95rem);
    z-index: 3;
    margin: 0;
    padding: 0.35rem 0.5rem;
    background: var(--color-overlay);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--shadow-hairline);
    color: var(--color-ink);
    text-align: right;
    width: fit-content;
    max-width: calc(100% - (2 * clamp(0.6rem, 1.1vw, 0.95rem)));
    white-space: normal;
  }

  /* In featured cards, the title is over the image (not in the body). */
  .teaser--featured .teaser__body .teaser__hed {
    display: none;
  }


  .teaser--featured .teaser__deck {
    font-size: 1.02rem;
    line-height: var(--lh-relaxed);
  }

  .teaser--featured .teaser__body {
    flex: 1 1 auto;
  }

  .teaser--featured .teaser__hed {
    max-width: none;
  }

  /* Keep featured cards aligned: reserve consistent text space. */
  .teaser--featured .teaser__body {
    min-height: 11.25rem;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
  }

  .teaser--featured .teaser__hed,
  .teaser--featured .teaser__deck {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .teaser--featured .teaser__hed {
    -webkit-line-clamp: 2;
    /* Don't reserve extra blank space above the deck. */
    min-height: 0;
    margin-bottom: 0.15rem;
  }

  .teaser--featured .teaser__deck {
    -webkit-line-clamp: 3;
    margin-top: 0;
    margin-bottom: 0.15rem;
    /* Reserve exactly three lines so tags start aligned. */
    min-height: calc(3 * 1.65em);
  }

  .teaser--featured .teaser__tags {
    margin-bottom: 0.25rem;
    max-height: 2.35rem;
    min-height: 2.35rem;
    overflow: hidden;
  }

  
  /* ---------- Article ---------- */
  
  .article-section {
    margin-bottom: var(--space-4);
    max-width: var(--measure);
  }
  
  .article-section--wide {
    max-width: none;
  }
  
  .article-section h2 {
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-ink);
    font-family: var(--font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .article-section h3 {
    margin: 0 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  /* Anchor targets on project pages shouldn't hide under sticky header. */
  .main--project [id] {
    scroll-margin-top: 6.5rem;
  }
  
  .kolumnen-series {
    margin: 0 0 var(--space-1);
    max-width: var(--measure);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .kolumnen-masthead {
    max-width: var(--measure);
  }

  main.main--project[data-kolumnen-page] .page-title {
    margin-bottom: var(--space-2);
    max-width: var(--measure);
  }

  main.main--project[data-kolumnen-page] .kolumnen-tags {
    margin: 0 0 var(--space-3);
    max-width: var(--measure);
  }

  main.main--project[data-kolumnen-page] .kolumnen-tags:empty {
    display: none;
  }

  main.main--project[data-kolumnen-page] .standfirst {
    margin-bottom: 0;
  }

  main.main--project[data-kolumnen-page] .article-divider {
    margin-top: var(--space-4);
    margin-bottom: var(--space-5);
  }

  main.main--project[data-kolumnen-page] [data-kolumnen-body] {
    padding-top: var(--space-1);
  }

  [data-kolumnen-body] p + p {
    margin-top: 1.2rem;
  }

  .article-section p {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: var(--lh-relaxed);
    letter-spacing: 0;
    color: var(--color-ink-body);
    text-align: left;
    hyphens: auto;
  }

  .embed-frame {
    margin-top: var(--space-3);
    width: 100%;
    height: clamp(48rem, 94vh, 96rem);
    background: var(--color-bg-soft);
    overflow: hidden;
  }

  /* Project embeds: make the main iframe a bit taller. */
  html[data-i18n-document-title="meta.documentTitle.project1"] .embed-frame,
  html[data-i18n-document-title="meta.documentTitle.project2"] .embed-frame {
    height: clamp(56rem, 102vh, 110rem);
  }

  .embed-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Let wide embeds breathe (reduce side clipping). */
  .article-section--wide .embed-frame {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Project1 social embed — measure column centred; height follows column width. */
  html[data-i18n-document-title="meta.documentTitle.project1"]
    main.main--project
    > .project-social-section
    > .project-social-section__inner {
    max-width: var(--measure);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  html[data-i18n-document-title="meta.documentTitle.project1"]
    main.main--project
    > .project-social-section
    .project-social-section__inner
    .embed-frame {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    background: var(--color-bg-soft);
    /* Binds height to .measure width; cap keeps it modest. True doc-height needs embed postMessage. */
    height: auto;
    /* ~+5% vs 10/9 at same width. */
    aspect-ratio: 20 / 19;
    max-height: min(74dvh, 51.5rem);
    min-height: 28rem;
  }

  /* When a wide embed is followed by the divider, make it flush + full width. */
  .article-section--wide + .article-divider {
    width: 100vw;
    max-width: none;
    margin-top: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  main.main--project .article-section--wide .embed-frame {
    border: var(--rule-w) solid var(--color-rule);
    box-shadow: 0 1px 0 var(--color-ink);
  }

  main.main--project .article-section--wide + .article-divider {
    margin-top: var(--space-3);
    margin-bottom: var(--space-5);
  }

  main.main--project #project-description {
    padding-top: var(--space-1);
  }

  .embed-fallback {
    margin-top: var(--space-2);
  }

  .embed-fallback a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-accent-text);
    border-bottom: 1px solid var(--color-rule);
  }

  .embed-fallback a:hover {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
  }

  .article-meta {
    margin: var(--space-2) 0 0;
    max-width: var(--measure);
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.25rem;
  }

  .article-meta__link {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-accent-text);
    border-bottom: 1px solid var(--color-rule);
  }

  .article-meta__link:hover {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
  }

  .tech-stack {
    max-width: var(--measure);
    margin-top: var(--space-2);
  }

  .tech-bullets {
    margin: 0;
    padding-left: 1.1rem;
    font-family: var(--font-ui);
    color: var(--color-ink-body);
    line-height: var(--lh-relaxed);
  }

  .tech-bullets li {
    margin: 0.2rem 0;
  }

  .project-bullets {
    margin: 0;
    padding-left: 1.1rem;
    font-family: var(--font-ui);
    color: var(--color-ink-body);
    line-height: var(--lh-relaxed);
  }

  .project-bullets li {
    margin: 0.2rem 0;
  }

  .project-bullets a,
  .main--project .article-section p a {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .project-bullets a:hover,
  .main--project .article-section p a:hover {
    color: var(--color-accent-text-hover);
  }

  /* Project1: tool tags should match project-card tag styling. */
  .main--project .tool-tags {
    margin: var(--space-2) 0 var(--space-3);
    max-width: var(--measure);
  }
  
  .figure-placeholder {
    margin: var(--space-4) 0;
    max-width: min(var(--measure), 100%);
    min-height: clamp(10rem, 26vw, 14rem);
    padding: var(--space-3);
    border: 1px dashed var(--color-rule);
    background: var(--color-bg);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    line-height: var(--lh-body);
    color: var(--color-muted);
  }
  
  .figure-placeholder p {
    max-width: 28rem;
    margin: 0;
  }
  
  .article-figure {
    margin: var(--space-4) 0;
    max-width: min(var(--measure), 100%);
  }

  .article-figure--portrait {
    max-width: min(17.5rem, 100%);
    border: var(--rule-w) solid var(--color-ink);
    background: var(--color-bg);
    padding: var(--space-2);
  }

  .article-figure--portrait img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.02);
  }

  /* About: text left, portrait right */
  .about-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }

  body.about {
    --measure-about: 60rem;
    --about-text-max: min(var(--measure-about), 100%);
  }

  body.about .about-masthead__text {
    max-width: none;
  }

  body.about .about-masthead .lede {
    max-width: var(--about-text-max);
    text-align: left;
    hyphens: auto;
  }

  body.about main .section > p {
    max-width: var(--about-text-max);
  }

  body.about main .section.section--narrow > p {
    max-width: var(--about-text-max);
  }

  body.about .about-masthead__text .section__continue {
    margin-top: 0.25rem;
    margin-bottom: var(--space-4);
  }

  /* About title should read as one unit (“Über mich”). */
  .about-masthead .page-title {
    max-width: none;
    white-space: nowrap;
  }

  @media (max-width: 420px) {
    .about-masthead .page-title {
      white-space: normal;
    }
  }

  @media (min-width: 920px) {
    body.about .about-masthead {
      grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
      column-gap: clamp(var(--space-4), 5vw, var(--space-6));
      align-items: start;
    }

    body.about .about-masthead .article-figure--portrait {
      max-width: min(22rem, 100%);
      margin-top: 0.35rem;
      justify-self: end;
      margin-right: clamp(0.75rem, 2vw, 1.5rem);
    }
  }
  
  .article-figure img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--color-bg-soft);
  }

  /* About: inline SVG map (interactive, editorial) */
  .article-figure .europe-map {
    display: block;
    width: 100%;
    height: auto;
    background: var(--color-bg-soft);
  }

  body.about .article-figure--map {
    max-width: min(44rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  body.about .about-bg {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }

  body.about .about-bg > p {
    max-width: var(--about-text-max);
  }

  @media (min-width: 920px) {
    body.about .about-bg {
      grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem);
      column-gap: clamp(var(--space-4), 4vw, var(--space-6));
    }

    body.about .about-bg .article-figure--map {
      margin: 0;
      margin-top: 1.1rem;
      margin-right: clamp(0.75rem, 2vw, 1.5rem);
      justify-self: stretch;
    }
  }

  .europe-map .bg {
    fill: var(--color-bg-soft);
  }

  .europe-map .frame {
    fill: none;
    stroke: var(--color-ink);
    stroke-width: 2;
  }

  .europe-map .grid line {
    stroke: var(--color-rule);
    stroke-width: 1;
  }

  .europe-map .country {
    fill: rgba(255, 255, 255, 0.62);
    stroke: var(--color-ink);
    stroke-width: 1;
    opacity: 0.92;
  }

  .europe-map .countries {
    vector-effect: non-scaling-stroke;
  }

  .europe-map .flag-ch__bg {
    fill: #d22; /* Swiss red */
    stroke: var(--color-ink);
    stroke-width: 0.8;
  }

  .europe-map .flag-ch__cross {
    fill: #fff;
  }

  .europe-map .note {
    fill: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .europe-map .marker {
    fill: var(--color-accent);
    stroke: var(--color-ink);
    stroke-width: 1.25;
  }

  .europe-map .journey {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    opacity: 0.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 6 7;
  }

  .europe-map .ring {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    transform: scale(0.7);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .europe-map .poi__inner:hover .ring,
  .europe-map .poi__inner:focus-visible .ring {
    opacity: 0.85;
    transform: scale(1);
  }

  .europe-map .poi__inner:hover .marker,
  .europe-map .poi__inner:focus-visible .marker {
    fill: var(--color-accent-hover);
  }

  /* Reveal animation: stagger markers when map enters viewport. */
  .europe-map .poi__inner {
    opacity: 0.001;
    transform-box: fill-box;
    transform-origin: center;
    transform: translateY(10px) scale(0.985);
  }

  .europe-map.is-visible .poi__inner {
    animation: map-pop 650ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }

  .europe-map.is-visible .journey {
    animation: map-draw 900ms ease both;
  }

  @keyframes map-pop {
    from {
      opacity: 0.001;
      transform: translateY(10px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes map-draw {
    from {
      opacity: 0.0;
      stroke-dashoffset: 160;
    }
    to {
      opacity: 0.55;
      stroke-dashoffset: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .europe-map .poi__inner {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }

    .europe-map .journey {
      animation: none !important;
      stroke-dashoffset: 0 !important;
      opacity: 0.55;
    }

    .europe-map .ring {
      transition: none !important;
    }
  }
  
  .article-figure figcaption {
    margin-top: var(--space-2);
    max-width: var(--measure);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-style: italic;
    line-height: var(--lh-relaxed);
    color: var(--color-muted);
  }
  
  .project-github {
    margin: var(--space-3) 0 0;
    max-width: var(--measure);
  }
  
  .project-github a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-accent-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-rule);
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  
  .project-github a:hover,
  .project-github a:focus-visible {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
    outline: none;
  }
  
  .project-github a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }
  
  .back-nav {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-ink);
    max-width: var(--measure);
  }
  
  .back-nav a {
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-rule);
  }
  
  .back-nav a:hover {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
  }
  
  /* ---------- Contact / mono ---------- */
  
  body.contact main .article-section a {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
  }

  /* Contact page: slightly denser rhythm. */
  body.contact main {
    padding-top: clamp(var(--space-4), 6vw, var(--space-5));
    padding-bottom: clamp(var(--space-5), 9vw, var(--space-6));
  }

  body.contact .lede {
    margin-bottom: var(--space-4);
  }

  body.contact main .article-section {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-rule);
  }

  body.contact main .article-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* ---------- CV ---------- */


  .cv__main {
    padding-top: clamp(var(--space-4), 6vw, var(--space-5));
  }

  .cv__hero {
    margin-bottom: var(--space-5);
    border-bottom: none;
    padding-bottom: 0;
  }

  .cv__heroInner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .cv__heroText {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cv__heroLinks {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
  }

  .cv__heroSide {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    width: min(11rem, 38vw);
    max-width: 100%;
  }

  .cv__photo {
    margin: 0;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--color-rule);
    background: var(--color-bg-soft);
    overflow: hidden;
  }

  .cv__photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 4;
  }

  @media (min-width: 720px) {
    .cv__heroInner {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
  }

  .cv__name {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    /* Match the brand masthead scale on the home page. */
    font-size: var(--dp-h1-scale, clamp(3.4rem, 6vw + 1.5rem, 6.3rem));
    line-height: var(--lh-tight);
    letter-spacing: var(--dp-h1-track, -0.05em);
    color: var(--color-ink);
  }

  .cv__meta {
    margin: 0;
    max-width: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--color-muted);
  }

  .cv__metaLine {
    display: block;
  }

  .cv__metaLine + .cv__metaLine {
    margin-top: 0.35rem;
  }

  .cv__section {
    margin-bottom: var(--space-6);
  }

  .cv__h2 {
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-rule);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ink);
  }

  .cv__item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-rule);
  }

  .cv__item:last-child {
    border-bottom: 0;
  }

  .cv__itemHead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
  }

  .cv__h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-ink);
  }

  .cv__when {
    margin: 0;
    max-width: none;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .cv__subhead {
    margin: 0.75rem 0 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .cv__bullets {
    margin: 0 0 0.6rem 1.1rem;
    padding: 0;
    max-width: none;
  }

  .cv__bullets li {
    margin-bottom: 0.35rem;
  }

  .cv__edu {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cv__edu li {
    margin: 0 0 0.9rem;
  }

  .cv__edu span {
    color: var(--color-muted);
  }

  .cv__pubs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: none;
  }

  .cv__pubs li {
    margin: 0;
  }

  .cv__pub--featured .cv__pubInner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.75rem;
    gap: var(--space-3);
    align-items: start;
  }

  .cv__pubBody {
    min-width: 0;
  }

  .cv__pubCover {
    margin: 0;
    width: 3.75rem;
    flex-shrink: 0;
  }

  .cv__pubCover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
  }

  @media (max-width: 560px) {
    .cv__pub--featured .cv__pubInner {
      grid-template-columns: 1fr 4.5rem;
    }

    .cv__pubCover {
      width: 4.5rem;
    }
  }

  .cv__pubs a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .cv__pubs span {
    color: var(--color-muted);
  }

  .cv__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: var(--measure);
  }

  @media (min-width: 720px) {
    .cv__grid {
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
  }

  .cv__kv {
    border: 1px solid var(--color-rule);
    background: var(--color-bg-soft);
    padding: 0.9rem 1rem;
  }

  .cv__k {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 0.35rem;
  }

  .cv__v {
    font-family: var(--font-ui);
    color: var(--color-ink-body);
    line-height: 1.55;
  }

  .cv__gh {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
  }

  .cv__icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-ink);
    flex: 0 0 auto;
  }

  .cv__item .teaser__tags {
    margin: var(--space-2) 0 0;
    max-width: none;
  }

  .cv__item .teaser__tag {
    background: var(--color-bg);
  }

  @media (min-width: 900px) {
    .cv__itemHead {
      grid-template-columns: 1fr auto;
      align-items: baseline;
    }

    .cv__grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media print {
    body.cv .site-header,
    body.cv .site-footer {
      display: none !important;
    }

    body.cv main {
      max-width: none;
      padding: 0;
    }

    .cv__section {
      margin-bottom: 1.2rem;
    }

    .cv__item {
      padding: 0.75rem 0;
    }

    .cv__kv {
      background: transparent;
    }

    .cv__heroInner {
      flex-direction: row;
      align-items: flex-end;
      gap: 1rem;
    }

    .cv__photo {
      width: 2.6cm;
      border-color: #000;
    }
  }
  
  .mono-hint {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-rule);
    background: var(--color-bg-soft);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-muted);
  }
  
  /* ---------- Footer ---------- */
  
  .site-footer {
    margin-top: clamp(var(--space-5), 7vw, var(--space-6));
    padding: var(--space-4) var(--gutter-end) var(--space-4) var(--gutter-start);
    border-top: 1px solid var(--color-ink);
    background: var(--color-bg);
  }
  
  .site-footer__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
  }

  .site-footer__meta {
    grid-column: 1;
    margin: 0;
    max-width: 42rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.45;
    color: var(--color-muted);
  }

  /* Mirror header nav width so Impressum ends where Kontakt ends. */
  .site-footer__nav {
    grid-column: 2;
    justify-self: end;
  }

  .site-footer__nav-ghost {
    visibility: hidden;
    pointer-events: none;
  }

  .site-footer__impressum-slot {
    position: relative;
  }

  .site-footer__impressum-slot > .site-footer__nav-ghost {
    display: inline-block;
  }

  .site-footer__impressum-slot > .site-footer__impressum {
    position: absolute;
    right: 0;
    top: 0;
  }

  .site-footer__lang-spacer {
    visibility: hidden;
    pointer-events: none;
  }

  html.lang-switch-off .site-footer__lang-spacer {
    display: none;
  }

  .site-footer__impressum {
    display: inline-block;
    padding: 0.35rem 0;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--color-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, box-shadow 0.15s ease;
  }

  .site-footer__impressum:hover,
  .site-footer__impressum:focus-visible {
    color: var(--color-ink);
    box-shadow: inset 0 -1px 0 var(--color-accent);
  }

  .site-footer__impressum:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
  }

  @media (max-width: 640px) {
    .site-footer__inner {
      grid-template-columns: 1fr;
    }

    .site-footer__meta {
      grid-column: 1;
    }

    .site-footer__nav {
      grid-column: 1;
      justify-self: stretch;
      justify-content: flex-end;
    }
  }
  
  .impressum-lines {
    white-space: pre-line;
  }

  p[data-i18n] {
    white-space: pre-line;
  }
  
  /* ---------- Reduced motion ---------- */
  
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }

  /* ---------- Storytelling elements (sample_claude feel, Datenpunk palette) ---------- */

  .progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--color-accent);
    z-index: 120;
    pointer-events: none;
  }

  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal.reveal--visible {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1 !important;
      transform: none !important;
    }

    .teaser .teaser__thumb {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  .section-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .section-label::after {
    content: "";
    flex: 0 0 2.5rem;
    height: 1px;
    background: var(--color-rule);
  }

  .divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: var(--space-4) 0;
    color: var(--color-muted);
  }

  .divider::before,
  .divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-rule);
  }

  .divider span {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ---------- Article divider (project pages) ---------- */

  .article-divider {
    margin: var(--space-4) 0;
    max-width: var(--measure);
    height: 1px;
    background: var(--color-rule);
  }

  .article-divider--double {
    height: 3px;
    background: linear-gradient(
      to bottom,
      var(--color-rule),
      var(--color-rule) 1px,
      transparent 1px,
      transparent 2px,
      var(--color-rule) 2px,
      var(--color-rule) 3px
    );
  }

  .embed-jumps {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    margin: 0 0 var(--space-2);
    max-width: 100%;
  }

  .embed-jumps__sep {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-rule);
    user-select: none;
  }

  .embed-jump {
    display: inline-block;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    border-bottom: 1px solid transparent;
  }

  .embed-jump:hover {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
  }

  /* ---------- Project tag filter (projects.html) ---------- */

  .tag-filter {
    max-width: var(--measure);
  }

  .tag-filter__label {
    margin: 0 0 var(--space-2);
    color: var(--color-muted);
    font-weight: 600;
  }

  .tag-filter__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.6rem;
    align-items: center;
  }

  .tag-filter__btn {
    appearance: none;
    border: 1px solid var(--color-ink);
    background: var(--color-bg);
    color: var(--color-ink);
    padding: 0.4rem 0.65rem;
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .tag-filter__btn:hover {
    background: var(--color-bg-soft);
    color: var(--color-ink);
  }

  .tag-filter__btn[aria-pressed="true"] {
    background: var(--color-ink);
    color: var(--color-bg);
    border-color: var(--color-ink);
  }

  .tag-filter__empty {
    margin-top: var(--space-3);
    max-width: var(--measure);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }

  /* Tag filter sets [hidden] on cards; grid layout uses display:flex which
     otherwise overrides the hidden attribute (no effect). */
  .teaser-list .teaser[hidden] {
    display: none !important;
  }

  .pull-quote {
    margin: var(--space-4) 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    border-left: 2px solid var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1vw + 1rem, 1.5rem);
    font-style: italic;
    line-height: var(--lh-relaxed);
    color: var(--color-ink-body);
    max-width: min(44rem, 100%);
  }

  .note-box {
    margin: var(--space-4) 0;
    padding: var(--space-3);
    border: 1px solid var(--color-rule);
    background: var(--color-bg-soft);
    max-width: min(var(--measure), 100%);
  }

  .note-box-label {
    margin: 0 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .note-box p {
    margin: 0;
    max-width: none;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    line-height: var(--lh-relaxed);
    color: var(--color-ink-body);
  }

  .timeline {
    position: relative;
    margin: var(--space-4) 0;
    max-width: min(var(--measure), 100%);
  }

  .timeline::before {
    content: "";
    position: absolute;
    left: 5.25rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-rule);
  }

  .tl-row {
    display: grid;
    grid-template-columns: 5.25rem 1fr;
    margin-bottom: var(--space-3);
  }

  .tl-age {
    padding-right: var(--space-3);
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    line-height: var(--lh-body);
  }

  .tl-body {
    position: relative;
    padding-left: var(--space-3);
  }

  .tl-body::before {
    content: "";
    position: absolute;
    left: -0.3rem;
    top: 0.45rem;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-bg);
    border: 2px solid var(--color-ink);
  }

  .tl-body h4 {
    margin: 0 0 0.3rem;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-ink);
  }

  .tl-body p {
    margin: 0;
    max-width: none;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    line-height: var(--lh-relaxed);
    color: var(--color-muted);
  }

  @media (max-width: 620px) {
    .timeline::before {
      left: 4.25rem;
    }

    .tl-row {
      grid-template-columns: 4.25rem 1fr;
    }
  }