/* ═══════════════════════════════════════════════════════════════════════════
   contemplative.space

   The design settled 2026-08-31 and recorded in DESIGN.md. Read that file
   before changing anything here; the reasoning is not repeated in full.

   Three things carry the rest:

   1 · The ground is night over water — not a devotional cream, and not
       ecclesiastical. No purple, no burgundy, no churchy gold.
   2 · Every page opens on the same three-tier rhythm: small spaced-caps brand
       mark → a coloured meta line → a large light-italic title. Collapsing
       this to two tiers visibly flattens the page. It was tested. Keep three.
   3 · The four forms have genuinely different SHAPES, because a haiku inside
       a standard blog template will always read as a very short blog post.
       The shape is the signal — which is why form names stay internal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- The palette --------------------------------------------------------
   Defined on :root as the night world, then overridden by [data-ground] when
   an image asks for a light page. The adaptive ground is the significant
   finding of the design conversation: real photographs arrive in wildly
   different tonal worlds, and a single fixed dark palette cannot hold them.
   So each image carries its own page. See DESIGN.md and IMAGES.md §8.        */

:root {
  --ground: #0e1519;
  --raised: #24333c;
  --inset: #1a262c;  /* code, players, embeds — recessed into the surface */
  --ink: #e8e5de;
  --soft: #a6a8a4;
  --faint: #828a85;
  --rule: #3a4a54;
  --gold: #c9a25e; /* lamp-light. Once per screen, never twice. */
  --cool: #82a6a3; /* thread names, quiet links */
  --grain: 0.4;

  --veil-top: rgba(14, 21, 25, 0.55);
  --veil-mid: rgba(14, 21, 25, 0.10);
  --veil-bot: rgba(14, 21, 25, 0.96);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --col: 34rem; /* the reading measure — about 65 characters */

  /* The banner height, defined once. The image, the spacer and the surface
     offset all read it, so they can never disagree. */
  --banner-h: clamp(18rem, 56vh, 34rem);
}

/* The light ground. Not an inversion: the warm side of the same world —
   paper under lamplight, rather than lamplight in a dark room. The gold has
   to darken considerably to hold its contrast on a pale ground. */
[data-ground="light"] {
  --ground: #f5f2ec;
  --raised: #fffdf9;
  --inset: #f0ece3;
  --ink: #1c1f21;
  --soft: #55595a;
  --faint: #8a8d8a;
  --rule: #ddd8ce;
  --gold: #8a6522;
  --cool: #3d6360;
  --grain: 0.16;

  --veil-top: rgba(245, 242, 236, 0.62);
  --veil-mid: rgba(245, 242, 236, 0.18);
  --veil-bot: rgba(245, 242, 236, 0.94);
}

/* A reader's explicit choice always overrides the image's suggestion.
   DESIGN.md is emphatic about this, and it is the reason the toggle exists. */
:root[data-theme="light"] {
  --ground: #f5f2ec;
  --raised: #fffdf9;
  --inset: #f0ece3;
  --ink: #1c1f21;
  --soft: #55595a;
  --faint: #8a8d8a;
  --rule: #ddd8ce;
  --gold: #8a6522;
  --cool: #3d6360;
  --grain: 0.16;

  --veil-top: rgba(245, 242, 236, 0.62);
  --veil-mid: rgba(245, 242, 236, 0.18);
  --veil-bot: rgba(245, 242, 236, 0.94);
}

:root[data-theme="dark"] {
  --ground: #0e1519;
  --raised: #24333c;
  --inset: #1a262c;  /* code, players, embeds — recessed into the surface */
  --ink: #e8e5de;
  --soft: #a6a8a4;
  --faint: #828a85;
  --rule: #3a4a54;
  --gold: #c9a25e;
  --cool: #82a6a3;
  --grain: 0.4;

  --veil-top: rgba(14, 21, 25, 0.55);
  --veil-mid: rgba(14, 21, 25, 0.10);
  --veil-bot: rgba(14, 21, 25, 0.96);
}

/* ---- Foundation --------------------------------------------------------- */

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

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

body {
  margin: 0;
  /* The deep ground is the surround, not the reading surface — see .reading
     below. Losing that distinction is what made the site read as flat black. */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  /* The ground changes between pages as images change. Without this the
     switch is a hard flash; with it, the site feels like one place. */
  transition: background-color 0.4s ease, color 0.4s ease;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* The reading column, used everywhere, so the site has a spine. */
.col {
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: 1.6rem;
}

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

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--raised);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.875rem;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---- Shared chrome ------------------------------------------------------
   Tier 1 of the three-tier opening: the brand mark. Small, spaced caps.
   The name of the site, never the name of the author — the Stratechery
   model, where the byline lives on the About page and nowhere else.        */

.brand-mark {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--soft);
  text-decoration: none;
  display: block;
  margin: 0;
}

a.brand-mark:hover {
  color: var(--gold);
}

/* Tier 2: the meta line. Thread, date, and — on essays only — a reading time. */
.meta {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 0.5rem;
}

.meta .thread {
  color: var(--cool);
  text-decoration: none;
}

.meta .thread:hover {
  color: var(--gold);
}

.meta .sep {
  opacity: 0.45;
}

.masthead {
  padding: 3.25rem 0 0;
}

.masthead .standfirst {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 300;
  color: var(--soft);
  line-height: 1.55;
  margin: 1.4rem 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE BANNER AND THE READING SURFACE

   Rebuilt from scratch 2026-09-01 after six rounds of patching left three
   conflicting .banner-veil rules and a stack of contradictory positions. What
   follows is the whole mechanism in one place; do not add rules for these
   elements elsewhere.

   THE INTENTION
   A page opens on an image. As the reader scrolls, the image HOLDS STILL and
   the writing rises over it — a window, not a header that scrolls away.

   THE MECHANISM, in four parts:

   1 · .banner is a spacer. It occupies the image's height in normal flow so
       the content below starts in the right place. It paints nothing.
   2 · .banner img is FIXED to the top of the viewport. Being fixed, it is out
       of flow and never moves — which is the whole effect.
   3 · main::before is the reading surface: one opaque rectangle, full width,
       starting below the banner and running to the footer. It scrolls
       normally, so it slides up over the fixed image.
   4 · Stacking, explicitly, because leaving it implicit is what broke this
       repeatedly:  image 0  →  veil 1  →  surface 2  →  content 3.

   THE VEIL only darkens the TOP of the image, behind the wordmark, and fades
   to nothing by a third of the way down. An earlier version tinted the whole
   image, which washed the photograph out in light mode and muddied it in dark
   — the picture is meant to be seen, not filtered.                          */

.banner {
  position: relative;
  height: var(--banner-h);
  z-index: 0;
}

.banner img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--banner-h);
  object-fit: cover;
  z-index: 0;
}

/* Only the top strip, only behind the wordmark. */
.banner-veil {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 7rem;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    var(--veil-top) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.banner-inner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 1.6rem 0 0;
  z-index: 2;
  pointer-events: none;
}

.banner-inner .col {
  width: 100%;
}

.banner-inner a {
  pointer-events: auto;
}

/* Reduced motion: the image scrolls with the page like anything else. */
@media (prefers-reduced-motion: reduce) {
  .banner img,
  .banner-veil,
  .banner-inner {
    position: absolute;
  }
}

.image-credit {
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--faint);
  margin: 0.6rem 0 0;
}

.image-credit a {
  color: var(--soft);
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
}

.image-credit a:hover {
  color: var(--gold);
}

/* ---- Prose -------------------------------------------------------------- */

/* ---- The reading surface ------------------------------------------------
   Part 3 of the mechanism described above. One opaque rectangle, full width,
   from below the banner to the footer. It scrolls with the page, so it rises
   over the fixed image.

   It is painted by a pseudo-element rather than on main itself, because main
   would then need a stacking context, and a stacking context traps the fixed
   banner inside it. Two earlier attempts failed exactly there.             */

main {
  position: relative;
}

main::before {
  content: "";
  position: absolute;
  top: var(--surface-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--raised);
  border-bottom: 1px solid var(--rule);
  z-index: 2;
}

/* A page with a banner starts its surface where the banner ends. Set on the
   body so one declaration serves every page shape. */
.has-banner {
  --surface-top: var(--banner-h);
}

main > *:not(.banner) {
  position: relative;
  z-index: 3;
}

main a {
  color: inherit;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

main a:hover {
  color: var(--gold);
}

.prose p {
  margin: 0 0 1.35rem;
}

.prose h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 2.75rem 0 0.9rem;
}

.prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 2rem 0 0.6rem;
}

.prose blockquote {
  margin: 1.9rem 0;
  padding-left: 1.15rem;
  border-left: 2px solid var(--rule);
  font-style: italic;
  color: var(--soft);
}

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

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

.prose figure {
  margin: 2.25rem 0;
}

.prose figcaption {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--faint);
  margin-top: 0.6rem;
}

.prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--inset);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.prose pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--inset);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.prose pre code {
  background: none;
  padding: 0;
}

.footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FOUR FORMS

   Form names are INTERNAL. A reader never sees the word `figure` or `media`;
   they see a centred image with three lines of verse, or a player above a
   commentary. The shape is the signal — that is the entire reason the forms
   have different shapes.
   ═══════════════════════════════════════════════════════════════════════════ */

.post-head {
  padding-top: 3.25rem;
}

/* ---- essay ---------------------------------------------------------------
   The reading column. No image needed. Where most of the words live.       */

.form-essay h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.4vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0.75rem 0 0.6rem;
  text-wrap: balance;
}

.form-essay .standfirst {
  font-size: 1.1875rem;
  font-style: italic;
  font-weight: 300;
  color: var(--soft);
  line-height: 1.55;
  margin: 0 0 2.25rem;
}

/* The drop capital is the one flourish on the page, and it is the reason the
   gold rule is "once per screen": it has already been spent here. */
.form-essay .prose > p:first-of-type::first-letter {
  font-size: 3.1rem;
  line-height: 0.82;
  float: left;
  padding: 0.13em 0.09em 0 0;
  font-weight: 400;
  color: var(--gold);
}

/* ---- figure --------------------------------------------------------------
   One thing set large, a little text beneath. Image-led, centred, mostly air.
   Carries the stance without asking for reading — deliberately the sparest
   page on the site. Holds a haiku, a line from Augustine, a verse, or a
   photograph with three sentences.                                          */

.form-figure {
  text-align: center;
}

.form-figure .meta {
  justify-content: center;
}

.figure-image {
  width: 100%;
  margin-bottom: 2.75rem;
}

.figure-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.form-figure .verse {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(1.5rem, 4.2vw, 1.9rem);
  line-height: 1.62;
  letter-spacing: -0.005em;
  margin: 0 0 2.5rem;
  color: var(--ink);
}

/* The short gold rule between the verse and the commentary. It marks the
   change of voice — from the thing itself to the thinking about it. */
.form-figure .divider {
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 2.25rem;
  opacity: 0.6;
  border: 0;
}

/* The commentary sets left even though the verse is centred: centred prose
   is unreadable past a line or two. */
.form-figure .prose {
  text-align: left;
}

.form-figure .prose p {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--soft);
}

/* ---- media ---------------------------------------------------------------
   Something playable at the top, then commentary. Player first, because the
   reader should be listening while reading.                                 */

.form-media h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.2vw, 1.85rem);
  line-height: 1.2;
  margin: 0.75rem 0 1.5rem;
  text-wrap: balance;
}

.player {
  background: var(--inset);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin-bottom: 2.25rem;
  text-decoration: none;
  color: inherit;
}

a.player:hover {
  border-color: var(--gold);
}

.player .play {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--gold);
  display: grid;
  place-items: center;
}

.player .play svg {
  display: block;
}

.player .play svg path {
  fill: var(--ground);
}

.player .track {
  min-width: 0;
}

.player .track .t {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player .track .a {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--faint);
  margin: 0;
}

.player .src {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* An embedded player — YouTube, Bandcamp, a Vatican broadcast. Kept in a
   ratio box so it never causes layout shift as it loads. */
.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 2.25rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--inset);
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lyrics set as verse, not as quotation — a quotation frame would make them
   evidence, and they are not evidence; they are the thing being listened to. */
.lyric {
  border-left: 2px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1.3rem;
  margin: 0 0 2.1rem;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--ink);
}

.lyric p {
  margin: 0;
}

.lyric .attrib {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 0.85rem;
}

/* The image sits in the pause BETWEEN the lyric and the commentary — not at
   the top, which would delay pressing play, and not at the bottom, where it
   becomes an afterthought nobody scrolls back to. */
.media-image {
  width: 100%;
  margin: 0 0 2.1rem;
  border-radius: 3px;
  overflow: hidden;
}

.media-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---- note ----------------------------------------------------------------
   Short, untitled, indented. Visibly cheap, deliberately: the Note looking
   cheap on the page is what makes posting one feel easy, and a reflective
   space that only accepts finished essays goes quiet.                       */

.form-note {
  border-left: 2px solid var(--rule);
  padding-left: 1.3rem;
}

.form-note .prose p {
  margin: 0 0 1.15rem;
  color: var(--ink);
}

.form-note .cite {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--faint);
}

.form-note .cite a {
  color: var(--cool);
  text-decoration: none;
}

.form-note .cite a:hover {
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE STREAM

   Newest first, no chosen feature. Whatever was published last leads, in its
   own form — a Note leading looks natural because the forms already differ in
   shape, so it does not need inflating to hero size. This removes an
   editorial obligation that would otherwise recur forever and go stale.
   ═══════════════════════════════════════════════════════════════════════════ */

.stream {
  padding: 2.5rem 0 1rem;
}

.stream-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.entry + .entry {
  margin-top: 2.1rem;
  padding-top: 2.1rem;
  border-top: 1px solid var(--rule);
}

.entry h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.26;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}

.entry h2 a {
  text-decoration: none;
}

.entry h2 a:hover {
  color: var(--gold);
}

.entry .teaser {
  font-size: 1.03125rem;
  line-height: 1.62;
  color: var(--soft);
  margin: 0;
}

/* The newest piece leads a little larger — enough to read as the current
   thing, not so much as to become a hero slot that must be filled. */
.entry.is-newest h2 {
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.015em;
}

/* ---- entry: figure ------------------------------------------------------
   Announces itself by shape. The verse IS the entry — no title, no teaser.
   A reader scrolling knows instantly that this is a different kind of thing. */

.entry.entry-figure {
  text-align: center;
}

.entry.entry-figure .meta {
  justify-content: center;
}

.entry.entry-figure .thumb {
  margin: 0.5rem 0 1.4rem;
  border-radius: 3px;
  overflow: hidden;
}

.entry.entry-figure .thumb img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.entry.entry-figure .verse {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 1.375rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

/* The verse is the piece itself, not a link to it — so it keeps the ink
   colour and shows no link decoration. Gold is spent once per screen, and on
   this page it is spent on the image. */
.entry.entry-figure .verse a {
  text-decoration: none;
  color: var(--ink);
}

.entry.entry-figure .verse a:hover {
  color: var(--gold);
}

/* ---- entry: media ------------------------------------------------------- */

.entry .mini-player {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.85rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--inset);
}

.entry .mini-player .play {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--gold);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.entry .mini-player .play svg path {
  fill: var(--ground);
}

.entry .mini-player .tt {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--soft);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- entry: note -------------------------------------------------------- */

.entry.entry-note {
  border-left: 2px solid var(--rule);
  padding-left: 1.25rem;
}

/* A note leading the stream keeps its rule but loses the top border, so the
   two lines do not collide. */
.entry.entry-note.is-newest {
  padding-top: 0;
  border-top: 0;
}

.entry.entry-note .body {
  font-size: 1.03125rem;
  line-height: 1.64;
  color: var(--ink);
  margin: 0 0 0.7rem;
}

.entry.entry-note .cite {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--faint);
  margin: 0;
}

.entry.entry-note .cite a {
  color: var(--cool);
  text-decoration: none;
}

.entry.entry-note .cite a:hover {
  color: var(--gold);
}

/* ---- The threads strip -------------------------------------------------- */

.threads {
  margin-top: 3.25rem;
  padding: 1.9rem 0 0;
  border-top: 1px solid var(--rule);
}

.threads .lbl {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1.1rem;
}

.thread-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thread-list a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--soft);
  text-decoration: none;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
}

.thread-list a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Counts stay hidden until a thread has about five pieces — a count of 2
   looks thin, and nothing here should look thin before it is ready. */
.thread-list .n {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--faint);
  margin-left: 0.35rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THREAD PAGES

   The answer to "chronology is the wrong order for understanding." These
   exist from day one even while they are only lists, because the real goal is
   that a theme can later become a structured whole with its own introduction
   and its own logical order — and retrofitting that would mean a rebuild.
   ═══════════════════════════════════════════════════════════════════════════ */

.thread-page h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4.6vw, 2.1rem);
  line-height: 1.16;
  margin: 0.85rem 0 0.9rem;
  letter-spacing: -0.015em;
}

.thread-page .intro {
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 300;
  color: var(--soft);
  line-height: 1.6;
  margin: 0 0 2.5rem;
}

.section-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 2.5rem 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

/* The reading order, when a thread has earned one. */
.ordered {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.ordered li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.9rem;
  padding: 0.9rem 0;
}

.ordered li + li {
  border-top: 1px solid var(--rule);
}

.ordered li::before {
  content: counter(step);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--gold);
  padding-top: 0.28rem;
}

.ordered .t {
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: 0.15rem;
}

.ordered .t:hover {
  color: var(--gold);
}

.ordered .d {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--faint);
  margin: 0;
}

/* A plain list, for a thread that has not yet been given an order. */
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plain-list li {
  padding: 0.9rem 0;
}

.plain-list li + li {
  border-top: 1px solid var(--rule);
}

.plain-list .t {
  font-size: 1.0625rem;
  text-decoration: none;
  display: block;
  margin-bottom: 0.15rem;
}

.plain-list .t:hover {
  color: var(--gold);
}

.plain-list .d {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--faint);
  margin: 0;
}

/* ---- Footer, subscribe, post navigation --------------------------------- */

/* The closing note continues from the piece rather than sitting in a panel
   after it. A bordered box on a surface that is already a box reads as an
   advertisement interrupting the reading, which is the opposite of the
   intended effect — and it was leaving a dark gap between the two. */
.subscribe {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--soft);
}

.subscribe p {
  margin: 0;
}

.post-nav {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.875rem;
}

.post-nav a {
  color: var(--soft);
  text-decoration: none;
}

.post-nav a:hover {
  color: var(--gold);
}

.site-footer {
  margin-top: 4.5rem;
  padding: 2rem 0 4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--faint);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.site-footer a {
  color: var(--soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--gold);
}

.site-footer p {
  margin: 0;
}

/* The ground toggle. Small, in the footer — a reader's explicit choice
   overrides what the image suggested, and is remembered. */
.ground-toggle {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--soft);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 0.32rem 0.8rem;
  cursor: pointer;
}

.ground-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 34rem) {
  body {
    font-size: 1.0625rem;
  }

  .masthead {
    padding-top: 2.5rem;
  }

  .post-head {
    padding-top: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}