/* Home -- high-gloss broadcast table surface */

body.page-home {
  --felt-edge: #022818;
  --felt-deep: #064830;
  --felt-mid: #0d7a52;
  --felt-bright: #14a068;
  --felt-spec: rgba(180, 255, 220, 0.35);
  --ink: #022818;
  --ink-2: #064830;
  --panel: rgba(6, 72, 48, 0.55);
  --panel-2: rgba(13, 122, 82, 0.45);
  background-color: var(--felt-edge);
  background-image:
    radial-gradient(ellipse 100% 65% at 50% 22%, var(--felt-bright) 0%, var(--felt-mid) 28%, var(--felt-deep) 52%, var(--felt-edge) 82%),
    radial-gradient(ellipse 45% 30% at 18% 12%, var(--felt-spec) 0%, transparent 70%),
    radial-gradient(ellipse 40% 28% at 82% 18%, rgba(255, 255, 255, 0.12) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 22%, rgba(0, 0, 0, 0.25) 100%);
}

body.page-home::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.14) 0%, transparent 28%, transparent 72%, rgba(255, 255, 255, 0.06) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

body.page-home::after {
  content: "";
  position: fixed;
  inset: 10px;
  pointer-events: none;
  z-index: 0;
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 2px rgba(244, 181, 71, 0.35),
    inset 0 0 80px rgba(0, 0, 0, 0.45),
    0 0 0 10px linear-gradient(#3d2814, #1a1008);
  border: 12px solid #2a1a0c;
}

body.page-home .nav,
body.page-home .ticker-bar,
body.page-home .section-official,
body.page-home .hero,
body.page-home .section,
body.page-home .hero-broadcaster-wall,
body.page-home .home-section-nav,
body.page-home .home-section-nav-spacer,
body.page-home .logo-wall,
body.page-home footer {
  position: relative;
  z-index: 1;
}

body.page-home .section-visual-rail.reveal {
  opacity: 1;
  transform: none;
}

body.page-home header.nav {
  background: rgba(2, 40, 24, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.page-home .ticker-bar {
  background: linear-gradient(90deg, #0a5c38, #12884f);
}

body.page-home footer {
  background: linear-gradient(180deg, rgba(2, 40, 24, 0.98), rgba(1, 20, 12, 0.99));
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.page-home .section,
body.page-home .section-membership,
body.page-home .section-leagues,
body.page-home .section-official {
  background: transparent;
}

/* ------ Centred section layout ----------------------------------------------------------------------------
   Section heads previously ran flush left with the lede pinned to a 56ch
   block, so headings, body copy and chip rows all started at different
   optical positions. Everything in a section head is now centred on one
   axis: banner, eyebrow, heading, lede, community bar, action chips.
   ------------------------------------------------------------------- */

body.page-home .section-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

body.page-home .section-head > div:first-of-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  width: 100%;
}

.section-banner {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
}

.section-banner-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
}

.section-banner-frame {
  position: relative;
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

/* Pinned rather than left to shrink-to-fit: the banner used to take its
   size from the image's intrinsic dimensions, so it drifted whenever the
   image sizing changed. Fixed box, image crops into it. */
.section-banner-inner {
  position: relative;
  width: 180px;
  height: 60px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.section-banner-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: saturate(1.08) contrast(1.03);
  transition: transform 0.25s ease;
  display: block;
}

.section-wwbafa-mark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  opacity: 1;
  pointer-events: none;
  z-index: 3;
  object-fit: contain;
  display: block;
}

.hero-wall-wrap {
  position: relative;
  padding-top: 8px;
}

.hero-wall-mark {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: auto;
  width: 36px;
  height: 36px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.section-banner-link:hover .section-banner-photo {
  transform: scale(1.02);
}

.section-action-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.section-action-chip {
  font-size: 11px;
  cursor: pointer;
}

body.page-home .hero-grid {
  grid-template-columns: 1.15fr 0.85fr;
}

body.page-home .gloss-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(0, 0, 0, 0.15) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.35);
}

body.page-home .section-live {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(234, 90, 68, 0.08), transparent 60%);
}

.home-section-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 12px 0 14px;
  margin-bottom: 0;
  background: rgba(12, 18, 16, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-section-nav-spacer {
  height: 28px;
  pointer-events: none;
}

.home-section-nav-label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* Centred; the old flex-start rule here contradicted the one at the end of
   this file and only survived by accident of source order. */
body.page-home .home-section-jump {
  justify-content: center;
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding-bottom: 4px;
}

body.page-home .section {
  padding: 52px 0;
}

body.page-home .section-head {
  margin-bottom: 28px;
}

body.page-home .section-head .lede {
  max-width: 72ch;
  margin: 0 auto;
  text-align: center;
}

body.page-home .section-community-bar {
  margin: 8px 0 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-width: none;
}

.vote-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.72);
  display: grid;
  place-items: center;
  padding: 20px;
}

.vote-modal-backdrop[hidden] {
  display: none;
}

.vote-modal {
  position: relative;
  width: min(100%, 480px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 24px 24px;
  border-radius: 16px;
}

.vote-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  color: var(--paper);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.vote-modal-lede {
  font-size: 13px;
  color: var(--paper-dim);
  margin: 8px 0 18px;
  line-height: 1.5;
}

.vote-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vote-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--paper-dim);
}

.vote-field input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
  color: var(--paper);
  font-size: 14px;
}

.vote-status {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-dim);
}

.vote-status.is-ok {
  color: var(--emerald);
}

.vote-status.is-warn {
  color: var(--gold);
}

body.vote-modal-open {
  overflow: hidden;
}

body.page-home #section-live .section-head {
  margin-bottom: 12px;
}

body.page-home #section-live .section-visual-rail {
  margin-bottom: 16px;
}

body.page-home #section-live .live-board-shell {
  margin-top: 8px;
}

body.page-home #live-now-grid {
  margin-top: 0;
}

body.page-home .section-live .feed-empty {
  margin: 0;
}

.hero-broadcaster-wall {
  padding: 28px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.section-community-bar {
  margin-inline: auto;
  margin-bottom: 16px;
  max-width: 720px;
}

.section-community-title {
  margin: 0 0 10px;
}

.section-community-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.section-community-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--paper-dim);
  max-width: 56ch;
}

/* ------ Photo tiles ----------------------------------------------------------------------------------------------
   One token drives every face tile. Containers set --tile; the slot, the
   frame, the media box and the image all inherit it. Nothing else should
   set a pixel width on a tile.
   ------------------------------------------------------------------- */

.broadcaster-mega-grid,
.featured-face-grid {
  --tile: 52px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
}

/* Compact strip under the global directory heading. */
#platform-directory .featured-face-grid {
  --tile: 40px;
  gap: 6px;
  margin: 4px 0 16px;
  padding: 12px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#platform-directory .featured-faces-label {
  margin: 18px 0 6px;
  font-size: 11px;
  text-align: center;
}

.home-jump-pills-wrap {
  padding: 16px 0 8px;
}

.home-section-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.section-jump-pill {
  font-size: 11px;
}

.section-visual-rail {
  margin: 0 0 20px;
  overflow-x: auto;
}

.broadcaster-rail-track {
  margin-inline: auto;
}

.broadcaster-rail-track {
  --tile: 44px;
  display: flex;
  gap: 10px;
  width: max-content;
  padding-bottom: 4px;
}

.broadcaster-rail-track .photo-tile {
  flex-shrink: 0;
}

.photo-tile-slot {
  position: relative;
  display: block;
  width: var(--tile, 44px);
  max-width: var(--tile, 44px);
  vertical-align: top;
  isolation: isolate;
  justify-self: center;
}

.photo-tile-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}

.photo-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--tile, 44px);
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
  color: inherit;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.photo-tile-slot:has(.photo-hit-link:hover) .photo-tile {
  transform: scale(1.04);
}

.photo-hit-link {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 2;
}

.photo-hit-media {
  display: block;
  line-height: 0;
  width: 100%;
  height: 100%;
}

.photo-hit-media .photo-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-hit-cap {
  display: block;
  width: 100%;
}

/* ------ Remote image safety --------------------------------------------------------------------------------
   Source files can be 2000px+ originals, so every image needs a ceiling.
   This block only CAPS and sets cropping behaviour -- it must never set a
   width or height, because it out-specifies every component rule below and
   would otherwise force each image to fill whatever box it happens to sit
   in (which is what made logos render at 18px in one grid and 56px in the
   next, and let a live thumbnail reach 516px).
   Dimensions belong to the component. Full stop.
   ------------------------------------------------------------------- */

body.page-home img {
  max-width: 100%;
}

/* Photographic content fills a box its component has already sized. */
body.page-home .photo-tile-img,
body.page-home .photo-tile-media img,
body.page-home .member-photo,
body.page-home .live-thumb,
body.page-home .section-banner-photo {
  display: block;
  object-fit: cover;
}

/* Logos keep their own fixed dimensions and are never cropped. */
body.page-home .platform-tile-logo,
body.page-home .live-rail-logo,
body.page-home .rebrand-21-hero-logo,
body.page-home .logo-wall-item img,
body.page-home .platform-thumb {
  object-fit: contain;
}

/* Face grids get their own containment so a slow image can't reflow the page. */
.broadcaster-mega-grid,
.featured-face-grid {
  contain: layout style;
}

.featured-face-grid .photo-tile-cap {
  display: none;
}

.photo-tile-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: rgba(0, 0, 0, 0.35);
}

/* The markup carries width/height attributes from the image proxy; the box
   below is what actually decides the rendered size. */
.photo-tile:not(:has(.photo-tile-cap)) .photo-tile-media,
.photo-tile.sm .photo-tile-media {
  border-radius: 8px;
}

.photo-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-tile-platform-badge {
  position: absolute;
  box-sizing: border-box;
  right: 3px;
  bottom: 3px;
  width: 16px;
  height: 16px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 2;
}

.photo-tile-platform-badge.sm {
  width: 14px;
  height: 14px;
  padding: 1px;
  border-radius: 4px;
}

.photo-tile-cap {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 3px 3px;
  font-size: 8px;
  font-family: var(--font-mono);
  line-height: 1.15;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.9));
  color: var(--paper);
  border-radius: 0 0 8px 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eyebrow-link {
  text-decoration: none;
  color: var(--gold);
}

.eyebrow-link:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  body.page-home .hero-grid {
    grid-template-columns: 1fr;
  }
  body.page-home::after {
    inset: 4px;
    border-width: 8px;
  }
}

@media (max-width: 560px) {
}

/* ------ Home: phone + laptop layout polish ------ */

body.page-home {
  --home-nav-sticky: 66px;
  --home-section-nav-h: 88px;
}

body.page-home .home-section-nav {
  top: var(--home-nav-sticky);
}

body.page-home .section,
body.page-home .hero-broadcaster-wall,
body.page-home #platform-directory,
body.page-home #section-live,
body.page-home #section-members,
body.page-home #section-commissioners-cup,
body.page-home #regional-majors-grid,
body.page-home #specialty-leagues-grid,
body.page-home #watch-broadcasters,
body.page-home #recent-broadcasts-section,
body.page-home #featured-rotation-grid,
body.page-home #rebrand-21 {
  scroll-margin-top: calc(var(--home-nav-sticky) + var(--home-section-nav-h));
}

body.page-home .section-head h2 {
  max-width: none;
  line-height: 0.95;
  font-size: clamp(28px, 5.5vw, 52px);
}

body.page-home .section-head > div:first-of-type {
  align-items: flex-start;
}

body.page-home .nav-cta {
  padding: 9px 14px;
  font-size: 10px;
}

@media (max-width: 920px) {
  body.page-home .brand-sub {
    display: none;
  }
  body.page-home .brand-word {
    font-size: 22px;
  }
}

@media (max-width: 599px) {
  body.page-home .section,
  body.page-home .section-membership,
  body.page-home .section-leagues,
    body.page-home .section-official,
  body.page-home .section-live,
  body.page-home .section-rebrand-21 {
    padding: 28px 0;
  }

  body.page-home .home-section-nav-spacer {
    height: 12px;
  }

  .hero-broadcaster-wall {
    padding: 16px 0 4px;
  }

  body.page-home .section-head {
    margin-bottom: 14px;
    gap: 10px;
  }

  body.page-home .section-head .lede {
    font-size: 14px;
  }

  .section-banner-inner {
    width: 144px;
    height: 60px;
  }

  .section-visual-rail {
    display: none;
  }

  body.page-home .home-section-nav {
    padding: 8px 0 10px;
  }

  body.page-home .home-section-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    margin: 0 calc(-1 * clamp(16px, 4vw, 28px));
    padding-left: clamp(16px, 4vw, 28px);
    padding-right: clamp(16px, 4vw, 28px);
  }

  body.page-home .section-jump-pill {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .broadcaster-mega-grid,
  .featured-face-grid {
    --tile: 44px;
    gap: 6px;
  }

  #platform-directory .featured-face-grid {
    --tile: 36px;
    gap: 5px;
    padding: 10px 8px;
    margin-bottom: 10px;
  }

  #platform-directory .featured-faces-label {
    margin: 12px 0 4px;
    font-size: 10px;
  }

  body.page-home .members-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .member-body {
    padding: 10px 12px;
  }

  .member-body h4 {
    font-size: 18px;
  }

  .member-card--row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .member-card--row .member-photo-wrap,
  .member-card--row .member-photo {
    width: 56px;
  }

  /* Keep the row thumbnail square at the smaller mobile size. */
  .member-card--row .member-photo {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }

  .rotation-tile {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .section-wwbafa-mark,
  .hero-wall-mark {
    width: 28px;
    height: 28px;
    padding: 3px;
    right: 8px;
    bottom: 8px;
  }

  .hero-wall-mark {
    top: 6px;
    bottom: auto;
  }

  body.page-home .section-membership {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

@media (min-width: 960px) {
  body.page-home .members-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .broadcaster-mega-grid {
    --tile: 56px;
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  body.page-home .members-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .broadcaster-mega-grid,
  .featured-face-grid {
    --tile: 48px;
  }
}


/* ------ Centred hero, join banner and member cards -------------------------------------- */

body.page-home .hero-grid {
  align-items: center;
  text-align: center;
}

body.page-home .hero-top,
body.page-home .hero h1,
body.page-home .hero-copy {
  text-align: center;
}

body.page-home .hero-copy {
  margin-inline: auto;
  max-width: 60ch;
}

body.page-home .hero-actions,
body.page-home .hero .division-pills {
  justify-content: center;
}

body.page-home .join-banner {
  text-align: center;
  justify-items: center;
}

body.page-home .join-banner .lede {
  margin-inline: auto;
}

body.page-home .join-list {
  display: inline-block;
  text-align: left;
  margin-inline: auto;
}

body.page-home .member-card--row .member-body {
  align-items: center;
  text-align: center;
}

body.page-home .member-card--row .member-platform-row,
body.page-home .member-card--row .member-meta-row {
  justify-content: center;
}


/* ---- Section pills on a phone --------------------------------------
   home.css previously made this a horizontal scroller, so most sections
   sat off-screen with no hint they existed. Wrap instead, show two rows,
   and let "All sections" unfold the rest. */

@media (max-width: 720px) {
  body.page-home .home-section-jump {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    margin: 0;
    padding: 0;
    max-height: none;
    overflow-y: visible;
  }

  /* Collapsing hid most sections behind a toggle that was easy to miss.
     Every pill is simply shown; they wrap onto as many rows as needed. */
  body.page-home .home-section-nav-toggle {
    display: none;
  }

  body.page-home .home-section-nav .wrap {
    text-align: center;
  }
}

/* ---- Ticker: a band, not a hairline ---------------------------------
   It now fills the green field between the header and the Sections rail,
   so the top of the page reads as a live wire rather than a thin strip. */

body.page-home .ticker-bar {
  padding: 14px 0 16px;
  background:
    linear-gradient(90deg, #0a5c38, #12884f 45%, #0a5c38),
    radial-gradient(600px 120px at 20% 0%, rgba(244, 181, 71, 0.16), transparent 70%);
  border-bottom: 1px solid rgba(244, 181, 71, 0.28);
  box-shadow: inset 0 -14px 26px rgba(0, 0, 0, 0.22);
}

body.page-home .ticker-track {
  gap: 0;
}

body.page-home .ticker-item {
  display: inline-flex;
  align-items: center;
  margin: 0 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.page-home .ticker-item:hover {
  background: rgba(244, 181, 71, 0.9);
  border-color: transparent;
  color: #1a1206;
}

body.page-home .ticker-item .ticker-ico {
  font-size: 12px;
  color: var(--gold);
}

body.page-home .ticker-item:hover .ticker-ico {
  color: #1a1206;
}

/* Nothing may push the page sideways on a narrow phone. */
@media (max-width: 480px) {
  body.page-home .ticker-item {
    font-size: 11.5px;
    padding: 8px 12px;
  }

  html, body {
    overflow-x: hidden;
  }
}


/* ---- Section pills + nav spacing (final word) ------------------------
   These live in home.css because it loads after styles.css; the earlier
   attempt in styles.css was silently overridden by the rules above. */

body.page-home .section-jump-pill {
  background: linear-gradient(180deg, #f9f6ef, #e4ded0);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #10241b;
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 8px rgba(0, 0, 0, 0.32);
}

body.page-home .section-jump-pill .pill-ico {
  color: #0b6a41;
  opacity: 1;
}

body.page-home .section-jump-pill:hover,
body.page-home .section-jump-pill:focus-visible {
  background: linear-gradient(180deg, #ffe9b4, #f4b547);
  border-color: rgba(0, 0, 0, 0.3);
  color: #1a1206;
}

body.page-home .section-jump-pill:hover .pill-ico {
  color: #1a1206;
}

/* The rail is sticky, so it sits over whatever follows. The spacer is what
   keeps the next section clear of it -- 28px was not enough once the pills
   wrapped onto more than one row. */
body.page-home .home-section-nav {
  padding: 14px 0 18px;
}

body.page-home .home-section-nav-spacer {
  height: 56px;
}

@media (max-width: 720px) {
  /* Wrapped pills make the bar much taller on a phone. */
  body.page-home .home-section-nav-spacer {
    height: 96px;
  }
}

/* Pills were only centred in the phone breakpoint; centre them everywhere. */
body.page-home .home-section-jump {
  justify-content: center;
  flex-wrap: wrap;
  overflow-x: visible;
  margin-inline: auto;
}

body.page-home .home-section-nav .wrap {
  text-align: center;
}