/* ==========================================================================
   MonkeyRun - single stylesheet
   --------------------------------------------------------------------------
   TYPOGRAPHY CHOICE (system fonts only; no webfont or CDN requests)

   Display / headings: "Iowan Old Style" - a warm, wide-setting book serif
   that ships with macOS. It has real letterforms and generous counters, so
   headlines read like a printed title page rather than a UI label. Fallback
   chain ends at Charter then Georgia, both of which set headlines acceptably.

   Body / reading: Charter - Matthew Carter's newspaper and book face, also
   installed on macOS. Chosen because it holds its shape at long line lengths
   and at small sizes, which is the whole job for 1,000-word practical guides.
   Deliberately paired with a different serif (Iowan) rather than one family
   everywhere: the contrast between the two is the entire typographic voice.

   Apparatus / metadata / prices: ui-monospace -> "SF Mono" -> Menlo. Used
   only for eyebrow labels, catalogue numbers, dates and inline code, so the
   monospace always means "this is data, not prose".

   --------------------------------------------------------------------------
   COLOUR (one accent, used only for links, rules that mean something, and
   list markers; never as decoration)

   paper   #f4f1ea  warm off-white; ink on it measures about 16:1
   band    #e9e4d8  rule-adjacent fill for takeaway blocks and the catalogue
   ink     #1a1814  body text
   muted   #5b564d  meta text; 6.4:1 on paper (AA at any size)
   rule    #cfc8b8  hairlines
   accent  #8f2d18  editor's red pencil; 7.3:1 on paper (AA, near AAA)
   accent  #6d2211  hover / visited-dark variant; 9.1:1 on paper

   No gradients, no border-radius, no shadows, no glass. Structure is drawn
   with hairline rules only, in the manner of a technical book.
   ========================================================================== */

:root {
  --paper: #f4f1ea;
  --band: #e9e4d8;
  --ink: #1a1814;
  --muted: #5b564d;
  --rule: #cfc8b8;
  --rule-soft: #ded8ca;
  --accent: #8f2d18;
  --accent-dark: #6d2211;
  --accent-tint: rgba(143, 45, 24, 0.08);

  --serif-display: "Iowan Old Style", Charter, Palatino, "Palatino Linotype",
    Georgia, "Times New Roman", serif;
  --serif-read: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "DejaVu Sans Mono", Consolas,
    monospace;

  /* modular scale, 1.25ish, clamped so 320px never breaks */
  --fs-body: clamp(1.04375rem, 0.97rem + 0.32vw, 1.1875rem);
  --fs-sm: 0.855em;
  --fs-deck: clamp(1.115rem, 1.03rem + 0.42vw, 1.3rem);
  --fs-h2: clamp(1.35rem, 1.2rem + 0.62vw, 1.65rem);
  --fs-h1: clamp(1.85rem, 1.5rem + 1.55vw, 2.75rem);
  --fs-word: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);

  --gutter: 1.25rem;
  --measure: 41rem; /* ~68 characters at --fs-body */
  --col-left: 8.5rem;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-read);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  hyphens: manual;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- shell / asymmetric grid ------------------------------------- */

.wrap {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Content sits left of centre on wide screens; the left column is reserved
   for marginal apparatus (eyebrows, meta), like a field guide. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: var(--col-left) minmax(0, var(--measure))
      minmax(0, 1fr);
  }
  .split > .body-col {
    grid-column: 2;
  }
  .split > .marginal {
    grid-column: 1;
    text-align: left;
  }
}

/* ---------- masthead ----------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding-block: 0.9rem 0;
  background: var(--paper);
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

.wordmark {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-word);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
}

.wordmark a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.15em;
}

.tagline {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.masthead nav {
  flex-basis: 100%;
  border-top: 1px solid var(--rule-soft);
  margin-top: 0.85rem;
  padding-top: 0.55rem;
}

.masthead nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  margin: 0;
  padding: 0;
}

.masthead nav a {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 1px solid transparent;
}

.masthead nav a:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}

.masthead nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

/* ---------- typography --------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--serif-display);
  font-weight: 400;
  margin: 0;
  hanging-punctuation: first;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -0.011em;
  margin-block-end: 0.5em;
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-block: 2.4em 0.55em;
  text-wrap: balance;
  /* numbered section rule, technical-book style */
  padding-top: 0.6em;
  border-top: 1px solid var(--rule-soft);
}

h2:first-child {
  border-top: 0;
  padding-top: 0;
}

h3 {
  font-size: 1.14em;
  line-height: 1.3;
  margin-block: 1.9em 0.4em;
  font-style: italic;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
  max-width: 74ch;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9em;
}

.deck {
  font-family: var(--serif-display);
  font-size: var(--fs-deck);
  line-height: 1.42;
  color: #3c382f;
  max-width: 62ch;
  margin: 0 0 1.2em;
  text-wrap: balance;
}

.byline {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.7em;
  margin: 0;
}

.byline + .byline {
  border-top: 0;
  padding-top: 0;
  margin-top: 0.35em;
}

.muted {
  color: var(--muted);
}

code,
kbd,
samp {
  font-family: var(--mono);
  font-size: 0.86em;
  background: none;
  border-bottom: 1px solid var(--rule);
  padding: 0 0.1em;
  overflow-wrap: anywhere;
}

pre {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  background: var(--band);
  border-left: 2px solid var(--accent);
  padding: 0.85em 1em;
  overflow-x: auto;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 120ms linear;
}

a:hover,
a:focus-visible {
  color: var(--accent-dark);
}

.prose a {
  border-bottom-width: 1px;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:visited {
  color: var(--accent-dark);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  background: var(--accent-tint);
  border-radius: 0;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus-visible {
  position: static;
  display: inline-block;
  margin: 0.5rem var(--gutter);
  font-family: var(--mono);
  font-size: 0.75rem;
  background: var(--paper);
}

/* ---------- lists -------------------------------------------------------- */

.prose ul,
.prose ol {
  max-width: 68ch;
  margin-block: 0 1.35em;
  padding-inline-start: 1.6em;
}

.prose ol {
  padding-inline-start: 1.9em;
}

/* plain hyphen bullets, per house copy rules */
.prose ul {
  list-style: none;
  padding-inline-start: 1.35em;
}

.prose ul > li {
  position: relative;
  padding-left: 0.15em;
}

.prose ul > li::before {
  content: "-";
  position: absolute;
  left: -1.05em;
  color: var(--accent);
  font-family: var(--mono);
}

.prose ol > li::marker {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--accent);
}

.prose li {
  margin-bottom: 0.55em;
}

.prose li:last-child {
  margin-bottom: 0;
}

/* ---------- the recurring "Takeaway" device ------------------------------ */

.takeaway {
  margin: 1.9em 0 2.1em;
  padding: 0.85em 1.1em 0.9em;
  background: var(--band);
  border-left: 2px solid var(--accent);
  max-width: 68ch;
}

.takeaway-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.45em;
}

.takeaway p:last-child {
  margin-bottom: 0;
}

/* ---------- article body ------------------------------------------------- */

.post {
  padding-block: 2.4rem 3rem;
}

.post-head {
  border-top: 3px solid var(--ink);
  padding-top: 1.5rem;
  margin-bottom: 2.2rem;
}

.prose > section > p:first-of-type {
  /* small-drop-letter-ish opening line treatment for the first paragraph of
     the article only (see .lede below); nothing here for later sections */
  max-width: 74ch;
}

.lede::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.02em;
}

.maker-note {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: 0.8em;
  margin-block: 0 2rem;
  max-width: 68ch;
}

/* the closing "buy the built version" paragraph, set as an annotation
   rather than a call-to-action box */
.offer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-top: 1.6rem;
  max-width: 68ch;
}

.offer > h2 {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
  font-size: 1.2em;
}

/* ---------- article pagination ------------------------------------------ */

.pager {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: 0.9rem;
  margin-block: 2.5rem;
}

.pager ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.8rem;
  align-items: baseline;
  justify-content: space-between;
}

.pager a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pager a:hover {
  color: var(--accent-dark);
}

/* ---------- index / article list ---------------------------------------- */

.entry {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
}

.entry:last-of-type {
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .entry {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: start;
  }
}

.entry-no {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.35em;
  font-variant-numeric: tabular-nums;
}

.entry h3 {
  font-style: normal;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  line-height: 1.25;
  margin: 0 0 0.35em;
  text-wrap: balance;
}

.entry h3 a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.entry h3 a:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}

.entry p {
  margin: 0 0 0.6em;
  max-width: 66ch;
}

.entry-meta,
.meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0;
}

.entry-meta a {
  color: var(--muted);
}

.section-head {
  border-top: 3px solid var(--ink);
  padding-top: 1.2rem;
  margin-top: 3.2rem;
  margin-bottom: 0.4rem;
}

.section-head h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.section-head p {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  max-width: 66ch;
}

/* ---------- catalogue ---------------------------------------------------- */

.catalogue {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
}

.cat-row {
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  gap: 0.3rem 1.5rem;
}

.cat-row:last-child {
  border-bottom: 0;
}

@media (min-width: 48rem) {
  .cat-row {
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    align-items: baseline;
  }
}

/* the dotted leader: a price list that reads like a catalogue entry */
.cat-name {
  margin: 0;
  font-family: var(--serif-display);
  font-size: 1.08em;
  line-height: 1.35;
}

.cat-name a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.cat-name a:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}

.cat-price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  margin: 0;
  text-align: left;
  white-space: nowrap;
}

.cat-price s {
  color: var(--muted);
  text-decoration-thickness: 1px;
}

.cat-desc {
  margin: 0;
  grid-column: 1 / -1;
  max-width: 66ch;
  color: #35312a;
  font-size: 0.93em;
  line-height: 1.62;
}

.cat-desc code {
  font-size: 0.82em;
}

@media (min-width: 48rem) {
  .cat-desc {
    grid-column: 1 / 2;
  }
}

/* ---------- price table -------------------------------------------------- */

table {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  margin-block: 2rem 1rem;
  font-size: 0.92em;
}

caption {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding-bottom: 0.7em;
}

th,
td {
  text-align: left;
  padding: 0.45em 0.75em 0.45em 0;
  border-bottom: 1px solid var(--rule-soft);
}

thead th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}

td:last-child,
th:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
  width: 5.5rem;
}

tbody tr:last-child td {
  border-bottom: 2px solid var(--ink);
}

tbody tr:last-child td:first-child {
  font-family: var(--serif-display);
}

/* ---------- terms strip -------------------------------------------------- */

.terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: 0.9rem;
  margin-block: 1.5rem 2rem;
}

.terms span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

.terms span::before {
  content: "-";
  color: var(--accent);
}

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

footer.site-foot {
  margin-top: 4rem;
  border-top: 1px solid var(--rule);
  padding-block: 1.6rem 3.5rem;
  font-size: 0.86em;
  color: var(--muted);
}

footer.site-foot p {
  max-width: 68ch;
  margin-bottom: 0.7em;
}

footer.site-foot .fine {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
}

/* ---------- utility ------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 2.4rem;
}

@media (max-width: 22.5rem) {
  :root {
    --gutter: 0.9rem;
  }
  body {
    line-height: 1.66;
  }
  .post-head {
    padding-top: 1.1rem;
  }
}

/* ---------- print: this is a site about working documents ---------------- */

@media print {
  :root {
    --paper: #fff;
  }
  body {
    font-size: 10.5pt;
    line-height: 1.5;
  }
  .masthead nav,
  .pager,
  .skip {
    display: none;
  }
  .prose a {
    color: var(--ink);
    border-bottom: 0;
  }
  h2 {
    break-after: avoid;
  }
  .takeaway {
    background: #eee;
  }
}