/* Bushels. One printed field issue on cream paper, built to his pixel poster.
   Three faces, each with one job:
     Pixeloid Sans   the display words and the big figures. A 9 px bitmap: only ever large.
     Departure Mono  codes and the contract address, where every character has to be told apart.
     Public Sans     everything that is read as language. The face the US government publishes
                     its own pages in, which is where this page's numbers come from. */

@font-face {
  font-family: "Pixeloid";
  src: url("/fonts/PixeloidSans.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Pixeloid";
  src: url("/fonts/PixeloidSans-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Departure";
  src: url("/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/PublicSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  --paper: #f2ebdc;
  --paper-deep: #e7dfcd;
  --ink: #0a0a0a;
  --ink-soft: #443e33;     /* 8.0 : 1 on the paper, measured, so a label is never a grey whisper */
  --red: #e9170f;
  --steel: #525a62;
  --steel-mid: #8a9199;
  --steel-light: #b4b4b4;
  --olive: #aecd2a;
  --orange: #ee7a08;
  --cyan: #00bee0;
  --gold: #e2a617;
  --bone: #d8d2c2;

  --corn: #ee7a08;
  --soy: #aecd2a;
  --cotton: #d8d2c2;
  --sorghum: #e9170f;
  --wheat: #e2a617;

  --display: "Pixeloid", "Courier New", monospace;
  --code: "Departure", "Courier New", monospace;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --t-body: 18px;       /* anything that is a sentence */
  --t-label: 17px;      /* the small capitals over a figure */
  --t-meta: 16px;       /* the smallest type on the page, and the floor */
  --t-code: 22px;       /* Departure is an 11 px bitmap: multiples of 11 only */
  --t-section: 54px;
  --t-num-big: 45px;
  --t-num-mid: 36px;
  --tr-label: 0.05em;   /* enough to open small capitals, not enough to break a word apart */

  --gap: 36px;
  --pad: 44px;          /* the sheet's own margin, the poster's print margin */
  --plate-pad: 32px;    /* window body inset */
  --band-h: 196px;      /* the top band: the crop cells and the punch card are cut to it */

  /* The nine sliced ink frame. border-image paints the slice INWARD over the padding, so every
     plate's padding has to absorb the border as well as its own 1 em of air. */
  --slice: 28;
  --border: 28px;
}

* { box-sizing: border-box; }

html {
  overflow-x: clip;               /* never overflow-x: hidden: it freezes sticky and clips the page */
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: url("/img/paper.png");
  background-size: 512px 512px;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A bitmap face is drawn, not rendered: it only looks right with the antialiasing turned off. */
.display, .spec-title, .band-title, .rl-pct, .bignum, .midnum, .wc-pct,
.step b, .split-cell b, .token-head b, .punch, .punch b, .ca {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
}

img { max-width: 100%; height: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 16px 24px;
  font-family: var(--body); font-size: var(--t-label); z-index: 50;
}
.skip:focus { left: 16px; top: 16px; }

:focus-visible { outline: 4px solid var(--cyan); outline-offset: 3px; }

/* ---------------------------------------------------------------- the sheet */

.sheet {
  max-width: 1860px;
  margin: 0 auto;
  padding: 26px var(--pad) 84px;
  position: relative;
  overflow-x: clip;
}
.sheet::before {           /* the printed rule that makes the page a sheet */
  content: "";
  position: absolute;
  inset: 12px 14px;
  border: 2px solid var(--ink);
  pointer-events: none;
  z-index: 3;
}

/* ---------------------------------------------------------------- the display words
   The word is still the loudest thing on the sheet, but it lives in its own band now: the band
   is as tall as the word's own line box, descender included, and carries the air under it, so
   nothing the word does can ever reach the row below. */

.displayband { display: block; padding-bottom: 20px; }
.displayband-ink { padding: 10px 0 0; }

.display {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 110px;                  /* JS fits it to the sheet; this is the pre-paint value */
  line-height: 1.18;                 /* the line box holds the y's tail: nothing overhangs */
  letter-spacing: -0.012em;
  margin: 0;
  padding: 0;
  width: max-content;                /* so the fit measures the WORD, never the column */
  max-width: none;
  white-space: nowrap;
  text-transform: lowercase;
}
.display-red { color: var(--red); margin-left: -0.055em; }
.display-ink { color: var(--ink); margin-left: -0.055em; }

/* ---------------------------------------------------------------- the middle zone */

.screen { position: relative; z-index: 2; }

.middle {
  display: grid;
  grid-template-columns: 352px minmax(0, 1fr) 352px;
  gap: var(--gap);
  align-items: start;
  margin-top: 10px;
}

/* left: the spec column */
.spec { padding-top: 2px; }
.seal { width: 72px; height: 72px; display: block; image-rendering: auto; }
.spec-title {
  font-family: var(--display); font-weight: 700; font-size: 45px; line-height: 1;
  margin: 18px 0 0;
}
.spec-sub {
  display: block; font-family: var(--body); font-weight: 600; font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); margin-top: 10px;
}
.spec-body { margin: 0 0 16px; max-width: 46ch; }
.barcode { display: block; width: 240px; height: auto; margin: 22px 0 18px; image-rendering: auto; }

hr.dash {
  border: 0; height: 2px; margin: 18px 0;
  background-image: repeating-linear-gradient(to right, var(--ink) 0 8px, transparent 8px 14px);
}

.spec-rows { margin: 0; }
/* The rule under a spec row is printed by ::after, so the row itself is not a framed box and
   its label can sit flush with the column, exactly as the poster sets it. */
.spec-row {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 11px 0 13px;
  position: relative;
  font-family: var(--body); font-size: var(--t-label);
}
.spec-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background-image: repeating-linear-gradient(to right, rgba(10,10,10,0.55) 0 4px, transparent 4px 9px);
}
.spec-row dt { letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.spec-row dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.spec-row a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* centre: the field */
.fieldwrap { min-width: 0; display: flex; flex-direction: column; }

.rowlabels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;              /* the same step the rail puts under its punch card */
}
.rowlabel {
  appearance: none;
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 38px 26px 22px;            /* the colour strip lives in the top inset */
  min-height: var(--band-h);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto auto 1fr;  /* the last row is the status slot, always reserved */
  gap: 2px;
  align-content: start;
  position: relative;
}
.rowlabel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 16px; background: var(--c, var(--ink));
  border-bottom: 3px solid var(--ink);
}
.rowlabel .rl-name {
  font-family: var(--body); font-weight: 600; font-size: var(--t-label);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.rowlabel .rl-pct { font-family: var(--display); font-weight: 700; font-size: var(--t-num-big); line-height: 1.1; }
.rowlabel .rl-delta { font-family: var(--body); font-size: var(--t-meta); color: var(--ink-soft); }
.rowlabel .rl-state {
  align-self: end; min-height: 1.4em; white-space: nowrap;
  font-family: var(--body); font-weight: 600; font-size: var(--t-meta);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: transparent;
}
.rowlabel:hover, .rowlabel:focus-visible { background: var(--ink); color: var(--paper); }
.rowlabel:hover .rl-delta, .rowlabel:focus-visible .rl-delta { color: var(--paper); }
.rowlabel[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rowlabel[aria-pressed="true"] .rl-delta { color: var(--paper); }
.rowlabel[aria-pressed="true"] .rl-state { color: var(--cyan); }
.rowlabel.is-winner .rl-state { color: var(--red); }

.canvaswrap { position: relative; }
#plot { display: block; width: 100%; height: auto; aspect-ratio: 185 / 92; touch-action: manipulation; }
.canvas-note {
  margin: 10px 0 0;
  font-family: var(--body); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft);
  text-align: center;
}

/* right: the rail */
.rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }

.punchcard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.punch {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
  min-height: 48px; padding: 10px 20px;
  border: 3px solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--body); font-weight: 600; font-size: var(--t-label); line-height: 1.2;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
/* The card's own code stays a bitmap: it is a code, not a word. The name beside it is read. */
.punch b { font-family: var(--code); font-size: var(--t-code); line-height: 1; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 400; }
.punch:hover, .punch:focus-visible { background: var(--ink); color: var(--paper); }
.punch:hover b, .punch:focus-visible b { color: var(--cyan); }
.punch.is-open { background: var(--ink); color: var(--paper); }
.punch.is-open b { color: var(--cyan); }

/* Above the fold on a desktop the punch card is cut to the crop cells' own height, so the two
   bands start and end on the same two lines and the rail's box meets the top of the field. */
@media (min-width: 1181px) {
  .punchcard { height: var(--band-h); grid-auto-rows: minmax(0, 1fr); }
}

.railbox {
  min-width: 0;
  border: 3px solid var(--ink);
  padding: 26px var(--plate-pad) 28px;
  background: rgba(255, 255, 255, 0.22);
}
.railbox-title {
  margin: 0; font-family: var(--body); font-weight: 600; font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft);
}
.railbox-sub {
  margin: 4px 0 0; font-family: var(--body); font-size: var(--t-meta);
  letter-spacing: normal; text-transform: uppercase; color: var(--ink-soft);
}
.bignum {
  margin: 6px 0 0; font-family: var(--display); font-weight: 700;
  font-size: var(--t-num-big); line-height: 1; color: var(--red);
  font-variant-numeric: tabular-nums;
}
.midnum {
  margin: 6px 0 0; font-family: var(--display); font-weight: 700;
  font-size: var(--t-num-mid); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.railrow {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  font-family: var(--body); font-size: var(--t-label); padding: 9px 0;
}
.railrow span { letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); }
.railrow b { font-weight: 600; }

/* ---------------------------------------------------------------- the imprint bar */

.imprint {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: var(--gap);
  align-items: end;
  margin-top: 26px;
}
.imprint-left { display: flex; align-items: center; gap: 18px; padding-bottom: 10px; }
.regmark {
  width: 46px; height: 46px; flex: none;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat,
    radial-gradient(circle, transparent 0 13px, var(--ink) 13px 15px, transparent 15px);
}
.imprint-line {
  font-family: var(--body); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft);
}

/* ---------------------------------------------------------------- plates */

.plate {
  border: 3px solid var(--ink);
  background: rgba(255, 255, 255, 0.24);
}
.plate-title {
  margin: 0;
  background: var(--ink); color: var(--paper);
  font-family: var(--body); font-weight: 600; font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 28px;
}
.plate-body { padding: var(--plate-pad); }
.plate-body > :first-child { margin-top: 0; }
.plate-body > :last-child { margin-bottom: 0; }

.tokenbox { background: rgba(255, 255, 255, 0.34); }
.ca-label {
  margin: 0 0 10px; font-family: var(--body); font-weight: 600; font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft);
}
.ca {
  margin: 0 0 16px;
  font-family: var(--code); font-size: var(--t-code);
  background: var(--ink); color: var(--paper);
  padding: 18px 24px;
  overflow-wrap: anywhere; min-width: 0;
  user-select: all;
}
.ca.is-empty { color: var(--steel-mid); user-select: none; }

.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.key {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 0 1.4em; line-height: 1; white-space: nowrap;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-weight: 600; font-size: var(--t-label);
  letter-spacing: 0.04em; text-transform: lowercase; text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: none;
}
.key img { height: 20px; width: auto; flex: none; }
.key:hover, .key:focus-visible { background: var(--ink); color: var(--paper); }
.key:hover img, .key:focus-visible img { filter: invert(1); }
.key:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.key-wide { width: 100%; }
.key[aria-disabled="true"], .key:disabled {
  opacity: 0.4; cursor: not-allowed; box-shadow: none; pointer-events: none;
}
.key.is-done { background: var(--olive); }

.chips { list-style: none; display: flex; gap: 12px; margin: 22px 0 0; padding: 0; }
.chips li { width: 34px; height: 22px; background: var(--c); border: 3px solid var(--ink); }

/* ---------------------------------------------------------------- the bands below */

.band { padding-top: 96px; position: relative; z-index: 2; }
.band-title {
  font-family: var(--display); font-weight: 700; font-size: var(--t-section);
  line-height: 1.1; margin: 0 0 12px;
}
.band-lede { margin: 0 0 28px; max-width: 72ch; }

.feed { display: grid; gap: 18px; }
.empty {
  font-family: var(--body); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft);
  border: 2px dashed var(--ink); padding: 28px 32px; margin: 0;
}

.week { border: 3px solid var(--ink); background: rgba(255, 255, 255, 0.3); }
.week-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; align-items: baseline;
  background: var(--ink); color: var(--paper);
  padding: 14px 28px;
  font-family: var(--body); font-size: var(--t-label); letter-spacing: 0.05em; text-transform: uppercase;
}
.week-head b { color: var(--cyan); font-weight: 600; }
.week-body { padding: 26px var(--plate-pad); display: grid; gap: 20px; }
.week-crops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.week-crop { border: 3px solid var(--ink); padding: 36px 30px 24px; position: relative; }
.week-crop::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 14px; background: var(--c); border-bottom: 2px solid var(--ink); }
.week-crop .wc-name { display: block; min-height: 2lh; font-family: var(--body); font-weight: 600; font-size: var(--t-meta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
@supports not (min-height: 2lh) { .week-crop .wc-name { min-height: 48px; } }
.week-crop .wc-pct { display: block; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.2; }
.week-crop .wc-delta { display: block; font-family: var(--body); font-size: var(--t-meta); }
.week-crop.is-winner { background: var(--ink); color: var(--paper); }
.week-crop.is-winner .wc-name { color: var(--cyan); }
.week-lines { display: grid; gap: 10px; }
.week-line { display: flex; flex-wrap: wrap; gap: 10px 20px; font-family: var(--body); font-size: var(--t-label); }
.week-line span { letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); }
.week-line a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }

.mine, .offseason { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.mine .plate { display: flex; flex-direction: column; }
.mine .plate-body { flex: 1; }
.offseason { grid-template-columns: minmax(0, 1fr); }
.mine-state { margin: 0 0 18px; }
.guessrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 20px 0; }
.guessrow label { font-family: var(--body); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); }
.guessrow input {
  font-family: var(--code); font-size: var(--t-code);
  border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 12px 24px; min-height: 54px; width: 200px;
}

.seasonwrap { display: grid; gap: 26px; }
#season-chart { display: block; width: 100%; height: auto; aspect-ratio: 56 / 15; border: 3px solid var(--ink); background: rgba(255,255,255,0.3); }
.standings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.steps { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.step { border: 3px solid var(--ink); padding: 26px 30px 30px; background: rgba(255, 255, 255, 0.24); }
.step b {
  display: block; font-family: var(--display); font-weight: 700; font-size: var(--t-num-big); line-height: 1;
  color: var(--red); margin-bottom: 12px;
}
.step-title {
  margin: 0 0 8px; font-family: var(--body); font-weight: 600; font-size: var(--t-label);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.step p:last-child { margin: 0; }
.risks { max-width: 1100px; }
.risks p { margin: 0 0 14px; }
.risk-line { position: relative; padding-top: 20px; margin-top: 22px !important; color: var(--ink-soft); }
.risk-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background-image: repeating-linear-gradient(to right, rgba(10,10,10,0.55) 0 4px, transparent 4px 9px); }

[hidden] { display: none !important; }

/* -------------------------------------------- the row band answers to its own column, not the window
   Five cells across need about 900 px. Below that the band becomes a list, whatever the window is
   doing: a container query asks the cell, a media query would only guess at it. */

.fieldwrap { container-type: inline-size; container-name: field; }

@container field (max-width: 960px) {
  /* Once the five cells are a list, the field goes FIRST: the one object has to arrive on the
     first screen, and the five figures read as its legend underneath it. */
  .canvaswrap { order: 1; }
  .rowlabels { order: 2; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 22px 0 0; }
  .rowlabel {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 18px;
    min-height: 82px;
    padding: 20px 30px 20px 46px;
  }
  .rowlabel::before { inset: 0 auto 0 0; width: 16px; height: auto; border: 0; border-right: 3px solid var(--ink); }
  .rowlabel .rl-name, .rowlabel .rl-pct { white-space: nowrap; }
  .rowlabel .rl-pct { font-size: 36px; }
  .rowlabel .rl-delta { justify-self: end; white-space: nowrap; }
  .rowlabel .rl-state { align-self: center; min-height: 0; min-width: 6.4em; text-align: right; }
}
/* One line per crop on a phone: name, figure, week. The pick shows by inverting the whole cell,
   so choosing one moves nothing. */
@container field (max-width: 700px) {
  .rowlabel {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 16px; min-height: 74px; padding: 18px 26px 18px 42px;
  }
  .rowlabel .rl-name, .rowlabel .rl-pct, .rowlabel .rl-delta { white-space: nowrap; }
  .rowlabel .rl-pct { font-size: 36px; }
  .rowlabel .rl-delta { justify-self: end; }
  .rowlabel .rl-delta i { display: none; }
  .rowlabel .rl-state { display: none; }
}
@container field (max-width: 360px) {
  .rowlabel { gap: 12px; padding: 16px 22px 16px 38px; }
  .rowlabel .rl-pct { font-size: 27px; }
}
/* Side by side, the cells carry their own inset: the longest crop name has to stay on one line. */
@container field (min-width: 961px) {
  .rowlabel { padding: 36px 30px 20px; }
  .rowlabel .rl-name { letter-spacing: 0.05em; }
}

/* ---------------------------------------------------------------- widths */

@media (max-width: 1620px) {
  :root { --gap: 30px; --pad: 32px; --t-section: 45px; --t-num-big: 45px; --t-num-mid: 27px; --band-h: 196px; }
  .punch { gap: 10px; padding: 10px 20px; font-size: var(--t-meta); }
  .railbox.plate-frame { padding: 16px 16px 18px; }
  .middle { grid-template-columns: 320px minmax(0, 1fr) 320px; }
  .imprint { grid-template-columns: minmax(0, 1fr) 500px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  :root { --t-num-big: 54px; }
  .middle { grid-template-columns: minmax(0, 1fr); }
  .fieldwrap { order: 1; }
  .rail { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .spec { order: 3; }
  .punchcard { grid-column: 1 / -1; order: 2; }
  .railbox { order: 1; }
  .imprint { grid-template-columns: minmax(0, 1fr); }
  .mine { grid-template-columns: minmax(0, 1fr); }
  .week-crops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .standings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --pad: 18px; --gap: 22px; --plate-pad: 26px; --t-section: 36px; --t-num-big: 45px; --t-num-mid: 27px; }
  .sheet { padding: 18px var(--pad) 56px; }
  .sheet::before { inset: 8px 8px; }
  .displayband { padding-bottom: 14px; }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .railbox { padding: 26px 30px 28px; }
  .punchcard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keys { grid-template-columns: minmax(0, 1fr); }

  /* One crop per row: the name, then the figure, then the week under both. */
  .week-crops, .standings { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .week-crop {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline;
    gap: 16px; padding: 18px 30px 18px 44px; white-space: nowrap;
  }
  .week-crop .wc-name i, .week-crop .wc-delta i { display: none; }
  .week-crop .wc-name { min-height: 0; }
  .week-crop .wc-delta { justify-self: end; }
  .week-crop::before { inset: 0 auto 0 0; width: 14px; height: auto; border: 0; border-right: 3px solid var(--ink); }

  .steps { grid-template-columns: minmax(0, 1fr); }
  .band { padding-top: 64px; }
  #plot { aspect-ratio: 16 / 9; }
}

@media (max-width: 430px) {
  :root { --t-num-big: 27px; --t-num-mid: 22px; --t-section: 27px; }
  .punchcard { grid-template-columns: minmax(0, 1fr); }
  .punch { gap: 14px; min-height: 56px; padding: 12px 22px; }
}

/* The delta's own parts: the number always, the words only where they fit. */
.rowlabel .rl-delta b { font-weight: 600; }
.rowlabel .rl-delta i { font-style: normal; }

/* ---------------------------------------------------------------- the generated ink frame
   The two blocks his poster actually boxes (its right rail and its bottom right box) are a real
   printed plate, not a CSS border: the frame was drawn by Codex, keyed, trimmed to its outer rule
   and nine-sliced here. border-image paints the slice INWARD over the padding, so the body's own
   padding has to absorb the border as well as its 1 em of air. */
.plate-frame {
  border: 18px solid transparent;
  border-image-source: url("/img/frame.png");
  border-image-slice: 37 fill;
  border-image-width: 18px;
  border-image-repeat: stretch;
  background: none;
  padding: 0;
}
.plate-frame > .plate-body,
.plate-frame.railbox { padding: 16px 20px 20px; }
.railbox.plate-frame { padding: 18px 22px 22px; }

.token-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  margin: 0 0 20px;
}
.token-head b {
  font-family: var(--display); font-weight: 700; font-size: 45px; line-height: 1; color: var(--red);
}
@media (max-width: 430px) { .token-head b { font-size: 36px; } }
.token-head span {
  font-family: var(--body); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft);
}

/* Where the money goes, as three printed cells. */
.split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 34px; }
.split-cell { border: 3px solid var(--ink); padding: 30px 30px 32px; background: rgba(255, 255, 255, 0.24); }
.split-cell b {
  display: block; font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 1;
  color: var(--red);
}
.split-cell span {
  display: block; margin: 6px 0 14px;
  font-family: var(--body); font-weight: 600; font-size: var(--t-label);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft);
}
.split-cell p { margin: 0; }
.week-crop.is-quiet { opacity: 0.55; }
@media (max-width: 760px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .split-cell { padding: 26px 34px 28px; }
  .split-cell b { font-size: 54px; }
}

.week-crop i { font-style: normal; }

/* On the narrowest phones a week's crop takes two lines rather than running off its cell. */
@media (max-width: 430px) {
  .week-crop {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    padding: 16px 28px 16px 42px;
    white-space: nowrap;
  }
  .week-crop .wc-name { grid-column: 1 / -1; min-height: 0; }
  .week-crop .wc-pct { grid-column: 1; font-size: 27px; }
  .week-crop .wc-delta { grid-column: 2; justify-self: end; }
}

/* The season standings reuse the crop cell but their third line is a sentence, so it wraps. */
.standings .week-crop { white-space: normal; }
.standings .week-crop .wc-name { min-height: 0; }
.standings .week-crop .wc-delta { grid-column: 1 / -1; justify-self: start; }