/* =============================================================
   Cape Ride — public site
   Every color and typeface here comes from theme.css. If you
   are about to write a literal hex value or font name in this
   file, it belongs in the theme instead.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --space-tight: .75rem;
  --space-card: 1rem;
  --space-stack: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  --space-layout: clamp(2rem, 4vw, 3.5rem);
  --space-section: clamp(4rem, 8vw, 7rem);

  /* Line-height is one system: prose stays compact, metadata gets room
     to breathe, and display type sits tight. */
  --leading-body: 1.5;
  --leading-lede: 1.38;
  --leading-meta: 1.3;
  --leading-display: .95;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.12rem);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth);
  letter-spacing: var(--display-track);
  /* Word spacing is a theme control because display faces differ wildly in
     how wide they set a space. Aventura leaves cavernous gaps at heading
     sizes where Archivo does not. */
  word-spacing: var(--heading-word, var(--display-word, normal));
  text-transform: var(--display-transform);
  line-height: .95;
  text-wrap: balance;
}
h1 { line-height: var(--leading-display); font-size: clamp(3.2rem, 2.1rem + 5.2vw, 5.75rem); }
.h1-punchline { display: block; padding-top: .18em; }
h2 { font-size: clamp(2.5rem, 1.9rem + 3vw, 4.4rem); }
h3 { font-size: clamp(1.3rem, 1.2rem + .5vw, 1.6rem); line-height: 1.15; }
p  { margin: 0; }
a  { color: inherit; }

.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

.stack       { display: flex; flex-direction: column; gap: var(--space-stack); }
.stack-tight { display: flex; flex-direction: column; gap: var(--space-tight); }

.eyebrow {
  font-family: var(--data);
  font-size: clamp(.9rem, .86rem + .2vw, 1rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}

.note {
  font-family: var(--data);
  font-size: clamp(.92rem, .88rem + .2vw, 1.02rem);
  line-height: 1.5;
  opacity: .72;
}

.lede { font-size: clamp(1.3rem, 1.2rem + .5vw, 1.6rem); line-height: var(--leading-lede); max-width: 34ch; opacity: .92; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- bands ---------- */
.band   { padding-block: 2.75rem 3.5rem; }
.band-1 {
  background-color: var(--band-1);
  color: var(--on-1);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--band-1) 90%, transparent),
      color-mix(in srgb, var(--band-1) 90%, transparent)
    ),
    var(--hero-pattern);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.band-1 > .wrap.split {
  grid-template-columns: minmax(0, 1fr);
}
.band-1 > .wrap.split > .stack { min-width: 0; }
.band-2 { background: var(--band-2); color: var(--on-2); }
.band-3 { background: var(--band-3); color: var(--on-3); }
.band-4 { background: var(--band-4); color: var(--on-4); }
.band-5 { background: var(--band-5); color: var(--on-5); }
.band-6 { background: var(--band-6); color: var(--on-6); }

@media (min-width: 760px) {
  .band { padding-block: var(--space-section); }
}

/* ---------- buttons ---------- */
/* Indigo button for a warm band: cream on band-1 (12.39:1). The focus ring is
   indigo as well, because the gold accent ring would vanish on a gold band. */
.btn.btn-indigo { background: var(--band-1); color: var(--on-1); }
.btn.btn-indigo:hover { background: var(--band-6); color: var(--on-6); }
.btn.btn-indigo:focus-visible { outline-color: var(--band-1); }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.6rem;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }

a:focus-visible, .btn:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--band-1);
  color: var(--on-1);
  border-bottom: 1px solid color-mix(in srgb, var(--on-1) 18%, transparent);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .85rem;
}
.mark {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth);
  font-size: 1.05rem;
  letter-spacing: .02em;
  word-spacing: var(--wordmark-word, normal);
  text-transform: uppercase;
  text-decoration: none;
}
.topbar .btn { padding: .55rem 1.1rem; font-size: .85rem; }

/* The logo is a theme token, not markup. --mark is drawn as a mask rather
   than an image, so it takes the color of whatever band it sits on and a
   theme can swap the logo without the Blade knowing. */
.mark-glyph {
  width: 2rem; height: 1.35rem; flex: none;
  background: currentColor;
  -webkit-mask: var(--mark) no-repeat center / contain;
  mask: var(--mark) no-repeat center / contain;
}

.hero-mark {
  width: 100%; max-width: 460px;
  aspect-ratio: 349 / 218;
  background: currentColor;
  -webkit-mask: var(--mark) no-repeat center / contain;
  mask: var(--mark) no-repeat center / contain;
}

/* ---------- date stamp ---------- */
/* The one date on the page that has to be readable from across a room. It
   takes the band's own ink rather than
   --accent, because --accent is only guaranteed against --accent-ink and not
   against every band: Regatta's coral on its signal blue measures 2.04:1.
   Size and weight carry the emphasis instead, which works in every theme.

   Case follows --display-transform for the same reason h1 does. --figure may
   be an uppercase-only face (Aventura, in Boneyard), and unlike .figure this
   element contains letters, so lowercase here would silently fall back to
   Archivo mid-word. */
.datestamp {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
  font-family: var(--figure, var(--data));
  font-weight: 700;
  font-variation-settings: "wdth" var(--display-wdth);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--display-track);
  word-spacing: var(--display-word, normal);
  text-transform: var(--display-transform);
  line-height: var(--leading-display);
  text-wrap: balance;
}
.datestamp-day  { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.3rem); }
/* .85, not the .72 used elsewhere for quiet text: at the small end this line
   is 16.8px, just under the 18.66px that would let the 3:1 large-text
   threshold apply, so it has to clear 4.5:1 on its own. Against Regatta's
   band-1 — the tightest of the four — .72 measures 4.14:1 and .85 measures
   5.18:1. */
.datestamp-time { font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem); line-height: var(--leading-meta); margin-top: .35rem; opacity: .85; }
.datestamp-location { font-size: clamp(.9rem, .85rem + .35vw, 1.05rem); line-height: var(--leading-meta); margin-top: .2rem; opacity: .85; }

/* ---------- layout helpers ---------- */
.split { display: grid; gap: var(--space-layout); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 920px) { .split { grid-template-columns: 1.15fr .85fr; } }

.grid-2 { display: grid; gap: var(--space-card); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--space-card); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 920px) {
  .band-1 > .wrap.split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

/* ---------- cards ---------- */
.card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.card-dark { background: var(--ink); color: var(--paper); }

/* Display numerals take whatever face the theme nominates. The scoreboard
   deliberately does not — see .row .pts. Ranked figures update live, and a
   proportional face makes the digits jitter as the numbers change. */
.figure {
  font-family: var(--figure, var(--data));
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.unit { font-size: .32em; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

/* ---------- scoreboard ---------- */
/* Capped rather than full-width: on a laptop the container is wide enough to
   strand the score a hand's width from the team name, which is the one thing
   a person glancing over from a bar table needs to read together. */
.board {
  display: flex; flex-direction: column; gap: .5rem;
  width: 100%; max-width: 720px;
  margin: 0; padding: 0;
  list-style: none;
}

.row {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: center;
  gap: .85rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
}
.row .rank {
  font-family: var(--data);
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}
.row .team { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.row .who  { min-width: 0; }
.row .name {
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row .riders {
  font-size: .85rem; opacity: .6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row .pts {
  font-family: var(--data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
}
/* No separate "leader" treatment. An accent ring drawn on the band measures
   1.88:1 against it in Regatta and 1.25:1 in Chart — an emphasis nobody can
   see. The list is rank-ordered and the rank is printed, so the leader is
   already unambiguous without decoration that only works in one theme. */

.chip { width: .9rem; height: .9rem; border-radius: 3px; flex: none; }

.pulse {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--data);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor;
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* A failed poll never shows zeros — it says so and keeps the last good board. */
.board-status[hidden] { display: none; }
.board-empty { font-family: var(--data); font-size: .95rem; opacity: .8; }

/* ---------- map ---------- */
.map-frame {
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(.8rem, 2vw, 1.3rem);
  overflow: hidden;
}
/* The two map paths share a box so swapping one for the other does not move
   the page: the Toner canvas when a key is configured, the OpenStreetMap
   iframe when it is not. */
.map-frame iframe,
.map-canvas {
  display: block;
  width: 100%;
  min-height: clamp(300px, 47vw, 520px);
  border: 0;
  border-radius: var(--radius-sm);
}

.map-canvas {
  mix-blend-mode: multiply;
}

/* Toner is black and white by design, so a pin has to bring its own color and
   its own edge. The venue color fills it, --paper rings it so it separates
   from whatever it lands on, and --ink outlines that ring so it still reads
   where the map goes white. */
/* Scoring-venue pins: larger again (Issue #29, second pass), with a thicker
   cream ring to separate the venue's own color from the dark basemap, an ink
   ring to keep that edge crisp at any venue color, and a soft outer cream
   halo so the pin reads before its color does. --pin now holds a theme band
   token (see map.js's deterministic palette), never an arbitrary hex value,
   so marker colors stay inside the site's own palette and stay stable across
   loads regardless of table order. */
.map-pin {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--pin, currentColor);
  border: 5px solid var(--paper);
  box-shadow:
    0 0 0 2.5px var(--ink),
    0 0 0 7px color-mix(in srgb, var(--paper) 55%, transparent),
    0 4px 10px color-mix(in srgb, var(--ink) 45%, transparent);
  cursor: pointer;
}

/* Operational start/finish: a distinct badge, not another colored dot, and roughly
   twice a scoring pin's diameter — it is the one start/finish landmark, not
   one of the seven scoring stops. An ink circle carries Mark's bone-bike
   mark in cream (--paper), masked exactly as the site's own logo token is
   (see .hero-mark above). */
.map-pin-rotary {
  display: block;
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 8px color-mix(in srgb, var(--paper) 45%, transparent),
    0 5px 14px color-mix(in srgb, var(--ink) 45%, transparent);
  cursor: pointer;
}
.map-pin-rotary::after {
  content: "";
  position: absolute;
  inset: 10%;
  background: var(--paper);
  -webkit-mask: url("/site/map/bone-bike-rotary.svg") no-repeat center / contain;
  mask: url("/site/map/bone-bike-rotary.svg") no-repeat center / contain;
}

/* Photo Op: a third marker category. Deep teal distinguishes these
   non-scoring POIs from venue colors, while a CSS-drawn camera keeps the
   icon crisp at small map sizes without an external dependency. */
.map-pin-photo {
  display: block;
  position: relative;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--photo-op, var(--ink));
  box-shadow:
    0 0 0 2.5px var(--paper),
    0 0 0 6px color-mix(in srgb, var(--paper) 50%, transparent),
    0 3px 9px color-mix(in srgb, var(--ink) 45%, transparent);
  cursor: pointer;
}
.map-pin-photo::before {
  content: "";
  position: absolute;
  inset: 24% 18% 22%;
  background: var(--paper);
  clip-path: polygon(0 22%, 22% 22%, 31% 0, 69% 0, 78% 22%, 100% 22%, 100% 100%, 0 100%);
  border-radius: 12%;
}
.map-pin-photo::after {
  content: "";
  position: absolute;
  width: 31%;
  aspect-ratio: 1;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--photo-op, var(--ink));
  box-shadow: 0 0 0 2px var(--paper);
}

/* MapLibre's popup and controls default to their own white-on-gray. Pull them
   onto the theme's surfaces so the map does not look bolted on. */
.maplibregl-popup-content {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: .5rem .8rem;
  font-family: var(--body);
  font-size: .85rem;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 30%, transparent);
}

/* Popup line 1: venue/town, matches the content's prior default weight.
   Line 2: the existing challenge/order copy, visibly secondary — italic,
   lighter weight, slightly muted — never raw HTML from the database. */
.map-popup-title { display: block; font-weight: 600; }
.map-popup-challenge {
  display: block;
  margin-top: .2rem;
  font-style: italic;
  font-weight: 500;
  opacity: .75;
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--paper); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--paper); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--paper); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--paper); }

.maplibregl-ctrl-group {
  background: var(--paper);
  border-radius: var(--radius-sm);
}
.maplibregl-ctrl-group button + button { border-top-color: color-mix(in srgb, var(--ink) 20%, transparent); }
.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  font-family: var(--data);
  font-size: .7rem;
}
.maplibregl-ctrl-attrib a { color: var(--ink); }

.maptiler-logo {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: block;
  width: 67px;
  height: 20px;
  line-height: 0;
}
.maptiler-logo img { display: block; width: 67px; height: 20px; }

.map-fallback { margin-top: .8rem; }

.venue-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.vchip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--pill);
  padding: .45rem .9rem;
  font-size: .85rem;
  font-weight: 600;
}
.vchip .chip { width: .6rem; height: .6rem; border-radius: 50%; }

/* Legend treatment for the operational start/finish: the bone-bike glyph, not a color dot —
   a color chip here would misleadingly imply it scores like the other
   seven venues. Same mask technique as .map-pin-rotary and .hero-mark. */
.vchip .chip-rotary {
  position: relative;
  background: var(--ink);
}
.vchip .chip-rotary::after {
  content: "";
  position: absolute;
  inset: 8%;
  background: var(--paper);
  -webkit-mask: url("/site/map/bone-bike-rotary.svg") no-repeat center / contain;
  mask: url("/site/map/bone-bike-rotary.svg") no-repeat center / contain;
}

/* Legend glyph for Photo Ops: same teal camera treatment as the map marker. */
.vchip .chip-photo {
  position: relative;
  background: var(--photo-op, var(--ink));
}
.vchip .chip-photo::before {
  content: "";
  position: absolute;
  inset: 22% 16% 20%;
  background: var(--paper);
  clip-path: polygon(0 24%, 22% 24%, 31% 0, 69% 0, 78% 24%, 100% 24%, 100% 100%, 0 100%);
  border-radius: 10%;
}
.vchip .chip-photo::after {
  content: "";
  position: absolute;
  width: 31%;
  aspect-ratio: 1;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--photo-op, var(--ink));
  box-shadow: 0 0 0 1px var(--paper);
}

.tag {
  display: inline-block;
  font-family: var(--data);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--pill);
  padding: .2rem .55rem;
  opacity: .7;
}

/* ---------- shirt ---------- */
.shirt-shot { margin: 0; display: grid; gap: .7rem; }
.shirt-shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}

.size-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.size {
  font-family: var(--data);
  font-size: .85rem;
  font-weight: 600;
  border: 2px solid currentColor;
  border-radius: var(--radius-sm);
  padding: .35rem .7rem;
}

/* ---------- charity ---------- */
.meter {
  height: .6rem;
  border-radius: var(--pill);
  background: color-mix(in srgb, currentColor 22%, transparent);
  overflow: hidden;
}
.meter > span { display: block; height: 100%; background: var(--accent); }

/* ---------- footer ---------- */
/* Packed left rather than laid on a fixed grid: the column count varies —
   the race-day column only exists on race day — and a fixed track count
   leaves a dead cell on every other day. */
.foot-cols {
  display: flex; flex-wrap: wrap;
  gap: 1.6rem 3.2rem;
  font-size: .85rem;
}
.foot-cols > div { min-width: 9rem; }
.foot-cols h2 {
  font-family: var(--data);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 .6rem;
  opacity: .6;
}
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.foot-cols a { text-decoration: none; opacity: .85; }
.foot-cols a:hover { opacity: 1; text-decoration: underline; }

.foot-mark {
  font-family: var(--display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth);
  letter-spacing: var(--display-track);
  font-size: clamp(3rem, 13vw, 9rem);
  line-height: .85;
  text-transform: uppercase;
  opacity: .16;
  margin: 0;
}

/* Official qualifying lists in the scoring section: one row per venue or
   Photo Op, with the item beside it on wider screens. */
.official-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.official-list li {
  display: grid; gap: .1rem; padding: .6rem 0 .5rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.official-list .ol-venue { font-weight: 600; }
.official-list .ol-item  { font-family: var(--body); opacity: .9; }
@media (min-width: 640px) {
  .official-list li { grid-template-columns: 1fr 1fr; align-items: baseline; gap: 1rem; }
}

/* Notes on the two coral bands render at full strength. At the default
   .note opacity (.72) their text measures 3.2–3.4:1, below 4.5:1; at 1.0
   it measures 4.78–4.80:1. See the 2026 shirt block in theme.css. */
.band-2 .note, .band-5 .note { opacity: 1; }

/* Explanatory sentences: body typography, not the quiet mono note.
   Full opacity keeps the text at the band's own contrast on every band. */
.prose {
  font-family: var(--body);
  font-size: clamp(1.02rem, .98rem + .2vw, 1.15rem);
  line-height: var(--leading-body);
  max-width: 62ch;
}

/* Scoring strip: sits directly on the indigo hero band, no card. Values are
   centred on one top line in gold; labels are uppercase cream beneath them.
   Coral dividers separate the four columns. Colours come from the theme. */
.score-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  color: var(--on-1);
}
.score-strip > div {
  min-width: 0;
  padding: .25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.score-strip > div + div { border-left: 3px solid var(--band-2); }
.score-value {
  display: block;
  font-family: var(--figure);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 4.6rem);
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}
.score-label {
  display: block;
  margin-top: .7rem;
  font-family: var(--body);
  font-size: clamp(.84rem, .8rem + .25vw, 1rem);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.35;
  text-transform: uppercase;
}
.score-band { margin-top: 2.25rem; }
.score-strip + .prose { margin-top: 1.75rem; max-width: 60ch; }

@media (max-width: 600px) {
  .lede { line-height: 1.34; }
  .score-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-strip > div { padding: .9rem .5rem; }
  .score-strip > div:nth-child(3) { border-left: 0; }
  .score-strip > div:nth-child(n+3) { border-top: 3px solid var(--band-2); }
  .score-value { font-size: 2.8rem; }
}