/* ==========================================================================
   Puppy Connection — concept build
   Palette and typefaces harvested from the client's Wix build (see BRAND.md).
   Playfair Display is theirs. Barlow stands in for DIN Neuzeit Grotesk,
   which is licensed through Wix and cannot be carried over.
   ========================================================================== */

:root{
  /* brand, harvested */
  --ink:#262626;
  --ink-soft:#414141;
  --gold:#f7d57f;
  --bronze:#bc9b5d;
  --olive:#7c6b40;
  --cream:#e7e2d2;
  --cream-text:#e6deca;
  /* Sage green for the header, menu panel, brand band and footer (Amber, 2026-10-30), read from her screen */
  --sage:#4a5a4b;
  --sage-line:#6b7b6c;

  /* derived neutrals, warm-biased so they sit with the cream */
  --paper:#fcfcfc;
  --paper-warm:#f5f2ea;
  --line:#e2ddd1;
  --line-strong:#cdc6b5;
  --muted:#6f6a60;

  --ok:#3d6b4a;
  --alert:#9c4b3c;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'Barlow Condensed','Barlow',system-ui,sans-serif;

  --maxw:1360px;
  --gut:clamp(1rem,4vw,2.5rem);
  --rule:1px solid var(--line);

  color-scheme: light only !important;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#fcfcfc; --paper-warm:#f5f2ea; --ink:#262626; --line:#e2ddd1;
    color-scheme: light only !important;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* In-page links land below the sticky header (G1). --hdr-h is the header's measured height,
     set by main.js; 152px is the tallest header measured without it (desktop, 2026-10-17). */
  scroll-padding-top:calc(var(--hdr-h,152px) + .75rem)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--olive)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--gut)}

/* grid children must be allowed to shrink */
.grid>*,.split>*,.rail-layout>*,.foot-grid>*,.facts>*{min-width:0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.015em}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem;max-width:70ch}
/* Room between a heading and the text under it (Alex, 2026-10-31: paragraphs sat flush against headings site-wide).
   Margins collapse, so a heading with its own bottom margin keeps the larger of the two. */
:is(h1,h2,h3)+:is(p,ul,ol,.lede,.prose){margin-top:.85rem}
h1+:is(p,.lede,.split){margin-top:1.1rem}
.steps h3+p{margin-top:.6rem}

.eyebrow{
  font-family:var(--cond);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--olive);margin:0 0 .6rem;
}
.eyebrow-light{color:var(--gold)}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:62ch}
.meta{font-family:var(--cond);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- header ---------- */
.site-header{background:var(--sage);position:sticky;top:0;z-index:50}
.hdr{
  max-width:var(--maxw);margin-inline:auto;padding:.85rem var(--gut);
  display:flex;align-items:center;gap:2rem;
}
.brand{display:flex;flex-direction:column;gap:.15rem;flex:0 1 auto;min-width:0;text-decoration:none}
.brand img{width:clamp(150px,17vw,208px);height:auto}
.brand small{
  font-family:var(--serif);font-size:.72rem;font-style:italic;
  color:var(--cream-text);letter-spacing:.01em;
}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2rem)}
.nav a{
  font-family:var(--cond);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-text);text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current]{color:#fff;border-bottom-color:var(--gold)}
.nav .btn-list{
  border:1px solid var(--gold);color:var(--gold);padding:.45rem 1rem;border-bottom-width:1px;
}
.nav .btn-list:hover{background:var(--gold);color:var(--ink);border-bottom-color:var(--gold)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--sage-line);color:var(--cream-text);
  font-family:var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:.5rem .8rem;cursor:pointer}
@media(max-width:900px){
  /* Full height rather than a short dropdown with the page showing beneath it.
     Sits below the sticky header (z-index 50) so the logo and close stay put;
     --hdr-h is measured in main.js because the header height is not fixed. */
  .nav{
    display:none;position:fixed;inset:0;z-index:40;
    background:var(--sage);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--hdr-h,86px) + 1.6rem) var(--gut) 2.4rem;
  }
  .nav.open{display:flex}
  .nav a{
    width:100%;padding:1.15rem 0;border-bottom:1px solid var(--sage-line);
    font-size:1.35rem;letter-spacing:.1em;
  }
  .nav a:first-child{border-top:1px solid var(--sage-line)}
  .nav .btn-list{
    margin-top:auto;text-align:center;border:1px solid var(--gold);
    padding:1rem 1.2rem;font-size:1.1rem;
  }
  /* The nav is a descendant of the header, so it paints above the header's
     background whatever its z-index. Lift its siblings instead, or the menu
     covers the logo and the button used to close it. */
  .brand,.burger{position:relative;z-index:60}
  .burger{display:block}
  /* Alex, 2026-11-01: a smaller logo so the sticky header takes less of a phone screen, and a menu button
     that is easier to read and tap (44px). */
  .hdr{padding-top:.55rem;padding-bottom:.55rem}
  .brand img{width:118px}
  .brand small{font-size:.64rem}
  .burger{font-size:.95rem;padding:.65rem 1.05rem;min-height:44px}
  body.nav-open{overflow:hidden}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--cond);font-size:1.02rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;padding:.72rem 1.5rem;border:1px solid transparent;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.btn-primary{background:var(--ink);color:var(--cream-text);border-color:var(--ink)}
.btn-primary:hover{background:var(--olive);border-color:var(--olive);color:#fff}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-gold:hover{background:var(--ink);color:var(--gold)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-warm);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}

/* ---------- sections ---------- */
.band{padding:clamp(2.6rem,6vw,4.6rem) 0}
.band-warm{background:var(--paper-warm);border-block:var(--rule)}
.band-dark{background:var(--ink);color:var(--cream-text)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:var(--cream-text)}
/* The For breeders band above the footer sits on the brand's light cream, so it reads apart from
   the charcoal footer (G2). Its eyebrow takes a deeper olive, since olive on cream is 4.0:1. */
.band-cream{background:var(--cream)}
.band-cream .eyebrow{color:#5c4f2f}
.band-cream a:not(.btn){color:#5c4f2f}
/* The price card in the cream band matches the See how listing works button (Alex, 2026-10-17,
   option A): charcoal with cream text, 11.3:1, no other border */
.price-card.price-card-dark{background:var(--ink);border-color:var(--ink);color:var(--cream-text)}
.price-card.price-card-dark .meta{color:var(--cream-text)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.sec-head .link-more{font-family:var(--cond);letter-spacing:.12em;text-transform:uppercase;font-size:.92rem;
  color:var(--olive);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:2px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink)}
.hero-img{width:100%;height:clamp(360px,56vh,580px);object-fit:cover;object-position:center 38%;opacity:.85}
@media(max-width:800px){.hero-img{height:clamp(300px,48vh,420px)}}
.hero-panel{
  position:absolute;inset:auto 0 0 0;padding:clamp(1.4rem,4vw,3rem) 0;
  background:linear-gradient(to top,rgba(20,20,20,.88),rgba(20,20,20,.55) 55%,transparent);
}
.hero-panel h1{color:#fff}
.hero-panel h1 em{font-style:italic;color:var(--gold);display:block;font-size:.5em;margin-bottom:.1em}
.hero-sub{color:var(--cream-text);font-size:1.1rem;max-width:52ch;margin:.6rem 0 0}
.breed-search{display:flex;gap:0;max-width:560px;margin-top:1.4rem}
.breed-search select{
  flex:1;min-width:0;font-family:var(--sans);font-size:1.02rem;padding:.8rem .9rem;border:1px solid #fff;
  background:#fff;color:var(--ink);border-radius:0;
}
.breed-search button{border:1px solid var(--gold);background:var(--gold);color:var(--ink);
  font-family:var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:.8rem 1.4rem;cursor:pointer}
.breed-search button:hover{background:var(--ink);color:var(--gold)}
/* The home search (2026-10-11): one box with suggestions grouped by kind, and quick picks. */
.site-search{position:relative;max-width:620px;margin-top:1.4rem}
.site-search-row{display:flex;align-items:stretch;position:relative;height:3.25rem;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.site-search input[type=search]{flex:1 1 0;min-width:0;height:100%;box-sizing:border-box;font-family:var(--sans);font-size:1.02rem;line-height:1;padding:0 1rem;border:0;background:#fff;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.site-search input[type=search]:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.site-search button{flex:0 0 auto;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:7.5rem;border:0;background:var(--gold);color:var(--ink);font-family:var(--cond);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;padding:0 1.4rem;margin:0;cursor:pointer;border-radius:0}
.site-search button:hover{background:var(--ink);color:var(--gold)}
.site-search-sug{position:absolute;left:0;right:0;top:100%;z-index:30;list-style:none;margin:0;padding:.3rem 0;background:#fff;border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.22);max-height:22rem;overflow-y:auto}
.site-search-sug li{display:grid;grid-template-columns:5.2rem 1fr;column-gap:.7rem;padding:.55rem .9rem;cursor:pointer;color:var(--ink)}
.site-search-sug li[aria-selected=true],.site-search-sug li[data-i]:hover{background:var(--paper-warm)}
.site-search-sug .sug-kind{grid-row:span 2;align-self:center;font-family:var(--cond);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.site-search-sug .sug-label{font-weight:500}
.site-search-sug .sug-sub{font-size:.85rem;color:var(--ink-soft)}
.site-search-sug .sug-none{display:block;color:var(--ink-soft);cursor:default}
@media(max-width:420px){.site-search button{min-width:5.5rem;padding:0 1rem}}

/* ---------- puppy cards ---------- */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.7rem)}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr))}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr))}

.card{background:var(--paper);border:var(--rule);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:border-color .15s ease}
.card:hover{border-color:var(--bronze)}
/* 3:2 matches her photography: sampled 24 first-images, median aspect 1.50,
   18 of 24 landscape. At this ratio most photos crop by nothing at all. */
.card-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--paper-warm)}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* portrait-only listing: show the whole dog rather than crop it */
.sec-tools{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:flex-end}
.list-search{margin:0;width:19rem;max-width:100%}
.list-search-label{position:absolute;left:-9999px}
.list-search-row{position:relative;display:flex;align-items:stretch;height:2.6rem}
.list-search input[type=search]{flex:1 1 0;min-width:0;height:100%;box-sizing:border-box;font-family:var(--sans);font-size:1rem;line-height:1;padding:0 2.4rem 0 .9rem;border:1px solid var(--line-strong);background:#fff;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.list-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.list-search input[type=search]:focus-visible{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage)}
.list-search-clear{position:absolute;right:0;top:0;width:2.4rem;height:100%;border:0;background:none;color:var(--ink-soft);font-size:1.6rem;line-height:1;cursor:pointer;border-radius:0}
.list-search-clear:hover{color:var(--ink)}
.list-search-clear:focus-visible{outline:2px solid var(--sage);outline-offset:-2px}
.list-search-clear[hidden],.list-search-none[hidden]{display:none}
.list-search-count{position:absolute;left:-9999px}
.list-search-none{margin:-.4rem 0 1.4rem;font-size:1.05rem;color:var(--ink-soft)}
.list-search-none button{border:0;background:none;padding:0;font:inherit;color:var(--olive);text-decoration:underline;cursor:pointer}
.is-filtered{display:none!important}
.card-media.is-logo{background:var(--paper-warm)}
.card-media.is-logo img{object-fit:contain;object-position:center;padding:1.2rem;mix-blend-mode:multiply}
/* A logo on its own solid color fills the tile with that color (LOGO_FILL in the generator, Alex 2026-10-31) */
.card-media.is-logo[data-fill] img,.breeder-logo[data-fill] img{mix-blend-mode:normal}
.card-media.is-whole{background:var(--cream)}
.card-media.is-whole::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:var(--fill) center/cover no-repeat;
  /* scaled up so the blur has material past the edges instead of fading out */
  filter:blur(22px) saturate(.7) brightness(.94);transform:scale(1.25);
}
.card-media.is-whole img{position:relative;z-index:1;object-fit:contain;object-position:center}
/* hover only where there is a real pointer, or the zoom sticks after a tap on iOS */
@media (hover:hover){.card:hover .card-media img{transform:scale(1.02);transition:transform .4s ease}}
/* the house reset site-checks enforces, matching teapup and sweetpuppypaws */
@media (hover: none){.card:hover .card-media img{transform:none}}
.card-body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card-name{font-family:var(--serif);font-size:1.3rem;line-height:1.2;font-weight:600}
.card-breed{font-family:var(--cond);font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.card-foot{margin-top:auto;padding-top:.7rem;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  border-top:1px dashed var(--line-strong)}
.price{font-family:var(--cond);font-size:1.3rem;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.card-ready{font-family:var(--cond);font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.tag{position:absolute;z-index:2;top:.7rem;left:.7rem;font-family:var(--cond);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.25rem .6rem;background:rgba(38,38,38,.9);color:var(--gold)}
.tag-sold{background:rgba(156,75,60,.94);color:#fff}
.tag-pending{background:rgba(124,107,64,.94);color:var(--gold)}
.tag-litter{top:auto;bottom:.7rem;left:.7rem;background:rgba(252,252,252,.94);color:var(--ink)}
.card.is-sold .card-media img{filter:grayscale(.85)}

/* ---------- browse filter bar ----------
   The same design as Teapup and Sweet Puppy Paws (Alex, 2026-10-07), in this site's ink and
   gold. On a computer, tags above the grid, each opening a small menu; a chosen tag fills in
   and its cross clears it. On a phone the tags give way to one Filters button and a bottom
   sheet, the chosen filters show as tags, and the bar stays pinned under the header. The grid
   runs four across now that no sidebar takes a column. */
.avail-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;flex-wrap:wrap;
  margin-bottom:1.4rem;padding-bottom:.9rem;border-bottom:2px solid var(--ink)}
.avail-head .count{margin:0;font-family:var(--cond);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.avail-head .count-sort{color:var(--muted);margin-left:.6rem}
.ftags{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;align-items:center}
.ft-wrap{position:relative;display:inline-flex}
.ft{display:inline-flex;align-items:center;gap:.4rem;min-height:42px;padding:0 .9rem;border:1.5px solid var(--line-strong);
  background:#fff;font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.ft:hover{border-color:var(--ink)}
.ft:focus-visible,.ft-search:focus-within,.ft-x:focus-visible,.f-open:focus-visible,.f-chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold)}
.ft .chev{color:var(--olive)}
.ft.on{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.ft.on .chev{display:none}
.ft-x{min-width:38px;border:0;background:var(--ink);color:var(--gold);font-size:1.15rem;line-height:1;cursor:pointer;border-left:1px solid rgba(247,213,127,.35)}
.ft-search{cursor:text;color:var(--muted);width:10rem}
.ft-search input{border:0;outline:0;background:none;font:inherit;color:var(--ink);width:100%;min-width:0}
.ft-menu{position:absolute;top:calc(100% + .35rem);left:0;z-index:45;list-style:none;margin:0;padding:.3rem;min-width:15rem;
  max-height:22rem;overflow-y:auto;background:#fff;border:1px solid var(--line-strong);box-shadow:0 12px 28px -10px rgba(38,38,38,.4)}
.ft-menu.flip{left:auto;right:0}
.ft-menu li{padding:.55rem .8rem;cursor:pointer;white-space:nowrap}
.ft-menu li:hover,.ft-menu li.act{background:var(--paper-warm)}
.ft-menu li[aria-selected="true"]{font-weight:600}
.ft-menu li[aria-selected="true"]::after{content:"\2713";float:right;margin-left:1rem;color:var(--olive)}
.f-open,.f-active{display:none}
/* These set their own display, which would otherwise beat the hidden attribute and leave the
   phone sheet and its scrim showing on every screen. */
.f-sheet[hidden],.f-scrim[hidden],.ft-x[hidden],.ft-menu[hidden],.f-empty[hidden],.f-open .dot[hidden]{display:none}
.f-empty{margin:0 0 1.5rem}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.f-scrim{position:fixed;inset:0;z-index:90;background:rgba(20,20,20,.5)}
.f-sheet{position:fixed;left:0;right:0;bottom:0;z-index:91;max-height:82vh;display:flex;flex-direction:column;background:var(--paper);
  box-shadow:0 -12px 32px -12px rgba(38,38,38,.45);padding-bottom:env(safe-area-inset-bottom)}
.f-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem .5rem}
.f-sheet-head h2{margin:0;font-size:1.25rem}
.f-sheet-close{width:44px;height:44px;border:0;background:none;font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer}
.f-sheet-body{overflow-y:auto;padding:.25rem 1.1rem 1rem}
.f-sheet-foot{display:flex;gap:.75rem;padding:.75rem 1.1rem 1rem;border-top:var(--rule)}
.f-sheet-foot button{flex:1;min-height:48px;font-family:var(--cond);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.f-clear-all{border:1.5px solid var(--line-strong);background:#fff;color:var(--ink)}
.f-show{border:0;background:var(--ink);color:var(--gold)}
.f-group{margin-bottom:1.1rem}
.f-group h3{margin:.4rem 0 .55rem;font-family:var(--cond);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.f-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.f-chip{min-height:42px;padding:0 .9rem;border:1.5px solid var(--line-strong);background:#fff;font:inherit;color:var(--ink);cursor:pointer}
.f-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.f-name{display:flex;align-items:center;gap:.5rem;min-height:46px;padding:0 .9rem;border:1.5px solid var(--line-strong);background:#fff;color:var(--muted)}
.f-name input{border:0;outline:0;background:none;font:inherit;font-size:1rem;width:100%;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.f-sheet{animation:fSheetUp .22s ease-out}}
@keyframes fSheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.grid-4.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.grid-4.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
.result-bar{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.2rem;padding-bottom:.7rem;border-bottom:2px solid var(--ink)}
.result-bar .count{font-family:var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.empty{border:1px dashed var(--line-strong);padding:2.5rem 1.5rem;text-align:center;color:var(--muted)}

/* ---------- listing detail ---------- */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:start}
@media(max-width:940px){.split{grid-template-columns:1fr}}
/* A breeder page with a logo puts the name, buttons and story beside the logo and contact column
   (Alex, 2026-10-19), so the left side is wider and the name and buttons keep one line each. */
@media(min-width:941px){.split.profile-top{grid-template-columns:1.6fr 1fr}}
.profile-top .profile-actions{margin-bottom:2rem}
/* G10: on a wide screen a short sidebar beside long text travels with the reader and comes to
   rest level with the end of the text, so the right column never sits empty beside the prose. */
@media(min-width:941px){.split > aside{position:sticky;top:calc(var(--hdr-h,152px) + 1.5rem)}}
.gallery-main{aspect-ratio:3/2;overflow:hidden;border:var(--rule);background:var(--paper-warm)}
/* Contain here, not cover. At 3:2 the landscape majority fills the box
   exactly, so only a portrait letterboxes, and on the page where you are
   deciding on a puppy a whole dog beats a full-bleed crop. */
.gallery-main img{width:100%;height:100%;object-fit:contain}
/* G8: the photos are stacked and crossfade, as on Bless Your Paws. Only .is-on shows. */
.gallery-main{position:relative}
.gallery-main img{position:absolute;inset:0;opacity:0;transition:opacity .7s ease-in-out}
.gallery-main img.is-on{opacity:1;z-index:1}
@media (prefers-reduced-motion:reduce){.gallery-main img{transition:none}}
/* One row that scrolls, rather than a second row that competes with the main
   photo for height. The arrows only appear when there is somewhere to go. */
.thumb-strip{position:relative;margin-top:.5rem}
.thumbs{display:flex;gap:.5rem;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:0 0 76px;scroll-snap-align:start;
  padding:0;border:1px solid var(--line);background:none;cursor:pointer;aspect-ratio:1;overflow:hidden}
.thumb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;display:grid;place-items:center;padding:0;cursor:pointer;
  font-family:var(--cond);font-size:1.5rem;line-height:1;
  border:1px solid var(--line-strong);background:rgba(252,252,252,.94);color:var(--ink)}
.thumb-nav:hover{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.thumb-nav[hidden]{display:none}
/* kept inside the strip so they never escape the column on a narrow screen */
.thumb-nav.prev{left:0}
.thumb-nav.next{right:0}
.thumb-nav{box-shadow:0 0 0 4px rgba(252,252,252,.72)}
.thumbs button[aria-current]{border-color:var(--ink);border-width:2px}
.thumbs img{width:100%;height:100%;object-fit:cover}

.name-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.name-row h1{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.name-row .price{font-size:clamp(1.5rem,2.6vw,2rem)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:var(--rule);margin:1.4rem 0}
/* Puppy facts as boxes that always fill the row (Alex, 2026-10-17): three to a row, and the last
   row stretches, so no box is ever left empty. Two to a row on a phone. */
#detail .facts{display:flex;flex-wrap:wrap;border:0;border-top:var(--rule);border-left:var(--rule)}
#detail .facts > div{flex:1 1 30%;min-width:30%}
@media (max-width:560px){#detail .facts > div{flex-basis:45%;min-width:45%}}
/* the right column stacks several blocks; give them room to read as separate */
#detail .d-media > section{margin-top:2.2rem}
#detail .breeder-box{margin-top:2.2rem}
#detail .d-notes > .disclaimer{margin-top:0}
#detail .d-notes > .guide-panel{margin-top:1.4rem}
#detail > section:first-of-type{padding-bottom:clamp(2.6rem,6vw,4.6rem)}
.facts div{padding:.75rem .9rem;border-right:var(--rule);border-bottom:var(--rule)}
.facts dt{font-family:var(--cond);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:.15rem 0 0;font-size:1.02rem}
.includes{list-style:none;padding:0;margin:.6rem 0 0;columns:2;column-gap:1.6rem}
.includes li{padding-left:1.1rem;position:relative;margin-bottom:.3rem;font-size:.98rem;break-inside:avoid}
.includes li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--bronze)}
/* Two columns on a phone too, so the list takes half the height (Alex, 2026-11-01). One only on the narrowest screens. */
@media(max-width:560px){.includes{column-gap:1rem}.includes li{font-size:.94rem}}
@media(max-width:330px){.includes{columns:1}}

/* the primary action: contacting the breeder */
.breeder-box{border:2px solid var(--ink);background:var(--paper-warm);padding:1.3rem 1.4rem;margin-top:1.6rem}
.breeder-box .eyebrow{margin-bottom:.35rem}
.breeder-box h3,.breeder-box h2.breeder-name{font-size:1.35rem;margin-bottom:.2rem}
.contact-list{list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.contact-list a{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--ink);
  padding:.5rem .7rem;border:var(--rule);background:var(--paper)}
.contact-list a:hover{border-color:var(--olive);background:#fff}
.contact-list b{font-family:var(--cond);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);flex:0 0 7.4rem;white-space:nowrap}
.disclaimer{font-size:.88rem;color:var(--muted);margin:.9rem 0 0;line-height:1.5}

/* ---------- breeder profile ---------- */
/* No initial-letter square: the breeder's real logo carries identity in the
   right column, and two marks competing beside the name read as clutter. */
.profile-head h1{margin-bottom:.15rem}
.prose p{margin-bottom:1.1rem}
.prose p:first-of-type::first-letter,.prose .brand-line + p::first-letter{
  font-family:var(--serif);font-size:3.4em;float:left;line-height:.82;padding:.06em .1em 0 0;color:var(--olive)
}
/* A paragraph after a contact list is a note, not an opening: no drop cap, and room above it (Contact, Alex 2026-10-26). */
.prose .contact-list + p{margin-top:1.6rem}
.prose .contact-list ~ p::first-letter{font:inherit;float:none;line-height:inherit;padding:0;color:inherit}

/* ---------- pricing (list with us) ---------- */
.price-card{border:2px solid var(--ink);background:var(--paper);padding:2rem;text-align:center;max-width:420px}
.price-big{font-family:var(--serif);font-size:4rem;line-height:1;font-weight:600}
.price-big sup{font-size:.42em;vertical-align:super;margin-right:.05em}
.price-card .meta{margin-top:.3rem}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:var(--rule)}
.steps li{counter-increment:s;background:var(--paper);padding:1.2rem 1.3rem}
.steps li::before{content:counter(s);display:block;font-family:var(--cond);font-size:.8rem;letter-spacing:.16em;
  color:var(--bronze);margin-bottom:.4rem}
.steps h3{font-size:1.05rem;margin-bottom:.3rem}
.steps p{font-size:.94rem;margin:0;color:var(--ink-soft)}

/* ---------- footer ---------- */
.site-footer{background:var(--sage);color:var(--cream-text);padding:clamp(2.2rem,5vw,3.4rem) 0 1.6rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
/* The walker and dog only, cut from the logo (Alex, 2026-10-17), so the sign-up column stays short */
.site-footer img{width:auto;height:56px;margin-bottom:.8rem}
.site-footer .foot-h{font-family:var(--cond);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .7rem;font-weight:600}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.45rem}
.site-footer a{color:var(--cream-text);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.foot-note{border-top:1px solid var(--sage-line);margin-top:2rem;padding-top:1.1rem;font-size:.84rem;color:var(--cream-text)}
/* The footer's link columns are <details>, written open and closed by js/main.js on a phone,
   the same device as Teapup's footer (Alex, 2026-10-07), so a phone page does not end in a
   long stack of links. With the script off they stay open. */
.foot-sec > summary{list-style:none;cursor:pointer}
.foot-sec > summary::-webkit-details-marker{display:none}
.foot-sec .foot-h{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.foot-sec .foot-more{display:none;color:var(--cream-text);transition:transform .2s ease}
.foot-sec .foot-more svg{display:block}
.foot-sec[open] .foot-more{transform:rotate(180deg)}
@media(max-width:700px){
  .foot-grid{gap:0 2rem}
  .foot-grid > div:first-child{margin-bottom:1.2rem}
  .foot-sec > summary{min-height:48px;display:flex;align-items:center;border-top:1px solid var(--sage-line)}
  .foot-sec > summary .foot-h{width:100%;margin:0}
  .foot-sec[open] > summary{margin-bottom:.5rem}
  .foot-sec .foot-more{display:block}
  .foot-sec > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){.foot-sec .foot-more{transition:none}}

/* Home page grids on a phone: two across, the first eight shown and "Show more" for the
   rest (js/main.js, reveal). A card sets its own display, so a hidden one needs saying. */
.home-grid > [hidden]{display:none}
.reveal-row{justify-content:center}
@media(max-width:760px){
  .home-grid,.grid-4.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  /* At two across a card is about 170px wide, so the price and the ready date stack rather
     than squeezing the date onto three lines beside the price. */
  /* Portrait 4:5 photos, Teapup's tile shape, and a shorter text block, so the photo leads the
     card (Alex chose this, option B, 2026-10-07). js/main.js asks for each photo at 4:5. */
  .home-grid .card-media,.grid-4.cols-4 .card-media{aspect-ratio:4/5}
  .home-grid .card-media img,.grid-4.cols-4 .card-media img{object-position:center}
  .home-grid .card-body,.grid-4.cols-4 .card-body{padding:.6rem .7rem .75rem;gap:.15rem}
  .home-grid .card-name,.grid-4.cols-4 .card-name{font-size:1.02rem;line-height:1.15}
  .home-grid .card-breed,.grid-4.cols-4 .card-breed{font-size:.74rem;letter-spacing:.06em}
  .home-grid .card-foot,.grid-4.cols-4 .card-foot{flex-direction:column;align-items:flex-start;gap:0;padding-top:.35rem}
  .home-grid .price,.grid-4.cols-4 .price{font-size:1.02rem}
  .home-grid .card-ready,.grid-4.cols-4 .card-ready{white-space:nowrap;font-size:.68rem;letter-spacing:.04em}
  .home-grid .tag,.grid-4.cols-4 .tag{font-size:.62rem;padding:.25rem .4rem;left:.45rem}
  .home-grid .tag:not(.tag-litter),.grid-4.cols-4 .tag:not(.tag-litter){top:.45rem}
  .home-grid .tag-litter,.grid-4.cols-4 .tag-litter{bottom:.45rem}
}

/* demo watermark */
.demo-flag{background:var(--olive);color:#fff;text-align:center;font-family:var(--cond);
  letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;padding:.4rem 1rem}

/* ---------- breed page ---------- */
/* Full column width, square, cropped from the top. The note below it is the
   same width, so the two read as one stacked unit. */
.breed-photo{margin:0 0 1.2rem;border:var(--rule);background:var(--paper-warm);padding:0;width:100%}
/* Let the photo keep its own shape. A fixed box either crops the dog or
   letterboxes it, and breeder photos are portrait as often as landscape.
   No width/height attributes on this image, so aspect-ratio is not blocked. */
/* The photo is chosen to be landscape where one exists, so cover crops by
   almost nothing. The few square-only breeds crop from the top. */
.breed-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center top}
.photo-cap{display:block;font-family:var(--cond);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:.55rem .8rem;border-top:var(--rule)}
.breed-hero{overflow:hidden;background:var(--paper-warm);border-bottom:var(--rule)}
.breed-hero img{width:100%;height:clamp(220px,34vh,380px);object-fit:cover;
  /* portrait shots crop to the body at this ratio; favour the upper third */
  object-position:center 28%}
.guide p{margin-bottom:1rem}
/* Section headings inside a breed guide, written as "## " lines in the admin (2026-10-10). */
.guide h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.4vw,1.45rem);line-height:1.25;margin:1.8rem 0 .55rem;text-wrap:balance}
.guide h2:first-child{margin-top:0}
/* Question and answer blocks, such as the breeder questions on List with us (2026-10-10). */
.qa{max-width:70ch}
.qa h3{font-family:var(--sans);font-weight:600;font-size:1.1rem;line-height:1.3;margin:1.6rem 0 .35rem}
.qa h3:first-child{margin-top:0}
.qa h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.4vw,1.45rem);line-height:1.25;margin:1.8rem 0 .55rem;text-wrap:balance}
.qa h2:first-child{margin-top:0}
/* The site's own pages: About, How it works, Tips, Reviews, Contact (2026-10-10). */
.replace-this{display:inline-block;background:#fff3c4;border:1px dashed var(--bronze);color:var(--ink);padding:.15rem .45rem;font-size:.92em}
/* Reviews run in balanced columns (Alex, 2026-10-24), so a short review is not stretched to the
   height of a long one beside it. Each card keeps to one column. */
.reviews{columns:3 300px;column-gap:1.2rem}
.review{margin:0 0 1.2rem;background:var(--paper-warm);border:1px solid var(--line);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;break-inside:avoid}
/* A photo the reviewer posted with their own Google review, at the top of their card (Alex, 2026-10-31) */
.review.has-photo{padding-top:0}
.review-photo{display:block;width:calc(100% + 2.8rem);max-width:none;margin:0 -1.4rem;aspect-ratio:4/3;height:auto;object-fit:cover}
/* A very tall phone photo is cropped square, or the wide crop shows only its face (Alex, 2026-10-31) */
.review-photo.tall{aspect-ratio:1/1}
.review blockquote{margin:0}
.review blockquote p{margin:0;font-size:.98rem;line-height:1.6}
.review figcaption{margin-top:auto;font-family:var(--cond);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.demo-note{
  font-size:.86rem;color:var(--olive);background:var(--paper-warm);
  border-left:3px solid var(--bronze);padding:.6rem .8rem;margin-bottom:1.2rem;
}
.breeder-note{font-size:.94rem;color:var(--ink-soft);margin:.2rem 0 0}

/* ---------- show more ---------- */
.more-row{display:flex;justify-content:center;margin-top:1.8rem}
.more-row button{
  font-family:var(--cond);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.7rem 1.8rem;border:1px solid var(--line-strong);background:var(--paper);
  color:var(--ink);cursor:pointer;
}
.more-row button:hover{border-color:var(--ink);background:var(--paper-warm)}

/* ---------- listing: description under the gallery ---------- */
.about-block{margin-top:1.8rem}
.about-block p{max-width:none}
/* The saved mom and dad, and the breeder's documents, on a puppy page (workplan A19 and A20) */
.parent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:1rem;margin-top:.6rem}
.parent-card{border:var(--rule);background:var(--paper);display:flex;flex-direction:column;min-width:0}
.parent-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.parent-body{padding:.9rem 1rem 1rem;min-width:0}
.parent-role{font-family:var(--cond);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0}
.parent-body h3{margin:.1rem 0 .5rem}
.parent-facts{margin:0 0 .4rem}
.parent-facts div{display:flex;gap:.6rem;padding:.15rem 0}
.parent-facts dt{color:var(--muted);flex:0 0 6.5rem}
.parent-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.parent-sub{font-weight:600;margin:.7rem 0 .2rem}
.parent-tests{margin:0;padding-left:1.1rem}
.parent-tests li{margin:.1rem 0}
.doc-links{list-style:none;padding:0;margin:.5rem 0 0}
.doc-links li{padding:.45rem 0;border-top:var(--rule);overflow-wrap:anywhere}
.doc-kind{color:var(--muted);font-size:.9em}

/* ---------- breeder logo ---------- */
.breeder-logo{margin:0 0 1.2rem;padding:1.4rem 1.5rem;border:var(--rule);
  background:#fff;display:flex;align-items:center;justify-content:center;min-height:150px}
/* a white wordmark disappears on a white card */
.breeder-logo.on-dark{background:var(--ink);border-color:var(--ink)}
.breeder-logo img{max-width:100%;max-height:190px;width:auto;height:auto}

/* ---------- listing detail: title reorders independently of the gallery ---- */
.detail-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  /* G6: the notes (disclaimer, delivery line, breed guides) sit under the photo column, so the
     two columns end near the same line. The last row is the flexible one, so the photo column's
     height is never shared out and no gap opens under the price. */
  grid-template-areas:"media title" "media detail" "notes detail";
  grid-template-rows:min-content auto 1fr;
  gap:0 clamp(1.5rem,4vw,3.4rem);
  align-items:start;
}
.detail-grid > *{min-width:0}
.d-title{grid-area:title}
.d-media{grid-area:media}
.d-detail{grid-area:detail;margin-top:1.875rem}
/* 30px from the buttons to the facts */
.d-detail > .facts:first-child{margin-top:0}
.d-notes{grid-area:notes;margin-top:2.2rem}
/* set by js/pages.js when the photo column is the longer one */
.detail-grid.notes-right{grid-template-areas:"media title" "media detail" "media notes"}
@media(max-width:940px){
  /* On a phone the name and price should be the first thing read, not the
     photo, so the title moves above the gallery. */
  .detail-grid{grid-template-columns:1fr;grid-template-areas:"title" "media" "detail" "notes";grid-template-rows:auto}
  .d-media{margin-top:1.2rem}
  .d-detail{margin-top:1.8rem}
}
@media(max-width:940px){
  /* Alex, 2026-10-31: on a phone the breeder's contact comes before the parents, health and documents.
     The photo column opens up so its parts can sit either side of the facts and the breeder box. */
  /* stretch, not the grid's start, or the gallery has no width of its own and shrinks to nothing (Alex, 2026-11-01) */
  .detail-grid{display:flex;flex-direction:column;align-items:stretch}
  .d-title{order:1}
  .d-media{display:contents}
  .d-media > *{order:2}
  .d-media > .gallery-main{margin-top:1.2rem}
  .d-detail{order:3}
  .d-media > .puppy-parents,.d-media > .puppy-health,.d-media > .puppy-docs{order:4}
  .d-notes{order:5}
}

/* ---------- browse filter bar on a phone ---------- */
@media(max-width:760px){
  .avail-head{position:sticky;top:var(--pin,64px);z-index:40;background:var(--paper);
    margin-inline:calc(var(--gut) * -1);padding:.6rem var(--gut) .7rem;border-bottom:var(--rule);
    box-shadow:0 8px 14px -12px rgba(38,38,38,.5)}
  .avail-head .count-sort{display:none}
  .ftags{display:none}
  .f-open{display:inline-flex;align-items:center;gap:.45rem;min-height:42px;padding:0 .95rem;border:1.5px solid var(--ink);
    background:#fff;color:var(--ink);font-family:var(--cond);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .f-open .dot{min-width:20px;height:20px;border-radius:10px;background:var(--ink);color:var(--gold);font-size:.75rem;
    display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem;letter-spacing:0}
  .f-active:not(:empty){display:flex;flex-wrap:wrap;gap:.4rem;flex-basis:100%}
  .f-active .ft{min-height:36px;font-size:.9rem}
  .grid-4.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Two across on every phone, as on the home page (Alex, 2026-10-07), so no single-column tier. */

/* ---------- breed page: the sidebar photo is redundant on a phone ---------- */
@media(max-width:940px){
  .breed-photo{display:none}
}

/* ---------- skip link, matching kingdomfamilycompanions ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none}
.skip-link:focus{left:0}
#content{display:block;height:0;outline:none}

/* the picture wrapper must not change how the logo and hero images size */
.brand picture,.site-footer picture,.hero picture{display:contents}

/* ---------- print ---------- */
@media print{
  .demo-flag,.skip-link,.site-header .nav,.burger,.rail,.rail-trigger,.rail-backdrop,
  .thumb-nav,.more-row,.site-footer nav{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  .card,.breeder-box{break-inside:avoid}
}

/* narrow phones: tighter header gap so the logo, tagline and menu button share one row */
@media(max-width:420px){.hdr{gap:1rem}.breed-search button{padding:.8rem 1rem}}

/* breeder domains and emails are single unbroken words, and at 320px the longest
   (chainolakescompanions.com) pushed the page 117px wider than the screen */
.contact-list li,.contact-list a{min-width:0;overflow-wrap:anywhere}
/* Mailing list sign-up in the footer of generated pages (2026-10-10). */
.foot-signup{margin-top:1.1rem;max-width:34ch}
.foot-signup label{display:block;font-family:var(--cond);font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:.45rem}
.foot-signup-row{display:flex;gap:.5rem}
.foot-signup input[type=email]{flex:1 1 0;min-width:0;min-height:44px;padding:.5rem .7rem;border:1px solid #5a5a5a;background:#1d1d1d;color:#fff;font:inherit;font-size:.94rem}
.foot-signup input[type=email]::placeholder{color:#a8a8a8}
.foot-signup input[type=email]:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.foot-signup .btn{min-height:44px;flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Breed guide links: the panel on a breed page, a guide page and a puppy page, and the hub (2026-10-11). */
/* Plain on the page ground, with no box or accent rule (G4, Alex 2026-10-17: the thin borders read as AI) */
.guide-panel{margin-top:2rem;max-width:70ch}
aside .guide-panel{margin-top:1rem}
.guide-panel .eyebrow{margin-bottom:.5rem}
.guide-list{list-style:none;padding:0;margin:0 0 .6rem;display:grid;gap:.15rem}
.guide-list a{display:block;padding:.4rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
.guide-list li:last-child a{border-bottom:0}
.guide-list a:hover{color:var(--olive);text-decoration:underline}
.guide-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.6rem 2rem}
.guide-hub h2{font-size:1.25rem;margin:0 0 .4rem}
.guide-hub h2 a{color:inherit;text-decoration:none}
/* Footer base line: the copyright and the Privacy and Listing terms links (2026-10-11). */
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--sage-line);font-size:.86rem;color:var(--cream-text)}
.foot-base p{margin:0}
.foot-base a{color:var(--cream-text);text-decoration:none}
.foot-base a:hover{color:var(--gold)}
.foot-legal{display:flex;gap:1.2rem}
.foot-legal a{color:var(--cream-text)}
.foot-legal a:hover{color:var(--gold)}
@media(max-width:560px){.foot-base{flex-direction:column;align-items:flex-start}}
/* On a phone the credit takes the second line whole, so Studio never sits alone (Alex, 2026-11-01). */
@media(max-width:560px){.foot-credit{display:block}}
/* The guides hub as option A (2026-10-11): a card per breed, two to a row on a phone like the puppies page. */
.guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1.2rem}
.gc{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.gc-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,50% 50%)}
.gc-body{padding:.9rem 1rem 1rem}
.gc-body h2{font-size:1.2rem;margin:0 0 .15rem;line-height:1.2}
.gc-body h2 a{color:var(--ink);text-decoration:none}
.gc-body h2 a:hover{color:var(--olive)}
.gc-meta{font-family:var(--cond);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);margin:0 0 .5rem}
.gc-list{list-style:none;padding:0;margin:0}
.gc-list a{display:block;padding:.45rem 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.35}
.gc-list a:hover{color:var(--olive);text-decoration:underline}
@media(max-width:760px){
  .guide-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .gc-photo img{aspect-ratio:4/5;object-position:var(--pos-tall,var(--pos,50% 50%))}
  .gc-body{padding:.6rem .7rem .75rem}
  .gc-body h2{font-size:1.02rem}
  .gc-list a{font-size:.86rem;padding:.4rem 0}
}

/* Breed page option 2 (Alex, 2026-10-11): an intro, four highlights and a buying card beside the photo.
   Tidied 2026-10-12, the buying card on its own class; highlights plain on the page ground since G4
   (.price-card belongs to the list-with-us pricing and centers its text at 420px). */
.breed-intro{font-size:1.15rem;line-height:1.6;max-width:62ch;margin:0 0 1.5rem}
.highlights{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
/* A thin even border in the line color, like the puppy facts grid (G7) */
.highlights li{border:var(--rule);padding:.9rem 1rem 1rem;line-height:1.55;font-size:.97rem}
.highlights b{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:600;margin-bottom:.3rem}
@media (max-width:640px){.highlights{grid-template-columns:1fr}}
.breed-top{display:grid;grid-template-columns:1.15fr 1fr;gap:1.6rem clamp(1.5rem,4vw,3.4rem);
  grid-template-areas:"text photo" "buy photo" "guides guides";align-items:start}
/* G6: the buy card sits under the highlights and the photo fills the height of both, so the two
   columns end on one line; the guides run full width underneath. */
.breed-top > *{min-width:0}
.bt-text{grid-area:text}
.bt-photo{grid-area:photo;margin:0;align-self:stretch;display:flex;flex-direction:column}
.bt-photo img{flex:1 1 auto;height:0;min-height:clamp(240px,24vw,400px);aspect-ratio:auto}
.bt-guides{grid-area:guides;margin-top:.6rem}
.bt-buy{grid-area:buy}
@media(max-width:940px){
  .breed-top{grid-template-columns:1fr;grid-template-areas:"text" "photo" "buy" "guides"}
  .bt-photo{display:none}
}
.breed-buy{border:2px solid var(--ink);background:var(--paper);padding:1.3rem 1.4rem 1.4rem}
.breed-buy .eyebrow{margin-bottom:.4rem}
.bb-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.bb-count{font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1.2}
.bb-price{font-family:var(--cond);font-size:1.2rem;letter-spacing:.05em}
.bb-note{font-size:.92rem;color:var(--muted);line-height:1.5;margin:.8rem 0 1.1rem}
.bb-btn{display:block;width:100%;text-align:center}


/* Buttons near the top of puppy and breeder pages, so a phone visitor reaches the breeder first (Alex, 2026-10-11) */
.d-actions{margin-top:.9rem}
.d-actions .btn,.profile-actions .btn{min-height:44px}
/* The puppy buttons fill the column (Alex, 2026-10-17): each grows from its own one-line width,
   so the pair ends at the right edge of the facts, and a button that cannot fit takes a row. */
.d-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.d-actions > .btn{flex:1 1 auto;white-space:nowrap;justify-content:center;text-align:center}
@media (max-width:560px){.d-actions .btn,.profile-actions .btn{flex:1 1 100%;justify-content:center;text-align:center}.d-actions > .btn{white-space:normal}}

/* Transportation page (launch item A7): Furry Freight's logo beside its copy, on the page ground */
/* G9: the page's content is one centered column, so the intro, the Furry Freight block and the
   band below share one left edge with no empty third on the right. */
.wrap.wrap-mid{max-width:calc(1010px + 2 * var(--gut))}
.partner{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(1.6rem,5vw,3.5rem);align-items:center}
.partner-logo{display:block;width:100%;height:auto}
.partner-copy h2{margin-top:0}
.partner .btn-row{margin-top:1.2rem}
.partner .fine{margin-top:.9rem;font-size:.92rem;color:var(--muted)}
@media (max-width:700px){.partner{grid-template-columns:minmax(0,1fr)}.partner-logo{max-width:200px;margin-inline:auto}}
.not-local{font-size:.94rem;margin:.6rem 0 0}

/* Footer brand column (Alex, 2026-10-17): the walker mark and the two-line description share one
   row, with the sign-up full width below. The picture wrapper is display:contents, so the img is
   the grid item. Stacked only where the text would be squeezed under 230px, which is 320px wide. */
.foot-grid > div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;align-content:start}
.foot-grid > div:first-child > img,.foot-grid > div:first-child > picture > img{margin-bottom:0}
.foot-grid > div:first-child > p{margin:0}
.foot-grid > div:first-child > .foot-signup{grid-column:1 / -1}
@media (max-width:340px){.foot-grid > div:first-child{grid-template-columns:minmax(0,1fr)}.foot-grid > div:first-child > img{margin-bottom:.8rem}}

/* The delivery band under the Raised by box (Alex, 2026-10-17): one line on a wide column with the
   van, the text and Get a quote centered on one axis. Gold on charcoal is 10.7:1 and the cream
   text 11.3:1. On a phone the text wraps and Get a quote follows the last line. */
#detail .breeder-box + .dv-band{margin-top:1.4rem}
.dv-band{display:flex;align-items:center;gap:1rem;background:var(--ink);color:var(--cream-text);padding:.9rem 1.1rem;margin-top:1.4rem}
.dv-band svg{width:44px;flex:0 0 44px;color:var(--gold)}
.dv-band p{margin:0;flex:1;font-size:.95rem;color:var(--cream-text);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dv-band b{color:var(--gold)}
.dv-band a{color:var(--gold);font-weight:600;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.dv-band a:hover{color:#fff}
@media (max-width:560px){
  .dv-band{align-items:flex-start;gap:.75rem;padding:.85rem .9rem}
  .dv-band svg{margin-top:.2rem;width:36px;flex-basis:36px}
  .dv-band p{display:block}
  .dv-quote{margin-left:.4rem}
}

/* Contact rows on a phone: the label above the value, so a long address stays on one line */
@media (max-width:560px){
  .contact-list a{flex-direction:column;align-items:flex-start;gap:.1rem}
  .contact-list b{flex:none}
  .contact-list li,.contact-list a{overflow-wrap:normal}
}

/* Clear space between the brand column and the footer links (Alex, 2026-10-17). The brand content
   keeps its width and a right margin moves the three link columns over as a group: 142px of clear
   space at 1280 and 1440, 64px at 1024. Below 1000px the layout is unchanged, because a wider gap
   there would wrap "Tips on buying a puppy". */
@media (min-width:1000px){
  .foot-grid{grid-template-columns:minmax(0,18rem) repeat(3,minmax(0,1fr))}
  .foot-grid > div:first-child{margin-right:2rem}
}
@media (min-width:1240px){
  .foot-grid{grid-template-columns:minmax(0,28.5rem) repeat(3,minmax(0,1fr))}
  .foot-grid > div:first-child{margin-right:6rem}
}

/* ---------- Let's Chat (js/main.js, launch workplan A15) ----------
   A labeled button in the bottom corner on desktop and a 54px circle on a phone, opening
   Puppy Connection's own contact details. Hidden while the phone menu is open. */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px;padding:0 1.15rem;border:1px solid var(--gold);border-radius:999px;background:var(--ink);color:var(--gold);
  font-family:var(--cond);font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.25)}
.chat-fab:hover,.chat-fab[aria-expanded="true"]{background:var(--gold);color:var(--ink)}
.chat-fab:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.chat-fab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chat-panel{position:fixed;right:18px;bottom:80px;z-index:60;display:none;width:min(360px,calc(100vw - 36px));
  max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;padding:1.3rem 1.3rem 1.1rem;
  background:#fff;color:var(--ink);border:1px solid var(--line-strong);box-shadow:0 14px 40px rgba(0,0,0,.22)}
@supports (height:100dvh){.chat-panel{max-height:calc(100dvh - 96px)}}
.chat-panel.open{display:block}
.chat-panel h2{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin:0 2.2rem .35rem 0;line-height:1.25}
.chat-panel > p{font-size:.95rem;color:var(--ink-soft);margin:0 0 .9rem;line-height:1.5}
.chat-panel .row{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:.8rem;align-items:baseline;padding:.6rem 0;border-top:1px solid var(--line)}
.chat-panel .lbl{font-family:var(--cond);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chat-panel .v{min-width:0;display:flex;flex-wrap:wrap;gap:.2rem .7rem}
.chat-panel .row a{font-weight:600;color:var(--ink);overflow-wrap:anywhere;text-underline-offset:3px}
.chat-panel .row a.alt{font-weight:500;color:var(--olive)}
.chat-panel .todo{font-weight:600;color:var(--alert);background:#fbefe9;padding:.05rem .35rem}
.chat-panel .shut{position:absolute;top:.45rem;right:.45rem;width:44px;height:44px;border:0;background:none;
  font-size:1.7rem;line-height:1;color:var(--ink-soft);cursor:pointer}
.chat-panel .shut:hover{color:var(--ink)}
@media (max-width:600px){
  .chat-fab{right:12px;bottom:12px;padding:0;width:54px;height:54px;justify-content:center}
  .chat-fab .fab-label{display:none}
  .chat-panel{right:12px;left:12px;width:auto;bottom:76px}
}
body.nav-open .chat-fab,body.nav-open .chat-panel{display:none}
@media print{.chat-fab,.chat-panel{display:none!important}}

/* ---------- the site's own photos (Alex, 2026-10-25) ----------
   Web copies in img/amber/. The home band, List with us, About, Contact and Tips use them. */
.photo-fig{margin:0;border:var(--rule);background:var(--paper-warm)}
.photo-fig img{display:block;width:100%;height:auto}
.photo-band{padding-top:0}
.photo-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,1.6vw,1.2rem)}
@media(max-width:700px){.photo-strip{grid-template-columns:1fr 1fr}.photo-strip .photo-fig:first-child{grid-column:1 / -1}}
.photo-side{margin-bottom:1.2rem}
/* Text beside a photo, the photo under the text on a phone (Amber, 2026-10-31, List with us and Transportation) */
.split-photo{align-items:center}
.split-photo .photo-fig{margin:0}
.photo-dark{max-width:420px;margin-bottom:1.2rem;border-color:var(--gold)}
.photo-narrow{max-width:640px;margin-top:1.6rem}
/* List with us top band: the text column centered against the photo and the price card */
.list-top > div:first-child{align-self:center}
/* The questions photo starts level with the first line of the first answer and stays put (Alex,
   2026-10-26). The first question has a row of its own, so the photo starts under it however the
   question wraps. */
.faq-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"q1 ." "rest photo";
  column-gap:clamp(1.5rem,4vw,3.4rem);row-gap:0;align-items:start}
.faq-split > *{min-width:0}
.faq-q1{grid-area:q1}
.faq-rest{grid-area:rest}
.faq-photo{grid-area:photo}
#questions .faq-h2{margin-bottom:1.6rem}
@media(max-width:940px){.faq-split{grid-template-columns:1fr;grid-template-areas:"q1" "rest" "photo"}.faq-photo{margin-top:1.5rem}}
/* Contact: the photo and Breeders box start level with the lead paragraph, under the heading */
.contact-top .lede{margin-bottom:2.6rem}
/* About: the side column stays where it starts rather than travelling with the reader */
@media(min-width:941px){.split > aside.aside-still{position:static}}

/* Amber's brand message (2026-10-26): a cream band under the homepage search, and the opening line of About. */
.brand-message{padding:1.6rem 0;text-align:center}
.brand-message p{margin:0 auto;max-width:40ch;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.35;color:var(--ink);text-wrap:balance}
.prose .brand-line{font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.4;color:var(--ink)}
.prose p.brand-line::first-letter{font:inherit;float:none;line-height:inherit;padding:0;color:inherit}

/* Amber's tagline, option A (2026-10-28): the line on a charcoal band, FAMILY in the gold capitals of the current site. */
.brand-message-dark{background:var(--sage)}
.brand-message-dark p{color:#f3efe4}
.brand-message .fam{font-family:var(--cond);font-style:normal;font-weight:600;letter-spacing:.16em;color:var(--gold);font-size:1.12em}

/* How it works as four photo cards (Amber, 2026-10-28): an arched photo, a numbered circle on the
   line that joins the cards, an icon, the step name and its text. Two across under 980px, one under 560px. */
.hiw-steps{--arch-h:clamp(180px,17vw,240px);list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem;position:relative}
.hiw-steps::before{content:"";position:absolute;left:4%;right:4%;top:calc(.8rem + var(--arch-h));border-top:1px solid var(--bronze)}
.hiw-steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:var(--rule);border-radius:4px}
.hiw-arch{width:calc(100% - 1.6rem);height:var(--arch-h);margin:.8rem .8rem 0;overflow:hidden;border-radius:999px 999px 0 0}
.hiw-arch img{width:100%;height:100%;object-fit:cover;display:block}
.hiw-num{margin-top:-1.6rem;width:3.2rem;height:3.2rem;border-radius:50%;background:#fff;border:1px solid var(--bronze);display:grid;place-items:center;font-family:var(--serif);font-size:1.35rem;color:var(--olive);position:relative}
.hiw-steps svg{width:30px;height:30px;margin:.9rem 0 .3rem;stroke:var(--olive);fill:none;stroke-width:1.6}
.hiw-steps h3{font-family:var(--cond);font-size:1.05rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin:0}
.hiw-rule{width:2rem;border-top:1px solid var(--bronze);margin:.6rem 0 .7rem}
.hiw-steps p{font-size:.95rem;color:var(--ink-soft);margin:0;padding:0 1.1rem 1.4rem}
@media(max-width:980px){.hiw-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.hiw-steps::before{display:none}}
@media(max-width:560px){.hiw-steps{grid-template-columns:1fr}}

/* Page heads with actions on the right (Reviews, 2026-10-29): the buttons sit at the right edge, bottom-aligned with the
   last line of the intro, and drop under it when the width runs out. */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.head-row .head-text{flex:1 1 22rem;min-width:0}
.head-row .head-text .lede{max-width:34rem;margin-bottom:0}
.head-row .head-actions{flex:0 1 auto;max-width:100%;margin:0;justify-content:flex-end}
@media(max-width:940px){.head-row .head-actions{justify-content:flex-start}}

/* Guide page photo (Alex, 2026-10-29): beside the text it is a square, cropped around the puppy, so
   a puppy that sits to one side of a 3:2 photo is centered. The page stacks under 941px, where the
   photo is 3:2 again. The hub cards are 4:3 on a laptop for the same reason. */
.gp-photo img{object-position:var(--pos,50% 50%)}
@media(min-width:941px){.gp-photo img{aspect-ratio:1/1;object-position:var(--pos-sq,var(--pos,50% 50%))}}
@media (max-width:640px){
  .sec-tools{width:100%;justify-content:space-between}
  .list-search{width:100%}
}
/* About and Tips: the photo under the opening paragraph on a phone, in the side column above that (Amber, 2026-10-30) */
.photo-phone-only{display:none}
@media(max-width:940px){.photo-phone-only{display:block;margin-top:1.4rem}.photo-wide-only{display:none}}
/* For families: one menu item that opens the guide pages (2026-10-31) */
.nav-drop{position:relative}
.nav>a,.nav-drop>summary{white-space:nowrap}
.nav-drop>summary{list-style:none;cursor:pointer;font-family:var(--cond);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-text);padding:.4rem 0;border-bottom:2px solid transparent;display:flex;align-items:center;gap:.45rem}
.nav-drop>summary::-webkit-details-marker{display:none}
.nav-drop>summary::after{content:'';width:.4rem;height:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15rem) rotate(45deg)}
.nav-drop[open]>summary::after{transform:translateY(.1rem) rotate(-135deg)}
.nav-drop>summary:hover,.nav-drop:has([aria-current])>summary{color:#fff;border-bottom-color:var(--gold)}
.nav-drop>summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nav-drop-menu{position:absolute;top:100%;left:-1rem;z-index:55;min-width:15rem;padding:.4rem 0;background:var(--sage);border:1px solid var(--sage-line);box-shadow:0 10px 24px rgba(0,0,0,.22);display:flex;flex-direction:column}
.nav .nav-drop-menu a{padding:.6rem 1rem;border-bottom:0;white-space:nowrap}
.nav .nav-drop-menu a:hover,.nav .nav-drop-menu a[aria-current]{background:rgba(255,255,255,.08);color:#fff}
@media(max-width:900px){
  .nav-drop{width:100%;border-bottom:1px solid var(--sage-line)}
  .nav-drop>summary{width:100%;padding:1.15rem 0;font-size:1.35rem;letter-spacing:.1em;border-bottom:0;justify-content:space-between}
  .nav-drop-menu{position:static;min-width:0;margin:0 0 .6rem;padding:0;background:none;border:0;box-shadow:none}
  .nav .nav-drop-menu a{padding:.75rem 0 .75rem 1.1rem;font-size:1.1rem;border-bottom:0;border-top:0}
}
/* Reviews: on a phone the three buttons stack at the width of the longest, text centered (Alex, 2026-10-31) */
@media(max-width:940px){.head-row .head-actions{display:inline-grid;grid-template-columns:1fr;gap:.7rem}.head-row .head-actions .btn{justify-content:center;text-align:center}}
/* Amber's content pages (2026-10-31) */
.intro-block{max-width:46rem}
.intro-block p{color:var(--ink-soft)}
/* How it works: the photo beside the opening section starts level with its heading (Alex, 2026-10-31) */
.intro-split{align-items:start}
.intro-split .intro-photo{margin:0}
@media(min-width:900px){.steps.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.options-split{margin-top:1.4rem}
/* Furry Freight: the service list stands apart from the paragraphs either side (Alex, 2026-10-31) */
.partner-copy .includes{margin:1.6rem 0 1.8rem}
.faq-list{max-width:46rem}
/* The puppy grid is drawn by js/main.js after load; until then it holds the space, so the footer does not jump down (Lighthouse CLS 0.196, audit 2026-10-31). The no-matches message is drawn inside it, so a drawn grid is never :empty. */
#results:empty{min-height:150vh}