/* clementengineering.com
   External rather than inline so the CSP can forbid inline styles outright.

   Design intent: a technical document, not a marketing page. Numbered
   chapters, serif reading text against sans labels, mono for anything
   pasteable. The form is meant to be the argument — this is what it
   looks like when someone writes specifications for a living.

   Units: everything is rem against a 16px root. Do NOT reintroduce px font
   sizes; mixing the two is how the lede ended up smaller than the body text. */

/* ---------------------------------------------------------------- tokens */
:root {
  --paper: #faf9f6;
  --panel: #f2f0ea;
  --panel-edge: #e4e1d8;
  --ink: #1b1a17;          /* 16.53 on paper */
  --ink-soft: #55524b;     /*  7.40 on paper,  6.84 on panel */
  --ink-faint: #6f6b62;    /*  5.04 on paper,  4.66 on panel */
  --rule: #e0ddd4;
  --control-edge: #8f8a7e; /*  3.27 vs paper, 3.02 vs panel (WCAG 1.4.11) */
  --accent: #8a3d22;       /*  7.20 on paper */
  --accent-soft: #73301b;  /*  9.20 — hover DARKENS in light mode */
  --ok: #2f6b45;
  --err: #8c2f22;        /*  7.34 on paper, 6.79 on panel */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --measure: 34rem;
}

/* Warm brown-black rather than olive: the ground now shares a hue family
   with the sienna accent instead of fighting it. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191510;
    --panel: #221d16;
    --panel-edge: #332c23;
    --ink: #ece7dd;          /* 14.74 on paper */
    --ink-soft: #b8b0a4;     /*  8.46 */
    --ink-faint: #948b7e;    /*  5.41 on paper, 4.98 on panel */
    --rule: #302a22;
    --control-edge: #776b5c; /*  3.50 vs paper, 3.22 vs panel */
    --accent: #e09a72;       /*  7.81 */
    --accent-soft: #f0b795;  /* 10.30 — hover BRIGHTENS in dark mode */
    --ok: #7cc79b;
    --err: #f0907a;      /*  7.35 on dark paper */
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--serif);
  font-synthesis-weight: none;
}

/* Visually hidden, still announced. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 10;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 0.6rem 0.9rem; font: 600 0.9rem var(--sans);
}

/* ------------------------------------------------------------- structure */
/* Single column. The old two-column contents rail went with the restructure:
   the landing page is now short enough not to need one, and the artifact pages
   are one idea each. */
.shell { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
main { min-width: 0; padding: 3.5rem 0 4rem; }
main:focus { outline: none; }

/* Prose is capped narrower than the container so code blocks read as
   deliberately wider — the step is a signal that someone set this. */
main > p, section > p, section > h2, section > h3, article > p, article > h2,
.rules p, .rules h3, .preview > ol {
  max-width: 34rem;
}

section { scroll-margin-top: 2rem; }
section + section {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------------ hero */
.hero { padding-bottom: 1rem; }
/* A plain text link, deliberately not a button and not sticky: a courtesy for
   someone who has already decided, not a call to action. */
.hero-jump { font: 400 0.95rem/1.5 var(--sans); margin: 1.8rem 0 0; }
/* The hook leads; the kicker sits under it as a subtitle, so the h1 needs a
   tighter bottom margin than it carries elsewhere. */
.hero h1 { margin-bottom: 0.85rem; }
.kicker {
  font: 600 0.8rem/1.4 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.7rem;
}

/* ----------------------------------------------------------- layer one --- */
.rules { list-style: none; counter-reset: rule; margin: 2rem 0 0; padding: 0; }
.rules > li {
  counter-increment: rule;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2.25rem;
}
.rules > li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute; left: 0; top: 0.12rem;
  font: 500 0.95rem/1 var(--mono);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rules h3 {
  font: 600 1.12rem/1.35 var(--sans);
  letter-spacing: -0.012em; text-transform: none;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.rules p { margin: 0; }

/* -------------------------------------------------------- artifact menu -- */
.cards { list-style: none; margin: 2rem 0 0; padding: 0; }
.cards li { margin-bottom: 0.7rem; }
.card {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  grid-template-areas: "n title" ". blurb";
  gap: 0.15rem 0.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  background: var(--panel);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent); transform: translateX(2px); }
.card-n {
  grid-area: n;
  font: 500 0.85rem/1.5 var(--mono);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card-title {
  grid-area: title;
  font: 600 1.05rem/1.4 var(--sans);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.card-blurb {
  grid-area: blurb;
  font: 400 0.95rem/1.5 var(--sans);
  color: var(--ink-soft);
}

/* ---------------------------------------------------- artifact page nav -- */
.crumb {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font: 400 0.9rem/1.5 var(--sans);
}
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb-n { color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 0.85rem; }

.pager {
  display: grid; gap: 0.7rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 3.5rem; padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.pager a {
  display: block;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  font: 600 1rem/1.35 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s;
}
.pager a:hover { border-color: var(--accent); }
.pager a span {
  display: block;
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}
.pager-next { grid-column: 2; text-align: right; }
.pager-prev:only-child { grid-column: 1; }

/* --------------------------------------------------------------- headings */
h1 {
  font: 600 clamp(1.9rem, 5.4vw, 2.7rem)/1.13 var(--sans);
  letter-spacing: -0.03em;
  margin: 0 0 1.6rem;
  max-width: 20ch;
}
h2 { font: 600 1.55rem/1.25 var(--sans); letter-spacing: -0.02em; margin: 0 0 1.15rem; }
h3 {
  font: 600 0.78rem/1.4 var(--sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2.75rem 0 0.8rem;
}
.eyebrow {
  display: block;
  font: 500 0.76rem/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.8rem;
}

p { margin: 0 0 1.4rem; }
.lede { font-size: 1.3rem; line-height: 1.5; letter-spacing: -0.005em; }
.muted { color: var(--ink-soft); }
strong { font-weight: 700; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-soft); }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}

code {
  font: 0.88em/1 var(--mono);
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 3px; padding: 0.1em 0.3em;
}

.derived {
  font: 400 0.9rem/1.55 var(--sans);
  color: var(--ink-soft);
  border-left: 2px solid var(--accent-soft);
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 0 0 1.5rem;
  max-width: var(--measure);
}

/* --------------------------------------------------------- code / blocks */
.block { margin: 1.6rem 0 2.25rem; }
.block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--panel-edge); border-bottom: 0;
  border-radius: 5px 5px 0 0;
  padding: 0.5rem 0.55rem 0.5rem 0.9rem;
}
.block-label {
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-soft);
}
.block pre {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 0 0 5px 5px;
  padding: 1rem 0.9rem 1.1rem;
  overflow-x: auto;
  font: 400 0.84rem/1.6 var(--mono);
  color: var(--ink);
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.block pre:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

button.copy {
  display: inline-flex; align-items: center;
  font: 600 0.72rem/1 var(--sans); letter-spacing: 0.05em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--control-edge);
  border-radius: 4px;
  padding: 0.5rem 0.85rem;
  cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
button.copy:hover { color: var(--paper); background: var(--accent); border-color: var(--accent); }
button.copy[data-state="done"] { color: var(--ok); border-color: var(--ok); background: var(--paper); }

.block-expand { display: none; }

/* --------------------------------------------------------------- builder */
.builder {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 1.4rem 1.25rem 1.5rem;
}
.field { margin-bottom: 1.05rem; }
.field label {
  display: block;
  font: 600 0.82rem/1.4 var(--sans);
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.field .hint { font-weight: 400; color: var(--ink-faint); }
.field input, .field select {
  width: 100%;
  /* Exactly 16px: anything smaller makes iOS Safari zoom the viewport on
     focus, which on a phone in a conference room is the whole interaction. */
  font: 400 1rem/1.4 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--control-edge);
  border-radius: 4px;
  padding: 0.7rem 0.75rem;
}
.field input:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.receipts {
  font: 400 0.95rem/1.6 var(--sans);
  color: var(--ink-soft);
  border-left: 2px solid var(--panel-edge);
  padding: 0.15rem 0 0.15rem 0.9rem;
  max-width: var(--measure);
}

.privacy {
  font: 400 0.9rem/1.55 var(--sans);
  color: var(--ink-soft);
  border-left: 2px solid var(--ok);
  padding: 0.15rem 0 0.15rem 0.85rem;
  margin: 0 0 1.4rem;
  max-width: var(--measure);
}
.field.invalid input, .field.invalid select { border-color: var(--err); border-width: 2px; }
.field.invalid label { color: var(--err); }

.form-error {
  font: 500 0.92rem/1.5 var(--sans);
  color: var(--err);
  border-left: 2px solid var(--err);
  padding: 0.15rem 0 0.15rem 0.8rem;
  margin: 0 0 1rem;
}
.form-error[hidden] { display: none; }

.builder-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }
button.primary {
  font: 600 0.9rem/1 var(--sans);
  color: var(--paper); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 0.8rem 1.3rem; min-height: 44px;
  cursor: pointer;
}
button.primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }

.preview { margin: 0 0 1.8rem; scroll-margin-top: 2rem; }
.preview[hidden] { display: none; }
.preview:focus { outline: none; }
.preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.preview h3 { margin-top: 0; }
.preview ol { padding-left: 1.25rem; margin: 0 0 1.4rem; }
.preview ol li { margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------- footer */
footer.page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 4rem;
  border-top: 1px solid var(--rule);
  font: 400 0.95rem/1.65 var(--sans);
  color: var(--ink-soft);
}
footer.page a { color: var(--accent); }

/* --------------------------------------------------------------- mobile */
/* 62rem, not 60: the two-column layout needs 15 + 3.5 + 40 + 3 = 61.5rem, so
   switching at 60 left 960-984px viewports over-constrained. */
@media (max-width: 62rem) {
  .shell { padding: 0 1.25rem; }
  main { padding: 2rem 0 3rem; }
  .pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: 1; text-align: left; }
  body { font-size: 1.0625rem; }
  .lede { font-size: 1.2rem; }

  /* Anchor jumps must clear the sticky Contents bar (~41px). */
  section, .preview { scroll-margin-top: 4rem; }

  /* Wrap rather than side-scroll. At ~43 visible mono columns a 77-column
     template meant scrolling left and right on every single line; anyone who
     actually wants to READ it (i.e. the people most likely to use it) was the
     person being punished. Wrapping makes blocks taller, which is why the
     height clamp below matters more, not less. */
  .block pre { white-space: pre-wrap; overflow-wrap: break-word; overflow-x: visible; }

  /* Collapsed by default: Copy is the primary action, reading is opt-in. */
  .block:not([data-open]) pre {
    max-height: 22rem;
    overflow-y: hidden;
    border-radius: 0;
    border-bottom: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
  }

  .block-expand {
    display: block; width: 100%; min-height: 44px;
    font: 600 0.78rem/1 var(--sans); letter-spacing: 0.05em;
    color: var(--ink-soft);
    background: var(--panel);
    border: 1px solid var(--control-edge);
    border-radius: 0 0 5px 5px;
    padding: 0.85rem; cursor: pointer;
  }
  button.copy { min-height: 44px; padding-inline: 1.1rem; }
  .block pre { font-size: 0.78rem; padding: 0.85rem 0.75rem 0.95rem; }
  footer.page { padding-inline: 1.25rem; }
}