/* =====================================================================
   Direction 4 — Crayon
   Rainbow Dog Rescue
   Hand-drawn primary blocks, sticker / scribble accents.
   Type: Caprasimo display + Caveat script + Nunito UI
   ===================================================================== */

:root {
  --ink: #1a1410;
  --paper: #fff8ea;
  --paper-2: #fdefd0;
  --red: #e94e3a;
  --red-dark: #c43623;
  --orange: #ff8c1a;
  --yellow: #ffd23f;
  --green: #4caf6e;
  --green-dark: #347a4d;
  --blue: #3d8bd9;
  --blue-dark: #2566aa;
  --purple: #8a52c9;
  --pink: #f07ab0;
  --rule: rgba(26,20,16,0.14);
  --soft-red: #ffd9d3;
  --soft-yellow: #fff1c4;
  --soft-green: #d2eecf;
  --soft-blue: #d3e6f6;
  --soft-pink: #ffd9ea;
  --soft-purple: #e2d3f1;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: 'Caprasimo', 'Nunito', serif;
  font-weight: 400; line-height: 1.04; letter-spacing: -0.005em;
  margin: 0; color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; text-wrap: pretty; max-width: 62ch; }
.script { font-family: 'Caveat', cursive; font-weight: 700; }

/* Paper texture overlay */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.container--narrow { max-width: 820px; margin: 0 auto; padding: 0 28px; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px 22px; border-radius: 999px;
  font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  border: 3px solid var(--ink);
  background: var(--ink); color: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.btn-red    { background: var(--red); color: var(--paper); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-blue   { background: var(--blue); color: var(--paper); }
.btn-green  { background: var(--green); color: var(--paper); }
.btn-paper  { background: var(--paper); color: var(--ink); }
.btn-lg     { padding: 16px 28px; font-size: 16px; }

/* =====================================================================
   Cute nav Donate button
   ===================================================================== */
.btn-donate-nav {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 14px; letter-spacing: 0.02em;
  color: var(--paper); text-decoration: none;
  background: var(--red);
  border: 3px solid var(--ink);
  border-radius: 14px 18px 16px 20px / 18px 14px 20px 16px;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-2deg);
  transition: transform .18s ease, box-shadow .18s ease, background .18s;
  white-space: nowrap;
}
.btn-donate-nav::before {
  /* little dashed sticker outline */
  content: "";
  position: absolute; inset: 3px;
  border-radius: inherit;
  border: 1.5px dashed rgba(255,255,255,0.55);
  pointer-events: none;
}
.btn-donate-nav .bdn-heart {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  transform: rotate(4deg);
  transition: transform .25s cubic-bezier(.5,1.6,.4,1);
}
.btn-donate-nav .bdn-heart svg { width: 14px; height: 14px; display: block; }
.btn-donate-nav .bdn-label { line-height: 1; }
.btn-donate-nav .bdn-arrow {
  font-weight: 900; font-size: 15px;
  margin-left: 1px;
  transition: transform .2s ease;
  display: inline-block;
}
.btn-donate-nav:hover {
  transform: rotate(-1deg) translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--ink);
  background: #d8392e;
}
.btn-donate-nav:hover .bdn-heart {
  animation: bdn-thump 0.7s ease-in-out infinite;
}
.btn-donate-nav:hover .bdn-arrow { transform: translateX(3px); }
.btn-donate-nav:active {
  transform: rotate(-2deg) translate(2px,2px);
  box-shadow: 0 0 0 var(--ink);
}
@keyframes bdn-thump {
  0%, 100% { transform: rotate(4deg) scale(1); }
  25%      { transform: rotate(4deg) scale(1.18); }
  50%      { transform: rotate(4deg) scale(0.96); }
  75%      { transform: rotate(4deg) scale(1.1); }
}
@media (max-width: 1100px) {
  .btn-donate-nav { padding: 7px 12px 7px 9px; font-size: 13px; }
  .btn-donate-nav .bdn-heart { width: 19px; height: 19px; }
  .btn-donate-nav .bdn-heart svg { width: 12px; height: 12px; }
}

/* Donate button — green variant (used in CTA bands w/ red bg, etc.) */
.btn-donate-nav.donate-green { background: var(--green); }
.btn-donate-nav.donate-green:hover { background: var(--green-dark); }

/* Larger sticker-pill version for donate bands / CTAs */
.btn-donate-nav.band-donate {
  padding: 18px 30px 18px 22px;
  font-size: 19px; gap: 14px;
  box-shadow: 5px 5px 0 var(--ink);
}
.btn-donate-nav.band-donate .bdn-heart { width: 34px; height: 34px; }
.btn-donate-nav.band-donate .bdn-heart svg { width: 21px; height: 21px; }
.btn-donate-nav.band-donate .bdn-arrow { font-size: 21px; }

/* =====================================================================
   Adopt sticker-pill (paired with .btn-donate-nav in CTA bands)
   ===================================================================== */
.btn-adopt-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 30px 18px 22px;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 19px; letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
  background: var(--yellow);
  border: 3px solid var(--ink);
  /* mirrored asymmetric radii so it tilts the opposite way to donate */
  border-radius: 20px 16px 18px 14px / 16px 20px 14px 18px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(2deg);
  transition: transform .18s ease, box-shadow .18s ease, background .18s;
  white-space: nowrap;
}
.btn-adopt-pill::before {
  content: "";
  position: absolute; inset: 3px;
  border-radius: inherit;
  border: 1.5px dashed rgba(26,20,16,0.45);
  pointer-events: none;
}
.btn-adopt-pill .bap-paw {
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  transform: rotate(-4deg);
  transition: transform .25s cubic-bezier(.5,1.6,.4,1);
}
.btn-adopt-pill .bap-paw svg { width: 21px; height: 21px; display: block; }
.btn-adopt-pill .bap-label { line-height: 1; }
.btn-adopt-pill .bap-arrow {
  font-weight: 900; font-size: 21px;
  margin-left: 1px;
  transition: transform .2s ease;
  display: inline-block;
}
.btn-adopt-pill:hover {
  transform: rotate(1deg) translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--ink);
  background: #ffdd5c;
}
.btn-adopt-pill:hover .bap-paw {
  animation: bap-wiggle 0.6s ease-in-out infinite;
}
.btn-adopt-pill:hover .bap-arrow { transform: translateX(3px); }
.btn-adopt-pill:active {
  transform: rotate(2deg) translate(2px,2px);
  box-shadow: 0 0 0 var(--ink);
}
@keyframes bap-wiggle {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  25%      { transform: rotate(-10deg) scale(1.08); }
  50%      { transform: rotate(-4deg) scale(0.98); }
  75%      { transform: rotate(2deg) scale(1.06); }
}

/* =====================================================================
   Header / Nav
   ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
/* Peeking dog — pops up above the nav's bottom border (the 3px ink "break line"),
   paws hooked over the line, panting smile.

   Geometry: the .nav-peek box is the clip frame. Its bottom edge sits exactly on
   the nav's bottom border, so the SVG (which has paws drawn at the bottom of its
   viewBox) reads as paws gripping the line. The whole dog (.pd-body) animates
   translateY: from 100% (hidden below) to ~0% (paws on the line). Once up, the
   head sub-group does an idle pant/wiggle loop.
*/
/* Anchored just to the LEFT of the donate button, sitting on the nav's
   bottom break line. Lives inside .nav-inner (which is position:relative);
   nav-inner has 16px top/bottom padding + the .nav has a 3px bottom border,
   so we offset bottom by -19px so the peek's bottom edge lines up with the
   ink break line. The donate button is the rightmost child; we use right
   offset that equals roughly the donate button's width + small gap. */
.nav-peek {
  position: absolute;
  right: 175px;        /* sits to the LEFT of the donate button (28px padding + ~125px button + ~22px gap) */
  bottom: -3px;        /* nav has a 3px bottom border; peek's bottom edge sits ON that line */
  width: 88px;
  height: 84px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
/* At 1100px the nav links shrink and the whole nav tightens up — from here
   down the dog would overlap the Donate button (and the burger below 980px),
   so he stays under the line entirely. */
@media (max-width: 1100px) {
  .nav-peek { display: none; }
}
/* Clip the dog to a frame that sits at-and-above the bottom border, so anything
   below the line is hidden cleanly. Use a clip-path so dropdowns nearby aren't
   affected. The frame matches the .nav-peek box. */
.nav-peek .pd-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  transform: translateY(100px);
  transform-origin: 50% 100%;
  will-change: transform;
}
.nav-peek .pd-head { transform-origin: 50px 60px; transform-box: view-box; }
.nav-peek .pd-tongue { transform-origin: 50px 56px; transform-box: view-box; }
.nav-peek .pd-ear-l { transform-origin: 22px 22px; transform-box: view-box; }
.nav-peek .pd-ear-r { transform-origin: 78px 22px; transform-box: view-box; }

/* === The peek cycle — bouncy pop, plant paws, pant in place ===
   Single keyframe sequence covers: pop in (0-12%) → idle bob (12-88%) → duck out (88-100%).
   Total ~5.5s. */
.nav-peek.peek .pd-svg {
  animation: pdA-cycle 5500ms cubic-bezier(.34,1.6,.64,1) forwards;
}
.nav-peek.peek .pd-tongue {
  animation: pdA-tongue 0.7s 800ms ease-in-out 5;
}
@keyframes pdA-cycle {
  0%   { transform: translateY(100px) rotate(-4deg); }
  9%   { transform: translateY(-6px) rotate(3deg); }
  12%  { transform: translateY(0px)  rotate(0deg); }
  /* idle bob */
  25%  { transform: translateY(-2px) rotate(-1deg); }
  40%  { transform: translateY(0px)  rotate(1deg); }
  55%  { transform: translateY(-2px) rotate(0deg); }
  70%  { transform: translateY(0px)  rotate(0deg); }
  85%  { transform: translateY(0px)  rotate(0deg); }
  /* duck */
  100% { transform: translateY(105px) rotate(0deg); }
}
@keyframes pdA-tongue {
  0%, 100% { transform: scaleY(1)    translateY(0px); }
  50%      { transform: scaleY(1.25) translateY(3px); }
}

/* Reduced-motion: hold him up statically */
.nav-peek.static .pd-svg { transform: translateY(0px); }
@media (prefers-reduced-motion: reduce) {
  .nav-peek .pd-svg,
  .nav-peek .pd-head,
  .nav-peek .pd-tongue,
  .nav-peek .pd-ear-l,
  .nav-peek .pd-ear-r { animation: none !important; }
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; max-width: 1400px; margin: 0 auto; gap: 20px;
  position: relative;
}
.logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
  font-family: 'Caprasimo', serif; font-size: 22px;
  flex-shrink: 0;
}
.logo-mark { width: 44px; height: 44px; flex-shrink: 0; }
.logo-mark svg { width: 100%; height: 100%; }

.nav-links {
  display: flex; gap: 4px; align-items: center; flex-wrap: nowrap;
}
.nav-burger {
  display: none;
  width: 46px; height: 46px; flex-shrink: 0;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; padding: 0;
}
.nav-burger span {
  display: block; width: 20px; height: 3px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav.mobile-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.mobile-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.mobile-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-links a, .nav-links .dd-toggle {
  font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding: 10px 14px; border-radius: 24px;
  background: transparent; border: 0; cursor: pointer;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links .dd-toggle:hover { background: var(--yellow); }
.nav-links a.active { background: var(--ink); color: var(--paper); }
.nav-links .dd-toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-links .dd-toggle .chev { font-size: 10px; transition: transform .2s; opacity: 0.65; }
.has-dropdown { position: relative; }
.has-dropdown[data-open="true"] .dd-toggle { background: var(--yellow); }
.has-dropdown[data-open="true"] .dd-toggle .chev { transform: rotate(180deg); }
.dd-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 300px; background: var(--paper);
  border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 8px; display: none; z-index: 50;
}
.has-dropdown[data-open="true"] .dd-panel { display: block; }
.dd-panel a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  text-decoration: none; font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.dd-panel a:hover { background: var(--soft-yellow); }
.dd-panel a .dd-num {
  font-family: 'Caprasimo', serif; font-size: 14px;
  color: var(--red); min-width: 24px;
}
.dd-panel .dd-divider { height: 2px; background: var(--ink); margin: 6px 8px; opacity: 0.15; }

/* =====================================================================
   Page hero (for inner pages)
   ===================================================================== */
.page-hero {
  /* Deliberately tighter than the prototype (July 2026): inner-page headers
     were eating half the viewport before content. vh-clamped so short
     laptop screens tighten further. */
  padding: clamp(20px, 4.5vh, 38px) 0 clamp(16px, 4vh, 32px);
  border-bottom: 3px solid var(--ink);
  position: relative;
  background: var(--paper);
}
.page-hero .eyebrow {
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 24px; color: var(--blue);
  display: inline-block; transform: rotate(-2deg);
  margin-bottom: 6px;
}
.page-hero .eyebrow.red { color: var(--red); }
.page-hero .eyebrow.green { color: var(--green); }
.page-hero .eyebrow.purple { color: var(--purple); }
.page-hero h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  max-width: 30ch;
}
.page-hero h1 .w-red    { color: var(--red); }
.page-hero h1 .w-orange { color: var(--orange); }
.page-hero h1 .w-green  { color: var(--green); }
.page-hero h1 .w-blue   { color: var(--blue); }
.page-hero h1 .w-purple { color: var(--purple); }
.page-hero h1 .underline {
  position: relative; display: inline-block; z-index: 0;
}
.page-hero h1 .underline::after {
  content: '';
  position: absolute; left: -2%; right: -2%; bottom: -10px;
  height: 12px; background: var(--yellow);
  border-radius: 6px; z-index: -1;
}
.page-hero p.lede {
  font-size: 19px; max-width: 60ch;
  color: rgba(26,20,16,0.8); margin-top: 28px;
}

/* =====================================================================
   Sections
   ===================================================================== */
.section { padding: 80px 0; border-bottom: 3px solid var(--ink); }
.section.cream { background: var(--paper-2); }
.section.red   { background: var(--red); color: var(--paper); }
.section.green { background: var(--green); color: var(--paper); }
.section.yellow { background: var(--yellow); color: var(--ink); }
.section.ink   { background: var(--ink); color: var(--paper); }
.section.red h2, .section.green h2, .section.ink h2 { color: var(--paper); }
.section.red p, .section.green p, .section.ink p { color: rgba(255,248,234,0.88); }
.section.red .eyebrow, .section.green .eyebrow { color: var(--yellow); }
.section.ink .eyebrow { color: var(--yellow); }

.section-head {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px;
  align-items: end; margin-bottom: 48px;
}
.section-head .eyebrow {
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 28px; transform: rotate(-2deg); display: inline-block;
  color: var(--red);
}

/* =====================================================================
   Dog cards
   ===================================================================== */
.dog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.dog-card {
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 22px;
  padding: 14px; text-decoration: none;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
  display: block;
}
.dog-card:hover { transform: translate(-3px,-3px) rotate(0); box-shadow: 9px 9px 0 var(--ink); }
.dog-card:nth-child(6n+1) { transform: rotate(-1.2deg); }
.dog-card:nth-child(6n+2) { transform: rotate(0.8deg); }
.dog-card:nth-child(6n+3) { transform: rotate(0.4deg); }
.dog-card:nth-child(6n+4) { transform: rotate(-0.8deg); }
.dog-card:nth-child(6n+5) { transform: rotate(1.1deg); }
.dog-card:nth-child(6n+6) { transform: rotate(-0.5deg); }
.dog-card .photo {
  aspect-ratio: 1/1; border-radius: 14px; border: 3px solid var(--ink);
  position: relative; overflow: hidden; margin-bottom: 12px;
  background-size: cover; background-position: center;
}
.dog-card .photo[data-status]::before {
  content: attr(data-status);
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px;
  font: 800 11px/1 'Nunito', sans-serif;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.dog-card .photo[data-status="Reserved"]::before { background: var(--soft-yellow); }
.dog-card:nth-child(6n+1) .photo { background-color: var(--soft-red); }
.dog-card:nth-child(6n+2) .photo { background-color: var(--soft-green); }
.dog-card:nth-child(6n+3) .photo { background-color: var(--soft-blue); }
.dog-card:nth-child(6n+4) .photo { background-color: var(--soft-yellow); }
.dog-card:nth-child(6n+5) .photo { background-color: var(--soft-pink); }
.dog-card:nth-child(6n+6) .photo { background-color: var(--soft-purple); }
.dog-card .dog-name {
  font-family: 'Caprasimo', serif; font-size: 28px; line-height: 1;
  margin-bottom: 4px;
}
.dog-card .dog-meta {
  font-size: 13px; font-weight: 700; color: rgba(26,20,16,0.65);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dog-card p.bio {
  font-size: 14px; margin: 10px 0 0; color: rgba(26,20,16,0.78);
}
.dog-tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.dog-tag {
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px;
  font-size: 11px; padding: 3px 10px; font-weight: 800;
}
.dog-card:nth-child(2n) .dog-tag { background: var(--pink); }
.dog-card:nth-child(3n) .dog-tag { background: var(--orange); }
.dog-card:nth-child(4n) .dog-tag { background: var(--blue); color: var(--paper); }

/* Filter pill row */
.filters {
  /* No top padding: the parent .section already gives 80px above, matching
     every other page. A 28px top here stacked on that, leaving an oversized
     hero-to-filters gap unique to the Our Dogs page. */
  display: flex; flex-wrap: wrap; gap: 10px;
}
.filters button {
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700;
  background: var(--paper);
  border: 3px solid var(--ink); border-radius: 999px;
  padding: 8px 18px; cursor: pointer; color: var(--ink);
  transition: transform .1s;
}
.filters button:hover { transform: translateY(-2px); }
.filters button.on { background: var(--ink); color: var(--paper); }

/* =====================================================================
   News cards
   ===================================================================== */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-card {
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: 22px; padding: 22px; box-shadow: 6px 6px 0 var(--ink);
  position: relative;
}
.news-card:nth-child(6n+1) { background: var(--soft-red); }
.news-card:nth-child(6n+2) { background: var(--soft-green); }
.news-card:nth-child(6n+3) { background: var(--soft-blue); }
.news-card:nth-child(6n+4) { background: var(--soft-yellow); }
.news-card:nth-child(6n+5) { background: var(--soft-pink); }
.news-card:nth-child(6n+6) { background: var(--soft-purple); }
.news-card .news-meta {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(26,20,16,0.6);
  display: flex; gap: 10px; margin-bottom: 14px;
}
.news-card h3 { font-size: 24px; margin-bottom: 10px; }
.news-card p { font-size: 15px; margin-top: 8px; color: rgba(26,20,16,0.78); }
.news-card .read {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; text-decoration: none; color: var(--ink);
  border-bottom: 3px solid var(--ink); padding-bottom: 2px;
}

/* =====================================================================
   Stories grid
   ===================================================================== */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Cards are links to the full story at /happy-endings/{name}/ — same hover
   lift as dog cards so the two grids feel like one family. */
.story-card {
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: 22px; overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
  display: block; color: inherit; text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.story-card:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }
.story-card:nth-child(6n+1) { background: var(--soft-red); }
.story-card:nth-child(6n+2) { background: var(--soft-green); }
.story-card:nth-child(6n+3) { background: var(--soft-blue); }
.story-card:nth-child(6n+4) { background: var(--soft-yellow); }
.story-card:nth-child(6n+5) { background: var(--soft-pink); }
.story-card:nth-child(6n+6) { background: var(--soft-purple); }
.story-card .photo {
  aspect-ratio: 4/3; border-bottom: 3px solid var(--ink);
  background-size: cover; background-position: center;
}
.story-card .body { padding: 22px; }
.story-card h3 { font-size: 24px; margin-bottom: 10px; }
.story-card .meta {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(26,20,16,0.6); margin-bottom: 4px;
}
.story-card p { font-size: 15px; margin-top: 6px; color: rgba(26,20,16,0.78); }
.story-card .story-cta {
  display: inline-block; margin-top: 12px;
  font-size: 14px; font-weight: 800; color: var(--purple);
  text-decoration: underline; text-decoration-thickness: 2.5px;
  text-underline-offset: 4px;
}
.story-card .story-cta .arrow { display: inline-block; transition: transform .15s; }
.story-card:hover .story-cta .arrow { transform: translateX(4px); }

/* =====================================================================
   Forms (Crayon)
   ===================================================================== */
.form-page { padding: 60px 0 100px; }
.form-intro { max-width: 760px; margin-bottom: 40px; }

/* New Crayon form markup: .form-card / .form-row / .form-field */
.form-card {
  display: grid; gap: 20px;
  background: var(--paper);
  border: 3px solid var(--ink); border-radius: 24px;
  padding: 36px;
  box-shadow: 8px 8px 0 var(--ink);
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.form-field { display: grid; gap: 8px; }
.form-field > label {
  font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--ink);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field textarea,
.form-field select {
  font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink); border-radius: 14px;
  padding: 12px 16px; width: 100%;
  transition: box-shadow .15s, transform .1s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-1px,-1px);
}
.form-field textarea { min-height: 110px; resize: vertical; font-family: 'Nunito', sans-serif; }

@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

form.rdr {
  display: grid; gap: 36px;
  background: var(--paper);
  border: 3px solid var(--ink); border-radius: 24px;
  padding: 40px;
  box-shadow: 8px 8px 0 var(--ink);
}
.form-section {
  display: grid; gap: 18px;
  border-top: 3px solid var(--ink); padding-top: 28px;
}
.form-section:first-child { border-top: 0; padding-top: 0; }
.form-section-title {
  font-family: 'Caprasimo', serif; font-size: 22px;
  color: var(--ink); display: inline-flex; align-items: center; gap: 12px;
}
.form-section-title::before {
  content: '';
  display: inline-block; width: 28px; height: 28px;
  border-radius: 50%; background: var(--red);
  border: 3px solid var(--ink);
}
.form-section:nth-of-type(2) .form-section-title::before { background: var(--orange); }
.form-section:nth-of-type(3) .form-section-title::before { background: var(--green); }
.form-section:nth-of-type(4) .form-section-title::before { background: var(--blue); }
.form-section:nth-of-type(5) .form-section-title::before { background: var(--purple); }

.field { display: grid; gap: 8px; }
.field > label, .field-label {
  font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--ink);
}
.field .hint { font-size: 12px; color: rgba(26,20,16,0.6); }
.field.req > label::after, .field.req > .field-label::after {
  content: ' *'; color: var(--red); font-weight: 800;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="date"],
.field textarea,
.field select {
  font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink); border-radius: 14px;
  padding: 12px 16px; width: 100%;
  transition: box-shadow .15s, transform .1s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-1px,-1px);
}
.field textarea { min-height: 110px; resize: vertical; }
.field.row2 { grid-template-columns: 1fr 1fr; gap: 16px; }
.field.row3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.field.address { grid-template-columns: 1fr 1fr; gap: 16px; }
.field.address .full { grid-column: 1 / -1; }

.radio-group, .check-group { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-group label, .check-group label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; cursor: pointer;
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: 999px;
  font-size: 14px; font-weight: 700;
  transition: transform .1s, box-shadow .1s;
}
.radio-group label:hover, .check-group label:hover {
  transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink);
}
.radio-group input[type="radio"], .check-group input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px; margin: 0;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper); position: relative;
}
.check-group input[type="checkbox"] { border-radius: 4px; }
.radio-group input[type="radio"]:checked,
.check-group input[type="checkbox"]:checked {
  background: var(--red); border-color: var(--ink);
}
.radio-group label:has(input:checked),
.check-group label:has(input:checked) {
  background: var(--ink); color: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
}
.radio-group label:has(input:checked) input[type="radio"],
.check-group label:has(input:checked) input[type="checkbox"] {
  background: var(--yellow); border-color: var(--paper);
}

.field-error {
  display: none;
  color: var(--red); font-size: 12px; font-weight: 800;
}
.has-error .field-error { display: block; }
.has-error input, .has-error select, .has-error textarea {
  border-color: var(--red); background: var(--soft-red);
}

.form-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  padding-top: 8px;
}
.form-actions .privacy { font-size: 12px; color: rgba(26,20,16,0.6); }

.form-success {
  background: var(--green); color: var(--paper);
  border: 3px solid var(--ink); border-radius: 16px;
  padding: 20px 24px; box-shadow: 4px 4px 0 var(--ink);
}
.form-success strong { display: block; font-size: 16px; margin-bottom: 4px; font-family: 'Caprasimo', serif; }

/* =====================================================================
   Forms hub tiles
   ===================================================================== */
.forms-hub-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  margin-top: 40px;
}
.form-tile {
  display: block; padding: 30px 28px 24px;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 6px 6px 0 var(--ink);
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform .1s, box-shadow .1s;
}
.form-tile:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }
.form-tile:nth-child(6n+1) { background: var(--soft-red); }
.form-tile:nth-child(6n+2) { background: var(--soft-yellow); }
.form-tile:nth-child(6n+3) { background: var(--soft-green); }
.form-tile:nth-child(6n+4) { background: var(--soft-blue); }
.form-tile:nth-child(6n+5) { background: var(--soft-pink); }
.form-tile:nth-child(6n+6) { background: var(--soft-purple); }
.form-tile .ft-num {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 24px;
  color: var(--red); display: block; margin-bottom: 8px;
  transform: rotate(-2deg); display: inline-block;
}
.form-tile h3 {
  font-family: 'Caprasimo', serif; font-size: 26px; margin: 6px 0 10px;
}
.form-tile p { font-size: 15px; color: rgba(26,20,16,0.78); margin: 0 0 18px; }
.form-tile .ft-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(26,20,16,0.6);
}
.form-tile .ft-meta .arrow { color: var(--ink); font-size: 14px; }

/* =====================================================================
   CTA band (footer-adjacent prompt)
   ===================================================================== */
.cta-band {
  background: var(--red); color: var(--paper);
  border-bottom: 3px solid var(--ink);
  padding: 70px 0;
}
.cta-band .inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
}
.cta-band h2 { color: var(--paper); }
.cta-band p { color: rgba(255,248,234,0.88); font-size: 18px; }
.cta-band .btn-paper { color: var(--ink); }

/* =====================================================================
   Footer — light & airy. Three variants (A/B/C) toggled via
   <html data-footer="A|B|C">. Default: A.
   ===================================================================== */
footer.site { background: var(--paper); color: var(--ink); font-size: 14px; }
footer.site .container { max-width: 1400px; }
footer.site .foot-logo-img {
  display: block; height: 56px; width: auto;
}
footer.site h4 {
  font-family: 'Nunito', sans-serif;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink); opacity: 0.55;
  margin: 0 0 14px;
}
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 10px; line-height: 1.45; }
footer.site a { text-decoration: none; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 0.15s; }
footer.site a:hover { border-bottom-color: var(--ink); }

/* ----- Variant A: quiet & airy, hairline rainbow at the very bottom ---- */
.footer-a { padding: 88px 0 0; border-top: 1px solid rgba(26,20,16,0.08); }
.footer-a .fa-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 56px; align-items: start;
}
.footer-a .fa-mission {
  margin: 18px 0 0; max-width: 34ch;
  color: rgba(26,20,16,0.65); line-height: 1.55;
}
.footer-a .fa-quiet { color: rgba(26,20,16,0.45); }
.footer-a .fa-bottom {
  margin-top: 64px; padding-top: 24px; padding-bottom: 22px;
  border-top: 1px solid rgba(26,20,16,0.08);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(26,20,16,0.55);
}
.footer-a .foot-vol-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 7px 15px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .1s, box-shadow .1s, background .1s;
}
.footer-a .foot-vol-btn:hover {
  background: var(--yellow);
  transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink);
}
.footer-a .foot-vol-btn:active { transform: translate(1px,1px); box-shadow: 0 0 0 var(--ink); }

/* Facebook pill under the mission text — same family as .foot-vol-btn. */
.footer-a .foot-fb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: 12.5px; font-weight: 800; text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 6px 15px 6px 8px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .1s, box-shadow .1s, background .1s;
}
.footer-a .foot-fb-btn:hover {
  background: var(--soft-blue);
  transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink);
}
.footer-a .foot-fb-btn:active { transform: translate(1px,1px); box-shadow: 0 0 0 var(--ink); }
.footer-a .foot-fb-btn .fb-mark { width: 22px; height: 22px; display: block; }

/* Bare social roundel leading the copyright line — the generic "our socials"
   spot; icon and copyright travel as one left-aligned pair on every screen
   size. drop-shadow (not box-shadow) so the hard sticker shadow hugs the
   circle. */
.footer-a .fa-copy { display: inline-flex; align-items: center; gap: 12px; }
.footer-a .foot-soc { display: inline-flex; }
.footer-a .foot-soc, .footer-a .foot-soc:hover { border-bottom-color: transparent; }
.footer-a .foot-soc .fb-mark {
  width: 30px; height: 30px; display: block;
  filter: drop-shadow(2px 2px 0 var(--ink));
  transition: transform .1s, filter .1s;
}
.footer-a .foot-soc:hover .fb-mark { transform: translate(-1px,-1px); filter: drop-shadow(3px 3px 0 var(--ink)); }
.footer-a .foot-soc:active .fb-mark { transform: translate(1px,1px); filter: drop-shadow(0 0 0 var(--ink)); }
.footer-a .fa-rainbow { display: grid; grid-template-columns: repeat(7, 1fr); height: 4px; }
.footer-a .fa-rainbow span:nth-child(1){background:var(--red);}
.footer-a .fa-rainbow span:nth-child(2){background:var(--orange);}
.footer-a .fa-rainbow span:nth-child(3){background:var(--yellow);}
.footer-a .fa-rainbow span:nth-child(4){background:var(--green);}
.footer-a .fa-rainbow span:nth-child(5){background:var(--blue);}
.footer-a .fa-rainbow span:nth-child(6){background:var(--purple);}
.footer-a .fa-rainbow span:nth-child(7){background:var(--pink);}

/* ===================================================================== 
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  .nav-links { gap: 0; }
  .nav-links a, .nav-links .dd-toggle { font-size: 13px; padding: 8px 10px; }
}
@media (max-width: 980px) {
  .section { padding: 56px 0; }
  .dog-grid, .news-grid, .story-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head, .cta-band .inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-a .fa-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-inner .btn-donate-nav { margin-left: auto; }
  .nav.mobile-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: calc(100% + 2px); left: 12px; right: 12px;
    background: var(--paper); border: 3px solid var(--ink); border-radius: 18px;
    box-shadow: 6px 6px 0 var(--ink);
    padding: 10px; z-index: 60;
  }
  .nav.mobile-open .nav-links a,
  .nav.mobile-open .nav-links .dd-toggle {
    font-size: 16px; padding: 13px 16px; border-radius: 12px;
    width: 100%; text-align: left; justify-content: space-between;
  }
  .nav.mobile-open .has-dropdown { position: static; }
  .nav.mobile-open .dd-panel {
    position: static; min-width: 0; box-shadow: none;
    border: 0; border-left: 3px solid var(--yellow);
    border-radius: 0; margin: 2px 0 6px 16px; padding: 0 0 0 6px;
  }
  form.rdr { padding: 28px 22px; }
  .field.row2, .field.row3, .field.address { grid-template-columns: 1fr; }
  .forms-hub-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dog-grid, .news-grid, .story-grid { grid-template-columns: 1fr; }
  .footer-a .fa-grid { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .container, .nav-inner { padding-left: 20px; padding-right: 20px; }
  .section { padding: 44px 0; }
  .page-hero .eyebrow { font-size: 22px; }
  .page-hero p.lede { font-size: 17px; margin-top: 12px; }
  /* Hard line-breaks in hero titles are art-directed for wide screens;
     on phones let the text wrap naturally instead */
  .page-hero h1 br { display: none; }
}

/* Logo swap (when ?logo=real) */
.use-real-logo .logo-mark { width: auto !important; height: 40px !important; }
.use-real-logo .logo-mark svg { display: none; }
.use-real-logo .logo-mark::before {
  content: ''; display: block; width: 170px; height: 40px;
  background: url('../img/logo-original.gif') left center / contain no-repeat;
}
.use-real-logo .logo { font-size: 0 !important; gap: 0 !important; }
.use-real-logo .logo > *:not(.logo-mark) { display: none; }

/* Narrow phones: the logo + Donate button + burger add up to ~430px of
   unshrinkable flex content, which forced a page-wide min-width — every page
   clipped on the right and scrolled sideways. Below 500px the crayon text
   wordmark hides and the real-logo GIF scales down (again at 360px) so the
   nav — and therefore the page — fits 320px+ viewports. */
@media (max-width: 500px) {
  .nav-inner { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .logo { font-size: 0; gap: 0; }
  .use-real-logo .logo-mark::before { width: 128px; height: 30px; }
}
@media (max-width: 360px) {
  .use-real-logo .logo-mark::before { width: 104px; height: 24px; }
}