/* =================================================================================================
 * Residue Notes 1.2.2, the page furniture for Face and Residue.
 *
 * A page out of this plugin is one counterfoil, and it is read down the sheet in a fixed order: the
 * trail, then the title block with its three cell sum, then the ranking, then the contents bar, then
 * the numbered parts carrying their tables, plates and dimensions, and after those the questions, a
 * care block, and a colophon to close the sheet off.
 *
 * THE ONE MEASURE, which is what this file is here to hold.
 *
 * Whatever stands in the page flow is struck to the whole width of the sheet, left rule across to
 * right rule, and that goes for prose, for headings, for tables, for plates, for the sum, for
 * dimensions, for the contents bar and for the ranking without exception. Nothing in the flow helps
 * itself to a horizontal inset, to a width or to a measure, and prose is never handed a narrower one
 * than the table printed next to it. It holds further down among the media queries too, which is
 * exactly where this network has let it go before: not one declaration at the foot of this file
 * reaches for a horizontal padding, for a horizontal margin, or for a max-width on anything standing
 * in the flow. What a query may move is a grid's column count, the height the lettering is struck
 * at, and whether a table is let loose to scroll inside a box of its own.
 *
 * SIX THINGS ON A PAGE TAKE AN INSET, and each is an object whose edge a reader can see, which is
 * the whole of what earns one: a cell of a table, the frame around a plate, the note ruled down its
 * left side, a cell of the sum, the framed care block, and the age stamp. A rule struck across a
 * block is drawn as a border, and a border takes no horizontal room from it, so a ruled block runs
 * between the sheet's two rules like anything else. Room above and below is free on that argument.
 *
 * A TABLE TOO WIDE FOR A PHONE is wrapped in .rs-scroll and scrolls inside that box, which holds the
 * figures at their printed size and stops the document itself sliding under the reader. The wrapper
 * is an ordinary block of the flow and is struck between the same two rules as all the rest.
 *
 * TOKENS. Ink, lettering, the ladder and the module are spent from the theme, off :root, under the
 * --rs- names. What follows is the fallback denomination list, so a counterfoil still reads with the
 * theme gone, and not one value in it was invented: each is the token precisely as
 * astra-child-denom/style.css strikes it. No ink, no face and no step of space begins in this file.
 *
 * SHARED MARKS. The theme strikes this site's devices once and for the whole of it, so that a
 * dimension, a plate, a note, the age stamp and a small capital label come out the same way wherever
 * they land: .rs-dim, .rs-plate, .rs-note, .rs-18, .rs-cap, .rs-figure, .rs-rev and .rs-tel, with
 * .rs-face-fig and .rs-residue-fig for the two figure colours. Whichever of them a page actually
 * prints are struck again below, to that same drawing, off those same denominations, for the single
 * reason the fallback list exists at all: a counterfoil has to read before the theme arrives, and
 * again if the theme is ever taken off. None of them is drawn differently down there.
 *
 * .rs-face-fig and .rs-residue-fig are the pair no page prints, so they are the pair not struck
 * again. A sum on this site is set inside a cell, of a strip or of the three cell sum, and the cell
 * hands it its colour; a mark kept in reserve for the day somebody wants it drifts out of step.
 * ============================================================================================== */

.rs-sheet {
  --rs-paper: #F7F6F1;
  --rs-panel: #EDEDE4;
  --rs-panel-2: #E0E1D4;
  --rs-ink: #17201D;
  --rs-ink-2: #4C564F;
  --rs-face: #0F5257;
  --rs-face-d: #0A3B3F;
  --rs-residue: #8A3B12;
  --rs-rule: #8C7A3F;
  --rs-hair: #DCDCCE;
  --rs-hair-5: #C4C4B0;
  --rs-letter: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --rs-prose: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rs-figure: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --rs-t-cap: 0.8125rem;
  --rs-t-base: 1.0625rem;
  --rs-t-lead: 1.25rem;
  --rs-t-h3: 1.375rem;
  --rs-t-h2: 1.75rem;
  --rs-t-h1: 2.375rem;
  --rs-t-fig: 1.75rem;
  --rs-step: 0.5rem;
  --rs-gap: 1rem;
  --rs-gap-2: 1.75rem;
  --rs-gap-3: 2.75rem;
  --rs-edge: 2px;
  --rs-line: 1px;

  color: var(--rs-ink);
  font-family: var(--rs-prose);
  font-size: var(--rs-t-base);
  line-height: 1.6;
}

.rs-sheet p,
.rs-sheet li { font-size: var(--rs-t-base); }
.rs-sheet h2,
.rs-sheet h3 { font-family: var(--rs-letter); color: var(--rs-ink); }
.rs-sheet h2 { font-size: var(--rs-t-h2); line-height: 1.22; margin: var(--rs-gap-3) 0 var(--rs-gap); }
.rs-sheet h3 { font-size: var(--rs-t-h3); line-height: 1.3; margin: var(--rs-gap-2) 0 var(--rs-step); }
.rs-sheet a { color: var(--rs-face); }
.rs-sheet a:hover,
.rs-sheet a:focus { color: var(--rs-face-d); }

.rs-cap {
  display: block;
  font-size: var(--rs-t-cap);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
}

/* A quantity inside a sentence, so the same sum lines up with its own column in a table above. */
.rs-figure {
  font-family: var(--rs-figure);
  font-variant-numeric: tabular-nums;
}

/* ---- 1. The trail ---------------------------------------------------------------------------- */
.rs-trail { margin: 0 0 var(--rs-gap); font-size: var(--rs-t-cap); }
.rs-trail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.5em; }
.rs-trail li + li::before { content: "/"; color: var(--rs-rule); margin-right: 0.5em; }
.rs-trail__here { color: var(--rs-ink-2); }

/* ---- 2. The title block ---------------------------------------------------------------------- */
.rs-head {
  border-top: var(--rs-edge) solid var(--rs-ink);
  border-bottom: var(--rs-line) solid var(--rs-rule);
  padding: var(--rs-gap) 0 var(--rs-gap-2);
  margin: 0 0 var(--rs-gap-2);
}

.rs-head__ref {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rs-gap-2);
  margin: 0 0 var(--rs-gap);
  font-family: var(--rs-figure);
  font-size: var(--rs-t-cap);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
}

.rs-head h1 {
  font-family: var(--rs-letter);
  font-size: var(--rs-t-h1);
  line-height: 1.14;
  margin: 0 0 var(--rs-gap);
}

.rs-head__says { font-size: var(--rs-t-lead); line-height: 1.45; margin: 0 0 var(--rs-gap-2); }

/* The three cell sum, the device this whole site is drawn around: the face as struck, what draws it
   down, and the part that will not come off. The third cell is the called one, and the rust it
   carries is spent in one other place on a page and nowhere else, on the number at the head of a
   part. The sum is struck below the standfirst rather than above it, because a figure means nothing
   until the reader has been told what was printed on the voucher it came off. */
.rs-sum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rs-line);
  margin: 0;
  background-color: var(--rs-rule);
  border: var(--rs-line) solid var(--rs-rule);
}

.rs-sum__cell {
  display: block;
  background-color: var(--rs-panel);
  padding: var(--rs-gap);
}

.rs-sum__cell--residue { background-color: var(--rs-panel-2); }

.rs-sum__cap {
  display: block;
  font-size: var(--rs-t-cap);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
  margin-bottom: var(--rs-step);
}

.rs-sum__fig {
  display: block;
  font-family: var(--rs-figure);
  font-variant-numeric: tabular-nums;
  font-size: var(--rs-t-fig);
  line-height: 1.1;
  color: var(--rs-face);
}

.rs-sum__cell--residue .rs-sum__fig { color: var(--rs-residue); }

/* ---- 3. The ranking's one slot --------------------------------------------------------------- */
/* The block the shortcode prints into. It takes the whole measure and carries no inset, because the
   strips inside it are objects with edges of their own and the stylesheet of the ranking plugin
   gives those edges to them. */
.rs-stand { margin: 0 0 var(--rs-gap-3); }

/* ---- 4. The contents bar --------------------------------------------------------------------- */
.rs-index {
  border-top: var(--rs-line) solid var(--rs-rule);
  border-bottom: var(--rs-line) solid var(--rs-rule);
  padding: var(--rs-gap) 0;
  margin: 0 0 var(--rs-gap-2);
}

.rs-index ol {
  list-style: none;
  margin: var(--rs-step) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--rs-step) var(--rs-gap-2);
}

.rs-index a { display: flex; gap: 0.6em; text-decoration: none; }
.rs-index a:hover span,
.rs-index a:focus span { text-decoration: underline; }
.rs-index__no { font-family: var(--rs-figure); color: var(--rs-ink-2); }

/* ---- 5. The body ----------------------------------------------------------------------------- */
.rs-body > .rs-part + .rs-part { border-top: var(--rs-line) solid var(--rs-hair-5); }
.rs-part { padding-top: var(--rs-gap); }
.rs-part__no {
  font-family: var(--rs-figure);
  font-size: var(--rs-t-cap);
  letter-spacing: 0.12em;
  color: var(--rs-residue);
  margin: 0;
}
.rs-part > h2:first-of-type { margin-top: var(--rs-step); }

/* A note: whatever condition or definition has to be set apart. The rule down its left side is the
   visible edge, and the edge is what earns it the inset it takes. */
.rs-note {
  margin: var(--rs-gap-2) 0;
  border-left: 3px solid var(--rs-rule);
  background-color: var(--rs-panel);
  padding: var(--rs-gap);
}

.rs-note p:last-child { margin-bottom: 0; }

/* ---- The tables ------------------------------------------------------------------------------ */
.rs-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--rs-gap-2) 0;
  font-size: var(--rs-t-cap);
}

.rs-table caption {
  text-align: left;
  font-size: var(--rs-t-cap);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
  padding-bottom: var(--rs-step);
}

.rs-table th,
.rs-table td {
  border-top: var(--rs-line) solid var(--rs-hair-5);
  padding: var(--rs-step) var(--rs-gap) var(--rs-step) 0;
  text-align: left;
  vertical-align: top;
}

.rs-table thead th {
  border-top: 0;
  border-bottom: var(--rs-line) solid var(--rs-rule);
  font-family: var(--rs-prose);
  font-size: var(--rs-t-cap);
  letter-spacing: 0.04em;
}

.rs-table td.rs-figure,
.rs-table th.rs-figure { text-align: right; padding-right: 0; }
.rs-table tbody tr:nth-child(even) { background-color: var(--rs-panel); }

/* A wide table is let loose inside a box of its own: the figures hold their struck size and the
   document underneath them stays put. Since the caption travels in the port alongside the table, a
   wrapped table gets a caption of four or five words, and anything that needs saying at length is
   said in the prose above the table, where the sheet's full width is there to say it in. */
.rs-scroll { margin: var(--rs-gap-2) 0; overflow-x: auto; }
.rs-scroll .rs-table { margin: 0; min-width: 34rem; }

/* ---- The marks the theme publishes, restated off the same tokens ---------------------------- */
.rs-dim {
  margin: var(--rs-gap-2) 0;
  text-align: center;
  border-top: var(--rs-line) solid var(--rs-rule);
  border-bottom: var(--rs-line) solid var(--rs-rule);
  padding: var(--rs-step) 0;
}

.rs-dim__fig {
  font-family: var(--rs-figure);
  font-variant-numeric: tabular-nums;
  font-size: var(--rs-t-cap);
  letter-spacing: 0.04em;
  color: var(--rs-ink-2);
}

.rs-plate {
  margin: var(--rs-gap-2) 0;
  border: var(--rs-line) solid var(--rs-rule);
  background-color: var(--rs-paper);
  padding: var(--rs-step);
}

.rs-plate img { display: block; width: 100%; height: auto; }

.rs-plate figcaption {
  font-size: var(--rs-t-cap);
  color: var(--rs-ink-2);
  padding: var(--rs-step) var(--rs-step) 0;
}

.rs-18 {
  display: inline-block;
  font-family: var(--rs-figure);
  font-size: var(--rs-t-cap);
  font-weight: 700;
  background-color: var(--rs-panel-2);
  border: var(--rs-line) solid var(--rs-ink);
  padding: 0 0.35em;
  margin-right: 0.5em;
}

.rs-rev { font-family: var(--rs-figure); font-variant-numeric: tabular-nums; }
.rs-tel { font-family: var(--rs-figure); white-space: nowrap; }

/* ---- 6. The questions ------------------------------------------------------------------------ */
.rs-ask { margin: var(--rs-gap-3) 0 0; }
dl.rs-ask { margin: var(--rs-gap) 0 0; }
dl.rs-ask dt {
  font-family: var(--rs-letter);
  font-size: var(--rs-t-h3);
  line-height: 1.3;
  border-top: var(--rs-line) solid var(--rs-rule);
  padding-top: var(--rs-gap);
  margin-top: var(--rs-gap);
}
dl.rs-ask dd { margin: var(--rs-step) 0 0; }

/* ---- 7. The care block ----------------------------------------------------------------------- */
.rs-care {
  margin: var(--rs-gap-3) 0 0;
  border: var(--rs-edge) solid var(--rs-ink);
  background-color: var(--rs-panel-2);
  padding: var(--rs-gap) var(--rs-gap) var(--rs-step);
}

.rs-care h2 { margin-top: 0; font-size: var(--rs-t-h3); }
.rs-care__help { font-size: var(--rs-t-cap); }

/* ---- 8. The colophon ------------------------------------------------------------------------- */
.rs-colophon {
  margin: var(--rs-gap-3) 0 0;
  border-top: var(--rs-edge) solid var(--rs-ink);
  padding-top: var(--rs-gap);
}

.rs-colophon ol {
  list-style: none;
  margin: var(--rs-step) 0 var(--rs-gap-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--rs-gap);
}

.rs-colophon a { display: block; text-decoration: none; }
.rs-colophon__name { display: block; font-family: var(--rs-letter); text-decoration: underline; }
.rs-colophon__says { display: block; font-size: var(--rs-t-cap); color: var(--rs-ink-2); }

.rs-colophon__ref {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rs-gap-2);
  font-family: var(--rs-figure);
  font-size: var(--rs-t-cap);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
  border-top: var(--rs-line) solid var(--rs-rule);
  padding-top: var(--rs-step);
}

.rs-offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =================================================================================================
 * A narrow sheet. The ladder steps down at Astra's own mobile boundary, which is the boundary the
 * theme steps it down on, and the three cell sum breaks into a column, because three sums struck at
 * this height will not be read across the glass of a 390px phone. Nothing from here to the end of
 * the file lays a horizontal inset, nor a width, nor a measure, on anything standing in the flow.
 * ============================================================================================== */
@media (max-width: 921px) {
  .rs-sheet {
    --rs-t-h1: 1.875rem;
    --rs-t-h2: 1.5rem;
    --rs-t-fig: 1.5rem;
    --rs-t-lead: 1.125rem;
  }

  .rs-sum { grid-template-columns: 1fr; }
  .rs-index ol,
  .rs-colophon ol { grid-template-columns: 1fr; }
}

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