/* ═══════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200;0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,200;1,6..72,300;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400&display=swap");

/* ---- 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: #10161a;
  --raised: #171f24;
  --ink: #e8e5de;
  --soft: #a6a8a4;
  --faint: #6e7671;
  --rule: #263036;
  --gold: #c9a25e; /* lamp-light. Once per screen, never twice. */
  --cool: #82a6a3; /* thread names, quiet links */
  --grain: 0.4;

  --veil-top: rgba(16, 22, 26, 0.55);
  --veil-mid: rgba(16, 22, 26, 0.12);
  --veil-bot: rgba(16, 22, 26, 0.92);

  --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 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;
  --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;
  --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: #10161a;
  --raised: #171f24;
  --ink: #e8e5de;
  --soft: #a6a8a4;
  --faint: #6e7671;
  --rule: #263036;
  --gold: #c9a25e;
  --cool: #82a6a3;
  --grain: 0.4;

  --veil-top: rgba(16, 22, 26, 0.55);
  --veil-mid: rgba(16, 22, 26, 0.12);
  --veil-bot: rgba(16, 22, 26, 0.92);
}

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

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

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

body {
  margin: 0;
  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 ---------------------------------------------------------
   Shown on the home page. Either the newest post's own image, or one from
   the rotating set — advancing when the newest post changes, so the site
   changes when there is something new to see and holds still when there is
   not. The veil keeps the wordmark legible over any photograph and ties the
   image into the ground beneath it.                                        */

.banner {
  position: relative;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: clamp(11rem, 32vw, 17rem);
  object-fit: cover;
}

.banner-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--veil-top) 0%,
    var(--veil-mid) 38%,
    var(--veil-bot) 100%
  );
}

.banner-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: 1.6rem 0 0;
  z-index: 1; /* above the veil */
}

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

.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 -------------------------------------------------------------- */

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(--raised);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.prose pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--raised);
  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(--raised);
  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(--raised);
}

.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(--raised);
}

.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 --------------------------------- */

.subscribe {
  margin-top: 4rem;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--soft);
  background: var(--raised);
}

.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;
  }
}