/* Stretch pill nav (CSS only). A column of big round nav pills; pointing at one stretches its min-width
   300 -> 450px over .2s while its label dims, and the Back pill also widens its side padding 40 -> 100px over .3s.
   The column is as wide as its widest pill, sits against one side of its box (end by default) and centres every
   pill inside it, so the stretched pill grows only AWAY from that side (150px) and the others slide half that
   (75px) the same way: the whole column leans toward the one you point at.
   Markup: nav.spill-nav > a.spill (+ a.spill.spill--back for the Back/close pill; .is-current for this page).
   .is-hover is the hover state for scripted demos/autopilots. Below 992px it becomes a wrapping row of
   smaller pills that do not stretch (as the source does). */
.spill-nav {
  --spill-min: 300px;                 /* resting min-width */
  --spill-max: 450px;                 /* min-width while pointed at */
  --spill-dur: .2s;                   /* min-width transition (CSS 'ease') */
  --spill-pad: 40px;                  /* side padding */
  --spill-pad-back: 100px;            /* Back pill side padding while pointed at */
  --spill-pad-dur: .3s;               /* Back pill padding transition (CSS 'ease') */
  --spill-size: 60px;                 /* label size */
  --spill-gap: 20px;                  /* margin round each pill (source: 20px) */
  --spill-bg: #2c2c2c;
  --spill-ink: #fff;
  --spill-ink-hover: rgba(228, 228, 228, .5);   /* label dims as the pill stretches */
  --spill-back-bg: #eb191d;
  --spill-current-bg: rgba(0, 0, 0, .2);
  --spill-font: 400 var(--spill-size)/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
  /* one max-content track (as wide as the widest pill, so it grows when one stretches), pushed to the end of the
     box (the source's justify-items:end); pills centre in it. A track wider than the box overflows toward the
     open side, so the lean still reads in a narrow column */
  display: grid; grid-template-columns: max-content; justify-content: end; justify-items: center;
}
.spill-nav[data-spill-anchor="start"] { justify-content: start; }
.spill-nav[data-spill-anchor="center"] { justify-content: center; }

.spill {
  display: flex; justify-content: center; align-items: center; gap: 30px;
  min-width: var(--spill-min); margin: var(--spill-gap);
  padding: 10px var(--spill-pad);
  border: 0; border-radius: 2em; background: var(--spill-bg); color: var(--spill-ink); cursor: pointer;
  font: var(--spill-font); text-decoration: none; white-space: nowrap;
  transition: min-width var(--spill-dur);
}
.spill:hover, .spill:focus-visible, .spill.is-hover { min-width: var(--spill-max); color: var(--spill-ink-hover); }
.spill:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.spill.is-current { background: var(--spill-current-bg); }

.spill--back {
  background: var(--spill-back-bg); color: var(--spill-ink);
  transition: padding-left var(--spill-pad-dur), padding-right var(--spill-pad-dur), min-width var(--spill-dur);
}
.spill--back:hover, .spill--back:focus-visible, .spill--back.is-hover { padding-left: var(--spill-pad-back); padding-right: var(--spill-pad-back); color: var(--spill-ink); }
.spill--back svg { width: 1em; height: .5em; flex: none; fill: currentColor; }

/* touch screens: no hover, so no stretch (a tap would leave a pill stuck wide) */
@media (hover: none) {
  .spill:hover { min-width: var(--spill-min); color: var(--spill-ink); }
  .spill--back:hover { padding-left: var(--spill-pad); padding-right: var(--spill-pad); }
}

/* below 992px: a wrapping row of 30px pills, no stretch (source breakpoint 991px).
   .spill-nav--fold-600 folds only below 600px instead (for a mid-width box, e.g. a gallery card). */
@media (max-width: 991px) {
  .spill-nav:not(.spill-nav--fold-600) { display: flex; flex-wrap: wrap; justify-content: center; --spill-size: 30px; }
  .spill-nav:not(.spill-nav--fold-600) .spill { min-width: 0; margin: 6px; }
  .spill-nav:not(.spill-nav--fold-600) .spill--back { padding-left: var(--spill-pad); padding-right: var(--spill-pad); }
}
@media (max-width: 599px) {
  .spill-nav.spill-nav--fold-600 { display: flex; flex-wrap: wrap; justify-content: center; --spill-size: 30px; }
  .spill-nav.spill-nav--fold-600 .spill { min-width: 0; margin: 6px; }
  .spill-nav.spill-nav--fold-600 .spill--back { padding-left: var(--spill-pad); padding-right: var(--spill-pad); }
}

@media (prefers-reduced-motion: reduce) {
  .spill, .spill--back { transition-duration: 0s; }
}