/* ported from the ChatGPT Sites build */
:root { --navy: #08172d; --teal: #189ab4; --orange: #f28c28; --muted: #5d6878; --line: #dce4e8; }
* { box-sizing: border-box; }
body { margin: 0px; color: var(--navy); background: rgb(255, 255, 255); font: 18px / 1.75 Avenir, Arial, sans-serif; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.banner { display: block; height: clamp(170px, 22vw, 260px); overflow: hidden; background: rgb(255, 255, 255); }
.banner picture { display: block; width: 100%; height: 100%; }
.banner img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.nav { display: flex; justify-content: center; gap: 25px; padding: 16px; border-bottom: 1px solid var(--line); font-size: 1rem; font-weight: 700; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--teal); }
.wrap { width: min(760px, 100% - 40px); margin: auto; }
article { padding: 70px 0px 95px; }
.eyebrow { color: rgb(203, 103, 17); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
h1 { font-family: "Arial Narrow", Impact, sans-serif; line-height: 1.08; font-size: clamp(3rem, 7vw, 5.3rem); margin: 15px 0px 25px; }
picture { display: block; }
.hero { width: 100%; max-height: 580px; object-fit: cover; object-position: center 38%; border-radius: 20px; }
.content { margin-top: 38px; }
.content p { margin: 0px 0px 1.5em; }
.back { display: inline-block; margin-top: 20px; color: rgb(14, 113, 136); font-size: 1rem; font-weight: 700; }
footer { background: var(--navy); color: rgb(255, 255, 255); padding: 26px 0px; font-size: 1rem; }
@media (max-width: 700px) {
  .nav { gap: 15px; }
  .banner { height: 170px; }
}
.related-reading { margin: 36px 0px 8px; padding-top: 8px; border-top: 1px solid rgb(220, 228, 232); }
.related-reading h2 { font-family: "Arial Narrow", Impact, sans-serif; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; margin: 0px 0px 14px; color: rgb(8, 24, 47); }
.related-reading ul { list-style: none; padding: 0px; margin: 0px 0px 18px; display: grid; gap: 14px; }
.related-reading li a { font-weight: 800; color: rgb(14, 113, 136); text-decoration: none; }
.related-reading li a:hover { text-decoration: underline; }
.related-reading li p { margin: 4px 0px 0px; color: rgb(82, 101, 120); }
.related-library { margin: 0px; padding: 14px 16px; background: rgb(255, 250, 242); border-radius: 16px; color: rgb(8, 24, 47); }
.related-library a { font-weight: 800; color: rgb(14, 113, 136); }