/* eggsbay: one stylesheet for every page.

   The idea: an online listing, retold as a good read about hatching eggs. The palette is
   the colours of real egg shells; four of them pick the letters e, b, a and y out of the
   wordmark. Literata carries the reading and Hanken Grotesk the labels and tables. The
   wordmark is drawn from Anybody as outlines, so it needs no font file.

   build.mjs stamps this file's hash into every page's stylesheet link, and the hash of each
   font into the URLs below, because production serves them as immutable for a year. */

/* Self-hosted Latin subsets (source/fonts/build-fonts.py). The "Fallback" faces are system fonts
   resized to the web fonts' proportions, so the page does not shift when they load: Georgia and
   Arial on computers and iPhones, Noto Serif and Roboto on Android, which has neither. */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/literata-latin.349830a226.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/literata-italic-latin.df4a90ebab.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin.f16ecb7f23.woff2") format("woff2"); }
@font-face { font-family: "Literata Fallback"; src: local("Georgia"); size-adjust: 108.01%; ascent-override: 108.97%; descent-override: 28.52%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 101.35%; ascent-override: 98.67%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: "Literata Fallback Android"; src: local("Noto Serif"); size-adjust: 99.27%; ascent-override: 118.56%; descent-override: 31.03%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk Fallback Android"; src: local("Roboto"); size-adjust: 101.24%; ascent-override: 98.78%; descent-override: 29.93%; line-gap-override: 0%; }

:root {
  /* Paper and ink, both tinted toward shell brown. */
  --paper: oklch(0.972 0.014 85);
  --paper-deep: oklch(0.945 0.022 85);
  --card: oklch(0.993 0.005 85);
  --rule: oklch(0.86 0.02 80);
  --rule-soft: oklch(0.91 0.016 82);
  --ink: oklch(0.25 0.025 55);
  --ink-mute: oklch(0.41 0.025 60);
  --ink-soft: oklch(0.52 0.02 65);

  /* Shell colours. The first four spell e-b-a-y inside the wordmark. */
  --shell-terracotta: oklch(0.56 0.14 40);
  --shell-blue: oklch(0.63 0.085 212);
  --shell-yolk: oklch(0.73 0.15 75);
  --shell-olive: oklch(0.56 0.095 122);
  --shell-chocolate: oklch(0.34 0.055 45);
  --shell-cream: oklch(0.93 0.035 85);

  --link: oklch(0.42 0.085 222);
  --good: oklch(0.42 0.08 160);
  --caution: oklch(0.47 0.11 55);
  --flag: oklch(0.5 0.17 27);

  /* Broody's own colours, for anything that leads to Broody. */
  --broody-green: #2c4a26;
  --broody-green-deep: #1f361b;
  --broody-cream: #f5eeda;
  --broody-gold: #d9932c;

  --font-read: 'Literata', 'Literata Fallback', 'Literata Fallback Android', Georgia, serif;
  --font-ui: 'Hanken Grotesk', 'Hanken Grotesk Fallback', 'Hanken Grotesk Fallback Android', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --frame: 1160px;
  --lane: 720px;
  --radius: 16px;
  --header-height: 64px;
}

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

/* Jumps are instant on purpose. A smooth one takes over a second to travel down a chapter, the
   web fonts arrive while it is still moving, the page changes height and the jump lands on the
   wrong entry. It also drags every plate on the way into view, so they all download. */
html { scroll-padding-top: calc(var(--header-height) + 20px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1000px) { body { font-size: 20px; } }

img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a[href^="mailto:"] { overflow-wrap: anywhere; } /* an address is one long word */
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.band.dark :focus-visible, .site-footer :focus-visible, .follow-bar :focus-visible { outline-color: oklch(0.97 0.015 85); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
strong { font-weight: 700; }
::selection { background: oklch(0.85 0.09 80); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
/* One row, and deliberately not allowed to wrap above the phone layout. At a tablet's width the
   row has about 17px to spare, and the fallback face that shows while the web font loads is wider
   than that in Safari: wrapping would drop the button to a second row for a moment and jolt the
   page, where without it the button only leans a few pixels into the gutter. The price is that
   text enlarged on its own to 200% (a browser's text-only zoom) scrolls sideways at these widths;
   ordinary zoom does not, because it brings in the phone layout. */
.site-header-inner {
  max-width: var(--frame); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 64px;
  display: flex; align-items: center; gap: clamp(14px, 3vw, 32px);
}

/* The wordmark: e, b, a and y take four shell colours, so it reads as "eggs" and as "ebay".
   The letters are outlines in the sprite; these variables colour them. */
.wordmark {
  display: inline-flex; padding: 8px 0; flex: none;
  --mark-ink: var(--ink); --mark-e: var(--shell-terracotta); --mark-b: var(--shell-blue); --mark-a: var(--shell-yolk); --mark-y: var(--shell-olive);
}
.wordmark svg { display: block; height: 28px; width: auto; aspect-ratio: 11943 / 2070; }

.site-nav {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px);
  margin-left: auto;
  font-family: var(--font-ui); font-size: 15.5px; font-weight: 600;
}
.site-nav a { color: var(--ink-mute); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--shell-terracotta); }

.header-cta {
  font-family: var(--font-ui); font-size: 15px; font-weight: 700;
  background: var(--broody-green); color: var(--broody-cream);
  padding: 10px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.header-cta:hover { background: var(--broody-green-deep); }

@media (max-width: 760px) {
  :root { --header-height: 0px; }
  .site-header { position: static; }
  .site-header-inner { flex-wrap: wrap; gap: 0 12px; padding-top: 8px; }
  .wordmark svg { height: 25px; }
  .header-cta { margin-left: auto; font-size: 14px; padding: 9px 14px; }
  .site-nav { order: 3; width: 100%; margin: 0; justify-content: space-between; gap: 8px; font-size: 14.5px; border-top: 1px solid var(--rule-soft); }
  .site-nav a { padding: 9px 0 7px; }
}
@media (min-width: 761px) { .header-cta { order: 3; } }
/* A tablet held upright: the row is at its tightest here, so it gives up a little air. That leaves
   room for the fallback face, which is wider than the web font and shows until it loads. Without
   the room, Safari broke every menu item in two for a moment on a first visit. */
@media (min-width: 761px) and (max-width: 840px) {
  .site-header-inner { gap: 16px; }
  .site-nav { gap: 14px; font-size: 15px; }
  .header-cta { padding-left: 14px; padding-right: 14px; }
}
/* The narrowest phones: the wordmark and the button still share the top row. */
@media (max-width: 350px) {
  .site-header-inner { gap: 0 8px; }
  .wordmark svg { height: 22px; }
  .header-cta { font-size: 13px; padding-left: 11px; padding-right: 11px; }
  .site-nav { font-size: 14px; }
}

/* ---------- Page frame and reading lane ---------- */

main { display: block; }
.lane { max-width: calc(var(--lane) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.frame { max-width: calc(var(--frame)); margin: 0 auto; padding: 0 var(--gutter); }
article.lane { padding-top: clamp(24px, 4.5vw, 56px); padding-bottom: 88px; }

.breadcrumbs { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; }
.breadcrumbs a { color: inherit; }
.breadcrumbs span[aria-hidden] { margin: 0 6px; }

h1, h2, h3, h4 { font-family: var(--font-read); color: var(--ink); text-wrap: balance; }
h1 {
  font-weight: 700; font-size: clamp(36px, 5.6vw, 60px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 18px;
}
h2 {
  font-weight: 700; font-size: clamp(26px, 3.6vw, 34px); line-height: 1.14; letter-spacing: -0.012em;
  margin: 2.3em 0 0.55em;
}
h3 { font-weight: 700; font-size: 21px; line-height: 1.28; margin: 1.6em 0 0.4em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

.lede { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.5; color: var(--ink-mute); margin-bottom: 18px; }
/* The dot between the two parts hangs in the gap to the left of the date. When the date wraps to
   its own line the dot lands outside the left edge, where the clip hides it, so a narrow phone
   never shows a dot with nothing after it. The clip sits 6px outside the left edge and well
   clear of the others: enough to hide the dot (it is 12px out), and to leave the link its
   focus ring (5.5px out) and its touch area. */
.byline { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); display: flex; gap: 0 20px; flex-wrap: wrap; margin: 0 0 28px; clip-path: inset(-16px -16px -16px -6px); }
.byline span + time { position: relative; }
.byline span + time::before { content: "·"; position: absolute; left: -12px; }
.byline a { color: inherit; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: 17px; line-height: 1.2;
  padding: 14px 22px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer;
}
.button.broody { background: var(--broody-green); color: var(--broody-cream); }
.button.broody:hover { background: var(--broody-green-deep); }
.button.outline { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: none; }
.button.outline:hover { background: var(--paper-deep); }
.button .arrow { font-family: var(--font-ui); }

/* ---------- Home: hero and the "listing ended" card ---------- */

/* Three pieces: the words, the mock listing and the species links. Side by side the links sit under
   the words; in one column the listing comes before them, so a phone meets it on the first screen.
   A tablet held upright is wide enough for side by side, which keeps the listing from sitting
   alone at the left of an empty row. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  grid-template-areas: "text listing" "species listing";
  column-gap: clamp(24px, 5vw, 64px);
  padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(28px, 5vw, 56px);
}
.hero-text { grid-area: text; align-self: end; }
.hero > .listing { grid-area: listing; align-self: center; }
.hero > .species-links { grid-area: species; align-self: start; }
.hero h1 { font-size: clamp(38px, 5.6vw, 66px); }
.hero .lede { max-width: 33em; margin-bottom: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { font-family: var(--font-ui); font-size: 15px; color: var(--ink-soft); margin: 14px 0 0; }

.listing {
  background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 16px 16px 18px;
  box-shadow: 0 1px 0 var(--rule-soft), 0 22px 44px -28px oklch(0.4 0.05 60 / 0.4);
  font-family: var(--font-ui);
  display: flex; flex-direction: column;
}
.listing-photo {
  position: relative; border-radius: 12px; background: oklch(0.905 0.034 80);
  display: grid; place-items: center; padding: 18px 12px 10px; overflow: hidden;
}
.listing-photo svg { display: block; width: 100%; height: auto; }
.stamp {
  position: absolute; top: 14px; right: 10px; transform: rotate(6deg);
  font-weight: 800; font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--flag); border: 2.5px solid currentColor; border-radius: 6px; padding: 5px 12px 4px;
  background: oklch(0.98 0.01 85 / 0.92);
}
.listing-title { font-family: var(--font-ui); font-size: 19px; font-weight: 700; line-height: 1.3; margin: 14px 2px 10px; letter-spacing: 0; }
.listing-facts { margin: 0 2px; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 15px; line-height: 1.45; }
.listing-facts dt { color: var(--ink-soft); }
.listing-facts dd { margin: 0; }
/* First in the markup, so anything reading the page meets the label before the mock listing; last on screen. */
.listing-note { order: 2; font-size: 13px; color: var(--ink-soft); margin: 12px 2px 0; line-height: 1.45; }

@media (max-width: 699px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "text" "listing" "species"; }
  .hero > .listing { max-width: 520px; margin-top: 26px; }
}

/* "What are you hoping to hatch?" */
.species-links { margin: 26px 0 0; font-family: var(--font-ui); }
.species-links p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 8px; }
.species-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.species-links li { margin: 0; }
.species-links a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 600;
}
.species-links a:hover { border-color: var(--ink-soft); background: #fff; }
.species-links .egg { width: 13px; height: 17px; }

/* ---------- Bands ---------- */

.band { padding: clamp(36px, 6vw, 72px) 0; }
.band.deep { background: var(--paper-deep); }
.band.dark { background: var(--shell-chocolate); color: oklch(0.95 0.02 85); }
.band.dark h2, .band.dark h3 { color: oklch(0.97 0.015 85); }
.band.dark a { color: oklch(0.86 0.07 200); }
.band > .lane > h2:first-child, .band > .frame > h2:first-child { margin-top: 0; }
.band-intro { color: var(--ink-mute); font-size: clamp(19px, 1.9vw, 22px); line-height: 1.5; max-width: 36em; }

/* The short version: four facts in a row. */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts li { margin: 0; padding: 22px 22px 22px 0; }
.facts li + li { padding-left: 22px; border-left: 1px solid var(--rule); }
.facts .fact-value { display: block; font-size: 21px; font-weight: 700; line-height: 1.22; letter-spacing: -0.008em; }
.facts .fact-note { display: block; font-family: var(--font-ui); font-size: 15px; color: var(--ink-mute); line-height: 1.45; margin-top: 6px; }
@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .facts li, .facts li + li { padding: 16px 0; border-left: 0; }
  .facts li + li { border-top: 1px solid var(--rule); }
}

/* Timeline */
.timeline { list-style: none; margin: 1.4em 0 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 132px 1fr; gap: 0 20px; margin: 0; padding: 14px 0; border-top: 1px solid var(--rule); }
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
.timeline time { font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; color: var(--ink-mute); padding-top: 3px; }
.timeline p { margin: 0; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* Quoted policy */
.policy-quote { margin: 1.4em 0; padding: 20px 24px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.policy-quote p { font-size: 21px; line-height: 1.42; margin: 0 0 8px; }
.policy-quote cite { font-family: var(--font-ui); font-style: normal; font-size: 14.5px; color: var(--ink-soft); }

/* What a search turns up now: a strip of toy "eggs". */
.finds { list-style: none; margin: 1.2em 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-family: var(--font-ui); }
@media (max-width: 480px) { .finds { grid-template-columns: 1fr; } }
.finds li { margin: 0; padding: 12px 14px 34px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; font-size: 15px; line-height: 1.4; position: relative; }
.finds .price { display: block; font-weight: 700; margin-top: 4px; }
.finds li::after {
  content: "Won't hatch"; position: absolute; left: 12px; bottom: 9px; transform: rotate(-3deg);
  font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--flag); border: 1.5px solid currentColor; border-radius: 4px; padding: 1px 6px 0;
}

/* Three ways to buy now */
.options { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.options > li { margin: 0; padding: 24px 28px 22px 0; display: flex; flex-direction: column; }
.options > li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.options > li.ours { box-shadow: inset 0 3px 0 var(--broody-green); }
.options h3 { margin: 0 0 6px; font-size: 22px; }
.options p { font-size: 16.5px; line-height: 1.55; color: var(--ink-mute); margin: 0 0 12px; }
.options .verdict-line { font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; color: var(--ink); margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.options .verdict-line a { color: var(--broody-green); white-space: nowrap; }
.options ul { font-family: var(--font-ui); font-size: 15px; line-height: 1.45; padding-left: 18px; margin: 0 0 14px; color: var(--ink); list-style: disc; }
.more.after-options { margin: 20px 0 0; }
@media (max-width: 900px) {
  .options { grid-template-columns: 1fr; }
  .options > li, .options > li + li { padding: 20px 0; border-left: 0; }
  .options > li + li { border-top: 1px solid var(--rule); }
}

/* Broody panel */
.broody-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: clamp(24px, 5vw, 56px); align-items: center;
  margin-top: clamp(32px, 5vw, 56px);
  background: var(--broody-cream); border: 1px solid oklch(0.86 0.04 95); border-radius: 24px;
  padding: clamp(22px, 4vw, 44px);
}
.broody-panel h2 { margin-top: 0; }
.broody-panel .broody-logo { width: 84px; height: auto; display: block; margin-bottom: 14px; }
.broody-points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.broody-points li { margin: 0; padding-left: 30px; position: relative; font-size: 17.5px; line-height: 1.5; }
.broody-points li::before {
  content: ""; position: absolute; left: 2px; top: 0.3em; width: 14px; height: 18px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--broody-gold);
}
.broody-shot { margin: 0; }
.broody-shot img { display: block; width: 100%; border-radius: 16px; border: 1px solid oklch(0.82 0.03 95); box-shadow: 0 24px 48px -30px oklch(0.3 0.06 140 / 0.55); }
.broody-shot figcaption { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; text-align: center; }
@media (max-width: 860px) { .broody-panel { grid-template-columns: 1fr; } .broody-shot { max-width: 300px; margin: 0 auto; } }

/* Seller strip */
.seller-strip p { margin: 0 0 22px; color: oklch(0.9 0.02 85); }
.seller-strip h2 { margin: 0 0 8px; }
.band.dark .seller-strip .button { background: var(--shell-yolk); color: var(--shell-chocolate); }
.band.dark .seller-strip .button:hover { background: oklch(0.79 0.15 78); }

/* Breed book teaser */
/* Six across, then three by two, then two by three: never a row with one or two left over. */
.species-grid { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1039px) { .species-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 519px) { .species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.species-grid li { margin: 0; }
.species-grid a { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; height: 100%; }
.species-grid a:hover { border-color: var(--ink-soft); }
.species-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--shell-cream); }
.species-grid .species-name { display: block; font-weight: 700; font-size: 19px; padding: 12px 14px 0; }
.species-grid .species-sub { display: block; font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); padding: 2px 14px 14px; }
.species-grid .species-cover { display: grid; place-items: center; aspect-ratio: 1; background: var(--shell-cream); }
.species-grid .species-cover .egg.large { width: 46px; height: 61px; }

/* ---------- Guides: the short answer, comparison table, verdict cards ---------- */

.answer { background: var(--shell-cream); border-radius: var(--radius); padding: 22px 24px 8px; margin: 0 0 8px; }
.answer h2 { margin-top: 0; font-size: 24px; }
.answer ul { padding-left: 20px; }
.answer-action { margin: 2px 0 16px; }

/* The table breaks out of the reading lane, but only into room the page really has on each side. */
.compare-wrap { --breakout: clamp(0px, (100vw - var(--lane) - 2 * var(--gutter)) / 2 - 8px, 180px); margin: 22px calc(-1 * var(--breakout)) 8px; }
table.compare {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.45;
}
table.compare caption { text-align: left; font-size: 14px; color: var(--ink-soft); padding: 10px 4px 0; caption-side: bottom; }
@media (min-width: 961px) {
  table.compare thead tr > :first-child { border-top-left-radius: calc(var(--radius) - 1px); }
  table.compare thead tr > :last-child { border-top-right-radius: calc(var(--radius) - 1px); }
  table.compare tbody tr:last-child > :first-child { border-bottom-left-radius: calc(var(--radius) - 1px); }
  table.compare tbody tr:last-child > :last-child { border-bottom-right-radius: calc(var(--radius) - 1px); }
  table.compare tr.ours > * { background: oklch(0.975 0.03 100); }
  /* Six columns: the two that carry the most words get the most room. */
  table.compare.six { table-layout: fixed; }
  table.compare.six th:nth-child(1) { width: 15%; }
  table.compare.six th:nth-child(2) { width: 13%; }
  table.compare.six th:nth-child(3) { width: 13%; }
  table.compare.six th:nth-child(4) { width: 21%; }
  table.compare.six th:nth-child(5) { width: 16%; }
  table.compare.six th:nth-child(6) { width: 22%; }
  table.compare.six tbody th { white-space: normal; }
}
table.compare th, table.compare td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); }
table.compare thead th, table.compare thead td { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; background: var(--paper-deep); border-bottom-color: var(--rule); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare tbody th { font-weight: 700; white-space: nowrap; }
table.compare tbody th a { color: var(--ink); text-decoration-color: var(--ink-soft); }
table.compare tbody th a:hover { text-decoration-color: currentColor; }
table.compare tbody th small { display: block; font-weight: 400; color: var(--ink-soft); white-space: normal; font-size: 13px; margin-top: 2px; }
table.compare tbody th small a { color: inherit; padding: 6px 0; }
table.compare .flag { display: block; margin-top: 6px; color: var(--flag); font-weight: 600; }
table.compare .flag.midway { margin-bottom: 6px; } /* more of the cell's text follows the warning */

/* Between a tablet on its side and a small laptop the table keeps its shape with tighter cells. */
@media (min-width: 961px) and (max-width: 1100px) {
  table.compare { font-size: 14px; }
  table.compare th, table.compare td { padding: 10px 11px; }
}

@media (max-width: 960px) {
  .compare-wrap { margin-left: 0; margin-right: 0; }
  table.compare, table.compare tbody, table.compare tr, table.compare td, table.compare th { display: block; width: 100%; }
  table.compare { border: 0; background: none; }
  table.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.compare caption { display: block; width: 100%; padding: 0 2px 12px; }
  table.compare tbody tr { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 14px; padding: 4px 0; }
  table.compare tbody tr.ours { background: oklch(0.975 0.03 100); }
  table.compare tbody th { white-space: normal; font-size: 18px; border-bottom: 1px solid var(--rule-soft); }
  table.compare td { border-bottom: 0; padding: 8px 14px; }
  table.compare td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
}

.option-summary { color: var(--ink-mute); }
.verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 6px; }
@media (max-width: 680px) { .verdicts { grid-template-columns: 1fr; } }
.verdict { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px 6px; font-family: var(--font-ui); }
.verdict h3 { font-family: var(--font-ui); margin: 0 0 8px; font-size: 17px; }
.verdict h4 { font-family: var(--font-ui); margin: 12px 0 4px; font-size: 14px; letter-spacing: 0.01em; }
.verdict h4.good { color: var(--good); }
.verdict h4.caution { color: var(--caution); }
.verdict ul { font-size: 16px; line-height: 1.5; padding-left: 18px; }
.more { font-family: var(--font-ui); font-size: 16px; }

/* ---------- Broody call to action card ---------- */

.cta-card {
  display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: start;
  background: var(--broody-cream); border: 1px solid oklch(0.86 0.04 95); border-radius: 20px;
  padding: 22px; margin: 28px 0;
}
.cta-card img { width: 76px; height: auto; }
.cta-card h3 { margin: 0 0 6px; font-size: 23px; line-height: 1.2; }
.cta-card p { color: var(--ink-mute); font-size: 17px; margin-bottom: 14px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-button {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  background: var(--broody-green); color: var(--broody-cream);
  font-family: var(--font-ui); font-weight: 700; font-size: 16px; text-decoration: none;
}
.cta-button:hover { background: var(--broody-green-deep); }
.cta-button.secondary { background: none; color: var(--broody-green); box-shadow: inset 0 0 0 1.5px var(--broody-green); }
.cta-button.secondary:hover { background: oklch(0.93 0.04 95); }
@media (max-width: 520px) { .cta-card { grid-template-columns: 1fr; } .cta-card img { width: 60px; } }

/* ---------- FAQ, related, sources ---------- */

.faq-item { border-top: 1px solid var(--rule); padding: 16px 0 4px; }
.faq-item h3 { margin: 0 0 6px; font-size: 19px; }
.faq-item p { color: var(--ink-mute); }

.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; font-family: var(--font-ui); }
.related li { margin: 0; }
/* An odd number of cards in two columns: the last one takes the whole row, so nothing is left hanging. */
.related li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.related a { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; }
.related a:hover { border-color: var(--ink-soft); }
.related a span { display: block; font-weight: 400; color: var(--ink-soft); font-size: 15px; margin-top: 2px; }

.sources { font-family: var(--font-ui); font-size: 15px; color: var(--ink-soft); }
.sources a { color: inherit; }
ol.source-list { font-family: var(--font-ui); font-size: 15px; color: var(--ink-mute); padding-left: 1.4em; }
ol.source-list li { margin-bottom: 6px; }
ol.source-list a { color: inherit; }

/* ---------- Breed book ---------- */

.book-hero { padding-top: clamp(24px, 4.5vw, 56px); padding-bottom: clamp(12px, 2vw, 24px); }
.book-hero .lede { max-width: 40em; }

/* Jump list */
.jump { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-ui); counter-reset: jump; }
.jump li { margin: 0; counter-increment: jump; }
.jump a { display: inline-flex; gap: 7px; align-items: baseline; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.jump a::before { content: counter(jump); font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.jump a:hover { border-color: var(--ink-soft); }

/* At-a-glance table of the ten */
.glance-wrap { margin: 26px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
table.glance { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 15px; line-height: 1.4; }
table.glance th, table.glance td { text-align: left; vertical-align: middle; padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); }
table.glance thead th { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); background: var(--paper-deep); border-bottom-color: var(--rule); white-space: nowrap; }
table.glance tbody tr:last-child th, table.glance tbody tr:last-child td { border-bottom: 0; }
table.glance tbody th { font-weight: 700; }
table.glance tbody th a { display: block; padding: 6px 0; color: var(--ink); text-decoration: none; }
table.glance tbody th a:hover { text-decoration: underline; }
table.glance .egg-cell { display: flex; align-items: center; gap: 8px; }
.glance-note { font-family: var(--font-ui); font-size: 15.5px; color: var(--ink-mute); margin: 22px 0 -12px; }
@media (max-width: 700px) {
  table.glance { font-size: 14px; }
  table.glance th, table.glance td { padding: 8px 10px; }
  table.glance tbody th a { padding: 4px 0; }
  /* On a phone the last column goes: it is in each entry's item specifics. */
  table.glance.columns-5 th:nth-child(5), table.glance.columns-5 td:nth-child(5) { display: none; }
  table.glance.columns-4 th:nth-child(4), table.glance.columns-4 td:nth-child(4) { display: none; }
  table.glance thead th { white-space: normal; }
}
/* The narrowest phones: tighter cells, so the table never needs to scroll sideways. */
@media (max-width: 350px) {
  table.glance { font-size: 13.5px; }
  table.glance th, table.glance td { padding: 8px 6px; }
}

/* Egg swatch: one drawn egg, coloured by a shell class. The hexes are Broody's own egg colours. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.egg { display: inline-block; width: 15px; height: 20px; flex: none; vertical-align: -3px; overflow: visible; color: #ead8b1; filter: drop-shadow(0 0 0.4px rgba(58, 42, 26, 0.9)) drop-shadow(0 0.6px 0.6px rgba(58, 42, 26, 0.28)); }
.egg.large { width: 26px; height: 34px; }
.shell-white { color: #f7f1e3; }
.shell-cream { color: #f1e6c8; }
.shell-tinted { color: #ead8b1; }
.shell-light-brown { color: #d9b483; }
.shell-brown { color: #b3753c; }
.shell-dark-brown { color: #7a4920; }
.shell-chocolate { color: #5a3417; }
.shell-blue { color: #cfe4e7; }
.shell-green { color: #b8d3b1; }
.shell-olive { color: #8a8e4e; }
.shell-speckled-cream { color: #e8d6a7; }
.shell-speckled-brown { color: #b58a5e; }
.shell-black { color: #3a2f2a; }
.shell-unknown { color: transparent; filter: none; }

/* Breed book hub: the wait for each kind of bird, and the whole book listed by egg. */
.section-lede { font-size: clamp(19px, 1.9vw, 22px); line-height: 1.5; color: var(--ink-mute); max-width: 44em; margin: 0 0 1.2em; }
.wait-chart { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); font-family: var(--font-ui); }
.wait-chart li { margin: 0; border-bottom: 1px solid var(--rule-soft); }
.wait-chart a { display: grid; grid-template-columns: 110px minmax(0, 1fr) 96px; grid-template-areas: "name track days" "name note days"; align-items: center; column-gap: 18px; padding: 12px 0; color: var(--ink); text-decoration: none; }
.wait-chart a:hover .wait-name { text-decoration: underline; }
.wait-name { grid-area: name; font-weight: 700; font-size: 17px; }
.wait-track { grid-area: track; display: block; height: 22px; background: linear-gradient(to right, var(--rule) 60%, transparent 0) 0 50% / 9px 2px repeat-x; }
.wait-run { display: block; position: relative; width: var(--share); height: 100%; background: linear-gradient(var(--ink-soft), var(--ink-soft)) 0 50% / 100% 2px no-repeat; }
.wait-run .egg { position: absolute; right: -9px; top: -2px; width: 19px; height: 25px; }
.wait-days { grid-area: days; font-size: 22px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wait-days small { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.wait-note { grid-area: note; font-size: 14px; color: var(--ink-soft); }
@media (max-width: 560px) {
  .wait-chart a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name days" "track track" "note note"; row-gap: 4px; }
}

.egg-index-section { padding-top: clamp(36px, 5vw, 60px); padding-bottom: clamp(40px, 6vw, 72px); }
.egg-index-section > .lane > h2:first-child { margin-top: 0; }
.egg-key { font-family: var(--font-ui); font-size: 15px; color: var(--ink-soft); margin: -0.4em 0 1.4em; }
.egg-index { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; font-family: var(--font-ui); }
.egg-index h3 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-family: var(--font-read); font-size: 20px; }
.egg-index h3 a { color: var(--ink); text-decoration: none; }
.egg-index h3 a:hover { text-decoration: underline; }
.egg-index ol { list-style: none; margin: 0; padding: 0; }
.egg-index li { margin: 0; }
.egg-index li a { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.35; }
.egg-index li a:hover span { text-decoration: underline; }
.egg-index li .egg { margin-top: 0; }
@media (max-width: 1060px) { .egg-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .egg-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }

/* One breed, laid out like a listing. */
.lot { display: grid; grid-template-columns: minmax(0, clamp(230px, 33vw, 380px)) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; padding: clamp(28px, 5vw, 56px) 0; border-top: 1px solid var(--rule); position: relative; }
.lot:first-of-type { border-top: 0; }
/* Between one lot and the next: the four shells of the wordmark, sitting on the rule. */
.lot + .lot::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 76px; height: 13px; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 4.5px 6.5px at 14px 50%, var(--shell-terracotta) 97%, transparent) ,
    radial-gradient(ellipse 4.5px 6.5px at 30px 50%, var(--shell-blue) 97%, transparent),
    radial-gradient(ellipse 4.5px 6.5px at 46px 50%, var(--shell-yolk) 97%, transparent),
    radial-gradient(ellipse 4.5px 6.5px at 62px 50%, var(--shell-olive) 97%, transparent),
    var(--paper);
}
.plate { margin: 0; position: sticky; top: calc(var(--header-height) + 20px); }
.plate img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--shell-cream); }
.plate figcaption { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; }
.plate-missing { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--shell-cream); }
.plate-missing .egg.large { width: 96px; height: 128px; }
.lot h2 { margin: 0 0 6px; font-size: clamp(28px, 3.8vw, 38px); display: flex; align-items: baseline; gap: 14px; }
.lot h2 .lot-no { font-family: var(--font-ui); font-size: 0.5em; font-weight: 700; color: var(--ink-soft); letter-spacing: 0; flex: none; }
.lot-hook { font-size: clamp(20px, 2vw, 23px); line-height: 1.42; color: var(--ink-mute); margin: 0 0 18px; }
.specifics { margin: 0 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0 28px; font-family: var(--font-ui); font-size: 15.5px; line-height: 1.45; border-top: 1px solid var(--rule); }
.specifics > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.specifics dt { color: var(--ink-soft); }
.specifics dd { margin: 0; font-weight: 600; }
.lot h3 { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink-mute); margin: 18px 0 4px; }
.lot h3.specifics-title { margin: 0 0 6px; }
.lot h3 + p { margin-top: 0; }
.lot-foot { font-family: var(--font-ui); font-size: 16px; font-weight: 700; margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 24px; }
.lot-foot a { color: var(--broody-green); display: inline-block; padding: 6px 0; }
.lot-foot a.back { color: var(--ink-soft); font-weight: 600; font-size: 14.5px; margin-left: auto; white-space: nowrap; }
.lot-foot .up { display: inline-block; transform: rotate(-90deg); }
.lot-sources { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); margin: 14px 0 0; }
.lot-sources a { color: inherit; }
@media (max-width: 699px) {
  .lot { grid-template-columns: 1fr; }
  .plate { position: static; max-width: 420px; }
}
@media (max-width: 520px) {
  .specifics { grid-template-columns: 1fr; }
  .specifics > div { grid-template-columns: 118px 1fr; }
}
.lot-body > p, .lot-body > h3 { max-width: 38em; }
.lot-body > p.lot-foot { max-width: none; }

.method { font-family: var(--font-ui); font-size: 16px; color: var(--ink-mute); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 22px; margin: 32px 0 0; }
.method h2 { font-family: var(--font-ui); font-size: 17px; margin: 0 0 6px; letter-spacing: 0; }
.method p:last-child { margin-bottom: 0; }

.not-found { padding-top: clamp(40px, 8vw, 96px); min-height: 52vh; }
.not-found .related { margin-top: 28px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--shell-chocolate); color: oklch(0.9 0.02 85); font-family: var(--font-ui); font-size: 15px; line-height: 1.55; margin-top: 0; }
.site-footer a { color: oklch(0.95 0.02 85); }
.site-footer-inner { max-width: var(--frame); margin: 0 auto; padding: 40px var(--gutter) 28px; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.site-footer .wordmark { --mark-ink: oklch(0.96 0.015 85); --mark-b: oklch(0.76 0.075 205); --mark-e: oklch(0.68 0.13 42); --mark-y: oklch(0.7 0.09 120); }
.site-footer .wordmark svg { height: 26px; }
.site-footer p { margin: 10px 0 0; max-width: 30em; }
.site-footer h2 { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: oklch(0.8 0.03 85); margin: 4px 0 8px; letter-spacing: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-block; padding: 5px 0; }
.site-footer-legal { max-width: var(--frame); margin: 0 auto; padding: 0 var(--gutter) 30px; font-size: 13.5px; color: oklch(0.8 0.025 85); }
.site-footer-legal p { max-width: none; margin: 0; padding-top: 16px; border-top: 1px solid oklch(0.44 0.05 45); }
@media (max-width: 760px) { .site-footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .site-footer-inner > :first-child { grid-column: 1 / -1; } }
/* Two columns need room for an email address beside the page titles; a narrow phone has none. */
@media (max-width: 420px) { .site-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ---------- Phone-only bar that follows the reader after the first screen ---------- */

.follow-bar {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 25;
  display: none; align-items: center; gap: 10px;
  background: var(--broody-green); color: var(--broody-cream);
  font-family: var(--font-ui); font-size: 14.5px; line-height: 1.3;
  padding: 6px 6px 6px 14px; border-radius: 16px;
  box-shadow: 0 12px 30px -12px oklch(0.2 0.05 140 / 0.7);
}
.follow-bar a { color: inherit; font-weight: 700; text-decoration: none; flex: 1; padding: 4px 0; }
.follow-bar a span { display: block; font-weight: 400; opacity: 0.85; font-size: 13px; }
.follow-bar button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: oklch(1 0 0 / 0.12); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 760px) and (min-height: 521px) and (pointer: coarse) { .follow-bar.is-shown { display: flex; } }

/* ---------- Touch and short screens ---------- */

/* On a finger, every control that stands on its own is at least 44px tall. Inline links get their
   height from padding, which widens the target without moving the line. */
@media (pointer: coarse) {
  .wordmark { min-height: 44px; align-items: center; }
  .site-nav a { padding-top: 11px; padding-bottom: 9px; }
  .header-cta { display: inline-flex; align-items: center; min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .species-links a { min-height: 44px; }
  .jump a { padding-top: 9px; padding-bottom: 9px; }
  .egg-index li a { padding-top: 12px; padding-bottom: 12px; }
  .egg-index h3 a { padding: 10px 0; }
  table.glance tbody th a { display: flex; align-items: center; min-height: 44px; padding: 12px 0; margin: -6px 0; }
  .lot-foot { margin-top: 12px; }
  .lot-foot a { padding: 11px 0; }
  .more a, .listing-facts a { padding: 12px 0; }
  table.compare tbody th > a { display: inline-block; padding: 11px 0 10px; }
  table.compare tbody th small { margin-top: 0; }
  table.compare tbody th small a { display: inline-block; padding: 8px 0; }
  .breadcrumbs a, .byline a { padding: 13px 0; }
  ol.source-list a { padding: 5px 0; }
  .site-footer li a { padding: 11px 0; }
}

/* A short window (a phone on its side, or a page zoomed to 200%) has no room for a pinned header. */
@media (max-height: 520px) {
  :root { --header-height: 0px; }
  .site-header { position: static; }
}

@media print {
  .site-header, .site-footer, .follow-bar, .cta-card, .header-cta { display: none !important; }
  body { background: #fff; }
  /* Printers drop backgrounds: dark bands and filled buttons go to ink on white. */
  .band.dark, .band.deep { background: none; color: var(--ink); }
  .band.dark h2, .band.dark h3, .band.dark p, .band.dark a { color: var(--ink); }
  .button, .cta-button, .band.dark .seller-strip .button { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .plate { position: static; }
}