/* =========================================================
   Paws & Pantry · home-2026.css  (homepage compositions; loads after site-2026.css)
   Hero = a photograph on a marigold panel (.img-fade). The old illustrated shelf scene (.shelf, .plank) is kept below
   and in assets/illustrations/ for reference. Photos: assets/photos-r2/CREDITS.md. No motion anywhere.
   ========================================================= */
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
main > noscript .note { margin-top: var(--s-5); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(32px, 4vw, 64px); background:
  linear-gradient(var(--bg), var(--bg)); }
.hero-grid { display: grid; gap: var(--s-7); align-items: center; }
.hero-copy { display: grid; gap: var(--s-5); align-content: center; }
.hero .display { max-width: 12ch; }
.shelf { display: grid; gap: var(--s-3); }
.shelf-stage { position: relative; display: grid; grid-template-columns: .85fr 1.15fr 1.15fr 1.15fr .85fr; align-items: end; gap: 0; padding: var(--s-7) var(--s-2) 0; background: var(--tint-gold); border-radius: var(--r-panel) var(--r-panel) 0 0; min-height: 0; }
.shelf-pet { width: 100%; height: auto; aspect-ratio: 160 / 200; }
.shelf-item { position: relative; display: grid; justify-items: center; align-content: end; text-decoration: none; }
.shelf-pack { width: 100%; height: auto; aspect-ratio: 1; }
.hang-tag { position: absolute; left: 4px; right: 4px; top: 100%; margin-top: 12px; z-index: 2; display: grid; gap: 0; justify-items: center; background: #fff; color: var(--ink); border-radius: 8px; padding: 6px 6px; font: 600 .875rem/1.2 var(--font-text); text-align: center; }
.hang-tag b { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -.01em; }
.shelf-item:hover .hang-tag { background: var(--brand); }
.plank { height: 84px; margin-top: -1px; background: var(--navy); border-radius: 0 0 var(--r-control) var(--r-control); box-shadow: 0 -4px 0 0 var(--navy-3) inset; }
.shelf figcaption { margin-top: var(--s-1); }
.facts-row { display: grid; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.facts-row li { display: grid; gap: var(--s-1); padding: var(--s-5) 0; border-bottom: 1px solid var(--line-strong); }
.facts-row b { font: 700 1.375rem/1.15 var(--font-display); font-variation-settings: "opsz" 36; letter-spacing: -.02em; }
.facts-row span { color: var(--ink-soft); font-size: var(--t-small); max-width: 36ch; }

/* ---------- shop by companion ---------- */
.companion-grid { display: grid; gap: var(--s-5); }
.companion { position: relative; display: grid; align-content: space-between; gap: var(--s-6); padding: var(--s-6); border-radius: var(--r-panel); text-decoration: none; overflow: hidden; min-height: 280px; background: var(--tint-dog); }
.companion--cat { background: var(--tint-cat); }
.companion--small { background: var(--tint-small); }
.companion-copy { position: relative; z-index: 1; display: grid; gap: var(--s-3); max-width: 24ch; align-content: start; }
.companion-copy p { color: var(--ink); font-size: var(--t-small); max-width: 28ch; }
.companion .h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.companion-art { position: absolute; right: -4%; bottom: -8%; width: min(54%, 280px); height: auto; aspect-ratio: 1; }
/* hover/focus edge: a soft inset line on its own layer, so only its opacity changes (no layout, no transform).
   ink at 42% over the tile's own tint gives a mid-tone of that tint; 1.5px; hover is the same softness as focus
   because the keyboard ring (3px --focus, outside the tile) is what carries the focus indication. */
.companion::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 42%, transparent); }
.companion:focus-visible::after { opacity: 1; }
@media (hover: hover) { .companion:hover::after { opacity: 1; } }
/* the one permitted transition on the site (explicit exception to the no-motion rule): the edge fades, 200ms ease-out.
   Reduced motion keeps it instant. Nothing else transitions. */
@media (prefers-reduced-motion: no-preference) { .companion::after { transition: opacity 200ms ease-out; } }
.companion:hover .link-arrow { text-decoration-color: var(--ink); }
.companions-note { margin-top: var(--s-5); }

/* ---------- from the pantry ---------- */
.pantry { background: var(--surface-2); }
.pantry-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.pantry .product-card { border-color: var(--line-strong); }

/* ---------- finder + subscribe ---------- */
.duo-grid { display: grid; gap: var(--s-5); }
.panel { display: grid; gap: var(--s-5); align-content: start; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-panel); }
.panel .btn { justify-self: start; }
.panel--finder { background: var(--navy); color: #fff; }
.panel--sub { background: var(--brand); color: var(--navy); }
.panel--sub .meta { color: var(--navy); }
.panel--sub .eyebrow { color: var(--navy); }
.panel--sub .eyebrow::before { background: var(--navy); }
.panel--sub .lede { color: var(--navy); }
.panel--sub :is(.h2) em { background: #fff; }
.step-list { display: grid; gap: 0; border-top: 1px solid var(--navy-line); }
.step-list li { display: flex; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--navy-line); color: #fff; }
.step-list .num { flex: none; width: 2ch; font: 700 1.125rem/1 var(--font-display); color: var(--brand); }
.gap-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gap-chips li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-pill); border: 2px solid var(--navy); font-weight: 650; }

/* sample subscription receipt */
.sub-sample { display: grid; gap: var(--s-1); padding: var(--s-5); background: #fff; border-radius: var(--r-card); color: var(--ink); }
.sub-sample .meta { color: var(--muted); }
.sub-sample b { font: 700 1.25rem/1.2 var(--font-display); letter-spacing: -.015em; }
.sub-sample p { font-size: var(--t-small); }
.sub-sample .sub-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
.sub-sample s { color: var(--muted); }
.sub-sample strong { font: 700 1.5rem/1 var(--font-display); }

/* ---------- grooming band ---------- */
.groom { background: var(--navy-deep); color: #fff; }
.groom-grid { display: grid; gap: var(--s-7); align-items: start; }
.svc-list { display: grid; border-top: 2px solid var(--brand); }
.svc-list li { display: grid; gap: var(--s-2); padding: var(--s-5) 0; border-bottom: 1px solid var(--navy-line); }
.svc-list p { color: var(--navy-dim); font-size: var(--t-small); }
.svc-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; }
.svc-meta b { font: 700 1.5rem/1 var(--font-display); color: var(--brand); letter-spacing: -.02em; }
.svc-meta span { color: var(--navy-dim); }

/* ---------- practical notes ---------- */
.note-list { display: grid; border-top: 2px solid var(--ink); }
.note-list li { border-bottom: 1px solid var(--line-strong); }
.note-list a { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; text-decoration: none; }
.note-list a > .num { font: 700 1.125rem/1 var(--font-display); color: var(--blue); }
.note-list a > span:nth-child(2) { display: grid; gap: var(--s-1); }
.note-list a > span:nth-child(2) > span { color: var(--ink-soft); font-size: var(--t-small); }
.note-list svg { width: 22px; height: 22px; }
.note-list a:hover { background: var(--brand-tint); }
.note-list a:hover b { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* ---------- visit band ---------- */
.visit-band { background: var(--brand-tint); }
.visit-grid { display: grid; gap: var(--s-6); align-items: start; }
.visit-facts { display: grid; gap: var(--s-5); }
.visit-facts > div { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.visit-facts dd { display: grid; gap: var(--s-1); }
.visit-facts address { font-style: normal; }
.big-link { font: 650 1.1875rem/1.3 var(--font-display); text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.big-link:hover { text-decoration-color: var(--brand-hover); text-decoration-thickness: 3px; }

/* ---------- breakpoints ---------- */
@media (min-width: 720px) {
  .facts-row { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-6); }
  .facts-row li { border-bottom: 0; }
  .companion-grid { grid-template-columns: 1.15fr 1fr; grid-template-areas: "dog cat" "dog small"; }
  .companion--dog { grid-area: dog; min-height: 420px; }
  .companion--dog .companion-art { width: min(74%, 400px); right: -4%; bottom: -8%; }
  .companion--cat { grid-area: cat; }
  .companion--small { grid-area: small; }
  .visit-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .pantry-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); }
  .duo-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .groom-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-9); }
  .svc-list li { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s-6); }
  .svc-meta { justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: var(--s-1); }
  .visit-grid { grid-template-columns: .8fr 1.6fr; gap: var(--s-8); }
  .visit-facts { grid-template-columns: 1.1fr .9fr 1.4fr; gap: var(--s-6); }
}
@media (max-width: 719.98px) {
  .shelf-stage { padding-inline: var(--s-2); }
  .shelf-stage { grid-template-columns: repeat(3, 1fr); padding: var(--s-6) var(--s-3) 0; gap: var(--s-2); }
  .shelf-pet { display: none; }
  .plank { height: 96px; }
  .companion { min-height: 240px; }
  .companion-art { width: 46%; }
  .note-list a { gap: var(--s-3); }
}

/* =========================================================
   PHOTOGRAPHY (homepage)  ·  all photos use the shared .img-fade / .img-frame utilities (mask, not baked in)
   One crop language: 4:3 tiles and bands, 3:2 hero. Photos sit on the same tint panels as the pack-shot art
   they replaced (marigold, dog, cat, small-pet tints) so they read as part of the chalk / navy / marigold system.
   ========================================================= */
.hero-photo { display: grid; gap: var(--s-2); margin: 0; }
.hero-photo__stage { background: var(--tint-gold); border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 3 / 2; }
.hero-photo .img-fade { --fade-t: 0; --fade-r: 0; --fade-size: clamp(32px, 7vw, 96px); width: 100%; height: 100%; }
.hero-photo .img-fade img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo figcaption { text-align: right; }

/* companion tiles: photo bleeds off the tile's bottom/right edge and dissolves toward the copy */
.companion-photo { --fade-t: 1; --fade-l: 1; --fade-r: 0; --fade-b: 0; --fade-size: clamp(24px, 6vw, 72px);
  position: relative; margin: 0 calc(var(--s-6) * -1) calc(var(--s-6) * -1); aspect-ratio: 3 / 2; }
.companion-photo img { width: 100%; height: 100%; object-fit: cover; }
.companion--dog .companion-photo img { object-position: 50% 80%; }

/* grooming band: full-bleed photo, its blue wall dissolves upward into the navy (top edge only) */
.groom { padding-bottom: 0; }
.groom-photo { display: grid; gap: var(--s-3); margin: var(--s-7) 0 0; }
.groom-photo .img-fade { --fade-r: 0; --fade-b: 0; --fade-l: 0; --fade-size: clamp(48px, 12vw, 160px); aspect-ratio: 4 / 3; }
.groom-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.groom-photo figcaption { color: var(--navy-dim); padding-block: 0 var(--s-5); }

/* practical notes: crisp framed photo beside the list */
.notes-grid { display: grid; gap: var(--s-6); align-items: start; }
.notes-photo { margin: 0; aspect-ratio: 4 / 3; }
.notes-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 720px) {
  .groom-photo .img-fade { aspect-ratio: 2.4 / 1; }
  .companion-photo { aspect-ratio: auto; }
  .companion--cat .companion-photo, .companion--small .companion-photo { position: absolute; inset: 0 0 0 auto; width: 52%; margin: 0; --fade-t: 0; }
  .companion--cat .companion-copy, .companion--small .companion-copy { max-width: 22ch; }
  .companion--dog .companion-photo { aspect-ratio: 4 / 3; margin-top: var(--s-4); }
}
@media (min-width: 1000px) {
  .notes-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--s-8); }
  .notes-photo { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
@media (forced-colors: active) { .hero-photo__stage { forced-color-adjust: none; } }