/* Resource singles + Resources landing: classes for what the prototype styled inline. */
.res-header { padding: 60px 80px 40px; border-bottom: 1px solid var(--rule); }
.res-crumb { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.res-crumb a { color: inherit; text-decoration: none; }
.res-crumb-current { color: var(--accent); }
.res-title { font-family: var(--font-serif); font-size: 64px; font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 24px; max-width: 1100px; }
.res-meta { display: flex; gap: 32px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.article-body figure.photo { margin: 0 0 28px; }
.article-blockquote p { margin: 0; font: inherit; line-height: inherit; color: inherit; }
.res-checklist { list-style: none; padding: 0; margin: 0 0 32px; }
.res-checklist li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.55; }
.res-check { width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 4px; flex: none; margin-top: 3px; }
.res-checklist-note { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; }
.res-pdf { margin: 0 0 32px; }
.res-start-h { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 24px; font-weight: 500; }
.res-library { background: var(--bg2); border-top: 1px solid var(--rule); }
.res-library-head { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; margin-bottom: 56px; }
.res-library-h { font-family: var(--font-serif); font-size: 44px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; margin: 0; max-width: 720px; }

/* Story single: mirrors the prototype's story.html (16:9 video/poster band, then the copy). The
   featured photos are portrait crops, so the band shows their top third, as the prototype poster did. */
.story-single { padding: 56px 80px 100px; }
.story-single-video, .story-single-photo { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; box-shadow: var(--shadow-ink); margin: 0 0 40px; }
.story-single-video iframe, .story-single-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; border: 0; }
.story-single-quote { font-family: var(--font-serif); font-size: 30px; font-weight: 400; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 20px; max-width: 760px; }
.story-single-cite { display: flex; flex-direction: column; gap: 4px; margin: 0 0 48px; }
.story-single .article-body { max-width: 720px; }
/* Copy column beside a sticky rail (book-a-call box, more stories, guides), as in the prototype. */
.story-single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
.story-single-main { min-width: 0; }
.story-single-main .article-body { max-width: 800px; }
@media (max-width: 900px) {
  .story-single { padding: 32px 20px 56px; }
  .story-single-quote { font-size: 22px; }
  .story-single-layout { grid-template-columns: 1fr; gap: 48px; }
  .story-single .story-rail { position: static; }
}