/*
Theme Name:  The Spin Sheet
Theme URI:   https://free-spinsnodeposit.uk/
Description: A dyeline child of Astra: cyan line work on a white sheet, a drawing grid that is the spacing scale made visible, lettering off the ISO 3098 height series, dimension lines and leaders instead of ornament, and a title block for a footer. Switching it on writes the palette, the lettering, an 1140px sheet and the two menus into Astra's own Customizer values, files the wordmark and the tab icon in the Media Library, and fills Yoast's site representation if nobody has. The header row, the content column and the footer all stand between the same two rules. The theme draws the frame only; the guides and the ranking are drawn by their own plugins.
Author:      The Spin Sheet
Template:    astra
Version:     1.0.0
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: dln
*/

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

   These are the contract. Both plugins read these names and define none of
   their own, so nothing in the theme reaches for a colour, a size or a space
   that is not written here.

   Every ratio quoted in this file was computed from the WCAG 2.1 relative
   luminance formula against the ground the colour actually sits on, not
   judged by eye. AA wants 4.5:1 for text under 24px, 3:1 for text at 24px
   and over, and 3:1 for a line or a border that carries meaning.
   ========================================================================== */
:root {
  /* ---- The sheet ----
     A dyeline is printed on white, and every other site on this network
     already has a tinted ground, so the sheet here is white and nothing is
     laid over it. No paper texture: a dyeline is a wet chemical print and its
     paper shows no tooth. */
  --dy-paper: #FFFFFF;
  --dy-field: #E6F3FA;    /* a field in the title block, a banded row */
  --dy-field-2: #D2E9F5;  /* a field being called out, the 18+ stamp */

  /* ---- The lettering ----
     Cyan is the trap on this sheet, so the letter is not cyan. It is a very
     dark cyan-black: plainly in the same family as the line work, dark enough
     to be read. A real blueline print letters in the line colour and is
     wretched to read, which is a defect and not a style to reproduce. */
  --dy-ink: #07212C;      /* body text, headings, the thick frame line.  16.63 on paper,
                             14.70 on the field, 13.23 on the deep field */
  --dy-ink-2: #3D5A68;    /* captions, secondary text.  7.34 on paper, 6.49 on the field,
                             5.84 on the deep field */

  /* ---- The line work ----
     The bright cyan is the drawn line: rules, dimension lines, leaders,
     arrowheads, flat areas. BARRED FROM SMALL TEXT. It measures 3.36 on the
     paper, which clears AA for a line that carries meaning and for text at
     24px and over, and fails AA for anything smaller, so no sentence, label
     or figure under 24px is ever set in it on a light ground. On the ink band
     at the foot of the page it measures 4.95 and may carry small text there.

     It also measures 2.97 on the field and 2.67 on the deep field, below the
     3:1 a meaningful line needs, so the bright cyan never rules against a
     tint. Rules on a tint are drawn in the ink or in the deep cyan. */
  --dy-cyan: #0096CE;

  /* The deep cyans do the work the bright one may not: links, a rule that has
     to be read, the ground under a button. */
  --dy-cyan-d: #005E7D;   /* links, meaningful thin rules, button ground.  7.25 on paper,
                             6.41 on the field, 5.77 on the deep field.
                             White on it 7.25 */
  --dy-cyan-dd: #004A63;  /* a link under the pointer.  9.72 on paper */

  /* ---- The grid lines ----
     Hairlines. They carry no information of their own: they are the spacing
     scale made visible, and removing them changes nothing a reader needs to
     know, so the 3:1 rule for a meaningful line does not apply to them and is
     not claimed. #C9E5F3 measures 1.31 on the paper and #7FC2E0 1.96, which
     is the strength a drawing grid wants: present, and never competing with
     the line work laid over it. Both are barred from text of any size. */
  --dy-grid: #C9E5F3;     /* the module line, every --dy-mod */
  --dy-grid-maj: #7FC2E0; /* the division line, every --dy-zone */

  /* ---- The lettering, and the one ladder it is set on ----
     ISO 3098 gives the draughtsman one letter form, one stroke width, and a
     height series rising by the square root of two: 2.5, 3.5, 5, 7, 10, 14,
     20 mm. That series is also the classical typographic progression, so the
     whole type scale on this site is the lettering height series at
     1 mm = 3.4 px, and the heading ladder is one weight throughout, because a
     drawing letter has one stroke width and headings differ by height alone.
     Nothing on this site is emphasised by making one word heavier than the
     words around it. */
  --dy-letter: "Barlow Semi Condensed", "Helvetica Neue Condensed", "Arial Narrow", Helvetica, Arial, sans-serif;
  --dy-prose: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --dy-figure: "B612 Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --dy-h35: 12px;   /* 3.5 mm  field captions, the figure in a dimension */
  --dy-h50: 17px;   /* 5 mm    running text, and h4 down to h6 */
  --dy-h60: 20px;   /* 6 mm    the one interpolated height, for h3 on a phone */
  --dy-h70: 24px;   /* 7 mm    h3 */
  --dy-h100: 34px;  /* 10 mm   h2 */
  --dy-h140: 48px;  /* 14 mm   h1 */

  /* ---- The grid, which is the spacing scale ----
     --dy-mod is the module. Every margin, pad, row height and rule offset in
     this file is a whole number of modules, and the visible grid is drawn
     from these same two values, so a drawn line and a laid-out edge cannot
     drift apart: there is one number, used twice. */
  --dy-mod: 8px;
  --dy-zone: 40px;   /* 5 modules: the division, and the pitch of the border ticks */

  --dy-s1: 8px;      /*  1 module  */
  --dy-s2: 16px;     /*  2 modules */
  --dy-s3: 24px;     /*  3 modules */
  --dy-s4: 32px;     /*  4 modules */
  --dy-s5: 48px;     /*  6 modules */
  --dy-s6: 64px;     /*  8 modules */
  --dy-s7: 96px;     /* 12 modules */

  /* ---- Measure ----
     One width, and it is a gate. The header row, the content column and the
     footer all sit on this sheet with these gutters, so the wordmark, the
     prose, the tables, the figures and the ranking share one left rule and
     one right rule. There is no narrower measure for prose anywhere on this
     site; where text has to be inset it is inset inside an object that has an
     edge of its own, which a reader can see. */
  --dy-sheet-w: 1140px;
  --dy-gutter: clamp(20px, 2.6vw, 36px);
  --dy-frame-off: 10px;  /* how far outside the sheet the border frame is drawn */
  --dy-radius: 0;        /* a drawing has no rounded corners */

  /* ---- The drawn marks ----
     Three small SVGs held as data URIs, so the arrowheads and the leader are
     real drawn shapes at one paint and no requests. The cyan is written into
     each one because a data URI cannot read currentColor; they are therefore
     the one place in this file where a colour is spelled out rather than
     named, and they have to be changed with --dy-cyan if that ever moves. */
  --dy-arrow-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7'%3E%3Cpath d='M0 3.5 9 0v7z' fill='%230096CE'/%3E%3C/svg%3E");
  --dy-arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7'%3E%3Cpath d='M9 3.5 0 0v7z' fill='%230096CE'/%3E%3C/svg%3E");
  --dy-leader-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='24'%3E%3Ccircle cx='3' cy='20' r='2.5' fill='%230096CE'/%3E%3Cpath d='M4 18 17 5h15' stroke='%230096CE' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --dy-rev-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22'%3E%3Cpath d='M13 1.5 24.5 20.5h-23z' stroke='%23005E7D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");

  /* The grid fill, defined once and reused by anything that wants the sheet
     ruled inside it. The two pitches are the module and the division above,
     so the drawn grid is the spacing scale and not a picture of one. It is
     never laid under running text: a drawing grid belongs inside the drawing
     area, and prose over a ruled ground is harder to read for no gain. */
  --dy-grid-fill:
    repeating-linear-gradient(90deg, var(--dy-grid) 0 1px, transparent 1px var(--dy-mod)),
    repeating-linear-gradient(0deg, var(--dy-grid) 0 1px, transparent 1px var(--dy-mod)),
    repeating-linear-gradient(90deg, var(--dy-grid-maj) 0 1px, transparent 1px var(--dy-zone)),
    repeating-linear-gradient(0deg, var(--dy-grid-maj) 0 1px, transparent 1px var(--dy-zone));

  /* The border ticks: the division marks along the drawing frame, every
     --dy-zone, with a longer one every fourth. Laid on an 8px strip. */
  --dy-tick-fill:
    repeating-linear-gradient(90deg, var(--dy-ink) 0 1px, transparent 1px var(--dy-zone)),
    repeating-linear-gradient(90deg, var(--dy-ink) 0 1px, transparent 1px calc(var(--dy-zone) * 4));

  /* Astra and the block editor read this for the width of an aligned block. */
  --wp--custom--ast-content-width-size: 1140px;
  color-scheme: light;
}

/* ==========================================================================
   The sheet, the ink and the lettering
   ========================================================================== */
body {
  background-color: var(--dy-paper);
  color: var(--dy-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Said again after Astra's own rule, so running text and form controls keep
   the letter whatever string the Customizer ends up holding for it. */
body,
button,
input,
select,
textarea {
  font-family: var(--dy-prose);
}

/* The measure here is the whole sheet, by instruction: no block in the page
   flow is narrower than any other. A line of 1140px at this size is long, so
   the leading is opened up a step and the space between paragraphs is a whole
   module, which is what a long measure needs to stay trackable. text-wrap
   pretty keeps the last line of a paragraph from running short on its own. */
body {
  font-family: var(--dy-prose);
  font-size: var(--dy-h50);
  line-height: 1.68;
}

p {
  text-wrap: pretty;
}

.entry-content > p {
  margin-bottom: var(--dy-s3);
}

/* The heading ladder: the lettering height series, one weight, the drawing
   letter. A heading is told from the text by its height and its width, never
   by a heavier stroke. */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
  font-family: var(--dy-letter);
  font-weight: 600;
  color: var(--dy-ink);
}

/* Figures are read down a column and compared, so they are lined and tabular
   wherever they appear. */
h1, h2, h3, h4, h5, h6,
table,
.dy-figure {
  font-variant-numeric: lining-nums tabular-nums;
}

h1 { font-size: var(--dy-h140); line-height: 1.04; letter-spacing: -0.012em; }
h2 { font-size: var(--dy-h100); line-height: 1.12; letter-spacing: -0.008em; }
h3 { font-size: var(--dy-h70); line-height: 1.24; letter-spacing: -0.004em; }

/* h4 and below stand at the reading height. They are told apart from the
   paragraph by the narrow letter and by being tracked out, which is what a
   draughtsman does to a sub-caption rather than reach for a bigger letter. */
h4, h5, h6 {
  font-size: var(--dy-h50);
  line-height: 1.36;
  letter-spacing: 0.04em;
}

/* Headings land on the grid: a whole number of modules above and below. */
h1 { margin-top: 0; margin-bottom: var(--dy-s3); }
h2 { margin-top: var(--dy-s5); margin-bottom: var(--dy-s2); }
h3 { margin-top: var(--dy-s4); margin-bottom: var(--dy-s2); }
h4, h5, h6 { margin-top: var(--dy-s3); margin-bottom: var(--dy-s1); }

/* Every figure in running text is set in the instrument face, so a number on
   this site never wears the same clothes as a sentence. */
code, kbd, samp, pre,
.dy-figure {
  font-family: var(--dy-figure);
}

/* Nothing is rounded. The weakest selector there is, so it flattens what the
   browser rounds by default and settles nothing a plugin has decided for
   itself; Astra's own corners are written to zero on the first run. */
* {
  border-radius: var(--dy-radius);
}

::selection {
  background: var(--dy-field-2);
  color: var(--dy-ink);
}

/* ==========================================================================
   Links, rules, fields and buttons
   ========================================================================== */

/* Links are deep cyan at 7.25 and underlined; under the pointer they go a step
   darker, to 9.72, and the rule under them thickens. The bright cyan is never
   a link on this ground. */
a {
  color: var(--dy-cyan-d);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--dy-cyan-dd);
  text-decoration-thickness: 2px;
}

/* A separator in the page flow is the drawing's own thin line, full measure. */
hr,
.wp-block-separator {
  height: 1px;
  margin: var(--dy-s5) 0;
  border: 0;
  background: var(--dy-cyan);
}

/* ==========================================================================
   Tables: the schedule.

   A drawing states its quantities in a schedule, and a schedule is ruled
   rather than filled: horizontal lines in the ink separating the entries,
   thin division lines between the columns, and no banding, because a band is
   decoration and a rule is structure. This is the one piece of core furniture
   the theme styles rather than leaves to the plugins, since every page on
   this site settles its argument in a table and all of them should be the
   same table.

   A cell may be inset because it has an edge of its own, which is the
   exception the one-width rule allows for.
   ========================================================================== */
.entry-content table {
  width: 100%;
  margin: var(--dy-s4) 0;
  border-collapse: collapse;
  border: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

.entry-content table th,
.entry-content table td {
  padding: var(--dy-s2) var(--dy-s2);
  border: 0;
  border-bottom: 1px solid var(--dy-grid-maj);
  border-left: 1px solid var(--dy-grid-maj);
  text-align: left;
  vertical-align: top;
}

.entry-content table th:first-child,
.entry-content table td:first-child {
  padding-left: 0;
  border-left: 0;
}

.entry-content table th:last-child,
.entry-content table td:last-child {
  padding-right: 0;
}

/* The column headings, lettered the way every other caption on the sheet is,
   and ruled off from the entries by the thick line. */
.entry-content table thead th {
  border-bottom: 2px solid var(--dy-ink);
  background: transparent;
  color: var(--dy-ink-2);
  font-family: var(--dy-letter);
  font-size: var(--dy-h35);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.entry-content table tbody tr:last-child th,
.entry-content table tbody tr:last-child td {
  border-bottom: 2px solid var(--dy-ink);
}

/* A figure in a schedule is set in the instrument face, so it is read as a
   measurement and lines up with the figure above it. A plugin marks the cell;
   the theme never guesses which column holds numbers. */
.entry-content table .dy-figure,
.entry-content table td.dy-figure {
  font-family: var(--dy-figure);
  font-size: 15px;
  letter-spacing: 0.01em;
}

.entry-content table caption {
  margin-bottom: var(--dy-s1);
  color: var(--dy-ink-2);
  font-family: var(--dy-letter);
  font-size: var(--dy-h35);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}

/* Fields: a drawn box, square, ruled in the ink rather than in a grey. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  background-color: var(--dy-paper);
  border: 1px solid var(--dy-ink);
  color: var(--dy-ink);
  font-family: var(--dy-prose);
}

input::placeholder,
textarea::placeholder {
  color: var(--dy-ink-2);
  opacity: 1;
}

/* A number typed into a field is still a number. */
input[type="number"],
input[type="tel"],
input[type="date"] {
  font-family: var(--dy-figure);
}

/* Buttons. A drawing has no buttons, so the honest translation is the one
   device a drawing does use to say "this field matters": the double-ruled
   box. The ground is the deep cyan carrying white at 7.25, with a one point
   rule of the paper inset two points inside it, and the ink at 16.63 under
   the pointer. Never the bright cyan, where white measures 3.36. The inner
   rule is not drawn in the bright cyan either: on the deep cyan ground it
   measures 2.16 and would read as a smudge. */
.ast-button,
.button,
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
  font-family: var(--dy-letter);
  font-size: var(--dy-h50);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--dy-cyan-d), inset 0 0 0 3px var(--dy-paper);
  transition: background-color 0.14s ease;
}

.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  box-shadow: inset 0 0 0 1px var(--dy-ink), inset 0 0 0 3px var(--dy-paper);
}

/* One ring for the whole site: three points of the deep cyan, which reads at
   7.25 on the paper, 6.41 on the field and 5.77 on the deep field. On the one
   dark ground the site has, the band at the foot of the page, the ring takes
   the paper colour instead, where it reads at 16.63. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--dy-cyan-d);
  outline-offset: 2px;
  box-shadow: none;
}

.site-footer .ast-footer-copyright :is(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--dy-paper);
}

/* Astra dots a thin outline, and dots the border of a field, on plain :focus
   as well. The ring above is for the keyboard, so a pointer press is left to
   pass without a mark of its own. These selectors carry one class more than
   Astra's, so they settle it rather than tie with it. */
.ast-menu-toggle:focus:not(:focus-visible),
.menu-toggle:focus:not(:focus-visible),
.menu-toggle-close:focus:not(:focus-visible),
.ast-header-navigation-arrow:focus:not(:focus-visible),
.ast-button:focus:not(:focus-visible),
.ast-custom-button:focus:not(:focus-visible),
#ast-scroll-top:focus:not(:focus-visible),
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}

/* A field being typed into keeps its drawn edge and takes the ring, rather
   than going dotted. */
input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.wp-block-search__input:focus {
  border-style: solid;
  border-width: 1px;
  border-color: var(--dy-ink);
}

.skip-link.screen-reader-text:focus {
  background: var(--dy-cyan-d);
  color: #FFFFFF;
  padding: var(--dy-s2) var(--dy-s3);
  font-family: var(--dy-letter);
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}

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

   Three wrappers carry the sheet: the content container, the header row and
   the footer row. Each is the sheet plus a gutter on either side, so the
   content inside all three begins and ends on the same two rules at every
   width. Astra's own content width is written to 1140 on the first run; this
   carries the same measure to a site set up by an earlier version, and gives
   the header and the footer the identical box.
   ========================================================================== */
.ast-container,
.site-header .ast-builder-grid-row-container-inner,
.site-footer .ast-builder-grid-row-container-inner {
  width: 100%;
  max-width: calc(var(--dy-sheet-w) + var(--dy-gutter) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dy-gutter);
  padding-right: var(--dy-gutter);
  box-sizing: border-box;
}

/* Astra nests one of these wrappers inside the other in some header and
   footer rows. A sheet inside a sheet would inset the row twice and put the
   wordmark a gutter in from the prose, which is the one fault this build is
   not allowed to have, so the inner one gives up its gutter whichever way
   round the nesting happens to be. */
.ast-container .ast-builder-grid-row-container-inner,
.ast-builder-grid-row-container-inner .ast-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Nothing between the sheet and the prose adds an inset of its own. */
.site-content #primary,
.site-content #secondary,
.site-content .ast-article-single,
.site-content .ast-article-post,
.site-content .entry-content {
  padding-left: 0;
  padding-right: 0;
}

/* And nothing in the flow takes a narrower measure than the sheet. A block
   that asks for the content width gets the sheet; a wide or full block gets
   the sheet too, because the sheet is already the widest thing there is.
   This is the rule the build is measured by: prose, tables, plates and the
   ranking all start on the left rule and end on the right rule. */
.entry-content > *,
.entry-content > .alignwide,
.entry-content > .alignfull {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Room under the header row and above the footer, in whole modules. Every
   page prints its own heading, so there is no page title to stand in the
   gap. */
.ast-plain-container .site-content > .ast-container > #primary {
  margin-top: var(--dy-s5);
  margin-bottom: var(--dy-s6);
}

/* ==========================================================================
   The drawing frame.

   A drawing sheet is not edge-to-edge drawing: it carries a border frame
   outside the drawing area, and the sheet is divided along that frame so a
   reader can be told where to look. Both are built here as real marks rather
   than as a picture of a sheet.

   The two vertical frame rules are drawn in the gutter, --dy-frame-off
   outside the sheet's own edges, so they bracket the measure without taking a
   pixel from it: the content still begins and ends exactly on the sheet's two
   rules. They are the bright cyan, which measures 3.36 and so clears the 3:1
   a line carrying meaning needs.
   ========================================================================== */
.site-content {
  position: relative;
}

.site-content::before,
.site-content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--dy-cyan);
  pointer-events: none;
}

.site-content::before {
  left: calc(max(var(--dy-gutter), (100% - var(--dy-sheet-w)) / 2) - var(--dy-frame-off));
}

.site-content::after {
  right: calc(max(var(--dy-gutter), (100% - var(--dy-sheet-w)) / 2) - var(--dy-frame-off));
}

/* ==========================================================================
   The drawing furniture.

   These are the site's shared marks, published by the theme and used by the
   guides plugin and the ranking alike, so a dimension is drawn the same way
   wherever it appears and no plugin invents a second one. Every one of them
   is a device off a real drawing and every one of them carries information:
   a dimension states a measured quantity, a leader points at the thing it is
   talking about, a revision mark says this was amended and when, a plate is
   a framed drawing area with its own caption. Nothing here is ornament.
   ========================================================================== */

/* A dimension. The figure sits in a break in the line, which is how a
   dimension is written and why a reader takes it as a measurement rather than
   as a claim:

     <p class="dy-dim"><span class="dy-dim__fig">£4.20</span></p>

   Each half of the line is one 7px strip carrying three layers: the line
   itself, the arrowhead at the outer end, and the extension tick that closes
   it off. The halves grow, so the dimension always spans its container. */
.dy-dim {
  display: flex;
  align-items: center;
  gap: var(--dy-s1);
  margin: var(--dy-s3) 0;
}

.dy-dim::before,
.dy-dim::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--dy-s3);
  height: 7px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--dy-cyan), var(--dy-cyan)),
    var(--dy-arrow-l),
    linear-gradient(var(--dy-cyan), var(--dy-cyan));
  background-size: 100% 1px, 9px 7px, 1px 7px;
  background-position: left center, left center, left top;
}

.dy-dim::after {
  background-image:
    linear-gradient(var(--dy-cyan), var(--dy-cyan)),
    var(--dy-arrow-r),
    linear-gradient(var(--dy-cyan), var(--dy-cyan));
  background-position: left center, right center, right top;
}

/* The figure is not held on one line by force. A dimension usually carries something short, which
   has no break in it and will not wrap whatever the sheet is doing, but a long one set nowrap
   pushed the page wider than the phone it was on and gave the whole site a sideways scroll. So it
   wraps when it must, and breaks inside a word only as the last resort before that happens. */
.dy-dim__fig {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--dy-figure);
  font-size: var(--dy-h35);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--dy-ink);
  overflow-wrap: anywhere;
}

/* A leader: a dot on the thing being talked about, a sloped stroke and a
   shoulder, then the note. The mark is one small SVG and the note is ordinary
   text, so it stays selectable and readable aloud.

     <p class="dy-leader">What the wagering requirement takes back.</p> */
.dy-leader {
  position: relative;
  margin: var(--dy-s3) 0;
  padding-left: var(--dy-zone);
  color: var(--dy-ink-2);
  font-size: var(--dy-h50);
}

.dy-leader::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 24px;
  background: var(--dy-leader-mark) no-repeat left top;
}

/* A revision mark: the triangle a drawing office puts beside an amendment,
   with the revision in it. Outlined in the deep cyan at 7.25 rather than
   filled in the bright one, so the figure inside reads at 16.63.

     <span class="dy-rev">3</span> checked 14 October 2026 */
.dy-rev {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 26px;
  height: 22px;
  padding-bottom: 1px;
  background: var(--dy-rev-mark) no-repeat center / 26px 22px;
  color: var(--dy-ink);
  font-family: var(--dy-figure);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: -4px;
}

/* A plate: a framed drawing area with the grid in it and its caption in a
   ruled bar at the foot. The frame is the thick line, the grid inside is the
   module and the division, and the caption bar is ruled off from the drawing
   the way a figure on a sheet is.

   The inset inside the frame is legal under the one-width rule because the
   plate is an object with its own visible edge: a reader can see why the
   drawing starts where it does. */
.dy-plate {
  margin: var(--dy-s5) 0;
  border: 2px solid var(--dy-ink);
  background-color: var(--dy-paper);
  background-image: var(--dy-grid-fill);
  background-position: left top;
}

.dy-plate > img,
.dy-plate > picture,
.dy-plate > svg,
.dy-plate > .dy-plate__body {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.dy-plate > figcaption,
.dy-plate__cap {
  margin: 0;
  padding: var(--dy-s2) var(--dy-s3);
  border-top: 1px solid var(--dy-ink);
  background-color: var(--dy-field);
  color: var(--dy-ink);
  font-family: var(--dy-letter);
  font-size: var(--dy-h50);
  line-height: 1.4;
}

/* A note: the block a drawing hangs its conditions off. Ruled down the left
   in the thick line, on the field ground, which is the other inset the
   one-width rule allows, for the same reason: the rule is there to be seen. */
.dy-note {
  margin: var(--dy-s4) 0;
  padding: var(--dy-s3) var(--dy-s3) var(--dy-s3) var(--dy-s4);
  border-left: 4px solid var(--dy-cyan);
  background-color: var(--dy-field);
  color: var(--dy-ink);
}

.dy-note > :first-child { margin-top: 0; }
.dy-note > :last-child { margin-bottom: 0; }

/* A field out of the title block: the caption over the value, which is how
   every box on a drawing is filled in. The caption is the only place on this
   site set in capitals, because a title-block caption is capitals and a field
   without one is not a title block. It is not used as a label above a
   heading anywhere. */
.dy-field__cap {
  display: block;
  margin-bottom: var(--dy-s1);
  color: var(--dy-ink-2);
  font-family: var(--dy-letter);
  font-size: var(--dy-h35);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dy-field__val {
  display: block;
  color: var(--dy-ink);
  font-family: var(--dy-letter);
  font-size: var(--dy-h50);
  font-weight: 500;
  line-height: 1.45;
}

.dy-field__val--fig {
  font-family: var(--dy-figure);
  font-size: var(--dy-h35);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The 18+ stamp: a drawn box on the deep field, carrying the ink at 13.23
   inside a thick ink rule. One definition, reused on the header row, inside
   the phone drawer, in the title block and on the band at the foot. */
.dy-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 48px;
  height: var(--dy-s4);
  padding: 0 var(--dy-s1);
  border: 2px solid var(--dy-ink);
  background: var(--dy-field-2);
  color: var(--dy-ink);
  font-family: var(--dy-figure);
  font-size: var(--dy-h35);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* A telephone number is a figure and is never broken across a line. */
.dy-tel {
  font-family: var(--dy-figure);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ==========================================================================
   The header: the head of the sheet.

   A row of title-block fields, ruled off from one another, closed by the
   thick frame line with the division ticks laid along it. The wordmark is the
   first field, the sections are the middle one and the 18+ stamp is the last,
   which is the order a drawing fills its head in: what this is, what is on
   it, and the mark that has to be on every sheet.
   ========================================================================== */
#masthead {
  position: relative;
  z-index: 99;
  background-color: var(--dy-paper);
  border-bottom: 2px solid var(--dy-ink);
}

/* The frame line belongs to the whole row, drawn once, on #masthead. */
#masthead .main-header-bar,
#masthead .ast-primary-header-bar {
  border-bottom: 0;
}

/* The division ticks, hung under that line and starting on the sheet's own
   left rule so the divisions agree with the content below them. */
#masthead::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: max(var(--dy-gutter), (100% - var(--dy-sheet-w)) / 2);
  right: max(var(--dy-gutter), (100% - var(--dy-sheet-w)) / 2);
  height: 8px;
  background-image: var(--dy-tick-fill);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 4px, 100% 8px;
  background-position: left top, left top;
  pointer-events: none;
}

/* The field row. The wordmark field is as wide as the wordmark, which is what
   a field is; the sections take the rest and sit against the last rule. */
#ast-desktop-header .ast-builder-grid-row.ast-builder-grid-row-2,
#ast-desktop-header .ast-builder-grid-row.ast-builder-grid-row-2-equal,
#ast-desktop-header .ast-builder-grid-row.ast-builder-grid-row-2-lheavy,
#ast-desktop-header .ast-builder-grid-row.ast-builder-grid-row-2-rheavy {
  grid-template-columns: max-content 1fr;
}

#ast-desktop-header .site-header-primary-section-left {
  padding-right: var(--dy-s3);
  border-right: 1px solid var(--dy-ink);
}

#ast-desktop-header .site-header-primary-section-right {
  justify-content: flex-end;
  padding-left: var(--dy-s3);
}

/* The stamp is the last field, ruled off from the sections. It stretches to the full height of the
   row, because a field rule that stops short of the frame is not a field rule: the wordmark field
   is a grid cell and takes the whole height by itself, and this one has to be told to. */
#ast-desktop-header .ast-header-html-1 {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin-left: var(--dy-s3);
  padding-left: var(--dy-s3);
  border-left: 1px solid var(--dy-ink);
}

.ast-header-html-1 .ast-builder-html-element {
  line-height: 1;
}

/* The name is drawn into the wordmark, so Astra's gap for a site title beside
   it is not wanted. */
.site-header .ast-logo-title-inline .site-logo-img,
.site-header .site-logo-img {
  padding-right: 0;
}

/* Back to the top: a drawn box, not a floating disc. */
#ast-scroll-top {
  width: var(--dy-zone);
  height: var(--dy-zone);
  background-color: var(--dy-cyan-d);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--dy-cyan-d), inset 0 0 0 3px var(--dy-paper);
}

#ast-scroll-top:hover {
  background-color: var(--dy-ink);
}

#ast-scroll-top .ast-icon svg {
  fill: currentColor;
}

/* ==========================================================================
   The sections row and its racks

   The row is handed to the drawer below 1200px by dln_drawer_breakpoint() in
   functions.php, so the rules below start at 1200 and the two have to be
   moved together.
   ========================================================================== */
@media (min-width: 1200px) {
  /* Astra's link box runs the full height of the row, which means a pointer
     travelling towards a rack never crosses dead ground. */
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
    position: relative;
    padding-left: var(--dy-s1);
    padding-right: var(--dy-s1);
    font-family: var(--dy-letter);
    font-size: var(--dy-h50);
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  /* The section the open page belongs to, marked by a thick line under the
     name: the way a drawing marks the view you are looking at. */
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link::after {
    content: "";
    position: absolute;
    left: var(--dy-s1);
    right: var(--dy-s1);
    bottom: 50%;
    height: 3px;
    margin-bottom: calc(var(--dy-s3) * -1);
    background-color: transparent;
  }

  #ast-desktop-header .main-header-menu > .menu-item:hover > .menu-link::after,
  #ast-desktop-header .main-header-menu > .menu-item.focus > .menu-link::after,
  #ast-desktop-header .main-header-menu > .current-menu-ancestor > .menu-link::after,
  #ast-desktop-header .main-header-menu > .current-menu-item > .menu-link::after {
    background-color: var(--dy-cyan);
  }

  /* Astra holds the arrow ten points clear of the name; the row has a
     wordmark, the sections and the stamp to fit, and that spacing is worth
     more to the row than to the arrow. */
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle {
    margin-left: 0;
  }

  #ast-desktop-header .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle .ast-arrow-svg {
    margin-left: 4px;
  }

  /* A rack is a drawn box on the sheet: the thick frame line, the paper
     inside it, and nothing floating. No shadow and no offset block, because a
     dyeline is one pass of one colour and has no second impression to show. */
  #ast-desktop-header .main-header-menu > .menu-item > .sub-menu {
    top: calc(100% - var(--dy-s1));
    width: 320px;
    padding: var(--dy-s1);
    border: 2px solid var(--dy-ink);
    background-color: var(--dy-paper);
    box-shadow: none;
  }

  /* A lip as deep as the gap, so a rack does not close mid reach. */
  #ast-desktop-header .main-header-menu > .menu-item > .sub-menu::before {
    height: var(--dy-s1);
  }

  /* Past nine guides a section needs a second column, past eighteen a third,
     or the rack runs off the foot of the window. Which class a section
     carries is worked out while the menu is built, not guessed here. */
  #ast-desktop-header .main-header-menu > .dy-rack--two > .sub-menu {
    width: min(600px, 48vw);
    column-count: 2;
    column-gap: var(--dy-s2);
    column-rule: 1px solid var(--dy-grid-maj);
  }

  #ast-desktop-header .main-header-menu > .dy-rack--wide > .sub-menu {
    width: min(840px, 64vw);
    column-count: 3;
    column-gap: var(--dy-s2);
    column-rule: 1px solid var(--dy-grid-maj);
  }

  #ast-desktop-header .main-header-menu > .dy-rack--two > .sub-menu > .menu-item,
  #ast-desktop-header .main-header-menu > .dy-rack--wide > .sub-menu > .menu-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  /* The closing sections stand near the sheet's right rule, so their racks
     hang leftwards from their own name and no rack reaches past the glass. */
  #ast-desktop-header .main-header-menu > .dy-rack--left:hover > .sub-menu,
  #ast-desktop-header .main-header-menu > .dy-rack--left.focus > .sub-menu,
  #ast-desktop-header .main-header-menu > .dy-rack--left > .sub-menu.toggled-on {
    left: auto;
    right: 0;
  }

  /* An entry in the rack: a line in a schedule, flat, marked only where the
     pointer is. */
  #ast-desktop-header .main-header-menu .sub-menu .menu-item {
    border: 0;
  }

  #ast-desktop-header .main-header-menu .sub-menu .menu-link {
    display: block;
    padding: 5px var(--dy-s1);
    background-color: transparent;
    box-shadow: inset 3px 0 0 transparent;
    color: var(--dy-ink);
    font-family: var(--dy-prose);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.34;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
  }

  #ast-desktop-header .main-header-menu .sub-menu .menu-link > .ast-icon {
    display: none;
  }

  /* The section's own page, standing at the head of its rack as that rack's
     caption. */
  #ast-desktop-header .main-header-menu .sub-menu .dy-head > .menu-link {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--dy-ink);
    color: var(--dy-ink-2);
    font-family: var(--dy-letter);
    font-size: var(--dy-h35);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  #ast-desktop-header .main-header-menu .sub-menu .menu-item:hover > .menu-link,
  #ast-desktop-header .main-header-menu .sub-menu .menu-item > .menu-link:focus-visible {
    background-color: var(--dy-field);
    box-shadow: inset 3px 0 0 var(--dy-cyan);
    color: var(--dy-ink);
  }

  #ast-desktop-header .main-header-menu .sub-menu .current-menu-item > .menu-link {
    background-color: var(--dy-field-2);
    box-shadow: inset 3px 0 0 var(--dy-cyan-d);
    font-weight: 600;
  }
}

/* ==========================================================================
   The phone row and the drawer
   ========================================================================== */
#ast-mobile-header .ast-header-html-1 {
  margin-right: var(--dy-s2);
  padding: 0;
}

#ast-mobile-header .ast-button-wrap {
  flex: none;
}

#ast-mobile-header .menu-toggle.main-header-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--dy-s1);
  min-height: var(--dy-zone);
  padding: var(--dy-s1) var(--dy-s2);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--dy-cyan-d), inset 0 0 0 3px var(--dy-paper);
}

#ast-mobile-header .menu-toggle .mobile-menu-wrap {
  display: inline-flex;
}

#ast-mobile-header .menu-toggle .mobile-menu-wrap .mobile-menu {
  padding: 0;
  color: #FFFFFF;
  font-family: var(--dy-letter);
  font-size: var(--dy-h50);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Small phones. The row carries three things that cannot be dropped, the
   wordmark, the compliance stamp and the way into the sections, and at 390px
   the sheet has 350px to put them in. Measured rather than guessed: the
   wordmark at 160, the stamp at 44 wide with its 8 of margin, and the button
   at 116 with its name still on it come to 328, which leaves room for the gap
   between the two sides of the row. The name stays on the button as far down
   as the sheet allows, because "Sections" is the only thing on the row that
   says what the button opens; below 361px it goes and the icon stands alone,
   with the name left in the markup for anyone listening. */
@media (max-width: 420px) {
  #ast-mobile-header .ast-builder-grid-row {
    column-gap: var(--dy-s1);
  }

  #ast-mobile-header .custom-logo-link img {
    width: 160px;
    max-width: 160px;
  }

  #ast-mobile-header .ast-header-html-1 {
    margin-right: var(--dy-s1);
  }

  #ast-mobile-header .dy-18 {
    min-width: 44px;
    height: var(--dy-s3);
    padding: 0 6px;
    font-size: 11px;
  }

  #ast-mobile-header .menu-toggle.main-header-menu-toggle {
    gap: 6px;
    padding: var(--dy-s1) var(--dy-s2);
  }

  #ast-mobile-header .menu-toggle .mobile-menu-wrap .mobile-menu {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  #ast-mobile-header .custom-logo-link img {
    width: 150px;
    max-width: 150px;
  }

  #ast-mobile-header .menu-toggle .mobile-menu-wrap {
    display: none;
  }
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  max-width: min(92%, 420px);
  background-color: var(--dy-paper);
  border-left: 2px solid var(--dy-ink);
  box-shadow: none;
}

.ast-mobile-popup-drawer .ast-mobile-popup-header {
  align-items: center;
  justify-content: space-between;
  padding: var(--dy-s2) var(--dy-s2) var(--dy-s1) var(--dy-s3);
}

/* The drawer says what it is, in the same lettering every other caption on
   the sheet uses, and the close button is pushed to the far side by it. The
   word is the one on the button that opened the drawer. */
.ast-mobile-popup-drawer .ast-mobile-popup-header::before {
  content: "Index";
  color: var(--dy-ink-2);
  font-family: var(--dy-letter);
  font-size: var(--dy-h35);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
  width: var(--dy-zone);
  height: var(--dy-zone);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dy-ink);
  background: var(--dy-paper);
  color: var(--dy-ink);
}

/* Astra turns a focused control's border dotted. The ring above is the one
   mark a keyboard gets, so the drawn edge stays drawn: the style has to be
   written back as well as the colour, or the box goes dotted under a pointer
   press that should leave no mark at all. */
.ast-mobile-popup-drawer.active .ast-mobile-popup-header .menu-toggle-close:focus,
#ast-scroll-top:focus {
  border-style: solid;
  border-color: var(--dy-ink);
}

/* The accordion: one drawn box per section, opened by its own name. */
#ast-hf-mobile-menu {
  padding: var(--dy-s1) var(--dy-s2) 0;
  background: transparent;
}

#ast-hf-mobile-menu > .menu-item {
  margin-bottom: var(--dy-s1);
  border: 1px solid var(--dy-ink);
  background: var(--dy-paper);
}

#ast-hf-mobile-menu > .menu-item > .menu-link {
  padding: var(--dy-s2) var(--dy-s6) var(--dy-s2) var(--dy-s2);
  background: var(--dy-paper);
  color: var(--dy-ink);
  font-family: var(--dy-letter);
  font-size: var(--dy-h60);
  font-weight: 600;
  line-height: 1.3;
}

#ast-hf-mobile-menu > .ast-submenu-expanded > .menu-link {
  background: var(--dy-field);
  border-bottom: 1px solid var(--dy-ink);
}

#ast-hf-mobile-menu > .current-menu-ancestor > .menu-link,
#ast-hf-mobile-menu > .current-menu-item > .menu-link {
  box-shadow: inset 4px 0 0 var(--dy-cyan);
}

#ast-hf-mobile-menu > .menu-item > .ast-menu-toggle {
  top: 2px;
  right: 2px;
  width: var(--dy-zone);
  height: var(--dy-zone);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--dy-cyan-d);
}

#ast-hf-mobile-menu > .menu-item > .ast-menu-toggle .ast-icon svg {
  margin-top: 0;
}

#ast-hf-mobile-menu .sub-menu {
  padding: 0 0 var(--dy-s1);
  background: var(--dy-paper);
}

#ast-hf-mobile-menu .sub-menu .menu-item {
  border: 0;
}

#ast-hf-mobile-menu .sub-menu .menu-link {
  padding: 11px var(--dy-s2);
  border-top: 1px solid var(--dy-grid-maj);
  background: var(--dy-paper);
  color: var(--dy-ink);
  font-family: var(--dy-prose);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

#ast-hf-mobile-menu .sub-menu .menu-link > .ast-icon {
  display: none;
}

#ast-hf-mobile-menu .sub-menu .dy-head > .menu-link {
  border-top: 0;
  color: var(--dy-ink-2);
  font-family: var(--dy-letter);
  font-size: var(--dy-h35);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#ast-hf-mobile-menu .sub-menu .current-menu-item > .menu-link {
  background: var(--dy-field-2);
  box-shadow: inset 4px 0 0 var(--dy-cyan-d);
  font-weight: 600;
}

/* What stands under the sections once the drawer is open. */
.dy-drawer-note {
  display: flex;
  align-items: flex-start;
  gap: var(--dy-s2);
  margin: var(--dy-s1) 0 var(--dy-s3);
  color: var(--dy-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.dy-drawer-note a {
  color: var(--dy-cyan-d);
  font-weight: 600;
}

.ast-mobile-popup-content .ast-header-html-2 {
  padding: 0 var(--dy-s3);
}

/* ==========================================================================
   The footer: the title block.

   Every drawing closes with a title block, and a title block is the honest
   footer for a site whose argument is arithmetic: who drew this, what it was
   drawn from, at what scale, on what revision, and the marks that have to be
   on every sheet. It is a ruled grid of fields on the field ground, thick
   line round the outside, thin lines between the cells, caption over value in
   each one.

   The division ticks are laid along the top of it, the same marks as under
   the header row and off the same two variables, so the sheet closes the way
   it opened.
   ========================================================================== */
/* The space above the title block belongs to the content column, not to the title block: a margin
   here would push the block down inside the footer and leave a band of the footer's own colour
   above the frame line, where the sheet should still be. */
.site-footer .site-primary-footer-wrap {
  position: relative;
  padding-top: var(--dy-s5);
  padding-bottom: var(--dy-s5);
  background-color: var(--dy-field);
  border-top: 2px solid var(--dy-ink);
  color: var(--dy-ink);
}

.site-footer .site-primary-footer-wrap::before {
  content: "";
  position: absolute;
  top: 2px;
  left: max(var(--dy-gutter), (100% - var(--dy-sheet-w)) / 2);
  right: max(var(--dy-gutter), (100% - var(--dy-sheet-w)) / 2);
  height: 8px;
  background-image: var(--dy-tick-fill);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 4px, 100% 8px;
  background-position: left top, left top;
  pointer-events: none;
}

/* The cells. Astra lays the three columns out as a grid row; the rules
   between them are the title block's thin lines, so each column after the
   first is ruled off from the one before it. The gap is closed to nothing,
   because a title block has no gaps: the cells share their edges. */
.site-footer .site-primary-footer-wrap .ast-builder-grid-row {
  gap: 0;
}

.site-footer .site-primary-footer-wrap .site-footer-section {
  padding: var(--dy-s3);
  margin-bottom: 0;
  border-left: 1px solid var(--dy-ink);
}

.site-footer .site-primary-footer-wrap .site-footer-section:first-child {
  padding-left: 0;
  border-left: 0;
}

.site-footer .site-primary-footer-wrap .site-footer-section:last-child {
  padding-right: 0;
}

.site-footer .ast-builder-html-element {
  font-size: var(--dy-h50);
  line-height: 1.55;
}

.site-footer .ast-builder-html-element a,
.site-footer .ast-footer-copyright a {
  color: var(--dy-cyan-d);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.site-footer .ast-builder-html-element a:hover {
  color: var(--dy-cyan-dd);
}

/* A cell holding more than one field rules them off from one another, which is
   how a title block subdivides a box. */
.dy-block {
  display: flex;
  flex-direction: column;
  gap: var(--dy-s3);
}

.dy-block > .dy-field + .dy-field {
  padding-top: var(--dy-s3);
  border-top: 1px solid var(--dy-ink);
}

.dy-field {
  margin: 0;
}

/* The foot of the first cell: three small fields side by side, which is where
   a drawing puts the scale, the revision and the marks. */
.dy-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dy-s3);
  align-items: flex-end;
}

.dy-field-row > .dy-field {
  flex: 1 1 auto;
  min-width: 96px;
}

.dy-field-row > .dy-field:first-child {
  flex: 1 1 180px;
}

/* The scale field carries a dimension rather than a number, because the scale
   of this site is a ratio and a dimension is how a ratio is drawn. */
.dy-field .dy-dim {
  margin: var(--dy-s1) 0 0;
}

.dy-foot-mark {
  margin: 0 0 var(--dy-s2);
}

.dy-foot-mark img {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
}

.dy-foot-mark--plain {
  color: var(--dy-ink);
  font-family: var(--dy-letter);
  font-size: var(--dy-h70);
  font-weight: 600;
}

.dy-foot-help {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dy-foot-help li {
  margin: 0;
  padding: var(--dy-s1) 0;
  border-top: 1px solid var(--dy-grid-maj);
}

.dy-foot-help li:first-child {
  padding-top: 0;
  border-top: 0;
}

.dy-foot-help strong {
  font-weight: 600;
}

/* The pages cell. Its caption is drawn in CSS because Astra's menu element
   takes no heading of its own; it is a field caption and nothing more, so
   nothing a reader needs is held in a content property. */
.site-footer .footer-nav-wrap::before {
  content: "Sheets";
  display: block;
  margin-bottom: var(--dy-s1);
  color: var(--dy-ink-2);
  font-family: var(--dy-letter);
  font-size: var(--dy-h35);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer #astra-footer-menu {
  gap: 0;
}

.site-footer #astra-footer-menu .menu-item {
  margin: 0;
}

.site-footer #astra-footer-menu .menu-link {
  display: inline-block;
  padding: 3px 0;
  color: var(--dy-ink);
  font-family: var(--dy-letter);
  font-size: var(--dy-h50);
  font-weight: 500;
  text-decoration: none;
}

.site-footer #astra-footer-menu .menu-link:hover,
.site-footer #astra-footer-menu .current-menu-item > .menu-link {
  color: var(--dy-cyan-d);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   The band at the foot: the sheet's trimmed edge.

   The one dark ground on the site, and the one place the bright cyan is legal
   as small text, where it measures 4.95. The compliance strip lives here,
   because the marks that have to be on every sheet are on the edge of every
   sheet.
   ========================================================================== */
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
  padding-top: var(--dy-s3);
  padding-bottom: var(--dy-s3);
  background-color: var(--dy-ink);
  border-top: 2px solid var(--dy-cyan);
}

/* Astra runs the copyright field through wpautop(), so the strip arrives as
   spans inside one paragraph. That paragraph is the row. */
.ast-footer-copyright p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dy-s2) var(--dy-s3);
  margin: 0;
  color: var(--dy-paper);
}

.site-footer .ast-footer-copyright a {
  color: var(--dy-cyan);
}

.site-footer .ast-footer-copyright a:hover {
  color: var(--dy-field);
}

.dy-strip-care {
  display: flex;
  flex: 1 1 32em;
  align-items: center;
  gap: var(--dy-s2);
  font-size: 14px;
  line-height: 1.55;
}

/* On the dark ground the stamp is knocked out of it rather than printed on
   the field: the paper rule carries the paper letter at 16.63. */
.site-footer .ast-footer-copyright .dy-18 {
  border-color: var(--dy-paper);
  background: transparent;
  color: var(--dy-paper);
}

.dy-strip-small {
  display: block;
  flex: 1 1 100%;
  color: var(--dy-field);
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================================================
   Narrower sheets
   ========================================================================== */

/* Astra's drawer header takes its side space from its own setting and holds
   it at a flat 20px however a child theme writes the rule, and the row it
   puts inside that space is full bleed with no measure of its own. Left
   alone, the wordmark therefore stands on a different rule from the prose
   under it for as long as the drawer is the header, which is the one fault
   this build is not allowed to have.

   Two things settle it. The sheet takes the same flat 20 over that whole
   band, and the drawer row is given the sheet's own measure, so that where
   the sheet is capped at 1140 and centred the row is capped and centred with
   it, and where the window is narrower than the sheet both fill it.

   The boundary is 1201 because that is where Astra hands the row over,
   measured in the browser: the drawer is the header up to and including
   1201px and the desktop row takes it from 1202. It tracks
   dln_drawer_breakpoint() in functions.php, which sets Astra's tablet
   breakpoint to 1200 and so puts the hand-over one pixel above it. The two
   are one decision written in two places, and moving one without the other
   puts the wordmark and the prose back on different rules. */
@media (max-width: 1201px) {
  :root {
    --dy-gutter: 20px;
  }

  #ast-mobile-header .ast-builder-grid-row {
    width: 100%;
    max-width: var(--dy-sheet-w);
    margin-left: auto;
    margin-right: auto;
  }
}

/* The lettering ladder drops one rung on a phone, and the frame closes in. */
@media (max-width: 921px) {
  :root {
    --dy-h140: 34px;
    --dy-h100: 24px;
    --dy-h70: var(--dy-h60);
    --dy-frame-off: 6px;
  }

  .site-footer .site-primary-footer-wrap {
    margin-top: var(--dy-s6);
    padding-top: var(--dy-s4);
    padding-bottom: var(--dy-s4);
  }

  /* Stacked, the cells are ruled off above rather than beside: the title block
     turns through ninety degrees and keeps its lines. */
  .site-footer .site-primary-footer-wrap .site-footer-section {
    padding: var(--dy-s3) 0;
    border-left: 0;
    border-top: 1px solid var(--dy-ink);
  }

  .site-footer .site-primary-footer-wrap .site-footer-section:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .ast-plain-container .site-content > .ast-container > #primary {
    margin-top: var(--dy-s4);
    margin-bottom: var(--dy-s5);
  }
}

@media (max-width: 544px) {
  .site-footer #astra-footer-menu {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--dy-s2);
  }

  .dy-strip-care {
    flex-wrap: wrap;
  }

  /* The three small boxes along the foot of the title block do not wrap well:
     left to flex, the scale ran out of room and its arrowhead finished
     against the revision triangle beside it. On a narrow sheet they are laid
     out instead, with the scale across the top and the revision and the mark
     under it, which is an arrangement a title block actually uses. */
  .dy-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dy-s3) var(--dy-s2);
    align-items: end;
  }

  .dy-field-row > .dy-field:first-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Print: a sheet printed off is a sheet. The header furniture and the drawer
   go, the title block stays because it says what the sheet is, and the strip
   stays because a printed page carrying the offers is still carrying them.
   ========================================================================== */
@media print {
  #masthead::after,
  .ast-header-html-1,
  .ast-mobile-popup-drawer,
  .site-content::before,
  .site-content::after {
    display: none;
  }

  body,
  .site-footer .site-primary-footer-wrap,
  .site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
    background: #FFFFFF;
    border-color: #000000;
  }

  body,
  .ast-footer-copyright p,
  .dy-strip-care,
  .dy-strip-small,
  .site-footer .ast-footer-copyright a,
  .site-footer .ast-footer-copyright .dy-18 {
    color: #000000;
  }

  .dy-18 {
    border-color: #000000;
    background: none;
    color: #000000;
  }

  .dy-plate {
    background-image: none;
  }
}

/* The grid fill, the drawn marks and the ruled underlines are all carried by
   background images, which forced colours mode throws away. The frame lines,
   the field edges and the lettering are borders and text, so the sheet keeps
   its structure; what is dropped here is only what would be left as an empty
   box with nothing drawn in it. */
@media (forced-colors: active) {
  .dy-plate,
  .dy-dim::before,
  .dy-dim::after,
  .dy-leader::before,
  .dy-rev,
  #masthead::after,
  .site-footer .site-primary-footer-wrap::before {
    background-image: none;
  }

  .dy-dim::before,
  .dy-dim::after {
    border-top: 1px solid CanvasText;
    height: 0;
  }

  .dy-leader {
    padding-left: var(--dy-s3);
    border-left: 2px solid CanvasText;
  }

  .dy-rev {
    border: 1px solid CanvasText;
    width: auto;
    padding: 0 4px;
  }
}

/* Nothing moves for a reader who has asked their system for stillness. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }
}