/* ==========================================================================
   Redesign layer: article pages (story + posts). Loads after styles.css and r-base.css.
   Wider page, centered title, quiet meta, In short, callouts, tables, charts,
   chapter rail (r-article.js), related cards. Text column stays a reading measure.
   ========================================================================== */
:root {
  --a-text: 640px;    /* body column: ~70 characters a line at 22px (measured) */
  --a-wide: 920px;    /* tables, charts, callouts */
  --a-head: 1240px;   /* the title may run this wide */
  --a-top: 72px;      /* nav height, set by r-article.js */
  --a-offset: 112px;  /* where a chapter lands under the nav, set by r-article.js */
}

/* 1. Layout: the page widens, the text column stays readable, wide blocks break out of it */
.a-wrap .post { max-width: none; }
.a-wrap .post-back { width: auto; max-width: var(--a-wide); margin: 0 auto 80px; display: block; }
.a-wrap .post-back > span { display: inline-block; }
.a-wrap .post__body, .a-wrap .post__pager { max-width: var(--a-text); margin-inline: auto; }
.a-wide { --w: min(var(--a-wide), calc(100vw - 2 * var(--margin))); width: var(--w); max-width: none; margin-left: calc((100% - var(--w)) / 2); margin-right: calc((100% - var(--w)) / 2); }
.a-wrap ~ .takehome-sec > * { max-width: var(--a-text); }
@media (min-width: 761px) { .takehome-sec .mini-sheet { width: 220px; } }   /* starting width until main.js fits it to the text */
.post__body :is(h2, .a-anchor) { scroll-margin-top: var(--a-offset); }
@media (min-width: 1101px) { .a-wrap .mnote { width: clamp(150px, calc((100vw - var(--a-text)) / 2 - clamp(24px, 3vw, 64px) - 32px), 300px); } }
@media (min-width: 1101px) { .a-wrap .mobj { width: clamp(90px, calc((100vw - var(--a-text)) / 2 - 140px), 160px); } }

/* 2. Header: centered title, quiet meta strip under it */
.a-head { max-width: var(--a-head); margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.a-head__kicker { color: var(--ink-2); margin-bottom: 24px; }
.a-head .post__title { font-size: clamp(40px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; max-width: 100%; }
.a-head .post__sub { margin-top: 32px; max-width: 34em; text-wrap: pretty; }
.a-meta { width: 100%; max-width: var(--a-wide); margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; text-align: left; }
.a-meta div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.a-meta dt { color: var(--ink-2); }
.a-meta dd { font-size: 17px; line-height: 1.35; }
.a-meta a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.a-wrap .post__body { margin-top: 112px; font-size: 22px; line-height: 1.6; }

/* Story header: the meta beside the big heading, the guest standing on the other side */
.a-head--story { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 64px; text-align: left; }
.a-head--story .a-head__text { flex: 1 1 0; min-width: 0; max-width: 780px; display: flex; flex-direction: column; align-items: flex-start; }
.a-head--story .post__title { font-size: clamp(44px, 5.4vw, 84px); text-wrap: balance; }
.a-head--story .a-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; margin-top: 56px; }
.a-head__guest { flex: none; position: relative; padding-top: 72px; margin-right: clamp(40px, calc(1600px - 100vw), 130px); }   /* narrower desktops: room for the "this is Sam" note */
.a-head__guest .figure--side > img { height: 520px; }
.a-head__guest .figure--side .note { left: 62%; top: -2%; }

/* 3a. Marked lines: an existing sentence, marked with the story tint */
.a-mark { background: linear-gradient(transparent 0.18em, var(--tint-bg) 0.18em, var(--tint-bg) calc(100% - 0.06em), transparent calc(100% - 0.06em)); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.12em; margin: 0 -0.12em; }

/* 3b. Callout: one sentence from the post, pulled out larger (the original stays in the text) */
.a-callout { margin: 96px 0; padding: 32px 0 0; border-top: 1px solid var(--ink); }
.a-callout p { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; max-width: 24em; }
.a-callout .label { display: block; margin-top: 20px; color: var(--ink-2); }
.post__body .a-callout + p { margin-top: 0; }

/* 3c. Table: comparable items from the post, side by side */
.a-table { margin-block: 72px; }
.a-table table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.45; }
.a-table th, .a-table td { text-align: left; vertical-align: top; padding: 16px 24px 16px 0; border-top: 1px solid var(--rule); }
.a-table thead > tr > * { border-top: 1px solid var(--ink); }
.a-table thead th { padding-top: 14px; padding-bottom: 14px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.01em; color: var(--ink-2); }
.a-table tbody th { font-weight: 600; width: 26%; }
.a-table tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.a-table td.a-num { font-variant-numeric: tabular-nums; }
.a-table figcaption { display: block; padding-top: 14px; border-top: 1px solid var(--ink); margin-bottom: 8px; color: var(--ink-2); }
.a-table figcaption + table thead > tr > * { border-top: 0; }
.post__body .a-table + p, .post__body .a-chart + p { margin-top: 0; }

/* 3d. Chart: a few numbers from the post as plain bars, no motion */
.a-chart { margin-block: 72px; padding-top: 14px; border-top: 1px solid var(--ink); }
.a-chart__t { display: block; color: var(--ink-2); margin-bottom: 24px; }
.a-chart__rows { display: flex; flex-direction: column; gap: 14px; }
.a-chart__row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 7ch; align-items: center; gap: 20px; font-size: 17px; line-height: 1.2; }
.a-chart__bar { height: 28px; position: relative; }
.a-chart__bar i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--ink); }
.a-chart__row--total .a-chart__bar i { background: transparent; border: 1px solid var(--ink); }
.a-chart__v { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }

/* 4. In short: the one-paragraph summary, no window chrome */
.a-short { margin: 112px 0 0; padding: 20px 0 0; border-top: 1px solid var(--ink); }
.a-short .label { display: block; color: var(--ink-2); margin-bottom: 16px; }
.a-short p { font-size: 24px; line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
.post__body .a-short + .post__sign { margin-top: 72px !important; }

/* 5. Chapter rail (r-article.js): ticks in the left margin, progress fills the line. Fades in once
   the body starts and out after it ends (no layout shift). No side room below 1100px: a hairline under the nav. */
.a-rail { --gap: 40px; position: fixed; z-index: 40; left: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: calc(var(--n) * var(--gap)); opacity: 0; visibility: hidden; transition: opacity var(--t-fast) var(--ease-out), visibility 0s linear var(--t-fast); }
@media (min-width: 1360px) { .a-rail { left: var(--margin); } }
.a-rail.is-on, .a-bar.is-on { opacity: 1; visibility: visible; transition: opacity var(--t-fast) var(--ease-out); }
.a-rail__line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.a-rail__line i, .a-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 0; }
.a-rail__line i { transform: scaleY(var(--a-p, 0)); }
.a-rail__list { list-style: none; margin: 0; padding: 0; }
.a-rail__list li { position: absolute; left: 0; top: calc(var(--k) * var(--gap) - var(--gap) / 2); }
.a-rail__tick { position: relative; display: block; width: 32px; height: var(--gap); }
.a-rail__tick::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--rule); transform-origin: 0 0; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.a-rail__tick.is-past::before, .a-rail__tick[aria-current]::before, .a-rail__tick:focus-visible::before { background: var(--ink); }
.a-rail__tick[aria-current]::before { transform: scaleX(2); }
.a-rail__tick:focus-visible { outline: none; }
.a-rail__t { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); max-width: min(300px, max(80px, calc((100vw - 760px) / 2 - 80px))); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 6px; background: var(--paper); color: var(--ink); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease-out); }
.a-rail__t > span { color: var(--ink-2); margin-right: 8px; font-variant-numeric: tabular-nums; }
.a-rail__tick:focus-visible .a-rail__t { opacity: 1; outline: 1px solid var(--ink); outline-offset: 0; }
.a-rail__tick[aria-current] .a-rail__t { opacity: 1; }   /* the current chapter's name stays up; every label is capped to the margin, clear of the text column */
@media (hover: hover) and (pointer: fine) { .a-rail__tick:hover::before { background: var(--ink); } .a-rail__tick:hover .a-rail__t { opacity: 1; } }
.a-bar { display: none; position: fixed; z-index: 51;   /* above the nav's scroll-edge fade */
  left: 0; right: 0; top: var(--a-top); height: 2px; opacity: 0; visibility: hidden; transition: opacity var(--t-fast) var(--ease-out), visibility 0s linear var(--t-fast); pointer-events: none; }
.a-bar i { transform: scaleX(var(--a-p, 0)); }
body:has(.mnav[open]) .a-bar { visibility: hidden; }   /* never over the open phone menu */
@media (max-width: 1100px) { .a-rail { display: none; } .a-bar { display: block; } }
@media (prefers-reduced-motion: reduce) { .a-rail, .a-rail.is-on, .a-bar, .a-bar.is-on, .a-rail__tick::before, .a-rail__t { transition: none; } }

/* 6. Related: three image-led cards */
.a-related { max-width: calc(var(--a-wide) + 2 * var(--margin)); margin-inline: auto; }
.a-related .fig-head { margin-bottom: 48px; }
.a-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.a-card { display: flex; flex-direction: column; gap: 16px; }
.a-card__img { --pad: 28px; position: relative; display: block; aspect-ratio: 4 / 3; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r-sheet); box-shadow: var(--lift-paper); overflow: hidden; }
.a-card__img img { position: absolute; inset: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); object-fit: contain; }
.a-card__img--guest img { inset: 20px 0 0; width: 100%; height: calc(100% - 20px); object-position: 50% 100%; }
.a-card .label { color: var(--ink-2); }
.a-card__t { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) { .a-card:hover .a-card__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } }

/* Tablet */
@media (max-width: 1100px) {
  .a-head--story { flex-direction: column-reverse; align-items: stretch; gap: 32px; }
  .a-head--story .a-head__text { max-width: none; }
  .a-head__guest { align-self: center; margin-right: 0; padding-top: 56px; }
  .a-head__guest .figure--side > img { height: 380px; }
  .a-head__guest .figure--side .note { left: 62%; top: -15%; }
  .a-related__grid { gap: 24px; }
}

/* Phones */
@media (max-width: 760px) {
  .a-wrap .post-back { margin-bottom: 48px; }
  .a-head__kicker { margin-bottom: 16px; }
  .a-head .post__title { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.05; }
  .a-head .post__sub { margin-top: 24px; }
  .a-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; gap: 20px 24px; }
  .a-wrap .post__body { margin-top: 64px; font-size: 19px; line-height: 1.6; }
  .a-head--story { gap: 24px; }
  .a-head--story .post__title { font-size: clamp(36px, 10.4vw, 48px); }
  .a-head--story .a-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .a-head__guest { padding-top: 48px; }
  .a-head__guest .figure--side > img { height: 300px; }
  .a-head__guest .figure--side .note__text { font-size: 22px; }
  .a-callout { margin: 64px 0; padding-top: 24px; }
  .a-table, .a-chart { margin-block: 56px; }
  .a-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .a-table table, .a-table tbody, .a-table tr, .a-table th, .a-table td { display: block; width: auto; }
  .a-table tbody tr { padding: 16px 0; border-top: 1px solid var(--rule); }
  .a-table tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .a-table th, .a-table td, .a-table tbody tr:last-child > * { border: 0; padding: 0; }
  .a-table tbody th { width: auto; margin-bottom: 8px; }
  .a-table td + td { margin-top: 12px; }
  .a-table td[data-label]::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em; color: var(--ink-2); margin-bottom: 2px; }
  .a-chart__row { grid-template-columns: minmax(0, 1fr) 5ch; gap: 6px 12px; font-size: 16px; }
  .a-chart__row > span:first-child { grid-column: 1 / -1; }
  .a-chart__rows { gap: 18px; }
  .a-chart__bar { height: 22px; }
  .a-short { margin-top: 72px; }
  .a-short p { font-size: 21px; }
  .a-related .fig-head { margin-bottom: 32px; }
  .a-related__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .a-card { display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 16px; align-items: start; }
  .a-card__img { --pad: 12px; grid-row: 1 / span 2; }
  .a-card .label { padding-top: 4px; }
  .a-card__t { font-size: 19px; }
}
.post__body .subhead + .a-callout { margin-top: 0; }
/* Agents post: its margin doodle sits in the centered header instead */
.a-head .post__guest--doodle { display: block; position: static; margin-top: 48px; }
.a-head .post__guest--doodle .margin-doodle { align-items: center; margin-inline: auto; }
.a-table--even table { table-layout: fixed; }
.a-wrap:has(.a-head--story) .post-back { max-width: var(--a-head); }