/* Archivo, Archivo Black and Newsreader. All SIL Open Font License, self-hosted. */
@font-face{font-family:'Archivo';src:url('/fonts/archivo.woff2') format('woff2-variations');
font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212}
@font-face{font-family:'ArchivoBlack';src:url('/fonts/archivo-black.woff2') format('woff2');
font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212}
@font-face{font-family:'Newsreader';src:url('/fonts/newsreader.woff2') format('woff2-variations');
font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212}
:root{
--ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
--sign:'ArchivoBlack','Archivo Black',Impact,sans-serif;
--name:'Newsreader',Georgia,'Times New Roman',serif;
--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--paper:#FFFFFF; --tint:#FAFAF8; --sunk:#F3F4F1;
--ink:#131211; --ink2:#54524B;
/* #87857D read at 3.7:1 on white and 3.54:1 on the tint, under the 4.5:1 that WCAG AA asks for
text this size - and it carried every label, count and caption on the site, 151 elements in all.
#6E6C64 clears 5.26:1 and 5.03:1 and is barely distinguishable at a glance. */
--ink3:#6E6C64;
--rule:#E4E2DC; --rule2:#C7C4BB;
/* forest: warm enough not to read as petrol, dark enough to hold white type */
--bar:#1B3320; --barLine:#2C4A33; --barInk:#A8BCAD;
--accent:#2A6135; --accentInk:#22512C; --accentLight:#84BE8C;
--field:#24422B; --fieldLine:#325339; --fieldLineHover:#456B4D; --fieldFocus:#2A4C32;
--focusRing:rgba(132,190,140,.22); --placeholder:#8FA894; --placeholderFocus:#AFC4B3;
--gold:#8A6414; --gold-bg:#F6EFDE;
--sig:#A8431F; --sig-bg:#F7E9E2;
--pigeon-band:#536C80; --pigeon-band-dark:#3F5568; --pigeon-wash:#F2F5F7;
--pad:clamp(1rem,2.4vw,1.9rem);
--barH:58px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
font:400 15px/1.55 var(--ui);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.m{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font:400 clamp(1.95rem,3vw,2.75rem)/1.03 var(--sign);letter-spacing:-.032em;margin:0;
text-transform:uppercase}
h2{font:400 1.06rem/1.25 var(--sign);letter-spacing:-.018em;margin:0;text-transform:uppercase}
h3{font:400 1rem/1.3 var(--name);margin:0}
.sub{color:var(--ink2);font-size:14.5px}
.read{max-width:66ch}
.lbl{font:400 11px/1 var(--ui);color:var(--ink3)}
.eyebrow{font:400 10.5px/1 var(--sign);letter-spacing:.11em;text-transform:uppercase;color:var(--ink3)}
/* ---------------- top bar ---------------- */
.bar{background:var(--bar);color:#fff;position:sticky;top:0;z-index:40}
.bar .in{display:grid;grid-template-columns:236px minmax(0,1fr) auto;align-items:center;
gap:22px;padding:0 var(--pad) 0 0;min-height:var(--barH)}
.logo{display:flex;align-items:center;gap:9px;padding:0 20px;height:var(--barH);color:#fff;
text-decoration:none;font:400 18px/1 var(--sign);letter-spacing:.015em;text-transform:uppercase;
border-right:1px solid var(--barLine)}
.logo u{text-decoration:none;color:var(--accentLight)}
.logo .mark{flex:none;color:var(--accentLight);display:inline-flex}
.barsrch{position:relative;max-width:520px}
.barsrch input{width:100%;font:500 14.5px/1 var(--ui);padding:10px 12px 10px 34px;color:#fff;
background:var(--field);border:1px solid var(--fieldLine);border-radius:2px;
transition:background .12s,border-color .12s,box-shadow .12s}
.barsrch input::placeholder{color:var(--placeholder)}
.barsrch input:hover{border-color:var(--fieldLineHover)}
.barsrch input:focus{outline:0;background:var(--fieldFocus);border-color:var(--accentLight);
box-shadow:0 0 0 3px var(--focusRing)}
.barsrch input:focus::placeholder{color:var(--placeholderFocus)}
.barsrch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
color:var(--placeholder);pointer-events:none}
.barsrch:focus-within svg{color:var(--accentLight)}
.figs{display:flex;align-items:center;gap:20px;white-space:nowrap}
.figs div{display:flex;align-items:baseline;gap:6px}
.figs b{font:400 15px/1 var(--sign);letter-spacing:-.02em;color:#fff}
.figs span{font:400 12px/1;color:var(--barInk)}
/* ---------------- shell and left rail ---------------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:start}
.rail{border-right:1px solid var(--rule);background:var(--tint);
position:sticky;top:var(--barH);height:calc(100vh - var(--barH));overflow-y:auto;padding-bottom:2rem}
.rail nav{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--rule)}
.rail nav a{padding:8px 20px;color:var(--ink2);text-decoration:none;font:600 13.5px/1 var(--ui)}
.rail nav a:hover{color:var(--ink);background:#EFEEEA}
.rail nav a[aria-current="page"]{color:var(--ink);background:#EFEEEA;
box-shadow:inset 3px 0 0 var(--accent)}
.rail .top{display:flex;align-items:baseline;justify-content:space-between;padding:16px 20px 4px}
.rail .top b{font:400 11px/1 var(--sign);letter-spacing:.11em;text-transform:uppercase;color:var(--ink3)}
#clear{font:500 12px/1 var(--ui);color:var(--accent);background:none;border:0;cursor:pointer;padding:.2rem}
#clear:hover{text-decoration:underline}
.grp > b{display:block;padding:14px 20px 6px;font:400 10.5px/1 var(--sign);letter-spacing:.11em;
text-transform:uppercase;color:var(--ink3)}
.grp .items{padding:0 20px 6px}
.ck{display:flex;align-items:center;gap:9px;width:100%;padding:4px 0;background:none;border:0;
font:400 13px/1.35 var(--ui);color:var(--ink2);cursor:pointer;text-align:left}
.ck:hover{color:var(--ink)}
.ck .bx{width:13px;height:13px;flex:none;border:1px solid var(--rule2);background:#fff}
.ck[aria-pressed="true"] .bx{background:var(--accent);border-color:var(--accent);
box-shadow:inset 0 0 0 2px #fff}
.ck[aria-pressed="true"]{color:var(--ink);font-weight:600}
.ck .ct{margin-left:auto;font:400 11.5px/1 var(--ui);color:var(--ink3)}
.dt{width:9px;height:9px;border-radius:50%;background:var(--c);display:inline-block;flex:none;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.dt2{width:11px;height:11px;border-radius:50%;background:var(--c);display:inline-block;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.egg-colours{position:relative;display:inline-flex;align-items:center;gap:.35rem;min-width:0}
.egg-swatches{display:inline-flex;gap:2px;flex:none}
.egg-swatches .dt{width:9px;height:9px}
.egg-summary{white-space:nowrap}
.egg-full{display:none}
.egg-tip{position:absolute;left:0;bottom:calc(100% + 7px);z-index:8;width:max-content;
max-width:240px;padding:.45rem .55rem;background:var(--bar);color:#fff;
font:500 11.5px/1.35 var(--ui);box-shadow:0 3px 12px rgba(0,0,0,.18);opacity:0;
visibility:hidden;transform:translateY(3px);transition:opacity .12s,transform .12s,visibility .12s}
.egg-colours:hover .egg-tip,.res:focus-visible .egg-tip{opacity:1;visibility:visible;transform:none}
/* ---------------- main column ---------------- */
.main{min-width:0}
.page{padding:1.6rem var(--pad) 4rem;max-width:1180px}
.page.narrow{max-width:80ch}
/* hero: the photograph sits behind the words. The scrim is structural, not decorative - white
type over an unknown photograph is illegible without it. */
.head{position:relative;padding:4.4rem var(--pad) 3.8rem;min-height:400px;
border-bottom:1px solid var(--ink);background:var(--bar);overflow:hidden;isolation:isolate;
display:flex;align-items:center}
.head .bg{position:absolute;inset:0;z-index:-2}
/* The incoming photograph fades in on top of the outgoing one rather than the two cross-fading.
Cross-fading meant both sat near half opacity in the middle of the transition and the dark panel
showed through, so every change dipped in brightness before recovering. Layering removes the dip,
and a long ease-in-out over three and a half seconds makes the change something you notice only
if you are looking at it. */
.head .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;z-index:0;transition:opacity 3.4s cubic-bezier(.37,0,.63,1)}
.head .bg img.prev{opacity:1;z-index:1;transition:none}
.head .bg img.on{opacity:1;z-index:2}
/* every bird's head sits at a different height and the band is far wider than the pictures are,
so a single blanket crop beheads most of them. Measured off each photograph. */
/* Each frame also slides right until its bird clears the dot screen, which thins out between 34% and
56% of the band: the owner's verdict was that the dots covered the chickens. The strip a slide
uncovers on the left sits under the solid part of the screen, so it never shows. Measured at
1440px against each bird's head and body. */
.head .bg img[src$="/hero2.jpg"]{object-position:50% 42%;transform:translateX(20%)}
.head .bg img[src$="/hero3.jpg"]{object-position:50% 66%;transform:translateX(6%) scaleX(-1)}
.head .bg img[src$="/hero4.jpg"]{object-position:50% 40%;transform:translateX(22%)}
.head .bg img[src$="/hero5.jpg"]{object-position:50% 26%;transform:translateX(14%)}
/* The scrim is a halftone screen rather than a flat gradient: dots that overlap into solid ink under
the words and thin out across the photograph. It is the HumanityZ studio's dot language, drawn
here in this site's own forest-black and doing a job, which is keeping white type legible.
/hero-screen.svg is generated by build-site.mjs. A light wash underneath holds contrast on
bright photographs. On a phone the words span the band, so the screen gives way to a plain scrim. */
.head::after{content:'';position:absolute;inset:0;z-index:-1;
background:url('/hero-screen.svg') left top/100% auto repeat-y,
linear-gradient(100deg,rgba(10,16,11,.62) 0%,rgba(10,16,11,.42) 38%,rgba(10,16,11,0) 64%)}
.head .inner{position:relative;max-width:640px}
.head h1{color:#fff;max-width:15ch}
.head .sub{color:#CFD6CD;font-size:16px;margin-top:.85rem;max-width:52ch}
.headfigs{display:flex;gap:22px;margin-top:1.6rem;flex-wrap:wrap}
.headfigs div{display:flex;align-items:baseline;gap:7px}
.headfigs b{font:400 21px/1 var(--sign);letter-spacing:-.025em;color:#fff}
.headfigs span{font:400 13px/1;color:#A6B3A7}
/* the inner pages have no photograph */
.phead{padding:1.9rem var(--pad) 1.2rem;border-bottom:1px solid var(--ink)}
.phead h1{max-width:22ch}
.phead .sub{margin-top:.6rem;max-width:62ch}
/* ---------------- the index ---------------- */
.rbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.55rem var(--pad);border-bottom:1px solid var(--rule2);background:var(--tint);
position:sticky;top:var(--barH);z-index:20}
.rbar .n{font:400 12.5px/1 var(--ui);color:var(--ink2)}
.rbar .n b{color:var(--ink);font-weight:600}
.sortwrap{display:flex;align-items:center;gap:.5rem}
.sortwrap label{font:400 12.5px/1 var(--ui);color:var(--ink3)}
select.sort{font:600 12.5px/1 var(--ui);color:var(--ink);background:none;border:0;
border-bottom:1px solid var(--rule2);border-radius:0;padding:.3rem 1.3rem .28rem .1rem;
cursor:pointer;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right .1rem center}
select.sort:hover,select.sort:focus{border-bottom-color:var(--accent);outline:0}
.hdr{display:grid;grid-template-columns:40px 60px minmax(0,1fr) 76px 92px 124px;gap:0 16px;
padding:7px var(--pad);border-bottom:1px solid var(--rule2);background:var(--tint);
font:400 10px/1 var(--sign);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.hdr .r{text-align:right}
.list{display:block}
.res{display:grid;grid-template-columns:40px 60px minmax(0,1fr) 76px 92px 124px;gap:0 16px;
align-items:center;padding:11px var(--pad);border-bottom:1px solid var(--rule);
text-decoration:none;color:inherit}
.res:hover{background:var(--sunk)}
/* The row number was #B0ACA3, 2.26:1 - decorative-looking but still text someone has to read.
It stays subordinate through size and position rather than by being washed out. */
.res .no{font:400 11px/1 var(--ui);color:var(--ink3)}
.thumb{position:relative;width:60px;height:60px;overflow:hidden;background:var(--sunk);border:1px solid var(--rule);
display:flex;align-items:center;justify-content:center;flex:none}
.thumb img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.photo-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;padding:4px;text-align:center;color:var(--ink3);background:var(--sunk)}
.photo-fallback .egg{display:flex;align-items:center;justify-content:center;width:58%;aspect-ratio:4/5;
border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;background:var(--egg,#E6DFD2);
box-shadow:inset -3px -4px 0 rgba(0,0,0,.06)}
.photo-fallback b{font:400 17px/1 var(--name);color:rgba(19,18,17,.55)}
.photo-fallback .egg.dark b{color:rgba(255,255,255,.82)}
.is-missing img{display:none}
.res .bd{min-width:0}
.res .nm{display:block;font:400 19px/1.2 var(--name);letter-spacing:-.008em}
.res .mt{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin-top:3px;
font:400 12.5px/1.4 var(--ui);color:var(--ink2)}
.res .mt > span{white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.res .mt s{text-decoration:none;color:var(--rule2)}
.res .who{display:none}
.res .min{font:600 12.5px/1 var(--ui);color:var(--ink2)}
.res .pr{text-align:right}
.res .pr b{font:400 19px/1 var(--sign);letter-spacing:-.028em;color:var(--accentInk);display:block}
.res .pr i{font-style:normal;font:400 10.5px/1 var(--ui);color:var(--ink3);display:block;margin-top:4px}
.res .rg{text-align:right}
.avw{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.avw span{font:400 11px/1 var(--ui);color:var(--ink2)}
.avw span.out{color:var(--sig)}
.apa{font:400 11px/1 var(--sign);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.apa.hy{color:var(--ink3)}
.mn{font:600 11px/1 var(--mono);color:var(--gold);white-space:nowrap}
.policy{font:500 12px/1.4 var(--ui);color:var(--gold);white-space:normal}
.res .nm .apa,.res .nm .mn{margin-left:.35rem}
.av{display:inline-flex;gap:3px;color:var(--accent)}
.av i{width:7px;height:16px;border:1.5px solid currentColor;opacity:.3;display:block}
.av i.on{background:currentColor;opacity:1}
.av i.unk{border-style:dashed;opacity:.42}
.empty{padding:3rem var(--pad);color:var(--ink2)}
.miss{padding:2rem var(--pad);color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:.5rem var(--pad);border-bottom:1px solid var(--rule)}
.chip-item{display:inline-flex;align-items:center;gap:.35rem;font:500 12px/1 var(--ui);
padding:.32rem .5rem;border:1px solid var(--rule2);background:var(--tint);cursor:pointer}
.chip-item:hover{border-color:var(--accent);color:var(--accent)}
.chip-clear{font:500 12px/1 var(--ui);color:var(--accent);background:none;border:0;cursor:pointer}
/* ---------------- hatch calendar ---------------- */
.cal{position:relative;padding:1rem var(--pad);border-bottom:1px solid var(--rule)}
.cal .hdr{display:block;padding:0 0 .6rem;border:0;background:none}
.date-strip{position:relative;overflow:hidden}
.days{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;min-width:92px;padding:.15rem 0 .15rem .7rem;margin-right:.7rem;
border-left:1px solid var(--rule2);text-align:left;scroll-snap-align:start}
.day.first{border-left-color:var(--accent)}
.day .d{font:600 14px/1 var(--ui);display:block}
.day.first .d{color:var(--accentInk)}
.day .n{font:400 11.5px/1 var(--ui);color:var(--ink3);display:block;margin-top:.35rem}
.date-cue{display:none}
/* ---------------- breed page ---------------- */
.breed-page{padding-top:.9rem}
.breed-page .crumb,.breed-page .hero,.guide-page .crumb,.hatchery-page .crumb{padding-left:0;padding-right:0}
.breed-page .card{border-top:1px solid var(--ink)}
.breed-page .card>h2,.breed-page .card .pad{padding-left:0;padding-right:0}
.breed-page .xs{overflow-x:auto}
.crumb{font:400 12.5px/1 var(--ui);color:var(--ink3);padding:.9rem var(--pad) 0}
.crumb a{color:var(--ink3);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.hero{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.6rem;align-items:start;
padding:1.2rem var(--pad) 1.5rem;border-bottom:1px solid var(--rule)}
.hero .pic{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:var(--sunk);border:1px solid var(--rule)}
.hero .pic img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.hero .pic .photo-fallback .egg{width:46%}
/* a photograph that failed to load takes its credit with it */
.pic.is-missing + .credit{display:none}
.hero .pic .photo-fallback b{font-size:44px}
.credit{font:400 11px/1.35 var(--ui);color:var(--ink3);margin-top:.45rem;max-width:240px}
.credit a{color:inherit;text-underline-offset:2px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;margin-top:1.1rem;
border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2)}
.kpi{padding:.8rem .9rem;border-right:1px solid var(--rule)}
.kpi:last-child{border-right:0}
.kpi b{font:400 19px/1 var(--sign);letter-spacing:-.025em;display:block}
.kpi.hot b{color:var(--gold)}
.kpi span{font:400 11.5px/1.3 var(--ui);color:var(--ink3);display:block;margin-top:.3rem}
/* The three cross-hatchery comparisons, sitting under the hatch dates on the home page. It reuses
the KPI rule strip rather than opening another headed card, because the page already opens two
sections that way and a third would read as a template. */
.cmp{padding:0 var(--pad)}
.cmp .kpis{margin-top:0}
.cmp .kpi{padding:0}
.cmp .kpi a{display:block;padding:.8rem .9rem;text-decoration:none;color:inherit}
.cmp .kpi a:hover b,.cmp .kpi a:focus-visible b{color:var(--accent)}
.cmp .kpi a:hover{background:var(--tint)}
/* The buying guides, as one ruled line of links under the comparisons: a way in, not a feature. */
.guidebar{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.4rem;margin:0 var(--pad);
padding:.75rem 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.guidebar a{color:var(--accentInk);text-decoration:none}
.guidebar a:hover{text-decoration:underline;text-underline-offset:3px}
.guidebar .guidebar-all{font:400 10.5px/1 var(--sign);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.card{border:0;border-top:1px solid var(--ink);background:none;margin:0}
.card > h2{padding:1.1rem var(--pad) .5rem}
.card .pad{padding:0 var(--pad) 1.4rem}
.xs{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14.5px}
table.t th{text-align:left;font:400 10px/1 var(--sign);letter-spacing:.1em;text-transform:uppercase;
color:var(--ink3);padding:.5rem .9rem .5rem 0;border-bottom:1px solid var(--rule2)}
table.t td{padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--rule);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tr.off td{color:var(--ink3)}
table.t td.n{font-family:var(--mono);font-weight:600;letter-spacing:-.03em;white-space:nowrap}
table.t a{color:var(--accentInk);text-decoration:none;font-weight:600}
table.t a:hover{text-decoration:underline}
.traits{max-width:760px;margin:0}
.trait{display:grid;grid-template-columns:128px minmax(0,1fr);gap:1rem;padding:.72rem 0;
border-bottom:1px solid var(--rule)}
.trait dt{font:600 12px/1.45 var(--ui);color:var(--ink3)}
.trait dd{margin:0;font:400 14.5px/1.45 var(--ui);color:var(--ink)}
.trait-note{max-width:760px;margin-top:.9rem}
.related-section{margin-top:1.75rem}
.related-section>h2{margin-bottom:.7rem}
.res.related{grid-template-columns:60px minmax(0,1fr) minmax(190px,230px);gap:14px;
min-height:96px;padding-left:0;padding-right:0}
.res.related .no,.res.related .min{display:none}
.res.related .pr{grid-column:3;grid-row:1;align-self:start;text-align:right}
.res.related .rg{grid-column:3;grid-row:1;align-self:end;text-align:right}
.ok{color:var(--accentInk);font-weight:600}
.out,.off{color:var(--sig)}
.ships{font:400 12.5px/1 var(--ui);color:var(--ink2)}
.pill{display:inline-block;font:600 13px/1 var(--ui);color:#fff;background:var(--accent);
padding:.62rem .9rem;text-decoration:none}
.pill:hover{background:var(--accentInk)}
/* ---------------- hatcheries ---------------- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;
align-items:start;border-top:1px solid var(--ink)}
.vcard{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
padding:1.1rem var(--pad) 1.3rem}
.vn{font:400 1.05rem/1.2 var(--sign);text-transform:uppercase;letter-spacing:-.015em}
.loc{font:400 12.5px/1 var(--ui);color:var(--ink3);margin-top:.35rem}
.npip{display:inline-flex;align-items:center;gap:.3rem;font:600 11px/1 var(--ui);
color:var(--accentInk);margin-left:.5rem}
.npip.unconf{color:var(--ink3)}
.vrow{display:grid;grid-template-columns:96px 1fr;gap:.5rem .8rem;padding:.5rem 0;
border-top:1px solid var(--rule);font-size:13.5px}
.vrow b{font:600 11.5px/1.4 var(--ui);color:var(--ink3)}
.srcline{font:400 12px/1 var(--ui);color:var(--ink3);margin-top:.8rem}
.srcline a{color:var(--accentInk)}
/* ---------------- trends ----------------
Ranked rows, not an SVG bar chart. The first attempt drew labels and bars into one
SVG coordinate space, so long breed names ran underneath their own bars and the
value at the bar tip fell off the right edge. Here the name, the track and the value
are three grid columns: they physically cannot overlap, the name ellipsises instead
of colliding, and the text is real text at the page's own font size. */
.tstat{padding:.9rem .9rem 1rem;border-right:1px solid var(--rule)}
.tstat:last-child{border-right:0}
.tstat > span{font:400 11.5px/1.3 var(--ui);color:var(--ink3);display:block}
.tstat b{font:400 30px/1 var(--sign);letter-spacing:-.03em;display:block;margin-top:.45rem}
.tstat .dl{font:600 12px/1 var(--ui);color:var(--ink3);display:block;margin-top:.5rem}
.tstat .dl.up{color:var(--accentInk)}
.tstat .dl.dn{color:var(--sig)}
.spark{display:block;margin-top:.7rem;width:100%;height:34px;overflow:visible}
/* the name column is capped rather than 1fr: at 1fr it eats the whole row and strands the bar
against the right margin, too far from its own label to read as one thing */
.trow{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) 3rem;
gap:1rem;align-items:center;padding:.52rem 0;border-bottom:1px solid var(--rule);
max-width:44rem}
.trow:last-child{border-bottom:0}
.trow .nm{font:400 14.5px/1.3 var(--ui);color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .nm a{color:var(--ink);text-decoration:none}
.trow .nm a:hover{color:var(--accentInk);text-decoration:underline}
/* the track is a lighter step of the surface, the fill the one accent - single series,
one colour for every row; length is the only thing carrying the value */
.trow .tk{height:9px;background:var(--sunk);position:relative}
.trow .tk i{display:block;height:9px;background:var(--accent);
border-radius:0 2px 2px 0;min-width:2px}
.trow .vl{font:600 13px/1 var(--mono);letter-spacing:-.03em;color:var(--ink2);
text-align:right;font-variant-numeric:tabular-nums}
.tnote{font:400 13.5px/1.5 var(--ui);color:var(--ink3);margin-top:.2rem;max-width:60ch}
.tsole{margin-top:.35rem;font:400 14px/1.75 var(--ui);color:var(--ink2)}
.tsole a{color:var(--accentInk);text-decoration:none}
.tsole a:hover{text-decoration:underline}
@media(max-width:560px){
.trow{grid-template-columns:minmax(0,1fr) 5rem 2.6rem;gap:.6rem}
.tstat{border-right:0;border-bottom:1px solid var(--rule)}
.tstat:last-child{border-bottom:0}
}
/* ---------------- box builder ---------------- */
.boxwrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.6rem;align-items:start}
.qbox{position:relative;margin:0 0 1rem}
.qbox svg{position:absolute;left:.1rem;top:50%;transform:translateY(-50%);color:var(--ink3)}
.qbox input{width:100%;padding:.75rem 1rem .7rem 1.75rem;font:500 16px/1.2 var(--ui);color:var(--ink);
background:none;border:0;border-bottom:1.5px solid var(--rule2);border-radius:0}
.qbox input:focus{outline:0;border-bottom-color:var(--accent);box-shadow:0 1px 0 0 var(--accent)}
.sugg{border:1px solid var(--rule);background:#fff;max-height:260px;overflow-y:auto}
.sugg button{display:flex;width:100%;gap:.6rem;align-items:center;padding:.5rem .7rem;background:none;
border:0;border-bottom:1px solid var(--rule);font:400 14px/1.3 var(--ui);cursor:pointer;text-align:left}
.sugg button:hover{background:var(--sunk)}
.picked{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.box-empty{width:100%;display:grid;gap:.45rem;padding:1rem 0 1.25rem;border-top:1px solid var(--rule)}
.box-empty strong{font:400 17px/1.2 var(--name)}
.box-empty span{max-width:48ch;color:var(--ink2);font-size:13.5px}
.box-empty .pill{justify-self:start;margin-top:.25rem}
.empty-state{text-align:center;padding:2.4rem var(--pad)!important;margin:.5rem 0!important}
.empty-state h3{font:400 20px/1.2 var(--name);color:var(--ink)}
.empty-state .sub{margin:.35rem auto 1rem;max-width:42ch}
.empty-state .pill{border:0;cursor:pointer;margin-right:.7rem}
.empty-state > a{font:600 13px/1 var(--ui);color:var(--accentInk)}
.menu,.fbtn,.ck,.qbox input,.sugg button,.pk button,.pill{min-height:44px}
.pk{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--rule2);
padding:.35rem .55rem;font:500 13px/1 var(--ui)}
.pk button{background:none;border:0;cursor:pointer;color:var(--ink3);font-size:15px;line-height:1}
.slot{border-top:1px solid var(--rule);padding:.75rem 0}
.hint{font-size:13.5px;color:var(--ink2);border-left:2px solid var(--rule2);padding-left:.75rem}
.nd{font:600 13px/1 var(--ui);color:var(--accentInk)}
.y{color:var(--accentInk);font-weight:600}
/* Ship dates are a run of small figures, not prose; they need air between them or they read as
one long number. */
.ships{display:flex;flex-wrap:wrap;gap:.3rem .45rem;margin-top:.3rem}
.ships .sp{font:600 12px/1 var(--mono);color:var(--ink2);border:1px solid var(--rule);
padding:.28rem .42rem;white-space:nowrap}
.ships .sp.a{color:var(--accentInk);border-color:var(--accent)}
/* In stock / sold out is a fact in a table, not something you press. It was sharing the
call-to-action pill and inheriting a dark green on a dark green fill. */
.stat{font:600 12px/1 var(--ui);white-space:nowrap}
.stat.y{color:var(--accentInk)}
.stat.n{color:var(--sig)}
.stat.u{color:#7b642d}
.unknown-stock{display:block;margin-top:.35rem;color:var(--ink3);font:500 12px/1.45 var(--ui)}
/* ---------------- pigeons ----------------
Racing and fancy listings keep the ruled catalogue grammar. Slate blue is reserved for band
identity and source actions so the vertical is distinct without turning into a second site. */
.pigeon-page{padding:1.5rem var(--pad) 3.5rem;max-width:1480px}
.pigeon-preview-flag{margin:-1.5rem calc(var(--pad) * -1) 1.2rem;padding:.55rem var(--pad);
background:#FFF5D8;border-bottom:1px solid #D7B969;color:#59491f;font:700 12px/1.3 var(--ui)}
.pigeon-intro{display:grid;grid-template-columns:minmax(0,720px) auto;justify-content:space-between;
align-items:end;gap:2rem;margin:1.4rem 0 1.8rem}
.pigeon-intro h1,.pigeon-detail h1{font:400 clamp(2rem,4vw,3.6rem)/.98 var(--sign);
letter-spacing:-.04em;text-transform:uppercase;max-width:16ch}
.pigeon-intro .sub{max-width:64ch;margin-top:.75rem;color:var(--ink2)}
.pigeon-count{text-align:right;border-left:3px solid var(--pigeon-band);padding:.25rem 0 .25rem 1rem}
.pigeon-count b{display:block;font:400 2rem/1 var(--sign);color:var(--pigeon-band-dark)}
.pigeon-count span{display:block;color:var(--ink3);font-size:12px;margin-top:.25rem}
.pigeon-filters{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(125px,.65fr));
gap:10px;padding:12px 0;border-top:1px solid var(--ink);align-items:end}
.pigeon-filters label{display:flex;min-width:0;flex-direction:column;gap:.3rem}
.pigeon-filters label>span{font:400 9.5px/1 var(--sign);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.pigeon-filters input,.pigeon-filters select{width:100%;height:44px;border:1px solid var(--rule2);border-radius:0;
background:#fff;color:var(--ink);padding:0 .65rem;font:500 13px/1 var(--ui)}
.pigeon-filters input:focus,.pigeon-filters select:focus{outline:2px solid var(--focusRing);border-color:var(--pigeon-band)}
.pigeon-filters button{height:44px;border:1px solid var(--pigeon-band);background:none;color:var(--pigeon-band-dark);
font:700 12px/1 var(--ui);cursor:pointer}.pigeon-filters button:hover{background:var(--pigeon-wash)}
.pigeon-filters output{align-self:center;color:var(--ink3);font:600 12px/1 var(--ui);white-space:nowrap}
.pigeon-list{border-top:1px solid var(--ink)}
.pigeon-row{display:grid;grid-template-columns:112px 74px minmax(250px,1.45fr) minmax(180px,.8fr)
minmax(160px,.72fr) minmax(155px,.6fr);gap:16px;align-items:center;min-height:104px;
padding:12px 0;border-bottom:1px solid var(--rule)}
.pband{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:.75rem;
color:#fff;background:var(--pigeon-band);min-width:0}
.pband b{font:700 13px/1.25 var(--mono);overflow-wrap:anywhere}
.pband span{font:600 9px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;opacity:.78;margin-top:.4rem}
.pigeon-photo{position:relative;width:74px;height:74px;background:var(--pigeon-wash);overflow:hidden;
border:1px solid var(--rule)}
.pigeon-photo>span{position:absolute;inset:0;display:grid;place-items:center;color:var(--pigeon-band);
font:400 30px/1 var(--sign)}
.pigeon-photo img{position:relative;width:100%;height:100%;object-fit:cover;background:var(--pigeon-wash)}
.pigeon-photo.is-missing{background:linear-gradient(135deg,var(--pigeon-wash),#E6ECEF)}
.pigeon-identity,.pigeon-seller,.pigeon-commerce,.pigeon-checked{min-width:0;display:flex;flex-direction:column;gap:.25rem}
.pigeon-name{font:500 20px/1.12 var(--name);text-decoration:none;color:var(--ink)}
.pigeon-name:hover,.pigeon-seller a:hover{text-decoration:underline}
.pigeon-identity>span,.pigeon-seller>span,.pigeon-commerce>span,.pigeon-checked{
color:var(--ink3);font:500 11.5px/1.4 var(--ui)}
.pigeon-seller a{color:var(--pigeon-band-dark);font-weight:700;text-decoration:none}
.pigeon-commerce strong{font:400 20px/1 var(--sign);color:var(--accentInk)}
.pigeon-status{font-weight:700!important}.pigeon-status.sold{color:var(--sig)}
.pigeon-status.in_stock{color:var(--accentInk)}.pigeon-status.unknown{color:var(--gold)}
.pigeon-checked span{font:700 9px/1 var(--ui);text-transform:uppercase;letter-spacing:.08em}
.pigeon-checked time{font-family:var(--mono);font-size:11px}
.pigeon-new{color:var(--pigeon-band-dark)!important;font-weight:700!important}
.pigeon-empty{padding:2rem 0}.pigeon-empty p{color:var(--ink2);margin-top:.35rem}
.pigeon-detail{max-width:1040px}.pigeon-detail-head{display:grid;grid-template-columns:140px 1fr;
gap:1.25rem;align-items:stretch;margin:1.4rem 0 1.8rem}.pigeon-detail-head .pband{min-height:110px}
.pigeon-detail .sub{margin-top:.45rem;color:var(--ink2)}
.pigeon-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 1.5rem;
border-top:1px solid var(--ink)}
.pigeon-facts>div{display:grid;grid-template-columns:145px 1fr;gap:1rem;padding:.8rem 0;
border-bottom:1px solid var(--rule)}
.pigeon-facts>div:nth-child(odd){padding-right:1.5rem}.pigeon-facts>div:nth-child(even){padding-left:1.5rem}
.pigeon-facts dt{font:700 11px/1.4 var(--ui);color:var(--ink3)}
.pigeon-facts dd{margin:0;font:500 14px/1.4 var(--ui)}
.pigeon-source{display:inline-flex;min-height:44px;align-items:center;padding:.7rem 1rem;
background:var(--pigeon-band);color:#fff;text-decoration:none;font-weight:700}
.pigeon-source:hover{background:var(--pigeon-band-dark)}
.pigeon-detail>.hint{margin-top:1rem}.pigeon-detail>.pigeon-list{margin-top:1.8rem}
/* ---------------- freshness ----------------
Stock is read four times a day, not streamed. Saying so is worth more than implying otherwise:
someone deciding whether to trust a price needs to know its age, and someone who found a bird
sold out needs to know when looking again is worthwhile. */
.fresh{font:400 11.5px/1 var(--ui);color:var(--barInk);white-space:nowrap}
.fresh.inbar{display:flex;align-items:center;align-self:stretch;padding-left:20px;
border-left:1px solid var(--barLine)}
.fresh.infoot{display:block;margin-top:.5rem;color:var(--ink3);font-size:12px}
.live-status{position:fixed;right:14px;bottom:14px;z-index:12;max-width:360px;margin:0;
padding:10px 13px;border:1px solid #9b7b38;background:#fff9e8;color:#59491f;
box-shadow:0 8px 24px rgba(25,30,23,.14);font:600 12px/1.4 var(--ui)}
@media(max-width:1200px){.fresh.inbar{display:none}}
/* ---------------- advertising ----------------
The slot reserves its full height before anything loads, so an ad arriving late never shoves the
list down under someone's thumb. Ruled off and labelled, because an index of prices that blurs
the line between a listing and an advert is worth nothing - and because AdSense requires it. */
.adslot{display:block;margin:0;padding:.7rem var(--pad) 1rem;border-bottom:1px solid var(--rule);
background:var(--tint)}
.adslot .adlabel{display:block;font:400 9.5px/1 var(--sign);letter-spacing:.14em;
text-transform:uppercase;color:var(--ink3);margin-bottom:.5rem}
.adslot > ins,.adslot .adph{display:block;min-height:var(--adh,110px)}
.adph{display:flex;align-items:center;justify-content:center;border:1px dashed var(--rule2);
color:var(--ink3);font:500 12px/1 var(--ui);background:repeating-linear-gradient(45deg,
transparent,transparent 7px,rgba(0,0,0,.02) 7px,rgba(0,0,0,.02) 14px)}
/* the rail unit is a desktop affordance; on a phone the rail is a menu, not a column */
.rail .adslot{border-bottom:0;border-top:1px solid var(--rule);background:none;
padding:.9rem 20px 1.2rem}
@media(max-width:900px){.rail .adslot{display:none}}
/* ---------------- mobile menu ---------------- */
/* The button drives the rail itself rather than a second copy of the navigation, so the two can
never fall out of step. It has no job on desktop, where the rail is always open. */
.menu{display:none;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;
color:#fff;font:600 13px/1 var(--ui);padding:0 var(--pad) 0 0;margin-left:auto}
.menu .bars{position:relative;width:17px;height:11px;flex:none}
.menu .bars::before,.menu .bars::after{content:'';position:absolute;left:0;right:0;height:1.5px;
background:currentColor;transition:transform .18s ease,top .18s ease}
.menu .bars::before{top:0}
.menu .bars::after{top:9.5px}
.menu[aria-expanded="true"] .bars::before{top:5px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .bars::after{top:5px;transform:rotate(-45deg)}
.ft{border-top:1px solid var(--ink);padding:1.6rem var(--pad) 3rem;color:var(--ink2);font-size:13px}
.ft a{color:var(--accentInk)}
/* The studio credit. The four dots are HumanityZ's process inks, not this site's palette. */
.ft .studio{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.ft .studio a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink2);text-decoration:none}
.ft .studio a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.ft .dots{display:inline-block;width:17px;height:17px;margin-left:9px;background:
radial-gradient(circle at 26% 26%,#00a3ce 0 20%,transparent 22%),
radial-gradient(circle at 74% 26%,#da437d 0 20%,transparent 22%),
radial-gradient(circle at 26% 74%,#dbb328 0 20%,transparent 22%),
radial-gradient(circle at 74% 74%,#3b4841 0 20%,transparent 22%)}
@keyframes pulse{0%,100%{background-color:var(--sunk)}50%{background-color:var(--rule)}}
/* ---------------- guides ----------------
Long-form pages in the same ruled grammar as the index: a Newsreader lede, Archivo for reading,
tables for figures, and lists as hairline rows rather than cards.
The one device here is the egg-ink rule. HumanityZ opens each chapter with a bar of process ink;
this site's process inks are eggshell colours, so a breed guide opens with a rule in the colour
of the egg that breed lays, and the egg-colour guide opens each colour the same way. It is
only used where the colour is the fact being stated. */
.guide-page{max-width:1080px}
.guide-head{margin-top:.9rem}
.guide-kicker{display:flex;align-items:center;gap:.6rem;font:400 10.5px/1 var(--sign);
letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.guide-head h1{margin-top:.6rem}
.guide-lede{font:400 clamp(1.08rem,1.5vw,1.28rem)/1.5 var(--name);color:var(--ink);max-width:60ch;margin-top:.85rem}
.guide-byline{margin-top:.9rem;font:600 13px/1.4 var(--ui);color:var(--ink)}
.guide-byline span{display:block;font-weight:400;color:var(--ink2);max-width:60ch;margin-top:.15rem}
.guide-summary{font:500 15px/1.6 var(--ui);max-width:74ch;padding:1.1rem 0 1.7rem}
.guide-body{max-width:none}
.guide-body h2{margin:2.4rem 0 .2rem}
.guide-body > p,.guide-body .hint{max-width:68ch}
.guide-body > p{font-size:16px;line-height:1.7;margin-top:.75rem}
.guide-body .xs{margin-top:1.1rem;max-width:900px}
.guide-body .hint{margin-top:.6rem}
.guide-body a,.guide-summary a{color:var(--accentInk)}
.egg-chapter{padding-top:.75rem;border-top:4px solid var(--egg,var(--ink))}
.egg-chapter .egg-swatches{display:none}
.guide-list{margin:.9rem 0 0;padding:0;list-style:none;max-width:68ch;border-top:1px solid var(--rule)}
.guide-list li{padding:.75rem 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.6}
.guide-links{list-style:none;margin:.9rem 0 0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(290px,1fr));column-gap:2.2rem}
.guide-links li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
padding:.62rem 0;border-bottom:1px solid var(--rule)}
.guide-links a{font:400 17px/1.3 var(--name);color:var(--ink);text-decoration:none;
display:inline-flex;align-items:center;gap:.5rem}
.guide-links a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.guide-links li > span{font:400 12px/1.3 var(--ui);color:var(--ink3);white-space:nowrap}
.topic-list{list-style:none;margin:.9rem 0 0;padding:0;border-top:1px solid var(--ink)}
.topic-list a{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:1.6rem;align-items:baseline;
padding:1.05rem 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.topic-list strong{font:400 1.02rem/1.3 var(--sign);text-transform:uppercase;letter-spacing:-.01em}
.topic-list span{color:var(--ink2);font-size:14.5px;line-height:1.55;max-width:64ch}
.topic-list a:hover strong{color:var(--accent)}
.guide-topics,.guide-species{margin-top:2.6rem}
.guide-related{margin-top:2.6rem}
.guide-stamp{margin-top:2.6rem;font-size:13px;color:var(--ink3)}
.guide-more{margin-top:1.2rem;font-size:13.5px;color:var(--ink2)}
.guide-more a{color:var(--accentInk)}
.guide-table .tag{font:400 9.5px/1 var(--sign);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-left:.35rem}
.guide-table td a{text-decoration:none}
/* in the horizontal scroller on a phone, text columns keep enough width to stay on a line or two */
.shortlist-table td:nth-child(3){min-width:8.5rem}
.shortlist-table td:nth-child(4){min-width:8rem}
.shortlist-table td:nth-child(5){min-width:13rem}
.shortlist-table td:nth-child(7){min-width:7rem}
.guide-table td a:hover{text-decoration:underline;text-underline-offset:3px}
.breed-note{font:400 1.06rem/1.55 var(--name);max-width:64ch;margin-bottom:.75rem;color:var(--ink)}
.trait-note a{color:var(--accentInk)}
/* ---------------- track record ----------------
One mark per daily reading. Filled forest when the bird could be ordered, an empty outline when
it could not: the two states differ in shape, not only colour. A long stretch with no readings is
drawn as a gap. */
.record-line{font-size:15px;line-height:1.6;max-width:74ch}
.rwrap{margin-top:1rem;min-width:120px}
.rstrip{display:flex;align-items:stretch;gap:2px;height:26px}
.rstrip i{flex:1 1 0;min-width:2px;border-radius:2px 2px 0 0}
.rstrip i.on{background:var(--accent)}
.rstrip i.off{background:transparent;box-shadow:inset 0 0 0 1px var(--rule2)}
.rstrip.bars{height:64px}
.rstrip i.bar{background:var(--tint);box-shadow:inset 0 0 0 1px var(--rule);position:relative;overflow:hidden}
.rstrip i.bar b{position:absolute;left:0;right:0;bottom:0;background:var(--accent)}
.rstrip i:hover{outline:2px solid var(--ink);outline-offset:1px}
.rgap{flex:1 1 0;min-width:10px;border-bottom:1px dotted var(--ink3);margin-bottom:12px}
.rstrip-axis{display:flex;justify-content:space-between;margin-top:.35rem;
font:400 11px/1 var(--ui);color:var(--ink3)}
.record-table{margin-top:1rem}
.record-table summary{cursor:pointer;font-size:13.5px;color:var(--accentInk)}
.record-table .xs{margin-top:.6rem;max-width:520px}
.record-card .hint{margin-top:.9rem}
/* ---------------- what changed ---------------- */
.market-changes{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--ink)}
.change-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem 2.2rem;margin-top:1rem}
.change-grid h3{font:400 .95rem/1.2 var(--sign);text-transform:uppercase;letter-spacing:-.01em;display:flex;align-items:baseline;gap:.5rem}
.change-grid h3 span{font:500 12px/1 var(--ui);color:var(--ink3);letter-spacing:0}
.change-grid .guide-links{grid-template-columns:1fr;margin-top:.5rem}
.change-grid .guide-links a{font-size:15.5px}
/* ---------------- hatchery pages ---------------- */
.hatchery-loc{margin-top:.55rem;font-size:14px;color:var(--ink2);display:flex;align-items:center;gap:.6rem}
.hatchery-page .kpis{margin:.2rem 0 1.4rem}
.hatchery-policy .vrow{max-width:900px}
/* a name riding beside a figure keeps the reading face, not the figures' monospace */
.t td.n .via{display:block;font:400 12px/1.3 var(--ui);color:var(--ink3);margin-top:.15rem}
a.hlink{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule2)}
a.hlink:hover{border-bottom-color:currentColor}
.vcard h3 a{color:inherit;text-decoration:none}
.vcard h3 a:hover{text-decoration:underline;text-underline-offset:3px}
/* ---------------- a breed no hatchery lists right now ---------------- */
.retired-head{padding:1.1rem 0 1.6rem;border-bottom:1px solid var(--rule);max-width:74ch}
.retired-tag{display:inline-block;font:400 10.5px/1 var(--sign);letter-spacing:.12em;text-transform:uppercase;
color:var(--sig);border:1px solid currentColor;padding:.38rem .5rem;margin-bottom:.9rem}
.retired-head .sub{font-size:16px;line-height:1.6;margin-top:.75rem;max-width:64ch;color:var(--ink)}
.retired-head .hint{margin-top:.6rem}
.retired-more{margin-top:1.4rem;font-size:14px}
.retired-more a{color:var(--accentInk)}
/* ---------------- motion and finish ----------------
The studio's one curve for everything. Each effect runs once, explains an arrival or a change,
and comes to rest; nothing loops. prefers-reduced-motion (at the end of this sheet) gets the
finished state at once. */
:root{--ease:cubic-bezier(.22,1,.36,1)}
::selection{background:rgba(132,190,140,.38)}
html{scroll-padding-top:calc(var(--barH) + 16px)}
/* Page to page: the bar and the rail stay put, the content crossfades, and a listing's photograph
and name carry across into the breed page they open. */
@view-transition{navigation:auto}
.bar{view-transition-name:bar}
.rail{view-transition-name:rail}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:var(--ease)}
::view-transition-group(breed-pic),::view-transition-group(breed-title){animation-duration:.52s;animation-timing-function:var(--ease)}
::view-transition-old(breed-title),::view-transition-new(breed-title){height:100%;object-fit:contain;object-position:left}
.breed-page .hero .pic{view-transition-name:breed-pic}
.breed-page .hero h1{view-transition-name:breed-title}
/* Reveals: a short rise, once. A CSS timer shows anything an observer missed after three seconds. */
.js [data-reveal]{transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js [data-reveal]:not(.seen){opacity:0;transform:translateY(14px);animation:reveal-safety 0s 3s forwards}
@keyframes reveal-safety{to{opacity:1;transform:none}}
/* The hero: the halftone prints in behind the words, left to right, and the words rise into it. */
@property --sweep{syntax:'';inherits:false;initial-value:112%}
.js .head::after{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--sweep) - 14%),transparent var(--sweep));
mask-image:linear-gradient(90deg,#000 calc(var(--sweep) - 14%),transparent var(--sweep));animation:print-in 1.1s var(--ease) .05s both}
@keyframes print-in{from{--sweep:0%}to{--sweep:112%}}
.js .head .inner > *{animation:rise .8s var(--ease) both}
.js .head .inner > :nth-child(2){animation-delay:.08s}
.js .head .inner > :nth-child(3){animation-delay:.16s}
.js .head .inner > :nth-child(4){animation-delay:.24s}
/* The words never start hidden: if animation is paused or slow, the headline is still there. */
@keyframes rise{from{transform:translateY(14px)}}
/* The egg finder. Eggs sit on the dark hero like the real thing on a dark tray; picking one lifts
and rocks it once, then it rests tilted, selected. */
.eggfind{margin-top:1.45rem}
.eggfind-l{font:400 10.5px/1 var(--sign);letter-spacing:.12em;text-transform:uppercase;color:#A6B3A7}
.eggs{display:flex;flex-wrap:wrap;gap:.2rem .15rem;margin:.65rem 0 0 -.4rem}
/* Five to a row, like a tray, on wider screens: one long row ran out past the solid part of the hero
screen, where the dots thin over the bright photograph and the labels stop reading. */
@media(min-width:761px){.eggs{display:grid;grid-template-columns:repeat(5,auto);justify-content:start}}
/* The words stay on the solid part of the screen at every width above a phone. The screen scales
with the hero, so the column does too: a fixed 640px column ran onto the bright photograph on
tablets and small laptops, where the dots have thinned out. */
@media(min-width:761px){.head .inner{max-width:min(640px,42%)}}
.eggbtn{appearance:none;border:0;background:none;color:inherit;cursor:pointer;display:grid;justify-items:center;
gap:.28rem;padding:.45rem .3rem .4rem;min-width:56px;border-radius:8px;font:inherit;
transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.eggbtn svg{width:29px;height:38px;fill:var(--egg);overflow:visible;
filter:drop-shadow(0 3px 0 rgba(0,0,0,.28));transition:transform .45s var(--ease)}
.eggbtn .en{font:500 11.5px/1.1 var(--ui);color:#D6DDD4;white-space:nowrap;text-shadow:0 1px 2px rgba(6,10,7,.85)}
.eggbtn .ec{font:400 15px/1 var(--sign);color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(6,10,7,.85)}
@media(hover:hover){.eggbtn:hover svg{transform:translateY(-3px)}.eggbtn:hover{background:rgba(255,255,255,.05)}}
.eggbtn[aria-pressed="true"]{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.eggbtn[aria-pressed="true"] svg{transform:translateY(-4px) rotate(-7deg)}
.eggbtn[aria-pressed="true"] .en{color:#fff}
.eggbtn.rock svg{animation:rock .62s var(--ease)}
@keyframes rock{0%{transform:none}35%{transform:translateY(-7px) rotate(-12deg)}65%{transform:translateY(-4px) rotate(4deg)}
100%{transform:translateY(-4px) rotate(-7deg)}}
.eggbtn:focus-visible{outline:2px solid var(--accentLight);outline-offset:2px}
.eggfind-out{margin-top:.55rem;color:#E4EAE3;font-size:14.5px;min-height:1.45em}
.eggfind-out a{color:var(--accentLight);text-underline-offset:3px}
.js .eggs .eggbtn{animation:egg-in .6s var(--ease) both}
.js .eggs .eggbtn:nth-child(2){animation-delay:.34s}.js .eggs .eggbtn:nth-child(3){animation-delay:.38s}
.js .eggs .eggbtn:nth-child(4){animation-delay:.42s}.js .eggs .eggbtn:nth-child(5){animation-delay:.46s}
.js .eggs .eggbtn:nth-child(6){animation-delay:.5s}.js .eggs .eggbtn:nth-child(7){animation-delay:.54s}
.js .eggs .eggbtn:nth-child(8){animation-delay:.58s}.js .eggs .eggbtn:nth-child(9){animation-delay:.62s}
.js .eggs .eggbtn:nth-child(1){animation-delay:.3s}
@keyframes egg-in{from{opacity:0;transform:translateY(10px)}}
/* Breed page: the egg it lays, under the name. */
.lays{display:flex;align-items:center;gap:.35rem;margin-top:.55rem;font:500 14px/1.3 var(--ui);color:var(--ink2)}
.egg-ico{width:13px;height:17px;fill:var(--egg);flex:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.lays span{margin-left:.15rem}
/* The answer strip: the cheapest of each sex, and who sells it, before anything else. */
/* Every cell draws its right and bottom rule 1px outside itself and the strip clips at its edge, so
rules fall only between cells however many columns the width allows. */
.answer{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--ink);
border-bottom:1px solid var(--rule);margin:1.3rem 0 1.4rem;overflow:hidden}
.ans{padding:.85rem .95rem .9rem;border:solid var(--rule);border-width:0 1px 1px 0;margin:0 -1px -1px 0;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.ans .al{font:400 10.5px/1.15 var(--sign);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.ans b{font:400 clamp(1.45rem,2.2vw,1.85rem)/1 var(--sign);letter-spacing:-.02em;color:var(--accentInk);font-variant-numeric:tabular-nums}
.ans .av{font-size:12.5px;line-height:1.35;color:var(--ink2);overflow-wrap:anywhere}
.ans.minor b{color:var(--ink)}
.ans.unsure b{color:var(--ink2)}
/* The price ladder. One rule per hatchery on a shared price scale; switching sex slides every mark to
that sex's price, so who is cheapest becomes a position. On first view the marks travel out from the
left edge to their prices, once. */
.ladder-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem 1rem;flex-wrap:wrap;padding-right:.9rem}
.ladder-tabs{display:flex;gap:2px;padding:3px;background:var(--tint);border:1px solid var(--rule);margin:.6rem 0 .6rem .9rem}
.ladder-tabs [role="tab"]{appearance:none;border:0;background:none;font:600 12.5px/1 var(--ui);color:var(--ink2);
padding:.55rem .75rem;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.ladder-tabs [role="tab"]:hover{color:var(--ink)}
.ladder-tabs [aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--rule2)}
.ladder-tabs [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lrow,.laxis{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr);align-items:center;gap:1.1rem}
.lrow{padding:.5rem 0;border-bottom:1px solid var(--rule)}
.lrow:last-child{border-bottom:0}
.lname{font:600 13.5px/1.25 var(--ui);min-width:0;transition:color .3s var(--ease)}
.lname a.hlink{border-bottom-color:transparent}
.ltrack{position:relative;height:28px;margin-right:4.2rem;background:linear-gradient(var(--rule2),var(--rule2)) 0 50%/100% 1px no-repeat}
.lmark{position:absolute;top:50%;left:var(--x,0%);transform:translate(-50%,-50%);display:flex;align-items:center;
transition:left .6s var(--ease),opacity .3s var(--ease)}
.lmark i{display:block;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--accent);
transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.lmark.on i{background:var(--accent)}
.lmark.unk i{box-shadow:none;border:2px dashed var(--ink3);background:#fff}
.lmark b{position:absolute;left:21px;font:500 12.5px/1 var(--mono);color:var(--ink);white-space:nowrap;letter-spacing:-.02em}
.lrow.best .lmark i{box-shadow:0 0 0 5px rgba(42,97,53,.16),inset 0 0 0 2px var(--accent)}
.lrow.best .lmark b{color:var(--accentInk);font-weight:600}
.lrow.best .lname{color:var(--accentInk)}
.lrow.none .lmark{opacity:0}
.lrow.none .lname{color:var(--ink3)}
.laxis{margin-top:.2rem}
.laxis > div{position:relative;height:16px;margin-right:4.2rem}
.laxis > div span{position:absolute;left:var(--x);transform:translateX(-50%);font:400 11px/1 var(--mono);color:var(--ink3)}
.js .ladder[data-reveal]:not(.seen){transform:none}
.js .ladder[data-reveal]:not(.seen) .lmark{left:0;opacity:0}
.js .ladder[data-reveal] .lmark{transition:left .8s var(--ease) calc(var(--i,0) * 55ms),opacity .4s var(--ease) calc(var(--i,0) * 55ms)}
.ladder .hint{margin-top:.9rem}
/* Home, "right now": two ruled columns between the comparisons and the full index. */
.now{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 2.6rem;padding:1.5rem var(--pad) .4rem}
.now-col h2{display:flex;align-items:baseline;gap:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--ink)}
.now-col h2 span{font:400 12px/1 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink3)}
.now-list,.now-hatch{list-style:none;margin:0;padding:0}
.now-list a,.now-hatch a{display:grid;align-items:center;gap:.8rem;text-decoration:none;color:inherit;
border-bottom:1px solid var(--rule);transition:background-color .25s var(--ease)}
.now-list a{grid-template-columns:40px minmax(0,1fr) auto;padding:.45rem .2rem}
.now-list .thumb{width:40px;height:40px}
.now-list .photo-fallback b{font-size:13px}
.now-list .nn,.now-hatch .hn{font:400 16.5px/1.25 var(--name);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
transition:background-size .45s var(--ease);justify-self:start}
.now-list .np{font:400 15px/1 var(--sign);color:var(--accentInk);font-variant-numeric:tabular-nums}
.now-hatch a{grid-template-columns:minmax(0,1fr) 2.2rem auto;padding:.62rem .2rem}
.now-hatch .hs{font:500 12px/1 var(--ui);color:var(--ink3)}
.now-hatch .hc{font:500 12.5px/1 var(--ui);color:var(--ink2);text-align:right}
.now-list a:hover,.now-hatch a:hover{background:var(--tint)}
.now-list a:hover .nn,.now-hatch a:hover .hn{background-size:100% 1px}
@media(hover:hover){.now-list a:hover .thumb img{transform:scale(1.06)}}
/* The watchlist. A breed page's star is a quiet pill until pressed; the home band reuses the
"right now" list, with a flag for whatever changed since the visitor last looked. */
.watchrow{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .8rem;margin-top:.85rem}
.watch{appearance:none;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem .5rem .7rem;border:1px solid var(--rule);
border-radius:999px;background:var(--paper);font:600 12.5px/1 var(--ui);color:var(--ink);cursor:pointer;
transition:border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease)}
.watch svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .25s var(--ease)}
.watch:hover{border-color:var(--ink3)}
.watch[aria-pressed="true"]{border-color:var(--accent);background:var(--tint);color:var(--accentInk)}
.watch[aria-pressed="true"] svg{fill:currentColor}
.watch.pop svg{animation:star-pop .45s var(--ease)}
@keyframes star-pop{40%{transform:scale(1.35) rotate(-8deg)}}
.watch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.watch-note{font-size:12px;line-height:1.35;color:var(--ink3);max-width:46ch}
.watchlist{padding:1.5rem var(--pad) 0}
.watchlist .now-list li{position:relative}
.watchlist .now-list a{padding-right:2.4rem}
.watchlist .np.out{color:var(--ink3);font-size:13px}
.wflag{display:block;font:600 11.5px/1.3 var(--ui);font-style:normal;color:var(--accentInk);margin-top:.15rem}
.wx{position:absolute;right:.2rem;top:50%;transform:translateY(-50%);appearance:none;border:0;background:none;width:2rem;height:2rem;
font:400 20px/1 var(--ui);color:var(--ink3);cursor:pointer;border-radius:50%}
.wx:hover{color:var(--ink);background:var(--tint)}
.wx:focus-visible{outline:2px solid var(--accent)}
.now-more{display:inline-flex;gap:.35rem;margin:.8rem 0 .4rem;font:600 13px/1 var(--ui);color:var(--accentInk);text-decoration:none}
.now-more span{transition:transform .35s var(--ease)}
.now-more:hover span{transform:translateX(3px)}
.index-h{padding:1.8rem var(--pad) .7rem}
/* Links in prose: the underline warms to full strength on hover. */
.read a,.sub a,.hint a,.guide-body a,.guide-summary a,.guide-more a,.retired-more a,.ft a{text-decoration-thickness:1px;
text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 38%,transparent);
transition:text-decoration-color .3s var(--ease),color .3s var(--ease)}
.read a:hover,.sub a:hover,.hint a:hover,.guide-body a:hover,.guide-summary a:hover,.guide-more a:hover,.retired-more a:hover,.ft a:hover{text-decoration-color:currentColor}
.pill:active,.chip-clear:active,.eggbtn:active,.ladder-tabs [role="tab"]:active{transform:translateY(1px)}
/* Index rows answer the pointer: the row warms, the name underlines from the left, the photograph
leans in. Stock marks fill the first time the list draws, never on a filter change. */
.res{transition:background-color .25s var(--ease)}
.res:hover{background:var(--tint)}
.res .nmt{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.res:hover .nmt,.res:focus-visible .nmt{background-size:100% 1px}
.thumb img{transition:transform .8s var(--ease)}
@media(hover:hover){.res:hover .thumb img{transform:scale(1.06)}}
.av i{transform-origin:50% 100%}
.list.first .av i{animation:fill .55s var(--ease) both}
@keyframes fill{from{transform:scaleY(.15);opacity:.25}}
.list.swap{animation:swap .3s var(--ease)}
@keyframes swap{from{opacity:.35}}
/* Track records fill left to right as they come into view. */
.js .record-card[data-reveal] .rstrip i{transform:scaleY(.12);opacity:.35;
transition:transform .55s var(--ease) calc(var(--i,0) * 22ms),opacity .55s var(--ease) calc(var(--i,0) * 22ms)}
.js .record-card[data-reveal].seen .rstrip i{transform:none;opacity:1}
.js .record-card[data-reveal]:not(.seen){transform:none}
/* The egg-ink rule over a guide draws itself in from the left. */
.guide-head{position:relative;padding-top:calc(1.15rem + 6px)}
.guide-head::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;
background:var(--rule-bg,var(--egg,var(--ink)));transform-origin:0 50%}
.js .guide-head::before{animation:rule-in .9s var(--ease) .05s both}
@keyframes rule-in{from{transform:scaleX(0)}}
/* ============================================================================
PHONE AND TABLET - keep last. A media query adds no specificity, so these
only beat their desktop counterparts by being declared after them.
============================================================================ */
@media(max-width:900px){
.bar .in{grid-template-columns:1fr;gap:0;padding:0}
.logo{border-right:0;border-bottom:1px solid var(--barLine);height:52px}
/* The wrapper gets the page padding on a phone, but the magnifier is positioned against the
wrapper, so it has to be pushed in by the same amount or it sits outside the field. */
.barsrch{max-width:none;padding:10px var(--pad) 12px}
.barsrch svg{left:calc(var(--pad) + 12px)}
.figs{display:none}
.shell{grid-template-columns:1fr}
.menu{display:flex}
.bar .in{grid-template-columns:1fr auto}
.logo{border-bottom:0;grid-row:1}
.menu{grid-row:1}
.barsrch{grid-column:1/-1;grid-row:2}
/* Menu and Filters are different questions and get different controls. Hiding the whole rail
behind one button would bury the filters two taps deep behind a thing labelled "Menu". So the
rail stays in the flow and only its navigation collapses; the filters keep their own button. */
.rail{position:static;height:auto;overflow:visible;border-right:0;
border-bottom:1px solid var(--rule);background:var(--paper);padding-bottom:0}
.rail nav{display:none;flex-direction:column;flex-wrap:nowrap;padding:4px 0}
.rail.open nav{display:flex}
.rail nav a{padding:11px var(--pad);border-bottom:1px solid var(--rule)}
.rail nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent)}
/* the filters collapse behind a control; on a phone they are a detour, not the main road */
.fwrap{display:none}
.fwrap.open{display:block;border-top:1px solid var(--rule)}
.fbtn{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;
font:600 13.5px/1 var(--ui);color:var(--ink);background:none;
border:0;border-top:1px solid var(--rule);padding:.7rem;cursor:pointer}
.fbtn .cnt{background:var(--accent);color:#fff;border-radius:999px;font:600 11px/1 var(--mono);
padding:.14rem .4rem}
.head{min-height:clamp(230px,58vw,280px);padding:2rem var(--pad) 1.75rem}
.head .bg img[src$="/hero2.jpg"]{object-position:50% 44%;transform:translateX(20%)}
.head .bg img[src$="/hero3.jpg"]{object-position:50% 70%;transform:translateX(6%) scaleX(-1)}
.head .bg img[src$="/hero4.jpg"]{object-position:50% 44%;transform:translateX(22%)}
.head .bg img[src$="/hero5.jpg"]{object-position:52% 46%;transform:translateX(14%)}
.head h1{max-width:none}
.head .sub{font-size:14.5px}
.headfigs{gap:14px;margin-top:1.1rem}
.headfigs b{font-size:17px}
.phead{padding:1.3rem var(--pad) 1rem}
.date-strip::after{content:'';position:absolute;top:0;right:0;width:36px;height:100%;pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,0),var(--paper))}
.date-cue{display:block;margin-top:.55rem;font:600 10px/1 var(--ui);letter-spacing:.08em;
text-transform:uppercase;color:var(--accentInk)}
.hdr{display:none}
.res{grid-template-columns:54px minmax(0,1fr) auto;gap:0 12px;padding:11px var(--pad);
align-items:start}
.res .no,.res .min{display:none}
.thumb{width:54px;height:54px}
.res .nm{font-size:17px}
/* three facts wrap to three lines on a narrow screen; the first two decide a tap */
.res .mt > span:nth-of-type(n+3),.res .mt s:nth-of-type(n+2){display:none}
.res .pr{grid-column:3}
.res .pr b{font-size:17px}
.res .pr i{display:inline;margin:0 0 0 .25rem}
.res .rg{grid-column:2/-1;display:flex;align-items:center;gap:.55rem;margin-top:.45rem;text-align:left}
.avw{flex-direction:row;align-items:center;gap:.5rem}
.breed-page{padding-top:.45rem}
.breed-page table.t{min-width:680px}
.trait{grid-template-columns:1fr;gap:.2rem}
.res.related{grid-template-columns:54px minmax(0,1fr);min-height:0;padding-left:0;padding-right:0}
.res.related .thumb{grid-column:1;grid-row:1}
.res.related .bd{grid-column:2;grid-row:1}
.res.related .pr{grid-column:2;grid-row:2;text-align:left;margin-top:.45rem}
.res.related .rg{grid-column:2;grid-row:3;text-align:left;margin-top:.25rem}
.hero{grid-template-columns:minmax(0,1fr) 132px;gap:1rem;align-items:start}
.hero .t{grid-column:1;grid-row:1}
.hero > div:first-child{grid-column:2;grid-row:1}
.hero .pic{max-width:none}
.kpis{grid-template-columns:1fr 1fr}
.kpi:nth-child(even){border-right:0}
.kpi:nth-child(n+3){border-top:1px solid var(--rule)}
.boxwrap{grid-template-columns:1fr}
.vgrid{grid-template-columns:1fr}
.vcard{border-right:0}
.pigeon-page{padding-top:1rem}
.pigeon-intro{grid-template-columns:1fr;gap:1rem;align-items:start}
.pigeon-count{text-align:left;justify-self:start}
.pigeon-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
.pigeon-filters .pigeon-search{grid-column:1/-1}
.pigeon-row{grid-template-columns:86px 62px minmax(0,1fr) auto;gap:10px;min-height:0}
.pigeon-row .pband{grid-column:1;grid-row:1/3}
.pigeon-photo{grid-column:2;grid-row:1;width:62px;height:62px}
.pigeon-identity{grid-column:3;grid-row:1}.pigeon-seller{grid-column:3;grid-row:2}
.pigeon-commerce{grid-column:4;grid-row:1;text-align:right;align-self:start}
.pigeon-checked{grid-column:4;grid-row:2;text-align:right;align-self:end}
.pigeon-detail-head{grid-template-columns:115px 1fr}
.pigeon-facts{grid-template-columns:1fr}
.pigeon-facts>div:nth-child(odd),.pigeon-facts>div:nth-child(even){padding-left:0;padding-right:0}
}
@media(max-width:520px){
.head h1{max-width:10ch}
.hero{grid-template-columns:minmax(0,1fr) 118px;gap:.75rem}
.hero h1{font-size:clamp(1.45rem,6.5vw,1.7rem);overflow-wrap:anywhere}
.pigeon-row{grid-template-columns:70px minmax(0,1fr) auto;gap:9px;padding:10px 0}
.pigeon-row .pband{grid-column:1;grid-row:1/4;padding:.55rem}
.pigeon-photo{display:none}
.pigeon-identity{grid-column:2;grid-row:1}.pigeon-seller{grid-column:2;grid-row:2}
.pigeon-commerce{grid-column:3;grid-row:1/3}.pigeon-checked{grid-column:2/4;grid-row:3;
flex-direction:row;gap:.45rem;text-align:left}
.pigeon-name{font-size:17px}.pigeon-commerce strong{font-size:17px}
.pigeon-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
.pigeon-detail-head{grid-template-columns:86px 1fr;gap:.8rem}
.pigeon-detail-head .pband{min-height:88px}
.pigeon-facts>div{grid-template-columns:115px minmax(0,1fr);gap:.65rem}
}
@media(max-width:420px){
.headfigs div:nth-child(3){display:none}
}
@media(max-width:760px){
.answer{grid-template-columns:1fr 1fr}
.ans:last-child:nth-child(odd){grid-column:1/-1}
.now{grid-template-columns:1fr;gap:1.6rem}
/* the ladder stacks: hatchery name above a full-width track */
.lrow{grid-template-columns:1fr;gap:.2rem;padding:.55rem 0 .45rem}
.laxis{grid-template-columns:1fr}
.laxis > span{display:none}
.ladder-head{padding-right:0}
.ladder-tabs{margin-left:0;width:100%}
.ladder-tabs [role="tab"]{flex:1;padding:.6rem .4rem}
.head::after{background:linear-gradient(180deg,rgba(10,16,11,.82) 0%,rgba(10,16,11,.88) 100%)}
/* a phone has no dot screen, so the frames do not slide */
.head .bg img[src$="/hero2.jpg"],.head .bg img[src$="/hero4.jpg"],.head .bg img[src$="/hero5.jpg"]{transform:none}
.head .bg img[src$="/hero3.jpg"]{transform:scaleX(-1)}
.topic-list a{grid-template-columns:1fr;gap:.35rem}
.guide-links{grid-template-columns:1fr}
.guide-head::before{height:5px}
}
@media(hover:none){
.egg-tip,.egg-summary{display:none}
.egg-full{display:inline;white-space:normal}
.egg-colours{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important}
@view-transition{navigation:none}
.js .head::after{-webkit-mask-image:none;mask-image:none}
}
/* the filter panel is a rail on desktop and has no toggle there */
.fbtn{display:none}
@media(max-width:900px){.fbtn{display:flex}}