/* ==========================================================================
   Essay layout — loaded only by why-now.html, on top of style.css.

   why-now.html is a long-form argument, not a marketing page, and the card
   grids in style.css are the wrong instrument for one: a paragraph that has to
   carry a claim and its caveat does not fit in a tier-list bullet. So this file
   adds a reading layout — one narrow column, numbered sections, a table of
   contents that summarises rather than merely links, and footnotes for the
   things that would otherwise turn every third sentence into a parenthesis.

   It is a SECOND stylesheet rather than another "additions" block at the end of
   style.css because none of it is reachable from the other three pages, and
   style.css is already ~1,800 lines shared with three sibling sites. Ship both:
   the page links style.css first for the tokens, the fonts and the nav pill,
   and this file for everything below the nav.

   NO new colour tokens, same rule as the Grow block in style.css — the palette
   is shared to the hex with chewey-site, wooly-site and warden-site.

   Still no JavaScript anywhere on this site. That constrains one thing in
   particular: the section rail on wide screens cannot highlight the section you
   are currently reading, because scroll-spying needs a listener. A static rail
   that always shows where things are is worth more than no rail, and worth more
   than a script.
   ========================================================================== */

/* ---------- shell ---------- */

/* 40rem ≈ 70 characters of Figtree at the body size below, which is the
   measure long prose wants. The site's other pages run to 68rem because they
   are laying out cards, not sentences. */
/* width + min-width are load-bearing, not belt-and-braces. .page is a column
   flexbox, so this article is a flex item, and a flex item's automatic minimum
   size is its min-content width — which the modes table (min-width: 30rem)
   pushes past a narrow phone viewport. The page then scrolls sideways as a
   whole instead of the table scrolling inside its own box, which is the bug the
   .essay-table-wrap overflow was there to prevent. */
.essay {
  width: 100%;
  min-width: 0;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.4rem 5rem;
}

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

.essay-head {
  text-align: center;
  padding: 4.5rem 0 2.5rem;
}

/* Sans, upper case and tightly tracked for the title, serif italic for the
   subtitle underneath it. The inversion is deliberate: everywhere else on this
   site the serif carries the heading and the sans carries the body, so a page
   that opens the other way round reads as a different kind of document before
   anybody has finished the first line. */
.essay-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.essay-title span {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.essay-byline {
  margin-top: 1.6rem;
  font-size: 1.15rem;
  color: var(--ink-dim);
}

.essay-byline a {
  color: inherit;
}

/* ---------- prose ---------- */

.essay-body p {
  font-size: 1.05rem;
  line-height: 1.78;
  margin-bottom: 1.3rem;
}

/* The opening paragraphs, before the first rule. Slightly larger so the essay
   starts at a different volume from the sections that follow it. */
.essay-lede p {
  font-size: 1.16rem;
  line-height: 1.72;
}

.essay-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.essay-body a:hover {
  color: var(--ink-dim);
  text-decoration-color: var(--ink-faint);
}

.essay-body strong {
  font-weight: 700;
}

.essay-body em {
  font-style: italic;
}

/* Inline code appears in the routing sections, where the modes have literal
   names an operator will type into a config. Monospace at 0.9em so it does not
   tower over the surrounding Figtree. */
.essay-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(26, 26, 26, 0.05);
  border-radius: 5px;
  padding: 0.1em 0.35em;
}

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

.essay-section {
  margin-top: 3.6rem;
  /* The heading is the anchor target; the sticky nav pill would otherwise sit
     on top of it after a jump from the contents. */
  scroll-margin-top: 5.5rem;
}

.essay-num {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.essay-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  margin-bottom: 1.3rem;
}

.essay-body h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 2.2rem 0 0.7rem;
}

.essay-rule {
  border: 0;
  height: 1px;
  background: var(--border);
  width: 38%;
  margin: 3rem auto;
}

/* ---------- table of contents ---------- */

/* Each entry is a title and a summary, not a bare link — the summary is the
   part that lets somebody decide they only want section V, and the SA-style
   contents this is modelled on earns its length that way. */
.essay-toc {
  margin: 0 0 1rem;
}

.essay-toc h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  margin-bottom: 0.8rem;
}

.essay-toc-note {
  font-style: italic;
  color: var(--ink-dim);
  margin-bottom: 1.8rem !important;
}

.essay-toc-item {
  margin-bottom: 1.25rem;
}

.essay-toc-item strong {
  display: block;
  font-weight: 700;
}

.essay-toc-item span {
  display: block;
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ---------- pull quote ---------- */

.essay-pull {
  margin: 2.2rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- callout ---------- */

/* For the sentences that are commitments rather than argument. Bordered like a
   feature card so it reads as a different kind of statement without needing a
   second colour. */
.essay-callout {
  margin: 2.2rem 0;
  padding: 1.3rem 1.5rem;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
}

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

.essay-callout-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

/* ---------- figures ---------- */

.essay-figure {
  margin: 2.6rem 0;
}

.essay-figure svg {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
}

.essay-figure figcaption {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

.essay-figure figcaption strong {
  color: var(--ink);
}

/* Figure internals. Fills and strokes live here rather than as SVG attributes
   so the palette stays in one place, and so a token change moves the diagrams
   with the page. */
.fig-box { fill: none; stroke: var(--ink); stroke-width: 2; }
.fig-box-soft { fill: none; stroke: var(--border); stroke-width: 2; }
.fig-fill-dark { fill: var(--dark); }
.fig-fill-accent { fill: var(--accent); }
.fig-fill-green { fill: var(--accent-dark); }
.fig-fill-soft { fill: var(--accent-soft); }
.fig-line { stroke: var(--ink); stroke-width: 2; fill: none; }
.fig-line-soft { stroke: var(--ink-faint); stroke-width: 2; fill: none; stroke-dasharray: 4 5; }
.fig-t {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--ink);
}
.fig-t-dim { font-weight: 500; fill: var(--ink-dim); }
.fig-t-light { fill: var(--bg); }
.fig-t-small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-faint); }

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

.essay-table-wrap {
  margin: 2.2rem 0;
  max-width: 100%;
  /* Five columns of prose in a 40rem measure will overflow on a phone before
     any amount of wrapping saves it. Scroll the table, never the page. */
  overflow-x: auto;
}

.essay-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.essay-table th {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 2px solid var(--border);
  padding: 0 0.9rem 0.6rem 0;
}

.essay-table td {
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0.9rem 0.7rem 0;
  line-height: 1.55;
}

.essay-table td:first-child {
  white-space: nowrap;
  font-weight: 600;
}

.essay-table tr.is-current td {
  background: rgba(207, 166, 255, 0.13);
}

/* ---------- footnotes ---------- */

.essay-fn {
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
}

.essay-fn a {
  text-decoration: none !important;
  color: var(--accent-dark) !important;
  padding: 0 0.1em;
}

.essay-footnotes {
  margin-top: 4rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--border);
}

.essay-footnotes h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.2rem;
}

.essay-footnotes ol {
  padding-left: 1.2rem;
}

.essay-footnotes li {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-dim);
  margin-bottom: 0.9rem;
  scroll-margin-top: 5.5rem;
}

.essay-footnotes li a {
  color: var(--ink);
}

/* The return arrow back to the reference. Underlining it makes a lone glyph
   look like a broken word; it is a control, not a citation. */
.essay-footnotes li a[href^="#fnref"] {
  text-decoration: none;
  color: var(--accent-dark);
  padding-left: 0.15rem;
}

/* ---------- end matter ---------- */

.essay-end {
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 2px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  /* Not space-between: the closing line plus two buttons exceed the 40rem
     measure and wrap, at which point space-between spreads nothing and the
     buttons merely look mis-set. Stacked and left-aligned is the same layout,
     intentionally. */
  justify-content: flex-start;
}

.essay-end p {
  font-size: 0.95rem;
  color: var(--ink-dim);
  margin: 0;
  max-width: 24rem;
}

/* ---------- section rail ---------- */

/* Roman numerals down the left margin on screens wide enough to have a margin.
   Purely an index: no active state, because that needs a scroll listener and
   this site has no JavaScript. Hidden below 1180px, where it would either
   collide with the column or squeeze it. */
.essay-rail {
  display: none;
}

@media (min-width: 1180px) {
  .essay-rail {
    display: block;
    position: fixed;
    top: 8.5rem;
    left: max(1.5rem, calc(50vw - 33rem));
    width: 11rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .essay-rail li {
    list-style: none;
    margin-bottom: 0.55rem;
  }

  .essay-rail a {
    color: var(--ink-faint);
    text-decoration: none;
  }

  .essay-rail a:hover {
    color: var(--ink);
  }

  .essay-rail .essay-rail-num {
    display: inline-block;
    width: 2.2rem;
    font-weight: 700;
  }
}

/* ---------- print ---------- */

/* No PDF is offered anywhere on this page, and none is generated — but an
   essay this length gets printed or saved by somebody, and the default would
   put the sticky nav pill on page one and the rail over the text. */
@media print {
  .nav-wrap,
  .essay-rail,
  .essay-end {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .essay {
    max-width: 100%;
  }

  .essay-section {
    break-inside: avoid-page;
  }

  .essay-figure,
  .essay-callout,
  .essay-table-wrap {
    break-inside: avoid;
  }
}