@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/fonts/atkinson-hyperlegible-next-latin-ext-italic.woff2") format("woff2");font-style:italic;font-weight:400 700;font-display:swap}

:root { --paper:#f6f6f2; --white:#fff; --ink:#171816; --muted:#666a63; --line:#dedfd9; --blue:#2457e6; --blue-soft:#edf1ff; --green:#277451; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Atkinson Hyperlegible Next",sans-serif; text-rendering:optimizeLegibility; }
a { color:inherit; }
img { max-width:100%; }
.site-header { height:68px; border-bottom:1px solid var(--line); display:flex; align-items:center; background:rgba(246,246,242,.95); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; }
.header-inner { width:min(1180px,calc(100% - 32px)); margin:auto; display:flex; align-items:center; justify-content:space-between; }
.wordmark { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:19px; letter-spacing:-.025em; }
.mark { width:34px; height:34px; border-radius:8px; background:var(--ink); color:#fff; display:grid; place-items:center; font:600 10px ui-monospace,monospace; letter-spacing:-.06em; }
.header-actions { display:flex; align-items:center; gap:18px; }
.header-actions a { text-decoration:none; font-size:13px; font-weight:600; color:var(--muted); }
.header-actions .primary { min-height:40px; padding:0 14px; border-radius:8px; display:inline-flex; align-items:center; background:var(--ink); color:#fff; }
.guides-hero { max-width:1180px; margin:0 auto; padding:80px 24px 58px; display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:end; }
.kicker { margin:0 0 18px; color:var(--blue); font:600 11px ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.guides-hero h1, .article-header h1 { margin:0; font-size:clamp(46px,6vw,76px); line-height:1.02; letter-spacing:-.055em; }
.guides-hero p { max-width:560px; margin:0 0 7px; color:var(--muted); font-size:19px; line-height:1.55; }
.guide-grid { width:min(1180px,calc(100% - 48px)); margin:0 auto 90px; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.guide-card { min-height:260px; padding:26px; border:1px solid var(--line); border-radius:12px; background:var(--white); text-decoration:none; display:flex; flex-direction:column; transition:border-color .15s,transform .15s; }
.guide-card:hover { border-color:#b7bab2; transform:translateY(-2px); }
.guide-card.featured { min-height:480px; grid-column:span 2; display:grid; grid-template-columns:1.1fr .9fr; padding:0; overflow:hidden; }
.guide-card.featured img { width:100%; height:100%; object-fit:cover; }
.guide-card-copy { padding:34px; display:flex; flex-direction:column; }
.guide-card .label { color:var(--blue); font:600 10px ui-monospace,monospace; text-transform:uppercase; letter-spacing:.05em; }
.guide-card h2 { margin:17px 0 12px; font-size:30px; line-height:1.12; letter-spacing:-.035em; }
.guide-card p { margin:0; color:var(--muted); line-height:1.55; }
.guide-card .meta { margin-top:auto; padding-top:25px; display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.article-header { width:min(970px,calc(100% - 48px)); margin:0 auto; padding:72px 0 42px; }
.breadcrumbs { display:flex; gap:7px; margin-bottom:42px; color:var(--muted); font-size:12px; }
.breadcrumbs a { text-decoration:none; }
.article-header h1 { max-width:900px; }
.dek { max-width:760px; margin:24px 0 22px; font-size:20px; line-height:1.55; color:var(--muted); }
.byline { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; color:var(--muted); }
.hero-image { width:min(1180px,calc(100% - 32px)); margin:0 auto; }
.hero-image img { display:block; width:100%; max-height:680px; border-radius:12px; object-fit:cover; }
.hero-image figcaption, .article-figure figcaption { margin-top:9px; color:var(--muted); font-size:11px; }
.article-layout { width:min(970px,calc(100% - 48px)); margin:54px auto 100px; display:grid; grid-template-columns:200px minmax(0,680px); gap:56px; }
.toc { align-self:start; position:sticky; top:100px; }
.toc strong { font-size:12px; }
.toc ol { margin:13px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.toc a { color:var(--muted); text-decoration:none; font-size:12px; line-height:1.3; }
.toc a:hover { color:var(--blue); }
.article-body { min-width:0; }
.article-body h2 { margin:56px 0 16px; font-size:32px; line-height:1.15; letter-spacing:-.035em; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { margin:32px 0 10px; font-size:21px; }
.article-body p, .article-body li { font-size:17px; line-height:1.72; }
.article-body p { margin:0 0 19px; }
.article-body ul, .article-body ol { margin:0 0 25px; padding-left:23px; }
.article-body li { padding-left:5px; margin-bottom:9px; }
.article-body a { color:#1748d2; text-underline-offset:3px; }
.takeaway { margin:32px 0; padding:20px 22px; border-left:3px solid var(--blue); border-radius:0 8px 8px 0; background:var(--blue-soft); }
.takeaway strong { display:block; margin-bottom:5px; }
.takeaway p { margin:0; font-size:15px; }
.checklist { padding:0; list-style:none; display:grid; gap:8px; }
.checklist li { padding:13px 14px 13px 42px; border:1px solid var(--line); border-radius:8px; background:var(--white); position:relative; }
.checklist li::before { content:"✓"; position:absolute; left:14px; color:var(--green); font-weight:700; }
.article-figure { margin:38px 0; }
.article-figure img { width:100%; border-radius:10px; display:block; }
.comparison { margin:28px 0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.comparison > div { padding:18px; border:1px solid var(--line); border-radius:9px; background:var(--white); }
.comparison strong { display:block; margin-bottom:8px; }
.comparison p { margin:0; color:var(--muted); font-size:14px; }
.source-list { padding-top:20px; border-top:1px solid var(--line); }
.source-list li { font-size:14px; }
.article-cta { margin-top:58px; padding:28px; border-radius:12px; background:var(--ink); color:#fff; }
.article-cta h2 { margin:0 0 8px; color:#fff; }
.article-cta p { color:#c7cac3; }
.article-cta a { min-height:44px; margin-top:7px; padding:0 15px; border-radius:8px; display:inline-flex; align-items:center; background:#fff; color:var(--ink); text-decoration:none; font-weight:700; }
.related { width:min(970px,calc(100% - 48px)); margin:0 auto 90px; border-top:1px solid var(--line); padding-top:35px; }
.related h2 { font-size:22px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.related a { min-height:150px; padding:18px; border:1px solid var(--line); border-radius:9px; background:var(--white); text-decoration:none; display:flex; flex-direction:column; }
.related a span { margin-top:auto; color:var(--muted); font-size:11px; }
.site-footer { border-top:1px solid var(--line); padding:30px 24px; color:var(--muted); }
.site-footer > div { max-width:1180px; margin:auto; display:flex; justify-content:space-between; font-size:12px; }

@media(max-width:800px){
  .guides-hero { grid-template-columns:1fr; gap:25px; padding-top:55px; }
  .guide-grid { grid-template-columns:1fr; }
  .guide-card.featured { grid-column:auto; grid-template-columns:1fr; }
  .guide-card.featured img { height:310px; }
  .article-layout { grid-template-columns:1fr; gap:0; }
  .toc { position:static; margin-bottom:42px; padding:18px; border:1px solid var(--line); border-radius:9px; background:var(--white); }
  .related-grid { grid-template-columns:1fr; }
}
@media(max-width:560px){
  .header-actions > a:first-child { display:none; }
  .guides-hero h1, .article-header h1 { font-size:42px; }
  .article-header { padding-top:45px; }
  .dek { font-size:18px; }
  .hero-image { width:100%; }
  .hero-image img { border-radius:0; min-height:330px; }
  .article-layout { width:calc(100% - 32px); margin-top:38px; }
  .article-body h2 { font-size:28px; }
  .comparison { grid-template-columns:1fr; }
  .site-footer > div { gap:10px; flex-direction:column; }
}