/* Effective Botism. One printed sheet: a cyan halftone plate on a black field, built to his
   poster (art/ref/poster.jpg) and measured off it, not remembered.

   His frame, 736 x 920: black field, a 112 px band of giant condensed caps along the long edge,
   a plate 79.3% of the width that runs off the opposite edge with no margin, marks along the two
   short edges, one halftone screen over everything. The page is landscape, so the band of type
   lies along ITS long edge, which is the top: that is the only rotation, because no text on this
   site is ever set vertically. */

@font-face {
  font-family: Anton;
  src: url("/assets/fonts/anton.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Sligoil;
  src: url("/assets/fonts/sligoil.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Sligoil;
  src: url("/assets/fonts/sligoil-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Sligoil;
  src: url("/assets/fonts/sligoil-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* measured off his jpeg */
  --field: #000000;
  --ink: #05161c;
  --plate-lit: #39bcd6;
  --plate: #2f8fa6;
  --plate-deep: #246f82;
  --paper: #9fe7f6;      /* 15:1 on the field */
  --muted: #57a9bf;      /* 7.6:1 on the field */
  --mark: #6ad1e4;

  /* ink on the plate, as shares of the ink, so a rule is never a colour nobody chose */
  --rule: rgba(5, 22, 28, .30);
  --rule-hard: rgba(5, 22, 28, .62);
  --ink-soft: rgba(5, 22, 28, .74);

  /* His frame has a black margin on ONE side and none on the other: the plate runs off the edge.
     So the page has a left edge and no right one, and the plate bleeds to the window. */
  --edge: clamp(16px, 4.3vw, 84px);
  --read: 1180px;        /* the measure a block of this page is read at, inside the plate */

  --t-label: 16px;
  --t-body: 17px;
  --t-value: 22px;
  --t-figure: 40px;
  --t-section: clamp(26px, 2.2vw, 32px);
  --t-display: clamp(82px, 11.5vw, 196px);
  --t-stack: clamp(27px, 3.4vw, 58px);
  /* his headline spans 87% of the frame's long side; set on one line, ours spans about 60% of
     the window, which keeps his contrast against 16 px labels without turning a page into a poster */
  --t-word: clamp(34px, 8.4vw, 158px);

  --pad: 32px;
  --row: 46px;
  --key: 50px;
  --tr: .18s cubic-bezier(.3, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --tr: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--field); }

body {
  margin: 0;
  background: var(--field);
  color: var(--paper);
  font: 400 var(--t-body)/1.6 Sligoil, "SFMono-Regular", Consolas, monospace;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* the grain his whole frame carries: even and regular, one tile, never a noise generator */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/assets/img/grain.png") repeat;
  opacity: .5;
  pointer-events: none;
  z-index: 60;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--mark);
  outline-offset: 2px;
}
.plate :focus-visible { outline-color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--mark); color: var(--ink);
  padding: 14px 22px; font-weight: 700; z-index: 90;
}
.skip:focus { left: 12px; top: 12px; }

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

.sheet {
  width: 100%;
  padding: 0 0 0 var(--edge);     /* a black edge on the left, none on the right */
}

/* ---- the masthead: his band of giant caps, lying along the page's long edge -- */

.masthead { padding: 26px var(--edge) 18px 0; }

.wordmark {
  display: block;
  margin: 0;
  font: 400 var(--t-word)/.86 Anton, Impact, sans-serif;
  letter-spacing: -.004em;          /* was -.015em: his own advance over cap height is 0.521 and
                                       that landed on it, but he read the result as too tight.
                                       At -.004em Anton measures 0.538, a hair wider than his. */
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--paper);
  /* the screen lives INSIDE the glyphs, the way his does. The file's darkest value is #59b4ca,
     which is 9.4:1 on the field, so the word never drops below that wherever a dot lands. */
  background-image: url("/assets/img/wordscreen.png");
  background-size: .40em .40em;   /* 6 dots a tile: a pitch of .066em, which is the cap over eleven, his count */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Anton's em box is 1.51 of its size and the line is set at 0.86, so the glyph's measured box
     overflows the line by .325em at each end. The word carries that much air plus the floor the
     rules ask for, and is pulled back by exactly the same amount, so the E still starts on the
     page's left edge and the word sits where it looks like it should. */
  padding: calc(.33em + 22px) 32px;
  /* fit-content, and the pull-back on the LEFT only: a negative margin on both sides of a block
     makes the box wider than its container, which is a sideways scroll on a phone */
  width: fit-content;
  max-width: 100%;
  margin: calc(-.33em - 22px) 0 calc(-.33em - 22px) -32px;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark { -webkit-text-fill-color: var(--paper); background-image: none; }
}
.wordmark .two { opacity: .78; }

/* the line under the word: his marks sit on one baseline beside the type, never floating.
   The rule is drawn, not a border, so this strip is never read as a box its text is pressed into. */
.masthead-side {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  padding-top: 14px;
  flex-wrap: wrap;
}
.masthead-side::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(87, 169, 191, .34);
}

.ident {
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ident b { color: var(--paper); font-weight: 700; }

/* Both sets of marks are one size, one gap and one weight: his review of 2026-10-28 found the
   footer set at 26 px against the masthead's 34, dimmed to 0.62, and drawn in light cyan ON the
   cyan plate, where it simply was not there. The plate set is now the ink set, at full strength,
   the same ink as the line of text beside it. */
.marks {
  display: flex;
  align-items: center;
  gap: 16px;
}
.marks img {
  display: block;
  width: 30px; height: 30px;
}

/* ---- the plate: the object of the page -------------------------------- */

.plate {
  position: relative;
  margin: 0;                        /* the sheet's own left edge is his black margin; the right
                                       edge of the plate is the window, exactly as in his frame */
  /* three layers, in the order a screen print has them: the dot screen his picture measures at
     3.0% of the frame, then the real printed ink (generated, one image, scaled to cover so it
     never seams and never tiles), then the ground the ink sits on */
  background:
    url("/assets/img/screen.png") repeat,
    url("/assets/img/field.webp") no-repeat center / cover,
    linear-gradient(152deg, var(--plate-lit) 0%, var(--plate) 58%, var(--plate-deep) 100%);
  background-size: clamp(84px, 12vw, 232px) clamp(84px, 12vw, 232px), cover, auto;  /* 4 dots a tile: a pitch of 3vw, his 3.0% of the frame */
  border-image: url("/assets/img/plate.png") 72 fill / 72px / 0 stretch;
  color: var(--ink);
  isolation: isolate;
}

.plate a { color: var(--ink); }

.plate-body {
  padding: var(--pad);
}

/* ---- the barcode navigation, in the slot his plate gives its barcode --- */

.scan {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--rule-hard);
  padding: 20px calc(var(--pad) - 22px) 0;
}

.scan a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 22px 12px;
  text-decoration: none;
  min-height: var(--key);
  transition: background var(--tr), transform var(--tr);
}
.scan a img {
  display: block;
  width: 84px; height: 22px;
  object-fit: fill;
  opacity: .5;
}
.scan a span {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.scan a em {
  font-style: normal;
  opacity: .62;
  margin-right: 8px;
}
.scan a:hover { background: rgba(5, 22, 28, .10); }
.scan a:active { transform: translateY(1px); }
.scan a[aria-current="page"] {
  background: var(--ink);
  color: var(--plate-lit);
}
.scan a[aria-current="page"] img { opacity: 1; filter: invert(1); }
.scan a[aria-current="page"] em { opacity: .72; }

/* ---- rows, labels, figures -------------------------------------------- */

.label {
  margin: 0;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section-title {
  margin: 0 0 6px;
  font: 400 var(--t-section)/1.14 Anton, Impact, sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.value {
  font-size: var(--t-value);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.figure {
  font: 400 var(--t-figure)/1 Anton, Impact, sans-serif;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.quiet { color: var(--ink-soft); }
.on-field .quiet { color: var(--muted); }

/* ---- the week: the one display element of the first screen ------------- */

.week {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.week-main,
.week-mid,
.week-side { padding: 32px var(--pad) 30px; min-width: 0; position: relative; }
/* the rules between the columns are drawn, not borders: Anton's em box is half as tall again as
   its line, so a display numeral inside a bordered column reads as pressed to the edge even when
   its ink is nowhere near it */
.week-main::after,
.week-mid::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2px;
  background: var(--rule-hard);
}
.week-side { display: flex; flex-direction: column; gap: 24px; }

/* His plate carries one black silhouette that fills about half its height. Ours is this: the
   count and the two words beside it, set solid in the display face, as one mass of ink.

   His review of 2026-10-28, measured at 1920 before the fix: the two stacked words ran at a
   line-height of 0.84, which on Anton is a 52 px advance for a 62 px size, so the metric boxes of
   the two lines overlapped by 41 px and the words read as one blot; the tracking was negative on
   an already condensed face; the numeral sat 30 px from a 196 px word; and the two masses lined
   up on nothing, 43 px apart. All four are set here. */
.count {
  margin: 10px 0 0;
  display: flex;
  align-items: center;             /* the two masses share a centre line, not a stray edge */
  gap: clamp(22px, 2.6vw, 48px);
}
.count b {
  font: 400 var(--t-display)/.9 Anton, Impact, sans-serif;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.count span {
  font: 400 var(--t-stack)/1.1 Anton, Impact, sans-serif;
  letter-spacing: .012em;          /* opened: Anton's caps stand too close for two stacked lines */
  text-transform: uppercase;
}
.against {
  margin: 4px 0 0;
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* the ghosts: his silhouette repeats to the right, here the weeks before this one */
.weeks-strip { padding: 24px var(--pad) 30px; position: relative; }
.weeks-strip::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rule-hard);
}
.ghosts {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 18px 0 0;
  min-height: 130px;
  max-width: 900px;   /* a bar taller than it is wide reads as a count, a slab does not */
}
.ghost {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}
/* Every week is printed in the same solid ink: a past week is not a faded one. What makes this
   week this week is its label, which says so in words, and the rule under it. */
.ghost .bar { background: var(--ink); min-height: 6px; transition: height var(--tr); }
.ghost .cap {
  font-size: var(--t-label);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-top: 8px;
}
.ghost.now .bar { box-shadow: 0 10px 0 0 var(--ink); }
.ghost.now .cap { color: var(--ink); font-weight: 700; padding-top: 18px; }

.verdict {
  display: inline-block;
  margin: 24px 0 0;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--plate-lit);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.verdict.slow { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--rule-hard); }

.reading { display: flex; flex-direction: column; gap: 4px; }
.reading .figure { display: block; }
.reading .quiet { margin: 0; font-size: var(--t-label); line-height: 1.5; }
/* a reading that is a word, not a number, is not set in the display face */
.figure.word { font: 700 var(--t-value)/1.3 Sligoil, Consolas, monospace; letter-spacing: .02em; }

/* ---- the ink block: the contract and the links ------------------------- */

.block {
  margin: 0 var(--pad) var(--pad);
  max-width: var(--read);
  border-image: url("/assets/img/ink.png") 56 fill / 56px / 0 stretch;
  color: var(--plate-lit);
  padding: 28px 34px 30px;
}
/* Only the links that are NOT keys take the block's own ink. A key paints its own label: without
   this, an ENABLED key is cyan on cyan and its word disappears, which only ever happens once the
   contract address exists and the page lights up, so no empty-state pass can see it. */
.block a:not(.key) { color: var(--plate-lit); }
.block .label { color: #8ad9ea; }

.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.block-head b {
  font: 400 clamp(24px, 3vw, 30px)/1 Anton, Impact, sans-serif;
  letter-spacing: 0;
  color: #bdeefa;
}

.mint {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}
.mint code {
  flex: 1 1 320px;
  max-width: 760px;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  background: rgba(154, 231, 246, .10);
  box-shadow: inset 0 0 0 1px rgba(154, 231, 246, .32);
  font: 400 var(--t-label)/1.5 Sligoil, Consolas, monospace;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  user-select: all;
  color: #cdf2fb;
  min-height: var(--key);
}
.mint code.empty { color: #8ad9ea; user-select: none; }

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--key);
  padding: 0 1.3em;
  border: 0;
  background: var(--plate-lit);
  color: var(--ink);
  font: 700 var(--t-label)/1 Sligoil, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--tr), background var(--tr), opacity var(--tr);
  white-space: nowrap;
}
.key:hover { background: #5fd2e8; }
.key:active { transform: translateY(2px); }
.key[aria-disabled="true"], .key:disabled {
  background: transparent;
  color: #8ad9ea;
  box-shadow: inset 0 0 0 2px rgba(154, 231, 246, .42);
  opacity: .74;                                   /* dimmed, never grey on grey */
  cursor: not-allowed;
}
.key img { width: 18px; height: 18px; display: block; }
.key.ghost-key { background: transparent; color: #bdeefa; box-shadow: inset 0 0 0 2px rgba(154, 231, 246, .5); }

.links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 210px));
  justify-content: start;
  gap: 10px;
  margin-top: 14px;
}
.links .key { width: 100%; }

.say {
  margin: 12px 0 0;
  font-size: var(--t-label);
  color: #8ad9ea;
  min-height: 1.5em;
}

/* ---- tables of the mechanic ------------------------------------------- */

/* The rule between two rows is DRAWN, not a border. A border would make every row a box, and a
   box wants an em of air on each side, which on a 320 px screen is air the page does not have:
   the first attempt pulled the list out with negative margins and pushed it off the window. */
.rows { display: flex; flex-direction: column; max-width: calc(var(--read) + 320px); }

.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  min-height: var(--row);
}
.row::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule);
}
.row:first-child::before { display: none; }

.row p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.row .state { overflow-wrap: anywhere; }
.row .name { font-weight: 700; overflow-wrap: anywhere; }
.row .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* the shapes the lists take. They live here and not in the page modules, so one width can be
   changed for every list at once and a phone never gets a five column table. */
.r-recent { grid-template-columns: minmax(0, 1.3fr) auto minmax(0, .9fr) minmax(0, .9fr); }
.r-feed { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, .9fr) minmax(0, .9fr) auto; }
.r-weeks { grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) auto minmax(0, 1.4fr); }
.r-sources { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, 1.6fr); }
.r-holder { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.r-two { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

@media (max-width: 1500px) {
  .r-sources { grid-template-columns: minmax(0, 1fr) minmax(0, .6fr) minmax(0, .7fr) minmax(0, .5fr); }
  .r-sources > :nth-child(n+5) { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 1100px) {
  .r-feed, .r-recent { grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); }
  .r-feed > :nth-child(n+4), .r-recent > :nth-child(n+4) { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 900px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .row > :nth-child(n+3) { grid-column: 1 / -1; text-align: left; }
  .row .num { text-align: left; white-space: normal; }
  .row > :nth-child(2) { text-align: right; }
}

.kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 8px 18px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px var(--rule-hard);
}
.kind.major { background: var(--ink); color: var(--plate-lit); box-shadow: none; }
.kind.minor { background: rgba(5, 22, 28, .22); }

/* a rule under a link is an underline, drawn by the text itself: a box-shadow would make the
   link a box, and a box wants an em of air its own underline does not need */
.out {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--rule-hard);
}
.out:hover { text-decoration-color: currentColor; }

.dot {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--ink);
  margin-right: 10px;
  vertical-align: baseline;
}
.dot.off { background: transparent; box-shadow: inset 0 0 0 2px var(--rule-hard); }

/* ---- prose, steps ------------------------------------------------------ */

.prose { max-width: 62ch; }
.plate-body > .label, .plate-body > p.quiet { max-width: 92ch; }
.on-field > .label { max-width: 92ch; }
.prose p { margin: 0 0 14px; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
/* 34 at the top because Anton's em box runs 10 px past its line at 40 px, and the checker
   measures the em box: the number needs its air measured from the ink, not from the line */
.step { padding: 34px 34px 28px; border-left: 2px solid var(--rule-hard); }
.step:first-child { border-left: 0; padding-left: 0; }
/* the live line under the four steps: its rule is drawn, so the sentence is never read as
   text pressed into a box of its own */
.unit-now { position: relative; grid-column: 1 / -1; margin: 26px 0 0; padding: 22px 34px 0; }
.unit-now::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rule-hard); }

.step .n { font: 400 var(--t-figure)/1 Anton, Impact, sans-serif; display: block; margin-bottom: 8px; }
.step p { margin: 8px 0 0; font-size: var(--t-body); }

/* the register strip: his bottom edge of marks, printed INSIDE the plate */
.register {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px var(--pad) 18px;
  border-top: 2px solid var(--rule-hard);
  flex-wrap: wrap;
}
.register img { width: 30px; height: 30px; display: block; opacity: .74; }   /* .74 is the ink of the text beside it */
.register p {
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- a field section below the plate, in his black ---------------------- */

.on-field { padding: 56px var(--edge) 96px 0; max-width: calc(var(--read) + 400px); }
.on-field .section-title { color: var(--paper); }
.on-field .label { color: var(--muted); }
.on-field .row::before { background: rgba(87, 169, 191, .28); }
.on-field .out { text-decoration-color: rgba(87, 169, 191, .7); }

/* ---- the form on Mine --------------------------------------------------- */

.ask { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; }
.ask input {
  flex: 1 1 340px;
  max-width: 620px;
  min-width: 0;
  min-height: var(--key);
  padding: 12px 18px;
  border: 0;
  box-shadow: inset 0 0 0 2px var(--rule-hard);
  background: rgba(5, 22, 28, .06);
  color: var(--ink);
  font: 400 var(--t-label)/1.5 Sligoil, Consolas, monospace;
  letter-spacing: .02em;
}
.ask input::placeholder { color: rgba(5, 22, 28, .55); }
.ask .key { background: var(--ink); color: var(--plate-lit); }
.ask .key:hover { background: #0b2630; }

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

@media (max-width: 1240px) {
  .week { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .week-mid::after { display: none; }
  .week-side { grid-column: 1 / -1; border-top: 2px solid var(--rule-hard); flex-direction: row; flex-wrap: wrap; gap: 32px; }
  .week-side .reading { flex: 1 1 240px; }
}

@media (max-width: 900px) {
  .week { grid-template-columns: 1fr; }
  .week-main::after, .week-mid::after { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; }
  .week-side { border-top: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3) { border-left: 0; }
  .step:nth-child(n+3) { border-top: 2px solid var(--rule-hard); }
}

@media (max-width: 760px) {
  :root { --pad: 22px; --edge: 14px; }
  .masthead { padding: 20px 14px 14px 0; }
  .masthead-side { gap: 14px; }
  .links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan { padding: 14px 16px 0; }
  .scan a { padding: 10px 16px 12px; }
  .scan a:first-child { padding-left: 16px; }
  .block { margin: 0 var(--pad) var(--pad); padding: 26px 26px 26px; }
}

@media (max-width: 620px) {
  /* the barcode is the navigation's ornament, not its content: on a phone it shrinks so the five
     labels take two rows instead of five, and the week starts above the fold */
  /* measured at the 34 px the wordmark floors to: at -.004em three pairs of letters merged into
     one run of ink, at +.02em all fifteen stand apart with a pixel of air */
  .wordmark { letter-spacing: .02em; }
  .scan { padding: 12px 0 0; }
  .scan a { padding: 8px 16px 10px; gap: 5px; }
  .scan a img { width: 46px; height: 13px; }
  .scan a span { font-size: var(--t-label); }
}

@media (max-width: 560px) {
  :root { --t-figure: 34px; }
  .steps { grid-template-columns: 1fr; }
  .step { border-left: 0; }
  .step + .step { border-top: 2px solid var(--rule-hard); }
  .count { flex-direction: column; gap: 14px; align-items: flex-start; }
  .count i { max-width: none; }
  .marks img { width: 26px; height: 26px; }
  .scan a img { width: 64px; }
}

@media (max-width: 440px) {
  .links { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  :root { --edge: 10px; --pad: 18px; }
  .marks img:nth-child(n+5) { display: none; }
}