/*
  FoldPin site styles.

  One stylesheet, no build step, no framework, no web font, no image file. The
  design direction comes from the product brief: a geometry-led workbench in
  chalk white, bookcloth plum and graphite, built around a fold line with hole
  marks rather than around cards or filled bands. It deliberately shares
  nothing with PresetWing's navy worksheet bands or SlantLeaf's ruled page.

  The visual signature is a single dashed plum fold line running down the left
  of the sheet, with a drawn crosshair hole mark on it at every section. Both
  are CSS, so every page stays plain ASCII and no glyph is at the mercy of the
  reader's font.

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

    ink        #23232b on paper 15.09   on surface 15.59   on band 13.68
    ink-soft   #55505c on paper  7.56   on surface  7.81   on band  6.85
    plum       #6d2b4f on paper  9.64   on surface  9.96   on band  8.73
    paper      #fdfbf7 reversed on plum-deep #5a2340 11.62

  --rule (1.38:1), --edge (2.07:1) and --fold (3.74: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, trim edges and the fold line on an illustration whose every fact
  is also written in the prose beside it.

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

:root {
  --ink: #23232b;
  --ink-soft: #55505c;
  --paper: #fdfbf7;
  --surface: #ffffff;
  --band: #f6eef1;
  --plum: #6d2b4f;
  --plum-deep: #5a2340;
  --fold: #a9718c;
  --rule: #ded7cd;
  --edge: #b9b0a4;
  --sheet-max: 44rem;
  --spine: 1.75rem;
}

* { 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;
}

/* --- The sheet and its fold line ----------------------------------------- */

.sheet {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding-left: var(--spine);
  position: relative;
}

/* The fold. A dashed line down the whole sheet, which is what a folded
   signature guide is built around. Decorative: nothing depends on seeing it. */
.sheet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0;
  border-left: 1px dashed var(--fold);
}

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

.masthead {
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--ink);
}

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

.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(--plum);
  color: var(--plum);
  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 hole mark on the fold, then a thin rule ---------- */

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

/* The crosshair hole mark, drawn on the fold line beside each heading. */
h2::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--spine) - 3px);
  top: 0.28rem;
  width: 7px;
  height: 7px;
  border: 1px solid var(--plum);
  border-radius: 50%;
  background: var(--paper);
}

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

/* --- Lists: measured 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.1rem;
  border-bottom: 1px solid var(--rule);
}

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

/* A small tick on the measure, in place of a bullet glyph. */
ul.ruled li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 5px;
  height: 1px;
  background: var(--plum);
}

/* --- The strip illustration ---------------------------------------------- */

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

.rule-strip {
  position: relative;
  height: 3.25rem;
  background: var(--surface);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-left: 1px dashed var(--edge);
  border-right: 1px dashed var(--edge);
}

/* The fold centreline of the strip. */
.rule-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--fold);
}

/* One hole mark: a short crosshair centred on the fold line. */
.rule-strip .hole {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--plum);
  border-radius: 50%;
  background: var(--surface);
}

.rule-strip .end {
  position: absolute;
  top: 0;
  bottom: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.15rem 0.3rem;
}

.rule-strip .end.head { left: 0; }
.rule-strip .end.tail { right: 0; }

.scale {
  position: relative;
  height: 1.4rem;
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--ink-soft);
}

.scale span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

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

/* --- 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(--plum);
  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) {
  :root { --spine: 1.25rem; }
  .rule-strip { height: 2.75rem; }
}