/*
Theme Name:  The Spin Count
Theme URI:   https://150freespins.uk/
Description: A counting house child of Astra: an ivory tally sheet, ink lettering, one oxblood register for a counted figure, brass rules and a hairline counting grid. Every count on this site is printed in a register of three cells, the count, the price of one, and what the count comes to, so a headline number is never shown without the unit that makes it a quantity. Switching it on writes the palette, the lettering, an 1140px sheet and the two menus into Astra's own Customizer values and lays the menus out from the manifest the pages plugin carries. The header row, the content column and the title block all stand between the same two rules. The theme draws the frame only; the pages and the ranking are drawn by their own plugins.
Author:      The Spin Count
Author URI:  https://150freespins.uk/
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: tly
*/

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

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

   Every ratio quoted below 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 tally sheet is paper off a pad in a counting house, so the ground is a
     warm ivory rather than white. The other six sites on this network are
     white, tinted blue, green, red and cream, so the ivory is read with a
     cooler grey ink than cream usually takes, which is what keeps it from
     reading as the cream site. */
  --tl-paper: #FBF8F0;
  --tl-field: #F1E9D8;    /* a cell of the register, a banded row */
  --tl-field-2: #E6DAC1;  /* a cell being called out: a total, the 18+ stamp */

  /* ---- The lettering ----
     One ink for everything that is read, and a second for what is said under
     it. Neither is black: a counting house works in iron gall ink, which is
     a very dark warm grey. */
  --tl-ink: #1C1A17;      /* body, headings, the thick frame line.  16.36 on
                             paper, 14.38 on a cell, 12.54 on a called cell */
  --tl-ink-2: #55503F;    /* captions, the line under a figure.  7.59 on
                             paper, 6.67 on a cell, 5.82 on a called cell */

  /* ---- The register ----
     The oxblood is the counted figure and nothing else. It is dark enough to
     carry small text anywhere on this site, which is the whole reason it was
     chosen over the brass: a count is the one thing on the page a reader must
     be able to read at any size. */
  --tl-red: #8E2017;      /* 8.35 on paper, 7.34 on a cell, 6.40 on a called
                             cell. White on it 8.86 */
  --tl-red-d: #6D170F;    /* 11.12 on paper. White on it 11.80. A link under
                             the pointer, a button under the pointer */

  /* ---- The rules ----
     The brass rule is the drawn line of this site: the rule under a heading,
     the frame of a register, the five bar gate. It measures 3.97 on paper,
     3.49 on a cell and 3.04 on a called cell, so it clears the 3:1 a
     meaningful line needs on every ground here, and it is BARRED FROM TEXT
     under 24px, where it would measure under 4.5. Nothing in this file or in
     either plugin sets a sentence, a label or a figure in it on a light
     ground. On the ink band at the foot it measures 4.12 and may carry small
     text there. */
  --tl-brass: #9A7622;

  /* The hairline of the counting grid. 1.40 on paper, and barred from text of
     any size: it carries no information and is there to be counted against. */
  --tl-hair: #DED3BB;
  --tl-hair-2: #C3B695;   /* 1.89 on paper: every fifth line of the grid */

  /* ---- The three faces ----
     No font binary ships with this theme, so every face is a stack of what is
     already on the machine. That is a deliberate choice and not an omission:
     see the note in functions.php at tly_local_faces().

     The lettering face is the serif a ledger is headed in, the prose face is
     the reader's own interface face, and the figure face is a monospace,
     because a register of figures only lines up in one. */
  --tl-letter: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --tl-prose: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tl-figure: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- The lettering ladder ----
     Five heights and no more, each one a step of about 1.3 on the one under
     it, which is close enough to read as a series and far enough apart that
     two steps are never mistaken for one. */
  --tl-t1: 13px;   /* a cell caption, a reference line */
  --tl-t2: 15px;   /* a caption under a figure, the small print */
  --tl-t3: 17px;   /* the reading size */
  --tl-t4: 23px;   /* a third level heading */
  --tl-t5: 32px;   /* a second level heading */
  --tl-t6: 44px;   /* the h1 */

  /* ---- The module ----
     Eight pixels, and every space on the site is a whole number of them. The
     counting grid is drawn at four modules, with every fifth line darker,
     which is the five bar gate laid flat. */
  --tl-m: 8px;
  --tl-m2: 16px;
  --tl-m3: 24px;
  --tl-m4: 32px;
  --tl-m6: 48px;
  --tl-m8: 64px;

  /* ---- The sheet's own measure ----
     One width on this site. The header row, the content column and the title
     block are all given this box, here and again in Astra's settings, so the
     wordmark, the prose, the figures and the ranking stand between one left
     rule and one right rule. There is no narrower measure for prose anywhere.
     The gutter sits outside the sheet: 32px, which is four modules. */
  --tl-sheet: 1140px;
  --tl-gutter: var(--tl-m4);
}

/* ==========================================================================
   The ground, and the one width
   ========================================================================== */

body {
  background-color: var(--tl-paper);
  color: var(--tl-ink);
  font-family: var(--tl-prose);
  font-size: var(--tl-t3);
  line-height: 1.66;
}

/* Astra's own containers are given the sheet's box, so nothing on the page
   takes a measure of its own. */
.ast-container,
.site-content .ast-container,
.site-primary-header-wrap .ast-container,
.site-primary-footer-wrap .ast-container,
.site-below-footer-wrap .ast-container {
  max-width: var(--tl-sheet);
  padding-left: var(--tl-gutter);
  padding-right: var(--tl-gutter);
}

/* The counting grid, behind the whole sheet. Four modules to a line and every
   fifth line darker, so the reader is looking at the thing the site is named
   after. It is drawn on the body and never on a block in the flow, which is
   what keeps it from shifting anything. */
body.tly-counted {
  background-image:
    repeating-linear-gradient(to right, var(--tl-hair) 0 1px, transparent 1px calc(var(--tl-m4) * 1)),
    repeating-linear-gradient(to right, var(--tl-hair-2) 0 1px, transparent 1px calc(var(--tl-m4) * 5));
  background-position: center top;
  background-size: calc(var(--tl-m4) * 5) 100%;
  background-attachment: fixed;
}

/* ==========================================================================
   Lettering
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title {
  font-family: var(--tl-letter);
  color: var(--tl-ink);
  font-weight: 600;
  letter-spacing: -0.004em;
}

h1 { font-size: var(--tl-t6); line-height: 1.1; }
h2 { font-size: var(--tl-t5); line-height: 1.18; }
h3 { font-size: var(--tl-t4); line-height: 1.3; }
h4 { font-size: var(--tl-t3); line-height: 1.44; }

/* A heading is ruled off below in brass, which is the mark a ledger column
   takes. A border costs the block no horizontal room, so a ruled heading still
   begins and ends on the sheet's two rules. */
h2 {
  border-bottom: 2px solid var(--tl-brass);
  padding-bottom: var(--tl-m);
  margin-top: var(--tl-m6);
  margin-bottom: var(--tl-m3);
}

h3 {
  margin-top: var(--tl-m4);
  margin-bottom: var(--tl-m2);
}

p { margin: 0 0 var(--tl-m3); }

a {
  color: var(--tl-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--tl-red-d);
}

/* A figure in a sentence is set in the figure face, so a quantity reads as a
   measurement and lines up with the same quantity in a register below it. */
.tl-figure {
  font-family: var(--tl-figure);
  font-size: 0.94em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   The marks this site draws, published here for the whole site

   The pages plugin and the ranking plugin both reach for these, so a counter,
   a dimension and a plate are drawn one way wherever they appear. Each one is
   restated inside the plugins' own stylesheets off these same tokens, for the
   one reason a fallback exists: a page has to read before this theme lands and
   if it is ever swapped out.
   ========================================================================== */

/* The counter. The device this site is built on: three cells in one ruled
   frame, the count, the price of one, and what the count comes to. A headline
   figure never stands on this site without the other two beside it. */
.tl-count {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: stretch;
  border: 2px solid var(--tl-ink);
  background: var(--tl-paper);
  font-family: var(--tl-figure);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--tl-m3);
}

.tl-count__cell {
  display: block;
  padding: var(--tl-m) var(--tl-m2);
  border-left: 1px solid var(--tl-brass);
}

.tl-count__cell:first-child { border-left: 0; }

.tl-count__cap {
  display: block;
  font-family: var(--tl-prose);
  font-size: var(--tl-t1);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-ink-2);
}

.tl-count__fig {
  display: block;
  font-size: var(--tl-t4);
  line-height: 1.3;
  color: var(--tl-red);
}

/* The last cell is the one the reader came for, so it is called out with the
   deeper tint and the ink. */
.tl-count__cell--comes-to {
  background: var(--tl-field-2);
}

.tl-count__cell--comes-to .tl-count__fig {
  color: var(--tl-ink);
}

/* A dimension: a measured quantity stated on its own line, between two end
   marks, the way a drawing states one. */
.tl-dim {
  margin: var(--tl-m3) 0;
  font-family: var(--tl-figure);
  font-size: var(--tl-t2);
  color: var(--tl-ink);
}

.tl-dim__fig {
  display: inline-block;
  padding: var(--tl-m) var(--tl-m2);
  border-top: 2px solid var(--tl-brass);
  border-bottom: 2px solid var(--tl-brass);
  background: var(--tl-field);
  font-variant-numeric: tabular-nums;
}

/* A plate: the framed drawing area, and its caption under the frame. */
.tl-plate {
  margin: var(--tl-m6) 0;
  padding: 0;
  border: 2px solid var(--tl-ink);
  background: var(--tl-paper);
}

.tl-plate img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--tl-brass);
}

.tl-plate figcaption {
  padding: var(--tl-m2);
  font-size: var(--tl-t2);
  line-height: 1.5;
  color: var(--tl-ink-2);
}

.tl-plate figcaption b { color: var(--tl-ink); }

/* A note: a condition or a definition, ruled down its left edge. The rule is
   what earns it the one inset the house style allows a block in the flow. */
.tl-note {
  margin: var(--tl-m3) 0;
  padding: var(--tl-m2) var(--tl-m2) var(--tl-m);
  border-left: 4px solid var(--tl-brass);
  background: var(--tl-field);
}

.tl-note p:last-child { margin-bottom: var(--tl-m2); }

/* The revision mark, and the age stamp. Both are small boxed marks off the
   same two rules. */
.tl-rev,
.tl-18 {
  display: inline-block;
  padding: 1px var(--tl-m);
  border: 1px solid var(--tl-ink);
  background: var(--tl-field-2);
  font-family: var(--tl-figure);
  font-size: var(--tl-t1);
  line-height: 1.5;
  color: var(--tl-ink);
}

.tl-18 {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* A telephone number is a figure, so it is set as one. */
.tl-tel {
  font-family: var(--tl-figure);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The five bar gate: four uprights and the fifth stroke across them, which is
   how a count of five is written down by hand. It rules off a part of the page
   that has been counted. */
.tl-gate {
  display: block;
  height: var(--tl-m3);
  margin: var(--tl-m6) 0;
  border: 0;
  background-image:
    repeating-linear-gradient(to right, var(--tl-ink) 0 2px, transparent 2px 10px),
    linear-gradient(to bottom, transparent calc(50% - 1px), var(--tl-brass) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 50px 100%, 50px 100%;
  background-repeat: repeat-x, repeat-x;
  background-position: left center;
}

/* A caption above a list or a bar, set in the prose face at the smallest
   height, which is how every cell on the site is labelled. */
.tl-cap {
  display: block;
  margin-bottom: var(--tl-m);
  font-family: var(--tl-prose);
  font-size: var(--tl-t1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-ink-2);
}

/* What only a screen reader reads. */
.tl-offscreen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

   Three fields on one row: the wordmark, the sections and the age stamp, with
   the frame line under them standing in for Astra's own separator.
   ========================================================================== */

.site-header,
.ast-primary-header-bar {
  background-color: var(--tl-paper);
  border-bottom: 2px solid var(--tl-ink);
}

.site-title,
.site-title a {
  font-family: var(--tl-letter);
  color: var(--tl-ink);
}

.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link {
  font-family: var(--tl-letter);
  font-size: var(--tl-t3);
  color: var(--tl-ink);
}

.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link:hover,
.ast-primary-header-bar .main-header-menu > .menu-item.current-menu-item > .menu-link {
  color: var(--tl-red);
}

/* A rack of guides under a section name. It is a drawn box: two rules and the
   paper, with no shadow and no rounding, because nothing else on the site has
   either.

   The box is drawn on .tl-rack, which is the class the theme's own menu builder
   puts on every section that has a rack, rather than on Astra's .sub-menu. A
   rule hung on another theme's internal class is a rule that breaks quietly
   when that theme is updated, and only this theme knows which items are racks. */
.ast-desktop .main-header-menu .menu-item.tl-rack > .sub-menu {
  border: 2px solid var(--tl-ink);
  background: var(--tl-paper);
  box-shadow: none;
}

.ast-desktop .main-header-menu .sub-menu .menu-link {
  font-family: var(--tl-prose);
  font-size: var(--tl-t2);
  color: var(--tl-ink);
}

.ast-desktop .main-header-menu .sub-menu .menu-item.tl-head > .menu-link {
  font-family: var(--tl-letter);
  border-bottom: 1px solid var(--tl-brass);
}

/* A rack of more than nine entries takes a second column, and more than
   eighteen a third, so no rack runs off the foot of the window. The theme's
   menu builder puts these classes on. */
.ast-desktop .main-header-menu .menu-item.tl-rack--two > .sub-menu,
.ast-desktop .main-header-menu .menu-item.tl-rack--wide > .sub-menu {
  display: grid;
  grid-auto-flow: row;
}

.ast-desktop .main-header-menu .menu-item.tl-rack--two > .sub-menu {
  grid-template-columns: repeat(2, minmax(13rem, 1fr));
  width: auto;
}

.ast-desktop .main-header-menu .menu-item.tl-rack--wide > .sub-menu {
  grid-template-columns: repeat(3, minmax(13rem, 1fr));
  width: auto;
}

/* The last two sections stand near the sheet's right rule, so their racks hang
   leftwards and nothing reaches past the glass. */
.ast-desktop .main-header-menu .menu-item.tl-rack--left > .sub-menu {
  left: auto;
  right: 0;
}

/* The drawer on a phone, and the note printed under the sections inside it. */
.tl-drawer-note {
  margin: var(--tl-m3) 0 0;
  padding-top: var(--tl-m2);
  border-top: 1px solid var(--tl-brass);
  font-size: var(--tl-t2);
  line-height: 1.5;
  color: var(--tl-ink-2);
}

.tl-drawer-note .tl-18 { margin-right: var(--tl-m); }

/* ==========================================================================
   The title block at the foot

   A ledger closes with the sheet's own particulars, so the footer is a title
   block of ruled cells on the tint, and under it one ink band with the care
   wording and the copyright on it.
   ========================================================================== */

.site-primary-footer-wrap {
  background-color: var(--tl-field);
  border-top: 2px solid var(--tl-ink);
}

.tl-block {
  display: grid;
  gap: var(--tl-m2);
}

.tl-field {
  padding: var(--tl-m2);
  border: 1px solid var(--tl-brass);
  background: var(--tl-paper);
}

.tl-field__cap {
  display: block;
  margin-bottom: var(--tl-m);
  font-size: var(--tl-t1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-ink-2);
}

.tl-field__val {
  display: block;
  font-size: var(--tl-t2);
  line-height: 1.55;
  color: var(--tl-ink);
}

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

.tl-field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tl-m2);
}

.tl-foot-mark {
  margin: 0 0 var(--tl-m);
  font-family: var(--tl-letter);
  font-size: var(--tl-t4);
  line-height: 1.2;
  color: var(--tl-ink);
}

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

.tl-foot-help {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tl-t2);
  line-height: 1.55;
}

.tl-foot-help li {
  margin-bottom: var(--tl-m);
  padding-bottom: var(--tl-m);
  border-bottom: 1px solid var(--tl-hair-2);
}

.tl-foot-help li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* The band. The ink ground is the one place the brass may carry small text, at
   4.12, and the paper on it measures 16.36. */
.site-below-footer-wrap {
  background-color: var(--tl-ink);
  color: var(--tl-paper);
  border-top: 2px solid var(--tl-brass);
  font-size: var(--tl-t2);
}

.site-below-footer-wrap a { color: var(--tl-paper); }

.site-below-footer-wrap a:hover,
.site-below-footer-wrap a:focus { color: var(--tl-field-2); }

.site-below-footer-wrap .tl-18 {
  border-color: var(--tl-paper);
  background: transparent;
  color: var(--tl-paper);
}

.tl-strip-care {
  display: flex;
  gap: var(--tl-m2);
  align-items: flex-start;
  margin-bottom: var(--tl-m);
  line-height: 1.5;
}

.tl-strip-small {
  display: block;
  font-size: var(--tl-t1);
  color: var(--tl-field-2);
}

/* ==========================================================================
   Tables, buttons and forms, so a block the editor drops in is already drawn
   in the house hand rather than in Astra's.
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tl-t2);
}

th, td {
  padding: var(--tl-m) var(--tl-m2);
  border: 1px solid var(--tl-hair-2);
  text-align: left;
  vertical-align: top;
}

thead th {
  border-bottom: 2px solid var(--tl-ink);
  background: var(--tl-field);
  font-family: var(--tl-letter);
}

caption {
  margin-bottom: var(--tl-m);
  font-size: var(--tl-t1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--tl-ink-2);
}

.ast-button,
.button,
button,
input[type="submit"],
.wp-block-button__link {
  border: 2px solid var(--tl-ink);
  border-radius: 0;
  background-color: var(--tl-red);
  color: #FFFFFF;          /* 8.86 on the oxblood */
  font-family: var(--tl-letter);
  font-size: var(--tl-t3);
  letter-spacing: 0.02em;
  padding: var(--tl-m2) var(--tl-m3);
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--tl-red-d);   /* white on it 11.80 */
  color: #FFFFFF;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
  border: 1px solid var(--tl-ink);
  border-radius: 0;
  background: var(--tl-paper);
  color: var(--tl-ink);
  font-family: var(--tl-prose);
}

:focus-visible {
  outline: 3px solid var(--tl-red);
  outline-offset: 2px;
}

/* ==========================================================================
   The two boundaries

   1199px is where the row of six section names stops fitting between the
   wordmark field and the stamp field, so the names go into the drawer. The
   matching decision is tly_drawer_breakpoint() in functions.php, which moves
   Astra's tablet boundary to 1200: the two are one decision written twice.

   921px is Astra's own mobile boundary, where the lettering ladder drops.

   Nothing in either block touches a horizontal padding, a horizontal margin or
   a max-width on a block in the page flow. What they change is the height of
   the lettering, how many columns a grid stands in, and the gutter outside the
   sheet.
   ========================================================================== */

@media (max-width: 1199px) {
  :root { --tl-gutter: var(--tl-m3); }

  .tl-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 921px) {
  :root {
    --tl-t4: 20px;
    --tl-t5: 26px;
    --tl-t6: 31px;
  }

  /* The grid is counted against the measure of the sheet, and on a phone there
     is no measure left to count, so it comes off rather than being squeezed. */
  body.tly-counted { background-image: none; }

  .tl-count {
    display: grid;
    grid-auto-flow: row;
    width: 100%;
  }

  .tl-count__cell {
    border-left: 0;
    border-top: 1px solid var(--tl-brass);
  }

  .tl-count__cell:first-child { border-top: 0; }

  .tl-field-row { grid-template-columns: minmax(0, 1fr); }

  .tl-strip-care { flex-direction: column; gap: var(--tl-m); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* The sheet prints as what it is: a counted page. The grid, the drawer and the
   header row have no business on paper. */
@media print {
  body.tly-counted { background-image: none; }

  .site-header,
  .ast-mobile-header-wrap,
  .site-below-footer-wrap { display: none; }

  body { background: #FFFFFF; color: #000000; font-size: 11pt; }

  .tl-count,
  .tl-plate { break-inside: avoid; }
}