@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

:root { --ink:#201913; --copy:#5d5146; --paper:#fffaf3; --line:rgba(113,76,44,.14); --accent:#a94f08; --sage:#476d59; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font:18px/1.68 Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:linear-gradient(125deg,#fff1dd 0%,#fbf7f0 46%,#edf4ee 100%); }
a { color:var(--accent); text-underline-offset:3px; }
.shell { width:min(100% - 2rem, 1080px); margin:auto; }
.site-head { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 0; font-size:.96rem; }
.brand { font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:-.03em; }
.brand span { color:var(--accent); }
.site-head nav { display:flex; gap:1rem; }
.site-head nav a { color:var(--copy); }
main { background:rgba(255,250,243,.82); border:1px solid var(--line); border-radius:24px; box-shadow:0 25px 70px rgba(70,48,27,.08); margin:1.25rem auto 3rem; padding:clamp(1.4rem,5vw,5rem); }
.crumb { color:var(--copy); font-size:.9rem; }
.eyebrow { color:var(--sage); font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin:1.8rem 0 .55rem; }
h1,h2,h3 { line-height:1.15; letter-spacing:-.035em; }
h1 { font-size:clamp(2.4rem,6vw,4.6rem); max-width:15ch; margin:.15rem 0 1rem; }
h2 { font-size:clamp(1.65rem,3vw,2.35rem); margin:3.2rem 0 .8rem; }
h3 { font-size:1.18rem; margin:0 0 .35rem; }
p, li { color:var(--copy); max-width:72ch; }
.lede { font-size:1.22rem; max-width:60ch; color:#3d3128; }
.meta { font-size:.9rem; color:var(--copy); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.8rem 0; margin:1.7rem 0; }
.answer { background:#fff0d6; border-left:4px solid var(--accent); border-radius:0 14px 14px 0; padding:1.15rem 1.25rem; margin:1.7rem 0; }
.answer strong { display:block; margin-bottom:.25rem; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.3rem 0; }
.card, .faq { padding:1.2rem; border:1px solid var(--line); background:rgba(255,255,255,.55); border-radius:15px; }
.card p, .faq p { margin:.25rem 0 0; font-size:.94rem; }
table { border-collapse:collapse; width:100%; font-size:.94rem; margin:1.4rem 0; }
th,td { text-align:left; vertical-align:top; padding:.75rem; border-bottom:1px solid var(--line); color:var(--copy); }
th { color:var(--ink); }
.faq-list { display:grid; gap:.75rem; }
.sources { padding-left:1.2rem; }
.sources li { margin:.45rem 0; }
.related { border-top:1px solid var(--line); margin-top:3rem; padding-top:1.5rem; }
.related ul { padding-left:1.2rem; columns:2; }
.guide-figure { margin:2rem 0; padding:1rem; background:#f6eee3; border:1px solid var(--line); border-radius:18px; }
.guide-figure img { width:100%; max-width:680px; border-radius:12px; margin:auto; }
.guide-figure figcaption { color:var(--copy); font-size:.88rem; max-width:680px; margin:.7rem auto 0; }
.author-note { border-top:1px solid var(--line); margin-top:2.6rem; padding-top:1.25rem; font-size:.94rem; }
.author-note strong { color:var(--ink); }
@media(max-width:650px) { body{font-size:17px}.grid{grid-template-columns:1fr}.site-head nav{gap:.65rem}.related ul{columns:1} main{border-radius:18px}.shell{width:min(100% - 1rem,1080px)} }
