/* ─────────────────────────────────────────────────────────────
   Splash Hits Counter
   The wall is rebuilt from primitives: a maroon panel in a copper
   frame, block lettering, and three seven-segment LED panels whose
   segments carry a dot-matrix texture.
   ───────────────────────────────────────────────────────────── */

:root {
  --brick-dark:   #1a1210;
  --brick:        #2a1c18;
  --maroon:       #5d1c1c;
  --maroon-lit:   #742626;
  --copper:       #b9793f;
  --copper-dim:   #8a5629;
  --chalk:        #f2ebe1;
  --ink:          #efe6da;
  --ink-soft:     #b9a894;
  --ink-faint:    #8a7867;
  --led:          #ff5116;
  --led-hot:      #ffa04a;
  --panel-black:  #080605;
  --rule:         rgba(242, 235, 225, .12);
  --card:         rgba(242, 235, 225, .04);

  --shell: min(1120px, 100% - 2.5rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #3a2620 0%, transparent 60%),
    var(--brick-dark);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

.page {
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vw, 5rem) 4rem;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5.5rem);
}

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

a { color: var(--copper); text-underline-offset: 3px; }
a:hover { color: var(--led-hot); }

/* ─────────── masthead ─────────── */

.masthead { max-width: 62ch; }

.kicker {
  margin: 0 0 .75rem;
  font-family: "Barlow Condensed", Archivo, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper);
}

.masthead h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.025em;
  color: var(--chalk);
}

.lede {
  margin: 0;
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 58ch;
}
.lede em { color: var(--ink); font-style: italic; }

/* ─────────── the wall ─────────── */

.wall-stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.wall {
  width: 100%;
  /* Digit size drives every other measurement on the wall. */
  --dw: clamp(38px, 7.4vw, 76px);
  --dh: calc(var(--dw) * 1.72);
  --t:  calc(var(--dw) * 0.19);
  --dot: max(2.5px, calc(var(--dw) * 0.072));
  --pad: calc(var(--dw) * 0.30);

  background:
    linear-gradient(180deg, var(--maroon-lit) 0%, var(--maroon) 42%, #4d1616 100%);
  border-radius: calc(var(--dw) * 0.07);
  padding: calc(var(--dw) * 0.13);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .5),
    0 26px 60px -22px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* the copper inner frame line */
.wall__frame {
  border: calc(var(--dw) * 0.052) solid var(--copper);
  border-radius: calc(var(--dw) * 0.04);
  padding: var(--pad) calc(var(--pad) * 1.1);
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2.4vw, 2rem);
  min-height: calc(var(--dh) + var(--pad) * 2);
}

/* SPLASH / HITS block lettering */
.wall__legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .88;
  flex: 0 0 auto;
}

.wall__word {
  font-family: Archivo, "Arial Black", sans-serif;
  font-weight: 800;
  color: var(--chalk);
  text-transform: uppercase;
  letter-spacing: .015em;
  /* the real letters are painted panels catching a little sun */
  text-shadow:
    0 calc(var(--dw) * .022) 0 rgba(0, 0, 0, .45),
    0 calc(var(--dw) * .05) calc(var(--dw) * .07) rgba(0, 0, 0, .35);
  transform: scaleX(1.04);
}
.wall__word--top    { font-size: calc(var(--dw) * 0.72); }
.wall__word--bottom { font-size: calc(var(--dw) * 0.72); letter-spacing: .16em; }

.wall__digits {
  display: flex;
  gap: calc(var(--dw) * 0.11);
  margin-inline-start: auto;
}

/* each digit sits in its own black window, as on the board */
.panel {
  background: var(--panel-black);
  padding: calc(var(--dw) * 0.17) calc(var(--dw) * 0.19);
  border-radius: calc(var(--dw) * 0.03);
  box-shadow: inset 0 0 calc(var(--dw) * .3) rgba(0, 0, 0, .95);
}

.digit {
  position: relative;
  width: var(--dw);
  height: var(--dh);
}

/* ── seven segments ── */
.seg {
  position: absolute;
  display: block;
  /* the LED grid: lit segments show as a field of round diodes */
  background-image: radial-gradient(circle at center,
                    currentColor 0 36%, transparent 38%);
  background-size: var(--dot) var(--dot);
  color: rgba(255, 116, 60, .038);  /* unlit diode: present, but only just */
  transition: color .45s ease, filter .45s ease;
}

/* The bloom is what makes this read as lit rather than printed, and it used
   to scale straight off the digit size, so it faded out on a small board:
   the same wall glowed 3.8px on a desktop page, 2.8px in an embed and 1.9px
   on a phone, and looked progressively duller for it. A glow is an absolute
   amount of spilled light, not a proportion of the thing spilling it, so it
   gets a floor. Large boards are unchanged; small ones catch up. */
.seg.is-lit {
  color: var(--led);
  filter:
    drop-shadow(0 0 max(3.6px, calc(var(--dot) * .7)) rgba(255, 81, 22, .85))
    drop-shadow(0 0 max(10px, calc(var(--dot) * 2)) rgba(255, 81, 22, .35));
}

/* horizontal: a (top), g (middle), d (bottom) */
.seg--a, .seg--g, .seg--d {
  left: 0; width: 100%; height: var(--t);
  clip-path: polygon(
    calc(var(--t) * .5) 0, calc(100% - var(--t) * .5) 0,
    100% 50%,
    calc(100% - var(--t) * .5) 100%, calc(var(--t) * .5) 100%,
    0 50%);
}
.seg--a { top: 0; }
.seg--g { top: calc(50% - var(--t) * .5); }
.seg--d { bottom: 0; }

/* vertical: f/b (upper), e/c (lower) */
.seg--f, .seg--b, .seg--e, .seg--c {
  width: var(--t); height: calc(50% - var(--t) * .16);
  clip-path: polygon(
    0 calc(var(--t) * .5), 50% 0, 100% calc(var(--t) * .5),
    100% calc(100% - var(--t) * .5), 50% 100%, 0 calc(100% - var(--t) * .5));
}
.seg--f { top: 0; left: 0; }
.seg--b { top: 0; right: 0; }
.seg--e { bottom: 0; left: 0; }
.seg--c { bottom: 0; right: 0; }

.wall__divider {
  width: calc(var(--dw) * 0.045);
  align-self: stretch;
  background: var(--copper);
  margin-inline: calc(var(--dw) * 0.1);
  flex: 0 0 auto;
}

/* the panel that carries a sponsor on the real wall */
.wall__mark {
  flex: 0 0 auto;
  align-self: stretch;
  width: calc(var(--dw) * 0.62);
  display: grid;
  place-items: center;
}

/* Rotated rather than writing-mode: vertical text ignores word-spacing in
   Chrome under text-orientation: mixed, and this keeps the two words apart. */
.wall__mark span {
  transform: rotate(90deg);
  white-space: nowrap;
  text-align: center;
  line-height: 1.18;
  font-family: "Barlow Condensed", Archivo, sans-serif;
  font-weight: 700;
  font-size: calc(var(--dw) * 0.235);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chalk);
  opacity: .92;
}

.wall__caption {
  margin: 0;
  font-size: .88rem;
  color: var(--ink-faint);
  text-align: center;
}
.wall__caption time { color: var(--ink-soft); }

/* ─────────── headline figures ─────────── */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}

.figure {
  background: var(--brick);
  padding: 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.figure__num {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--chalk);
  line-height: 1.1;
}

.figure__label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ─────────── latest ─────────── */

.latest {
  border-inline-start: 3px solid var(--led);
  padding: .3rem 0 .3rem 1.4rem;
}

.latest__eyebrow {
  margin: 0 0 .4rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
}

.latest__line {
  margin: 0;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink);
}
.latest__line strong { color: var(--chalk); font-weight: 700; }

/* ─────────── generic block ─────────── */

.block > h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--chalk);
}

.block__note {
  margin: 1.1rem 0 0;
  font-size: .92rem;
  color: var(--ink-faint);
}

/* ─────────── leaderboard ─────────── */

.leaders { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }

.leader {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr 2.5rem;
  align-items: center;
  gap: .9rem;
}

.leader__name { font-weight: 600; font-size: .97rem; }

.leader__bar {
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--led) 0%, #d63c0d 100%);
  width: var(--pct);
  min-width: 6px;
  box-shadow: 0 0 14px -3px rgba(255, 81, 22, .7);
}

.leader__n {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  color: var(--ink-soft);
}

/* ─────────── seasons ─────────── */

.seasons {
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, .7vw, 7px);
  height: 190px;
  padding-top: 1.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.season {
  flex: 1 1 0;
  min-width: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: .45rem;
}

.season__bar {
  width: 100%;
  height: var(--h);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--led) 0%, #96280a 100%);
  position: relative;
}

.season.is-empty .season__bar {
  background: var(--rule);
  min-height: 2px;
}

.season__n {
  position: absolute;
  top: -1.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.season.is-empty .season__n { color: var(--ink-faint); opacity: .5; }

.season__year {
  font-size: .68rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ─────────── log ─────────── */

.log__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.log__head h2 { margin: 0; }

.log__tools { display: flex; gap: .6rem; flex-wrap: wrap; }

.search input,
.sort {
  font: inherit;
  font-size: .93rem;
  padding: .55rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
}
.search input { min-width: min(19rem, 60vw); }
.search input::placeholder { color: var(--ink-faint); }
.search input:focus-visible,
.sort:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

.sort { cursor: pointer; font-weight: 600; white-space: nowrap; }
.sort:hover { border-color: var(--copper-dim); color: var(--chalk); }

.log__count {
  margin: 0 0 .9rem;
  font-size: .85rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
       background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }

.hit {
  background: var(--brick);
  display: grid;
  grid-template-columns: 3.3rem 1fr auto;
  gap: .9rem;
  padding: .85rem 1.1rem;
  align-items: baseline;
}
.hit[hidden] { display: none; }

.hit__no {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--led);
  font-size: 1.02rem;
}

.hit__body { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }

.hit__player { font-weight: 700; color: var(--chalk); font-size: 1rem; }

.hit__nth {
  font-style: normal;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-inline-start: .35rem;
}

.hit__meta { font-size: .88rem; color: var(--ink-soft); }

.hit__note {
  font-size: .84rem;
  color: var(--copper);
  font-style: italic;
}

.log__none { color: var(--ink-faint); padding: 1.4rem 0; }

/* ─────────── footer ─────────── */

.foot {
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
  font-size: .89rem;
  color: var(--ink-faint);
  display: grid;
  gap: .7rem;
}
.foot p { margin: 0; max-width: 68ch; }
.foot strong { color: var(--ink-soft); font-weight: 600; }
.foot__fine { font-size: .82rem; opacity: .8; }

/* ─────────── responsive ─────────── */

@media (max-width: 720px) {
  .wall__frame { gap: .6rem; padding-inline: calc(var(--pad) * .7); }
  .wall__mark { font-size: calc(var(--dw) * 0.26); }
  .leader { grid-template-columns: minmax(7rem, 9rem) 1fr 2rem; gap: .6rem; }
  .season__n { display: none; }
}

@media (max-width: 460px) {
  /* the sponsor panel is the first thing a real board would lose */
  .wall__divider, .wall__mark { display: none; }
  .hit { grid-template-columns: 2.4rem 1fr auto; padding-inline: .8rem; gap: .6rem; }
  .player__start--sm { padding: .35rem .55rem; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ─────────── video ─────────── */

/* Nothing is requested from YouTube until the button is pressed; until then
   this is just a button, so the page costs the viewer no third-party traffic. */

.player { margin-top: .9rem; }
.player--inline { margin: 0; grid-column: 3; align-self: center; }

.player__start {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  padding: .55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.player__start:hover {
  border-color: var(--led);
  color: var(--chalk);
  background: rgba(255, 81, 22, .1);
}
.player__start:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

.player__start--sm { padding: .4rem .7rem; font-size: .82rem; }

.player__icon {
  color: var(--led);
  font-size: .78em;
  line-height: 1;
  transform: translateY(.5px);
}

.player__frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #000;
}
.player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The clip drops onto its own row beneath the hit, so the button that opened
   it does not move: it stays put and becomes the way to close it again. */
.hit > .player__frame {
  grid-column: 1 / -1;
  margin-top: .75rem;
}

.player__start.is-open {
  border-color: var(--led);
  background: rgba(255, 81, 22, .14);
  color: var(--chalk);
}
.player__start.is-open .player__icon { color: var(--led-hot); }

.toggle[data-on="1"] {
  border-color: var(--led);
  background: rgba(255, 81, 22, .14);
  color: var(--chalk);
}

/* marks a clip that is a cue into a longer reel rather than its own video */
.hit__reel {
  font-style: normal;
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-inline-start: .4rem;
}

/* a clip that lives somewhere with no embed, so it opens in a new tab */
.player__out { text-decoration: none; }
.player__out:hover { color: var(--chalk); }

/* the counter is only as current as the last successful refresh */
.wall__caption.is-stale { color: var(--led-hot); }
.wall__caption.is-stale strong { color: var(--chalk); font-weight: 700; }

/* ─────────── embed offer ─────────── */

.foot__embed {
  font: inherit;
  color: var(--copper);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot__embed:hover { color: var(--led-hot); }
.foot__embed:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

.sheet {
  width: min(38rem, calc(100% - 2rem));
  padding: 1.6rem 1.7rem 1.8rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--brick);
  color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
}
.sheet::backdrop { background: rgba(10, 7, 6, .72); }

.sheet h2 {
  margin: 0 0 .6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--chalk);
}

.sheet__lead { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: .95rem; }

.sheet__close-form { float: right; margin: -.4rem -.4rem 0 0; }
.sheet__close {
  font: inherit;
  background: none;
  border: 0;
  color: var(--ink-faint);
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: 6px;
}
.sheet__close:hover { color: var(--chalk); }

.sheet__code {
  margin: 0 0 .7rem;
  padding: .8rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: rgba(0, 0, 0, .35);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.sheet__copy {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: .45rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.sheet__copy:hover { border-color: var(--copper-dim); color: var(--chalk); }
.sheet__copy.is-done { border-color: var(--led); color: var(--chalk); }

.sheet__more { margin: 1.4rem 0 0; }
.sheet__more summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: .9rem;
  margin-bottom: .8rem;
}
.sheet__more summary:hover { color: var(--chalk); }
.sheet__more p { font-size: .88rem; color: var(--ink-soft); margin: 0 0 .6rem; }

.sheet__fine {
  margin: 1.4rem 0 0;
  font-size: .82rem;
  color: var(--ink-faint);
  line-height: 1.55;
}

/* ─────────── the visitors' list ─────────── */

/* The same board, lit copper instead of the board's own orange, and a size
   down. It is not the counter at the park and it must not read as one; the
   board is the only thing on that page that could be mistaken for it, so
   the board is the only thing that changes. */
.wall-stage--aside .wall {
  --dw: clamp(30px, 5.6vw, 58px);
}

/* Amber, not the board's red-orange. Copper was the first choice and it was
   wrong: through the dot-matrix mask it is so close to the unlit diode that
   the board reads as switched off, which is no way to show a number. This
   is plainly a different light and still plainly on. */
.wall-stage--aside .seg.is-lit {
  color: #f0a83c;
  filter:
    drop-shadow(0 0 max(3.6px, calc(var(--dot) * .7)) rgba(240, 168, 60, .8))
    drop-shadow(0 0 max(10px, calc(var(--dot) * 2)) rgba(240, 168, 60, .3));
}

/* Bars for the pitchers who gave them up, so the two tallies beside each
   other are never read as one list. */
.leader__bar--cool {
  background: linear-gradient(90deg, var(--copper) 0%, #6f4420 100%);
  box-shadow: 0 0 14px -3px rgba(185, 121, 63, .55);
}

.pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.5rem, 2vw, 2.2rem);
}

@media (min-width: 880px) {
  .pair { grid-template-columns: 1fr 1fr; }
}

/* The grid lives on each row, not on the list. Side by side there is about
   half the width for the same names, so the name column gives way first and
   is allowed to shrink below its content. */
.pair .leader {
  grid-template-columns: minmax(0, 9rem) 1fr 1.9rem;
  gap: .6rem;
}

.pair .leader__name {
  min-width: 0;
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.backlink {
  color: var(--copper);
  font-weight: 700;
  text-decoration: none;
}

.backlink:hover { text-decoration: underline; }

/* ─────────── what was measured ─────────── */

.hit__measured {
  display: block;
  margin-top: .2rem;
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--ink-faint);
}

.hit__measured b {
  color: var(--copper);
  font-weight: 700;
}

.block__sub {
  margin: 0 0 .8rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--copper);
}

.block__note--wide { max-width: 68ch; }

/* Every measured distance on one scale. The cluster is the argument: they
   are ordinary fly balls that happened to leave in the right direction. */
.strip {
  margin: 0 0 2rem;
  padding: 1.2rem 0 .4rem;
}

.strip__axis {
  position: relative;
  height: 1.2rem;
  border-bottom: 1px solid var(--rule, #3a2b25);
}

.strip__tick {
  position: absolute;
  left: var(--x);
  transform: translateX(-50%);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.strip__dots {
  position: relative;
  height: 34px;
}

.strip__dot {
  position: absolute;
  left: var(--x);
  top: 8px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--led);
  opacity: .72;
  box-shadow: 0 0 8px -1px rgba(255, 81, 22, .8);
}

/* The chart column and the bars column, side by side once there is room.
   The chart is the shorter of the two, so it sits at the top of its column
   rather than being stretched to match. */
.measure {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}

@media (min-width: 880px) {
  .measure { grid-template-columns: minmax(0, 420px) 1fr; }
}

.spray {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 0 .7rem;
}

.measure__bars .block__sub { margin-top: 0; }
.measure__bars .block__sub + .block__note { margin-top: -.3rem; }
.measure__bars .leaders + .block__sub { margin-top: 1.8rem; }

.strip__caption {
  margin: .2rem 0 0;
  font-size: .82rem;
  color: var(--ink-faint);
}

.strip__caption strong { color: var(--ink-soft); }

/* The measurement notes live in a dialog, so the section stays a chart and
   two lists rather than a wall of caveats. */
.sheet__list {
  margin: 0 0 1.2rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .55rem 1.1rem;
}

.sheet__list dt {
  font-family: "Barlow Condensed", Archivo, sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper);
  white-space: nowrap;
}

.sheet__list dd {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.leaders--tight { margin-bottom: 1.4rem; }
.leaders--tight .leader { grid-template-columns: minmax(0, 8.5rem) 1fr 1.8rem; gap: .6rem; }
.leaders--tight .leader__name { font-size: .86rem; }

/* ─────────── hover detail ─────────── */

.tip {
  /* Fixed rather than absolute: it is positioned from viewport coordinates,
     and it moves between the page and the top layer depending on which of
     them the mark it describes is in. */
  position: fixed;
  z-index: 60;
  max-width: 17rem;
  padding: .5rem .7rem;
  border: 1px solid var(--copper-dim);
  border-radius: 5px;
  background: #140e0c;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .9);
  font-size: .8rem;
  line-height: 1.45;
  pointer-events: none;
}

.tip strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
}

.tip span { color: var(--ink-faint); }

/* The marks are small, so they are given a target larger than they look. */
.strip__dot {
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}

.strip__dot::after {
  content: "";
  position: absolute;
  inset: -7px;
}

.strip__dot:hover {
  transform: scale(1.5);
  opacity: 1;
}

.spray circle[data-no] {
  cursor: pointer;
  transition: r .12s ease;
}

.spray circle[data-no]:hover { r: 5.5; }

/* ─────────── act breaks ─────────── */

/* Six sections in a row all looked the same, so the page read as one long
   scroll with no shape. It has three parts: the number, what is behind it,
   and the record itself. These say so, in the signage the board is drawn in. */
/* One element, not two. The page is a flex column with a large gap, so a
   divider and its line of text sitting side by side as separate children
   each collected that whole gap and the break floated in the middle of an
   empty field. */
.act {
  margin: 0 0 calc(-1 * clamp(1.4rem, 3.4vw, 2.6rem));
}

.act__rules {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.act__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper-dim) 45%, var(--copper-dim) 55%, transparent);
}

.act__label {
  flex: 0 0 auto;
  font-family: "Barlow Condensed", Archivo, sans-serif;
  font-size: clamp(.82rem, 1.6vw, .95rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--copper);
  white-space: nowrap;
}

.act__blurb {
  margin: .9rem auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* A break belongs to what comes after it, so it sits closer to that than to
   what it just ended. */

/* ─────────── jump bar ─────────── */

/* Scrolls with the page until it reaches the top, then stays. No script
   needed for that part; the script only marks where you are. */
/* Fixed to the window, and a sibling of the page rather than a child of it:
   a fixed element inside a flex column is out of flow by the standard, but
   it does not need to be in there to do its job and being outside removes
   the question. Longhand offsets rather than the inset shorthand for the
   same reason. */
.jump {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: none;
  display: flex;
  gap: clamp(.9rem, 3vw, 2rem);
  justify-content: center;
  /* No margin. It is fixed to the top of the window, and a margin on a fixed
     element still pushes it off its offsets: this one was left over from
     when the bar sat in the flow, and it held the bar a clamped 48px below
     the top of the window on a wide screen. */
  margin: 0;
  padding: .7rem 0;
  /* Solid, not translucent-and-blurred. Safari promotes an element with a
     backdrop-filter to its own compositing layer and has a long history of
     mispositioning fixed elements that get one. The blur was decoration and
     not worth the risk. */
  background: #140e0c;
  border-top: 1px solid rgba(185, 121, 63, .22);
  border-bottom: 1px solid rgba(185, 121, 63, .22);
  overflow-x: auto;
  scrollbar-width: none;
}

.jump.is-showing {
  /* translateY(0) rather than none: the same kind of value on both sides of
     the transition leaves the layer alone instead of tearing it down. */
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.jump::-webkit-scrollbar { display: none; }

.jump a {
  flex: 0 0 auto;
  font-family: "Barlow Condensed", Archivo, sans-serif;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.jump a:hover { color: var(--ink-soft); }

.jump a.is-here {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

/* Anchors must not land underneath the bar. */
#board, #behind, #record, #log { scroll-margin-top: 4.6rem; }

/* ─────────── the folded log ─────────── */

.log__more {
  display: block;
  width: 100%;
  margin-top: 1.4rem;
  padding: .85rem 1rem;
  border: 1px solid var(--copper-dim);
  border-radius: 4px;
  background: transparent;
  color: var(--copper);
  font-family: "Barlow Condensed", Archivo, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.log__more:hover {
  background: rgba(185, 121, 63, .12);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .jump { transition: none; }
}

/* ─────────── the chart, and the enlarged one ─────────── */

/* The small chart is a button. At that size the marks are a cluster; the
   detail is in the enlarged copy, so the whole thing is the target rather
   than each dot. */
.spray__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
  text-align: left;
}

.spray__hint {
  display: block;
  margin-top: .3rem;
  font-family: "Barlow Condensed", Archivo, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .15s ease;
}

.spray__zoom:hover .spray__hint,
.spray__zoom:focus-visible .spray__hint { color: var(--copper); }

.spray__zoom:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Vector, so the enlarged copy costs nothing and stays sharp at any size.
   The base sheet sets a width rather than a max-width, so this has to set
   one too or it is simply ignored. */
.sheet--wide {
  width: min(96vw, 1120px);
  max-width: none;
  max-height: 92vh;
  /* Both axes: on a phone the chart is deliberately wider than the screen,
     so the enlarged view is something to move around rather than a smaller
     copy of what was already there. */
  overflow: auto;
}

@media (max-width: 560px) {
  .sheet--wide { padding-inline: .9rem; }
}

.sheet__clone { margin: 0 0 1rem; }

.spray--big {
  display: block;
  width: 100%;
  max-width: none;
  /* Enlarging must actually enlarge. Bounded by the dialog alone, a narrow
     window produced a copy smaller than the chart it came from. */
  min-width: 560px;
  /* The viewBox keeps the shape, so capping the height letterboxes rather
     than distorts, and a short window cannot push the chart off the screen. */
  max-height: 66vh;
  height: auto;
  margin: 0;
}

/* Room to point at a mark once they are no longer a cluster. */
.spray--big circle[data-no] { cursor: pointer; }
.spray--big circle[data-no]:hover { r: 7; }

/* ─────────── how often ─────────── */

/* The fraction behind a rate, so a figure is never asked to be believed on
   its own. One for one is not a better hitter of splash hits than Bonds. */
.leader__of {
  display: block;
  margin-top: .05rem;
  font-size: .72rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

/* A row of figures inside a section has nothing after it to create space:
   the page is a flex column with a gap, but that only applies to its own
   children, and here the figures are nested a level deeper. Left alone the
   next heading sits on the border of the box above it. */
.block .figures + * {
  margin-top: clamp(1.7rem, 3.2vw, 2.7rem);
}