/* Liquid glass layer — loaded last on every page, on top of styles.css or a page's inline styles.
   Translucent surfaces, backdrop blur, a specular top edge, and an ambient colour field behind them. */

  :root{
    --bg:#f4f2ed;
    --glass:rgba(255,255,255,0.52);
    --glass-strong:rgba(255,255,255,0.74);
    --glass-menu:rgba(255,255,255,0.92);
    --glass-border:rgba(255,255,255,0.78);
    --glass-edge:rgba(30,42,51,0.07);
    --glass-hi:rgba(255,255,255,0.95);
    --glass-lo:rgba(30,42,51,0.05);
    --glass-sheen:rgba(255,255,255,0.55);
    --glass-blur:blur(22px) saturate(1.8);
    --glass-drop:0 16px 36px -22px rgba(30,42,51,0.32);
    --glass-lift:0 26px 50px -24px rgba(30,42,51,0.42);
    --tint-hi:rgba(255,255,255,0.28);
    --surface:var(--glass);
    --blob-a:rgba(31,59,87,0.24);
    --blob-b:rgba(184,134,59,0.26);
    --blob-c:rgba(127,176,230,0.32);
  }
  :root[data-theme="dark"]{
    --bg:#101215;
    --glass:rgba(255,255,255,0.055);
    --glass-strong:rgba(34,38,44,0.62);
    --glass-menu:rgba(28,31,36,0.94);
    --glass-border:rgba(255,255,255,0.12);
    --glass-edge:rgba(0,0,0,0.35);
    --glass-hi:rgba(255,255,255,0.16);
    --glass-lo:rgba(0,0,0,0.25);
    --glass-sheen:rgba(255,255,255,0.07);
    --glass-drop:0 18px 40px -22px rgba(0,0,0,0.7);
    --glass-lift:0 28px 56px -24px rgba(0,0,0,0.8);
    --tint-hi:rgba(255,255,255,0.18);
    --blob-a:rgba(47,85,120,0.6);
    --blob-b:rgba(230,189,118,0.18);
    --blob-c:rgba(127,176,230,0.24);
  }

  /* Honour "reduce transparency", and stay legible where backdrop blur isn't supported */
  @media (prefers-reduced-transparency: reduce){
    :root{ --glass:#ffffff; --glass-strong:#ffffff; --glass-menu:#ffffff; --glass-sheen:transparent; }
    :root[data-theme="dark"]{ --glass:#1c1f23; --glass-strong:#1c1f23; --glass-menu:#1c1f23; --glass-sheen:transparent; }
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    :root{ --glass:rgba(255,255,255,0.86); --glass-strong:rgba(255,255,255,0.94); }
    :root[data-theme="dark"]{ --glass:rgba(34,38,44,0.9); --glass-strong:rgba(34,38,44,0.96); }
  }

  /* ---------- Ambient field the glass refracts ---------- */
  html{ background:var(--bg); }
  body{ background:var(--bg); }
  body::before{
    content:''; position:fixed; inset:-10vmax; z-index:-1; pointer-events:none;
    background:
      radial-gradient(38vmax 38vmax at 12% 14%, var(--blob-a), transparent 70%),
      radial-gradient(34vmax 34vmax at 88% 38%, var(--blob-b), transparent 70%),
      radial-gradient(40vmax 40vmax at 30% 92%, var(--blob-c), transparent 70%);
    animation:glassDrift 28s ease-in-out infinite alternate;
  }
  @keyframes glassDrift{
    from{ transform:translate3d(0,0,0) scale(1); }
    to{ transform:translate3d(2%,-3%,0) scale(1.06); }
  }

  /* ---------- Glass surfaces ---------- */
  .island,
  .fw-card, .stat.float, .feature, .hl-card, .case, .edu-card, .now-card,
  .callout, .persona, .fnode:not(.err):not(.decide), .rule, .mcard, .tablewrap, .ac, .codeblock,
  .share-btn, .btn.ghost, .pill:not(.cert), .cv-btn:not(.solid){
    background:linear-gradient(160deg, var(--glass-sheen), transparent 42%), var(--glass);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border-color:var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 0 0 1px var(--glass-edge), var(--glass-drop);
  }
  .pill:not(.cert), .share-btn, .btn.ghost, .cv-btn:not(.solid){
    box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 1px var(--glass-edge), 0 6px 16px -10px rgba(30,42,51,0.35);
  }
  .pill:not(.cert):hover, .cv-btn:not(.solid):hover{ background:linear-gradient(160deg, var(--glass-sheen), transparent 42%), var(--accent-soft); }
  .fw-card:hover, .stat.float:hover, .feature:hover, .hl-card:hover, .case:hover{
    box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 0 0 1px var(--glass-edge), var(--glass-lift);
  }

  /* Nav island: slightly denser glass so it reads over any content */
  .island{ background:linear-gradient(160deg, var(--glass-sheen), transparent 55%), var(--glass-strong); }
  @media (max-width:820px){
    /* A blurred child of a blurred parent can't sample the page, so the menu gets a denser fill */
    .island .tabs{
      background:var(--glass-menu); border-color:var(--glass-border);
      box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 1px var(--glass-edge), var(--glass-lift);
    }
  }

  /* Full-width bands and footers */
  .surface, .site-footer, footer.f{
    background:var(--glass);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border-color:var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-hi);
  }
  .surface .feature{ background:linear-gradient(160deg, var(--glass-sheen), transparent 42%), var(--glass); }

  /* Case study card: cells sit directly on the card's glass */
  .case-grid{ gap:0; background:none; border-top:1px solid var(--line); }
  .case-cell{ background:transparent; box-shadow:inset -1px -1px 0 var(--line); }
  .case-cell.result{ background:var(--accent-soft); }
  .case-open{ background:transparent; border-top:none; }

  /* ---------- Tinted glass: primary actions and the active tab ---------- */
  .btn{ border-radius:100px; }
  .btn.primary, .tab.active, .cv-btn.solid{
    background:linear-gradient(180deg, var(--tint-hi), transparent 60%), var(--accent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.15), 0 10px 22px -12px rgba(31,59,87,0.7);
  }
  .btn.primary:hover{ background:linear-gradient(180deg, var(--tint-hi), transparent 60%), #16293c; }
  :root[data-theme="dark"] .btn.primary:hover{ background:linear-gradient(180deg, var(--tint-hi), transparent 60%), #3a6690; }

  /* Contact card: deep tinted glass over the ambient field */
  .contact-card{
    background:linear-gradient(150deg, rgba(255,255,255,0.08), transparent 45%), rgba(31,59,87,0.97);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid rgba(255,255,255,0.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.2), 0 30px 70px -34px rgba(31,59,87,0.7);
  }
  :root[data-theme="dark"] .contact-card{
    background:linear-gradient(150deg, rgba(255,255,255,0.10), transparent 45%), rgba(36,64,92,0.78);
    border-color:rgba(255,255,255,0.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 30px 70px -34px rgba(0,0,0,0.8);
  }
  .contact-card .btn.ghost{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.3); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2); }
  .contact-card .btn.primary{ background:linear-gradient(180deg, rgba(255,255,255,0.4), transparent 60%), #e7c98a; }