/* RikishiDex — the Living Banzuke.
 *
 * Grounded in the printed banzuke sheet: dense sumi ink on washi, hierarchy
 * carried by type SIZE the way the real sheet carries it (a yokozuna's name
 * is printed larger than a maegashira's — that is information, not styling),
 * and the hoshitori星取 star record as the native stat language. One
 * vermillion hanko per page is the only colour that is not ink.
 *
 * Fonts are self-hosted OFL faces, subset from the real shikona pool of all
 * 599 rikishi in the upstream database. Reggae One carries every Japanese
 * glyph; Shippori Mincho B1 carries Latin and kana. Anything outside the
 * subset falls back to a system mincho rather than a tofu box.
 */

@font-face {
  font-family: "Reggae One";
  src: url("/fonts/reggae-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+3000-303F, U+3041-30FF, U+4E00-9FFF, U+FF01-FF60;
}
@font-face {
  font-family: "Shippori Mincho B1";
  src: url("/fonts/shippori-mincho-b1.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper:      #f6f2e8;
  --paper-2:    #efe8d8;
  --ink:        #1a1712;
  --ink-2:      #4a4238;
  --ink-faint:  #6b6355;
  --rule:       rgba(26, 23, 18, 0.16);
  --rule-heavy: rgba(26, 23, 18, 0.38);
  --shu:        #c73a24;

  /* Rank carried by type scale, the way the sheet carries it. One ladder,
     read by the banzuke rows and by the front page's cards, so the two can
     never drift into disagreeing about what a yokozuna looks like. */
  --rank-y: 1.75rem;
  --rank-o: 1.5rem;
  --rank-s: 1.3rem;
  --rank-k: 1.2rem;

  --jp: "Reggae One", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  --latin: "Shippori Mincho B1", Georgia, "Times New Roman", serif;

  --measure: 68rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--latin);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  /* The faint tooth of washi. Two offset gradients, no image request. */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(26,23,18,0.018) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(26,23,18,0.014) 0 1px, transparent 1px);
  background-size: 13px 13px, 17px 17px;
}

a { color: inherit; text-decoration-color: var(--rule-heavy); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--shu); }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule-heavy);
  padding: 1rem 0 0.85rem;
  margin-bottom: 1.75rem;
}
.masthead-in { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; }
.wordmark {
  font-family: var(--jp);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  line-height: 1;
}
.wordmark .en {
  font-family: var(--latin);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-top: 0.3rem;
}
/* Six links since build 35. At 360px the row was 24px wider than the viewport
   and the whole page scrolled sideways; wrapping lets the last link drop to a
   second line instead. Measured in a real browser at 360 and 390. */
.nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.875rem; letter-spacing: 0.04em; margin-left: auto; justify-content: flex-end; }
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------- freshness contract */

/* The honesty line. Present on every page, never decoration: it says when
 * the data was last confirmed, and says so even when the answer is bad. */
.freshness {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-top: 3rem;
}
.freshness b { font-weight: 400; color: var(--ink-2); }

.banner {
  border: 1px solid var(--shu);
  border-left-width: 4px;
  background: rgba(199, 58, 36, 0.05);
  padding: 0.7rem 0.95rem;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.banner b { color: var(--shu); }

/* -------------------------------------------------------------------- hero */

.hero { padding: 1rem 0 2.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.hero-grid { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.25rem, 5vw, 3rem); align-items: start; }

/* The portrait, framed like a woodblock inset. Absence renders nothing:
   a card without a photo is the unmodified typographic hero, not a hole. */
.portrait { margin: 0; max-width: clamp(150px, 24vw, 230px); justify-self: end; }
.portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: 50% 20%;
  border: 1px solid var(--ink);
  outline: 1px solid var(--rule); outline-offset: 3px;
  background: var(--paper-2);
  filter: saturate(0.92) contrast(1.02);
}
.credit {
  margin-top: 0.5rem; font-size: 0.66rem; line-height: 1.5;
  color: var(--ink-2); letter-spacing: 0.01em;
  font-family: var(--latin), var(--jp);
}
.credit a { color: inherit; text-decoration: underline dotted; }

/* /credits - one line per photograph, author and licence named. */
.credits { list-style: none; padding: 0; margin: 0; }
.credit-item {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: baseline;
  padding: 0.55rem 0; border-bottom: 1px dotted var(--rule);
}
.credit-item > a { min-width: 9rem; }
.credit-meta { color: var(--ink-2); font-size: 0.85rem; overflow-wrap: anywhere;
  font-family: var(--latin), var(--jp); }

/* Vertical shikona, set the way a banzuke sets it. */
.shikona-jp {
  font-family: var(--jp);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(2.75rem, 9vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  white-space: nowrap;
  /* The inline axis runs vertically here, so without max-content the grid row
     (sized by the text beside it) clips the name and the overflow paints on
     top of the next section. Measured, not guessed: a four-character shikona
     reported a 156px box where it needed 290px. */
  height: max-content;
  min-height: 1em;
}
.shikona-en {
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.rank-line {
  font-size: 1.0625rem;
  color: var(--ink-2);
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
}
.rank-line .shu { color: var(--shu); }

.bio { margin-top: 1.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.85rem 1.5rem; }
.bio dt { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.bio dd { font-size: 0.9375rem; margin-top: 0.1rem; }

/* --------------------------------------------------------------- hoshitori */

/* The signature. ○ shiroboshi = win, ● kuroboshi = loss — the sport's own
 * notation, not invented iconography. A slashed circle is a fusen (forfeit);
 * an empty slot is a day not fought. */
.hoshitori { display: flex; flex-wrap: wrap; gap: 0.28rem; align-items: center; }
.boshi {
  width: 0.95rem; height: 0.95rem;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  flex: 0 0 auto;
  position: relative;
}
/* Circles for bouts fought, squares for bouts awarded — the official star
   chart's own distinction. A fusensho is a WHITE square, a fusenpai a BLACK
   one; the sport marks the shape to say "this was not wrestled" and keeps the
   white/black axis to say who was credited. */
.boshi.win  { background: transparent; }
.boshi.loss { background: var(--ink); }
.boshi.fusen-win  { background: transparent; border-radius: 0; }
.boshi.fusen-loss { background: var(--ink); border-radius: 0; }
/* A day not yet fought is a short rule, never a ring: a faint hollow circle
   would read as a win, which is the one thing it must not do. */
.boshi.pending {
  border: none;
  background: linear-gradient(var(--rule-heavy), var(--rule-heavy))
    center / 62% 1.5px no-repeat;
}
/* A day missed — whether the rikishi returns later in the basho or not. The
   printed chart carries no mark here at all; a blank on screen would make the
   fifteen days uncountable, so it is drawn faintly instead: plainly
   nothing-happened, and not confusable with a white square. Appearance is
   defined HERE and shown by legend(); no comment or document describes it. */
.boshi.absent {
  border-radius: 0;
  border-style: dotted;
  border-color: var(--rule-heavy);
  opacity: 0.45;
  background: transparent;
}
.boshi.today { box-shadow: 0 0 0 2px var(--shu); }
/* The key. Real .boshi marks, so it is drawn by the rules above rather than
   describing them — the chart and its explanation cannot disagree. */
.legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 1.15rem; margin-top: 1.1rem;
  font-size: 0.8125rem; color: var(--ink-2);
}
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-more { margin-left: auto; color: var(--ink-faint); }

/* /notation — the same marks at reading size, one per row. */
.notation { margin-top: 0.5rem; }
.note-row {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 0.9rem;
  padding: 0.9rem 0; border-bottom: 1px dotted var(--rule);
  align-items: start;
}
.note-mark { display: flex; justify-content: center; padding-top: 0.2rem; }
.note-name { font-size: 1.0625rem; }
.note-name .jp { font-family: var(--jp); color: var(--ink-2); margin-left: 0.4rem; }
.note-text { color: var(--ink-2); max-width: 62ch; margin-top: 0.15rem; }

.record-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
.record-row .basho { font-size: 0.8125rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.record-row .tally { font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.record-row .tally .kyujo { color: var(--shu); }
/* A basho row on the card opens to that basho's bouts. The row itself is the
   summary, so the star row a reader already knows is the thing they tap; the
   marker is the only new mark, and it turns when the row is open. */
.record-basho > summary { list-style: none; cursor: pointer; }
.record-basho > summary::-webkit-details-marker { display: none; }
.record-basho > summary > .basho:first-child::before {
  content: "\25B8"; display: inline-block; width: 0.95em;
  color: var(--ink-faint); transition: transform 0.15s ease;
}
.record-basho[open] > summary > .basho:first-child::before { transform: rotate(90deg); }
.record-basho > summary:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; }
.bout-log {
  list-style: none; margin: 0; padding: 0.35rem 0 0.7rem calc(5.5rem + 0.9rem);
  border-bottom: 1px solid var(--rule); font-size: 0.9375rem; line-height: 1.5;
}
.bout-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.14rem 0; }
.bout-log .d {
  font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-faint);
  min-width: 3.3rem; font-variant-numeric: tabular-nums;
}
.bout-log .rk { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.bout-log a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-heavy); }
.bout-log a:hover { border-bottom-color: var(--ink); }
.bout-log .lost { color: var(--ink-2); }

/* Form. Kachi-koshi and make-koshi are the sport's own momentum mechanism —
   eight wins promotes, seven demotes — so the strip states verdicts rather
   than scoring them. Concluded basho only. */
/* What is happening to this man right now. Shown only while a tournament is
   in progress — once it is over the record is the story and the chart tells
   it. This is where search lands mid-basho. */
/* In the news. A dispatch line, not a feed: one headline on the front page,
   set below the banzuke so it never competes with a tournament in progress.
   The type is quieter than a heading of our own, because the words are not
   ours — the site should not borrow someone else's headline and wear it like
   a masthead. */
.dispatch { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; }
.dispatch-h { font-size: 1.0625rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule); }
.dispatch-h:hover { border-bottom-color: var(--ink); }
/* Publisher names arrive as data in whatever script the publisher uses: a
   Japanese daily one day, an Arabic news agency the next. No subset can cover
   that, so these rules name the self-hosted faces first and let the system
   finish the job. Altering a publisher's name to fit our typography is not an
   option; the credit has to be right.
   (The first draft of this comment quoted a masthead in kanji and failed the
   coverage check on the spot — which is the check earning its keep one build
   after it was widened.) */
.dispatch-src { font-size: 0.8125rem; color: var(--ink-faint);
  font-family: var(--latin), var(--jp), serif; }

/* The sheet.
 *
 * An old front page: the main column runs down the CENTRE and is far wider
 * than the two that flank it. That single fact is why this is a grid and not
 * CSS multi-column — multi-column makes every column identical in width and
 * chooses the breaks itself, which are precisely the two things this layout
 * cannot allow. The columns are filled server-side instead, by weight.
 *
 * Placement is 3 | 1 | 2: the oldest column on the left, the main column
 * centre, the second column right. Markup order stays 1, 2, 3 — newest
 * first — so a screen reader and the phone layout both read in recency
 * order, and only the wide-screen placement is rearranged. That leaves the
 * tab order going centre, right, left on a wide screen, which is a real cost
 * and the lesser of the two available. */
.sheet {
  display: grid;
  grid-template-columns: 1fr 1.75fr 1fr;
  column-gap: 1.6rem;
  margin-top: 0.75rem;
}
/* Rows are stated, not inferred. Auto-placement walks forward through the
   grid, and because the centre column comes FIRST in markup but sits SECOND
   in position, the cursor had already passed column one by the time the
   third column was placed — so it was pushed to a row of its own beneath the
   page, leaving the left column blank. Placing markup out of visual order
   means placing it explicitly. */
.sheet { align-items: start; }
.sheet > .tile-lead { grid-column: 1 / -1; grid-row: 1; }
.col-third  { grid-column: 1; grid-row: 2; }
.col-centre { grid-column: 2; grid-row: 2; }
.col-second { grid-column: 3; grid-row: 2; }

/* The rules that divide one column of print from the next. Drawn on the
   flanking columns so that no rule trails past the shortest column into
   empty paper. */
.col-third  { border-right: 1px solid var(--rule); padding-right: 1.6rem; }
.col-second { border-left: 1px solid var(--rule); padding-left: 1.6rem; }
.col-third, .col-second { margin-right: -0.05rem; }
/* A quiet week puts every story in the centre. An empty flanking column must
   not still draw its rule and gutter — a vertical hairline beside nothing
   reads as a page that failed to load rather than as a page with little on
   it. */
.col:empty { display: none; }

/* "The side columns that are not headlines." A flanking column in a real
   paper is set smaller than the centre, whatever the story — so the rank
   ladder still orders the page, but the outer columns step down a notch. */
.col-second .tile-major .tile-h,
.col-third  .tile-major .tile-h { font-size: var(--rank-k); }
.col-second .tile-standard .tile-h,
.col-third  .tile-standard .tile-h { font-size: 0.9375rem; }
.col-second .tile-sum,
.col-third  .tile-sum { font-size: 0.8125rem; line-height: 1.45; }

.tile {
  break-inside: avoid;
  padding: 0.7rem 0 0.85rem;
  border-top: 1px solid var(--rule);
}
/* The weight of the rule above a story says how big the story is, the way a
   sheet's rules do. Read top to bottom the page tells you its own hierarchy
   before you have read a word of it. */
.tile-major    { border-top: 2px solid var(--ink); }
.tile-standard { border-top: 1px solid var(--rule-heavy); }
.tile-brief    { border-top: 1px dotted var(--rule); padding: 0.5rem 0 0.6rem; }

/* The lead runs across the whole page above the columns, which is the one
   thing a front page always does. */
.tile-lead {
  column-span: all;
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  padding: 1.1rem 0 1rem;
  margin-bottom: 1.1rem;
}
/* The lead uses the whole measure or it is not a lead. With a photograph:
   picture, then headline and deck beside it. Without one: the headline holds
   a narrow measure on the left and the deck sets beside it, which is what a
   front page does and what stops a 3rem headline stranding half a page of
   empty paper to its right. */
.tile-lead:has(.tile-fig) {
  display: grid;
  grid-template-columns: minmax(12rem, 19rem) 1fr;
  column-gap: 1.6rem;
}
.tile-lead:not(:has(.tile-fig)) .tile-a {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 2rem; align-items: start;
}
.tile-lead:not(:has(.tile-fig)) .tile-sum { margin-top: 0.5rem; }
/* A lead with no deck — the publisher syndicated no usable summary — takes
   the whole measure for its headline instead of holding a 20ch column and
   leaving half a page of empty paper beside it. */
.tile-lead .tile-a:not(:has(.tile-sum)) { display: block; }
.tile-lead .tile-a:not(:has(.tile-sum)) .tile-h { max-width: 30ch; }
.tile-lead:has(.tile-fig) .tile-fig { grid-column: 1; grid-row: 1; margin: 0.3rem 0 0; }
.tile-lead:has(.tile-fig) .tile-a   { grid-column: 2; grid-row: 1; }
.tile-lead:has(.tile-fig) .tile-f   { grid-column: 1 / -1; }

.tile-a { display: block; text-decoration: none; color: inherit; }
.tile-a:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

/* Headlines wrap. A 3rem headline set on one line across a full measure is a
   web banner; the same words broken over two or three short lines are a
   newspaper headline, so the measure is deliberately narrow for the big
   sizes and the type is allowed to fill it. */
.tile-h { font-weight: 400; line-height: 1.14; text-wrap: balance; }
.tile-lead .tile-h {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
  max-width: 20ch; line-height: 1.05;
}
.tile-major    .tile-h { font-size: var(--rank-s); line-height: 1.18; }
.tile-standard .tile-h { font-size: 1.0625rem; line-height: 1.28; }
.tile-brief    .tile-h { font-size: 0.9375rem; line-height: 1.3; color: var(--ink-2); }
.tile-a:hover .tile-h { text-decoration: underline; text-decoration-thickness: 1px; }

/* Justified, hyphenated, tight. Narrow justified measures are what newsprint
   looks like; without hyphenation they would river, so both or neither. */
.tile-sum {
  margin-top: 0.4rem; color: var(--ink-2);
  font-size: 0.875rem; line-height: 1.5;
  text-align: justify; hyphens: auto;
}
.tile-lead .tile-sum {
  font-size: 1.0625rem; line-height: 1.5; color: var(--ink);
  max-width: 46ch; text-align: left; hyphens: manual;
}

/* The publisher's own photograph, from the publisher's own server. No
   reserved box and nothing below depending on its height, so a hotlink they
   decline to serve costs the tile its picture and nothing else. */
.tile-fig { margin: 0.6rem 0 0; }
.tile-img { display: block; width: 100%; height: auto; filter: saturate(0.8) contrast(1.05); }
.tile-cred {
  margin-top: 0.25rem; font-size: 0.6875rem; color: var(--ink-faint);
  letter-spacing: 0.02em; font-style: italic;
}

/* The byline rule. On every tile at every size, so credit survives a clamped
   headline and a photograph that never loaded. */
.tile-f {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; margin-top: 0.55rem; padding-top: 0.35rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem; color: var(--ink-faint);
}
.tile-brief .tile-f { margin-top: 0.35rem; }
.tile-src { font-family: var(--latin), var(--jp), serif; color: var(--ink-2); }
.tile-date { white-space: nowrap; font-variant-numeric: tabular-nums; font-style: italic; }

/* Two columns: the main column keeps its width advantage and the flanking
   material stacks beside it, second above third, which is still recency
   order. Nothing is hidden — the COLUMN goes, not the stories in it. */
@media (max-width: 62rem) {
  .sheet { grid-template-columns: 1.6fr 1fr; }
  .sheet > .tile-lead { grid-column: 1 / -1; }
  .col-centre { grid-column: 1; grid-row: 2 / span 2; }
  .col-second { grid-column: 2; grid-row: 2; border-left: 1px solid var(--rule); }
  .col-third  { grid-column: 2; grid-row: 3; border-right: none; border-left: 1px solid var(--rule);
                padding-right: 0; padding-left: 1.6rem; }
}

/* One column: everything stacks, newest at the top, which is the markup
   order already. */
@media (max-width: 40rem) {
  .bout-log { padding-left: 0; }
  .sheet { display: block; }
  .col { border: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  .tile-lead:has(.tile-fig) { display: block; }
  .tile-lead .tile-h { max-width: none; }
  .tile-sum { text-align: left; hyphens: manual; }
  .col-second .tile-standard .tile-h,
  .col-third  .tile-standard .tile-h { font-size: 1.0625rem; }
}
}

.now {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem;
  margin: -0.75rem 0 1.75rem; padding: 0.7rem 0.9rem;
  background: var(--paper-2); border: 1px solid var(--rule);
  font-size: 0.875rem; color: var(--ink-2);
}
.now-head { letter-spacing: 0.05em; color: var(--ink); }
.now-score { font-variant-numeric: tabular-nums; font-size: 1.0625rem; color: var(--ink); }
.now-last b { font-weight: 400; color: var(--ink); }
.now-kim { color: var(--ink-faint); font-style: italic; }
.now-next { margin-left: auto; }
@media (max-width: 40rem) { .now-next { margin-left: 0; } }

.form {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 1.1rem; margin: 0.35rem 0 0.9rem;
  font-size: 0.8125rem; color: var(--ink-2);
}
.form-strip { display: inline-flex; gap: 0.25rem; }
.fm {
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
  padding: 0.12rem 0.34rem; border: 1px solid var(--rule);
  white-space: nowrap;
}
.fm-kachi-koshi { border-color: var(--rule-heavy); color: var(--ink); }
.fm-make-koshi  { color: var(--ink-faint); }
.fm-kyujo { color: var(--shu); border-style: dotted; }
.form-read .jp { font-family: var(--jp); color: var(--ink-faint); margin-left: 0.3rem; }
.form-recent { margin-left: auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 32rem) { .form-recent { margin-left: 0; } }

/* -------------------------------------------------------------- attributes */

.attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem 2.5rem; margin-top: 0.5rem; }
.attr { border-top: 2px solid var(--ink); padding-top: 0.7rem; }
.attr h3 {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 400; color: var(--ink-faint); margin-bottom: 0.35rem;
}
.attr .value { font-size: 1.5rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.attr .value .unit { font-size: 0.875rem; color: var(--ink-faint); }
.attr .note { font-size: 0.8125rem; color: var(--ink-faint); margin-top: 0.3rem; }
.attr .unknown { color: var(--ink-faint); font-size: 1.0625rem; }

/* Percentile against the ranked field. Ink bar on a hairline track. */
.pct { margin-top: 0.55rem; }
.pct-track { height: 6px; background: var(--paper-2); border: 1px solid var(--rule); position: relative; }
.pct-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.pct-label { font-size: 0.75rem; color: var(--ink-faint); margin-top: 0.25rem; letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ banzuke */

.section-head {
  display: flex; align-items: baseline; gap: 0.9rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.4rem; margin: 2.5rem 0 0.25rem;
}
/* A section head straight after the hero does not need the full gap: the
   hero already closes with 2.5rem of padding and its own rule, so the two
   stack into a band of empty paper that reads as a mistake rather than as
   breathing room. Only the adjacent case is changed; a section head further
   down the page still gets its full separation. */
.hero + .section-head { margin-top: 1rem; }
.section-head h2 { font-size: 1.25rem; font-weight: 400; letter-spacing: 0.04em; }
.section-head .jp { font-family: var(--jp); font-size: 1.0625rem; color: var(--ink-2); }
.section-head .count { margin-left: auto; font-size: 0.8125rem; color: var(--ink-faint); }

/* East and West flank the rank, as on the sheet. */
.banzuke-row {
  display: grid;
  grid-template-columns: 1fr minmax(7rem, auto) 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.banzuke-row:nth-child(even) { background: rgba(26,23,18,0.022); }
.bz-east { text-align: right; }
.bz-west { text-align: left; }
.bz-rank {
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.bz-name { text-decoration: none; display: inline-block; line-height: 1.2; }
.bz-name:hover { text-decoration: underline; text-decoration-color: var(--shu); }
.bz-name .jp { font-family: var(--jp); display: block; font-size: 0.8em; color: var(--ink-2); margin-top: 0.1rem; }
.bz-empty { color: var(--rule-heavy); font-size: 0.875rem; }

/* Rank carried by type scale — the banzuke's own hierarchy. */
.r-yokozuna  .bz-name { font-size: var(--rank-y); }
.r-ozeki     .bz-name { font-size: var(--rank-o); }
.r-sekiwake  .bz-name { font-size: var(--rank-s); }
.r-komusubi  .bz-name { font-size: var(--rank-k); }
.r-maegashira .bz-name { font-size: 1.0625rem; }
.r-juryo     .bz-name { font-size: 0.9375rem; }
.r-yokozuna .bz-rank, .r-ozeki .bz-rank { color: var(--ink); }

/* ------------------------------------------------------------- day results */

.torikumi { border-top: 2px solid var(--ink); max-width: 46rem; margin: 0 auto; }
.bout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.bout .side { display: flex; flex-direction: column; gap: 0.1rem; }
.bout .side.east { text-align: right; align-items: flex-end; }
.bout .side.west { text-align: left; align-items: flex-start; }
.bout .nm { font-size: 1.0625rem; text-decoration: none; }
.bout .nm:hover { text-decoration: underline; text-decoration-color: var(--shu); }
.bout .rk { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.bout .winner .nm { font-weight: 400; }
/* The winner is marked with a shiroboshi, the same white circle the star
   chart uses. A vermillion dot here was a second, invented vocabulary for
   "won" sitting next to the borrowed one on the card. */
.bout .winner .nm::after {
  content: "";
  display: inline-block;
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: transparent;
  margin-left: 0.45rem;
  vertical-align: 0.02em;
}
.bout .mid { text-align: center; min-width: 7.5rem; }
.bout .kimarite { font-size: 0.8125rem; color: var(--ink-2); }
.bout .kimarite .jp { font-family: var(--jp); }
.bout .pending { font-size: 0.8125rem; color: var(--ink-faint); font-style: italic; }

/* ------------------------------------------------------------------- index */

.lede { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.5; max-width: 34rem; color: var(--ink-2); }
/* The tournament rule.
 *
 * One span of ink from the banzuke to senshuraku, filled to today, with the
 * sport's four stations marked along it. A printed sheet marks a span; a
 * dashboard stacks status chips. This is the former.
 *
 * The single vermillion mark on the page sits on the station being
 * approached — the same accent the awards use, spent once. */
.basho-rule { margin: 1.75rem 0 0; }
.rule-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.6rem;
}
.rule-name { font-size: 0.9375rem; color: var(--ink-2); letter-spacing: 0.02em; }
.rule-day {
  font-size: 0.8125rem; color: var(--shu);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}

.rule-track {
  position: relative; height: 2px; background: var(--rule);
}
.rule-ink {
  position: absolute; inset: 0 auto 0 0;
  background: var(--ink); display: block; width: var(--fill);
}

.stns {
  list-style: none; margin: 0; padding: 0;
  position: relative; height: 4.4rem;
}
.stn {
  position: absolute; top: 0; left: var(--at); padding-top: 0.85rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  max-width: 9rem;
}
/* The last station hangs back inside the measure rather than running off it. */
.stn.is-last { left: auto; right: 0; align-items: flex-end; text-align: right; }
.stn.is-last::before { left: auto; right: 0; }
/* The tick, rising from the rule to its station. Hollow while the station is
   ahead, solid once it has passed. */
.stn::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 1px; height: 0.6rem; background: var(--rule-heavy);
}
.stn.is-past::before { background: var(--ink); }
.stn.is-next::before { background: var(--shu); width: 3px; left: -1px; }

.stn-jp { font-family: var(--jp); font-size: 0.9375rem; color: var(--ink); line-height: 1.2; }
.stn-en { font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.03em; }
.stn-date { font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stn-note { font-size: 0.75rem; color: var(--shu); font-variant-numeric: tabular-nums; }
.stn.is-past .stn-jp { color: var(--ink-faint); }
.stn.is-past .stn-date { color: var(--ink-faint); }

/* Narrow: the rule turns on its side.
 *
 * The first version kept the horizontal track and stacked the stations into a
 * two-column grid beneath it. The two devices contradicted each other — a
 * timeline drawn across the top with a list underneath that did not follow
 * it, the vermillion tick marking a position no station stood at, and stray
 * tick marks floating above the second row with no rule to attach to.
 *
 * A vertical rule is not a fallback here. This site already sets its wordmark
 * and its shikona vertically, and a span read downward with its stations
 * beside it is the more natural form of the two — the same fraction along the
 * tournament, down instead of across, so the thing keeps meaning what it
 * means. --at and --fill carry the same numbers to the other axis. */
@media (max-width: 46rem) {
  .basho-rule {
    display: grid; grid-template-columns: 2px 1fr;
    column-gap: 1rem; align-items: start;
  }
  .rule-head { grid-column: 1 / -1; }

  .rule-track { height: 24rem; width: 2px; }
  .rule-ink { inset: 0 0 auto 0; width: 100%; height: var(--fill); }

  /* Tall enough that the closest pair of dates still clears. The stations sit
     at their true fractions, so the tightest gap is 中日 to 千秋楽 — seven
     days of twenty-eight, a quarter of the span. A station block runs about
     75px, so the span needs at least 300px for that quarter to clear it; at
     15.5rem the last two overlapped by nearly fifty. */
  .stns { height: 24rem; }
  /* Two lines, not three. Stacked at their true fractions the blocks have to
     clear the tightest interval on the rule — 中日 to 千秋楽, seven days of
     twenty-eight — and at three lines apiece they came within five pixels of
     touching. The station and its date read as one line, the gloss sits
     under it. */
  .stn {
    top: var(--at); left: 0; padding-top: 0; padding-left: 0.75rem;
    max-width: none; transform: translateY(-0.55rem);
    flex-direction: row; flex-wrap: wrap; align-items: baseline;
    gap: 0 0.5rem;
  }
  .stn-jp { order: 1; }
  .stn-date { order: 2; }
  .stn-en { order: 3; flex-basis: 100%; }
  .stn-note { order: 4; }
  /* The tick turns with the rule: a short stroke reaching left to meet it. */
  .stn::before { top: 0.55rem; left: 0; width: 0.5rem; height: 1px; }
  .stn.is-next::before { width: 0.5rem; height: 3px; top: 0.5rem; }

  .stn.is-last {
    top: auto; bottom: 0; left: 0; right: auto;
    align-items: flex-start; text-align: left;
    transform: translateY(0.55rem);
  }
  .stn.is-last::before { left: 0; right: auto; top: 0.55rem; }
}

/* The vertical rule needs no narrower fallback: stacking downward, the labels
   never crowd each other horizontally, so there is nothing left for a plain
   list to fix. The first draft dropped to one at 24rem, which threw away the
   good layout on every 375px phone for a problem the vertical axis does not
   have. */

.state-strip {
  border: 1px solid var(--rule-heavy);
  padding: 1.1rem 1.25rem;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 1.5rem;
}
.state-strip dt { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.state-strip dd { font-size: 1.0625rem; margin-top: 0.15rem; }

/* Outlines rather than a background-through-gaps grid: an odd number of
   cards used to leave the trailing cells painted as a grey slab. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; margin-top: 1rem; }
.card { outline: 1px solid var(--rule); outline-offset: -1px; padding: 1rem 1.1rem; text-decoration: none; display: block; }
.card:hover { background: var(--paper-2); }
/* The front page's two bands. Yokozuna sit above san'yaku on the sheet
   rather than inside it, so they sit above it here. */
.rank-band {
  display: flex; align-items: baseline; gap: 0.55rem;
  margin: 1.6rem 0 0.5rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
}
.rank-band span { font-size: 0.9375rem; color: var(--ink-2); letter-spacing: 0.05em; }
.rank-band .jp { font-family: var(--jp); color: var(--ink-faint); font-size: 1rem; }
.live-more { margin-left: auto; color: var(--ink-faint); font-size: 0.8125rem; }

/* The yusho race. Grouped by record, because a leaderboard answers "who is
   level and who is within reach", not "who is first". Each man carries his
   own star record, so how he got there is visible — a man who lost on day one
   and has won eight straight reads differently from a steady 8-1, and that
   difference is exactly what "can he catch them" means. */
.race { margin-top: 0.75rem; }
.race-group { margin-bottom: 1.1rem; }
.race-head {
  display: flex; align-items: baseline; gap: 0.6rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.25rem; margin-bottom: 0.4rem;
}
.race-score {
  font-size: 1.0625rem; font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.race-label { font-size: 0.8125rem; color: var(--ink-2); letter-spacing: 0.05em; }
.race-more { margin-left: auto; font-size: 0.8125rem; color: var(--ink-faint); }

.race-row {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) auto 1fr;
  align-items: center; gap: 0.35rem 1rem;
  padding: 0.3rem 0;
}
.race-row + .race-row { border-top: 1px dotted var(--rule); }
.race-man { text-decoration: none; display: flex; align-items: baseline; gap: 0.45rem; }
.race-nm { font-size: 1.0625rem; }
.race-rk { font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.06em; }
.race-next { font-size: 0.8125rem; color: var(--ink-2); }
.race-next a { color: inherit; }
/* The rivalry, quieter than the matchup it qualifies. "on record" lives in the
   title attribute because the site holds twelve basho, not a career, and a
   bare 4-2 would be read as the latter. */
.race-h2h { color: var(--ink-faint); border-bottom: 1px dotted var(--rule); }
/* The champion, once there is one. The only vermillion on the page. */
.race-won .race-nm { color: var(--shu); }
.race-cup {
  font-family: var(--jp); font-size: 0.6875rem; color: var(--shu);
  border: 1px solid var(--shu); padding: 0.05rem 0.28rem; letter-spacing: 0.04em;
}

@media (max-width: 44rem) {
  .race-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .race-row .hoshitori { order: 3; }
  .race-next { order: 2; }
}


.cards-y { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cards-y .card { padding: 1.4rem 1.3rem; }
.card.r-yokozuna .nm { font-size: var(--rank-y); line-height: 1.15; }
.card.r-ozeki    .nm { font-size: var(--rank-o); }
.card.r-sekiwake .nm { font-size: var(--rank-s); }
.card.r-komusubi .nm { font-size: var(--rank-k); }
.card.r-yokozuna .jp { font-size: 1.125rem; }
.card .nm { font-size: 1.25rem; display: block; }
.card .jp { font-family: var(--jp); font-size: 0.9375rem; color: var(--ink-2); display: block; margin-top: 0.15rem; }
.card .rk { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.4rem; display: block; }

/* The one vermillion seal. Bottom of the page, where a hanko belongs. */
.seal {
  display: inline-grid;
  place-items: center;
  width: 3.1rem; height: 3.1rem;
  border: 2px solid var(--shu);
  border-radius: 2px;
  color: var(--shu);
  font-family: var(--jp);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.9;
}

footer { margin: 3.5rem 0 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
footer .fine { font-size: 0.8125rem; color: var(--ink-faint); max-width: 34rem; }
footer .fine a { color: var(--ink-2); }

/* ---------------------------------------------------------------- honours */

/* Yusho and sansho. Present on very few cards, which is the point — this
   line is a claim, and a claim that appears everywhere says nothing. */
.honours { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.honour {
  font-size: 0.75rem; letter-spacing: 0.04em;
  border: 1px solid var(--rule-heavy);
  padding: 0.2rem 0.5rem;
  color: var(--ink-2);
}
.honour.yusho { border-color: var(--shu); color: var(--shu); }

/* ------------------------------------------------------- tournament chart */

.chart { border-top: 2px solid var(--ink); }
/* Every column is fixed or flexible by rule, never `auto`. Each row is its
   own grid, so an auto column sizes to that row's content — which is what
   sent the win-loss totals wandering once a champion's row carried a mark.
   The award column is reserved on every row whether or not it holds one. */
.chart-row {
  display: grid;
  grid-template-columns: 3rem minmax(7rem, 10rem) 1fr 3.6rem 4.8rem;
  gap: 0.9rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}
.chart-row .nm { text-decoration: none; font-size: 1.0625rem; }
.chart-row .nm:hover { text-decoration: underline; text-decoration-color: var(--shu); }
.chart-row .tally {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* Yusho and sansho, at the end of the row as the printed sheet has them. */
.chart-row .awards { display: flex; gap: 0.2rem; justify-content: flex-start; }
.award {
  font-family: var(--jp);
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--ink-faint);
  border: 1px solid var(--rule-heavy);
  padding: 0.15rem 0.2rem;
}
.award.yusho-mark { color: var(--shu); border-color: var(--shu); }
.chart-row .tally .kyujo { color: var(--shu); }
/* The leader gets the vermillion — the one place on this page where an accent
   carries information rather than decoration. */
.chart-row.leader { background: rgba(199, 58, 36, 0.045); }
.chart-row.leader .nm { border-bottom: 2px solid var(--shu); }

/* ------------------------------------------------------------- index page */

.index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0; }
.index-item {
  outline: 1px solid var(--rule); outline-offset: -1px;
  padding: 0.7rem 0.9rem; text-decoration: none; display: block;
}
.index-item:hover { background: var(--paper-2); }
.index-item .nm { font-size: 1.0625rem; display: block; }
.index-item .jp { font-family: var(--jp); font-size: 0.875rem; color: var(--ink-2); display: block; }
.index-item .rk { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-top: 0.25rem; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 40rem) {
  .hero-grid { grid-template-columns: 1fr; }
  .portrait { justify-self: start; }
  .shikona-jp { writing-mode: horizontal-tb; text-orientation: mixed; font-size: 2.5rem; }
  .banzuke-row { grid-template-columns: 1fr; gap: 0.15rem; text-align: center; padding: 0.7rem 0; }
  .bz-east, .bz-west { text-align: center; }
  .bz-rank { order: -1; }
  .bout { grid-template-columns: 1fr; gap: 0.35rem; text-align: center; }
  .bout .side.east, .bout .side.west { text-align: center; align-items: center; }
  .record-row { grid-template-columns: 4.5rem 1fr; }
  .record-row .tally { grid-column: 2; }
  .chart-row { grid-template-columns: 2.5rem 1fr 3.4rem 3.2rem; row-gap: 0.3rem; }
  .chart-row .hoshitori { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* -------------------------------------------------------------- storylines */

/* Prose, not tiles. The engine writes sentences in the card's voice, so they
   are set the way the card sets its notes: one measure, a hairline between
   items, and the day's lead a step larger — hierarchy by size, as the sheet
   carries it. No colour but ink; the names link, and that is all. */
.stories { list-style: none; max-width: 44rem; margin: 0.6rem 0 0; }
.story {
  padding: 0.55rem 0; border-bottom: 1px solid var(--rule);
  font-size: 1rem; line-height: 1.55; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.story:last-child { border-bottom: 0; }
.story a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-heavy); }
.story a:hover { border-bottom-color: var(--ink); }
.story-lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.45; color: var(--ink); }
.story-minor { font-size: 0.875rem; color: var(--ink-faint); }
.story-when {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: 0.45rem; white-space: nowrap;
}
.stories-front .story-lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.stories-card { max-width: none; }
/* The results day. The day's own sentences lead the page under the hero; a
   sentence about one bout sits under that bout, across all three columns, so
   it reads as a caption to the result rather than a fourth cell. Set a step
   smaller than a story so the bout — the names and the technique — stays the
   thing the eye lands on. */
.stories-day { margin: 0.2rem auto 1.4rem; max-width: 46rem; }
.bout .bout-story { grid-column: 1 / -1; margin: 0.15rem 0 0; max-width: none; }
.bout .bout-story .story {
  padding: 0; border-bottom: 0; font-size: 0.9375rem; line-height: 1.5;
  text-align: center; color: var(--ink-2);
}
.story-nav { margin-top: 2rem; font-size: 0.8125rem; color: var(--ink-faint); }
.story-nav a { color: var(--ink-2); }

/* The English name beneath a kimarite. Set in the size and colour the card
   uses for a unit under a number: the sport's word leads, the translation
   supports. Absent for techniques with no citable English name, which then
   render exactly as they did before build 38. */
.kim-en {
  display: block; font-size: 0.6875rem; line-height: 1.3;
  color: var(--ink-faint); letter-spacing: 0.04em;
}
/* In a sentence the name stays on the line, parenthetical, upright against
   the italic romaji so the two read as term and gloss rather than one phrase. */
.now-kim .kim-en {
  display: inline; margin-left: 0.3rem; font-style: normal; letter-spacing: 0.03em;
}
.now-kim .kim-en::before { content: "("; }
.now-kim .kim-en::after { content: ")"; }

/* The tournament day, in the masthead, for the fifteen days a year it exists.
   Sized to sit under the wordmark rather than compete with it: this is a
   status label that happens to be a link, not a nav item. The vermillion
   belongs to the day itself, which is the one thing on the page that changes
   every morning. */
.daybadge {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  text-decoration: none; color: var(--ink-2);
  padding: 0.1rem 0.45rem; border: 1px solid var(--rule-heavy); border-radius: 2px;
  font-size: 0.75rem; letter-spacing: 0.06em; white-space: nowrap;
}
.daybadge:hover { border-color: var(--ink); color: var(--ink); }
.daybadge .d { font-variant-numeric: tabular-nums; }
.daybadge .jp { font-size: 0.8125rem; color: var(--ink); letter-spacing: 0.04em; }
.daybadge .st { font-size: 0.6875rem; color: var(--shu); letter-spacing: 0.08em; }

/* The days of a tournament, and the tournaments on record. Both exist because
   the pages they point at were in the sitemap and linked from nowhere: 185 of
   312 URLs were unreachable by following links, and Search Console reported
   306 as "Discovered - currently not indexed". Set as quiet index rows, not
   navigation: they are the bottom of a page, read after the chart. */
.daystrip { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; }
.daystrip a {
  display: block; min-width: 2.1rem; padding: 0.3rem 0.4rem; text-align: center;
  border: 1px solid var(--rule); text-decoration: none; color: var(--ink-2);
  font-size: 0.8125rem; font-variant-numeric: tabular-nums;
}
.daystrip a:hover { border-color: var(--ink); color: var(--ink); }

.archive { list-style: none; margin: 0.6rem 0 0; column-width: 13rem; column-gap: 2rem; }
.archive li {
  break-inside: avoid; padding: 0.35rem 0; border-bottom: 1px solid var(--rule);
  font-size: 0.875rem; display: flex; justify-content: space-between; gap: 1rem;
}
.archive li.here { color: var(--ink); font-weight: 600; }
.archive a { text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.archive a:hover { color: var(--ink); text-decoration: underline; }
.archive .sheet { font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.04em; }

/* What the stories page holds, and when it will hold more. Set as a second
   lede rather than a banner: it is orientation, not a warning, and the page is
   not in trouble when the tournament simply has not started. */
.stories-when {
  margin-top: 0.75rem; max-width: 44rem;
  font-size: 0.875rem; color: var(--ink-faint); letter-spacing: 0.01em;
}