/* Tailwisp design system */
:root{
  --bg:#F3F7F9;--surface:#fff;--surface2:#E9F1F4;--ink:#14233A;--muted:#4F5F76;--line:#D8E3E9;
  --teal:#0E8C8F;--teal-d:#0A6A6D;--sun:#FFC43D;--coral:#F0624D;--link:#0A6A6D;--on-teal:#fff;
  --c-breeds:#7A5AF8;--c-training:#0E8C8F;--c-behavior:#E5533F;--c-grooming:#C93D8F;--c-health:#2F7DE1;--c-puppies:#D99000;--c-nutrition:#3C9A4A;
  --shadow:0 1px 2px rgba(20,35,58,.06),0 10px 28px -12px rgba(20,35,58,.18);
  --max:1180px;--read:700px;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,-apple-system,sans-serif;
  --text:'Literata',Georgia,'Times New Roman',serif;
  --ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0C1626;--surface:#13233A;--surface2:#192C47;--ink:#EAF1F6;--muted:#A3B4C8;--line:#233752;
  --teal:#35C2C4;--teal-d:#6FDCDE;--link:#6FDCDE;--on-teal:#0C1626;
  --c-breeds:#A592FF;--c-training:#4FD0D2;--c-behavior:#FF8A78;--c-grooming:#F27AC0;--c-health:#6AA7FF;--c-puppies:#FFC43D;--c-nutrition:#6FCB7C;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6);color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0C1626;--surface:#13233A;--surface2:#192C47;--ink:#EAF1F6;--muted:#A3B4C8;--line:#233752;
    --teal:#35C2C4;--teal-d:#6FDCDE;--link:#6FDCDE;--on-teal:#0C1626;
    --c-breeds:#A592FF;--c-training:#4FD0D2;--c-behavior:#FF8A78;--c-grooming:#F27AC0;--c-health:#6AA7FF;--c-puppies:#FFC43D;--c-nutrition:#6FCB7C;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6);color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.72 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.08;margin:.25em 0 .35em;font-weight:800}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.2;margin:2em 0 .55em}
h3{font-size:1.22rem;line-height:1.3;margin:1.6em 0 .4em}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--teal)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.read{max-width:var(--read);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--surface);padding:8px 14px;z-index:200;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
kbd{font:600 .72rem var(--ui);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:var(--surface2);color:var(--muted)}

/* ---------- header & mega menu ---------- */
header.site{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand .mark{width:38px;height:38px;flex:none}
.brand .wm{font:800 1.5rem var(--display);letter-spacing:-.04em;color:var(--ink)}
.brand .wm i{font-style:normal;font-weight:500;color:var(--teal-d)}
.wisp{transform-origin:26px 27px;transform-box:view-box}
.brand:hover .wisp,.hero .mark-big .wisp{animation:wag .7s ease-in-out 3}
@keyframes wag{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(12deg)}}
nav.primary{flex:1;min-width:0}
nav.primary>ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;justify-content:center}
nav.primary>ul>li{position:static}
header.site .bar{position:relative}
.top{display:inline-flex;align-items:center;gap:3px;font:600 .95rem var(--ui);color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:10px;position:relative}
.top::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:3px;background:var(--c,var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .25s}
li:hover>.top::after,li:focus-within>.top::after,.top[aria-current]::after{transform:scaleX(1)}
.top:hover{color:var(--ink)}
.chev{width:22px;height:22px;margin-left:-6px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:6px;padding:0}
.chev::before{content:"";display:block;width:7px;height:7px;margin:0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
li.open>.chev::before{transform:rotate(225deg) translateY(-2px)}
.mega{position:absolute;left:20px;right:20px;top:calc(100% - 6px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px;display:none;grid-template-columns:1.1fr 1.4fr 1.3fr;gap:22px}
li.open>.mega,li:focus-within>.mega{display:grid;animation:pop .18s ease-out}
@media (hover:hover){li:hover>.mega{display:grid;animation:pop .18s ease-out}}
@keyframes pop{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mega h3,.mega .mh{font:700 .78rem var(--ui);letter-spacing:.02em;color:var(--muted);margin:0 0 8px}
.mega ul{list-style:none;margin:0;padding:0}
.mega li a{display:block;padding:6px 8px;margin:0 -8px;border-radius:8px;font:500 .92rem/1.3 var(--ui);color:var(--ink);text-decoration:none}
.mega li a:hover{background:var(--surface2)}
.mega .intro-col{background:color-mix(in srgb,var(--c,var(--teal)) 12%,var(--surface));border-radius:14px;padding:16px}
.mega .intro-col strong{display:block;font:800 1.25rem var(--display);margin-bottom:6px}
.mega .intro-col p{margin:0 0 12px;font:.88rem/1.5 var(--ui);color:var(--muted)}
.mega .all{display:inline-block;background:var(--c,var(--teal));color:#fff;font:700 .85rem var(--ui);padding:8px 14px;border-radius:999px;text-decoration:none}
.mega .feat a{padding:8px;border:1px solid var(--line);margin:0 0 8px;border-radius:10px}
.mega .feat small{display:block;color:var(--muted);font-weight:400;margin-top:2px}
.actions{display:flex;align-items:center;gap:8px;flex:none}
.sbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:500 .9rem var(--ui);padding:8px 12px;border-radius:999px;cursor:pointer;min-width:0}
.sbtn:hover{border-color:var(--teal);color:var(--ink)}
.sbtn svg,.ibtn svg{width:18px;height:18px;flex:none}
.ibtn{width:40px;height:40px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0}
.ibtn:hover{border-color:var(--teal)}
#burger{display:none}
.t-moon{display:none}:root[data-theme=dark] .t-sun{display:none}:root[data-theme=dark] .t-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .t-sun{display:none}:root:not([data-theme=light]) .t-moon{display:block}}
.progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:linear-gradient(90deg,var(--teal),var(--sun));transform:scaleX(0);transform-origin:left;pointer-events:none}
@media (max-width:1020px){
  nav.primary{display:none}#burger{display:grid}.sbtn kbd{display:none}.actions{margin-left:auto}
}
@media (max-width:520px){.sbtn span{display:none}.sbtn{padding:0;width:40px;height:40px;justify-content:center}}

/* drawer */
.drawer{position:fixed;inset:0;z-index:150;background:var(--bg);overflow:auto;padding:18px 20px 40px;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.drawer.on{transform:none;visibility:visible}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.drawer details{border-bottom:1px solid var(--line)}
.drawer summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 4px;font:800 1.35rem var(--display)}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.drawer summary b{margin-left:auto;font:600 .8rem var(--ui);color:var(--muted)}
.drawer ul{list-style:none;margin:0 0 14px;padding:0 0 0 24px}
.drawer ul a{display:block;padding:8px 0;font:500 1rem var(--ui);color:var(--ink);text-decoration:none}
.drawer .tools-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.drawer .tools-row a{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;color:var(--ink);font:700 .95rem var(--ui)}

/* command palette */
.palette{position:fixed;inset:0;z-index:300;background:rgba(8,16,28,.55);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.palette.on{display:flex}
.pbox{width:min(680px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:hidden;animation:pop .18s ease-out}
.pin{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.pin input{flex:1;border:0;outline:0;background:none;font:500 1.1rem var(--ui);color:var(--ink);min-width:0}
.pchips{display:flex;gap:6px;padding:10px 16px;overflow:auto;border-bottom:1px solid var(--line)}
.pchips button{flex:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 .8rem var(--ui);padding:5px 12px;border-radius:999px;cursor:pointer}
.pchips button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.plist{max-height:min(52vh,420px);overflow:auto;padding:8px;list-style:none;margin:0}
.plist a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.plist li[aria-selected=true] a,.plist a:hover{background:var(--surface2)}
.plist .dot{width:10px;height:10px;border-radius:50%;margin-top:7px;flex:none;background:var(--c)}
.plist strong{display:block;font:700 .98rem/1.3 var(--ui)}
.plist small{display:block;font:.82rem/1.4 var(--ui);color:var(--muted);margin-top:2px}
.pfoot{display:flex;gap:16px;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line);font:.78rem var(--ui);color:var(--muted)}
.pempty{padding:28px 20px;text-align:center;color:var(--muted);font:.95rem var(--ui)}

/* ---------- shared ---------- */
.crumbs{font:.85rem var(--ui);color:var(--muted);padding:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:'/';margin-right:6px;opacity:.5}
.crumbs a{color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;font:700 .78rem var(--ui);color:var(--c,var(--teal-d))}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--teal))}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:var(--on-teal);padding:12px 22px;border-radius:999px;font:700 1rem var(--ui);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:var(--teal-d);color:var(--on-teal);transform:translateY(-1px)}
.btn.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.alt:hover{box-shadow:inset 0 0 0 2px var(--teal);background:transparent;color:var(--ink)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin:22px 0 8px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 18px 18px 22px;text-decoration:none;color:var(--ink);display:block;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c,var(--teal))}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--c,var(--teal)) 50%,var(--line));color:var(--ink)}
.card h3{margin:6px 0;font-size:1.08rem;line-height:1.3}
.card p{margin:0;font:.92rem/1.5 var(--ui);color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
[data-c=breeds]{--c:var(--c-breeds)}[data-c=training]{--c:var(--c-training)}[data-c=behavior]{--c:var(--c-behavior)}[data-c=grooming]{--c:var(--c-grooming)}[data-c=health]{--c:var(--c-health)}[data-c=puppies]{--c:var(--c-puppies)}[data-c=nutrition]{--c:var(--c-nutrition)}
.count{color:var(--muted);font-weight:500}
.intro{font:1.15rem/1.6 var(--text);color:var(--muted);max-width:760px}

/* ---------- home ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 60px;background:radial-gradient(900px 420px at 90% -10%,color-mix(in srgb,var(--teal) 28%,transparent),transparent 70%),radial-gradient(600px 300px at 0% 110%,color-mix(in srgb,var(--sun) 24%,transparent),transparent 70%)}
.hero .grid2{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:-.045em;margin:.1em 0 .3em;max-width:12ch}
.hero .lead{font:1.25rem/1.55 var(--text);color:var(--muted);max-width:560px;margin:0 0 26px}
.ask{display:flex;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--ink);border-radius:18px;padding:8px 8px 8px 20px;max-width:620px;box-shadow:6px 6px 0 var(--sun);cursor:text}
.ask:focus-within{outline:3px solid var(--teal);outline-offset:3px}
.ask input{flex:1;border:0;outline:0;background:none;font:500 1.1rem var(--ui);color:var(--ink);min-width:0;padding:10px 0}
.ask button{flex:none}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:640px}
.quick a{font:600 .85rem var(--ui);text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:6px 12px;border-radius:999px}
.quick a:hover{border-color:var(--teal);color:var(--teal-d)}
.mark-big{width:100%;max-width:340px;justify-self:center;filter:drop-shadow(0 24px 30px rgba(14,140,143,.3))}
.mark-big .mark{width:100%;height:auto}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px;font:.9rem var(--ui);color:var(--muted)}
.stats b{display:block;font:800 1.9rem var(--display);color:var(--ink);letter-spacing:-.03em}
@media (max-width:820px){.hero .grid2{grid-template-columns:1fr}.mark-big{display:none}.hero{padding-top:36px}}
.sec{padding:56px 0 8px}
.sec>h2:first-child,.sec .wrap>h2:first-child{margin-top:0}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.sec-h p{margin:0;font:1rem var(--ui);color:var(--muted)}
.bento{display:grid;gap:14px;grid-template-columns:repeat(6,1fr);margin-top:22px}
.tile{position:relative;overflow:hidden;border-radius:22px;padding:24px;text-decoration:none;color:#fff;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--c);isolation:isolate;transition:transform .2s}
.tile:hover{transform:translateY(-4px) rotate(-.4deg);color:#fff}
.tile::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);z-index:-1;transition:transform .35s}
.tile:hover::after{transform:scale(1.5)}
.tile h3{margin:0 0 6px;font:800 1.7rem var(--display);color:#fff}
.tile p{margin:0;font:.92rem/1.45 var(--ui);color:rgba(255,255,255,.92)}
.tile .n{position:absolute;left:24px;top:20px;font:700 .8rem var(--ui);background:rgba(0,0,0,.2);padding:3px 10px;border-radius:999px}
.tile:nth-child(1){grid-column:span 3;min-height:240px}.tile:nth-child(2){grid-column:span 3;min-height:240px}
.tile:nth-child(n+3){grid-column:span 2}
.tile[data-c=puppies]{color:#241700}.tile[data-c=puppies] h3,.tile[data-c=puppies] p{color:#241700}
:root[data-theme=dark] .tile{color:#0C1626}:root[data-theme=dark] .tile h3,:root[data-theme=dark] .tile p{color:#0C1626}
@media (max-width:820px){.bento{grid-template-columns:1fr 1fr}.tile:nth-child(n){grid-column:span 1;min-height:170px}.tile:nth-child(1){grid-column:span 2}}
@media (max-width:480px){.bento{grid-template-columns:1fr}.tile:nth-child(n){grid-column:span 1}}
.paths{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:22px}
.path{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.path h3{margin:0 0 4px;font-size:1.15rem}
.path p{margin:0 0 10px;font:.9rem var(--ui);color:var(--muted)}
.path a{display:block;font:600 .92rem var(--ui);padding:5px 0;text-decoration:none;border-top:1px solid var(--line)}
.toolstrip{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:22px}
.tool{display:flex;gap:14px;align-items:flex-start;background:var(--ink);color:var(--bg);border-radius:18px;padding:20px;text-decoration:none;transition:transform .2s}
.tool:hover{transform:translateY(-3px);color:var(--bg)}
.tool .ic{font-size:1.9rem;line-height:1}
.tool b{display:block;font:800 1.1rem var(--display)}
.tool span{font:.88rem/1.4 var(--ui);opacity:.85}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips a,.chips button{font:600 .9rem var(--ui);text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:7px 14px;border-radius:999px;cursor:pointer}
.chips a:hover,.chips button:hover{border-color:var(--c,var(--teal));}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- hub pages ---------- */
.hub-head{padding:30px 0 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--teal)) 14%,transparent),transparent)}
.hub-head h1{max-width:20ch}
.hubtools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:20px 0 6px;position:sticky;top:72px;z-index:20;background:var(--bg);padding:10px 0;border-bottom:1px solid var(--line)}
.filter{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 14px}
.filter input{border:0;outline:0;background:none;flex:1;font:500 1rem var(--ui);color:var(--ink);min-width:0}
.jump{display:flex;gap:6px;overflow:auto;max-width:100%;padding-bottom:2px}
.jump a{flex:none;font:600 .82rem var(--ui);text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--surface);padding:5px 12px;border-radius:999px}
.jump a:hover{border-color:var(--c)}
.cluster{margin-top:34px}
.cluster h2{margin:0 0 4px;display:flex;gap:10px;align-items:baseline}
.cluster .grid{margin-top:14px}
.empty{display:none;padding:40px 0;text-align:center;color:var(--muted);font:1.05rem var(--ui)}

/* ---------- article ---------- */
.art-layout{display:grid;grid-template-columns:minmax(0,var(--read)) 240px;gap:56px;justify-content:center;max-width:1100px;margin:0 auto;padding:0 20px}
.art-layout .read{padding:0;margin:0}
.toc{position:sticky;top:96px;align-self:start;font:.85rem/1.4 var(--ui);max-height:calc(100vh - 120px);overflow:auto;padding-top:62px}
.toc h2{font:800 .8rem var(--ui);margin:0 0 10px;color:var(--muted);letter-spacing:.02em}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;padding:5px 0 5px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--c,var(--teal));font-weight:700}
.toc .share{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap}
.toc .share button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;font:600 .8rem var(--ui);padding:6px 12px;cursor:pointer}
.toc .share button:hover{border-color:var(--teal)}
@media (max-width:1060px){.art-layout{display:block;max-width:var(--read)}.toc{display:none}}
.read h1{margin-top:.2em}
.read .meta{font:.88rem var(--ui);color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 24px}
.read p,.read li{max-width:68ch}
.read>article p,.read p{margin:0 0 1.15em}
.read ul,.read ol{padding-left:1.3em}
.read li{margin:.3em 0}
.read table{border-collapse:collapse;width:100%;font:.95rem var(--ui);margin:1.4em 0}
.read th,.read td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.read h2{padding-top:.4em;position:relative}
.read h2::before{content:"";display:block;width:34px;height:4px;border-radius:4px;background:var(--c,var(--teal));margin-bottom:12px}
.takeaways{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--c,var(--teal));border-radius:14px;padding:6px 22px 14px;margin:0 0 28px;box-shadow:var(--shadow)}
.takeaways h2{font-size:1.05rem;margin:14px 0 6px}
.takeaways h2::before{display:none}
.takeaways ul{margin:0;padding-left:1.1em;font:.98rem/1.55 var(--ui)}
.facts{background:var(--ink);color:var(--bg);border-radius:18px;padding:20px 22px;margin:0 0 30px}
.facts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 26px;margin:0}
.facts dt{font:600 .78rem var(--ui);opacity:.7}
.facts dd{margin:0;font:700 1rem var(--ui)}
.meter{display:inline-flex;gap:4px;vertical-align:middle}
.meter i{width:22px;height:8px;border-radius:4px;background:rgba(255,255,255,.25)}
.meter i.f{background:var(--sun)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:0 18px}
.faq summary{cursor:pointer;font:700 1.02rem var(--display);padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--c,var(--teal));transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px;font:1rem/1.65 var(--text)}
.disclaimer{font:.9rem/1.55 var(--ui);color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:14px 16px;margin-top:34px}
.related{margin-top:56px;padding-bottom:20px}
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:40px 0 0}
.nextprev a{display:block;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);font:700 .95rem/1.35 var(--display)}
.nextprev small{display:block;font:600 .75rem var(--ui);color:var(--muted);margin-bottom:4px}
.nextprev a:last-child{text-align:right}
.totop{position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);cursor:pointer;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translateY(8px)}
.totop.on{opacity:1;pointer-events:auto;transform:none}

/* ---------- tools ---------- */
.tool-box{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow);margin:22px 0 8px}
.tool-box label,.tool-box legend{font:700 .95rem var(--ui);display:block;margin-bottom:8px;padding:0}
.tool-box fieldset{border:0;padding:0;margin:0 0 22px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{margin:0;cursor:pointer}
.opts input{position:absolute;opacity:0}
.opts span{display:inline-block;border:2px solid var(--line);border-radius:999px;padding:8px 16px;font:600 .92rem var(--ui);background:var(--bg);transition:all .15s}
.opts input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.opts input:focus-visible+span{outline:3px solid var(--sun)}
.tool-box input[type=number],.tool-box input[type=text],.tool-box select{font:500 1.05rem var(--ui);padding:10px 14px;border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);min-width:120px}
.out{margin-top:18px;border-radius:16px;background:var(--surface2);padding:18px 20px;font:1.05rem/1.55 var(--ui)}
.out b.big{display:block;font:800 2.6rem var(--display);letter-spacing:-.04em}
.match{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:16px}
.match a{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);display:block}
.match a:hover{border-color:var(--teal)}
.match b{font:700 1rem var(--display);display:block}
.match small{font:.82rem var(--ui);color:var(--muted)}
.pct{float:right;font:800 1.1rem var(--display);color:var(--teal-d)}
.namebox{font:800 clamp(2.4rem,7vw,4rem) var(--display);letter-spacing:-.04em;text-align:center;padding:20px 0;min-height:1.4em}
.foodlist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:16px}
.food{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;font:.9rem/1.45 var(--ui);border-left:6px solid var(--s)}
.food b{display:block;font:700 1rem var(--display)}
.food em{font-style:normal;font-weight:700;font-size:.75rem;color:var(--s)}
.s-ok{--s:#2E9E4F}.s-care{--s:#D99000}.s-bad{--s:#D93A3A}

/* ---------- footer ---------- */
footer.site{margin-top:80px;background:var(--ink);color:#C9D6E4;padding:56px 0 30px}
footer.site a{color:#E8F0F7;text-decoration:none}footer.site a:hover{color:var(--sun)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer.site h2{font:800 .85rem var(--ui);color:#fff;margin:0 0 12px;letter-spacing:.02em}
footer.site ul{list-style:none;margin:0;padding:0;font:.92rem var(--ui)}
footer.site li{margin:7px 0}
footer.site p{font:.92rem/1.6 var(--ui);margin:0 0 12px}
footer .fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
footer .fbrand .wm{font:800 1.5rem var(--display);color:#fff;letter-spacing:-.04em}footer .fbrand .wm i{font-style:normal;font-weight:500;color:#6FDCDE}
footer .fbrand .mark{width:38px;height:38px}
footer .legal{border-top:1px solid #29405c;margin-top:34px;padding-top:20px;font:.82rem/1.6 var(--ui);color:#93A6BB}
@media (max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){footer.site .cols{grid-template-columns:1fr}}

.reveal-ready .rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.reveal-ready .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-ready .rv{opacity:1;transform:none}}
@media print{header.site,footer.site,.toc,.totop,.palette,.drawer,.related{display:none!important}body{background:#fff;color:#000}}
.cols-list{columns:3 260px;list-style:none;padding:0;font:.95rem/1.5 var(--ui)}
.cols-list li{break-inside:avoid;margin:0 0 6px}
.nm,.fv{border:2px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);padding:8px 16px;font:600 .95rem var(--ui);cursor:pointer}
.nm:hover{border-color:var(--teal)}.fv{cursor:default;background:var(--sun);border-color:var(--sun);color:#241700}

/* ---------- refinements ---------- */
nav.primary>ul>li{display:flex;align-items:center}
.top{white-space:nowrap}
.pin svg,.filter svg{width:20px;height:20px;flex:none;color:var(--muted)}
.hero .grid2>*{min-width:0}
.mark-big{max-width:270px}
.mark-big:hover .wisp{animation:wag .6s ease-in-out infinite}
.read h1{font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.12}
.ask{flex-wrap:nowrap}
@media (max-width:520px){.ask{padding-left:14px}.ask .btn{padding:10px 14px;font-size:.9rem}.hero h1{font-size:2.3rem}}
.top{padding:10px 8px;font-size:.92rem}
.top::after{left:8px;right:8px}
.chev{width:18px;margin-left:-4px}
nav.primary>ul{justify-content:flex-start;gap:0}
@media (max-width:1360px){.sbtn span,.sbtn kbd{display:none}.sbtn{width:40px;height:40px;padding:0;justify-content:center}}

/* ---- photos (only appear when a photo file exists) ---- */
.card .cimg{display:block;width:calc(100% + 40px);max-width:none;margin:-18px -18px 12px -22px;aspect-ratio:3/2;object-fit:cover;background:var(--line)}
.card.has-img{padding-top:18px}
.hero-photo{margin:0 0 26px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--line)}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hero-photo figcaption{font:.78rem var(--ui);color:var(--muted);padding:8px 14px;background:var(--surface)}
.hero-img{position:relative;margin:0;justify-self:center;width:100%;max-width:520px}
.hero-img img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:38% 38% 28px 28px / 26% 26% 28px 28px;box-shadow:0 28px 50px rgba(14,60,70,.28)}
.hero-img .hp-badge{position:absolute;left:-14px;bottom:26px;width:88px;background:var(--surface);border-radius:22px;padding:10px;box-shadow:var(--shadow)}
.hero-img .hp-badge .mark{width:100%;height:auto;display:block}
@media (max-width:820px){.hero-img{max-width:420px;margin-top:10px}.hero .grid2{grid-template-columns:1fr}}
.hub-head.has-photo .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hub-photo{margin:0}
.hub-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:20px;box-shadow:var(--shadow)}
@media (max-width:760px){.hub-head.has-photo .wrap{grid-template-columns:1fr}}
.tile.has-bg{background:linear-gradient(180deg,rgba(8,20,32,.15) 20%,rgba(8,20,32,.78)),var(--bg) center/cover,var(--c);color:#fff}
.tile.has-bg h3,.tile.has-bg p,.tile.has-bg[data-c=puppies] h3,.tile.has-bg[data-c=puppies] p{color:#fff}
:root[data-theme=dark] .tile.has-bg,:root[data-theme=dark] .tile.has-bg h3,:root[data-theme=dark] .tile.has-bg p{color:#fff}

/* ---- featured slider ---- */
.slider-sec{padding-top:8px}
.slider{position:relative;border-radius:26px;overflow:hidden;min-height:clamp(320px,40vw,440px);box-shadow:var(--shadow);background:#0b3b3d;isolation:isolate}
.slide{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(24px,5vw,64px);background:linear-gradient(120deg,var(--sc),color-mix(in srgb,var(--sc) 55%,#10202e));opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;color:#fff}
.slide.is-active{opacity:1;visibility:visible;z-index:1}
.slide-copy{position:relative;z-index:2;max-width:min(520px,60%)}
.slide-copy h2{font:800 clamp(1.7rem,3.6vw,2.8rem)/1.08 var(--display);margin:0 0 12px;color:#fff}
.slide-copy p{font:1.05rem/1.55 var(--ui);margin:0 0 22px;color:rgba(255,255,255,.92)}
.slide .btn{background:#fff;color:#10202e}
.slide .btn:hover{background:#FFE9A8;color:#10202e}
.slide-art{position:absolute;right:clamp(10px,6vw,90px);bottom:-6%;width:min(44%,400px);aspect-ratio:1;z-index:1}
.slide-dog{width:100%;height:100%;display:block;filter:drop-shadow(0 18px 28px rgba(0,0,0,.28))}
.slide.is-active .slide-art{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(24px) scale(.96)}to{transform:none}}
.slide-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.slide.has-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,20,32,.78),rgba(8,20,32,.15) 70%)}
.slide-credit{position:absolute;right:14px;bottom:10px;z-index:2;font:.72rem var(--ui);color:rgba(255,255,255,.8)}
.s-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#10202e;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .15s,background .15s}
.s-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.s-arrow.prev{left:14px}.s-arrow.next{right:14px}
.s-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;gap:8px}
.dot-b{width:11px;height:11px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.5);cursor:pointer;transition:width .25s,background .25s}
.dot-b.is-on{width:30px;background:#fff}
.s-arrow:focus-visible,.dot-b:focus-visible{outline:3px solid #FFC83D;outline-offset:2px}
@media (max-width:700px){.slide{padding:26px 22px 62px;align-items:flex-start}.slide-copy{max-width:100%}.slide-art{width:46%;right:-4%;bottom:-8%;opacity:.9}.slide-copy p{max-width:70%;font-size:.95rem}.s-arrow{width:38px;height:38px;top:auto;bottom:10px;transform:none}.s-arrow:hover{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.slide{transition:none}.slide.is-active .slide-art{animation:none}}