/* ============================================================
   C&K's Schnauzer House — warm, club-proud, a little busy
   Site-kit styles.css. Direction A "Club House" (BUILD-BRIEF §3).
   Order is fixed: 1 tokens → 2 base → 3 utilities → 4 components (in the
   order they appear on system.html) → 5 page sections in page order.
   Every value a page uses comes from a token here. If you need a value
   that isn't a token, add the token; never scatter literals.
   Design rules that govern the numbers: ..\site-kit\6-DESIGN-RULES.md
   ============================================================ */

/* ---------- 1. Tokens (written by the master — do not change a value) ---------- */
:root {
  /* Palette — "Charcoal & apricot" (Ryan, 2026-08-29): a warm near-black club band, near-white
     paper, the puppy's apricot fur as the one action colour. Token NAMES are kept (taupe/oat)
     so nothing downstream changes; the VALUES are the charcoal set.
     Contrast pairs (K5, computed):
       cream / taupe-band 11.8 · cream / taupe-deep 14+ · ink / oat 15.5 · ink / oat-deep 13+
       ink-soft / oat 7+ · ink-soft / oat-deep 6.4 · cream / moss-deep 7.3 · ink / apricot 11+
       ink / apricot-deep 8.6 (hover) · apricot-ink / oat 7.5 · ink / stone 6.6 */
  --taupe:        #4A4540;   /* the club band — grounds that carry NO body text (decor, rules) */
  --taupe-band:   #3A3632;   /* the same taupe, 10% ink — every ground that carries cream text */
  --taupe-deep:   #26231F;   /* hairlines, footer ground, dark text-safe taupe */
  --taupe-pale:   #ECE9E4;   /* taupe tint for recessed rows */
  --oat:          #FCFBF8;   /* paper ground */
  --oat-deep:     #F2EFEA;   /* alternate section ground, placeholder photo fill */
  --cream:        #FFFFFF;   /* text on taupe; card ground */
  --ink:          #232120;   /* body text — warm near-black */
  --ink-soft:     #5A5650;   /* secondary text, ≥ 4.5:1 on oat and oat-deep */
  /* Ryan, 2026-08-29: accent moved from apricot to a warm yellow; support from moss to a slate
     teal (yellow's complement). Token NAMES stay so nothing downstream changes. Yellow carries
     INK text in every state — cream on yellow never passes — so hover darkens the ground and
     keeps the ink; text, rings and borders in this hue use --apricot-ink. */
  --apricot:      #F2C230;   /* action — the yellow. CTA / current-page nav block / hero sticker only */
  --apricot-deep: #D8A712;   /* hover / pressed GROUND only (ink stays on top) */
  --apricot-pale: #FBEFC3;   /* tint behind an accent element: the reserved chip plate */
  --moss:         #5F8C93;   /* support — slate teal, decor only */
  --moss-deep:    #2E5E66;   /* text-safe teal: "available" chip, count box (cream on it 7.3:1) */
  --moss-pale:    #DCE8EA;   /* teal tint */
  --stone:        #ACA69E;   /* sold / dimmed ground */
  --stone-deep:   #68635C;   /* sold text */
  --line:         var(--taupe-deep);          /* hairlines */
  --line-light:   rgba(255, 255, 255, .30);   /* hairlines on taupe */
  --status-available: var(--moss-deep);
  --status-reserved:  var(--apricot-pale);   /* apricot is ACTION; a held puppy is not one — pale plate, deep ink */
  --apricot-ink:      #7A5A05;                /* the readable yellow: text, focus rings, error borders on paper (≥ 6:1) */
  --status-sold:      var(--stone);

  /* Type — Patrick Hand SC (upright hand-drawn caps — the closest free face to the logo's Sensa Wild Fill,
     which is Canva-licensed and cannot be embedded) + Mulish (body). Two families (F4).
     The wordmark itself is the traced logo SVG; the h1 is plain display text, no script word.
     Google Fonts: Patrick+Hand+SC (single weight; font-synthesis off so 700/800 never faux-bold) · Mulish:ital,wght@0,400;0,700;0,800;1,400 */
  --display: "Patrick Hand SC", "Marker Felt", "Segoe Print", system-ui, sans-serif;
  --body:       "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --track-caps: 0.04em;      /* F7: every all-caps label */
  --track-display: 0;        /* rounded display sits at natural spacing */

  /* Type scale — fluid where it matters. Body 17-19px desktop, ≥ 16px phones. */
  --fs-xs:   0.8125rem;                                   /* 13px — chips, meta only */
  --fs-sm:   0.9375rem;                                   /* 15px — captions, footer meta */
  --fs-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17-19px body */
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* lead paragraphs */
  --fs-h3:   clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --fs-h2:   clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-h1:   clamp(2.5rem, 1.7rem + 4.8vw, 5.75rem);
  --fs-price: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);   /* price on a puppy card */
  --lh-body:  1.6;
  --lh-tight: 0.98;           /* display sits tight */
  --lh-heading: 1.08;
  --measure: 62ch;

  /* Spacing scale — one scale, used everywhere. */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4.5rem;
  --s-9: 6.5rem;   --s-10: 8rem;
  --section-y: clamp(var(--s-8), 8vw, var(--s-10));
  --section-y-inner: clamp(var(--s-7), 5.5vw, var(--s-9));   /* inner pages: tighter cadence than the home page */
  --fs-title: clamp(2.25rem, 1.6rem + 3vw, 4rem);           /* inner-page h1 on the title card */

  /* Shape, depth, layout — square-ish club printing, one light source from above */
  --radius:    4px;
  --radius-sm: 2px;
  --shadow-1:  0 1px 0 rgba(35, 33, 32, .10);
  --shadow-2:  0 1px 0 rgba(35, 33, 32, .10), 0 3px 8px rgba(35, 33, 32, .10);
  --shadow-3:  0 12px 32px rgba(35, 33, 32, .16), 0 3px 8px rgba(35, 33, 32, .08);
  --container: 1140px;
  --gutter:    24px;          /* side padding on .wrap — never overridden by a padding shorthand */
  --header-h:  72px;
  --chip-overlap: 0.75rem;    /* signature on inner pages: status chip sits this far over a card's top edge */

  /* Signature texture — the schnauzer head stamp (Ryan's line icon, 2026-08-29) on the dark
     grounds, white at ~3.5%. Two heads staggered per tile. Replaces the paw stamp; same
     strength, same grounds only. Source: assets/schnauzer-icon.png → site/img/schnauzer-stamp.png */
  --stamp: url("/img/schnauzer-stamp.png");
  --stamp-size: 320px 360px;

  /* Motion — one moment: the puppy rises into its overlap on load. Nothing else animates. */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: 250ms;

  /* Separators on a taupe ground need more than .30 to read (appended token). */
  --line-light-strong: rgba(255, 255, 255, .45);
}
@media (min-width: 900px) { :root { --header-h: 80px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-synthesis: none; /* Patrick Hand SC has one weight; never fake a bold */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--oat);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings are the club sign, now in a rounded hand: sentence case, tight, natural spacing. */
h1, h2, h3, .display {
  margin: 0 0 var(--s-4);
  font-family: var(--display);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  text-transform: none;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.display--h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); max-width: none; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; max-width: var(--measure); }
li + li { margin-top: var(--s-2); }
strong { font-weight: 700; }
em { font-style: italic; }

/* height:auto keeps width/height attributes as aspect-ratio hints only. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--taupe-deep); text-underline-offset: 0.15em; }
a:hover { color: var(--apricot-ink); }

:focus-visible { outline: 3px solid var(--apricot-ink); outline-offset: 3px; border-radius: var(--radius-sm); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--apricot); color: var(--ink);
  padding: var(--s-3) var(--s-5);
  font-family: var(--display); font-weight: 800;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Utilities ---------- */
/* NEVER use a padding shorthand on .wrap or on a class paired with it — it erases the gutters. */
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--narrow { max-width: 760px; }

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tint  { background: var(--oat-deep); }
.section--taupe { background: var(--taupe-band) var(--stamp); background-size: var(--stamp-size); overflow-x: clip; }   /* the card slide-in starts off the right edge; clip x only so lifted cards keep their shadow */
/* Short page band for inner-page tops: eyebrow + h1 + one line, half the section rhythm. */
.section--band { padding-top: var(--s-7); padding-bottom: var(--s-7); }
@media (min-width: 900px) { .section--band { padding-top: var(--s-8); padding-bottom: var(--s-8); } }
.section--ruled { border-top: 1px solid var(--line); }

/* Any block sitting on a taupe ground. Cream text, cream focus ring, cream outline buttons. */
.on-taupe { color: var(--cream); }
.on-taupe h1, .on-taupe h2, .on-taupe h3 { color: var(--cream); }
.on-taupe a { color: var(--cream); }
.on-taupe .eyebrow { color: var(--cream); }
.on-taupe :focus-visible { outline-color: var(--cream); }

.eyebrow {
  margin: 0 0 var(--s-3);
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-sm); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.lead { font-size: var(--fs-lg); line-height: 1.45; }
.meta { font-size: var(--fs-sm); color: var(--ink-soft); letter-spacing: 0.02em; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- 4. Components — same order as system.html ---------- */

/* ---------- Header / nav ---------- */
.site-header { background: var(--taupe-band); border-bottom: 1px solid var(--line-light-strong); }
/* The hero's polaroid pile bleeds a corner up over the header bar (the hero paints above the
   header's background); the nav row itself is lifted higher still so links stay on top and
   clickable. The row has no background of its own, so only the text sits over the print. */
.site-header .nav-bar { position: relative; z-index: 2; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h); }

/* The brand is the traced logo (site/img/logo-white.svg — white for the band). It sets the
   header's height: 56px on phones, 64px from 900px. */
.brand { flex: 0 1 auto; min-width: 0; display: block; padding: var(--s-2) 0; }
.brand img { display: block; width: auto; height: 56px; }
.foot-logo { display: block; width: auto; height: 72px; margin-bottom: var(--s-2); }

.nav-toggle {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; min-width: 44px; padding: 0 var(--s-2);
  background: transparent; border: 0;   /* bare hamburger — no label, no outline (Ryan, 2026-08-29) */
  border-radius: var(--radius); color: var(--cream);
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.nav-toggle .bars { display: block; width: 24px; height: 2px; background: var(--cream); box-shadow: 0 6px 0 var(--cream), 0 -6px 0 var(--cream); }

.nav-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.nav-list li + li { margin-top: 0; }
.nav-list a {
  display: block; min-height: 44px; padding: var(--s-3) var(--s-4);
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
}
.nav-list a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 5px; }
.nav-list a[aria-current="page"] { background: var(--apricot); color: var(--ink); border-radius: var(--radius); }

.nav-panel { display: none; border-top: 1px solid var(--line-light-strong); padding-top: var(--s-3); padding-bottom: var(--s-5); }
.nav-panel[data-open="true"] { display: block; }
.nav-panel .nav-list a { border-bottom: 1px solid rgba(255, 252, 246, .16); }
.nav-panel .btn--tel { margin-top: var(--s-4); }
.nav-desktop { display: none; }
.nav-bar__tel { display: inline-flex; }
@media (min-width: 900px) { .nav-bar__tel { display: none; } }
/* Facebook mark, right of the phone: a 44px square target, the same cream as the nav. */
.nav-social { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); color: var(--cream); transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.nav-social:hover, .nav-social:focus-visible { color: var(--apricot); background: rgba(255, 255, 255, .06); }
.nav-social--panel { width: auto; height: auto; grid-auto-flow: column; gap: var(--s-2); justify-content: start; padding: var(--s-3) 0; margin-top: var(--s-3); font-family: var(--display); font-weight: 700; text-decoration: none; }
/* Home: the hero carries the logo, so the header carries only the nav, centred. */
.site-header--home .nav-bar { justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0 var(--s-5);                 /* L13: ≥ 44px tap target */
  font-family: var(--display); font-weight: 700; font-size: 1.375rem;   /* Patrick Hand SC sets small caps: 1.125rem read as a chip */
  letter-spacing: 0.02em; text-transform: none;
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius);
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.btn--primary { background: var(--apricot); color: var(--ink); box-shadow: var(--shadow-2); }   /* L4: the one loud thing */
.btn--primary:hover { background: var(--apricot-deep); color: var(--ink); }
/* On the charcoal bands .on-taupe a would otherwise turn this white-on-apricot (2.8:1). */
.on-taupe .btn--primary { color: var(--ink); }
.on-taupe .btn--primary:hover { color: var(--ink); }
.btn--secondary { background: transparent; color: var(--taupe-deep); border-color: currentColor; }
.btn--secondary:hover { background: var(--taupe-pale); color: var(--taupe-deep); }
.on-taupe .btn--secondary { color: var(--cream); border-color: var(--cream); }
.on-taupe .btn--secondary:hover { background: rgba(255, 255, 255, .14); color: var(--cream); }
.btn--tertiary {
  min-height: 44px; padding-left: 0; padding-right: 0;
  background: transparent; border: 0; color: var(--taupe-deep);
  font-family: var(--body); font-weight: 700; font-size: var(--fs-base);
  letter-spacing: 0; text-transform: none;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.btn--tertiary:hover { color: var(--apricot-ink); }
.on-taupe .btn--tertiary { color: var(--cream); }
/* Phone pill — lives on the taupe header/nav, so it is cream-on-taupe by definition. */
.btn--tel {
  min-height: 44px; padding: 0 var(--s-4);
  background: transparent; color: var(--cream); border-color: var(--cream);
  font-size: 1.0625rem; letter-spacing: 0.04em;
}
.btn--tel:hover { background: rgba(255, 255, 255, .14); color: var(--cream); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--oat-deep); color: var(--stone-deep); border-color: var(--stone);
  box-shadow: none; cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Plain phone link — used in body copy, the hero and the footer. */
.tel {
  display: inline-block; min-height: 44px; line-height: 44px;
  font-weight: 700; letter-spacing: 0.01em;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.on-taupe .tel { color: var(--cream); }

/* ---------- Hero + SIGNATURE ELEMENT (the club band) ---------- */
/* The taupe band fills the hero; the trust strip is the ground beneath it. */
/* overflow-x clip only: the polaroid pile's shadow must fall past the hero's bottom edge onto
   the paper below, so nothing clips vertically; z-index lifts that shadow over the next
   section's background. */
/* The hero's foot is the same ground as the trust strip — band, then one continuous surface the pile lands on. */
.hero { position: relative; z-index: 1; background: var(--oat-deep); overflow-x: clip; }
.hero-band { position: absolute; inset: 0; background: var(--taupe-band) var(--stamp); background-size: var(--stamp-size); }
.hero-inner { position: relative; z-index: 1; padding-top: var(--s-6); padding-bottom: var(--s-6); } /* padding, not a child margin — a margin would collapse out of the hero and open a gap above the trust strip */
.hero-copy { padding-bottom: var(--s-6); }

.lockup {
  margin: 0; /* the wordmark IS the h1 (Ryan: name + tagline) */
  max-width: none;
  font-family: var(--display); font-weight: 800; font-size: var(--fs-h1);
  line-height: var(--lh-tight); letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--cream);
}

/* The hero wordmark is the real logo (white trace), sized to the copy column. The alt text is
   the h1. It lands with the same drop as the polaroids so the hero reads as one deal. */
/* The logo sits a step smaller, centred over the slip; both share one 42ch column. */
.hero-copy { max-width: 42ch; }
.lockup--logo { max-width: min(100%, 380px); margin: 0 auto var(--s-2); }
.lockup--logo img { display: block; width: 100%; height: auto; transform-origin: 50% 60%; }

.hero-h1 {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-h3); letter-spacing: 0; text-transform: none; font-weight: 700;
  color: var(--cream); max-width: 20ch;
}
.hero-tagline {
  position: relative; margin-top: var(--s-6); max-width: 42ch;   /* nested under the wordmark: tape ~20px clear of it */
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: rgba(252, 251, 248, .12); color: var(--cream);
  border-radius: 2px 3px 2px 4px;
  font-size: var(--fs-base); line-height: 1.6;
  transform: rotate(-1.2deg); transform-origin: 0 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.hero-tagline strong { color: var(--cream); }
.hero-tagline__phone { display: none; }
@media (max-width: 599px) { .hero-tagline__phone { display: inline; } }
/* A strip of tape holds the slip to the band — torn at both ends, slightly translucent. */
.hero-tagline::before {
  content: ""; position: absolute; top: -10px; left: 8%;
  width: 88px; height: 22px;
  background: rgba(247, 227, 206, .55);
  transform: rotate(-4deg);
  clip-path: polygon(2% 0, 98% 6%, 100% 92%, 96% 100%, 3% 96%, 0 88%, 1% 10%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.hero-actions { display: flex; flex-wrap: wrap; max-width: none; gap: var(--s-3); margin-top: var(--s-6); }
.hero-phone { margin-top: var(--s-4); margin-bottom: 0; color: var(--cream); }

.hero-figure { margin: 0; align-self: end; width: min(300px, 78%); margin-left: auto; }

/* ---------- Polaroid (the site's photo frame — hero stack, puppy cards) ---------- */
/* A white instant print: photo inset with a deeper strip at the foot, a 2px corner, the
   lifted shadow. Tilt and offset are per-instance CSS vars so a pile reads as hand-dealt. */
/* Real instant-print proportions: a near-square picture, thin sides, a deep foot (about
   5.5% / 5.5% / 22% of the width). Photos are real and shown as shot: object-fit: cover crops,
   never stretches. The warm backdrop only shows behind a transparent image. */
.polaroid {
  margin: 0; border-radius: var(--radius-sm);
  padding: 5.5% 5.5% 22%;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F3EC 100%);
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(35, 33, 32, .06);
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--tilt, 0deg));
}
.polaroid .photo {
  aspect-ratio: 1 / 1.04; overflow: hidden;
  background: radial-gradient(120% 95% at 50% 28%, #F3EBDE 0%, #E4D8C5 70%, #D8CAB4 100%);
  box-shadow: inset 0 0 0 1px rgba(35, 33, 32, .08), inset 0 0 28px rgba(35, 33, 32, .10);
}
.polaroid .photo { position: relative; }
.polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Glare: the glossy picture area catches the light from above-left — a soft diagonal sheen
   plus a sharper reflection band near the top edge. Pointer-events off; sits above the photo. */
.polaroid .photo::after, .pup-card .frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* the streak: a narrow, slightly soft reflection band running corner to corner */
    linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .14) 38%, rgba(255, 255, 255, .22) 41%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, 0) 54%),
    /* the broad sheen from above-left */
    linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .10) 28%, rgba(255, 255, 255, 0) 48%),
    /* the bright lip along the top edge */
    linear-gradient(178deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 7%),
    /* the emulsion darkening toward the foot */
    linear-gradient(0deg, rgba(35, 33, 32, .14) 0%, rgba(35, 33, 32, 0) 20%);
}
/* The print itself: a hint of the same sheen across the paper so it reads as glossy stock. */
.polaroid::before, .pup-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 38%, rgba(35, 33, 32, .03) 100%);
}
.polaroid { position: relative; }
.polaroid .photo { z-index: 1; }
.pup-card > * { position: relative; z-index: 1; }
.pup-card .frame--placeholder { position: relative; }
.polaroid--final img { object-position: center 40%; }
.polaroid--final { transition: transform var(--dur) var(--ease-out); }
/* The pile: every print is the same size, absolutely stacked; the last in source is on top. */
.polaroid-stack { position: relative; aspect-ratio: 100 / 132; display: block; text-decoration: none; color: inherit; }
.polaroid-stack:hover .polaroid--final, .polaroid-stack:focus-visible .polaroid--final { transform: translate(var(--dx, 0px), calc(var(--dy, 0px) - 6px)) rotate(var(--tilt, 0deg)); }
.polaroid-stack:focus-visible { outline: 3px solid var(--apricot-ink); outline-offset: 8px; border-radius: var(--radius-sm); }
/* The apricot sticker on the front print's foot — the one loud thing above the fold (K4/L4).
   Set in the brand display face, uppercase like the logo's wordmark. */
.polaroid__note {
  position: absolute; left: 50%; bottom: 5.5%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.42em 1.1em 0.36em;
  background: var(--apricot); color: var(--ink);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  font-family: var(--display); font-weight: 700; font-size: clamp(1.375rem, 7.2cqw, 2.375rem); line-height: 1;
  letter-spacing: 0.03em; text-transform: uppercase;
  transform: translateX(-50%) rotate(-2.5deg); white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.polaroid-stack:hover .polaroid__note, .polaroid-stack:focus-visible .polaroid__note { background: var(--apricot-deep); color: var(--ink); transform: translateX(-50%) rotate(-1deg) scale(1.04); }
.polaroid { container-type: inline-size; }
.polaroid-stack .polaroid { position: absolute; inset: 0; }

/* ---------- Section header (eyebrow + rule) ---------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3) var(--s-4);
  padding-bottom: var(--s-3); margin-bottom: var(--s-6);
  border-bottom: 2px solid var(--line);
}
.section-head .eyebrow { flex: 1 0 100%; max-width: none; margin-bottom: 0; }
/* A second section header inside one band needs air above it. */
.section-head:not(:first-child) { margin-top: var(--s-8); }
.section-head h2 { margin: 0; }
.on-taupe .section-head, .section--taupe .section-head { border-bottom-color: var(--line-light-strong); }

/* ---------- Status chip (the collar tag — the overlap device on inner pages) ---------- */
.chip {
  display: inline-flex; align-items: center; min-height: 28px;
  padding: var(--s-1) var(--s-3); border-radius: var(--radius);
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.chip--available { background: var(--status-available); color: var(--cream); }
.chip--reserved  { background: var(--status-reserved);  color: var(--apricot-ink); box-shadow: inset 0 0 0 1px var(--apricot-ink); }
.chip--sold      { background: var(--status-sold);      color: var(--ink); }
.chip--expecting { background: var(--taupe-band);       color: var(--cream); }

/* ---------- Boring section #1: the puppy listing ---------- */
.litter-head {
  display: grid; gap: var(--s-2); grid-template-columns: 1fr auto; align-items: center;
  margin-top: var(--s-6); padding-top: var(--s-5); padding-bottom: var(--s-5);
  border-top: 2px solid var(--line); border-bottom: 1px solid var(--line);
}
.litter-head h2 { margin: 0; font-size: var(--fs-h3); letter-spacing: 0.03em; }   /* a litter is a sub-head, not a second h1 */
.litter-head h2 a { color: inherit; display: inline-block; min-height: 44px; padding: var(--s-2) 0; }
.litter-head .meta { margin: 0; max-width: none; grid-column: 1; }
.litter-head h2 { grid-column: 1; }
.litter-head .count-box { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.count-box {
  justify-self: start; align-self: center; max-width: none;
  padding: var(--s-2) var(--s-4); border-radius: var(--radius);
  background: var(--moss-deep); color: var(--cream);
  font-family: var(--display); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.count-box--none { background: var(--stone); color: var(--ink); }

/* Row gap carries the chip overlap so the tag never collides with the card above. */
/* Status counts row (build:counts) — same flex row as the hero actions, no hero coupling. */
.status-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); max-width: none; margin: 0 0 var(--s-3); }
.status-chips > li { margin: 0; }
a.chip { text-decoration: none; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
a.chip:hover, a.chip:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.status-ask { margin: 0 0 var(--s-5); color: var(--ink-soft); }
.status-ask .tel { color: var(--ink); }
/* The listing section: less air above the chips — they are the page's first line, not a section. */
.section--listing { padding-top: var(--s-6); }
/* The hold note: on the rules, not in a box (Ryan, 2026-08-29: no bordered plaques). */
/* Doubled class: the base .plaque rule is declared later in this file and would otherwise win. */
.plaque.plaque--hold { display: block; margin: var(--s-7) 0 var(--s-6); max-width: 720px; padding: var(--s-5) 0 0; background: transparent; border: 0; border-top: 2px solid var(--line); border-radius: 0; box-shadow: none; }   /* the next litter head's rule closes it */
.plaque.plaque--hold::after { display: none; }
.plaque.plaque--hold h2 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.plaque.plaque--hold p { margin: 0; }
.plaque.plaque--hold p + p { margin-top: var(--s-3); }
.parent-card__bio + .parent-card__bio { margin-top: var(--s-3); }
.pup-grid {
  list-style: none; max-width: none;
  margin: calc(var(--s-6) + var(--chip-overlap)) 0 0; padding: 0;
  display: grid; gap: var(--s-7) var(--s-5);
}
.pup-grid > li { margin-top: 0; }
/* A puppy card is a polaroid: white print, photo inset, name and price written on the strip.
   Each card in a grid gets a small alternating tilt (hand-dealt) and straightens on hover. */
.pup-card {
  position: relative; border-radius: var(--radius-sm);
  padding: 5.5% 5.5% 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F3EC 100%);
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(35, 33, 32, .06);
  transform: rotate(var(--tilt, 0deg));
}
.pup-grid > li:nth-child(4n + 1) { --tilt: -1.6deg; }
.pup-grid > li:nth-child(4n + 2) { --tilt: 1.2deg; }
.pup-grid > li:nth-child(4n + 3) { --tilt: -0.8deg; }
.pup-grid > li:nth-child(4n + 4) { --tilt: 1.8deg; }
.pup-card:hover, .pup-card:focus-within { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-3); z-index: 1; }
.pup-card .chip { position: absolute; top: calc(var(--chip-overlap) * -1); left: var(--s-4); z-index: 2; }
.pup-card .frame {
  border: 0; border-radius: 0; aspect-ratio: 1 / 1.04;
  background: radial-gradient(120% 95% at 50% 28%, #F3EBDE 0%, #E4D8C5 70%, #D8CAB4 100%);
  box-shadow: inset 0 0 0 1px rgba(35, 33, 32, .08), inset 0 0 28px rgba(35, 33, 32, .10);
}
.pup-card .frame--placeholder { box-shadow: inset 0 0 0 1px rgba(35, 33, 32, .08), inset 0 0 28px rgba(35, 33, 32, .10); }
/* More than one photo: the frame holds them all, the first visible; main.js flips through
   them on hover / focus, and a tap advances one. */
.frame--poses { position: relative; cursor: pointer; }
.frame--poses img[hidden] { display: none; }
.pup-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  max-width: none; padding: var(--s-3) var(--s-1) 0;
  color: var(--ink);
}
.pup-bar .name { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1; }
.pup-bar .price { font-family: var(--display); font-weight: 800; font-size: var(--fs-price); letter-spacing: var(--track-display); }
.pup-meta { margin: 0; padding: var(--s-1) var(--s-1) var(--s-5); font-size: var(--fs-sm); color: var(--ink-soft); }
.pup-meta a { color: var(--taupe-deep); }
/* "Ready to go home in 3 weeks" — the one warm line on a card / litter header. */
.ready-in { font-family: var(--display); font-weight: 700; font-size: var(--fs-base); letter-spacing: 0.02em; color: var(--apricot-ink); }
.ready-in[data-short] { font-family: inherit; font-weight: 700; font-size: inherit; letter-spacing: 0; }
.pup-meta--ready { padding-top: 0; margin-top: calc(-1 * var(--s-4)); font-size: 1.125rem; }
/* The photo + name bar are one link to the puppy on /puppies/. The tilt-straighten hover on
   .pup-card already signals it; the name underlines so the link is visible without motion. */
.pup-more { display: grid; place-items: center; align-content: center; gap: var(--s-3); min-height: 240px; text-align: center; }
/* Cards on the dark band are still white prints: keep their ink. */
.on-taupe .pup-card { color: var(--ink); }
.on-taupe .pup-card a, .on-taupe .pup-meta a { color: var(--taupe-deep); }
.on-taupe .pup-meta { color: var(--ink-soft); }
.on-taupe .section-head { border-color: var(--line-light-strong); }
.pup-card__link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.pup-card__link:hover .name, .pup-card__link:focus-visible .name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pup-card__link:focus-visible { outline: 3px solid var(--apricot-ink); outline-offset: 6px; }
/* Sold and reserved stay visible — proof, not inventory — at lower visual weight. */
.pup-card--sold { box-shadow: var(--shadow-1); }
.pup-card--sold .frame { opacity: .55; }
.pup-card--sold .pup-bar { color: var(--stone-deep); }

/* ---------- Boring section #2: text + image (asymmetric, taupe mat) ---------- */
.feature { display: grid; gap: var(--s-6); align-items: center; }
.feature__media { position: relative; }
.feature__media .frame { position: relative; z-index: 1; }
/* A feature photo as a single print: one hand-dealt tilt, sized like a real print in the hand. */
.feature__media .polaroid--feature { position: relative; z-index: 1; max-width: 420px; margin: 0 auto; }
.polaroid--feature img { object-position: center 30%; }
.feature__body > :last-child { margin-bottom: 0; }
/* A long essay beside one photo: the photo holds the top and rides along with the reader
   instead of floating at the mid-point of four paragraphs. */
.feature--essay { align-items: start; }
@media (min-width: 900px) { .feature--essay .feature__media { position: sticky; top: var(--s-6); } }

/* ---------- Boring section #3: FAQ / details list (ruled rows, no library) ---------- */
.faq { max-width: 760px; border-top: 2px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 56px; padding-top: var(--s-4); padding-bottom: var(--s-4);
  list-style: none; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: var(--fs-h3);
  line-height: var(--lh-heading); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1;
  color: var(--apricot-ink);
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--taupe-deep); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq details > p, .faq details > ul { padding-bottom: var(--s-5); }

/* ---------- Parent card + litter summary row ---------- */
.parent-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.parent-card .frame { border: 0; border-radius: 0; }
.parent-card__body { padding: var(--s-5); }
.parent-card h3 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.parent-facts {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-4); font-size: var(--fs-sm);
  border-top: 1px solid var(--line); padding-top: var(--s-3);
}
.parent-facts dt {
  font-family: var(--display); font-weight: 600;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft);
}
.parent-facts dd { margin: 0; color: var(--ink); }
.parent-card__bio { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.on-taupe .parent-card { color: var(--ink); }
.on-taupe .parent-card h3, .on-taupe .parent-facts dd { color: var(--ink); }
.on-taupe .parent-card a { color: var(--taupe-deep); }
.parents-grid { list-style: none; max-width: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.parents-grid > li { margin-top: 0; }

.litter-rows { max-width: none; border-top: 2px solid var(--line); }
.litter-row {
  display: grid; gap: var(--s-2);
  padding-top: var(--s-4); padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.litter-row__pair {
  margin: 0; max-width: none;
  font-family: var(--display); font-weight: 800; font-size: var(--fs-h3);
  letter-spacing: var(--track-display); text-transform: uppercase; line-height: var(--lh-heading);
}
.litter-row__pair a { color: inherit; display: inline-block; min-height: 44px; padding: var(--s-2) 0; }
.litter-row .meta { margin: 0; }
.litter-row .chip { justify-self: start; }

/* ---------- Trust: the plaque and the trust row ---------- */
/* Hairline frame, never a thick top rule — a coloured 3-4px strip on a card is an S9 tell. */
.plaque {
  position: relative; max-width: 880px;
  display: grid; gap: var(--s-5);
  padding: var(--s-6) var(--s-5);
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.plaque::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid var(--taupe-pale); border-radius: var(--radius-sm);
}
.plaque h2 { margin: 0 0 var(--s-3); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: 0.04em; }
.plaque p { margin: 0; }
.plaque__mark { display: block; width: 100%; max-width: 280px; height: auto; }
.plaque .mark { width: 88px; height: 88px; font-size: 0.8125rem; }

/* Trust strip — BIG (Ryan, 2026-08-29: "I wanted the trust block to be big, it was just
   messed up"). Full-width oat-deep strip straight under the band. Good Dog leads from the
   centre at real size and stands up over the band's edge — the one breakout on the page now
   that the pile sits inside the band. AKC and Embark are large beside it, all three on one
   baseline with the same caption. The strip paints above the hero (z-index) so the roundel
   can overlap the band. */
.trust { position: relative; z-index: 2; background: var(--oat-deep); padding: var(--s-6) 0; margin-top: 0; }
.hero { margin-bottom: 0; }
.trust ul {
  list-style: none; max-width: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-6); justify-items: center; align-items: center;
}
.trust li { margin-top: 0; display: grid; justify-items: center; align-content: center; }
.trust img { display: block; width: auto; }
.trust .mark--akc { height: 72px; }
.trust .mark--embark { height: 48px; }
.trust .mark--gooddog { height: 120px; }
/* Good Dog is NOT a link until the live profile URL arrives (the found one 404s). When it
   does, wrap .mark-stage + small in an <a> and bring back a hover lift + focus ring here. */
/* Phone (Ryan, 2026-08-29): the roundel leads on its own row; AKC and Embark share the row
   beneath it at a size they can actually be read. Two rows, not three marks fighting for 340px. */
@media (max-width: 599px) {
  .trust { padding: var(--s-5) 0 var(--s-6); }
  .trust ul { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); align-items: center; justify-content: center; }
  .trust .trust-lead { grid-column: 1 / -1; grid-row: 1; }
  .trust .mark--gooddog { height: 120px; }
  .trust .mark--akc { height: 56px; }
  .trust .mark--embark { height: 40px; }
}

/* Placeholder mark — stands in for a licensed logo we do not have permission to draw. */
.mark {
  flex: 0 0 auto; width: 52px; height: 52px;
  display: grid; place-items: center; text-align: center;
  background: var(--oat-deep); border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--display); font-weight: 800; font-size: 0.75rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-5); max-width: 620px; }
.form-row { display: grid; gap: var(--s-2); }
.form-row label {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft);
}
.form-row input, .form-row textarea, .form-row select {
  width: 100%; min-height: 52px;
  padding: var(--s-3) var(--s-4);
  font: inherit; color: var(--ink); background: var(--cream);
  border: 1px solid var(--taupe-deep); border-radius: var(--radius);
}
.form-row textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-body); }
.form-row input:focus-visible, .form-row textarea:focus-visible, .form-row select:focus-visible {
  outline: 3px solid var(--apricot-ink); outline-offset: 2px; border-color: var(--apricot-ink);
}
.form-hint { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
/* Error state: apricot-ink is a 7:1 border (K5 passes for UI), never the message text. */
.form-row--error input, .form-row--error textarea { border-width: 2px; border-color: var(--apricot-ink); background: var(--apricot-pale); }
.form-error {
  margin: 0;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
}

/* ---------- CTA band ---------- */
.cta { background: var(--taupe-band) var(--stamp); background-size: var(--stamp-size); padding-top: var(--s-8); padding-bottom: var(--s-8); }
.cta h2 { margin: 0; max-width: 16ch; letter-spacing: 0.03em; }
.cta__row { display: flex; flex-wrap: wrap; max-width: none; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }
.cta__row p { margin: 0; }
.cta__lead { margin: var(--s-4) 0 0; max-width: 42ch; }

/* ---------- Image treatment, placeholder, empty state ---------- */
.frame {
  position: relative; overflow: hidden;
  background: var(--oat-deep); border: 1px solid var(--line); border-radius: var(--radius);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--32 { aspect-ratio: 3 / 2; }
.frame--placeholder {
  display: grid; place-items: center; text-align: center;
  /* Inset hairline so a placeholder still reads as a photo slot on an oat-deep ground. */
  box-shadow: inset 0 0 0 1px var(--stone);
  padding: var(--s-4);
  font-family: var(--display); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
}
.frame figcaption, .figure-note { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--ink-soft); }
/* Empty state: say what is true and give the one next step. Never pad the section. */
.empty {
  max-width: 620px;
  padding: var(--s-6) var(--s-5);
  background: var(--oat-deep); border: 1px dashed var(--taupe-deep); border-radius: var(--radius);
}
.empty h3 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.empty p { margin: 0 0 var(--s-4); }
.empty > :last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--taupe-deep); color: var(--cream); padding-top: var(--s-8); padding-bottom: var(--s-6); }
.site-footer a { color: var(--cream); }
.site-footer :focus-visible { outline-color: var(--cream); }
.foot-grid { display: grid; gap: var(--s-6); }
.site-footer h2 { margin: 0; font-size: 1.5rem; letter-spacing: var(--track-caps); color: var(--cream); }
.site-footer .nap { margin: var(--s-3) 0 0; line-height: 1.75; }
.site-footer .nap a { display: inline-block; min-height: 44px; line-height: 44px; }
.site-footer .note { margin: var(--s-4) 0 0; max-width: 34ch; color: var(--oat-deep); }
.foot-links { list-style: none; max-width: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s-5); }
.foot-links li { margin-top: 0; }
.foot-links a {
  display: block; min-height: 44px; line-height: 44px; text-decoration: none;
  font-family: var(--display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.foot-links a:hover { text-decoration: underline; }
.colophon { margin: var(--s-7) 0 0; max-width: none; padding-top: var(--s-4); border-top: 1px solid var(--line-light-strong); font-size: var(--fs-xs); color: var(--oat-deep); }
.credit { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--oat-deep); }

/* ---------- 5. Page sections: the inner-page system ---------- */
/* Ryan, 2026-08-29: "composed, not stacked". Inner pages are built from four pieces — the title
   card breaking over the band foot, two-column composition (prose + a print, or a heading column
   + prose), the ledger, and the proof row. No offset mats, no bordered plaques. */
.page .section { padding-top: var(--section-y-inner); padding-bottom: var(--section-y-inner); }

/* Page head — the band-foot device from the home hero, on every inner page: a charcoal strip,
   and the title card stands on the paper and breaks UP over the strip's foot. */
.page-head { --foot: 56px; position: relative; padding-top: var(--s-7); }
.page-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% - var(--foot));
  background: var(--taupe-band) var(--stamp); background-size: var(--stamp-size);
}
.page-head .wrap { position: relative; }
.page-head__card {
  position: relative; max-width: 760px;
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: var(--cream); color: var(--ink); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(35, 33, 32, .06);
  transform: rotate(-0.6deg); transform-origin: 0 100%;
}
/* the same tape that holds the hero slip */
.page-head__card::before {
  content: ""; position: absolute; top: -11px; left: 7%;
  width: 96px; height: 24px;
  background: rgba(247, 227, 206, .7);
  transform: rotate(-3deg);
  clip-path: polygon(2% 0, 98% 6%, 100% 92%, 96% 100%, 3% 96%, 0 88%, 1% 10%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.page-head__card h1 { margin: 0; font-size: var(--fs-title); line-height: var(--lh-tight); max-width: 16ch; }
.page-head__card .lead { margin: var(--s-3) 0 0; max-width: 44ch; color: var(--ink-soft); }
.page-head__card .lead a { color: var(--ink); }

/* Two columns. Prose in the wide column at a reading measure; a print or the heading in the other. */
.cols { display: grid; gap: var(--s-6); align-items: start; }
.cols__main { max-width: 62ch; }
.cols__main > :first-child { margin-top: 0; }
.cols__main > :last-child { margin-bottom: 0; }
.cols__aside .polaroid { max-width: 400px; margin: 0 auto; }
.cols--headed h2 { margin: 0; }

/* A landscape print; the square window is the default. */
.polaroid--wide .photo { aspect-ratio: 4 / 3; }

/* The ledger: term and description on one rule, like a kennel record. */
.ledger { max-width: none; margin: 0; border-top: 2px solid var(--line); }
.ledger__row { display: grid; gap: var(--s-1) var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.ledger__row h3 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-heading); }
.ledger__row p { margin: 0; max-width: 56ch; }
.ledger__row p + p { margin-top: var(--s-2); }

/* The proof row: the issued mark and her sentence, on the rules — never in a box. */
.proof { display: grid; gap: var(--s-4); align-items: center; margin-top: var(--s-6); padding: var(--s-5) 0; border-top: 2px solid var(--line); border-bottom: 1px solid var(--line); }
.proof__mark { display: block; width: min(100%, 220px); height: auto; }
.proof h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.proof p { margin: 0; max-width: 56ch; }
.proof + .ledger { border-top: 0; }

/* Puppy page: crumb on the card, the price beside the status, the prints in a hand-dealt stack,
   the hold note on the rules. */
.crumb { margin: 0 0 var(--s-3); font-family: var(--display); font-size: 1rem; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.crumb a { color: inherit; }
.pup-status { display: flex; align-items: center; gap: var(--s-4); margin: 0 0 var(--s-5); max-width: none; }
.pup-price { font-family: var(--display); font-size: var(--fs-h2); line-height: 1; color: var(--ink); }
.pup-gallery { display: grid; gap: var(--s-6); }
.cols__aside .pup-gallery .polaroid { width: 100%; max-width: 420px; margin: 0; justify-self: start; }   /* width, not auto margins: a grid item with auto margins shrinks a %-width image to nothing */
.cols__aside .pup-gallery .polaroid:nth-child(even) { max-width: 320px; justify-self: end; }
.cols__aside .pup-gallery .polaroid:nth-child(n + 3):nth-child(odd) { max-width: 320px; }
.pup-gallery .frame--placeholder { display: grid; place-items: center; text-align: center; }
.hold { margin-top: var(--s-6); padding: var(--s-5) 0; border-top: 2px solid var(--line); border-bottom: 1px solid var(--line); max-width: none; }
.hold h2 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.hold p { margin: 0; }
.hold p + p { margin-top: var(--s-3); }
.hold__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hold__row.hold__row { margin-top: var(--s-5); }
.hold__note { margin-top: var(--s-6); }

/* Plain tags — the payment apps: named, never linked (brief §2.6). */
.tags { list-style: none; max-width: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.tags li { margin: 0; padding: 0.35em 0.85em; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--display); font-size: 1.125rem; }

@media (min-width: 700px) {
  .ledger__row { grid-template-columns: minmax(0, 15rem) 1fr; align-items: baseline; }
  .proof { grid-template-columns: 240px 1fr; gap: var(--s-7); }
}
@media (min-width: 900px) {
  .page-head { --foot: 72px; padding-top: var(--s-8); }
  .page-head__card { padding: var(--s-7) var(--s-8) var(--s-6); }
  .cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); }
  .cols--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cols--flip .cols__aside { order: -1; }
  .cols--headed { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .cols--headed h2 { position: sticky; top: var(--s-6); }
  .cols--sticky .cols__aside { position: sticky; top: var(--s-6); }
  .cols__aside .polaroid { margin: var(--s-4) 0 0 auto; }
  .cols--flip .cols__aside .polaroid { margin-left: 0; margin-right: auto; }
}

/* ---------- Motion — the one moment (brief §3): the polaroid deal ---------- */
/* On load the four poses drop onto the pile one after another (fast), then the real puppy
   lands on top and stays. Pure CSS, gated on .js so a JS-off visitor sees the finished pile,
   and on no-preference so reduced-motion never sees a hidden frame. Per-print --delay is
   set inline. */
@media (prefers-reduced-motion: no-preference) {
  .js .polaroid-stack .polaroid {
    opacity: 0;
    /* Each print slides in from off the right edge of the screen (.hero clips overflow-x). */
    transform: translate(calc(var(--dx, 0px) + 100vw), calc(var(--dy, 0px) - 8px)) rotate(calc(var(--tilt, 0deg) + 9deg)) scale(1.04);
    animation: polaroid-drop 520ms var(--ease-out) forwards;
    animation-delay: var(--delay, 0s);
  }
  @keyframes polaroid-drop {
    to { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--tilt, 0deg)) scale(1); }
  }
  /* Puppy cards: a hand-dealt tilt that straightens under the pointer. */
  .pup-card { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
  /* Home preview row: the prints slide in from the right, one after another, once the row is
     on screen (main.js flips .is-in). Only the entering state is declared, so hover still owns
     the resting transform. */
  .js .pup-grid--three > li:not(.is-in) { opacity: 0; transform: translateX(min(60vw, 480px)) rotate(calc(var(--tilt, 0deg) + 6deg)); }
  .js .pup-grid--three > li.is-in { transition: transform 620ms cubic-bezier(.16, 1, .3, 1), opacity 360ms ease-out, box-shadow var(--dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
  .js .pup-grid--three > li.is-in.slid { transition-duration: var(--dur); transition-delay: 0s; }

}

/* ============ Below 600px — the lockup and tagline give the hero back its height ============ */
@media (max-width: 599px) {
  .section--band { padding-top: var(--s-5); padding-bottom: var(--s-5); }
  /* Litter header stacks: name, dates, then the count — nothing fights the name for width. */
  .litter-head { grid-template-columns: 1fr; }
  .litter-head .count-box { grid-column: 1; grid-row: auto; justify-self: start; }
  .lockup { font-size: clamp(2.25rem, 1.5rem + 4.8vw, 5.75rem); }
  /* Phone hero (Ryan, 2026-08-29): logo, the slip cut to her first sentence, then the pile — and the
     pile's sticker still lands inside an 844px fold. */
  .lockup--logo { max-width: min(100%, 200px); margin-bottom: 0; }
  .hero-inner { display: flex; flex-direction: column; padding-top: var(--s-4); padding-bottom: var(--s-5); }
  .hero-copy { padding-bottom: 0; }
  .hero-tagline { margin-top: var(--s-4); padding: var(--s-4) var(--s-4) var(--s-3); font-size: 1rem; }
  .hero-tagline__wide { display: none; }
  .hero-tagline::before { display: none; }   /* no tape on the phone slip (Ryan, 2026-08-29) */
  .hero-tagline { transform: none; }
  .hero-figure { width: min(250px, 78%); margin: var(--s-5) auto 0; }
  /* Home header on phones: the number and the menu, ends of the bar. */
  .site-header--home .nav-bar { justify-content: space-between; }
}

/* Phones: the home page drops to the inner-page cadence; nothing on a phone earns 72px of air. */
@media (max-width: 599px) {
  :root { --section-y: var(--s-7); }
  /* Parent portraits go square so six dogs are not six screens. */
  .parent-card .frame { aspect-ratio: 1 / 1; }
}
/* Phones from 360px: two prints across — a board, not a slideshow. Cards keep their tilt. */
@media (min-width: 360px) and (max-width: 599px) {
  .pup-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); }
  .pup-card { padding: 4.5% 4.5% 0; }
  .pup-bar { gap: var(--s-2); }
  .pup-bar .name { font-size: 0.9375rem; }
  .pup-meta { font-size: 0.875rem; }
  .pup-meta--ready { font-size: 0.9375rem; }
  .ready-in { font-size: 0.9375rem; }
  /* The see-more slot on a phone: just the button, centred in the fourth slot (Ryan, 2026-08-29). */
  .pup-grid--three .pup-more { min-height: 0; align-self: center; }
  .pup-grid--three .pup-more .btn { width: 100%; padding: var(--s-4) var(--s-3); text-align: center; line-height: 1.15; }
}

/* ============ 600px and up ============ */
@media (min-width: 600px) {
  /* Real marks are wider than the placeholder tiles this was sized for — the row
     takes the full container so no label has to wrap mid-word. */
  .trust ul { grid-template-columns: 1fr auto 1fr; gap: var(--s-7); }
  .trust .mark--gooddog { height: 144px; }
  .trust .mark--akc { height: 84px; }
  .trust .mark--embark { height: 56px; }
    .pup-grid { grid-template-columns: repeat(2, 1fr); }
  .parents-grid { grid-template-columns: repeat(2, 1fr); }
  .litter-row { grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-4); }
  .plaque { grid-template-columns: auto 1fr; align-items: start; padding: var(--s-7); }
}


/* ============ 900px and up ============ */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-panel { display: none !important; }
  .nav-desktop { display: flex; align-items: center; gap: var(--s-5); }
  .nav-desktop .nav-list { display: flex; gap: var(--s-1); }
  .brand img { height: 64px; }
  .btn { padding: 0 var(--s-6); }
  .btn--tel, .btn--tertiary { padding-left: var(--s-4); padding-right: var(--s-4); }
  .btn--tertiary { padding-left: 0; padding-right: 0; }

  .hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 400px); column-gap: var(--s-8); align-items: center; padding-top: var(--s-7); padding-bottom: var(--s-7); }
  /* The pile sits vertically centred in the hero, to the right of the copy (Ryan, 2026-08-29). */
  .hero-figure {
    width: min(360px, 100%); margin-left: auto;
    align-self: center;
    margin-top: var(--s-4); margin-bottom: 0;   /* a real step below the header rule, never tangent */
  }

  .hero-copy { padding-bottom: 0; }   /* align-items: center does the centring; padding only skews it */
  .pup-grid { grid-template-columns: repeat(4, 1fr); }
  .pup-grid--3 { grid-template-columns: repeat(3, 1fr); }   /* 5 or 9 puppies: never a lone card on a row */
  /* Home: as many cards as there are, at card size — never a stretched pair or an empty slot. */
  .pup-grid--three { grid-template-columns: repeat(4, 1fr); }   /* 3 previews + the see-more slot */
  .parents-grid { grid-template-columns: repeat(3, 1fr); }
  .feature { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-8); }
  .feature--flip { grid-template-columns: 0.85fr 1.15fr; }
  .feature--flip .feature__media { order: -1; }
  .cta { padding-top: var(--s-9); padding-bottom: var(--s-9); }
  .foot-grid { grid-template-columns: 1.3fr 1fr; gap: var(--s-7); }
}

/* ---------- Reduced motion — nothing animates ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .polaroid-stack .polaroid { opacity: 1; }
}

/* ---------- Trust marks above the crease ---------- */
/* Ryan: the marks should be visible without scrolling. On a desktop screen tall enough to
   carry it, the hero figure gives back whatever room the trust band needs, so header + hero
   + marks land inside the first screen. Short screens and phones are left to flow — forcing
   it there would crush the signature band instead of helping. */
@media (min-width: 900px) and (min-height: 720px) {
  /* Tighter band and a little less air around the hero — the taupe band's foot is the
     signature and is never touched, so the room comes from padding either side of it. */

  .hero-inner { padding-top: var(--s-6); }
  /* The pile is the fold now (Ryan: bigger, higher); it is no longer capped by the trust row. */
}

/* Short laptops (roughly 1280x720). The same fold, bought with tighter rhythm rather than
   smaller display type: the band's foot comes in, the tagline gets a wider measure so it
   sets in two lines instead of three, and the gaps close by one step. The lockup does not
   shrink — it is the wordmark. */
@media (min-width: 900px) and (min-height: 720px) and (max-height: 859px) {
  .hero-inner { padding-top: var(--s-4); padding-bottom: var(--s-4); }
  .hero-figure { width: min(300px, 100%); margin-top: var(--s-2); }
  .trust { padding: var(--s-4) 0; }
  .trust .mark--gooddog { height: 120px; }
  .trust .mark--akc { height: 72px; }
  .trust .mark--embark { height: 48px; }
}