/*
  Predictable Innovation guides: the reading design (Jose's guides redesign of 2026-10-20,
  docs/rebrand/v2/guides-redesign/DESIGN.md; the finished example is reference/desktop-full-guide.html there).
  Loaded last, after blog.css, blog-chrome.css and rhythm.css, only on a guide on the new design (main.blog.blog--read).
  Every rule sits under .blog.blog--read (or html:has(.blog--read) for the header), so it can't touch any other page.
  It restyles the markup the guides already have: no words, headings, ids, links or images change here.

  Desktop: 1176 px of content, a 268 px left column (contents, then the subscribe card, both sticky), a 112 px gap,
  a 796 px reading column. Title across the full width; the summary in the reading column, the author beside it.
  Phones and tablets (below 1180 px): one column, the contents as the "On this page" bar, the chapter bar on scroll.
*/

/* 1. Tokens */
.blog.blog--read {
  --text: #1b1f1c;
  --sub-bg: #f2f2f2;
  --wrap: 1176px;
  --gutter: clamp(20px, 4vw, 40px);  /* the reference's side padding; the header uses it too (below) */
  --measure: 796px;
  --rail: 268px;
  --col-gap: 112px;
  --fs-body: 19px;
}

/* The top menu uses the page's width (DESIGN.md "Layout"). */
html:has(.blog--read) .site-header .bar {
  max-width: calc(1176px + 2 * clamp(20px, 4vw, 40px)); padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px);
}

/* 2. The head: breadcrumbs, the title across both columns, the summary in the reading column, the author beside it */
.blog.blog--read .post-head { padding-top: 56px; }
.blog.blog--read .post-head-grid {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--col-gap); align-items: start;
}
.blog.blog--read .post-head-grid > div { display: contents; }
.blog.blog--read .crumbs { grid-column: 1 / -1; }
.blog.blog--read .crumbs ol { font-size: 15px; }
.blog.blog--read .post-title {
  grid-column: 1 / -1; margin: 34px 0 0; font-family: var(--f-display); font-weight: 400;
  font-size: clamp(40px, 16px + 5.2vw, 68px); line-height: 1.05; letter-spacing: 0; color: var(--ink);
}
.blog.blog--read .post-dek {
  grid-column: 2; grid-row: 3; max-width: none; margin: 30px 0 0;
  font-size: clamp(20px, 15px + 0.75vw, 26px); line-height: 1.4; color: var(--soft);
}
.blog.blog--read .byline {
  grid-column: 1; grid-row: 3; position: relative; display: block; min-height: 51px; margin-top: 30px; padding: 3px 0 0 62px;
  font-size: 15px; line-height: 1.45; color: var(--muted);
}
.blog.blog--read .byline-who { display: block; color: var(--muted); }
.blog.blog--read .byline-who img { position: absolute; left: 0; top: 3px; width: 48px; height: 48px; }
.blog.blog--read .byline-who > span { display: block; }
.blog.blog--read .byline-name { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--text); }
.blog.blog--read .byline-role { font-size: 15px; line-height: 1.45; }
.blog.blog--read .byline-rule { display: none; }
.blog.blog--read .byline-meta { display: flex; flex-direction: column; gap: 0; margin: 0; font-size: 15px; line-height: 1.45; }
.blog.blog--read .byline-meta li { display: block; }
.blog.blog--read .byline-meta li:last-child { order: -1; }  /* read time, then the date, as in the reference */
.blog.blog--read .byline-meta .icon { display: none; }
/* The reference has no cover on the page: the cover stays in the HTML as it was (the share image and the guide cards
   use it) and is hidden at every width, as the kit already hides it below 1180 px. */
.blog.blog--read .post-cover { display: none; }

/* 3. The body grid: the left column (contents and the subscribe card) and the reading column */
.blog.blog--read .post-body { padding-top: 72px; }
.blog.blog--read .post-body-grid {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--col-gap); align-items: start;
}
.blog.blog--read .post-body-grid > .prose { grid-column: 2; grid-row: 1; }
.blog.blog--read .post-body-grid > .rail { grid-column: 1; grid-row: 1; align-self: stretch; }
.blog.blog--read .rail-inner {
  position: sticky; top: calc(var(--header-h) + 24px); max-width: none; max-height: calc(100vh - var(--header-h) - 48px);
  margin-right: -14px; padding-right: 14px; display: flex; flex-direction: column; gap: 36px;
}
/* On a short screen the contents scroll inside the rail (rhythm.js keeps the current section in view there) and the
   subscribe card stays whole. */
.blog.blog--read .rail .toc {
  flex: 0 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  margin: -6px -8px 0; padding: 6px 8px 8px;  /* room for the 2 px focus ring and its 3 px offset */
}
.blog.blog--read .rail .sub-card { flex: none; }
/* Short desktop windows: the card tightens so all the contents stay visible (DESIGN.md: both stay on screen). */
@media (min-width: 1180px) and (max-height: 960px) {
  .blog.blog--read .rail-inner { gap: 18px; }
  .blog.blog--read .rail .toc .toc-list { gap: 6px; }
  .blog.blog--read .rail .sub-card { gap: 10px; padding: 18px 20px 18px; }
  .blog.blog--read .rail .sub-card::after { top: 22px; }
  .blog.blog--read .rail .sub-title { font-size: 18px; }
  .blog.blog--read .rail .sub-text { font-size: 14.5px; line-height: 1.45; }
  .blog.blog--read .rail .sub-form { gap: 8px; margin-top: 2px; }
  .blog.blog--read .rail .sub-form input, .blog.blog--read .rail .sub-form button { height: 44px; }
}
@media (min-width: 1180px) and (max-height: 820px) {
  .blog.blog--read .rail .sub-text { display: none; }
}

/* "On this page": the current section dark and bold, the others grey */
.blog.blog--read .toc-title {
  margin: 0 0 14px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.blog.blog--read .toc ol { border-left: 0; }
.blog.blog--read .toc .toc-list { display: flex; flex-direction: column; gap: 11px; }
.blog.blog--read .toc .toc-list a {
  display: block; margin: 0; padding: 0; border: 0; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--muted);
}
.blog.blog--read .toc .toc-list a:hover { color: var(--ink); }
.blog.blog--read .toc .toc-list a[aria-current="true"],
.blog.blog--read .toc .toc-list a.is-parent { color: var(--ink); font-weight: 600; }
.blog.blog--read .toc .toc-list:not(:has(a[aria-current="true"], a.is-parent)) > li:first-child > a { color: var(--ink); font-weight: 600; }
.blog.blog--read .toc-n, .blog.blog--read .toc .toc-subs, .blog.blog--read .toc-fold .toc-subs { display: none; }
.blog.blog--read .rail .toc .toc-list .toc-subs { display: block; height: 0; margin: 0; overflow: hidden; visibility: hidden; }
.blog.blog--read .toc .toc-extra a, .blog.blog--read .toc-fold .toc-extra a { padding-left: 0; }

/* The subscribe card: the only call to action inside a guide */
.blog.blog--read .sub-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 26px; border-radius: 12px;
  background: var(--sub-bg);
}
.blog.blog--read .sub-card::after {
  content: ""; position: absolute; top: 34px; right: -14px; width: 0; height: 0;
  border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 14px solid var(--sub-bg);
}
.blog.blog--read .sub-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; color: var(--ink); }
.blog.blog--read .sub-text { margin: 0; font-size: 16px; line-height: 1.55; color: #262b27; }
.blog.blog--read .sub-form { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; }
.blog.blog--read .sub-form input {
  width: 100%; height: 50px; padding: 0 20px; border: 1px solid #d9d9d9; border-radius: 999px; background: var(--white);
  font-family: inherit; font-size: 16px; color: var(--ink);
}
.blog.blog--read .sub-form input::placeholder { color: var(--muted); }
.blog.blog--read .sub-form button {
  width: 100%; height: 50px; border: 0; border-radius: 999px; background: var(--red-ink); color: var(--white);
  font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: background-color .15s;
}
.blog.blog--read .sub-form button:hover { background: var(--red-hover); }

/* 4. The reading column */
.blog.blog--read .prose { font-size: var(--fs-body); line-height: 1.75; letter-spacing: 0; color: var(--text); }
.blog.blog--read .prose > * + * { margin-top: 1.55em; }
.blog.blog--read .prose > p + ul, .blog.blog--read .prose > p + ol:not(.steps) { margin-top: 0.6em; }
.blog.blog--read .prose strong, .blog.blog--read .prose .lead-in { font-weight: 600; color: var(--ink); }
.blog.blog--read .prose :where(a:not([class])) {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--red-ink); text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.blog.blog--read .prose :where(a:not([class])):hover { background: none; color: var(--red-ink); }
.blog.blog--read .prose mark {
  padding: 0 2px; color: var(--ink);
  background: linear-gradient(180deg, transparent 44%, var(--lemon) 44%, var(--lemon) 94%, transparent 94%);
}
/* The first paragraphs and each section's first line read as body text */
.blog.blog--read .prose .lede,
.blog.blog--read .prose > p.answer-line { font-size: inherit; line-height: inherit; font-weight: 400; letter-spacing: 0; color: var(--text); }

/* Lists: plain bullets in the text color */
.blog.blog--read .prose > ul:not(.lcard) { padding-left: 1.15em; list-style: disc; }
.blog.blog--read .prose > ul:not(.lcard) > li { padding-left: 0.3em; }
.blog.blog--read .prose > ul:not(.lcard):not(.checklist) > li::before { display: none; }
/* A checklist (the drafts' "- [ ]" lists): an empty box to tick */
.blog.blog--read .prose > ul.checklist { padding-left: 0; list-style: none; }
.blog.blog--read .prose > ul.checklist > li { position: relative; padding-left: 34px; }
.blog.blog--read .prose > ul.checklist > li::before {
  content: ""; position: absolute; left: 2px; top: 0.42em; width: 18px; height: 18px; border: 1.5px solid var(--ink);
  border-radius: 3px; background: var(--white);
}
/* Ordered lists keep two-digit numbers inside the column */
.blog.blog--read .prose > ol:not(.steps) { padding-left: 1.9em; }
.blog.blog--read .prose > ul:not(.lcard) > li + li, .blog.blog--read .prose > ol:not(.steps) > li + li { margin-top: 0.55em; }
.blog.blog--read .prose > p + ul.lcard { margin-top: 26px; }
.blog.blog--read .prose > ul.lcard > li::before { top: 20px; }

/* Chapter titles (H2): Anton, no number above them */
.blog.blog--read .prose > .ch-open,
.blog.blog--read .prose > h2:not(.answer-label) {
  margin-top: clamp(56px, 40px + 2.8vw, 80px); padding-top: 0; border-top: 0;
}
.blog.blog--read .ch-open { display: block; }
.blog.blog--read .ch-num { display: none; }
.blog.blog--read .ch-open h2,
.blog.blog--read .prose > h2:not(.answer-label) {
  margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 16px + 2.8vw, 44px); line-height: 1.1;
  letter-spacing: 0; color: var(--ink); text-wrap: balance;
}
.blog.blog--read .prose > .ch-open + *, .blog.blog--read .prose > h2 + * { margin-top: 20px; }

/* Subheadings (H3): Fraunces 500, no red bar */
.blog.blog--read .prose > h3,
.blog.blog--read .prose > h3.sub-h {
  margin-top: clamp(36px, 28px + 1.4vw, 48px); font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(24px, 1.1rem + 0.9vw, 32px); line-height: 1.14; letter-spacing: -0.016em; color: var(--ink); text-wrap: balance;
}
.blog.blog--read .prose > h3.sub-h::before { display: none; }
.blog.blog--read .prose > .ch-open + h3, .blog.blog--read .prose > .ch-open + h3.sub-h { margin-top: 28px; }
.blog.blog--read .prose > h3 + *, .blog.blog--read .prose > h3.sub-h + * { margin-top: 12px; }
.blog.blog--read .prose > h3 + .pull, .blog.blog--read .prose > h3.sub-h + .pull { margin-top: 28px; }
.blog.blog--read .prose > h4.h-minor { margin-top: 36px; }
.blog.blog--read .sub-open h4 { font-size: clamp(21px, 1rem + 0.55vw, 24px); line-height: 1.18; }

/* The short answer: light lime, lime label */
.blog.blog--read .prose > .answer {
  padding: clamp(22px, 1rem + 1.1vw, 28px) clamp(22px, 0.5rem + 1.9vw, 36px) clamp(26px, 1.2rem + 0.6vw, 32px);
  border-radius: 8px; background: var(--wash);
}
.blog.blog--read .prose > .answer + * { margin-top: 2.4em; }
.blog.blog--read .prose > .toc-fold + * { margin-top: 0; }  /* the fold is hidden from 1180 px: the short answer starts the column */
.blog.blog--read .answer .list { margin-top: 18px; font-size: clamp(16.5px, 15.5px + 0.15vw, 17.5px); line-height: 1.5; }
.blog.blog--read .prose .answer .list > li::before { left: 2px; top: 0.62em; background: var(--ink); }

/* Quotes: red mark on the left, never bigger than a chapter title, the name as a small label */
.blog.blog--read .prose > .voice,
.blog.blog--read .prose > .voice.voice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start;
  margin-top: clamp(40px, 32px + 1.2vw, 52px); margin-bottom: 0; padding: 26px 0 28px;
  border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line-2);
}
.blog.blog--read .prose > .voice + * { margin-top: clamp(36px, 28px + 1vw, 44px); }
.blog.blog--read .voice-mark {
  grid-column: 1; grid-row: 1 / span 2; height: auto; margin-top: 2px; font-family: var(--f-display);
  font-size: clamp(46px, 38px + 1vw, 56px); line-height: 0.9; color: var(--red);
}
.blog.blog--read .voice blockquote { grid-column: 2; }
.blog.blog--read .voice blockquote p,
.blog.blog--read .voice--short blockquote p {
  font-family: var(--f-serif); font-weight: 500; font-size: clamp(21px, 18px + 0.6vw, 27px); line-height: 1.25;
  letter-spacing: -0.012em; color: var(--ink);
}
.blog.blog--read .voice figcaption { grid-column: 2; display: block; margin-top: 12px; }
.blog.blog--read .voice-face { display: none; }
.blog.blog--read .voice-who {
  display: block; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.blog.blog--read .voice-who cite { font-weight: 700; color: var(--muted); }
.blog.blog--read .voice-who cite ~ span { display: none; }  /* the reference shows the name only */

/* A pull quote without the rhythm: the same look */
.blog.blog--read .prose > .pull { margin-top: clamp(40px, 32px + 1.2vw, 52px); padding: 26px 0 28px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line-2); }
.blog.blog--read .pull blockquote {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start;
  font-style: normal; font-weight: 500; font-size: clamp(21px, 18px + 0.6vw, 27px); line-height: 1.25;
}
.blog.blog--read .pull blockquote::before {
  grid-column: 1; height: auto; margin-top: 2px; font-family: var(--f-display); font-weight: 400;
  font-size: clamp(46px, 38px + 1vw, 56px); line-height: 0.9;
}
.blog.blog--read .pull blockquote p { grid-column: 2; }

/* "From Jose's deals" */
.blog.blog--read .prose > .note {
  margin-top: 2em; padding: clamp(22px, 1rem + 1vw, 28px) clamp(20px, 0.6rem + 1.6vw, 32px) clamp(24px, 1.1rem + 0.7vw, 30px);
  border-radius: 8px; background: var(--paper);
}
.blog.blog--read .prose > .note + * { margin-top: 2em; }
.blog.blog--read .note-who strong { font-weight: 700; color: var(--ink); }

/* Number strip */
.blog.blog--read .prose > .numbers,
.blog.blog--read .prose > .numbers.numbers { margin-top: 2em; margin-bottom: 0; }
.blog.blog--read .prose > .numbers + * { margin-top: 2em; }
.blog.blog--read .n-big { font-size: clamp(48px, 2rem + 2vw, 66px); }
.blog.blog--read .n-label { color: #262b27; }

/* Numbered steps: black squares */
.blog.blog--read .prose > .steps { margin-top: 1.1em; padding-left: 0; gap: 20px; }
.blog.blog--read .steps > li + li { margin-top: 0; }
.blog.blog--read .prose > .steps + * { margin-top: 1.8em; }
.blog.blog--read .steps > li::before { background: var(--ink); }
.blog.blog--read .steps > li > p { padding-top: 4px; }

/* The closing line */
.blog.blog--read .prose > .closer,
.blog.blog--read .prose > .closer.closer {
  margin-top: 1.55em; padding-top: 26px; border-top: 1px solid var(--line); font-family: var(--f-serif); font-weight: 500;
  font-size: 1.68em; line-height: 1.22; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance;
}

/* FAQ: closed questions between lines, the answer opens on click (same H3s, same words, in the HTML either way) */
.blog.blog--read .prose > .faq,
.blog.blog--read .prose > .faq.faq {
  margin-top: 20px; padding: 0; border-top: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
}
.blog.blog--read .faq .faq-item { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 0; }
.blog.blog--read .faq .faq-item::before { display: none; }
.blog.blog--read .faq-item > summary { cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.blog.blog--read .faq-item > summary:hover { color: var(--red-ink); }
.blog.blog--read .faq .faq-item h3 {
  display: inline; margin: 0; font-family: var(--f-sans); font-size: inherit; font-weight: 600; line-height: inherit;
  letter-spacing: 0; color: inherit;
}
.blog.blog--read .faq-item p { margin: 10px 0 0; font-size: 17px; line-height: 1.65; }

/* Tables */
.blog.blog--read .t th.is-after:last-child, .blog.blog--read .t td.is-after:last-child { padding-right: 18px; }
.blog.blog--read .t--matrix .no { color: var(--muted); }

/* Sources */
.blog.blog--read .prose > .sources { margin-top: 56px; }

/* Share row */
.blog.blog--read .prose > .share { margin-top: 2.6em; }
.blog.blog--read .share-label { font-size: 15px; line-height: 1.4; }
.blog.blog--read .share .btn { min-height: 40px; padding: 0 14px; border-color: var(--line-2); font-size: 15px; font-weight: 600; }

/* Author box: photo, name, role, bio, links */
.blog.blog--read .prose > .author { margin-top: 44px; }
.blog.blog--read .author { background: var(--paper); }
.blog.blog--read .author-role { color: var(--soft); }
.blog.blog--read .author-label, .blog.blog--read .author-links { line-height: 1.4; }
.blog.blog--read .author-bio { color: #262b27; }
.blog.blog--read .author-links a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--red-ink); text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.blog.blog--read .author-links a:hover { color: var(--red-ink); }

/* Read next: the same width as the page */
.blog.blog--read .read-next { margin-top: 120px; }

/* 5. Phones and tablets: one column; the contents fold above the short answer, the chapter bar on scroll */
@media (max-width: 1179px) {
  .blog.blog--read .post-head { padding-top: 28px; }
  .blog.blog--read .post-head-grid,
  .blog.blog--read .post-body-grid { grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
  .blog.blog--read .post-title, .blog.blog--read .post-dek, .blog.blog--read .byline { grid-column: 1; grid-row: auto; }
  .blog.blog--read .post-title { margin-top: 20px; }
  .blog.blog--read .post-dek { margin-top: 18px; }
  .blog.blog--read .byline {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 0; margin-top: 18px; padding: 0;
  }
  .blog.blog--read .byline-who img { position: static; }
  .blog.blog--read .byline-who { display: flex; align-items: center; gap: 10px; }
  .blog.blog--read .byline-who img { width: 32px; height: 32px; }
  .blog.blog--read .byline-role { display: none; }
  .blog.blog--read .byline-meta { flex-direction: row; flex-wrap: wrap; gap: 6px 10px; }
  .blog.blog--read .byline-meta li::before { content: "·"; margin-right: 10px; }

  .blog.blog--read .post-body { padding-top: 0; }
  .blog.blog--read .post-body-grid > .prose, .blog.blog--read .post-body-grid > .rail { grid-column: 1; grid-row: auto; }

  /* The contents fold: a full-width bar under the author */
  .blog.blog--read { overflow-x: clip; }  /* the full-width bar below never makes the page scroll sideways */
  .blog.blog--read .prose > .toc-fold {
    display: block; margin: 24px calc(50% - 50vw) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .blog.blog--read .toc-fold summary {
    min-height: 52px; padding: 0 max(var(--gutter), calc(50vw - var(--measure) / 2));
    font-size: 15px; font-weight: 600; line-height: 1.3;
  }
  .blog.blog--read .toc-fold summary span span { font-weight: 400; color: var(--muted); }
  .blog.blog--read .toc-fold > .toc-list,
  .blog.blog--read .toc-fold > ol { margin: 0; padding: 0 max(var(--gutter), calc(50vw - var(--measure) / 2)) 10px; }
  .blog.blog--read .prose .toc-fold .toc-list a { display: block; font-size: 16px; color: var(--ink); text-decoration: none; }
  .blog.blog--read .prose .toc-fold .toc-list a[aria-current="true"], .blog.blog--read .prose .toc-fold .toc-list a.is-parent { font-weight: 600; }
  .blog.blog--read .prose > .toc-fold + * { margin-top: 24px; }

  /* The rail keeps only the subscribe card, after the article */
  .blog.blog--read .post-body-grid > .rail { display: block; margin-top: 56px; }
  .blog.blog--read .rail-inner { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; }
  .blog.blog--read .rail .toc { display: none; }
  .blog.blog--read .sub-card::after { display: none; }

  /* The chapter bar: "On this page", the section you are in, a red progress line */
  html:has(.blog--read .chapter-bar) .site-header .read-progress { display: none; }
  .blog.blog--read .chapter-bar { box-shadow: none; border-bottom: 1px solid var(--line); }
  .blog.blog--read .cb-btn {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center;
    min-height: 58px; padding: 8px var(--gutter);
  }
  .blog.blog--read .cb-btn::before {
    content: "On this page"; grid-column: 1; grid-row: 1; font-size: 11px; font-weight: 700; line-height: 1.2;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
  .blog.blog--read .cb-n, .blog.blog--read .cb-sub { display: none; }
  .blog.blog--read .cb-t {
    grid-column: 1; grid-row: 2; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink);
    white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .blog.blog--read .cb-btn .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--ink); }
  .blog.blog--read .cb-progress { height: 3px; background: #eef0eb; }
  .blog.blog--read .cb-progress > i { display: block; height: 3px; background: var(--red-ink); transform: scaleX(0); transform-origin: 0 50%; }
  .blog.blog--read .cb-panel .toc-list a { grid-template-columns: minmax(0, 1fr); }
  .blog.blog--read .cb-panel .toc-n, .blog.blog--read .cb-panel .toc-subs { display: none; }
  .blog.blog--read .cb-panel a.is-parent { font-weight: 700; }
}

/* 6. Phones */
@media (max-width: 700px) {
  .blog.blog--read .post-head { padding-top: 20px; }
  .blog.blog--read .crumbs ol { gap: 0 8px; font-size: 14px; }
  .blog.blog--read .crumbs li + li::before { margin-right: 8px; }
  .blog.blog--read .steps > li { grid-template-columns: 42px minmax(0, 1fr); gap: 18px; }
  .blog.blog--read .steps > li::before { width: 42px; height: 42px; font-size: 22px; line-height: 42px; }
  .blog.blog--read .post-title {
    margin-top: 14px; font-family: var(--f-serif); font-weight: 500; font-size: 34px; line-height: 1.08; letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .blog.blog--read .post-dek { margin-top: 14px; font-size: 20px; }
  .blog.blog--read .byline { margin-top: 16px; font-size: 14px; }
  .blog.blog--read .byline-who img { width: 28px; height: 28px; }
  .blog.blog--read .byline-name, .blog.blog--read .byline-meta { font-size: 14px; }
  /* The read time and the date on their own line under the name */
  .blog.blog--read .byline-meta { flex: 0 0 100%; padding-left: 38px; }
  .blog.blog--read .byline-meta li:last-child::before { content: none; margin: 0; }
  .blog.blog--read .prose > .toc-fold { margin-top: 22px; }

  .blog.blog--read .prose { font-size: 17px; line-height: 1.7; }
  .blog.blog--read .prose > * + * { margin-top: 1.45em; }
  .blog.blog--read .prose > p + ul, .blog.blog--read .prose > p + ol:not(.steps) { margin-top: 0.6em; }
  .blog.blog--read .prose > ul:not(.lcard) { padding-left: 1.1em; }
  .blog.blog--read .prose > ul > li + li, .blog.blog--read .prose > ol > li + li { margin-top: 0.5em; }

  .blog.blog--read .prose > .answer { padding: 22px 22px 26px; }
  .blog.blog--read .answer-def { font-size: 21px; }
  .blog.blog--read .answer .list { font-size: 16.5px; }

  .blog.blog--read .prose > .ch-open, .blog.blog--read .prose > h2:not(.answer-label) { margin-top: 56px; }
  .blog.blog--read .ch-open h2, .blog.blog--read .prose > h2:not(.answer-label) {
    font-family: var(--f-serif); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -0.022em;
  }
  .blog.blog--read .prose > .ch-open + *, .blog.blog--read .prose > h2 + * { margin-top: 18px; }
  .blog.blog--read .prose > h3, .blog.blog--read .prose > h3.sub-h { margin-top: 36px; font-size: 25px; }

  .blog.blog--read .prose > .voice, .blog.blog--read .prose > .voice.voice { column-gap: 14px; margin-top: 36px; padding: 20px 0 22px; }
  .blog.blog--read .prose > .voice + * { margin-top: 30px; }
  .blog.blog--read .voice-mark { font-size: 44px; }
  .blog.blog--read .voice blockquote p, .blog.blog--read .voice--short blockquote p { font-size: 21px; line-height: 1.28; }
  .blog.blog--read .voice figcaption { margin-top: 10px; }
  .blog.blog--read .voice-who { font-size: 12px; }

  .blog.blog--read .n-big { font-size: 48px; }
  .blog.blog--read .t .is-after:last-child { padding-right: 12px; }
  .blog.blog--read .t--matrix tbody tr > td:last-child { border-bottom: 0; }
  .blog.blog--read .t tbody th[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--f-sans); font-style: normal;
    font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--muted);
  }
  .blog.blog--read .prose > ul.checklist > li { padding-left: 30px; }
  .blog.blog--read .prose > ul.checklist > li::before { width: 16px; height: 16px; }
  .blog.blog--read .pull blockquote { column-gap: 14px; }
  .blog.blog--read .pull blockquote::before { font-size: 44px; }
  .blog.blog--read .prose > .pull { margin-top: 36px; padding: 20px 0 22px; }
  .blog.blog--read .prose > h3 + .pull, .blog.blog--read .prose > h3.sub-h + .pull { margin-top: 24px; }
  .blog.blog--read .prose > ul.lcard > li::before { top: 18px; }
  .blog.blog--read .faq .faq-item { padding: 16px 0; }
  .blog.blog--read .faq-item > summary { font-size: 17px; }
  .blog.blog--read .faq-item p { font-size: 16.5px; }
  .blog.blog--read .prose > .closer, .blog.blog--read .prose > .closer.closer { font-size: 1.5em; }
}

/* 7. Every chapter title gets the chapter gap, whatever block comes before it (in the reference the margins collapse,
   here every gap is a top margin, so the "block + *" rules above would otherwise win). */
.blog.blog--read .prose > :not(.toc-fold) + .ch-open.ch-open,
.blog.blog--read .prose > :not(.toc-fold) + h2:not(.answer-label) { margin-top: clamp(56px, 40px + 2.8vw, 80px); }
@media (max-width: 700px) {
  .blog.blog--read .prose > :not(.toc-fold) + .ch-open.ch-open,
  .blog.blog--read .prose > :not(.toc-fold) + h2:not(.answer-label) { margin-top: 56px; }
}

@media print {
  .blog.blog--read .sub-card { display: none !important; }
}