/* The site menu: a liquid-glass pill, fixed in one place for the whole page, with the logo mark.
   Owner's instruction, 2026-11-13. claude. Shared by every concept; a concept does not restyle it.
   The pill carries data-fall-ink, so fall.js sets data-tone on it from the scene behind it and the
   glass and ink switch between a dark and a light version. Both stay readable over any surface. */

:root { --pill-clear: 88px; }                 /* keep the top of a pinned screen's content below this */
.pill {
  position: fixed; z-index: 60; top: clamp(10px, 1.8svh, 18px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(6px, 1.2vw, 18px); height: 52px; padding: 0 8px 0 8px;
  border-radius: 999px; white-space: nowrap; isolation: isolate;
  font: 500 14.5px/1 'Geist', system-ui, sans-serif; color: #f4f1e8; -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, rgba(40, 56, 51, .50), rgba(9, 19, 17, .60));
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -1px 0 rgba(255, 255, 255, .07), inset 0 0 16px rgba(255, 255, 255, .05), 0 14px 34px -16px rgba(0, 0, 0, .6);
}
/* the sheen across the glass */
.pill::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .12) 100%); }
.pill[data-tone=light] {
  color: #14201c; background: linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, .52)); border-color: rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 16px rgba(255, 255, 255, .35), 0 14px 34px -18px rgba(20, 32, 28, .4);
}
.pill a { color: inherit; text-decoration: none; }
.pill a:focus-visible, .pill summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pill__brand { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 4px; border-radius: 999px; font-weight: 600; font-size: 16px; letter-spacing: -.012em; }
.pill__logo { position: relative; flex: none; width: 32px; height: 32px; }
.pill__logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pill__logo .on-light { display: none; }
.pill[data-tone=light] .pill__logo .on-dark { display: none; }
.pill[data-tone=light] .pill__logo .on-light { display: block; }
.pill__links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pill__links a { display: inline-flex; align-items: center; height: 38px; padding: 0 13px; border-radius: 999px; }
.pill__links a:hover, .pill__links a[aria-current] { background: rgba(255, 255, 255, .15); }
.pill[data-tone=light] .pill__links a:hover, .pill[data-tone=light] .pill__links a[aria-current] { background: rgba(20, 32, 28, .09); }
.pill__menu { display: none; position: relative; }
.pill__menu summary { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px; list-style: none; cursor: pointer; }
.pill__menu summary::-webkit-details-marker { display: none; }
.pill__menu[open] summary { background: rgba(255, 255, 255, .15); }
.pill__menu .pill__links { position: absolute; right: -8px; top: 52px; display: grid; gap: 2px; min-width: 190px; padding: 8px; border-radius: 22px; color: #f4f1e8;
  background: linear-gradient(180deg, rgba(40, 56, 51, .82), rgba(9, 19, 17, .88)); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 40px -18px rgba(0, 0, 0, .7); }
.pill__menu .pill__links a { height: 44px; font-size: 16px; }
.pill[data-tone=light] .pill__menu .pill__links { color: #14201c; background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84)); border-color: rgba(255, 255, 255, .8); }

@media (max-width: 760px) {
  :root { --pill-clear: 76px; }
  .pill { left: 12px; right: 12px; transform: none; justify-content: space-between; height: 50px; }
  .pill > .pill__links { display: none; }
  .pill__menu { display: block; }
}
@media print { .pill { display: none; } }

/* The page's own scrollbar gives way to a concept's bespoke one (see rail.js). Not on touch-width screens. */
@media (min-width: 761px) {
  html.rail-on { scrollbar-width: none; }
  html.rail-on::-webkit-scrollbar { display: none; }
}

/* The header's night-to-scene gradient must not grey the first screen's own surfaces. */
.fall-in + section { position: relative; z-index: 3; }