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

:root {
  /* Brand, from rjnestor.com */
  --color-primary:        #4A90A0;
  --color-secondary:      #7FB5BD;
  --color-accent:         #5B8C6F;
  --color-background:     #2F4F3F;
  --color-surface:        #FFFFFF;
  --color-text:           #2D3748;
  --color-text-secondary: #4A5568;
  --color-link:           #4A90A0;
  --color-link-hover:     #7FB5BD;

  /* Derived from the same hues */
  --color-page:        #F5FAFA;
  --color-raised:      #EDF5F7;
  --color-rule:        #D7E4E7;
  --color-rule-strong: #B9CFD4;
  --color-text-faint:  #6B8089;
  --color-on-dark:      #FFFFFF;
  --color-on-dark-soft: #C6DCD1;
  --color-on-dark-rule: #476A59;
  --color-on-primary:  #FFFFFF;
  --color-danger:      #B3261E;
  --color-shadow:      rgb(45 55 72 / .14);
  --color-shadow-soft: rgb(45 55 72 / .07);
  --color-focus:       #4A90A0;

  --font-display: Prata, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shell-max: 72rem;
  --measure-prose: 65ch;
  --measure-article: 72ch;
  --gutter: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:        #7FB5BD;
    --color-secondary:      #A9D3D8;
    --color-accent:         #7FB58F;
    --color-background:     #22332C;
    --color-surface:        #1E2C27;
    --color-text:           #E4EDE9;
    --color-text-secondary: #B3C7C0;
    --color-link:           #7FB5BD;
    --color-link-hover:     #A9D3D8;

    --color-page:        #16211D;
    --color-raised:      #23342E;
    --color-rule:        #32473E;
    --color-rule-strong: #446052;
    --color-text-faint:  #8FA79E;
    --color-on-dark:      #FFFFFF;
    --color-on-dark-soft: #B9D2C7;
    --color-on-dark-rule: #3C574A;
    --color-on-primary:  #12201B;
    --color-danger:      #F2B8B5;
    --color-shadow:      rgb(0 0 0 / .45);
    --color-shadow-soft: rgb(0 0 0 / .25);
    --color-focus:       #7FB5BD;
  }
}

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

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

.doc__body {
  box-sizing: border-box;
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font: 400 1rem/1.65 var(--font-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: .7rem 1.1rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: 600 .95rem/1 var(--font-body);
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* ---- Header ------------------------------------------------------------- */

.site-header {
  box-sizing: border-box;
  width: 100%;
  background: var(--color-background);
  color: var(--color-on-dark);
}

.site-header__inner {
  box-sizing: border-box;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}

.site-header__wordmark {
  font: 400 1.35rem/1.1 var(--font-display);
  letter-spacing: .01em;
  color: var(--color-on-dark);
  text-decoration: none;
}

.site-header__wordmark:hover {
  color: var(--color-secondary);
}

.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem 1.5rem;
}

.site-nav__link {
  font: 500 .92rem/1 var(--font-body);
  color: var(--color-on-dark-soft);
  text-decoration: none;
  padding-block: .25rem;
  border-bottom: 2px solid transparent;
}

.site-nav__link:hover {
  color: var(--color-on-dark);
  border-bottom-color: var(--color-secondary);
}

.site-nav__link--current {
  color: var(--color-on-dark);
  font-weight: 600;
  border-bottom-color: var(--color-secondary);
}

@media (min-width: 48rem) {
  .site-header__inner {
    flex-direction: row;
    justify-content: space-between;
    padding-block: 1.35rem;
  }

  .site-header__wordmark {
    font-size: 1.5rem;
  }
}

/* ---- Main and footer ---------------------------------------------------- */

.site-main {
  box-sizing: border-box;
  flex: 1 0 auto;
  width: 100%;
  padding-block: 2.5rem 3.5rem;
}

.site-footer {
  box-sizing: border-box;
  width: 100%;
  margin-top: auto;
  background: var(--color-background);
  color: var(--color-on-dark-soft);
}

.site-footer__inner {
  box-sizing: border-box;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 1.6rem var(--gutter) 2rem;
  text-align: center;
}

.site-footer__text {
  margin: 0;
  font: 400 .88rem/1.6 var(--font-body);
}

.site-footer__link {
  color: var(--color-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__link:hover {
  color: var(--color-secondary);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    text-align: left;
  }
}

/* ---- Shared pieces ------------------------------------------------------ */

.section-shell {
  box-sizing: border-box;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-block-start: 3rem;
}

.section-shell--narrow {
  max-width: 44rem;
}

.page-title {
  margin: 0 0 1rem;
  font: 400 clamp(2rem, 1.4rem + 2.2vw, 2.7rem)/1.15 var(--font-display);
  color: var(--color-text);
  letter-spacing: -.005em;
}

.section-title {
  margin: 0 0 1rem;
  font: 400 1.5rem/1.25 var(--font-display);
  color: var(--color-text);
}

.kicker {
  margin: 0 0 .8rem;
  font: 600 .74rem/1 var(--font-body);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.empty-note {
  margin: 0 0 1.15em;
  color: var(--color-text-secondary);
  max-width: var(--measure-prose);
}

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

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

.link-quiet {
  font: 500 .93rem/1.4 var(--font-body);
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule-strong);
}

.link-quiet:hover {
  color: var(--color-link-hover);
  border-bottom-color: var(--color-link-hover);
}

.button {
  display: inline-block;
  box-sizing: border-box;
  font: 600 .95rem/1 var(--font-body);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: .8rem 1.2rem;
  text-decoration: none;
  cursor: pointer;
}

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

.status-pill {
  display: inline-block;
  font: 600 .74rem/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-raised);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  padding: .5rem .85rem;
}

.book-cover {
  box-sizing: border-box;
  width: 100%;
  max-width: 17rem;
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: linear-gradient(158deg, var(--color-primary), var(--color-background));
  border-radius: 3px 10px 10px 3px;
  box-shadow: -4px 0 0 var(--color-on-dark-rule), 0 16px 34px var(--color-shadow);
  text-align: center;
}

.book-cover__title {
  font: 400 clamp(1.6rem, 1.1rem + 2vw, 2.4rem)/1.2 var(--font-display);
  color: var(--color-on-dark);
}

/* ---- Home: hero --------------------------------------------------------- */

.hero {
  box-sizing: border-box;
  width: 100%;
}

.hero__inner {
  box-sizing: border-box;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 2rem;
  align-items: start;
}

.hero__cover {
  display: flex;
  justify-content: center;
}

.hero__body {
  max-width: var(--measure-prose);
}

.hero__kicker {
  margin: 0 0 .8rem;
  font: 600 .74rem/1 var(--font-body);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.hero__title {
  margin: 0 0 1rem;
  font: 400 clamp(2.3rem, 1.5rem + 3vw, 3.4rem)/1.08 var(--font-display);
  color: var(--color-text);
}

.hero__intro {
  color: var(--color-text-secondary);
  font-size: 1.05rem;
}

.hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.1rem;
  margin: 1.75rem 0 0;
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
  }

  .hero__cover {
    justify-content: flex-start;
  }
}

/* ---- Home: the band under the hero -------------------------------------- */

.home-band {
  box-sizing: border-box;
  width: 100%;
  margin-top: 3.5rem;
}

.home-band__inner {
  box-sizing: border-box;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.home-band__inner--single {
  max-width: 48rem;
}

.home-band__main {
  min-width: 0;
}

.home-band__aside {
  min-width: 0;
}

.home-band__more {
  margin: 1.25rem 0 0;
}

@media (min-width: 64rem) {
  .home-band__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: 3.5rem;
  }

  .home-band__inner--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

.book-page {
  box-sizing: border-box;
  width: 100%;
}

.book-page__inner {
  box-sizing: border-box;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 2rem;
  align-items: start;
}

.book-page__cover {
  display: flex;
  justify-content: center;
}

.book-page__body {
  max-width: var(--measure-prose);
}

.book-page__title {
  margin: 0 0 1rem;
  font: 400 clamp(2.1rem, 1.4rem + 2.6vw, 3rem)/1.1 var(--font-display);
  color: var(--color-text);
}

.book-page__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.1rem;
  margin: 1.75rem 0 0;
}

@media (min-width: 64rem) {
  .book-page__inner {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: 3.5rem;
  }

  .book-page__cover {
    justify-content: flex-start;
  }
}

/* ---- A content column with a rail (newsletter index) -------------------- */

.page-layout {
  box-sizing: border-box;
  width: 100%;
}

.page-layout__inner {
  box-sizing: border-box;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.page-layout__main {
  min-width: 0;
  max-width: var(--measure-prose);
}

.page-layout__rail {
  min-width: 0;
}

.page-layout__note {
  margin: 1.25rem 0 0;
  font: 400 .92rem/1.6 var(--font-body);
  color: var(--color-text-secondary);
}

.page-layout__more {
  margin: 1.5rem 0 0;
}

@media (min-width: 64rem) {
  .page-layout__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: 3.5rem;
  }
}

/* ---- Issue lists -------------------------------------------------------- */

.issue-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.issue-list__item {
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-rule);
}

.issue-list__date {
  display: block;
  font: 500 .8rem/1.4 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: .3rem;
}

.issue-list__link {
  font: 400 1.25rem/1.3 var(--font-display);
  color: var(--color-text);
  text-decoration: none;
}

.issue-list__link:hover {
  color: var(--color-primary);
}

.issue-list__excerpt {
  margin: .45rem 0 0;
  color: var(--color-text-secondary);
  font-size: .96rem;
}

/* ---- Archive ------------------------------------------------------------ */

.archive {
  box-sizing: border-box;
  width: 100%;
}

.archive__inner {
  box-sizing: border-box;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.archive__intro {
  max-width: var(--measure-prose);
  color: var(--color-text-secondary);
}

.archive__runs {
  display: grid;
  gap: 3rem;
  margin-top: 2.5rem;
  align-items: start;
}

.run {
  min-width: 0;
}

.run__title {
  margin: 0 0 .2rem;
  font: 400 1.45rem/1.25 var(--font-display);
  color: var(--color-text);
}

.run__count {
  margin: 0;
  font: 500 .78rem/1.4 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

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

.run__item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: .1rem .5rem;
  align-items: baseline;
  padding: .7rem 0;
  border-top: 1px solid var(--color-rule);
}

.run__number {
  font: 600 .82rem/1.5 var(--font-body);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.run__link {
  font: 500 1rem/1.45 var(--font-body);
  color: var(--color-text);
  text-decoration: none;
}

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

.run__date {
  grid-column: 2;
  font: 400 .8rem/1.5 var(--font-body);
  color: var(--color-text-faint);
}

@media (min-width: 48rem) {
  .run__item {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: .5rem 1rem;
  }

  .run__date {
    grid-column: 3;
    text-align: right;
    white-space: nowrap;
  }
}

@media (min-width: 64rem) {
  .archive__runs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

/* ---- One issue ---------------------------------------------------------- */

.issue {
  box-sizing: border-box;
  width: 100%;
}

.issue__inner {
  box-sizing: border-box;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 2rem;
  align-items: start;
}

.issue__rail {
  min-width: 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-rule);
}

.issue__kicker {
  margin: 0 0 .35rem;
  font: 600 .74rem/1.4 var(--font-body);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.issue__date {
  margin: 0;
  font: 400 .9rem/1.5 var(--font-body);
  color: var(--color-text-faint);
}

.issue__provenance {
  margin: .6rem 0 0;
  font: 400 .88rem/1.6 var(--font-body);
  color: var(--color-text-secondary);
}

.issue__article {
  min-width: 0;
  max-width: var(--measure-article);
}

.issue__title {
  margin: 0 0 .6rem;
  font: 400 clamp(1.95rem, 1.3rem + 2.4vw, 2.8rem)/1.14 var(--font-display);
  color: var(--color-text);
}

.issue__subtitle {
  margin: 0 0 1.5rem;
  font: 400 1.15rem/1.5 var(--font-body);
  color: var(--color-text-secondary);
}

.issue__body {
  font-size: 1.0625rem;
  color: var(--color-text);
}

.issue__pager {
  min-width: 0;
}

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

  .issue__inner {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 3.5rem;
    row-gap: 2.5rem;
  }

  .issue__rail {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 0;
    border-bottom: 0;
    padding-top: .6rem;
  }

  .issue__article {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .issue__pager {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
}

/* ---- Pager -------------------------------------------------------------- */

.pager {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
}

.pager__link {
  min-width: 0;
  text-decoration: none;
  color: var(--color-text);
}

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

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

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

.pager__label {
  display: block;
  font: 600 .74rem/1 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: .35rem;
}

.pager__title {
  display: block;
  font: 500 1rem/1.4 var(--font-body);
}

@media (min-width: 64rem) {
  .pager {
    margin-top: 0;
    padding-top: 1.5rem;
  }
}

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

.signup {
  box-sizing: border-box;
  padding: 1.75rem 1.6rem;
  background: var(--color-raised);
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--color-shadow-soft);
}

.signup__title {
  margin: 0 0 .5rem;
  font: 400 1.3rem/1.3 var(--font-display);
  color: var(--color-text);
}

.signup__blurb {
  margin: 0 0 1.1rem;
  color: var(--color-text-secondary);
  font-size: .95rem;
}

.signup__fields {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.signup__input {
  box-sizing: border-box;
  flex: 1 1 12rem;
  min-width: 0;
  font: 400 1rem/1.2 var(--font-body);
  padding: .7rem .8rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-rule-strong);
  border-radius: 6px;
}

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

.signup__input[disabled] {
  opacity: .55;
}

.signup__button {
  flex: 0 0 auto;
  box-sizing: border-box;
  font: 600 .95rem/1 var(--font-body);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: .8rem 1.2rem;
  cursor: pointer;
}

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

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

.signup__button[disabled] {
  opacity: .6;
  cursor: default;
  background: var(--color-primary);
}

.signup__note {
  margin: .8rem 0 0;
  min-height: 1.3em;
  font: 400 .88rem/1.5 var(--font-body);
  color: var(--color-text-faint);
}

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

.signup__note.is-ok {
  color: var(--color-text);
}

.signup__done {
  margin: 0;
}

.signup__done-text {
  margin: 0;
  font: 400 1rem/1.6 var(--font-body);
  color: var(--color-text);
}

/* ---- Stop, welcome, 404, and anything else that is one card ------------- */

.simple-page {
  box-sizing: border-box;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.simple-page__card {
  box-sizing: border-box;
  padding: 2rem 1.75rem 2.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--color-shadow-soft);
  text-align: center;
}

.simple-page__title {
  margin: 0 0 1rem;
  font: 400 clamp(1.8rem, 1.3rem + 1.8vw, 2.4rem)/1.15 var(--font-display);
  color: var(--color-text);
}

.simple-page__body {
  color: var(--color-text-secondary);
  text-align: left;
}

.simple-page__lede {
  margin: 0 0 1.15em;
  color: var(--color-text-secondary);
}

.simple-page__actions {
  margin: 1.5rem 0 0;
}

@media (min-width: 48rem) {
  .simple-page__card {
    padding: 2.75rem 2.5rem 3rem;
  }
}

/* ==========================================================================
   THE ONE EXCEPTION.

   Everything below styles issue bodies and edited settings — HTML that comes
   out of the database and cannot carry classes. It is the only place in this
   file with element and descendant selectors, and it stays small.
   ========================================================================== */

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { margin: 2.25rem 0 .75rem; font: 400 1.5rem/1.25 var(--font-display); color: var(--color-text); }
.prose h3 { margin: 1.9rem 0 .5rem; font: 400 1.2rem/1.3 var(--font-display); color: var(--color-text); }
.prose h4 { margin: 1.5rem 0 .5rem; font: 600 1rem/1.35 var(--font-body); color: var(--color-text); }
.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: 1.4rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.1rem; border-left: 3px solid var(--color-secondary); color: var(--color-text-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; border-radius: 8px; }
.prose figcaption { margin-top: .5rem; font: 400 .85rem/1.5 var(--font-body); color: var(--color-text-faint); }
.prose pre { background: var(--color-raised); border: 1px solid var(--color-rule); border-radius: 8px; padding: .9rem 1rem; overflow-x: auto; font-size: .88em; }
.prose code { background: var(--color-raised); padding: .1em .3em; border-radius: 3px; font-size: .9em; }
.prose pre code { background: none; padding: 0; }