:root {
  color-scheme: light;
  --bg: #F4F1E9;
  --surface: #FBFAF6;
  --sunken: #EAE5D8;
  --fg: #191C24;
  --muted: #4A4F5A;
  --rule: #CDC5B3;
  --rule-strong: #77715F;
  --ink-rule: #191C24;
  --link: #2648B5;
  --moss: #256A3C;
  --moss-hover: #1D5530;
  --moss-ink: #FFFFFF;
  --moss-soft: #D7EADC;
  --moss-line: #7FB08F;
  --tannin: #8A6512;
  --tannin-soft: #F5E6C0;
  --warn: #765400;
  --danger: #B42F1C;
  --sun: #B85109;
  --field: #EAE5D8;
  --field-ink: #191C24;
  --field-muted: #4A4F5A;
  --field-rule: #CDC5B3;
  --shadow: rgba(25, 28, 36, 0.16);
  --tape: #EAE5D8;
  --tape-ink: #191C24;
  --glass: rgba(38, 72, 181, 0.05);
  --glow: rgba(38, 72, 181, 0.24);
  --room: #0d110b;
  --room-2: #151b11;
  --room-fg: #e9efdc;
  --room-muted: #9aa58c;
  --room-rule: #2a3322;
  --lime: #c5e04a;
  --lime-ink: #0d110b;
  --radius: 10px;
  --radius-sm: 6px;
  --max: 77rem;
  --read: 44rem;
  --sans: 'FK Atkinson Next', 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'FK Anybody', 'Arial Black', ui-sans-serif, system-ui, sans-serif;
  --mono: var(--sans);
  --serif: var(--display);
  --orange: #EE7A1B;
  --orange-hi: #FFB067;
  --orange-deep: #C95F0C;
  --t1: #2C55C8;
  --t1-on: #FFFFFF;
  --t1-text: #2C55C8;
  --t1-tint: #DDE4F7;
  --t2: #E3A21F;
  --t2-on: #191C24;
  --t2-text: #765400;
  --t2-tint: #F5E6C0;
  --t3: #2E7A47;
  --t3-on: #FFFFFF;
  --t3-text: #256A3C;
  --t3-tint: #D7EADC;
  --t4: #191C24;
  --t4-on: #191C24;
  --t4-text: #191C24;
  --t4-tint: #E4DFD3;
  --t5: #7A3F9E;
  --t5-on: #FFFFFF;
  --t5-text: #7A3F9E;
  --t5-tint: #E9DDF1;
  --urgent: #C8341F;
  --urgent-on: #FFFFFF;
  --urgent-deep: #9E2716;
  --fk-line: #191C24;
  --fk-num: #F4F1E9;
  --fk-water: #DCE7EA;
  --fk-water2: #C9DADF;
  --fk-glass: #F8FBFB;
  --fk-soil: #4A4038;
  --fk-soildot: #8C7B69;
  --fk-wood: #8E5B33;
  --fk-leaf: #3F8E3E;
  --fk-leaf2: #2B6A2C;
  --fk-leafhi: #7DBE5E;
  --fk-dry: #A9572B;
  --fk-gel: #F0E1B0;
  --fk-sponge: #2F343D;
  --fk-spongedot: #5F6673;
  --fk-bubble: #FFFFFF;
  --club-edge: #0d110b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #121419;
    --surface: #1A1D24;
    --sunken: #20242C;
    --fg: #EEEAE0;
    --muted: #B8B3A7;
    --rule: #3A3F4A;
    --rule-strong: #8C8778;
    --ink-rule: #A29D90;
    --link: #8FA8F5;
    --moss: #6CC48B;
    --moss-hover: #8ED6A6;
    --moss-ink: #121419;
    --moss-soft: #16291E;
    --moss-line: #2F5A3E;
    --tannin: #F0B94A;
    --tannin-soft: #2E2614;
    --warn: #F0B94A;
    --danger: #F38270;
    --sun: #F6A35C;
    --field: #1A1D24;
    --field-ink: #EEEAE0;
    --field-muted: #B8B3A7;
    --field-rule: #3A3F4A;
    --shadow: rgba(0, 0, 0, 0.5);
    --tape: #20242C;
    --tape-ink: #EEEAE0;
    --glass: rgba(143, 168, 245, 0.05);
    --glow: rgba(143, 168, 245, 0.3);
    --orange: #F0832C;
    --orange-hi: #FFB570;
    --orange-deep: #C9630F;
    --t1: #7F9BF2;
    --t1-on: #121419;
    --t1-text: #8FA8F5;
    --t1-tint: #1C2440;
    --t2: #F0B94A;
    --t2-on: #121419;
    --t2-text: #F0B94A;
    --t2-tint: #2E2614;
    --t3: #5DB97E;
    --t3-on: #121419;
    --t3-text: #6CC48B;
    --t3-tint: #16291E;
    --t4: #EEEAE0;
    --t4-on: #EEEAE0;
    --t4-text: #EEEAE0;
    --t4-tint: #262A33;
    --t5: #B98BDB;
    --t5-on: #121419;
    --t5-text: #C49CE2;
    --t5-tint: #2A1E35;
    --urgent: #F0705A;
    --urgent-on: #121419;
    --urgent-deep: #F38E7B;
    --fk-line: #D9D4C8;
    --fk-num: #121419;
    --fk-water: #1A2A31;
    --fk-water2: #22363E;
    --fk-glass: #1E252B;
    --fk-soil: #2E2924;
    --fk-soildot: #5E5246;
    --fk-wood: #8A5B36;
    --fk-leaf: #4E9E4A;
    --fk-leaf2: #357A33;
    --fk-leafhi: #8CCB6B;
    --fk-dry: #B4643A;
    --fk-gel: #6B5F3C;
    --fk-sponge: #3A404B;
    --fk-spongedot: #6C7482;
    --fk-bubble: #C9D6DC;
    --club-edge: #56664A;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #121419;
  --surface: #1A1D24;
  --sunken: #20242C;
  --fg: #EEEAE0;
  --muted: #B8B3A7;
  --rule: #3A3F4A;
  --rule-strong: #8C8778;
  --ink-rule: #A29D90;
  --link: #8FA8F5;
  --moss: #6CC48B;
  --moss-hover: #8ED6A6;
  --moss-ink: #121419;
  --moss-soft: #16291E;
  --moss-line: #2F5A3E;
  --tannin: #F0B94A;
  --tannin-soft: #2E2614;
  --warn: #F0B94A;
  --danger: #F38270;
  --sun: #F6A35C;
  --field: #1A1D24;
  --field-ink: #EEEAE0;
  --field-muted: #B8B3A7;
  --field-rule: #3A3F4A;
  --shadow: rgba(0, 0, 0, 0.5);
  --tape: #20242C;
  --tape-ink: #EEEAE0;
  --glass: rgba(143, 168, 245, 0.05);
  --glow: rgba(143, 168, 245, 0.3);
  --orange: #F0832C;
  --orange-hi: #FFB570;
  --orange-deep: #C9630F;
  --t1: #7F9BF2;
  --t1-on: #121419;
  --t1-text: #8FA8F5;
  --t1-tint: #1C2440;
  --t2: #F0B94A;
  --t2-on: #121419;
  --t2-text: #F0B94A;
  --t2-tint: #2E2614;
  --t3: #5DB97E;
  --t3-on: #121419;
  --t3-text: #6CC48B;
  --t3-tint: #16291E;
  --t4: #EEEAE0;
  --t4-on: #EEEAE0;
  --t4-text: #EEEAE0;
  --t4-tint: #262A33;
  --t5: #B98BDB;
  --t5-on: #121419;
  --t5-text: #C49CE2;
  --t5-tint: #2A1E35;
  --urgent: #F0705A;
  --urgent-on: #121419;
  --urgent-deep: #F38E7B;
  --fk-line: #D9D4C8;
  --fk-num: #121419;
  --fk-water: #1A2A31;
  --fk-water2: #22363E;
  --fk-glass: #1E252B;
  --fk-soil: #2E2924;
  --fk-soildot: #5E5246;
  --fk-wood: #8A5B36;
  --fk-leaf: #4E9E4A;
  --fk-leaf2: #357A33;
  --fk-leafhi: #8CCB6B;
  --fk-dry: #B4643A;
  --fk-gel: #6B5F3C;
  --fk-sponge: #3A404B;
  --fk-spongedot: #6C7482;
  --fk-bubble: #C9D6DC;
  --club-edge: #56664A;
}

/* Molt & Moss, design preview "Field Key" (decisions/D-011_design_preview.md).
   ---------------------------------------------------------------------------
   A living field guide to the shrimp tank. Three printed devices carry it: numbered
   plates (original drawings that say they are drawings), thumb-index tabs in a shelf
   colour, and index-divider cards with a tab standing up from the top edge.

   Shelf colours: cobalt Setting up, ochre Bringing shrimp home, sap green Everyday care,
   plum Breeding and colours. Something looks wrong is an outlined ink tab, because
   vermilion is reserved for one job: the urgent lane ("Shrimp dying right now?") is the
   only vermilion fill on any page. Sunkist orange belongs to the animal and the
   ampersand, never to a button.

   Type: Anybody (OFL) for display, a variable width axis held near 104 to 116 percent and
   capped near 104 to 106 percent on phones and long guide titles so no title runs to four
   lines or breaks inside a word. Atkinson Hyperlegible Next (OFL) for reading, at 17px or
   more for long text. Both are self-hosted under /fonts/fieldguide/.

   Avoided on purpose: left-border callout bars, uppercase letterspaced labels, emoji
   headings, gradient hero blocks, paper textures, seals, rosettes and rotated text. */

@font-face {
  font-family: 'FK Anybody';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url('/fonts/fieldguide/anybody-latin-wdth-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'FK Atkinson Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/fieldguide/atkinson-next-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'FK Atkinson Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/fieldguide/atkinson-next-latin-wght-italic.woff2') format('woff2');
}

/* Shelf colours. --sf fills a tab, --sl draws its line, --so is text on the tab, --st is
   shelf-coloured text on paper and --sti is the shelf tint. The default is plain ink. */
body {
  --sf: var(--fg);
  --sl: var(--fg);
  --so: var(--bg);
  --st: var(--fg);
  --sti: var(--sunken);
  --si: -1;
}
body:has(.kn-meta a[href$='#setting-up']),
.kn-shelf-index a[href$='#setting-up'],
.kn-shelf#setting-up,
.lh-shelf:has(> .lh-shelf-name[href$='#setting-up']) {
  --sf: var(--t1); --sl: var(--t1); --so: var(--t1-on); --st: var(--t1-text); --sti: var(--t1-tint); --si: 0;
}
body:has(.kn-meta a[href$='#bringing-home']),
.kn-shelf-index a[href$='#bringing-home'],
.kn-shelf#bringing-home,
.lh-shelf:has(> .lh-shelf-name[href$='#bringing-home']) {
  --sf: var(--t2); --sl: var(--t2); --so: var(--t2-on); --st: var(--t2-text); --sti: var(--t2-tint); --si: 1;
}
body:has(.kn-meta a[href$='#everyday-care']),
.kn-shelf-index a[href$='#everyday-care'],
.kn-shelf#everyday-care,
.lh-shelf:has(> .lh-shelf-name[href$='#everyday-care']) {
  --sf: var(--t3); --sl: var(--t3); --so: var(--t3-on); --st: var(--t3-text); --sti: var(--t3-tint); --si: 2;
}
/* Something looks wrong: outlined, never a vermilion fill. */
body:has(.kn-meta a[href$='#something-wrong']),
.kn-shelf-index a[href$='#something-wrong'],
.kn-shelf#something-wrong,
.lh-shelf:has(> .lh-shelf-name[href$='#something-wrong']) {
  --sf: var(--surface); --sl: var(--t4); --so: var(--t4-on); --st: var(--t4-text); --sti: var(--t4-tint); --si: 3;
}
body:has(.kn-meta a[href$='#breeding']),
.kn-shelf-index a[href$='#breeding'],
.kn-shelf#breeding,
.lh-shelf:has(> .lh-shelf-name[href$='#breeding']) {
  --sf: var(--t5); --sl: var(--t5); --so: var(--t5-on); --st: var(--t5-text); --sti: var(--t5-tint); --si: 4;
}

/* ------------------------------------------------------------------- base --- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}
body.public { overflow-x: hidden; }

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.008em;
  margin: 0 0 0.55em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
h1 { font-stretch: 112%; font-weight: 830; font-size: clamp(2.2rem, 3.9vw, 3.35rem); line-height: 1.03; letter-spacing: -0.012em; }
h2 { font-stretch: 108%; font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
h3 { font-stretch: 104%; font-weight: 780; font-size: 1.22rem; line-height: 1.2; }
h4 { font-stretch: 102%; font-weight: 760; font-size: 1.06rem; line-height: 1.25; }

p { margin: 0 0 1em; }
p, li, dd, td, figcaption { overflow-wrap: break-word; }
a {
  color: var(--fg);
  text-decoration-line: underline;
  text-decoration-color: var(--link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--link); text-decoration-thickness: 2.5px; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
small, .small { font-size: 0.92rem; }
.muted { color: var(--muted); }
hr { border: 0; height: 2px; background: var(--rule); margin: 2.5rem 0; }
img, svg { max-width: 100%; }
code, kbd, samp, pre { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.86em; }
/* Record templates keep their line breaks but wrap long lines instead of widening the page. */
pre {
  margin: 1.2rem 0 1.6rem;
  padding: 0.9rem 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface);
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
}
.num { font-variant-numeric: tabular-nums lining-nums; }
details > summary { cursor: pointer; }
/* Every disclosure gets the same plus mark, turned to a cross when open. */
details:not(.mobile-menu) > summary { list-style: none; }
details:not(.mobile-menu) > summary::-webkit-details-marker { display: none; }
details:not(.mobile-menu) > summary::before {
  content: '';
  display: inline-block;
  vertical-align: -0.35em;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.6rem;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 0.7rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 0.7rem no-repeat;
  transition: transform 0.15s ease;
}
details[open]:not(.mobile-menu) > summary::before { transform: rotate(45deg); }

::selection { background: var(--link); color: var(--bg); }

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

.lede,
.lead {
  font-size: clamp(1.15rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  max-width: 42rem;
}
/* The kicker is a small index tab, not a letterspaced label. */
.eyebrow,
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--muted);
}
.eyebrow::before,
.label::before {
  content: '';
  width: 0.8rem;
  height: 0.95rem;
  background: var(--sf);
  border: 2px solid var(--sl);
  border-radius: 4px 4px 0 0;
  flex: none;
}

.confirm {
  display: inline-block;
  padding: 0.05em 0.4em;
  font-weight: 700;
  font-size: 0.86em;
  color: var(--warn);
  background: var(--tannin-soft);
  border: 1.5px dashed var(--tannin);
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 0.8rem; color: var(--bg); }

/* ------------------------------------------------------------ chrome --- */

.mm-inner {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}

.mm-head {
  background: var(--bg);
  color: var(--fg);
  border-bottom: 2px solid var(--ink-rule);
}
/* On a guide the header rule takes the shelf colour: the thumb index of a printed book. */
body:has(.kn-meta a[href$='#setting-up']) .mm-head,
body:has(.kn-meta a[href$='#bringing-home']) .mm-head,
body:has(.kn-meta a[href$='#everyday-care']) .mm-head,
body:has(.kn-meta a[href$='#breeding']) .mm-head { border-bottom: 5px solid var(--sl); }
.mm-head .mm-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.24em;
  font-family: var(--display);
  font-stretch: 120%;
  font-weight: 860;
  font-size: 1.6rem;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.35rem;
}
.wordmark:hover { color: var(--fg); }
.wordmark .amp { color: var(--sun); font-stretch: 100%; font-weight: 800; }

.mm-head .desktop-nav {
  display: flex;
  gap: 0.1rem;
  margin-left: auto;
}
.mm-head .desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}
.mm-head .desktop-nav a:hover { background: var(--sunken); color: var(--fg); }
.mm-head .desktop-nav a[aria-current='page'] { background: var(--fg); color: var(--bg); }

.head-search { margin: 0; }
.head-search input {
  width: 11.5rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.8rem;
  font-size: 1rem;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
}

.club-door {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius);
  white-space: nowrap;
}
.club-door:hover { color: var(--fg); background: var(--sunken); }

.mm-head .head-action {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.95rem;
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
}
.mm-head .head-action:hover { background: var(--link); color: var(--bg); }

.mm-head .mobile-menu { display: none; margin-left: auto; position: relative; }
.mm-head .mobile-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius);
  font-weight: 700;
}
.mm-head .mobile-menu summary::before {
  content: '';
  width: 1rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.mm-head .mobile-menu summary::-webkit-details-marker { display: none; }
.mm-head .mobile-menu[open] summary { background: var(--fg); color: var(--bg); }
.mm-head .mobile-menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  z-index: 40;
  width: min(19rem, calc(100vw - 2rem));
  display: grid;
  padding: 0.5rem;
  background: var(--surface);
  color: var(--fg);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius);
  box-shadow: 0 22px 44px -18px var(--shadow);
}
.mm-head .mobile-menu nav a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.8rem;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
}
.mm-head .mobile-menu nav a:last-child { border-bottom: 0; }
.mm-head .mobile-menu nav a[aria-current='page'] { background: var(--sunken); }
.mm-head .mobile-menu nav .mobile-action {
  margin-top: 0.5rem;
  justify-content: center;
  background: var(--fg);
  color: var(--bg);
  border-radius: 8px;
}
.mm-head .mobile-menu .head-search { padding: 0.25rem 0.25rem 0.5rem; }
.mm-head .mobile-menu .head-search input { width: 100%; }

main {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
  padding: 2.75rem 0 3.5rem;
  min-height: 55vh;
}

/* The section a deep page belongs to: an index tab standing on a rule. */
.section-tape {
  display: flex;
  margin: 0 0 1.6rem;
  border-bottom: 2px solid var(--ink-rule);
}
.section-tape a {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.3rem 0.95rem;
  background: var(--fg);
  color: var(--bg);
  border-radius: 9px 9px 0 0;
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 820;
  font-size: 1rem;
  text-decoration: none;
}
.section-tape a:hover { background: var(--link); color: var(--bg); }

.mm-foot {
  margin-top: 3rem;
  padding: 3rem 0 2.2rem;
  background: var(--sunken);
  color: var(--fg);
  border-top: 2px solid var(--ink-rule);
}
.mm-foot a { color: var(--fg); }
.mm-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: 2rem 3rem;
}
.mm-foot-brand .wordmark { font-size: 1.7rem; }
.mm-foot-brand p { margin: 0.9rem 0 1.1rem; color: var(--muted); max-width: 18rem; }
.mm-foot .foot-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.4rem 1.6rem;
}
.mm-foot .foot-nav div { display: grid; gap: 0; align-content: start; }
.mm-foot .foot-nav strong {
  margin-bottom: 0.35rem;
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 830;
  font-size: 1.04rem;
}
.mm-foot .foot-nav strong a { padding: 0; text-decoration: none; color: var(--fg); }
.mm-foot .foot-nav a {
  display: block;
  padding: 0.28rem 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}
.mm-foot .foot-nav a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--link); }
.mm-foot-small {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0.8rem 3rem;
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1.5px solid var(--rule);
  font-size: 0.95rem;
}
.mm-foot-small p { margin: 0; color: var(--muted); }
.mm-foot-small p:first-child { color: var(--fg); }

.theme-toggle[hidden] { display: none; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1.5px solid var(--fg);
  border-radius: 999px;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--bg); color: var(--fg); border-color: var(--fg); }

/* Admin keeps a plain operating header. */
.site-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  width: min(100% - 2.5rem, var(--max));
  margin: 0 auto;
  padding: 1.25rem 0;
  border-bottom: 2px solid var(--ink-rule);
}
.site-head .brand { display: grid; line-height: 1.15; color: var(--fg); text-decoration: none; }
.site-head .brand strong { font-family: var(--display); font-stretch: 116%; font-weight: 820; font-size: 1.2rem; }
.site-head .brand span { font-size: 0.88rem; color: var(--muted); }
.site-head nav { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.95rem; }
.site-head nav a { color: var(--muted); text-decoration: none; padding: 0.15rem 0; border-bottom: 2px solid transparent; }
.site-head nav a:hover { color: var(--fg); }
.site-head nav a[aria-current='page'] { color: var(--fg); border-bottom-color: var(--fg); }
.site-foot {
  width: min(100% - 2.5rem, var(--max));
  margin: 0 auto;
  padding: 2rem 0 3rem;
  border-top: 1.5px solid var(--rule);
  color: var(--muted);
  font-size: 0.92rem;
}
body.admin main { padding-top: 1.75rem; }

/* ------------------------------------------------------------------ prose --- */

.prose { max-width: var(--read); }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.7em; }
.prose p,
.prose li { font-size: 1.1rem; line-height: 1.68; }
.prose .lede { font-size: clamp(1.18rem, 1.8vw, 1.3rem); line-height: 1.5; }
.prose ul,
.prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--muted); font-weight: 700; }
.prose blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font-size: 1.12rem;
}
.prose dl > dt { margin-top: 1rem; font-weight: 700; }
.prose dl > dt strong { font-family: var(--display); font-stretch: 104%; font-weight: 800; font-size: 1.1rem; }
.prose dl > dd { margin: 0.2rem 0 0; padding-bottom: 1rem; border-bottom: 1px dotted var(--rule-strong); font-size: 1.06rem; line-height: 1.6; }
.prose details { margin: 1rem 0; }
.prose details > summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 700;
}
.prose textarea { font-size: 0.95rem; line-height: 1.45; }
.prose figure { margin: 1.6rem 0; }
.prose figure img { display: block; height: auto; border: 1.5px solid var(--ink-rule); border-radius: var(--radius-sm); background: var(--surface); }
.prose figure figcaption { margin-top: 0.5rem; font-size: 0.95rem; color: var(--muted); }
sup a { font-weight: 700; text-decoration: none; padding: 0 0.12em; }
/* A footnote number is a 24px target, the same floor as Source. The negative
   block margin keeps the larger box from opening up the line it sits in. */
sup { line-height: 0; }
body.design-fieldguide sup a { display: inline-block; min-width: 1.5rem; min-height: 1.5rem; margin-block: -0.6rem; padding: 0 0.15em; text-align: center; line-height: 1.5rem; vertical-align: baseline; }
/* Links set inside headings, table heads and terms get a taller hit area without moving the line. */
h2 a, h3 a, h4 a, th a, dt a { padding-block: 0.2em; }

/* -------------------------------------------------------------- notices --- */
/* A boxed note, full border on all sides. The first strong is the run-in label. */

.notice {
  margin: 1.8rem 0 2rem;
  padding: 1.1rem 1.3rem 1.15rem;
  background: var(--sunken);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
}
.notice p,
.notice li { font-size: 1.06rem; line-height: 1.58; }
.notice p:last-child,
.notice ul:last-child,
.notice ol:last-child { margin-bottom: 0; }
.notice > p:first-child > strong:first-child,
.notice > strong:first-child { font-weight: 800; color: var(--fg); }
.notice h2,
.notice h3 { margin-top: 0; }
.notice.warn { background: var(--tannin-soft); border-color: var(--tannin); }
.notice.warn > p:first-child > strong:first-child,
.notice.warn > strong:first-child { color: var(--warn); }

/* ---------------------------------------------------------- the analysis --- */
/* Numbers read as inventory in a ruled panel, never as a score. */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  margin: 1.4rem 0 2rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.facts > div { padding: 0.8rem 1rem 0.9rem; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule); }
.facts dt { font-weight: 700; font-size: 0.92rem; line-height: 1.3; color: var(--muted); }
/* A fact can be a sentence, so it is set in the reading face and never split inside a word.
   The display face is kept for the research panel, where every value is a count. */
.facts dd {
  margin: 0.25rem 0 0;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  font-variant-numeric: tabular-nums lining-nums;
}
.research-facts dd {
  font-family: var(--display);
  font-stretch: 104%;
  font-weight: 830;
  font-size: 1.5rem;
  line-height: 1.05;
}
.facts > dt { padding: 0.8rem 1rem 0; }
.facts > dd { padding: 0 1rem 0.9rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  margin: 1.2rem 0 2.4rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.stat { padding: 0.95rem 1.1rem 1rem; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule); }
.stat b {
  display: block;
  font-family: var(--display);
  font-stretch: 104%;
  font-weight: 840;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.stat span { display: block; margin-top: 0.4rem; font-weight: 700; font-size: 0.95rem; color: var(--muted); }

.table-wrap {
  overflow-x: auto;
  margin: 1.4rem 0 2rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
}
/* A soft edge appears only when the table can scroll sideways. */
body.design-fieldguide .table-wrap {
  background:
    linear-gradient(90deg, var(--surface) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 30%, transparent) right / 2rem 100% no-repeat local,
    linear-gradient(90deg, color-mix(in srgb, var(--rule-strong) 45%, transparent), transparent) left / 1rem 100% no-repeat scroll,
    linear-gradient(270deg, color-mix(in srgb, var(--rule-strong) 45%, transparent), transparent) right / 1rem 100% no-repeat scroll,
    var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--rule);
}
td { min-width: 8rem; line-height: 1.48; }
thead th,
table > tr:first-child > th {
  font-family: var(--display);
  font-stretch: 102%;
  font-weight: 800;
  font-size: 0.98rem;
  white-space: nowrap;
  background: var(--sunken);
  border-bottom: 2px solid var(--ink-rule);
}
tbody th { font-weight: 700; }
tbody tr:last-child td,
tbody tr:last-child th { border-bottom: 0; }
td.num,
th.num {
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
tbody tr:hover td { background: var(--glass); }
td .small, td small { font-size: 0.92rem; }
/* A row led by a status badge carries a short explanation that is read, not scanned. */
tr:has(> td:first-child > .badge:only-child) > td + td,
tr:has(> td:first-child > .badge:only-child) .small { font-size: 1.0625rem; line-height: 1.55; }

/* ---------------------------------------------------------------- cards --- */
/* A card is a label slip: a full ink border, the drawing on its own plate. */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: 1.25rem;
  margin: 1.2rem 0 3rem;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.15rem 1.2rem 1.2rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.card:hover,
.card:has(a:hover) { transform: translateY(-2px); box-shadow: 0 4px 0 var(--shadow); color: inherit; }
.card h3 { margin: 0.2rem 0 0; font-stretch: 106%; font-weight: 820; font-size: 1.25rem; line-height: 1.14; }
.card p { margin: 0; color: var(--muted); font-size: 1rem; }
.card .badge { align-self: flex-start; }
.card .price {
  font-family: var(--display);
  font-stretch: 104%;
  font-weight: 830;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.card .params {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1.5px dotted var(--rule-strong);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
  margin: -1.15rem -1.2rem 0.6rem;
  padding: 1rem;
  background: var(--sunken);
  border-bottom: 1.5px solid var(--ink-rule);
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  overflow: hidden;
}
.card-art.plant { color: var(--moss); }
.card-art svg { display: block; height: auto; }
.shrimp-art { transition: transform 0.3s ease; }
.card:hover .shrimp-art { transform: translateX(-4px); }

/* A status is a glyph and a word: filled, half or open circle. Never a seal or a star. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.2rem 0.65rem 0.22rem;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
}
.badge.ok,
.badge.warn,
.badge.off { border-color: currentColor; white-space: nowrap; }
.badge.ok::before,
.badge.warn::before,
.badge.off::before {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  flex: none;
}
.badge.ok { color: var(--moss); }
.badge.ok::before { background: currentColor; }
.badge.warn { color: var(--warn); }
.badge.warn::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.badge.off { color: var(--muted); }
/* A badge set straight above a title, as on the tank-side cards, keeps clear of the cap height. */
.prose > .badge + h1,
main > .badge + h1 { margin-top: 0.6rem; }

/* ------------------------------------------------------------- research --- */

.research-intro { margin-bottom: 2rem; }
.research-facts { max-width: 58rem; }
.research-filter {
  display: grid;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 1.2rem 1.35rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius);
}
.research-filter-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1rem;
  margin: 0 0 3rem;
}
.evidence-record {
  padding: 1.1rem 1.3rem 1.2rem;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-top: 5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
}
.prose .evidence-record { margin: 0 0 1.25rem; }
.evidence-record h2,
.evidence-record h3 { margin-top: 0.6rem; }
/* Study titles are long: set them in the reading face so a five-line title stays readable. */
.evidence-record h3 { font-family: var(--sans); font-weight: 700; font-size: 1.12rem; line-height: 1.38; letter-spacing: 0; }
.evidence-record h3 a { text-decoration-thickness: 1.5px; }
.evidence-record p:last-child { margin-bottom: 0; }
.evidence-labels { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.gap-grid .evidence-record { background: var(--tannin-soft); border-color: var(--tannin); border-top-color: var(--tannin); }

/* Answer-first search results. */
.plain-answer { font-size: 1.15rem; line-height: 1.5; margin-bottom: 0.9rem; }
.prose .plain-answer { font-size: 1.15rem; }
.answer-steps { display: grid; gap: 0.7rem; margin: 0 0 0.9rem; }
.answer-steps div { display: grid; gap: 0.15rem; }
.answer-steps dt { font-family: var(--display); font-stretch: 104%; font-weight: 820; color: var(--fg); }
.answer-steps dd { margin: 0; font-size: 1rem; }
.prose .answer-steps dd { border: 0; padding: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 3rem 0 0.9rem;
  padding-top: 0.8rem;
  border-top: 3px solid var(--ink-rule);
}
.section-head h2 { margin: 0; }
.section-head > p,
.section-head > span { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ----------------------------------------------------------------- forms --- */

form.stack { display: grid; gap: 1.25rem; max-width: 36rem; }
.row { display: grid; gap: 0.45rem; }
.row > * { min-width: 0; }
.row > span { font-weight: 700; font-size: 1.02rem; }
.row small { color: var(--muted); font-weight: 400; font-size: 0.94rem; }
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: 0.85rem;
}
.cols > * { min-width: 0; }

input,
select,
textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 1.03rem;
  color: var(--fg);
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: 8px;
}
input:hover,
select:hover,
textarea:hover { border-color: var(--fg); }
input:focus,
select:focus,
textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--glow); }
input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 1; }
input[type='checkbox'],
input[type='radio'] { width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; accent-color: var(--fg); flex: none; }
textarea { min-height: 7rem; resize: vertical; }

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  justify-self: start;
  min-height: 2.875rem;
  padding: 0.65rem 1.25rem;
  font: inherit;
  font-weight: 700;
  font-size: 1.03rem;
  line-height: 1.15;
  color: var(--bg);
  background: var(--fg);
  border: 1.5px solid var(--fg);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
button:hover,
.button:hover { background: var(--link); border-color: var(--link); color: var(--bg); }
button:active,
.button:active { transform: translateY(1px); }
button.secondary,
.button.secondary,
.button.ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}
button.secondary:hover,
.button.secondary:hover,
.button.ghost:hover { background: var(--sunken); color: var(--fg); border-color: var(--fg); }
button:disabled { opacity: 0.5; cursor: default; transform: none; }

.link-button {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.link-button:hover { color: var(--link); background: none; border: 0; }

fieldset {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
}
/* Floated, the legend sits inside the box as a heading instead of breaking the border. */
legend { float: left; width: 100%; margin: 0 0 0.35rem; padding: 0; font-weight: 700; font-size: 1.06rem; line-height: 1.42; }
.checks { display: grid; gap: 0.6rem; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 0.2rem; }
/* A radio choice is one row: the circle beside its words, the whole row tappable. */
fieldset > label.row:has(> input[type='radio']) {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
fieldset > label.row:has(> input[type='radio']):hover { background: var(--sunken); }
fieldset > label.row:has(> input:checked) { background: var(--sunken); border-color: var(--fg); }
fieldset > label.row > input[type='radio'] { margin-top: 0.15rem; }
fieldset > label.row > span { font-weight: 400; font-size: 1.04rem; line-height: 1.45; }

[hidden] { display: none !important; }

.range-pair { display: flex; align-items: center; gap: 0.5rem; }
.range-pair input { width: auto; flex: 1 1 0; min-width: 0; max-width: 6rem; padding-inline: 0.5rem; }

.restock-form { display: grid; gap: 0.9rem; max-width: 28rem; margin-top: 1rem; }
.restock-form .status:empty { display: none; }
.restock-form .status { margin: 0; font-size: 0.95rem; color: var(--muted); }
.restock-form .status[data-kind='error'] { color: var(--danger); }
#restock .done { margin: 0; font-weight: 700; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- pictures --- */
/* Drawings sit on a plate: a framed panel in plate colour. Our own photographs get a
   full ink rule, like a photograph tipped into a book. */

.hero-art,
.hero-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 2.5rem;
  padding: 1.8rem 1.5rem 1.5rem;
  background: var(--sunken);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
}
.hero-art svg,
.hero-figure svg { height: auto; }
.hero-figure figcaption { margin: 0; max-width: 30rem; text-align: center; font-size: 0.95rem; color: var(--muted); }

.morph-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.morph-row li {
  padding: 0.9rem 0.8rem 1rem;
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
}
.morph-row svg { height: auto; }
.morph-row strong { display: block; margin-top: 0.3rem; font-size: 1rem; }
.morph-row span { display: block; font-size: 0.9rem; color: var(--muted); }

.moss-rule { display: flex; justify-content: center; color: var(--moss); margin: 2.5rem 0 0; }

.photo-figure { display: grid; gap: 0.6rem; margin: 1.5rem 0 2rem; }
.photo-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--sunken);
  border: 1.5px solid var(--ink-rule);
  border-radius: 4px;
}
.photo-figure figcaption { margin: 0; max-width: 36rem; font-style: italic; font-size: 0.95rem; color: var(--muted); }
.prose .photo-figure img { max-width: 28rem; }

/* ------------------------------------------------------------ print card --- */

.print-card {
  max-width: 30rem;
  margin: 0 0 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
  break-inside: avoid;
}
.print-card h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.print-card ol { margin: 0.7rem 0; padding-left: 1.2rem; }
.print-card li { margin-bottom: 0.35rem; font-size: 0.95rem; }
.print-params { margin: 0 0 0.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

@media print {
  .no-print,
  .site-head,
  .site-foot,
  .mm-head,
  .mm-foot,
  .section-tape,
  .kn-rail,
  .kn-shelf-index,
  .skip-link { display: none !important; }
  /* Paper is white whatever the device theme: the light palette, with every fill made white
     and every text tone dark, also when the reader's system or toggle is set to dark. */
  :root,
  :root:not([data-theme='light']),
  :root[data-theme='dark'] {
    color-scheme: light;
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --sunken: #FFFFFF;
    --fg: #000000;
    --muted: #333333;
    --rule: #999999;
    --rule-strong: #555555;
    --ink-rule: #000000;
    --link: #000000;
    --moss: #256A3C;
    --moss-hover: #1D5530;
    --moss-ink: #FFFFFF;
    --moss-soft: #FFFFFF;
    --moss-line: #7FB08F;
    --tannin: #8A6512;
    --tannin-soft: #FFFFFF;
    --warn: #765400;
    --danger: #B42F1C;
    --sun: #B85109;
    --field: #FFFFFF;
    --field-ink: #000000;
    --field-muted: #333333;
    --field-rule: #999999;
    --shadow: transparent;
    --tape: #FFFFFF;
    --tape-ink: #000000;
    --glass: transparent;
    --glow: transparent;
    --room: #0d110b;
    --room-2: #151b11;
    --room-fg: #e9efdc;
    --room-muted: #9aa58c;
    --room-rule: #2a3322;
    --lime: #c5e04a;
    --lime-ink: #0d110b;
    --orange: #EE7A1B;
    --orange-hi: #FFB067;
    --orange-deep: #C95F0C;
    --t1: #2C55C8;
    --t1-on: #FFFFFF;
    --t1-text: #2C55C8;
    --t1-tint: #FFFFFF;
    --t2: #E3A21F;
    --t2-on: #191C24;
    --t2-text: #765400;
    --t2-tint: #FFFFFF;
    --t3: #2E7A47;
    --t3-on: #FFFFFF;
    --t3-text: #256A3C;
    --t3-tint: #FFFFFF;
    --t4: #191C24;
    --t4-on: #191C24;
    --t4-text: #191C24;
    --t4-tint: #FFFFFF;
    --t5: #7A3F9E;
    --t5-on: #FFFFFF;
    --t5-text: #7A3F9E;
    --t5-tint: #FFFFFF;
    --urgent: #C8341F;
    --urgent-on: #FFFFFF;
    --urgent-deep: #9E2716;
    --fk-line: #191C24;
    --fk-num: #F4F1E9;
    --fk-water: #DCE7EA;
    --fk-water2: #C9DADF;
    --fk-glass: #F8FBFB;
    --fk-soil: #4A4038;
    --fk-soildot: #8C7B69;
    --fk-wood: #8E5B33;
    --fk-leaf: #3F8E3E;
    --fk-leaf2: #2B6A2C;
    --fk-leafhi: #7DBE5E;
    --fk-dry: #A9572B;
    --fk-gel: #F0E1B0;
    --fk-sponge: #2F343D;
    --fk-spongedot: #5F6673;
    --fk-bubble: #FFFFFF;
    --club-edge: #0d110b;
  }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none !important; }
  .print-card { border-color: #000; color: #000; background: #fff; page-break-inside: avoid; }
  .notice,
  .notice.warn,
  .badge,
  .kn-card,
  .kn-card dl > div { background: #fff !important; color: #000; }
  a { color: #000; }
}

/* Original drawings on the preview (app/src/lib/design-art/fieldguide.ts). Every class is
   scoped to svg.fk so a drawing follows the light and dark palettes without its own copy. */
.fk { display: block; width: 100%; height: auto; }
.fk .k { stroke: var(--fk-line); stroke-linejoin: round; stroke-linecap: round; }
.fk .n { fill: none; }
.fk .i { fill: var(--fk-line); }
.fk .pp { fill: var(--bg); }
.fk .pn { fill: var(--surface); }
.fk .pl { fill: var(--sunken); }
.fk .o { fill: var(--orange); }
.fk .oh { fill: var(--orange-hi); }
.fk .od { fill: var(--orange-deep); }
.fk .sh { stroke: var(--orange-hi); fill: none; stroke-linecap: round; opacity: 0.85; }
.fk .kp { stroke: var(--bg); fill: none; }
.fk .w { fill: var(--fk-water); }
.fk .w2 { fill: var(--fk-water2); }
.fk .gl { fill: var(--fk-glass); }
.fk .so { fill: var(--fk-soil); }
.fk .sd { fill: var(--fk-soildot); }
.fk .wd { fill: var(--fk-wood); }
.fk .g { fill: var(--fk-leaf); }
.fk .g2 { fill: var(--fk-leaf2); }
.fk .gh { fill: var(--fk-leafhi); }
.fk .sg { stroke: var(--fk-leaf2); fill: none; stroke-linecap: round; }
.fk .dl { fill: var(--fk-dry); }
.fk .ge { fill: var(--fk-gel); }
.fk .sp { fill: var(--fk-sponge); }
.fk .spd { fill: var(--fk-spongedot); }
.fk .bu { fill: var(--fk-bubble); }
.fk .c1 { fill: var(--t1); }
.fk .c2 { fill: var(--t2); }
.fk .c3 { fill: var(--t3); }
.fk .c5 { fill: var(--t5); }
.fk .ct { fill: var(--sti); }
.fk .cs { fill: var(--sf); }
.fk .dash { stroke: var(--muted); fill: none; stroke-dasharray: 5 5; stroke-linecap: round; }
.fk .tx { font-family: var(--sans); font-weight: 700; fill: var(--fg); }
.fk .tm { font-family: var(--sans); font-weight: 600; fill: var(--muted); }
.fk .td { font-family: var(--display); font-stretch: 112%; font-weight: 850; fill: var(--fg); }
.fk .tn { font-family: var(--display); font-stretch: 104%; font-weight: 850; fill: var(--fk-num); }

/* ======================================================== KNOWLEDGE (D-011) === */

/* ---- the learner home page ---- */

.lh-home main { padding-top: 2rem; }
.lh-hero { margin-bottom: 1rem; }
.lh-hero.has-art {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.lh-hero.has-art > * { grid-column: 1; }
.lh-hero > .lh-art { grid-column: 2; grid-row: 1 / span 4; }
.lh-hero h1 {
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  font-stretch: 114%;
  font-weight: 860;
  line-height: 0.98;
  margin-bottom: 0.32em;
}
.lh-hero .lede { margin-bottom: 0; }
.lh-art {
  margin: 0;
  padding: 0.85rem;
  background: var(--sunken);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
}

.lh-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.5rem 0 0;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lh-status > div { padding: 0.7rem 0.95rem 0.8rem; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule); }
.lh-status dt { font-weight: 700; font-size: 0.92rem; line-height: 1.3; color: var(--muted); }
/* No status glyph here: the board carries no status hook, and one open circle for every
   line would contradict the filled, half and open circles on the badges. */
.lh-status dd { margin: 0.2rem 0 0; font-weight: 700; line-height: 1.35; }

/* The three doors are index dividers: a tab stands up from each card's top edge. */
.lh-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0 0 3rem;
  padding-top: 2.6rem;
}
.lh-door-new { --df: var(--t1); --dl: var(--t1); --do: var(--t1-on); }
.lh-door-help { --df: var(--surface); --dl: var(--fg); --do: var(--fg); }
.lh-door-shop { --df: var(--fg); --dl: var(--fg); --do: var(--bg); }
.lh-door {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem 1.3rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-top: 6px solid var(--dl);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  color: var(--fg);
  text-decoration: none;
}
a.lh-door { transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.lh-door:hover { color: var(--fg); transform: translateY(-2px); box-shadow: 0 5px 0 var(--shadow); }
.lh-door-kicker {
  position: absolute;
  left: -1.5px;
  bottom: calc(100% + 6px);
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  max-width: calc(100% + 3px);
  padding: 0.3rem 1rem;
  background: var(--df);
  color: var(--do);
  border: 2px solid var(--dl);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 840;
  font-size: 1rem;
  line-height: 1.1;
}
.lh-door strong {
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 850;
  font-size: clamp(1.4rem, 2vw, 1.65rem);
  line-height: 1.08;
}
.lh-door > span:not(.lh-door-kicker) { color: var(--muted); font-size: 1.04rem; line-height: 1.5; }
.lh-door form { display: grid; gap: 0.5rem; }
.lh-door label strong { font-size: 1.2rem; }
.lh-search-row,
.kn-search-row { display: flex; gap: 0.5rem; }
.lh-search-row input,
.kn-search-row input { flex: 1 1 auto; min-width: 0; min-height: 3rem; font-size: 1.08rem; }
.lh-search-row button,
.kn-search-row button { flex: none; min-height: 3rem; }
/* The urgent lane: the only vermilion fill on the page. */
.lh-urgent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 3rem;
  margin-top: 0.5rem;
  padding: 0.6rem 0.95rem;
  background: var(--urgent);
  color: var(--urgent-on);
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.04rem;
  line-height: 1.3;
  text-decoration: none;
}
.lh-urgent::after { content: '\2192'; content: '\2192' / ''; font-size: 1.2em; line-height: 1; }
.lh-urgent:hover { background: var(--urgent-deep); color: var(--urgent-on); }

/* House water: one plate, five numbers, labelled targets. */
.lh-water {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: 1rem 2.5rem;
  align-items: center;
  margin: 0 0 3.5rem;
  padding: 1.4rem 1.5rem 1.3rem;
  background: var(--sunken);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
}
.lh-water h2 { margin: 0 0 0.35rem; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.lh-water p { margin: 0; color: var(--muted); }
.lh-water > p { font-weight: 700; }
.lh-water a { color: var(--fg); }
.lh-readings {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lh-readings > div { padding: 0.7rem 0.85rem 0.85rem; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule); }
.lh-readings dt { font-weight: 700; font-size: 0.95rem; color: var(--muted); }
.lh-readings dd {
  margin: 0.25rem 0 0;
  font-family: var(--display);
  font-stretch: 100%;
  font-weight: 850;
  font-size: clamp(1.25rem, 1.75vw, 1.65rem);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.lh-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.2rem; margin-bottom: 1.1rem; }
.lh-section-head h2 { margin: 0; }
.lh-section-head p { margin: 0; color: var(--muted); }
.lh-shelf-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}
.lh-shelf {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.9rem 1rem 0.9rem;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-top: 6px solid var(--sl);
  border-radius: 0 0 var(--radius) var(--radius);
}
.lh-shelf-art { display: block; margin: 0 0 0.35rem; padding: 0.35rem; background: var(--sti); border-radius: 6px; }
.lh-shelf-name {
  font-family: var(--display);
  font-stretch: 104%;
  font-weight: 850;
  font-size: 1.14rem;
  line-height: 1.15;
  padding-block: 0.2rem;
  color: var(--fg);
  text-decoration: none;
}
.lh-shelf-name:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--sl); }
.lh-shelf > span:not(.lh-shelf-art) { color: var(--muted); font-size: 0.97rem; line-height: 1.45; }
.lh-shelf ul { margin: 0.4rem 0 0; padding: 0; list-style: none; display: grid; }
.lh-shelf li { margin: 0; }
.lh-shelf li a {
  display: block;
  padding: 0.4rem 0;
  border-top: 1px dotted var(--rule-strong);
  color: var(--fg);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
  text-decoration: none;
}
.lh-shelf li a:hover { color: var(--link); }

.lh-colony {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: center;
  margin: 3.5rem 0;
}
.lh-colony figure { margin: 0; padding: 0.7rem; background: var(--surface); border: 1.5px solid var(--ink-rule); border-radius: var(--radius-sm); }
.lh-colony img { display: block; width: 100%; height: auto; border-radius: 3px; }
.lh-colony figcaption { margin-top: 0.55rem; font-style: italic; font-size: 0.95rem; color: var(--muted); }

.lh-alert {
  max-width: 42rem;
  margin: 3rem 0;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius);
}
.lh-alert h2 { margin-top: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.mh-alert { display: grid; gap: 0.75rem; max-width: 34rem; }
.mh-alert-row { display: flex; gap: 0.6rem; }
.mh-alert-row input { flex: 1 1 14rem; min-width: 0; }
.mh-alert-row button { flex: none; }
.mh-alert details { border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); }
.mh-alert summary { display: flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.mh-alert fieldset { padding: 0 0 0.6rem; border: 0; background: transparent; gap: 0; }
.mh-alert .check { padding: 0.6rem 0; border-top: 1px dotted var(--rule-strong); }
.mh-alert .check span { display: grid; font-weight: 700; line-height: 1.3; }
.mh-alert .check small { font-weight: 400; color: var(--muted); font-size: 0.94rem; }
.mh-consent { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
.mh-consent b { color: var(--fg); }
.mh-status:empty { display: none; }
.mh-status { margin: 0; font-weight: 700; font-size: 0.95rem; }
.mh-status[data-kind='error'] { color: var(--danger); }
.mh-done {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--moss-soft);
  border: 1.5px solid var(--moss-line);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* The Club next door keeps its own room colours: a window, not a borrowed look. */
.lh-club { margin: 3rem 0 1rem; padding: 1.6rem 1.7rem; background: var(--room); color: var(--room-fg); border: 1.5px solid var(--club-edge); border-radius: var(--radius); }
.lh-club h2 { color: var(--room-fg); }
.lh-club p { color: var(--room-muted); }
.lh-club .button { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.lh-club .button:hover { background: var(--room-fg); border-color: var(--room-fg); color: var(--lime-ink); }
.lh-club :focus-visible { outline-color: var(--lime); }

/* ---- the knowledge hub ---- */

.kn-hub-page main { counter-reset: kshelf; }
.kn-hub-head { margin-bottom: 2rem; }
.kn-hub-head > :not(.kn-hub-art) { max-width: 46rem; }
.kn-hub-head.has-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 27rem);
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.kn-hub-head.has-art > * { grid-column: 1; }
.kn-hub-head > .kn-hub-art {
  grid-column: 2;
  grid-row: 1 / span 4;
  padding: 0.85rem;
  background: var(--sunken);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
}
.kn-search { display: grid; gap: 0.5rem; margin-top: 1.2rem; }
.kn-search label { font-weight: 700; font-size: 1.05rem; }
.kn-search-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.kn-search-examples a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.8rem;
  background: var(--surface);
  color: var(--fg);
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.kn-search-examples a:hover { border-color: var(--fg); color: var(--fg); }

/* The urgent lane: the only vermilion fill on any page. */
.kn-urgent {
  margin: 0 0 2.75rem;
  padding: 1.2rem 1.4rem 1.35rem;
  background: var(--urgent);
  color: var(--urgent-on);
  border-radius: var(--radius);
}
.kn-urgent h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.45rem;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  color: inherit;
}
.kn-urgent h2::before {
  content: '!';
  content: '!' / '';
  display: inline-grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  flex: none;
  border: 3px solid currentColor;
  border-radius: 50%;
  font-size: 0.8em;
  line-height: 1;
}
.kn-urgent p { max-width: 48rem; font-size: 1.08rem; line-height: 1.55; }
.kn-urgent p:last-child { margin-bottom: 0; }
.kn-urgent a { color: var(--urgent-on); text-decoration-color: currentColor; font-weight: 700; }
.kn-urgent a:hover { color: var(--urgent-on); }
.kn-urgent .button { background: var(--urgent-on); border-color: var(--urgent-on); color: var(--urgent); text-decoration: none; }
.kn-urgent .button:hover { background: var(--bg); border-color: var(--bg); color: var(--fg); }
.kn-urgent :focus-visible { outline-color: var(--urgent-on); }
.kn-urgent-links { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; align-items: center; margin: 0; }

/* The first colony course: one route line, seven stops. */
.kn-course-hub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem 3rem;
  margin: 0 0 2.75rem;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-top: 6px solid var(--t1);
  border-radius: var(--radius);
}
.kn-course-intro h2 { margin: 0 0 0.5rem; }
.kn-course-intro .eyebrow { --sf: var(--t1); --sl: var(--t1); }
.kn-course-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.15rem;
}
.kn-course-list::before {
  content: '';
  position: absolute;
  left: calc(0.6rem + 1.05rem - 2px);
  top: 1.5rem;
  bottom: 1.5rem;
  width: 4px;
  background: var(--t1);
  border-radius: 2px;
}
.kn-course-list li { margin: 0; }
.kn-course-list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.3;
}
.kn-course-list a:hover { background: var(--t1-tint); color: var(--fg); }
.kn-step {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  background: var(--surface);
  color: var(--t1-text);
  border: 3px solid var(--t1);
  border-radius: 50%;
  font-family: var(--display);
  font-stretch: 104%;
  font-weight: 860;
  font-size: 0.98rem;
}
.kn-course-list li:first-child .kn-step { background: var(--t1); color: var(--t1-on); }

/* The thumb index: five shelf tabs, sticky so the shelves stay findable while scrolling. */
.kn-shelf-index {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 1.6rem;
  padding: 0.5rem 0 0;
  background: var(--bg);
  border-bottom: 3px solid var(--ink-rule);
  counter-reset: ktab;
}
.kn-shelf-index a {
  counter-increment: ktab;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.1rem;
  padding: 0.35rem 0.75rem 0.3rem;
  background: var(--sf);
  color: var(--so);
  border: 2px solid var(--sl);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.kn-shelf-index a::before {
  content: counter(ktab);
  content: counter(ktab) / '';
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 860;
  font-size: 1.3rem;
  line-height: 1;
}
.kn-shelf-index a:hover { color: var(--so); transform: translateY(-3px); }

.kn-shelf { counter-increment: kshelf; counter-reset: ktile; margin: 0 0 3rem; scroll-margin-top: 4.6rem; }
.kn-shelf-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.25rem 1.1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 3px solid var(--sl);
}
.kn-shelf-head::before {
  content: counter(kshelf);
  content: counter(kshelf) / '';
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: end center;
  width: 3.8rem;
  height: 4.4rem;
  padding-bottom: 0.4rem;
  margin-bottom: -0.9rem;
  background: var(--sf);
  color: var(--so);
  border: 2px solid var(--sl);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 870;
  font-size: 2.2rem;
  line-height: 1;
}
.kn-shelf-head h2 { grid-column: 2; margin: 0; }
.kn-shelf-head p { grid-column: 2; margin: 0; color: var(--muted); }
.kn-shelf-head > .kn-shelf-art {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  width: 9.5rem;
  padding: 0.3rem 0.4rem;
  background: var(--sti);
  border-radius: 8px;
}
.kn-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kn-tiles li { counter-increment: ktile; margin: 0; }
/* Each guide is one link: the whole tile. */
.kn-tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  height: 100%;
  min-height: 5.5rem;
  padding: 1rem 3.2rem 1.05rem 1.05rem;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.kn-tile::before {
  content: '';
  position: absolute;
  top: -1.5px;
  left: 1rem;
  width: 2.4rem;
  height: 6px;
  background: var(--sf);
  border: 2px solid var(--sl);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.kn-tile::after {
  content: counter(kshelf) '.' counter(ktile);
  content: counter(kshelf) '.' counter(ktile) / '';
  position: absolute;
  top: 0.95rem;
  right: 0.9rem;
  font-family: var(--display);
  font-stretch: 104%;
  font-weight: 820;
  font-size: 0.92rem;
  color: var(--muted);
}
.kn-tile:hover { color: var(--fg); border-color: var(--fg); box-shadow: 0 4px 0 var(--sl); transform: translateY(-2px); }
.kn-tile strong { font-family: var(--display); font-stretch: 104%; font-weight: 830; font-size: 1.15rem; line-height: 1.18; }
.kn-tile span { color: var(--muted); font-size: 1rem; line-height: 1.42; }

.kn-formats { margin: 3.5rem 0 2rem; }
.kn-formats h2 { padding-top: 0.8rem; border-top: 3px solid var(--ink-rule); }
.kn-format-list,
.kn-tools ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kn-format-list li,
.kn-tools li { margin: 0; }
.kn-format-list a,
.kn-tools a {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  height: 100%;
  min-height: 4.5rem;
  padding: 0.95rem 1.05rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kn-format-list a:hover,
.kn-tools a:hover { color: var(--fg); box-shadow: 0 4px 0 var(--shadow); transform: translateY(-2px); }
.kn-format-list strong,
.kn-tools strong { font-family: var(--display); font-stretch: 104%; font-weight: 830; font-size: 1.1rem; line-height: 1.2; }
.kn-format-list span,
.kn-tools span { color: var(--muted); font-size: 0.98rem; line-height: 1.45; }
.kn-tools { margin: 1.5rem 0 2rem; }
.kn-evidence-door {
  max-width: var(--read);
  padding: 1.1rem 1.3rem 1.2rem;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius);
}
.kn-evidence-door h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.kn-evidence-door p:last-child { margin-bottom: 0; }

/* ---- the answer-first guide ---- */

.kn-guide {
  display: grid;
  grid-template-columns: minmax(0, var(--read)) minmax(15rem, 18rem);
  gap: 3.5rem;
  align-items: start;
}
.kn-guide-main { max-width: var(--read); counter-reset: kn-sec; }
.kn-guide-main > h1 {
  font-stretch: 108%;
  font-weight: 830;
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  line-height: 1.05;
  margin-bottom: 0.4em;
}
.kn-guide-main > h1 + p.muted { margin: 0 0 0.3rem; font-size: 0.95rem; }

.kn-answer { margin: 1rem 0 2.2rem; }
.kn-answer .kn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--muted);
}
.kn-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.2rem 0.8rem;
  background: var(--sf);
  color: var(--so);
  border: 2px solid var(--sl);
  border-radius: 8px;
  font-family: var(--display);
  font-stretch: 104%;
  font-weight: 830;
  font-size: 0.98rem;
  text-decoration: none;
}
.kn-meta a:hover { color: var(--so); transform: translateY(-1px); }
.kn-answer .kn-plain { margin: 0 0 1.4rem; font-size: 1.3rem; line-height: 1.48; }
.kn-plain-label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 860;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--st);
}

/* The first-step card is an index divider: its heading is the tab. */
.kn-card {
  position: relative;
  margin-top: 3.1rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-top: 6px solid var(--sl);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
}
.kn-answer .kn-card h2 {
  position: absolute;
  left: -1.5px;
  bottom: calc(100% + 6px);
  max-width: calc(100% + 3px);
  margin: 0;
  padding: 0.5rem 1rem 0.42rem;
  background: var(--sf);
  color: var(--so);
  border: 2px solid var(--sl);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  font-stretch: 104%;
  font-size: 1.08rem;
  line-height: 1.15;
}
.kn-card dl { margin: 0; }
.kn-card dl > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--rule);
}
.kn-card dt { font-family: var(--display); font-stretch: 102%; font-weight: 820; font-size: 1rem; line-height: 1.35; color: var(--fg); }
.prose .kn-card dd,
.kn-card dd { margin: 0; padding: 0; border: 0; font-size: 1.04rem; line-height: 1.52; }
.kn-card dl > div:nth-child(3) { background: var(--sti); }
.kn-card dl > div:nth-child(3) dd { font-weight: 700; }
.kn-card dl > div:last-child { background: var(--sunken); border-top: 1.5px dashed var(--rule-strong); }
.prose .kn-card-foot,
.kn-card-foot { margin: 0; padding: 0.75rem 1.15rem 0.85rem; font-size: 0.98rem; line-height: 1.5; color: var(--muted); }

/* Contents, numbered like a field guide. The same numbers mark the section heads. */
.kn-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.kn-toc li { counter-increment: toc; margin: 0; }
.kn-toc-chips { display: none; }
.kn-rail {
  position: sticky;
  top: 1.25rem;
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-top: 6px solid var(--sl);
  border-radius: var(--radius);
}
.kn-rail-title { margin: 0 0 0.45rem; font-family: var(--display); font-stretch: 106%; font-weight: 860; font-size: 1.05rem; }
.kn-rail .kn-toc a {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  align-items: baseline;
  min-height: 2rem;
  padding: 0.38rem 0;
  border-bottom: 1px dotted var(--rule-strong);
  color: var(--fg);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.32;
}
.kn-rail .kn-toc li:last-child a { border-bottom: 0; }
.kn-rail .kn-toc a::before {
  content: counter(toc);
  content: counter(toc) / '';
  font-family: var(--display);
  font-weight: 860;
  font-size: 0.92rem;
  color: var(--muted);
}
.kn-rail .kn-toc a:hover { color: var(--link); }
.kn-rail-sources { margin: 0.8rem 0 0; padding-top: 0.75rem; border-top: 1.5px solid var(--rule); font-weight: 700; font-size: 0.98rem; }

.kn-guide-main > h2[id],
.kn-answer .kn-card h2 { counter-increment: kn-sec; }
.kn-guide-main > h2[id] {
  position: relative;
  margin-top: 2.3em;
  padding: 0.75rem 0 0 1.45em;
  border-top: 2px solid var(--ink-rule);
}
.kn-guide-main > h2[id]::before {
  content: counter(kn-sec);
  content: counter(kn-sec) / '';
  position: absolute;
  left: 0;
  top: 0.92rem;
  display: grid;
  place-items: center;
  width: 1.12em;
  height: 1.12em;
  background: var(--sf);
  color: var(--so);
  border: 2px solid var(--sl);
  border-radius: 50%;
  font-size: 0.78em;
  font-stretch: 100%;
  line-height: 1;
}
.kn-guide-main > h2 .badge { margin-left: 0.4rem; vertical-align: 0.2em; font-family: var(--sans); font-stretch: 100%; letter-spacing: 0; }

.kn-sources summary,
.kn-collapse > summary {
  display: flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0.5rem 0;
  font-weight: 700;
  color: var(--fg);
  list-style-position: inside;
}
.kn-sources ol { margin-top: 0.4rem; }
.prose .kn-sources li { font-size: 0.98rem; line-height: 1.55; }
.kn-collapse { margin: 1.5rem 0; border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); }

.kn-after { max-width: var(--read); margin-top: 3rem; display: grid; gap: 2.2rem; }
.kn-course {
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-top: 6px solid var(--t1);
  border-radius: var(--radius);
}
.kn-course-step { margin: 0 0 0.8rem; font-family: var(--display); font-stretch: 104%; font-weight: 850; font-size: 1.08rem; }
.kn-course-dots {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  max-width: 26rem;
}
.kn-course-dots::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: var(--t1);
  border-radius: 2px;
}
.kn-course-dots li {
  position: relative;
  z-index: 1;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  background: var(--surface);
  border: 3px solid var(--t1);
  border-radius: 50%;
}
.kn-course-dots li.done { background: var(--t1); }
.kn-course-dots li.here { width: 1.5rem; height: 1.5rem; background: var(--t1); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--t1); }
.kn-course-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.kn-course-links a {
  display: grid;
  align-content: center;
  gap: 0.1rem;
  min-height: 3.75rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg);
  border: 1.5px solid var(--ink-rule);
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.3;
}
.kn-course-links a:hover { color: var(--fg); background: var(--t1-tint); }
.kn-course-links a span { font-weight: 600; font-size: 0.92rem; color: var(--muted); }
.kn-course-links .kn-next { text-align: right; }
.kn-claims h2,
.kn-more h2,
.kn-words h2 { margin: 0 0 0.85rem; font-size: clamp(1.3rem, 2vw, 1.55rem); }
.kn-claim {
  margin: 0 0 1rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.kn-claim h3 { margin: 0; line-height: 1.38; padding: 0.85rem 1.1rem; background: var(--sunken); border-bottom: 1.5px solid var(--ink-rule); font-size: 1.15rem; }
.kn-claim h3 a { text-decoration-color: var(--link); }
.kn-claim dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.kn-claim dl > div { padding: 0.75rem 1.1rem 0.9rem; box-shadow: 1px 0 0 var(--rule); }
.kn-claim dt { font-weight: 700; font-size: 0.92rem; color: var(--muted); }
.kn-claim dd { margin: 0.15rem 0 0; font-size: 1rem; line-height: 1.5; }
.kn-more ul,
.kn-words ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.kn-more li,
.kn-words li { margin: 0; }
.kn-more a,
.kn-words a {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.35rem 0.95rem;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--fg);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.25;
  text-decoration: none;
}
.kn-more a:hover,
.kn-words a:hover { border-color: var(--fg); color: var(--fg); }
#guide-feedback { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 2px solid var(--ink-rule); }

/* No page-edge thumb tabs: drawn as pseudo-elements they looked clickable and were not.
   The shelf link beside each guide title is the real route back to the shelf. */

/* ---- the plants-first shop ---- */

.sp-head { margin-bottom: 2.4rem; }
.sp-head h1,
.sp-head .lede { max-width: 46rem; }
.sp-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.6rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.sp-index a {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-height: 4.6rem;
  padding: 0.85rem 1rem 0.95rem;
  color: var(--fg);
  text-decoration: none;
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
}
.sp-index a:hover { background: var(--sunken); color: var(--fg); }
.sp-index a > span { font-family: var(--display); font-stretch: 104%; font-weight: 840; font-size: 1.1rem; line-height: 1.15; }
.sp-index small { display: flex; gap: 0.45rem; align-items: baseline; font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--muted); }
.sp-index small::before,
.sp-status::before {
  content: '';
  width: 0.62rem;
  height: 0.62rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  flex: none;
}
/* The category glyph follows the badges inside it, the same system as the badges: filled
   when something is available, half when only limited stock is listed, open otherwise. */
.sp-cat:has(.sp-items .badge.ok) .sp-status::before,
body:has(#lab-grown .sp-items .badge.ok) .sp-index a[href='#lab-grown'] small::before,
body:has(#tank-grown .sp-items .badge.ok) .sp-index a[href='#tank-grown'] small::before,
body:has(#botanicals .sp-items .badge.ok) .sp-index a[href='#botanicals'] small::before,
body:has(#shrimp .sp-items .badge.ok) .sp-index a[href='#shrimp'] small::before { background: currentColor; }
.sp-cat:has(.sp-items .badge.warn):not(:has(.sp-items .badge.ok)) .sp-status::before,
body:has(#lab-grown .sp-items .badge.warn):not(:has(#lab-grown .sp-items .badge.ok)) .sp-index a[href='#lab-grown'] small::before,
body:has(#tank-grown .sp-items .badge.warn):not(:has(#tank-grown .sp-items .badge.ok)) .sp-index a[href='#tank-grown'] small::before,
body:has(#botanicals .sp-items .badge.warn):not(:has(#botanicals .sp-items .badge.ok)) .sp-index a[href='#botanicals'] small::before,
body:has(#shrimp .sp-items .badge.warn):not(:has(#shrimp .sp-items .badge.ok)) .sp-index a[href='#shrimp'] small::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

.sp-cat { margin: 0 0 3.2rem; padding-top: 1rem; border-top: 3px solid var(--ink-rule); scroll-margin-top: 1rem; }
.sp-cat:has(> .sp-art) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.sp-cat:has(> .sp-art) > * { grid-column: 1; }
.sp-cat > .sp-art {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin-top: 0.4rem;
  padding: 0.75rem;
  background: var(--sunken);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius-sm);
}
.sp-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; margin-bottom: 0.4rem; }
.sp-cat-head h2 { margin: 0; }
.sp-status {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0;
  font-weight: 700;
  color: var(--fg);
}
.sp-about { max-width: var(--read); color: var(--muted); font-size: 1.06rem; }
.sp-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-items li { margin: 0; }
.sp-item {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  height: 100%;
  padding: 0.95rem 1rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--ink-rule);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sp-item:hover { color: var(--fg); transform: translateY(-2px); box-shadow: 0 4px 0 var(--shadow); }
.sp-item .badge { justify-self: start; }
.sp-item strong { font-family: var(--display); font-stretch: 102%; font-weight: 820; font-size: 1.1rem; line-height: 1.2; }
.sp-price { font-family: var(--display); font-stretch: 102%; font-weight: 850; font-size: 1.35rem; font-variant-numeric: tabular-nums lining-nums; }

/* The label template: every field printed, unknowns as a dashed "not yet". */
.sp-label { max-width: 46rem; background: var(--surface); border: 2px solid var(--ink-rule); border-radius: var(--radius-sm); }
.sp-label-title { margin: 0; padding: 0.75rem 1rem; font-family: var(--display); font-stretch: 106%; font-weight: 860; font-size: 1.1rem; border-bottom: 2px solid var(--ink-rule); }
.sp-label dl { margin: 0; }
.sp-label dl > div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 1rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--rule); }
.sp-label dl > div:last-child { border-bottom: 0; }
.sp-label dt { font-weight: 700; font-size: 0.98rem; line-height: 1.4; }
.sp-label dd { margin: 0; line-height: 1.5; }
.sp-label dd.sp-unknown { justify-self: start; padding: 0 0.4rem 1px; border-bottom: 1.5px dashed var(--rule-strong); }
.sp-unknown { font-family: var(--display); font-stretch: 102%; font-weight: 760; color: var(--muted); }
p.sp-unknown {
  justify-self: start;
  margin: 0.4rem 0 0;
  padding: 0.75rem 1rem;
  border: 1.5px dashed var(--rule-strong);
  border-radius: 8px;
}
.sp-policy { max-width: var(--read); margin-top: 2.5rem; padding: 1.2rem 1.4rem 0.4rem; background: var(--surface); border: 1.5px solid var(--ink-rule); border-radius: var(--radius); }
.sp-policy h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.sp-policy li { margin-bottom: 0.5rem; line-height: 1.55; }

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 79.99rem) {
  .mm-head .desktop-nav,
  .mm-head .club-door,
  .mm-head .head-action { display: none; }
  .mm-head .mobile-menu { display: block; margin-left: 0; }
  .mm-head .mm-inner > .head-search { margin-left: auto; }
}

@media (max-width: 1100px) {
  .lh-shelf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-shelf:has(> .lh-shelf-art) { grid-template-columns: minmax(0, 1fr) 7rem; column-gap: 0.9rem; }
  .lh-shelf:has(> .lh-shelf-art) > * { grid-column: 1; }
  .lh-shelf > .lh-shelf-art { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; }
  .lh-shelf ul { grid-column: 1 / -1; }
  .kn-guide { grid-template-columns: minmax(0, 1fr); }
  .kn-rail { display: none; }
  .kn-toc-chips {
    display: block;
    margin: 0 0 2rem;
    padding: 0.35rem 1rem;
    background: var(--surface);
    border: 1.5px solid var(--ink-rule);
    border-top: 6px solid var(--sl);
    border-radius: var(--radius);
  }
  .kn-guide-main .kn-toc-chips li { margin: 0; font-size: 1rem; border-bottom: 1px dotted var(--rule-strong); }
  .kn-guide-main .kn-toc-chips li:last-child { border-bottom: 0; }
  .kn-toc-chips a {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    min-height: 2.75rem;
    padding: 0.3rem 0;
    color: var(--fg);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
  }
  .kn-toc-chips a::before {
    content: counter(toc);
    content: counter(toc) / '';
    font-family: var(--display);
    font-weight: 860;
    color: var(--muted);
  }
  .kn-toc-chips a:hover { color: var(--link); }
  .lh-hero.has-art,
  .kn-hub-head.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .lh-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 3.4rem; }
  .lh-door-shop { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .mm-foot-grid,
  .mm-foot-small { grid-template-columns: minmax(0, 1fr); }
  .lh-hero.has-art,
  .kn-hub-head.has-art { display: flex; flex-direction: column; align-items: stretch; }
  .lh-hero.has-art > *,
  .kn-hub-head.has-art > * { align-self: flex-start; max-width: 100%; }
  .lh-hero.has-art > .lh-status { align-self: stretch; }
  .lh-hero > .lh-art { order: 5; align-self: stretch; margin-top: 1.4rem; }
  /* Plate 1 follows the three doors, so door 1 stays on the first screen. The hero becomes a
     subgrid of the page: its text and status take rows 1 to 4, the doors take row 5 and the
     plate row 6. Source order and focus order are unchanged; the plate is aria-hidden. */
  .lh-home main:has(> .lh-hero.has-art + .lh-doors) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .lh-home main > .lh-hero.has-art + .lh-doors { grid-area: 5 / 1; margin: 1rem 0 2.4rem; }
  .lh-home main > .lh-hero.has-art:has(+ .lh-doors) {
    display: grid;
    grid-area: 1 / 1 / span 6;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    margin: 0;
  }
  .lh-home main > .lh-hero.has-art:has(+ .lh-doors) > * { grid-column: 1; justify-self: start; align-self: start; }
  .lh-home main > .lh-hero.has-art:has(+ .lh-doors) > .eyebrow { grid-row: 1; }
  .lh-home main > .lh-hero.has-art:has(+ .lh-doors) > h1 { grid-row: 2; }
  .lh-home main > .lh-hero.has-art:has(+ .lh-doors) > .lede { grid-row: 3; }
  .lh-home main > .lh-hero.has-art:has(+ .lh-doors) > .lh-status { grid-row: 4; justify-self: stretch; }
  .lh-home main > .lh-hero.has-art:has(+ .lh-doors) > .lh-art { grid-row: 6; justify-self: stretch; max-width: 38rem; margin: 0 0 3rem; }
  /* Grid items keep their margins apart, so the gaps the page had in normal flow are set here. */
  .lh-home main:has(> .lh-hero.has-art + .lh-doors) > .lh-shelves > :last-child { margin-bottom: 0; }
  .lh-home main:has(> .lh-hero.has-art + .lh-doors) > .lh-alert,
  .lh-home main:has(> .lh-hero.has-art + .lh-doors) > .lh-club { margin-top: 0; }
  .kn-hub-head > .kn-hub-art { display: none; }
  .kn-hub-head.has-art > .kn-search { align-self: stretch; }
  .lh-water { grid-template-columns: minmax(0, 1fr); }
  .kn-course-hub { grid-template-columns: minmax(0, 1fr); }
  .sp-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  main,
  .mm-inner,
  .site-head,
  .site-foot { width: calc(100% - 2rem); }
  main { padding-top: 1.8rem; }
  .mm-head .mm-inner { min-height: 4rem; gap: 0.6rem; }
  .mm-head .mm-inner > .head-search { display: none; }
  .mm-head .mobile-menu { margin-left: auto; }
  .wordmark { font-size: 1.42rem; font-stretch: 112%; }
  .mm-foot-brand .wordmark { font-size: 1.55rem; }

  h1 { font-stretch: 106%; font-size: clamp(2rem, 8.6vw, 2.6rem); line-height: 1.04; }
  h2 { font-stretch: 104%; font-size: clamp(1.4rem, 5.6vw, 1.65rem); }
  h3 { font-stretch: 102%; }
  .lede, .prose .lede { font-size: 1.14rem; }
  .prose p,
  .prose li { font-size: 1.0625rem; line-height: 1.66; }
  .prose dl > dd { font-size: 1.0625rem; }
  table { font-size: 0.95rem; }
  th,
  td { padding: 0.62rem 0.7rem; }
  td { min-width: 6rem; }
  /* A row led by a status badge is a short checklist entry: on a phone the badge sits above
     its explanation, so the explanation gets the full width at reading size. */
  table:has(> tbody > tr > td:first-child > .badge:only-child),
  table:has(> tbody > tr > td:first-child > .badge:only-child) > tbody { display: block; }
  tr:has(> td:first-child > .badge:only-child) { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
  tbody tr:has(> td:first-child > .badge:only-child):last-child { border-bottom: 0; }
  tr:has(> td:first-child > .badge:only-child) > td { min-width: 0; border: 0; padding: 0.55rem 0.9rem 0; font-size: 1.0625rem; }
  tr:has(> td:first-child > .badge:only-child) > td + td { padding-top: 0.45rem; padding-bottom: 0.85rem; }
  tr:has(> td:first-child > .badge:only-child) .small { font-size: 1.0625rem; line-height: 1.55; }
  .research-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notice { padding: 1rem 1.05rem 1.05rem; }

  .lh-home main { padding-top: 1.4rem; }
  .lh-hero > .lh-art { padding: 0.35rem; }
  .fk-plate1 .tx,
  .fk-plate1 .tm,
  .fk-plate1 .td { font-size: 27px; }
  .lh-hero h1 { font-size: clamp(2.35rem, 11vw, 3rem); font-stretch: 106%; line-height: 1; }
  .lh-status { grid-template-columns: minmax(0, 1fr); }
  .lh-status > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.6rem; align-items: baseline; padding: 0.6rem 0.85rem; }
  .lh-status dd { margin: 0; }
  .lh-doors { grid-template-columns: minmax(0, 1fr); row-gap: 3.2rem; padding-top: 2.5rem; }
  .lh-door-shop { grid-column: auto; }
  .lh-door { padding: 1rem 1rem 1.1rem; }
  .lh-water { padding: 1.1rem 1rem 1.05rem; }
  .lh-readings { grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr)); }
  .lh-readings dd { font-size: 1.45rem; }
  .lh-shelf-list { grid-template-columns: minmax(0, 1fr); }
  .lh-shelf:has(> .lh-shelf-art) { grid-template-columns: minmax(0, 1fr) 6.2rem; }
  .lh-colony { grid-template-columns: minmax(0, 1fr); }
  .lh-alert { padding: 1.1rem 1rem; }
  .mh-alert-row { flex-direction: column; }
  .mh-alert-row input { flex: none; }
  .mh-alert-row button { width: 100%; }
  .lh-club { padding: 1.3rem 1.1rem; }

  .kn-search-row,
  .lh-search-row { flex-direction: row; }
  .kn-urgent { padding: 1.05rem 1rem 1.15rem; }
  .kn-course-hub { padding: 1.1rem 0.9rem 1rem; }
  /* Each tab is as wide as its longest word, so no word is split; spare width is shared out.
     Below about 380px the five tabs no longer fit and the strip scrolls sideways inside itself. */
  .kn-shelf-index {
    display: flex;
    margin-inline: -1rem;
    padding: 0.4rem 4px 0;
    gap: 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .kn-shelf-index::-webkit-scrollbar { display: none; }
  .kn-shelf-index a {
    display: flex;
    flex: 1 0 auto;
    width: min-content;
    align-items: flex-end;
    min-height: 3.6rem;
    padding: 0.3rem 0.32rem 0.35rem;
    border-width: 1.5px;
    border-radius: 8px 8px 0 0;
    font-family: var(--sans);
    font-stretch: 100%;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.15;
    hyphens: manual;
    overflow-wrap: normal;
    word-break: normal;
  }
  .kn-shelf-index a::before { display: none; }
  .kn-shelf { scroll-margin-top: 4.4rem; margin-bottom: 2.6rem; }
  .kn-shelf-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.85rem; }
  .kn-shelf-head::before { grid-row: 1; width: 2.6rem; height: 2.6rem; padding: 0; place-items: center; margin: 0; border-bottom: 2px solid var(--sl); border-radius: 8px; font-size: 1.55rem; align-self: center; }
  .kn-shelf-head > .kn-shelf-art { display: none; }
  .kn-shelf-head p { grid-column: 1 / -1; font-size: 1rem; margin-top: 0.3rem; }
  .kn-shelf-head h2 { align-self: center; }
  .kn-tile { min-height: 0; padding: 0.95rem 3rem 0.95rem 0.95rem; }

  .kn-answer .kn-plain { font-size: 1.2rem; }
  .kn-guide-main > h1 { font-stretch: 102%; font-size: 1.7rem; line-height: 1.1; }
  .kn-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.75rem 0.95rem; }
  .kn-card-foot { padding-inline: 0.95rem; }
  .kn-course-links { grid-template-columns: minmax(0, 1fr); }
  .kn-course-links .kn-next { text-align: left; }
  .kn-claim dl { grid-template-columns: minmax(0, 1fr); }
  .kn-claim dl > div { box-shadow: 0 1px 0 var(--rule); }

  .sp-index { grid-template-columns: minmax(0, 1fr); }
  .sp-index a { min-height: 3.6rem; }
  /* On a phone the plate is a thumbnail beside the heading, never above it. The plate number
     is cropped off, since it would print too small to read at this size. */
  .sp-cat:has(> .sp-art) { grid-template-columns: minmax(0, 1fr) 7.25rem; column-gap: 0.9rem; }
  .sp-cat:has(> .sp-art) > * { grid-column: 1 / -1; }
  .sp-cat:has(> .sp-art) > .sp-cat-head { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: flex-start; align-self: center; margin-bottom: 0.6rem; }
  .sp-cat:has(> .sp-art) > .sp-art { grid-column: 2; grid-row: 1; align-self: start; margin: 0.2rem 0 0.6rem; padding: 0.3rem; }
  .sp-art .fk { aspect-ratio: 300 / 162; }
  .sp-label dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .sp-policy { padding: 1.05rem 1rem 0.3rem; }
}

@media (max-width: 400px) {
  .wordmark { font-size: 1.34rem; }
  .sp-cat:has(> .sp-art) { grid-template-columns: minmax(0, 1fr) 6rem; column-gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Guide meta line: shelf link and reading time as separate items, so a wrap never strands a separator. */
.kn-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1.1rem; }

/* The search privacy line (husbandry/34 §5): small print under each search box that shows it. */
.kn-search-privacy,
.lh-search-privacy,
.head-search-privacy { margin: 0.4rem 0 0; max-width: 62ch; font-size: 0.85rem; line-height: 1.45; color: var(--muted); }
.head-search-privacy { display: block; padding: 0 0.15rem; }