:root {
  --guide-ink: #2a1f18;
  --guide-muted: #6c625b;
  --guide-paper: #fffdf8;
  --guide-wash: #edf5e9;
  --guide-line: #e6ddd1;
  --guide-green: #28733d;
  --guide-green-dark: #1c542d;
  --guide-gold: #e8b85c;
  --guide-serif: Georgia, 'Times New Roman', serif;
  --guide-sans: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --guide-display: 'Bricolage Grotesque', var(--guide-sans);
}
* { box-sizing: border-box; }
html { background: var(--guide-paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--guide-ink); background: var(--guide-paper); font-family: var(--guide-sans); line-height: 1.6; }
a { color: var(--guide-green-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--guide-green); }
a:focus-visible { outline: 3px solid var(--guide-gold); outline-offset: 3px; border-radius: 3px; }
.guide-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.guide-top { border-bottom: 1px solid var(--guide-line); background: rgba(255, 253, 248, .94); }
.guide-top-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.guide-brand { display: inline-flex; align-items: center; color: var(--guide-ink); font-family: var(--guide-display); font-weight: 800; font-size: 22px; letter-spacing: -.04em; text-decoration: none; }
.guide-brand::before { content: 'M'; display: grid; place-items: center; width: 29px; height: 29px; margin-right: 9px; color: #fff; background: var(--guide-green); border-radius: 9px 9px 9px 2px; font-size: 15px; }
.guide-nav { display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 700; }
.guide-nav a { text-decoration: none; }
.guide-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 17px; border-radius: 12px; background: var(--guide-green); color: #fff; box-shadow: 0 3px 0 var(--guide-green-dark); font-weight: 800; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.guide-cta:hover { color: #fff; transform: translateY(1px); box-shadow: 0 2px 0 var(--guide-green-dark); }
.guide-hero { padding: clamp(54px, 9vw, 108px) 0 clamp(48px, 7vw, 82px); background: linear-gradient(117deg, var(--guide-wash) 0%, #fffdf8 58%); overflow: hidden; }
.guide-kicker { margin: 0 0 15px; color: var(--guide-green); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.guide-title { max-width: 800px; margin: 0; font-family: var(--guide-display); font-size: clamp(42px, 7vw, 76px); line-height: .98; letter-spacing: -.06em; }
.guide-lede { max-width: 630px; margin: 27px 0 0; color: var(--guide-muted); font-family: var(--guide-serif); font-size: clamp(20px, 2.6vw, 26px); line-height: 1.36; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 52px 0 88px; }
.guide-card { display: flex; min-height: 250px; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid var(--guide-line); border-radius: 18px; background: #fff; color: var(--guide-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.guide-card:hover { color: var(--guide-ink); transform: translateY(-5px); box-shadow: 0 18px 35px -22px rgba(42,31,24,.45); }
.guide-card-label { color: var(--guide-green); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.guide-card h2 { margin: 20px 0 10px; font-family: var(--guide-display); font-size: 29px; letter-spacing: -.04em; line-height: 1.05; }
.guide-card p { margin: 0; color: var(--guide-muted); font-size: 15px; line-height: 1.45; }
.guide-card-arrow { margin-top: 26px; font-weight: 800; }
.guide-card--coming { background: #faf7f1; opacity: .82; }
.guide-note { padding: 25px; border-left: 4px solid var(--guide-gold); background: #fff8e6; color: #5b451b; font-size: 15px; }
.guide-footer { padding: 42px 0; border-top: 1px solid var(--guide-line); color: var(--guide-muted); font-size: 14px; }
.article { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 90px; }
.breadcrumbs { margin: 0 0 34px; color: var(--guide-muted); font-size: 14px; }
.article-header { padding-bottom: 40px; border-bottom: 1px solid var(--guide-line); }
.article-header h1 { max-width: 720px; margin: 0; font-family: var(--guide-display); font-size: clamp(42px, 7vw, 67px); line-height: 1; letter-spacing: -.055em; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 23px 0 0; color: var(--guide-muted); font-size: 14px; }
.article-summary { margin: 27px 0 0; font-family: var(--guide-serif); font-size: clamp(20px, 3vw, 25px); line-height: 1.4; }
.article-body { padding-top: 34px; font-size: 18px; }
.article-body h2 { margin: 48px 0 14px; font-family: var(--guide-display); font-size: 31px; line-height: 1.08; letter-spacing: -.04em; }
.article-body p, .article-body li { max-width: 680px; }
.article-body li { margin: 8px 0; }
.article-callout { margin: 35px 0; padding: 26px; border-radius: 16px; background: var(--guide-wash); }
.article-callout strong { display: block; margin-bottom: 5px; font-family: var(--guide-display); font-size: 21px; }
.sources { margin-top: 50px; padding: 25px; border: 1px solid var(--guide-line); border-radius: 14px; background: #fff; }
.sources h2 { margin-top: 0; font-size: 23px; }
.sources ol { margin-bottom: 0; padding-left: 22px; }
.article-bottom-cta { margin-top: 52px; padding: 34px; border-radius: 19px; background: var(--guide-green-dark); color: #fff; }
.article-bottom-cta h2 { margin: 0; font-family: var(--guide-display); font-size: 32px; line-height: 1.05; letter-spacing: -.04em; }
.article-bottom-cta p { max-width: 560px; margin: 12px 0 23px; color: #e5f1e5; }
.article-bottom-cta .guide-cta { background: var(--guide-gold); color: #3c2d11; box-shadow: 0 3px 0 #ad7c25; }
@media (max-width: 720px) { .guide-shell { width: min(100% - 32px, 1120px); } .guide-top-inner { min-height: 64px; } .guide-nav > a:not(.guide-cta) { display: none; } .guide-grid { grid-template-columns: 1fr; padding: 35px 0 60px; } .guide-card { min-height: 210px; } .article { width: min(100% - 32px, 760px); padding-top: 27px; } .article-body { font-size: 17px; } }