/* ============================================================
   PillNav — React Bits <PillNav />, ported to plain CSS
   ------------------------------------------------------------
   This site has no React, no bundler and no npm (same reason
   assets/particles.js is a hand port), so the component ships as
   markup + this stylesheet + assets/pillnav.js. Every rule below
   is the component's own; the deviations are marked DEVIATION.

   Accent: --base is the brand red. It paints the pill track, the
   logo bubble, the circle that rises under a hovered pill, the
   active dot and the hamburger button.
   ============================================================ */

.pill-nav-container {
  /* Bar size lives here, not on .pill-nav, because .mobile-menu-popover is a
     sibling of .pill-nav and has to offset itself by the bar's height.
     2026-09-09: 42 -> 52px, per Aurobind — the bar read undersized against
     the display type it floats over. */
  --pn-h: 52px;
  /* DEVIATION: the component positions itself (absolute, top:1em).
     Here the existing sticky header.nav is the positioned shell —
     site.js measures it into --nav-h and drives .is-stuck/.is-away —
     so the container only needs to be a positioning context for the
     mobile popover. */
  position: relative;
  z-index: 99;
  /* DEVIATION: the component clusters the logo and the track together at the
     left. This nav has always put the mark on the gutter and the pill row dead
     centre, so the component spans the whole header row and hits those two
     positions with its own grid below. .nav-meta shares the row and sits on
     top at the right; the two never touch because the track is only ~350px. */
  grid-column: 1 / -1;
  grid-row: 1;
}

.pill-nav {
  /* --pn-h (the component's --nav-h, renamed: :root already carries a --nav-h
     for the whole header's height) is set on .pill-nav-container above. */
  --pill-pad-x: 22px;
  --pill-gap: 3px;

  /* black-and-white chrome, red reserved for the selection.
     DEVIATION: upstream paints the track, the logo bubble, the rising hover
     circle and the active dot all from --base. Here the selection has to be
     red while the chrome stays monochrome, so the two are split: --base is the
     black, --sel is the red. */
  --base:       #0F0E0E;                /* track, logo bubble, hamburger */
  --pill-bg:    #F6F8FB;                /* pills */
  --pill-text:  #0F0E0E;                /* label at rest */
  --sel:        var(--red, #D32F3C);    /* hover circle + active dot */
  --hover-text: #F6F8FB;                /* label once the red is under it */

  /* 1fr | track | 1fr — equal side columns, so the track lands on the page's
     centre line however wide the logo is */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
}
.pill-logo       { justify-self: start; }
.pill-nav-items  { justify-self: center; }

@media (max-width: 768px) {
  .pill-nav-container { width: 100%; }
  /* the track is gone below here, so the grid would centre the hamburger;
     back to the component's own flex row — logo left, burger right */
  .pill-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0;
    background: transparent;
  }
}

.pill-nav-items {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--pn-h);
  background: var(--base, #000);
  border-radius: 9999px;
}

/* DEVIATION/2026-09-09: Logo/Artboard 27_1.png is a full-bleed red TILE with
   the lens mark centred inside it — not a transparent glyph. Padded 6px inside
   a black bubble, the tile's corners fell outside the circular clip (a 30px
   square has a 21.2px half-diagonal; the circle's radius is 21) and were
   shaved flat, so the mark read as a red blob bursting out of the ring.
   The tile now fills the bubble edge to edge: the circle IS the mark, the
   lens keeps the generous margin it was drawn with, and nothing is clipped.
   The bubble carries --sel rather than --base for the same reason — the
   artwork's own ground is that red, so any other colour would show as a seam. */
.pill-logo {
  width: var(--pn-h);
  height: var(--pn-h);
  border-radius: 50%;
  background: var(--sel, #D32F3C);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  transition: transform 0.42s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.pill-logo:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .pill-logo { transition: none; }
  .pill-logo:hover { transform: none; }
}

.pill-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* DEVIATION: the header floats with no plate behind it, and the track is now
   near-black on a near-black page — the hairline ring is what draws its edge.
   Same ring + drop shadow the old nav mark carried. */
.pill-nav-items,
.pill-logo,
.mobile-menu-button {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(246, 248, 251, 0.22);
}

/* header.nav is pointer-events:none so the chrome doesn't eat clicks on the
   artwork behind it; the interactive parts opt back in. */
.pill-nav-items,
.pill-logo,
.mobile-menu-button,
.mobile-menu-popover { pointer-events: auto; }

.pill-list {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: var(--pill-gap);
  margin: 0;
  padding: 4px;
  height: 100%;
}

.pill-list > li {
  display: flex;
  height: 100%;
  position: relative;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 var(--pill-pad-x);
  background: var(--pill-bg, #fff);
  color: var(--pill-text, var(--base, #000));
  text-decoration: none;
  border-radius: 9999px;
  box-sizing: border-box;
  font-family: var(--sans, 'Geist', system-ui, sans-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 0;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.pill .hover-circle {
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 50%;
  background: var(--sel, #D32F3C);
  z-index: 1;
  display: block;
  pointer-events: none;
  will-change: transform;
  /* pillnav.js sizes this and sets transform-origin; until it runs the
     circle must not show */
  width: 0; height: 0;
  transform: translateX(-50%) scale(0);
}

.pill .label-stack {
  position: relative;
  display: inline-block;
  line-height: 1;
  z-index: 2;
}

.pill .pill-label {
  position: relative;
  z-index: 2;
  display: inline-block;
  line-height: 1;
  will-change: transform;
}

.pill .pill-label-hover {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--hover-text, #fff);
  z-index: 3;
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}

/* DEVIATION: the component hangs the active dot off .pill::after, but .pill is
   overflow:hidden (it has to be, for the rising circle), so that dot is
   clipped and never shows. Same dot, hung off the list item instead. */
.pill-list > li.is-active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--sel, #D32F3C);
  border-radius: 50px;
  z-index: 4;
}

/* DEVIATION: the component's blanket `.desktop-only{display:block}` /
   `.mobile-only{display:block}` rules outrank the element rules they sit next
   to (.pill-nav-items is display:flex, .mobile-menu-button is a flex column),
   so the breakpoint is expressed on the elements themselves instead. Same
   result: the pill track above 768px, the hamburger and popover below it. */
@media (max-width: 768px) {
  .pill-nav-items.desktop-only { display: none; }
}
@media (min-width: 769px) {
  .mobile-menu-popover.mobile-only { display: none; }
}

.mobile-menu-button {
  width: var(--pn-h, 52px);
  height: var(--pn-h, 52px);
  border-radius: 50%;
  background: var(--base, #000);
  border: none;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  position: relative;
}

@media (max-width: 768px) {
  .mobile-menu-button { display: flex; }
}

.hamburger-line {
  width: 19px;
  height: 2px;
  background: var(--pill-bg, #fff);
  border-radius: 1px;
  transition: all 0.01s ease;
  transform-origin: center;
}

.mobile-menu-popover {
  --base:       #0F0E0E;
  --pill-bg:    #F6F8FB;
  --pill-text:  #0F0E0E;
  --sel:        var(--red, #D32F3C);
  --hover-text: #F6F8FB;

  position: absolute;
  top: calc(var(--pn-h, 52px) + 12px);   /* clears the bar; the component's 3em, in px */
  left: 0;
  right: 0;
  background: var(--base, #f0f0f0);
  border-radius: 27px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
  z-index: 998;
  opacity: 0;
  transform-origin: top center;
  visibility: hidden;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mobile-menu-popover .mobile-menu-link {
  display: block;
  padding: 12px 16px;
  color: var(--pill-text, #fff);
  background-color: var(--pill-bg, #fff);
  text-decoration: none;
  font-family: var(--sans, 'Geist', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 500;
  border-radius: 50px;
  transition: all 0.2s ease;
}

.mobile-menu-popover .mobile-menu-link:hover,
.mobile-menu-popover .mobile-menu-link.is-active {
  cursor: pointer;
  background-color: var(--sel, #D32F3C);
  color: var(--hover-text, #fff);
}

/* Reduced motion: pillnav.js runs no timelines, so the hover state has to be
   reachable without them. */
@media (prefers-reduced-motion: reduce) {
  .pill:hover, .pill:focus-visible { background: var(--sel); color: var(--hover-text); }
  .pill:hover .pill-label-hover, .pill:focus-visible .pill-label-hover { opacity: 0; }
}

.pill:focus-visible,
.pill-logo:focus-visible,
.mobile-menu-button:focus-visible,
.mobile-menu-link:focus-visible {
  outline: 2px solid var(--pill-bg, #F6F8FB);
  outline-offset: 3px;
}


/* ============================================================
   Standalone pill — 2026-09-24
   One of the nav's pills on its own, on its own dark track, for buttons
   that should read as the nav does (the home page's "View all").
   pillnav.js wires its hover exactly like the nav's.
   ============================================================ */
.pill-solo {
  --pill-pad-x: 22px;
  --base:       #0F0E0E;
  --pill-bg:    #F6F8FB;
  --pill-text:  #0F0E0E;
  --sel:        var(--red, #D32F3C);
  --hover-text: #F6F8FB;
  display: inline-flex;
  height: var(--pn-h, 52px);
  padding: 4px;
  border-radius: 9999px;
  background: var(--base);
  box-sizing: border-box;
}
.pill-solo .pill:focus-visible { outline: 2px solid var(--sel); outline-offset: 3px; }