@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-024F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308-0309,U+0323,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2020,U+20A0-20C0,U+2113,U+2122,U+2190-2199,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-vietnamese.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/fonts/atkinson-hyperlegible-next-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-024F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308-0309,U+0323,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2020,U+20A0-20C0,U+2113,U+2122,U+2190-2199,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}
:root{--bg:#f4f7f3;--surface:#ffffff;--text:#16211b;--muted:#4d5e54;--line:#16211b;--link:#2f6b4f;--hand:#95560c;
--sun:#7cc79f;--on-sun:#16211b;--key:#2f6b4f;--on-key:#ffffff;--leaf:#2f6b4f;
--p-sun:#f6e4cb;--p-sky:#d7eee1;--p-leaf:#d3eadc;--p-blush:#eaf3ec;--p-plum:#dde7e1;
--shadow:#16211b;--focus:#2f6b4f;--paw:#b9dcc8;--dot1:rgb(124 199 159 / .4);--dot2:rgb(149 86 12 / .16);--dot3:rgb(47 107 79 / .2);
--foot-bg:#2f6b4f;--foot-text:#f4f7f3;--foot-accent:#e3f2e9;--foot-em:#a9e0c2;--foot-focus:#ffffff;--logo:#2f6b4f;--photo-bg:#d7eee1;}
@media (prefers-color-scheme:dark){:root{--bg:#101612;--surface:#17201a;--text:#e9f1ec;--muted:#a9bbb0;--line:#9fd3b6;--link:#7cc79f;--hand:#f0b35c;
--sun:#7cc79f;--on-sun:#0d1a13;--key:#f0b35c;--on-key:#1a1206;--leaf:#7cc79f;
--p-sun:#2e2617;--p-sky:#1b2a24;--p-leaf:#1f3328;--p-blush:#1a231e;--p-plum:#202a25;
--shadow:#000000;--focus:#f0b35c;--paw:#2a3d32;--dot1:rgb(124 199 159 / .14);--dot2:rgb(240 179 92 / .12);--dot3:rgb(124 199 159 / .1);
--foot-bg:#1f4a37;--foot-text:#e9f1ec;--foot-accent:#c6ebd5;--foot-em:#a9e0c2;--foot-focus:#f0b35c;--logo:#7cc79f;--photo-bg:#1b2a24;}}
:root{color-scheme:light dark;
--font-display:"Bricolage Grotesque",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
--font-text:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
--font-hand:"Bradley Hand","Segoe Print","Chalkboard SE","Bricolage Grotesque",cursive;
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--s-1:clamp(.86rem,.84rem + .1vw,.94rem);--s0:clamp(1.02rem,.98rem + .2vw,1.12rem);--s1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
--s2:clamp(1.55rem,1.25rem + 1.2vw,2.3rem);--s3:clamp(2rem,1.45rem + 2.4vw,3.4rem);--s4:clamp(2.5rem,1.5rem + 4vw,5rem);
--lift:6px 6px 0 var(--shadow);--lift-rtl:-6px 6px 0 var(--shadow);--lift-sm:4px 4px 0 var(--shadow);--lift-sm-rtl:-4px 4px 0 var(--shadow);
--lift-md:5px 5px 0 var(--shadow);--lift-md-rtl:-5px 5px 0 var(--shadow);--lift-lg:8px 8px 0 var(--shadow);--lift-lg-rtl:-8px 8px 0 var(--shadow);
--lift-xs:3px 3px 0 var(--shadow);--lift-press:1px 1px 0 var(--shadow);
--blob1:46% 54% 50% 50%/55% 50% 50% 45%;--blob2:52% 48% 44% 56%/48% 56% 44% 52%;--blob3:50% 50% 56% 44%/44% 52% 48% 56%;
--r:1.4rem;--bw:3px;--gutter:clamp(16px,4vw,48px);--wrap:78rem;--measure:62ch;--target:44px;--band:clamp(2.75rem,2rem + 3.5vw,5rem);--gap:clamp(14px,1.8vw,24px)}
:lang(zh-Hant){--font-display:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;--font-text:system-ui,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;--font-hand:"Kaiti TC","BiauKai","PingFang TC",sans-serif}
:lang(zh-Hans){--font-display:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;--font-text:system-ui,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;--font-hand:"Kaiti SC","STKaiti","PingFang SC",sans-serif}
:lang(ja){--font-display:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;--font-text:system-ui,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;--font-hand:"Hiragino Maru Gothic ProN","Klee","Hiragino Sans",sans-serif}
:lang(ko){--font-display:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;--font-text:system-ui,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;--font-hand:"Nanum Pen Script","Apple SD Gothic Neo",sans-serif}
:lang(ar){--font-display:"Geeza Pro","Noto Kufi Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;--font-text:system-ui,"Geeza Pro","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;--font-hand:"Geeza Pro","Noto Kufi Arabic",sans-serif}
/* Atkinson Hyperlegible Next has no Vietnamese; Bricolage Grotesque does (both checked 2026-10-06). */
:lang(vi){--font-text:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;--font-hand:"Bricolage Grotesque",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background-color:var(--bg);color:var(--text);font:400 var(--s0)/1.6 var(--font-text);overflow-wrap:break-word}
/* confetti: only in the side margins of a wide window, never behind text or inside a card (the content column starts
at least 96px in from the edge from 90rem up; the dots sit within the outer 86px) */
@media (min-width:90rem){body{
background-image:radial-gradient(circle at 30% 18%,var(--dot1) 0 5px,transparent 6px),radial-gradient(circle at 66% 52%,var(--dot2) 0 4px,transparent 5px),radial-gradient(circle at 40% 84%,var(--dot3) 0 5px,transparent 6px),
radial-gradient(circle at 60% 18%,var(--dot3) 0 5px,transparent 6px),radial-gradient(circle at 30% 52%,var(--dot1) 0 4px,transparent 5px),radial-gradient(circle at 56% 84%,var(--dot2) 0 5px,transparent 6px);
background-size:96px 380px;background-repeat:repeat-y;
background-position:left 0 top 0,left 0 top 0,left 0 top 0,right 0 top 190px,right 0 top 190px,right 0 top 190px}}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--link);text-decoration-thickness:.1em;text-underline-offset:.2em}
a:hover{text-decoration-thickness:.18em}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.02em}
:lang(zh-Hant) :is(h1,h2,h3),:lang(zh-Hans) :is(h1,h2,h3),:lang(ja) :is(h1,h2,h3),:lang(ko) :is(h1,h2,h3){letter-spacing:.02em;line-height:1.3}
:lang(ar) :is(h1,h2,h3){letter-spacing:0;line-height:1.35}
/* the accent word: a marigold (p1) or mint (p2) highlighter stroke under the word, never colour alone */
h1 em,h2 em{font-style:normal;background:linear-gradient(transparent 62%,var(--sun) 62% 92%,transparent 92%);padding-inline:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
p{margin:0 0 1rem}
code{font:.92em/1.4 var(--font-mono)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-100px;z-index:30;background:var(--sun);color:var(--on-sun);padding:10px 18px;border:var(--bw) solid var(--line);border-radius:999px;font-weight:700}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.lede{font-size:var(--s1);line-height:1.5;max-width:46ch}
.muted{color:var(--muted)}
.small{font-size:var(--s-1)}
/* the hand-lettered note: a short kicker above a heading, in the note colour */
.eyebrow,.hand{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .6rem;list-style:none;margin:0 0 .6rem;padding:0;font:700 var(--s1)/1.3 var(--font-hand);color:var(--hand);letter-spacing:0}
.eyebrow li+li::before{content:"·";margin-inline-end:.6rem}
.hand.name-note{font-size:1.05rem;margin:-.35rem 0 1rem}
.hand.name-note::before{display:none}
.hand::before{content:"";width:1.4em;height:1.4em;flex:none;background:var(--hand);-webkit-mask:url(/brand/mark-paw.svg) center/contain no-repeat;mask:url(/brand/mark-paw.svg) center/contain no-repeat;rotate:-12deg}
/* sticker surfaces */
.sticker,.panel,.finder,.filters,.p-stat,.quote{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--lift)}
.panel{padding:clamp(18px,2.6vw,30px);margin-bottom:1.6rem}
.panel h2{font-size:var(--s1);margin-bottom:.8rem}
.tone-sun{background:var(--p-sun)}.tone-sky{background:var(--p-sky)}.tone-leaf{background:var(--p-leaf)}.tone-blush{background:var(--p-blush)}.tone-plum{background:var(--p-plum)}
[dir=rtl] :is(.sticker,.panel,.finder,.filters,.p-stat,.quote){box-shadow:var(--lift-rtl)}
/* buttons: marigold/mint for yes, berry/green for the one key action, surface for the rest */
.btn{--b:var(--sun);--f:var(--on-sun);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--target);padding:.55rem 1.35rem;
background:var(--b);color:var(--f);border:var(--bw) solid var(--line);border-radius:999px;box-shadow:var(--lift-sm);font:700 1.02rem/1.2 var(--font-text);text-decoration:none;cursor:pointer}
[dir=rtl] .btn{box-shadow:var(--lift-sm-rtl)}
.btn--apricot,.btn--key{--b:var(--key);--f:var(--on-key)}
.btn--ghost,.btn--light{--b:var(--surface);--f:var(--text)}
@media (prefers-reduced-motion:no-preference){
.btn{transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--lift)}
.btn:active{transform:translate(3px,3px);box-shadow:var(--lift-press)}
.card__photo{transition:transform .2s ease}
.card:hover .card__photo{transform:translateY(-3px)}
}
.chips,.regions{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--target);padding:.3rem 1rem;border:2px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);text-decoration:none;font-weight:700;font-size:.95rem}
a.chip:hover{background:var(--p-sun)}
.chip b{font-variant-numeric:tabular-nums;background:var(--sun);color:var(--on-sun);border-radius:999px;padding:0 .5rem;font-size:.85rem}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:.1rem .7rem;border:2px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-size:.84rem;font-weight:700}
.tag--age{background:var(--sun);color:var(--on-sun)}
/* header: a sticker strip with the Petnecto mark and wordmark */
.site-head{position:relative;z-index:10;background:var(--surface);border-bottom:var(--bw) solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1rem;min-height:76px}
.brand{display:inline-flex;align-items:center;gap:.55rem;min-height:var(--target);color:var(--text);text-decoration:none}
.brand__mark{width:44px;height:44px;flex:none;background:var(--logo);-webkit-mask:url(/brand/mark-bubble.svg) center/contain no-repeat;mask:url(/brand/mark-bubble.svg) center/contain no-repeat}
.brand__word{font:800 1.85rem/1 "Bricolage Grotesque",ui-rounded,system-ui,sans-serif;letter-spacing:-.035em;color:var(--text)}
.brand__word b{font-weight:800;color:var(--logo)}
/* the descriptor always sits with the mark and wordmark; it wraps to two short lines rather than push the tools off */
.brand__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.brand__desc{font:700 .72rem/1.15 var(--font-text);color:var(--muted);max-width:11rem;letter-spacing:.01em}
@media (max-width:29.99rem){.brand__desc{max-width:8.5rem;font-size:.68rem}}
.foot-brand p.foot-line{margin:.5rem 0 0;font:400 .95rem/1.5 var(--font-text);color:var(--foot-text)}
.foot-name{display:block;font-style:italic}
@media (prefers-reduced-motion:no-preference){.brand__mark{transition:rotate .2s ease;transform-origin:50% 90%}.brand:hover .brand__mark{rotate:-10deg}}
.nav{display:none;margin-inline-start:auto}
.nav ul{display:flex;gap:.2rem;list-style:none;margin:0;padding:0}
.nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 .85rem;border-radius:999px;color:var(--text);text-decoration:none;font-weight:700;font-size:.98rem;white-space:nowrap}
.nav a:hover{background:var(--p-sun)}
.nav a[aria-current]{background:var(--sun);color:var(--on-sun);box-shadow:inset 0 0 0 2px var(--line)}
.head-tools{display:flex;gap:.5rem;margin-inline-start:auto;align-items:center}
.pop{position:relative}
.pop>summary,.sl-link{list-style:none;display:inline-flex;align-items:center;gap:.4rem;min-height:var(--target);padding:0 .95rem;border-radius:999px;border:2px solid var(--line);cursor:pointer;font-weight:700;font-size:.95rem;color:var(--text);background:var(--surface);text-decoration:none}
.pop>summary::-webkit-details-marker{display:none}
.pop>summary svg,.sl-link svg{width:18px;height:18px;flex:none}
.pop[open]>summary{background:var(--p-sun)}
.sl-link b:empty{display:none}
.sl-link b{background:var(--sun);color:var(--on-sun);border-radius:999px;min-width:1.5rem;text-align:center;padding:0 .35rem;font-variant-numeric:tabular-nums}
.pop__panel{position:absolute;inset-inline-end:0;top:calc(100% + 10px);min-width:14rem;max-width:calc(100vw - 2 * var(--gutter));background:var(--surface);border:var(--bw) solid var(--line);
border-radius:var(--r);box-shadow:var(--lift);padding:.45rem;list-style:none;margin:0}
.pop__panel a{display:flex;align-items:center;min-height:var(--target);padding:0 .85rem;border-radius:.8rem;color:var(--text);text-decoration:none}
.pop__panel a:hover{background:var(--p-sun)}
.pop__panel a[aria-current]{font-weight:700;background:var(--sun);color:var(--on-sun)}
.pop__note{border-top:2px dotted var(--line);margin-top:.3rem;padding-top:.3rem}
.pop__note a{font-size:.92rem;color:var(--link)}
.pop>summary .short{display:none}
.pop>summary>span,.sl-link>span{white-space:nowrap}
@media (max-width:29.99rem){.pop>summary .full{display:none}.sl-link .full{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pop>summary .short{display:inline}.pop>summary,.sl-link{padding:0 .7rem}.menu>summary{min-width:var(--target);justify-content:center}
.brand__word{font-size:1.5rem}.brand__mark{width:38px;height:38px}}
.menu .pop__panel{min-width:16rem}
/* the header must fit every language: below 85rem the shortlist shows its heart and count (its name stays for
screen readers) and the language picker its short code; under 24rem the tools take their own row */
@media (max-width:84.99rem){.sl-link .full{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.sl-link{padding:0 .75rem}}
@media (min-width:75rem) and (max-width:84.99rem){.pop>summary .full{display:none}.pop>summary .short{display:inline}}
@media (max-width:23.99rem){.site-head .wrap{flex-wrap:wrap;gap:.45rem;padding-block:.5rem}.head-tools{width:100%;margin-inline-start:0;justify-content:flex-end}}
@media (min-width:75rem){.nav{display:block}.head-tools{margin-inline-start:.5rem}.menu{display:none}}
/* bands */
.band{padding-block:var(--band)}
.band__head{margin-bottom:clamp(1.4rem,3vw,2.4rem);display:grid;gap:.35rem}
.band__head h2{font-size:var(--s3)}
.band__head p{margin:0}
.band__foot{margin-top:clamp(1.6rem,3vw,2.4rem);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.band--mint{background:var(--p-sky);border-block:var(--bw) solid var(--line)}
.band--deep{background:var(--p-sun);border-block:var(--bw) solid var(--line)}
.watermark{display:none}
/* the paw trail: the brand glyph, repeated */
.paws{height:2.6rem;margin-block:.5rem;background:var(--paw);-webkit-mask:url(/brand/mark-paw.svg) 0 50%/2.4rem 2.4rem space no-repeat;mask:url(/brand/mark-paw.svg) 0 50%/2.4rem 2.4rem space no-repeat;-webkit-mask-repeat:space no-repeat;mask-repeat:space no-repeat}
/* the Porchlight home hero: words left, a collage of real listing photos right */
.p-hero{padding-block:clamp(1.8rem,4vw,3.6rem) clamp(1.5rem,3vw,2.5rem)}
.p-hero .wrap{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-areas:"copy" "art" "stats";align-items:center}
.p-hero__copy{grid-area:copy;min-width:0}
.p-hero__art{grid-area:art;min-width:0;align-self:start}
.p-hero__stats{grid-area:stats;min-width:0}
@media (min-width:60rem){.p-hero .wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy art" "stats art"}}
.p-hero h1{font-size:min(var(--s4),max(2.4rem,8.4vh));margin-bottom:.9rem;max-width:16ch}
.p-hero .lede{margin-bottom:1.3rem}
.finder{padding:clamp(14px,2vw,22px);max-width:40rem}
.finder label,.finder legend{display:block;font-weight:700;font-size:.98rem;margin-bottom:.4rem;padding:0}
.finder__row{display:flex;flex-wrap:wrap;gap:.6rem}
.finder input[type=search],.field input,.field select{min-width:0;min-height:var(--target);padding:.5rem 1rem;border:var(--bw) solid var(--line);border-radius:1rem;background:var(--bg);color:var(--text);font:inherit}
.finder input[type=search]{flex:1 1 11rem;min-height:52px;border-radius:999px;font-size:1.05rem}
.finder .btn{min-height:52px;padding-inline:1.6rem}
/* phones: the field gets the whole width so its placeholder is never cut; the button goes under it */
@media (max-width:29.99rem){.finder input[type=search]{flex-basis:100%}.finder .btn{flex:1 1 100%}}
.finder fieldset{border:0;margin:.8rem 0 0;padding:0;min-width:0}
.finder__hint{margin:.6rem 0 0;font-size:var(--s-1);color:var(--muted)}
.radio-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.radio-chips label{position:relative;display:inline-flex;margin:0;font-weight:700}
.radio-chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%}
.radio-chips span{display:inline-flex;align-items:center;min-height:var(--target);padding:.3rem 1rem;border:var(--bw) solid var(--line);border-radius:999px;background:var(--surface)}
.radio-chips input:hover+span{background:var(--p-sun)}
.radio-chips input:checked+span{background:var(--sun);color:var(--on-sun);box-shadow:var(--lift-xs)}
.radio-chips input:checked+span::before{content:"✓";margin-inline-end:.35rem;font-weight:800}
.radio-chips input:focus-visible+span{outline:4px solid var(--focus);outline-offset:3px}
.hero__popular{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.hero__popular>span{font-weight:700;font-size:.95rem;margin-inline-end:.2rem}
.p-stats{display:grid;gap:.9rem;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;max-width:40rem}
.p-stat{padding:.8rem .5rem;text-align:center;box-shadow:var(--lift-md)}
.p-stat b{display:block;font:800 var(--s2)/1 var(--font-display);font-variant-numeric:tabular-nums}
.p-stat span{display:block;font-size:var(--s-1);color:var(--muted);line-height:1.3;margin-top:.3rem}
.p-stats-note{margin:.7rem 0 0;font-size:.85rem;color:var(--muted)}
/* the collage: three real listing photos, blob-cropped, as stickers; the bubble mark as the porch light */
/* sized so the whole cluster (three photos, the mark, the note) is inside the first screen at 1512x749 */
.collage{position:relative;aspect-ratio:1.04;width:min(100%,32rem,calc((100svh - 10rem) * 1.04));margin-inline:auto;container-type:inline-size}
.collage__mark{position:absolute;inset:0 6% auto auto;width:21%;aspect-ratio:1;background:var(--logo);-webkit-mask:url(/brand/mark-bubble.svg) center/contain no-repeat;mask:url(/brand/mark-bubble.svg) center/contain no-repeat;rotate:8deg}
.pic{position:absolute;display:block;width:46%;aspect-ratio:1;border:var(--bw) solid var(--line);border-radius:var(--blob1);overflow:hidden;box-shadow:var(--lift);background:var(--photo-bg)}
.pic>*{position:absolute;inset:0}
.pic img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pic:nth-of-type(1){inset-inline-start:2%;top:4%;rotate:-6deg;background:var(--p-sun)}
.pic:nth-of-type(2){inset-inline-end:3%;top:24%;rotate:5deg;width:45%;border-radius:var(--blob2);background:var(--p-sky)}
.pic:nth-of-type(3){inset-inline-start:12%;bottom:0;rotate:2deg;width:42%;border-radius:var(--blob3);background:var(--p-leaf)}
.pic:focus-visible{outline-offset:6px}
.collage__note{position:absolute;inset-inline-end:0;bottom:0;rotate:-3deg;max-width:19ch;padding:.5rem .9rem;margin:0;text-align:center;background:var(--p-sun);font:700 clamp(.9rem,4cqi,1.2rem)/1.3 var(--font-hand);color:var(--text)}
/* phones: the three animals as a row above the words, so a real animal is on the first screen */
@media (max-width:59.99rem){
.p-hero .wrap{grid-template-areas:"art" "copy" "stats";gap:1rem}
.collage{aspect-ratio:auto;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 5%;container-type:normal}
.collage__mark{display:none}
.pic,.pic:nth-of-type(n){position:relative;inset:auto;width:27%;max-width:8.5rem;rotate:0deg;box-shadow:var(--lift-xs)}
.pic:nth-of-type(1){rotate:-4deg}.pic:nth-of-type(3){rotate:4deg}
.collage__note,.collage__note.sticker{position:static;rotate:0deg;flex-basis:100%;max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none;text-align:center;font:600 .8rem/1.3 var(--font-text);color:var(--muted)}
}
/* how it works: numbered step cards on pastel panels */
.how{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.how__col{min-width:0}
.how__col h3{font-size:var(--s2);margin-bottom:1.6rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem 1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));counter-reset:s}
.steps li{position:relative;counter-increment:s;padding:2rem 1.1rem 1.1rem;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--p-sun);box-shadow:var(--lift-md);min-width:0}
.steps li:nth-child(3n+2){background:var(--p-sky)}.steps li:nth-child(3n){background:var(--p-leaf)}
.steps li::before{content:counter(s);position:absolute;top:-1.15rem;inset-inline-start:1rem;width:2.5rem;height:2.5rem;display:grid;place-items:center;background:var(--sun);color:var(--on-sun);border:var(--bw) solid var(--line);border-radius:50%;font:800 1.1rem/1 var(--font-display)}
.steps strong{display:block;font:800 var(--s1)/1.2 var(--font-display);margin-bottom:.35rem}
.steps p{margin:0}
.steps li p+p{margin-top:.5rem}
.codebox{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.6rem 0 0;padding:.5rem .8rem;border-radius:.8rem;background:var(--surface);border:2px solid var(--line);font:600 .9rem/1.4 var(--font-mono);overflow-wrap:anywhere}
.codebox a{color:var(--link)}
.bubbles{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.bubbles li{background:var(--surface);color:var(--text);padding:.55rem 1rem;border:var(--bw) solid var(--line);border-radius:1.2rem 1.2rem 1.2rem .3rem;font-weight:700;max-width:100%;box-shadow:var(--lift-xs)}
[dir=rtl] .bubbles li{border-radius:1.2rem 1.2rem .3rem 1.2rem}
.how__more{margin:1.2rem 0 0}
details.how__more>summary{list-style:none;display:inline-flex}
details.how__more>summary::-webkit-details-marker{display:none}
/* numbers */
.nums{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.nums li{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--lift-md)}
.nums b{display:block;font:800 var(--s3)/1 var(--font-display);white-space:nowrap;font-variant-numeric:tabular-nums;margin-bottom:.35rem}
.nums span{color:var(--muted);font-size:.98rem}
.nums-note{margin:1.6rem 0 0;max-width:var(--measure);font-size:.95rem}
.ticker{display:none}
/* the matcher: three questions narrow the cards on the page with CSS alone (:has), and "See every match" asks the
store for all of them */
.fit__form{padding:clamp(16px,2.4vw,28px);margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.fit__qs{display:grid;gap:1.1rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.fit__qs fieldset{border:0;margin:0;padding:0;min-width:0}
.fit__qs legend{font:800 var(--s1)/1.25 var(--font-display);margin-bottom:.6rem;padding:0}
.fit__acts{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.3rem}
.fit__note{margin:1rem 0 0;font-size:var(--s-1);color:var(--muted);max-width:var(--measure)}
.fit__count{font-weight:700;margin:0}
.fit:has(input[name=species][value=Dog]:checked) .cards .card:not([data-species=Dog]),
.fit:has(input[name=species][value=Cat]:checked) .cards .card:not([data-species=Cat]),
.fit:has(input[name=size][value=Small]:checked) .cards .card:not([data-size=Small]),
.fit:has(input[name=size][value=Medium]:checked) .cards .card:not([data-size=Medium]),
.fit:has(input[name=size][value=Large]:checked) .cards .card:not([data-size=Large]),
.fit:has(input[name=age][value=Baby]:checked) .cards .card:not([data-age=Baby]),
.fit:has(input[name=age][value=Young]:checked) .cards .card:not([data-age=Young]),
.fit:has(input[name=age][value=Adult]:checked) .cards .card:not([data-age=Adult]),
.fit:has(input[name=age][value=Senior]:checked) .cards .card:not([data-age=Senior]){display:none}
/* pet cards: a big photo first, then the words; the whole card is the link. The photo is a rounded-rectangle sticker
at 4:3 (photo quality is what moves adoptions, Lampe & Witte 2015; more of the photo beats a tight crop), three
across at 1512 px so each photo is about 400 px wide (four across gave 294). Circles are kept for the hero trio,
the phone strip and the shortlist. */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:2.2rem var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.card{position:relative;display:flex;flex-direction:column;gap:.6rem;min-width:0;border-radius:var(--r)}
.card:focus-within{outline:4px solid var(--focus);outline-offset:6px}
/* the 4:3 is the photo area inside the sticker outline (content-box), so a 4:3 crop fills it exactly */
.card__photo{position:relative;box-sizing:content-box;aspect-ratio:4/3;width:calc(100% - 2 * var(--bw));overflow:hidden;border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--lift-md);background:var(--photo-tint,var(--photo-bg))}
.card:nth-child(3n+2) .card__photo{background:var(--photo-tint,var(--p-sky))}
.card:nth-child(3n) .card__photo{background:var(--photo-tint,var(--p-leaf))}
[dir=rtl] .card__photo{box-shadow:var(--lift-md-rtl)}
.card__photo img,.card__photo .noimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* until photo analysis gives the animal's box, bias the crop up: shelter photos usually have the head in the upper
half. With the box, src/photo-meta.ts places the recipe's 4:3 crop (crop_card) in the frame instead. */
.card__photo img{object-position:50% 35%}
.card__photo img[data-crop],.pic img[data-crop]{inset:auto}
.noimg{position:relative;display:grid;place-items:center;width:100%;height:100%}
.noimg .face{width:auto;height:78%;max-width:78%}
.noimg span{position:absolute;bottom:7%;inset-inline:12%;text-align:center;font:700 .78rem/1.2 var(--font-text);color:var(--text);background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:.15rem .5rem}
.face .o{stroke:var(--line)}
.face .k{fill:var(--line)}
.card__body{display:flex;flex-direction:column;gap:.45rem;padding:.2rem .2rem 0;flex:1;min-width:0}
.card h3{font-size:var(--s1);line-height:1.15;overflow-wrap:anywhere}
.card h3 a{color:var(--text);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.card h3 a:focus-visible{outline:none}
.card__breed{margin:0;color:var(--muted);font-size:.93rem}
.card__tags{display:flex;flex-wrap:wrap;gap:.35rem}
.card__note{margin:0;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__note b{color:var(--muted);font-weight:700}
.card__where{margin:auto 0 0;padding-top:.45rem;font-size:.86rem;color:var(--muted);border-top:2px dotted var(--line)}
/* Save: above the card's stretched link, so it is its own control */
.save{position:absolute;top:.3rem;inset-inline-end:.3rem;z-index:2;display:inline-flex}
.save input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.save span{display:inline-flex;align-items:center;gap:.3rem;min-height:var(--target);padding:0 .9rem;border:var(--bw) solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-weight:700;font-size:.9rem;box-shadow:var(--lift-xs)}
.save span::before{content:"♡";font-size:1.05rem;line-height:1}
.save input:checked+span{background:var(--sun);color:var(--on-sun)}
.save input:checked+span::before{content:"♥"}
.save input:focus-visible+span{outline:4px solid var(--focus);outline-offset:3px}
.save--inline{position:static}
/* phones: one card per row, the photo the full width of the column */
/* shelter call to action */
.split{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.split>*{min-width:0}
@media (min-width:56rem){.split{grid-template-columns:1.1fr .9fr}}
.split h2{font-size:var(--s3);margin-bottom:1rem}
.split ul{margin:0 0 1.5rem;padding-inline-start:1.2rem;display:grid;gap:.45rem;max-width:var(--measure)}
.split figure{margin:0;position:relative}
.split figure .pic{position:relative;inset:auto;width:min(100%,24rem);rotate:3deg;margin-inline:auto}
.split figcaption{margin-top:1.2rem;font-size:.88rem;text-align:center}
.pin-mark{display:inline-block;width:3.2rem;height:3.2rem;background:var(--logo);-webkit-mask:url(/brand/mark-pin.svg) center/contain no-repeat;mask:url(/brand/mark-pin.svg) center/contain no-repeat;vertical-align:middle}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}
/* inner page heads: a pastel band */
.pagehead{background:var(--p-sky);border-bottom:var(--bw) solid var(--line);padding-block:clamp(1.6rem,1.1rem + 2.2vw,3rem);position:relative}
.pagehead h1{font-size:var(--s3)}
.pagehead p{margin:.6rem 0 0;max-width:var(--measure)}
/* results: one slim line, the title and the count */
.pagehead--slim{padding-block:clamp(.7rem,.5rem + .8vw,1.2rem)}
.pagehead--slim h1{font-size:var(--s2);display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .8rem}
.pagehead__count{font:600 var(--s0)/1.3 var(--font-text);letter-spacing:0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.2rem .5rem;list-style:none;margin:0 0 .6rem;padding:0;font-size:.95rem}
.crumbs li+li::before{content:"›";margin-inline-end:.5rem}
[dir=rtl] .crumbs li+li::before{content:"‹"}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--target);color:var(--text);font-weight:700}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:var(--target);color:var(--text)}
/* filters: one row (words, region, species, Show), then "More filters" (a native <details>, open when one of its
filters is set). On a phone: words + Show, the species chips, then region + More filters: three short rows, so a
whole animal card is still on the first screen at 390 x 844. */
.filters{padding:clamp(10px,1.4vw,18px) clamp(12px,1.8vw,22px);margin-block:clamp(.7rem,1.6vw,1.4rem)}
/* below 64rem a wrapping row of rows: words + magnifier, the species chips, region + More filters (each row takes
the room it needs; on the narrowest phones region and More filters stack) */
.filters--row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.filters--row>.filters__where{flex:1 1 calc(100% - 64px);min-width:0}
.filters--row>.filters__species{flex:1 1 100%}
.filters--row>.filters__region{flex:1 1 8.5rem;min-width:0}
.filters--row>.more-filters{flex:0 1 auto}
.filters--row>.more-filters[open]{flex:1 1 100%}
.filters__where{grid-area:where}.filters__region{grid-area:region}.filters__species{grid-area:species}.filters__go--phone{grid-area:go}.filters__go--wide{grid-area:go2;display:none}.more-filters{grid-area:more}
.field{display:grid;gap:.3rem;min-width:0}
.field>span,.field legend{font-weight:700;font-size:.95rem;padding:0}
.field input,.field select{width:100%}
.field__hint{font-size:.82rem;color:var(--muted)}
.filters fieldset{border:0;margin:0;padding:0;min-width:0}
.filters__go .btn{min-height:var(--target)}
.filters__go-icon{display:none;width:22px;height:22px}
/* a phone: the button is a magnifier (its name, "Show pets", is its aria-label, the same words as the text it
shows on wider screens, for screen readers and voice control) so the
words get the row */
@media (max-width:33.99rem){
.filters__go .btn{min-width:var(--target);width:52px;min-height:48px;padding:0}
.filters__go-icon{display:block}
.filters__go-text{display:none}
.pagehead--slim h1{font-size:1.35rem}
.pagehead__count{font-size:.95rem}
.results-meta__side a{min-height:36px}
}
/* phone: the hint, the species legend and the region label are kept for screen readers only (the chips, the
placeholder and the selected region say the same thing on screen) */
@media (max-width:63.99rem){
.filters--row .field__hint,.filters__species>legend,.filters__region>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.filters--row .radio-chips{gap:.4rem}
.filters--row .radio-chips span{min-height:var(--target);padding:.2rem .7rem;font-size:.9rem}
.more-filters>summary{white-space:nowrap}
.filters__region select{padding-inline:.7rem}
.more-filters__body{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
}
@media (min-width:64rem){
.filters--row{display:grid;gap:.6rem var(--gap);grid-template-columns:minmax(14rem,1.3fr) auto minmax(10rem,.8fr) auto;grid-template-areas:"where species region go2" "where more more more";align-items:start}
.filters__go--phone{display:none}.filters__go--wide{display:block}
.filters__go{padding-top:calc(.95rem * 1.6 + .3rem)}
.more-filters{align-self:end}
}
.more-filters{min-width:0}
.more-filters>summary{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--target);padding:0 .9rem;border:2px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-weight:700;cursor:pointer;list-style:none}
.more-filters>summary::-webkit-details-marker{display:none}
.more-filters>summary::after{content:"+";font-size:1.2rem;line-height:1}
.more-filters[open]>summary::after{content:"−"}
.more-filters>summary b{background:var(--sun);color:var(--on-sun);border-radius:999px;padding:0 .45rem;font-size:.85rem}
.more-filters__body{display:grid;gap:.6rem var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr));margin-top:.6rem}
/* wide screens: an open "More filters" lays its fields out beside its button, one line */
@media (min-width:64rem){@supports selector(::details-content){
.more-filters[open]{display:flex;align-items:end;gap:var(--gap)}
.more-filters[open]::details-content{flex:1;min-width:0}
.more-filters[open] .more-filters__body{margin-top:0;grid-template-columns:repeat(3,minmax(0,12rem))}
}}
.results-meta__side{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;margin:0}
.results-meta__side a{display:inline-flex;align-items:center;min-height:var(--target);font-weight:700}
@media (max-width:33.99rem){
.results-meta{flex-wrap:nowrap;margin-bottom:.7rem}
.results-meta h2{font-size:1.3rem;flex:1;min-width:0}
.results-meta__side{flex:none}
.results-meta__side .muted{display:none}
/* results on a phone: the photo full width, the words short (the shelter's own note is on the animal's page) */
.cards{gap:1.6rem}
.cards .card__note{display:none}
.cards .card h3{font-size:1.15rem}
/* the shelter's number and the size tag share a line */
.cards .card__body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.35rem .7rem}
.cards .card__body>h3,.cards .card__where{flex-basis:100%}
.cards .card__where{margin-top:.1rem}
.pagehead--slim{padding-block:.6rem}
}
.results-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;align-items:center;margin-bottom:1rem}
.results-meta h2{font-size:var(--s2)}
.results-meta h2:focus{outline:none}
.results-meta h2:focus-visible{outline:4px solid var(--focus);outline-offset:4px}
.band--mint .lede,.band--mint p{max-width:var(--measure)}
#support-title{font-size:var(--s3);margin-bottom:.6rem}
.notice{border:var(--bw) solid var(--line);background:var(--p-sun);padding:.9rem 1.1rem;border-radius:1rem;margin-block:1rem}
.pager{margin-top:clamp(1.6rem,3vw,2.6rem)}
.pager ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;align-items:center;justify-content:center}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:var(--target);min-height:var(--target);padding:0 .85rem;border-radius:999px;border:2px solid var(--line);text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums}
.pager a{background:var(--surface);color:var(--text)}
.pager a:hover{background:var(--p-sun)}
.pager [aria-current]{background:var(--sun);color:var(--on-sun);box-shadow:var(--lift-xs)}
.pager .gap{border:0;min-width:1.5rem;padding:0}
/* one pet */
.pet{display:grid;gap:clamp(1.6rem,4vw,3.2rem);padding-block:clamp(1.8rem,4vw,3.2rem)}
.pet>*{min-width:0}
@media (min-width:56rem){.pet{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.pet__photo{margin:0;position:relative}
@media (min-width:56rem){.pet__photo{position:sticky;top:1.2rem}}
/* the big photo is never circle-cropped: a rounded rectangle at the photo's own shape, no crop; a very tall photo is
capped and shown whole (contain) on a panel colour */
.pet__photo img{width:100%;height:auto;max-height:min(42rem,82svh);object-fit:contain;border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--lift-lg);background:var(--p-sun)}
.pet__photo .noimg{width:100%;aspect-ratio:1;object-fit:cover;border:var(--bw) solid var(--line);border-radius:var(--blob1);box-shadow:var(--lift-lg);background:var(--photo-bg)}
[dir=rtl] :is(.pet__photo img,.pet__photo .noimg){box-shadow:var(--lift-lg-rtl)}
.pet__photo .noimg{height:auto;display:grid}
.panel .steps{grid-template-columns:minmax(0,1fr);gap:1.7rem}
.pet__photo figcaption{margin-top:1.1rem;font:700 1rem/1.35 var(--font-hand);color:var(--hand);text-align:center}
.pet__tools{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:1.2rem}
.pet h2{font-size:var(--s2);margin:0 0 .9rem}
.pet__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.facts{display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);margin:0 0 1.6rem}
.facts dd{overflow-wrap:anywhere}
.facts dd a,.codebox a{display:inline-flex;align-items:center;min-height:var(--target)}
@media (max-width:24rem){.facts{grid-template-columns:minmax(0,1fr)}.facts dt{border-bottom:0;padding-bottom:0}}
.facts dt,.facts dd{margin:0;padding:.6rem 0;border-bottom:2px dotted var(--line)}
.facts dt{font-weight:700;padding-inline-end:1.5rem;color:var(--muted)}
.quote{margin:0 0 1.6rem;padding:1.1rem 1.25rem;background:var(--p-blush)}
.quote p{margin:0}
.quote b{display:block;font:700 1.05rem/1.2 var(--font-hand);color:var(--hand);margin-bottom:.35rem}
.attrib,.foot-base,.results-note{font-size:.88rem;color:var(--muted);overflow-wrap:anywhere}
/* the shortlist page */
.sl-print-foot{display:none}
#sl-list:empty+.sl-next{display:none}
.quote-note{margin:0 0 1.2rem;padding:.8rem 1rem;border:2px dashed var(--line);border-radius:1rem;font-size:.95rem}
.sl-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1rem}
.sl-list li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;align-items:center;padding:.8rem 1rem;background:var(--surface);border:var(--bw) solid var(--line);border-radius:1rem}
.sl-list img,.sl-list .sl-ph{width:5rem;height:5rem;object-fit:cover;border:2px solid var(--line);border-radius:var(--blob1);background:var(--p-sun)}
.sl-list a{font:800 1.15rem/1.2 var(--font-display)}
.sl-list p{margin:.2rem 0 0;font-size:.92rem;color:var(--muted)}
/* prose pages (privacy, terms, spec) */
.prose{padding-block:clamp(2rem,4vw,3.5rem)}
.prose>*{max-width:var(--measure)}
.prose h2{font-size:var(--s2);margin:2.2rem 0 .8rem}
.prose ul{padding-inline-start:1.2rem}
.prose li{margin:.35rem 0}
.prose pre{max-width:100%;overflow:auto;background:var(--surface);border:2px solid var(--line);border-radius:1rem;padding:14px;font:.9rem/1.5 var(--font-mono)}
.prose table{width:100%;max-width:var(--wrap);border-collapse:collapse;font-size:.95rem}
.prose td{border-top:2px dotted var(--line);padding:.7rem .5rem;vertical-align:top}
.table-scroll{overflow-x:auto;max-width:100%}
/* footer: cocoa (p1) or pine (p2), with a scalloped top edge */
.site-foot{position:relative;margin-top:2.5rem;background:var(--foot-bg);color:var(--foot-text);padding-block:clamp(2.6rem,5vw,4rem) 2rem;font-size:.97rem}
.site-foot::before{content:"";position:absolute;inset:-14px 0 auto 0;height:15px;background:radial-gradient(circle at 14px 15px,var(--foot-bg) 13px,transparent 14px) 0 0/28px 15px repeat-x}
.site-foot a{color:var(--foot-text);display:inline-flex;align-items:center;min-height:var(--target)}
.site-foot :focus-visible{outline-color:var(--foot-focus)}
.foot-grid{display:grid;gap:2rem var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.foot-brand{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-bottom:.4rem}
.foot-brand .brand__mark{width:56px;height:56px;background:var(--foot-accent)}
.foot-brand p{margin:0;font:800 clamp(1.25rem,1rem + .9vw,1.7rem)/1.25 var(--font-display);color:var(--foot-text)}
.foot-brand p em{font-style:normal;color:var(--foot-em,var(--foot-accent))}
.site-foot h2{font:700 1.15rem/1.3 var(--font-hand);color:var(--foot-accent);margin-bottom:.35rem;letter-spacing:0}
.site-foot ul{list-style:none;margin:0;padding:0}
.foot-base{margin-top:2.2rem;padding-top:1.2rem;border-top:2px dotted var(--foot-text);display:grid;gap:.3rem;font-size:.86rem;color:var(--foot-text)}
.foot-base p{margin:0}
@media print{
.sl-print-foot{display:block;margin-top:1.5rem;font-size:.9rem}
.site-head,.site-foot,.skip,.sl-tools,.save{display:none!important}
body{background:#fff;color:#000}
.sl-list li{break-inside:avoid;border-color:#000}
}