:root {
  /* Always light: white page, near-black text, brand green brightened (about 5:1 on white, WCAG AA) */
  --paper: #FFFFFF; --surface: #F3F6F1; --ink: #17211B; --muted: #4E5B53; --line: #D5DDD1; --accent: #1F7A5C;
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; }
.wrap { max-width: 760px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
header { border-bottom: 1px solid var(--line); }
header .wrap { padding-block: 14px; }
.brand { font-family: var(--font-display); font-weight: 760; font-size: 1.3rem; font-stretch: 80%; color: var(--ink); text-decoration: none; }
main .wrap { padding-block: 48px 64px; display: grid; gap: 14px; }
h1, h2 { font-family: var(--font-display); font-stretch: 84%; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); font-weight: 760; }
h2 { font-size: 1.3rem; font-weight: 680; margin-top: 18px; }
p, ul { margin: 0; max-width: 66ch; }
ul { padding-left: 1.2em; display: grid; gap: 4px; }
.meta { color: var(--muted); font-size: 0.92rem; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
footer { border-top: 1px solid var(--line); }
footer .wrap { padding-block: 28px 40px; color: var(--muted); font-size: 0.9rem; display: grid; gap: 8px; }
footer .links { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-display); }

/* ---- Flavour (same as the home page) ---- */
:root {
  --mint: #EAF5EF; --mint-line: #CFE6DA; --ochre: #B26B12; --forest: #133A2D; --forest-ink: #E3F1EA; --forest-link: #9FE3C2;
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='360' viewBox='0 0 560 360'%3E%3Cg fill='none' stroke='%231F7A5C' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M-20 60 C 80 20 160 110 260 70 S 440 10 580 60'/%3E%3Cpath d='M-20 100 C 90 60 170 150 270 110 S 450 50 580 100'/%3E%3Cpath d='M-20 140 C 100 100 180 190 280 150 S 460 90 580 140'/%3E%3Cpath d='M-20 185 C 110 145 190 235 290 195 S 470 135 580 185'/%3E%3Cpath d='M-20 230 C 120 190 200 280 300 240 S 480 180 580 230'/%3E%3Cpath d='M-20 275 C 130 235 210 325 310 285 S 490 225 580 275'/%3E%3Cpath d='M-20 320 C 140 280 220 370 320 330 S 500 270 580 320'/%3E%3C/g%3E%3C/svg%3E");
}
header { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
main { background: var(--contours) right -140px top -80px / 760px auto no-repeat,
                   radial-gradient(800px 380px at 92% -5%, var(--mint) 0%, rgba(234, 245, 239, 0) 70%); }
h1::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; margin-top: 14px;
            background: linear-gradient(90deg, var(--accent), var(--ochre)); }
h2 { color: var(--accent); }
footer { border-top: 0; background: var(--contours) left -120px bottom -160px / 820px auto no-repeat, var(--forest); }
footer .wrap { color: var(--forest-ink); }
footer a { color: var(--forest-link); }
header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
header nav { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; font-family: var(--font-display); font-size: .9rem; }
header nav a { color: var(--ink); text-decoration: none; }
header nav a:hover { text-decoration: underline; }
header nav .navbtn { background: var(--accent); color: #FFFFFF; padding: 6px 12px; border-radius: 8px; }
header nav .navbtn:hover { text-decoration: none; }
@media (max-width: 560px) { header nav a[href$="#contents"] { display: none; } header nav { gap: 6px 12px; font-size: .85rem; } }