/* ============================================================
   LETTERS - Substack-style archive (/letters/) and reading layout
   ------------------------------------------------------------
   Part of the Letters Connect plugin. Do NOT paste this into
   Appearance > Customize > Additional CSS - the plugin loads it
   itself, only on the Letters page and on single letters, and
   switching the plugin off takes it with it.

   It is printed at wp_head priority 110, i.e. AFTER the Customizer's
   Additional CSS, which is where the hand-pasted version used to sit.
   Every rule is also written to win on specificity alone, so the
   order is belt and braces rather than the only thing holding it up.
   To edit: change this file. To override a value from Additional CSS
   without touching the plugin, note that yours now prints FIRST and
   so loses any tie - give your rule higher specificity (one extra
   class) or !important and it will take.

   Pairs with the "Letters Connect" snippet, which outputs this markup:
     /letters/        [mr_letters] -> .mr-letters ...
     single letters   body.mr-letter-single, content wrapped in .mr-letter

   Same system as the rest of the site - no new fonts, no new colours:
     Space Grotesk  titles and headings
     Inter          reading text
     Courier Prime  labels, dates, buttons, captions
     --kc-* tokens  from :root

   What is borrowed from Substack is the LAYOUT: a narrow 680px reading
   column, title > subtitle > byline row between hairlines, generous
   paragraph rhythm, and a subscribe box after every letter.

   WHY THE SELECTORS LOOK HEAVY
   The inner-page card rules earlier in this stylesheet are written as
   "body:not(.home) #left-content p { ... !important }" - one ID plus
   !important - and the mobile pass raises paragraphs to 1-2-2. To win
   without an arms race, every rule here starts with a body class, the
   #main ID (present on every template, unlike #left-content) and a
   wrapper class, which lands at 1-3-x and beats them regardless of order.
   ============================================================ */


/* ---- Local tokens -------------------------------------------------
   Long-form text is set a touch softer than --kc-text: pure #EEF2F6
   on ink is ~15:1 and glares over a 1,500-word letter. 0.86 still
   measures ~12:1. Anything smaller than 16px stays at --kc-text-muted
   (0.55, ~5.6:1) or brighter so it clears WCAG AA. */
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) {
  --mr-read: rgba(238,242,246,0.86);
  --mr-soft: rgba(238,242,246,0.66);
  --mr-well: #0C0E11;            /* image wells - same as .kc-letter-thumb */
  --mr-radius: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--kc-text);
}


/* ============================================================
   SHARED PIECES - labels and buttons (archive + single)
   ============================================================ */

body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) .mr-tag {
  display: inline-block;
  margin: 0;
  font-family: 'Courier Prime', monospace !important;
  font-weight: 700;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-accent) !important;
}

/* Source ("Substack") and lock ("Paid" / "Patrons") pills */
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) :is(.mr-src, .mr-lock) {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(238,242,246,0.16);
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-text-muted);
  white-space: nowrap;
}
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) .mr-lock {
  border-color: rgba(38,154,213,0.45);
  color: var(--kc-accent);
}
/* Padlock drawn with a CSS mask, so it takes the text colour and needs
   no icon font or extra request */
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) .mr-lock::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 10px;
  margin-right: 5px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath fill-rule='evenodd' d='M3 6.5V4.5a3 3 0 0 1 6 0v2h.5A1.5 1.5 0 0 1 11 8v5.5A1.5 1.5 0 0 1 9.5 15h-7A1.5 1.5 0 0 1 1 13.5V8a1.5 1.5 0 0 1 1.5-1.5H3zm1.6 0h2.8v-2a1.4 1.4 0 0 0-2.8 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath fill-rule='evenodd' d='M3 6.5V4.5a3 3 0 0 1 6 0v2h.5A1.5 1.5 0 0 1 11 8v5.5A1.5 1.5 0 0 1 9.5 15h-7A1.5 1.5 0 0 1 1 13.5V8a1.5 1.5 0 0 1 1.5-1.5H3zm1.6 0h2.8v-2a1.4 1.4 0 0 0-2.8 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Buttons - same recipe as the homepage .kc-btn and newsletter button */
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) .mr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) a.mr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                   /* touch target */
  padding: 12px 22px;
  border-radius: 10px;
  font-family: 'Courier Prime', monospace !important;
  font-weight: 700;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) a.mr-btn--primary {
  background: var(--kc-accent);
  border: 1px solid var(--kc-accent);
  color: var(--kc-ink) !important;
}
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) a.mr-btn--primary:is(:hover, :focus-visible) {
  background: var(--kc-accent-hover);
  border-color: var(--kc-accent-hover);
  color: var(--kc-ink) !important;
  transform: scale(1.05);
}
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) a.mr-btn--ghost {
  background: transparent;
  border: 1px solid rgba(238,242,246,0.18);
  color: var(--kc-text) !important;
}
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) a.mr-btn--ghost:is(:hover, :focus-visible) {
  border-color: var(--kc-accent);
  color: var(--kc-accent) !important;
}

/* One visible focus ring for every link in both views */
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) a:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Date / reading-time line */
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) .mr-letters-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0 !important;
  font-family: 'Courier Prime', monospace !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em;
  color: var(--kc-text-muted) !important;
}
body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) .mr-dot {
  margin: 0 8px;
  opacity: 0.7;
}


/* ============================================================
   ARCHIVE - /letters/  ([mr_letters])
   The page title ("LETTERS") stays the theme's own h1 in the card,
   capitalised like every other page title.
   ============================================================ */

body.mr-letters-page #main .entry-header {
  margin-bottom: 14px;
}

body.mr-letters-page #main .mr-letters {
  margin-top: 4px;
}

/* ---- Intro: the publication line + subscribe buttons ---- */
body.mr-letters-page #main .mr-letters .mr-letters-intro {
  max-width: 640px;
  margin: 0 0 36px;
}
body.mr-letters-page #main .mr-letters p.mr-letters-desc {
  margin: 0 0 20px;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--mr-soft) !important;
}

/* ---- Source tabs (only shown once both Substack and Patreon have posts) ---- */
body.mr-letters-page #main .mr-letters .mr-letters-tabs {
  display: flex;
  gap: 24px;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--kc-line);
  overflow-x: auto;
  scrollbar-width: none;
}
body.mr-letters-page #main .mr-letters .mr-letters-tabs a {
  flex-shrink: 0;
  margin-bottom: -1px;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kc-text-muted) !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}
body.mr-letters-page #main .mr-letters .mr-letters-tabs a:hover {
  color: var(--kc-text) !important;
}
body.mr-letters-page #main .mr-letters .mr-letters-tabs a.is-active {
  color: var(--kc-text) !important;
  border-bottom-color: var(--kc-accent);
}

/* ---- Kicker row above each title: tag + source + lock ---- */
body.mr-letters-page #main .mr-letters p.mr-letters-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  line-height: 1 !important;
}

/* ---- Featured (newest) letter ----
   The whole card is one link: the title's ::after is stretched over the
   card, so there is a single tab stop and a single announced link. */
body.mr-letters-page #main .mr-letters .mr-letters-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin: 0 0 12px;
  padding: 0 0 36px;
}
body.mr-letters-page #main .mr-letters .mr-letters-featured--text {
  grid-template-columns: minmax(0, 1fr);
  max-width: 680px;
}
body.mr-letters-page #main .mr-letters .mr-letters-featured-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--mr-radius);
  overflow: hidden;
  background: var(--mr-well);
  border: 1px solid var(--kc-line);
}
body.mr-letters-page #main .mr-letters .mr-letters-featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.35s ease;
}
body.mr-letters-page #main .mr-letters .mr-letters-featured:hover .mr-letters-featured-media img {
  transform: scale(1.03);
}
body.mr-letters-page #main .mr-letters h2.mr-letters-featured-title {
  margin: 0 0 12px;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em;
  text-transform: none;
}
body.mr-letters-page #main .mr-letters .mr-letters-featured-title a {
  color: var(--kc-text) !important;
  text-decoration: none;
}
body.mr-letters-page #main .mr-letters .mr-letters-featured-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
body.mr-letters-page #main .mr-letters .mr-letters-featured:hover .mr-letters-featured-title a {
  color: var(--kc-accent) !important;
}
body.mr-letters-page #main .mr-letters p.mr-letters-featured-sub {
  margin: 0 0 14px;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--mr-soft) !important;
}

/* ---- The list ---- */
body.mr-letters-page #main .mr-letters ul.mr-letters-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.mr-letters-page #main .mr-letters li.mr-letters-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 28px;
  align-items: center;
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--kc-line);
}
body.mr-letters-page #main .mr-letters li.mr-letters-row--text {
  grid-template-columns: minmax(0, 1fr);
}
body.mr-letters-page #main .mr-letters li.mr-letters-row:last-child {
  border-bottom: 1px solid var(--kc-line);
}
body.mr-letters-page #main .mr-letters h3.mr-letters-row-title {
  margin: 0 0 6px;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700;
  font-size: 20px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
  text-transform: none;
}
body.mr-letters-page #main .mr-letters .mr-letters-row-title a {
  color: var(--kc-text) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
body.mr-letters-page #main .mr-letters .mr-letters-row-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
body.mr-letters-page #main .mr-letters li.mr-letters-row:hover .mr-letters-row-title a {
  color: var(--kc-accent) !important;
}
body.mr-letters-page #main .mr-letters p.mr-letters-row-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;              /* two lines, like Substack's archive */
  overflow: hidden;
  max-width: 60ch;
  margin: 0 0 10px;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: var(--mr-soft) !important;
}
body.mr-letters-page #main .mr-letters .mr-letters-row-thumb {
  width: 168px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mr-well);
  border: 1px solid var(--kc-line);
}
body.mr-letters-page #main .mr-letters .mr-letters-row-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ---- Paging + empty state ---- */
body.mr-letters-page #main .mr-letters .mr-letters-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
}
body.mr-letters-page #main .mr-letters .mr-letters-pager-status {
  margin: 0 auto;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--kc-text-muted);
}
body.mr-letters-page #main .mr-letters .mr-letters-empty p {
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--kc-line);
  color: var(--mr-soft) !important;
}


/* ============================================================
   SINGLE LETTER
   ============================================================ */

/* ---- Title block: the theme's own header, pulled into the column ---- */
body.mr-letter-single #main .entry-header {
  max-width: 680px;
  margin: 0 auto;
  padding-top: 6px;
}
body.mr-letter-single #main .entry-header::before {
  content: "Letters";
  display: block;
  margin-bottom: 14px;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-accent);
}
/* Sentence case on purpose: page titles are caps site-wide, but a letter
   title is a headline, and it matches the homepage Letters card, which
   has always shown letter titles in sentence case. */
body.mr-letter-single #main .entry-header .entry-title {
  margin: 0 0 14px;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 4.2vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em;
  text-transform: none !important;
  color: var(--kc-text) !important;
}

/* OPTIONAL - the byline below replaces the theme's "posted on / by" and
   category lines. Delete these two rules to bring them back. */
body.mr-letter-single #main .entry-header .entry-meta,
body.mr-letter-single #main footer.entry-footer {
  display: none !important;
}

/* ---- The reading column ---- */
body.mr-letter-single #main .mr-letter {
  max-width: 680px;
  margin: 0 auto;
}

body.mr-letter-single #main .mr-letter p.mr-letter-sub {
  margin: 0 0 24px;
  font-size: 20px !important;
  line-height: 1.45 !important;
  letter-spacing: -0.005em;
  color: var(--mr-soft) !important;
}

/* ---- Byline row, between hairlines (Substack's signature detail) ---- */
body.mr-letter-single #main .mr-letter .mr-letter-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin: 0 0 36px;
  padding: 14px 0;
  border-top: 1px solid var(--kc-line);
  border-bottom: 1px solid var(--kc-line);
}
body.mr-letter-single #main .mr-letter img.mr-letter-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mr-well);
  border: 1px solid var(--kc-line);
}
body.mr-letter-single #main .mr-letter .mr-letter-byline-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 220px;
  min-width: 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-author {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-text);
}
body.mr-letter-single #main .mr-letter .mr-letter-byline .mr-letters-meta {
  row-gap: 6px;
}
body.mr-letter-single #main .mr-letter .mr-letter-byline :is(.mr-src, .mr-lock) {
  padding: 3px 8px;
  font-size: 10px;
}
body.mr-letter-single #main .mr-letter .mr-letter-byline .mr-lock {
  margin-left: 6px;
}
body.mr-letter-single #main .mr-letter a.mr-btn.mr-letter-source-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 10px 14px;
  font-size: 12px !important;
}

body.mr-letter-single #main .mr-letter .mr-letter-cover {
  margin: 0 0 36px;
  border-radius: var(--mr-radius);
  overflow: hidden;
  border: 1px solid var(--kc-line);
}
body.mr-letter-single #main .mr-letter .mr-letter-cover img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Body copy ---- */
/* Long pasted URLs would otherwise run past the card edge on phones
   (the card clips them, so they vanish rather than scroll). */
body.mr-letter-single #main .mr-letter .mr-letter-body {
  overflow-wrap: break-word;
}
body.mr-letter-single #main .mr-letter .mr-letter-body a {
  overflow-wrap: anywhere;
}
body.mr-letter-single #main .mr-letter .mr-letter-body :is(p, li) {
  font-family: 'Inter', sans-serif;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: var(--mr-read) !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-body p {
  margin: 0 0 1.4em;
}
body.mr-letter-single #main .mr-letter .mr-letter-body strong {
  font-weight: 700;
  color: var(--kc-text);
}

body.mr-letter-single #main .mr-letter .mr-letter-body :is(h2, h3, h4, h5, h6) {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--kc-text) !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-body h2 {
  margin: 1.9em 0 0.6em;
  font-size: 28px !important;
  line-height: 1.2 !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-body h3 {
  margin: 1.8em 0 0.55em;
  font-size: 23px !important;
  line-height: 1.25 !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-body h4 {
  margin: 1.6em 0 0.45em;
  font-size: 19px !important;
  line-height: 1.35 !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-body :is(h5, h6) {
  margin: 1.5em 0 0.4em;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* Links: underlined like Substack, in the brand blue.
   :not(.mr-btn) matters - without it this rule ties with the button
   rule on specificity, wins on order, and paints button text blue on
   the blue button. */
body.mr-letter-single #main .mr-letter .mr-letter-body a:not(.mr-btn):not([class*="patreon"]) {
  color: var(--kc-accent) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(38,154,213,0.45);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
body.mr-letter-single #main .mr-letter .mr-letter-body a:not(.mr-btn):not([class*="patreon"]):hover {
  color: var(--kc-accent-hover) !important;
  text-decoration-color: currentColor;
}
body.mr-letter-single #main .mr-letter .mr-letter-body a.mr-mention {
  font-weight: 600;
  text-decoration: none;
}

/* Lists */
body.mr-letter-single #main .mr-letter .mr-letter-body :is(ul, ol) {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
}
body.mr-letter-single #main .mr-letter .mr-letter-body li {
  margin: 0.35em 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-body li p {
  margin: 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-body li::marker {
  color: var(--kc-text-muted);
}

/* Quotes */
body.mr-letter-single #main .mr-letter .mr-letter-body blockquote {
  margin: 1.8em 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--kc-accent);
}
body.mr-letter-single #main .mr-letter .mr-letter-body blockquote p {
  color: var(--kc-text) !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-body blockquote > :last-child {
  margin-bottom: 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-body blockquote.mr-pullquote {
  margin: 2.2em 0;
  padding: 28px 0;
  border-left: 0;
  border-top: 1px solid var(--kc-line);
  border-bottom: 1px solid var(--kc-line);
  text-align: center;
}
body.mr-letter-single #main .mr-letter .mr-letter-body blockquote.mr-pullquote p {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
}

/* Images: rounded, hairline, caption in the utility face */
body.mr-letter-single #main .mr-letter .mr-letter-body figure.mr-figure {
  margin: 2em 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-body figure :is(img) {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--kc-line);
  background: var(--mr-well);
}
body.mr-letter-single #main .mr-letter .mr-letter-body figcaption {
  margin-top: 10px;
  font-family: 'Courier Prime', monospace;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--kc-text-muted) !important;
}
/* Images Substack marked "wide" step out of the column on big screens.
   The card is ~960px inside, so a 60px step each side still clears it. */
@media (min-width: 1100px) {
  body.mr-letter-single #main .mr-letter .mr-letter-body figure.mr-figure--wide {
    width: calc(100% + 120px);
    margin-left: -60px;
    margin-right: -60px;
  }
}
body.mr-letter-single #main .mr-letter .mr-letter-body figure.mr-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 2em 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-body figure.mr-gallery img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}
body.mr-letter-single #main .mr-letter .mr-letter-body figure.mr-gallery figcaption {
  grid-column: 1 / -1;
}

/* Video embeds (YouTube / Vimeo). Tweets size themselves, so only the
   video players get the 16:9 box. */
body.mr-letter-single #main .mr-letter .mr-letter-body .mr-embed {
  margin: 2em 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-body .mr-embed :is(iframe[src*="youtube"], iframe[src*="vimeo"]) {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}

/* Things that only work on Substack (polls, uploaded video) become a
   clear, quiet link rather than an empty gap */
body.mr-letter-single #main .mr-letter .mr-letter-body .mr-embed-note {
  margin: 1.8em 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-body .mr-embed-note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px dashed rgba(238,242,246,0.22);
  border-radius: 10px;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kc-text) !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-body .mr-embed-note a:hover {
  border-color: var(--kc-accent);
  color: var(--kc-accent) !important;
}

/* Embedded Substack posts */
body.mr-letter-single #main .mr-letter .mr-letter-body p.mr-linkcard {
  margin: 1.8em 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-body .mr-linkcard a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--kc-line);
  border-radius: 12px;
  background: rgba(238,242,246,0.03);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
body.mr-letter-single #main .mr-letter .mr-letter-body .mr-linkcard a:hover {
  border-color: rgba(38,154,213,0.5);
}
body.mr-letter-single #main .mr-letter .mr-letter-body .mr-linkcard-kicker {
  display: block;
  margin-bottom: 6px;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-accent);
}
body.mr-letter-single #main .mr-letter .mr-letter-body .mr-linkcard-title {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--kc-text);
}

/* Buttons the author placed inside the letter */
body.mr-letter-single #main .mr-letter .mr-letter-body p.mr-btnrow {
  margin: 1.8em 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-body p.mr-cta-caption {
  margin: 1.8em 0 0.7em;
  color: var(--mr-soft) !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-body p.mr-cta-caption + p.mr-btnrow {
  margin-top: 0;
}

/* Rules, code */
body.mr-letter-single #main .mr-letter .mr-letter-body hr {
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid var(--kc-line);
}
body.mr-letter-single #main .mr-letter .mr-letter-body pre {
  margin: 1.6em 0;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--kc-line);
  background: var(--mr-well);
  color: var(--kc-text);
  font-size: 14px;
  line-height: 1.6;
}
body.mr-letter-single #main .mr-letter .mr-letter-body code {
  font-family: 'Courier Prime', monospace;
  font-size: 0.92em;
}
body.mr-letter-single #main .mr-letter .mr-letter-body :not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: rgba(238,242,246,0.08);
}

/* Footnotes */
body.mr-letter-single #main .mr-letter .mr-letter-body a.footnote-anchor {
  margin-left: 1px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
  text-decoration: none;
}
body.mr-letter-single #main .mr-letter .mr-letter-body .footnote {
  display: flex;
  gap: 10px;
  margin: 0 0 0.8em;
}
body.mr-letter-single #main .mr-letter .mr-letter-body :not(.footnote) + .footnote {
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--kc-line);
}
body.mr-letter-single #main .mr-letter .mr-letter-body a.footnote-number {
  flex: 0 0 auto;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
body.mr-letter-single #main .mr-letter .mr-letter-body .footnote-content p {
  margin: 0 0 0.5em;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--mr-soft) !important;
}

/* ---- Paid Substack posts: free preview stays fully readable ----
   No fade over the text above this panel: that gradient painted over
   already-free content, making it harder to read for no access-control
   reason (a gate that isn't actually gating anything). Removed rather
   than lightened. */
body.mr-letter-single #main .mr-letter .mr-letter-paywall {
  position: relative;
  margin: 8px 0 40px;
  padding: 28px;
  border: 1px solid var(--kc-line);
  border-radius: 16px;
  background: var(--kc-paper);
}
body.mr-letter-single #main .mr-letter .mr-letter-paywall::before {
  content: none;
}
body.mr-letter-single #main .mr-letter p.mr-letter-paywall-title {
  margin: 8px 0 6px;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700;
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: var(--kc-text) !important;
}
body.mr-letter-single #main .mr-letter p.mr-letter-paywall-text {
  margin: 0 0 18px;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: var(--mr-soft) !important;
}

/* ---- After the letter: subscribe box, origin line, back link ---- */
body.mr-letter-single #main .mr-letter .mr-letter-foot {
  margin-top: 48px;
}
/* The paywall panel already ends the letter; don't stack two big gaps */
body.mr-letter-single #main .mr-letter .mr-letter-paywall + .mr-letter-foot {
  margin-top: 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-cta {
  margin: 0 0 24px;
  padding: 28px;
  border: 1px solid var(--kc-line);
  border-radius: 16px;
  background: var(--kc-paper);
}
body.mr-letter-single #main .mr-letter p.mr-letter-cta-title {
  margin: 8px 0 8px;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700;
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: var(--kc-text) !important;
}
body.mr-letter-single #main .mr-letter p.mr-letter-cta-text {
  max-width: 52ch;
  margin: 0 0 18px;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--mr-soft) !important;
}
body.mr-letter-single #main .mr-letter p.mr-letter-origin {
  margin: 0 0 12px;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--mr-soft) !important;
}
body.mr-letter-single #main .mr-letter p.mr-letter-back {
  margin: 0;
}
body.mr-letter-single #main .mr-letter .mr-letter-back a {
  display: inline-block;
  padding: 10px 0;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kc-text) !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-back a:hover {
  color: var(--kc-accent) !important;
}

/* ---- Patreon's lock banner, sat on the dark card ----
   The plugin paints light-theme hairlines (#f0f0f0). Its orange button
   is left alone on purpose: people recognise it as Patreon's. */
body.mr-letter-single #main .mr-letter .mr-letter-body .patreon-campaign-banner {
  max-width: 100%;
  background: transparent;
  color: var(--kc-text);
}
body.mr-letter-single #main .mr-letter .mr-letter-body :is(.patreon-locked-content-message, .patreon-valid-patron-message) {
  border-color: var(--kc-line) !important;
}
body.mr-letter-single #main .mr-letter .mr-letter-body :is(.patreon-text-over-button, .patreon-text-under-button) {
  font-family: 'Inter', sans-serif;
  color: var(--mr-soft);
}
body.mr-letter-single #main .mr-letter .mr-letter-body .patreon-responsive-button-wrapper {
  border-radius: 10px !important;
}


/* ============================================================
   SITEWIDE FIX - Patreon's "Unlock with Patreon" button text
   ------------------------------------------------------------
   Not letters-only, and it is here because the Patreon connection is
   what surfaces it. The inner-page card rule
     body:not(.home) #left-content a { color: var(--kc-accent) !important }
   carries an ID, so it beats the Patreon plugin's own
     .patreon-responsive-button { color: #fff !important }
   and the button text turns brand blue on Patreon orange - hard to
   read - on ANY locked page or comic, not just letters. The :is() list
   adds one pseudo-class so this also outranks the card's :hover rule.

   The fix below does NOT use white: on the plugin's coral background
   (#F96854) white text measures ~2.9:1, which fails WCAG's 4.5:1
   minimum for normal text just as badly as the blue it replaces - it
   only looked fixed because it matched the vendor's own button in
   screenshots. Dark ink (--kc-ink, #14171B) on that same coral
   measures ~6.1:1 and passes. VERIFY ON STAGING: this is calculated
   against the coral this file assumes; confirm the Patreon plugin's
   actual rendered background (default/hover/focus/disabled) matches
   before relying on it, and re-check if a plugin update changes it.
   ============================================================ */
body:not(.home) :is(#left-content, #comic) a.patreon-responsive-button:is(:link, :visited, :hover, :focus, :active) {
  color: var(--kc-ink) !important;
  text-decoration: none !important;
}


/* ============================================================
   TABLET AND PHONE
   Placed last so these win on source order as well as specificity.
   ============================================================ */
@media (max-width: 768px) {

  /* Archive */
  body.mr-letters-page #main .mr-letters .mr-letters-intro { margin-bottom: 28px; }
  body.mr-letters-page #main .mr-letters p.mr-letters-desc { font-size: 15.5px !important; }
  body.mr-letters-page #main .mr-letters .mr-letters-featured {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-bottom: 28px;
  }
  body.mr-letters-page #main .mr-letters h2.mr-letters-featured-title { font-size: clamp(23px, 6.2vw, 28px) !important; }
  body.mr-letters-page #main .mr-letters p.mr-letters-featured-sub { font-size: 15px !important; }
  body.mr-letters-page #main .mr-letters li.mr-letters-row {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 16px;
    align-items: start;
    padding: 20px 0;
  }
  body.mr-letters-page #main .mr-letters .mr-letters-row-thumb {
    width: 104px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
  }
  body.mr-letters-page #main .mr-letters h3.mr-letters-row-title { font-size: 17.5px !important; }
  body.mr-letters-page #main .mr-letters p.mr-letters-row-sub { font-size: 14px !important; }

  /* Single */
  body.mr-letter-single #main .entry-header .entry-title { font-size: clamp(27px, 7.4vw, 34px) !important; }
  body.mr-letter-single #main .mr-letter p.mr-letter-sub { font-size: 17.5px !important; margin-bottom: 20px; }
  body.mr-letter-single #main .mr-letter .mr-letter-byline { margin-bottom: 28px; }
  body.mr-letter-single #main .mr-letter .mr-letter-body :is(p, li) {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
  body.mr-letter-single #main .mr-letter .mr-letter-body h2 { font-size: 23px !important; }
  body.mr-letter-single #main .mr-letter .mr-letter-body h3 { font-size: 20px !important; }
  body.mr-letter-single #main .mr-letter .mr-letter-body h4 { font-size: 18px !important; }
  body.mr-letter-single #main .mr-letter .mr-letter-body figure.mr-figure { margin: 1.6em 0; }
  body.mr-letter-single #main .mr-letter :is(.mr-letter-cta, .mr-letter-paywall) { padding: 22px; }
  body.mr-letter-single #main .mr-letter .mr-letter-foot { margin-top: 36px; }

  /* Touch targets: everything tappable reaches 44px on phones and tablets.
     (The byline button is a compact 38px on desktop, where a mouse is used.) */
  body.mr-letter-single #main .mr-letter a.mr-btn.mr-letter-source-btn { min-height: 44px; }
  body.mr-letters-page #main .mr-letters .mr-letters-tabs a,
  body.mr-letter-single #main .mr-letter .mr-letter-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Phones: buttons stack full-width - the same move the homepage
   newsletter form makes at this width */
@media (max-width: 560px) {
  body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) .mr-actions {
    flex-direction: column;
    gap: 10px;
  }
  body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) .mr-actions a.mr-btn {
    width: 100%;
  }
  /* Long labels ("Keep reading on Substack") are wider than a 360px
     phone's panel in a monospace face, so they may wrap here */
  body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) a.mr-btn {
    padding-left: 16px;
    padding-right: 16px;
    line-height: 1.25 !important;
    text-align: center;
    white-space: normal;
  }
  body.mr-letter-single #main .mr-letter :is(.mr-letter-cta, .mr-letter-paywall) {
    padding: 20px;
  }
  body.mr-letter-single #main .mr-letter a.mr-btn.mr-letter-source-btn {
    width: 100%;
  }
  body.mr-letters-page #main .mr-letters .mr-letters-pager a.mr-btn {
    padding-left: 14px;
    padding-right: 14px;
  }
  body.mr-letters-page #main .mr-letters .mr-letters-tabs { gap: 18px; }
  body.mr-letters-page #main .mr-letters li.mr-letters-row { grid-template-columns: minmax(0, 1fr) 84px; }
  body.mr-letters-page #main .mr-letters .mr-letters-row-thumb { width: 84px; }
}

/* ---- Reduced motion: keep colour feedback, drop movement ---- */
@media (prefers-reduced-motion: reduce) {
  body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) :is(a, img) {
    transition: none !important;
  }
  body:is(.mr-letters-page, .mr-letter-single) #main :is(.mr-letters, .mr-letter) a.mr-btn:is(:hover, :focus-visible),
  body.mr-letters-page #main .mr-letters .mr-letters-featured:hover .mr-letters-featured-media img {
    transform: none !important;
  }
}