/* Article: read mode. Studio header, white paper column at a 68ch measure, the original videos after. */

/* ---------- Header ---------- */
.article-hero { padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.article-hero__inner { max-width: 62rem; }
.article-hero .display { max-width: 14ch; font-size: clamp(2.5rem, 1.3rem + 5vw, 5.5rem); }
.article-hero .lead { max-width: 48ch; }
.byline { margin-top: var(--s-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--studio-line); }
.byline .chyron { text-decoration: none; }
.byline .chyron:hover .chyron__name { background: #fff; }
.byline__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--on-studio-3); }

/* ---------- Body ---------- */
.article-body-wrap { padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.article-body { max-width: 70ch; margin-inline: auto; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.7; color: var(--ink); }
.article-body p { max-width: 68ch; }
.article-body p + p { margin-top: 1.15em; }
.article-body__open { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.article-body h2 { margin: 2.4em 0 0.8em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 780; letter-spacing: -0.03em; line-height: 1.1; }
.pull { margin: 2.2em 0; padding-block: 1.2em; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--sheet-line); }
@media (min-width: 1100px) { .pull { margin-inline: -6ch; } }
.pull .voice { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.06; color: var(--ink); }
.pull .voice p { max-width: 22ch; }
.pull--quiet .voice { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.18; }
.pull--quiet .voice p { max-width: 32ch; }
.article-end { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--sheet-line); display: grid; gap: var(--s-5); }
.article-end__note { font-weight: 700; font-size: var(--t-small); }
.article-end__author { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); align-items: center; font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; }
.article-end__author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.article-end__author strong { color: var(--ink); }
.article-end__author a { color: var(--tally-ink); font-weight: 650; }

/* ---------- The originals ---------- */
.originals__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
@media (min-width: 900px) { .originals__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.originals__head p { color: var(--on-studio-2); max-width: 44ch; }
.originals__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7) var(--s-6); justify-items: center; }
@media (min-width: 700px) { .originals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .originals__grid--two { grid-template-columns: repeat(2, minmax(0, 18rem)); justify-content: start; } }
.originals__grid > li { width: min(100%, 20rem); max-width: none; }
.original figcaption { margin-top: var(--s-4); display: grid; gap: 0.3rem; font-weight: 650; }
.original figcaption .time { color: var(--on-studio-3); }

/* ---------- Close ---------- */
.article-close__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
@media (min-width: 960px) { .article-close__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--s-9); align-items: end; } }
.article-close .h2 { max-width: 14ch; }
.article-close p { margin-top: var(--s-5); color: var(--ink-2); max-width: 46ch; }
.article-close .cta-group { margin-top: var(--s-6); }
.next-read { display: grid; gap: var(--s-3); padding: var(--s-6); background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-sheet); text-decoration: none; }
.next-read .time { color: var(--ink-2); }
.next-read__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.next-read__go { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; color: var(--tally-ink); font-size: var(--t-small); }
.next-read__go svg { width: 16px; height: 16px; transition: transform var(--d-med) var(--ease-out); }
.next-read:hover .next-read__go svg { transform: translateX(3px); }