/* Default layout: large screens above 800px. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f3f2ec; color: #263d40; font: 17px/1.65 Arial, Helvetica, sans-serif; }
.page { max-width: 1160px; margin: 32px auto; padding: 0 36px; }
a { color: #234d51; }
a:focus-visible { outline: 3px solid #b66d26; outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 10px; background: white; padding: 10px; }
.skip-link:focus { top: 10px; z-index: 2; }
.site-header { padding: 16px 0 24px; }
.eyebrow { color: #4d6c68; text-transform: uppercase; font-size: 12px; font-weight: bold; letter-spacing: 1.7px; margin: 0 0 8px; }
h1, h2, h3 { line-height: 1.16; }
h1 { font: bold 60px/1.1 Georgia, serif; margin: 0 0 14px; letter-spacing: -2px; }
h1 span { color: #b66d26; }
.site-header > p:last-child { margin: 0; }
nav { display: flex; gap: 30px; padding: 13px 0; border-top: 1px solid #c8d2cd; border-bottom: 1px solid #c8d2cd; }
nav a { font-weight: bold; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.hero { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; margin: 28px 0 38px; background: #dfedea; }
.hero img { display: block; width: 100%; height: 280px; object-fit: cover; }
.hero > div { padding: 26px; }
.hero h2 { font: bold 34px/1.15 Georgia, serif; margin: 8px 0 14px; }
.hero p:last-child { margin-bottom: 0; }
.content-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: 38px; }
.section-title { font: bold 27px Georgia, serif; margin: 0 0 24px; }
.story { display: flow-root; border-bottom: 1px solid #c8d2cd; padding: 0 0 28px; margin: 0 0 28px; scroll-margin-top: 20px; }
/* Float allows each article's text to wrap next to its image. */
.story-image { float: left; width: 40%; height: auto; margin: 0 22px 12px 0; }
.story h3 { font: bold 25px/1.2 Georgia, serif; margin: 0 0 12px; }
.story p:not(.eyebrow) { margin: 0 0 14px; }
aside { align-self: start; background: #e5e9df; padding: 24px; }
aside h2 { font: bold 25px/1.2 Georgia, serif; margin: 0 0 18px; }
aside ul { padding-left: 20px; }
aside li { margin-bottom: 12px; }
.aside-note { font-size: 15px; }
footer { border-top: 1px solid #c8d2cd; padding: 22px 0; font-size: 13px; color: #4d6c68; }
footer p { margin: 4px 0; }
/* Media query 1: medium/tablet screens, 400 through 800px. */
@media screen and (min-width: 400px) and (max-width: 800px) {
 body { font-size: 16px; }
 .page { margin: 18px auto; padding: 0 22px; }
 h1 { font-size: 46px; }
 nav { gap: 22px; }
 .hero { grid-template-columns: 1fr; margin: 22px 0 28px; }
 .hero img { height: 220px; }
 .hero > div { padding: 22px; }
 .hero h2 { font-size: 30px; }
 .content-layout { grid-template-columns: 1fr; gap: 8px; }
 .story-image { width: 35%; margin-right: 18px; }
 .story h3 { font-size: 23px; }
 aside { padding: 20px; margin-bottom: 24px; }
}
/* Media query 2: small/mobile screens below 400px. */
@media screen and (max-width: 399.98px) {
 body { font-size: 15px; line-height: 1.55; }
 .page { margin: 8px auto; padding: 0 12px; }
 .site-header { padding: 12px 0 16px; }
 h1 { font-size: 35px; letter-spacing: -1px; }
 .eyebrow { font-size: 10px; letter-spacing: 1px; }
 nav { flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; font-size: 13px; }
 .hero { display: block; margin: 16px 0 22px; }
 .hero img, .story-image { display: none; }
 .hero > div { padding: 14px; }
 .hero h2 { font-size: 25px; }
 .content-layout { display: block; }
 .section-title { font-size: 24px; margin-bottom: 18px; }
 .story { padding-bottom: 16px; margin-bottom: 18px; }
 .story h3 { font-size: 22px; }
 aside { padding: 14px; margin-bottom: 20px; }
 aside h2 { font-size: 22px; }
 footer { padding: 14px 0; font-size: 12px; }
}