/* ==========================================================================
   NEXIFY STUDIO: liquid-glass navigation (js/glass.js)
   A dark, smoked glass cut for this site rather than Apple's bright one: the
   material blurs and deepens whatever passes under it (the film, the photos),
   carries a soft lip of light along its top edge from the same spotlight that
   lights the chair, and a thin rim that catches the light, brightest on the
   side nearest the cursor. In Chromium the edges also bend what is behind them
   (an SVG displacement map per surface). The Book pill keeps its off-white as
   a milk glass. Hero header positions and sizes are untouched (style.css).
   ========================================================================== */

:root {
  --lg-tint: rgba(14, 14, 14, 0.4);
  --lg-blur: 16px;
  --lg-sat: 1.7;
  --lg-spring: cubic-bezier(0.3, 1.4, 0.4, 1);
  --lg-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- the material ---------------------------------------------------------- */
.lg {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.012) 48%, rgba(255, 255, 255, 0.035) 100%),
    var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(0.9);
  backdrop-filter: var(--lg-refract,) blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    0 14px 34px -16px rgba(0, 0, 0, 0.8),
    0 2px 8px -2px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.45s var(--lg-soft);
}
/* light: a lip along the top edge, and a bloom that follows the cursor */
.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(var(--lg-glow-w, 9rem) var(--lg-glow-h, 5rem) at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 45%);
  opacity: 0.6;
  transition: opacity 0.45s var(--lg-soft);
}
/* the rim: a hairline edge that catches the light */
.lg::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--lg-bw, 0px));
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(var(--rim-a, 155deg), rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.1) 28%, rgba(255, 255, 255, 0.035) 60%, rgba(255, 255, 255, 0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity 0.45s var(--lg-soft);
}
.lg.is-lit::before { opacity: 1; }
.lg.is-lit {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 26px rgba(255, 255, 255, 0.05),
    0 18px 40px -16px rgba(0, 0, 0, 0.85),
    0 3px 10px -2px rgba(0, 0, 0, 0.5);
}
/* without backdrop blur the glass is simply darker, so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg { --lg-tint: rgba(14, 14, 14, 0.82); }
}

/* milk glass: the off-white Book pill */
.lg--milk {
  --lg-tint: rgba(240, 238, 236, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, 0.03) 100%),
    var(--lg-tint);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 5px -2px rgba(0, 0, 0, 0.22),
    0 14px 30px -14px rgba(0, 0, 0, 0.85),
    0 2px 6px -1px rgba(0, 0, 0, 0.4);
}
.lg--milk::before {
  background: radial-gradient(var(--lg-glow-w, 6rem) var(--lg-glow-h, 3.4rem) at var(--mx, 30%) var(--my, -20%), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
  opacity: 0.55;
}
.lg--milk::after {
  background: linear-gradient(var(--rim-a, 155deg), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.35) 35%, rgba(0, 0, 0, 0.06) 70%, rgba(255, 255, 255, 0.6));
}
.lg--milk.is-lit {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 5px -2px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 38px -14px rgba(0, 0, 0, 0.9),
    0 0 26px -6px rgba(240, 238, 236, 0.28);
}

/* the dark orb that carries the arrow */
.lg-orb {
  background: radial-gradient(circle at 34% 26%, #3c3b3a 0%, #141414 42%, #000 74%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.32),
    inset 0 -3px 6px rgba(0, 0, 0, 0.7),
    0 2px 6px -1px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.lg-orb svg { transition: transform 0.55s var(--lg-spring); }

/* ---- press and hover: the surface swells a touch, then gives under a press -- */
.lg-press {
  scale: var(--lg-s, 1);
  translate: var(--lg-tx, 0px) var(--lg-ty, 0px);
  transition: scale 0.55s var(--lg-spring), translate 0.6s var(--lg-spring), box-shadow 0.45s var(--lg-soft);
}
@media (hover: hover) and (pointer: fine) {
  .lg-press:hover { --lg-s: 1.035; }
  .lg-press:hover .lg-orb svg { transform: translate(6%, -6%); }
}
.lg-press:active { --lg-s: 0.955; transition-duration: 0.12s, 0.6s, 0.2s; }

/* ---- the liquid lens: one drop of glass that flows to the link under the
        cursor (or rests on the section in view), stretching as it travels ---- */
.lg-links a { position: relative; z-index: 1; transition: color 0.3s var(--lg-soft), text-shadow 0.3s var(--lg-soft); }
.lg-lens {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 70%),
    rgba(240, 238, 236, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -6px 10px -6px rgba(0, 0, 0, 0.4),
    0 6px 16px -8px rgba(0, 0, 0, 0.75);
  opacity: 0;
  scale: 0.86;
  transition:
    transform 0.62s var(--lg-spring),
    width 0.62s var(--lg-spring),
    height 0.62s var(--lg-spring),
    opacity 0.3s var(--lg-soft),
    scale 0.5s var(--lg-spring),
    background-color 0.3s var(--lg-soft);
}
.lg-lens.is-on { opacity: 1; scale: 1; }
.lg-lens.is-hover { background-color: rgba(240, 238, 236, 0.14); }
.lg-lens.is-press { scale: 0.92; transition-duration: 0.62s, 0.62s, 0.62s, 0.3s, 0.14s, 0.3s; }
.lg-lens.no-tr { transition: opacity 0.3s var(--lg-soft), scale 0.5s var(--lg-spring); }
.lg-lens.is-squish { animation: lg-squish 0.62s var(--lg-soft); }
@keyframes lg-squish {
  0%   { scale: 1 1; }
  32%  { scale: 1.12 0.82; }
  64%  { scale: 0.97 1.05; }
  100% { scale: 1 1; }
}
.lg-links a.is-active,
.lg-links a:focus-visible { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .lg-links a:hover { color: #fff; text-shadow: 0 0 1.1em rgba(255, 255, 255, 0.35); }
}
.lg-links a:focus-visible { outline: none; text-shadow: 0 0 1.1em rgba(255, 255, 255, 0.45); }

/* ---- hero header (same positions as the reference; only the surface changes) */
.nav.lg { --lg-bw: 1px; border-color: rgba(255, 255, 255, 0.07); }
.lg-on .nav a::before { display: none; }          /* the lens takes over the highlight */
.book.lg--milk { overflow: visible; }
.book .book__icon.lg-orb { background: radial-gradient(circle at 34% 26%, #3c3b3a 0%, #141414 42%, #000 74%); }
/* the logo grows a glass capsule only under the cursor */
.lg-ghost::before {
  content: "";
  position: absolute;
  inset: -40% -9%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)), var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 12px 30px -14px rgba(0, 0, 0, 0.8);
  opacity: 0;
  scale: 0.9;
  transition: opacity 0.35s var(--lg-soft), scale 0.55s var(--lg-spring);
  pointer-events: none;
  z-index: -1;
}
.lg-ghost { isolation: isolate; }
@media (hover: hover) and (pointer: fine) {
  .lg-ghost:hover::before { opacity: 1; scale: 1; }
}
.lg-ghost:focus-visible { outline: none; }
.lg-ghost:focus-visible::before { opacity: 1; scale: 1; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); }

/* ==========================================================================
   Floating navigation: drops in once the hero header has been covered, and
   is the navigation on phones and narrow or portrait windows from the start
   ========================================================================== */
.gnav { display: none; }
.lg-on .gnav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  top: max(0.9rem, env(safe-area-inset-top));
  padding: 0 var(--gx);
  pointer-events: none;
  visibility: hidden;
  transform: translate3d(0, -150%, 0);
  transition: transform 0.75s var(--lg-spring), visibility 0s linear 0.75s;
}
.lg-on .gnav.is-shown {
  visibility: visible;
  transform: none;
  transition: transform 0.75s var(--lg-spring), visibility 0s;
}
/* scrolling down, the bar tucks back a little; it returns on the way up */
.lg-on .gnav.is-shown.is-tucked { transform: translate3d(0, -0.35rem, 0) scale(0.94); }
.gnav__bar-item { pointer-events: auto; opacity: 0; transition: opacity 0.4s var(--lg-soft); }
.gnav.is-shown .gnav__bar-item { opacity: 1; }
/* (each glass surface fades on its own: an ancestor with opacity < 1 would
   cut the glass off from what is behind it) */
.gnav.is-shown .gnav__links { transition-delay: 0.06s; }
.gnav.is-shown .gnav__book,
.gnav.is-shown .gnav__menubtn { transition-delay: 0.12s; }

.gnav__logo {
  grid-column: 1;
  justify-self: start;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 3.2rem;
  padding: 0 1.3rem 0 1.1rem;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.11em;
  white-space: nowrap;
}
.gnav__logo svg { width: 1.55rem; height: 1rem; overflow: visible; flex: none; }
.gnav__logo line { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.gnav__word { display: block; overflow: hidden; margin-left: 0.85rem; max-width: 12rem; }
/* The wordmark stays hidden until the hero reveals it; the capsule holds just the slash till then */
.film-on .gnav__word {
  opacity: var(--ui, 1);
  max-width: calc(var(--ui, 1) * 12rem);
  margin-left: calc(var(--ui, 1) * 0.85rem);
}

.gnav__links {
  grid-column: 2;
  justify-self: center;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  height: 3.2rem;
  padding: 0 0.42rem;
  border-radius: 999px;
}
.gnav__links a {
  padding: 0.7rem 1.05rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.025em;
  color: var(--white);
  white-space: nowrap;
}

.gnav__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 0.55rem; }
.gnav__book {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  height: 3.2rem;
  padding: 0 0.36rem 0 1.4rem;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.056em;
  white-space: nowrap;
}
.gnav__orb { position: relative; display: block; width: 2.48rem; height: 2.48rem; border-radius: 50%; flex: none; }
.gnav__orb svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2; }

.gnav__menubtn {
  position: relative;
  display: none;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.gnav__menubtn i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.15rem;
  height: 1.6px;
  margin: -0.8px 0 0 -0.575rem;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.55s var(--lg-spring);
}
.gnav__menubtn i:nth-child(1) { transform: translateY(-0.24rem); }
.gnav__menubtn i:nth-child(2) { transform: translateY(0.24rem) scaleX(0.7); transform-origin: 0 50%; }
.gnav__menubtn[aria-expanded="true"] i:nth-child(1) { transform: rotate(45deg); }
.gnav__menubtn[aria-expanded="true"] i:nth-child(2) { transform: rotate(-45deg); transform-origin: 50% 50%; }
.gnav__menubtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* the dropdown: a sheet of the same glass that pours out of the menu button */
.gnav__menu {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: var(--gx);
  width: min(21rem, calc(100vw - 2 * var(--gx)));
  padding: 0.5rem;
  border-radius: 1.7rem;
  display: grid;
  gap: 0.1rem;
  pointer-events: auto;
  transform-origin: calc(100% - 1.6rem) -0.6rem;
  opacity: 0;
  scale: 0.86;
  translate: 0 -0.6rem;
  transition: opacity 0.28s var(--lg-soft), scale 0.55s var(--lg-spring), translate 0.55s var(--lg-spring);
}
.gnav__menu[hidden] { display: none; }
.gnav__menu.is-open { opacity: 1; scale: 1; translate: 0 0; }
.gnav__menu > * {
  opacity: 0;
  translate: 0 0.45rem;
  transition: opacity 0.3s var(--lg-soft), translate 0.5s var(--lg-spring);
  transition-delay: calc(var(--i, 0) * 0.035s);
}
.gnav__menu.is-open > * { opacity: 1; translate: 0 0; }
.gnav__menu .lg-links { position: relative; display: grid; gap: 0.1rem; }
.gnav__menu .lg-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-radius: 1.15rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1;
  color: var(--white);
}
.gnav__menu .lg-links .lg-lens { border-radius: 1.15rem; }
.gnav__idx { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--grey-dim, #8e8c8a); }
.gnav__rule { height: 1px; margin: 0.4rem 1.1rem; background: rgba(255, 255, 255, 0.09); }
.gnav__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.4rem;
  margin: 0.15rem 0 0;
  padding: 0 0.42rem 0 1.25rem;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
}
.gnav__cta .gnav__orb { width: 2.6rem; height: 2.6rem; }
.gnav__meta {
  margin: 0;
  padding: 0.85rem 1.15rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--grey-rating, #bdbdbd);
}
.gnav__meta a { color: #fff; }

/* phones, tablets in portrait, narrow windows: logo, Book and the menu button */
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .gnav__links { display: none; }
  .gnav__menubtn { display: grid; }
  .gnav__logo { height: 2.9rem; padding: 0 1.05rem 0 0.95rem; font-size: 0.84rem; }
  .gnav__logo svg { width: 1.35rem; }
  .gnav__book { height: 2.9rem; padding: 0 0.32rem 0 1.1rem; gap: 0.7rem; font-size: 0.88rem; }
  .gnav__book .gnav__orb { width: 2.24rem; height: 2.24rem; }
  .gnav__menubtn { width: 2.9rem; height: 2.9rem; }
}
@media (max-width: 360px) {
  .gnav__book .gnav__booklabel { display: none; }
  .gnav__book { padding: 0 0.32rem; }
}

/* ==========================================================================
   Scroll edge: content passing under the floating bar fades into the page.
   A band of the page's own black sits just beneath the bar's glass (z 59,
   the bar is 60), so the glass still blurs and refracts whatever is left of
   the content behind it. The band is fully clear below the bar, begins
   at the bar's bottom edge (plus a short feather), is mostly faded by the
   bar's middle and solid by the bar's top. The ramp is eased (no visible
   line where it starts or ends).
   It only shows while the bar is shown, and js/glass.js clips it to the
   scrolling page (--edge-cut): the pinned hero film above the sections
   never fades. When the bar tucks while scrolling down, the band follows
   it (--edge-shift) so the fade never starts below the bar.
   ========================================================================== */
@property --edge-shift { syntax: "<length>"; inherits: false; initial-value: 0px; }
.gnav-edge { display: none; --edge-rgb: 3 3 3; }          /* the page colour (css/theme.css sets the light one) */
.lg-on .gnav-edge {
  --edge-top: max(0.9rem, env(safe-area-inset-top));     /* the bar's top edge (as .gnav) */
  --edge-bar: 3.2rem;                                     /* the bar's height */
  --edge-feather: 0.45rem;                                /* the fade ends this far below it */
  --e0: calc(var(--edge-top) - 0.15rem - var(--edge-shift));
  --e1: calc(var(--edge-top) + var(--edge-bar) + var(--edge-feather) - var(--edge-shift));
  --ed: calc(var(--e1) - var(--e0));
  display: block;
  position: fixed;
  z-index: 59;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--edge-top) + var(--edge-bar) + var(--edge-feather));
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(var(--edge-rgb) / 1) 0,
    rgb(var(--edge-rgb) / 1) var(--e0),
    rgb(var(--edge-rgb) / 0.987) calc(var(--e0) + var(--ed) * 0.081),
    rgb(var(--edge-rgb) / 0.951) calc(var(--e0) + var(--ed) * 0.155),
    rgb(var(--edge-rgb) / 0.896) calc(var(--e0) + var(--ed) * 0.225),
    rgb(var(--edge-rgb) / 0.825) calc(var(--e0) + var(--ed) * 0.290),
    rgb(var(--edge-rgb) / 0.741) calc(var(--e0) + var(--ed) * 0.353),
    rgb(var(--edge-rgb) / 0.648) calc(var(--e0) + var(--ed) * 0.412),
    rgb(var(--edge-rgb) / 0.550) calc(var(--e0) + var(--ed) * 0.471),
    rgb(var(--edge-rgb) / 0.450) calc(var(--e0) + var(--ed) * 0.529),
    rgb(var(--edge-rgb) / 0.352) calc(var(--e0) + var(--ed) * 0.588),
    rgb(var(--edge-rgb) / 0.259) calc(var(--e0) + var(--ed) * 0.647),
    rgb(var(--edge-rgb) / 0.175) calc(var(--e0) + var(--ed) * 0.710),
    rgb(var(--edge-rgb) / 0.104) calc(var(--e0) + var(--ed) * 0.775),
    rgb(var(--edge-rgb) / 0.049) calc(var(--e0) + var(--ed) * 0.845),
    rgb(var(--edge-rgb) / 0.013) calc(var(--e0) + var(--ed) * 0.919),
    rgb(var(--edge-rgb) / 0) var(--e1));
  clip-path: inset(var(--edge-cut, 0px) 0 0 0);
  opacity: 0;
  transition: opacity 0.45s var(--lg-soft), --edge-shift 0.75s var(--lg-spring);
}
.lg-on .gnav-edge.is-on { opacity: 1; }
.lg-on .gnav-edge.is-tucked { --edge-shift: 0.45rem; }   /* the tucked bar: 0.35rem up, scaled 0.94 */
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .lg-on .gnav-edge { --edge-bar: 2.9rem; }
}
.lg-calm .gnav-edge.is-tucked { --edge-shift: 0px; }      /* the calm bar never tucks */

/* reduced motion (unless ?motion=full): no springs, drifting or stretching;
   the glass still answers the cursor with light */
.lg-calm .lg-press,
.lg-calm .lg-lens,
.lg-calm .gnav,
.lg-calm .gnav__menu,
.lg-calm .gnav__menu > * { transition-timing-function: var(--lg-soft) !important; }
.lg-calm .lg-lens.is-squish { animation: none; }
.lg-calm .gnav__menu { scale: 1; translate: 0 0; }
.lg-calm .gnav__menu > * { translate: 0 0; }
.lg-calm .gnav.is-shown.is-tucked { transform: none; }
.lg-calm.lg-on .gnav { transform: none; }

/* ==========================================================================
   Dark / light switch (js/theme.js): a small capsule of the same glass, a sun
   on the left and a moon on the right, and a glass thumb that slides to the
   chosen side. It stretches a little as it travels, like a drop of liquid,
   then settles; the chosen icon lights up in gold. Its state comes from
   html[data-theme], so every copy (hero header, floating bar, phone menu)
   always shows the same thing.
   ========================================================================== */
.tswitch {
  --ts-h: 3.2rem;
  --ts-w: 5.9rem;
  --ts-pad: 0.3rem;
  --ts-icon: 1.12rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: var(--ts-w);
  height: var(--ts-h);
  padding: 0 var(--ts-pad);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tswitch:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.tswitch__thumb {
  position: absolute;
  z-index: 1;
  top: var(--ts-pad);
  bottom: var(--ts-pad);
  left: var(--ts-pad);
  width: calc(50% - var(--ts-pad));
  border-radius: 999px;
  pointer-events: none;
  transform: translateX(100%);                      /* dark: under the moon */
  transition: transform 0.62s var(--lg-spring), background 0.5s var(--lg-soft), box-shadow 0.5s var(--lg-soft);
  /* a smoked lens: a bright lip on top, a warm glow inside, a thin rim */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 236, 190, 0.32), rgba(255, 236, 190, 0.06) 62%, rgba(255, 236, 190, 0) 100%),
    rgba(40, 33, 22, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 205, 0.5),
    inset 0 0 0 1px rgba(220, 180, 102, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    0 2px 6px -1px rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .tswitch__thumb {
  transform: translateX(0);                         /* light: under the sun */
  /* milk glass in the light */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 252, 244, 0.78) 55%, rgba(246, 238, 222, 0.85) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(190, 150, 80, 0.3),
    inset 0 -2px 4px rgba(120, 90, 40, 0.12),
    0 3px 8px -2px rgba(40, 28, 8, 0.45);
}
.tswitch.is-flip .tswitch__thumb { animation: ts-stretch 0.6s var(--lg-soft); }
@keyframes ts-stretch {
  0%   { scale: 1 1; }
  32%  { scale: 1.42 0.86; }
  68%  { scale: 0.94 1.05; }
  100% { scale: 1 1; }
}
.tswitch__icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 50%;
  height: 100%;
  pointer-events: none;
}
.tswitch__icon svg {
  width: var(--ts-icon);
  height: var(--ts-icon);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.45s var(--lg-soft), scale 0.6s var(--lg-spring), rotate 0.7s var(--lg-spring), opacity 0.45s var(--lg-soft), fill 0.45s var(--lg-soft);
}
/* the side that is not chosen rests dim and a touch smaller */
.tswitch__icon--sun  { color: rgba(255, 255, 255, 0.5); }
.tswitch__icon--moon { color: var(--gold-1); }
.tswitch__icon--sun svg  { scale: 0.84; rotate: -45deg; }
.tswitch__icon--moon svg { scale: 1; rotate: 0deg; fill: rgba(240, 212, 146, 0.22); }
html[data-theme="light"] .tswitch__icon--sun  { color: #8c6322; }
html[data-theme="light"] .tswitch__icon--moon { color: rgba(255, 255, 255, 0.5); }
html[data-theme="light"] .tswitch__icon--sun svg  { scale: 1; rotate: 0deg; fill: rgba(214, 168, 87, 0.3); }
html[data-theme="light"] .tswitch__icon--moon svg { scale: 0.84; rotate: 20deg; fill: none; }
@media (hover: hover) and (pointer: fine) {
  html:not([data-theme="light"]) .tswitch:hover .tswitch__icon--sun,
  html[data-theme="light"] .tswitch:hover .tswitch__icon--moon { color: rgba(255, 255, 255, 0.85); }
}

/* in the floating bar: beside Book, the same height as the bar */
.gnav__right .tswitch { order: 0; }
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .gnav__right .tswitch { --ts-h: 2.9rem; --ts-w: 5.4rem; --ts-icon: 1.05rem; }
}
/* phones: the bar keeps just logo, Book and the menu; the switch moves into the menu */
.gnav__theme { display: none; }
@media (max-width: 560px) {
  .gnav__right .tswitch { display: none; }
  .gnav__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.55rem 0.55rem 1.1rem;
  }
  .gnav__theme .tswitch { --ts-h: 2.7rem; --ts-w: 5.2rem; }
}
.gnav__themelabel { font-family: var(--font-bogle); font-size: 0.86rem; letter-spacing: 0.16em; color: var(--grey-rating, #bdbdbd); }

/* in the hero header: beside the Book pill, on the same line, scaled with the stage */
.header .tswitch {
  --ts-h: calc(54 * var(--u));
  --ts-w: calc(104 * var(--u));
  --ts-pad: calc(5 * var(--u));
  --ts-icon: calc(19 * var(--u));
  position: absolute;
  left: calc(1272 * var(--u));
  top: calc(25 * var(--u));
}
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .header { display: none; }                        /* there the floating bar carries logo, links, switch and Book */
}
.lg-calm .tswitch.is-flip .tswitch__thumb { animation: none; }
.lg-calm .tswitch__thumb, .lg-calm .tswitch__icon svg { transition-timing-function: var(--lg-soft); }