/* Pollenwarte — marketing and legal site.
   One stylesheet, no framework, no build step, no script.

   The Herbarium design system (docs/specs/HERBARIUM.md), so the site and the
   app read as one thing:
     colour  → §2 "Colour" and "The pollen ramp", the values in
               lib/theme/design_tokens.dart (HerbariumColors.dark / .paper)
     type    → §2 "Typography": Newsreader, Atkinson Hyperlegible, IBM Plex Mono
     shape   → §2 "Shape and space": one 4 px radius, 1 px pencil hairlines,
               pills only for buttons, no elevation
   Do not invent hues here; take them from design_tokens.dart.

   Dark is the default, as in the app; paper follows the reader's light
   setting, like the app's "Auto". Rules kept from the app: no uppercase, no
   shadow, glow, blur or gradient (the lit slide of the field of view is the
   one gradient, §12.7), leaf green only for what can be followed or pressed,
   mono only for values and labels, lists as ruled rows, one plate per page. */

/* ── Fonts ───────────────────────────────────────────────────────────────────
   Byte-identical copies of the app's bundled faces (assets/fonts, digests in
   its README), served from this site so a visit makes no third-party font
   request. SIL OFL 1.1; the licences sit beside the files in /fonts. */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
  /* HerbariumColors.dark — the default. */
  --ground: #0E1310;   /* page ground */
  --plate:  #151C17;   /* the page's one raised surface */
  --field:  #19211B;   /* the field of view */
  --ink:    #ECE9DC;   /* text and line work */
  --ink2:   #AAB0A5;   /* secondary text, Latin names */
  --ink3:   #8A9287;   /* labels */
  --pencil: #2A332C;   /* hairlines */
  --leaf:   #95C7A8;   /* interactive only */

  /* The pollen ramp — severity and nothing else. Never behind text (§2). */
  --lv-none:      #5E675F;
  --lv-low:       #E3C660;
  --lv-moderate:  #DE9F38;
  --lv-high:      #E07A45;
  --lv-very-high: #E0584C;

  /* The lit slide (lib/ui/species_field.dart fieldSlideColors, dark):
     field lerped 7 % towards ink at the centre, field at 62 %, and 90 %
     towards ground at the rim. */
  --slide-0: #282F29;
  --slide-1: #19211B;
  --slide-2: #0F1411;

  /* Grains (§3 "Rendering by mode"): dark strokes in the level colour with a
     16 % fill of it (GrainInk.darkFill). */
  --g-fo: 0.16;

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-reading: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing — the app's scale (§2), plus two section steps for a page. */
  --sp-4: 4px;  --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-28: 28px;
  --sp-48: 48px; --sp-72: 72px;

  --radius: 4px;          /* plates, inputs — the only corner (§2) */
  --pill: 999px;          /* buttons only */
  --gutter: 20px;         /* the app's page gutter */
  --measure: 64ch;
  --maxw: 1080px;

  color-scheme: dark;
}

/* Paper — HerbariumColors.paper, for a reader whose device is light. */
@media (prefers-color-scheme: light) {
  :root {
    --ground: #EFEFE7;
    --plate:  #F8F8F3;
    --field:  #FBFBF7;
    --ink:    #1C2620;
    --ink2:   #4F5951;
    --ink3:   #646C62;
    --pencil: #CFD0C4;
    --leaf:   #2F5D46;

    --lv-none:      #C9CABF;
    --lv-low:       #E6C65C;
    --lv-moderate:  #D29A2A;
    --lv-high:      #B2582A;
    --lv-very-high: #6E2A28;

    /* fieldSlideColors, paper: field, field, and halfway to pencil. */
    --slide-0: #FBFBF7;
    --slide-1: #FBFBF7;
    --slide-2: #E5E5DE;

    /* Pale gold and ochre strokes fail on paper, so paper grains are inked
       and carry the level as a 55 % fill (GrainInk.paperFill). */
    --g-fo: 0.55;

    color-scheme: light;
  }
}

/* Increase Contrast, as in the app (§2): secondary inks resolve to ink and
   hairlines to ink3. */
@media (prefers-contrast: more) {
  :root {
    --ink2: var(--ink);
    --ink3: var(--ink);
    --pencil: #8A9287;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root { --pencil: #646C62; }
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-reading);
  font-size: 1.0625rem;          /* reading 17 */
  line-height: 1.55;
  background: var(--ground);
  color: var(--ink);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* Links are leaf and underlined, so they differ from ink by more than hue. */
a {
  color: var(--leaf);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 640px) {
  .wrap { padding-inline: var(--sp-28); }
}

.section { padding-block: clamp(var(--sp-48), 7vw, var(--sp-72)); }
.section + .section { border-top: 1px solid var(--pencil); }

.skip-link {
  position: absolute;
  left: var(--sp-12);
  top: var(--sp-12);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--leaf);
  color: var(--ground);
  padding: var(--sp-12) var(--sp-20);
  border-radius: var(--pill);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

/* ── Type ────────────────────────────────────────────────────────────────── */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-synthesis: none;
}
h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.25rem); line-height: 1.15; }
h3 { font-size: 1.5rem; line-height: 1.2; }

/* Page titles on the text pages: display 34, as a pushed app page. */
.page-title { font-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem); line-height: 1.12; }

p, li, dd { max-width: var(--measure); }

.lede { font-size: 1.1875rem; line-height: 1.5; color: var(--ink2); }
.muted { color: var(--ink2); }

/* Latin names: always Newsreader italic (§1 rule 3). */
.latin {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink2);
}

/* Labels and values: IBM Plex Mono, sentence case, 0.04 em (§2). Never a
   whole sentence (§13 rule 2). */
.label, .value {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.label { font-size: 0.8125rem; line-height: 1.5; color: var(--ink3); }
.value { font-variant-numeric: tabular-nums; }

.stack > * + * { margin-top: var(--sp-16); }

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-header { border-bottom: 1px solid var(--pencil); }

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--sp-24);
  row-gap: 0;
  padding-block: var(--sp-8);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--ink);
  text-decoration: none;
}
.brand-grain { flex: none; width: 24px; height: 24px; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-20);
  font-size: 0.9375rem;
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink3);
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
/* The current page reads like the app's active tab: ink, bold, and a 5 px
   leaf dot below. */
.site-nav a[aria-current='page'] { color: var(--ink); font-weight: 700; }
.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--leaf);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-28);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 0 var(--sp-24);
  border-radius: var(--pill);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* One per page, leaf filled (§5 "Primary button"). */
.btn-primary {
  min-height: 50px;
  background: var(--leaf);
  color: var(--ground);
}
/* Quiet: transparent with a pencil hairline, ink text (app_theme.dart
   outlinedButtonTheme). */
.btn-quiet {
  min-height: 48px;
  border: 1px solid var(--pencil);
  color: var(--ink);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(var(--sp-28), 6vw, var(--sp-72)); }

.hero-grid {
  display: grid;
  gap: var(--sp-48);
  align-items: center;
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.hero h1 { margin-top: var(--sp-12); }
.hero .lede { margin-top: var(--sp-20); max-width: 40ch; }
.hero .facts { margin-top: var(--sp-24); }

/* ── The field of view ───────────────────────────────────────────────────── */

.field-figure { justify-self: center; width: 100%; max-width: 400px; }

.field {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
}
.field .slide { stroke: var(--pencil); stroke-width: 1; }
.field .slide-0 { stop-color: var(--slide-0); }
.field .slide-1 { stop-color: var(--slide-1); }
.field .slide-2 { stop-color: var(--slide-2); }
.field .reticle { stroke: var(--ink3); stroke-width: 1; fill: none; }
.field .scale {
  fill: var(--ink3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* A grain's stroke is currentColor and its fill reads --g at --g-fo; the
   level class picks the colour, the mode picks stroke-or-ink. */
.lv-none      { --g: var(--lv-none); }
.lv-low       { --g: var(--lv-low); }
.lv-moderate  { --g: var(--lv-moderate); }
.lv-high      { --g: var(--lv-high); }
.lv-very-high { --g: var(--lv-very-high); }

.grain { color: var(--g); }
@media (prefers-color-scheme: light) {
  .grain { color: var(--ink); }
}
.grain-fill { fill: var(--g); fill-opacity: var(--g-fo); stroke: none; }

.field-caption { margin-top: var(--sp-16); }

/* ── Species rows (§5 SpeciesRow, without values: the example has none) ── */

.species-rows { list-style: none; margin-top: var(--sp-12); }
.species-rows li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-12);
  min-height: 52px;
  padding-block: var(--sp-8);
  border-top: 1px solid var(--pencil);
  max-width: none;
}
.species-rows li:last-child { border-bottom: 1px solid var(--pencil); }
.species-rows svg { width: 30px; height: 30px; }
.species-name { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.2; }
.species-rows .latin { display: block; font-size: 0.8125rem; line-height: 1.3; }

/* LevelMark (§5): a 10 px circle in the level colour beside the word in ink.
   Never text on the colour; the word always carries the level. */
.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: 0.875rem;
  color: var(--ink);
  white-space: nowrap;
}
.mark::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--g);
}

.levels {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-24);
  row-gap: var(--sp-8);
  list-style: none;
}
.levels li { max-width: none; }

/* ── Feature rows ────────────────────────────────────────────────────────── */

.feature {
  display: grid;
  gap: var(--sp-28);
  padding-block: var(--sp-48);
  border-top: 1px solid var(--pencil);
  align-items: start;
}
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature > div > * + * { margin-top: var(--sp-16); }
.feature h2 + p { margin-top: var(--sp-16); }

@media (min-width: 760px) {
  .feature { grid-template-columns: minmax(0, 1fr) 260px; column-gap: var(--sp-48); }
  .feature.two-shots { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Two screens of one feature stand side by side at every width. */
.shots-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: var(--sp-16);
  justify-content: center;
}

/* ── Phone frames ────────────────────────────────────────────────────────
   The device, not a plate: a pencil hairline around the screen with the
   screen's own corner, no shadow. */

.shot { justify-self: center; width: 100%; max-width: 260px; }
@media (max-width: 759px) {
  .shot { max-width: 240px; }
}

.phone {
  padding: 6px;
  border: 1px solid var(--pencil);
  border-radius: 34px;
  background: var(--plate);
}
.phone img {
  width: 100%;
  height: auto;
  border-radius: 28px;
  background: var(--field);
}
.shot figcaption { margin-top: var(--sp-8); text-align: center; }

/* ── Ruled rows (key / text) ─────────────────────────────────────────────── */

.rows { list-style: none; margin-top: var(--sp-24); }
.rows > li {
  display: grid;
  gap: var(--sp-4) var(--sp-24);
  padding-block: var(--sp-16);
  border-top: 1px solid var(--pencil);
  max-width: none;
}
.rows > li:last-child { border-bottom: 1px solid var(--pencil); }
.rows > li > p { max-width: var(--measure); }
@media (min-width: 640px) {
  .rows > li { grid-template-columns: 11rem minmax(0, 1fr); }
  .rows > li > .label { padding-top: 0.2em; }
}

/* ── The page's one plate ────────────────────────────────────────────────── */

.plate {
  background: var(--plate);
  border: 1px solid var(--pencil);
  border-radius: var(--radius);
  padding: clamp(var(--sp-20), 4vw, var(--sp-28));
}

.plus {
  display: grid;
  gap: var(--sp-28);
  align-items: start;
}
@media (min-width: 760px) {
  .plus { grid-template-columns: minmax(0, 1fr) 260px; column-gap: var(--sp-48); }
}
.plus > div > * + * { margin-top: var(--sp-16); }

/* ── Source table ────────────────────────────────────────────────────────── */

.sources { width: 100%; border-collapse: collapse; }
.sources caption {
  text-align: left;
  padding-bottom: var(--sp-8);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink3);
}
.sources th, .sources td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-12) var(--sp-16) var(--sp-12) 0;
  border-bottom: 1px solid var(--pencil);
  max-width: none;
}
.sources thead th {
  border-top: 1px solid var(--pencil);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink3);
}
.sources td { color: var(--ink2); }
.sources td:first-child { color: var(--ink); }
@media (max-width: 620px) {
  .sources, .sources caption, .sources tbody, .sources tr, .sources td { display: block; width: 100%; }
  .sources thead { display: none; }
  .sources tbody tr:first-child { border-top: 1px solid var(--pencil); }
  .sources tr { border-bottom: 1px solid var(--pencil); padding-block: var(--sp-12); }
  .sources td { border: 0; padding: 0 0 var(--sp-4); }
}

/* ── Legal and long-form prose ───────────────────────────────────────────── */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-16); }
.prose h2 { margin-top: var(--sp-48); font-size: 1.5rem; }
.prose h3 { margin-top: var(--sp-28); font-size: 1.25rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--sp-4); }
.prose .sources { margin-top: var(--sp-24); }
.stack > .sources + h3 { margin-top: var(--sp-48); }

/* The summary at the top of a legal page is that page's one plate. */
.note {
  background: var(--plate);
  border: 1px solid var(--pencil);
  border-radius: var(--radius);
  padding: var(--sp-20);
  color: var(--ink);
}

.small { font-size: 0.875rem; color: var(--ink2); }

/* Long URLs and addresses must never force a sideways scroll. */
.prose a, .prose li, .prose p, .prose td, .note { overflow-wrap: anywhere; }

.page-head > * + * { margin-top: var(--sp-8); }
.page-body { margin-top: var(--sp-48); }

.lang { display: flex; flex-wrap: wrap; column-gap: var(--sp-16); }
.lang a { display: inline-flex; align-items: center; min-height: 44px; }
.lang a[aria-current='page'] { color: var(--ink); font-weight: 700; text-decoration: none; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--pencil);
  padding-block: var(--sp-48);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-24) var(--sp-48);
  justify-content: space-between;
}
.footer-nav { display: flex; flex-wrap: wrap; column-gap: var(--sp-20); }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.colophon { font-size: 0.875rem; color: var(--ink3); max-width: 52ch; }

/* ── 404 ─────────────────────────────────────────────────────────────────── */

.centered {
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Support: the contact block is that page's one plate. */
.contact > * + * { margin-top: var(--sp-12); }
.contact + .page-body { margin-top: var(--sp-48); }