/* Canned Emails — the guides. Loaded after style.css, on blog pages only.
 *
 * The front page is monospace, uppercase and dark-mode-aware on purpose: the
 * drafts should look like text you're about to send. None of that suits a
 * 2,500-word guide, so this file overrides it.
 *
 *   Light only.       style.css follows the system dark mode. These pages
 *                     don't, because they're read a few hundred words at a
 *                     time and paper wins that job.
 *   Serif body.       At 19px with a 38rem measure, about 62 characters a
 *                     line, which is inside the comfortable range.
 *   Sans headings.    Sentence case, not the display face in caps. Caps cost
 *                     reading speed, and the headline is the one line
 *                     everybody reads.
 *   No new fonts.     Both stacks are whatever the reader's machine has.
 *                     Archivo Black stays on the wordmark and IBM Plex Mono
 *                     on code; nothing else downloads.
 */

/* ---------------------------------------------------------------- tokens */
/* Plain :root, so it wins over the prefers-color-scheme block in style.css
   in both directions -- same specificity, later stylesheet. */
:root {
  color-scheme: light;

  --paper:  #f4f5f0;
  --card:   #fbfbf8;
  --ink:    #191b18;
  --muted:  #565b53;
  --rule:   #d6dacf;
  --stamp:  #a8341f;

  --serif: ui-serif, Charter, 'Bitstream Charter', 'Iowan Old Style',
           'Palatino Linotype', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  --measure-prose: 38rem;
}

/* An anchored heading shouldn't land flush against the top of the window. */
[id] { scroll-margin-top: 1.5rem; }

/* ---------------------------------------------------------------- column */
/* The front page lives in a 44rem column. A guide needs more than that: the
   comparison tables have up to six columns and cramming them into the reading
   measure wraps every cell onto three lines. So the page column is 52rem, the
   reading measure stays at 38rem inside it, and only the tables use the rest.
   Everything is flush left against the same edge, so the headline, the prose
   and the tables all start in the same place. */
.is-blog .topbar,
.is-blog main,
.is-blog .colophon { max-width: 52rem; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.topbar a { color: var(--muted); text-decoration: none; }
.topbar a:hover { color: var(--stamp); text-decoration: underline; }
.topbar .wordmark {
  font-family: var(--display);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.topbar-sep { margin: 0 0.5rem; color: var(--rule); }
.topbar-here { color: var(--ink); }

/* ------------------------------------------------------------ post header */
.post-head {
  /* Flush left in the 52rem column, like the prose and the tables. Centering
     it inside a wider column than the front page's would push the headline
     off the edge everything else starts at. */
  max-width: 52rem;
  margin: 0;
  padding: clamp(2.25rem, 7vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.25rem);
}

.post-head .eyebrow {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 1rem;
}
.post-head .eyebrow a { color: var(--muted); }
.post-head .eyebrow a:hover { color: var(--stamp); }

.post-head h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.875rem, 4.5vw, 2.625rem);
  line-height: 1.12;
  letter-spacing: -0.021em;
  text-transform: none;
  text-wrap: balance;
  margin: 0 0 1rem;
  max-width: 30ch;
}

.post-head .lede {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: var(--measure-prose);
  color: var(--muted);
}

/* ------------------------------------------------------ table of contents */
/* Long guides get jump links. They're plain anchors, so they work with
   JavaScript off, and they give every h2 something pointing at it. */
.toc {
  max-width: var(--measure-prose);
  margin: 0 0 2.5rem;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9375rem;
}

.toc-title {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: 0.3em; }
.toc li::marker { color: var(--muted); }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--stamp); text-decoration: underline; }

/* ----------------------------------------------------------------- prose */
.prose {
  max-width: var(--measure-prose);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

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

/* Headings are sans and sentence case, on a scale wide enough that h2 and h3
   are told apart at a glance while scrolling. */
.prose h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 2.5em 0 0.7em;
  padding-top: 0.85em;
  border-top: 1px solid var(--rule);
  text-wrap: balance;
}

.prose h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2em 0 0.5em;
  text-wrap: balance;
}

.prose h4 {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.75em 0 0.5em;
}

.prose a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--stamp);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--stamp); }

.prose strong { font-weight: 700; }

.prose ul, .prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.4em;
}
.prose li { margin-bottom: 0.55em; }
.prose li::marker { color: var(--muted); }

.prose blockquote {
  margin: 1.75em 0;
  padding: 0.1em 0 0.1em 1.25em;
  border-left: 3px solid var(--stamp);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Code stays monospace, the one place the front page's voice is also the
   right voice. */
.prose code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 0.05em 0.3em;
}

.prose pre {
  margin: 1.75em 0;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}
.prose pre code {
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
}

.prose hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5em 0;
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.75em 0;
  border: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- tables */
/* The comparison tables are wider than the reading measure, so the wrapper
   scrolls and the page never does. */
.table-wrap {
  overflow-x: auto;
  /* Wider than .prose on purpose: this is the one block that gets the whole
     column. It scrolls inside itself when even that isn't enough. */
  width: 100%;
  margin: 1.75em 0;
}

.prose table {
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.table-wrap table { min-width: 100%; }

.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.6em 1.1em 0.6em 0;
  border-bottom: 1px solid var(--rule);
}
.prose th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-width: 2px;
  /* Headers wrap. A nowrap header like "STARTING PRICE (AUG 2026)" takes the
     width away from the column that actually has the sentences in it. */
  white-space: normal;
}
.prose tbody tr:last-child td { border-bottom: 0; }

.ta-right { text-align: right; }
.ta-center { text-align: center; }
.ta-left { text-align: left; }

/* ------------------------------------------------------------- post index */
.postlist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 44rem;
  border-top: 1px solid var(--rule);
}

.postlist-item { border-bottom: 1px solid var(--rule); }

.postlist-item a {
  display: block;
  padding: 1.35rem 0;
  color: inherit;
  text-decoration: none;
}

.postlist-item time {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.postlist-title {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.4375rem;
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.postlist-blurb {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: var(--measure-prose);
}

.postlist-item a:hover .postlist-title { color: var(--stamp); }

/* --------------------------------------------------------- tail of a post */
/* Related guides beat previous/next here: the guides are evergreen and they
   all went up the same day, so a chronological neighbour means nothing. */
.related {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure-prose);
}

.related-title {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.related ul { list-style: none; margin: 0; padding: 0; }
.related li { border-top: 1px solid var(--rule); }
.related li:first-child { border-top: 0; }

.related a {
  display: block;
  padding: 0.8rem 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
.related a:hover { color: var(--stamp); text-decoration: underline; }

/* --------------------------------------------------------------- colophon */
.is-blog .colophon { font-family: var(--sans); }

/* ----------------------------------------------------------------- print */
@media print {
  .topbar, .related, .toc { display: none; }
  .prose { max-width: none; font-size: 11pt; }
  .prose a { text-decoration-color: #999; }
  .prose h2 { break-after: avoid; }
}