:root {
  --ink: #171512;
  --deep: #101512;
  --paper: #fbf8f1;
  --ivory: #f6f0e4;
  --sage: #466a60;
  --brass: #a8834b;
  --line: rgba(23, 21, 18, 0.15);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif; line-height: 1.75; }
a { color: inherit; }
.guide-header { display: flex; justify-content: space-between; gap: 20px; padding: 18px max(20px, calc((100% - 1080px) / 2)); color: var(--ivory); background: var(--deep); font-size: 14px; font-weight: 800; }
main { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0 80px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: rgba(23, 21, 18, 0.58); font-size: 13px; }
.guide-hero { max-width: 900px; padding: 72px 0 42px; }
.guide-kicker { margin: 0 0 12px; color: var(--brass); font-size: 12px; font-weight: 900; text-transform: uppercase; }
h1, h2 { font-family: Georgia, "Times New Roman", "Noto Serif SC", serif; font-weight: 500; line-height: 1.14; }
h1 { margin: 0 0 20px; font-size: clamp(40px, 5vw, 66px); }
h2 { margin: 0 0 12px; font-size: 28px; }
p { margin-top: 0; color: rgba(23, 21, 18, 0.7); }
.guide-meta { margin-top: 22px; color: rgba(23, 21, 18, 0.56); font-size: 13px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-grid article, .source-note { padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf8; }
.source-note { margin-top: 18px; background: #eef4ef; }
.source-note a, .related-guides a { color: var(--sage); font-weight: 800; }
.related-guides { padding: 62px 0 28px; }
.related-guides div { display: grid; gap: 10px; }
.related-guides a { padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.guide-cta { margin-top: 34px; padding: 30px; border-radius: 8px; color: var(--ivory); background: var(--deep); }
.guide-cta p { color: rgba(246, 240, 228, 0.72); }
.guide-cta a { display: inline-flex; padding: 11px 16px; border-radius: 4px; color: #fff; background: var(--brass); font-weight: 900; text-decoration: none; }
@media (max-width: 680px) { main { width: min(100% - 28px, 620px); padding-top: 26px; } .guide-hero { padding: 52px 0 28px; } h1 { font-size: 38px; } .guide-grid { grid-template-columns: 1fr; } .guide-grid article, .source-note, .guide-cta { padding: 20px; } }