/* Clinical Evolution tokens, mirrored from bh_design/design_tokens.dart. */
@font-face { font-family: Lora; src: url('fonts/Lora-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Regular.ttf'); font-display: swap; }
:root {
  --background: #ffffff; --surface: #fafafa; --ink: #111111; --sub: #545454;
  --line: #eaeae6; --sage-soft: #c8d2c2; --sand: #e6d3be;
  --xs: 4px; --sm: 8px; --md: 12px; --lg: 16px; --xl: 20px; --xxl: 24px; --xxxl: 32px;
  --radius: 4px; --hairline: 1px; --hero: 42px; --title: 30px; --heading: 22px; --body: 16px; --caption: 12px;
  --tracking: 1.2px; --reading-width: 48rem; --page-width: 68rem; --line-height: 1.7;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--background); font: var(--body)/var(--line-height) 'Open Sans', sans-serif; }
a { color: inherit; text-underline-offset: var(--xs); }
a:focus-visible { outline: var(--hairline) solid var(--ink); outline-offset: var(--xs); }
.wrap { width: min(100%, var(--page-width)); margin: auto; padding: var(--xxl); }
header { border-bottom: var(--hairline) solid var(--line); }
header .wrap, footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--xl); flex-wrap: wrap; }
.brand { font: var(--title)/1.3 Lora, Georgia, serif; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: var(--xl); }
.meta { font: var(--caption)/var(--line-height) 'Space Mono', monospace; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--sub); }
.hero { padding-block: calc(var(--xxxl) * 2); background: linear-gradient(135deg, color-mix(in srgb, var(--sage-soft) 28%, var(--background)), var(--background) 55%, color-mix(in srgb, var(--sand) 22%, var(--background))); }
h1, h2 { font-family: Lora, Georgia, serif; font-weight: normal; line-height: 1.3; }
h1 { font-size: clamp(var(--title), 5vw, calc(var(--hero) * 1.4)); margin: var(--lg) 0 var(--xxl); }
h2 { font-size: var(--heading); margin: var(--xxxl) 0 var(--md); }
p { margin: var(--lg) 0; }
.intro, .prose { max-width: var(--reading-width); }
.intro { font-size: var(--heading); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--xl); padding-block: var(--xxxl); }
.panel { border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--xxl); }
.panel h2 { margin-top: var(--md); }
.prose { padding-block: var(--xxxl); }
li { margin-bottom: var(--sm); }
footer { border-top: var(--hairline) solid var(--line); margin-top: var(--xxxl); color: var(--sub); font-size: var(--caption); }