/* Pressmark v2 — prose pages (guides, privacy, 404).
 *
 * The home page is dark and is built from figures. These pages carry real reading text, so they
 * run the **paper** theme from DESIGN.md §2 — `<html data-theme="paper">` — while keeping every
 * other signal of the brand world: the spine down the left of the content column, the captioned
 * figure frame with its dot grid, Sora at 350 for body, Spline Sans Mono for machine values only,
 * nothing rounder than 4px and no shadow anywhere.
 *
 * Theme-aware tokens only (`--ground`, `--rule`, `--text`, `--text-muted`, `--mark-line`). Not one
 * hex is written here; a hex in a component is a bug (DESIGN.md §10). Load order on every prose
 * page: tokens.css → fonts.css → prose.css.
 *
 * On paper `--stamp` is 1.1:1 and therefore unreadable: it fills the primary button and nothing
 * else. Rules, brackets and large accent text use `--mark-line`, which the paper theme maps to
 * `--stamp-pale` (4.1:1).
 */

/* ------------------------------------------------------------------ reset */

*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}

img,
svg { max-width: 100%; height: auto; }

/* ----------------------------------------------------------- skip link */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--stamp);
  color: var(--stock-100);
  font-weight: var(--weight-action);
  border-radius: var(--radius-button);
}

.skip:focus { left: var(--page-pad); top: var(--space-3); }

/* -------------------------------------------------------------- layout
 * The content column is 1120px wide with the spine at its left edge. Everything inside is
 * indented from the spine, so the rule is never crossed by text. */

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.spine {
  position: relative;
  border-left: var(--hairline) solid var(--rule);
  padding-left: var(--margin-rule);
}

/* --------------------------------------------------------------- header
 * No announcement bar, no banner, no strip of any kind above it. Ever. (DESIGN.md §5) */

.site-header {
  border-bottom: var(--hairline) solid var(--rule);
  background: var(--ground);
}

.site-header > .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-weight: var(--weight-h2);
  letter-spacing: var(--track-h3);
  text-decoration: none;
}

.brand svg,
.brand img { display: block; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-left: auto;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  border-bottom: var(--hairline) solid transparent;
  padding-bottom: 2px;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] { border-bottom-color: var(--mark-line); }

@media (max-width: 767px) {
  .site-header > .wrap {
    min-height: 56px;
    flex-wrap: wrap;
    padding-block: var(--space-3);
  }

  .site-nav {
    margin-left: 0;
    width: 100%;
    gap: var(--space-4);
    font-size: var(--size-caption);
  }
}

/* ------------------------------------------------------------- crumbs
 * The breadcrumb repeats the BreadcrumbList JSON-LD on the page. It is navigation, not prose,
 * so it keeps its own quiet styling and drops the list markers. */

.crumbs {
  padding-top: var(--space-6);
  color: var(--text-muted);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.crumbs li { margin: 0; }

.crumbs li + li::before {
  content: '/';
  margin-right: var(--space-2);
  color: var(--rule);
}

.crumbs a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}

.crumbs a:hover { text-decoration-color: var(--mark-line); }

.crumbs [aria-current='page'] { color: var(--text); }

/* ------------------------------------------------------------ typography
 * Sentence case everywhere. No ALL-CAPS labels, no tracked-out small caps, no bracketed
 * eyebrows, no label above a heading to announce a section. (DESIGN.md §3) */

.prose { padding-block: var(--space-8) var(--space-9); }

h1,
h2,
h3 {
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: var(--size-h1);
  font-weight: var(--weight-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-h1);
  max-width: 20ch;
}

h2 {
  font-size: var(--size-h2);
  font-weight: var(--weight-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  margin-top: var(--space-section);
  max-width: 24ch;
}

h3 {
  font-size: var(--size-h3);
  font-weight: var(--weight-h2);
  line-height: var(--lh-h3);
  letter-spacing: var(--track-h3);
  margin-top: var(--space-7);
}

/* Every figure heading sits ON the spine, preceded by a 6x6 tick touching the rule.
 * The tick is the page's section marker; there is no eyebrow label. */
.prose h2 {
  position: relative;
  margin-left: calc(var(--margin-rule) * -1);
  padding-left: var(--margin-rule);
}

.prose h2::before {
  content: '';
  position: absolute;
  left: calc(var(--hairline) * -1 - 3px);
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--rule-live);
}

.prose h2::before { background: var(--mark-line); }

p,
ul,
ol {
  margin: var(--space-4) 0 0;
  max-width: var(--measure-body);
}

.lead {
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  max-width: var(--measure-lead);
  margin-top: var(--space-5);
}

ul,
ol { padding-left: var(--space-5); }

li { margin-top: var(--space-2); }

li::marker { color: var(--text-muted); }

strong { font-weight: var(--weight-h2); }

hr {
  margin: var(--space-8) 0 0;
  border: 0;
  border-top: var(--hairline) solid var(--rule);
}

/* Machine values only: answer codes, row numbers, dates, file names, counts.
 * Never a heading, never a label, never a nav item, never a button. (DESIGN.md §3) */
code,
.data {
  font-family: var(--font-code);
  font-size: var(--size-data);
  font-weight: var(--weight-data);
  line-height: var(--lh-data);
  letter-spacing: var(--track-data);
}

/* ------------------------------------------------------------------ links */

.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--mark-line);
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 2px;
}

.prose a:hover { text-decoration-thickness: var(--stamp-weight); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--stamp);
  color: var(--stock-100);
  font-family: inherit;
  font-size: var(--size-body);
  font-weight: var(--weight-action);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}

.btn:hover { background: var(--stamp-ink); }

.btn:active { transform: translateY(1px); }

.btn[disabled] {
  background: var(--stock-300);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* The one filled action plane per screen keeps its stamp fill: it is the only place `--stamp` is
 * legible, because the label on it is the sheet (`--stock-100` → `--stock-100`), not the ink.
 *
 * The colour has to be restated here. `.prose a` above is (0,1,1) and `.btn` is (0,1,0), so inside
 * an article the link rule won the cascade and painted the label `--text` — ink on oxblood, 1.68:1,
 * the single thing standing between this site and a green gate. Specificity, not a missing token:
 * `tokens-check` and the token-level `@contrast` assertions both passed while it was broken, which
 * is why the gate that measures the *render* is the one that caught it. */
.prose .btn {
  text-decoration: none;
  color: var(--stock-100);
}

/* ----------------------------------------------------------------- figure
 * The page's only container, on paper as on slate: a 1px frame inset from the column, a dot
 * grid ground, the illustrative-data note in mono at the top-right, caption UNDER the frame. */

figure,
.figure {
  margin: var(--space-7) 0 0;
  padding: 0;
}

.figure__frame {
  position: relative;
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  background-image: radial-gradient(var(--rule) 1px, transparent 1px);
  background-size: var(--ruling) var(--ruling);
}

.figure__note {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-code);
  font-size: var(--size-data);
  font-weight: var(--weight-data);
  letter-spacing: var(--track-data);
}

figcaption {
  margin-top: var(--space-3);
  max-width: var(--measure-caption);
  color: var(--text-muted);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
}

@media (max-width: 767px) {
  .figure__frame { padding: var(--space-5); }

  .figure__note {
    position: static;
    display: block;
    margin-bottom: var(--space-3);
    text-align: right;
  }
}

/* ------------------------------------------------------------------ table
 * Table cells have radius 0 (DESIGN.md §4). Rules only, no zebra fill. */

.table-scroll {
  margin-top: var(--space-5);
  overflow-x: auto;
}

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

th,
td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--hairline) solid var(--rule);
  border-radius: 0;
}

th {
  font-weight: var(--weight-h2);
  color: var(--text);
}

td { color: var(--text-muted); }

/* --------------------------------------------------------------- the note
 * A quiet aside with a bracket, used for the illustrative-data and honesty lines inside prose.
 * The bracket carries the meaning; the text is never coloured. */

.note {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: var(--stamp-weight) solid var(--mark-line);
  max-width: var(--measure-caption);
  color: var(--text-muted);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
}

.note--due { border-left-style: dashed; }

/* ---------------------------------------------------------- concept tag
 * ≤18 words, caption size, muted, 1px mark bracket. Never a banner, never coloured text,
 * never above the header. Sits after the <h1>, beside the action. (DESIGN.md §5) */

[data-concept-disclosure] {
  display: block;
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: var(--hairline) solid var(--mark-line);
  max-width: var(--measure-caption);
  color: var(--text-muted);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
}

/* ------------------------------------------------------------------- CTA */

.cta {
  margin-top: var(--space-section);
  padding-top: var(--space-7);
  border-top: var(--hairline) solid var(--rule);
}

.cta h2 { margin-top: 0; }

.cta .btn { margin-top: var(--space-5); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: var(--space-9);
  border-top: var(--hairline) solid var(--rule);
  padding-block: var(--space-6) var(--space-7);
  color: var(--text-muted);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
}

.site-footer .wrap > * + * { margin-top: var(--space-3); }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}

.site-footer a:hover { text-decoration-color: var(--mark-line); }

.site-footer .honesty { max-width: var(--measure-body); }