/* ==========================================================================
   Article Page
   ========================================================================== */

.page-article {
  background: var(--color-quarter-white);
  padding-top: 34px;
}

/* ---- Article Title Block ---- */
.article-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 20px 127px;
  height: 373px;
  width: 100%;
  max-width: var(--content-width);
  overflow: hidden;
}

.article-title-block__category {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  text-transform: uppercase;
  color: var(--color-black);
  text-align: center;
}

.article-title-block__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  color: var(--color-black);
  text-align: center;
  width: 100%;
}

.article-title-block__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.article-title-block__info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.article-title-block__date {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-transform: uppercase;
  color: var(--color-shuttle-gray);
}

.article-title-block__dot {
  width: 6px;
  height: 6px;
  background: var(--color-black);
}

.article-title-block__author {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-transform: uppercase;
  color: var(--color-claret);
}

.article-share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.article-share__label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-normal);
  color: var(--color-black);
}

/* ---- Article Hero Image ---- */
.article-hero {
  max-width: 1078px;
  width: 100%;
  margin: 0 auto;
}

.article-hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1078 / 548;
  object-fit: cover;
}

.article-hero__divider {
  margin-top: 57px;
}

/* ---- Article Body ---- */
.article-body {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

/* In-content imagery (editor-inserted figures, gallery items, embeds).
 * WordPress emits explicit width/height attributes on every <img> for
 * CLS reasons; if we constrain width responsively without also setting
 * `height: auto`, those attributes are honored as a fixed CSS height
 * and the image is squished or stretched. The rule below preserves the
 * intrinsic aspect ratio of every image the author drops into the post
 * body, regardless of its original dimensions. */
.article-body img,
.article-body figure img,
.article-body .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.article-body p {
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: var(--leading-normal);
  color: var(--color-black);
  margin-bottom: 1.5em;
}

/* Drop cap */
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-9xl);
  line-height: 1;
  float: left;
  margin-right: 8px;
  margin-top: 6px;
  color: var(--color-black);
}

/* ---- Pull Quote ---- */
.quote-section {
  display: flex;
  align-items: center;
  gap: 59px;
  max-width: 1078px;
  margin: 0 auto;
}

.quote-section__text {
  display: flex;
  flex-direction: column;
  gap: 46px;
  max-width: 597px;
}

.quote-section__text::before,
.quote-section__text::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-black);
  opacity: 0.15;
}

.quote-section__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--color-black);
  max-width: 560px;
}

.quote-section__image {
  width: 422px;
  height: 361px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---- Byline (REQ-37 / LYC-158) ----
   Canonical byline block emitted by lyceum_render_byline(). Mirrors
   the tokens from designs/html/design-tokens.css .byline section:
     font-family: var(--font-ui); font-size: 14px;
     color: shuttle-gray; letter-spacing: 0.04em; 44x44 avatar circle.
*/
/* LYC-689: was `display: flex; gap: var(--space-3, 12px)` which forced 12px
   between every byline child (label/name/sep/date) — including the gap
   between "By" and the author name that the client flagged. The byline is
   semantically a single sentence ("By {Name} · {Date}"); render it inline
   so whitespace flows naturally and the .byline__sep middot does the work
   of separating name from date. The .byline-guest variant overrides this
   below with inline-flex when it needs the avatar alignment. */
.byline {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-shuttle-gray);
  letter-spacing: 0.04em;
}

.byline .name {
  color: var(--color-black);
  font-weight: 500;
}

.byline a {
  color: inherit;
  text-decoration: none;
}

.byline a:hover {
  color: var(--color-claret);
}

.byline .dot {
  opacity: 0.5;
}

.byline .role {
  color: var(--color-shuttle-gray);
}

/* LYC-689: the guest-byline variant DOES need flex (for the 44px avatar
   alignment + flex-shrink behavior). The default .byline is now inline,
   so the guest variant restores flex on itself. */
.byline-guest {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}

.byline-guest .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-satin-linen);
  overflow: hidden;
  flex: 0 0 44px;
}

.byline-guest .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Author Card (REQ-37 / LYC-158) ----
   Rendered below the article body when byline_type = guest. Mirrors
   designs/html/single-guest.html .author-card tokens.
*/
.author-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-6, 24px);
  margin: var(--space-12, 48px) auto 0;
  padding: var(--space-8, 32px) var(--space-6, 24px);
  background: var(--color-satin-linen);
  border-left: 3px solid var(--color-claret);
  max-width: 800px;
  width: 100%;
}

.author-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 var(--space-3, 12px);
  color: var(--color-black);
  grid-column: 1 / -1;
}

.author-card .bio {
  font-family: var(--font-body-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-black);
  margin: 0 0 var(--space-4, 16px);
  grid-column: 1 / -1;
}

.author-card .bio p {
  margin: 0 0 var(--space-3, 12px);
}

.author-card .bio p:last-child {
  margin-bottom: 0;
}

.author-card .more-from {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-claret);
  text-decoration: none;
  grid-column: 1 / -1;
}

.author-card .more-from:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .author-card {
    grid-template-columns: 1fr;
    padding: var(--space-6, 24px) var(--space-4, 16px);
  }
}

/* ---- About The Author (legacy; retained for non-byline surfaces) ---- */
.about-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  max-width: 1078px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0;
}

.about-author__divider {
  display: flex;
  align-items: center;
  gap: 39px;
  width: 100%;
}

.about-author__divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-black);
  opacity: 0.15;
}

.about-author__divider-icon {
  width: 50px;
  height: 76px;
  flex-shrink: 0;
}

.about-author__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  max-width: 797px;
}

.about-author__label {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-transform: uppercase;
  color: var(--color-black);
  text-align: center;
}

.about-author__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--color-claret);
  text-align: center;
}

.about-author__bio {
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-shuttle-gray);
  text-align: center;
  max-width: 797px;
}

/* ---- Recommended + Most Read Sidebars ---- */
.article-sidebars {
  display: flex;
  gap: 70px;
  align-items: flex-start;
  max-width: 1078px;
  margin: 0 auto;
}

.article-sidebars__divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-black);
  opacity: 0.15;
}

/* ---- Article Layout Container ----
   Not max-width-constrained so full-width sections (subscribe banner)
   can bleed to the viewport edge.
*/
.article-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}

.article-content__inner {
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  padding: 0 var(--content-margin);
}

/* ==========================================================================
   LYC-216: Single Article (canonical rewrite)
   Matches designs/html/single-editors.html + designs/html/single-guest.html.
   ========================================================================== */

/* ---- Container: 720px reading column ---- */
.container-article {
  width: 100%;
  max-width: var(--container-article, 720px);
  margin-inline: auto;
  padding-inline: var(--gutter, 24px);
}

/* ---- Article hero: eyebrow, H1, dek, byline + share ---- */
.article-hero {
  padding: var(--space-12, 48px) 0 var(--space-8, 32px);
}

/* Eyebrow category link (LYC-234). Global rule so it styles wherever
   .eyebrow-link appears (hero, cards, etc.). Mirrors design-tokens.css
   .eyebrow-link tokens: Claret, uppercase, Archivo Narrow 14px, 0.08em. */
.eyebrow-link {
  color: var(--color-claret);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  display: inline-block;
  margin-bottom: var(--space-3, 12px);
}

.eyebrow-link:hover,
.eyebrow-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-claret-hover);
}

.article-hero .eyebrow-link {
  margin-bottom: 0; /* type-eyebrow-lg wrapper provides its own rhythm */
}

/* Article H1 (LYC-234). Force the .type-display-5xl 60px clamp spec
   even when the global .type-display-5xl rule falls back to the fixed
   --text-5xl (48px) token. Mirrors designs/html/design-tokens.css
   --fs-display-5xl: clamp(40px, 4.5vw, 60px). */
.article-hero .article-h1,
.article-hero h1.type-display-5xl,
h1.article-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-5xl, clamp(40px, 4.5vw, 60px));
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: var(--space-4, 16px) 0 var(--space-5, 20px);
  color: var(--color-black);
}

/* Dek / article subtitle (LYC-234). Source Serif 20px, shuttle-gray,
   constrained measure. Only renders when ACF subtitle is set. */
.dek,
.article-hero .dek {
  color: var(--color-shuttle-gray);
  max-width: 58ch;
  margin: 0 0 var(--space-6, 24px);
}

.article-hero .dek {
  margin: 0 0 var(--space-8, 32px);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6, 24px);
  padding-top: var(--space-6, 24px);
  border-top: var(--rule-width, 1px) solid var(--color-rule);
}

/* ---- Hero featured image (16:9) ----
   LYC-234: the canonical mockup wraps the featured image in
   <figure class="hero-figure"> with <figcaption class="hero-caption">.
   We keep .article-hero-image as a legacy alias so both class names
   resolve to the same visual treatment. */
.hero-figure,
.article-hero-image {
  margin: var(--space-8, 32px) 0 var(--space-12, 48px);
}

.hero-figure img,
.hero-figure .hero-image,
.article-hero-image img,
.article-hero-image .hero-image {
  width: 100%;
  /* `height: auto` neutralizes the WP-emitted height attribute
   * (e.g. <img width="1024" height="576">) which would otherwise be
   * treated as a CSS height and override the aspect-ratio computation,
   * cropping a 16:9 source down to the wrong shape. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--color-satin-linen);
}

.hero-figure .hero-caption,
.hero-figure figcaption,
.article-hero-image .caption,
.article-hero-image figcaption {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 13px;
  color: var(--color-shuttle-gray);
  margin-top: var(--space-3, 12px);
  letter-spacing: 0.02em;
}

/* ---- Article body typography ---- */
.type-article {
  font-family: var(--font-body-serif);
  font-size: clamp(18px, 1.25vw, 20px);
  line-height: 1.65;
  color: var(--color-black);
}

.type-article p {
  margin: 0 0 var(--space-6, 24px);
}

.type-article h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: var(--space-12, 48px) 0 var(--space-4, 16px);
  color: var(--color-black);
}

.type-article h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  margin: var(--space-10, 40px) 0 var(--space-3, 12px);
  color: var(--color-black);
}

.type-article blockquote {
  margin: var(--space-8, 32px) 0;
  padding: 0 0 0 var(--space-6, 24px);
  border-left: var(--rule-thick, 2px) solid var(--color-satin-linen);
  font-style: italic;
  color: var(--color-black);
}

.type-article blockquote p {
  margin-bottom: var(--space-3, 12px);
}

/* Inline-link styling for every article-body surface.
   single.php + single-reel.php use `.type-article`; page.php (Privacy,
   Terms, generic Pages) uses `.article-body`; page-about.php uses `.prose`.
   Group all three so reader-body links render claret + underline uniformly,
   no matter which template emits the_content(). */
.type-article a,
.article-body a,
.prose a {
  color: var(--color-claret);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.type-article a:hover,
.article-body a:hover,
.prose a:hover {
  color: var(--color-claret-hover);
}

.type-article figure {
  margin: var(--space-10, 40px) 0;
}

.type-article figure img {
  width: 100%;
  height: auto;
}

.type-article figcaption {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 13px;
  color: var(--color-shuttle-gray);
  margin-top: var(--space-3, 12px);
}

/* ---- Pull quote (matches design-tokens.css .pullquote) ---- */
.pullquote {
  border-left: 3px solid var(--color-claret);
  padding: var(--space-4, 16px) 0 var(--space-4, 16px) var(--space-8, 32px);
  margin: var(--space-10, 40px) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.25;
  color: var(--color-black);
}

.pullquote p {
  margin: 0 0 var(--space-3, 12px);
}

.pullquote p:last-child {
  margin-bottom: 0;
}

.pullquote footer,
.pullquote cite,
.pullquote__attribution {
  display: block;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 13px;
  color: var(--color-shuttle-gray);
  margin-top: var(--space-4, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Share cluster (36x36 circular buttons) ---- */
.share-cluster {
  display: inline-flex;
  gap: var(--space-2, 8px);
  align-items: center;
}

.share-cluster .label {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-shuttle-gray);
  margin-right: var(--space-2, 8px);
}

.share-cluster a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: var(--rule-width, 1px) solid var(--color-rule);
  color: var(--color-black);
  border-radius: 50%;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.share-cluster a:hover,
.share-cluster a:focus-visible {
  border-color: var(--color-claret);
  color: var(--color-claret);
  background: var(--color-quarter-white);
  text-decoration: none;
}

/* ---- Article foot (reading time + share) ---- */
.article-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5, 20px);
  padding: var(--space-8, 32px) 0;
  margin-top: var(--space-10, 40px);
  border-top: var(--rule-width, 1px) solid var(--color-rule);
  border-bottom: var(--rule-width, 1px) solid var(--color-rule);
}

.read-time {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-shuttle-gray);
}

/* ---- Recommended section (3-card grid below article) ----
   LYC-716 / Surface 3: cards are now thumb + headline only. Excerpt, byline,
   and per-card eyebrow removed. Section heading shifted from Playfair display
   to Archivo Narrow uppercase Claret per D-RECOMMENDED-EYEBROW.

   Token map (spec name → Lyceum token):
     --color-border-subtle  → --color-rule
     --color-surface-muted  → --color-surface-warm (satin-linen)
     --color-text-primary   → --color-text
     --font-family-display  → --font-eyebrow (Archivo Narrow)
     --font-family-serif    → --font-display (Playfair Display)
     --radius-sm (4px)      → --tag-radius (4px, semantic match)
*/
.recommended {
  max-width: var(--container-max, 1280px);
  margin: var(--space-12, 48px) auto 0;
  padding: var(--space-12, 48px) var(--gutter, 24px);
  border-top: 1px solid var(--color-rule);
}

@media (max-width: 768px) {
  .recommended {
    padding-bottom: var(--space-10, 40px);
  }
}

.recommended .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6, 24px);
  margin-bottom: var(--space-6, 24px);
}

.recommended .section-head h2 {
  margin: 0;
}

/* D-RECOMMENDED-EYEBROW: Archivo Narrow uppercase 12px Claret. */
.recommended .section-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-claret);
  margin: 0;
}

.recommended .section-head a {
  font-family: var(--font-eyebrow);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-claret);
  text-decoration: none;
}

.recommended .section-head a:hover {
  text-decoration: underline;
}

.recommended .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6, 24px);
  grid-auto-rows: 1fr;
}

.recommended .card {
  display: flex;
  flex-direction: column;
}

.recommended .card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.recommended .card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--tag-radius, 4px);
  margin-bottom: var(--space-3, 12px);
  background: var(--color-surface-warm);
}

.recommended .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease-out;
}

.recommended .card:hover .card-thumb img {
  transform: scale(1.03);
}

.recommended .card h3,
.recommended .card-title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 20px * 1.25); /* 50px — locks 2-line baseline */
}

.recommended .card:hover h3,
.recommended .card:focus-within h3,
.recommended .card:hover .card-title,
.recommended .card:focus-within .card-title {
  color: var(--color-claret);
}

@media (max-width: 900px) {
  .recommended .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .recommended .grid-3 {
    grid-template-columns: 1fr;
    gap: var(--space-6, 24px);
  }

  .recommended .card h3,
  .recommended .card-title {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .article-hero {
    padding: var(--space-8, 32px) 0 var(--space-6, 24px);
  }

  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .article-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recommended .card-thumb img,
  .recommended .card:hover .card-thumb img {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   Author single (LYC-227 / R3-C4)
   /authors/{slug}/ profile page. Mirrors designs/html/single-author.html.
   ========================================================================== */
.page-author-single .author-hero { margin-block: var(--space-10) var(--space-12); }
.page-author-single .author-hero__inner {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 640px) {
  .page-author-single .author-hero__inner { grid-template-columns: 1fr; }
}
.page-author-single .author-hero__avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--color-satin-linen);
  object-fit: cover;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--color-claret);
}
.page-author-single .author-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.page-author-single .author-hero__role {
  color: var(--color-claret);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.page-author-single .author-hero__bio {
  color: var(--color-shuttle-gray);
  max-width: 58ch;
}
.page-author-single .author-hero__follow { margin-top: var(--space-3); }
.page-author-single .author-hero__count {
  align-self: flex-start;
  margin-top: var(--space-3);
}
.page-author-single .author-pieces { margin-block: var(--space-12); }
.page-author-single .author-pieces__empty {
  color: var(--color-shuttle-gray);
  font-family: var(--font-body-serif);
  font-size: 18px;
  padding: var(--space-8) 0;
}

/* REQ-31: Republished opinion attribution line. Renders above article body
   when ACF originally_published_in + original_url are both populated. */
.article-attribution {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.article-attribution a {
  color: var(--color-accent);
  text-decoration: none;
  margin-inline-start: var(--space-2);
}
.article-attribution a:hover {
  text-decoration: underline;
}