/* /portfolio/content/: an annotated page. The real Book 9 page on a phone, with its parts called out in
   order, then the writing laid out like a table of contents. Sheet-white and editorial, with the amber
   "number" color carrying every dated figure. */
.cnt { background: var(--sheet); color: var(--ink); }
.cnt h2 { margin: 0 0 16px; font: 800 var(--h2)/1.08 var(--face); font-stretch: 112%; letter-spacing: -0.02em; text-wrap: balance; max-width: 28ch; }
.cnt-hero { padding-block: clamp(10px, 2.5vw, 32px) clamp(18px, 3vw, 32px); border-bottom: 3px solid var(--ink); }
.cnt-crumb { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 0.95rem; }
.cnt-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.cnt-switch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.cnt-switch a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); font-weight: 700; text-decoration-color: #c3cad3; }
.cnt-switch a[aria-current] { color: var(--ink); text-decoration-color: var(--number); text-decoration-thickness: 4px; }
.cnt-hero h1 { margin: 10px 0 14px; font: 800 var(--h1-page)/1.04 var(--face); font-stretch: 112%; letter-spacing: -0.025em; text-wrap: balance; max-width: 22ch; }
.cnt-lede { margin: 0; font-size: clamp(1.08rem, 1.7vw, 1.35rem); line-height: 1.55; }
.cnt-lede strong { color: var(--number-ink); }
.cnt-src { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--ink-soft); }

/* The annotated page */
.cnt-anatomy { padding-block: var(--section-tight); }
.cnt-anatomy-grid { display: grid; gap: 24px 56px; }
@media (min-width: 900px) { .cnt-anatomy-grid { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); align-items: start; } .cnt-shot { position: sticky; top: 16px; } }
.cnt-shot { margin: 0; justify-self: center; width: min(100%, 340px); }
.cnt-shot img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 8px var(--field), 0 14px 0 8px rgba(0, 0, 0, 0.12); }
.cnt-shot figcaption { margin-top: 18px; color: var(--ink-soft); font-size: 0.9rem; text-align: center; }
.cnt-notes { counter-reset: note; list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.cnt-notes li { counter-increment: note; display: grid; grid-template-columns: 36px 1fr; gap: 12px; line-height: 1.55; }
.cnt-notes li::before { content: counter(note); display: grid; place-items: center; width: 36px; height: 36px; background: var(--number); color: var(--ink); font-weight: 800; border-radius: 2px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2); }
.cnt-notes strong { display: block; }
.cnt-reason { margin: 0 0 18px; padding: 12px 14px; background: var(--paper); border-radius: var(--radius); color: var(--ink-soft); line-height: 1.55; }
.cnt-reason strong { color: var(--ink); }
.cnt-quote { margin: 0 0 16px; padding: 0 0 0 0; }
.cnt-quote p { margin: 0 0 6px; font: 700 clamp(1.2rem, 2.2vw, 1.6rem)/1.3 var(--face); }
.cnt-quote footer { color: var(--ink-soft); font-size: 0.88rem; }
.cnt-quote p::before { content: "\201C"; color: var(--number-ink); }
.cnt-quote p::after { content: "\201D"; color: var(--number-ink); }

/* Data and voice */
.cnt-data, .cnt-voice { padding-block: var(--section-tight); border-top: 1px solid var(--paper-line); }
.cnt-split { display: grid; gap: 8px 56px; }
@media (min-width: 900px) { .cnt-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.cnt-plain { font-size: 1.1rem; line-height: 1.55; }
.cnt-voice { background: var(--paper); }
.cnt-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .cnt-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cnt-lines li { padding: 18px; background: var(--sheet); border-radius: var(--radius); font: 700 1.15rem/1.4 var(--face); box-shadow: 0 4px 0 var(--paper-line); }

/* Table of contents */
.cnt-index { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 80px); }
.cnt-toc { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.cnt-toc li { counter-increment: toc; display: grid; grid-template-columns: 2.4em 1fr; gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--paper-line); }
.cnt-toc li::before { content: counter(toc, decimal-leading-zero); grid-row: span 2; color: var(--number-ink); font-weight: 800; padding-top: 12px; }
.cnt-toc a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 1.08rem; }
.cnt-toc span { color: var(--ink-soft); line-height: 1.5; }
@media (min-width: 900px) { .cnt-toc li { grid-template-columns: 2.4em minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } .cnt-toc li::before { grid-row: auto; padding-top: 0; } }
.cnt-next { margin-top: 28px; }
.cnt-next p { margin: 0 0 10px; }
.cnt-next a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }