:root {
  --ink: #16130f;
  --muted: #6b6257;
  --rule: #cdc4b6;
  --paper: #f7f4ed;
  --panel: #efeadf;
  --accent: #8a2b1f;
  /* For following one line of a chart with a pointer. Distinct from the
     accent, which already means champion, and dark enough to read on paper. */
  --trace: #1d4f8c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.45;
}

.sheet { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* masthead */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: .6rem;
  /* One place to say how big the nameplate is, because the Chief is positioned
     in multiples of its line. */
  --nameplate: clamp(1.9rem, 7vw, 4rem);
  --line: .95;
}
/* `min-content` makes the nameplate hug its longest word instead of filling
   whatever flex hands it, which is what lets the Chief be placed off the text. */
.nameplate { position: relative; flex: 0 0 auto; width: min-content; }
.masthead h1 {
  font-size: var(--nameplate);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
  font-weight: 700;
  line-height: .95;
}
/* One line per row, so the nameplate stacks the way it was written. */
.masthead h1 span { display: block; }

/* Two lines tall, filling the space beside the first two and stopping where the
   third begins. CHAMPIONS runs about four fifths of a line past CHIPPEWA, so he
   is pulled back over that overhang: his left edge lands roughly where CHIPPEWA
   ends and he leans off the nameplate for the rest of his width. */
.chief {
  position: absolute;
  left: 100%;
  margin-left: calc(var(--nameplate) * -1.05);
  /* The extra .13 lifts him off the bottom of the line box and onto the
     baseline, so his chin sits level with the feet of CHIPPEWA. */
  bottom: calc(var(--nameplate) * (var(--line) * 2 + .13));
  height: calc(var(--nameplate) * var(--line) * 2);
  width: auto;
}

/* The corner box, where a newspaper puts the weather. */
.corner {
  flex: 0 0 auto;
  width: clamp(8rem, 26vw, 12rem);
  border: 1px solid var(--ink);
  padding: .6rem .7rem;
  background: var(--panel);
  text-align: center;
}
.corner h3 {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .45rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule);
}
.corner .trophy-holder { font-size: .95rem; margin: .3rem 0 .1rem; line-height: 1.2; }
.corner .feathers { margin: .1rem 0; }
.corner .years { margin: 0; }
.corner .trophy-photo { margin-bottom: .4rem; }

/* The lead story's photo. Full column width, hard edges, no rounding: it is a
   picture in a newspaper, not a card. */
.cover { margin: 0 0 1rem; }
.cover img { display: block; width: 100%; height: auto; }

/* lead story: two thirds to the story, one third to the standings */
.columns { display: grid; grid-template-columns: 2fr 1fr; gap: 1.75rem; align-items: start; }
.lead-story { min-width: 0; }
.lead-headline {
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
  text-transform: uppercase;
}
.lead-story .subhead {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.35;
  color: var(--muted);
  margin: 0 0 .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
}
.lead-story .blurb p { margin-top: 0; }
.lead-story .more {
  font-family: var(--sans); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 46rem) { .columns { grid-template-columns: 1fr; } }
.weather {
  border-top: 1px solid var(--rule);
  margin-top: .5rem;
  padding-top: .4rem;
  font-family: var(--sans);
}
.weather p { margin: 0; }
.weather .place { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.weather .conditions { font-size: .95rem; margin: .15rem 0; }
.weather .clock { font-size: .62rem; letter-spacing: .08em; color: var(--muted); }

/* On a phone the box stops being a corner and becomes a rail: trophy on the
   left, weather on the right, one short row under the nameplate instead of a
   tall column of its own. */
@media (max-width: 34rem) {
  .masthead { flex-direction: column; gap: .6rem; }
  .chief { display: none; }
  .corner {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: .45rem .6rem;
  }
  .corner h3 {
    border-bottom: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    align-self: center;
  }
  .corner .trophy-photo { display: none; }
  .corner .trophy-holder { font-size: .85rem; margin: 0; }
  .corner .feathers,
  .corner .years { display: inline; font-size: .66rem; }
  .corner .holder-block { flex: 1 1 auto; min-width: 0; }
  .corner .weather {
    border-top: 0;
    border-left: 1px solid var(--rule);
    margin: 0;
    padding: 0 0 0 .8rem;
    text-align: right;
    flex: 0 0 auto;
  }
  .weather .place { display: none; }
  .weather .conditions { font-size: .8rem; }
}
.dateline {
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  padding: .35rem 0;
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem;
}
.dateline nav a { color: var(--muted); margin-right: .85rem; }

/* body grid */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 1.75rem;
  margin-top: 1.5rem;
}
@media (max-width: 44rem) { .columns { grid-template-columns: 1fr; } }

/* stories */
.story { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.story:last-child { border-bottom: 0; }
.story h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 .5rem;
}
.story h2 a { color: inherit; text-decoration: none; }
.story h2 a:hover { color: var(--accent); }
.story p { margin: 0; }
.story .byline {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
}
.empty { color: var(--muted); font-style: italic; }

/* side panels */
.panel { background: var(--panel); border: 1px solid var(--rule); padding: .9rem 1rem; margin-bottom: 1.25rem; }
.panel h3 {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
.panel .note { font-family: var(--sans); font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

table.standings { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.standings td { padding: .2rem 0; vertical-align: baseline; }
table.standings td.rank { width: 1.6rem; color: var(--muted); font-variant-numeric: tabular-nums; }
table.standings td.rec { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
table.standings td.grade-cell { text-align: left; width: 2.2rem; padding-left: .5rem; font-size: .78rem; font-weight: 700; }
.panel .note a { font-family: var(--sans); }
table.standings td.move { text-align: right; width: 2.6rem; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.panel .out { margin: .5rem 0 0; font-size: .8rem; color: var(--muted); }

.trophy-photo { display: block; width: 100%; height: auto; border: 1px solid var(--rule); margin-bottom: .5rem; }
.trophy-holder { font-size: 1.15rem; margin: .3rem 0 .1rem; }
.feathers { letter-spacing: .1em; }
.years { font-family: var(--sans); font-size: .7rem; color: var(--muted); letter-spacing: .06em; }

/* ledger */
.ledger { border-top: 3px double var(--ink); margin-top: 1rem; padding-top: 1rem; }
.ledger h3 {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
}
.ledger ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ledger li { white-space: nowrap; }
.tier { display: flex; align-items: baseline; gap: .9rem; padding: .4rem 0; border-bottom: 1px solid var(--rule); }
.tier:last-of-type { border-bottom: 0; }
/* Fixed size and never wrapping: the top tier sets its names larger, and
   feathers that grew with them overflowed the column onto a second line. */
.tier > .feathers {
  flex: 0 0 7rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
/* The traced pin, at display size. It is a greyscale drawing rather than a
   glyph, so it does not take the page's ink and is sized in pixels. */
.quill { height: 36px; width: auto; margin-right: 2px; vertical-align: middle; }
.quill.small { height: 36px; margin-right: 2px; }
.tier ul { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.tier li { white-space: nowrap; }
.tier .years { font-family: var(--sans); font-size: .64rem; color: var(--muted); letter-spacing: .04em; }
/* The one with three gets the size to go with it. */
.tier-3 { font-size: 1.2rem; }
.tier-3 .years { font-size: .66rem; }

.waiting { margin-top: .75rem; font-size: .85rem; color: var(--muted); }

/* article pages */
.report { max-width: 38rem; }
.report h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.15; text-transform: uppercase; margin-bottom: .3rem; }
.report .byline { font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.backlink { font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

/* drafts */
.draft, .draft-index { max-width: 42rem; }
.draft h1, .draft-index h1 {
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.draft .byline, .draft-index .byline {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.lede { margin-bottom: 1.5rem; }
.lede p:first-child { margin-top: 0; }


table.board { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.board th {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  padding: 0 .5rem .3rem 0;
  /* A header may stack onto two lines; every one in the row sits on the
     bottom of it, so the rule under them is not the only thing aligned. */
  vertical-align: bottom;
}
table.board td { padding: .25rem .5rem .25rem 0; vertical-align: baseline; }
table.board td.rank { width: 2.4rem; color: var(--muted); font-variant-numeric: tabular-nums; }
table.board tr.auto td { color: var(--muted); }
/* A label: a short code or a name standing beside the thing it describes.
   Uppercase and tracked on purpose, which is why it must not be used on a
   figure or a sentence. `td.best-pick` already had to work around that once. */
table.board .note {
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The same secondary voice for anything that is not a label: a number beside a
   number, a run of weeks, an arrow, a half-sentence. No uppercase, because a
   figure has no case and a sentence should not shout, and no extra tracking,
   because it pulls digits apart and breaks the column.

   Defined without a scope, unlike `.note`, so it also works in the one place a
   `.note` matched nothing at all and a score rendered at heading size. The
   weight is stated because it is used inside headings. */
.quiet {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
table.board span.quiet { font-size: .68rem; }

.repeats { border-top: 1px solid var(--rule); margin-top: 1.5rem; padding-top: 1rem; }
.repeats h3 {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
}
.repeats ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.repeats li { padding: .15rem 0; }

.panel.drafts ul { list-style: none; margin: 0; padding: 0; }
.panel.drafts li { padding: .15rem 0; }

/* draft grade and per-pick verdicts */
.grade { border: 1px solid var(--rule); padding: .8rem 1rem; margin: 0 0 1.5rem; display: flex; gap: 1rem; align-items: baseline; }
.grade .mark { font-size: 2.2rem; line-height: 1; margin: 0; font-weight: 700; }
.grade p:not(.mark) { margin: 0; font-size: .9rem; }
.grade .mark-label { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
table.lineup { margin-bottom: .4rem; }
.source-pick { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .06em; margin: 0 0 .6rem; }
.source-pick label { text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; color: var(--muted); }
.source-pick select { font: inherit; font-family: var(--sans); padding: .15rem .3rem;
  border: 1px solid var(--rule); background: transparent; color: inherit; }
.lineup-total { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.lineup-total strong { color: var(--ink); }
tr.bench-head td { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--rule);
  padding-top: .5rem; }
tr.benched td { color: var(--muted); }
.caption { font-family: var(--sans); font-size: .66rem; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 1.5rem; }

.verdict { font-family: var(--sans); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.verdict.steal, .verdict.value { color: #1d6b3a; }
.verdict.reach, .verdict.questionable { color: #a3232b; }
.verdict.routine { color: var(--muted); }

tr.comment td { padding: 0 .5rem .6rem 0; font-size: .85rem; color: var(--muted); }
tr.comment p { margin: 0; }
.note.hurt { color: #a3232b; }

table.standings-table td.team { color: var(--muted); font-size: .85rem; }
table.standings-table td.behind, table.standings-table td.worst { color: var(--muted); }
table.standings-table td.grade-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
table.board th button {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; letter-spacing: inherit; text-transform: inherit;
}
table.board th button:hover { color: var(--ink); }
table.board th button.sorted { color: var(--ink); }
table.board th button.sorted::after { content: " \2193"; }
table.board th button.sorted.up::after { content: " \2191"; }
table.sortable th button { white-space: nowrap; }

/* A table of nothing but counts and points, where a left edge on every column
   buys nothing and the eye wants the figures stacked. */
table.board.centered th,
table.board.centered td { text-align: center; padding-left: .5rem; }

.disagreement { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1rem; }
.disagreement h3 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 .4rem;
}
.observations { list-style: none; margin: 0 0 1.75rem; padding: 0; max-width: 40rem; }
.observations li {
  position: relative; padding: .35rem 0 .35rem 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.observations li:last-child { border-bottom: 0; }
.observations li::before {
  content: counter(note); counter-increment: note;
  position: absolute; left: 0; top: .45rem;
  font-family: var(--sans); font-size: .62rem; color: var(--muted);
}
.observations { counter-reset: note; }

.page-index { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1rem; }
.page-index h3 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 .6rem;
}
table.headline-table { width: 100%; }
table.headline-table td { padding: .3rem .8rem .3rem 0; vertical-align: baseline; }
table.headline-table td.who {
  white-space: nowrap; color: var(--muted); font-size: .8rem; width: 1%;
}

.scrolls { overflow-x: auto; }
table.spread-table caption {
  caption-side: top; text-align: left;
  font-family: var(--sans); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); padding-bottom: .5rem;
}
table.spread-table { font-size: .78rem; min-width: 40rem; }
table.spread-table th { white-space: nowrap; }
table.spread-table tr.group th { text-align: center; vertical-align: bottom; padding: 0 0 .3rem; }
table.spread-table tr.group th:first-child { text-align: left; padding-right: .8rem; }
/* "Draft Sharks" is the only heading wide enough to stretch its pair. */
table.spread-table tr.group th button { white-space: normal; line-height: 1.15; }

/* Each source is a points/rank pair. Butting them together and splitting the
   alignment at the seam centres the pair under its own heading. */
table.spread-table td.rank { width: auto; text-align: right; padding: .25rem .15rem .25rem 0; }
table.spread-table td.place { color: var(--muted); font-size: .72rem; text-align: left; padding: .25rem .9rem .25rem .15rem; }
table.spread-table td.edge { text-align: center; padding: .25rem .7rem; font-variant-numeric: tabular-nums; }
table.spread-table tr.group th[rowspan]:not(:first-child) { text-align: center; vertical-align: bottom; }
table.spread-table td.rank:not(.place):not(.edge) { padding-left: .9rem; }
table.spread-table td:first-child { padding-right: .8rem; white-space: nowrap; }
table.spread-table td.high { color: var(--ink); font-weight: 600; }
table.spread-table td.low { color: var(--muted); }
table.spread-table td.spread { font-weight: 600; }

.colophon {
  border-top: 3px double var(--ink);
  margin-top: 3rem;
  padding-top: .9rem;
  font-family: var(--sans);
  font-size: .66rem;
  line-height: 1.6;
  color: var(--muted);
}
.colophon p { margin: 0 0 .5rem; max-width: 44rem; }
.colophon p:last-child { margin-bottom: 0; }
.colophon .masthead-line {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.colophon a { color: inherit; }

.report-index { max-width: 40rem; }
.report-index h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); text-transform: uppercase; margin-bottom: .2rem; }
.report-index .byline {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem;
}
table.reports-table { width: 100%; }
table.reports-table td { padding: .45rem .8rem .45rem 0; vertical-align: baseline; }
table.reports-table td.rank {
  width: 1%; white-space: nowrap; font-family: var(--sans);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}

/* The contents of a long page, as a newspaper's own index box rather than a
   thin grey strip a reader's eye slides straight past. */
nav.contents {
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  padding: .8rem 0 .9rem;
  margin: 0 0 2rem;
}
nav.contents h2 {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 .5rem;
}
nav.contents ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.6rem;
}
nav.contents li { white-space: nowrap; }
nav.contents a {
  font-size: 1rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
nav.contents a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Names wrap as a paragraph rather than stacking one to a line, which made
   the table four times taller than it needed to be. */
table.hits-busts td.picks { font-size: .8rem; line-height: 1.45; }
table.hits-busts .pick { white-space: nowrap; }
table.hits-busts .pick:not(:last-child)::after { content: ","; }
table.hits-busts .pick em {
  font-style: normal; font-family: var(--sans); font-size: .66rem;
  color: var(--muted); margin-left: .15rem;
}
table.hits-busts .none { color: var(--muted); }

/* An ownership chain: who had him, when, and what he gave them. */
table.timeline td { vertical-align: baseline; padding: .25rem .6rem .25rem 0; }
table.timeline td.chain { font-size: .82rem; line-height: 1.5; }
table.timeline .leg { white-space: nowrap; }
table.timeline .leg em {
  font-style: normal; font-family: var(--sans); font-size: .66rem;
  color: var(--muted); margin-left: .15rem;
}
/* The weeks a manager held him for, against the weeks he was worth holding.
   Green means he was there for two or more of them, red for none at all. The
   greys in between are the single-big-week spells, which say nothing either
   way. Same two colours as the net column, so the page has one idea of good. */
table.timeline .leg em.kind { color: #1d6b3a; }
table.timeline .leg em.cruel { color: #a3232b; }

table.timeline .verdict { margin-left: .4rem; color: var(--accent); }

/* Same shape as a hits-and-busts cell, so the two tables agree about how a
   pick looks. Deliberately not `.note`, which uppercases and would render the
   sigma as a summation sign. */
td.best-pick { font-size: .8rem; white-space: nowrap; }
td.best-pick em {
  font-style: normal; font-family: var(--sans); font-size: .66rem;
  color: var(--muted);
}
table.hits-busts td { vertical-align: baseline; padding: .25rem .6rem .25rem 0; }
table.hits-busts th:nth-child(3), table.hits-busts th:nth-child(4) { width: 34%; }

/* The bracket, as a tree rather than a list of games in week order. */
.bracket { margin: 0 0 .6rem; overflow-x: auto; }
.bracket svg { display: block; width: 100%; min-width: 34rem; height: auto; }
.bracket .round {
  font-family: var(--sans); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; fill: var(--muted);
}
.bracket .link { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.bracket .game rect { fill: none; stroke: var(--rule); stroke-width: 1; }
.bracket .game text { font-size: 13px; fill: var(--muted); }
.bracket .game .seed { font-size: 10px; }
.bracket .game .score { font-variant-numeric: tabular-nums; }
/* The man who went through is the one the eye should find. */
.bracket .won text { fill: var(--ink); font-weight: 700; }

/* Above this line is the bracket; below it is the rest of the season. */
.bump .cutoff { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bump .cutoff-label {
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; fill: var(--accent);
  /* Sixteen lines cross underneath it, so the label carries the paper with
     it rather than fighting them. */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Landing on an anchor should not tuck the heading against the top edge. */
.season .column { scroll-margin-top: 1rem; }

/* ---- a season page's sections ---------------------------------------- */

/* Each written section opens like a column in a paper: a rule, a headline in
   the body face, a sub-headline, then prose. */
.season .column {
  border-top: 3px double var(--ink);
  margin-top: 2.5rem;
  padding-top: 1rem;
}
.season .column h2 {
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
  line-height: 1.15; margin: 0 0 .3rem; max-width: 30rem;
}
.season .column .subhead {
  font-size: .95rem; color: var(--muted); margin: 0 0 1rem; max-width: 34rem;
}
.season .column .lede { max-width: 38rem; }

.final-score { font-size: 1.15rem; line-height: 1.4; margin: 0; }

.final-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.final-lineups h4 {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .04em;
  margin: 0 0 .3rem; text-transform: none;
}
.final-lineups table.lineup td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 34rem) { .final-lineups { grid-template-columns: 1fr; } }

/* One verdict per trade, and one per team. Same shape, so they read as a set. */
.verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; margin-top: 1rem; }
.verdict-item { border-top: 1px solid var(--rule); padding-top: .6rem; }
.verdict-item h4 {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .03em;
  margin: 0 0 .35rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
}
.verdict-item .week {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.verdict-item .mark {
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-left: auto;
}
.verdict-item .body { font-size: .9rem; }

/* What crossed, in a column for each side. Two short lists rather than a table
   with a row per player, half of whose cells were always empty. */
.swap { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.2rem; margin: 0 0 .5rem; }
.swap h5 {
  font-family: var(--sans); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .2rem; font-weight: 400;
}
.swap ul { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.swap li { padding: 0 0 .25rem; }
.swap .rate {
  display: block; font-family: var(--sans); font-size: .68rem;
  font-variant-numeric: tabular-nums;
}
.swap .rate em { font-style: normal; opacity: .65; margin-left: .1em; }
.swap .rate.kind { color: #1d6b3a; }
.swap .rate.cruel { color: #a3232b; }

/* The one key for all of them, above the set. */
.caption.key { max-width: 42rem; }
.caption.key .rate { font-family: var(--sans); font-weight: 700; }
.caption.key .rate.kind { color: #1d6b3a; }
.caption.key .rate.cruel { color: #a3232b; }
.caption strong.kind { color: #1d6b3a; }
.caption strong.cruel { color: #a3232b; }

/* ---- the archive index ---------------------------------------------- */

.archive-index { max-width: 46rem; }
.archive-index h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); text-transform: uppercase; margin-bottom: .2rem; }
.archive-index .byline {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem;
}
table.archive-table { width: 100%; }
table.archive-table td { padding: .45rem .8rem .45rem 0; vertical-align: baseline; }
table.archive-table td.rank {
  width: 1%; white-space: nowrap; font-family: var(--sans);
  font-size: .8rem; letter-spacing: .06em; color: var(--ink);
}
table.archive-table td.note { font-size: .8rem; }
table.archive-table .empty { font-size: .85rem; }

/* ---- one season, reviewed -------------------------------------------- */

.season h1 {
  font-family: var(--sans); font-size: clamp(2.6rem, 9vw, 4.5rem);
  letter-spacing: -.02em; line-height: 1; margin: .2rem 0 .2rem;
}
.season .byline {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 3px double var(--ink); padding-bottom: .6rem; margin-bottom: 1.5rem;
}
.season h3 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 2rem 0 .5rem;
  border-bottom: 1px solid var(--rule); padding-bottom: .3rem;
}
.season .lede { margin-bottom: 1rem; }
.season .lead-headline { margin-top: 0; }

.title-game { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: .7rem 0; margin: 1.5rem 0; }
.title-game h3 { margin: 0 0 .2rem; border: 0; padding: 0; }
.title-game p { margin: 0; font-size: 1.05rem; }

table.board tr.upset td { font-weight: 600; }

/* A label and its line, which is what both side panels are. */
dl.threads { margin: 0; font-size: .85rem; }
dl.threads dt {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: .7rem;
}
dl.threads dt:first-child { margin-top: 0; }
dl.threads dd { margin: .1rem 0 0; }

table.board td.luck { font-variant-numeric: tabular-nums; }
table.board td.luck.kind { color: #1d6b3a; }
table.board td.luck.cruel { color: #a3232b; }

/* The bump chart. Sixteen lines, so identity is carried by the label at the
   end of each rather than by a colour nobody could tell apart. */
/* A table whose columns need saying out loud, one term to a line. */
ul.definitions { list-style: none; margin: 0 0 .9rem; padding: 0; max-width: 44rem; }
ul.definitions li { padding: .12rem 0 .12rem .9rem; text-indent: -.9rem; }
ul.definitions strong { color: var(--ink); }
ul.definitions code {
  font-family: var(--sans); font-size: .92em; letter-spacing: .01em;
  color: var(--ink); white-space: nowrap;
}
/* A formula gets its own line rather than breaking mid-expression. */
ul.definitions code.formula {
  display: block; margin-top: .15rem; overflow-x: auto;
}

.bump { margin: 0 0 1.5rem; }
.bump svg { display: block; width: 100%; height: auto; overflow: visible; }
.bump .grid { stroke: var(--rule); stroke-width: 1; }
.bump .axis {
  font-family: var(--sans); font-size: 13px; fill: var(--muted);
}
.bump .team .hit { fill: none; stroke: transparent; stroke-width: 14; }
.bump .team .track {
  fill: none; stroke: var(--ink); stroke-width: 2;
  stroke-opacity: .28; stroke-linejoin: round; stroke-linecap: round;
}
/* Every name bold, so weight is not a signal here and colour is. A green name
   against unbolded neighbours read as weaker than the red one rather than as a
   different fact, which is the opposite of what the two mean. */
.bump .team text {
  font-family: var(--sans); font-size: 13px; font-weight: 700; fill: var(--muted);
}
/* Who played in the bracket, which the chart's own ordering cannot say: the
   line marks a place in this table and the league seeds on division record.
   Green made it, red finished above the line and missed anyway. The lines stay
   one ink; only the names carry it. */
.bump .team.seeded text { fill: #1d6b3a; }
.bump .team.missed text { fill: #a3232b; }

/* The one line the reader is looking for. Green like the rest of the bracket,
   because a champion is the extreme case of having qualified rather than a
   separate fact, and set apart by weight and opacity instead of by hue. That
   keeps one meaning per colour in this chart. */
.bump .team.champion .track { stroke: #1d6b3a; stroke-opacity: 1; stroke-width: 2.5; }
.bump .team.champion text { fill: #1d6b3a; }

/* Follow one line with a pointer. No script: the whole page stays static.
   Blue rather than the accent, because the accent already means champion and
   a followed line should not be mistaken for one. */
.bump .team:hover .track { stroke: var(--trace); stroke-opacity: 1; stroke-width: 2.5; }
.bump .team:hover text { fill: var(--trace); }
.bump .team { cursor: default; }

ul.crossings { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
ul.crossings li { padding: .35rem 0; border-bottom: 1px solid var(--rule); }
ul.crossings li:last-child { border-bottom: 0; }
ul.crossings .week {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-right: .5rem;
}
ul.crossings .note { display: block; }

ul.filed { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
ul.filed li { padding: .15rem 0; }


a { color: var(--accent); }

/* Four awards across, dropping to two and then one as the page narrows. The
   name carries the weight: it is what a reader is looking for. */
.awards {
  display: grid; gap: 1.2rem; margin: 0 0 1.75rem;
  grid-template-columns: repeat(4, 1fr);
}
.award { border-top: 2px solid var(--ink); padding-top: .5rem; }
.award h4 {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem;
}
.award .who { font-size: 1.15rem; font-weight: 600; margin: 0 0 .35rem; }
.award .line { font-size: .84rem; line-height: 1.45; margin: 0; }
@media (max-width: 52rem) { .awards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .awards { grid-template-columns: 1fr; } }