/* solvefornow.com — one stylesheet, no framework, no build step.
   Strict BEM: every rule below targets a single class. No tag selectors, no
   descendant combinators, no ids. The one exception is the .prose block near
   the bottom, which styles HTML that comes out of the database and therefore
   cannot carry classes of its own. See STYLE.md.

   Every color and every font lives in the token block below and nowhere else.

   The palette is "The Index", the design decided 2026-08-31: paper, ink,
   hairlines, and marigold used only as punctuation. It is deliberately NOT
   rjnestor.com's teal-and-forest brand—this site is the newsletter's own
   place, typographic and hand-set, and the two are meant to look different. */

:root {
  /* Paper and ink */
  --color-page:      #FBFBFA;
  --color-ink:       #191817;
  --color-on-ink:    #FBFBFA;
  --color-secondary: #58554F;
  --color-muted:     #6F6C66;
  --color-faint:     #8E8B86;

  /* Rules: a hairline and a heavy one, which carry all the structure */
  --color-rule:       #DBD9D4;
  --color-rule-heavy: #191817;

  /* Marigold, punctuation only. --color-mark is the large tone (short rules,
     ticks, marks on ink); --color-accent is the tone small accent text and
     links use, dark enough to clear WCAG AA on paper. */
  --color-mark:       #B57A00;
  --color-accent:     #8F6100;
  --color-link:       #8F6100;
  --color-link-hover: #B57A00;

  --color-danger: #9A2A20;
  --color-focus:  #8F6100;
  --color-shadow: rgb(25 24 23 / .18);

  --font-serif: Literata, Georgia, "Iowan Old Style", "Times New Roman", serif;

  --width-wide: 55rem;
  --width-text: 45rem;
  --width-lede: 35rem;
  --gutter: 1.375rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-page:      #161513;
    --color-ink:       #F2F0EA;
    --color-on-ink:    #161513;
    --color-secondary: #C4C0B7;
    --color-muted:     #A5A199;
    --color-faint:     #6E6A62;

    --color-rule:       #37342E;
    --color-rule-heavy: #F2F0EA;

    --color-mark:       #D89B24;
    --color-accent:     #E0A83E;
    --color-link:       #E0A83E;
    --color-link-hover: #F0C168;

    --color-danger: #F0B0A8;
    --color-focus:  #E0A83E;
    --color-shadow: rgb(0 0 0 / .55);
  }
}

/* ---- Document ----------------------------------------------------------- */

.doc {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

.doc__body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font: 400 1rem/1.5 var(--font-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .6rem 1rem;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: .9375rem;
  z-index: 10;
}

.skip-link:focus {
  left: .5rem;
  top: .5rem;
}

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

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

.shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--width-wide);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.shell--text {
  max-width: var(--width-text);
}

.main {
  display: block;
  padding-bottom: 3.5rem;
}

@media (min-width: 48rem) {
  .main { padding-bottom: 4.5rem; }
}

/* ---- Masthead: one quiet line, and only on interior pages --------------- */

.masthead {
  padding-top: 1.75rem;
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
}

.masthead__wordmark {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.masthead__wordmark:hover {
  color: var(--color-accent);
}

.masthead__stop {
  color: var(--color-mark);
}

.masthead__nav {
  display: flex;
  gap: 1.375rem;
}

.sitenav__link {
  font-size: .875rem;
  color: var(--color-muted);
  text-decoration: none;
}

.sitenav__link:hover {
  color: var(--color-ink);
}

.sitenav__link--current {
  color: var(--color-accent);
}

@media (min-width: 48rem) {
  .masthead { padding-top: 2.75rem; }
}

/* ---- Home --------------------------------------------------------------- */

.home {
  padding-top: 1.75rem;
}

.home__wordmark {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
}

.home__wordmark-link {
  color: var(--color-ink);
  text-decoration: none;
}

.home__wordmark-link:hover {
  color: var(--color-accent);
}

.home__stop {
  color: var(--color-mark);
}

.home__kicker {
  margin: .875rem 0 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.home__promise {
  margin-top: 1rem;
  font-size: 1.5625rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--color-ink);
  max-width: 51rem;
}

.home__signup {
  margin-top: 1.25rem;
}

.home__index {
  margin-top: 2.25rem;
}

.home__foot {
  margin-top: .75rem;
}

@media (min-width: 48rem) {
  .home { padding-top: 4rem; }
  .home__wordmark { font-size: 1rem; }
  .home__promise { margin-top: 1.5rem; font-size: 2.125rem; line-height: 1.3; }
  .home__signup { margin-top: 1.75rem; }
  .home__index { margin-top: 4.5rem; }
  .home__foot { margin-top: 1.5rem; }
}

@media (min-width: 64rem) {
  .home { padding-top: 5.5rem; }
  .home__promise { font-size: 2.5rem; }
}

/* ---- The numbered index ------------------------------------------------- */

.index {
  display: block;
}

/* Before the first essay there are no rows, so this line stands between the
   index's heavy rule and the foot's—which is the rule that closes it. */
.index__empty {
  margin: 0;
  border-top: 2px solid var(--color-rule-heavy);
  padding: 1.75rem 0 .5rem;
  font-size: .9375rem;
  font-style: italic;
  color: var(--color-muted);
}

.index__row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  grid-template-areas:
    "num body"
    ".   read";
  column-gap: .875rem;
  align-items: baseline;
  border-top: 1px solid var(--color-rule);
  padding: 1rem 0;
}

.index__row--latest {
  border-top: 2px solid var(--color-rule-heavy);
  padding: 1.125rem 0;
}

.index__number {
  grid-area: num;
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.index__number--latest {
  color: var(--color-accent);
}

.index__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: .3125rem;
}

.index__head {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.index__kicker {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.index__title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-secondary);
}

.index__title--latest {
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--color-ink);
}

.index__link {
  color: inherit;
  text-decoration: none;
}

.index__link:hover {
  color: var(--color-accent);
}

.index__excerpt {
  margin: 0;
  font-size: .875rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--color-muted);
}

.index__date {
  margin: 0;
  font-size: .8125rem;
  color: var(--color-muted);
}

.index__read {
  grid-area: read;
  margin: .375rem 0 0;
  font-size: .875rem;
}

.index__read-link {
  color: var(--color-link);
  text-decoration: none;
}

.index__read-link:hover {
  color: var(--color-link-hover);
}

@media (min-width: 48rem) {
  .index__row {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    grid-template-areas: "num body read";
    column-gap: 2rem;
    padding: 1.375rem 0;
  }
  .index__row--latest { padding: 1.625rem 0; }
  .index__number { font-size: .9375rem; }
  .index__body { gap: .375rem; }
  .index__head {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    gap: .875rem;
  }
  .index__kicker { font-size: .8125rem; }
  .index__title { font-size: 1.3125rem; }
  .index__title--latest { font-size: 1.6875rem; }
  .index__excerpt { font-size: .9375rem; line-height: 1.5; }
  .index__read { margin: 0; font-size: .9375rem; }
}

@media (min-width: 64rem) {
  .index__excerpt { font-size: 1rem; }
}

/* ---- The foot of the home page ------------------------------------------ */

.foot {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  border-top: 2px solid var(--color-rule-heavy);
  padding-top: 1rem;
}

.foot__left {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 35rem;
}

.foot__note {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.foot__more {
  margin: 0;
  font-size: .8125rem;
}

.foot__aside {
  margin: 0;
  font-size: .8125rem;
  color: var(--color-muted);
}

.foot__link {
  color: var(--color-link);
  text-decoration: none;
}

.foot__link:hover {
  color: var(--color-link-hover);
}

@media (min-width: 48rem) {
  .foot {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1.5rem;
  }
  .foot__note { font-size: .9375rem; line-height: 1.55; }
  .foot__more { font-size: .9375rem; }
  .foot__aside { font-size: .9375rem; }
}

/* ---- Signup ------------------------------------------------------------- */

.signup {
  display: block;
}

.signup--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.signup__title {
  margin: 0 0 .75rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-ink);
}

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

.signup__form {
  margin: 0;
}

.signup__fields {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.signup__input {
  box-sizing: border-box;
  width: 100%;
  padding: .8125rem .875rem;
  border: 1px solid var(--color-ink);
  border-radius: 2px;
  background: var(--color-page);
  color: var(--color-ink);
  font: 400 .875rem/1.3 var(--font-serif);
}

.signup__input::placeholder {
  color: var(--color-faint);
  opacity: 1;
}

.signup__input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.signup__input[disabled] {
  border-color: var(--color-rule);
  color: var(--color-faint);
}

.signup__button {
  box-sizing: border-box;
  width: 100%;
  padding: .8125rem 1.625rem;
  border: 1px solid var(--color-ink);
  border-radius: 2px;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font: 600 .875rem/1.3 var(--font-serif);
  cursor: pointer;
}

.signup__button:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.signup__button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.signup__button[disabled] {
  background: var(--color-faint);
  border-color: var(--color-faint);
  color: var(--color-page);
  cursor: default;
}

.signup__blurb {
  margin: .625rem 0 0;
  font-size: .75rem;
  font-style: italic;
  color: var(--color-muted);
}

.signup__note {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: var(--color-muted);
  min-height: 1em;
}

.signup__note.is-error {
  color: var(--color-danger);
}

.signup__done {
  margin: 0;
}

.signup__done-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .signup__title { font-size: 1.1875rem; line-height: 1.6; max-width: var(--width-lede); }
  .signup__fields {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: .625rem;
  }
  .signup__input { width: 10rem; font-size: .9375rem; }
  .signup__input--email { width: 14rem; }
  .signup__button { width: auto; font-size: .9375rem; }
  .signup__blurb { font-size: .875rem; }
}

/* ---- The essay ---------------------------------------------------------- */

.essay {
  padding-top: 2.75rem;
}

.essay__head {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.essay__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  margin: 0;
}

.essay__number {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.essay__meta-text {
  font-size: .8125rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.essay__title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--color-ink);
}

.essay__subtitle {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--color-muted);
}

.essay__provenance {
  margin: 0;
  font-size: .8125rem;
  color: var(--color-muted);
}

.essay__rule {
  width: 3.5rem;
  border: 0;
  border-top: 2px solid var(--color-rule-heavy);
  margin: .5rem 0 0;
}

.essay__body {
  margin-top: 2rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .essay { padding-top: 4.5rem; }
  .essay__head { gap: 1.25rem; }
  .essay__meta { gap: 1.25rem; }
  .essay__number { font-size: 1rem; }
  .essay__meta-text { font-size: .875rem; letter-spacing: .1em; }
  .essay__title { font-size: 2.75rem; line-height: 1.12; }
  .essay__subtitle { font-size: 1.25rem; }
  .essay__body { margin-top: 2.5rem; font-size: 1.125rem; }
}

@media (min-width: 64rem) {
  .essay__title { font-size: 3.25rem; }
}

/* ---- The offer that closes an essay or the book page -------------------- */

.offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  padding-top: 3rem;
}

.offer__rule {
  width: 3.5rem;
  border: 0;
  border-top: 2px solid var(--color-rule-heavy);
  margin: 0;
}

@media (min-width: 48rem) {
  .offer { padding-top: 4rem; }
}

/* ---- Prev and next, and the book line ----------------------------------- */

.pager {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  border-top: 1px solid var(--color-rule);
  padding-top: 1.375rem;
  margin-top: 3rem;
}

.pager__link {
  font-size: .875rem;
  color: var(--color-link);
  text-decoration: none;
}

.pager__link:hover {
  color: var(--color-link-hover);
}

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

.pager__title {
  font-style: italic;
}

.pager__link--next {
  text-align: left;
}

.bookline {
  margin: 1.125rem 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.bookline__link {
  color: var(--color-link);
  text-decoration: none;
}

.bookline__link:hover {
  color: var(--color-link-hover);
}

@media (min-width: 48rem) {
  .pager {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3.5rem;
  }
  .pager__link { font-size: .9375rem; }
  .pager__link--next { text-align: right; }
  .bookline { font-size: .875rem; }
}

/* ---- The archive -------------------------------------------------------- */

.archive {
  padding-top: 2.75rem;
}

.archive__title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--color-ink);
}

.archive__intro {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 44rem;
}

.archive__runs {
  margin-top: 2.5rem;
}

.archive__empty {
  margin: 2.5rem 0 0;
  font-size: .9375rem;
  font-style: italic;
  color: var(--color-muted);
}

.archive__foot {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  border-top: 2px solid var(--color-rule-heavy);
  padding-top: 1.25rem;
  margin-top: 2.25rem;
}

.archive__note {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 35rem;
}

.archive__link {
  color: var(--color-link);
  text-decoration: none;
}

.archive__link:hover {
  color: var(--color-link-hover);
}

.archive__rss {
  margin: 0;
  font-size: .875rem;
  color: var(--color-muted);
}

@media (min-width: 48rem) {
  .archive { padding-top: 4.5rem; }
  .archive__title { font-size: 2.5rem; }
  .archive__intro { margin-top: 1.125rem; font-size: 1.125rem; }
  .archive__runs { margin-top: 3.5rem; }
  .archive__foot {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1.5rem;
    margin-top: 2.5rem;
  }
  .archive__note { font-size: .9375rem; }
  .archive__rss { font-size: .9375rem; }
}

.run {
  display: block;
  margin-top: 2.5rem;
}

.run--first {
  margin-top: 0;
}

.run__head {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  border-top: 2px solid var(--color-rule-heavy);
  padding: 1.125rem 0 .875rem;
}

.run__name {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-ink);
}

.run__meta {
  margin: 0;
  font-size: .8125rem;
  color: var(--color-muted);
}

.run__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.run__item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-areas:
    "num title"
    ".   date";
  column-gap: 1rem;
  align-items: baseline;
  border-top: 1px solid var(--color-rule);
  padding: .875rem 0;
}

.run__number {
  grid-area: num;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.run__link {
  grid-area: title;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.run__link:hover {
  color: var(--color-accent);
}

.run__date {
  grid-area: date;
  font-size: .8125rem;
  color: var(--color-muted);
}

@media (min-width: 48rem) {
  .run { margin-top: 3rem; }
  .run__head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0 .875rem;
  }
  .run__name { font-size: 1.375rem; }
  .run__meta { font-size: .875rem; }
  .run__item {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas: "num title date";
    column-gap: 1.75rem;
    padding: .9375rem 0;
  }
  .run__number { font-size: .875rem; }
  .run__link { font-size: 1.0625rem; }
}

/* ---- The book ----------------------------------------------------------- */

.book {
  padding-top: 2.75rem;
}

.book__cover {
  max-width: 15rem;
}

.book__body {
  margin-top: 2.25rem;
}

.book__kicker {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.book__title {
  margin: 1rem 0 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--color-ink);
}

.book__subtitle {
  margin: .625rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--color-muted);
}

.book__prose {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-ink);
}

.book__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.125rem;
  border-top: 1px solid var(--color-rule);
  padding-top: 1.25rem;
  margin: 1.5rem 0 0;
}

.book__action {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
}

.book__action:hover {
  color: var(--color-link-hover);
}

.book__preorder {
  display: inline-block;
  padding: .6875rem 1.25rem;
  border: 1px solid var(--color-ink);
  border-radius: 2px;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.book__preorder:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

@media (min-width: 48rem) {
  .book {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
    padding-top: 4.5rem;
  }
  .book__cover { max-width: none; }
  .book__body { margin-top: 0; }
  .book__title { font-size: 2.375rem; }
  .book__subtitle { font-size: 1.1875rem; }
  .book__prose { font-size: 1.125rem; }
}

@media (min-width: 64rem) {
  .book { grid-template-columns: 18.75rem minmax(0, 1fr); column-gap: 5rem; }
  .book__title { font-size: 2.625rem; }
}

/* The cover: type on an ink block, and the only shadow on the site. */
.cover {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 300 / 440;
  padding: 1.75rem 1.5rem;
  border-radius: 3px;
  background: var(--color-ink);
  box-shadow: 0 14px 34px var(--color-shadow);
}

.cover__title {
  margin: 0;
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-on-ink);
}

.cover__stop {
  color: var(--color-mark);
}

.cover__foot {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.cover__rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-mark);
}

.cover__byline {
  font-size: .9375rem;
  color: var(--color-on-ink);
}

@media (min-width: 48rem) {
  .cover { padding: 2.5rem 2rem; }
  .cover__title { font-size: 2.375rem; }
}

/* ---- The essay index page (/newsletter/) -------------------------------- */

.essays {
  padding-top: 2.75rem;
}

.essays__title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--color-ink);
}

.essays__intro {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 44rem;
}

.essays__index {
  margin-top: 2.5rem;
}

.essays__link {
  color: var(--color-link);
  text-decoration: none;
}

.essays__link:hover {
  color: var(--color-link-hover);
}

@media (min-width: 48rem) {
  .essays { padding-top: 4.5rem; }
  .essays__title { font-size: 2.5rem; }
  .essays__intro { font-size: 1.125rem; }
  .essays__index { margin-top: 3.5rem; }
}

/* ---- A page that is one piece of prose ---------------------------------- */

.simple {
  padding-top: 2.75rem;
}

.simple__title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--color-ink);
}

.simple__rule {
  width: 3.5rem;
  border: 0;
  border-top: 2px solid var(--color-rule-heavy);
  margin: 1.25rem 0 0;
}

.simple__lede {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.simple__body {
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-ink);
}

.simple__actions {
  margin: 2rem 0 0;
  font-size: .9375rem;
  color: var(--color-muted);
}

.text-link {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-link:hover {
  color: var(--color-link-hover);
}

@media (min-width: 48rem) {
  .simple { padding-top: 4.5rem; }
  .simple__title { font-size: 2.5rem; }
  .simple__body { font-size: 1.125rem; }
}

/* ---- Colophon ----------------------------------------------------------- */

.colophon {
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}

.colophon__text {
  margin: 0;
  font-size: .8125rem;
  color: var(--color-muted);
}

.colophon__link {
  color: var(--color-link);
  text-decoration: none;
}

.colophon__link:hover {
  color: var(--color-link-hover);
}

/* ---- Prose -------------------------------------------------------------- *
 * The one place in this file with element and descendant selectors. It styles
 * HTML that comes out of the database—issue bodies and edited settings—which
 * cannot carry classes of its own. Nothing else may do this. See STYLE.md.
 *
 * It sets rhythm only, never size or color. This block sits at the foot of the
 * file, so a `.prose` rule that named a font size would beat the block class
 * beside it on the same element—every one of them is a single class, and the
 * last one wins. Size, leading, and color belong to the block: `.essay__body`,
 * `.home__promise`, `.foot__note`, and the rest each declare their own, and
 * everything below inherits down from there.
 * ------------------------------------------------------------------------- */

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
/* Book-style paragraphs (decided 2026-08-31): first-line indents, no space
   between—the essays read like pages of a book, not posts. A paragraph only
   indents when it follows another paragraph, so openings and anything after a
   heading, figure, or list start flush automatically. */
.prose p { margin: 0 0 .35em; }
.prose p + p { text-indent: 1.6em; }
/* Section headings carry a short marigold tick above (the site's short-rule
   motif) rather than a left border, so blockquotes keep the left-border
   language to themselves. Decided 2026-08-31. */
/* The drop cap: essay pages only (prose--essay), on the opening paragraph.
   Modern browsers get initial-letter (sized to sit on exactly three lines);
   the rest get the classic floated first-letter. Only fires when the body
   actually opens with a paragraph--an essay opening with a heading or figure
   gets no cap, which is correct. */
.prose--essay > p:first-child::first-letter, .prose--essay > h2:first-child + p::first-letter { -webkit-initial-letter: 3; initial-letter: 3; font-weight: 600; margin-right: .35rem; color: var(--color-ink); }
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  .prose--essay > p:first-child::first-letter, .prose--essay > h2:first-child + p::first-letter { float: left; font-size: 4.9em; line-height: .78; padding: .04em .09em 0 0; font-weight: 600; color: var(--color-ink); }
}

.prose h2 { margin: 2.5rem 0 .9rem; font: 600 1.4375rem/1.35 var(--font-serif); color: var(--color-ink); }
/* A body that OPENS on a heading sits right under the essay header's own
   rule--two stacked ticks read as clutter, so the first heading goes tickless
   and tucks up. Later headings keep their marks. */
.prose > h2:first-child { margin-top: .75rem; }
.prose > h2:first-child::before { content: none; }
.prose h2::before { content: ""; display: block; width: 34px; height: 3px; background: var(--color-mark); margin-bottom: .6rem; }
.prose h3 { margin: 2rem 0 .5rem; font: 600 1.125rem/1.4 var(--font-serif); color: var(--color-ink); }
.prose h4 { margin: 1.6rem 0 .4rem; font: 600 1rem/1.4 var(--font-serif); font-style: italic; color: var(--color-ink); }
.prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-link-hover); }
.prose ul, .prose ol { padding-left: 2.4rem; margin: .7em 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li p { margin: 0; text-indent: 0; }
.prose blockquote { margin: 1.75rem 0; padding-left: 1.125rem; border-left: 2px solid var(--color-rule); color: var(--color-secondary); font-style: italic; }
.prose hr { border: 0; border-top: 1px solid var(--color-rule); margin: 2.5rem 0; }
.prose img { max-width: 100%; height: auto; }
.prose figure { margin: 1.75rem 0; }
.prose figure img { display: block; }
.prose figcaption { margin-top: .5rem; font: 400 .875rem/1.5 var(--font-serif); font-style: italic; color: var(--color-muted); }
.prose pre { background: var(--color-page); border: 1px solid var(--color-rule); border-radius: 2px; padding: .9rem 1rem; overflow-x: auto; font-size: .875em; }
.prose code { background: var(--color-page); border: 1px solid var(--color-rule); padding: .05em .3em; border-radius: 2px; font-size: .9em; }
.prose pre code { background: none; border: 0; padding: 0; }