:root { --ink:#171717; --paper:#f6f1e7; --white:#fffdf8; --blue:#2441c4; --blue-pale:#e0e6ff; --coral:#c33d27; --yellow:#f2c84b; --muted:#59544d; --line:#d4cdc2; --serif:"Newsreader",Georgia,serif; --sans:"DM Sans",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.7 var(--sans); }
a { color:inherit; text-underline-offset:.25em; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.guide-feature h2 a, .guide-card h2 a { text-decoration:none; }
.guide-feature h2 a:hover, .guide-card h2 a:hover { text-decoration:underline; }
.table-scroll:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
img { display:block; max-width:100%; height:auto; }
::selection { background:var(--yellow); color:var(--ink); }
.wrap { width:min(calc(100% - 40px),1200px); margin-inline:auto; }
.skip { position:absolute; top:-5rem; left:1rem; padding:.6rem 1rem; z-index:100; background:var(--ink); color:white; }
.skip:focus { top:1rem; }
header { border-bottom:1px solid var(--ink); background:var(--paper); }
header nav { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { display:inline-grid; text-decoration:none; line-height:1; }
.brand strong { font:600 1.55rem var(--serif); }
.brand span { margin-top:.45rem; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; font-size:.875rem; font-weight:700; }
.nav-links a { text-decoration:none; }
.nav-links a:hover, .nav-links a[aria-current] { text-decoration:underline; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:.75rem 1.2rem; border:2px solid var(--ink); background:var(--coral); color:white; box-shadow:4px 4px 0 var(--ink); font-weight:700; text-decoration:none; font-size:.9375rem; }
.button:hover { background:#9b2e1c; text-decoration:none; }
.button.light { background:var(--white); color:var(--ink); }
.button.light:hover { background:var(--yellow); }
.eyebrow { margin:0 0 .9rem; font-size:.8125rem; text-transform:uppercase; font-weight:700; letter-spacing:.12em; }
.guides-intro { padding:clamp(2.5rem,6vw,4.5rem) 0 2.6rem; }
.guides-intro h1 { max-width:1000px; margin:0; font:500 clamp(3.2rem,6.6vw,6rem)/1 var(--serif); letter-spacing:-.035em; }
.guides-intro h1 em { color:var(--blue); font-weight:500; }
.guides-intro .dek { max-width:710px; margin:1.4rem 0 0; color:var(--muted); font-size:1.125rem; }
.guide-feature { display:grid; grid-template-columns:1.05fr .95fr; border:1px solid var(--ink); background:var(--white); }
.feature-copy { align-self:center; padding:clamp(1.5rem,4vw,3.2rem); }
.guide-feature h2 { margin:.8rem 0 1rem; font:500 clamp(2.3rem,4vw,3.7rem)/1.04 var(--serif); letter-spacing:-.02em; }
.guide-feature p { margin:0 0 1.4rem; }
.guide-feature .eyebrow { color:var(--blue); }
.feature-art { margin:0; padding:2rem; background:var(--blue); display:flex; flex-direction:column; justify-content:center; }
.page-pair { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; align-items:start; }
.page-pair img { width:100%; height:auto; box-shadow:0 8px 15px #0003; }
.feature-art figcaption { margin-top:1rem; color:white; font-size:.875rem; }
.guide-list { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem; }
.guide-card { padding:clamp(1.5rem,3vw,2.5rem); background:var(--white); border:1px solid var(--ink); display:flex; flex-direction:column; }
.guide-card:nth-child(2) { background:var(--blue-pale); }
.guide-card h2 { margin:.3rem 0 .8rem; font:500 clamp(2rem,3vw,2.8rem)/1.08 var(--serif); }
.guide-card p { margin:0 0 1.5rem; }
.guide-card .read-link { margin-top:auto; }
.read-link { display:inline-block; font-weight:700; padding:.25rem 0; }
.guide-meta { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; color:var(--muted); font-size:.875rem; }
.guide-list + .guide-note { margin:1.3rem 0 3rem; color:var(--muted); font-size:.9375rem; }
.guide-support { margin-block:3rem; padding:clamp(1.5rem,4vw,3rem); background:var(--ink); color:var(--white); display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
.guide-support h2 { margin:0 0 .6rem; font:500 2.4rem/1.1 var(--serif); }
.guide-support p { max-width:65ch; margin:0; color:#ded8cf; }
.guide-support a:focus-visible { outline-color:var(--yellow); }
.breadcrumbs { margin:1.6rem 0; color:var(--muted); font-size:.875rem; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0; list-style:none; }
.breadcrumbs li + li::before { content:'/'; margin-right:.5rem; color:#847b70; }
.article-head { max-width:940px; padding:.8rem 0 2rem; }
.article-head h1 { margin:0 0 1.2rem; font:500 clamp(2.8rem,5.5vw,5.1rem)/1.03 var(--serif); letter-spacing:-.03em; }
.article-head .dek { max-width:710px; font-size:1.125rem; color:var(--muted); margin:0 0 1.2rem; }
.article-grid { display:grid; grid-template-columns:230px minmax(0,760px); gap:clamp(2rem,5vw,5rem); align-items:start; padding:2rem 0 1rem; border-top:1px solid var(--ink); }
.contents { position:sticky; top:1.5rem; font-size:.9375rem; }
.contents p { font-weight:700; margin:0 0 .9rem; }
.contents ol { margin:0; padding:0; list-style:none; }
.contents li + li { margin-top:.65rem; }
.contents a { text-decoration:none; display:inline-block; }
.contents a:hover { text-decoration:underline; }
.contents .service-link { display:block; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--blue); font-weight:700; }
.article-body { min-width:0; font-size:1.0625rem; }
.article-body p { margin:.8rem 0 1.1rem; }
.article-body section { margin-bottom:2.5rem; scroll-margin-top:1.5rem; }
.article-body h2 { font:500 clamp(1.9rem,3vw,2.55rem)/1.12 var(--serif); letter-spacing:-.01em; margin:0 0 1rem; }
.article-body h3 { font:600 1.35rem/1.3 var(--serif); margin:1.5rem 0 .5rem; }
.article-body ul, .article-body ol { padding-left:1.4rem; margin:1rem 0; }
.article-body li + li { margin-top:.6rem; }
.takeaway { padding:1.3rem 1.5rem; background:var(--blue-pale); border-left:4px solid var(--blue); margin-bottom:2.5rem; }
.takeaway p { margin:.4rem 0 0; }
.takeaway strong:first-child { display:block; font-size:.875rem; letter-spacing:.08em; text-transform:uppercase; }
.table-scroll { overflow-x:auto; margin:1.2rem 0; }
table { border-collapse:collapse; width:100%; min-width:530px; font-size:.9375rem; }
caption { text-align:left; font-weight:700; margin-bottom:.6rem; }
th, td { text-align:left; vertical-align:top; border:1px solid var(--line); padding:.85rem; }
th { background:var(--blue-pale); }
tbody th { background:var(--white); width:24%; }
.example { padding:1.3rem 1.5rem; border:1px solid var(--line); background:var(--white); margin:1.2rem 0; }
.example .label { font-size:.8125rem; text-transform:uppercase; font-weight:700; letter-spacing:.1em; color:var(--blue); }
.example blockquote { margin:.6rem 0 1.1rem; font:500 1.45rem/1.45 var(--serif); }
.example .explanation { font-size:.9375rem; margin-bottom:0; }
.example-label { color:var(--muted); font-size:.875rem; }
.article-figure { margin:1.4rem 0; padding:1.5rem; background:#e8e0d1; }
.article-figure .page-pair { max-width:520px; margin:auto; }
.article-figure figcaption { margin-top:1rem; font-size:.875rem; color:var(--muted); }
.sources { padding-top:1.5rem; border-top:1px solid var(--line); font-size:.9375rem; }
.sources h2 { font-size:1.7rem; }
.author-note { border-top:1px solid var(--line); padding-top:1.5rem; color:var(--muted); font-size:.9375rem; }
.author-note strong { display:block; color:var(--ink); }
.related { border-top:1px solid var(--ink); padding:2rem 0 0; margin-top:1.5rem; }
.related h2 { font:500 2rem var(--serif); margin:0 0 1rem; }
.related-links { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.related-links a { background:var(--white); border:1px solid var(--line); padding:1.2rem; font-weight:700; }
footer { margin-top:3rem; padding:2.5rem 0; background:var(--ink); color:var(--paper); }
.footer-grid { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; }
.footer-name { font:500 2rem/1.1 var(--serif); }
.footer-name span { display:block; font:400 .875rem var(--sans); color:#c6beb1; margin-top:.6rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:.8rem 1.3rem; align-items:start; max-width:580px; font-size:.9375rem; }
.copyright { margin-top:2rem; padding-top:1rem; border-top:1px solid #ffffff38; color:#c6beb1; font-size:.875rem; }
@media(max-width:800px) {
  .guide-feature, .guide-list, .guide-support { grid-template-columns:1fr; }
  .feature-art .page-pair { max-width:500px; margin-inline:auto; }
  .article-grid { grid-template-columns:1fr; gap:2rem; }
  .contents { position:static; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
  .contents ol { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; }
  .contents li + li { margin-top:0; }
  .contents .service-link { display:none; }
  .guide-support .button { justify-self:start; }
}
@media(max-width:500px) {
  .wrap { width:calc(100% - 32px); }
  .guides-intro { padding-top:2rem; }
  .guide-feature h2 { font-size:2.25rem; }
  .feature-art { padding:1rem; }
  .article-head h1 { font-size:2.65rem; }
  .article-body { font-size:1rem; }
  .takeaway, .example { padding:1rem; }
  .related-links { grid-template-columns:1fr; gap:1rem; }
  th, td { padding:.65rem; }
  .article-figure { padding:1rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print {
  header, footer, .contents, .related, .guide-support, .skip { display:none; }
  body { background:white; }
  .wrap { width:100%; }
  .article-grid { display:block; }
  .article-head h1 { font-size:28pt; }
  .article-body section { break-inside:auto; }
}
