/* =========================================================
   Ultra Clean Minimal — styles.css (Full Version)
   Erweiterungen:
   - Technische Inhalte (Listen, Code, lange Tokens)
   - PDF Badge (Clean Variant)
   - Accessibility & Motion Optimierungen
   ========================================================= */

/* Fonts */
@font-face {
  font-family:"Inter";
  src:url("fonts/InterVariable.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  font-named-instance:"Regular";
}
@font-face {
  font-family:"Inter";
  src:url("fonts/InterVariable-Italic.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
  font-named-instance:"Italic";
}

@layer reset, base, typography, components, utilities;

/* Reset */
@layer reset {
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
}

/* Root (Light) */
:root{
  --bg:#ffffff;
  --bg-alt:#fafbfc;
  --surface:#ffffff;
  --surface-alt:#f5f7f9;
  --surface-faint:#f2f4f6;
  --border:#e3e7eb;
  --border-strong:#d4d9de;
  --divider:var(--border);
  --text:#0b0c0d;
  --text-soft:#171a1d;
  --muted:#5b6269;
  --muted-alt:#687279;

  --tag-bg:#eef1f3;
  --tag-bg-hover:#e1e5e8;
  --tag-border:#dde2e6;
  --tag-text:#556067;
  --tag-text-hover:#141719;

  --btn-bg:#f1f3f5;
  --btn-bg-hover:#e4e7ea;
  --btn-bg-active:#d9dde0;
  --accent:#0b0c0d;
  --focus-ring:#0b0c0d;
  --btn-ring:color-mix(in srgb,var(--focus-ring) 32%, transparent);

  --lang-toggle-bg:var(--btn-bg);
  --lang-toggle-bg-hover:var(--btn-bg-hover);
  --lang-toggle-bg-active:var(--btn-bg-active);
  --lang-toggle-border:color-mix(in srgb,var(--btn-bg-hover) 65%, transparent);
  --lang-toggle-border-strong:color-mix(in srgb,var(--btn-bg-active) 55%, transparent);
  --lang-toggle-ring:var(--btn-ring);
  --lang-menu-bg:color-mix(in srgb,var(--surface) 96%, transparent);
  --lang-menu-border:color-mix(in srgb,var(--border) 82%, transparent);
  --lang-menu-shadow:0 14px 38px rgba(15,23,42,.08),0 4px 12px rgba(15,23,42,.04);
  --lang-option-hover:color-mix(in srgb,var(--focus-ring) 10%, transparent);
  --lang-option-active:color-mix(in srgb,var(--focus-ring) 16%, transparent);

  --card-bg:var(--surface);
  --card-bg-hover:color-mix(in srgb,var(--surface) 98%,var(--text) 2%);
  --card-border-hover:color-mix(in srgb,var(--border) 75%,var(--text) 25%);
  --card-shadow:0 0 0 1px var(--border),0 2px 4px -2px rgba(0,0,0,.04);
  --card-shadow-hover:0 0 0 1px var(--card-border-hover),0 4px 12px -6px rgba(0,0,0,.08);

  --radius:18px;
  --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 18px -4px rgba(0,0,0,.12);

  --transition:.35s cubic-bezier(.25,.66,.2,1);
  --transition-fast:.18s cubic-bezier(.4,.6,.3,1);

  --max-width:1180px;

  --fs-display:clamp(2.35rem,4.6vw + 1rem,3.6rem);
  --fs-h1:clamp(1.9rem,3.4vw + 1rem,2.8rem);
  --fs-h2:clamp(1.55rem,2.4vw + .9rem,2.1rem);
  --fs-h3:clamp(1.28rem,1.6vw + .9rem,1.6rem);
  --fs-body:1rem;
  --fs-small:.85rem;
  --lh-tight:1.15;
  --lh-snug:1.25;
  --lh-standard:1.55;
  --track-tight:-0.015em;
  --track-tags:0.55px;
  --fs-button:0.95rem;
  --track-button:0.03em;

  --social-icon-size:28px;
  --social-glyph-size:20px;
  --social-stroke:1.55;
  --social-color:var(--text-soft);
  --social-color-hover:var(--text);
  --social-color-active:var(--text);
  --social-bg-hover:rgba(0,0,0,.045);
  --social-bg-focus:rgba(0,0,0,.09);
  --social-ring:0 0 0 2px var(--focus-ring);

  --expand-ease:cubic-bezier(.25,.7,.2,1);
  --expand-open:.55s;
  --expand-close:.4s;

  /* PDF badge icon matches link text */

  /* Tech content additions */
  --code-bg:color-mix(in srgb,var(--surface) 94%, var(--text) 6%);
  --code-border:color-mix(in srgb,var(--border) 70%, var(--text) 10%);
  --code-inline-bg:color-mix(in srgb,var(--surface) 92%, var(--text) 8%);
  --kbd-bg:var(--code-inline-bg);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#000;
    --bg-alt:#060708;
    --surface:#101214;
    --surface-alt:#14181b;
    --surface-faint:#1b1f23;
    --border:#23282c;
    --border-strong:#30363c;
    --divider:#272c31;
    --text:#f3f6f8;
    --text-soft:#e2e6e9;
    --muted:#8f979f;
    --muted-alt:#9aa2a9;

    --tag-bg:#202427;
    --tag-bg-hover:#272c30;
    --tag-border:#2e3338;
    --tag-text:#b5bcc2;
    --tag-text-hover:#f2f5f7;

    --btn-bg:#1f2427;
    --btn-bg-hover:#272d31;
    --btn-bg-active:#31383d;
    --accent:#ffffff;
    --focus-ring:#ffffff;
    --btn-ring:color-mix(in srgb,var(--focus-ring) 36%, transparent);

    --lang-toggle-bg:var(--btn-bg);
    --lang-toggle-bg-hover:var(--btn-bg-hover);
    --lang-toggle-bg-active:var(--btn-bg-active);
    --lang-toggle-border:color-mix(in srgb,var(--btn-bg-hover) 60%, transparent);
    --lang-toggle-border-strong:color-mix(in srgb,var(--btn-bg-active) 55%, transparent);
    --lang-toggle-ring:var(--btn-ring);
    --lang-menu-bg:color-mix(in srgb,var(--surface) 92%, transparent);
    --lang-menu-border:color-mix(in srgb,var(--border) 85%, transparent);
    --lang-menu-shadow:0 18px 44px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.35);
    --lang-option-hover:color-mix(in srgb,var(--focus-ring) 14%, transparent);
    --lang-option-active:color-mix(in srgb,var(--focus-ring) 24%, transparent);

    --card-bg:var(--surface);
    --card-bg-hover:color-mix(in srgb,var(--surface) 96%,var(--text) 4%);
    --card-border-hover:color-mix(in srgb,var(--border) 65%,var(--text) 35%);
    --card-shadow:0 0 0 1px var(--border),0 2px 6px -3px rgba(0,0,0,.55);
    --card-shadow-hover:0 0 0 1px var(--card-border-hover),0 6px 16px -10px rgba(0,0,0,.7);


    --code-bg:color-mix(in srgb,var(--surface) 82%, var(--text) 28%);
    --code-border:color-mix(in srgb,var(--border) 65%, var(--text) 35%);
    --code-inline-bg:color-mix(in srgb,var(--surface) 80%, var(--text) 35%);
    --kbd-bg:var(--code-inline-bg);
  }
}

/* Base */
@layer base {
  html{
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px;
    /* The font-size-adjust value (.525) matches the x-height ratio of the Inter font family.
       See https://rsms.me/inter/ and https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust
       This ensures consistent perceived text size across fallback fonts. */
    font-size-adjust:.525;
    -webkit-font-smoothing:antialiased;
    font-feature-settings:"calt"1,"kern"1,"liga"1;
    font-variation-settings:"opsz" 14;
    line-height:var(--lh-standard);
    background:var(--bg);
    color:var(--text);
    scrollbar-gutter:stable;
    scroll-behavior:smooth;
  }
  body{accent-color:var(--accent)}
  ::selection{background:#111;color:#fff}
  @media (prefers-color-scheme: dark){
    ::selection{background:#fff;color:#000}
  }
  .container{max-width:var(--max-width);margin:0 auto;padding:clamp(26px,4vw,44px)}
}

/* Typography */
@layer typography {
  h1,h2,h3,h4,h5,h6{
    margin:0 0 .6em;
    font-weight:500;
    letter-spacing:var(--track-tight);
    line-height:var(--lh-snug);
  }
  h1{font-size:var(--fs-h1)}
  h2{font-size:var(--fs-h2)}
  h3{font-size:var(--fs-h3)}
  .display{
    font-size:var(--fs-display);
    font-weight:500;
    line-height:var(--lh-tight);
    letter-spacing:-.02em;
  }
  p{margin:0 0 1.1em;font-size:var(--fs-body);line-height:var(--lh-standard)}
  small,.text-small{font-size:var(--fs-small);line-height:1.4}
  code,kbd,pre{
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size:.85em;
    line-height:1.4;
  }
  code{
    background:var(--code-inline-bg);
    padding:2px 5px 3px;
    border-radius:6px;
    border:1px solid color-mix(in srgb,var(--code-border) 65%, transparent);
  }
  kbd{
    background:var(--kbd-bg);
    padding:3px 6px 4px;
    border-radius:6px;
    border:1px solid color-mix(in srgb,var(--code-border) 55%, transparent);
    box-shadow:0 1px 0 rgba(0,0,0,.15);
    font-weight:600;
    letter-spacing:.2px;
  }
  pre{
    background:var(--code-bg);
    padding:18px 20px;
    border-radius:14px;
    border:1px solid var(--code-border);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 0 1.2em;
  }
  pre code{
    background:transparent;
    padding:0;
    border:0;
    font-size:.85em;
  }
}

/* Components */
@layer components {

  /* Skip Link */
  .skip-link{
    position:absolute;left:1rem;top:-52px;
    background:var(--text);color:var(--bg);
    padding:.65rem 1rem;border-radius:8px;
    font-weight:600;text-decoration:none;z-index:500;
    transition:top .25s var(--transition-fast),opacity .25s var(--transition-fast);
    opacity:0;line-height:1;box-shadow:var(--shadow-xs);
  }
  .skip-link:focus-visible{top:1rem;opacity:1;outline:2px solid var(--focus-ring);outline-offset:2px}
  .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}
  :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

  /* Header / Nav */
  .site-header{
    position:sticky;top:0;z-index:50;
    backdrop-filter:saturate(1.4) blur(18px);
    -webkit-backdrop-filter:saturate(1.4) blur(18px);
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 92%,transparent),
      color-mix(in srgb,var(--bg) 80%,transparent));
    border-bottom:1px solid var(--divider);
  }
  .header-row{
    display:flex;justify-content:center;align-items:center;
    gap:26px;padding:clamp(12px,1.8vw,22px) clamp(32px,4vw,54px);
    position:relative;
  }
  .site-brand{
    position:absolute;left:clamp(24px,3vw,52px);top:50%;
    transform:translateY(-50%);
    font-weight:600;font-size:18px;
    letter-spacing:.25px;text-decoration:none;
    color:var(--text-soft);padding:4px 2px;border-radius:8px;
  }
  .site-brand:hover{color:var(--text)}
  .nav-list{list-style:none;display:flex;gap:8px;margin:0;padding:0;flex-wrap:wrap}
  .nav-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 20px;font-size:13px;font-weight:500;letter-spacing:.15px;
    color:var(--text);text-decoration:none;border-radius:var(--radius-pill);
    background:var(--btn-bg);
    border:1px solid transparent;
    line-height:1;
    transition:
      background var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      transform var(--transition-fast);
  }
  .nav-btn:hover,
  .nav-btn:focus-visible{
    background:var(--btn-bg-hover);
    border-color:var(--lang-toggle-border);
    outline:none;
  }
  .nav-btn:active{
    background:var(--btn-bg-active);
    border-color:var(--lang-toggle-border-strong);
    transform:translateY(.5px);
  }
  .nav-btn[aria-current="page"]{
    background:var(--btn-bg-active);
    border-color:var(--lang-toggle-border-strong);
    font-weight:600;
  }

  /* Mobile adjustments */
  @media (max-width: 600px){
    .header-row{
      flex-direction:column;
      align-items:center;
      gap:18px;
      padding:16px 22px 20px;
    }
    .site-brand{
      position:static;
      transform:none;
      align-self:center;
      text-align:center;
      width:100%;
    }
    .nav-list{
      --nav-btn-min-width: 120px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(var(--nav-btn-min-width),1fr));
      gap:12px;
      width:100%;
      max-width:420px;
      margin:0 auto;
    }
    .nav-btn{
      width:100%;
      padding:14px 18px;
      justify-content:center;
      text-align:center;
    }
  }

  /* Keyboard Progress */
  .kbd-progress{
    position:absolute;left:0;right:0;bottom:0;height:3px;
    background:var(--border-strong);transform:scaleX(0);
    transform-origin:left;transition:transform .5s var(--transition-fast);
  }
  .kbd-progress::after{
    content:"";position:absolute;inset:0;
    width:var(--progress,0%);background:var(--text);
    transition:width .5s var(--transition-fast);
  }
  .kbd-progress[data-active="true"]{transform:scaleX(1)}

  /* Cards */
  .mini-card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    min-height:148px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--card-shadow);
    will-change:transform, box-shadow, background-color, border-color;
    backface-visibility:hidden;
    transform:translateZ(0);
    transition:
      background-color var(--transition-fast),
      box-shadow var(--transition-fast),
      border-color var(--transition-fast),
      transform .26s cubic-bezier(.25,.66,.2,1);
  }
  .mini-card:hover,
  .mini-card:focus-within{
    background:var(--card-bg-hover);
    box-shadow:var(--card-shadow-hover);
    border-color:var(--card-border-hover);
    transform:translateY(-2px);
  }
  @media (prefers-reduced-motion: reduce){
    .mini-card{
      transition:background-color .18s linear, box-shadow .18s linear, border-color .18s linear;
    }
    .mini-card:hover,
    .mini-card:focus-within{transform:none}
  }
  .mini-inner{
    display:flex;flex-direction:column;
    padding:28px 30px 34px;
    height:100%;
  }
  .mini-card--large .mini-inner{
    padding:clamp(44px,6vw,78px) clamp(48px,6vw,88px) 48px;
  }
  .mini-title{
    margin:0 0 10px;
    font-size:17px;
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.3;
    color:var(--text-soft);
    word-break:break-word;
    transition:color var(--transition-fast);
  }
  .mini-card:hover .mini-title,
  .mini-card:focus-within .mini-title{color:var(--text)}
  .mini-desc{
    margin:0 0 18px;
    font-size:15px;
    line-height:1.55;
    color:var(--muted);
    max-width:64ch;
    font-weight:500;
    letter-spacing:.01em;
    transition:color var(--transition-fast);
  }
  .mini-card:hover .mini-desc,
  .mini-card:focus-within .mini-desc{color:var(--muted-alt)}
  .mini-tags{
    list-style:none;
    margin:0 0 18px;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .mini-tags li{
    font-size:10.5px;
    font-weight:560;
    letter-spacing:var(--track-tags);
    text-transform:uppercase;
    padding:6px 11px 5px;
    border-radius:var(--radius-pill);
    background:var(--tag-bg);
    color:var(--tag-text);
    line-height:1;
    border:1px solid var(--tag-border);
    transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
  }
  .mini-card:hover .mini-tags li,
  .mini-card:focus-within .mini-tags li{
    background:var(--tag-bg-hover);
    color:var(--tag-text-hover);
    border-color:color-mix(in srgb,var(--tag-border) 70%,transparent);
  }

  /* Meta & Date */
  .mini-meta{
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid var(--divider);
    font-size:12px;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .mini-date{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:13.5ch;
    padding:5px 10px 4px;
    background:var(--btn-bg);
    border:1px solid color-mix(in srgb,var(--btn-bg-hover) 70%, transparent);
    border-radius:999px;
    font-size:11px;
    font-weight:560;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--text-soft);
    line-height:1;
    white-space:nowrap;
    text-align:center;
    font-variant-numeric:tabular-nums;
    transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
  }
  .mini-card:hover .mini-date,
  .mini-card:focus-within .mini-date{
    background:var(--btn-bg-hover);
    color:var(--text);
    border-color:color-mix(in srgb,var(--btn-bg-active) 60%, transparent);
  }
  .mini-date:focus-visible{
    outline:2px solid var(--focus-ring);outline-offset:2px;
  }

  /* Expandable details */
  .mini-details{
    margin:0 0 6px;
    padding:0;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--card-bg) 97%,transparent) 0%,
      color-mix(in srgb,var(--card-bg) 90%, var(--text) 6%) 100%);
    border:1px solid color-mix(in srgb,var(--border) 80%, var(--text) 8%);
    border-radius:14px;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transform:translateY(-4px);
    backdrop-filter:saturate(1.08) blur(5px);
    -webkit-backdrop-filter:saturate(1.08) blur(5px);
    transition:
      max-height var(--expand-close) var(--expand-ease),
      opacity .32s var(--expand-ease),
      transform .5s var(--expand-ease),
      border-color .4s var(--expand-ease);
    box-shadow:0 1px 2px rgba(0,0,0,0.04),0 4px 14px -6px rgba(0,0,0,0.08);
  }
  @media (prefers-color-scheme: dark){
    .mini-details{
      background:linear-gradient(180deg,
        color-mix(in srgb,var(--card-bg) 94%,transparent) 0%,
        color-mix(in srgb,var(--card-bg) 84%, var(--text) 18%) 100%);
      border:1px solid color-mix(in srgb,var(--border) 70%, var(--text) 25%);
      box-shadow:0 1px 2px rgba(0,0,0,0.5),0 6px 18px -10px rgba(0,0,0,0.65);
    }
  }

  .mini-details p{
    font-size:13.6px;
    line-height:1.58;
    color:var(--muted-alt);
    padding:0 18px;
    margin:16px 0;
    max-width:72ch;
    overflow-wrap:anywhere;
  }

  .mini-details ul,
  .mini-details ol{
    margin:14px 0 18px;
    padding:0 18px 0 42px;
    font-size:13.25px;
    line-height:1.55;
    color:var(--muted-alt);
    max-width:78ch;
  }
  .mini-details li{
    margin:4px 0 6px;
    padding-left:2px;
    overflow-wrap:anywhere;
  }
  .mini-details li::marker{
    color:var(--muted);
    font-size:.8em;
  }
  .mini-details ul ul,
  .mini-details ol ol{
    margin:6px 0 10px;
  }
  .mini-details code{
    font-size:.84em;
  }

  .mini-details .kv{
    display:grid;
    grid-template-columns:max-content 1fr;
    gap:6px 18px;
    padding:4px 18px 8px;
    margin:8px 0 14px;
    font-size:12.8px;
    line-height:1.45;
  }
  .mini-details .kv dt{
    font-weight:600;
    color:var(--text-soft);
    letter-spacing:.25px;
  }
  .mini-details .kv dd{
    margin:0;
    color:var(--muted-alt);
    overflow-wrap:anywhere;
  }
  .mini-details .sep{
    display:inline-block;
    margin:0 8px;
    opacity:.35;
  }
  .mini-card[data-expanded="true"] .mini-details{
    opacity:1;
    transform:translateY(0);
  }

  /* Expand button */
  .mini-expand-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:var(--radius-pill);
    background:var(--btn-bg);
    border:1px solid transparent;
    font-size:13px;
    font-weight:500;
    letter-spacing:.15px;
    color:var(--text);
    cursor:pointer;
    line-height:1;
    transition:
      background var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      transform var(--transition-fast);
    -webkit-appearance:none;
    appearance:none;
  }
  .mini-expand-toggle:hover,
  .mini-expand-toggle:focus-visible{
    background:var(--btn-bg-hover);
    border-color:var(--lang-toggle-border);
    outline:none;
  }
  .mini-expand-toggle:active{
    background:var(--btn-bg-active);
    transform:translateY(.5px);
    border-color:var(--lang-toggle-border-strong);
  }
  .mini-expand-toggle .expand-icon{
    width:14px;height:14px;display:block;
    transition:transform .5s var(--expand-ease);
  }
  .mini-expand-toggle[aria-expanded="true"] .expand-icon{transform:rotate(180deg)}
  .mini-card[data-expanded="true"]{
    border-color:var(--card-border-hover);
    box-shadow:var(--card-shadow-hover);
  }

  /* Social icons */
  .footer-icons{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
  .icon-link{
    position:relative;
    width:var(--social-icon-size);
    height:var(--social-icon-size);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--social-color);
    text-decoration:none;
    border-radius:10px;
    line-height:0;
    transition:color var(--transition-fast),transform var(--transition-fast),background var(--transition-fast);
    outline:none;
  }
  .icon-link::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:12px;
    background:var(--social-bg-hover);
    opacity:0;
    transform:scale(.6);
    transition:opacity var(--transition-fast),transform var(--transition-fast),background var(--transition-fast);
    pointer-events:none;
  }
  .icon-link:hover{color:var(--social-color-hover)}
  .icon-link:hover::after{opacity:1;transform:scale(1)}
  .icon-link:active{color:var(--social-color-active);transform:translateY(1px)}
  .icon-link:focus-visible{color:var(--social-color-hover);box-shadow:var(--social-ring)}
  .icon-link:focus-visible::after{background:var(--social-bg-focus);opacity:1;transform:scale(1)}
  .icon-svg{width:var(--social-glyph-size);height:var(--social-glyph-size);display:block}
  .icon-svg:not(.icon-github) *{
    vector-effect:non-scaling-stroke;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke:currentColor;
    stroke-width:var(--social-stroke);
    fill:none;
  }
  .icon-instagram .is-dot{fill:currentColor;stroke:none}
  .icon-github path{fill:currentColor;stroke:none}

  /* Language switcher */
  .lang-switch{position:relative;display:flex;align-items:center}
  .lang-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 20px;
    min-width:140px;
    border-radius:var(--radius-pill);
    background:var(--lang-toggle-bg);
    color:var(--text);
    font-size:13px;
    font-weight:500;
    border:1px solid transparent;
    cursor:pointer;
    transition:
      background var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      transform var(--transition-fast);
    line-height:1;
    font-family:inherit;
    letter-spacing:.15px;
    white-space:nowrap;
    -webkit-appearance:none;
    appearance:none;
  }
  .lang-toggle:hover,
  .lang-toggle:focus-visible{
    background:var(--lang-toggle-bg-hover);
    border-color:var(--lang-toggle-border);
    outline:none;
  }
  .lang-toggle:active{
    transform:translateY(.5px);
    background:var(--lang-toggle-bg-active);
    border-color:var(--lang-toggle-border-strong);
  }
  .lang-toggle[aria-expanded="true"]{
    background:var(--lang-toggle-bg-active);
    border-color:var(--lang-toggle-border-strong);
  }
  .lang-toggle .chevron{width:16px;height:16px;flex-shrink:0}
  .lang-toggle .chevron{transition:transform .32s cubic-bezier(.4,.6,.3,1)}
  .lang-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}
  .lang-toggle-label{
    font-weight:500;
    letter-spacing:.15px;
    text-transform:none;
    font-size:1em;
    line-height:1.15;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:6.5ch;
  }
  .lang-menu{
    position:absolute;
    bottom:calc(100% + 16px);
    right:0;
    list-style:none;
    margin:0;
    padding:18px;
    background:var(--lang-menu-bg);
    border:1px solid var(--lang-menu-border);
    border-radius:26px;
    min-width:240px;
    box-shadow:var(--lang-menu-shadow);
    display:flex;
    flex-direction:column;
    gap:6px;
    opacity:0;
    transform:translateY(14px) scale(.98);
    pointer-events:none;
    visibility:hidden;
    transition:
      opacity .28s cubic-bezier(.4,.6,.3,1),
      transform .32s cubic-bezier(.4,.6,.3,1);
    z-index:200;
  }
  .lang-menu.show{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    visibility:visible;
  }
  @supports ((-webkit-backdrop-filter:blur(0)) or (backdrop-filter:blur(0))){
    .lang-menu{
      backdrop-filter:saturate(1.2) blur(26px);
      -webkit-backdrop-filter:saturate(1.2) blur(26px);
    }
  }
  .lang-option{
    background:transparent;
    border:1px solid transparent;
    text-align:left;
    padding:12px 16px;
    border-radius:18px;
    font-size:14px;
    cursor:pointer;
    color:var(--text);
    font-weight:500;
    display:flex;
    align-items:center;
    gap:12px;
    transition:
      background var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);
    line-height:1.3;
    font-family:inherit;
    letter-spacing:.01em;
    -webkit-appearance:none;
    appearance:none;
  }
  .lang-option:hover{
    background:var(--lang-option-hover);
    border-color:var(--lang-toggle-border);
    box-shadow:none;
  }
  .lang-option:focus-visible{
    outline:none;
    background:var(--lang-option-hover);
    border-color:var(--lang-toggle-border-strong);
    box-shadow:0 0 0 2px var(--lang-toggle-ring);
  }
  .lang-option:active{
    background:var(--lang-option-active);
    border-color:var(--lang-toggle-border-strong);
    transform:translateY(1px);
  }
  .lang-option[aria-checked="true"]{
    font-weight:600;
    background:var(--lang-option-active);
    border-color:var(--lang-toggle-border-strong);
    color:var(--text);
    box-shadow:0 0 0 1px var(--lang-toggle-border-strong);
  }
  .lang-option .lang-name{flex:1}
  .lang-option .lang-short{
    font-size:11px;
    font-weight:600;
    letter-spacing:.55px;
    text-transform:uppercase;
    color:var(--muted);
  }
  .lang-check{font-size:12px;color:var(--muted);margin-left:4px}
  .lang-option[aria-checked="false"] .lang-check{display:none}
  .lang-option:hover .lang-short,
  .lang-option:focus-visible .lang-short,
  .lang-option[aria-checked="true"] .lang-short{color:var(--text)}
  .lang-option[aria-checked="true"] .lang-check{color:var(--text)}

  /* Footer */
  .site-footer{
    border-top:1px solid var(--divider);
    margin-top:clamp(70px,10vh,120px);
    background:linear-gradient(180deg,transparent,var(--bg-alt));
    padding:clamp(60px,8vw,110px) 0 clamp(70px,10vw,120px);
  }
  @media (prefers-color-scheme: dark){
    .site-footer{background:linear-gradient(180deg,transparent,#050607)}
  }
  .footer-layout{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(24px,6vw,72px);
    width:100%;
    flex-wrap:wrap;
  }
  .footer-icons{flex-shrink:0}
  .footer-legal-rail{
    flex:1;
    min-width:240px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(16px,3vw,28px);
    text-align:center;
    flex-wrap:wrap;
    color:var(--text-soft);
  }
  .lang-switch.footer-lang{flex-shrink:0}
  .footer-copy{
    margin:0;
    font-weight:600;
    font-size:14px;
    letter-spacing:.25px;
    white-space:nowrap;
    color:var(--text-soft);
  }
  .footer-legal{
    display:flex;
    gap:18px;
    font-size:14px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
  }
  .footer-legal a{
    color:var(--text-soft);
    text-decoration:none;
    position:relative;
    padding-bottom:2px;
  }
  .footer-legal a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:color-mix(in srgb,var(--text-soft) 35%,transparent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
  }
  .footer-legal a:hover::after,
  .footer-legal a:focus-visible::after{
    transform:scaleX(1);
  }
  .footer-legal a:focus-visible{
    outline:2px solid color-mix(in srgb,var(--text-soft) 60%,transparent);
    outline-offset:3px;
    border-radius:2px;
  }

  /* About */
  .about{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:calc(100vh - 160px);
    padding:56px 0 42px;
  }

  /* Legal */
  .legal{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:34px;
    min-height:calc(100vh - 160px);
    padding:56px 0 48px;
    --legal-gate-reserved:clamp(240px,32vh,320px);
  }
  .legal-card{
    width:100%;
    max-width:820px;
  }
  .legal-card .mini-inner{
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .legal-gate-panel{
    width:100%;
    max-width:820px;
  }
  .legal-gate-panel[data-gate-state="dismissed"]{
    display:none;
  }
  .legal-gate-pending .legal-gate-panel{
    min-height:var(--legal-gate-reserved,0px);
    transition:min-height .35s ease;
  }
  .legal-gate-pending .legal-gate-panel[data-gate-state="pending"]{
    visibility:hidden;
    pointer-events:none;
  }
  .legal-gate-pending .legal-gate-panel[data-gate-state="pending"] .mini-inner{
    opacity:0;
  }
  .legal-gate-pending .legal-gate-panel[data-gate-state="active"]{
    min-height:0;
  }
  .legal-gate-verified .legal-gate-panel{
    display:none;
    min-height:0;
  }
  .legal-gate-panel .mini-inner{
    gap:22px;
    align-items:flex-start;
  }
  .legal-gate-panel .mini-title{
    margin-bottom:4px;
  }
  .legal-gate-copy{
    margin:0;
    font-size:1rem;
    line-height:1.6;
    color:var(--muted);
    max-width:60ch;
  }
  .legal-gate-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 22px;
    min-height:44px;
    border-radius:var(--radius-pill);
    background:var(--btn-bg);
    border:1px solid transparent;
    color:var(--text);
    font-weight:600;
    font-size:var(--fs-button);
    letter-spacing:var(--track-button);
    text-decoration:none;
    line-height:1;
    transition:
      transform var(--transition-fast),
      background var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast);
  }
  .legal-gate-button::after{
    content:"→";
    font-size:1.1em;
    transform:translateX(0);
    transition:transform var(--transition-fast);
  }
  .legal-gate-button:hover,
  .legal-gate-button:focus-visible{
    background:var(--btn-bg-hover);
    color:var(--text);
    border-color:var(--lang-toggle-border);
    transform:translateY(-1px);
    outline:none;
  }
  .legal-gate-button:active{
    background:var(--btn-bg-active);
    color:var(--text);
    transform:translateY(0.5px);
    border-color:var(--lang-toggle-border-strong);
  }
  .legal-gate-button:hover::after,
  .legal-gate-button:focus-visible::after{
    transform:translateX(4px);
  }
  .legal-gate-button:focus-visible{
    outline:none;
  }
  .legal-lead{
    font-size:1.05rem;
    line-height:1.65;
    margin:0;
  }
  .legal-dl{
    margin:0;
    padding:0;
    display:grid;
    gap:18px;
  }
  .legal-dl>div{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .legal-dl dt{
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:600;
    color:var(--muted);
  }
  .legal-dl dd{
    margin:6px 0 0;
    font-size:1rem;
    line-height:1.7;
  }
  .legal-field{
    margin:0 0 12px;
  }
  .legal-field:last-child{
    margin-bottom:0;
  }
  .legal-label{
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--muted);
    display:inline-block;
  }
  .legal-list{
    margin:0;
    padding-left:22px;
    display:grid;
    gap:10px;
  }
  .legal-updated{
    margin:8px 0 0;
    font-size:.9rem;
    color:var(--muted);
  }
  /* Hide only non-essential navigation for unverified users on legal pages */
  body.legal-unverified .site-header .main-nav,
  body.legal-unverified .site-footer .footer-icons {
    visibility:hidden;
    pointer-events:none;
    opacity:0;
  }

  /* Grids */
  .grid{display:grid;gap:34px;margin-top:34px}
  .grid--projects{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .grid--stories,
  .grid--publications,
  .grid--now{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  @media (min-width:1200px){
    .grid--projects{grid-template-columns:repeat(3,1fr);max-width:1040px;margin:0 auto}
  }
  @media (min-width:960px){
    .grid--stories{grid-template-columns:repeat(2,1fr);max-width:920px;margin:0 auto}
    .grid--publications{grid-template-columns:repeat(3,1fr);max-width:1180px;margin:0 auto}
  }
}

/* High Contrast Mode */
body[data-high-contrast-icons] .icon-link{color:var(--text)}
body[data-high-contrast-icons] .icon-link::after{background:currentColor;opacity:.1}
body[data-high-contrast-icons] .icon-link:hover::after,
body[data-high-contrast-icons] .icon-link:focus-visible::after{opacity:.15}
body[data-high-contrast-icons] .icon-svg:not(.icon-github) *{
  stroke-width:calc(var(--social-stroke) + 0.25);
}
body[data-high-contrast-icons] .icon-github path{fill:currentColor}
/* Utilities */
@layer utilities {
  .u-muted{color:var(--muted)!important}
  .u-center{text-align:center}
  .u-nowrap{white-space:nowrap!important}
  .u-break-any{overflow-wrap:anywhere!important}
  .u-mono{font-family:ui-monospace,monospace}
  .u-inline-list{
    list-style:none;
    margin:0;padding:0;
    display:flex;flex-wrap:wrap;gap:10px;
  }
}

/* Responsive */
@media (max-width:860px){
  .mini-inner{padding:24px 24px 32px}
  .mini-card--large .mini-inner{padding:52px 44px 40px}
  .grid{gap:30px;margin-top:30px}
  .header-row{gap:18px}
}
@media (max-width:760px){
  .footer-layout{
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
  }
  .footer-legal-rail{
    width:100%;
    align-items:flex-start;
    justify-content:flex-start;
    gap:16px;
    text-align:left;
    flex-direction:column;
  }
  .footer-copy{
    white-space:normal;
  }
  .footer-legal{
    gap:14px;
    justify-content:flex-start;
  }
  .lang-switch.footer-lang{
    align-self:flex-start;
    margin-top:0;
  }
}
@media (max-width:620px){
  .mini-inner{padding:22px 20px 30px}
  .mini-card--large .mini-inner{padding:44px 32px 34px}
  /* .site-brand centering logic removed to avoid duplication */
  .nav-btn{padding:14px 18px;justify-content:center;text-align:center}
  .mini-expand-toggle{padding:9px 16px}
  .mini-details p{padding:0 16px}
  .mini-details ul,
  .mini-details ol{padding:0 16px 0 38px}
  pre{padding:16px 16px}
}

@media (max-width:600px){
  .lang-toggle{padding:8px 16px}
  .lang-menu{
    left:50%;
    right:auto;
    width:min(320px,calc(100vw - 40px));
    min-width:0;
    transform:translate(-50%,12px) scale(.97);
  }
  .lang-menu.show{transform:translate(-50%,0) scale(1)}
  .mini-inner{
    align-items:flex-start;
    text-align:left;
  }
  .mini-tags{
    justify-content:flex-start;
  }
  .mini-meta{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:12px;
    text-align:left;
  }
  .grid{
    justify-items:start;
  }
  .footer-layout{
    align-items:center;
    text-align:center;
  }
  .footer-icons{
    justify-content:center;
  }
  .footer-legal-rail{
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .footer-legal{
    justify-content:center;
  }
  .lang-switch.footer-lang{
    align-self:center;
  }
}

/* Print */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .lang-switch,
  .kbd-progress,
  .mini-expand-toggle{display:none!important}
  .mini-card{
    border:1px solid #999;
    box-shadow:none;
    break-inside:avoid;
  }
  .mini-details{
    max-height:none!important;
    opacity:1!important;
    transform:none!important;
    display:block!important;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .lang-menu,
  .lang-option,
  .lang-toggle,
  .mini-card,
  .mini-tags li,
  .nav-btn,
  .kbd-progress,
  .kbd-progress::after,
  .icon-link,
  .icon-link::after,
  .mini-details,
  .mini-expand-toggle,
  .expand-icon{
    transition:none!important
  }
  .icon-link:active{transform:none}
  .mini-card[data-expandable] .mini-details{
    max-height:none!important;
    opacity:1!important;
    transform:none!important;
  }
}