/* ============================================================================
   liquid-glass.css — LIQUID GLASS SURFACE LAYER (additive)
   ----------------------------------------------------------------------------
   Loaded LAST, after style.css and (on /m) mobile.css. Purely a re-skin: it
   only touches surface properties — background, backdrop-filter, border,
   border-radius, box-shadow and the decorative ::before/::after rims. Layout,
   sizing, flow, visibility toggles and JS hooks are left to the base files.

   Reference: Apple's Liquid Glass — translucent capsule surfaces, a bright
   specular rim along the top edge, a soft light-bleed at the bottom, saturated
   backdrop blur, and solid (non-glass) fills reserved for primary actions so
   hierarchy survives the transparency.

   Chosen calibration for this site:
     · Balanced translucency (~55-62% tint) — clearly glassy, still AA-safe
     · Glass on nav, icon buttons, tabs, carousel arrows, secondary buttons,
       drawer and mobile action bar. Primary CTAs stay solid.
     · Nav is a floating capsule that narrows on scroll.
     · Pure CSS. No SVG displacement filters, no extra paint on scroll.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Tints — nav sits over photography, so it runs a touch denser than chrome */
  --lg-tint:      rgba(255, 255, 255, .55);
  --lg-tint-nav:  rgba(255, 255, 255, .70);
  --lg-tint-hi:   rgba(255, 255, 255, .74);
  --lg-tint-veil: rgba(247, 248, 251, .80);   /* full-screen drawer */

  /* Nested glass — children inside an already-blurred parent. No second
     backdrop-filter: it costs a full extra pass and reads as almost nothing. */
  --lg-fill:      rgba(255, 255, 255, .40);
  --lg-fill-hi:   rgba(255, 255, 255, .68);

  /* Blur strengths */
  --lg-blur:      saturate(170%) blur(20px);
  --lg-blur-lg:   saturate(180%) blur(30px);

  /* Edges */
  --lg-edge:      rgba(11, 30, 50, .10);
  --lg-edge-hi:   rgba(11, 30, 50, .16);

  /* Specular: bright top rim, faint bottom light-bleed, hairline containment */
  --lg-spec:
    inset 0  1px 0 0 rgba(255, 255, 255, .90),
    inset 0 -1px 0 0 rgba(255, 255, 255, .38),
    inset 0  0   0 1px rgba(255, 255, 255, .26);
  --lg-spec-soft:
    inset 0  1px 0 0 rgba(255, 255, 255, .72),
    inset 0  0   0 1px rgba(255, 255, 255, .20);

  /* Cast shadows — a floating pane, not a pressed-in panel */
  --lg-shadow:    0 8px 30px -12px rgba(11, 30, 50, .30),
                  0 2px  8px -3px  rgba(11, 30, 50, .12);
  --lg-shadow-lg: 0 18px 48px -16px rgba(11, 30, 50, .34),
                  0 4px  14px -4px  rgba(11, 30, 50, .16);

  /* Gradient used for the top-edge highlight arc on large surfaces */
  --lg-arc: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, .95) 18%,
              rgba(255, 255, 255, .95) 82%,
              transparent);

  --lg-capsule: 999px;
}

[data-theme="dark"] {
  --lg-tint:      rgba(28, 33, 43, .55);
  --lg-tint-nav:  rgba(24, 29, 38, .68);
  --lg-tint-hi:   rgba(46, 53, 66, .74);
  --lg-tint-veil: rgba(11, 13, 16, .84);

  --lg-fill:      rgba(255, 255, 255, .07);
  --lg-fill-hi:   rgba(255, 255, 255, .15);

  --lg-edge:      rgba(255, 255, 255, .10);
  --lg-edge-hi:   rgba(255, 255, 255, .18);

  --lg-spec:
    inset 0  1px 0 0 rgba(255, 255, 255, .20),
    inset 0 -1px 0 0 rgba(255, 255, 255, .06),
    inset 0  0   0 1px rgba(255, 255, 255, .07);
  --lg-spec-soft:
    inset 0  1px 0 0 rgba(255, 255, 255, .14),
    inset 0  0   0 1px rgba(255, 255, 255, .05);

  --lg-shadow:    0 10px 34px -12px rgba(0, 0, 0, .70),
                  0 2px  10px -3px  rgba(0, 0, 0, .50);
  --lg-shadow-lg: 0 22px 56px -16px rgba(0, 0, 0, .78),
                  0 6px  18px -6px  rgba(0, 0, 0, .55);

  --lg-arc: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, .40) 18%,
              rgba(255, 255, 255, .40) 82%,
              transparent);
}


/* ---------------------------------------------------------------------------
   2) NAVIGATOR — floating capsule that narrows on scroll
   ------------------------------------------------------------------------- */
.nav { padding: 16px 28px; }
.nav.scrolled { padding: 10px 28px; }

.nav-inner {
  border-radius: var(--lg-capsule);
  background: var(--lg-tint-nav);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-spec), var(--lg-shadow);
  max-width: clamp(1200px, 78vw, 1760px);
  transition:
    max-width   .45s cubic-bezier(.4, 1, .3, 1),
    border-radius .3s var(--ease, cubic-bezier(.2,.8,.2,1)),
    box-shadow  .3s var(--ease, cubic-bezier(.2,.8,.2,1)),
    border-color .3s var(--ease, cubic-bezier(.2,.8,.2,1)),
    background  .3s var(--ease, cubic-bezier(.2,.8,.2,1));
}

/* Scrolled: tighter, denser, sitting further off the page.
   The floor is not cosmetic — .nav-inner is overflow:hidden, and at 1201px
   (the narrowest width that still shows the link row) brand + links + actions
   measure ~1044px once the clock steps aside, and the capsule's 999px curve
   needs breathing room past that. Anything under this floor clips the Contact
   CTA off the end of the bar. */
.nav.scrolled .nav-inner {
  max-width: clamp(1110px, 68vw, 1500px);
  background: var(--lg-tint-hi);
  border-color: var(--lg-edge-hi);
  box-shadow: var(--lg-spec), var(--lg-shadow-lg);
}

/* The clock is the lowest-priority item in the bar, so it is what the capsule
   sheds to buy the width back. Collapsed rather than display:none so the
   transition stays continuous. Link positions are unaffected: .nav-links is
   left-anchored and its children keep their intrinsic widths, so the JS-driven
   sliding indicator stays in register. */
.nav-clock {
  max-width: 140px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .4s cubic-bezier(.4, 1, .3, 1),
              opacity .25s var(--ease, ease),
              padding .4s cubic-bezier(.4, 1, .3, 1),
              margin .4s cubic-bezier(.4, 1, .3, 1);
}
.nav.scrolled .nav-clock {
  max-width: 0;
  opacity: 0;
  padding: 0;
  margin-right: 0;
  border-right-width: 0;
  pointer-events: none;
}

/* Specular arc riding the top edge — the single most identifying Liquid Glass
   cue. Replaces the base file's flat brand hairline. */
.nav-inner::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: var(--lg-arc);
  opacity: .9;
  pointer-events: none;
  z-index: 2;
}

/* Light pooling in the lower half, as if the pane has thickness */
.nav-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .18) 0%,
    rgba(255, 255, 255, 0)   38%,
    rgba(255, 255, 255, 0)   72%,
    rgba(255, 255, 255, .10) 100%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .nav-inner::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .06) 0%,
    rgba(255, 255, 255, 0)   40%,
    rgba(255, 255, 255, 0)   74%,
    rgba(255, 255, 255, .03) 100%);
}

/* Capsule ends need optical breathing room so the mark clears the curve */
.nav-brand {
  padding-left: 22px;
  border-right-color: var(--lg-edge);
  position: relative; z-index: 1;
}
.nav-links   { position: relative; z-index: 1; }

/* style.css resets .nav-brand padding at >=1200px (mark-only brand); restate
   the capsule's inset here so it is not undone by that later rule. */
@media (min-width: 1200px) {
  .nav-brand { padding-left: 18px; }
}
.nav-actions {
  padding-right: 10px;
  border-left-color: var(--lg-edge);
  position: relative; z-index: 1;
}

/* Nav items and the sliding indicator become capsules.
   Inactive links move up one step on the text ramp: the bar is now translucent,
   so its composited background tracks whatever is behind it. Over a mid-dark
   band of the hero photo, --text-3 lands near 2.6:1 — --text-2 holds above
   4.5:1 across the range the tint can composite to. */
.nav-links a {
  border-radius: var(--lg-capsule);
  color: var(--text-2);
}

.nav-indicator {
  border-radius: var(--lg-capsule);
  background: var(--lg-fill-hi);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--lg-spec-soft);
}
[data-theme="dark"] .nav-indicator {
  background: var(--lg-fill-hi);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: var(--lg-spec-soft);
}

/* The base file gives the active link its own solid dark chip in dark mode.
   With a glass indicator riding underneath that reads as two stacked pills —
   let the indicator carry the state on its own. */
[data-theme="dark"] .nav-links a.active { background: transparent; }


/* ---------------------------------------------------------------------------
   3) ICON BUTTONS (nested glass — no second blur pass)
   ------------------------------------------------------------------------- */
.icon-btn {
  border-radius: 50%;
  background: var(--lg-fill);
  border: 1px solid transparent;
  box-shadow: var(--lg-spec-soft);
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
  transition: background .2s var(--ease, ease),
              color .2s var(--ease, ease),
              box-shadow .2s var(--ease, ease),
              transform .2s var(--ease, ease);
}
.icon-btn:hover {
  background: var(--lg-fill-hi);
  border-color: rgba(255, 255, 255, .45);
  color: var(--text);
}
.icon-btn:active { transform: scale(.94); }
[data-theme="dark"] .icon-btn:hover { border-color: rgba(255, 255, 255, .12); }


/* ---------------------------------------------------------------------------
   4) SHARED BUTTONS
   Primary actions stay SOLID (Apple keeps filled capsules for the main action);
   they only inherit the shared specular rim so they read as the same material.
   ------------------------------------------------------------------------- */

/* --- Primary: solid, with the glass system's top rim ---------------------- */
.btn-primary,
.cta-pill:not(.cta-pill--secondary),
.hero-cta {
  border-radius: var(--lg-capsule);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .28),
    var(--lg-shadow);
}
.btn-primary:hover,
.cta-pill:not(.cta-pill--secondary):hover,
.hero-cta:hover {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .34),
    var(--lg-shadow-lg);
}

/* --- Secondary: full glass ------------------------------------------------ */
.btn-secondary,
.cta-pill--secondary {
  border-radius: var(--lg-capsule);
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-spec), var(--lg-shadow);
  transition: transform .25s var(--ease, ease),
              background .25s var(--ease, ease),
              box-shadow .25s var(--ease, ease),
              border-color .25s var(--ease, ease);
}
.btn-secondary:hover,
.cta-pill--secondary:hover {
  background: var(--lg-tint-hi);
  border-color: var(--lg-edge-hi);
  box-shadow: var(--lg-spec), var(--lg-shadow-lg);
}
[data-theme="dark"] .cta-pill--secondary {
  background: var(--lg-tint);
  border-color: var(--lg-edge);
}


/* ---------------------------------------------------------------------------
   5) SEGMENTED CONTROL (tabs) — glass track, glass thumb
   ------------------------------------------------------------------------- */
.tabs {
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-spec-soft),
              inset 0 2px 6px -4px rgba(11, 30, 50, .22);
}
[data-theme="dark"] .tabs {
  box-shadow: var(--lg-spec-soft),
              inset 0 2px 6px -4px rgba(0, 0, 0, .55);
}
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.tab-btn:hover:not(.active) { background: var(--lg-fill); }
.tab-btn.active {
  background: var(--lg-fill-hi);
  border-color: rgba(255, 255, 255, .50);
  box-shadow: var(--lg-spec-soft), 0 2px 8px -4px rgba(11, 30, 50, .28);
}
[data-theme="dark"] .tab-btn.active {
  border-color: rgba(255, 255, 255, .12);
  box-shadow: var(--lg-spec-soft), 0 2px 10px -4px rgba(0, 0, 0, .6);
}


/* ---------------------------------------------------------------------------
   6) CAROUSEL ARROWS — floating glass discs over imagery
   ------------------------------------------------------------------------- */
.story-btn {
  background: var(--lg-tint-hi);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-spec), var(--lg-shadow);
  color: var(--text);
}
.story-btn:hover {
  background: var(--lg-tint-hi);
  border-color: var(--lg-edge-hi);
  box-shadow: var(--lg-spec), var(--lg-shadow-lg);
}
[data-theme="dark"] .story-btn { color: var(--text); }


/* ---------------------------------------------------------------------------
   7) MOBILE DRAWER
   ------------------------------------------------------------------------- */
.mobile-menu {
  background: var(--lg-tint-veil);
  -webkit-backdrop-filter: var(--lg-blur-lg);
  backdrop-filter: var(--lg-blur-lg);
}
.mobile-menu a { border-bottom-color: var(--lg-edge); }

.mobile-menu-close {
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-spec), var(--lg-shadow);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease, ease), background .2s var(--ease, ease);
}
.mobile-menu-close:active { transform: scale(.94); }

/* Drawer CTAs: primary solid, secondary glass (mobile.css defines the layout) */
.mobile-menu .m-drawer-cta a { border-radius: var(--lg-capsule); }
.mobile-menu .m-drawer-cta .m-cta-primary {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .28), var(--lg-shadow);
}
.mobile-menu .m-drawer-cta .m-cta-secondary {
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-spec-soft);
}


/* ---------------------------------------------------------------------------
   8) STICKY MOBILE ACTION BAR — floating glass capsule, not a docked slab
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .m-actionbar {
    left: 12px; right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 8px;
    border: 1px solid var(--lg-edge);
    border-radius: var(--lg-capsule);
    background: var(--lg-tint-nav);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    box-shadow: var(--lg-spec), var(--lg-shadow-lg);
    transform: translateY(calc(120% + 24px));
  }
  .m-actionbar.is-visible { transform: translateY(0); }
  body.menu-open .m-actionbar { transform: translateY(calc(120% + 24px)); }

  .m-actionbar a { border-radius: var(--lg-capsule); }

  /* Primary stays a solid accent capsule */
  .m-actionbar .m-bar-primary {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .30),
                0 6px 16px -8px rgba(13, 130, 117, .6);
  }
  /* Secondary/icon become nested glass */
  .m-actionbar .m-bar-secondary,
  .m-actionbar .m-bar-icon {
    background: var(--lg-fill);
    border: 1px solid transparent;
    box-shadow: var(--lg-spec-soft);
  }
  .m-actionbar .m-bar-secondary:active,
  .m-actionbar .m-bar-icon:active { background: var(--lg-fill-hi); }

  /* Bar now floats, so the body pad must clear the gap under it too */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* Phone nav: shorter capsule, edge-to-edge margins */
  .nav { padding: 10px 12px; }
  .nav.scrolled { padding: 8px 12px; }
  .nav-inner,
  .nav.scrolled .nav-inner { max-width: 100%; }
  .nav-brand { padding-left: 16px; }
}

/* Below 1200px style.css hides .nav-links and shows the hamburger, which left
   the controls bunched against the brand with dead space filling the rest of
   the bar. A capsule makes that void obvious, so anchor the controls to the
   right and drop the segment dividers — they only read as dividers when there
   is a middle segment to divide. */
@media (max-width: 1200px) {
  .nav-actions {
    margin-left: auto;
    border-left: 0;
    padding-left: 4px;
  }
  .nav-brand { border-right: 0; }
}


/* ---------------------------------------------------------------------------
   8b) MOBILE FILTER CHIPS — glass when off, solid brand when on
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .m-chip {
    background: var(--lg-tint);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    border-color: var(--lg-edge);
    box-shadow: var(--lg-spec-soft);
  }
  .m-chip:active { background: var(--lg-tint-hi); }
  .m-chip[aria-pressed="true"] {
    background: var(--brand-fill);
    border-color: var(--brand-fill);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .28),
                0 4px 12px -6px rgba(42, 111, 174, .55);
  }
}


/* ---------------------------------------------------------------------------
   9) FOCUS — glass lowers edge contrast, so the ring gets an extra halo
   ------------------------------------------------------------------------- */
.nav-links a:focus-visible,
.icon-btn:focus-visible,
.btn:focus-visible,
.cta-pill:focus-visible,
.tab-btn:focus-visible,
.story-btn:focus-visible,
.mobile-menu-close:focus-visible,
.m-actionbar a:focus-visible,
.hero-cta:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: var(--lg-capsule);
}
.mobile-menu-close:focus-visible,
.icon-btn:focus-visible,
.story-btn:focus-visible { border-radius: 50%; }


/* ---------------------------------------------------------------------------
   10) FALLBACKS
   ------------------------------------------------------------------------- */

/* No backdrop-filter (older Firefox, some embedded webviews): the tint alone
   would leave text floating on raw page content. Go opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-inner,
  .nav.scrolled .nav-inner,
  .btn-secondary,
  .cta-pill--secondary,
  .tabs,
  .story-btn,
  .mobile-menu,
  .mobile-menu-close,
  .m-actionbar,
  .m-chip,
  .mobile-menu .m-drawer-cta .m-cta-secondary { background: var(--bg-2); }
  .nav-inner::after { display: none; }
}

/* User asked the OS to cut transparency — honour it: same shapes, solid fills */
@media (prefers-reduced-transparency: reduce) {
  .nav-inner,
  .nav.scrolled .nav-inner,
  .btn-secondary,
  .cta-pill--secondary,
  .tabs,
  .story-btn,
  .mobile-menu,
  .mobile-menu-close,
  .m-actionbar,
  .m-chip,
  .mobile-menu .m-drawer-cta .m-cta-secondary {
    background: var(--bg-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-inner::after { display: none; }
}

/* Print: no glass, no chrome */
@media print {
  .nav-inner {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-color: var(--line);
  }
  .nav-inner::before,
  .nav-inner::after { display: none; }
}


/* ===========================================================================
   11) iOS SCROLL COST — backdrop-filter budget on phones
   ---------------------------------------------------------------------------
   Reported symptom: Experience and Skills scroll poorly on iOS.

   Measured cause: 23 elements on the phone page resolve a live
   backdrop-filter. Safari re-rasterises each one's backdrop every frame that
   anything moves beneath it, and two of them (.nav-inner, .m-actionbar) are
   fixed full-width bars with the whole page sliding underneath — so every
   scroll frame repaints them, and a full-screen .grain overlay at z-index
   9999 sits on top of the lot. Four of the 23 are the .m-chip filter buttons,
   which sit directly above the Experience cards; the Documents tabs and the
   research/file cards account for most of the rest. That is the exact stretch
   of page the report names.

   Glass is only doing visual work where content actually passes behind it:
   the two floating bars and the section sheet. Everywhere else it sits on a
   near-solid page background, so an opaque tint is visually equivalent and
   composites for free. This takes the phone from 23 live backdrop filters to
   3, and trims the radius on the survivors.

   Desktop keeps all of it — it has the GPU budget and no scroll complaint.
   ======================================================================== */
@media (max-width: 768px) {
  :root {
    --lg-blur:    saturate(150%) blur(14px);
    --lg-blur-lg: saturate(160%) blur(18px);

    /* Stand-ins for the surfaces that lose their blur: opaque enough to read
       the same against the page ground they actually sit on. */
    --lg-solid:    rgba(255, 255, 255, .88);
    --lg-solid-hi: rgba(255, 255, 255, .95);
  }
  [data-theme="dark"] {
    --lg-solid:    rgba(30, 35, 45, .90);
    --lg-solid-hi: rgba(48, 55, 68, .95);
  }

  /* Everything in normal flow drops the live filter. */
  .btn-secondary,
  .cta-pill--secondary,
  .tabs,
  .story-btn,
  .m-chip,
  .mobile-menu-close,
  .mobile-menu .m-drawer-cta .m-cta-secondary,
  .file-card,
  .tab-info,
  .research-feature,
  .paper-card-v2 {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* ...and takes an opaque tint in place of the translucency it was relying
     on, so nothing reads washed out now that there is no blur behind it. */
  .btn-secondary,
  .cta-pill--secondary,
  .tabs,
  .m-chip,
  .mobile-menu-close,
  .mobile-menu .m-drawer-cta .m-cta-secondary { background: var(--lg-solid); }

  .story-btn,
  .tab-btn.active { background: var(--lg-solid-hi); }

  /* The dark contact panel sets its own translucent white; leave that alone. */
  .contact-cta .btn-secondary { background: rgba(255, 255, 255, .12); }

  /* The chip rail is the one nested scroller left on the page. Keep a
     horizontal fling from chaining into the page scroll. */
  .m-filters { overscroll-behavior-x: contain; }
}