/*
Theme Name:  Face and Residue
Theme URI:   https://paysafenodeposit.uk/
Description: A voucher counterfoil child of Astra: pale security paper, ink lettering, one deep teal for a face value and one rust for a residue, with a guilloche hairline under the sheet. Every figure on this site is printed as a strip of three cells, the face, what draws it down and what is stranded, so a headline is never shown without the part of it that never comes off. Turning it on stamps the palette, the lettering, a 1140px sheet width and both menus onto Astra's own Customizer settings, and perforates the menus along the manifest the pages plugin holds. Masthead, text column and title block are trimmed to one pair of edges. The theme prints the blank only: what is entered on it is filled in by the two plugins.
Author:      Face and Residue
Author URI:  https://paysafenodeposit.uk/
Template:    astra
Version:     1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dnm
*/

/* ==========================================================================
   The tokens.

   These are the denominations. Every ink, every height and every step of
   space the two plugins spend is struck on this page and nowhere else, and
   neither of them mints a single one of its own.

   Every ratio printed below was worked out rather than eyed: the WCAG 2.1
   relative luminance figure, measured against whichever ground the colour is
   actually laid on. The AA levels are 4.5 to 1 under 24px, 3 to 1 from 24px
   upwards, and 3 to 1 for a rule or an edge that is doing work.
   ========================================================================== */
:root {
  /* ---- The stock ----
     A prepaid voucher is struck on security paper, and security paper is a
     pale stock carrying a faint green cast, never white. The cast is held
     cold on purpose: a warm one would read as a till receipt, and a till
     receipt is the one printed thing this site is not. */
  --rs-paper: #F7F6F1;
  --rs-panel: #EDEDE4;    /* a cell of a strip, a banded row */
  --rs-panel-2: #E0E1D4;  /* a cell being called out: a residue, the 18+ stamp */

  /* ---- The two inks ----
     Two inks and no third. The first strikes anything a reader reads
     straight through; the second strikes whatever is set beneath it. Neither
     is black, because a counterfoil is struck in a very dark green black,
     and the first of these is that colour exactly. */
  --rs-ink: #17201D;      /* body, headings, the thick frame line.  15.39 on
                             paper, 14.15 on a cell, 12.60 on a called cell */
  --rs-ink-2: #4C564F;    /* captions, the line under a figure.  7.05 on
                             paper, 6.48 on a cell, 5.78 on a called cell */

  /* ---- The two figures ----
     The teal is the face value, the links and the buttons. The rust is the
     residue and nothing else: it is the one colour on this site that means a
     sum the reader never gets, so it is never spent on decoration. Both are
     dark enough to carry small text on any of the three grounds, which is
     why the printed sums are set in them and not in the rule colour. */
  --rs-face: #0F5257;     /* 8.21 on paper, 7.54 on a cell, 6.72 on a called
                             cell; white struck on it, 8.88 */
  --rs-face-d: #0A3B3F;   /* 11.35 on paper; white struck on it, 12.28. What
                             a link takes, and a button, beneath the pointer */
  --rs-residue: #8A3B12;  /* 7.15 on paper, 6.57 on a cell, 5.85 on a called
                             cell; white struck on it, 7.73 */

  /* ---- The ruling ----
     Olive is the ruled line of a voucher book: what rules off a heading,
     what frames a strip, what tears along a perforation. At 3.90 on paper it
     clears the 3:1 a line with a job to do must clear. No word and no sum is
     ever set in it. The single glyph struck in olive anywhere on this site is
     the stroke dividing one step of a trail from the next, which separates
     and says nothing. Below it sit two hairlines, weaker again, holding no
     information of any kind, so they carry no lettering either. */
  --rs-rule: #8C7A3F;     /* 3.90 on paper */
  --rs-hair: #DCDCCE;     /* 1.28 on paper: the guilloche hairline */
  --rs-hair-5: #C4C4B0;   /* 1.63 on paper: every fifth hairline */

  /* ---- Three faces, none of them shipped ----
     Not one font binary travels with this theme. A counterfoil wants a serif
     at the head of it, the reader's own interface face through the prose and
     a monospace down the figure columns, and all three are already sitting
     on whatever machine the page opens on. Buying one chosen cut of them
     would put two or three more files in front of the paint a reader waits
     for, and the figures are what this site is for: a strip has to stand in
     column the moment anything appears at all. */
  --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;

  /* ---- The ladder ----
     One ratio, so a heading is never a size that was picked for one page.
     The foot of the ladder is the prose size and nothing on this site is set
     smaller than --rs-t-cap. */
  --rs-t-cap: 0.8125rem;  /* 13px: a caption, the small cell label */
  --rs-t-base: 1.0625rem; /* 17px: prose */
  --rs-t-lead: 1.25rem;   /* 20px: the standfirst */
  --rs-t-h3: 1.375rem;
  --rs-t-h2: 1.75rem;
  --rs-t-h1: 2.375rem;
  --rs-t-fig: 1.75rem;    /* a figure in a cell of a strip */

  /* ---- The module ----
     One spacing step and its multiples. A block in the page flow takes its
     vertical room from these and its horizontal room from the sheet. */
  --rs-step: 0.5rem;
  --rs-gap: 1rem;
  --rs-gap-2: 1.75rem;
  --rs-gap-3: 2.75rem;

  /* ---- What the sheet measures ----
     A single width, kept the length of the site. Because the gutter is held
     outside it, one box carries the masthead, carries the text column under
     that, and carries the title block down at the foot. */
  --rs-sheet: 1140px;
  --rs-gutter: 32px;
  --rs-edge: 2px;         /* the thick frame line, drawn in the ink */
  --rs-line: 1px;         /* the drawn rule */
}

/* ==========================================================================
   The ground, and the guilloche.

   The hairline grid is drawn on the body, because it belongs behind the sheet
   and not behind the login screen or an embedded view, which is why
   functions.php puts a class on the body rather than this file putting the
   grid on every page it can reach. The fifth line is stronger, so a reader
   can count across the ground the way a counterfoil is counted.
   ========================================================================== */
body.dnm-counted {
  background-color: var(--rs-paper);
  background-image:
    repeating-linear-gradient(to bottom, var(--rs-hair-5) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(to bottom, var(--rs-hair) 0 1px, transparent 1px 20px);
  color: var(--rs-ink);
  font-family: var(--rs-prose);
  font-size: var(--rs-t-base);
  line-height: 1.6;
}

/* ==========================================================================
   The one width.

   Astra lays the content column out from its own settings, which functions.php
   writes on the first run. The rules below are the same decision written a
   second time, so the sheet holds its measure even where somebody has been
   into the Customizer. Nothing here gives prose a narrower measure than the
   table beside it: there is one measure on this site.
   ========================================================================== */
.ast-container,
.site-content .ast-container,
.ast-builder-grid-row-container-inner {
  max-width: var(--rs-sheet);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1199px) {
  /* The gutter is pinned here rather than inside the sheet, so the sheet's own
     blocks never acquire a horizontal inset of their own. This boundary and
     the header drawer breakpoint in functions.php are one decision in two
     places: below 1200 there is no arrangement of seven section names that
     fits the row. */
  .ast-container,
  .site-content .ast-container,
  .ast-builder-grid-row-container-inner {
    padding-left: var(--rs-gutter);
    padding-right: var(--rs-gutter);
  }
}

/* ==========================================================================
   The lettering
   ========================================================================== */
body.dnm-counted h1,
body.dnm-counted h2,
body.dnm-counted h3,
body.dnm-counted h4 {
  font-family: var(--rs-letter);
  color: var(--rs-ink);
  line-height: 1.22;
  font-weight: 600;
}

body.dnm-counted h1 { font-size: var(--rs-t-h1); }
body.dnm-counted h2 { font-size: var(--rs-t-h2); }
body.dnm-counted h3 { font-size: var(--rs-t-h3); }

body.dnm-counted a {
  color: var(--rs-face);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body.dnm-counted a:hover,
body.dnm-counted a:focus {
  color: var(--rs-face-d);
}

@media (max-width: 921px) {
  /* Astra's own mobile breakpoint, so the ladder drops where the rest of the
     furniture does. */
  :root {
    --rs-t-h1: 1.875rem;
    --rs-t-h2: 1.5rem;
    --rs-t-fig: 1.5rem;
  }
}

/* ==========================================================================
   The header row.

   Three fields across the sheet: the wordmark, the row of section names and
   the age stamp. A field cannot be squeezed, which is why the row becomes a
   drawer below 1200 instead of setting the names smaller.
   ========================================================================== */
.ast-primary-header-bar,
.site-header .main-header-bar {
  background-color: var(--rs-paper);
  border-bottom: var(--rs-edge) solid var(--rs-ink);
}

.main-header-menu > .menu-item > .menu-link {
  font-family: var(--rs-letter);
  color: var(--rs-ink);
}

.main-header-menu .sub-menu {
  background-color: var(--rs-panel);
  border: var(--rs-line) solid var(--rs-rule);
}

/* Nine names is what a single column takes; the tenth hangs below the glass.
   So the menu builder in functions.php counts what it has in hand and calls
   for a second column, or a third, and the width answers to the pages that
   were actually published rather than to the ones the plan listed. */
.menu-item.dnm-rack--two > .sub-menu { columns: 2; width: 34rem; }
.menu-item.dnm-rack--wide > .sub-menu { columns: 3; width: 48rem; }
.menu-item.dnm-rack--left > .sub-menu { right: 0; left: auto; }
.menu-item .dnm-head > .menu-link { font-weight: 700; }

/* ==========================================================================
   The marks this site prints everywhere.

   A face figure, a residue figure, a dimension, a plate, a note, the age stamp
   and a small capital label are drawn one way wherever they appear, in the
   page furniture and in the ranking alike. Both plugins restate the ones they
   use off these same tokens, so a page still reads before this theme lands,
   and neither of them draws a mark differently.
   ========================================================================== */
.rs-cap {
  display: block;
  font-family: var(--rs-prose);
  font-size: var(--rs-t-cap);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
}

.rs-figure,
.rs-fig {
  font-family: var(--rs-figure);
  font-variant-numeric: tabular-nums;
}

/* A sum printed as a face value, and a sum printed as a residue. The second is
   the one this site exists to print, so it is given the rust and nothing else
   on the page is. */
.rs-face-fig { color: var(--rs-face); font-family: var(--rs-figure); font-variant-numeric: tabular-nums; }
.rs-residue-fig { color: var(--rs-residue); font-family: var(--rs-figure); font-variant-numeric: tabular-nums; }

/* A dimension: a measured quantity standing on its own line, ruled above and
   below the way a dimension is ruled off on a drawing. */
.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);
}

/* A plate: the framed drawing area. The frame is the one place besides a table
   cell where an inset is allowed, because a plate is an object with an edge a
   reader can see. */
.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;
}

/* A note: the block a condition or a definition hangs in, ruled down its left
   edge, which is the reason its inset is allowed. */
.rs-note {
  margin: var(--rs-gap-2) 0;
  border-left: 3px solid var(--rs-rule);
  background-color: var(--rs-panel);
  padding: var(--rs-gap) var(--rs-gap);
}

.rs-note p:last-child { margin-bottom: 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;
}

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

/* ==========================================================================
   The counterfoil at the bottom of the sheet.

   Astra runs the copyright field through wpautop() and wp_kses_post(), so the
   band is built out of spans in functions.php and laid out here.
   ========================================================================== */
.dnm-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--rs-gap-2);
  border-top: var(--rs-edge) solid var(--rs-ink);
  padding-top: var(--rs-gap-2);
}

.dnm-field__cap {
  display: block;
  font-size: var(--rs-t-cap);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
  border-bottom: var(--rs-line) solid var(--rs-rule);
  padding-bottom: var(--rs-step);
  margin-bottom: var(--rs-step);
}

.dnm-field__val { display: block; font-size: var(--rs-t-cap); }
.dnm-field__val--fig { font-family: var(--rs-figure); }
.dnm-field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rs-gap); }
.dnm-foot-mark { font-family: var(--rs-letter); font-size: var(--rs-t-h3); margin: 0 0 var(--rs-step); }
.dnm-foot-help { list-style: none; margin: 0; padding: 0; font-size: var(--rs-t-cap); }
.dnm-foot-help li { margin-bottom: var(--rs-step); }

.dnm-strip-care {
  display: block;
  font-size: var(--rs-t-cap);
  border-top: var(--rs-line) solid var(--rs-rule);
  padding-top: var(--rs-step);
}

.dnm-strip-small { display: block; font-size: var(--rs-t-cap); color: var(--rs-ink-2); }
.dnm-drawer-note { font-size: var(--rs-t-cap); padding: var(--rs-gap); }

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