/* =============================================
   Laplapky Base — reset, body, headings, utilities
   ============================================= */

*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; padding: 0 }

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.6;
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 }

a { color: inherit; text-decoration: none }
a:hover { color: inherit }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-extrabold);
  letter-spacing: -.02em;
  line-height: 1.1;
}
p { margin: 0 }
img { display: block; max-width: 100% }

/* ── Container ────────────────────────────── */
.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── Page fade-in ─────────────────────────── */
main { animation: pageFade .38s ease }

@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px) }
  to   { opacity: 1; transform: none }
}

/* ── Accent text highlight ────────────────── */
.grad { color: var(--color-coral) }

/* ── Sparkle gif ──────────────────────────── */
.sparkle {
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
}
.sparkle--xs  { width: 13px; height: 13px }
.sparkle--sm  { width: 16px; height: 16px }
.sparkle--md  { width: 26px; height: 26px }
.sparkle--lg  { width: 40px; height: 40px }
.sparkle--xl  { width: 56px; height: 56px }

.hero-paw { font-size: 36px; vertical-align: middle; line-height: 1 }

/* ─────────────────────────────────────────────
   Utility classes
   ───────────────────────────────────────────── */

/* Spacing — margin top */
.mt-1  { margin-top: var(--space-1) }
.mt-2  { margin-top: var(--space-2) }
.mt-3  { margin-top: var(--space-3) }
.mt-4  { margin-top: var(--space-4) }
.mt-5  { margin-top: var(--space-5) }
.mt-6  { margin-top: var(--space-6) }
.mt-7  { margin-top: var(--space-7) }
.mt-8  { margin-top: var(--space-8) }
.mt-10 { margin-top: var(--space-10) }
.mt-12 { margin-top: var(--space-12) }

/* Spacing — margin bottom */
.mb-1  { margin-bottom: var(--space-1) }
.mb-2  { margin-bottom: var(--space-2) }
.mb-3  { margin-bottom: var(--space-3) }
.mb-4  { margin-bottom: var(--space-4) }
.mb-5  { margin-bottom: var(--space-5) }
.mb-6  { margin-bottom: var(--space-6) }
.mb-8  { margin-bottom: var(--space-8) }

/* Spacing — padding */
.pt-section { padding-top: var(--section-y) }
.pb-section { padding-bottom: var(--section-y) }

/* Text */
.text-center { text-align: center }
.text-muted  { color: var(--color-ink-soft) }
.text-coral  { color: var(--color-coral) }
.text-gold   { color: var(--color-gold) }
.text-sm     { font-size: var(--text-sm) }
.text-base   { font-size: var(--text-base) }
.text-md     { font-size: var(--text-md) }
.text-lg     { font-size: var(--text-lg) }
.fw-600      { font-weight: var(--fw-semibold) }
.fw-700      { font-weight: var(--fw-bold) }
.fw-800      { font-weight: var(--fw-extrabold) }

/* Display */
.d-none    { display: none !important }
.d-flex    { display: flex }
.d-grid    { display: grid }
.flex-center { display: flex; justify-content: center }
.flex-wrap   { flex-wrap: wrap }
.items-center { align-items: center }
.gap-2  { gap: var(--space-2) }
.gap-3  { gap: var(--space-3) }
.gap-4  { gap: var(--space-4) }

/* Section heading combo */
.section-title    { font-size: clamp(28px, 4vw, 34px); margin: var(--space-3) 0 var(--space-2) }
.section-subtitle { font-size: var(--text-xl); margin-bottom: var(--space-4) }
.lead { font-size: 19px; color: var(--color-ink-soft); max-width: 29em }

/* Pet grid modifiers */
.pet-grid--3 { grid-template-columns: repeat(3, 1fr) }
.pet-grid--2 { grid-template-columns: repeat(2, 1fr) }

/* Contact meta line */
.meta-contact {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* ── Breadcrumbs ─────────────────────────────── */
.bc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--space-4) 0;
}
.bc__item {
  font-size: 13px;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color var(--ease-fast);
}
.bc__item:hover { color: var(--color-ink) }
.bc__item--current {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}
.bc__sep {
  font-size: 12px;
  color: var(--color-line);
  line-height: 1;
}