/* Reading layouts share the product's fonts and color palette. */
.resource-page { overflow-wrap: break-word; }
.resource-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px 25px; }
.resource-nav a { font-size: 13px; font-weight: 700; text-decoration: none; }
.resource-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.resource-layout { max-width: 1040px; margin: 0 auto; padding: 44px 32px 96px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: #52614c; font-size: 13px; margin: 0 0 55px; }
.breadcrumbs a { text-underline-offset: 4px; }
.resource-header { max-width: 900px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.resource-header h1 { max-width: 900px; margin: 23px 0; font: 400 clamp(40px, 6vw, 70px)/1.08 var(--serif); letter-spacing: -.055em; }
.lede { max-width: 760px; color: #4c5c49; font-size: 19px; line-height: 1.7; }
.byline { max-width: 760px; color: #52614d; font-size: 13px; }
.byline a { text-underline-offset: 4px; }
.resource-prose { max-width: 820px; margin: 42px auto 0; font-size: 17px; line-height: 1.8; }
.resource-prose > section { margin-block: 52px; scroll-margin-top: 105px; }
.resource-prose h2 { margin: 42px 0 18px; color: var(--ink); font: 400 clamp(30px, 3.8vw, 43px)/1.17 var(--serif); letter-spacing: -.035em; }
.resource-prose h3 { margin: 30px 0 12px; font-size: 21px; line-height: 1.4; letter-spacing: -.02em; }
.resource-prose p, .resource-prose li { max-width: 76ch; }
.resource-prose li { margin-block: 10px; }
.resource-prose a { color: #456132; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.resource-prose code { padding: 2px 5px; border-radius: 5px; background: #e9eddf; font: .88em/1.6 ui-monospace, monospace; overflow-wrap: anywhere; }
.resource-prose pre { max-width: 100%; overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #ecf0e3; }
.resource-prose pre code { padding: 0; background: none; white-space: pre-wrap; }
.resource-prose .button-dark { color: white; }
.resource-note { padding: 22px 24px; border-left: 4px solid #849e59; border-radius: 0 14px 14px 0; background: #eaf0df; color: #3f503b; font-size: 15px; }
.resource-note > :last-child { margin-bottom: 0; }
.resource-figure { margin: 32px 0; }
.resource-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 18px; }
.resource-figure figcaption { margin-top: 11px; color: #596652; font-size: 13px; line-height: 1.6; }
.table-scroll { max-width: 100%; margin-block: 25px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.65; }
.table-scroll caption { padding: 17px; text-align: left; font-weight: 700; }
.table-scroll th, .table-scroll td { min-width: 145px; padding: 17px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table-scroll th { background: #e9efdc; color: #334a2a; font-weight: 750; }
.related-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-block: 30px; }
.related-guides > a { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fcfdf7; text-decoration: none; }
.related-guides > a:hover { background: #e8efd9; }
.related-guides strong { display: block; color: var(--ink); font-size: 19px; line-height: 1.4; margin-bottom: 11px; }
.related-guides span { display: block; color: #52634b; font-size: 14px; line-height: 1.7; }
.learn-section { padding-block: 88px; }
.learn-section .section-heading h2 { font-size: clamp(38px, 5vw, 65px); line-height: 1.07; }
.learn-section .section-heading p { max-width: 670px; margin-top: 24px; color: #53614e; }
.font-example { padding: 26px; margin: 28px 0; border: 1px solid #d8dfcc; border-radius: 20px; background: #fcfdf8; }
.font-example h2 { font-family: Georgia, "Times New Roman", serif; font-size: 42px; font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: normal; margin: 22px 0; }
.font-example h2.is-bold { font-weight: 700; }
.font-example p { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; font-style: italic; line-height: 1.5; letter-spacing: normal; }
.example-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.font-example-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.font-example-controls button[aria-pressed="true"] { background: var(--lime); border-color: #8da862; }
.font-example-specimen { margin-block: 24px; padding-block: 12px; }
#example-selection { font: 600 13px/1.5 var(--sans); color: #4f6443; margin-top: 25px; }
.resource-prose aside.related-guides { display: block; border-top: 1px solid var(--line); padding-top: 15px; }
.example-controls button, .font-example button { min-height: 44px; border: 1px solid #bac9aa; border-radius: 10px; background: #edf2e5; color: #253027; padding: 8px 15px; font: 700 13px/1.4 var(--sans); }
.example-controls button[aria-pressed="true"] { background: var(--lime); border-color: #8da862; }
.example-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; margin: 24px 0 0; padding-top: 19px; border-top: 1px solid var(--line); font-size: 14px; }
.example-readout dt { color: #58684e; font-size: 12px; }
.example-readout dd { margin: 0 0 7px; color: var(--ink); overflow-wrap: anywhere; }
.guide-resource-links { margin-block: 30px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.hero-brand-line { margin: 0 0 15px; color: #4c6040; font: italic 21px var(--serif); }
@media (max-width: 700px) {
  .resource-layout { padding: 28px 22px 65px; }
  .resource-nav { gap: 11px 15px; }
  .resource-nav a { font-size: 12px; }
  .resource-page .nav-wrap { flex-wrap: wrap; justify-content: flex-start; padding-block: 16px; }
  .resource-page .resource-nav { justify-content: flex-start; }
  .resource-header h1 { font-size: clamp(39px, 8vw, 58px); }
  .breadcrumbs { margin-bottom: 35px; font-size: 12px; }
  .resource-prose { font-size: 16px; line-height: 1.8; }
  .lede { font-size: 17px; }
  .related-guides { grid-template-columns: 1fr; }
  .font-example { padding: 19px; }
  .font-example h2 { overflow-wrap: anywhere; }
  .example-readout { grid-template-columns: 1fr; }
  .learn-section { padding-block: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .resource-page { scroll-behavior: auto; }
}