/* Typography and spacing calibration based on the approved editorial references. */
:root {
  --font-display: Iowan Old Style, Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif;
  --font-body: "Avenir Next", Avenir, Aptos, "Segoe UI", Arial, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --section-block: clamp(2.75rem, 4.6vw, 4.75rem);
  --grid-gap: clamp(1.15rem, 2.1vw, 1.9rem);
  --copy-measure: 64ch;
}

body {
  font-size: clamp(.96rem, .92rem + .12vw, 1.025rem);
  line-height: 1.58;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.container,
.container-wide {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
}

.container-wide { max-width: var(--container-wide); }

h1,
h2,
h3,
h4 {
  letter-spacing: -.032em;
  text-wrap: balance;
}

h1 { line-height: .98; }
h2 { line-height: 1.02; }
h3 { line-height: 1.08; }
p { text-wrap: pretty; }

.eyebrow,
.card-label {
  font-family: var(--font-body);
  font-size: clamp(.64rem, .61rem + .08vw, .7rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .13em;
}

.header-main { min-height: 4.7rem; }
.primary-nav ul { gap: clamp(.9rem, 1.7vw, 1.7rem); }
.primary-nav a {
  font-size: clamp(.72rem, .69rem + .08vw, .78rem);
  line-height: 1;
  letter-spacing: -.005em;
}
.primary-nav a[aria-current="page"]::after { bottom: -.72rem; }
.header-actions { gap: .15rem; }
.icon-button { min-width: 2.55rem; min-height: 2.55rem; }

.section { padding-block: var(--section-block); }
.section-head {
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(1.35rem, 2.5vw, 2.15rem);
}
.section-head h2 { font-size: clamp(2rem, 2.9vw, 2.8rem); }
.section-head p { max-width: 42ch; font-size: .86rem; line-height: 1.5; }
.grid { gap: var(--grid-gap); }

.hero-inner { min-height: clamp(31rem, 45vw, 36rem); }
.hero-copy-panel {
  padding-top: clamp(3.2rem, 6vw, 5.5rem);
  padding-right: clamp(2rem, 5vw, 4.75rem);
  padding-bottom: clamp(3rem, 5.5vw, 5rem);
}
.hero h1 {
  max-width: 9.6ch;
  margin-bottom: 1.15rem;
  font-size: clamp(3.45rem, 5.25vw, 4.95rem);
  line-height: .94;
}
.hero-copy {
  max-width: 32ch;
  margin-bottom: 1.15rem;
  font-size: clamp(1.02rem, .95rem + .25vw, 1.17rem);
  line-height: 1.52;
}
.hero-search { margin-top: .7rem; }
.hero-search .search-form input { padding-block: .82rem; }
.quick-links { gap: .35rem .85rem; margin-top: .85rem; font-size: .72rem; }
.hero-scene { min-height: clamp(31rem, 45vw, 36rem); }

.home-trending { padding-block: 1rem; }
.home-trending .section-head { margin-bottom: .7rem; }
.trend-card { min-height: 6.3rem; padding: .9rem 1.15rem; }
.trend-card h3 { font-size: .88rem; line-height: 1.28; }
.trend-card p { max-width: 26ch; font-size: .7rem; }

.need-section { padding-block: clamp(2.1rem, 3.7vw, 3.5rem); }
.need-section .section-head { max-width: 17rem; margin-bottom: 0; }
.need-section .section-head h2 { font-size: clamp(1.9rem, 2.6vw, 2.45rem); }
.need-card { min-height: 11.5rem; padding: .75rem 1.15rem 1rem; }
.need-icon { margin-bottom: .8rem; }
.need-card h3 { margin-bottom: .45rem; font-size: .85rem; line-height: 1.25; }
.need-card p { max-width: 23ch; font-size: .71rem; line-height: 1.48; }

.card-media { margin-bottom: .72rem; }
.card h3 {
  margin: .3rem 0 .45rem;
  font-size: clamp(1.27rem, 1.55vw, 1.62rem);
  line-height: 1.08;
}
.card p { max-width: 48ch; font-size: .82rem; line-height: 1.48; }
.card-meta { font-size: .66rem; letter-spacing: .005em; }

.page-hero { padding-block: clamp(3.2rem, 5.8vw, 5.4rem); }
.page-hero h1 {
  max-width: 13ch;
  margin-bottom: 1.15rem;
  font-size: clamp(3.05rem, 4.8vw, 4.45rem);
  line-height: .98;
}
.page-hero > .container-wide > p:not(.eyebrow) {
  max-width: 54ch;
  font-size: clamp(.95rem, .9rem + .16vw, 1.06rem);
  line-height: 1.55;
}
.filter-row { margin-top: clamp(2.6rem, 6.5vw, 5.5rem); }
.filter { font-size: .7rem; letter-spacing: .015em; }

[data-category] { column-gap: 1.45rem; padding: 1.25rem; }
[data-category] h3 { font-size: clamp(1.3rem, 1.65vw, 1.72rem); }
[data-category]:first-child h3 {
  max-width: 14ch;
  font-size: clamp(2.25rem, 3.2vw, 3.15rem);
  line-height: .99;
}

.breadcrumb { padding-block: 1rem; font-size: .7rem; line-height: 1.35; }
.article-header { padding: clamp(2.3rem, 4vw, 3.8rem) 0 2.35rem; }
.article-header h1 {
  max-width: 17ch;
  margin-bottom: 1.15rem;
  font-size: clamp(3.1rem, 4.75vw, 4.5rem);
  line-height: .98;
}
.standfirst {
  max-width: 58ch;
  margin-bottom: 1.15rem;
  font-size: clamp(.98rem, .93rem + .16vw, 1.08rem);
  line-height: 1.55;
}
.byline { gap: .45rem; margin-top: 1.25rem; font-size: .72rem; line-height: 1.35; }
.article-layout { gap: clamp(2.5rem, 5vw, 4.5rem); padding-block: clamp(3rem, 5vw, 5rem); }
.article-body {
  font-size: clamp(1rem, .97rem + .1vw, 1.06rem);
  line-height: 1.68;
}
.article-body p { margin-bottom: 1.15rem; }
.article-body h2 {
  margin: 2.25em 0 .55em;
  font-size: clamp(1.65rem, 2vw, 1.95rem);
  line-height: 1.1;
}
.article-body h3 {
  margin: 1.7em 0 .35em;
  font-size: clamp(1.25rem, 1.5vw, 1.45rem);
  line-height: 1.15;
}
.article-body ul,
.article-body ol { margin-block: .75rem 1.25rem; }
.callout { margin-block: 1.8rem; padding: 1.15rem 1.35rem; font-size: .88rem; line-height: 1.55; }
.toc { font-size: .76rem; line-height: 1.45; }
.toc h2 { margin-bottom: .8rem; font-size: .67rem; }
.toc li { margin-bottom: .38rem; }

.contributor-hero { gap: clamp(2.5rem, 5.5vw, 5rem); }
.contributor-hero h1 {
  margin-bottom: 1rem;
  font-size: clamp(3.8rem, 6.2vw, 5.9rem);
  line-height: .95;
}
.contributor-hero > div:last-child > p:not(.eyebrow):not(.card-meta) {
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.6;
}
.topic-list { margin-block: .75rem 0; gap: 0; }
.topic-list li { font-size: .72rem; line-height: 1.25; }

.site-footer { padding-top: clamp(2.5rem, 4vw, 3.75rem); }
.footer-grid { gap: clamp(2rem, 4vw, 4rem); }
.site-footer h2 { margin-bottom: .7rem; font-size: .67rem; }
.site-footer li { line-height: 1.55; }
.site-footer a { font-size: .74rem; }
.footer-bottom { margin-top: 2.4rem; padding-top: 1rem; }

@media (max-width: 1024px) {
  :root { --gutter: clamp(1.25rem, 3vw, 2rem); }
  .hero h1 { font-size: clamp(3.1rem, 6vw, 4.25rem); }
  .need-section .section-head { margin-bottom: 1.5rem; }
  .article-header h1 { font-size: clamp(3rem, 6vw, 4.1rem); }
}

@media (max-width: 760px) {
  :root {
    --gutter: 1.15rem;
    --section-block: 2.75rem;
    --grid-gap: 1.35rem;
  }
  body { font-size: .96rem; }
  .hero-copy-panel { padding: 2.8rem var(--gutter) 2.25rem; }
  .hero h1 { max-width: 10ch; font-size: clamp(3rem, 13.5vw, 4rem); }
  .hero-copy { font-size: 1rem; }
  .hero-scene { min-height: 17rem; }
  .section-head { display: block; }
  .section-head p { margin-top: .65rem; }
  .section-head h2 { font-size: 2.15rem; }
  .page-hero h1 { font-size: clamp(2.8rem, 12vw, 3.8rem); }
  .filter-row { margin-top: 2rem; }
  .article-header { padding-bottom: 1.75rem; }
  .article-header h1 { font-size: clamp(2.8rem, 12vw, 3.75rem); }
  .article-body { font-size: 1rem; line-height: 1.66; }
  .article-body h2 { margin-top: 2em; }
  .contributor-hero h1 { font-size: clamp(3.25rem, 15vw, 4.75rem); }
  .footer-grid { gap: 2rem; }
}

@media (max-width: 390px) {
  :root { --gutter: 1rem; }
  .hero h1 { font-size: 2.85rem; }
  .page-hero h1,
  .article-header h1 { font-size: 2.7rem; }
}


/* Reference alignment: broad, low-line-count display compositions. */
.page-hero .eyebrow,
.contributor-hero .eyebrow {
  max-width: none;
  font-size: clamp(.64rem, .61rem + .08vw, .7rem);
  line-height: 1.2;
  letter-spacing: .13em;
}

@media (min-width: 761px) {
  .hero h1 { max-width: 14ch; }
  .page-hero h1 { max-width: 18.5ch; }
  .article-header h1 { max-width: 22ch; }
  .primary-nav a { font-size: clamp(.76rem, .72rem + .1vw, .83rem); }
}

@media (max-width: 760px) {
  .hero h1 { max-width: 11.5ch; }
  .article-header h1 { font-size: clamp(2.45rem, 10.5vw, 3.35rem); }
}


/* Final sample-matched desktop line lengths. */
@media (min-width: 1025px) {
  .hero-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .hero h1 {
    max-width: 18ch;
    font-size: clamp(3.45rem, 4.65vw, 4.35rem);
  }
  .page-hero h1 {
    max-width: 22ch;
    font-size: clamp(3rem, 4.25vw, 4.05rem);
  }
  .article-header-inner { padding-right: 12rem; }
  .article-header h1 {
    max-width: 24ch;
    font-size: clamp(3rem, 4.2vw, 4rem);
  }
}


/* Exact desktop headline wraps observed in the supplied samples. */
@media (min-width: 1025px) {
  .hero h1 {
    max-width: 20ch;
    font-size: clamp(3.45rem, 4.4vw, 4rem);
  }
  .page-hero h1 {
    max-width: 26ch;
    font-size: clamp(3rem, 3.95vw, 3.55rem);
  }
  .article-header h1 { max-width: 28ch; }
  .need-section .section-head {
    width: 24%;
    max-width: 20rem;
    margin-right: 2%;
  }
  .need-section .section-head h2 { font-size: clamp(1.9rem, 2.35vw, 2.2rem); }
}


/* Homepage display wrap correction. */
@media (min-width: 1025px) {
  .hero h1 { max-width: 22ch; }
  .need-section .section-head {
    width: 26%;
    max-width: 22rem;
    margin-right: 1%;
  }
  .need-section .section-head h2 { font-size: 2rem; }
}


/* Two-line homepage hero at desktop reference width. */
@media (min-width: 1025px) { .hero h1 { max-width: 25ch; } }


/* Wide editorial pages use the wide measure, not the article container. */
.container-wide {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container-wide));
}


/* Homepage reference uses a two-line 60px desktop display. */
@media (min-width: 1025px) { .hero h1 { font-size: clamp(3.35rem, 4.15vw, 3.75rem); } }
.review-evidence-heading { margin-top: clamp(2.75rem, 6vw, 4.75rem); }
.editorial-note p { margin-bottom: 0; }