/*
  BraidPly site styles.

  One stylesheet, no build step, no framework, no web font, no image file. The
  design direction comes from ../../research/ASO.md: saturated fiber colors
  against a quiet warm-neutral work surface, with flat diagrams that stay
  distinguishable without color alone, using labels, arrows, strip numbers and
  pattern as well as hue.

  The visual signature is the ply lane: horizontal runs of repeating color
  tokens, read left to right from one end of the braid to the other, with an
  arrow and a strip number on each run. Section headings sit on a repeat rule
  built from the same three colors. It deliberately shares nothing with
  FoldPin's vertical dashed fold line and hole circles, or PresetWing's navy
  worksheet bands and quantity column.

  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
  rather than eyeballed, and the numbers are in
  ../receipts/01-deploy-2026-09-05.md. The lowest text pair on the site is
  6.27:1, which clears WCAG AA (4.5:1) at normal sizes with room.

    ink        #23201c on paper 15.05   on surface 16.22   on band 13.77
    ink-soft   #57503f on paper  7.43   on surface  8.00   on band  6.79
    teal       #12564c on paper  7.92   on surface  8.53   on band  7.24
    paper      #faf6ef reversed on teal-deep #0e453d 10.06
    berry      #8e2f52 on paper 7.28    paper reversed on berry 7.28
    gold       #7d5300 on paper 6.27    paper reversed on gold  6.27
    moss       #2f5c33 on paper 7.22    paper reversed on moss  7.22

  --rule (1.35:1), --edge (2.18:1) and --lane (1.79: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, cell borders and the lane bed on an illustration whose every
  fact is also written in the prose beside it.

  The three fiber colors never carry meaning by hue alone. Every color cell
  in the illustration also shows the color's initial letter, and carries a
  distinct fill pattern: berry solid, gold diagonal, moss dotted. The legend
  names all three in text.

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

:root {
  --ink: #23201c;
  --ink-soft: #57503f;
  --paper: #faf6ef;
  --surface: #ffffff;
  --band: #f1ece1;
  --teal: #12564c;
  --teal-deep: #0e453d;
  --berry: #8e2f52;
  --gold: #7d5300;
  --moss: #2f5c33;
  --rule: #ded5c4;
  --edge: #b3a891;
  --lane: #c8b9a0;
  --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 repeat rule ------------------------------------------------------
   The site's one recurring mark: a run of the three fiber colors, repeating
   the way a color order repeats along a strip. Decorative; nothing depends on
   seeing it. */
.repeat-rule {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--berry) 0, var(--berry) 14px,
    var(--gold)  14px, var(--gold)  28px,
    var(--moss)  28px, var(--moss)  42px
  );
}

/* --- 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(--teal);
}

.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(--teal);
  color: var(--teal);
  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 short repeat rule under each ---------------------- */

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(--teal);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 84px;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--berry) 0, var(--berry) 9px,
    var(--gold)  9px, var(--gold)  18px,
    var(--moss)  18px, var(--moss)  27px
  );
}

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(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* --- Lists: strip 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 short three-color tick in place of a bullet glyph: the repeat motif at
   list scale. */
ul.ruled li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.0rem;
  width: 9px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--berry) 0, var(--berry) 3px,
    var(--gold)  3px, var(--gold)  6px,
    var(--moss)  6px, var(--moss)  9px
  );
}

/* --- The ply-lane illustration -------------------------------------------- */

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

.lane-row { margin-bottom: 0.9rem; }

.lane-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}

.lane {
  display: flex;
  border: 1px solid var(--lane);
  background: var(--surface);
}

/* One strip: the entered color order, once. */
.strip {
  display: flex;
  flex: 1 1 0;
  position: relative;
  border-right: 2px solid var(--ink);
}

.lane .strip:last-child { border-right: 0; }

.cell {
  flex: 1 1 0;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--paper);
  border-right: 1px solid var(--lane);
}

.strip .cell:last-child { border-right: 0; }

/* Color AND pattern AND letter, so hue is never the only carrier. */
.cell.berry { background: var(--berry); }
.cell.gold {
  background: var(--gold);
  background-image: repeating-linear-gradient(
    45deg, rgba(250,246,239,0.36) 0 3px, rgba(250,246,239,0) 3px 7px);
}
.cell.moss {
  background: var(--moss);
  background-image: radial-gradient(rgba(250,246,239,0.42) 1.2px, rgba(250,246,239,0) 1.3px);
  background-size: 7px 7px;
}

/* The strip number and its direction arrow, drawn under each strip. */
.marks { display: flex; margin-top: 0.2rem; }

.mark {
  flex: 1 1 0;
  font-size: 0.6875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  padding-right: 0.3rem;
}

.mark .num {
  display: inline-block;
  min-width: 1.15rem;
  border: 1px solid var(--edge);
  text-align: center;
  margin-right: 0.3rem;
}

/* The arrow is drawn, not typed, so the page stays plain ASCII. */
.arrow {
  display: inline-block;
  position: relative;
  width: 2.2rem;
  height: 0.7em;
  vertical-align: middle;
}
.arrow::before {
  content: "";
  position: absolute;
  left: 0; right: 5px; top: 50%;
  border-top: 1px solid var(--ink-soft);
}
.arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  margin-top: -3px;
  border-top: 1px solid var(--ink-soft);
  border-right: 1px solid var(--ink-soft);
  transform: rotate(45deg);
}

.ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.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(--lane);
  display: inline-block;
}
.legend .chip.berry { background: var(--berry); }
.legend .chip.gold {
  background: var(--gold);
  background-image: repeating-linear-gradient(
    45deg, rgba(250,246,239,0.36) 0 3px, rgba(250,246,239,0) 3px 7px);
}
.legend .chip.moss {
  background: var(--moss);
  background-image: radial-gradient(rgba(250,246,239,0.42) 1.2px, rgba(250,246,239,0) 1.3px);
  background-size: 7px 7px;
}

/* The standing disclosure that the lane is an order map. It is page text, not
   an image caption, because it is the sentence that must not be missed. */
.ordermap {
  margin: 0.9rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--teal);
  color: var(--teal);
  font-size: 0.875rem;
  font-weight: 700;
}

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

/* --- Fraction table ------------------------------------------------------- */

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

/* --- 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(--teal);
  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) {
  /* Four strips of three colors is twelve cells across a 320px screen. The
     letters shrink rather than disappearing: they are one of the three
     non-color carriers, alongside the fill pattern and the named legend, and
     dropping them would leave hue doing work on its own. */
  .cell { height: 1.9rem; font-size: 0.5625rem; }
  .mark { font-size: 0.625rem; }
  .arrow { width: 1.4rem; }
}