/* Public magazine pages: homepage, article, category, author.
   Builds on style.css tokens (brand colors, .btn, .container, .ad-slot). */

.section-block { margin: 3rem auto; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; border-bottom: 3px solid var(--color-orange); padding-bottom: 0.6rem; }
.section-header h2 { margin: 0; font-size: 1.5rem; }
.section-header__link { font-size: 0.85rem; font-weight: 600; color: var(--color-teal); white-space: nowrap; }
.section-header__link:hover { color: var(--color-orange); }

/* Category color system (reuses the 6 brand tokens, no new colors) */
.category-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; display: inline-block; margin: 0.75rem 0 0.35rem; }
.category-label--people-biographies, .category-label--business-money { color: var(--color-navy); }
.category-label--lifestyle, .category-label--entertainment { color: var(--color-orange); }
.category-label--relationships, .category-label--wellness { color: var(--color-teal); }
.category-label--opinion { color: var(--color-charcoal); }

.category-pill { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-white); }
.category-pill--people-biographies, .category-pill--business-money { background: var(--color-navy); }
.category-pill--lifestyle, .category-pill--entertainment { background: var(--color-orange); }
.category-pill--relationships, .category-pill--wellness { background: var(--color-teal); }
.category-pill--opinion { background: var(--color-charcoal); }

/* =========================================================================
   BBC-style homepage: dense, sharp-edged, hairline-divided. No card shadows,
   no border-radius, no rounded pill badges — plain text "eyebrow" category
   labels and thin gray rules do the organizing work instead. Uses the same
   6 brand tokens throughout (navy stands in for BBC's black nav/ink, orange
   for BBC's red accent) rather than introducing BBC's actual palette.
   ========================================================================= */

.eyebrow { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; margin-bottom: 0.4rem; }
.eyebrow--people-biographies, .eyebrow--business-money { color: var(--color-navy); }
.eyebrow--lifestyle, .eyebrow--entertainment { color: var(--color-orange); }
.eyebrow--relationships, .eyebrow--wellness { color: var(--color-teal); }
.eyebrow--opinion { color: var(--color-charcoal); }

.story-meta { font-size: 0.85rem; color: var(--color-text-muted); }

.section-title {
  font-family: var(--font-sans); font-size: 1.1rem; font-weight: 800; color: var(--color-charcoal);
  margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.02em;
}
.section-title--rule { padding-bottom: 0.6rem; border-bottom: 3px solid var(--color-orange); }

/* ===== Homepage section headers: title + subtitle, optional CTA ===== */
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.section-heading--ruled { padding-bottom: 0.6rem; border-bottom: 3px solid var(--color-orange); }
.section-heading .section-title { margin-bottom: 0.3rem; }
.section-heading__subtitle { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; max-width: 520px; }
.section-heading__cta { flex-shrink: 0; }

/* ===== Top story block: lead + secondary headline list ===== */
.top-story-block { display: grid; grid-template-columns: 1.7fr 1fr; gap: 0; margin: 1.5rem 0 2rem; border-top: 1px solid var(--color-border); }

.lead-story { padding: 1.25rem 1.5rem 1.25rem 0; border-right: 1px solid var(--color-border); }
.lead-story > a { position: relative; display: block; }
.lead-story img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 0.9rem; }
.lead-story h1 { font-size: 1.8rem; line-height: 1.2; margin-bottom: 0.6rem; }
.lead-story h1 a:hover { color: var(--color-orange); }
.lead-story p { color: var(--color-text-muted); margin-bottom: 0.6rem; max-width: 560px; }

.secondary-list { list-style: none; margin: 0; padding: 1.25rem 0 1.25rem 1.5rem; }
.secondary-list li { display: flex; border-bottom: 1px solid var(--color-border); padding: 0.9rem 0; }
.secondary-list li:first-child { padding-top: 0; }
.secondary-list li:last-child { border-bottom: none; padding-bottom: 0; }
.secondary-list a { display: flex; gap: 0.85rem; }
.secondary-list img { width: 84px; height: 64px; object-fit: cover; flex-shrink: 0; background: var(--color-light-gray); }
.secondary-list__title { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--color-charcoal); margin-bottom: 0.25rem; }
.secondary-list a:hover .secondary-list__title { color: var(--color-orange); }

/* Generic bottom spacing for any standalone admin-configured homepage
   section (grid / strip / feature_lead / compact_list) — see index.php's
   renderHomepageSectionContent()/homepageSectionWrapClass(). */
.homepage-section { margin-bottom: 2.5rem; }

/* ===== Carousel (admin-configurable "carousel" homepage section) — a
   full-width autoplay slideshow: one slide at a time, arrows + dots. ===== */
.carousel { position: relative; overflow: hidden; border-radius: 4px; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; transition: transform 0.5s ease; }
.carousel__slide { flex: 0 0 100%; position: relative; display: block; min-width: 0; }
.carousel__slide img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; background: var(--color-light-gray); }
.carousel__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem 2.25rem;
  background: linear-gradient(to top, rgba(16,42,67,0.9), rgba(16,42,67,0));
}
.carousel__caption h3 { color: var(--color-white); font-size: 1.6rem; line-height: 1.25; margin: 0.35rem 0 0.4rem; }
.carousel__caption .story-meta { color: rgba(255,255,255,0.78); }
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: rgba(16,42,67,0.55); color: var(--color-white);
  font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
.carousel__arrow--prev { left: 1rem; }
.carousel__arrow--next { right: 1rem; }
.carousel__arrow:hover { background: var(--color-orange); }
.carousel__dots { position: absolute; bottom: 0.9rem; left: 0; right: 0; display: flex; justify-content: center; gap: 0.45rem; z-index: 5; }
.carousel__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,0.5); cursor: pointer; }
.carousel__dot.is-active { background: var(--color-white); }

/* ===== Slider (admin-configurable "slider" homepage section) — a
   horizontally scrolling row of cards nudged by arrow buttons. ===== */
.slider { position: relative; }
.slider__track {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 0.25rem; scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__card { position: relative; scroll-snap-align: start; flex: 0 0 240px; }
.slider__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 0.6rem; background: var(--color-light-gray); }
.slider__card h4 { font-size: 1rem; line-height: 1.3; margin-bottom: 0.3rem; }
.slider__card h4 a:hover { color: var(--color-orange); }
.slider__arrow {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-white); color: var(--color-navy); font-size: 1.3rem; line-height: 1;
  cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.slider__arrow--prev { left: -0.9rem; }
.slider__arrow--next { right: -0.9rem; }
.slider__arrow:hover { background: var(--color-navy); color: var(--color-white); }

/* ===== Topic quick-nav strip beneath the hero ===== */
.topic-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.topic-nav__item {
  font-size: 0.85rem; font-weight: 700; padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border-left: 3px solid var(--color-border); background: var(--color-light-gray); color: var(--color-charcoal);
}
.topic-nav__item--people-biographies, .topic-nav__item--business-money { border-left-color: var(--color-navy); }
.topic-nav__item--lifestyle, .topic-nav__item--entertainment { border-left-color: var(--color-orange); }
.topic-nav__item--relationships, .topic-nav__item--wellness { border-left-color: var(--color-teal); }
.topic-nav__item--opinion { border-left-color: var(--color-charcoal); }
.topic-nav__item:hover { background: var(--color-navy); color: var(--color-white); }

/* ===== Dense "More Stories" grid + Most Read rail ===== */
.news-grid-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; margin-bottom: 2.5rem; align-items: start; }

.dense-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem 1.25rem; }
.dense-item { border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
.dense-item__image { position: relative; display: block; margin-bottom: 0.6rem; }
.dense-item__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-light-gray); }
.dense-item h3 { font-size: 1.05rem; line-height: 1.35; margin-bottom: 0.35rem; }
.dense-item h3 a:hover { color: var(--color-orange); }

.most-read-rail { border-top: 1px solid var(--color-border); padding-top: 0; }
.most-read-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.most-read-list li { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.most-read-list li:last-child { border-bottom: none; }
.most-read-list__rank { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; color: var(--color-orange); flex-shrink: 0; width: 20px; }
.most-read-list a { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--color-charcoal); }
.most-read-list a:hover { color: var(--color-orange); }

/* ===== Features & Analysis (slightly bigger cards, still sharp-edged) ===== */
.features-block { margin-bottom: 2.5rem; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.feature-card__image-link { position: relative; display: block; }
.feature-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 0.7rem; background: var(--color-light-gray); }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.feature-card h3 a:hover { color: var(--color-orange); }
.feature-card p { font-size: 0.98rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
/* The first feature (freshest editor's pick) runs bigger and wider than the
   rest of the grid, so the section reads as a real lead story, not just
   another uniform card wall. */
@media (min-width: 700px) {
  .feature-card--lead { grid-column: span 2; }
  .feature-card--lead img { aspect-ratio: 21 / 9; }
  .feature-card--lead h3 { font-size: 1.6rem; line-height: 1.25; }
  .feature-card--lead p { font-size: 1.05rem; max-width: 720px; }
}

/* ===== Category section strips (People / Business & Money / Entertainment) ===== */
.section-strip { margin-bottom: 2.5rem; }
.section-strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin-bottom: 0.75rem; }
.strip-item__image { position: relative; display: block; margin-bottom: 0.5rem; }
.strip-item__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-light-gray); }
.strip-item h4 { font-size: 0.98rem; line-height: 1.3; margin-bottom: 0.3rem; }
.strip-item h4 a:hover { color: var(--color-orange); }

/* ===== Newsletter strip (plain bordered box, no gradient banner) ===== */
.newsletter-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-orange);
  padding: 1.25rem 1.5rem; margin: 2rem 0 3rem; background: var(--color-light-gray);
}
.newsletter-strip strong { display: block; font-size: 1rem; color: var(--color-navy); }
.newsletter-strip span { font-size: 0.95rem; color: var(--color-text-muted); }
.newsletter-strip form { display: flex; gap: 0.6rem; flex-shrink: 0; }
.newsletter-strip input { padding: 0.6rem 0.85rem; border: 1px solid var(--color-border); font-family: inherit; font-size: 1rem; min-width: 220px; }

/* ===== Compact newsletter box (article page sidebar) ===== */
.newsletter-box { background: var(--color-light-gray); border: 1px solid var(--color-border); border-left: 4px solid var(--color-orange); padding: 1.25rem; margin-top: 1.5rem; }
.newsletter-box h3 { font-family: var(--font-sans); font-size: 1rem; margin-bottom: 0.4rem; }
.newsletter-box > p { color: var(--color-text-muted); font-size: 0.92rem; margin-bottom: 1rem; }
.newsletter-box form { display: flex; flex-direction: column; gap: 0.6rem; }
.newsletter-box input {
  padding: 0.65rem 0.85rem; border: 1px solid var(--color-border); font-family: inherit;
}

/* ===== Article cards + grid (category / author / search pages) ===== */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.75rem; margin: 1.5rem 0 2rem; }
.article-card { display: flex; flex-direction: column; }
.article-card__image-link { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-light-gray); }
.article-card__image { width: 100%; height: 100%; object-fit: cover; }
.article-card__title { font-size: 1rem; margin-bottom: 0.35rem; }
.article-card__title a:hover { color: var(--color-orange); }
.article-card__excerpt { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.article-card__meta { font-size: 0.85rem; color: var(--color-text-muted); }
.premium-flag {
  position: absolute; top: 0.5rem; right: 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--color-orange); color: var(--color-white);
  font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; text-transform: uppercase;
}
.premium-flag svg { width: 11px; height: 11px; flex-shrink: 0; }
.premium-flag--inline { position: static; display: inline-flex; margin-left: 0.5rem; vertical-align: middle; }

/* ===== Article detail page — same BBC treatment as the homepage: sharp
   edges everywhere, bold sans headline over serif body copy, hairline
   dividers instead of card backgrounds.

   Structure: a full-bleed hero image (outside .container, so it always
   spans the full viewport width on every screen size) comes first, then
   the title/byline block, then the two-column content+sidebar grid — the
   sidebar sits to the right on desktop and, since it's simply the second
   item in that single-column stack on mobile (see responsive.css), always
   falls after all of the main content there instead of beside it. ===== */
.article-hero { width: 100%; line-height: 0; background: var(--color-light-gray); }
.article-hero__image { width: 100%; height: 55vh; max-height: 560px; object-fit: cover; display: block; }

.article-video { position: relative; width: 100%; padding-top: 56.25%; margin: 1.5rem 0; background: var(--color-charcoal); }
.article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-video--link { padding-top: 0; display: flex; }
.article-video--link a {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem;
  background: var(--color-navy); color: var(--color-white); font-weight: 700; text-decoration: none;
}
.article-video--link a:hover { background: var(--color-orange); }

.article-page__header { max-width: 860px; margin: 2rem auto 0; }
.article-page__title {
  font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.01em;
  font-size: 1.9rem; line-height: 1.2; margin: 0.6rem 0 0.5rem; color: var(--color-charcoal);
}
.article-page__subtitle { font-family: var(--font-serif); font-size: 1.2rem; font-style: italic; color: var(--color-text-muted); margin-bottom: 1rem; }
.article-page__byline {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); flex-wrap: wrap;
}
.article-page__byline-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article-page__byline-name { font-weight: 700; color: var(--color-charcoal); }
.article-page__byline-meta { font-size: 0.85rem; color: var(--color-text-muted); }
.article-page__save-form { margin-left: auto; }

.article-page { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; margin: 1.5rem auto; align-items: start; }
.article-page__content { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.8; color: var(--color-charcoal); }
.article-page__content p { margin-bottom: 1.25rem; }

/* Sticky below the sticky site header (52px) with a little breathing room;
   capped to the viewport and scrollable internally so a sidebar taller than
   the screen (ad + related + trending + newsletter box) never gets cut off
   or pushes past the bottom of the viewport. */
.article-page__sidebar { position: sticky; top: 72px; max-height: calc(100vh - 92px); overflow-y: auto; }

/* ===== Biography layout — deliberately styled after Wikipedia (serif body,
   thin-rule section headings, grey "Contents" box, blue links, a floated
   infobox) for articles with is_biography_style = 1. Scoped entirely to
   .wiki-article so it never bleeds into the rest of the site's look. ===== */
.wiki-article { font-family: Georgia, 'Times New Roman', serif; line-height: 1.65; color: #202122; }
.wiki-article p { margin-bottom: 1rem; }
.wiki-article h2 {
  font-family: Georgia, 'Times New Roman', serif; font-size: 1.5rem; font-weight: 400;
  border-bottom: 1px solid #a2a9b1; padding-bottom: 0.3rem; margin: 1.75rem 0 0.9rem;
}
.wiki-article h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 1.15rem; font-weight: 700; margin: 1.25rem 0 0.6rem; }
.wiki-article a { color: #0645ad; }
.wiki-article a:hover { text-decoration: underline; }
.wiki-article ul, .wiki-article ol { margin: 0 0 1rem 1.5rem; }

.wiki-toc {
  display: inline-block; background: #f8f9fa; border: 1px solid #a2a9b1;
  padding: 1rem 1.75rem; margin: 0 0 1.5rem; font-family: sans-serif; font-size: 0.9rem; color: #202122;
}
.wiki-toc__title { font-weight: 700; margin: 0 0 0.6rem; }
.wiki-toc__list { list-style: none; counter-reset: wikitoc; padding: 0; margin: 0; }
.wiki-toc__list > li { counter-increment: wikitoc; margin-bottom: 0.35rem; }
.wiki-toc__list > li::before { content: counter(wikitoc) " "; }
.wiki-toc__sublist { list-style: none; counter-reset: wikisubtoc; padding: 0.35rem 0 0 1.5rem; margin: 0; }
.wiki-toc__sublist li { counter-increment: wikisubtoc; margin-bottom: 0.25rem; }
.wiki-toc__sublist li::before { content: counter(wikitoc) "." counter(wikisubtoc) " "; }
.wiki-toc a { color: #0645ad; }

.wiki-infobox {
  float: right; width: 280px; margin: 0 0 1.5rem 1.75rem;
  border: 1px solid #a2a9b1; background: #f8f9fa; font-family: sans-serif; font-size: 0.86rem; color: #202122;
}
.wiki-infobox__title { background: #cedff2; text-align: center; font-weight: 700; font-size: 1.15rem; padding: 0.6rem; font-family: Georgia, serif; }
.wiki-infobox__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.wiki-infobox__caption { text-align: center; font-size: 0.8rem; padding: 0.4rem; border-bottom: 1px solid #a2a9b1; color: #54595d; }
.wiki-infobox table { width: 100%; border-collapse: collapse; }
.wiki-infobox th, .wiki-infobox td { padding: 0.45rem 0.65rem; vertical-align: top; border-top: 1px solid #eaecf0; text-align: left; }
.wiki-infobox th { font-weight: 700; width: 38%; }
.article-page__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }
.tag-chip { border: 1px solid var(--color-border); padding: 0.3rem 0.75rem; font-size: 0.85rem; color: var(--color-text-muted); }
.tag-chip:hover { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.article-page__share { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; font-weight: 600; margin: 1.5rem 0; padding: 1rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.article-page__share span { color: var(--color-text-muted); }
.article-page__share a { color: var(--color-teal); }

/* ===== Article reactions bar ===== */
.article-reactions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.article-reactions__buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.article-reactions__form { display: contents; }
.reaction-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--color-border); background: var(--color-white);
  padding: 0.4rem 0.75rem; font-size: 0.9rem; font-weight: 700; color: var(--color-charcoal);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.reaction-btn:hover { border-color: var(--color-orange); }
.reaction-btn.is-active { border-color: var(--color-orange); background: rgba(237, 125, 49, 0.08); color: var(--color-orange); }
.reaction-btn--static { cursor: default; color: var(--color-text-muted); }
.reaction-btn--static:hover { border-color: var(--color-border); }
.reaction-btn__emoji { font-size: 1.05rem; line-height: 1; }
.article-reactions__total { font-size: 0.85rem; color: var(--color-text-muted); }

.author-box { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-orange); padding: 1.1rem 1.25rem; margin: 1.5rem 0; }
.author-box img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.author-box a { font-weight: 700; color: var(--color-charcoal); }
.publisher-badge { display: block; font-size: 0.82rem; color: var(--color-teal); font-weight: 600; margin-top: 0.15rem; }

/* ===== "Keep Exploring" category CTA ===== */
.explore-category-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  background: var(--color-navy); color: var(--color-white);
  padding: 1.5rem 1.75rem; margin: 2rem 0;
}
.explore-category-cta__eyebrow { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-orange); margin-bottom: 0.3rem; }
.explore-category-cta h2 { font-family: var(--font-sans); font-size: 1.3rem; margin-bottom: 0.3rem; color: var(--color-white); }
.explore-category-cta p { color: rgba(255,255,255,0.75); font-size: 0.92rem; margin: 0; }
.explore-category-cta .btn { flex-shrink: 0; }

/* ===== "Apply to Be Featured" CTA — shown at the end of every article ===== */
.feature-me-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  background: var(--color-light-gray); border: 1px solid var(--color-border); border-left: 4px solid var(--color-orange);
  padding: 1.5rem 1.75rem; margin: 2rem 0;
}
.feature-me-cta__eyebrow { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-orange); margin-bottom: 0.3rem; }
.feature-me-cta h2 { font-family: var(--font-sans); font-size: 1.3rem; margin-bottom: 0.3rem; color: var(--color-charcoal); }
.feature-me-cta p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; }
.feature-me-cta .btn { flex-shrink: 0; }

/* ===== Previous/Next article navigation ===== */
.article-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  margin: 2rem 0; padding: 1.25rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.article-nav__link { display: flex; flex-direction: column; gap: 0.3rem; }
.article-nav__link--next { text-align: right; align-items: flex-end; grid-column: 2; }
.article-nav__label { font-size: 0.8rem; font-weight: 700; color: var(--color-teal); text-transform: uppercase; letter-spacing: 0.03em; }
.article-nav__title { font-weight: 700; color: var(--color-charcoal); line-height: 1.35; }
.article-nav__link:hover .article-nav__title { color: var(--color-orange); }

/* ===== More from this writer ===== */
.more-from-author { margin: 2rem 0; }
.more-from-author__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.more-from-author__item { display: block; }
.more-from-author__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 0.5rem; background: var(--color-light-gray); }
.more-from-author__item span { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.35; color: var(--color-charcoal); }
.more-from-author__item:hover span { color: var(--color-orange); }

/* ===== Read More grid (end of article) ===== */
.read-more-block { margin: 2.5rem 0; }
.read-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; }

/* ===== Trending Now sidebar widget (article page) ===== */
.trending-sidebar-widget { margin-bottom: 1.5rem; }
.trending-sidebar-widget h3 {
  font-family: var(--font-sans); font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  padding-bottom: 0.5rem; border-bottom: 3px solid var(--color-orange); margin-bottom: 0.25rem;
}
.trending-sidebar-widget .most-read-list li:first-child { padding-top: 0.5rem; }

.comments-section { margin-top: 2.5rem; }
.comments-section h2 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; padding-bottom: 0.6rem; border-bottom: 3px solid var(--color-orange); margin-bottom: 1.25rem; }
.comment-form { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.comment-form textarea { resize: vertical; border-radius: 0; }
.comment { display: flex; gap: 0.75rem; padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.comment__avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy); color: var(--color-white); font-size: 0.85rem; font-weight: 700;
}
.comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment__body { flex: 1; min-width: 0; }
.comment__time { font-size: 0.85rem; color: var(--color-text-muted); margin-left: 0.5rem; }
.comment p { margin: 0.4rem 0 0; }
.comment__reply-toggle { margin-top: 0.6rem; }
.comment-form--reply { margin: 0.75rem 0 0; }
.comment__replies { margin: 0.75rem 0 0 1.5rem; border-left: 2px solid var(--color-border); padding-left: 1rem; }
.comment--reply { border-bottom: none; padding: 0.6rem 0; }
.comment__actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.comment__actions .comment__reply-toggle { margin-top: 0; }
.comment__like-form { display: contents; }
.comment__like-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 1px solid var(--color-border); background: var(--color-white);
  padding: 0.25rem 0.6rem; font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted);
  cursor: pointer; border-radius: 999px;
}
.comment__like-btn:hover { border-color: var(--color-teal); color: var(--color-teal); }
.comment__like-btn.is-active { border-color: var(--color-teal); background: rgba(45, 125, 125, 0.08); color: var(--color-teal); }
.comment__like-btn--static { cursor: default; }
.comment__like-btn--static:hover { border-color: var(--color-border); color: var(--color-text-muted); }

.related-articles { margin-bottom: 1.5rem; }
.related-articles h3 {
  font-family: var(--font-sans); font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  padding-bottom: 0.5rem; border-bottom: 3px solid var(--color-orange); margin-bottom: 0.5rem;
}
.related-articles__item { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; font-weight: 600; }
.related-articles__item img { width: 64px; height: 50px; object-fit: cover; flex-shrink: 0; background: var(--color-light-gray); }
.related-articles__item:hover span { color: var(--color-orange); }

/* ===== Category page ===== */
.category-page__header { margin: 2rem 0 1.5rem; }
.category-page__header p { color: var(--color-text-muted); max-width: 640px; }
.category-page__subcats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }

.category-hero { background: var(--color-navy); color: var(--color-white); padding: 2.25rem 0 2.5rem; }
.category-hero__crumb { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-bottom: 0.9rem; }
.category-hero__crumb a { color: rgba(255,255,255,0.85); }
.category-hero__crumb a:hover { color: var(--color-orange); }
.category-hero__parent-badge {
  display: inline-flex; align-items: center; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--color-teal); color: var(--color-white);
  padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.85rem;
}
.category-hero h1 { color: var(--color-white); font-size: 2.1rem; margin: 0 0 0.5rem; }
.category-hero p { color: rgba(255,255,255,0.78); max-width: 640px; line-height: 1.6; margin: 0; }
.category-hero__meta { display: flex; gap: 1.75rem; margin-top: 1.4rem; font-size: 0.85rem; color: rgba(255,255,255,0.62); }
.category-hero__meta strong { color: var(--color-white); font-size: 1.05rem; display: block; font-family: var(--font-serif); }

.search-hero__form { display: flex; gap: 0.75rem; max-width: 560px; margin-top: 1.4rem; }
.search-hero__input {
  flex: 1; padding: 0.75rem 1rem; border: none; border-radius: var(--radius);
  font-size: 1rem; font-family: inherit;
}
.search-hero__input:focus { outline: 2px solid var(--color-orange); }

.category-explore { margin: 3rem 0 1rem; }
.category-explore__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }
.category-explore__card { display: block; border: 1px solid var(--color-border); overflow: hidden; }
.category-explore__card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--color-light-gray); }
.category-explore__card-body { display: block; padding: 0.9rem 1.1rem 1.1rem; }
.category-explore__card-body strong { display: block; color: var(--color-charcoal); font-size: 1rem; }
.category-explore__card:hover strong { color: var(--color-orange); }
.category-explore__card-count { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; }

/* ===== Author page ===== */
.author-hero { background: var(--color-navy); color: var(--color-white); padding: 2.5rem 0; }
.author-hero__inner { display: flex; gap: 1.75rem; align-items: center; }
.author-hero__avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid rgba(255,255,255,0.25); }
.author-hero__avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); color: var(--color-white);
  font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700;
}
.author-hero__body h1 { color: var(--color-white); font-size: 1.9rem; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.author-hero__bio { color: rgba(255,255,255,0.78); max-width: 620px; margin: 0.6rem 0; line-height: 1.6; }
.author-hero__meta { display: flex; gap: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 1rem; }
.author-hero__actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.author-hero__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--color-white);
}
.author-hero__social:hover { background: var(--color-orange); }
.author-hero__social svg { width: 16px; height: 16px; }
.publisher-badge--hero { display: inline-flex; align-items: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-teal); color: var(--color-white); padding: 0.2rem 0.6rem; border-radius: 999px; }

/* ===== Author page body: stats, category chips, spotlight, discovery ===== */
.author-page__stats { margin-top: 2rem; }
.author-page__categories { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.author-page__categories-label { font-weight: 700; color: var(--color-text-muted); font-size: 0.9rem; margin-right: 0.25rem; }
.tag-chip--active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }

.author-spotlight, .category-spotlight {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center;
  border: 1px solid var(--color-border); margin: 1.5rem 0 2.5rem;
}
.author-spotlight__image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-light-gray); }
.author-spotlight__image img { width: 100%; height: 100%; object-fit: cover; }
.author-spotlight__body { padding: 0 1.75rem 0 0; }
.author-spotlight__eyebrow { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-orange); margin-bottom: 0.5rem; }
.author-spotlight h2, .category-spotlight h2 { font-family: var(--font-sans); font-size: 1.5rem; line-height: 1.25; margin: 0.3rem 0 0.6rem; color: var(--color-charcoal); }
.author-spotlight:hover h2, .category-spotlight:hover h2 { color: var(--color-orange); }
.author-spotlight p, .category-spotlight p { color: var(--color-text-muted); margin-bottom: 0.75rem; }

.compact-article-list { display: flex; flex-direction: column; margin: 1.5rem 0 2rem; }
.compact-article-list__item { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--color-border); }

/* Homepage sections using this layout get two columns instead of one
   long single-file list, since they sit in a full-width section. */
.homepage-section .compact-article-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.compact-article-list__item img { width: 88px; height: 66px; object-fit: cover; flex-shrink: 0; background: var(--color-light-gray); }
.compact-article-list__item span { font-weight: 700; color: var(--color-charcoal); font-size: 1.02rem; line-height: 1.4; }
.compact-article-list__item:hover span { color: var(--color-orange); }

.discover-writers { margin: 3rem 0 1rem; }
.discover-writers__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.25rem; }
.discover-writers__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.25rem 0.75rem; border: 1px solid var(--color-border); }
.discover-writers__card img, .discover-writers__placeholder {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 0.75rem;
}
.discover-writers__placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-light-gray); color: var(--color-navy); font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; }
.discover-writers__card strong { color: var(--color-charcoal); font-size: 0.95rem; }
.discover-writers__card:hover strong { color: var(--color-orange); }
.discover-writers__count { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.3rem; }

/* ===== "How to Earn as a Publisher" landing page (earn-as-a-publisher.php) ===== */
.earn-hero {
  background: linear-gradient(135deg, var(--color-navy) 0%, #1a3a5c 55%, var(--color-teal) 130%);
  color: var(--color-white);
  padding: 4rem 0 3.5rem;
  text-align: center;
}
.earn-hero__inner { max-width: 760px; margin: 0 auto; }
.earn-hero__eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-orange); background: rgba(232, 114, 71, 0.14); border: 1px solid rgba(232, 114, 71, 0.4);
  padding: 0.35rem 0.9rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.earn-hero h1 { font-family: var(--font-sans); font-size: 2.6rem; line-height: 1.15; color: var(--color-white); margin: 0 0 1rem; }
.earn-hero > .earn-hero__inner > p { font-size: 1.1rem; color: rgba(255,255,255,0.82); line-height: 1.6; margin: 0 auto 2rem; max-width: 620px; }
.earn-hero__cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.earn-hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.earn-stat {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
  padding: 1.1rem 0.75rem;
}
.earn-stat strong { display: block; font-family: var(--font-sans); font-size: 1.5rem; font-weight: 800; color: var(--color-white); }
.earn-stat span { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 0.25rem; }

.earn-section { padding: 3.5rem 0; }
.earn-section--tinted { background: var(--color-light-gray); }
.earn-section__heading { text-align: center; max-width: 560px; margin: 0 auto 2.5rem; }
.earn-section__eyebrow { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-teal); margin-bottom: 0.5rem; }
.earn-section__heading h2 { font-family: var(--font-sans); font-size: 1.9rem; margin: 0; color: var(--color-charcoal); }
.earn-section__footnote { text-align: center; margin-top: 1.5rem; }

.earn-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.earn-step { text-align: center; padding: 0 0.5rem; }
.earn-step__number {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-navy); color: var(--color-white); font-family: var(--font-sans); font-weight: 800; font-size: 1.1rem;
  margin-bottom: 0.85rem;
}
.earn-step h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.earn-step p { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.55; margin: 0; }

.earn-formula { max-width: 720px; margin: 0 auto; text-align: center; }
.earn-formula__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.earn-formula__part {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px;
  padding: 0.6rem 1.1rem; font-weight: 700; color: var(--color-charcoal); font-size: 0.95rem;
}
.earn-formula__part--result { background: var(--color-orange); color: var(--color-white); border-color: var(--color-orange); }
.earn-formula__op { font-size: 1.2rem; font-weight: 700; color: var(--color-text-muted); }
.earn-formula__caption { font-size: 0.88rem; color: var(--color-text-muted); }

.earn-example {
  display: flex; align-items: center; gap: 1rem; max-width: 640px; margin: 2rem auto 0;
  background: var(--color-white); border: 1px solid var(--color-border); border-left: 4px solid var(--color-teal);
  padding: 1.25rem 1.5rem; border-radius: 8px;
}
.earn-example__icon { font-size: 1.8rem; flex-shrink: 0; }
.earn-example strong { color: var(--color-teal); }

.earn-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.earn-benefit { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: 10px; }
.earn-benefit__icon { font-size: 1.6rem; margin-bottom: 0.6rem; }
.earn-benefit h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.earn-benefit p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; margin: 0; }
.price-card__price { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 800; color: var(--color-orange); margin-bottom: 0.5rem; }
.price-card p { margin-bottom: 0.5rem; }

.earn-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.earn-categories--footer { margin-top: 2.5rem; }
.earn-categories__chip {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: 999px;
  padding: 0.5rem 1.1rem; font-size: 0.9rem; font-weight: 600; color: var(--color-charcoal);
}
a.earn-categories__chip:hover { border-color: var(--color-orange); color: var(--color-orange); }

.earn-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.earn-faq__item { border-left: 3px solid var(--color-orange); padding-left: 1.1rem; }
.earn-faq__item h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.earn-faq__item p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; margin: 0; }

.earn-cta { background: var(--color-navy); color: var(--color-white); padding: 3.5rem 0; text-align: center; }
.earn-cta__inner { max-width: 560px; margin: 0 auto; }
.earn-cta h2 { font-family: var(--font-sans); font-size: 1.9rem; color: var(--color-white); margin: 0 0 0.6rem; }
.earn-cta p { color: rgba(255,255,255,0.78); margin: 0 0 1.5rem; }
.earn-cta p a { color: var(--color-orange); }
.earn-cta__footnote { margin-top: 1.25rem !important; font-size: 0.85rem; }
.earn-cta__footnote a { color: var(--color-orange); }

/* ===== "Become a Publisher" application page (become-publisher.php) —
   reuses .earn-hero/.earn-section/.earn-benefits from the earn page above
   so the two feel like one connected flow, plus a few page-specific bits. */
.earn-hero__badges { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.earn-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
  padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--color-white);
}

.apply-status-card {
  max-width: 640px; margin: 0 auto 2rem; text-align: center;
  background: var(--color-white); border: 1px solid var(--color-border); border-top: 4px solid var(--color-orange);
  border-radius: 10px; padding: 2rem 1.75rem;
}
.apply-status-card h2 { margin-top: 0; }
.apply-status-card .btn { margin: 0.35rem; }

.apply-form-card {
  max-width: 720px; margin: 0 auto; background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: 12px; padding: 2.25rem 2rem;
  box-shadow: 0 10px 30px rgba(16, 42, 67, 0.07);
}
.apply-form-card h2 { margin-top: 0; }
.apply-form-card .form-section:last-of-type { margin-bottom: 1.75rem; }

/* ===== Responsive overrides for everything defined in this file =====
   These live HERE rather than in responsive.css deliberately: this
   stylesheet is loaded as an "extra" stylesheet, after style.css AND
   responsive.css (see includes/header.php), so a responsive.css rule
   trying to override a magazine.css selector would lose to the
   unconditional version of that same rule further down the cascade,
   regardless of viewport width. Keeping the override in the same file as
   the rule it overrides sidesteps that entirely. */
@media (max-width: 960px) {
  .top-story-block { grid-template-columns: 1fr; }
  .lead-story { border-right: none; border-bottom: 1px solid var(--color-border); padding: 1.25rem 0; }
  .secondary-list { padding: 1.25rem 0; }
  .news-grid-layout { grid-template-columns: 1fr; }

  .article-hero__image { height: 42vh; }
  .article-page { grid-template-columns: 1fr; gap: 0; }
  .article-page__header, .article-page { padding-left: 1rem; padding-right: 1rem; }
  .article-page__sidebar { position: static; max-height: none; overflow-y: visible; }
  .explore-category-cta, .feature-me-cta { flex-direction: column; align-items: flex-start; }
  .category-spotlight { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; }
  .wiki-infobox { float: none; width: 100%; margin: 0 0 1.5rem; }

  /* Sections collapse to a single column here, so the fixed desktop gap
     between them starts reading as cramped — give them noticeably more
     breathing room once everything stacks vertically. */
  .homepage-section, .news-grid-layout, .topic-nav { margin-bottom: 3.5rem; }
  .top-story-block { margin-bottom: 3rem; }
  .carousel__slide img { aspect-ratio: 4 / 3; }
  .carousel__caption { padding: 1.1rem 1.25rem; }
  .carousel__caption h3 { font-size: 1.2rem; }
  .carousel__arrow { width: 34px; height: 34px; font-size: 1.15rem; }

  .earn-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .earn-steps { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .earn-benefits { grid-template-columns: repeat(2, 1fr); }
  .earn-faq { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .lead-story h1 { font-size: 1.4rem; }
  .secondary-list img { display: none; }

  .newsletter-strip { flex-direction: column; align-items: stretch; text-align: center; }
  .newsletter-strip form { flex-direction: column; }
  .newsletter-strip input { min-width: 0; }

  .article-hero__image { height: 32vh; }
  .article-page__title { font-size: 1.5rem; }
  .article-page__byline { flex-wrap: wrap; }
  .article-page__save-form { margin-left: 0; }
  .author-hero, .category-hero { padding: 2rem 0; }
  .category-hero h1 { font-size: 1.6rem; }
  .category-hero__meta { gap: 1.1rem; }
  .search-hero__form { flex-direction: column; max-width: none; }
  .author-hero__inner { flex-direction: column; text-align: center; }
  .author-hero__avatar { width: 84px; height: 84px; }
  .author-hero__avatar--placeholder { font-size: 1.9rem; }
  .author-hero__body h1 { justify-content: center; font-size: 1.5rem; }
  .author-hero__meta, .author-hero__actions { justify-content: center; }
  .author-spotlight { grid-template-columns: 1fr; }
  .author-spotlight__body { padding: 1.25rem 1.25rem 1.5rem; }
  .compact-article-list__item img { width: 64px; height: 48px; }
  .compact-article-list__item span { font-size: 0.92rem; }
  .homepage-section .compact-article-list { grid-template-columns: 1fr; }

  .article-nav { grid-template-columns: 1fr; }
  .article-nav__link--next { grid-column: 1; text-align: left; align-items: flex-start; }

  .earn-hero { padding: 3rem 0 2.5rem; }
  .earn-hero h1 { font-size: 1.9rem; }
  .earn-hero__stats { grid-template-columns: 1fr 1fr; }
  .earn-steps { grid-template-columns: 1fr; }
  .earn-benefits { grid-template-columns: 1fr; }
  .earn-formula__row { gap: 0.4rem; }
  .earn-formula__part { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
  .earn-example { flex-direction: column; text-align: center; }
  .apply-form-card { padding: 1.5rem 1.25rem; }
  .apply-status-card { padding: 1.5rem 1.25rem; }
}