/* Long-form reading layout for the Library essays.
 *
 * These pages were being served site-pages.css, which was written for the
 * panel-based landing routes. Three of its rules are actively wrong for prose:
 *
 *   body.runcible-site-page .wp-block-post-title { display: none }
 *       — hid the page title on every essay, so the headline simply vanished.
 *   .entry-content { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw) }
 *       — forced the text column to the full viewport, edge to edge.
 *   .wp-block-post-content { padding: 0 }
 *       — removed the gutters, so lines touched both screen edges.
 *
 * A landing page wants full-bleed panels. An essay wants a column you can read
 * without moving your head. These pages no longer load site-pages.css at all,
 * so none of that is being fought here.
 *
 * Design brief, owner 2026-08-01: read like a book or magazine article rather
 * than a marketing page. One background colour, a prominent headline, a short
 * abstract set in italic, and section titles small enough to stay subordinate
 * to the headline.
 *
 * On !important. Two mu-plugins print global CSS that this has to sit on top of:
 * runcible-layout.php sizes the native page title at 72pt and pins the content
 * column with !important on width, margin and padding, and runcible-fonts.php
 * enforces the site faces. The font policy is left alone — headings stay Roboto
 * and body copy stays Inter, so these pages still read as Runcible — but the
 * measure and scale rules have to carry !important to land. Everything here is
 * scoped to body.runcible-essay and the stylesheet loads on seven pages, so the
 * blast radius is those seven pages.
 */

body.runcible-essay {
  /* Site tokens. Declared here rather than inherited, because dropping
     site-pages.css also drops the :root block it carried. */
  --ink: #101211;
  --paper: #f2ecdf;
  --muted: #656965;
  --gold-dark: #8a6a1c;
  --red: #b63830;
  --rule: rgba(16, 18, 17, .16);
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* One measure governs the article. ~69 characters at the body size, inside
     the 45–75 band that is comfortable for continuous reading. Tables get more
     room because they need it; nothing else does. */
  --measure: 42rem;
  --measure-wide: 54rem;

  /* Owner asked for a 60pt headline, which is 5rem at the browser default.
     This is the only value to change to retune it. */
  --title-size: clamp(2.2rem, 6vw, 5rem);

  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  margin: 0;
  color: var(--ink);
  background: var(--paper);
}

/* ------------------------------------------------------------- the column */

/* The container is as wide as the widest thing on the page. Individual
   elements narrow themselves to the measure below, so the text column and the
   tables share one centre line.

   On the selectors. runcible-layout.php pins this element and its children with
   `main .entry-content:not(:has(> .wp-block-cover.alignfull))`, and a :not()
   takes the specificity of its argument, so that rule scores three classes and
   outranks a plainer override even with !important on both sides. Naming both
   classes the element already carries, plus html, scores higher without
   resorting to anything the element does not genuinely have. */
html body.runcible-essay main .wp-block-post-content.entry-content {
  width: 100% !important;
  max-width: calc(var(--measure-wide) + var(--gutter) * 2) !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
}

/* runcible-layout.php releases every direct child to full width, which is right
   for panel pages and wrong for a column of prose. */
html body.runcible-essay main .wp-block-post-content.entry-content > * {
  max-width: var(--measure) !important;
  margin-inline: auto !important;
}

/* No preset spacing gap between the header and the headline. */
body.runcible-essay main.wp-block-group {
  margin-top: 0 !important;
}

body.runcible-essay main > .wp-block-group {
  padding-top: clamp(2.25rem, 4.5vw, 3.75rem) !important;
  padding-bottom: clamp(3rem, 7vw, 6rem) !important;
}

/* --------------------------------------------------------------- headline */

body.runcible-essay main .wp-block-post-title,
body.runcible-essay main h1.wp-block-post-title {
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: calc(var(--measure) + var(--gutter) * 2) !important;
  margin: 0 auto .45em !important;
  padding: 0 var(--gutter) !important;
  color: var(--ink) !important;
  font-size: var(--title-size) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.028em;
  text-align: left;
  text-wrap: balance;
}

/* ------------------------------------------------- deck, dateline, abstract */

/* The standfirst under the headline. A subtitle, not a section, so it is a
   paragraph and stays out of the heading outline. */
body.runcible-essay .entry-content > p.essay-deck {
  margin: 0 auto 1.7rem !important;
  color: var(--muted);
  font-size: clamp(1.2rem, 2vw, 1.45rem) !important;
  font-weight: 400 !important;
  line-height: 1.34;
  letter-spacing: -.012em;
  text-wrap: balance;
}

/* These decks were headings, and most were bold inside the heading as well.
   A standfirst set entirely in bold reads as a second headline. */
body.runcible-essay .entry-content > p.essay-deck strong,
body.runcible-essay .entry-content > p.essay-deck b {
  font-weight: 400 !important;
}

body.runcible-essay .entry-content > p.essay-dateline {
  margin: 0 auto 2.3rem !important;
  color: var(--muted);
  font-family: var(--mono) !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The label over an abstract — "Abstract", "TL/DR;", "The Short Version".
   Each was a heading, which put a one-word entry in the outline. */
body.runcible-essay .entry-content > p.essay-abstract-label {
  margin: 2.4rem auto .75rem !important;
  color: var(--red);
  font-family: var(--mono) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Owner: "an introduction that's a very brief abstract, possibly in italic". */
body.runcible-essay .entry-content > p.essay-abstract {
  margin: 0 auto 1.1rem !important;
  color: #2b302d;
  font-size: 1.15rem !important;
  font-style: italic;
  line-height: 1.66 !important;
}

/* One rule under the last abstract paragraph, closing the opening block off
   from the article proper. */
body.runcible-essay .entry-content > p.essay-abstract-end {
  margin-bottom: 2.8rem !important;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- headings */

/* Deliberately restrained. site-pages.css set h2 to clamp(2rem, 3.5vw, 3.55rem)
   — 57px at the top of the scale, within a few pixels of the headline, so
   nothing looked subordinate to anything. */
body.runcible-essay .entry-content h2 {
  margin: 2.8rem auto .95rem !important;
  color: var(--ink);
  font-size: clamp(1.4rem, 2.3vw, 1.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.018em;
  text-wrap: balance;
}

body.runcible-essay .entry-content h3 {
  margin: 2rem auto .65rem !important;
  color: var(--ink);
  font-size: clamp(1.1rem, 1.6vw, 1.26rem) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
}

body.runcible-essay .entry-content h4,
body.runcible-essay .entry-content h5,
body.runcible-essay .entry-content h6 {
  margin: 1.7rem auto .5rem !important;
  color: var(--muted);
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* A heading straight after another heading is a subtitle to it, not the start
   of a new section, so it loses the full section gap. */
body.runcible-essay .entry-content h2 + h3,
body.runcible-essay .entry-content h3 + h4 {
  margin-top: .85rem !important;
}

/* -------------------------------------------------------------------- text */

/* The site sets body copy in Inter 300. That is fine for short marketing
   paragraphs on a dark ground; over three thousand words of dark text on paper
   it reads thin. 400 is the same face at a weight meant for continuous text. */
body.runcible-essay .entry-content p,
body.runcible-essay .entry-content li {
  font-weight: 400;
}

body.runcible-essay .entry-content p {
  margin: 0 auto 1.15rem !important;
  font-size: 1.1875rem !important;
  line-height: 1.72 !important;
}

body.runcible-essay .entry-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: .16em;
  text-decoration-thickness: 1px;
}

body.runcible-essay .entry-content a:hover {
  color: var(--red);
}

body.runcible-essay .entry-content ul,
body.runcible-essay .entry-content ol {
  margin: 0 auto 1.5rem !important;
  padding-left: 1.45rem;
  font-size: 1.1875rem !important;
  line-height: 1.68;
}

body.runcible-essay .entry-content li {
  margin-bottom: .5rem;
}

body.runcible-essay .entry-content li::marker {
  color: var(--red);
}

body.runcible-essay .entry-content blockquote {
  margin: 2rem auto !important;
  padding: .15rem 0 .15rem 1.35rem;
  border-left: 3px solid var(--gold-dark);
  color: #2b302d;
  font-style: italic;
}

body.runcible-essay .entry-content hr,
body.runcible-essay .entry-content .wp-block-separator {
  height: 0;
  margin: 2.8rem auto !important;
  border: 0;
  border-top: 1px solid var(--rule);
  opacity: 1;
}

body.runcible-essay .entry-content code {
  font-family: var(--mono) !important;
  font-size: .88em !important;
}

/* ------------------------------------------------------------------ tables */

/* Several of these essays carry comparison tables that genuinely need more room
   than the prose measure and would be unreadable squeezed into it. */
/* Matches the child rule above on class count so it can widen past the measure. */
html body.runcible-essay main .wp-block-post-content.entry-content > .wp-block-table {
  max-width: var(--measure-wide) !important;
  margin: 2.2rem auto 2.6rem !important;
  overflow-x: auto;
}

body.runcible-essay .entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.5;
}

/* The theme boxes every cell with a `border` shorthand. Horizontal rules only
   is the editorial convention and is far easier to read across a wide row. */
body.runcible-essay .entry-content .wp-block-table th {
  padding: .7rem .8rem;
  border: 0;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--mono) !important;
  font-size: .66rem !important;
  font-weight: 600 !important;
  letter-spacing: .09em;
  text-align: left;
  text-transform: uppercase;
}

body.runcible-essay .entry-content .wp-block-table td {
  padding: .7rem .8rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: .95rem !important;
}

body.runcible-essay .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: rgba(16, 18, 17, .035);
}

body.runcible-essay .entry-content .wp-block-table figcaption {
  margin-top: .6rem;
  color: var(--muted);
  font-family: var(--mono) !important;
  font-size: .68rem !important;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 700px) {
  body.runcible-essay {
    --title-size: clamp(1.95rem, 9vw, 2.8rem);
  }

  body.runcible-essay .entry-content p,
  body.runcible-essay .entry-content ul,
  body.runcible-essay .entry-content ol {
    font-size: 1.0625rem !important;
  }

  body.runcible-essay .entry-content > p.essay-abstract {
    font-size: 1.075rem !important;
  }

  /* A table wider than the column scrolls rather than crushing its cells. */
  body.runcible-essay .entry-content .wp-block-table table {
    min-width: 34rem;
  }
}