/* ==========================================================================
   Old Man Gas vs the LNG Terminal - Rewiring Aotearoa campaign page
   House style borrowed from the NZ Made Energy / Operation Laser Kiwi build:
   Rubik, dark forest green, neon green, cream, gold, and the wonky
   hand-drawn border-radius that every button and chip on that page uses.
   ========================================================================== */

:root {
  --ink:        #143a1e;   /* page background, deep forest green            */
  --ink-deep:   #0d2814;   /* darker band for alternating sections          */
  --ink-teal:   #1a3c3c;   /* text colour when sitting on neon or gold      */
  --cream:      #FFFCF0;   /* primary text                                  */
  --muted:      #a9c3ab;   /* secondary text                                */
  --neon:       #4bf03c;   /* the campaign accent                           */
  --neon-deep:  #3ed432;
  --gold:       #f5b731;   /* primary button                                */
  --gas-blue:   #4aa8e8;   /* Old Man Gas himself                           */
  --hairline:   rgba(75, 240, 60, 0.27);
  --grain:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  --surface:    rgba(255, 252, 240, 0.04);
  --wonk:       255px 15px 225px 15px / 15px 225px 15px 255px;
  --wonk-alt:   15px 225px 15px 255px / 255px 15px 225px 15px;
  --shell:      1180px;
  --display:    'Rewiring Solid', 'Rubik', system-ui, sans-serif;
}

/* Rewiring Solid, the campaign display face from Elliot. Alpha cut: it has
   A-Z, a-z, space and macrons ONLY - no digits and no punctuation - so Rubik
   is listed straight after it and picks up those glyphs per character. Never
   set it on anything that is mostly numbers. */
@font-face {
  font-family: 'Rewiring Solid';
  src: url('fonts/RewiringSolid-alpha.woff2') format('woff2'),
       url('fonts/RewiringSolid-alpha.otf') format('opentype');
  font-weight: 400 800;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--neon); }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; width: 100%; }

/* --- shared type ---------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--neon);
  padding: 7px 17px;
  border-radius: var(--wonk);
  margin: 0 0 20px;
}
.eyebrow--ghost {
  background: transparent;
  color: var(--neon);
  border: 2px solid rgba(75, 240, 60, 0.45);
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  margin: 0 0 20px;
}
h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
p { margin: 0 0 20px; color: rgba(255, 252, 240, 0.9); }

/* section copy reads as a centred block, larger and semibold */
.beat-copy {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  min-height: 100%;
}
.beat-copy p {
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  font-weight: 400;
  line-height: 1.65;
  max-width: 46ch;
}
p:last-child { margin-bottom: 0; }

/* --- buttons -------------------------------------------------------- */
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 15px 36px;
  text-decoration: none;
  border-radius: var(--wonk);
  border: 3px solid var(--gold);
  background: var(--gold);
  color: var(--ink-teal);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px) rotate(-0.4deg); box-shadow: 0 8px 0 rgba(0,0,0,0.25); }
.btn--ghost {
  background: transparent;
  border-color: var(--neon);
  color: var(--neon);
  border-radius: var(--wonk-alt);
}
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

/* --- speech bubble --------------------------------------------------- */
.bubble {
  position: relative;
  background: var(--cream);
  color: var(--ink-teal);
  border: 3px solid var(--ink-teal);
  border-radius: 26px;
  padding: 20px 24px;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
  max-width: 420px;
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.32);
  transform: rotate(-1deg);
}
.bubble p { color: inherit; margin: 0; }
.bubble::before,
.bubble::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
}
/* tail pointing down-left, toward the artwork */
.bubble--left::after {
  bottom: -26px; left: 46px;
  border-width: 26px 20px 0 0;
  border-color: var(--cream) transparent transparent transparent;
}
.bubble--left::before {
  bottom: -33px; left: 43px;
  border-width: 33px 26px 0 0;
  border-color: var(--ink-teal) transparent transparent transparent;
}
/* tail pointing down-right */
.bubble--right::after {
  bottom: -26px; right: 46px;
  border-width: 26px 0 0 20px;
  border-color: var(--cream) transparent transparent transparent;
}
.bubble--right::before {
  bottom: -33px; right: 43px;
  border-width: 33px 0 0 26px;
  border-color: var(--ink-teal) transparent transparent transparent;
}
/* --- alternating image + text sections -------------------------------- */
.beat {
  position: relative;
  padding: 96px 0;
  border-top: 2px dashed var(--hairline);
}
.beat:nth-child(even) { background: var(--ink-deep); }
/* the house grain overlay - every dark surface on the campaign carries it */
.beat::before,
.site-foot::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  pointer-events: none;
  z-index: 0;
}
.beat > *, .site-foot > * { position: relative; z-index: 1; }

.beat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.beat--flip .beat-art { order: 2; }

.beat-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;                      /* room for the tail below the bubble */
}
.beat-art img {
  width: 100%;
  max-width: 400px;
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
}
/* the bubble sits above the artwork rather than over it, nudged to the side
   its tail points at */
.beat-art .bubble { align-self: flex-start; max-width: 340px; }
.beat--flip .beat-art .bubble { align-self: flex-end; }

/* house card: dashed by default, solid on hover, with a slight static tilt */
.stat {
  margin-top: 30px;
  padding: 20px 24px;
  background: rgba(255, 252, 240, 0.06);
  border: 2px dashed rgba(75, 240, 60, 0.55);
  border-radius: 8px 22px 8px 22px;
  transform: rotate(-0.8deg);
  transition: border-style 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.beat--flip .stat { border-radius: 22px 8px 22px 8px; transform: rotate(0.8deg); }
.stat:hover {
  border-style: solid;
  transform: translateY(-4px) rotate(-0.3deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.stat-value {
  display: block;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--neon);
}
.stat-label { font-size: 0.92rem; color: var(--muted); }
.stat-label a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* --- reveal on scroll ------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   THE PINNED STAGE
   The hero and the scroll scene are the same thing. The hero copy sits over
   the opening frame of the scene and dissolves as you scroll into it, so the
   terminal never cuts or reloads.
   ========================================================================== */

.scene-hero {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  will-change: opacity, transform;
}
.scene-hero .shell { width: 100%; }
.hero-copy { max-width: 640px; }

.scene-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6.6vw, 5rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 3px var(--cream);
  text-shadow: 0 2px 26px rgba(8, 26, 12, 0.85);
}
.scene-hero h1 .solid {
  display: block;
  color: var(--cream);
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 26px rgba(8, 26, 12, 0.9);
}
.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  max-width: 520px;
  margin: 22px 0 0;
  text-shadow: 0 1px 10px rgba(8, 26, 12, 0.85);
}

/* scroll cue: a label over a track with a spark running down it */
.scroll-cue {
  position: absolute;
  left: 32px; bottom: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.scroll-cue span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.75;
  animation: cue-pulse 2.4s ease-in-out infinite;
}
.scroll-cue i {
  position: relative;
  display: block;
  width: 2px;
  height: 56px;
  border-radius: 2px;
  background: rgba(255, 252, 240, 0.22);
  overflow: hidden;
}
.scroll-cue i::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: var(--neon);
  box-shadow: 0 0 10px rgba(75, 240, 60, 0.9);
  animation: cue-run 2.4s cubic-bezier(0.6, 0, 0.35, 1) infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-22px); opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(58px); opacity: 0; }
}
@keyframes cue-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; opacity: 0.8; }
  .scroll-cue i::after { animation: none; transform: translateY(18px); opacity: 1; }
}

/* the heavy hero scrim that lets the headline read, faded out by the scene */
.scene-scrim {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,26,12,0.92) 0%, rgba(8,26,12,0.72) 44%, rgba(8,26,12,0.18) 78%, rgba(8,26,12,0.4) 100%),
    linear-gradient(180deg, rgba(8,26,12,0.42) 0%, transparent 32%, transparent 62%, rgba(8,26,12,0.9) 100%);
}

/* --- the pinned scene ------------------------------------------------- */
.scene-track { position: relative; height: 560vh; background: var(--ink); }

.scene-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #1b4a57 0%, #14424f 40%, #0d2814 100%);
}

/* the terminal plate is anchored to the bottom so the waterline always sits
   in the same place no matter how tall the viewport is */
.scene-plate {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 1;
}
.scene-plate img { width: 100%; height: auto; }

.scene-vignette {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,26,12,0.72) 0%, rgba(8,26,12,0.18) 22%, transparent 40%),
    linear-gradient(0deg, rgba(8,26,12,0.92) 0%, rgba(8,26,12,0.72) 12%, rgba(8,26,12,0.3) 26%, transparent 44%);
}

.scene-ship {
  position: absolute;
  left: 0;
  bottom: 20vh;
  width: clamp(300px, 42vw, 760px);
  transform-origin: 22% 78%;   /* grows toward the near bow */
  z-index: 2;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.4));
}

.scene-houses {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(380px, 56vw, 940px);
  z-index: 6;
  opacity: 0;
  will-change: transform, opacity;
}
.scene-houses img { width: 100%; filter: drop-shadow(0 -4px 16px rgba(0,0,0,0.4)); }

.scene-figure {
  position: absolute;
  right: 4vw;
  bottom: 7vh;
  width: clamp(300px, 34vw, 560px);
  aspect-ratio: 3 / 4;
  z-index: 5;          /* behind the house row, which is z-index 6 */
}
.scene-figure img {
  position: absolute;
  bottom: 0;
  width: 100%;
  will-change: transform, opacity;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,0.45));
}
.scene-figure img[data-scene-omg="calm"] { left: 0; }
/* The two poses are different crops of the same character. These numbers are
   solved from the orange cap's centroid in each source image so that his HEAD
   lands at the same size and the same point in both, which is what a cross
   fade needs. Re-derive them if either artwork is replaced.
     calm  cap centre  x 0.4440  y 0.0693   image 900x1186
     glee  cap centre  x 0.5176  y 0.0729   image 900x870                    */
.scene-figure img[data-scene-omg="glee"] {
  width: 108%;
  left: -11.5%;
  bottom: 19.4%;
  transform-origin: 50% 100%;
}

/* dropped over the plate and the ship once she has berthed, so the house row,
   the money and a delighted Old Man Gas read against a quieter backdrop */
.scene-dim {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(8, 26, 12, 0.55) 0%, rgba(8, 26, 12, 0.68) 60%, rgba(8, 26, 12, 0.5) 100%);
  will-change: opacity;
}

.scene-money { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.scene-coin {
  position: absolute;
  bottom: 0; left: 0;
  width: 86px;
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}

.scene-caption {
  position: absolute;
  left: 50%; bottom: 7vh;
  transform: translateX(-50%);
  z-index: 8;
  margin: 0;
  width: min(1000px, 92vw);
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 3px 16px rgba(8, 26, 12, 0.95);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.scene-caption.is-in { opacity: 1; }

.scene-rail {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: rgba(255, 252, 240, 0.12);
  z-index: 9;
}
.scene-rail i {
  display: block;
  height: 100%;
  background: var(--neon);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.scene-stage.is-static .scene-caption { opacity: 1; }

/* --- responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .shell { padding: 0 22px; }
  .beat { padding: 68px 0; }
  .beat-grid { grid-template-columns: 1fr; gap: 40px; }
  .beat--flip .beat-art { order: 0; }
  .beat-art img { max-width: 300px; }
  /* artwork that runs off its frame gets pinned flush to that side and bleeds
     past the 22px gutter, so the cut edge reads as continuing off screen */
  .beat-art { width: 100%; }
  .beat-art img[data-bleed="left"] {
    align-self: flex-start;
    margin-left: -22px;
    max-width: min(100% + 22px, 340px);
  }
  .beat-art img[data-bleed="right"] {
    align-self: flex-end;
    margin-right: -22px;
    max-width: min(100% + 22px, 340px);
  }
  .beat-art img[data-bleed="full"] {
    align-self: stretch;
    width: calc(100% + 44px);
    max-width: calc(100% + 44px);
    margin-left: -22px;
    margin-right: -22px;
  }
  .beat-art .bubble { align-self: stretch; max-width: none; transform: rotate(-0.6deg); }
  .beat--flip .beat-art .bubble { align-self: stretch; }
    .hero-copy { max-width: none; }
  /* phones get a portrait plate that fills the stage, so the water sits where
     the ship and the houses need it */
  .scene-track { height: 460vh; }
  .scene-plate { inset: 0; }
  .scene-plate picture { display: block; height: 100%; }
  .scene-plate img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
  .scene-figure { right: 1vw; bottom: 8vh; width: 46vw; }
  .scene-houses { width: 104vw; }
  .scene-ship { bottom: 27vh; width: 72vw; }
  .scene-coin { width: 46px; }
  .scene-caption { top: 7vh; bottom: auto; width: 92vw; font-size: clamp(1.15rem, 5.4vw, 1.75rem); }
  .scene-vignette {
    background:
      linear-gradient(180deg, rgba(8,26,12,0.9) 0%, rgba(8,26,12,0.6) 18%, transparent 36%),
      linear-gradient(0deg, rgba(8,26,12,0.55) 0%, transparent 18%);
  }
  .scene-hero .hero-copy { max-width: none; }
  .scroll-cue { left: 22px; bottom: 26px; }
}

/* --- narrow centred block + footer ----------------------------------- */
.shell--narrow { max-width: 760px; text-align: center; }
.btn-row--centre { justify-content: center; }
.site-foot { position: relative; padding: 48px 0; text-align: center; border-top: 2px dashed var(--hairline); }
.site-foot p { font-size: 0.88rem; color: var(--muted); max-width: 620px; margin: 0 auto; }

/* ==========================================================================
   Made-here cards + policy asks
   ========================================================================== */

.block-head { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.block-intro {
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.card {
  background: rgba(255, 252, 240, 0.06);
  border: 2px dashed rgba(75, 240, 60, 0.55);
  border-radius: 8px 22px 8px 22px;
  padding: 26px 26px 28px;
  transition: border-style 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.card:nth-child(odd)  { transform: rotate(-1deg); }
.card:nth-child(even) { transform: rotate(0.8deg); border-radius: 22px 8px 22px 8px; }
.card:hover {
  border-style: solid;
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.card h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 12px;
}
.card p { font-size: 1rem; line-height: 1.6; margin: 0; }

.card-source { text-align: center; margin: 24px 0 0; font-size: 0.88rem; color: var(--muted); }
.card-source a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* --- policy asks ----------------------------------------------------- */
.ask-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ask {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  align-items: start;
  padding: 24px 4px;
  border-bottom: 2px dashed var(--hairline);
}
.ask:last-child { border-bottom: 0; }
.ask-n {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  color: var(--gold);
  line-height: 1.1;
}
.ask h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ask p { font-size: 1.05rem; line-height: 1.6; margin: 0 0 8px; }
.ask a { font-size: 0.82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ask-flag {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

.pull {
  margin: 0 auto 44px;
  max-width: 760px;
  text-align: center;
}
.pull blockquote {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1.25;
  color: var(--neon);
  margin: 0 0 12px;
}
.pull figcaption { font-size: 0.9rem; color: var(--muted); }

@media (max-width: 860px) {
  .ask { grid-template-columns: 44px 1fr; gap: 12px; padding: 20px 0; }
  .block-head { margin-bottom: 34px; }
}

/* ==========================================================================
   Section rail
   A single compact row of chips between the scene and the sections. It sticks
   to the top once you reach it and marks where you are. On a phone it scrolls
   sideways and keeps the active chip in view.
   ========================================================================== */

.rail {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(13, 40, 20, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 2px dashed var(--hairline);
}
.rail-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.rail-inner::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 2px solid rgba(255, 252, 240, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 252, 240, 0.72);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.chip b {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.chip:hover { color: var(--cream); border-color: rgba(75, 240, 60, 0.5); }
.chip.is-here {
  color: var(--ink);
  background: var(--neon);
  border-color: var(--neon);
}
.chip.is-here b { color: var(--ink); }

@media (max-width: 860px) {
  .rail-inner { padding: 9px 16px; gap: 7px; }
  .chip { padding: 8px 13px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-inner { scroll-behavior: auto; }
}