/* * ===================================================================== * GOOGLE FONTS — Copy this into every page BEFORE shared.css * ===================================================================== * * * * * * ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,300;1,8..60,400&family=DM+Sans:wght@300;400;500;600&display=swap'); :root { --cream: #F8F5EF; --parchment: #EFE9DC; --ink: #1A1713; --ink-mid: #2E2A25; --ink-light: #5C5650; --ink-faint: #9A9490; --gold: #B8912A; --gold-light: #D4AC52; --gold-pale: #F0E4C0; --rule: #D8D0C4; --navy: #1C2B3A; --red-accent: #8B2020; --white: #FFFFFF; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:'Source Serif 4',Georgia,serif;background:var(--cream);color:var(--ink);font-size:17px;line-height:1.7;overflow-x:hidden;} /* ─── UTILITIES ─── */ .container{max-width:1160px;margin:0 auto;padding:0 32px;} .container--wide{max-width:1320px;margin:0 auto;padding:0 32px;} .double-rule{height:5px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);margin-bottom:0;} .section-rule{border:none;border-top:1px solid var(--rule);margin:0;} .tag{display:inline-block;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:3px 8px;border:1px solid var(--gold-light);border-radius:2px;} .tag--dark{color:var(--white);background:var(--ink);border-color:var(--ink);} .tag--navy{color:var(--white);background:var(--navy);border-color:var(--navy);} .tag--green{color:#fff;background:#2E6B3A;border-color:#2E6B3A;} /* Section label — gold uppercase label above H2 */ .section-label{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px;} .section-label--light{color:var(--gold-light);} /* ─── ACCESSIBILITY — FOCUS STATES ─── */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px;} /* ─── DROP CAP ─── */ /* Apply .intro-text to the first

of any article/ranking intro */ .intro-text::first-letter{font-family:'Playfair Display',Georgia,serif;font-size:58px;font-weight:900;float:left;line-height:.85;margin-right:8px;margin-top:4px;color:var(--ink);} /* ─── TOPBAR ─── */ .topbar{background:var(--ink);color:var(--gold-light);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:9px 16px;position:sticky;top:0;z-index:100;} .topbar span{color:var(--white);margin:0 6px;opacity:.4;} /* ─── NAV ─── */ nav{background:var(--cream);border-bottom:1px solid var(--rule);position:sticky;top:36px;z-index:99;transition:box-shadow .2s;} /* Nav scroll shadow — add .nav--scrolled via JS on scroll */ nav.nav--scrolled{box-shadow:0 2px 12px rgba(0,0,0,.07);} /* Mobile nav open state — toggle .nav-open on