﻿/* Shared editorial presentation; colours and font reuse the marketing site. */
.resources { --resource-ink: #14251c; --resource-green: #146c3a; --resource-accent: #b7ee5b; --resource-warm: #f4f0e8; --resource-pale: #f7f9f5; max-width: 1180px; margin: 0 auto; padding: 32px 24px 72px; font-family: "FlowQuota Roboto", Arial, sans-serif; color: var(--resource-ink); overflow-wrap: anywhere; }
.resources h1 { font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.08; letter-spacing: -.035em; margin: 20px 0 24px; text-wrap: balance; }
.resources h2 { font-size: clamp(1.6rem, 2.7vw, 2rem); line-height: 1.2; letter-spacing: -.025em; margin: 40px 0 20px; }
.resources h3 { font-size: 1.45rem; line-height: 1.25; letter-spacing: -.015em; }
.resources p, .resources li { font-size: 1.125rem; line-height: 1.75; }
.resources a { color: var(--resource-green); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.resources a:hover { text-decoration-thickness: 2px; }
.resources :focus-visible { outline: 3px solid var(--resource-green); outline-offset: 5px; border-radius: 2px; }
.resources .resourceLabel { margin: 0 0 14px; color: var(--resource-green); font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.resources .resourceStandfirst { max-width: 66ch; margin-bottom: 0; font-size: 1.25rem; line-height: 1.65; }
.resourceBreadcrumb { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.resources .resourceBreadcrumb li { font-size: .85rem; line-height: 1.65; }
.resourceBreadcrumb li + li::before { content: "/"; margin-right: 10px; color: #475467; }
.resourceBreadcrumb a { display: inline-block; padding: 3px 0; }
.resourceOpening, .resourceMasthead { padding: clamp(24px, 4vw, 48px); background: var(--resource-warm); border-radius: 20px; }
.resourceOpening h1 { max-width: 19ch; }
.resourceOpening .resourceStandfirst { max-width: 64ch; }
.resourceBrowse > section { margin-top: 48px; }
.resourceGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 24px 0; }
.resourceGrid > section { padding: 22px 0 0; border-top: 4px solid #397342; }
.resourceGrid > section h3 { margin: 0 0 12px; font-size: 1.65rem; }
.resourceGrid > section h3 a { display: inline-block; padding: 5px 0; }
.resourceGrid > section p { margin: 0; }
.resourceLibrary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; }
.resourceCard { padding: 22px 0; border-top: 1px solid #d8e2da; }
.resourceCard h3 { margin: 0 0 14px; font-size: 1.65rem; }
.resourceCard h3 a { color: var(--resource-ink); }
.resourceCard p { margin: 0; }
.resourceCard time { display: block; margin-top: 12px; color: #475467; }
.resourceLibrary > :only-child { grid-column: 1 / -1; padding: clamp(24px, 4vw, 40px); border: 0; border-left: 5px solid #397342; background: var(--resource-pale); border-radius: 0 16px 16px 0; }
.resourceLibrary > :only-child h3 { max-width: 30ch; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.resourceLibrary > :only-child p { max-width: 72ch; }
.resourceBrowse .resourceFeature { padding: clamp(24px, 4vw, 48px); background: var(--resource-ink); color: #fff; border-radius: 20px; margin-top: 28px; }
.resourceFeature h2 { margin: 0 0 28px; color: #fff; font-size: 1.125rem; font-weight: 450; letter-spacing: 0; }
.resourceFeature .resourceCard { border: 0; padding: 0; max-width: 870px; }
.resourceFeature .resourceCard h3 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.16; text-wrap: balance; }
.resourceFeature .resourceCard h3 a { color: #fff; text-decoration-color: #b7ee5b; }
.resourceFeature .resourceCard p { color: #f7f9f5; max-width: 68ch; }
.resourceFeature .resourceCard .resourceLabel { color: var(--resource-accent); }
.resourceFeature > a, .resourceLinks a:first-child, .resources > .resourceNext > a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border-radius: 8px; font-weight: 700; text-align: center; }
.resourceFeature > a { margin-top: 24px; background: var(--resource-accent); color: var(--resource-ink); }
.resourceBrowse > .resourceNext { margin-top: 48px; padding: clamp(24px, 4vw, 40px); border-radius: 20px; background: var(--resource-ink); color: #fff; }
.resourceNext h2 { margin-top: 0; }
.resourceBrowse > .resourceNext p { max-width: 72ch; }
.resourceLinks { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin: 24px 0 0; }
.resourceLinks a { color: #fff; padding: 12px 0; min-height: 48px; }
.resourceLinks a:first-child { background: var(--resource-accent); color: var(--resource-ink); }
.resourceFeature :focus-visible, .resourceBrowse > .resourceNext :focus-visible { outline-color: var(--resource-accent); }
.resourcePublication { max-width: 960px; margin: 0 auto; }
.resourceMasthead h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); max-width: 26ch; }
.resourceMasthead > p:last-child { margin: 22px 0 0; font-size: .95rem; }
.resourcePublication > :not(.resourceMasthead), .resources > .resourceRelated, .resources > .resourceNext { max-width: 700px; margin-inline: auto; }
.resourcePublication > nav[aria-label="Contents"] { margin-top: 32px; margin-bottom: 36px; padding: 24px 28px; background: var(--resource-pale); border: 1px solid #d8e2da; border-radius: 12px; }
.resourcePublication > nav h2 { margin: 0 0 12px; font-size: 1.2rem; }
.resourcePublication > nav ol { margin: 0; padding-left: 22px; }
.resourcePublication > nav li { font-size: 1rem; line-height: 1.5; padding: 5px 0; }
.resourceBody h2 { margin-top: 44px; }
.resourceBody p { margin: 0 0 22px; }
.resourceBody blockquote { border-left: 4px solid #397342; margin: 28px 0; padding: 20px 24px; background: var(--resource-pale); }
.resourceBody blockquote p:last-child { margin-bottom: 0; }
.resourceBody img { max-width: 100%; height: auto; border-radius: 8px; }
.resourceBody pre { overflow-x: auto; padding: 20px; background: var(--resource-pale); border-radius: 8px; }
.resourceBody code { overflow-wrap: anywhere; }
.resourceTable { max-width: 100%; overflow-x: auto; margin: 28px 0; border: 1px solid #aebdab; border-radius: 6px; scrollbar-color: #397342 #f7f9f5; }
.resourceTable table { border-collapse: collapse; width: 100%; min-width: 600px; }
.resourceTable th, .resourceTable td { padding: 14px 16px; border: 1px solid #d8e2da; text-align: left; vertical-align: top; font-size: 1rem; line-height: 1.6; }
.resourceTable th { background: #f7f9f5; font-weight: 700; }
.resourceTable:focus-visible { outline-offset: 4px; }
.resourceAuthor { margin-top: 36px; padding: 24px; background: var(--resource-warm); border-radius: 12px; }
.resourceAuthor h2 { margin: 0 0 10px; font-size: 1.15rem; }
.resourceAuthor p { margin: 0; font-size: 1rem; }
.resourceRelated { margin-top: 40px; padding-top: 8px; border-top: 1px solid #d8e2da; }
.resourceRelated h2 { margin-top: 22px; font-size: 1.4rem; }
.resourceRelated ul { padding: 0; list-style: none; }
.resourceRelated li { margin: 12px 0; }
.resourceRelated a { display: inline-block; padding: 6px 0; font-weight: 650; }
.resources > .resourceNext { margin-top: 32px; padding: 28px; background: var(--resource-pale); border: 1px solid #d8e2da; border-radius: 12px; }
.resources > .resourceNext h2 { font-size: 1.25rem; }
.resources > .resourceNext > a { background: var(--resource-ink); color: #fff; }
.resourceEvidence { padding: 24px; margin-top: 28px; background: var(--resource-pale); }
.resourceSources, .resourceCaption { overflow-wrap: anywhere; }
.resourceFigure, .resourceCaption { display: block; }
.resourceCaption { margin-top: 8px; font-size: .95rem; }
.resourcePagination { display: flex; flex-wrap: wrap; gap: 16px; padding: 0; list-style: none; }
.resourcePreview { background: #14251c; color: white; text-align: center; padding: 12px 20px; font: 600 14px/1.5 system-ui; }
.resources [id] { scroll-margin-top: 120px; }
@media (max-width: 767px) { .resourceGrid, .resourceLibrary { grid-template-columns: minmax(0, 1fr); } .resourceOpening, .resourceMasthead { padding: 28px 24px; } }
@media (max-width: 540px) { .resources { padding: 20px 16px 48px; } .resources p, .resources li { font-size: 1.075rem; } .resources h1 { font-size: 2.375rem; } .resources .resourceStandfirst { font-size: 1.125rem; } .resourceOpening, .resourceMasthead { padding: 24px 20px; border-radius: 12px; } .resourceBrowse .resourceFeature { padding: 24px; border-radius: 12px; } .resourceFeature .resourceCard h3 { font-size: 1.9rem; } .resourceLinks { align-items: stretch; flex-direction: column; gap: 4px; } .resourceLinks a { text-align: center; } .resourcePublication > nav[aria-label="Contents"] { padding: 22px; } .resourceTable::before { content: "Scroll horizontally to read the full table"; display: block; position: sticky; left: 0; width: 100%; padding: 10px 12px; background: #f7f9f5; color: #14251c; font-size: .85rem; border-bottom: 1px solid #d8e2da; } }
@media (prefers-reduced-motion: reduce) { html:has(.resources) { scroll-behavior: auto; } .resources *, .resources *::before, .resources *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
