/* ═══════════════════════════════════════════════════════════════════
   theme: baseball
   Broadcast pitch-tracking, not scorebook nostalgia. The subject is a
   measurement problem, so the page borrows from the graphics that show
   the measurement: deep navy panel, a chalk-white strike zone, tabular
   figures, and a red-to-blue scale standing in for velocity.

   Cool navy keeps it distinct from the other dark themes here, which are
   warm amber and indigo.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@300;400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  --navy:   #0D1626;
  --panel:  #142033;
  --slab:   #1D2C44;
  --line:   #2A3D58;
  --line-2: #1B2A40;
  --text:   #EAF0F7;
  --text-2: #9DAFC4;
  /* These three are set against the ground as it actually measures, with the
     diagram layer behind the page and the theme's own blue watermark on top
     of the navy, not against bare navy. --text-3 was already under AA before
     any of that went in, at 4.41:1. --hot is a shade down so white clears
     4.5:1 on the bench chip; --cold a shade up so links clear it on the
     page, which in turn is why the running chip sets navy text rather than
     white: on a lighter blue, white only reaches 3.1:1. */
  --text-3: #7E96B4;   /* 4.75:1 on the measured ground */
  --chalk:  #FFFFFF;
  --hot:    #DC3247;   /* high velocity; white on it 4.57:1 */
  --cold:   #3695FF;   /* breaking; 4.74:1 as link text */
  --pad: clamp(1.2rem, 5vw, 3rem);
  --max: 60rem;
  --cond: "Barlow Condensed", "Helvetica Neue", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
}

body {
  background: var(--navy);
  color: var(--text);
  font: 300 clamp(1.02rem, .35vw + .95rem, 1.1rem)/1.68 var(--body);
  font-variant-numeric: tabular-nums;
  /* the zone, faint, as a watermark behind the top of the page */
  background-image:
    linear-gradient(180deg, rgba(46,127,232,.07), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 84px);
  background-repeat: no-repeat, repeat, repeat;
}

/* ── the physics diagrams ───────────────────────────────────────────
   Generated by assets/_blueprintgen.py; regenerate from there rather than
   editing the SVG. White paint marker in the manner of a MythBusters build
   drawing: numbered callouts, wavy leaders, dimension arrows, hatched
   sections, and the project name in capitals down in the corner.

   Marker only, no stock. The blueprint blue is deliberately absent, so these
   are faded white lines on the page's own navy rather than a blue sheet laid
   under it. The frame line and corner registration marks went with the
   paper: they only read as a sheet when there is a sheet.

   The mask keeps the drawing out of the reading column. Stops are in rem
   because the column is a fixed 60rem centred, and percentage stops only
   line up at one window width. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/assets/blueprint.svg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: min(1800px, 150%) auto;
  opacity: .42;
  mask-image: var(--sheet-mask);
  -webkit-mask-image: var(--sheet-mask);
}
:root {
  --sheet-mask: linear-gradient(90deg,
    #000 0,
    #000 calc(50% - 34rem),
    rgba(0,0,0,.09) calc(50% - 30.5rem),
    rgba(0,0,0,.09) calc(50% + 30.5rem),
    #000 calc(50% + 34rem),
    #000 100%);
}
/* lift the page off the sheet, or the fixed layer paints over the text */
.band, .pr, .pr__foot { position: relative; z-index: 1; }

a { color: var(--cold); }
::selection { background: rgba(228,52,74,.3); }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }

/* band: a broadcast lower-third */
.band {
  background: linear-gradient(90deg, var(--slab), var(--panel));
  border-bottom: 2px solid var(--hot);
  font: 500 .8rem/1 var(--mono); letter-spacing: .04em;
}
.band a { color: var(--text-2); text-decoration: none; }
.band a:hover { color: var(--chalk); }
.band__home {
  font: 700 1.05rem/1 var(--cond) !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--chalk) !important;
}

/* head */
.pr__name {
  font: 700 clamp(2.2rem, 6vw, 3.6rem)/1.02 var(--cond);
  letter-spacing: .01em; text-transform: uppercase; color: var(--chalk);
}
.pr__sum { color: var(--text-2); font-size: 1.04em; }
.pr__meta { border-top: 1px solid var(--line); font: 400 .82rem/1 var(--mono); }
.pr__fields { color: var(--text-3); }
.pr__links a { font: 500 .8rem/1 var(--mono); text-decoration: none; }

.pr > section { border-top: 1px solid var(--line-2); }
/* section marker: a 3x3 strike zone, drawn in the heading */
.pr > section > h2 {
  display: flex; align-items: center; gap: .8rem;
  font: 600 .9rem/1 var(--cond); letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-2);
}
.pr > section > h2::before {
  content: ""; width: 15px; height: 19px; flex: none;
  border: 1px solid var(--chalk);
  background:
    linear-gradient(90deg, transparent 4px, var(--chalk) 4px 5px, transparent 5px 9px, var(--chalk) 9px 10px, transparent 10px),
    linear-gradient(0deg,  transparent 5px, var(--chalk) 5px 6px, transparent 6px 12px, var(--chalk) 12px 13px, transparent 13px);
  opacity: .55;
}

/* status: a scoreboard chip */
.st {
  font: 600 .74rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .5rem; color: var(--navy); background: var(--text-3);
}
.st::before { display: none; }
.st--run { background: var(--cold); color: var(--navy); }   /* 5.78:1 */
.st--bench { background: var(--hot); color: var(--chalk); }
.st--dead { background: var(--slab); color: var(--text-3); }

/* figures: readouts, in the velocity scale */
.figs { gap: 1.4rem 2.4rem; }
.figs b { gap: .12rem; }
.figs b i {
  display: grid; place-items: center;
  min-width: 1.75rem; padding: .4rem .25rem;
  font: 500 1.5rem/1 var(--mono); color: var(--chalk);
  background: var(--panel); border-bottom: 3px solid var(--hot);
}
.figs b em {
  font-style: normal; align-self: flex-end;
  font: 500 1.5rem/1.6 var(--mono); color: var(--text-3);
}
.figs li span {
  font: 600 .74rem/1.5 var(--cond); letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3);
}

/* reference */
.pr__ref p, .pr__ref li { color: var(--text-2); }
.pr__ref h4 {
  font: 600 .82rem/1.4 var(--cond); letter-spacing: .18em;
  text-transform: uppercase; color: var(--chalk);
}
/* tables read as a stat line: numbers right, leaders emphasised */
.tbl table { font: 400 .95em/1.5 var(--mono); }
.tbl th {
  background: var(--slab); color: var(--text-2);
  font: 600 .74rem/1.4 var(--cond); letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 2px solid var(--hot);
}
.tbl td { border-bottom: 1px solid var(--line-2); color: var(--text-2); }
.tbl tbody tr:nth-child(odd) td { background: rgba(255,255,255,.018); }
.tbl tbody tr:hover td { background: rgba(46,127,232,.09); color: var(--text); }
.tbl td:first-child { color: var(--chalk); font-weight: 500; }

/* files */
.dl li { border-bottom: 1px solid var(--line-2); }
.dl a { text-decoration: none; }
.dl__label { font: 600 .86rem/1.4 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--cold); }
.dl__size { font: 400 .78rem/1 var(--mono); color: var(--text-3); }
.dl__desc { color: var(--text-3); font-size: .93em; }

/* log */
.ent { border-bottom: 1px solid var(--line-2); }
.ent__when time {
  display: inline-block; padding: .32rem .5rem;
  font: 500 .8rem/1.3 var(--mono); color: var(--chalk);
  background: var(--panel); border-left: 3px solid var(--hot);
}
.ent__body h3 {
  font: 700 clamp(1.3rem, 2.2vw, 1.66rem)/1.16 var(--cond);
  letter-spacing: .012em; text-transform: uppercase;
}
.ent__body h3 a { color: var(--chalk); }
.ent__body h3 a:hover { color: var(--cold); }
.ent__body p, .ent__body li { color: var(--text-2); }
.ent__body strong { color: var(--chalk); font-weight: 600; }
.ent__body h4 { font: 600 .8rem/1.4 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--chalk); }
.ent__body li::marker { color: var(--hot); }
code {
  font: 400 .92em/1.4 var(--mono); color: var(--cold);
  background: var(--panel); border: 1px solid var(--line); padding: .05em .35em;
}
pre { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--cold); }
pre code { border: 0; background: none; padding: 0; font-size: .86rem; }
.pr__empty { color: var(--text-3); font-style: italic; }

/* gallery: plots sit on the panel, sharply */
.gal img { background: var(--panel); border: 1px solid var(--line); }
.gal figcaption { font: 400 .84rem/1.5 var(--mono); color: var(--text-3); }

/* index */
.all { border-top: 1px solid var(--line); }
.all li { border-bottom: 1px solid var(--line-2); }
.all a { color: var(--text); }
.all a:hover { background: rgba(46,127,232,.07); }
.all__name { font: 600 1rem/1.3 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.all__fields, .all__notes, .all__when { font: 400 .8rem/1.5 var(--mono); color: var(--text-3); }

.pr__foot { border-top: 1px solid var(--line); font: 400 .82rem/1.6 var(--mono); color: var(--text-3); }
.pr__foot a { color: var(--text-2); }