/* Pooch and Claws. Design system v3 "At home": photographs of pets at home, Instrument Serif headings, Golos Text body, Bricolage Grotesque for numbers and labels. */
:root{
  --paper:#F6F4EF; --surface:#FFFFFF; --surface2:#EEEBE3; --ink:#16181D; --ink2:#464A53; --muted:#646871; --line:#E3DFD6; --line2:#CFCABF;
  --dog:#C2531B; --dog-deep:#9A3F10; --dog-text:#9A3F10; --dog-soft:#F6E3D6; --cat:#2F4BA8; --cat-soft:#DEE4F5; --on-accent:#FFFFFF;
  --accent:var(--ink); --accent-soft:var(--surface2);
  --good:#1F7A4A; --warn:#8F5E12; --crit:#B5352C; --good-soft:#DFF0E6; --warn-soft:#F7ECD4; --crit-soft:#F6DEDB;
  --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --body:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:10px; --r-lg:18px; --ease:cubic-bezier(.16,1,.3,1);
  --glass:color-mix(in srgb,var(--surface) 84%,transparent);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--paper:#121316;--surface:#1B1D22;--surface2:#24272E;--ink:#ECEAE4;--ink2:#C2C0B8;--muted:#9296A0;--line:#2C2F36;--line2:#3B3F48;--dog:#E9834A;--dog-deep:#B5561F;--dog-text:#E9834A;--dog-soft:#3A2418;--cat:#7B93E8;--cat-soft:#1E2742;--on-accent:#121316;--good:#4CAF7A;--warn:#D9A441;--crit:#E06A61;--good-soft:#173124;--warn-soft:#3A2E14;--crit-soft:#3B1E1C}}
:root[data-theme="dark"]{color-scheme:dark;--paper:#121316;--surface:#1B1D22;--surface2:#24272E;--ink:#ECEAE4;--ink2:#C2C0B8;--muted:#9296A0;--line:#2C2F36;--line2:#3B3F48;--dog:#E9834A;--dog-deep:#B5561F;--dog-text:#E9834A;--dog-soft:#3A2418;--cat:#7B93E8;--cat-soft:#1E2742;--on-accent:#121316;--good:#4CAF7A;--warn:#D9A441;--crit:#E06A61;--good-soft:#173124;--warn-soft:#3A2E14;--crit-soft:#3B1E1C}
:root[data-species="dog"],[data-accent="dog"]{--accent:var(--dog);--accent-soft:var(--dog-soft)}
:root[data-species="cat"],[data-accent="cat"]{--accent:var(--cat);--accent-soft:var(--cat-soft)}

@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .42s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select{font:inherit;color:inherit}
p,ul,ol,figure{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.012em}
h1{font-size:clamp(40px,5.6vw,70px)}
h2{font-size:clamp(31px,3.7vw,46px)}
h3{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.015em;line-height:1.15}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--ink);color:var(--paper)}
main{min-width:0;display:block}
main:focus{outline:none}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:16px}
.wrap.narrow{max-width:820px}
@media (min-width:768px){.wrap{padding-inline:32px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r);z-index:100;font-weight:600}
.skip:focus{left:8px}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink2);max-width:58ch}
.lead.sm{font-size:17px}
.hint{font-size:14px;line-height:1.5;color:var(--muted);max-width:62ch}
.h-sm{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* buttons, tags, cards */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-radius:999px;border:1px solid var(--ink);font-weight:600;font-size:15px;line-height:1.2;min-height:46px;transition:background .2s,color .2s,border-color .2s,transform .3s var(--ease)}
.btn svg{flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
:root[data-species="none"] .btn-primary:hover{background:var(--ink2);border-color:var(--ink2);color:var(--paper)}
.btn-ghost{border-color:var(--line2);background:var(--surface)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:7px 14px;min-height:36px;font-size:14px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.3;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);background:var(--surface);white-space:nowrap}
.tag svg{flex:none}
.tag.dog{border-color:color-mix(in srgb,var(--dog) 50%,transparent);color:var(--dog)}
.tag.cat{border-color:color-mix(in srgb,var(--cat) 50%,transparent);color:var(--cat)}
.kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.card{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.iconbtn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--ink2);transition:border-color .2s,color .2s}
.iconbtn:hover{border-color:var(--ink);color:var(--ink)}
.iconbtn>span{display:grid}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:3px;background:var(--surface)}
.seg>*{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink2);min-height:34px;transition:background .2s,color .2s}
.seg>*:hover{color:var(--ink)}
.seg>[aria-pressed="true"],.seg>[aria-current]{background:var(--ink);color:var(--paper)}
.seg{--dog-bg:var(--dog);--cat-bg:var(--cat)}
.seg>[data-species="dog"][aria-current],.seg>[data-sp="dog"][aria-pressed="true"]{background:var(--dog-bg);color:var(--on-accent);--dog:var(--on-accent);--dog-deep:color-mix(in srgb,var(--on-accent) 66%,transparent)}
.seg>[data-species="cat"][aria-current],.seg>[data-sp="cat"][aria-pressed="true"]{background:var(--cat-bg);color:var(--on-accent);--cat:var(--on-accent)}
.seg.twin{display:grid;grid-template-columns:1fr 1fr}
.seg.twin>*{justify-content:center}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:background .3s,border-color .3s;view-transition-name:hdr}
.hdr.over:not(.solid){background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;flex:none}
.logo svg{flex:none}
.wm{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.01em;line-height:1}
.wm b{font-weight:400}
.pooch{color:var(--dog)} .claws{color:var(--cat)}
.wm .and{font-style:italic;color:var(--ink2)}
.nav{display:none;gap:2px;margin-inline:auto}
.nav a{padding:8px 14px;border-radius:999px;font-weight:500;font-size:15px;color:var(--ink2);transition:background .2s,color .2s}
.nav a:hover{color:var(--ink);background:var(--surface2)}
.nav a[aria-current]{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.hdr-r{display:flex;align-items:center;gap:8px}
.hdr .seg.species{display:none}
.i-sun,.i-close{display:none!important}
:root[data-theme="dark"] .i-sun{display:grid!important} :root[data-theme="dark"] .i-moon{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .i-sun{display:grid!important}:root:not([data-theme="light"]) .i-moon{display:none!important}}
.burger[aria-expanded="true"] .i-close{display:grid!important} .burger[aria-expanded="true"] .i-open{display:none}
.drawer{padding-block:6px 18px;border-top:1px solid var(--line)}
.drawer a{display:block;padding:14px 2px;font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.drawer a[aria-current]{color:var(--accent)}
@media (min-width:560px){.hdr .seg.species{display:inline-flex}}
@media (min-width:900px){.nav{display:flex}.burger,.drawer{display:none!important}}
@media (max-width:380px){.wm{font-size:24px}}

/* crumbs */
.crumbs{padding-top:22px;font-size:13px;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.crumbs li+li::before{content:'/';margin-right:6px;color:var(--line2)}
.crumbs a{color:var(--ink2)} .crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* background field */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* reveal on scroll (only when scripts run) */
html.js [data-reveal]:not([data-reveal-kids]),html.js [data-reveal-kids]>*{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
html.js [data-reveal].is-in:not([data-reveal-kids]),html.js [data-reveal-kids].is-in>*,html.reveal-all [data-reveal],html.reveal-all [data-reveal-kids]>*{opacity:1;transform:none}

/* sections */
.sec{padding-block:clamp(48px,8vw,104px);border-bottom:1px solid var(--line)}
.sec.last{border-bottom:0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,40px)}
.sec-h h2{font-size:clamp(36px,4.8vw,64px)}
.sec-h p{color:var(--muted);margin-top:8px}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding-bottom:3px;border-bottom:1px solid var(--line2);transition:border-color .2s}
.more:hover{border-color:var(--ink)}
.more svg{transition:transform .3s var(--ease)} .more:hover svg{transform:translateX(4px)}

/* photographs */
.ph{width:100%;height:100%;object-fit:cover;display:block}
figure{margin:0}

/* home: welcome */
.welcome{padding-block:clamp(24px,5vh,64px) clamp(40px,6vw,88px)}
.welcome-in{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.welcome-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,5vw,80px)}}
.welcome h1{font-size:clamp(44px,6.4vw,96px);line-height:.98;letter-spacing:-.02em}
.welcome .lead{margin-top:clamp(16px,2vw,26px);font-size:clamp(18px,1.6vw,22px);max-width:44ch}
.welcome-go{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin-top:clamp(22px,3vw,34px)}
.welcome-go .btn svg{flex:none}
.welcome-go .btn:hover svg{transform:none}
.welcome-go .more{margin-left:6px}
.welcome-go{--dog-bg:var(--dog);--cat-bg:var(--cat)}
.btn-dog{background:var(--dog-bg);border-color:var(--dog-bg);color:var(--on-accent);--dog:var(--on-accent);--dog-deep:color-mix(in srgb,var(--on-accent) 66%,transparent)}
.btn-cat{background:var(--cat-bg);border-color:var(--cat-bg);color:var(--on-accent);--cat:var(--on-accent)}
.btn-dog:hover,.btn-cat:hover{filter:brightness(.93)}
.welcome-photo{border-radius:32px;overflow:hidden;aspect-ratio:4/5;max-height:min(80svh,780px);width:100%;justify-self:end;background:var(--surface2);box-shadow:0 40px 70px -48px rgba(70,45,20,.55)}
@media (max-width:899px){.welcome-photo{aspect-ratio:1/1;border-radius:24px}}

/* home: dogs and cats */
.doors2{display:grid;gap:20px}
@media (min-width:860px){.doors2{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
.door{display:grid;grid-template-rows:auto 1fr;border-radius:32px;overflow:hidden;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.door-photo{display:block;aspect-ratio:5/4;overflow:hidden;background:var(--surface2)}
.door-photo .ph,.gphoto .ph{transition:transform 1.1s var(--ease)}
.door:hover .door-photo .ph,.gcard:hover .gphoto .ph{transform:scale(1.035)}
.door-body{padding:clamp(20px,3vw,32px);display:grid;align-content:start}
.door-body h2{font-size:clamp(44px,5.6vw,76px);line-height:.95;color:var(--accent)}
.door-body>p{color:var(--ink2);margin-top:10px;max-width:44ch}
.door-body .more{justify-self:start;margin-top:20px}

/* home: tools */
.feature{display:grid;gap:24px;align-items:center;padding:clamp(20px,3vw,36px);border-radius:32px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:20px}
@media (min-width:760px){.feature{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(28px,4vw,56px)}}
.feature-art{display:grid;gap:12px;justify-items:center}
.feature .artbox.live{max-width:260px;padding:2%;background:var(--cat-soft);border-color:transparent}
.feature h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.012em;line-height:1.04}
.feature-text p{color:var(--ink2);max-width:52ch;margin:10px 0 20px}
.feature .livelabel{margin:0;font-size:20px;line-height:1.2;min-height:2.4em;text-align:center;text-wrap:balance;color:var(--cat)}
.tcards{display:grid;gap:16px}
@media (min-width:640px){.tcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.tcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.tcard{display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;padding:22px;border-radius:24px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .25s,translate .5s var(--ease)}
.tcard:hover{border-color:var(--accent);translate:0 -3px}
.tcard b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.015em;line-height:1.15;text-wrap:balance;margin-top:8px}
.tcard>span:not(.ico):not(.go){color:var(--ink2);font-size:16px;line-height:1.45}
.tcard .go{margin-top:8px}
@media (max-width:639px){
  .tcards{gap:10px}
  .tcard{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 14px;align-items:start;padding:16px;border-radius:20px}
  .tcard .ico{grid-row:1 / span 2;width:44px;height:44px;border-radius:13px}
  .tcard b{grid-column:2;margin-top:0;font-size:19px}
  .tcard>span:not(.ico):not(.go){grid-column:2;font-size:15px}
  .tcard .go{grid-column:3;grid-row:1 / span 2;align-self:center;margin-top:0;font-size:0;gap:0}
}

/* guide cards with photographs */
.gcards{display:grid;gap:30px 22px}
@media (min-width:640px){.gcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.gcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 26px}}
.gcard{display:grid;gap:6px;align-content:start}
.gphoto{display:block;aspect-ratio:3/2;border-radius:22px;overflow:hidden;background:var(--surface2);margin-bottom:10px}
.glabel{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.gcard[data-accent="dog"] .glabel,[data-accent="dog"] .go,:root[data-species="dog"] .go{color:var(--dog-text)}
:root[data-species="none"] .gcard:not([data-accent]) .glabel,.gcard:not([data-accent]) .glabel{color:var(--muted)}
.gcard b{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.015em;line-height:1.15;text-wrap:balance;transition:color .2s}
.gcard:hover b{color:var(--accent)}
.gdesc{color:var(--ink2);font-size:16px;line-height:1.45}

/* home: about */
.aboutblock{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.aboutblock{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,6vw,88px)}}
.about-photo{max-width:440px}
.about-photo .ph{border-radius:32px;aspect-ratio:4/5;height:auto;background:var(--surface2)}
@media (max-width:859px){.about-photo{max-width:none}.about-photo .ph{aspect-ratio:5/4}}
.about-photo figcaption,.about-photo figcaption a,.afig figcaption a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.aboutblock h2{font-size:clamp(34px,4.4vw,58px);margin-bottom:16px}
.aboutblock p{color:var(--ink2);max-width:56ch;margin-top:12px;font-size:18px}
.about-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:24px!important}

/* shared bits */
.go{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:600;font-size:15px}
.go svg{transition:transform .3s var(--ease)} a:hover>.go svg,a:hover .go svg{transform:translateX(4px)}
.bignum{display:block;font-family:var(--display);font-weight:700;font-size:clamp(72px,10vw,132px);line-height:.86;letter-spacing:-.025em}
.bignum small{display:block;font-family:var(--body);font-weight:500;font-size:16px;line-height:1.35;letter-spacing:0;color:var(--muted);margin-top:12px}
.artbox{display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);padding:20px;color:var(--ink)}
.artbox.live{border-radius:50%;aspect-ratio:1;padding:9%;width:100%;max-width:540px;margin-inline:auto;background:color-mix(in srgb,var(--surface) 55%,transparent);transition:opacity .3s}
.cat-art,.pet-art{width:100%;height:auto;display:block}
.cat-art{max-width:440px}
.livelabel{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1.1;color:var(--cat);min-height:1.2em}


/* page heads, hubs, card lists */
.phead{padding-bottom:clamp(8px,2vw,24px)}
.giant-h{font-size:clamp(44px,6.4vw,96px);line-height:.98;letter-spacing:-.02em;margin:clamp(12px,2vw,24px) 0 clamp(12px,1.6vw,20px)}
.hubhero-in{display:grid;gap:24px;align-items:center;padding-block:clamp(12px,2vw,28px) clamp(8px,2vw,24px)}
@media (min-width:900px){.hubhero-in{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px}}
.hubhero .giant-h{color:var(--accent)}
.hubphoto{border-radius:32px;overflow:hidden;aspect-ratio:4/5;width:100%;max-width:400px;justify-self:end;background:var(--surface2)}
@media (max-width:899px){.hubphoto{aspect-ratio:5/4;max-width:none;margin-top:0}}
.phead-in{padding-block:clamp(20px,3vw,40px) 8px}
.phead-in h1{margin-bottom:14px}
.phead-in .lead+.lead{margin-top:12px}
.cards2{display:grid;gap:14px}
@media (min-width:720px){.cards2{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.pcardx,.cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;transition:border-color .25s,transform .5s var(--ease)}
.pcardx:hover,.cta:hover{border-color:var(--accent);transform:translateY(-2px)}
.ico{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.pc-body{display:grid;gap:3px;min-width:0}
.pc-body b{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.pc-body span{color:var(--muted);font-size:15px;line-height:1.4}
.related{margin-top:clamp(40px,6vw,72px)}
.related h2{font-size:30px;margin-bottom:16px}
.side .related{margin-top:0}
.side .related .cards2{grid-template-columns:minmax(0,1fr);gap:10px}
.side .related .card{padding:14px;gap:12px} .side .related .ico{width:40px;height:40px;border-radius:12px} .side .related .pc-body b{font-size:17px} .side .related .pc-body span{display:none}
.side .related h2{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.nf-home{margin-top:28px}

/* forms */
input[type=text],input[type=tel],input[type=number],select{width:100%;padding:11px 14px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);min-height:48px;font-size:16px}
input[type=file]{font-size:14px;max-width:100%}
input:focus-visible,select:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:0;border-color:var(--accent)}
input[type=number]{font-variant-numeric:tabular-nums;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.field{display:grid;gap:7px;border:0;padding:0;margin:0;min-width:0}
.field>label,.field>legend{font-size:14px;font-weight:600;color:var(--ink2);padding:0}
.field>legend{margin-bottom:7px}
.two{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:420px){.two{grid-template-columns:minmax(0,1fr)}}
.stepper{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);overflow:hidden}
.stepper button{min-height:48px;font-size:22px;color:var(--ink2);transition:background .15s} .stepper button:hover{background:var(--surface2);color:var(--ink)}
.stepper input{border:0;border-inline:1px solid var(--line);text-align:center;border-radius:0;font-weight:600;font-size:18px;padding-inline:4px}
.with-unit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}
.toggle{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.toggle button{padding:8px 16px;font-size:15px;font-weight:600;color:var(--ink2);min-height:48px;min-width:52px}
.toggle button+button{border-left:1px solid var(--line)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{display:grid;place-items:center;text-align:center;min-height:48px;padding:8px 10px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);font-size:15px;font-weight:500;line-height:1.2;transition:border-color .15s,background .15s}
.choice:hover span{border-color:var(--ink)}
.choice input:checked+span{border-color:var(--accent);background:var(--accent-soft);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.moneyin{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);overflow:hidden}
.moneyin>span{padding-left:12px;color:var(--muted);font-weight:600}
.moneyin input{border:0;min-height:46px;padding-left:6px;border-radius:0;background:transparent}
.moneyin:not(:has(>span)){grid-template-columns:minmax(0,1fr)} .moneyin:not(:has(>span)) input{padding-left:14px}
.moneyin:focus-within{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.moneyin input:focus-visible{outline:none}

/* tools */
.tool{display:grid;gap:18px;padding-block:22px clamp(32px,5vw,56px);align-items:start}
@media (min-width:960px){.tool{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px}.tool>.result{position:sticky;top:88px}}
.panel,.result{display:grid;gap:22px;align-content:start;min-width:0;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.panel h1{font-size:clamp(38px,4.6vw,58px);margin-bottom:12px}
.result{border-color:var(--line2)}
.result .bignum{color:var(--accent);font-size:clamp(88px,13vw,168px)}
.result .bignum.range{font-size:clamp(46px,6.4vw,84px);line-height:1}
.hint.second{margin-top:12px} .hint.second b{color:var(--ink);font-weight:600}
:root[data-species="none"] .result .bignum{color:var(--ink)}
.stagepill{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-radius:999px;background:var(--accent-soft);font-size:15px;margin-top:16px}
.stagepill b{font-weight:600}
.tips{display:grid;padding:0;margin:10px 0 0;list-style:none;counter-reset:t}
.tips li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);color:var(--ink2);font-size:16px}
.tips li::before{counter-increment:t;content:counter(t);font-family:var(--serif);font-style:italic;font-size:24px;color:var(--accent);line-height:1}
.share{display:grid;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.share-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.share-actions{display:flex;gap:8px;flex-wrap:wrap}
.share-card{position:relative;overflow:hidden;aspect-ratio:1;width:100%;max-width:340px;border-radius:var(--r-lg);background:#16181D;color:#F6F4EF;padding:22px;display:grid;grid-template-rows:auto 1fr auto}
.share-card>*{position:relative}
.share-card .stripe{position:absolute;right:-36px;top:-36px;width:150px;height:150px;border-radius:50%;background:var(--accent)}
:root[data-species="dog"] .share-card .stripe{background:#E9834A} :root[data-species="cat"] .share-card .stripe{background:#7B93E8}
.share-card .n{align-self:center;font-family:var(--display);font-weight:700;font-size:104px;line-height:.86;letter-spacing:-.025em}
.share-card .n small{display:block;font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;opacity:.8;margin-top:10px;line-height:1.3}
.share-card .brandline{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.method{margin-top:clamp(28px,4vw,48px)}
.method h2,.faq h2,.sources h2{font-size:30px;margin-bottom:12px}
.method p{color:var(--ink2);max-width:68ch}
.srclist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:14px;color:var(--muted);max-width:76ch}
.srclist a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px} .srclist a:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* decoder */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.steps i{height:4px;border-radius:2px;background:var(--line);transition:background .3s} .steps i.on{background:var(--accent)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-top:14px}
.opts button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);text-align:left;font-size:15px;font-weight:500;min-height:54px;transition:border-color .15s,background .15s}
.opts button:hover{border-color:var(--ink)}
.opts button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
.opts button:disabled{opacity:.45;cursor:not-allowed}
.swatch{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);flex:none}
.stepbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.decoder .result{justify-items:center;text-align:center}
.decoder .artbox{border:0;background:none;padding:0;width:100%}
.coatcap{display:grid;gap:4px}
.coatcap b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(32px,4.4vw,52px);line-height:1.02;color:var(--cat)}
.coatcap span{color:var(--muted);font-size:15px}
.facts{list-style:none;padding:0;margin:12px 0 0;display:grid}
.facts li{padding:12px 0;border-top:1px solid var(--line);color:var(--ink2);font-size:16px}
@media (max-width:959px){.decoder .result{order:-1}.decoder .cat-art{max-width:260px}}

/* tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-block:16px}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--surface2);white-space:nowrap}
tbody th{font-weight:600}
tr:last-child>*{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.quotes{min-width:520px}
table.wide{min-width:980px;font-size:14px}
table.wide th,table.wide td{padding:10px 12px}
.quotes td{vertical-align:middle;padding:8px 10px}
.quotes input{min-height:42px;padding:8px 10px}
.quotes .moneyin input{min-height:40px}
.quotes td.num{font-weight:600;white-space:nowrap}

/* inline tool (pavement) */
.inlinetool{margin-block:clamp(20px,3vw,36px);padding:clamp(18px,3vw,28px);border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.inlinetool>h2{margin:0 0 18px!important;font-size:32px}
.it-grid{display:grid;gap:22px}
@media (min-width:720px){.it-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}}
.inlinetool .panel,.inlinetool .result{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;gap:14px}
.inlinetool .result .bignum{font-size:clamp(76px,10vw,120px);color:var(--ink)}
.riskpill{display:inline-flex;justify-self:start;padding:8px 16px;border-radius:999px;font-weight:600;font-size:15px;background:var(--surface2)}
.riskpill[data-level="ok"]{background:var(--good-soft);color:var(--good)}
.riskpill[data-level="caution"]{background:var(--warn-soft);color:var(--warn)}
.riskpill[data-level="danger"]{background:var(--crit-soft);color:var(--crit)}

/* checklist */
.chk-bar{position:sticky;top:76px;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px;margin-block:22px 8px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chk-count{font-size:14px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.chk-actions{display:flex;gap:8px;margin-left:auto}
@media (max-width:560px){.chk-bar{border-radius:var(--r-lg)}}
.chk-phase{margin-top:30px}
.chk-phase h2{font-size:34px;margin-bottom:8px}
.chk{list-style:none;padding:0;margin:0}
.chk li{border-top:1px solid var(--line)}
.chk li:last-child{border-bottom:1px solid var(--line)}
.chk label{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;padding:15px 2px;cursor:pointer}
.chk input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--ink)}
.chk label>span{display:grid;gap:3px}
.chk b{font-weight:600}
.chk label>span>span{color:var(--muted);font-size:15px;line-height:1.45}
.chk input:checked+span b{text-decoration:line-through;text-decoration-color:var(--line2);color:var(--muted)}

/* poster */
.poster{background:#FFFFFF;color:#111111;aspect-ratio:8.5/11;width:100%;max-width:520px;margin-inline:auto;border:1px solid var(--line2);border-radius:6px;padding:5.2%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto auto;gap:2.2%;text-align:center;container-type:inline-size;overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,0,0,.35)}
.postertool .result{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.po-h{font-family:var(--display);font-weight:800;font-size:15.5cqw;line-height:.88;letter-spacing:-.04em;background:#111;color:#fff;padding:3.5cqw 2cqw 4.2cqw;border-radius:1cqw;white-space:nowrap}
.po-img{background:#ECE9E1;border-radius:1cqw;display:grid;place-items:center;overflow:hidden;min-height:0;color:#6B6E76;font-size:3.6cqw;font-weight:600}
.po-img img{width:100%;height:100%;object-fit:cover;display:block}
.po-name{font-family:var(--display);font-weight:800;font-size:10cqw;line-height:.95;letter-spacing:-.03em}
.po-desc{font-size:4.4cqw;font-weight:600;line-height:1.2}
.po-marks{font-size:3.5cqw;line-height:1.3;color:#333}
.po-seen{font-size:3.7cqw;line-height:1.3}
.po-note{font-size:3cqw;color:#444;line-height:1.3}
.po-phone{font-family:var(--display);font-weight:800;font-size:11.5cqw;line-height:1;letter-spacing:-.03em;border-top:.6cqw solid #111;padding-top:2.4cqw;white-space:nowrap}
.poster p:empty{display:none}

/* article */
.article{display:grid;gap:36px;padding-block:8px clamp(40px,6vw,72px)}
@media (min-width:1060px){.article{grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}.side{position:sticky;top:92px;max-height:calc(100vh - 112px);overflow:auto;scrollbar-width:thin}}
.side{display:grid;gap:22px;align-content:start}
@media (max-width:1059px){.side .toc{display:none}}
.ahead{padding-block:clamp(18px,3vw,36px) 6px}
.ahead h1{font-size:clamp(42px,6vw,80px);line-height:1;margin-bottom:20px}
.ahead .lead+.lead{margin-top:12px}
.metaline{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.prose{min-width:0}
.afig{margin-block:26px 6px}
.afig .ph{aspect-ratio:16/9;height:auto;border-radius:24px;background:var(--surface2)}
.afig figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.credits{font-size:15px}
.prose section{margin-top:clamp(34px,4.6vw,56px)}
.prose h2{margin-bottom:14px}
.prose section>p,.prose section>ul,.prose section>ol,.prose>p{max-width:68ch;color:var(--ink2);margin-block:14px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-block:8px}
.prose li::marker{color:var(--muted)}
.prose a:not(.btn):not(.card){color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.prose a:not(.btn):not(.card):hover{text-decoration-color:var(--ink)}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.callout{border:1px solid var(--line2);border-left:4px solid var(--ink);border-radius:var(--r);background:var(--surface);padding:16px 18px;margin-block:20px;max-width:68ch}
.callout strong{display:block;margin-bottom:4px}
.callout p,.callout ul{color:var(--ink2);margin:0}
.callout ul{padding-left:20px;margin-top:6px}
.callout.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.callout.danger{border-left-color:var(--crit);background:var(--crit-soft)}
.toc{font-size:14px;border-left:1px solid var(--line);padding-left:16px}
.toc h2{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.toc a{display:block;padding:5px 0;color:var(--ink2);line-height:1.35} .toc a:hover{color:var(--ink)}
.faq{margin-top:clamp(34px,4.6vw,56px)}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;line-height:1;color:var(--muted);flex:none} .faq details[open] summary::after{content:'−'}
.faq details p{margin-top:10px;color:var(--ink2);max-width:68ch}
.sources{margin-top:clamp(34px,4.6vw,56px)}
.sources ol{padding-left:22px;font-size:14px;color:var(--muted);max-width:76ch}
.sources li{margin-block:7px;overflow-wrap:anywhere}
.cta{margin-block:22px}
.retail{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* coat patterns */
.pats{display:grid}
.pat{display:grid;gap:18px;padding-block:28px;border-top:1px solid var(--line);margin-top:0!important}
@media (min-width:640px){.pat{grid-template-columns:200px minmax(0,1fr);gap:30px;align-items:start}}
.pat-art{max-width:200px;color:var(--ink)}
.pat h3{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,48px);letter-spacing:-.01em;line-height:1;color:var(--cat);margin-bottom:8px}
.pat:first-child{border-top:0;padding-top:8px}
.claims{display:grid;gap:12px}
.claim{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);padding:18px 20px}
.claim header{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.claim h3{font-size:20px}
.claim p{color:var(--ink2);margin-top:8px;max-width:66ch}
.verdict[data-v="true"],.verdict[data-v="mostly true"]{border-color:color-mix(in srgb,var(--good) 45%,transparent);color:var(--good);background:var(--good-soft)}
.verdict[data-v="false"],.verdict[data-v="mostly false"]{border-color:color-mix(in srgb,var(--crit) 45%,transparent);color:var(--crit);background:var(--crit-soft)}
.opt{font-style:normal;color:var(--ink2)}
.pat p,.pat ul{color:var(--ink2);margin-block:10px}
.confuse{font-size:15px}
.thumb{width:100%;height:auto;color:var(--ink)}

/* parks */
.parks{display:grid;gap:14px}
.park{display:grid;gap:10px}
.park header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.park h3{font-size:25px}
.pidx{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1;color:var(--muted)}
.addr{color:var(--ink2);font-size:15px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.kv{font-size:15px;color:var(--ink2)}
.kv b{display:inline-block;min-width:54px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.notes{color:var(--ink2);font-size:15px;max-width:66ch}
.plinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* about */
.timeline{list-style:none;padding:0!important;border-left:1px solid var(--line2);max-width:68ch}
.timeline li{position:relative;padding:2px 0 22px 24px;margin:0!important;color:var(--ink2)}
.timeline li::before{content:'';position:absolute;left:-5px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.timeline b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:40px;line-height:1.05;color:var(--ink)}

/* footer */
.ftr{padding-block:clamp(40px,6vw,80px) 32px;color:var(--ink2);font-size:15px;border-top:1px solid var(--line);overflow:hidden}
.giant-mark{font-family:var(--serif);font-weight:400;font-size:clamp(44px,7vw,96px);line-height:1;letter-spacing:-.02em;white-space:nowrap;margin-bottom:clamp(28px,4vw,56px);padding-bottom:.06em}
.giant-mark .and{font-style:italic;color:var(--ink2)}
.ftr .cols{display:grid;gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ftr .cols>div:first-child{grid-column:1/-1}
@media (min-width:860px){.ftr .cols{grid-template-columns:2fr 1fr 1.4fr 1fr}.ftr .cols>div:first-child{grid-column:auto}}
.ftr h2{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ftr .cols a{display:block;padding:5px 0;transition:color .2s} .ftr .cols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ftr-desc{max-width:34ch;font-size:17px;color:var(--ink)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js [data-reveal],html.js [data-reveal-kids]>*{opacity:1!important;transform:none!important}
  @view-transition{navigation:none}
}

@media print{
  #bg,.hdr,.ftr,.crumbs,.afig,.skip,.related,.side,.chk-bar,.share-actions,.retail{display:none!important}
  html.js [data-reveal],html.js [data-reveal-kids]>*{opacity:1!important;transform:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .card,.panel,.result{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  html[data-view="checklist"] .faq,html[data-view="checklist"] .sources,html[data-view="checklist"] .metaline{display:none}
  html[data-view="checklist"] .chk li{break-inside:avoid}
  html[data-view="checklist"] .chk label{padding:7px 0}
  html[data-view="checklist"] .chk-phase{margin-top:14px}
  html[data-view="poster"] .panel,html[data-view="poster"] .faq,html[data-view="poster"] .wrap.narrow{display:none!important}
  html[data-view="poster"] .tool{display:block;padding:0}
  html[data-view="poster"] .wrap{max-width:none;padding:0}
  html[data-view="poster"] .poster{max-width:none;width:100%;height:calc(100vh - 2px);aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:10mm}
}