/* ==========================================================================
   Blog post page (/post/<slug>/). Requires tokens.css, base.css, longform-simple.css
   (hero, jump bar, sticky contents, closing card) and subscribe.css.
   Mobile-first (360), enhanced at 640 / 960.
   ========================================================================== */
.post-hero__inner { display: grid; gap: var(--s-3); }
.post-title { max-width: 26ch; }
.post-byline { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-muted); }
.post-byline span + span::before { content: "\00b7"; margin-right: var(--s-2); }
.post-hero__fig { margin: 0; }
.post-hero__fig img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); background: var(--c-charcoal); }

.post-wrap--single { grid-template-columns: minmax(0, 1fr); }
.post-wrap--single .post-body { max-width: 760px; }

/* Article body: clean semantic HTML from the converter ---------------------- */
.post-body { display: block; font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.post-body > * + * { margin-top: var(--s-2); }
.post-body h2 { margin-top: var(--s-5); padding-top: var(--s-2); position: relative; font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--c-charcoal); scroll-margin-top: 72px; }
.post-body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px; background: var(--c-red-text); border-radius: 2px; }
.post-body h3 { margin-top: var(--s-4); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--c-slate); scroll-margin-top: 72px; }
.post-body p, .post-body li { max-width: 68ch; }
.post-body a { color: var(--c-link-text); text-decoration: underline; text-underline-offset: 2px; }
.post-body ul, .post-body ol { padding-left: var(--s-3); }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: var(--s-1); }
.post-body li > ul, .post-body li > ol { margin-top: var(--s-1); }
.post-body blockquote { padding: var(--s-2) var(--s-3); background: var(--c-surface); border-left: 5px solid var(--c-red-text); border-radius: var(--radius); font-family: var(--ff-serif); font-style: italic; }
.post-body blockquote p { max-width: none; }
.post-body blockquote p + p { margin-top: var(--s-1); }
.post-body .table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); }
.post-body table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.post-body th, .post-body td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.post-body th { background: var(--c-charcoal); color: var(--c-white); font-family: var(--ff-display); font-weight: normal; }

/* Author box ----------------------------------------------------------------- */
.post-author { margin-top: var(--s-6) !important; display: grid; gap: var(--s-1); padding: var(--s-3); background: var(--c-white); border: 1px solid var(--c-line); border-top: 4px solid var(--c-red-text); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.post-author__title { font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); }
.post-author__name { font-family: var(--ff-display); font-size: var(--fs-h3); color: var(--c-charcoal); }
.post-author p { max-width: none; }
.post-author__role { font-family: var(--ff-display); color: var(--c-red-text); }
.post-author__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
.post-author__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-family: var(--ff-display); color: var(--c-link-text); }

/* More in <subject> ---------------------------------------------------------- */
.post-related { padding-block: var(--s-5) 0; }
.post-related__title { font-size: var(--fs-h2); color: var(--c-charcoal); margin-bottom: var(--s-3); }
.post-related__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.post-related__card { display: flex; flex-direction: column; gap: var(--s-1); height: 100%; padding: var(--s-2); background: var(--c-white); border: 1px solid var(--c-line); border-top: 4px solid var(--c-red-text); border-radius: var(--radius); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: box-shadow var(--ease); }
.post-related__card:hover { box-shadow: var(--shadow-card-hover); }
.post-related__name { font-family: var(--ff-display); font-size: 1.0625rem; line-height: 1.3; color: var(--c-charcoal); }
.post-related__line { font-size: var(--fs-sm); color: var(--c-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (min-width: 640px) {
  .post-body { font-size: 1.0625rem; }
  .post-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .post-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: var(--s-5); }
  .post-hero__text { min-width: 0; }
  .post-title { font-size: 2.25rem; }
  .post-related__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Topper stories: At a glance, interview, actions, author photo ---------------- */
.post-author__text { display: grid; gap: var(--s-1); min-width: 0; }
.post-author--topper { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s-3); }
.post-author__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid var(--c-gold); background: var(--c-maroon); }
.post-glance { padding-block: var(--s-3) 0; }
.post-glance__inner { display: grid; gap: var(--s-3); align-items: start; }
.post-glance__card { display: grid; gap: var(--s-2); padding: var(--s-3); background: var(--c-white); border: 1px solid var(--c-line); border-top: 4px solid var(--c-gold); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.post-glance__title { font-size: var(--fs-h3); color: var(--c-charcoal); }
.post-glance__facts { display: grid; gap: var(--s-1) var(--s-3); grid-template-columns: minmax(0, 1fr); }
.post-glance__facts div { display: grid; gap: 2px; padding-left: var(--s-2); border-left: 3px solid var(--c-red-text); }
.post-glance__facts dt { font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.post-glance__facts dd { color: var(--c-charcoal); line-height: 1.4; }
.post-glance__video { display: grid; gap: var(--s-1); }
.post-glance__video .vcard__card { box-shadow: var(--shadow-card); }
.post-actions { margin-top: var(--s-5) !important; }
.post-actions .btn, .post-write .btn { flex: 1 1 auto; }
.post-write { margin-top: var(--s-4) !important; display: grid; gap: var(--s-2); padding: var(--s-3); background: var(--c-surface); border-radius: var(--radius); border-left: 4px solid var(--c-gold); }
.post-write__title { font-size: var(--fs-h3); color: var(--c-charcoal); }
@media (min-width: 640px) { .post-glance__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .post-glance__inner--video { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); } }
.post-glance__facts dd, .post-glance__facts dt { margin: 0; }

/* /topper-stories/ hub -------------------------------------------------------- */
.ts-year { padding-block: var(--s-4) 0; }
.ts-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-3); }
.ts-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-top: 4px solid var(--c-gold); }
.ts-card__head { display: flex; align-items: center; gap: var(--s-2); }
.ts-card__photo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c-gold); background: var(--c-maroon); }
.ts-card__photo--initials { display: grid; place-items: center; font-family: var(--ff-display); font-size: 1.5rem; color: var(--c-gold-light); }
.ts-card__name { font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--c-charcoal); }
.ts-card__rank { font-family: var(--ff-display); color: var(--c-red-text); }
.ts-card__college { font-size: var(--fs-sm); color: var(--c-text-muted); }
.ts-card__teaser { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.ts-card__foot { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: auto; padding-top: var(--s-1); }
.ts-card__foot .btn { flex: 1 1 auto; text-align: center; }
@media (min-width: 640px) { .ts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-body li > p + p { margin-top: var(--s-1); }
.post-cases { margin-top: var(--s-4); }
.post-cases h2 { margin-top: 0 !important; }
.post-glance__other { margin: 0; font-size: 1rem; }