/* Open Source Apothecary At Home — single stylesheet. No external requests:
   both typefaces are self-hosted in assets/fonts/ (Special Elite, Apache-2.0;
   Lato, OFL-1.1). Nothing here fetches anything at runtime.

   Jason's text-size bias is a hard rule: body >= 16px, labels 16-19px. The rem
   base is set on :root; a body { font: ... } shorthand does NOT set it.

   Visual language: a vintage-apothecary catalogue — distressed typewriter
   display face over a clean sans, off-white paper, sage panels, charcoal
   buttons, square corners, no shadows, hairlines instead of boxes.
   Source of truth: assets/style.css (outside site/, which the build wipes). */

@font-face {
  font-family: "Special Elite";
  src: url("fonts/special-elite-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/lato-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/lato-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink: #2b2b28;            /* body text */
  --ink-soft: #5c5b54;
  --paper: #fbfaf6;          /* page */
  --paper-2: #f3f1e9;        /* recessed panel */
  --card: #ffffff;
  --rule: #dcdcd2;           /* hairline */
  --char: #22221f;           /* buttons / footer */
  --sage: #748661;           /* primary accent */
  --sage-dp: #55643f;
  --sage-pale: #eef2e6;
  --sage-band: #d4e2c2;
  --danger: #8c2b1d;
  --danger-bg: #fbf0ee;
  --amber: #7d5a12;
  --sky: #33586e;
  --radius: 0;               /* the look is emphatically square */
  --display: "Special Elite", "Courier New", Courier, monospace;
  --text: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --track: .08em;            /* letterspacing for nav, labels, badges */
  font-size: 18px;           /* rem base — Jason's floor is 16px */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.05rem;
  line-height: 1.7;
  letter-spacing: .012em;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--char); color: #fff; padding: .6rem 1rem; z-index: 99; }

/* ---------- announcement strip ------------------------------------------- */
/* The slot a subscription site puts its promo bar in. This one states the
   funding model instead, because that is the honest version of the same
   signal: nothing below is being sold to you. */
.strip {
  margin: 0; padding: .6rem 1.25rem; text-align: center;
  background: var(--sage); color: #fff;
  font-size: 1rem; letter-spacing: var(--track); text-transform: uppercase;
}

/* ---------- masthead ------------------------------------------------------ */
/* Centred wordmark over a nav bracketed by hairlines — the masthead of a
   printed catalogue, not an app bar. The emblem occupies the position a
   brand's illustrated logo would, and is drawn by the plate engine. */
.topbar {
  background: var(--paper);
  padding: 1.5rem 1.25rem 0;
  text-align: center;
}
.brand {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.95rem;
  font-weight: 400;
  color: var(--char);
  text-decoration: none;
  letter-spacing: .06em;
  line-height: 1.25;
  max-width: 40rem;
}
.brand em { font-style: normal; color: var(--sage-dp); }
.brand .mark { color: var(--sage); font-size: .85em; }
.emblem { display: block; width: 100%; max-width: 21rem; margin: 0 auto .6rem; }
.emblem svg.spray { display: block; width: 100%; height: auto; }

.sitenav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem 1.7rem;
  margin: 1.5rem auto 0;
  max-width: 62rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .15rem 0;
}
.sitenav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: var(--track);
  padding: .8rem .1rem;
  border-bottom: 2px solid transparent;
}
.sitenav a:hover { color: var(--sage-dp); border-bottom-color: var(--sage); }
.sitenav a.on { color: var(--char); border-bottom-color: var(--char); }
.sitenav .n { opacity: .5; font-size: .85em; margin-left: .3em; }

/* ---------- typography --------------------------------------------------- */
/* Special Elite ships a single weight: asking for bold makes the browser
   synthesise a smear, so headings pin font-weight to 400. */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--char); }
h1 { font-size: 2.35rem; line-height: 1.18; margin: 2.2rem 0 .6rem; letter-spacing: .01em; }
h2 {
  font-size: 1.65rem; line-height: 1.25; margin: 3rem 0 .9rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--rule);
}
h3 { font-size: 1.25rem; margin: 1.8rem 0 .4rem; }
h4 { font-size: 1.1rem; margin: .4rem 0 .5rem; line-height: 1.4; }
p { margin: .8rem 0; }
a { color: var(--sage-dp); }
a:hover { color: var(--char); }
.standfirst { font-size: 1.2rem; color: var(--ink-soft); margin-top: 0; line-height: 1.6; }
.crumb { font-size: 1rem; color: var(--ink-soft); margin: 2rem 0 0; letter-spacing: var(--track); text-transform: uppercase; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--sage-dp); }
.count { font-size: 1rem; color: var(--ink-soft); }

/* ---------- home hero ---------------------------------------------------- */
/* A split hero — tinted panel one side, a plate the other — mirroring the
   catalogue layout it is competing with, which puts a photograph there. The
   plate costs no request and stays sharp at any size. */
.hero { background: var(--sage-pale); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 2.2rem 1.5rem; margin-bottom: 2.2rem; }
.hero-split { display: grid; grid-template-columns: 1.5fr .75fr; gap: 2.4rem; align-items: center; }
.hero-panel h1 { font-size: 3rem; margin: 0 0 1.1rem; line-height: 1.14; }
.hero-panel .standfirst { max-width: 42rem; }
.hero-fig {
  display: block; text-decoration: none;
  background: #fdfcf8; border: 1px solid var(--rule);
  padding: 12px 12px 8px; max-width: 300px; justify-self: end;
}
.hero-fig svg.plate { display: block; width: 100%; height: auto; }
.hero-fig span { display: block; text-align: center; font-size: .9rem; padding-top: 7px; color: var(--ink-soft); letter-spacing: .02em; }
.hero-fig:hover { border-color: var(--sage); }
.lede { font-size: 1.18rem; max-width: 46rem; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 2.4rem; margin: 2rem 0 1.6rem; max-width: 34rem; }
.stats div { display: flex; flex-direction: column; }
.stats strong { font-family: var(--display); font-size: 2.3rem; color: var(--sage-dp); line-height: 1; letter-spacing: .02em; }
.stats span { font-size: 1rem; color: var(--ink-soft); letter-spacing: var(--track); text-transform: uppercase; }
.rules { background: var(--sage-pale); border: 1px solid var(--rule); border-left: 4px solid var(--sage); padding: 1.2rem 1.5rem 1.5rem; margin: 2.4rem 0; }
.rules ol { padding-left: 1.4rem; }
.rules li { margin: .6rem 0; }

/* ---------- cards -------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.1rem; }
.card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--rule);
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex; flex-direction: column;
  transition: border-color .15s, background .15s;
}
.card:hover { border-color: var(--sage); background: var(--sage-pale); }
.card h3 { margin: 0 0 .35rem; color: var(--char); font-size: 1.2rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.seccard .count { display: block; margin-top: .6rem; }

.kind {
  display: inline-block; margin-top: .7rem;
  font-size: .9rem; letter-spacing: var(--track); text-transform: uppercase;
  padding: .2rem .55rem; background: var(--paper-2); color: var(--ink-soft);
  border: 1px solid var(--rule);
  margin-top: auto; align-self: flex-start;
}
.k-remedy, .k-growing { background: var(--sage-pale); color: var(--sage-dp); border-color: #ccd8bb; }
.k-method { background: #eaf0f4; color: var(--sky); border-color: #d3e0e8; }
.k-safety { background: var(--danger-bg); color: var(--danger); border-color: #eccfc9; }
.k-guide { background: #f7f0df; color: var(--amber); border-color: #eadfc2; }

/* ---------- evidence ----------------------------------------------------- */
.evlist { display: grid; gap: 1.1rem; }
.evcard {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 4px solid var(--sage);
  padding: 1rem 1.2rem 1.1rem;
}
.evmeta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; font-size: 1rem; color: var(--ink-soft); }
.grade {
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--track);
  font-size: .9rem; padding: .15rem .5rem; background: var(--paper-2); color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.g-meta-analysis { background: #deebd8; color: #24401c; border-color: #c8dcc0; }
.g-systematic-review { background: #e6efe0; color: #2f4d24; border-color: #d2e2ca; }
.g-randomized-controlled-trial { background: var(--sage-pale); color: var(--sage-dp); border-color: #ccd8bb; }
.g-review { background: #f0eee7; color: var(--ink-soft); }
.evcard blockquote {
  margin: .7rem 0 .6rem; padding: .6rem 1rem;
  border-left: 3px solid var(--sage-band); background: #fdfcf7;
  font-size: 1.02rem; font-style: normal;
}
.evcard .implication { color: var(--ink-soft); font-size: 1rem; }
.pmlink { font-size: 1rem; text-decoration: none; color: var(--sky); }
.pmlink:hover { text-decoration: underline; }

/* ---------- callouts ----------------------------------------------------- */
.cautions, .related { padding-left: 1.4rem; }
.cautions li, .related li { margin: .5rem 0; }
.redflags { background: var(--danger-bg); border: 1px solid #eccfc9; border-left: 4px solid var(--danger); padding: 1.1rem 1.5rem 1.1rem 2.5rem; margin: 1.6rem 0; }
.redflags li { margin: .55rem 0; color: var(--danger); }
.redflags li strong { color: var(--danger); }
.prep { background: var(--card); border: 1px solid var(--rule); padding: .5rem 1.5rem 1.1rem; margin: 1.6rem 0; }
.grow { background: var(--sage-pale); border: 1px solid var(--rule); border-left: 4px solid var(--sage); padding: .5rem 1.5rem 1.1rem; margin: 1.6rem 0; }

/* ---------- course sequence ---------------------------------------------- */
.unitnav {
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin: 2.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule);
}
.unitnav a { color: var(--sage-dp); text-decoration: none; font-size: 1rem; max-width: 48%; }
.unitnav a:hover { text-decoration: underline; }
.unitnav .un-next { margin-left: auto; text-align: right; }

/* ---------- citations ---------------------------------------------------- */
.cite {
  text-decoration: none; font-size: .84em; vertical-align: super;
  color: var(--sky); background: #eaf0f4; padding: 0 .22em; border: 1px solid #d3e0e8;
}
.cite:hover { background: var(--sky); color: #fff; }
.sources { font-size: 1rem; color: var(--ink-soft); }
.sources li { margin: .5rem 0; }

footer {
  border-top: 1px solid var(--rule); background: var(--paper-2);
  padding: 1.6rem 1.25rem 2.6rem; font-size: 1rem; color: var(--ink-soft);
}
footer p { max-width: 62rem; margin: .7rem auto; }
.footnav { max-width: 62rem; margin: 0 auto .9rem; display: flex; flex-wrap: wrap;
  gap: .3rem 1.4rem; justify-content: center; }
.footnav a { color: var(--ink-soft); text-decoration: none; font-size: 1rem; }
.footnav a:hover { color: var(--sage-dp); text-decoration: underline; }
.footnav a.on { color: var(--char); font-weight: 700; }
footer .license { font-size: .95rem; }

@media (max-width: 46rem) {
  .hero-split { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-fig { justify-self: center; max-width: 260px; }
}
@media (max-width: 40rem) {
  :root { font-size: 17px; }
  .hero-panel h1 { font-size: 2.2rem; }
  h1 { font-size: 1.85rem; }
  .grid { grid-template-columns: 1fr; }
  .sitenav { gap: 0 .9rem; }
}

/* ---------------------------------------------------------------- plates */
/* Hand-drawn botanical plates. Monochrome by design: they read as pencil on
   paper, they print without ink waste, and they do not fight the text. */

.platefig {
  float: right;
  width: 216px;
  margin: 6px 0 20px 28px;
  padding: 11px 11px 9px;
  border: 1px solid var(--rule);
  background: #fdfcf8;
}
.platefig svg.plate { display: block; width: 100%; height: auto; }
.platefig figcaption {
  font-size: .9rem;               /* 16.2px — the label floor */
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 8px;
}
.platefig figcaption b { color: var(--char); }
.platefig figcaption i { color: var(--sage-dp); }

.platewall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px;
  margin: 20px 0 8px;
}
.ptile {
  display: block;
  padding: 9px 9px 7px;
  border: 1px solid var(--rule);
  background: #fdfcf8;
  text-decoration: none;
}
.ptile svg.plate { display: block; width: 100%; height: auto; }
.ptile span {
  display: block;
  font-size: .9rem;               /* 16.2px — the label floor */
  color: var(--ink);
  text-align: center;
  padding-top: 5px;
  letter-spacing: .02em;
}
.ptile span i { color: var(--ink-soft); font-size: .95em; }
.ptile:hover { border-color: var(--sage); background: var(--sage-pale); }

@media (max-width: 720px) {
  .platefig { float: none; width: auto; margin: 0 0 20px; }
}

/* ----------------------------------------------------------------- print */
/* This is a handbook, and people print handbooks. Print puts the plates with
   the text, drops the navigation, and keeps page breaks off mid-table. */
@media print {
  @page { margin: 16mm 14mm; }
  :root { font-size: 12pt; }
  body { background: #fff; color: #000; }
  nav, .crumbs, .related, .platewall, .stats, form { display: none !important; }
  .footnav, .strip { display: none !important; }
  .topbar { padding: 0 0 .6rem; }
  .brand { font-size: 1.2rem; }
  .emblem, .strip { display: none; }
  .hero { background: none; border: 0; padding: 0; }
  .hero-split { grid-template-columns: 1fr; }
  .platefig { float: right; width: 46mm; margin: 0 0 4mm 6mm; border: 0; background: none; }
  .platefig figcaption { font-size: 8pt; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  h1, h2, h3 { break-after: avoid; }
  table, .evcard, figure { break-inside: avoid; }
  .evcard { border-left: 2px solid #999; break-inside: avoid; }
  #sources { break-before: page; }
}

/* =========================================================================
   Loop Farmstead menu bar
   -------------------------------------------------------------------------
   The Apothecary is published at loopfarmstead.com/apothecary-at-home/, so the
   site's own menu bar sits above the Apothecary banner. The markup is emitted by
   page_shell() in scripts/build_site.py - edit it THERE, never in site/, because
   the build regenerates every page (and a cron republishes every 5 minutes).

   The bar is styled here rather than by linking the main site's stylesheets, so
   nothing in them can reach the Apothecary's own tokens. Colours and sizes are
   literal for the same reason: this file defines --amber with a different value,
   and its rem base is 18px where the main site's is 16px, so copying the main
   site's `em`/`rem` figures would silently come out a size too large.

   Sizes are measured, not copied. The main site's bar is EB Garamond at 17px in a
   1240px container and collapses at 1200px; at that size THIS page's row measured
   1097px and overflowed the viewport by up to 26px, because the Apothecary does
   not load EB Garamond and falls back to a wider face. 16px measures 1043px and
   is clean at every width from 390 to 1600px. 16px is also the text floor.
   ========================================================================= */
body .site-nav {
  background: #1a1a2e;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(26,26,46,.25);
}
body .site-nav .nav-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: nowrap;
}
body .site-nav .nav-brand {
  font-family: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d4a843;
  white-space: nowrap;
}
body .site-nav .nav-links {
  list-style: none;
  display: flex;
  gap: clamp(.45rem, .85vw, 1.1rem);
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
body .site-nav .nav-links li { white-space: nowrap; }
body .site-nav .nav-links a {
  font-family: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  color: #d4a843;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
/* Hover has to clear AA on the dark bar: #d4a843 is 7.70:1, #e8c87a is 10.54:1.
   The main site's own nav hover uses --amber, which is the light-background gold
   and measures only 2.88:1 against this background. */
body .site-nav .nav-links a:hover,
body .site-nav .nav-links a:focus-visible {
  color: #e8c87a;
  border-bottom-color: #e8c87a;
}
body .site-nav .nav-links a.btn-donate {
  background: #9a4522;
  color: #fff;
  padding: .4rem .9rem;
  border-radius: 3px;
  font-weight: 600;
  border-bottom: none;
}
body .site-nav .nav-links a.btn-donate:hover { background: #7d3719; color: #fff; }
/* Projects disclosure: CSS only, opens on hover and on keyboard focus. */
body .site-nav .nav-links > li.has-sub { position: relative; }
body .site-nav .nav-links > li.has-sub > a::after {
  content: "";
  display: inline-block;
  width: .4em; height: .4em;
  margin-left: .45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.18em) rotate(45deg);
}
body .site-nav .nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 120;
  min-width: 15rem;
  margin: 0;
  padding: .55rem 0 0;   /* transparent bridge from the trigger to the panel */
  list-style: none;
  display: none;
}
body .site-nav .nav-sub > li > a,
body .site-nav .nav-sub > li > span {
  display: block;
  padding: .5rem .9rem;
  background: #1a1a2e;
  color: #d4a843;
  font-size: 16px;
  text-transform: none;
  letter-spacing: .02em;
  border-bottom: 1px solid transparent;
}
body .site-nav .nav-sub > li:first-child > a,
body .site-nav .nav-sub > li:first-child > span { border-radius: 3px 3px 0 0; }
body .site-nav .nav-sub > li:last-child > a,
body .site-nav .nav-sub > li:last-child > span { border-radius: 0 0 3px 3px; }
body .site-nav .nav-sub > li > a:hover,
body .site-nav .nav-sub > li > a:focus-visible { background: #7d3719; color: #fff; }
body .site-nav .nav-sub > li.nav-sub-group > span {
  font-family: var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e8c87a;
  padding-top: .7rem;
  padding-bottom: .3rem;
}
body .site-nav .nav-sub > li:last-child > a {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.32);
}
body .site-nav .nav-sub .sub-free {
  color: #e8c87a;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-left: .5rem;
}
body .site-nav .nav-links > li.has-sub:hover > .nav-sub,
body .site-nav .nav-links > li.has-sub:focus-within > .nav-sub { display: block; }
body .site-nav .nav-toggle { display: none; cursor: pointer; }
body .site-nav .nav-toggle span { display: block; width: 24px; height: 3px; background: #d4a843; margin: 3px 0; }

/* Below the collapse width the bar becomes a hamburger. Touch has no hover, so
   the Projects panel is static and always open inside the opened menu. */
@media (max-width: 1200px) {
  body .site-nav .nav-container { flex-wrap: wrap; }
  body .site-nav .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: .8rem;
    padding: .5rem 0 1rem;
    flex-wrap: wrap;
  }
  body .site-nav .nav-links.active { display: flex; }
  body .site-nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex-direction: column;
  }
  body .site-nav .nav-sub {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 0 .9rem;
  }
  body .site-nav .nav-sub > li > a,
  body .site-nav .nav-sub > li > span {
    background: transparent;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0;
  }
  body .site-nav .nav-links > li.has-sub > a::after { display: none; }
}


/* ---- Search: one box under the masthead, results open beneath it ----
   The row ships `hidden` and search.js reveals it, so a reader without
   JavaScript is never shown a box that cannot work. Every size is >= 1rem
   (18px here): Jason's floor is 16px and that applies to controls too. */
.searchrow {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: .9rem 1.25rem;
}
.hsearch { max-width: 46rem; margin: 0 auto; position: relative; }
.hsearch input {
  width: 100%;
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .7rem .85rem;
}
.hsearch input::placeholder { color: var(--ink-soft); opacity: .85; }
.hsearch input:focus { border-color: var(--sage); outline: 2px solid var(--sage); outline-offset: 1px; }
.hs-out {
  position: absolute; left: 0; right: 0; top: calc(100% + .45rem);
  z-index: 40;
  background: var(--card);
  border: 1px solid var(--rule);
  max-height: 62vh; overflow: auto;
}
.hs-count {
  margin: 0; padding: .55rem .85rem;
  font-size: 1rem; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--rule);
}
.hs-note { margin: 0; padding: .85rem; font-size: 1rem; color: var(--ink-soft); }
.hs-list { list-style: none; margin: 0; padding: 0; }
.hs-list a {
  display: block; padding: .7rem .85rem;
  border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
}
.hs-list li:last-child a { border-bottom: 0; }
.hs-list a:hover, .hs-list a:focus { background: var(--sage-pale); }
.hs-list strong { display: block; font-size: 1.05rem; color: var(--char); }
.hs-list span { display: block; font-size: 1rem; color: var(--ink-soft); }
.hs-list mark { background: var(--sage-band); color: var(--char); }
.vishide {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 640px) {
  .searchrow { padding: .75rem .9rem; }
  .hs-out { max-height: 56vh; }
}