/*
  LaceLoad site styles.

  One stylesheet, no build step, no framework, no web font, no image file. The
  design direction comes from ../../research/ASO.md: warm chalk and linen, dark
  charcoal text, restrained thread colours, wood and paper tones rather than
  craft gradients, and a fine pricking-dot texture used only as decoration and
  never behind small text.

  The visual signature is the START RAIL: an ordered row of pin heads across a
  horizontal rule, with paired strands hanging from each pin and ending in
  bobbin silhouettes. That is the object the audience actually works at, and it
  deliberately shares nothing with BraidPly's horizontal ply lanes and
  three-colour repeat bar, FoldPin's vertical dashed fold line and hole
  circles, or PresetWing's navy worksheet bands.

  Every mark is drawn in CSS, so every page stays plain ASCII with no glyph at
  the mercy of the reader's font. The favicon draws the same motif as inline
  SVG. No image file is fetched anywhere.

  Palette. Every text pair below was computed against its actual background
  with the sRGB relative-luminance formula rather than eyeballed, and the
  numbers are in ../receipts/01-deploy-2026-09-05.md. The lowest text pair on
  the site is 6.08:1, which clears WCAG AA (4.5:1) at normal sizes with room.

    ink        #262019 on paper 14.67  on surface 16.12  on band 13.20  on pillow 11.83
    ink-soft   #574d3e on paper  7.54  on surface  8.28  on band  6.78  on pillow  6.08
    indigo     #1a4a63 on paper  8.68  on surface  9.53  on band  7.81  on pillow  7.00
    paper      #f8f4ea reversed on indigo-deep #123648 11.61
    ecru       #8c4a1e on paper 6.14   paper reversed on ecru 6.14
    gimp       #3f4a2c on paper 8.58   paper reversed on gimp 8.58

  --rule (1.35:1), --edge (2.14:1) and --pillow (1.24:1) are below 3:1 and are NOT used for text and NOT
  used as the only carrier of any meaning. They are ruled lines, swatch borders
  and the pillow bed behind an illustration whose every fact is also written in
  the prose beside it.

  The three thread tokens never carry meaning by hue alone. Each one shows its
  letter (W, E, G), carries a distinct fill (solid, diagonal, dotted), and is
  named in a legend and in the prose. A real lace setup cannot rely on hue
  alone either, which is the point.

  Light only. A second palette means a second full set of contrast
  measurements, and there is no requirement for one here.
*/

:root {
  --ink: #262019;
  --ink-soft: #574d3e;
  --paper: #f8f4ea;
  --surface: #ffffff;
  --band: #efe8d8;
  --indigo: #1a4a63;
  --indigo-deep: #123648;
  --linen: #8a6a24;
  --ecru: #8c4a1e;
  --gimp: #3f4a2c;
  --rule: #ddd3bd;
  --edge: #b6a889;
  --pillow: #e6dcc6;
  --sheet-max: 44rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  /* A bare email address is one unbreakable token. Without this it pushes a
     horizontal scrollbar onto the page at 320px with large accessibility
     text. */
  overflow-wrap: break-word;
}

.sheet { max-width: var(--sheet-max); margin: 0 auto; }

/* --- The pin rail ---------------------------------------------------------
   The site's one recurring mark: a thin rule with evenly spaced pin heads
   sitting on it, the way starting pins sit along the top of a pricking.
   Decorative; nothing depends on seeing it. */
.pin-rail {
  height: 11px;
  border-top: 2px solid var(--indigo);
  background-image: radial-gradient(circle at 6px 5px, var(--indigo) 2.6px, rgba(0,0,0,0) 2.9px);
  background-size: 22px 11px;
  background-repeat: repeat-x;
}

/* --- Masthead ------------------------------------------------------------ */

.masthead { padding: 2rem 0 1.25rem; }

.masthead h1 {
  margin: 0;
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--indigo);
}

.masthead .role {
  margin: 0.45rem 0 0;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.masthead .stamp {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--indigo);
  color: var(--indigo);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.masthead .status {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.masthead nav { margin-top: 1.1rem; font-size: 0.9375rem; }
.masthead nav span[aria-hidden="true"] { padding: 0 0.45rem; color: var(--edge); }

/* --- Section headings: a pin head on the rule ------------------------------ */

h2 {
  margin: 2.5rem 0 0.85rem;
  padding: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--indigo);
}

h3 { margin: 1.75rem 0 0.5rem; font-size: 1rem; color: var(--ink); }

p { margin: 0.85rem 0; }

.lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  margin-top: 1.5rem;
}

a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }

/* --- Lists: pinned rows, not bullets --------------------------------------- */

ul.ruled { list-style: none; margin: 0.85rem 0; padding: 0; }

ul.ruled li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.15rem;
  border-bottom: 1px solid var(--rule);
}

ul.ruled li:last-child { border-bottom: 0; }

/* A pin head in place of a bullet glyph: the motif at list scale. */
ul.ruled li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo);
}

/* --- The start-map illustration -------------------------------------------
   Pins across a rail, pairs hanging from each pin, every pair ending in two
   bobbins. Drawn entirely in CSS. */

figure.startmap { margin: 1.25rem 0 0; }

.pillow {
  background: var(--pillow);
  /* Pricking dots. Decorative texture only: it sits behind the hanging pairs
     and never behind body text. */
  background-image: radial-gradient(var(--edge) 0.9px, rgba(0,0,0,0) 1px);
  background-size: 9px 9px;
  border: 1px solid var(--edge);
  padding: 0.9rem 0.6rem 1rem;
}

.rail {
  display: flex;
  border-top: 2px solid var(--ink);
  padding-top: 0;
}

.pin {
  flex: 1 1 0;
  position: relative;
  padding-top: 0.85rem;
  text-align: center;
}

/* The pin head, sitting on the rail. */
.pin::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}

.pin .pin-label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

/* The pairs hanging from one pin. */
.pairs { display: flex; justify-content: center; gap: 5px; }

/* One pair: two strands that end in two bobbins. */
.pair { display: flex; gap: 3px; }

.strand {
  display: block;
  width: 3px;
  height: 46px;
  position: relative;
}

/* The thread run. */
.strand::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 1px;
  height: 30px;
  background: var(--ink-soft);
}

/* The bobbin at the end of the run: a narrow body with a wider head. */
.strand::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 29px;
  width: 7px;
  height: 15px;
  border-radius: 45% 45% 40% 40%;
  border: 1px solid var(--ink);
}

/* Thread tokens. Colour AND fill AND a letter in the legend, never hue alone. */
.t-linen .strand::after { background: var(--surface); }
.t-ecru  .strand::after {
  background: var(--ecru);
  background-image: repeating-linear-gradient(
    45deg, rgba(248,244,234,0.45) 0 1.5px, rgba(248,244,234,0) 1.5px 4px);
}
.t-gimp  .strand::after {
  background: var(--gimp);
  background-image: radial-gradient(rgba(248,244,234,0.5) 0.8px, rgba(248,244,234,0) 0.9px);
  background-size: 4px 4px;
}

.pin .pin-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.pin .pin-note b { font-weight: 700; color: var(--ink); }

/* The legend. Letter, name, fill: three carriers, no reliance on hue. */
.legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; font-size: 0.875rem; color: var(--ink-soft); }
.legend .chip {
  width: 1.05rem; height: 1.05rem;
  margin-right: 0.4rem;
  border: 1px solid var(--ink);
  display: inline-block;
}
.legend .chip.t-linen { background: var(--surface); }
.legend .chip.t-ecru {
  background: var(--ecru);
  background-image: repeating-linear-gradient(
    45deg, rgba(248,244,234,0.45) 0 2px, rgba(248,244,234,0) 2px 5px);
}
.legend .chip.t-gimp {
  background: var(--gimp);
  background-image: radial-gradient(rgba(248,244,234,0.5) 1.1px, rgba(248,244,234,0) 1.2px);
  background-size: 6px 6px;
}

/* The standing disclosure. Page text, not an image caption, because it is the
   sentence a reader must not miss. */
.from-entries {
  margin: 0.9rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--indigo);
  color: var(--indigo);
  font-size: 0.875rem;
  font-weight: 700;
}

figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--ink-soft); }

/* --- Tables ---------------------------------------------------------------- */

table.totals {
  width: 100%;
  border-collapse: collapse;
  margin: 0.9rem 0 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
table.totals th, table.totals td {
  text-align: left;
  padding: 0.45rem 0.5rem 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}
table.totals th {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
table.totals td { color: var(--ink-soft); }
table.totals td:first-child { color: var(--ink); }
table.totals tr.sum td { color: var(--ink); font-weight: 700; border-bottom: 0; }

/* --- Worked equations ------------------------------------------------------ */

.equation {
  background: var(--band);
  padding: 0.75rem 0.9rem;
  margin: 0.85rem 0 0;
  font-variant-numeric: tabular-nums;
}
.equation p { margin: 0.35rem 0; }
.equation p:first-child { margin-top: 0; }
.equation p:last-child { margin-bottom: 0; }
.equation .mode {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 700;
}

/* --- Price and notes ------------------------------------------------------- */

.price { background: var(--band); padding: 1rem 1.1rem; margin: 1rem 0 0; }

.price .figure {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}

.price p { margin: 0.6rem 0 0; }
.price p:first-of-type { margin-top: 0.35rem; }

.note { font-size: 0.9375rem; color: var(--ink-soft); }

/* --- Support page question and answer -------------------------------------- */

dl.qa { margin: 0.85rem 0; }

dl.qa dt {
  font-weight: 700;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

dl.qa dt:first-of-type { border-top: 0; padding-top: 0; margin-top: 0.4rem; }

dl.qa dd { margin: 0.4rem 0 0; color: var(--ink-soft); }

/* --- Footer ---------------------------------------------------------------- */

footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

footer ul.links { list-style: none; margin: 0 0 0.85rem; padding: 0; }
footer ul.links li { display: inline-block; margin-right: 1.25rem; }

/* 44px tap targets on the links people actually reach for. */
footer ul.links a,
.masthead nav a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

@media (min-width: 48rem) {
  body { padding-left: 2rem; padding-right: 2rem; }
}

@media (max-width: 26rem) {
  /* Eight pairs is sixteen strands across a 320px screen. The strands narrow
     and the bobbins shrink rather than any pin being dropped: the figure has to
     keep showing the same map the table below it describes. */
  .pairs { gap: 3px; }
  .pair { gap: 2px; }
  .strand { width: 3px; height: 40px; }
  .strand::before { height: 25px; }
  .strand::after { top: 24px; width: 6px; height: 13px; left: -1.5px; }
  .pin .pin-note { font-size: 0.625rem; }
}