:root{
    --ivory:#F4EFE6; --paper:#FFFFFF; --ink:#221E18; --sec:#736649; --hair:rgba(90,75,50,.16);
    --gold:#8A6410; --goldL:#D9B25F; --onGold:#FFFFFF; --mid:#131A26; --deep:#0B0E15;
    --foil:linear-gradient(100deg,#F2CE7B,#C9922B); --blue:#2E7CD6; --green:#2FA35C;
    --flag:#B3261E; --flagbg:rgba(179,38,30,.07); --flagbd:rgba(179,38,30,.32);
    --sf:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,sans-serif;
  }
  :root[data-theme="dark"]{
    --ivory:#131A26; --paper:#1C2536; --ink:#F3EFE6; --sec:#98A0B0; --hair:rgba(139,148,166,.18);
    --gold:#F2CE7B; --goldL:#D9B25F; --onGold:#1D1D1F;
    --flag:#FF8A7A; --flagbg:rgba(255,107,90,.12); --flagbd:rgba(255,138,122,.34);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* DESIGN.md: "Respect prefers-reduced-motion". Only the breed-finder tool did;
     the shared chrome (card lift, chip fades, smooth anchor scroll) did not. */
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
    a.card:hover{transform:none}
  }
  body{background:var(--ivory);color:var(--ink);font-family:var(--sf);-webkit-font-smoothing:antialiased;line-height:1.5}
  /* height:auto is mandatory once width/height attributes are present: the
     attributes set a presentational height, so max-width alone shrinks the
     width and leaves the image at its intrinsic height. */
  img{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}
  /* Auto-linked glossary term inside prose. Matches the gold/600 that hand-written
     inline links already use, because they are the same thing to a reader — and
     because an inline link the exact colour and weight of body text is invisible. */
  a.gl{color:var(--gold);font-weight:600}
  a.skip{position:fixed;left:12px;top:-64px;z-index:1000;background:var(--gold);color:var(--onGold);padding:10px 16px;border-radius:9px;font-weight:700;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:top .16s ease}
  a.skip:focus{top:12px;outline:2px solid var(--onGold);outline-offset:2px}
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .chips{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 10px}
  .chip{display:inline-block;padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:600;font-family:inherit;line-height:1.2;cursor:pointer;border:1px solid var(--hair);color:var(--sec);background:transparent;transition:color .14s,border-color .14s,background .14s}
  .chip:hover{color:var(--ink);border-color:var(--sec)}
  .chip.on{background:var(--foil);color:#1D1D1F;border-color:transparent}

  /* Story filters are two different questions — which pet, then which topic
     within it. Rendered as one flat run of pills they read as eleven peers with
     two of them lit, and the topic row wrapped to three ragged lines (157px of
     chrome before a single story on a 375px phone). Species is now a segmented
     control (one control, one choice); topics stay pills but on one scrolling
     line, so the set is legible as "a list that continues". */
  .segctl{display:flex;max-width:440px;margin:8px 0 12px;padding:3px;gap:3px;
    border:1px solid var(--hair);border-radius:999px;background:rgba(139,148,166,.08)}
  .segctl a{flex:1;display:flex;align-items:center;justify-content:center;min-height:38px;
    padding:0 10px;border-radius:999px;font-size:13.5px;font-weight:600;line-height:1.2;
    color:var(--sec);text-decoration:none;white-space:nowrap;
    transition:color .14s,background .14s}
  .segctl a:hover{color:var(--ink)}
  .segctl a[aria-current]{background:var(--foil);color:#1D1D1F}
  /* Topic row: one line, scrolls horizontally. The fade is only painted once
     the row actually overflows (.ovf, set by JS) — otherwise it would clip the
     last chip on a desktop row that fits. */
  .chips-t{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    margin:0 0 22px;padding-bottom:2px;scroll-padding-inline:4px;overscroll-behavior-x:contain}
  .chips-t::-webkit-scrollbar{display:none}
  .chips-t>.chip{flex:none;scroll-snap-align:start}
  .chips-t.ovf{scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .chips-t.ovf.end{-webkit-mask-image:none;mask-image:none}
  @media(max-width:820px){
    /* phone: full-width control, 44px targets per the a11y floor */
    .segctl{max-width:none;margin-top:10px}
    .segctl a{min-height:44px}
    .chips-t>.chip{padding:11px 15px}
  }

  header{position:sticky;top:0;z-index:50;background:rgba(19,26,38,.94);backdrop-filter:blur(16px);color:#F7F3EA;border-bottom:.5px solid rgba(139,148,166,.16)}
  .navin{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:13px 22px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.3px}
  .logo svg{width:28px;height:28px;flex:none}
  /* the header bar is dark in both themes, so this gold is fixed */
  .logo .wq{color:#F2CE7B}
  .wm{white-space:nowrap}
  .navlinks{display:flex;gap:18px;font-size:13.5px;color:#B9C0CE;margin-left:6px}
  .navlinks a:hover,.navlinks a.on{color:#F2CE7B}
  .navr{margin-left:auto;display:flex;align-items:center;gap:12px}
  .themebtn,.searchbtn,.acctbtn{background:transparent;border:1px solid rgba(139,148,166,.28);color:#F2CE7B;border-radius:999px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .acctbtn{text-decoration:none;position:relative}
  /* Signed in reads at a glance: the ring goes gold and a dot sits on the
     shoulder. Signed out is the same quiet outline as search and theme. */
  .acctbtn.in{border-color:rgba(242,206,123,.75)}
  .acctbtn.in:after{content:"";position:absolute;top:-1px;right:-1px;width:9px;height:9px;
    border-radius:50%;background:#5BA86B;border:1.5px solid #131A26;z-index:1}
  /* Signed in with a photo/initials the button IS the avatar: the ring and dot
     stay, the fill becomes the person (#564). The icon <span> is the fallback. */
  .acctbtn .acctav{width:100%;height:100%;border-radius:999px;object-fit:cover;display:block}
  .acctbtn .acctmono{width:100%;height:100%;border-radius:999px;display:flex;
    align-items:center;justify-content:center;background:var(--foil);color:#1D1D1F;
    font:800 12.5px/1 var(--sf);letter-spacing:.02em}
  /* The photo/initials are round in their own right, so the button stays un-clipped
     and the green dot on the shoulder is never cut off. */
  .acctbtn.hasav{padding:0}
  .themebtn:hover,.searchbtn:hover{background:rgba(242,206,123,.14)}
  .searchbtn{text-decoration:none}
  .themebtn .ic-moon{display:none}
  :root[data-theme="dark"] .themebtn .ic-sun{display:none}
  :root[data-theme="dark"] .themebtn .ic-moon{display:inline}
  .cta{background:var(--foil);color:#1D1D1F;font-weight:700;font-size:13px;border-radius:999px;padding:9px 16px;white-space:nowrap}

  .langsw{display:inline-flex;border:1px solid rgba(139,148,166,.3);border-radius:999px;overflow:hidden;flex:none}
  .langsw a{font-size:12px;font-weight:700;letter-spacing:.02em;color:#B9C0CE;padding:6px 10px;text-decoration:none;border-right:1px solid rgba(139,148,166,.2)}
  .langsw a:last-child{border-right:none}
  .langsw a:hover{color:#F7F3EA;background:rgba(139,148,166,.12)}
  .langsw a.on{color:#1D1D1F;background:linear-gradient(100deg,#F2CE7B,#C9922B)}
  @media(max-width:520px){.langsw a{padding:6px 8px;font-size:11px}}
  .burger{display:none;background:transparent;border:1px solid rgba(139,148,166,.3);color:#F7F3EA;border-radius:10px;width:38px;height:36px;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .burger svg{width:20px;height:20px}
  .burger.open svg{display:none}
  .burger.open::after{content:"✕";font-size:19px;line-height:1;color:#F7F3EA}
  .mobilemenu{display:none;flex-direction:column;background:#131A26;border-top:.5px solid rgba(139,148,166,.14)}
  .mm-nav a{padding:15px 22px;font-size:15.5px;font-weight:600;color:#E8ECF2;border-bottom:.5px solid rgba(139,148,166,.1);display:flex;justify-content:space-between;align-items:center;text-decoration:none}
  .mm-nav a.on{color:#F2CE7B}
  .mm-nav{display:none}
  .mm-locale{border-bottom:.5px solid rgba(139,148,166,.1);padding:6px 8px}
  .mobilemenu .mcta{margin:14px 22px 18px;background:var(--foil);color:#1D1D1F;text-align:center;border-radius:12px;padding:14px;border:none;justify-content:center;display:none}
  .mobilemenu.open{display:flex}
  @media(max-width:820px){ .navr .cta{display:none} .mm-nav{display:none} .mobilemenu .mcta{display:block} }


  main{max-width:1120px;margin:0 auto;padding:0 22px 90px}
  .crumb{font-size:12.5px;color:var(--sec);padding:22px 0 4px}
  .crumb a:hover{color:var(--gold)}
  h1{font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-1.4px;line-height:1.05}
  .lede{font-size:clamp(15px,2.2vw,18px);color:var(--sec);line-height:1.6;max-width:60ch;margin-top:10px}
  h2{font-size:clamp(22px,3.2vw,30px);font-weight:700;letter-spacing:-.6px;margin-bottom:6px}
  section{margin-top:52px}
  .railhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .railhead h2{margin-bottom:0}
  .railmore{font-size:13.5px;font-weight:600;color:var(--gold);white-space:nowrap}
  .railmore:hover{text-decoration:underline;text-underline-offset:3px}
  .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
  p.body{font-size:15.5px;color:var(--ink);line-height:1.7;max-width:68ch;margin-top:10px}
  p.body.dim{color:var(--sec)}

  .banner{border-radius:22px;overflow:hidden;position:relative;margin-top:20px;min-height:280px;background:linear-gradient(135deg,#243147,#131A26)}
  /* min-height matches the container's floor so a narrow viewport crops the
     photo instead of leaving a dark strip under it behind the caption. */
  .banner img{width:100%;aspect-ratio:16/6.2;min-height:280px;object-fit:cover}
  .banner.tall img{aspect-ratio:16/8}
  .banner .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 30px 24px;color:#F7F3EA;background:linear-gradient(transparent,rgba(11,14,21,.82))}
  .banner .cap h1{color:#fff}
  .banner .cap p{color:rgba(247,243,234,.82);font-size:15px;margin-top:8px;max-width:52ch}
  .noimg{aspect-ratio:16/6.2;background:linear-gradient(135deg,#243147,#131A26);display:flex;align-items:center;justify-content:center;color:rgba(242,206,123,.5);font-size:13px}

  .grid{display:grid;gap:16px;margin-top:26px}
  .g2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .g3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .g4{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .card{background:var(--paper);border:.5px solid var(--hair);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
  a.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(120,90,30,.14)}
  .card .thumb{aspect-ratio:4/3;object-fit:cover;width:100%;background:linear-gradient(150deg,#243147,#131A26)}
  .card .thumbfill{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(150deg,#EDE4D3,#E2D5BC)}
  :root[data-theme="dark"] .card .thumbfill{background:linear-gradient(150deg,#243147,#131A26)}
  .card .cbody{padding:15px 17px 17px}
  .card .kick{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
  .card h3{font-size:16px;font-weight:700;letter-spacing:-.3px;margin:5px 0 4px}
  .card p{font-size:13px;color:var(--sec);line-height:1.5}
  .card .meta{font-size:11.5px;color:var(--sec);margin-top:10px}
  .gem{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:2.5px 7px}
  .gem.rare{background:rgba(46,124,214,.14);color:var(--blue)} .gem.common{background:rgba(142,142,147,.18);color:#7c7263}
  .gem.uncommon{background:rgba(47,163,92,.14);color:var(--green)} .gem.legend{background:var(--foil);color:#3A2A05}
  :root[data-theme="dark"] .gem.common{color:#A9B2BF}

  .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:22px}
  .stat{background:var(--paper);border:.5px solid var(--hair);border-radius:16px;padding:16px 18px}
  .stat b{display:block;font-size:26px;font-weight:700;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
  .stat span{font-size:12px;color:var(--sec);line-height:1.4;display:block;margin-top:4px}

  .pillrow{display:flex;flex-wrap:wrap;gap:0}
  .pill{display:inline-block;font-size:12.5px;font-weight:600;color:#7F5C0E;background:rgba(169,124,31,.1);border:1px solid rgba(169,124,31,.25);border-radius:999px;padding:8px 15px;margin:4px 6px 0 0}
  :root[data-theme="dark"] .pill{background:rgba(242,206,123,.1);border-color:rgba(242,206,123,.28);color:var(--gold)}
  .btn{display:inline-block;background:var(--foil);color:#1D1D1F;font-weight:700;font-size:15px;border-radius:13px;padding:13px 24px;margin-top:8px}
  .btn.ghost{background:transparent;color:var(--gold);border:1.5px solid var(--goldL)}

  table{width:100%;border-collapse:collapse;background:var(--paper);border:.5px solid var(--hair);border-radius:16px;overflow:hidden;font-size:14px;margin-top:18px}
  td{padding:12px 16px;border-bottom:.5px solid var(--hair)} tr:last-child td{border-bottom:none}
  td:first-child{color:var(--sec);font-weight:600;width:42%}

  .prose h2{font-size:18px;font-weight:700;margin:24px 0 8px;letter-spacing:-.3px}
  .prose h3{font-size:16px;font-weight:700;margin:18px 0 6px;letter-spacing:-.2px}
  .prose p{font-size:15.5px;color:var(--ink);line-height:1.75;margin-top:10px;max-width:70ch}
  .prose ul{margin:12px 0 0 20px} .prose li{font-size:15px;line-height:1.7;margin:6px 0;color:var(--ink)}

  .answer{background:var(--paper);border:1.5px solid var(--goldL);border-radius:16px;padding:18px 20px;font-size:15.5px;line-height:1.65;margin-top:22px}
  .answer b{color:var(--gold)}
  .quote{border-left:3px solid var(--goldL);padding:10px 4px 10px 16px;margin:16px 0;font-size:14.5px;background:rgba(217,178,95,.09);border-radius:0 12px 12px 0;color:var(--ink)}
  .quote b{color:var(--gold)}
  :root[data-theme="dark"] .quote{background:rgba(242,206,123,.1)}
  .trait{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:13.5px}
  .seg{display:flex;gap:3px;flex:none} .seg i{width:15px;height:7px;border-radius:3px;background:rgba(90,75,50,.16)} .seg i.on{background:var(--gold)}
  :root[data-theme="dark"] .seg i{background:rgba(139,148,166,.22)}
  :root[data-theme="dark"] .seg i.on{background:var(--gold)}
  .wl{max-width:460px;margin-top:14px}
  .wl .row1{display:flex;gap:8px}
  .wl input[type=email]{flex:1;min-width:0;padding:13px 15px;border-radius:12px;border:1px solid var(--hair);
    background:var(--paper);color:var(--ink);font:inherit;font-size:15px}
  .wl input[type=email]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,178,95,.22)}
  .wl .btn{margin-top:0;flex:none;padding:13px 20px;font-size:14.5px;border:none;cursor:pointer;font-family:inherit}
  .wl .btn[disabled]{opacity:.55;cursor:default}
  .wl .hp{position:absolute;left:-9999px;height:0;width:0;overflow:hidden}
  .wl .fine{margin-top:9px;font-size:12px;color:var(--sec);line-height:1.55}
  .wl .fine a{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .wl .msg{margin-top:10px;font-size:13.5px;font-weight:600;display:none}
  .wl .msg.ok{display:block;color:var(--gold)}
  .wl .msg.err{display:block;color:#D2543E}
  :root[data-theme="dark"] .wl .msg.err{color:#FF9E8F}
  @media(max-width:520px){.wl .row1{flex-direction:column}.wl .btn{width:100%;text-align:center}}

  /* Email capture band — in-page (light card) and in-footer (dark) variants. */
  .leadband{position:relative;overflow:hidden;background:var(--paper);border:.5px solid var(--hair);
    border-radius:22px;padding:28px 30px;margin-top:52px;display:grid;grid-template-columns:1.05fr .95fr;
    gap:28px;align-items:center}
  .leadband::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 150% at 100% 0,rgba(217,178,95,.20),transparent 62%)}
  .leadband>*{position:relative}
  .lb-kick{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
  .leadband h2{font-size:clamp(21px,2.6vw,27px);margin:7px 0 0}
  .lb-sub{font-size:14.5px;color:var(--sec);line-height:1.6;margin-top:9px;max-width:46ch}
  .leadband .wl{margin-top:0;max-width:none}
  @media(max-width:880px){.leadband{grid-template-columns:1fr;gap:18px;padding:24px 22px}}

  .fnews{max-width:1120px;margin:0 auto 36px;padding:24px 26px;border:1px solid rgba(139,148,166,.24);
    border-radius:20px;background:linear-gradient(115deg,rgba(242,206,123,.11),rgba(242,206,123,.02));
    display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
  .fnews .lb-kick{color:#F2CE7B}
  .fnews h2{font-size:21px;letter-spacing:-.5px;color:#F7F3EA;margin:7px 0 0}
  .fnews .lb-sub{color:#8B94A6;font-size:13.5px;margin-top:7px}
  .fnews .wl{margin-top:0;max-width:none}
  .fnews .wl input[type=email]{background:rgba(255,255,255,.07);border-color:rgba(139,148,166,.32);color:#F7F3EA}
  .fnews .wl input[type=email]::placeholder{color:#7B8595}
  .fnews .wl .fine{color:#7B8595}
  .fnews .wl .fine a{color:#F2CE7B}
  @media(max-width:880px){.fnews{grid-template-columns:1fr;gap:16px;padding:22px}}
  .tg{background:var(--paper);border:.5px solid var(--hair);border-radius:16px;padding:16px 18px}
  .tg h3{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  details{background:var(--paper);border:.5px solid var(--hair);border-radius:14px;margin-bottom:8px;overflow:hidden}
  summary{padding:14px 18px;font-size:15px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
  summary::after{content:"+";color:var(--gold);font-size:19px} details[open] summary::after{content:"–"}
  details p{padding:0 18px 15px;font-size:14px;line-height:1.6;color:var(--sec)}
  .avoid{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .avoid span{font-size:12px;font-weight:600;color:#8E2A22;background:rgba(179,53,43,.1);border-radius:999px;padding:6px 13px}
  :root[data-theme="dark"] .avoid span{color:#FF9E8F;background:rgba(255,122,107,.15)}
  footer{background:var(--deep);color:#8B94A6;margin-top:90px;padding:44px 22px 40px}
  .fin{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:26px}
  .fin h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#B9C0CE;margin-bottom:12px}
  .fin a{display:block;font-size:13px;color:#8B94A6;padding:4px 0}
  /* DESIGN.md: touch targets >=44px. Tightened rows are fine with a mouse, so
     the padding only grows where the pointer is coarse. */
  @media(pointer:coarse){.fin a{padding:11px 0}.flegal a{padding:8px 0}.breedrow{padding:12px 4px}}
  .fin a:hover{color:#F2CE7B}
  .fin .brand{font-weight:700;font-size:17px;color:#F7F3EA;display:flex;align-items:center;gap:9px}
  .fin .brand svg{width:30px;height:30px;flex:none}
  .fin .brand .fq{color:#F2CE7B}
  /* No light-theme override here: on generated pages --deep stays #0B0E15, so
     the footer is dark in BOTH themes. Painting the wordmark #221E18 in light
     mode made "Breed" invisible against it. (The bespoke home page DOES flip
     --deep light, so BESPOKE_FOOTER_CSS keeps its own override.) */
  .fin .tag{font-size:13px;line-height:1.7;margin-top:10px;max-width:32ch}
  .fbot{max-width:1120px;margin:26px auto 0;padding-top:18px;border-top:.5px solid rgba(139,148,166,.16);font-size:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
  .fpref{display:inline-flex;align-items:center;gap:6px;color:#B9C0CE;text-decoration:none;
    border:1px solid rgba(139,148,166,.3);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600}
  .fpref:hover{color:#F2CE7B;border-color:rgba(242,206,123,.45)}
  .fpref svg{flex:none;color:#F2CE7B}
  .fsoc{display:inline-flex;gap:14px;align-items:center}
  .fsoc a{color:var(--sec);display:inline-flex;padding:4px}
  .fsoc a:hover{color:var(--gold)}
  .flegal{display:flex;flex-wrap:wrap;gap:16px}
  .flegal a{color:#8B94A6}
  .flegal a:hover{color:#F2CE7B}
  @media(max-width:1000px){.fin{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:820px){.navlinks{display:none}.fin{grid-template-columns:1fr 1fr}}
  .reg-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .view-toggle{display:inline-flex;border:1px solid var(--hair);border-radius:999px;overflow:hidden}
  .view-toggle button{border:0;background:transparent;padding:6px 16px;font:inherit;color:var(--sec);cursor:pointer}
  .view-toggle button.on{background:var(--gold);color:var(--onGold)}
  .reg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 18px}
  .breedrow{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none}
  .breedrow:hover .bname{color:var(--gold)}
  .breedrow .bthumb{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:var(--hair)}
  .badge.scannable{opacity:.55;display:inline-flex;color:var(--sec)}
  .breedrow:hover .badge.scannable{color:var(--gold);opacity:1}
  .reg-group h3,.reg-letter h3{margin:26px 0 8px;color:var(--gold)}

  /* Breed library: search, collapsed groups, one letter at a time. A few hundred rows
     on arrival was a wall; this opens at nine. */
  .bsearch{margin-top:22px}
  .bsearch input{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--hair);
    background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
  .bsearch input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,178,95,.22)}
  .bsearch input::-webkit-search-cancel-button{filter:grayscale(1);opacity:.5}
  #bqres{margin-top:14px}
  .popgrid .card .thumb{aspect-ratio:1/1}
  .popgrid .cbody{padding:11px 13px 13px}
  .popgrid h3{font-size:14.5px;margin:0}
  /* ≤640px the g4 min-width collapses this grid to one giant card per screen —
     5,000px of scrolling before the actual library. Breed cards are collection
     objects, so they compact to an album-style 2-up grid, not list rows. */
  @media(max-width:640px){
    .popgrid{grid-template-columns:repeat(2,1fr);gap:10px}
    .popgrid .cbody{padding:8px 11px 10px}
    .popgrid h3{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  }
  details.gacc{background:var(--paper);border:.5px solid var(--hair);border-radius:14px;margin-bottom:8px}
  details.gacc>summary{padding:15px 18px;font-size:16px;font-weight:600;cursor:pointer;list-style:none;
    display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
  details.gacc>summary::-webkit-details-marker{display:none}
  details.gacc>summary::after{content:"+";color:var(--gold);font-size:20px;font-weight:400;order:3}
  details.gacc[open]>summary::after{content:"–"}
  details.gacc>summary b{margin-left:auto;font-size:13px;font-weight:700;color:var(--gold);
    background:rgba(169,124,31,.12);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
  :root[data-theme="dark"] details.gacc>summary b{background:rgba(242,206,123,.12)}
  details.gacc .reg-list{padding:0 18px 14px}
  .reg-species{margin:26px 0 10px;color:var(--gold);font-size:15px;letter-spacing:.04em;text-transform:uppercase}
  .lrow{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 14px}
  .lchip{font:inherit;font-size:15px;font-weight:700;min-width:46px;min-height:46px;cursor:pointer;
    border-radius:12px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);
    display:inline-flex;align-items:center;justify-content:center;gap:4px;
    transition:transform .12s ease-out,background .14s,color .14s,border-color .14s}
  .lchip i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--sec);font-variant-numeric:tabular-nums}
  .lchip:hover{border-color:var(--gold)}
  .lchip:active{transform:scale(.94)}
  .lchip.on{background:var(--foil);color:#1D1D1F;border-color:transparent}
  .lchip.on i{color:#4a3708}
  .lhint{font-size:14px;color:var(--sec);margin:2px 0 0}

  /* Facet chip options live inside the filter accordion (see "Faceted filter
     accordion" below). Base is one scrolling line; the accordion wraps them
     within its narrow rail. */
  .fchips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;min-width:0}
  .fchips::-webkit-scrollbar{display:none}
  .fchips .chip{flex:none}
  .chip .n{opacity:.6;font-weight:500;margin-left:5px;font-variant-numeric:tabular-nums}
  .chip[aria-pressed=true]{background:var(--foil);color:#1D1D1F;border-color:transparent}
  .chip[aria-pressed=true] .n{opacity:.75}
  .fcount{font-size:13.5px;color:var(--sec);margin:12px 0 0;font-variant-numeric:tabular-nums}
  .fcount b{color:var(--gold)}
  .freset{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;margin-left:10px;
    border:1px solid var(--hair);border-radius:999px;background:transparent;color:var(--sec);padding:4px 12px}
  .freset:hover{color:var(--ink);border-color:var(--sec)}
  .breedrow.f-off{display:none}
  /* Group hubs filter breed *cards*: .fitem is a transparent grid wrapper that
     carries the data-* facets, so the card markup stays untouched. */
  .fitem{display:contents}
  .fitem.f-off{display:none}

  /* Faceted filter accordion (see DESIGN.md "Breed Hub Navigation"). Past three
     facets a horizontal chip strip reads as stacked peers, so facets live in a
     collapsible rail: a sticky left column ≥900px, a slide-up sheet on phones.
     Options are the same .chip buttons — the existing filter JS is unchanged. */
  .flisthead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .ftoggle{font:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;
    align-items:center;gap:8px;border:1px solid var(--hair);border-radius:999px;
    background:var(--paper);color:var(--ink);padding:8px 16px;min-height:40px}
  .ftoggle:hover{border-color:var(--sec)}
  .ftoggle .fbadge{background:var(--gold);color:var(--onGold);border-radius:999px;font-size:11px;
    font-weight:700;min-width:18px;text-align:center;padding:1px 6px;font-variant-numeric:tabular-nums}
  .filterwrap{display:grid;grid-template-columns:1fr;gap:16px;margin-top:10px;align-items:start}
  .frail{background:var(--paper);border:.5px solid var(--hair);border-radius:16px;padding:6px 16px 12px}
  .frailhead{padding:8px 2px 2px}
  .ftitle{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sec)}
  .frail .fcount{margin:6px 2px 8px}
  .facc{border-top:1px solid var(--hair)}
  .facc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
    padding:13px 2px;font-size:15px;font-weight:700;min-height:48px}
  .facc>summary::-webkit-details-marker{display:none}
  .facc>summary::after{margin-left:auto}   /* +/– supplied by the global summary rule */
  .facc .fchips{display:flex;flex-wrap:wrap;overflow:visible;gap:7px;padding:0 2px 14px}
  @media(min-width:900px){
    .filterwrap{grid-template-columns:240px 1fr;gap:26px}
    .frail{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto}
    .ftoggle,.fbackdrop{display:none!important}
  }
  @media(max-width:899px){
    .fbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:40;opacity:0;
      transition:opacity .24s ease}
    .filters-open .fbackdrop,.fbackdrop:not([hidden]){opacity:1}
    .frail{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:82vh;overflow:auto;
      border-radius:22px 22px 0 0;border:0;box-shadow:0 -10px 40px rgba(0,0,0,.22);
      padding:0 18px 26px;transform:translateY(101%);transition:transform .28s ease}
    .frail::before{content:"";display:block;width:38px;height:4px;border-radius:2px;
      background:var(--hair);margin:10px auto 6px}
    .filters-open .frail{transform:translateY(0)}
  }

  /* Species roster: first-letter dividers + an A–Z jump rail (iOS-index style).
     The rail is a third filterwrap column on desktop, a fixed right-edge
     scrubber on phones. Empty sections + their rail letters are hidden/dimmed
     by the filter JS. */
  .lsec.f-off{display:none}
  .lhd{margin:22px 2px 8px;padding-bottom:6px;font-size:15px;font-weight:700;color:var(--gold);
    border-bottom:1px solid var(--hair);scroll-margin-top:74px}
  .lsec:first-child .lhd{margin-top:6px}
  .azrail{display:flex;flex-direction:column;align-items:center;gap:1px;
    font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
  .azrail a{color:var(--sec);padding:1px 5px;line-height:1.25;border-radius:5px}
  .azrail a:hover{color:var(--gold)}
  .azrail a.off{opacity:.28;pointer-events:none}
  @media(min-width:900px){
    .filterwrap.withaz{grid-template-columns:240px minmax(0,1fr) 26px}
    .azrail{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow:auto}
  }
  @media(max-width:899px){
    .withaz .freslist{padding-right:20px}   /* clear the fixed scrubber */
    .azrail{position:fixed;right:3px;top:50%;transform:translateY(-50%);z-index:30;
      background:rgba(244,239,230,.72);backdrop-filter:blur(6px);border:1px solid var(--hair);
      border-radius:11px;padding:6px 2px}
    :root[data-theme="dark"] .azrail{background:rgba(19,26,38,.72)}
  }

  /* Share rail — absolutely placed in the article's left gutter, sticking as
     you read. .post is the positioning context; the gutter is (100% - well)/2. */
  /* Anchored to the viewport, not the grid: as a direct child of .post it
     inherited grid-column:2 and its absolute box resolved against the text
     well, overlapping the copy. 50% is the centre of the centred article
     column, so -340 reaches its left edge and -68 more lands in the gutter. */
  .sharerail{display:none}
  /* The rail has to clear the CONTENT box (1076px, so 538px each side of centre),
     not just the 680px text well: the hero, email band, related cards and CTA are
     .bleed rows that span the full width, and a rail parked in the well's gutter
     lands on top of them. 48px rail + 16px gap needs 602px of half-width, so it
     only appears once the viewport can actually spare it. */
  @media(min-width:1280px){
    .sharerail{display:flex;position:fixed;top:118px;left:calc(50% - 602px);
      width:48px;flex-direction:column;align-items:center;gap:9px;z-index:40;
      transition:opacity .25s ease-out}
    .sharerail.gone{opacity:0;pointer-events:none}
    .sharerail .sharelbl{writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:2px}
    .sharerail .shx{width:38px;height:38px}
  }
  .topshare{display:none}

  /* ==================================================== mobile app chrome
     A phone gets real app furniture, not a narrowed desktop page: a fixed
     bottom tab bar (the four destinations, iOS-style), a compact top bar that
     gets out of the way as you read, and a "More" bottom sheet holding the
     region picker and the app CTA. Everything is safe-area aware. */
  .tabbar{display:none}
  @media(max-width:820px){
    .burger{display:none}
    /* phones: one share control in the top bar, opening the OS share sheet.
       A second fixed bar at the bottom would collide with the tab bar. */
    .topshare:not([hidden]){display:inline-flex;align-items:center;justify-content:center;
      width:36px;height:36px;border-radius:999px;flex:none;cursor:pointer;
      background:transparent;border:1px solid rgba(139,148,166,.28);color:#F2CE7B;
      transition:transform .12s ease-out}
    .topshare:active{transform:scale(.92)}
    .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;
      background:rgba(19,26,38,.93);backdrop-filter:blur(20px) saturate(180%);
      -webkit-backdrop-filter:blur(20px) saturate(180%);
      border-top:.5px solid rgba(139,148,166,.2);padding-bottom:env(safe-area-inset-bottom,0px)}
    .tabbar .tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
      min-height:50px;padding:7px 2px 5px;font:inherit;font-size:10px;font-weight:600;letter-spacing:.01em;
      color:#E6E9F0;background:none;border:0;cursor:pointer;text-decoration:none;
      transition:color .16s,transform .12s ease-out}
    .tabbar .tb svg{width:23px;height:23px;stroke-width:1.8;flex:none}
    .tabbar .tb.on{color:#F2CE7B}
    .tabbar .tb:active{transform:scale(.93)}

    header{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
    header.hd{transform:translateY(-102%)}
    .navin{padding:9px 16px;gap:12px}
    .logo{font-size:16px}.logo svg{width:26px;height:26px}
    .navr{gap:8px}

    /* the burger menu becomes a bottom sheet that sits on the tab bar */
    .mobilemenu{position:fixed;left:0;right:0;z-index:69;
      bottom:var(--tabh,53px);
      border-radius:22px 22px 0 0;border-top:.5px solid rgba(139,148,166,.2);
      box-shadow:0 -20px 44px rgba(0,0,0,.45);max-height:72vh;overflow:auto}
    .mobilemenu::before{content:"";display:block;width:38px;height:4px;border-radius:99px;
      background:rgba(139,148,166,.4);margin:10px auto 4px}
    .mm-more{display:flex;flex-wrap:wrap;gap:16px;padding:4px 22px 20px}
    .mm-more a{font-size:13px;color:#8B94A6;text-decoration:none}

    /* iOS gutters + grouped-card feel, and clearance for the fixed bar */
    main{padding-left:16px;padding-right:16px;padding-bottom:34px}
    .navin{max-width:none}
    footer{padding-bottom:calc(40px + 50px + env(safe-area-inset-bottom,0px))}
    .grid{gap:12px}
    .card{border-radius:16px}
    h1{letter-spacing:-1px}
  }
  @media(min-width:821px){.mm-more{display:none}}

  /* ≤640px a .g3 grid is a single column, so full hero cards would stack into a
     15,000px wall. Cards compact into thumb-left rows; a grid marked .lead keeps
     its first card full-bleed, so each section still opens with one featured
     story and the rest read as an index (App-Store-Today pattern, DESIGN.md). */
  @media(max-width:640px){
    .g3 .card{flex-direction:row;align-items:center}
    .g3 .card .thumb,.g3 .card .thumbfill{width:96px;min-width:96px;aspect-ratio:auto;
      align-self:stretch;min-height:96px;object-fit:cover;font-size:26px}
    .g3 .card .cbody{padding:10px 14px;min-width:0}
    .g3 .card h3{font-size:14.5px;margin:4px 0 2px}
    .g3 .card p{font-size:12px;line-height:1.45;display:-webkit-box;
      -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .g3 .card .meta{margin-top:6px;font-size:11px}
    .g3.lead .card:first-child{flex-direction:column;align-items:stretch}
    .g3.lead .card:first-child .thumb{width:100%;min-width:0;min-height:0;aspect-ratio:4/3}
    .g3.lead .card:first-child .thumbfill{width:100%;min-width:0;min-height:0;aspect-ratio:16/9;font-size:40px}
    .g3.lead .card:first-child .cbody{padding:15px 17px 17px}
    .g3.lead .card:first-child h3{font-size:16px;margin:5px 0 4px}
    .g3.lead .card:first-child p{display:block;font-size:13px;line-height:1.5}
  }

  /* ============================================================== motion
     Per DESIGN.md: entrances and feedback are 200–550ms ease-out; the only
     spring (.32,1.5,.55,1) is reserved for the two celebration moments — the
     sign-up confirmation and the mascot paw. Nothing here loops, nothing
     autoplays, nothing moves in the chrome while you read.

     The hidden-until-revealed state is scoped to html.mo, a class an inline
     head script adds ONLY when the visitor has not asked for reduced motion.
     No JS, or reduced motion, or a dead IntersectionObserver → the class is
     never added or is removed again, and every element renders plainly. */
  /* :where() keeps the hidden state at zero specificity so the .mo-in reveal
     always wins — as plain selectors, `html.mo main .grid>.card` (3 classes)
     out-ranked `html.mo .mo-in` (2) and cards never faded in. */
  html.mo :where(main>section,.post>section,main .grid>.card,
                 main .leadband,main .stats>.stat,main .toc){
    opacity:0;transform:translateY(14px);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
  html.mo .mo-in{opacity:1;transform:none}

  /* Hero photographs settle rather than snap — one 1.1s move, once, on load. */
  @keyframes bq-settle{from{transform:scale(1.055)}to{transform:scale(1)}}
  html.mo .banner>img,html.mo .bpix>img{animation:bq-settle 1.1s cubic-bezier(.22,.61,.36,1) both}

  /* Card photo breathes on hover; pointer-devices only, so touch never sticks. */
  @media(hover:hover){
    a.card .thumb{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
    a.card:hover .thumb{transform:scale(1.05)}
  }
  .btn,.chip,.pill{transition:transform .12s ease-out,color .14s,border-color .14s,background .14s}
  .btn:active,.chip:active,.pill:active,.railmore:active{transform:scale(.97)}

  /* Reading progress — a hairline of foil across the very top of an article. */
  .rprog{position:fixed;left:0;top:0;height:3px;width:0;background:var(--foil);
    z-index:60;pointer-events:none;transition:width .12s linear;border-radius:0 2px 2px 0}

  /* The article's jump list tracks where you actually are. */
  .toc a.on{color:var(--gold);font-weight:600}
  .toc a.on::before{color:var(--ink)}

  /* Celebration #1: the sign-up confirmation lands with a spring. */
  @keyframes bq-pop{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}
  .wl .msg.ok{animation:bq-pop .5s cubic-bezier(.32,1.5,.55,1) both}

  /* Celebration #2: Dex's paw gives a small wag when you reach for home. */
  @media(hover:hover){
    .logo svg .pawg{transform-box:fill-box;transform-origin:center;
      transition:transform .45s cubic-bezier(.32,1.5,.55,1)}
    .logo:hover svg .pawg{transform:translateY(-4px) scale(1.09)}
  }

  /* Census report template: chart slots wait for the 2027 data, so they render
     as an honest empty frame — never a fake chart. Each carries its own caption
     and citation line so a journalist can lift the figure the moment it fills. */
  .fig{margin:22px 0 0;border:.5px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--paper)}
  .fig .chartslot{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    text-align:center;padding:22px;background:repeating-linear-gradient(135deg,rgba(120,90,30,.05) 0 12px,transparent 12px 24px)}
  .fig .chartslot .badge{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
  .fig .chartslot .ph{font-size:14px;color:var(--sec);max-width:34ch;line-height:1.5}
  .fig figcaption{padding:12px 16px;border-top:.5px solid var(--hair)}
  .fig figcaption .cap{font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.45}
  .fig figcaption .cite{font-size:11.5px;color:var(--sec);margin-top:6px;line-height:1.5;font-variant-numeric:tabular-nums}
  .notice{border:.5px solid var(--goldL);background:rgba(217,178,95,.09);border-radius:16px;padding:16px 18px;margin-top:22px}
  :root[data-theme="dark"] .notice{background:rgba(242,206,123,.1)}
  .notice b{color:var(--gold)}
  .notice p{font-size:14.5px;color:var(--ink);line-height:1.6;margin-top:4px}

  .share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
  .sharelbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
  .shx{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;padding:0;color:var(--gold);background:rgba(169,124,31,.1);border:1px solid rgba(169,124,31,.28);cursor:pointer;font-family:inherit;text-decoration:none;font-size:16px}
  .shx:hover{background:rgba(169,124,31,.2)}
  :root[data-theme="dark"] .shx{background:rgba(242,206,123,.1);border-color:rgba(242,206,123,.3);color:var(--gold)}

  .localedd{position:relative}
  .localebtn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(139,148,166,.28);color:#B9C0CE;border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
  .localebtn:hover{color:#F2CE7B;border-color:rgba(242,206,123,.4)}
  .localepanel{position:absolute;right:0;top:calc(100% + 10px);min-width:232px;background:#131A26;border:1px solid rgba(139,148,166,.2);border-radius:14px;padding:4px;box-shadow:0 16px 40px rgba(0,0,0,.5);display:none;z-index:70}
  .localepanel.open{display:block}
  .lp-sec{padding:11px 14px}
  .lp-sec+.lp-sec{border-top:.5px solid rgba(139,148,166,.14)}
  .lp-label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8B94A6;display:block;margin-bottom:8px}
  .lp-list{display:flex;flex-direction:column;gap:2px}
  .lp-loc{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:none;color:#E8ECF2;font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;padding:9px 8px;border-radius:9px}
  .lp-loc:hover{background:rgba(139,148,166,.12)}
  .lp-loc.on{color:#F2CE7B}
  .lp-loc.on::after{content:"✓";margin-left:auto;font-size:12px}
  .lp-langs{display:flex;gap:8px;flex-wrap:wrap}
  .lp-lang{font-size:13px;font-weight:700;color:#B9C0CE;border:1px solid rgba(139,148,166,.3);border-radius:999px;padding:6px 14px;text-decoration:none}
  .lp-lang.on{background:linear-gradient(100deg,#F2CE7B,#C9922B);color:#1D1D1F;border-color:transparent}
  .cmodal{position:fixed;inset:0;background:rgba(11,14,21,.62);display:none;align-items:center;justify-content:center;z-index:120;padding:20px}
  .cmodal.open{display:flex}
  .cmbox{background:#1C2536;color:#F3EFE6;border:1px solid rgba(139,148,166,.2);border-radius:18px;padding:26px 24px;max-width:380px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.5)}
  .cmtitle{font-size:19px;font-weight:700;letter-spacing:-.3px}
  .cmsub{font-size:13.5px;color:#98A0B0;margin-top:8px;line-height:1.5}
  .cmact{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
  .cmstay{background:transparent;border:1px solid rgba(139,148,166,.35);color:#F3EFE6;font-weight:700;font-size:14px;border-radius:11px;padding:11px 20px;cursor:pointer;font-family:inherit}
  .cmgo{background:linear-gradient(100deg,#F2CE7B,#C9922B);color:#1D1D1F;font-weight:700;font-size:14px;border:none;border-radius:11px;padding:11px 22px;cursor:pointer;font-family:inherit}
  /* #699: phones kept no language control at all. The burger that held the
     mobile copy of this panel is hidden below 820px, and the More sheet that
     used to hold it went when Games took its tab slot (2026-07-22) — so hiding
     the top-bar control here left no way to change language on a phone. The
     chip stays; only the panel narrows so it cannot push the bar sideways. */
  @media(max-width:820px){
    .localebtn{padding:6px 9px;font-size:12px}
    .localepanel{min-width:0;width:min(268px,calc(100vw - 24px))}
  }

  .tool{background:var(--paper);border:.5px solid var(--hair);border-radius:18px;padding:22px;margin-top:24px}
  .tfield{margin-top:18px}
  .tfield>label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sec);margin-bottom:8px}
  .seg2{display:flex;gap:8px;flex-wrap:wrap}
  .seg2 button{flex:1;min-width:88px;background:var(--ivory);border:1px solid var(--hair);border-radius:11px;padding:11px 12px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
  .seg2 button.on{background:var(--foil);color:#1D1D1F;border-color:transparent}
  .trange{display:flex;align-items:center;gap:12px}
  .trange input[type=range]{flex:1;accent-color:var(--gold);cursor:pointer}
  .tout{background:var(--ivory);border:1px solid var(--goldL);border-radius:14px;padding:18px 20px;margin-top:20px}
  .tout b{font-size:30px;font-weight:800;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
  .tnote{font-size:12.5px;color:var(--sec);margin-top:10px}
  .tsel{width:100%;border:1px solid var(--hair);border-radius:11px;padding:12px;font-size:15px;background:var(--ivory);color:var(--ink);font-family:inherit}
  /* ---- Breed finder (redesigned one-question stepper) ---- */
  .bf-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
  .bf-count{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
  .bf-track{height:6px;border-radius:999px;background:var(--hair);overflow:hidden;margin-bottom:24px}
  :root[data-theme="dark"] .bf-track{background:rgba(139,148,166,.2)}
  .bf-fill{height:100%;border-radius:999px;background:var(--foil);width:0;transition:width .5s cubic-bezier(.32,1.3,.55,1)}
  .bf-step{display:none}
  .bf-step.on{display:block;animation:bfstep .42s cubic-bezier(.32,1.1,.55,1) both}
  @keyframes bfstep{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .bf-q{font-size:clamp(20px,3.4vw,27px);font-weight:700;letter-spacing:-.5px;line-height:1.15}
  .bf-hint{font-size:13.5px;color:var(--sec);margin-top:7px}
  .bf-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-top:20px}
  .bf-opt{position:relative;text-align:left;background:var(--ivory);border:1px solid var(--hair);border-radius:14px;padding:16px 44px 16px 16px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;transition:transform .15s,border-color .15s,background .15s;opacity:0;animation:bfopt .4s ease both}
  .bf-opt:hover{transform:translateY(-2px);border-color:var(--goldL)}
  .bf-opt.sel{background:var(--foil);color:#1D1D1F;border-color:transparent}
  .bf-opt .k{position:absolute;top:50%;right:14px;margin-top:-9px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--hair);transition:.15s}
  .bf-opt.sel .k{border-color:#1D1D1F;background:#1D1D1F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2CE7B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
  @keyframes bfopt{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  .bf-nav{margin-top:20px;min-height:22px}
  .bf-back{font-size:13.5px;font-weight:600;color:var(--sec);background:none;border:none;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;padding:6px 2px}
  .bf-back:hover{color:var(--gold)}
  /* results */
  .bf-res{animation:bfstep .5s ease both}
  .bf-svgdefs{position:absolute;width:0;height:0}
  .bf-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;background:var(--paper);border:1px solid var(--goldL);border-radius:20px;padding:24px 26px;margin-top:14px}
  .bf-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 34%,rgba(242,206,123,.18) 50%,transparent 66%);background-size:280% 100%;animation:bfholo 5.5s linear infinite;pointer-events:none}
  @keyframes bfholo{from{background-position:130% 0}to{background-position:-130% 0}}
  .bf-hero .hi{position:relative;z-index:1}
  .bf-badge{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
  .bf-hero .hn{font-size:clamp(21px,3.6vw,28px);font-weight:800;letter-spacing:-.5px;margin:5px 0 4px}
  .bf-hero .hm{font-size:13.5px;color:var(--sec);line-height:1.5;max-width:44ch}
  .bf-hero .hg{display:inline-flex;align-items:center;gap:5px;margin-top:13px;font-size:13.5px;font-weight:700;color:var(--gold)}
  .ring{flex:none;position:relative;display:grid;place-items:center}
  .ring svg{display:block;transform:rotate(-90deg)}
  .ring .rp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .ring .rp b{font-size:23px;font-weight:800;line-height:1;color:var(--ink)}
  .ring .rp span{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sec);margin-top:3px}
  .bf-hero .bfp{width:96px;height:96px;border-radius:16px;object-fit:cover;flex:none;position:relative;z-index:1;border:1px solid var(--goldL)}
  .bf-mc .bfp{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:none}
  @media(max-width:560px){.bf-hero{gap:14px;padding:20px 18px;flex-wrap:wrap}.bf-hero .bfp{width:72px;height:72px}}
  .bf-morelbl{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sec);margin:26px 0 2px}
  .bf-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px;margin-top:12px}
  .bf-mc{display:flex;align-items:center;gap:14px;background:var(--paper);border:.5px solid var(--hair);border-radius:15px;padding:13px 15px;opacity:0;animation:bfopt .5s ease both;transition:transform .2s,box-shadow .2s}
  a.bf-mc:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(120,90,30,.13)}
  .bf-mc .ring .rp b{font-size:13.5px}.bf-mc .ring .rp span{display:none}
  .bf-mc h3{font-size:15px;font-weight:700;letter-spacing:-.2px}
  .bf-mc p{font-size:12px;color:var(--sec);margin-top:2px}
  .bf-resfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
  @media(prefers-reduced-motion:reduce){.bf-step.on,.bf-opt,.bf-res,.bf-mc,.bf-hero::before{animation:none!important;opacity:1!important;transform:none!important}.bf-fill{transition:none}}
  /* ---- Food calculator (redesigned result + controls) ---- */
  .fc-scanic{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
  .fc-whead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .fc-whead label{margin-bottom:0}
  .fc-wval{font-weight:700;color:var(--gold);font-size:13px}
  .fc-unit{display:inline-flex;border:1px solid var(--hair);border-radius:999px;overflow:hidden;margin-left:auto}
  .fc-unit button{background:transparent;border:none;font-family:inherit;font-size:12px;font-weight:700;color:var(--sec);padding:5px 13px;cursor:pointer}
  .fc-unit button.on{background:var(--foil);color:#1D1D1F}
  .fc-res{background:var(--ivory);border:1px solid var(--goldL);border-radius:18px;padding:22px 24px;margin-top:22px}
  :root[data-theme="dark"] .fc-res{background:rgba(242,206,123,.05)}
  .fc-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
  .fc-big{display:flex;align-items:baseline;gap:9px;margin-top:5px}
  .fc-big b{font-size:clamp(40px,8vw,56px);font-weight:800;letter-spacing:-1.5px;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95}
  .fc-big span{font-size:15px;color:var(--sec);font-weight:600}
  .fc-big.pulse{animation:fcpulse .4s cubic-bezier(.32,1.4,.5,1)}
  @keyframes fcpulse{0%{transform:scale(.97);opacity:.5}100%{transform:none;opacity:1}}
  .fc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
  .fc-st{background:var(--paper);border:.5px solid var(--hair);border-radius:13px;padding:12px 14px}
  .fc-st b{display:block;font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
  .fc-st span{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sec);margin-top:4px;display:block}
  .fc-tip{font-size:13px;color:var(--sec);margin-top:16px;padding-top:14px;border-top:.5px solid var(--hair);line-height:1.55}
  .fc-tip b{color:var(--gold);font-weight:700}
  @media(max-width:560px){.fc-stats{grid-template-columns:1fr}}
  /* ---- Age calculators (dog/cat, #470) ---- */
  .age-chart-card{margin-top:18px;border-radius:18px;overflow:hidden;line-height:0}
  .age-chart-card svg{display:block;width:100%;height:auto}
  .age-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--sec)}
  .age-legend span{display:inline-flex;align-items:center;gap:6px}
  .age-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
  .age-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  /* ---- Name generator ---- */
  .ng-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:20px}
  .ng-card{position:relative;background:var(--ivory);border:1px solid var(--hair);border-radius:14px;
    padding:14px 14px 12px;text-align:left;opacity:0;animation:ngin .4s ease both}
  @keyframes ngin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .ng-card b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.2px;color:var(--ink);padding-right:22px}
  .ng-card span{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sec);margin-top:4px}
  .ng-heart{position:absolute;top:10px;right:10px;width:22px;height:22px;border:none;background:none;cursor:pointer;
    color:var(--sec);padding:0;display:flex;align-items:center;justify-content:center}
  .ng-heart svg{width:17px;height:17px}
  .ng-heart.on{color:var(--gold)}
  .ng-heart.on svg{fill:var(--gold)}
  .ng-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px}
  .ng-count{font-size:12.5px;color:var(--sec)}
  .ng-picks{margin-top:22px;padding-top:18px;border-top:.5px solid var(--hair)}
  .ng-picks .eyebrow{margin-bottom:4px}
  .ng-picklist{font-size:14.5px;color:var(--ink);line-height:1.7;margin-top:8px}
  @media(max-width:560px){.ng-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
  /* ---- Breed light page: hero + photo gallery ---- */
  /* Long-form articles: a single reading column. Everything sits in the well;
     only the rows marked .bleed (hero, email band, related, CTA) run full width.
     Before this, prose was capped at 68ch inside a 1076px container while every
     image and heading ran full width — the column was ragged on every desktop. */
  .post{display:grid;grid-template-columns:1fr min(680px,100%) 1fr}
  .post>*{grid-column:2;min-width:0}
  .post>.bleed{grid-column:1/-1}
  .post p.body{font-size:17.5px;line-height:1.75;max-width:none}
  .post .lede{font-size:19.5px;line-height:1.6;max-width:none}
  .post section{margin-top:40px}
  .post section h2{font-size:clamp(21px,2.2vw,25px);letter-spacing:-.4px;scroll-margin-top:88px}
  .post section img{border-radius:14px}
  .post details p{font-size:15.5px}
  @media(max-width:760px){.post p.body{font-size:16.5px}.post .lede{font-size:18px}}

  /* Medical guides: an author + reviewer byline and a standing disclaimer. The
     reviewer line reads "pending" until a real credentialed vet signs off in
     MED_REVIEWERS — see page_story. */
  .medby{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:14px;
    padding:12px 16px;border:.5px solid var(--hair);border-radius:14px;background:var(--paper);
    font-size:13.5px;color:var(--sec)}
  .medby b{color:var(--ink);font-weight:600}
  .medby .rv-pending{color:var(--sec)}
  .medby .rv-done{color:var(--green);font-weight:600}
  .meddisc{margin-top:14px;padding:13px 16px;border-radius:14px;
    border:.5px solid var(--hair);background:var(--paper);
    font-size:14px;line-height:1.55;color:var(--sec)}
  .meddisc b{color:var(--ink)}
  /* The "see a vet now" red-flag section. A left bar and a tinted ground set it
     apart from ordinary advice; the colour never carries meaning alone — the
     heading says it in words. Reds are theme-scoped (DESIGN.md a11y note). */
  .post section.vetflag{background:var(--flagbg);border:1px solid var(--flagbd);
    border-left:4px solid var(--flag);border-radius:16px;padding:6px 22px 20px;margin-top:34px}
  .post section.vetflag h2{color:var(--flag)}
  .post section.vetflag .body a{color:var(--flag)}
  @media(max-width:760px){.post section.vetflag{padding:4px 16px 16px}}

  /* "In this guide" jump list — only rendered on articles with enough sections
     to get lost in. */
  .toc{background:var(--paper);border:.5px solid var(--hair);border-radius:16px;padding:16px 20px;margin-top:26px}
  .toc h2{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sec);margin-bottom:10px}
  .toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
  .toc li{counter-increment:toc;border-top:.5px solid var(--hair)}
  .toc li:first-child{border-top:none}
  .toc a{display:block;padding:11px 0 11px 26px;position:relative;font-size:15px;line-height:1.45;color:var(--ink)}
  .toc a::before{content:counter(toc);position:absolute;left:0;top:11px;font-size:12px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
  .toc a:hover{color:var(--gold)}

  /* Printable checklist — a HowTo article's takeaway artefact. #printchecklist
     is the print-isolation target: @media print hides everything else on the
     page and shows only this block, so "Print" gives a clean single page. */
  .checklist{background:var(--paper);border:.5px solid var(--hair);border-radius:16px;padding:22px 24px;margin-top:26px}
  .checklist-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:4px}
  .checklist-head h2{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sec);margin:0}
  .checklist-printbtn{border:1px solid var(--hair);background:transparent;color:var(--sec);font:inherit;font-size:12.5px;font-weight:700;border-radius:999px;padding:7px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;flex:none}
  .checklist-printbtn:hover{color:var(--gold);border-color:var(--gold)}
  .checklist ul{list-style:none;margin:8px 0 0;padding:0}
  .checklist li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-top:.5px solid var(--hair);font-size:15px;line-height:1.5;color:var(--ink)}
  .checklist li:first-child{border-top:none}
  .checklist .cbox{flex:none;width:17px;height:17px;border:1.6px solid var(--gold);border-radius:5px;margin-top:2px}
  @media print{
    body *{visibility:hidden}
    #printchecklist,#printchecklist *{visibility:visible}
    #printchecklist{position:absolute;left:0;top:0;width:100%;padding:24px;border:none}
    .checklist-printbtn{display:none}
  }

  .bpix{border-radius:22px;overflow:hidden;position:relative;margin-top:20px;background:linear-gradient(135deg,#243147,#131A26)}
  .bpix>img{width:100%;aspect-ratio:16/8.4;object-fit:cover;object-position:center 22%;display:block}
  @media(max-width:640px){.bpix>img{aspect-ratio:4/3.4}}
  .bpix .cap{position:absolute;left:0;right:0;bottom:0;padding:46px 30px 22px;color:#F7F3EA;background:linear-gradient(transparent,rgba(11,14,21,.84))}
  /* A story hero is a .bleed row (1076px) but the copy under it sits in the
     centred 680px well, so the headline used to start ~168px left of its own
     byline and body — the only text on the page aligned to nothing. Pad the
     caption by the well's gutter so the H1 shares the text edge; below the
     breakpoint where the gutter closes, max() falls back to the 30px inset. */
  .bpix.bleed .cap{padding-left:max(30px,calc((100% - 680px)/2));padding-right:max(30px,calc((100% - 680px)/2))}
  .bpix .cap h1{color:#fff}
  .bpix .cap p{color:rgba(247,243,234,.86);font-size:15px;margin-top:6px;max-width:60ch}
  .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
  .gallery figure{position:relative;overflow:hidden;border-radius:14px;margin:0;background:linear-gradient(150deg,#243147,#131A26)}
  .gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .35s ease}
  .gallery figure:hover img{transform:scale(1.045)}
  .gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;font-size:11.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(11,14,21,.72))}
  @media(max-width:720px){.gallery{grid-template-columns:repeat(2,1fr)}}

  #cconsent{position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:90;
    max-width:480px;margin:0 auto;background:#1C2536;border:1px solid rgba(139,148,166,.28);
    border-radius:16px;padding:16px 18px;box-shadow:0 12px 34px rgba(0,0,0,.4);
    font-size:13.5px;line-height:1.55;color:#C7CDD9}
  #cconsent p{margin:0}
  #cconsent a{color:#F2CE7B}
  .cc-btns{display:flex;gap:8px;margin-top:12px}
  .cc-btns button{flex:1;font:inherit;font-size:14px;font-weight:600;padding:10px 12px;border-radius:10px;
    cursor:pointer;border:1px solid rgba(139,148,166,.45);background:none;color:#F7F3EA}
  .cc-btns .cc-gold{background:var(--foil,linear-gradient(100deg,#F2CE7B,#C9922B));border:1px solid transparent;color:#1D1D1F}
  :root[data-theme="light"] #cconsent{background:#FFFFFF;color:#55503F;border-color:rgba(29,29,31,.16)}
  :root[data-theme="light"] #cconsent a{color:#8A6316}
  :root[data-theme="light"] .cc-btns button{color:#1D1D1F;border-color:rgba(29,29,31,.3)}
  :root[data-theme="light"] .cc-btns .cc-gold{border-color:transparent}
  @media(pointer:coarse){#cconsent{bottom:calc(76px + env(safe-area-inset-bottom))}}
  @media(max-width:430px){.cc-btns{flex-direction:column}}

  #newsmodal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:18px;
    background:rgba(9,13,20,.62)}
  #newsmodal[hidden]{display:none}
  .nm-card{position:relative;max-width:430px;width:100%;background:#1C2536;color:#C7CDD9;
    border:1px solid rgba(139,148,166,.28);border-radius:20px;padding:26px 24px;
    box-shadow:0 18px 50px rgba(0,0,0,.5)}
  .nm-card .lb-kick{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#F2CE7B}
  .nm-card h2{color:#F7F3EA;font-size:21px;letter-spacing:-.4px;margin:7px 0 0}
  .nm-sub{font-size:13.5px;line-height:1.6;margin:8px 0 14px}
  .nm-card .wl .row1{display:flex;gap:8px}
  .nm-card .wl input[type=email]{flex:1;min-width:0;padding:12px 14px;border-radius:12px;font:inherit;font-size:15px;
    background:rgba(255,255,255,.07);border:1px solid rgba(139,148,166,.32);color:#F7F3EA}
  .nm-card .wl .btn{flex:none;border:none;cursor:pointer;font:inherit;font-weight:700;font-size:14.5px;
    padding:12px 16px;border-radius:13px;background:var(--foil,linear-gradient(100deg,#F2CE7B,#C9922B));color:#1D1D1F}
  .nm-card .wl .fine{font-size:11.5px;line-height:1.5;color:#7B8595;margin:10px 0 0}
  .nm-card .wl .fine a{color:#F2CE7B}
  .nm-card .wl .msg{margin:8px 0 0;font-size:13px}
  .nm-card .wl .msg.ok{color:#3ECF8E}
  .nm-card .wl .msg.err{color:#FF6B4A}
  .nm-card .wl .hp{position:absolute;left:-9999px}
  .nm-x{position:absolute;top:10px;right:14px;background:none;border:none;color:#8B94A6;font-size:22px;cursor:pointer;padding:4px}
  .nm-later{margin-top:12px;background:none;border:none;color:#8B94A6;font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;padding:0}
  :root[data-theme="light"] #newsmodal{background:rgba(40,36,26,.45)}
  :root[data-theme="light"] .nm-card{background:#FFFFFF;color:#55503F;border-color:rgba(29,29,31,.16)}
  :root[data-theme="light"] .nm-card h2{color:#1D1D1F}
  :root[data-theme="light"] .nm-card .wl input[type=email]{background:#F4EFE4;color:#1D1D1F;border-color:rgba(29,29,31,.2)}