/* Heirbloom website. Layout: a herbarium folio. One reading column of
   paper and ink, with plates (screenshots) mounted like pressed specimens
   and small mono labels in the margin. Only the flowers carry colour.
   The skin is the game's own: colours, type, radii, cards, buttons and
   chips come from UiKit (Assets/Heirbloom/Scripts/UI/UiKit.cs), with the
   same names, so the site and the app look like one thing (#422). */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The tokens, named as in the heirbloom-brand skill (.claude/skills/heirbloom-brand), values from UiKit */
  --ink: #3B3026;
  --ink-soft: #6E5F4E;       /* InkSoft, at the web's AA value */
  --hairline: rgba(59, 48, 38, 0.38);
  --faint: rgba(59, 48, 38, 0.14);
  --paper: #F4ECDC;
  --paper-deep: #E6D9BF;
  --paper-light: rgba(250, 245, 235, 0.9);
  --paper-pressed: #DED4BF;
  --sage: #9DB08A;           /* the primary action */
  --terracotta: #C7876A;
  --ochre: #D4B266;
  --pollen: #DEB346;
  --slate: #93AAB7;
  --rose: #CF9F9C;
  --oat: #DCCFB8;
  --moss: #4B5E36;           /* links and green words on the web */
  --chip-ink: #3B3026;       /* text on a coloured face */
  --chip-ink-deep: #241C14;  /* on the Rare chip, for contrast */
  --kicker: #A0654B;         /* terracotta, deepened so small mono caps read on paper */
  /* Rarity frames, Common to Rare (game.json) */
  --common: #B7AC98;
  --uncommon: #8FA67A;
  --rare: #7193B3;

  /* Radii, small like a printed label */
  --radius-card: 12px;
  --radius-button: 10px;
  --radius-chip: 6px;
  --card-shadow: 0 1px 1px rgba(60, 40, 20, 0.08), 0 8px 24px -10px rgba(60, 40, 20, 0.28);
  --soft-shadow: rgba(60, 40, 20, 0.2);
  --grain: rgba(122, 106, 88, 0.07);
  color-scheme: light;

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step--1: 0.84rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.7rem;
  --step-3: clamp(2.1rem, 1.4rem + 3vw, 3.3rem);
  --step-4: clamp(2.6rem, 1.6rem + 4.6vw, 4.6rem);

  --measure: 64ch;
  --wide: 72rem;
}

/* Light only, like the app: no dark theme. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(var(--grain) 1px, transparent 1px),
    radial-gradient(var(--grain) 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
main { overflow-x: clip; }
b, strong { font-weight: 700; }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 40rem) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); font-variation-settings: "opsz" 144; }
h2 { font-size: var(--step-3); font-variation-settings: "opsz" 96; }
h3 { font-size: var(--step-1); font-variation-settings: "opsz" 36; line-height: 1.2; }
p { margin: 0; }
em { font-style: italic; }

a {
  color: var(--moss);
  text-decoration-color: var(--sage);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-button);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--ink); color: var(--paper);
  padding: 0.5rem 0.9rem; z-index: 20; border-radius: var(--radius-button);
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 0.75rem); }

/* Mono labels: the specimen-tag voice */
.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Header ---------- */
.site-head { border-bottom: 1px solid var(--faint); }
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1rem;
}
.mark { display: inline-flex; align-items: center; text-decoration: none; }
/* The lockup (#428): never under 96 px wide; the link's padding keeps its clear space. */
.mark img { display: block; width: auto; height: 2.1rem; }
.site-nav ul {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem;
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  display: inline-block; padding-block: 0.45rem;
  color: var(--ink); text-decoration: none;
  font-size: 0.98rem; font-weight: 700;
}
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--hairline); text-decoration-thickness: 2px; }
.site-nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--sage);
  text-decoration-thickness: 3px;
}
@media (max-width: 39.99rem) {
  .site-nav { width: 100%; }
  .site-nav ul { gap: 0 1.1rem; }
}

/* ---------- Footer ---------- */
.site-foot {
  margin-top: 6rem;
  border-top: 1px solid var(--hairline);
  background: var(--paper-deep);
  font-size: 0.95rem;
}
.site-foot .wrap {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-block: 2.5rem 3rem;
}
.site-foot h2 { font-size: 1.05rem; font-variation-settings: "opsz" 24; margin-bottom: 0.6rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.site-foot a { color: var(--ink); }
.site-foot .fine { color: var(--ink-soft); grid-column: 1 / -1; font-size: 0.85rem; }

/* ---------- Home: hero ---------- */
.hero .wrap {
  display: grid; gap: 3rem;
  padding-block: 3rem 2rem;
  align-items: center;
}
@media (min-width: 56rem) {
  .hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); padding-block: 5rem 3rem; gap: 4rem; }
}
.hero-copy { display: grid; gap: 1.5rem; min-width: 0; }
.hero h1 em { font-weight: 500; color: var(--moss); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 34ch; }

/* A button, as UiKit draws one: a flat face on a darker base with a thin ink rule and a soft shadow */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.store {
  --face: var(--sage);
  --face-ink: var(--chip-ink);
  display: inline-grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 0.7rem;
  min-height: 3.25rem; padding: 0.5rem 1.1rem 0.6rem 0.9rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-button);
  color: var(--face-ink); text-decoration: none;
  background: var(--face);
  box-shadow: inset 0 -3px 0 rgba(59, 48, 38, 0.2), 0 3px 6px -2px var(--soft-shadow);
  line-height: 1.15;
}
.store svg { grid-row: span 2; width: 1.4rem; height: 1.4rem; }
.store small { font-family: var(--mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.store span { font-weight: 700; font-size: 1.02rem; }
.store + .store { --face: var(--paper-light); --face-ink: var(--ink); }
.store:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(59, 48, 38, 0.2); }

/* A plate: a screenshot mounted on a paper card, a strip of tape at each corner */
.plate {
  position: relative; margin: 0;
  background: var(--paper-light);
  padding: 0.75rem 0.75rem 0;
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.plate::before, .plate::after {
  content: ""; position: absolute; width: 4.2rem; height: 1.15rem;
  background: color-mix(in srgb, var(--ochre) 42%, transparent);
}
.plate::before { top: -0.45rem; left: -1rem; transform: rotate(-38deg); }
.plate::after { top: -0.45rem; right: -1rem; transform: rotate(38deg); }
.plate img { width: 100%; border-radius: var(--radius-button); background: var(--paper-deep); }
.plate figcaption {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 0.7rem 0.1rem 0.8rem;
  font-size: 0.92rem; color: var(--ink-soft);
}
.plate figcaption .label { white-space: nowrap; }

.hero-plate { max-width: 25rem; justify-self: center; width: 100%; transform: rotate(1.2deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero-plate { animation: settle 900ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes settle { from { transform: translateY(10px) rotate(2.6deg); opacity: .6; } to { transform: rotate(1.2deg); opacity: 1; } }
}

/* Specimen tag hanging off the hero plate: a little paper card, like the garden's HUD */
.tag {
  position: absolute; left: -1.25rem; bottom: 4.5rem;
  background: var(--paper-light); border-radius: var(--radius-card);
  padding: 0.55rem 0.8rem 0.6rem 1.35rem;
  transform: rotate(-4deg);
  box-shadow: var(--card-shadow);
  font-family: var(--mono); font-weight: 500; font-size: 0.7rem; line-height: 1.5;
  letter-spacing: 0.04em; color: var(--ink);
  max-width: 13.5rem;
}
.tag::before {
  content: ""; position: absolute; left: 0.5rem; top: 50%;
  width: 0.45rem; height: 0.45rem; margin-top: -0.22rem;
  border-radius: 50%; background: var(--ochre);
}
.tag b { display: block; font-family: var(--display); font-weight: 600; font-size: 0.98rem; letter-spacing: 0; margin-bottom: 0.15rem; }
@media (max-width: 30rem) { .tag { left: -0.4rem; bottom: 3.6rem; } }

/* ---------- Sections ---------- */
.section { padding-block: 4.5rem 0; }
/* UiKit.SectionHeading: a serif heading over a thin hairline rule */
.section-head {
  display: grid; gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.section-head h2 { padding-bottom: 0.6rem; border-bottom: 1px solid var(--hairline); }
.section-head p { max-width: var(--measure); color: var(--ink-soft); font-size: 1.08rem; }

/* Features: four entries, each with its icon in a round paper button */
.features {
  display: grid; gap: 2.5rem 3.5rem;
  grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: 0; padding: 0;
  max-width: 60rem;
}
@media (min-width: 44rem) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.25rem 1rem; }
.feature svg {
  grid-row: span 3; width: 3.2rem; height: 3.2rem; padding: 0.55rem;
  color: var(--ink); background: var(--paper-light); border-radius: 50%;
  box-shadow: inset 0 -2px 0 var(--faint), 0 2px 6px -2px var(--soft-shadow);
}
.feature h3 { margin-top: 0.15rem; }
.feature p { color: var(--ink); max-width: 46ch; }

/* Plates strip */
.plates {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.plates .plate { transform: rotate(var(--tilt, 0deg)); }
.plates .plate img { aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }
.plates .plate img.focus-center { object-position: center; }
.plates li:nth-child(odd) .plate { --tilt: -0.8deg; }
.plates li:nth-child(even) .plate { --tilt: 0.7deg; }
@media (max-width: 39.99rem) {
  .plates { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; padding: 1rem 0.5rem 1.5rem; scroll-snap-type: x mandatory; margin-inline: -0.5rem; }
  .plates li { scroll-snap-align: center; }
}

/* Pull quote of the loop */
.loop {
  display: grid; gap: 1rem; text-align: left;
  max-width: 50rem;
}
.loop ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.7rem;
  font-family: var(--display); font-size: var(--step-2); font-variation-settings: "opsz" 72;
  font-weight: 500; line-height: 1.25;
}
.loop li:not(:last-child)::after { content: "→"; margin-left: 0.7rem; color: var(--ink-soft); font-weight: 300; }
.loop li em { color: var(--moss); }

/* ---------- Prose pages (privacy, terms, support, press) ---------- */
.page-head { padding-block: 3.5rem 2rem; display: grid; gap: 1rem; }
.page-head p { max-width: var(--measure); color: var(--ink-soft); font-size: var(--step-1); line-height: 1.45; }
.prose-layout { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .prose-layout { grid-template-columns: 14rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  .toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 1.5rem); }
}
.toc {
  font-size: 0.92rem;
  background: var(--paper-light); border-radius: var(--radius-card); box-shadow: var(--card-shadow);
  padding: 0.9rem 1.1rem 1rem;
}
.toc ol { margin: 0.6rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.25rem; }
.toc a { color: var(--ink); }

.prose { max-width: var(--measure); min-width: 0; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 {
  font-size: var(--step-2); font-variation-settings: "opsz" 60;
  margin-top: 3rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--hairline);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.4rem; }
.prose li::marker { color: var(--ink-soft); }
.prose code { font-family: var(--mono); font-size: 0.85em; background: var(--paper-deep); padding: 0.05em 0.3em; border-radius: var(--radius-chip); word-break: break-word; }

.note {
  background: var(--paper-deep); border-radius: var(--radius-card);
  padding: 0.9rem 1.1rem; font-size: 0.95rem;
}
.note .label { display: block; margin-bottom: 0.3rem; }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem 0.6rem 0; border-bottom: 1px solid var(--faint); }
.data-table th { font-family: var(--mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); border-bottom-color: var(--hairline); }
.data-table td:first-child { font-weight: 700; }

/* FAQ: each question a paper row, like the app's list rows */
.faq { display: grid; gap: 0.5rem; }
.faq details { background: var(--paper-light); border-radius: var(--radius-card); box-shadow: 0 1px 3px var(--faint); padding-inline: 1rem; }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 0.9rem 0;
  font-family: var(--display); font-size: 1.15rem; font-weight: 600; font-variation-settings: "opsz" 30;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink-soft); font-size: 1.1rem; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 1.1rem; max-width: var(--measure); display: grid; gap: 0.8rem; }

.contact-card {
  display: grid; gap: 0.6rem;
  background: var(--paper-light); border-radius: var(--radius-card); box-shadow: var(--card-shadow);
  padding: 1.4rem 1.5rem; max-width: 34rem;
}
.contact-card .email { font-family: var(--display); font-size: var(--step-2); font-variation-settings: "opsz" 60; font-weight: 600; word-break: break-all; }

/* Press kit */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1.5rem; margin: 0; }
.facts dt { font-family: var(--mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.3rem; }
.facts dd { margin: 0; }
.logo-sheet { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.logo-tile { margin: 0; display: grid; gap: 0.6rem; }
.logo-tile > div { display: grid; place-items: center; aspect-ratio: 3 / 2; max-width: 100%; border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
.logo-tile > div.on-paper { background: #F4ECDC; color: #3B3026; }
.logo-tile > div.on-ink { background: #3B3026; color: #F4ECDC; }
.logo-tile img { width: 70%; height: auto; }
.logo-tile.square img { width: 40%; }
.logo-tile.square .on-ink img { border-radius: 22%; } /* the app icon, masked as a launcher would */
.logo-tile figcaption { font-size: 0.92rem; color: var(--ink-soft); }

/* 404 */
.lost { padding-block: 5rem 2rem; display: grid; gap: 1.4rem; justify-items: start; }
.lost svg { width: 6rem; height: 6rem; color: var(--ink-soft); }
.lost p { max-width: 40ch; font-size: var(--step-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Press kit screenshots: uncropped, three across, with download links */
.press-plates { margin-top: 2.5rem; align-items: start; }
.press-plates li { display: grid; gap: 0.9rem; }
.press-plates .plate img { aspect-ratio: auto; }
@media (min-width: 60rem) { .press-plates { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 60rem; gap: 2.5rem; } }

.page-head p.label, .lost p.label { font-size: 0.72rem; line-height: 1.5; color: var(--ink-soft); }
@media (min-width: 60rem) { .prose-layout.support { grid-template-columns: 19rem minmax(0, 1fr); } }
.contact-card .email { font-size: var(--step-1); font-variation-settings: "opsz" 36; word-break: normal; overflow-wrap: anywhere; }

/* ---------- Gene pages (breeding, traits, species) ---------- */
/* A specimen: a seed plate (#411), the portrait on parchment inside a thin frame line in its rarity's colour */
.specimens {
  display: grid; gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.specimen { --frame: var(--hairline); margin: 0; display: grid; gap: 0.5rem; align-content: start; }
.specimen.common { --frame: var(--common); }
.specimen.uncommon { --frame: var(--uncommon); }
.specimen.rare { --frame: var(--rare); }
.specimen img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  padding: 7px; background: var(--paper-light);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 3px var(--paper-light), inset 0 0 0 4.5px var(--frame), var(--card-shadow);
}
.specimen figcaption { font-size: 0.9rem; line-height: 1.4; }
.specimen figcaption b { display: block; font-family: var(--display); font-weight: 600; font-size: 1rem; }
.specimen figcaption .label { display: block; margin-top: 0.15rem; font-size: 0.64rem; }
.prose .specimens { padding: 0; }
.prose .specimens > li, .specimens > li { margin: 0; }
.specimens.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

/* The unknown plate: a question mark where a surprise goes */
.unknown img, .unknown .blank {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  background: var(--paper-deep); border: 1.5px dashed var(--hairline); border-radius: var(--radius-card);
  font-family: var(--display); font-size: 3.5rem; font-weight: 300; color: var(--ink-soft);
}

/* Odds: a cross written out as a grid, in the app's paper rows */
.punnett { border-collapse: separate; border-spacing: 3px; font-size: 0.95rem; margin-top: 1.2rem; }
.punnett th, .punnett td { padding: 0.55rem 0.8rem; text-align: center; border-radius: var(--radius-chip); }
.punnett th { font-family: var(--mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-soft); background: transparent; }
.punnett td { background: var(--paper-deep); }
.punnett td.shows { background: var(--sage); color: var(--chip-ink); font-weight: 700; }
.punnett caption { caption-side: bottom; text-align: left; padding-top: 0.6rem; font-size: 0.88rem; color: var(--ink-soft); }

/* Tier chips, as the game draws them: Nunito Bold on the rarity colour */
.tier {
  display: inline-block;
  font-family: var(--text); font-weight: 700; font-size: 0.74rem; line-height: 1.5;
  padding: 0 0.5em; border-radius: var(--radius-chip);
  color: var(--chip-ink); white-space: nowrap;
}
.tier.common { background: var(--common); }
.tier.uncommon { background: var(--uncommon); }
.tier.rare { background: var(--rare); color: var(--chip-ink-deep); }

/* A species entry: portrait beside its notes */
.species-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem; }
.species-entry { display: grid; gap: 1rem 2rem; }
@media (min-width: 44rem) { .species-entry { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; } }
.species-entry .specimen { max-width: 15rem; }
.species-entry h2 { font-size: var(--step-2); font-variation-settings: "opsz" 60; padding-bottom: 0.5rem; border-bottom: 1px solid var(--hairline); }
.species-entry h2 i { font-family: var(--display); font-weight: 400; font-size: 0.6em; color: var(--ink-soft); margin-left: 0.4rem; }
.species-entry .prose > * + * { margin-top: 0.8rem; }
.species-entry .facts { font-size: 0.95rem; }

/* Links on to the other gene pages: paper cards */
.next-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); max-width: 60rem; }
.next-pages a {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.2rem 1rem; align-items: center;
  padding: 0.6rem; color: var(--ink); text-decoration: none;
  background: var(--paper-light); border-radius: var(--radius-card); box-shadow: var(--card-shadow);
}
.next-pages img { grid-row: span 2; width: 5rem; height: 5rem; object-fit: contain; border-radius: var(--radius-button); }
.next-pages b { font-family: var(--display); font-size: var(--step-1); font-weight: 600; font-variation-settings: "opsz" 36; align-self: end; }
.next-pages span { color: var(--ink-soft); font-size: 0.95rem; align-self: start; }
.next-pages a:hover { box-shadow: inset 0 0 0 1.5px var(--sage), var(--card-shadow); }

/* Home: the maker's note, as a Botany note card (#409): a kicker, a serif title, the text */
.note-from {
  max-width: 44rem; display: grid; gap: 1rem;
  background: var(--paper-light); border-radius: var(--radius-card); box-shadow: var(--card-shadow);
  padding: 1.4rem 1.4rem 1.5rem;
}
@media (min-width: 40rem) { .note-from { padding: 1.8rem 2.2rem 2rem; } }
.note-from .kicker {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--kicker);
}
.note-from .kicker svg { width: 1.1rem; height: 1.1rem; flex: none; }
.note-from h2 { font-size: var(--step-2); font-variation-settings: "opsz" 60; }
.note-from .sign { color: var(--ink-soft); font-family: var(--display); font-style: italic; }