:root { --navy:#062946; --gold:#d7a84b; --paper:#f7f5f0; --ink:#102e49; --muted:#617084; } * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; } .article-header { padding:25px max(7vw,30px); color:#fff; background:var(--navy); } .brand { color:#fff; font:700 29px "Playfair Display",serif; text-decoration:none; } .brand span { color:var(--gold); } main { max-width:900px; margin:auto; padding:80px max(7vw,30px); } .eyebrow { margin:0 0 20px; color:#9a722b; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } h1,h2,h3 { font-family:"Playfair Display",serif; } h1 { max-width:820px; margin:0; color:var(--navy); font-size:clamp(42px,6vw,68px); line-height:1.04; letter-spacing:-.035em; } .byline { margin:24px 0 50px; color:var(--muted); font:italic 17px "Playfair Display",serif; } .article-body { padding-top:42px; border-top:1px solid #d8d2c7; } h2 { margin:42px 0 14px; color:var(--navy); font-size:30px; } h3 { margin:27px 0 8px; color:#173c5a; font-size:22px; } p,li { color:#405469; font:17px/1.75 "Playfair Display",serif; } ul,ol { padding-left:24px; } li { margin-bottom:15px; } figure { margin:38px 0; } figure img { display:block; width:100%; height:auto; border:1px solid #d8d2c7; } figcaption { margin-top:10px; color:var(--muted); font:italic 14px/1.5 "Playfair Display",serif; } .back { display:inline-block; margin-top:55px; color:var(--navy); font-weight:700; text-decoration:none; } .back:hover { color:#9a722b; } @media(max-width:600px) { main { padding-top:55px; } h2 { font-size:26px; } p,li { font-size:16px; } }