/* Shared by the portfolio page and every blog page: colour tokens, header, footer. */
  /* THEME — Notio Spiritus Onyx Glass (pure black, colourless liquid glass). Colours only; layout below is unchanged. */
  :root {
    color-scheme: dark;
    --bg: #000000;
    --glow-1: rgba(255,255,255,.16); --glow-2: rgba(255,255,255,.07); --glow-3: rgba(255,255,255,.10);
    --bar: rgba(255,255,255,.08); --bar-hi: inset 0 -1px 0 rgba(255,255,255,.06);
    --line: rgba(255,255,255,.10); --line-strong: #404040;
    --strong: #ffffff; --fg: #e5e5e5; --body: #a3a3a3; --tab: #a3a3a3; --tabh: #ffffff;
    --accent: #f5f5f5; --accent-text: #d4d4d4;
    --glass: rgba(255,255,255,.07); --glass-line: rgba(255,255,255,.16); --glass-hi: inset 0 1.5px 0 rgba(255,255,255,.22);
    --afg: #e5e5e5; --ahbg: #ffffff; --ahfg: #000000;
    --dot: rgba(255,255,255,.20); --dot-on: #ffffff;
    --tagbg: rgba(255,255,255,.14);
    --ov: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.92) 100%);
    --pbg: #ffffff; --pfg: #000000; --pbg-h: #e5e5e5;
    --sbg: rgba(20,20,20,.66); --sline: rgba(255,255,255,.10);
    --live: #4ade80;
    --chip-bg: rgba(255,255,255,.12); --code-bg: rgba(255,255,255,.08);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); }
  /* aurora field: three soft glows behind the page */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(640px 540px at 88% 0%, var(--glow-1), transparent 70%),
      radial-gradient(560px 520px at 0% 70%, var(--glow-2), transparent 70%),
      radial-gradient(600px 420px at 60% 108%, var(--glow-3), transparent 70%);
  }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

  /* TOPBAR */
  .topbar {
    background: var(--bar);
    -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--bar-hi);
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    position: sticky; top: 0; z-index: 100;
  }
  .logo { font-size: 15px; text-decoration: none; font-weight: 800; padding: 16px 0; letter-spacing: -0.03em; margin-right: 8px; color: var(--strong); }
  .tabs { display: flex; gap: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    display: flex; flex-direction: column; align-items: center;
    font-size: 13px; padding: 16px 18px; text-decoration: none;
    color: var(--tab); border-bottom: 2px solid transparent;
    transition: all 0.15s; white-space: nowrap;
  }
  /* hidden bold copy keeps the tab as wide as its active state, so nothing shifts when the active tab changes */
  .tab::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
  .tab:hover { color: var(--tabh); }
  .tab.active { color: var(--strong); border-bottom-color: var(--accent); font-weight: 600; }
  .topbar-right { display: flex; gap: 16px; margin-left: auto; align-items: center; }
  .topbar-link { text-decoration: none; font-size: 12px; color: var(--tab); text-decoration: none; transition: color 0.15s; }
  .topbar-link:hover { color: var(--tabh); }

  /* FOOTER */
  .footer {
    border-top: 1px solid var(--line);
    padding: 28px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-name { font-size: 13px; color: var(--tab); }
  .footer-links { display: flex; gap: 20px; }
  .footer-link { text-decoration: none; font-size: 12px; color: var(--tab); text-decoration: none; transition: color 0.15s; }
  .footer-link:hover { color: var(--tabh); }


  /* ACCESSIBILITY FALLBACKS */
  @media (prefers-reduced-transparency: reduce) {
    .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .topbar { background: var(--bg); }
  }
  @media (prefers-contrast: more) {
    .tab, .topbar-link, .footer-name, .footer-link { color: var(--strong); }
  }

  /* MOBILE */
  @media (max-width: 640px) {
    .topbar { padding: 0 16px; gap: 12px; }
    .tab { padding: 14px 12px; font-size: 12px; }
    .topbar-right { display: none; }
    .footer { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 20px; }
  }