/*
  /p/{slug}/ — the reading layout and body typography.
  design/09-site-decisions.md turns 17–36 are the record. The numbers that matter are settled
  and explicitly not to be re-tuned: 262px rail / 1fr body / 224px notes margin, with the body
  measure landing at 562px (~60ch).
*/

.post {
  background: var(--sh-paper);
}

/* --------------------------------------------------------------------------
   Breadcrumb — on a post the section strip becomes the breadcrumb.
   Tint comes from the series.
   -------------------------------------------------------------------------- */

.post__breadcrumb {
  border-bottom: 1px solid var(--sh-ink);
  padding: 9px var(--sh-gutter);
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: var(--sh-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--sh-tint-closed);
}
.post--roundup .post__breadcrumb { background: #cfe1ff; }
.post--bad-job-bingo .post__breadcrumb { background: #fcbcd2; }
.post--deep-dives .post__breadcrumb { background: #e5cde8; }
.post--changelog .post__breadcrumb { background: #e6e4e2; }

/* Links on a tinted surface are ink + underline, never the link purple (00 §2). */
.post__breadcrumb a {
  color: var(--sh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Header — title 76px at 34ch, dek 21px at 82ch (turn 21 addendum).
   Both caps were widened from the old narrow-header values; don't shrink them back.
   -------------------------------------------------------------------------- */

.post__header {
  padding: 44px var(--sh-gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  max-width: 34ch;
  text-wrap: pretty;
}

.post__dek {
  font-family: var(--sh-font-body);
  font-size: 21px;
  line-height: 1.5;
  color: var(--sh-grey-on-tint);
  max-width: 82ch;
  text-wrap: pretty;
}

/* No meta rule: 18b settled the facts and their ranking, and the rail redistribution is
   where those facts now live (09, chat 12) — byline and Share/RSS in the rail's WRITTEN BY
   block, read time as the rail countdown, series and date on the breadcrumb. */

/* Tags — an inline comma run, never boxes, never at the foot of the post. FILED UNDER
   closes the header directly under the dek, so it takes over the meta strip's top rule.
   The series tag keeps a 2px underline in its own series tint so it stays findable
   without a box; every other tag is an ordinary purple link. */
.post__tags {
  padding: 14px var(--sh-gutter) 18px;
  border-top: 1px solid var(--sh-ink);
  border-bottom: 1px solid var(--sh-ink);
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.post__tags-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-grey-on-tint);
  flex: none;
}
.post__tags-list {
  font-family: var(--sh-font-body);
  font-size: 15px;
  line-height: 1.6;
}
.post__tags-list a {
  text-decoration: none;
  border-bottom: 1px solid #e5cde8;
}
.post__tags-list a:hover { border-bottom-color: var(--sh-coral); }

/* --------------------------------------------------------------------------
   The three-column reading layout (turn 20 / turn 21 addenda).
   262 / 1fr / 224 — settled, stop tuning them.

   `overflow: clip` rather than `hidden` on any ancestor: hidden establishes a scroll
   container and silently kills position: sticky. This bug was hit repeatedly during design;
   the note is here so it isn't reintroduced.
   -------------------------------------------------------------------------- */

.post__layout {
  display: grid;
  grid-template-columns: 262px 1fr;
  gap: 26px;
  padding: 26px 30px 34px;
  align-items: start;
  border-bottom: 1px solid var(--sh-ink);
  overflow: clip;
}

.post__rail {
  position: sticky;
  top: 16px;
  align-self: start;
  display: flex;
  flex-direction: column;
}
.post__rail[hidden] { display: none; }

/* WRITTEN BY — the byline, share and RSS relocated from the retired meta strip
   (09, chat 12). Renders on every issue, so the rail is never empty. */
.post__rail-byline {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sh-ink);
  margin-bottom: 14px;
}
.post__rail-byline-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.post__rail-byline-name {
  font-family: var(--sh-font-display);
  font-size: 19px;
  line-height: 1.15;
  width: fit-content;
}
.post__rail-byline-actions {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post__rail-contents[hidden] { display: none; }

.post__rail-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 10px;
}

.post__rail-nav { display: flex; flex-direction: column; }

/* All rows sit flush left — the current department is marked by its tint alone, no indent. */
.post__rail-link {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 8px;
  border-top: 1px solid var(--sh-hairline);
  color: var(--sh-ink);
  text-decoration: none;
}
.post__rail-link-number {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  color: var(--sh-grey-on-tint);
  flex: none;
}
.post__rail-link-title {
  font-family: var(--sh-font-display);
  font-size: 19px;
  line-height: 1.15;
}
.post--roundup .post__rail-link[aria-current="true"] { background: #cfe1ff; }
.post--bad-job-bingo .post__rail-link[aria-current="true"] { background: #fcbcd2; }
.post--deep-dives .post__rail-link[aria-current="true"] { background: #e5cde8; }
.post__rail-link[aria-current="true"] { background: var(--sh-tint-closed); }

.post__rail-progress {
  border-top: 1px solid var(--sh-ink);
  margin-top: 14px;
  padding-top: 12px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--sh-grey-on-paper);
}
.post__rail-progress:empty { display: none; }

/* No series (a changelog note) → no definition copy renders; the rail is unconditional
   now, so an empty definition would otherwise show as a bare rule. */
.post__rail-definition:not(:has(span)) { display: none; }

.post__rail-definition {
  border-top: 1px solid var(--sh-hairline);
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--sh-font-body);
  font-size: 13px;
  line-height: 1.45;
}
.post__rail-definition-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.post__body { min-width: 0; }

/* --------------------------------------------------------------------------
   The content column and its notes margin.

   Every direct child of the rendered content sits in column 1 whether or not it has a note
   beside it, so the text column never changes width mid-issue. An issue with no footnotes has
   an empty right margin: "a margin that is sometimes empty is a book; a measure that changes
   per post is a bug."
   -------------------------------------------------------------------------- */

.post__content {
  display: grid;
  grid-template-columns: 1fr 224px;
  gap: 28px;
  padding: 8px 8px 0;
  align-items: start;
}

.post__content > * {
  grid-column: 1;
  min-width: 0;
  margin: 0 0 20px;
}

/* Body copy. 18px / 1.62 at the 562px measure. */
.post__content p {
  font-family: var(--sh-font-body);
  font-size: 18px;
  line-height: 1.62;
}

/* Departments (H2) — oversized numeral in the department's own darkened tint, name beside it.
   No rule, no box, no band (turn 21, 21c). Numbering is generated, so adding or reordering a
   department costs nothing at authoring time and can never drift out of sync. */
.post__content {
  counter-reset: department;
}

.post__content h2 {
  counter-increment: department;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  margin: 36px 0 18px;
  scroll-margin-top: 24px;
}

.post__content h2::before {
  content: counter(department, decimal-leading-zero);
  font-family: var(--sh-font-display);
  font-size: 62px;
  line-height: 0.8;
  flex: none;
  color: var(--sh-grey);
}

/* Department tints cycle in the settled order. A fifth department reuses the first colour
   rather than inventing one — the scale is meant to hold without adding bands. */
.post__content h2:nth-of-type(4n + 1)::before { color: #6ea8f5; }
.post__content h2:nth-of-type(4n + 2)::before { color: #7fbf9a; }
.post__content h2:nth-of-type(4n + 3)::before { color: #e09a52; }
.post__content h2:nth-of-type(4n + 4)::before { color: #a879b5; }

/* Story subheads (H3) — the label voice, not the serif. Departments own the serif and the
   colour; a story head in the same family at a close size reads as a new department on a long
   scroll, which is the bug this fixed. */
.post__content h3 {
  font-family: var(--sh-font-body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 18px 0 0;
}

/* Bad Job Bingo verdict headers are H2s too, but carry the mono meta voice rather than the
   serif — a verdict is a label, not a heading, and it already renders as a mono chip
   everywhere else on the site. 26px is set by one requirement: SERIOUSLY, MAYBE DON'T must
   fit on one line inside the 562px measure. */
.post--bad-job-bingo .post__content h2 {
  font-family: var(--sh-font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  align-items: center;
  gap: 12px;
  /* The rule goes BELOW the header, never above: above it separates the header from the
     listing that preceded it; below it separates the header from the title it introduces.
     It stops at the text column, not the outer edge — the notes margin belongs to the body. */
  border-bottom: 3px solid #fcbcd2;
  padding-bottom: 9px;
}
.post--bad-job-bingo .post__content h2::before {
  content: none;
}

/* Job titles inside a Bingo issue stay the largest thing in the section — the listings are
   the content and the verdict is the label on them. */
.post--bad-job-bingo .post__content h4 {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.06;
  margin: 24px 0 4px;
}

/* --------------------------------------------------------------------------
   Quotes — two devices, and they must not look alike.
   The rule that falls out: a left bar means someone else is talking. Steph's own words
   never take one.
   -------------------------------------------------------------------------- */

/* Someone else's words. Mirrors Footnotes exactly. Indented 22px so a Bingo issue's
   quote-then-reply alternation reads as a two-level rhythm while scrolling. */
.post__content blockquote {
  margin: 6px 0 20px 22px;
  border-left: 2px solid var(--sh-grey);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post--roundup .post__content blockquote { border-left-color: #6ea8f5; }
.post--bad-job-bingo .post__content blockquote { border-left-color: #fcbcd2; border-left-width: 3px; }
.post--deep-dives .post__content blockquote { border-left-color: #a879b5; }

.post__content blockquote p {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.34;
  margin: 0;
}

/* Steph emphasising her own line — a pull quote. Bold body sans, never italic, never a bar.
   Authored as a blockquote carrying the .sh-pull class via Ghost's markdown/HTML card. */
.post__content .sh-pull {
  border-left: none;
  margin: 10px 0 20px;
  padding-left: 0;
  flex-direction: row;
  gap: 14px;
  align-items: flex-start;
}
.post__content .sh-pull::before {
  content: "✦";
  font-family: var(--sh-font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--sh-coral);
  flex: none;
  padding-top: 4px;
}
.post__content .sh-pull p {
  font-family: var(--sh-font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.24;
  letter-spacing: -0.01em;
}

/* The mark opens AND closes the line (25b) — the closing ✦ trails the text inline rather than
   sitting in its own column, so it hugs the end of the sentence wherever it wraps to. */
.post__content .sh-pull p::after {
  content: "✦";
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--sh-coral);
  padding-left: 10px;
  /* Decorative: the highlight must not paint behind it. */
  background: none;
}

/* The line to screenshot — coral swiped under the words like a highlighter. At most once per
   issue: if a second would help, one of them isn't the point.

   The gradient tiles once per line rather than painting one band across the block, so a pull
   quote that wraps to two or three lines gets a swipe under each — a single no-repeat band
   only ever marks one line and leaves the rest looking untouched. */
.post__content .sh-pull--marked p {
  background-image: linear-gradient(
    to bottom,
    transparent 52%,
    var(--sh-coral) 52%,
    var(--sh-coral) 93%,
    transparent 93%
  );
  background-size: 100% 1.24em;
  background-repeat: repeat-y;
}

/* --------------------------------------------------------------------------
   Lists — style chosen by length (turn 26).
   Five or more items → ruled rows, because the shoutout list runs 20+ names and people scan
   it for themselves. Fewer than five → hanging markers; ruled rows read as a table, which is
   wrong for a three-item flag list.

   CSS can't count list items, so the ruled treatment is the default (the long lists are the
   common case) and .sh-list-short opts a short list out.
   -------------------------------------------------------------------------- */

.post__content ul,
.post__content ol {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* The marker is absolutely positioned rather than a flex item. A flex `li` makes every inline
   child — every link, every bare text node — its own flex item, which breaks a sentence into
   gapped chunks. Ghost's editor emits `li` with raw inline content, so the row has to stay
   normal inline flow. */
.post__content li {
  font-family: var(--sh-font-body);
  font-size: 18px;
  line-height: 1.55;
  display: block;
  position: relative;
  padding: 10px 0 10px 26px;
  border-top: 1px solid var(--sh-hairline);
}

.post__content ul li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 10px;
  font-family: var(--sh-font-display);
  font-size: 15px;
  line-height: 1.55;
  color: var(--sh-coral);
}

.post__content ol {
  counter-reset: ordered;
}
.post__content ol li {
  counter-increment: ordered;
}
.post__content ol li::before {
  content: counter(ordered, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 10px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 2.4;
  color: var(--sh-purple-display);
}

.post__content .sh-list-short li {
  border-top: none;
  padding-top: 3px;
  padding-bottom: 3px;
}
.post__content .sh-list-short li::before { top: 3px; }

/* --------------------------------------------------------------------------
   Tables (27a) — hairline rows: no verticals, no fill, no zebra.
   Three columns is the ceiling. On mobile the table keeps its columns and scrolls inside its
   own box rather than reflowing into stacked pairs, which would destroy the comparison the
   table exists to make.
   -------------------------------------------------------------------------- */

.post__content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sh-font-body);
}
.post__content th {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 2px solid var(--sh-ink);
  padding: 8px 10px 8px 0;
}
.post__content td {
  font-size: 17px;
  border-bottom: 1px solid var(--sh-hairline);
  padding: 10px 10px 10px 0;
}
.post__content td:not(:first-child) {
  font-family: var(--sh-font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Images (turn 35). All body images are centred in the column, figure and caption alike.
   A GIF is never upscaled past natural width — a flex/grid parent stretches it otherwise,
   which is a bug that appeared twice during design.
   -------------------------------------------------------------------------- */

.post__content figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.post__content img {
  width: auto;
  max-width: 100%;
  align-self: center;
}

/* Captions give the SOURCE, not a description — the description always lives in alt. */
.post__content figcaption {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  color: var(--sh-grey-on-paper);
  text-align: center;
}

/* Ghost's own card widths, mapped onto this grid. Regular is the 562px measure; Wide spans the
   notes margin. Full is deliberately not used on posts — a viewport-bleeding body image fights
   the three-column grid — so it is clamped to Wide rather than allowed to escape. */
.post__content .kg-width-wide,
.post__content .kg-width-full {
  grid-column: 1 / -1;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Footnotes.
   Markers are superscript numerals in the link purple. The NOTES block at the foot is the
   source of truth and is always printed — email, RSS and print all get it. On desktop,
   assets/js/post.js clones each note into the margin at its marker's offset.
   -------------------------------------------------------------------------- */

.post__content a[data-note-ref],
.post__content sup a {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  font-weight: 700;
  vertical-align: super;
  color: var(--sh-link);
  text-decoration: none;
}

/* The margin copies. Absolutely positioned inside a relative aside at each marker's own
   offset — never with stacked padding, which was introduced and fixed three separate times
   during design. Spacing is derived from rendered height because note clusters are normal. */
.post__notes-margin {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  align-self: stretch;
}

.post__note-margin {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.post__note-margin-number {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--sh-link);
  flex: none;
  padding-top: 10px;
}
.post__note-margin-body {
  font-family: var(--sh-font-body);
  font-size: 13px;
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px solid var(--sh-hairline);
}

/* The foot-of-page notes list. Omitted entirely rather than rendered with a heading and
   nothing beneath it when an issue has no notes. */
.post__content .sh-notes {
  grid-column: 1;
  border-top: 1px solid var(--sh-ink);
  margin-top: 30px;
  padding-top: 16px;
}
.post__content .sh-notes li {
  font-size: 15px;
  border-top: none;
  padding: 6px 0;
}
.post__content .sh-notes li::before {
  color: var(--sh-link);
}

/* Hidden at desktop only when the margin copies are actually in place, so a JS failure leaves
   the foot notes visible rather than removing the only copy. */
.post__content .sh-notes[data-mirrored="true"] {
  display: none;
}

/* --------------------------------------------------------------------------
   Sign-off (29c) — a halftone blush note. Capped at the 562px text column for the same
   reason the verdict rules are: it belongs to the text, so it should not reach across the
   margin the footnotes live in.
   -------------------------------------------------------------------------- */

.post__signoff {
  margin: 24px var(--sh-gutter) 28px;
  max-width: 562px;
  background: var(--sh-tint-newsletter);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: clip;
}
.post__signoff::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sh-ink) 0.6px, transparent 0.7px);
  background-size: 5px 5px;
  opacity: 0.14;
  pointer-events: none;
}
.post__signoff-label,
.post__signoff-body {
  position: relative;
}
.post__signoff-label {
  font-family: var(--sh-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.post__signoff-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-family: var(--sh-font-body);
  font-size: 17px;
  line-height: 1.55;
}
/* Links sit on a tint here, so they take ink + underline rather than the link purple. */
.post__signoff-body a {
  color: var(--sh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post__signoff-close {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Subscribe band
   -------------------------------------------------------------------------- */

.post__subscribe {
  background: var(--sh-ink);
  color: var(--sh-paper);
  padding: 30px var(--sh-gutter);
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: center;
}
.post__subscribe-heading {
  font-family: var(--sh-font-display);
  font-size: 34px;
  line-height: 1.04;
}
.post__subscribe-sub {
  font-family: var(--sh-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: #e6e4e2;
  max-width: 48ch;
  margin-top: 10px;
}
.post__subscribe-action {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.post__subscribe-button {
  background: var(--sh-paper);
  color: var(--sh-ink);
  text-decoration: none;
  padding: 13px 22px;
  font-family: var(--sh-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post__subscribe-button:hover { color: var(--sh-ink); }
.post__subscribe-rss {
  font-family: var(--sh-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sh-link-on-ink);
}

/* --------------------------------------------------------------------------
   Comments — the theme-side shell (Comments.dc.html 1a/1d). The panel, its header, the 21b
   rules strip and the foot-of-thread contact line live here in ordinary page HTML; everything
   Ghost renders sits inside the comments-ui iframe between the strip and the foot line, styled
   by css/comments.css, which assets/js/comments.js injects into the (same-origin) iframe.
   -------------------------------------------------------------------------- */

.post__comments {
  margin: 30px var(--sh-gutter) 48px;
  max-width: 780px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-paper);
  padding: 26px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post__comments-header {
  border-bottom: 1px solid var(--sh-ink);
  padding-bottom: 14px;
}
.post__comments-title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
}

/* 1d's lede — Steph speaking, so body sans. */
.post__comments-lede {
  font-family: var(--sh-font-body);
  font-size: 16px;
  line-height: 1.55;
}

/* The 21b strip. #fff6ef is the strip's own paper-adjacent warm tint from the canvas —
   deliberately not a section tint, so the strip reads as a note rather than chrome. */
.comment-rules {
  border: 1px solid var(--sh-ink);
  background: #fff6ef;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.comment-rules--job { background: var(--sh-tint-jobs); }
.comment-rules__label {
  font-family: var(--sh-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.comment-rules__text {
  font-family: var(--sh-font-body);
  font-size: 15px;
  line-height: 1.55;
}
/* Links on a tinted surface are ink + underline, never the link purple (00 §2). */
.comment-rules__text a {
  color: var(--sh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Their words in Instrument Serif italic — the hypothetical commenter quotes in 1d. */
.comment-rules--job .comment-rules__text em {
  font-family: var(--sh-font-display);
  font-style: italic;
  font-size: 17px;
}

/* The comments-ui iframe sizes itself; keep it from adding stray inline-gap below. */
.post__comments iframe { display: block; width: 100%; }

.post__comments-foot {
  border-top: 1px solid var(--sh-ink);
  padding-top: 14px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--sh-grey-on-paper);
}

/* --------------------------------------------------------------------------
   390px (turn 36). Three columns collapse to one; both rails have to go somewhere.
   The contents rail becomes a collapsed <details> under the header, and footnotes move to the
   foot — which is where they already are, so the margin copies simply never get built.
   Type steps down one notch, not two.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .post__breadcrumb,
  .post__header,
  .post__tags {
    padding-left: 18px;
    padding-right: 18px;
  }

  .post__title { font-size: 40px; line-height: 1; }
  .post__dek { font-size: 18px; }

  .post__layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 18px 24px;
  }

  .post__rail {
    position: static;
    border-bottom: 1px solid var(--sh-ink);
    margin: 0 -18px;
    padding: 0 18px 14px;
  }

  .post__content {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 0 0;
  }

  .post__content p,
  .post__content li { font-size: 17px; }
  .post__content h2 { font-size: 30px; gap: 14px; }
  .post__content h2::before { font-size: 44px; }
  .post--bad-job-bingo .post__content h2 { font-size: 22px; white-space: normal; }
  .post__content h3 { font-size: 15px; }
  .post__content .sh-pull p { font-size: 22px; }
  .post__content blockquote { margin-left: 14px; }
  .post__content blockquote p { font-size: 19px; }

  /* A table keeps its columns and scrolls inside its own box. If a table cannot survive
     358px with three columns, it should have been a list. */
  .post__content table { display: block; overflow-x: auto; }

  /* The margin never exists here, so the foot notes are the only copy and must stay. */
  .post__notes-margin { display: none; }
  .post__content .sh-notes[data-mirrored="true"] { display: block; }

  .post__signoff { margin-left: 18px; margin-right: 18px; }

  .post__subscribe {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 18px;
  }

  /* 1f: the panel tightens, the title steps down one notch, the strip's text follows. */
  .post__comments {
    margin-left: 18px;
    margin-right: 18px;
    padding: 18px;
    gap: 16px;
  }
  .post__comments-title { font-size: 28px; }
  .comment-rules { padding: 13px 14px; }
  .comment-rules__text { font-size: 14px; line-height: 1.5; }
}


/* --------------------------------------------------------------------------
   Single-column body — used by page.hbs, which has no contents rail and no notes margin.
   Same typography as an issue so a quote or a list reads identically; only the grid changes.
   -------------------------------------------------------------------------- */

.post__content--single {
  grid-template-columns: 1fr;
  max-width: 680px;
  padding: 0;
}
.post__content--single > * { grid-column: 1; }