*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --dark:#1C1C1C; --orange:#E8891A; --orange-dark:#9B4E00; --white:#FFFFFF; --off:#F2F2F0; --muted:#666666; --line:#DEDAD3; }
body { font-family: Georgia, serif; background: var(--off); color: var(--dark); line-height: 1.72; }
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 5%; background: var(--dark); border-bottom: 1px solid rgba(232,137,26,0.25); }
.nav-logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.nav-logo-img { width: 36px; height: 36px; object-fit: contain; }
.nav-logo .first { color: var(--white); font-size: 1rem; letter-spacing: 0.06em; font-family: sans-serif; }
.nav-logo .last { color: var(--orange); font-weight: 700; font-size: 1rem; letter-spacing: 0.06em; font-family: sans-serif; }
.nav-links { display: flex; gap: 1.35rem; align-items: center; }
.nav-links a, .nav-trigger { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: sans-serif; transition: color 0.2s; background: none; border: none; cursor: pointer; }
.nav-links a:hover, .nav-item:hover .nav-trigger, .nav-item:focus-within .nav-trigger { color: var(--orange); }
.nav-item { position: relative; padding: 0.4rem 0; }
.dropdown { position: absolute; top: 100%; left: -1rem; min-width: 250px; padding: 0.65rem; background: #202020; border: 1px solid rgba(232,137,26,0.25); box-shadow: 0 16px 40px rgba(0,0,0,0.28); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 0.75rem 0.85rem; color: rgba(255,255,255,0.78); letter-spacing: 0.08em; line-height: 1.4; font-size: 0.75rem; text-transform: uppercase; font-family: sans-serif; }
.dropdown a:hover { background: rgba(232,137,26,0.08); color: var(--orange); }
.hamburger { display: none; background: none; border: none; cursor: pointer; color: var(--orange); font-size: 1.4rem; line-height: 1; }
.mobile-menu { display: none; flex-direction: column; position: fixed; top: 54px; left: 0; right: 0; z-index: 99; background: var(--dark); border-bottom: 1px solid rgba(232,137,26,0.2); max-height: calc(100vh - 54px); overflow: auto; }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; font-family: sans-serif; padding: 1rem 5%; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-label { color: var(--orange); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-family: sans-serif; padding: 1rem 5% 0.35rem; }
main { max-width: 980px; margin: 0 auto; padding: 6.5rem 5% 4rem; }
article { background: var(--white); }
.article-pad { padding: clamp(1.35rem, 4vw, 3rem); }
.eyebrow { color: var(--orange-dark); font-family: sans-serif; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .7rem; font-weight: 700; }
h1 { font-size: clamp(2.05rem, 5vw, 3.25rem); line-height: 1.08; margin-bottom: 1rem; }
.dek, p, li, td { color: var(--muted); font-family: sans-serif; font-size: .98rem; }
.dek { font-size: 1.05rem; margin-bottom: 1.5rem; max-width: 760px; }
.meta { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; margin: 1.5rem 0 2rem; font-family: sans-serif; color: var(--muted); font-size: .82rem; }
.author-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.hero-image { width: 100%; height: clamp(220px, 52vw, 480px); object-fit: cover; display: block; }
h2 { font-size: 1.5rem; line-height: 1.25; margin: 2rem 0 .7rem; }
h3 { font-size: 1.08rem; margin: 1.35rem 0 .4rem; }
ul, ol { padding-left: 1.3rem; margin: .6rem 0 1rem; }
li { margin: .35rem 0; }
a { color: var(--dark); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.answer, .note { background: var(--off); border-left: 3px solid var(--orange); padding: 1rem; margin: 1.2rem 0; }
.answer p, .note p { color: var(--dark); margin: 0; }
.toc { background: #FAFAF8; border: 1px solid var(--line); padding: 1rem; margin: 1.4rem 0 2rem; }
.toc strong { font-family: sans-serif; color: var(--dark); }
.toc a { display: inline-block; margin: .35rem .8rem .1rem 0; font-family: sans-serif; font-size: .88rem; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.2rem; font-family: sans-serif; font-size: .9rem; }
th { text-align: left; color: var(--dark); background: var(--off); border-bottom: 2px solid var(--orange); padding: .75rem; }
td { border-bottom: 1px solid var(--line); padding: .75rem; vertical-align: top; }
code { background: var(--off); color: var(--dark); padding: .1rem .25rem; border: 1px solid var(--line); font-size: .92em; }
.checklist li strong { color: var(--dark); }
.sources li { overflow-wrap: anywhere; }
.cta { background: var(--dark); color: var(--white); padding: 1.35rem; margin-top: 2rem; }
.cta h2 { color: var(--white); margin-top: 0; }
.cta p { color: rgba(255,255,255,.78); }
.cta a { display: inline-block; color: var(--dark); background: var(--orange); padding: .75rem 1rem; margin-top: .9rem; font-family: sans-serif; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
footer { background: var(--dark); padding: 2.75rem 5%; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; border-top: 1px solid rgba(232,137,26,0.25); }
.footer-logo { display: flex; align-items: center; gap: 0.6rem; }
.footer-logo .first { color: var(--white); font-family: sans-serif; font-size: 0.95rem; letter-spacing: 0.06em; }
.footer-logo .last { color: var(--orange); font-family: sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; }
.footer-links { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: rgba(255,255,255,0.72); font-size: 0.76rem; font-family: sans-serif; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.2s; }
.footer-links a:hover { color: var(--orange); }
footer p { color: rgba(255,255,255,.72); font-family: sans-serif; font-size: .76rem; }
@media (max-width: 720px) { main { padding: 3rem 0; } article { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } table { display: block; overflow-x: auto; white-space: normal; } .nav-links { display: none; } .hamburger { display: block; } }