/* 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: 16px / 1.6 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-weight: 700; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--teal); }
.wrap { width: min(1040px, 100% - 40px); margin: auto; }
.intro { padding: 85px 0px 40px; }
.eyebrow { color: rgb(203, 103, 17); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
h1, h2 { font-family: "Arial Narrow", Impact, sans-serif; line-height: 1.08; margin: 0.3em 0px; }
h1 { font-size: clamp(3rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
.intro p { font-size: 1.18rem; color: var(--muted); max-width: 660px; }
.article-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; box-shadow: rgba(8, 23, 45, 0.1) 0px 16px 40px; text-decoration: none; margin: 0px 0px 95px; }
.article-card picture { display: block; height: 100%; }
.article-card img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; object-position: center 38%; }
.article-card div { padding: 40px; align-self: center; }
.article-card p { color: var(--muted); }
.article-card strong { color: rgb(14, 113, 136); }
footer { background: var(--navy); color: rgb(255, 255, 255); padding: 26px 0px; }
@media (max-width: 700px) {
  .article-card { grid-template-columns: 1fr; }
  .article-card img { min-height: 0px; height: 260px; }
  .article-card div { padding: 25px; }
  .nav { gap: 15px; }
  .banner { height: 170px; }
}
.legal { padding: 70px 0px 90px; max-width: 760px; }
.legal h1 { margin-bottom: 0.2em; }
.legal .lede { font-size: 1.18rem; color: var(--muted); margin: 0px; }
.legal .updated { color: var(--muted); font-size: 0.95rem; margin-top: 0.4em; }
.legal h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 1.6em; }
.legal ul { padding-left: 1.3em; }
.legal li { margin-bottom: 0.6em; }
.legal a { color: rgb(14, 113, 136); font-weight: 700; }
footer a { color: rgb(255, 255, 255); }