:root{
  --bg:#faf8f4;--surface:#ffffff;--surface-h:#f7f5f0;--muted-bg:#f2efe8;
  --ink:#1a1f1d;--ink-soft:#52584f;--ink-faint:#8a8f85;
  --hair:#e0ddd5;--hair-soft:#eae7df;
  --accent:#138572;--accent-h:#106a5c;--accent-soft:#effcf9;--on-accent:#ffffff;--accent-line:#b0ebde;--focus:#7fdcc8;
  --sh-sm:0 1px 3px rgba(20,40,35,.06);--sh-md:0 4px 20px rgba(20,40,35,.08);--sh-lg:0 12px 40px rgba(20,40,35,.10);
  --r-card:18px;--r-btn:12px;--r-input:12px;
  --sp-1:.5rem;--sp-2:1rem;--sp-3:1.5rem;--sp-4:2rem;--sp-5:3rem;--sp-6:4rem;
  --maxw:1200px;
  --display:Georgia,"Times New Roman","Songti SC",serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* legacy aliases */
  --card:var(--surface);--muted:var(--ink-soft);--soft:var(--accent-soft);--band:var(--muted-bg);--accent-ink:var(--accent-h);--r:var(--r-card);
  /* Always light (Joel, 2026-09-19): the site used to follow the device's dark mode, so it looked
     white one visit and dark the next. color-scheme keeps form controls and scrollbars light too. */
  color-scheme:light
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
*:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.topmark{display:block;height:1px}.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.totop{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:60;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-md);opacity:0;visibility:hidden;transform:translateY(.5rem);transition:opacity .18s,transform .18s,visibility .18s,background .15s}.totop.on{opacity:1;visibility:visible;transform:none}.totop:hover{background:var(--accent-h)}.totop svg{width:1.15rem;height:1.15rem}@media(prefers-reduced-motion:reduce){.totop{transition:none}}@media print{.totop{display:none}}.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem;border-radius:0 0 var(--r-btn) 0;z-index:99;font-weight:700}
.skip:focus{left:0;text-decoration:none}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent-h);text-decoration:none;transition:color .2s ease}a:hover{text-decoration:underline}img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-3)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--sp-2)}
h1{font-size:clamp(1.7rem,4.5vw,2.6rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:var(--sp-5) 0 var(--sp-3)}
h3{font-size:1.2rem;margin:0 0 .35rem}
.lead{font-size:clamp(.92rem,2vw,1.05rem);line-height:1.5;color:var(--ink-soft)}
small,.small{font-size:.85rem}
/* header */
header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair-soft)}
@media(max-width:579px){header{position:static}}  /* two rows would eat a phone screen if they stuck */
.learn{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px var(--sp-2);padding:.45rem var(--sp-3);border-top:1px solid var(--hair);font-size:.88rem}
.learn span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-right:1px solid var(--hair);padding-right:var(--sp-2);margin-right:.25rem}
.learn a{color:var(--ink-soft)}.learn a:hover{color:var(--accent);text-decoration:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-1) var(--sp-3);padding:var(--sp-2) 0;flex-wrap:wrap}
@media(max-width:579px){.nav{flex-direction:column;gap:.4rem;padding:.7rem 0}.nav nav{justify-content:center;width:100%;gap:2px var(--sp-2)}}
.logo{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:700;font-size:2.2rem;letter-spacing:-.02em;color:var(--ink);line-height:1}.logo:hover{text-decoration:none}
.logo .word{display:inline-flex}
.logo .w1{color:var(--ink)}
.logo .w2{color:var(--accent-h)}
.mark{width:52px;height:52px;border-radius:15px;background:var(--accent);display:grid;place-items:center;flex:none}
.mark svg{width:31px;height:31px}
@media(max-width:579px){.logo{font-size:1.9rem;gap:11px}.mark{width:44px;height:44px;border-radius:13px}.mark svg{width:27px;height:27px}}
.nav nav{display:flex;flex-wrap:wrap;flex:1;justify-content:center;gap:2px var(--sp-2)}
@media(min-width:1100px){.nav nav{gap:2px 1.15rem}}
.nav nav a{font-size:.95rem;color:var(--ink-soft);padding:4px 0}.nav nav a:hover{color:var(--accent);text-decoration:none}
.logo:hover .mark{transform:scale(1.05)}.mark{transition:transform .2s ease}
.give{flex:none;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.95rem;padding:.45rem 1rem;border-radius:999px;box-shadow:var(--sh-sm)}.give:hover{background:var(--accent-h);text-decoration:none}
/* hero: single centred column, finder directly beneath */
.hero{padding:var(--sp-5) 0 var(--sp-4);text-align:center}
.herowrap{display:block;max-width:820px;margin:0 auto}
.hero .lead{margin:0 auto var(--sp-3)}
.tally{margin:.2rem 0 var(--sp-2);font-size:1.15rem;color:var(--ink-soft)}.tally b{color:var(--accent-h);font-size:1.35rem;font-weight:800}
@media(max-width:579px){.tally{font-size:.92rem}.tally b{font-size:1.05rem}}
.heroimg{display:none}
.promise{display:inline-block;background:var(--muted-bg);color:var(--ink-soft);border:1px solid var(--hair-soft);border-radius:999px;padding:.35rem .9rem;font-size:.8rem;font-weight:600;letter-spacing:.03em;margin-bottom:var(--sp-2)}
.quick{font-size:.9rem;color:var(--ink-faint);margin:var(--sp-2) 0 0}
/* finder */
.finder{display:grid;gap:var(--sp-2);grid-template-columns:1fr;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--sp-3);margin:var(--sp-3) auto 0;max-width:660px;box-shadow:var(--sh-md);text-align:left}
@media(min-width:620px){.finder{grid-template-columns:1.3fr 1fr auto;align-items:end}
.finder .f-animal,.finder .f-state{grid-column:1}.finder .f-breed{grid-column:2/-1}
.finder .f-zip{grid-column:2}.finder .f-go{grid-column:3}
.finder .f-zip input{max-width:8rem}}
@media(min-width:620px){.bfind,.zfind{grid-template-columns:1fr auto}}
.finder label{display:grid;gap:.3rem;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--ink-soft)}
.finder select{font:inherit;padding:.7rem .8rem;border:1px solid var(--hair);border-radius:var(--r-input);background:var(--bg);color:var(--ink);width:100%}
.finder select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.finder .btn{border:0;cursor:pointer;font:inherit;width:100%}
.finder input{font:inherit;padding:.7rem .8rem;border:1px solid var(--hair);border-radius:var(--r-input);background:var(--bg);color:var(--ink);width:100%}
.finder input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
@media(min-width:620px){.bfind{grid-template-columns:1fr auto}}
.bfind .miss{grid-column:1/-1;margin:0}
.miss{margin:.4rem 0 0;font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.miss a{font-weight:700}
.clearf{grid-column:1/-1;margin:0;display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;font-size:.9rem}
.clearf b{font-weight:700}
.clearf span{display:inline}
.bfind label{position:relative}
.sugg{position:absolute;left:0;right:0;top:100%;z-index:40;margin:.25rem 0 0;padding:0;list-style:none;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-input);box-shadow:var(--sh-md);max-height:min(50vh,18rem);overflow-y:auto;-webkit-overflow-scrolling:touch}
.sugg[hidden]{display:none}
.sugg li{margin:0}
.sugg button{display:flex;width:100%;gap:.5rem;justify-content:space-between;align-items:baseline;background:none;border:0;font:inherit;text-align:left;padding:.6rem .8rem;cursor:pointer;color:var(--ink)}
.sugg button small{color:var(--ink-soft);font-size:.8rem;flex:none}
.sugg button:hover,.sugg li.on button{background:var(--accent-soft)}
@media(min-width:620px){.zfind{grid-template-columns:1fr auto}}
.miles{display:inline-block;margin-left:.4rem;font-weight:700;color:var(--accent-h);white-space:nowrap}
.nearnote{margin:.5rem 0 0;font-size:.85rem;color:var(--ink-soft)}
.lawnote{background:#fff8e6;border:1px solid #e8d9a8;border-left:4px solid #d9a400;border-radius:var(--r-card);padding:var(--sp-3);margin:var(--sp-3) 0;text-align:left}
.lawnote h2{margin:0 0 .3rem;font-size:1.15rem;text-align:left}
.lawnote p{margin:0 0 .5rem}.lawnote ul{margin:0 0 .5rem;padding-left:1.1rem}.lawnote li{margin:0 0 .35rem}
.lawnote .small{margin:0;font-size:.85rem;color:var(--ink-soft)}
.f-reset{grid-column:1/-1;margin:.1rem 0 0;font-size:.85rem}
.f-reset a{font-weight:700}
.f-reset[hidden]{display:none}
.lawtable{width:100%;border-collapse:collapse;margin:var(--sp-2) 0 var(--sp-4);font-size:.95rem}
.lawtable th,.lawtable td{text-align:left;vertical-align:top;padding:.6rem .5rem;border-bottom:1px solid var(--hair)}
.lawtable th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
@media(max-width:579px){.lawtable,.lawtable tbody,.lawtable tr,.lawtable td{display:block;width:100%}.lawtable thead{display:none}.lawtable tr{border-bottom:1px solid var(--hair);padding:.5rem 0}.lawtable td{border:0;padding:.15rem 0}.lawtable td[data-l]::before{content:attr(data-l);display:block;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.4rem}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .lawnote{background:#2a2312;border-color:#5a4a1e;border-left-color:#c79a2e}}
.clearf a{font-weight:700;border:1px solid var(--hair);border-radius:999px;padding:.25rem .7rem;background:var(--bg)}
.clearf a:hover{border-color:var(--accent-line);background:var(--accent-soft);text-decoration:none}
/* buttons, notes */
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:700;padding:.72rem 1.15rem;border-radius:var(--r-btn);box-shadow:var(--sh-sm);transition:background .2s ease,transform .1s ease}
.btn:active{transform:scale(.98)}
.btn:hover{background:var(--accent-h);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent-h);border:1px solid var(--accent);box-shadow:none}
.note{background:var(--surface);border:1px solid var(--hair-soft);border-left:3px solid var(--accent);border-radius:var(--r-btn);padding:var(--sp-2) var(--sp-3);color:var(--ink-soft);font-size:.95rem;margin:var(--sp-3) 0;max-width:760px;box-shadow:var(--sh-sm)}
.cta{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--sp-3);margin:var(--sp-4) 0;box-shadow:var(--sh-sm)}
/* tiles */
.grid{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
@media(min-width:580px){.grid{gap:var(--sp-3)}}
.tile{display:block;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--sp-2) var(--sp-3);color:var(--ink);box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s,border-color .12s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--accent-line);text-decoration:none}
.tile b{display:block}.tile small{color:var(--ink-soft);display:block;margin-top:.2rem;line-height:1.45}
.pgrid{grid-template-columns:1fr 1fr}
@media(min-width:580px){.pgrid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.ptile{padding:0;overflow:hidden;display:flex;flex-direction:column}
.ptile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease}
.ptile:hover img{transform:scale(1.05)}
.ptile b{display:block;padding:.6rem .7rem 0;font-size:1rem;font-family:var(--display);text-align:center}
.ptile small{padding:.1rem .7rem .9rem;text-align:center;font-size:.8rem;line-height:1.45}
@media(min-width:580px){.ptile img{aspect-ratio:16/10}.ptile b{padding:var(--sp-2) var(--sp-2) .2rem;font-size:1.05rem;text-align:left}.ptile small{padding:0 var(--sp-2) var(--sp-3);font-size:.85rem;text-align:left}}
.mini{display:grid;gap:var(--sp-1);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.mini a{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-btn);padding:.5rem .6rem;color:var(--ink);font-weight:600;font-size:.95rem}
.mini a{transition:border-color .2s ease,background .2s ease}
.mini a:hover{border-color:var(--accent-line);background:var(--surface-h);text-decoration:none}
.mini img{width:40px;height:40px;border-radius:8px;object-fit:cover}
/* listing cards */
.cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-sm)}
.card .ph{aspect-ratio:16/10;background:var(--muted-bg);display:grid;place-items:center;font-size:48px}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 30%;display:block}
.card .b{padding:var(--sp-2) var(--sp-2) var(--sp-3)}
.card .meta{color:var(--ink-soft);font-size:.85rem}
.card p{margin:.5rem 0 0;font-size:.95rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card .org{margin-top:.6rem;font-size:.78rem;color:var(--ink-faint)}
.card a.more{display:inline-block;margin-top:.5rem;font-weight:600}
.save{font:inherit;font-size:.85rem;font-weight:600;color:var(--accent);background:var(--surface);border:1px solid var(--accent-line);border-radius:999px;padding:.2rem .7rem;cursor:pointer}
.save.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.card .save{position:absolute;top:8px;right:8px;box-shadow:var(--sh-sm)}
.savedlink{flex:none;font-weight:700;font-size:.9rem;margin-right:.6rem;white-space:nowrap}
.antoast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;max-width:min(92vw,520px);background:var(--ink);color:var(--surface);padding:.6rem 1rem;border-radius:12px;font-size:.92rem;box-shadow:var(--sh-md)}.antoast a{color:inherit;text-decoration:underline}
.svlist .card .st{display:inline-block;font-size:.8rem;font-weight:700;border-radius:999px;padding:.1rem .6rem;margin:.3rem 0}.st.ok{background:var(--accent-soft);color:var(--accent)}.st.no{background:var(--muted-bg);color:var(--ink-soft)}
.svtools{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:18px 0}.svtools>div{border:1px solid var(--hair);border-radius:var(--r-card);padding:.9rem;background:var(--surface)}.svtools h3{margin:0 0 .3rem;font-size:1.05rem}.svtools p{margin:.2rem 0 .6rem;font-size:.9rem;color:var(--ink-soft)}
.kindbar{margin:0 0 var(--sp-2);font-size:.95rem;color:var(--ink-soft)}
.okbar{border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface);padding:.6rem .9rem .4rem;margin:0 0 var(--sp-2)}.okbar legend{font-weight:700;font-size:.95rem;padding:0 .3rem}.okbar label{display:inline-flex;align-items:center;gap:.35rem;margin:.2rem 1rem .2rem 0;font-size:.95rem;cursor:pointer;min-height:32px}.okbar .small{margin:.3rem 0 0;font-size:.8rem;color:var(--ink-soft)}
.oktags{display:flex;flex-wrap:wrap;gap:4px;margin:.2rem 0 .3rem}.oktags span{font-size:.72rem;font-weight:600;color:var(--accent-h);background:var(--accent-soft);border-radius:999px;padding:1px 8px}
/* help page: the two non-obvious features, boxed so nobody skims past them */
.tip{background:var(--accent-soft);border:1px solid var(--accent-line);border-left:5px solid var(--accent);border-radius:var(--r-card);padding:var(--sp-3);margin:var(--sp-4) 0}
.tip h2{margin:.4rem 0 var(--sp-2)}.tip p:last-child,.tip ul{margin-bottom:0}
.tipflag{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.2rem .7rem}
@media(max-width:579px){.tip{text-align:left}.tipflag{display:table;margin:0 auto}}
/* reserved height while listings load: rows x (card image at 16:10 + card body ~331px + 24px gap) + pager bars */
.loading{min-height:calc(var(--r1) * ((min(100vw, 1200px) - 48px) * .625 + 355px) + 113px)}
@media(min-width:592px){.loading{min-height:calc(var(--r2) * ((min(100vw, 1200px) - 72px) / 2 * .625 + 355px) + 113px)}}
@media(min-width:876px){.loading{min-height:calc(var(--r3) * ((min(100vw, 1200px) - 96px) / 3 * .625 + 355px) + 113px)}}
@media(min-width:1160px){.loading{min-height:calc(var(--r4) * ((min(100vw, 1200px) - 120px) / 4 * .625 + 355px) + 113px)}}
.narrow{display:grid;gap:.35rem;max-width:420px;margin:var(--sp-2) 0 0;font-weight:700;font-size:.95rem;color:var(--ink)}
.narrow select,.narrow input{font:inherit;font-weight:400;padding:.7rem .8rem;border:2px solid var(--accent);border-radius:var(--r-input);background:var(--surface);color:var(--ink);width:100%}
.narrow input:focus{outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.narrow input.bad{border-color:#c0392b}
@media(max-width:579px){.narrow{max-width:none}.mcenter,.prose .mcenter,.prose.help h2{text-align:center}}
.mixtag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-h);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:1px 8px;margin:0 0 .25rem}
.nearby{margin:0 0 var(--sp-3)}.nearby h3{margin:0 0 .5rem}
/* adopted: a rubber stamp across the photo for the few days before the animal drops off */
.card{position:relative}
.stamp{position:absolute;top:2.2rem;left:50%;transform:translateX(-50%) rotate(-12deg);border:3px solid rgba(196,30,45,.8);color:rgba(196,30,45,.85);background:rgba(255,255,255,.3);font:800 1.45rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;padding:.2em .45em;border-radius:8px;pointer-events:none;z-index:1}
.gallery .stamp{top:50%;transform:translate(-50%,-50%) rotate(-12deg);border-width:5px;font-size:clamp(2rem,6vw,3.6rem)}
/* adoption counter, an old-school odometer kept small */
.counter{margin:var(--sp-3) 0 0;text-align:center;font-size:.8rem;color:var(--ink-faint)}
.odo i{font:700 .85rem ui-monospace,Consolas,monospace;display:inline-block;background:#1f2421;color:#8ff0a4;padding:2px 4px;margin:0 1px;border-radius:3px}
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);background:var(--muted-bg);padding:2px 8px;border-radius:6px}
/* states, crumbs */
.states{columns:2;column-gap:var(--sp-3);font-size:.95rem}
@media(min-width:580px){.states{columns:4}}@media(min-width:960px){.states{columns:5}}
.states a{display:block;padding:3px 0}
.crumbs{font-size:.85rem;color:var(--ink-faint);padding:var(--sp-3) 0 0}.crumbs a{color:var(--ink-faint)}
/* prose, guides */
.prose p{margin:0 0 var(--sp-2)}
.guide h2{margin-top:var(--sp-5)}
.gimg{width:100%;height:auto;aspect-ratio:16/10;max-height:440px;object-fit:cover;border-radius:var(--r-card);margin:.3rem 0 var(--sp-4);display:block;box-shadow:var(--sh-md)}
blockquote{margin:var(--sp-3) 0 var(--sp-4);padding:var(--sp-2) var(--sp-3);border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--r-card) var(--r-card) 0;box-shadow:var(--sh-sm)}
blockquote p{margin:0 0 .4rem;font-family:var(--display);font-size:1.1rem;line-height:1.45}
blockquote cite{font-style:normal;font-size:.85rem;color:var(--ink-faint)}
.facts{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:var(--sp-3) 0 .4rem;max-width:860px}
.facts div{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-btn);padding:.7rem .85rem;font-size:.9rem;box-shadow:var(--sh-sm)}
.facts b{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.sources{font-size:.85rem;color:var(--ink-faint)}.sources li{margin:0 0 .35rem}
.steps{padding-left:1.1rem}.steps li{margin:0 0 .5rem}
.filt{font:inherit;width:100%;max-width:520px;padding:.7rem .85rem;border:1px solid var(--hair);border-radius:var(--r-input);background:var(--surface);color:var(--ink);margin:.4rem 0 .6rem}
.filt:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.azbar{display:flex;flex-wrap:wrap;gap:4px var(--sp-2);font-weight:700;margin:0 0 .4rem}.azbar a{padding:2px 4px}
.lg h2{margin:var(--sp-4) 0 var(--sp-2);font-size:1.3rem}
/* partner module */
.partners{background:var(--muted-bg);border-radius:var(--r-card);padding:var(--sp-4) var(--sp-3);margin:var(--sp-6) 0 var(--sp-2)}
.partners h2{margin:0 0 .3rem}.partners .why{color:var(--ink-soft);margin:0 0 var(--sp-3)}
.pgroups{display:grid;gap:var(--sp-4)}@media(min-width:900px){.pgroups{grid-template-columns:1fr 1fr}}
.pgroup h3{margin-bottom:.2rem}.pgroup .why{font-size:.9rem;margin-bottom:var(--sp-2)}
.plist{display:grid;gap:var(--sp-1)}
.plist a{display:block;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-btn);padding:.8rem .9rem;color:var(--ink);box-shadow:var(--sh-sm);transition:border-color .2s ease,background .2s ease,transform .15s ease}
.plist a:hover{border-color:var(--accent-line);background:var(--surface-h);transform:translateX(2px);text-decoration:none;box-shadow:var(--sh-md)}
.plist b{display:block}.plist small{color:var(--ink-soft);display:block;line-height:1.45}
.plist b::after{content:" \2197";color:var(--accent-h);font-weight:400}
.disclose{font-size:.8rem;color:var(--ink-faint);margin:var(--sp-3) 0 0}
/* footer */
.social{margin:.7rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}.social a{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;padding:.3rem .7rem .3rem .55rem;border:1px solid var(--hair);border-radius:999px;background:var(--surface);line-height:1.6;transition:color .15s,border-color .15s,background .15s}.social a:hover{color:var(--accent-h);border-color:var(--accent-line);background:var(--accent-soft)}.social svg{width:1.05em;height:1.05em;flex:none}footer{border-top:1px solid var(--hair-soft);margin-top:var(--sp-6);padding:var(--sp-5) 0 var(--sp-6);color:var(--ink-soft);font-size:.9rem;background:var(--surface)}
.fgrid{display:grid;gap:var(--sp-4)}@media(min-width:700px){.fgrid{grid-template-columns:2fr 1fr 1fr}}
@media(max-width:699px){.fgrid{grid-template-columns:1fr 1fr;text-align:center}.fgrid>:first-child{grid-column:1/-1}.social{justify-content:center}footer .copy{text-align:center}}
footer a{color:var(--ink-soft)}
footer b{color:var(--ink);display:block;margin-bottom:.4rem;font-family:var(--display);font-size:1.05rem}
footer ul{list-style:none;padding:0;margin:0}footer li{margin:0 0 .35rem}
.copy{margin-top:var(--sp-4);font-size:.8rem;color:var(--ink-faint)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.tile:hover,.plist a:hover{transform:none}.ptile:hover img{transform:none}}
/* paging */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0;font-size:.9rem;color:var(--ink-soft)}
.pager:last-child{margin-top:var(--sp-3)}
.pcount{margin-right:auto}
.psize{display:flex;align-items:center;gap:.4rem;font-weight:600}
.psize select{font:inherit;padding:.35rem .5rem;border:1px solid var(--hair);border-radius:var(--r-btn);background:var(--surface);color:var(--ink)}
.pnums{display:flex;flex-wrap:wrap;gap:4px}
.pnums button{font:inherit;min-width:2.1rem;padding:.35rem .5rem;border:1px solid var(--hair);border-radius:var(--r-btn);background:var(--surface);color:var(--ink);cursor:pointer}
.pnums button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-h)}
.pnums button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.pnums button:disabled{opacity:.4;cursor:default}
.pnums .gap{padding:.35rem .2rem;color:var(--ink-faint)}
/* pet of the day */
.potd{display:grid;gap:0;grid-template-columns:1fr;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-md);margin:var(--sp-4) 0}
@media(min-width:720px){.potd{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch}}
.potd img{width:100%;height:100%;min-height:240px;max-height:420px;object-fit:cover;object-position:50% 30%;display:block}
.potd .pbody{padding:var(--sp-3);display:flex;flex-direction:column;justify-content:center}
.potd .ptag{display:inline-block;align-self:flex-start;background:var(--accent-soft);color:var(--accent-h);border:1px solid var(--accent-line);border-radius:999px;padding:.25rem .75rem;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--sp-2)}
.potd h3{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.3rem}
.potd .meta{color:var(--ink-soft);font-size:.9rem;margin-bottom:var(--sp-2)}
.potd p{margin:0 0 var(--sp-2);color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.potd .btn{align-self:flex-start}
@media(max-width:579px){.pager{justify-content:center}.pcount{margin-right:0;width:100%;text-align:center}.potd .pbody{text-align:center;align-items:center}.potd .ptag,.potd .btn{align-self:center}}
@media(max-width:579px){.cta,.note{text-align:center}h2{text-align:center}.quick,.crumbs,.mini a{text-align:center}.mini a{justify-content:center}
.states,.guide h2,.pet h2,.prose h2,.partners h2,.pgroup h3,.pgroup .why,.partners .why,.finder,.plist,.sources,.steps{text-align:left}}

/* iOS Safari zooms the whole page when you focus a form control whose text is under 16px,
   and the field you are typing into then sits off screen behind the keyboard. Our controls
   took font:inherit from their labels, so the Animal and State selects and the breed box
   computed to 12.48px and the per-page select to 14.4px. Every focusable control has to be
   16px or more. The small caption size stays on the LABEL, which nobody can focus.
   Last rule in the sheet on purpose: it has to beat the font:inherit shorthands above. */
.finder select,.finder input,.psize select,.filt,.sugg button{font-size:16px}