/* Reading surfaces share the homepage's type, ink, and paper. */
.learn-intro { padding: 4.5rem 0 4rem; max-width: 58rem; }
.learn-intro .eyebrow { margin-bottom: 1.6rem; }
.learn-intro h1 { font-size: clamp(3.8rem, 7.5vw, 7rem); line-height: .94; }
.learn-intro h1 em { color: #617653; }
.learn-intro > p:last-child { max-width: 38rem; margin-top: 1.7rem; font-size: 1.125rem; color: var(--muted); }
.library-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 1.4rem; border-top: 1px solid var(--line); }
.library-heading h2 { font-size: 2rem; letter-spacing: -.025em; }
.library-heading > span, .library-heading > a { font-size: .875rem; color: var(--muted); }
.learn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
.learn-card { display: flex; flex-direction: column; align-items: start; padding: 2rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.learn-card .eyebrow { color: var(--muted); margin-bottom: 1rem; }
.learn-number { display: inline-block; margin-right: 1rem; color: var(--gold); }
.learn-card h3 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; max-width: 28rem; }
.learn-card > p { margin-top: 1rem; color: var(--muted); max-width: 30rem; }
.learn-card-link { margin-top: auto; padding-top: 1.4rem; font-size: .875rem; display: flex; gap: 1.5rem; }
.learn-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.editorial-note { margin-block: 4rem; border-left: 2px solid var(--gold); padding-left: 2rem; max-width: 48rem; }
.editorial-note h2 { font-size: 2rem; letter-spacing: -.025em; }
.editorial-note p { color: var(--muted); margin-top: 1rem; }
.breadcrumbs { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; font-size: .875rem; color: var(--muted); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.article-heading { padding-block: 2.5rem 3rem; max-width: 65rem; }
.article-heading .eyebrow { margin-bottom: 1.5rem; }
.article-heading h1 { font-size: clamp(3rem, 5.6vw, 5.5rem); line-height: 1.02; text-wrap: balance; }
.article-meta { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: 1.5rem; color: var(--muted); font-size: .875rem; }
.article-layout { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 42rem); column-gap: 5rem; padding-right: max(0px, calc((100% - 70rem) / 2)); align-items: start; }
.article-sidebar { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 2rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.article-sidebar summary { font-size: .875rem; cursor: pointer; }
.article-sidebar ol { padding-left: 1.2rem; margin: 1rem 0 1.5rem; font-size: .875rem; color: var(--muted); }
.article-sidebar li { padding-left: .25rem; margin-bottom: .75rem; }
.article-sidebar a { text-decoration: none; }
.article-sidebar a:hover { text-decoration: underline; }
.all-explainers { font-size: .875rem; }
.article-body { grid-column: 2; font-size: 1.0625rem; line-height: 1.85; }
.short-answer { grid-column: 2; background: #e7eadf; border-top: 2px solid #758563; padding: 1.6rem 2rem 1.8rem; }
.short-answer .eyebrow { margin-bottom: .9rem; }
.short-answer > p:last-child { font: 600 1.8rem/1.35 var(--display); color: var(--ink); }
.article-body > section { margin-top: 2.8rem; scroll-margin-top: 2rem; }
.article-body h2 { font-size: 2.1rem; line-height: 1.15; letter-spacing: -.025em; margin-bottom: 1rem; }
.article-body section p + p { margin-top: 1rem; }
.source-ref { font: 500 .75rem/1 var(--sans); vertical-align: super; white-space: nowrap; }
.article-sources { border-top: 1px solid var(--line); padding-top: 2rem; }
.article-sources ol { padding-left: 1.25rem; font-size: .875rem; line-height: 1.65; }
.article-sources li { margin-bottom: .8rem; padding-left: .3rem; scroll-margin-top: 2rem; }
.article-sources li:target { background: #e7eadf; outline: 4px solid #e7eadf; }
.source-note { font-size: .875rem; color: var(--muted); }
.article-invitation { margin-top: 2.5rem; padding: 2rem; background: var(--ink); color: var(--paper); }
.article-invitation .eyebrow { color: #ccd5bf; margin-bottom: 1rem; }
.article-invitation h2 { color: inherit; }
.article-invitation > p:not(.eyebrow) { font-size: 1rem; color: #e1e6d8; margin-bottom: 1.3rem; }
.article-invitation .button { background: #e6ebd6; color: var(--ink); line-height: 1.5; }
.related-reading { margin-block: 4.5rem 3rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.related-grid .learn-card h3 { font-size: 1.9rem; }
.related-grid .learn-card > p { font-size: .9375rem; }
.home-learn { padding-bottom: 5rem; }
.home-learn .library-heading { padding-top: 2rem; }
.home-learn-intro { max-width: 40rem; color: var(--muted); margin-bottom: .5rem; }
.learn-page .home-footer { border-top: 1px solid var(--line); }
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; padding-right: 0; }
  .related-grid { gap: 1.5rem; }
}
@media (max-width: 700px) {
  .learn-intro { padding-block: 3rem; }
  .learn-intro h1 { font-size: clamp(3.6rem, 13vw, 5rem); }
  .learn-intro > p:last-child { font-size: 1rem; }
  .library-heading { align-items: start; flex-direction: column; gap: .7rem; }
  .library-heading h2 { font-size: 1.9rem; }
  .learn-grid, .related-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .learn-card { padding-block: 1.8rem; }
  .learn-card h3, .related-grid .learn-card h3 { font-size: 2rem; }
  .editorial-note { margin-block: 3rem; padding-left: 1.25rem; }
  .article-heading { padding-block: 2rem; }
  .article-heading h1 { font-size: clamp(2.7rem, 10.5vw, 4rem); }
  .article-meta { font-size: .8125rem; }
  .article-layout { display: flex; flex-direction: column; gap: 1.8rem; }
  .article-sidebar { position: static; width: 100%; }
  .article-body { min-width: 0; width: 100%; font-size: 1rem; }
  .short-answer { padding: 1.4rem; }
  .short-answer > p:last-child { font-size: 1.6rem; }
  .article-body h2 { font-size: 1.9rem; }
  .article-body > section { margin-top: 2.2rem; }
  .article-invitation { padding: 1.5rem; }
  .article-invitation .button { gap: 1rem; font-size: .8125rem; }
  .related-reading { margin-block: 3rem 2rem; }
  .home-learn { padding-bottom: 3rem; }
}
@media print {
  .masthead, .home-footer, .article-sidebar, .article-invitation, .related-reading { display: none; }
  .article-layout { display: block; padding: 0; }
  .page-width { width: 100%; }
  .article-heading h1 { font-size: 2.5rem; }
  .article-body { grid-column: 2; font-size: 11pt; line-height: 1.6; }
}