:root {
  --bg: #f4f3ed;
  --paper: #fff;
  --ink: #17221c;
  --muted: #647168;
  --green: #176b4b;
  --green-dark: #0f5138;
  --line: #dfe3dc;
  --soft: #eef6f1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 12% 0, rgba(23,107,75,.08), transparent 30%), var(--bg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.72;
}
a { color: var(--green-dark); }
.shell { width: min(100% - 32px, 1080px); margin: 0 auto; }
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(23,34,28,.1);
}
.brand { color: var(--ink); font-weight: 850; text-decoration: none; }
.brand span { color: var(--green); }
.site-nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.site-nav a { color: #435047; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs { display: flex; gap: 8px; margin: 28px 0 0; padding: 0; color: var(--muted); list-style: none; font-size: 13px; flex-wrap: wrap; }
.breadcrumbs li + li::before { margin-right: 8px; color: #a1aaa3; content: "→"; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.hero { padding: 42px 0 34px; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.18; }
h1 { max-width: 900px; margin: 0; font-size: clamp(38px, 7vw, 66px); letter-spacing: -.04em; }
.hero-lead { max-width: 790px; margin: 18px 0 0; color: #4f5d54; font-size: clamp(17px, 2vw, 20px); line-height: 1.65; }
.meta-row { display: flex; gap: 15px; margin-top: 18px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; align-items: start; padding-bottom: 54px; }
.article, .side-card, .hub-card, .hub-intro {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(31,49,39,.06);
}
.article { padding: clamp(24px, 5vw, 58px); }
.article h2 { margin: 46px 0 15px; padding-top: 2px; font-size: clamp(27px, 4vw, 36px); letter-spacing: -.025em; }
.article h2:first-child { margin-top: 0; }
.article h3 { margin: 28px 0 10px; font-size: 22px; }
.article p { margin: 13px 0; }
.article ul, .article ol { margin: 14px 0; padding-left: 25px; }
.article li + li { margin-top: 8px; }
.formula { margin: 20px 0; padding: 18px 20px; background: #17221c; color: #fff; border-radius: 14px; font-size: clamp(16px, 3vw, 20px); font-weight: 800; overflow-wrap: anywhere; }
.example, .note, .warning { margin: 22px 0; padding: 17px 19px; border-radius: 0 13px 13px 0; }
.example { background: var(--soft); border-left: 4px solid var(--green); }
.note { background: #f5f5ef; border-left: 4px solid #919b91; }
.warning { background: #fff7e7; border-left: 4px solid #c48a24; }
.example strong, .note strong, .warning strong { display: block; margin-bottom: 4px; }
.data-table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { background: #f6f7f3; }
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 30px 0;
  padding: 21px;
  color: #fff;
  background: var(--green-dark);
  border-radius: 16px;
}
.cta p { margin: 3px 0 0; color: #dbe9e1; font-size: 14px; }
.cta a { display: inline-flex; min-height: 44px; padding: 0 17px; align-items: center; justify-content: center; color: var(--green-dark); background: #fff; border-radius: 10px; font-weight: 850; text-decoration: none; white-space: nowrap; }
.sidebar { position: sticky; top: 18px; display: grid; gap: 14px; }
.side-card { padding: 20px; }
.side-card h2 { margin: 0 0 12px; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.toc, .related { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.toc a, .related a { color: #4b584f; font-size: 13px; line-height: 1.45; text-decoration: none; }
.toc a:hover, .related a:hover { color: var(--green); text-decoration: underline; }
.source-list { padding-left: 20px; font-size: 14px; }
.source-list li + li { margin-top: 8px; }
.faq { margin-top: 44px; }
.faq details { padding: 16px 0; border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 800; }
.faq details p { color: #4d5951; }
.hub-intro { margin: 0 0 22px; padding: 26px; }
.hub-intro p { margin: 0; color: #4f5d54; }
.hub-section { padding: 8px 0 48px; }
.hub-section h2 { margin: 32px 0 16px; font-size: 31px; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hub-card { display: flex; min-height: 230px; padding: 22px; flex-direction: column; color: var(--ink); text-decoration: none; transition: transform .2s, border-color .2s; }
.hub-card:hover { border-color: #afc8b8; transform: translateY(-3px); }
.hub-card small { color: var(--green); font-weight: 800; }
.hub-card h3 { margin: 10px 0 9px; font-size: 23px; }
.hub-card p { margin: 0; color: var(--muted); font-size: 14px; }
.hub-card span { margin-top: auto; padding-top: 16px; color: var(--green); font-size: 13px; font-weight: 800; }
.site-footer { display: flex; justify-content: space-between; gap: 18px; padding: 24px 0 30px; color: var(--muted); border-top: 1px solid rgba(23,34,28,.1); font-size: 13px; }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .shell { width: min(100% - 20px, 1080px); }
  .site-head, .site-footer { align-items: flex-start; flex-direction: column; }
  .hero { padding-top: 32px; }
  .article { padding: 25px 18px 34px; border-radius: 16px; }
  .sidebar, .card-grid { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .cta a { width: 100%; }
  .data-table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }