:root {
  --color-brand: #71877a;
  --color-brand-strong: #3e6250;
  --color-brand-deep: #294536;
  --color-brand-soft: #e3ebe5;
  --color-canvas: #f6f4ee;
  --color-surface: #fcfbf7;
  --color-text: #252a27;
  --color-text-muted: #626a65;
  --color-line: #d4d8d2;
  --color-danger: #a0453e;
  --color-warning: #8a6828;
  --color-success: #416d51;
  --font-body: -apple-system, "PingFang SC", "HarmonyOS Sans SC", MiSans, "Microsoft YaHei", sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-display: 2.75rem;
  --leading-tight: 1.3;
  --leading-normal: 1.65;
  --leading-reading: 1.9;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-pill: 999rem;
  --shadow-subtle: 0 0.5rem 1.5rem rgb(37 42 39 / 10%);
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --ease-standard: ease-out;
  --container-wide: 70rem;
  --container-content: 45rem;
  --gutter: var(--space-4);
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; background: var(--color-canvas); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); }
a { color: var(--color-brand-strong); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; overflow-wrap: anywhere; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--color-brand-deep); }
a:active { transform: translateY(0.0625rem); }
:focus-visible { outline: 0.1875rem solid var(--color-brand-strong); outline-offset: 0.1875rem; }
::selection { background: var(--color-brand-soft); }
.skip-link { position: fixed; z-index: 10; inset: var(--space-2) auto auto var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-surface); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 2 * var(--gutter)), var(--container-wide)); margin-inline: auto; }
.content { width: min(calc(100% - 2 * var(--gutter)), var(--container-content)); margin-inline: auto; }
.site-header { border-bottom: 0.0625rem solid var(--color-line); }
.site-header__inner { min-height: var(--space-16); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.site-brand { color: var(--color-text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-nav { display: flex; gap: var(--space-2); }
.site-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: var(--space-3); color: var(--color-text-muted); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--color-brand-strong); font-weight: 600; box-shadow: inset 0 -0.125rem var(--color-brand); }
.menu-button { display: none; min-width: 2.75rem; min-height: 2.75rem; border: 0.0625rem solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; }
.menu-button:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
.menu-button:active { background: var(--color-line); transform: translateY(0.0625rem); }
.menu-button:focus-visible { border-color: var(--color-brand-strong); }
.page-main { min-height: 60vh; padding-block: var(--space-16) var(--space-24); }
.page-heading { margin: 0 0 var(--space-4); font: 700 var(--text-display)/var(--leading-tight) var(--font-display); text-wrap: balance; }
.page-intro { max-width: 40rem; color: var(--color-text-muted); font-size: var(--text-md); }
.hero { display: grid; grid-template-columns: 7fr 5fr; align-items: center; gap: var(--space-12); min-height: 26rem; }
.hero__eyebrow, .article-meta { color: var(--color-text-muted); font: 500 var(--text-sm)/var(--leading-normal) var(--font-mono); }
.sprout { position: relative; min-height: 15rem; border-left: 0.125rem solid var(--color-brand); opacity: 0.75; }
.sprout::before, .sprout::after { content: ""; position: absolute; width: 6rem; height: 3rem; border: 0.125rem solid var(--color-brand); border-radius: 100% 0; }
.sprout::before { top: 25%; left: 0; transform: rotate(-18deg); }
.sprout::after { top: 52%; right: 0; transform: scaleX(-1) rotate(-18deg); }
.section-heading { margin: 0 0 var(--space-6); font-size: var(--text-xl); line-height: var(--leading-tight); }
.article-list { margin: 0; padding: 0; list-style: none; border-top: 0.0625rem solid var(--color-line); }
.article-list__item { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-6); padding: var(--space-6) var(--space-4); border-bottom: 0.0625rem solid var(--color-line); border-left: 0.1875rem solid transparent; transition: background var(--duration-fast), border-color var(--duration-fast); }
.article-list__item:hover { border-left-color: var(--color-brand); background: var(--color-brand-soft); }
.article-list__date { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.article-list__title { margin: 0; font-size: var(--text-lg); line-height: var(--leading-tight); }
.article-list__summary { margin: var(--space-2) 0; color: var(--color-text-muted); }
.tag { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.tag::before { content: ""; width: var(--space-1); height: var(--space-1); border-radius: var(--radius-pill); background: var(--color-brand); }
.article-header { margin-bottom: var(--space-12); }
.prose { line-height: var(--leading-reading); }
.prose h2 { margin-top: var(--space-12); font-size: var(--text-lg); line-height: var(--leading-tight); }
.prose p, .prose ul { margin-block: var(--space-6); }
.article-navigation { display: flex; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 0.0625rem solid var(--color-line); }
.button-link { min-height: 2.75rem; display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--color-brand-strong); color: var(--color-surface); font-weight: 600; text-decoration: none; }
.button-link:hover { background: var(--color-brand-deep); color: var(--color-surface); }
.site-footer { border-top: 0.0625rem solid var(--color-line); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm); }
.site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); padding-block: var(--space-8); }
.site-footer__links { display: flex; gap: var(--space-4); }
.error-layout { text-align: center; }
.error-code { margin: 0; color: var(--color-brand); font: 700 clamp(5rem, 18vw, 10rem)/1 var(--font-mono); }

@media (min-width: 48rem) { :root { --gutter: var(--space-6); } }
@media (max-width: 47.99rem) {
  .page-main { padding-block: var(--space-12) var(--space-16); }
  .page-heading { font-size: var(--text-xl); }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .sprout { display: none; }
  .menu-button { display: inline-block; }
  .js .site-header__inner { flex-wrap: wrap; }
  .js .site-nav { width: 100%; max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; flex-direction: column; transition: max-height var(--duration-normal) var(--ease-standard), opacity var(--duration-fast), visibility 0s linear var(--duration-normal); }
  .js .site-nav[data-open="true"] { max-height: 15rem; visibility: visible; opacity: 1; padding-bottom: var(--space-3); transition-delay: 0s; }
  .site-nav a { width: 100%; }
  .article-list__item { grid-template-columns: 1fr; gap: var(--space-2); }
  .article-navigation, .site-footer__inner, .site-footer__links { flex-direction: column; }
  .site-brand, .article-list__title a, .article-navigation a, .site-footer__links a, .site-footer__inner > p:last-child a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .site-footer__inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }