/* pages/articles.css — articles hub + the seven article pages (Owner: D). Layout only; tokens only;
   the three breakpoints. Shared components (.opener .doc-list .doc-row .book-band .btn .social-links
   .eyebrow .marker .text-link .prose) come from main.css and are not restyled. */

/* ================= hub rows ================= */
.articles-hub__list{max-width:960px}
.article-row{align-items:start}
.article-row .doc-row__title{font-size:var(--fs-md);line-height:1.3;padding:8px 0}
.article-row .doc-row__note{font-size:var(--fs-base);color:var(--gray-text);max-width:34em}
.article-row__meta{grid-area:acts;align-self:start;font-size:var(--fs-sm);color:var(--gray-text);white-space:nowrap;padding-top:14px;text-align:right}
.articles-hub__foot{margin:var(--s-2) 0 0}

/* ================= article page ================= */
/* TEMP → opener.njk (COMPONENT-REQUESTS, D fix pass): the byline is emitted as `.article-by-band` right under the
   opener because an async image shortcode inside a {% set %} capture renders empty; once A adds an `actionsInclude`
   hook to opener.njk the band, these two rules and `#article-opener` go away and the byline returns to
   `.opener__actions.article-by`. The band reads as the opener's last row (same white ground, its bottom rule). */
#article-opener{border-bottom:0;padding-bottom:0}
.article-by-band{background:var(--white);border-bottom:1px solid var(--line);padding:var(--s-3) 0 var(--s-6)}
.article-by{margin-top:var(--s-3)}
.author-byline{display:flex;align-items:center;gap:14px;margin:0}
.author-byline img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:center 20%;border:2px solid var(--line);flex:none}
.author-byline .who{line-height:1.35}
.author-byline .who b{display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-base);color:var(--teal-deep)}
.author-byline .who span{font-size:var(--fs-sm);color:var(--gray-text)}

.article__end{max-width:var(--measure);margin-top:var(--s-9);display:grid;gap:var(--s-6)}

/* the book band as a short card at the end of the article (partial article-book-cta.njk) */
.book-band.article-book{padding:var(--s-6);border-radius:var(--r-xl);border:1px solid var(--mint-line)}
.article-book .wrap{max-width:none;padding:0}
.article-book .book-band__body h2{font-size:var(--fs-xl)}
.article-book .book-band__body>p{font-size:var(--fs-base)}

/* author card */
.author-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-5);align-items:start;background:var(--gray-wash);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6)}
.author-card__photo{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--line);background:var(--white)}
.author-card__body{min-width:0}
.author-card__name{font-size:var(--fs-lg);margin:var(--s-2) 0 var(--s-2)}
.author-card__body p{color:var(--ink)}
.author-card__actions{margin-top:var(--s-4)}

/* follow row (social-links partial) */
.article-follow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
.article-follow__label{margin:0;font-family:var(--display);font-weight:700;color:var(--teal-deep)}

/* ================= breakpoints ================= */
@media (max-width:640px){
  .article-row__meta{white-space:normal;text-align:left;padding-top:0}
  .article__end{margin-top:var(--s-7);gap:var(--s-5)}
  .book-band.article-book{padding:var(--s-4);border-radius:var(--r-lg)}
  .author-card{grid-template-columns:72px minmax(0,1fr);gap:var(--s-4);padding:var(--s-4)}
  .author-card__photo{width:72px;height:72px}
  .author-card__actions{grid-column:1/-1}
  .article-follow .social-links{width:100%}
  .article-follow .social-links li{flex:1 1 45%}
  .article-follow .social-links a{width:100%}
}