/* ==========================================================================
   components.css — §8 components + §5 graphic elements ("the ink")
   Depends on tokens.css, base.css, layout.css. Load LAST.
   ========================================================================== */

/* ==========================================================================
   §5 — GRAPHIC ELEMENTS
   ========================================================================== */

/* Hairline dividers, crosshair marks, eyebrow rules and dimension leader lines
   were removed site-wide: the layout separates with space, not strokes. The one
   surviving stroke is the accent tick used as a BULLET (.tick-list, .pd-awards).
   Container edges (cards, buttons, badges, the framed canvas, image
   placeholders) are not separators and are unaffected. */

/* --- Eyebrow: --type-label in --accent + rule extending right (§3.3) ------ */
.eyebrow {
  display:block;
  color:var(--accent);
  font-size:var(--type-label); font-weight:500;
  letter-spacing:var(--track-label); text-transform:uppercase; line-height:1;
}
.band-dark .eyebrow { color:var(--accent-on-dark); }
/* Block-label variant (spec sheets, differentiators) — ink, no tick. */
.eyebrow--tick { color:var(--ink); }

/* --- Accent tick — kept ONLY as a bullet (§5) ----------------------------- */
.tick-list { list-style:none; padding:0; }
.tick-list li { position:relative; padding-left:32px; }
.tick-list li + li { margin-top:16px; }
.tick-list li::before {
  content:""; position:absolute; left:0; top:0.66em;
  width:16px; height:2px; background:var(--accent);
}
.band-dark .tick-list li::before { background:var(--accent-on-dark); }

/* --- Index numbers (Inter tabular-nums, --ink-30, accent on active) -------- */
.index {
  font-family:var(--font-tech); font-size:var(--type-index); font-weight:500;
  letter-spacing:0.06em; font-variant-numeric:tabular-nums; color:var(--ink-30);
  transition:color var(--t-micro) var(--ease-out);
}
.index.is-active, a:hover > .index, .tile:hover .index { color:var(--accent); }

/* --- Registration circle (§5) --------------------------------------------- */
.reg-circle {
  aspect-ratio:1; border-radius:var(--radius-circle);
  background:var(--surface-2); overflow:hidden;
}
.reg-circle--bordered { background:var(--surface); }

/* --- Dimension callout (thin leader + Inter tabular value, accent tick) ----- */
.dim {
  font-family:var(--font-tech); font-size:var(--type-index);
  letter-spacing:0.06em; color:var(--ink-60);
  font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; gap:8px;
}

/* ==========================================================================
   §8 — COMPONENTS
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 28px; border:1px solid var(--ink); border-radius:var(--radius);
  background:transparent; color:var(--ink);
  font-size:var(--type-label); font-weight:500;
  letter-spacing:var(--track-label); text-transform:uppercase; line-height:1;
  cursor:pointer;
  transition:background var(--t-micro) var(--ease-out),
             color var(--t-micro) var(--ease-out),
             border-color var(--t-micro) var(--ease-out);
}
.btn:hover, .btn:focus-visible { background:var(--ink); color:var(--paper); }
.btn .arrow { display:inline-block; transition:transform var(--t-micro) var(--ease-move); }
.btn:hover .arrow { transform:translateX(4px); }

/* Button on dark bands inverts its resting palette. */
.band-dark .btn, .site-footer .btn { border-color:var(--paper-on-dark); color:var(--paper-on-dark); }
.band-dark .btn:hover, .site-footer .btn:hover { background:var(--paper-on-dark); color:var(--dark); }

/* Accent CTA — reserved for the single hero "View Profile" (label + circled
   arrow, accent on hover). ONE per section (§2.2). */
.cta {
  display:inline-flex; align-items:center; gap:16px;
  color:var(--ink);
  font-size:var(--type-label); font-weight:500;
  letter-spacing:var(--track-label); text-transform:uppercase; line-height:1;
}
/* The label's underline is the SAME component as a nav link's: 1px, drawn from
   left to right on hover, 6px under the text, in --accent. It hangs off the
   label rather than off .cta because .cta is an inline-flex row — an ::after on
   the anchor itself would rule under the circle and the gap as well. */
.cta__label { position:relative; }
.cta__label::after {
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--accent); transition:width 200ms var(--ease-out);
}
.cta:hover .cta__label::after, .cta:focus-visible .cta__label::after { width:100%; }
.cta__circle {
  display:inline-grid; place-items:center;
  width:44px; height:44px; border:1px solid var(--ink); border-radius:var(--radius-circle);
  transition:border-color var(--t-micro) var(--ease-out),
             color var(--t-micro) var(--ease-out);
}
.cta__circle .arrow { transition:transform var(--t-micro) var(--ease-move); }
.cta:hover { color:var(--accent); }
.cta:hover .cta__circle { border-color:var(--accent); color:var(--accent); }
.cta:hover .cta__circle .arrow { transform:translateX(3px); }
/* Resting CTA colours on dark bands (else it inherits --ink → invisible). */
.band-dark .cta { color:var(--paper-on-dark); }
.band-dark .cta__circle { border-color:var(--paper-on-dark); }
.band-dark .cta:hover { color:var(--accent-on-dark); }
.band-dark .cta__label::after { background:var(--accent-on-dark); }
.band-dark .cta:hover .cta__circle { border-color:var(--accent-on-dark); color:var(--accent-on-dark); }

/* --- Award badge (circular, 64px, 1px --line on --surface; accent = new) -- */
.badge {
  position:relative;
  width:64px; height:64px; border-radius:var(--radius-circle);
  background:var(--surface);
  display:grid; place-items:center; text-align:center;
  font-size:var(--type-label); font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-60);
}
.badge--new::after {
  content:""; position:absolute; top:4px; right:4px;
  width:8px; height:8px; border-radius:var(--radius-circle); background:var(--accent);
}
.band-dark .badge { background:var(--dark-surface); border-color:color-mix(in srgb, var(--paper-on-dark) 16%, transparent);
                    color:var(--paper-on-dark); }
.band-dark .badge--new::after { background:var(--accent-on-dark); }

/* --- Project tile (§8) ---------------------------------------------------- */
.tile { display:block; color:inherit; }
.tile__media {
  position:relative; overflow:hidden;
  background:var(--surface-2); border-radius:var(--radius);
  aspect-ratio:4 / 5;
}
.tile__media > img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 500ms var(--ease-out);
}
.tile:hover .tile__media > img { transform:scale(1.03); }
.tile__index { position:absolute; top:12px; left:12px; z-index:2; }
.tile__head {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-top:16px;
}
.tile__title { font-size:var(--type-h3); font-weight:600; letter-spacing:-0.01em; }
.tile__arrow {
  color:var(--ink-30);
  transition:transform var(--t-micro) var(--ease-move), color var(--t-micro) var(--ease-out);
}
.tile:hover .tile__arrow { transform:translateX(4px); color:var(--accent); }
.tile__desc { margin-top:4px; color:var(--ink-60); }
.tile__meta { margin-top:8px; }

/* --- Meta table (Role / Timeline / Team / Tools / Status) ----------------- */
.meta-table { width:100%; }
.meta-row {
  display:grid; grid-template-columns:minmax(88px, 140px) 1fr; gap:24px;
  padding-block:10px; align-items:baseline;
}
.meta-row__label {
  font-size:var(--type-label); font-weight:500; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-60);
}
.meta-row__value { color:var(--ink); }
@media (max-width:640px) {
  .meta-row { grid-template-columns:1fr; gap:4px; padding-block:16px; }
}

/* --- Stat card (§8) — never more than 3 in a row -------------------------- */
.stat-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gutter); }
@media (max-width:640px) { .stat-row { grid-template-columns:1fr; } }
.stat-card {
  background:var(--surface); border-radius:var(--radius);
  padding:24px;
}
.stat-card--tint { background:var(--accent-tint); }
.stat-card__num {
  font-family:var(--font-tech); font-size:var(--type-stat); font-weight:500;
  letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.stat-card__label { margin-top:12px; font-size:var(--type-caption); color:var(--ink-60); }
.band-dark .stat-card {
  background:var(--dark-surface); border-color:color-mix(in srgb, var(--paper-on-dark) 14%, transparent);
}
.band-dark .stat-card__num { color:var(--paper-on-dark); }
.band-dark .stat-card__label { color:color-mix(in srgb, var(--paper-on-dark) 66%, transparent); }

/* --- Figure / figcaption -------------------------------------------------- */
figure { margin:0; }
figure > img, figure > .ratio, figure > picture {
  border-radius:var(--radius);
}
figcaption {
  margin-top:12px; font-size:var(--type-caption); line-height:1.4;
  letter-spacing:0.01em; color:var(--ink-60);
}
.band-dark figcaption { color:color-mix(in srgb, var(--paper-on-dark) 66%, transparent); }

/* --- Image placeholder (per CLAUDE.md) ------------------------------------
   --surface-2 block, correct aspect ratio (set via .ratio-* on the wrapper),
   1px --line border, centered --type-label caption showing the expected asset
   path + the SITE_STRUCTURE description. Renders when an asset is missing. */
.img-ph {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:24px; text-align:center;
  background:var(--surface-2); border-radius:var(--radius);
  color:var(--ink-60);
}
.img-ph__path {
  font-family:var(--font-tech); font-size:var(--type-index); letter-spacing:0.06em;
  color:var(--ink); font-variant-numeric:tabular-nums; word-break:break-all;
}
.img-ph__label {
  font-size:var(--type-label); font-weight:500; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-30);
}
.img-ph__desc { font-size:var(--type-caption); color:var(--ink-60); max-width:44ch; }

/* --- Footer (§8) — dark band, same on all pages --------------------------- */
.site-footer { background:var(--dark); color:var(--paper-on-dark);
               position:relative; overflow:hidden; }

/* Signature sign-off: full-width watermark across the bottom of the footer,
   painted over the dark band but UNDER all the footer content.

   The artwork is white ink on transparency, so it needs no treatment beyond
   opacity. Its file carries ~25% empty space above the ink and ~15% below, so
   the box is given the INK's ratio (2400 × 720 = 10/3) and the background is
   scaled to full width and pushed to 62.3% — the offset that lands the ink band
   exactly inside the box and crops the padding away. The URL is relative to
   THIS stylesheet, so it resolves the same from every page depth. */
.site-footer::before {
  content:""; position:absolute; left:0; right:0;
  bottom:clamp(24px, 4vw, 64px);        /* lift it off the edge so the descenders are not flush-cut */
  aspect-ratio:10 / 3;
  background:url("../assets/images/home/signature.png") no-repeat center 62.3% / 100% auto;
  opacity:0.14;
  pointer-events:none;
}
/* Content sits above the watermark (both auto z-index; the positioned content
   paints after the ::before in tree order). */
.site-footer__inner { padding-block:clamp(64px, 10vh, 128px); position:relative; }
.site-footer__headline {
  font-size:var(--type-hero); font-weight:500; letter-spacing:-0.03em;
  line-height:var(--lh-display);
}
.site-footer__email {
  display:inline-block; margin-top:24px;
  font-size:var(--type-h2); font-weight:500; letter-spacing:-0.02em;
  color:var(--paper-on-dark);
  background-image:linear-gradient(var(--accent-on-dark), var(--accent-on-dark));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size 200ms var(--ease-out), color 200ms var(--ease-out);
}
.site-footer__email:hover { color:var(--accent-on-dark); background-size:100% 1px; }
/* Social marks sit just under the email, well above the bottom rule — close to
   the address they belong with rather than stranded on the last line. */
.site-footer__social {
  display:flex; align-items:center; gap:20px;
  margin-top:28px;
}
.site-footer__social a {
  display:inline-flex; color:color-mix(in srgb, var(--paper-on-dark) 72%, transparent);
  transition:color var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-move);
}
.site-footer__social a:hover { color:var(--paper-on-dark); transform:translateY(-2px); }
.site-footer__social svg { display:block; }

/* Bottom row: exactly two things — © left, back-to-top right. */
.site-footer__grid {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px;
  margin-top:64px; padding-top:32px;
  /* Align on the TEXT baseline, not the box top: the © line is --type-label
     with line-height 1 while back-to-top is taller, so top-aligning their boxes
     left the © sitting visibly higher than the link beside it. */
  align-items:baseline;
}
.site-footer a.link { color:var(--paper-on-dark); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:24px; }

@media (prefers-reduced-motion: reduce) {
  .site-footer__social a { transition:none; }
  .site-footer__social a:hover { transform:none; }
}
.site-footer .type-label { color:color-mix(in srgb, var(--paper-on-dark) 66%, transparent); }
.back-to-top {
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--type-label); font-weight:500; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--paper-on-dark);
}
.back-to-top .arrow { transition:transform var(--t-micro) var(--ease-move); }
.back-to-top:hover .arrow { transform:translateY(-3px); }

/* --- Logo mark (wordmark / "ek." monogram, accent period) ----------------- */
.logo {
  display:inline-flex; align-items:baseline;
  font-size:var(--type-h3); font-weight:600; letter-spacing:-0.01em; color:var(--ink);
}
.logo__dot { color:var(--ink); }              /* --ink on home hero (§2.2 exception) */
.is-sticky .logo__dot, .logo--accent .logo__dot { color:var(--accent); }
.band-dark .logo, .site-footer .logo { color:var(--paper-on-dark); }
.band-dark .logo__dot, .site-footer .logo__dot { color:var(--accent-on-dark); }

/* --- Marquee ticker (one per site, home only; pauses on hover) -------------
   Robust seamless loop: motion.js repeats the content inside one track until it
   exceeds the marquee width (no empty gap), then clones the whole track. TWO
   identical tracks sit side by side with a --gap between them, and BOTH animate
   translateX(calc(-100% - gap)) — i.e. by exactly one track width + the gap — so
   the second track lands precisely where the first started. No `-50%` sub-pixel
   dependency, so it never stutters at any width. Duration is set per-track in JS
   for a constant scroll speed regardless of how wide the content ends up. */
.marquee { --marquee-gap:32px; display:flex; overflow:hidden; gap:var(--marquee-gap); }
.marquee__track {
  display:flex; flex:0 0 auto; gap:var(--marquee-gap); padding-block:16px;
  animation:marquee-scroll 34s linear infinite; will-change:transform;
  font-size:var(--type-label); font-weight:500; letter-spacing:var(--track-label);
  text-transform:uppercase;
}
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee-scroll { to { transform:translateX(calc(-100% - var(--marquee-gap))); } }
@media (prefers-reduced-motion:reduce) { .marquee__track { animation:none; } }


/* ==========================================================================
   JS-DRIVEN STATES (Prompt 2) — nav, mobile menu, reveals, loader, transitions
   Injected/toggled by site/js/*. Kept here so the 4-file CSS structure holds.
   ========================================================================== */

/* --- Shared nav (injected by include.js) ---------------------------------- */
.site-nav {
  position:fixed; top:0; left:0; width:100%; z-index:50;
  background:var(--paper);
  transition:background var(--t-micro) var(--ease-out),
             border-color var(--t-micro) var(--ease-out);
}
.site-nav__inner {
  max-width:var(--max-w); margin-inline:auto;
  padding:18px var(--margin);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.site-nav__links { display:flex; gap:40px; }
.site-nav__links a {
  position:relative; color:var(--ink);
  font-size:var(--type-label); font-weight:500;
  letter-spacing:var(--track-label); text-transform:uppercase; line-height:1;
}
.site-nav__links a::after {
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--accent); transition:width 200ms var(--ease-out);
}
.site-nav__links a:hover::after, .site-nav__links a.is-active::after { width:100%; }
.site-nav__links a.is-active { color:var(--accent); }

/* Logo period: --ink on the home hero (§2.2), accent in bar/sticky state. */
.site-nav .logo__dot { color:var(--ink); transition:color var(--t-micro) var(--ease-out); }
.site-nav.is-sticky .logo__dot, .site-nav.nav--bar .logo__dot { color:var(--accent); }

/* Hero mode: transparent; logo + vertical link stack anchored top-left
   (home pre-scroll, per SITE_STRUCTURE §1.1). */
.site-nav.nav--hero { background:transparent; }
.site-nav.nav--hero .site-nav__inner {
  flex-direction:column; align-items:flex-start; gap:24px;
}
.site-nav.nav--hero .site-nav__links { flex-direction:column; gap:14px; }

/* Interior pages / sticky bar reserve top space so content clears the nav. */
.nav-bar body, html.nav-bar body { padding-top:66px; }

/* Hamburger (mobile only). */
.site-nav__burger { display:none; flex-direction:column; gap:6px; width:28px; padding:8px 0; }
.site-nav__burger span {
  display:block; width:24px; height:2px; background:var(--ink);
  transition:transform var(--t-micro) var(--ease-out), opacity var(--t-micro) var(--ease-out);
}
.site-nav.menu-open .site-nav__burger span:first-child { transform:translateY(4px) rotate(45deg); }
.site-nav.menu-open .site-nav__burger span:last-child { transform:translateY(-4px) rotate(-45deg); }

@media (max-width:640px) {
  .site-nav__links { display:none; }
  .site-nav__burger { display:inline-flex; }
  /* On mobile the hero nav collapses back to a normal top bar (logo + burger). */
  .site-nav.nav--hero .site-nav__inner { flex-direction:row; align-items:center; gap:24px; }
}

/* --- Mobile overlay menu (full-screen --dark) ----------------------------- */
.nav-overlay {
  position:fixed; inset:0; z-index:60;
  background:var(--dark); color:var(--paper-on-dark);
  display:flex; align-items:center; justify-content:center;
}
.nav-overlay[hidden] { display:none; }

/* Explicit close control, sitting where the burger it replaces sits. The burger
   itself is hidden while the menu is open, so there is exactly ONE close
   affordance rather than two overlapping ones. */
.nav-overlay__close {
  position:absolute; top:0; right:0;
  padding:18px var(--margin);
  background:none; border:0; cursor:pointer; line-height:0;
  color:var(--paper-on-dark);
  transition:color var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-move);
}
.nav-overlay__close:hover, .nav-overlay__close:focus-visible { color:var(--accent-on-dark); }
.nav-overlay__close:hover { transform:rotate(90deg); }
.site-nav.menu-open .site-nav__burger { opacity:0; pointer-events:none; }

@media (prefers-reduced-motion: reduce) {
  .nav-overlay__close { transition:none; }
  .nav-overlay__close:hover { transform:none; }
}
.nav-overlay nav { display:flex; flex-direction:column; gap:24px; text-align:center; }
.nav-overlay a {
  font-size:var(--type-h2); font-weight:500; letter-spacing:-0.02em;
  color:var(--paper-on-dark);
  opacity:0; transform:translateY(16px);
  transition:opacity var(--t-reveal) var(--ease-out),
             transform var(--t-reveal) var(--ease-out);
}
.nav-overlay.is-open a { opacity:1; transform:none; }
.no-scroll { overflow:hidden; }

/* --- Scroll reveals (gated by .js so no-JS/keyboard users see content) ---- */
.js .reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity var(--t-reveal) var(--ease-out),
             transform var(--t-reveal) var(--ease-out);
}
.js .reveal.is-visible { opacity:1; transform:none; }

/* --- Image clip-path wipe reveal ------------------------------------------
   Clip the MEDIA inside the container, never the observed .clip-reveal box
   itself: Chromium applies a target's own clip-path when computing
   IntersectionObserver ratios, so a fully-clipped box reports 0 intersection
   and its reveal observer would never fire (deadlock). The container stays
   unclipped; its children do the wipe. Use .clip-reveal on the frame/ratio
   wrapper, with an <img>/<picture>/<video>/.img-ph inside. */
.js .clip-reveal > img,
.js .clip-reveal > picture,
.js .clip-reveal > video,
.js .clip-reveal > .img-ph {
  clip-path:inset(0 0 100% 0);
  transition:clip-path 700ms var(--ease-out);
}
.js .clip-reveal.is-visible > img,
.js .clip-reveal.is-visible > picture,
.js .clip-reveal.is-visible > video,
.js .clip-reveal.is-visible > .img-ph {
  clip-path:inset(0 0 0 0);
}

/* --- Loader (§7) ---------------------------------------------------------- */
html.is-loading { overflow:hidden; }
.loader {
  position:fixed; inset:0; z-index:1000; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  transform:translateY(0); transition:transform 600ms var(--ease-out);
}
.loader.is-lifting { transform:translateY(-100%); }
.loader__name {
  font-size:var(--type-label); font-weight:500;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink);
}
.loader__bar { position:relative; width:min(240px, 40vw); height:2px; background:var(--line); overflow:hidden; }
.loader__bar > span {
  position:absolute; inset:0 auto 0 0; width:0; background:var(--accent);
  transition:width 700ms var(--ease-out);
}
.loader.is-filling .loader__bar > span { width:100%; }

/* --- Page-transition fade ------------------------------------------------- */
body.is-leaving { opacity:0; transition:opacity 200ms var(--ease-out); }

/* --- Reduced-motion: reveals/clips show instantly, transforms off --------- */
@media (prefers-reduced-motion:reduce) {
  .js .reveal { opacity:1 !important; transform:none !important; }
  .js .clip-reveal > img, .js .clip-reveal > picture,
  .js .clip-reveal > video, .js .clip-reveal > .img-ph { clip-path:none !important; }
  .nav-overlay a { opacity:1 !important; transform:none !important; }
  .loader { transition:none; }
  .loader__bar > span { transition:none; }
}

/* ==========================================================================
   LIQUID GLASS — floating chrome ONLY (BRAND_GUIDE §5, sanctioned recipe)
   ==========================================================================
   The values live here once, as custom properties, and everything that uses
   glass reads them — so the recipe cannot drift between surfaces. The .glass /
   .glass--dark utilities are the general form; the two applications below
   (sticky nav, mobile overlay) reuse the same properties because they are
   full-bleed and need their edges handled differently from a floating panel.

   The discipline, restated so it survives the next edit: glass belongs to
   elements that FLOAT ABOVE scrolling content. Never a card, a stat, a section,
   a figure, a button, a footer or a dark band. Never two glass surfaces
   stacked. Never behind a block of body text. Blur stays at 20px, and is never
   animated — a transitioning blur re-rasterises every frame.
   ========================================================================== */
:root {
  --glass-bg:             rgba(244, 243, 240, 0.72);
  --glass-bg-dark:        rgba(16, 16, 16, 0.55);
  --glass-blur:           blur(20px) saturate(160%);
  --glass-edge-dark:      rgba(237, 235, 230, 0.14);
  --glass-highlight:      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --glass-highlight-dark: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Fallback + reduced-transparency: opaque enough to read as a deliberate
     solid bar rather than a failed effect. */
  --glass-solid:          rgba(244, 243, 240, 0.97);
  --glass-solid-dark:     rgba(16, 16, 16, 0.97);
}

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--glass-highlight);
}
.glass--dark {
  background: var(--glass-bg-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge-dark);
  box-shadow: var(--glass-highlight-dark);
}

/* --- Application 1: the sticky nav bar (the hero application) -------------
   Full-bleed, so the recipe's 1px box border would draw down both viewport
   edges. The bottom hairline BRAND_GUIDE §7 asks for is drawn as a shadow
   instead, along with the recipe's inner top highlight — shadows do not enter
   the box model, so the bar's height is byte-identical to before and nothing
   below it shifts. Hero mode stays transparent and gets no glass. */
.site-nav.is-sticky, .site-nav.nav--bar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), 0 1px 0 var(--line);
}

/* --- Application 2: the mobile menu overlay ------------------------------- */
/* Full-viewport, so no border: an edge-to-edge frame would just be a hairline
   against the screen edge. The page ghosts through behind the links. */
.nav-overlay {
  background: var(--glass-bg-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Never two glass surfaces stacked: while the menu is open the bar behind the
   overlay drops its glass entirely and simply ghosts through it.

   The bar deliberately does NOT get lifted above the overlay. The old burger was
   unreachable under it — which is why the menu could only be closed with Escape
   or by tapping a link — but the fix for that is the dedicated close button
   inside the overlay, not a z-index war. Lifting the bar would put a full-width
   transparent strip over the overlay's own close control. */
.site-nav.menu-open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Fallback — no backdrop-filter support. Solid, and deliberate-looking. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .site-nav.is-sticky, .site-nav.nav--bar { background: var(--glass-solid); }
  .glass--dark, .nav-overlay { background: var(--glass-solid-dark); }
}

/* Reduced transparency — same solid treatment, blur removed entirely. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--dark, .site-nav.is-sticky, .site-nav.nav--bar, .nav-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass, .site-nav.is-sticky, .site-nav.nav--bar { background: var(--glass-solid); }
  .glass--dark, .nav-overlay { background: var(--glass-solid-dark); }
}