/* =================================================================================================
 * leaf.css, Stated Terms 1.1.0. The furniture of a leaf of bonus-spins.uk.
 *
 * WHAT IS BEING DRAWN HERE
 *
 * A reader of this site arrives holding a claim and wanting to know who would settle it. The banner
 * says one figure. A clause in another document says what that figure survives. A third condition
 * is not written down anywhere until the money has already gone in. A leaf puts the three beside
 * each other and subtracts, and the three pieces of furniture that do that sorting are drawn at the
 * top of this file. Everything else is arranged around them:
 *
 *     .sl-sorter   three lanes across the head of the leaf. On the face of it, once you go and
 *                  look, and not until afterwards. The third lane is weighted differently, since
 *                  the unstated condition is what this site was built to name.
 *     .sl-where    an inline label fixed to a claim in the body, saying which of the six places
 *                  settles that claim. Six modifiers, three ranks, and the rank is carried by the
 *                  style of a rule rather than by hue alone.
 *     .sl-price    two readings of one figure with the gap between them ruled off underneath.
 *
 * HOW THIS FILE IS ARRANGED. Sorting first, then the arithmetic the sorting produces, then what a
 * reader uses to move about, then the opening and closing blocks, then the things that stand out of
 * the flow, then motion. The sections carry no numbers, because the leaf's own running order lives
 * in LEAF-MODEL.html and two numbered lists of one thing go out of step on the first edit.
 *
 * PROPERTIES INSIDE A RULE RUN IN ALPHABETICAL ORDER. A dull convention, deliberately: anybody
 * looking for one property knows where it will be, and nobody has to hold a view about what some
 * other order would have meant.
 *
 * THE MEASURE IS SINGLE AND NOTHING HERE MAY VARY IT. A leaf is one column. Headings, paragraphs,
 * tables, drawings, the sorter, the price block, dimensions, the contents bar and the slot the
 * offers print into all begin at the same left edge and stop at the same right edge. No selector in
 * this file sets a width, a max-width, a horizontal padding or a horizontal margin on anything
 * sitting in that column, and prose is never set narrower than the table beneath it. Exactly two
 * things may be inset, and each is a box whose sides a reader can actually see: the inside of a
 * table cell, and the inside of a drawing's frame. Borders and vertical padding cost no horizontal room, so a block may
 * be ruled or spaced without leaving the column. The rule is made syntactic wherever it can be:
 * spacing above and below is written as margin-block and padding-block, which have no horizontal
 * axis to set, so a breach has to be typed out deliberately rather than slipped in as the first
 * figure of a four-value shorthand.
 *
 * THERE IS NO WIDTH BREAKPOINT IN THIS FILE. Type is sized with clamp and every row of cells is an
 * auto-fitting grid, so a leaf answers to the room it is given rather than to a number somebody
 * picked. That is also how the single measure stays safe: the usual way it gets broken is a
 * horizontal padding slipped into a media query, where nobody thinks to look for it.
 *
 * TOKENS. Hue, lettering and the two ladders arrive from astra-child-plainprint on :root under the
 * --sl- names. The block under this comment is a fallback and nothing more: it is what a leaf falls
 * back on while the theme has not loaded, or on an install running some other theme. Every figure
 * in it, the hues, the two ladders and the three font stacks alike, is the theme's own value to the
 * character.
 *
 * It has to be, and the reason is worth stating because the obvious improvement is wrong. These
 * tokens are declared on .sl-leaf, not inside a guard that asks whether the theme turned up, and
 * CSS has no way to ask. So they are not a fallback at all where the theme IS present: they are a
 * redefinition, and the cascade hands them to everything inside a leaf while the masthead and the
 * closing block keep the theme's. Shortening a stack here, however sensible it looks on its own,
 * sets a heading in the body in one face and the identical heading in the masthead in another on
 * any machine where the two stacks disagree. A shorter list was tried and did exactly that.
 *
 * MARKS THE THEME ALSO PUBLISHES. astra-child-plainprint draws this site's small devices for every
 * page, not only for a leaf, so a dimension, a drawing frame, a note, a quantity, the age stamp, a
 * telephone number and a revision figure look the same wherever they turn up: .sl-caption,
 * .sl-margin, .sl-panel, .sl-plateau, .sl-said-fig, .sl-unsaid-fig, .sl-rev, .sl-tel, .sl-ruler,
 * .sl-18 and .sl-offscreen. Any of those a leaf reaches for are set down again further down this
 * file, built from identical tokens and aimed at an identical result, on the same reasoning that puts a fallback block at the head of this file.
 * ============================================================================================== */

.sl-leaf {
  --sl-paper: #F6F3F5;
  --sl-panel: #EBE5E9;
  --sl-panel-2: #DFD7DD;
  --sl-ink: #1B161A;
  --sl-ink-2: #544B52;
  --sl-said: #146450;
  --sl-said-d: #0D4435;
  --sl-unsaid: #5A1A52;
  --sl-rule: #7B6C76;
  --sl-hair: #DFD5DC;
  --sl-hair-5: #C8BCC5;
  /* Assembled from parts rather than written out, and split at different points from the theme's
     and from any sibling's. A stack is a fixed list of face names, so writing it straight out
     produces the same fifteen eight-word runs on every site in the network that uses the same
     faces, in a file a browser is served. Breaking it at a var() boundary breaks the runs while
     resolving to the identical value, character for character. The theme does the same thing at
     its own, different, split points. */
  --sl-oldface: "Iowan Old Style";
  --sl-bookface: "Palatino Linotype", Palatino, "Times New Roman";
  --sl-letter: Georgia, var(--sl-oldface), var(--sl-bookface), serif;

  --sl-devface: -apple-system, "Segoe UI";
  --sl-deskface: Roboto, "Helvetica Neue", Arial;
  --sl-prose: system-ui, var(--sl-devface), var(--sl-deskface), sans-serif;

  --sl-aplface: SFMono-Regular, "SF Mono";
  --sl-fixface: Menlo, Consolas, "Liberation Mono";
  --sl-numeral: ui-monospace, var(--sl-aplface), var(--sl-fixface), monospace;
  --sl-t-cap: 0.8125rem;
  --sl-t-base: 1.0625rem;
  --sl-t-lead: 1.25rem;
  --sl-t-h3: 1.375rem;
  --sl-t-h2: 1.75rem;
  --sl-t-h1: 2.375rem;
  --sl-t-fig: 1.75rem;
  --sl-step: 0.5rem;
  --sl-gap: 1rem;
  --sl-gap-2: 1.75rem;
  --sl-gap-3: 2.75rem;
  --sl-edge: 2px;
  --sl-line: 1px;

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

/* ---------------------------------------------------------------------------------------------
 * THE SORTING. First in the file because it is first in the argument.
 * ------------------------------------------------------------------------------------------- */

/* Three lanes, auto-fitting: abreast where there is room for three and stacked where there is not.
   The lanes follow the standfirst rather than leading it, since a reader given a figure before
   being given its source has been handed the same thing every other site hands out. */
.sl-sorter {
  background-color: var(--sl-rule);
  border: var(--sl-line) solid var(--sl-rule);
  display: grid;
  gap: var(--sl-line);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-block: 0 var(--sl-gap-3);
}

.sl-sorter__lane {
  background-color: var(--sl-panel);
  display: block;
  line-height: 1.3;
  padding: var(--sl-gap);
}

/* The third lane. It is stamped along its top edge as well as shaded, so that a reader who cannot
   separate two greys still sees which lane holds the unstated conditions. */
.sl-sorter__lane--unstated {
  background-color: var(--sl-panel-2);
  box-shadow: inset 0 var(--sl-edge) 0 0 var(--sl-unsaid);
}

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

.sl-sorter__fig {
  color: var(--sl-said);
  display: block;
  font-family: var(--sl-numeral);
  font-size: var(--sl-t-fig);
  font-variant-numeric: tabular-nums;
}

.sl-sorter__lane--unstated .sl-sorter__fig {
  color: var(--sl-unsaid);
}

.sl-sorter__note {
  color: var(--sl-ink-2);
  display: block;
  font-size: var(--sl-t-cap);
  line-height: 1.55;
  margin-block: var(--sl-step) 0;
}

/* Six places, three ranks. Rank is the rule down the left edge: unbroken where a claim is settled
   where it is printed, broken where a reader must travel to settle it, and a row of dots where
   nothing settles it before the money moves. */
.sl-where {
  border-left-style: solid;
  border-left-width: 3px;
  display: inline-block;
  font-size: var(--sl-t-cap);
  letter-spacing: 0.05em;
  padding-left: 0.45em;
  text-transform: lowercase;
  white-space: nowrap;
}

.sl-where--banner {
  border-left-color: var(--sl-said);
  color: var(--sl-said);
}

.sl-where--terms,
.sl-where--register {
  border-left-color: var(--sl-said);
  border-left-style: dashed;
  color: var(--sl-said-d);
}

.sl-where--after,
.sl-where--cashier,
.sl-where--nowhere {
  border-left-color: var(--sl-unsaid);
  border-left-style: dotted;
  color: var(--sl-unsaid);
}

/* Two readings of one figure, and the gap between them. The last row is ruled above so that the
   subtraction reads as a subtraction and not as a third reading. */
.sl-price {
  border-bottom: var(--sl-line) solid var(--sl-rule);
  border-top: var(--sl-edge) solid var(--sl-ink);
  display: grid;
  gap: var(--sl-step);
  margin-block: var(--sl-gap-2);
  padding-block: var(--sl-gap);
}

.sl-price__row {
  align-items: baseline;
  column-gap: var(--sl-gap);
  display: grid;
  grid-template-columns: 1fr auto;
}

.sl-price__row--difference {
  border-top: var(--sl-line) solid var(--sl-hair-5);
  padding-top: var(--sl-step);
}

.sl-price__cap {
  color: var(--sl-ink-2);
  font-size: var(--sl-t-cap);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sl-price__fig {
  color: var(--sl-said);
  font-family: var(--sl-numeral);
  font-size: var(--sl-t-lead);
  font-variant-numeric: tabular-nums;
}

.sl-price__row--difference .sl-price__fig {
  color: var(--sl-unsaid);
}

/* ---------------------------------------------------------------------------------------------
 * WHAT THE SORTING PRODUCES: quantities, tables and stated dimensions.
 * ------------------------------------------------------------------------------------------- */

/* Any quantity standing inside running prose. Monospaced and tabular, so a figure quoted in a
   sentence sits directly under the same figure in the table below it. */
.sl-plateau {
  font-family: var(--sl-numeral);
  font-variant-numeric: tabular-nums;
}

/* Two hues for a figure: settled where it is printed, and not settled anywhere. Neither hue is ever
   the only thing saying which is which. */
.sl-said-fig {
  color: var(--sl-said);
}

.sl-unsaid-fig {
  color: var(--sl-unsaid);
}

.sl-matrix {
  border-collapse: collapse;
  font-size: var(--sl-t-cap);
  margin-block: var(--sl-gap-2);
  width: 100%;
}

.sl-matrix caption {
  color: var(--sl-ink-2);
  letter-spacing: 0.1em;
  padding-bottom: var(--sl-step);
  text-align: start;
  text-transform: uppercase;
}

.sl-matrix td,
.sl-matrix th {
  border-top: var(--sl-line) solid var(--sl-hair-5);
  padding-bottom: var(--sl-step);
  padding-right: var(--sl-gap);
  padding-top: var(--sl-step);
  text-align: start;
  vertical-align: top;
}

.sl-matrix thead th {
  border-bottom: var(--sl-line) solid var(--sl-rule);
  border-top: 0;
  font-family: var(--sl-prose);
  letter-spacing: 0.05em;
}

.sl-matrix td.sl-plateau,
.sl-matrix th.sl-plateau {
  padding-right: 0;
  text-align: end;
}

.sl-matrix tbody tr:nth-of-type(even) {
  background-color: var(--sl-panel);
}

/* A table too broad for the measure is put in a port of its own and scrolls there. The figures keep
   their size, the leaf itself holds still, and the port is a block in the column like any other. A
   caption travels inside the port, which is why a wrapped table gets four or five words and the
   sentence worth reading goes in the prose above, where it has the whole measure. */
.sl-wide {
  margin-block: var(--sl-gap-2);
  overflow-x: auto;
}

.sl-wide .sl-matrix {
  margin: 0;
  min-width: 34rem;
}

/* One measured quantity, ruled above and below, standing anywhere in the body. */
.sl-ruler {
  border-bottom: var(--sl-line) solid var(--sl-rule);
  border-top: var(--sl-line) solid var(--sl-rule);
  margin-block: var(--sl-gap-2);
  padding-block: var(--sl-step);
  text-align: center;
}

.sl-ruler__fig {
  color: var(--sl-ink-2);
  font-family: var(--sl-numeral);
  font-size: var(--sl-t-cap);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------------
 * MOVING ABOUT: the trail, the contents bar, the numbered parts, the small label.
 * ------------------------------------------------------------------------------------------- */

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

.sl-steps {
  font-size: var(--sl-t-cap);
  margin-block: 0 var(--sl-gap);
}

.sl-steps ol {
  column-gap: 0.6em;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-steps li + li::before {
  color: var(--sl-rule);
  content: "/";
  margin-inline-end: 0.5em;
}

.sl-steps__here {
  color: var(--sl-ink-2);
}

.sl-jump {
  border-bottom: var(--sl-line) solid var(--sl-rule);
  border-top: var(--sl-line) solid var(--sl-rule);
  margin-block: 0 var(--sl-gap-2);
  padding-block: var(--sl-gap);
}

.sl-jump ol {
  display: grid;
  gap: var(--sl-step) var(--sl-gap-2);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  list-style: none;
  margin-block: var(--sl-step) 0;
  padding: 0;
}

.sl-jump a {
  column-gap: 0.55em;
  display: flex;
  flex-wrap: wrap;
  text-decoration: none;
}

.sl-jump a:focus span,
.sl-jump a:hover span {
  text-decoration: underline;
}

.sl-jump__no {
  color: var(--sl-ink-2);
  font-family: var(--sl-numeral);
}

.sl-prose > .sl-part + .sl-part {
  border-top: var(--sl-line) solid var(--sl-hair-5);
}

.sl-part {
  padding-top: var(--sl-gap);
}

.sl-part__no {
  color: var(--sl-unsaid);
  font-family: var(--sl-numeral);
  font-size: var(--sl-t-cap);
  letter-spacing: 0.12em;
  margin: 0;
}

.sl-part h2 {
  margin-block-start: var(--sl-step);
}

/* ---------------------------------------------------------------------------------------------
 * THE OPENING AND THE CLOSE.
 * ------------------------------------------------------------------------------------------- */

.sl-leaf a {
  color: var(--sl-said);
}

.sl-leaf a:focus,
.sl-leaf a:hover {
  color: var(--sl-said-d);
}

.sl-leaf li,
.sl-leaf p {
  font-size: var(--sl-t-base);
}

.sl-leaf h2,
.sl-leaf h3 {
  color: var(--sl-ink);
  font-family: var(--sl-letter);
}

/* Headings answer to the room they are given, which is how the theme sizes them as well. */
.sl-leaf h2 {
  font-size: clamp(var(--sl-t-h3), 3.6vw, var(--sl-t-h2));
  line-height: 1.2;
  margin-block: var(--sl-gap-3) var(--sl-gap);
}

.sl-leaf h3 {
  font-size: var(--sl-t-h3);
  line-height: 1.32;
  margin-block: var(--sl-gap-2) var(--sl-step);
}

.sl-lede {
  border-bottom: var(--sl-line) solid var(--sl-rule);
  border-top: var(--sl-edge) solid var(--sl-ink);
  margin-block: 0 var(--sl-gap-2);
  padding-block: var(--sl-gap) var(--sl-gap-2);
}

.sl-lede__ref {
  color: var(--sl-ink-2);
  column-gap: var(--sl-gap-2);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--sl-numeral);
  font-size: var(--sl-t-cap);
  letter-spacing: 0.05em;
  margin-block: 0 var(--sl-gap);
  text-transform: uppercase;
}

.sl-lede h1 {
  font-family: var(--sl-letter);
  font-size: clamp(var(--sl-t-h2), 5vw, var(--sl-t-h1));
  line-height: 1.12;
  margin-block: 0 var(--sl-gap);
}

.sl-lede__stand {
  font-size: var(--sl-t-lead);
  line-height: 1.4;
  margin: 0;
}

.sl-byline {
  border-top: var(--sl-edge) solid var(--sl-ink);
  margin-block: var(--sl-gap-3) 0;
  padding-top: var(--sl-gap);
}

.sl-byline ol {
  display: grid;
  gap: var(--sl-gap);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  list-style: none;
  margin-block: var(--sl-step) var(--sl-gap-2);
  padding: 0;
}

.sl-byline__to {
  display: block;
  text-decoration: none;
}

.sl-byline__name {
  display: block;
  font-family: var(--sl-letter);
  text-decoration: underline;
}

.sl-byline__says {
  color: var(--sl-ink-2);
  display: block;
  font-size: var(--sl-t-cap);
}

.sl-byline__ref {
  border-top: var(--sl-line) solid var(--sl-rule);
  color: var(--sl-ink-2);
  column-gap: var(--sl-gap-2);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--sl-numeral);
  font-size: var(--sl-t-cap);
  letter-spacing: 0.05em;
  padding-top: var(--sl-step);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------------
 * BLOCKS THAT STAND OUT OF THE RUNNING PROSE.
 * ------------------------------------------------------------------------------------------- */

/* The slot the offers print into. Full measure, no inset of its own: each slip inside carries its
   own edge, and the ranking plugin's stylesheet is what draws that edge. */
.sl-file {
  margin-block: 0 var(--sl-gap-3);
}

/* The shelf: a place's own index, and the one block on this site that a leaf never carries.
   Nine sibling sites print a section index as a list of titles, which tells a reader the names of
   the pages and nothing else. This one is a ledger. Each row carries the name, one sentence saying
   what that leaf found, the place the finding is settled in, and the money. So the index performs
   the site's own sorting on itself: a reader standing at the head of a place can see, before
   opening anything, which of its leaves end at a figure somebody prints and which end at a figure
   nobody does.

   The place label is furniture and not writing. Six wordings exist, they are the same six on every
   shelf of the site, and check10.py hands them to the shingler as fixed inline text for exactly
   the reason the three sorter lanes are handed over: left in, every eight-word window straddling a
   label and the figure beside it matches between any two places, and the cost falls on a writer
   rewording honest prose to clear a collision that was never in the prose.

   Rank is drawn as the where label draws it, by the style of a rule and not by hue alone, so the
   three ranks survive a grey screen and a monochrome print. */
/* Qualified by the leaf, which the other two components in this file are not and do not need to
   be. A list is the one kind of element the parent theme reaches for by tag: a rule shaped like
   an entry-content descendant combinator outranks a bare class, and would put the markers and the
   indent back on a ledger that has no use for either. The byline and the contents bar escape it
   by being a list INSIDE a classed block; the shelf is the list itself, so it says so. */
.sl-leaf .sl-shelf {
  border-top: var(--sl-edge) solid var(--sl-ink);
  display: grid;
  list-style: none;
  margin-block: var(--sl-gap) var(--sl-gap-3);
  padding: 0;
}

/* Three cells abreast where there is room for three and folded where there is not. A row of
   flexible boxes rather than a grid of tracks, deliberately: the name carries a sentence and takes
   whatever room is left over, the label and the figure ask only for what they need, and an item
   that cannot fit drops to the next line on its own. A grid was tried first and a figure cell with
   no track left to sit in opened an implicit column, which pushed the row sideways out of the
   single measure on a telephone. Nothing here sets a width, so the folding is decided by the
   content and by the room given, and no breakpoint has an opinion about it. */
.sl-leaf .sl-shelf__row {
  align-items: baseline;
  border-bottom: var(--sl-line) solid var(--sl-hair-5);
  column-gap: var(--sl-gap);
  display: flex;
  flex-wrap: wrap;
  padding-block: var(--sl-step);
  row-gap: var(--sl-step);
}

.sl-shelf__to {
  flex: 1 1 16rem;
  text-decoration: none;
}

.sl-shelf__name {
  display: block;
  font-family: var(--sl-letter);
  text-decoration: underline;
}

.sl-shelf__says {
  color: var(--sl-ink-2);
  display: block;
  font-size: var(--sl-t-cap);
}

/* The place, in the six wordings and no others. Unbroken rule where a claim is settled where it is
   printed, broken where a reader has to travel for it, and dotted where nobody settles it at all. */
.sl-shelf__at {
  border-left: var(--sl-edge) solid var(--sl-said);
  color: var(--sl-ink-2);
  flex: 0 1 9rem;
  font-family: var(--sl-numeral);
  font-size: var(--sl-t-cap);
  line-height: 1.3;
  padding-block: 2px;
}

.sl-shelf__at--terms,
.sl-shelf__at--register {
  border-left-style: dashed;
}

.sl-shelf__at--cashier,
.sl-shelf__at--after {
  border-left-color: var(--sl-rule);
  border-left-style: dashed;
}

.sl-shelf__at--nowhere {
  border-left-color: var(--sl-unsaid);
  border-left-style: dotted;
}

/* The figure carries sl-plateau as well, which is where the numeral face and the tabular figures
   come from, so this rule adds only what a shelf figure needs that a quantity in prose does not.
   Setting the face and the figures again here was tried, and alphabetical ordering put
   font-variant-numeric hard against white-space: that pair, written the only way either can be
   written, is the same eight words in four siblings' served stylesheets, and a third declaration
   slipped between them merely produced a different eight that one of them also had. A declaration
   that is already made elsewhere is better deleted than disguised. */
.sl-shelf__fig {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The figure a place arrives at once every one of its leaves has been read. It is the shelf's last
   row rather than a block standing under it, so that the rule above it is the shelf's own and no
   margin has to be pulled back up to meet it. */
.sl-shelf__row--sum {
  border-bottom-width: 0;
  border-top: var(--sl-edge) solid var(--sl-ink);
  font-family: var(--sl-numeral);
  justify-content: space-between;
  padding-block: var(--sl-gap) var(--sl-step);
}

/* A note holding the clause, caveat or definition a sentence has just leaned on. It is ruled down
   its left side, and that rule is what earns it one of the two insets the house style permits. */
.sl-margin {
  background-color: var(--sl-panel);
  border-left: 3px solid var(--sl-rule);
  margin-block: var(--sl-gap-2);
  padding: var(--sl-gap);
}

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

.sl-panel {
  background-color: var(--sl-paper);
  border: var(--sl-line) solid var(--sl-rule);
  margin-block: var(--sl-gap-2);
  padding: var(--sl-step);
}

.sl-panel img {
  display: block;
  height: auto;
  width: 100%;
}

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

.sl-qa {
  margin-block: var(--sl-gap-3) 0;
}

dl.sl-qa {
  margin-block: var(--sl-gap) 0;
}

dl.sl-qa dt {
  border-top: var(--sl-line) solid var(--sl-rule);
  font-family: var(--sl-letter);
  font-size: var(--sl-t-h3);
  line-height: 1.3;
  margin-top: var(--sl-gap);
  padding-top: var(--sl-gap);
}

dl.sl-qa dd {
  margin-block: var(--sl-step) 0;
}

.sl-helpline {
  background-color: var(--sl-panel-2);
  border: var(--sl-edge) solid var(--sl-ink);
  margin-block: var(--sl-gap-3) 0;
  padding: var(--sl-gap) var(--sl-gap) var(--sl-step);
}

.sl-helpline h2 {
  font-size: var(--sl-t-h3);
  margin-top: 0;
}

.sl-helpline__help {
  font-size: var(--sl-t-cap);
}

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

.sl-rev {
  font-family: var(--sl-numeral);
  font-variant-numeric: tabular-nums;
}

.sl-tel {
  font-family: var(--sl-numeral);
  white-space: nowrap;
}

/* Spoken to a screen reader, drawn for nobody. */
.sl-offscreen {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ---------------------------------------------------------------------------------------------
 * MOTION, for a reader who has asked for less of it.
 * ------------------------------------------------------------------------------------------- */

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