/* 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}
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. */
.head .bg img:nth-child(1){object-position:50% 32%}
.head .bg img:nth-child(2){object-position:50% 42%}
.head .bg img:nth-child(3){object-position:50% 66%;transform:scaleX(-1)}
.head .bg img:nth-child(4){object-position:50% 40%}
.head .bg img:nth-child(5){object-position:50% 26%}
.head::after{content:'';position:absolute;inset:0;z-index:-1;
 background:linear-gradient(100deg,rgba(10,16,11,.94) 0%,rgba(10,16,11,.84) 40%,rgba(10,16,11,.38) 100%)}
.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,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%2387857D' stroke-width='1.6' stroke-linecap='round'/></svg>");
 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 b{font:400 19px/1 var(--sign);color:var(--rule2)}
.photo-fallback span{font:600 8px/1.15 var(--ui);letter-spacing:.04em;text-transform:uppercase}
.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{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 span{font-size:10px}
.credit{font:400 11px/1 var(--ui);color:var(--ink3);margin-top:.45rem}
.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}
.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{border-top:1px solid var(--ink)}
.vgroup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:stretch}
.vcard{display:grid;grid-template-rows:subgrid;grid-row:span 11;
 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)}

/* ---------------- 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)}

@keyframes pulse{0%,100%{background-color:var(--sunk)}50%{background-color:var(--rule)}}

/* ============================================================================
   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:nth-child(1){object-position:50% 32%}
 .head .bg img:nth-child(2){object-position:50% 44%}
 .head .bg img:nth-child(3){object-position:50% 70%;transform:scaleX(-1)}
 .head .bg img:nth-child(4){object-position:50% 44%}
 .head .bg img:nth-child(5){object-position:52% 46%}
 .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}
 .vgroup{grid-template-columns:1fr}
 .vcard{display:block;grid-row:auto;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(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){
 *{transition:none!important;animation:none!important}
}
/* the filter panel is a rail on desktop and has no toggle there */
.fbtn{display:none}
@media(max-width:900px){.fbtn{display:flex}}