:root {
  color-scheme: light dark;
  --fg: #1d2a1f;
  --muted: #5b6b5e;
  --bg: #fbfcf8;
  --line: #dfe6da;
  --accent: #3f7a33;
  --accent-soft: #edf3e7;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 64px;
  --content-width: 760px;
  --touch-target: 44px;
  --radius: 8px;
  --text-base: 1rem;
  --text-brand: 1.05rem;
  --text-section: 1.15rem;
  --text-title: 1.75rem;
  --line-width: 1px;
  --focus-width: 3px;
  --line-height: 1.65;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e7eee4;
    --muted: #a6b4a7;
    --bg: #141a15;
    --line: #2b352c;
    --accent: #8cc77d;
    --accent-soft: #233020;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--text-base)/var(--line-height) -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
a:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--space-1); }

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--fg);
  color: var(--bg);
  transform: translateY(calc(-100% - var(--space-4)));
}

.skip-link:focus { transform: translateY(0); }

.site-header { border-bottom: var(--line-width) solid var(--line); }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  max-width: calc(var(--content-width) + 2 * var(--space-4));
  margin: 0 auto;
  padding: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  color: var(--fg);
  font-size: var(--text-brand);
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  display: block;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius);
}

.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}

.brand:hover, .site-nav a:hover { color: var(--accent); }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.site-nav a:active { text-decoration: underline; }

main { max-width: calc(var(--content-width) + 2 * var(--space-4)); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); }
h1 { font-size: var(--text-title); line-height: 1.25; margin: 0 0 var(--space-1); }
h2 { font-size: var(--text-section); margin: var(--space-6) 0 var(--space-2); padding-top: var(--space-4); border-top: var(--line-width) solid var(--line); }
p, li { margin: 0 0 var(--space-3); }
ul, ol { padding-left: var(--space-5); }
.muted { color: var(--muted); }
main a { overflow-wrap: anywhere; }
h3 { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-2); }
.table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: var(--line-width) solid var(--line); }
th { background: var(--accent-soft); }
.lang-switch { margin: 0 0 var(--space-4); }
.contact-link { display: inline-block; min-height: var(--touch-target); padding-block: var(--space-3); }

@media (max-width: 36rem) {
  .header-inner { align-items: flex-start; }
  .site-nav { width: 100%; }
}