@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow.woff2') format('woff2'); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope.woff2') format('woff2'); }
:root { color-scheme: light; font-family: Manrope, sans-serif; color: #172725; background: #f3f5f4; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #21654c; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #006b8f; outline-offset: 5px; }
header, main, footer { max-width: 1160px; margin: auto; padding-inline: 28px; }
header { min-height: 92px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid #d5ddda; }
.brand { font-weight: 800; font-size: 1.55rem; letter-spacing: -.03em; text-decoration: none; color: #172725; }
.brand span { color: #cb4019; }
.skip { position: absolute; transform: translateY(-200%); padding: 12px; background: white; }
.skip:focus { transform: none; }
.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 52px; padding-block: 68px; }
h1, h2 { font-family: Barlow, sans-serif; font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(3rem, 6vw, 4.5rem); margin: 0 0 28px; }
h2 { font-size: 2.2rem; margin: 0 0 24px; }
p { max-width: 68ch; }
.lead { font-size: 1.2rem; margin: 0 0 30px; }
.note, figcaption { color: #52605d; font-size: .875rem; }
.action { display: inline-block; padding: 14px 22px; background: #cb4019; color: white; border-radius: 7px; font-weight: 700; text-decoration: none; }
.action:hover { background: #af3110; }
figure { margin: 0; }
img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
figcaption { margin-top: 12px; }
.details { padding-block: 42px; border-top: 1px solid #d5ddda; max-width: 800px; }
ol { padding-left: 24px; max-width: 68ch; }
li { padding-left: 8px; margin-bottom: 18px; }
footer { display: flex; flex-wrap: wrap; gap: 32px; border-top: 1px solid #d5ddda; padding-block: 32px; margin-top: 26px; }
@media (max-width: 760px) { header, main, footer { padding-inline: 20px; } .intro { grid-template-columns: 1fr; gap: 32px; padding-block: 40px; } h2 { font-size: 1.9rem; } .details { padding-block: 32px; } }
::selection { background: #ffe1d0; color: #172725; }