* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fcf9f2; color: #293528; font-family: 'Manrope', sans-serif; font-size: 1rem; line-height: 1.65; }
a { color: #154212; text-underline-offset: 4px; }
a:hover { color: #944926; }
a:focus-visible { outline: 3px solid #944926; outline-offset: 4px; border-radius: 3px; }
h1, h2, h3 { color: #154212; font-family: 'Noto Serif', Georgia, serif; font-weight: 500; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); letter-spacing: -.04em; margin: .7rem 0 1.5rem; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: .5rem 0 1.2rem; }
p { margin: 0 0 1.2rem; }
.skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 100; padding: .75rem 1rem; background: #154212; color: white; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); color: white; }
.site-header, .site-footer { width: min(1200px, 100%); padding: 1.5rem 2rem; margin: auto; display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; }
.site-header { border-bottom: 1px solid #dce0d4; }
.brand { color: #154212; font-family: 'Noto Serif', Georgia, serif; font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.brand span { display: block; font-family: 'Manrope', sans-serif; font-size: .75rem; font-weight: 500; color: #54604e; letter-spacing: .06em; }
.site-header nav, .site-footer nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.site-header nav a, .site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: .9rem; }
main { width: min(1200px, 100%); margin: auto; padding: 0 2rem; }
main:focus { outline: none; }
main > section { margin-block: 4.5rem; }
.hero-section { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-section > div { min-width: 0; }
.lead { font-size: 1.12rem; max-width: 52ch; }
.eyebrow { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .17em; color: #5b604d; }
.meta { font-size: .85rem; color: #54604e; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.3rem; background: #154212; color: white; border-radius: 6px; font-weight: 700; text-decoration: none; }
.button:hover { background: #23581f; color: white; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.profile-card { margin: 0; padding: .8rem; border-radius: 14px; background: #f0eee4; box-shadow: 0 15px 40px #1542120d; }
.profile-card img { display: block; width: 100%; height: auto; border-radius: 8px; }
.profile-card figcaption { padding: 1rem .5rem .3rem; color: #154212; font-weight: 700; }
.profile-card figcaption span { display: block; font-size: .8rem; font-weight: 500; color: #54604e; }
.resources { border-block-start: 1px solid #dce0d4; padding-block-start: 3rem; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.resource-card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem; min-height: 126px; background: #fffefb; border: 1px solid #d7ddcf; border-radius: 8px; text-decoration: none; }
.resource-card:hover { background: #edf2e7; border-color: #154212; }
.format { font-size: .65rem; letter-spacing: .1em; font-weight: 800; color: #5b604d; }
.resource-card strong { padding-inline-end: 1.3rem; }
.resource-arrow { position: absolute; inset-inline-end: 1.2rem; inset-block-end: 1.2rem; font-size: 1.2rem; }
.how-to { max-width: 850px; }
.how-to ol { padding-inline-start: 1.4rem; }
.how-to li { margin-bottom: .8rem; }
.notice { padding: 1.3rem; border-inline-start: 3px solid #5b704e; background: #edf1e5; color: #374432; font-size: .94rem; }
.limitations-box { padding: 2rem; background: #154212; color: #f4f8ee; border-radius: 10px; }
.limitations-box h2 { color: #f4f8ee; }
.language-section { border-block-start: 1px solid #dce0d4; padding-block-start: 2.5rem; }
.language-links { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.language-links a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .8rem; border: 1px solid #cbd3c2; border-radius: 6px; text-decoration: none; }
.faq-intro { max-width: 900px; }
.faq-list { max-width: 850px; }
.faq-item { padding-block: 2rem; border-block-start: 1px solid #dce0d4; scroll-margin-top: 1rem; }
.faq-item h2 { font-size: 1.55rem; margin-top: .8rem; }
.source-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.source-links a { display: inline-flex; align-items: center; min-height: 32px; font-size: .83rem; }
.site-footer { border-block-start: 1px solid #dce0d4; margin-top: 2rem; padding-block: 2rem; }
.site-footer p { color: #54604e; font-size: .83rem; margin-bottom: 0; }
p, a, strong, li, h1, h2 { overflow-wrap: anywhere; }
@media (max-width: 850px) { .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-header { align-items: flex-start; } }
@media (max-width: 600px) { .site-header, .site-footer { flex-direction: column; align-items: flex-start; padding: 1.2rem; } main { padding-inline: 1.2rem; } main > section { margin-block: 2.5rem; } .hero-section { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .profile-card { max-width: 400px; } .resource-grid { grid-template-columns: minmax(0, 1fr); } .limitations-box { padding: 1.4rem; } .actions { flex-direction: column; align-items: stretch; } .actions .text-link { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .site-header nav, .skip-link { display: none; } main { width: 100%; padding: 0; } .resource-grid { display: block; } .resource-card { margin: .5rem 0; } .limitations-box { background: white; color: black; border: 1px solid black; } .limitations-box h2 { color: black; } }