/* The blog: the blitz study post (/blog/blitz-study, 2026-10-15; at /study/blitz until 2026-10-17)
   and the index (/blog). Loads after review.css, which carries the
   tokens, top bar, buttons, badges and footer; this file is the article column and the charts.
   The charts are plain HTML: columns from 900px up, labelled rows below it. Columns share one
   baseline: every track is the same height and aligns from the top, so a label never lifts a bar. */

:root {
  --bar: #D9A592;
  --bar-dim: #DDD6CA;
  --seg-1: #B5543A;
  --seg-2: #5A554C;
  --seg-3: #B9B0A1;
  --seg-4: #E2DCD1;
  --on-seg: #FBFAF7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bar: #8C4F3E;
    --bar-dim: #3A372E;
    --seg-1: #D2795E;
    --seg-2: #C4BEB0;
    --seg-3: #6E685B;
    --seg-4: #3A372E;
    --on-seg: #14140F;
  }
}

/* Full width of the site column; text wraps with the window (no narrow measure, no balanced breaks). */
.article { margin: 0 auto; }
.article h1, .article h2 { text-wrap: wrap; }
.article .closing p { max-width: none; }
.study-hero { padding: 56px 0 8px; }
.study-hero .kicker { font-weight: 600; font-size: 14px; color: var(--clay); margin: 0 0 12px; }
.study-hero .lead { max-width: none; }

/* Three headline figures */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; }
.figure { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 18px 18px 16px; }
.figure b { display: block; font: 600 30px/1.1 var(--serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.figure b .to { color: var(--clay); }
.figure > span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

/* Where do you fit */
.fit { margin: 28px 0 0; background: var(--selected); border-radius: 14px; padding: 18px; }
.fit form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fit label { font-weight: 600; }
.fit .row { display: flex; gap: 8px; }
.fit input {
  width: 128px; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; font-variant-numeric: tabular-nums;
}
.fit .btn { padding: 11px 16px; }
.fit p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }
.fit p b { color: var(--ink); }
.fit .clear { font: inherit; font-size: 14.5px; background: none; border: 0; padding: 0; color: var(--clay); cursor: pointer; text-decoration: underline; }

/* Findings */
.finding { padding: 64px 0 0; }

.finding .prose p { color: var(--ink-2); margin: 0 0 14px; }
.finding .prose p b { color: var(--ink); font-weight: 600; }
.you { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--clay); background: var(--surface); border-radius: 0 10px 10px 0; font-size: 15px; color: var(--ink); }
.fine { font-size: 13.5px; color: var(--ink-3); margin: 10px 0 0; line-height: 1.5; }

/* Chart frame */
.chart { margin: 24px 0 0; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 18px 18px 14px; }
.chart .cap { font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.chart .sub { font-size: 13.5px; color: var(--ink-3); margin: 0 0 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--ink-2); margin: 0 0 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legend i.sq { border-radius: 2px; }
.src { font-size: 12px; color: var(--ink-3); text-align: right; margin: 10px 0 0; }

/* Columns (one per group) */
.ch {
  --h: 180px; display: grid; align-items: start; column-gap: 6px; padding-top: 22px;
  grid-template-columns: repeat(7, minmax(0, 1fr)) 8px repeat(4, minmax(0, 1fr));
}
.c { min-width: 0; }
.track { position: relative; height: var(--h); }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p) * 100%); background: var(--bar); border-radius: 4px 4px 1px 1px; }
.bar .v, .db .v {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 4px);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.l { display: block; font-size: 12px; line-height: 1.25; white-space: nowrap; color: var(--ink-3); text-align: center; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--hair); }
.l small { display: block; font-size: 11.5px; color: var(--clay); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.gap span { display: none; }
.groups { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 8px repeat(4, minmax(0, 1fr)); column-gap: 6px; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.groups span:first-child { grid-column: 1 / 8; text-align: center; }
.groups span:last-child { grid-column: 9 / 13; text-align: center; }

/* Two values per group (dumbbell) */
.db { position: absolute; left: 50%; width: 2px; margin-left: -1px; bottom: calc(var(--lo) * 100%); height: calc((var(--hi) - var(--lo)) * 100%); background: var(--hair); }
.db .v { bottom: calc(100% + 9px); }
.db .v.lo { bottom: auto; top: calc(100% + 9px); color: var(--ink-3); font-weight: 500; }
.pt { position: absolute; left: 50%; width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; }
.pt.a { bottom: calc(var(--a) * 100%); background: var(--surface); border: 2px solid var(--ink-3); }
.pt.b { bottom: calc(var(--b) * 100%); background: var(--clay); }
.ch.pair .track { margin-bottom: 18px; }
.vv { display: none; }

/* Stacked shares */
.stack { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 1px 1px; overflow: hidden; }
.sg { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; color: var(--on-seg); font-variant-numeric: tabular-nums; overflow: hidden; }
.sg.s1 { background: var(--seg-1); }
.sg.s2 { background: var(--seg-2); }
.sg.s3 { background: var(--seg-3); color: var(--ink); }
.sg.s4 { background: var(--seg-4); color: var(--ink-2); }
.ch.stacked .sg { height: calc(var(--p) * 100%); }

/* Aligned strips: one measure per strip, every value labelled, one shared axis (tactics, endgames) */
.strip { margin-top: 6px; }
.strip .t { font-weight: 600; font-size: 14px; margin: 12px 0 -4px; }
.strip-cols { --h: 64px; }
.strip-cols .l { display: none; }
.strip-cols .track { border-bottom: 1px solid var(--hair); }
.strip-axis { padding-top: 0; }
.sm-table { display: none; width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; margin: 6px 0 0; }
.sm-table th, .sm-table td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.sm-table th:first-child, .sm-table td:first-child { text-align: left; color: var(--ink-2); }
.sm-table th { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.sm-table tr.sep td { font-size: 12px; font-weight: 600; color: var(--ink-3); padding-top: 12px; }
.sm-table tr.me td { color: var(--clay); font-weight: 700; }

/* Your group, once chosen */
.has-me .bar { background: var(--bar-dim); }
.has-me .c.me .bar { background: var(--clay); }
.has-me .c.me .bar .v, .has-me .c.me .db .v { color: var(--ink); }
.c.me .l { color: var(--clay); font-weight: 600; border-top-color: var(--clay); }
.has-me .ch.stacked .c:not(.me) .stack, .has-me .ch.pair .c:not(.me) .track > * { opacity: .45; }

/* Method */
.method { padding: 72px 0 0; }
.method .prose p, .method li { color: var(--ink-2); font-size: 15.5px; }
.method ul { padding-left: 20px; margin: 0 0 14px; }
.method li { margin: 0 0 8px; }
.who { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 8px 0 18px; font-variant-numeric: tabular-nums; }
.who th, .who td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--hair); }
.who th:first-child, .who td:first-child { text-align: left; }
.who th { font-weight: 600; color: var(--ink-2); font-size: 13.5px; }

@media (max-width: 760px) {
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure b { font-size: 26px; }
  .finding { padding-top: 52px; }
  .chart { padding: 16px 14px 12px; margin-left: -4px; margin-right: -4px; }
}

/* Below 900px the range labels can't fit one per column, so each group becomes a labelled row. */
@media (max-width: 899px) {
  .ch { display: block; padding-top: 4px; }
  .ch .c { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 4px 0; }
  .ch .l { grid-column: 1; grid-row: 1; margin: 0; padding: 0; border: 0; text-align: left; font-size: 13px; color: var(--ink-2); }
  .ch .l small { display: block; margin: 1px 0 0; }
  .ch .track { grid-column: 2; grid-row: 1; height: 16px; margin-right: 52px; }
  .ch .bar { top: 0; bottom: 0; height: auto; width: calc(var(--p) * 100%); border-radius: 1px 4px 4px 1px; }
  .ch .bar .v { left: calc(100% + 6px); bottom: auto; top: 50%; transform: translateY(-50%); }
  .ch .gap { padding: 10px 0 2px; }
  .ch .gap span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .groups { display: none; }
  /* dumbbells: a horizontal track, both values in text on the right */
  .ch.pair .track { height: 16px; margin-bottom: 0; margin-right: 104px; }
  .db { left: calc(var(--lo) * 100%); width: calc((var(--hi) - var(--lo)) * 100%); bottom: auto; top: 50%; height: 2px; margin: -1px 0 0; }
  .db .v { display: none; }
  .pt { bottom: auto !important; top: 50%; margin: -6px 0 0 -6px; }
  .pt.a { left: calc(var(--a) * 100%); }
  .pt.b { left: calc(var(--b) * 100%); }
  .vv { display: block; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); font-size: 12px; white-space: nowrap; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .vv b { color: var(--clay); }
  /* stacked: a horizontal bar */
  .ch.stacked .track { height: 20px; margin-right: 0; }
  .stack { flex-direction: row; border-radius: 4px; }
  .ch.stacked .sg { height: auto; width: calc(var(--p) * 100%); }
  .strips { display: none; }
  .sm-table { display: table; }
}

/* Diverging rows around zero with a 95% range (tilt after losing streaks) */
.dv { margin-top: 6px; }
.dv-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); }
.dv-axis { border-top: 0; padding: 0 0 2px; }
.dv-l { font-size: 13.5px; color: var(--ink-2); }
.dv-s { display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: center; column-gap: 8px; height: 22px; }
.dv-track, .dv-ticks { position: relative; height: 22px; }
.dv-track::before { content: ""; position: absolute; left: var(--zero); top: -4px; bottom: -4px; width: 1px; background: var(--ink-3); }
.dv-bar { position: absolute; top: 5px; height: 12px; border-radius: 2px; }
.dv-s.a .dv-bar { background: var(--seg-3); }
.dv-s.b .dv-bar { background: var(--clay); }
.dv-ci { position: absolute; top: 10px; height: 2px; background: var(--ink-2); }
.dv-ci::before, .dv-ci::after { content: ""; position: absolute; top: -4px; width: 2px; height: 10px; background: var(--ink-2); }
.dv-ci::before { left: 0; }
.dv-ci::after { right: 0; }
.dv-v { font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.dv-ticks span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 560px) { .dv-row { grid-template-columns: 78px minmax(0, 1fr); } .dv-l { font-size: 12.5px; } }
.dv.wide .dv-row { grid-template-columns: 190px minmax(0, 1fr); }
@media (max-width: 560px) { .dv.wide .dv-row { grid-template-columns: 104px minmax(0, 1fr); } }

/* The blog index (/blog): one card per post */
.posts { display: grid; gap: 20px; margin: 28px 0 0; }
.post { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 16px; text-decoration: none; color: inherit; }
.post:hover { border-color: var(--clay); }
.post img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--hair); }
.post h2 { margin: 0 0 8px; }
.post p { margin: 0; color: var(--ink-2); }
.post .post-meta { font-size: 14px; font-weight: 600; color: var(--clay); margin: 0 0 8px; }
@media (max-width: 760px) { .post { grid-template-columns: minmax(0, 1fr); gap: 14px; } }