/* Adopt Rescue Foster - site styles. Mobile first; breakpoints at 640, 900, 1100. */

/* Fonts: Fredoka for headings (rounded and bubbly, like the lettering in ARF's
   logo) and Nunito for text (soft, rounded ends). Both OFL, self-hosted. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/fonts/fredoka-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url('/fonts/nunito-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-display: swap;
  font-weight: 200 1000;
  src: url('/fonts/nunito-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --plum-950: #1f1230;
  --plum-900: #2e1a47;
  --plum-700: #5b2c83;
  --plum-600: #7340a0;
  --lav-400: #bb8fce;
  --lav-300: #d3b6e0;
  --lav-200: #e7d9ef;
  --lav-100: #f5eef9;
  --sun-500: #f2a91d;
  --sun-400: #f6b73c;
  --sun-100: #fff4dc;
  /* The rest of the rainbow from the logo. Every one of these passes 4.5:1 as
     text on the cream page and on each of the soft tints below. */
  --pink-700: #9c1450;
  --pink-600: #c2185b;
  --pink-200: #f8cfe0;
  --pink-100: #fdeaf2;
  --red-700: #c0262d;
  --orange-700: #b04a00;
  --green-700: #1d7a3a;
  --teal-700: #0b6f7d;
  --blue-700: #1f5fbf;
  --violet-600: #7340a0;
  --peach-100: #fff0e4;
  --mint-100: #e6f5ec;
  --sky-100: #e8f0fc;
  --coral-600: #c2410c;
  --leaf-700: #23663f;
  --leaf-100: #e3f3e8;
  --amber-800: #7a4a00;
  --amber-100: #fff0d1;
  --ink: #221d29;
  --ink-2: #4e4757;
  --ink-3: #6b6375;
  --paper: #fffcf8;
  --card: #ffffff;
  --line: #e9e1ee;
  --error: #b3261e;
  --rainbow: linear-gradient(90deg, #e8372c 0%, #f28c28 20%, #f6cf2f 40%, #4caf50 60%, #2f6fd6 80%, #7b3fa0 100%);

  --font-head: 'Fredoka', 'Nunito', ui-rounded, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Nunito', ui-rounded, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* ARF's heart-and-dog mark, traced from their logo (one path, used as a mask or fill) */
  --arf-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 191'%3E%3Cpath fill-rule='evenodd' d='M94 183C85 174 75 165 70 161C67 158 63 155 52 145C46 140 27 121 25 118C24 117 22 115 21 113C20 111 18 109 18 108C17 107 16 105 15 104C3 87-2 65 1 47C3 39 6 32 10 27C11 25 12 23 13 22C14 21 17 17 24 11C29 7 33 5 44 2C55-1 76 0 82 2C83 3 84 3 84 3C90 4 100 10 107 17C111 21 111 21 112 21C114 20 115 19 116 16C118 11 123 7 131 4C134 3 159 3 164 4C176 7 179 9 184 16C188 20 192 27 194 32C194 34 195 36 196 38C198 44 198 45 197 47C196 52 186 65 182 68C177 71 171 74 168 74C164 74 162 70 162 60C162 56 163 52 163 51C163 49 164 27 163 27C163 27 163 27 163 27C162 27 161 40 160 49C159 50 159 52 159 53C158 56 158 67 158 70C159 72 161 76 162 77C163 78 164 78 169 78C174 78 174 78 177 77C183 73 190 65 195 56C195 55 196 55 196 55C197 54 198 55 198 56C200 64 200 68 200 73C199 74 199 76 199 78C199 80 198 83 198 84C197 85 197 87 196 89C194 95 189 105 183 113C178 121 166 133 146 151C140 157 134 163 132 165C130 167 126 170 123 173C120 175 116 179 113 182C106 189 104 190 103 191C102 191 102 191 94 183ZM97 167C97 166 97 165 98 163C99 157 100 154 102 149C103 147 109 136 110 134C110 134 112 131 113 129C115 126 117 122 117 121C120 117 122 113 123 110C125 104 126 101 126 100C126 100 126 98 127 97C127 96 127 94 127 89C127 82 127 82 126 79C124 75 121 73 115 71C113 71 111 70 110 70C109 70 106 69 105 69C90 65 83 58 81 45C81 42 81 39 80 38C78 30 79 27 85 26C90 25 91 24 87 23C70 15 47 20 34 33C23 44 16 65 20 77C21 79 21 81 22 83C22 84 23 86 23 87C24 88 24 90 25 91C26 96 30 101 35 108C36 110 38 112 38 113C41 116 56 131 67 141C75 148 80 152 87 159C95 167 96 168 97 167ZM129 28C130 27 132 25 132 23C132 22 131 21 130 21C130 21 129 21 128 21C126 22 126 22 124 22C120 20 118 23 121 26C124 30 126 30 129 28Z'/%3E%3C/svg%3E");
  --arf-heart-lav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 191'%3E%3Cpath fill='%23d3b6e0' fill-rule='evenodd' d='M94 183C85 174 75 165 70 161C67 158 63 155 52 145C46 140 27 121 25 118C24 117 22 115 21 113C20 111 18 109 18 108C17 107 16 105 15 104C3 87-2 65 1 47C3 39 6 32 10 27C11 25 12 23 13 22C14 21 17 17 24 11C29 7 33 5 44 2C55-1 76 0 82 2C83 3 84 3 84 3C90 4 100 10 107 17C111 21 111 21 112 21C114 20 115 19 116 16C118 11 123 7 131 4C134 3 159 3 164 4C176 7 179 9 184 16C188 20 192 27 194 32C194 34 195 36 196 38C198 44 198 45 197 47C196 52 186 65 182 68C177 71 171 74 168 74C164 74 162 70 162 60C162 56 163 52 163 51C163 49 164 27 163 27C163 27 163 27 163 27C162 27 161 40 160 49C159 50 159 52 159 53C158 56 158 67 158 70C159 72 161 76 162 77C163 78 164 78 169 78C174 78 174 78 177 77C183 73 190 65 195 56C195 55 196 55 196 55C197 54 198 55 198 56C200 64 200 68 200 73C199 74 199 76 199 78C199 80 198 83 198 84C197 85 197 87 196 89C194 95 189 105 183 113C178 121 166 133 146 151C140 157 134 163 132 165C130 167 126 170 123 173C120 175 116 179 113 182C106 189 104 190 103 191C102 191 102 191 94 183ZM97 167C97 166 97 165 98 163C99 157 100 154 102 149C103 147 109 136 110 134C110 134 112 131 113 129C115 126 117 122 117 121C120 117 122 113 123 110C125 104 126 101 126 100C126 100 126 98 127 97C127 96 127 94 127 89C127 82 127 82 126 79C124 75 121 73 115 71C113 71 111 70 110 70C109 70 106 69 105 69C90 65 83 58 81 45C81 42 81 39 80 38C78 30 79 27 85 26C90 25 91 24 87 23C70 15 47 20 34 33C23 44 16 65 20 77C21 79 21 81 22 83C22 84 23 86 23 87C24 88 24 90 25 91C26 96 30 101 35 108C36 110 38 112 38 113C41 116 56 131 67 141C75 148 80 152 87 159C95 167 96 168 97 167ZM129 28C130 27 132 25 132 23C132 22 131 21 130 21C130 21 129 21 128 21C126 22 126 22 124 22C120 20 118 23 121 26C124 30 126 30 129 28Z'/%3E%3C/svg%3E");
  --arf-heart-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 191'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M94 183C85 174 75 165 70 161C67 158 63 155 52 145C46 140 27 121 25 118C24 117 22 115 21 113C20 111 18 109 18 108C17 107 16 105 15 104C3 87-2 65 1 47C3 39 6 32 10 27C11 25 12 23 13 22C14 21 17 17 24 11C29 7 33 5 44 2C55-1 76 0 82 2C83 3 84 3 84 3C90 4 100 10 107 17C111 21 111 21 112 21C114 20 115 19 116 16C118 11 123 7 131 4C134 3 159 3 164 4C176 7 179 9 184 16C188 20 192 27 194 32C194 34 195 36 196 38C198 44 198 45 197 47C196 52 186 65 182 68C177 71 171 74 168 74C164 74 162 70 162 60C162 56 163 52 163 51C163 49 164 27 163 27C163 27 163 27 163 27C162 27 161 40 160 49C159 50 159 52 159 53C158 56 158 67 158 70C159 72 161 76 162 77C163 78 164 78 169 78C174 78 174 78 177 77C183 73 190 65 195 56C195 55 196 55 196 55C197 54 198 55 198 56C200 64 200 68 200 73C199 74 199 76 199 78C199 80 198 83 198 84C197 85 197 87 196 89C194 95 189 105 183 113C178 121 166 133 146 151C140 157 134 163 132 165C130 167 126 170 123 173C120 175 116 179 113 182C106 189 104 190 103 191C102 191 102 191 94 183ZM97 167C97 166 97 165 98 163C99 157 100 154 102 149C103 147 109 136 110 134C110 134 112 131 113 129C115 126 117 122 117 121C120 117 122 113 123 110C125 104 126 101 126 100C126 100 126 98 127 97C127 96 127 94 127 89C127 82 127 82 126 79C124 75 121 73 115 71C113 71 111 70 110 70C109 70 106 69 105 69C90 65 83 58 81 45C81 42 81 39 80 38C78 30 79 27 85 26C90 25 91 24 87 23C70 15 47 20 34 33C23 44 16 65 20 77C21 79 21 81 22 83C22 84 23 86 23 87C24 88 24 90 25 91C26 96 30 101 35 108C36 110 38 112 38 113C41 116 56 131 67 141C75 148 80 152 87 159C95 167 96 168 97 167ZM129 28C130 27 132 25 132 23C132 22 131 21 130 21C130 21 129 21 128 21C126 22 126 22 124 22C120 20 118 23 121 26C124 30 126 30 129 28Z'/%3E%3C/svg%3E");
  /* hand-drawn bits */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V11C50-1 100-1 150 11S250 23 300 11V22Z'/%3E%3C/svg%3E");
  --wave-h: 14px;
  --wave-w: 190px;
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23e8372c'/%3E%3Cstop offset='.2' stop-color='%23f28c28'/%3E%3Cstop offset='.4' stop-color='%23f6cf2f'/%3E%3Cstop offset='.6' stop-color='%234caf50'/%3E%3Cstop offset='.8' stop-color='%232f6fd6'/%3E%3Cstop offset='1' stop-color='%237b3fa0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 9C9 3 15 3 21 9S33 15 39 9 51 3 57 9 69 15 75 9 87 3 93 9 105 15 111 9 118 4 121 7' fill='none' stroke='url(%23g)' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --doodle-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46' fill='none' stroke='%23c2185b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 41C15 34 6 26 5 17 4 10 9 5 15 5c5 0 8 3 10 7 2-5 6-8 11-8 6 0 10 5 9 12-1 9-10 17-19 24'/%3E%3Cpath d='M21 41c2 1 4 2 6 1' opacity='.6'/%3E%3C/svg%3E");
  --sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 48'%3E%3Cpath fill='%23f6b73c' d='M22 4c1.6 8 3.4 9.8 11.4 11.4C25.4 17 23.6 18.8 22 26.8 20.4 18.8 18.6 17 10.6 15.4 18.6 13.8 20.4 12 22 4z'/%3E%3Cpath fill='%23f28c28' d='M46 22c1 5 2.2 6.2 7.2 7.2-5 1-6.2 2.2-7.2 7.2-1-5-2.2-6.2-7.2-7.2 5-1 6.2-2.2 7.2-7.2z'/%3E%3Ccircle cx='12' cy='38' r='2.6' fill='%23c2185b'/%3E%3C/svg%3E");
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6b73c' d='M12 1c1 6.3 2.7 8 9 9-6.3 1-8 2.7-9 9-1-6.3-2.7-8-9-9 6.3-1 8-2.7 9-9z'/%3E%3C/svg%3E");
  --doodles-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M78 70C70 64 63 58 62 51c-1-6 3-10 8-10 4 0 6 2 8 6 2-4 5-6 9-6 5 0 8 4 7 10-1 7-8 13-16 19'/%3E%3Cpath d='M20 20c1 6 2.6 7.6 8.6 8.6-6 1-7.6 2.6-8.6 8.6-1-6-2.6-7.6-8.6-8.6 6-1 7.6-2.6 8.6-8.6z'/%3E%3Cpath d='M104 14c.7 4 1.7 5 5.7 5.7-4 .7-5 1.7-5.7 5.7-.7-4-1.7-5-5.7-5.7 4-.7 5-1.7 5.7-5.7z'/%3E%3Cpath d='M40 64c6-8 14-10 22-6' stroke-dasharray='1 6'/%3E%3C/svg%3E");
  --paws-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='12' cy='16.2' rx='5.4' ry='4.6'/%3E%3Cellipse cx='5.2' cy='10.4' rx='2.3' ry='2.9'/%3E%3Cellipse cx='9.4' cy='6' rx='2.3' ry='3'/%3E%3Cellipse cx='14.6' cy='6' rx='2.3' ry='3'/%3E%3Cellipse cx='18.8' cy='10.4' rx='2.3' ry='2.9'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%237340a0' fill-opacity='.07'%3E%3Cuse href='%23p' transform='translate(24 30) rotate(-20 12 12) scale(1.3)'/%3E%3Cuse href='%23p' transform='translate(130 18) rotate(16 12 12)'/%3E%3Cuse href='%23p' transform='translate(78 104) rotate(-8 12 12) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(176 128) rotate(24 12 12) scale(1.25)'/%3E%3Cuse href='%23p' transform='translate(20 168) rotate(10 12 12)'/%3E%3C/g%3E%3C/svg%3E");
  --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.2' rx='5.4' ry='4.6'/%3E%3Cellipse cx='5.2' cy='10.4' rx='2.3' ry='2.9' transform='rotate(-18 5.2 10.4)'/%3E%3Cellipse cx='9.4' cy='6' rx='2.3' ry='3' transform='rotate(-6 9.4 6)'/%3E%3Cellipse cx='14.6' cy='6' rx='2.3' ry='3' transform='rotate(6 14.6 6)'/%3E%3Cellipse cx='18.8' cy='10.4' rx='2.3' ry='2.9' transform='rotate(18 18.8 10.4)'/%3E%3C/svg%3E");

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  /* Shadows: one light source, several soft layers, tinted plum instead of
     gray, with a hairline edge so white cards hold their shape on cream. */
  --edge: 0 0 0 1px hsl(275 35% 22% / 0.07);
  --shadow-sm: var(--edge), 0 1px 1px hsl(275 40% 20% / 0.04), 0 2px 4px hsl(275 40% 20% / 0.04), 0 6px 14px hsl(275 40% 20% / 0.045);
  --shadow: var(--edge), 0 1px 1px hsl(275 40% 20% / 0.04), 0 4px 8px hsl(275 40% 20% / 0.05), 0 12px 24px hsl(275 40% 20% / 0.06), 0 28px 48px hsl(275 40% 20% / 0.06);
  --shadow-lg: var(--edge), 0 2px 2px hsl(275 40% 20% / 0.04), 0 8px 16px hsl(275 40% 20% / 0.06), 0 20px 36px hsl(275 40% 20% / 0.08), 0 40px 72px hsl(275 40% 20% / 0.08);
  --ease-out: cubic-bezier(0.22, 0.7, 0.22, 1);
  /* Paper grain: a fine plum-tinted noise over the cream, like printed stock. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.1 0 0 0 0 0.28 0 0 0 0.065 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --gutter: 16px;
  --header-h: 64px;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --wave-h: 22px; --wave-w: 300px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; --header-h: 76px; } }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  hanging-punctuation: first allow-end last;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--plum-700); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--plum-900); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--plum-900); line-height: 1.1; letter-spacing: -0.005em; margin: 0 0 0.5em; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.3vw, 3.9rem); font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: 1.28rem; letter-spacing: 0; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, .eyebrow { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
ul, ol { padding-left: 1.25em; }
strong { font-weight: 800; }
hr { border: 0; height: 1px; background: var(--line); margin: 2rem 0; }
:focus-visible { outline: 3px solid var(--plum-600); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--pink-200); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--plum-900); color: #fff; padding: 10px 16px; border-radius: 0 0 12px 12px; font-weight: 800; }
.skip-link:focus { top: 0; color: #fff; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }
.muted { color: var(--ink-3); }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; }
.eyebrow { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-body); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, var(--pink-600)); margin: 0 0 0.6rem; }
.eyebrow::before { content: ''; flex: none; width: 1.35em; height: 1.35em; background: currentColor; -webkit-mask: var(--paw) center / contain no-repeat; mask: var(--paw) center / contain no-repeat; rotate: -14deg; }
.center .eyebrow { justify-content: center; }
.text-link { font-weight: 800; display: inline-block; padding-block: 3px; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 32%, transparent); transition: text-decoration-color 0.2s ease; }
.text-link:hover { text-decoration-color: currentColor; }
.text-link::after { content: ''; display: inline-block; width: 0.95em; height: 0.95em; margin-left: 0.3em; vertical-align: -0.14em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: translate 0.25s var(--ease-out); }
.text-link:hover::after { translate: 3px 0; }
:root { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.more-link { margin-top: 22px; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- buttons ---------- */

.btn {
  --btn-bg: var(--plum-700); --btn-fg: #fff; --btn-bd: var(--plum-700);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.35em;
  border-radius: 999px; border: 2px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 800 1rem/1.15 var(--font-body); text-decoration: none; text-align: center;
  cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:is(.btn--primary, .btn--sun, .btn--venmo, .btn--paypal) { background-image: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px hsl(275 40% 15% / 0.18); }
.btn:is(.btn--primary, .btn--venmo, .btn--paypal):hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 16px hsl(335 60% 30% / 0.28); }
.btn--sun:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 6px 16px hsl(38 90% 40% / 0.3); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--pink-600); --btn-bd: var(--pink-600); }
.btn--primary:hover { --btn-bg: var(--pink-700); --btn-bd: var(--pink-700); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--pink-700); --btn-bd: var(--pink-200); }
.btn--ghost:hover { --btn-bg: var(--pink-100); --btn-fg: var(--pink-700); --btn-bd: var(--pink-600); }
.btn--soft { --btn-bg: var(--lav-100); --btn-fg: var(--plum-900); --btn-bd: var(--lav-100); }
.btn--soft:hover { --btn-bg: var(--lav-200); --btn-bd: var(--lav-200); }
.btn--sun { --btn-bg: var(--sun-400); --btn-fg: var(--plum-950); --btn-bd: var(--sun-400); }
.btn--sun:hover { --btn-bg: var(--sun-500); --btn-bd: var(--sun-500); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--plum-900); --btn-bd: #fff; }
.btn--venmo { --btn-bg: #0074d4; --btn-bd: #0074d4; --btn-fg: #fff; }
.btn--venmo:hover { --btn-bg: #005fbf; --btn-bd: #005fbf; }
.btn--paypal { --btn-bg: #002991; --btn-bd: #002991; --btn-fg: #fff; }
.btn--paypal:hover { --btn-bg: #001c66; --btn-bd: #001c66; }
.btn--lg { min-height: 54px; font-size: 1.06rem; padding-inline: 1.6em; }
.btn--block { width: 100%; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- header ---------- */

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 252, 248, 0.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--rainbow); }
/* Phones: a solid header. A frosted (blurred) header has to re-blur whatever
   scrolls under it on every frame, which costs the most on the slowest phones. */
@media (hover: none), (pointer: coarse) { .site-header, .apply-bar { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.site-header__bar { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--plum-900); margin-right: auto; }
.brand img { width: 44px; height: 44px; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; line-height: 1.05; letter-spacing: 0; }
.brand__name small { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-3); text-transform: none; }
@media (min-width: 1100px) { .brand img { width: 52px; height: 52px; } .brand__name { font-size: 1.2rem; } }

.nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--pink-200); background: #fff; color: var(--plum-900); font: 800 0.95rem var(--font-body); cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; }
/* the three bars fold into an X while the menu is open */
.nav-toggle svg path { transform-box: view-box; transform-origin: 12px 12px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded='true'] svg path:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.nav-toggle[aria-expanded='true'] svg path:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] svg path:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }
.header-donate { min-height: 44px; padding: 0.55em 1.1em; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; text-decoration: none; color: var(--ink); font-weight: 800; }
.site-nav a[aria-current='page'] { color: var(--pink-700); }

/* no JS: nav is a scrollable row under the bar */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .site-nav { overflow-x: auto; border-top: 1px solid var(--line); }
html:not(.js) .site-nav ul { display: flex; gap: 4px; padding: 6px 0; }
html:not(.js) .site-nav a { padding: 8px 12px; white-space: nowrap; }

/* JS, small screens: dropdown panel */
@media (max-width: 1099.98px) {
  .js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .js .site-header[data-open] .site-nav { display: block; }
  .js .site-nav ul { padding: 8px var(--gutter) 20px; }
  .js .site-nav li + li { border-top: 1px solid var(--line); }
  .js .site-nav a { padding: 14px 4px; font-size: 1.1rem; }
  .js .site-nav .nav-extra { display: block; }
}
@media (min-width: 1100px) {
  .nav-toggle { display: none !important; }
  .site-nav { display: block !important; position: static; border: 0 !important; overflow: visible !important; }
  .site-nav ul { display: flex !important; gap: 2px; padding: 0 !important; }
  .site-nav a { padding: 10px 12px !important; border-radius: 999px; font-size: 0.98rem; white-space: nowrap; }
  .site-nav a:hover { background: var(--pink-100); color: var(--pink-700); }
  .site-nav a[aria-current='page'] { background: var(--pink-100); color: var(--pink-700); }
  .site-nav .nav-extra { display: none; }
  .site-header__bar { gap: 18px; }
}
.nav-extra { display: none; }
@media (max-width: 1099.98px) {
  html:not(.js) .site-header__bar { flex-wrap: wrap; }
  html:not(.js) .site-nav { order: 3; width: 100%; }
}
@media (max-width: 479.98px) {
  .brand { gap: 8px; }
  .brand img { width: 40px; height: 40px; }
  .brand__name { font-size: 0.98rem; max-width: 7.2em; }
  .brand__name small { display: none; }
  .nav-toggle { padding: 0 11px; }
  .nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .header-donate { padding-inline: 0.9em; }
  .site-header__bar { gap: 8px; }
}
@media (max-width: 374.98px) {
  .brand img { width: 36px; height: 36px; }
  .brand__name { font-size: 0.9rem; }
  .header-donate { padding-inline: 0.8em; }
  .header-donate svg { display: none; }
}

/* ---------- sections ---------- */

main { display: block; }
.section { padding-block: 48px; }
.section--tight { padding-block: 32px; }
.section--tint { background: var(--lav-100) var(--grain); --accent: var(--violet-600); }
.section--sun { background: var(--sun-100) var(--grain); --accent: var(--orange-700); }
.section--pink { background: var(--pink-100) var(--grain); --accent: var(--pink-700); }
.section--mint { background: var(--mint-100) var(--grain); --accent: var(--green-700); }
.section--sky { background: var(--sky-100) var(--grain); --accent: var(--blue-700); }
.section--peach { background: var(--peach-100) var(--grain); --accent: var(--orange-700); }
/* a scatter of faint paw prints, like the ones around ARF's logo */
.section--paws { background-image: var(--paws-bg), var(--grain); background-size: 220px 220px, auto; }
.section--plum { background: var(--plum-900); color: #f4ecfa; }
.section--plum h2, .section--plum h3 { color: #fff; }
.section--plum a:not(.btn) { color: #fff; }
.section--plum .lead { color: #e6d9f0; }
/* Wavy edges: every colored band meets its neighbors on a soft wave instead of
   a straight line. The wave is the band's own background, cut by a mask, on a
   thin strip above and below it. Two colored bands in a row share one wave
   (the lower one draws it), and nothing pokes into the footer. */
.section:is(.section--tint, .section--sun, .section--pink, .section--mint, .section--sky, .section--peach) { position: relative; }
.section:is(.section--tint, .section--sun, .section--pink, .section--mint, .section--sky, .section--peach)::before,
.section:is(.section--tint, .section--sun, .section--pink, .section--mint, .section--sky, .section--peach)::after { content: ''; position: absolute; left: 0; right: 0; height: var(--wave-h); background: inherit; pointer-events: none; -webkit-mask: var(--wave) 0 0 / var(--wave-w) 100% repeat-x; mask: var(--wave) 0 0 / var(--wave-w) 100% repeat-x; }
.section:is(.section--tint, .section--sun, .section--pink, .section--mint, .section--sky, .section--peach)::before { bottom: calc(100% - 1px); }
.section:is(.section--tint, .section--sun, .section--pink, .section--mint, .section--sky, .section--peach)::after { top: calc(100% - 1px); rotate: 180deg; }
.section:is(.section--tint, .section--sun, .section--pink, .section--mint, .section--sky, .section--peach):has(+ .section:is(.section--tint, .section--sun, .section--pink, .section--mint, .section--sky, .section--peach))::after { content: none; }
main:has(+ .site-footer) > .section:last-child::after { content: none; }
/* ARF's heart, pinned on the wave at the top of a band */
.heart-pin { position: absolute; z-index: 1; left: 50%; top: 0; translate: -50% -50%; width: 58px; height: 58px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; pointer-events: none; }
.heart-pin::before { content: ''; width: 34px; height: 33px; background: linear-gradient(90deg, #f6cf2f, #4caf50 45%, #2f6fd6 75%, #5b2c83); -webkit-mask: var(--arf-heart) center / contain no-repeat; mask: var(--arf-heart) center / contain no-repeat; }
@media (min-width: 900px) { .heart-pin { width: 68px; height: 68px; } .heart-pin::before { width: 40px; height: 38px; } }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.section__head h2 { margin: 0; }
.section__head p { margin: 0; }
@media (min-width: 900px) { .section { padding-block: 80px; } .section--tight { padding-block: 48px; } }

.rainbow-rule { height: 16px; width: 112px; background: var(--squiggle) left center / contain no-repeat; margin: 0 0 14px; }
.center .rainbow-rule { margin-inline: auto; }

.page-head { padding-block: 32px 24px; }
.page-head h1 { margin-bottom: 0.35em; }
@media (min-width: 900px) { .page-head { padding-block: 56px 32px; } }

.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 720px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; } .split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .split--flip > :first-child { order: 2; } }
@media (min-width: 900px) { .split { gap: 56px; } }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { margin: 0 0 1em; }
.prose li { margin-bottom: 0.35em; }

/* ---------- photos ---------- */

.pic { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--lav-100); }
.pic picture { display: block; width: 100%; height: 100%; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic--4x5 { aspect-ratio: 4 / 5; }
.pic--1x1 { aspect-ratio: 1; }
.pic--4x3 { aspect-ratio: 4 / 3; }
.pic--3x2 { aspect-ratio: 3 / 2; }
.pic--16x10 { aspect-ratio: 16 / 10; }
/* a tall photo shown whole (ratio 'natural'), kept to a sensible width */
.pic--poster { width: min(100%, 360px); margin-inline: auto; }
@media (min-width: 720px) { .pic--poster { width: min(100%, 380px); margin-inline: auto 0; } }
.pic--ring { box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--pink-200); }
.pic figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; font-size: 0.85rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.img-failed { visibility: hidden; }
.photo-missing { display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--lav-100), var(--lav-100) 12px, var(--lav-200) 12px, var(--lav-200) 24px); color: var(--plum-700); font-weight: 800; font-size: 0.9rem; }

.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo-strip .pic { border-radius: var(--radius); }
@media (min-width: 900px) { .photo-strip { gap: 16px; } }

/* ---------- hero ---------- */

.hero { padding-block: 20px 40px; }
.hero__grid { display: grid; gap: 24px; align-items: center; }
.hero__media { position: relative; }
.hero__media .pic { aspect-ratio: 4 / 3.4; }
.hero__badge { position: absolute; left: -6px; bottom: -14px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 8px 16px 8px 8px; box-shadow: var(--shadow); font-weight: 800; font-size: 0.92rem; color: var(--plum-900); }
.hero__badge img { width: 40px; height: 40px; }
.hero h1 { margin-bottom: 0.3em; }
h1 .hl { color: var(--pink-600); }
.hero h1 .w1 { color: var(--pink-600); }
.hero h1 .w2 { color: var(--orange-700); }
.hero h1 .w3 { color: var(--violet-600); }
:is(.hero h1 .accent, h1 .hl) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M6 10C60 5 150 3 230 4c32 .5 54 2 64 5 4 2 3 8 2 13-1 6-4 11-10 12-66 3-146 3-226 2-26-.4-44-1-52-3-5-2-6-9-5-16 .5-4 1-6 3-7Z' fill='%23f6b73c'/%3E%3Cpath d='M14 30c70 2.5 170 2 270-1' stroke='%23f2a91d' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='.6'/%3E%3Cpath d='M20 12c80-4 170-5 250-3' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' opacity='.25'/%3E%3C/svg%3E") no-repeat 0 86% / 100% 0.46em; padding-inline: 0.08em; margin-inline: -0.04em; }
.hero__text .lead { margin-bottom: 1.4rem; }
.hero__mission { margin: 0 0 1.5rem; max-width: 60ch; padding: 14px 18px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); border-left: 5px solid var(--pink-600); font-size: 1.1rem; line-height: 1.5; color: var(--ink-2); }
.hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 18px 0 0; list-style: none; color: var(--ink-2); font-weight: 700; font-size: 0.86rem; line-height: 1.3; border-top: 1px solid var(--line); }
.hero__stats li { display: flex; flex-direction: column; }
.hero__stats strong { color: var(--pink-600); font-family: var(--font-head); font-weight: 600; font-size: 1.8rem; line-height: 1.1; }
.hero__stats li:nth-child(2) strong { color: var(--teal-700); }
.hero__stats li:nth-child(3) strong { color: var(--violet-600); }
@media (min-width: 640px) { .hero__stats { font-size: 0.95rem; } .hero__stats strong { font-size: 2rem; } }
@media (min-width: 720px) {
  .hero { padding-block: 36px 56px; }
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 36px; }
  .hero__media { order: 2; }
  .hero__media .pic { aspect-ratio: 4 / 4.4; }
  .hero__badge { left: -20px; bottom: 28px; }
}
@media (min-width: 900px) {
  .hero { padding-block: 48px 72px; }
  .hero__grid { gap: 56px; }
  .hero__badge { left: -28px; bottom: 32px; }
}

/* ---------- badges, flags, tags ---------- */

.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.badge { display: inline-block; font-size: 0.78rem; font-weight: 800; line-height: 1.1; padding: 6px 9px; border-radius: 12px; background: #efeaf4; color: #463e52; }
.badge--good { background: var(--leaf-100); color: var(--leaf-700); }
.badge--care { background: var(--amber-100); color: var(--amber-800); }
.badges--lg .badge { font-size: 0.88rem; padding: 8px 12px; border-radius: 16px; }
.flag { display: inline-block; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.01em; line-height: 1.15; padding: 5px 9px; border-radius: 10px; background: #fff; color: var(--plum-900); box-shadow: var(--shadow-sm); }
.flag--new { background: var(--sun-400); color: var(--plum-950); }
.flag--wait { background: var(--pink-600); color: #fff; }
.flag--litter { background: #fff; color: var(--violet-600); }
.tag { display: inline-block; font-size: 0.8rem; font-weight: 900; padding: 4px 10px; border-radius: 999px; background: var(--lav-100); color: var(--plum-700); }
.tag--care { background: var(--amber-100); color: var(--amber-800); }

/* ---------- dog cards ---------- */

.dog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 640px) { .dog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .dog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.dog-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .dog-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dog-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 62%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin-inline: -4px; scrollbar-width: thin; }
.dog-row > * { scroll-snap-align: start; }
@media (min-width: 640px) { .dog-row { grid-auto-columns: minmax(220px, 34%); } }
@media (min-width: 1100px) { .dog-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }

.dog-card { position: relative; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); min-width: 0; }
.dog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.dog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.dog-card__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--lav-100) var(--arf-heart-lav) center / 38% no-repeat; }
.dog-card__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease-out); }
.dog-card:hover .dog-card__img { transform: scale(1.04); }
.dog-card__flags { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.dog-card__body { padding: 12px 12px 14px; display: flex; flex-direction: column; flex: 1; }
.dog-card__name { font-size: 1.2rem; margin: 0 0 2px; }
.dog-card__facts { margin: 0 0 8px; color: var(--ink-2); font-weight: 700; font-size: 0.9rem; }
.dog-card__snippet { font-size: 0.92rem; color: var(--ink-2); margin: 0 0 8px; }
.dog-card__fee { margin: auto 0 0; font-weight: 900; color: var(--pink-700); font-size: 0.95rem; }
@media (min-width: 640px) { .dog-card__body { padding: 14px 16px 16px; } .dog-card__name { font-size: 1.3rem; } }
/* Two cards per row on phones: tighten the card so flags, facts and badges stay on one line. */
@media (max-width: 479.98px) {
  .dog-card__body { padding: 10px 10px 12px; }
  .dog-card__flags { left: 6px; top: 6px; right: 6px; gap: 4px; }
  .dog-card .flag { font-size: 0.7rem; padding: 4px 7px; }
  .dog-card__facts { font-size: 0.82rem; }
  .dog-card .badge { font-size: 0.74rem; padding: 5px 8px; }
}
/* Very narrow phones: one card per row, square photo (Shelterluv photos are square, so nothing is cut off). */
@media (max-width: 374.98px) {
  .dog-grid, .dog-grid--compact { grid-template-columns: minmax(0, 1fr); }
  .dog-grid .dog-card__photo { aspect-ratio: 1; }
}
.dog-card[hidden] { display: none; }

/* ---------- filters ---------- */

.filters { display: none; }
.js .filters { display: block; }
.filters { margin-bottom: 20px; }
.filters__top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters__search { flex: 1 1 220px; position: relative; }
.filters__search input { width: 100%; min-height: 48px; padding: 10px 14px 10px 42px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font: inherit; }
.filters__search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-3); }
.filters select { min-height: 48px; border-radius: 999px; border: 2px solid var(--line); background: #fff; padding: 0 38px 0 16px; font: 700 0.95rem var(--font-body); color: var(--ink); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235b2c83'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.chip-groups { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 14px; }
.chip-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.chip-group legend { font-weight: 900; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-weight: 800; font-size: 0.9rem; color: var(--ink-2); transition: background-color 0.12s, border-color 0.12s, color 0.12s; }
.chip input:checked + span { background: var(--pink-600); border-color: var(--pink-600); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--plum-600); outline-offset: 2px; }
.filters__status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 18px 0 0; font-weight: 800; color: var(--ink-2); }
.filters__clear { background: none; border: 0; color: var(--pink-700); font: 800 0.95rem var(--font-body); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.empty-state { text-align: center; padding: 40px 16px; background: #fff; border-radius: var(--radius); border: 2px dashed var(--line); }
.filters-toggle { display: none; }
@media (max-width: 639.98px) {
  .js .filters-toggle { display: inline-flex; }
  .js .filters:not([data-expanded]) .chip-groups { display: none; }
}

/* ---------- dog page ---------- */

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 16px 0 14px; font-size: 0.9rem; font-weight: 700; color: var(--ink-3); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--lav-400); }
.dog__layout { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.dog__layout > *, .split > *, .hero__grid > *, .footer-grid > *, .event__head > * { min-width: 0; }
@media (min-width: 720px) {
  .dog__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-rows: auto auto 1fr; column-gap: 32px; row-gap: 40px; align-items: start; }
  .dog__layout > .gallery, .dog__layout > .dog__story, .dog__layout > .sponsor-box { grid-column: 1; }
  .dog__aside { grid-column: 2; grid-row: 1 / span 3; }
}
@media (min-width: 900px) { .dog__layout { column-gap: 48px; } }
.dog__aside { display: grid; gap: 32px; align-content: start; }
.gallery__track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-lg); background: var(--lav-100) var(--arf-heart-lav) center / 30% no-repeat; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }
.gallery__item { scroll-snap-align: center; aspect-ratio: 1; }
.gallery__item[hidden] { display: none; }
.gallery__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.gallery__img.is-small { object-fit: scale-down; position: relative; z-index: 1; }
.gallery__item.has-backdrop { position: relative; overflow: hidden; }
.gallery__item.has-backdrop::before { content: ''; position: absolute; inset: -24px; background: var(--backdrop) center / cover no-repeat; filter: blur(22px) saturate(1.15); opacity: 0.9; }
.gallery__thumbs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; padding: 10px 0 0; margin: 0; }
.gallery__thumbs li[hidden] { display: none; }
.gallery__thumbs a { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: var(--lav-100); }
.gallery__thumbs a[aria-current='true'] { border-color: var(--pink-600); }
.gallery__thumb { width: 100%; height: 100%; object-fit: cover; }
.dog__name { margin-bottom: 0.15em; }
.dog__facts { font-weight: 800; color: var(--ink-2); font-size: 1.1rem; margin-bottom: 14px; }
.dog__fee { font-size: 1.05rem; margin: 6px 0 18px; }
.dog__fee strong { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; color: var(--plum-900); margin-left: 6px; }
.dog__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dog__actions .btn--primary { flex: 1 1 100%; }
.dog__small { font-size: 0.88rem; color: var(--ink-3); margin-top: 12px; }
.bio { font-size: 1.06rem; }
.bio--quick p:first-child { font-size: 1.15rem; }
.dog__details-h { font-size: 1.2rem; margin: 0 0 10px; }
.facts__note { color: var(--ink-3); font-weight: 600; }
.facts { margin: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 6px 18px; }
.facts__row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts__row:last-child { border-bottom: 0; }
.facts dt { font-weight: 900; color: var(--ink-3); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
.facts dd { margin: 2px 0 0; font-weight: 700; }
.sponsor-box { background: var(--sun-100); border-radius: var(--radius); padding: 18px 20px; }
.sponsor-box h2 { font-size: 1.3rem; margin-bottom: 0.3em; }
.sponsor-box p { color: var(--ink-2); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.steps li { counter-increment: step; background: #fff; border-radius: var(--radius); padding: 18px 18px 18px 62px; position: relative; box-shadow: var(--shadow-sm); }
.steps li::before { content: counter(step); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--step, var(--pink-600)); color: #fff; font: 600 1.05rem/32px var(--font-head); text-align: center; }
.steps li:nth-child(4n + 2) { --step: var(--orange-700); }
.steps li:nth-child(4n + 3) { --step: var(--green-700); }
.steps li:nth-child(4n + 4) { --step: var(--blue-700); }
.steps--long li { padding-top: 20px; }
@media (min-width: 900px) { .steps--long { grid-template-columns: 1fr 1fr; } }
.how-mini { padding-top: 40px; }
.litter { padding-top: 40px; }

/* ---------- Dog of the Day ---------- */

.dotd { display: grid; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.dotd::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--rainbow); z-index: 1; }
.dotd__photo { position: relative; aspect-ratio: 4 / 4; background: var(--lav-100) var(--arf-heart-lav) center / 30% no-repeat; }
.dotd__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.dotd__body { padding: 22px 20px 24px; }
.dotd__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.dotd__pill { display: inline-block; background: var(--pink-100); color: var(--pink-700); padding: 6px 12px; border-radius: 999px; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }
.dotd__date { font-weight: 800; font-size: 0.92rem; color: var(--ink-3); }
.dotd__name { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); margin: 6px 0 4px; }
.dotd__facts { font-weight: 800; color: var(--ink-2); margin-bottom: 12px; }
.dotd__snippet { font-size: 1.06rem; color: var(--ink-2); }
.dotd__litter { font-weight: 700; }
.dotd__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
.dotd__how { font-size: 0.88rem; color: var(--ink-3); margin: 0; }
.dotd__stamp { position: absolute; left: 50%; top: 74%; translate: -50% -50%; rotate: -10deg; margin: 0; padding: 10px 26px; border: 5px solid #fff; border-radius: 14px; background: rgb(194 24 91 / 0.92); color: #fff; font: 600 clamp(2rem, 6vw, 3.2rem)/1 var(--font-head); letter-spacing: 0.02em; box-shadow: var(--shadow); }
.dotd.is-adopted .dotd__img { filter: saturate(0.85); }
@media (min-width: 720px) {
  .dotd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the photo fills whatever height the text needs instead of setting it */
  .dotd__photo { aspect-ratio: auto; min-height: 400px; }
  .dotd__photo > img, .dotd__photo > .photo-missing { position: absolute; inset: 0; }
  .dotd__body { padding: 32px 28px 30px; align-self: center; }
}
@media (min-width: 900px) {
  .dotd__photo { min-height: 460px; }
  .dotd__body { padding: 44px 44px 40px; }
}

/* ---------- path cards (adopt / foster / volunteer / donate) ---------- */

.paths { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .paths { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.path { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.path:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.path .pic { border-radius: 0; aspect-ratio: 1; }
.path__body { padding: 14px 14px 16px; }
.path__body h3 { margin: 0 0 4px; font-size: 1.2rem; }
.path__body p { margin: 0; font-size: 0.93rem; color: var(--ink-2); }
.path { --c: var(--pink-600); border-top: 6px solid var(--c); }
.path:nth-child(2) { --c: var(--orange-700); }
.path:nth-child(3) { --c: var(--green-700); }
.path:nth-child(4) { --c: var(--blue-700); }
.path__go { display: inline-block; margin-top: 8px; font-weight: 900; color: var(--c); font-size: 0.95rem; }
.path__go::after { content: ''; display: inline-block; width: 0.95em; height: 0.95em; margin-left: 0.3em; vertical-align: -0.14em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: translate 0.25s var(--ease-out); }
.path:hover .path__go::after { translate: 3px 0; }
@media (min-width: 900px) { .path__body { padding: 18px 20px 22px; } .path__body h3 { font-size: 1.35rem; } }

/* ---------- info cards / lists ---------- */

.cards { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .cards--2, .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two columns until 900px: a lone third card spans the row instead of sitting half empty */
  .cards--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--3 > :last-child:nth-child(odd) { grid-column: auto; } .cards { gap: 22px; } }
.card { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: 0.35em; }
.card p:last-child { margin-bottom: 0; }
.card--icon { padding-top: 20px; }
.card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--pink-100); color: var(--pink-700); margin-bottom: 14px; }
.cards > :nth-child(4n + 2) .card__icon { background: var(--mint-100); color: var(--green-700); }
.cards > :nth-child(4n + 3) .card__icon { background: var(--sky-100); color: var(--blue-700); }
.cards > :nth-child(4n + 4) .card__icon { background: var(--peach-100); color: var(--orange-700); }
.card__icon svg { width: 26px; height: 26px; }
.card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--photo .pic { border-radius: 0; }
.card--photo .card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card--photo .card__body .btn, .card--photo .card__body .text-link { margin-top: auto; align-self: flex-start; }
.checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 34px; }
.checklist li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--leaf-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2323663f'%3E%3Cpath d='M8.2 13.6 4.8 10.2l1.2-1.2 2.2 2.2 5.8-5.8 1.2 1.2z'/%3E%3C/svg%3E") center / 16px no-repeat; }

.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; font-weight: 800; font-size: 1.06rem; color: var(--plum-900); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 600 1.6rem var(--font-head); color: var(--pink-600); }
.faq details[open] summary::after { content: '-'; }
.faq details > div { padding-bottom: 18px; color: var(--ink-2); }

/* ---------- events ---------- */

.event-list { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .event-list--cols { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .event-list--cols > :only-child { grid-column: 1 / -1; }
  .event-list--cols > .event-card--cover:only-child .event-card__link { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
  .event-list--cols > .event-card--cover:only-child .event-card__cover { aspect-ratio: 16 / 10; height: 100%; }
  .event-list--cols > .event-card--cover:only-child .event-card__row { padding: 28px 32px; }
  .event-list--cols > .event-card--cover:only-child .event-card__title { font-size: 1.6rem; }
  .event-list--cols > .event-card--cover:only-child .event-card__desc { display: block; }
  .event-list--cols > .event-card--cover:only-child .event-card__cover .pic picture { position: absolute; inset: 0; }
}
.event-card__desc { display: none; margin: 12px 0 0; color: var(--ink-2); font-size: 0.98rem; }
.event-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform 0.18s, box-shadow 0.18s; overflow: hidden; }
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.event-card__link { display: block; color: inherit; text-decoration: none; }
.event-card__cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--lav-100); }
.event-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.event-card__cover .pic { height: 100%; border-radius: 0; }
.event-card__row { display: flex; gap: 16px; padding: 16px 18px; align-items: flex-start; }
.event-card__title { margin: 0 0 4px; font-size: 1.2rem; }
.event-card__meta { margin: 0; color: var(--ink-2); font-weight: 700; font-size: 0.93rem; }
.event-card.is-canceled .event-card__title { text-decoration: line-through; text-decoration-color: var(--coral-600); }
.date-block { flex: none; display: grid; place-items: center; width: 64px; padding: 8px 0 7px; border-radius: 14px; background: var(--pink-600); color: #fff; text-align: center; line-height: 1; }
.date-block__m { font-weight: 900; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.date-block__d { font: 600 1.8rem/1.05 var(--font-head); }
.date-block__w { font-weight: 800; font-size: 0.72rem; opacity: 0.85; }
.past-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.past-list li { padding: 12px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; }
.past-list li:last-child { border-bottom: 0; }
.past-list time { font-weight: 900; color: var(--pink-700); font-size: 0.95rem; }
.past-list__title { font-weight: 800; color: var(--ink); text-decoration: none; }
.past-list__title:hover { color: var(--plum-700); text-decoration: underline; }
.past-list .muted { font-size: 0.92rem; }
@media (min-width: 480px) {
  .past-list li { grid-template-columns: 7.2em minmax(0, 1fr); }
  .past-list time { grid-row: span 2; padding-top: 1px; }
  .past-list .muted { grid-column: 2; }
}
.event__head { display: grid; gap: 24px; }
@media (min-width: 720px) { .event__head:not(.event__head--solo) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; } }
@media (min-width: 900px) { .event__head:not(.event__head--solo) { gap: 48px; } }
.event__head--solo .event__intro { max-width: 760px; }
.event__past { margin: 0 0 18px; }
.event__cover { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--lav-100); }
.event__cover img { width: 100%; height: 100%; object-fit: cover; }
.event__cover .pic { height: 100%; border-radius: 0; }
.event__facts { margin: 0 0 20px; display: grid; gap: 12px; }
.event__facts div { background: #fff; border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow-sm); }
.event__facts dt { font-weight: 900; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.event__facts dd { margin: 2px 0 0; font-weight: 700; }
.event__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.event__desc { margin-top: 36px; }

/* ---------- donate ---------- */

.give-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .give-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .give-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 900px) { .give-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .give-grid > :last-child:nth-child(odd) { grid-column: auto; } }
.give { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 6px; }
.give h3 { margin: 0; }
.give p { color: var(--ink-2); margin: 0 0 12px; }
.give .btn { margin-top: auto; }
.give__handle { font-weight: 900; color: var(--plum-900); font-size: 1.05rem; }
.give .give__warn { padding: 10px 12px; border-radius: 12px; background: var(--sun-100, #fff4dc); border-left: 4px solid var(--sun-400); font-size: 0.92rem; line-height: 1.45; color: var(--ink); }
.trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust li { --c: var(--pink-600); background: #fff; border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.trust li::before { content: ''; display: block; width: 28px; height: 5px; border-radius: 99px; background: var(--c); margin-bottom: 10px; }
.trust li:nth-child(4n + 2) { --c: var(--orange-700); }
.trust li:nth-child(4n + 3) { --c: var(--green-700); }
.trust li:nth-child(4n + 4) { --c: var(--blue-700); }
.trust a { text-decoration: none; color: inherit; display: block; }
.trust strong { display: block; color: var(--plum-900); font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.trust span { font-size: 0.86rem; color: var(--ink-3); font-weight: 700; }

.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.before-after figure { margin: 0; }
.before-after figcaption { font-weight: 800; color: var(--ink-2); margin-top: 8px; font-size: 0.92rem; }

/* ---------- forms ---------- */

.form { display: grid; gap: 18px; max-width: 760px; }
.form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px 18px; }
@media (min-width: 640px) { .form-card { padding: 34px 36px; } }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.form legend { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; color: var(--plum-900); margin-bottom: 4px; padding: 0; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } .form-row--3 { grid-template-columns: 2fr 1fr 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field .label { font-weight: 800; font-size: 0.98rem; color: var(--ink); }
.field .hint { font-size: 0.88rem; color: var(--ink-3); margin: -2px 0 2px; }
.req { color: var(--coral-600); font-weight: 900; }
.field input[type='text'], .field input[type='email'], .field input[type='tel'], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 2px solid #d7cce0; background: #fff; color: var(--ink); font: inherit; font-size: 1rem;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pink-600); box-shadow: 0 0 0 4px var(--pink-100); }
.field [aria-invalid='true'] { border-color: var(--error) !important; }
.field .error { color: var(--error); font-weight: 800; font-size: 0.9rem; margin: 0; }
.field .error:empty { display: none; }
.options { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .options--2 { grid-template-columns: 1fr 1fr; } .options--3 { grid-template-columns: repeat(3, 1fr); } }
.option { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-weight: 700; }
.option:has(input:checked) { border-color: var(--pink-600); background: var(--pink-100); }
.option input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pink-600); flex: none; }
.policy-box { background: var(--lav-100); border-radius: var(--radius); padding: 16px 18px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: var(--radius); padding: 16px 18px; font-weight: 800; }
.form-status:empty { display: none; }
.form-status--ok { background: var(--leaf-100); color: var(--leaf-700); }
.form-status--err { background: #fdecea; color: var(--error); }
.js [data-show-if]:not([data-shown]) { display: none; }
.form-success { text-align: center; padding: 20px 0; }
.form-success h2 { margin-bottom: 0.3em; }

.newsletter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.newsletter input { flex: 1 1 200px; min-height: 48px; border-radius: 999px; border: 2px solid transparent; padding: 0 18px; font: inherit; background: #fff; color: var(--ink); }
.newsletter input:focus { outline: none; border-color: var(--sun-400); }

/* ---------- CTA band ---------- */

.cta-band { background: linear-gradient(135deg, var(--plum-900) 0%, #47215f 60%, #5e1f55 100%); color: #efe4f7; border-radius: var(--radius-lg); overflow: hidden; display: grid; position: relative; }
.cta-band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--rainbow); }
.cta-band__body { padding: 30px 22px 34px; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #e1d2ec; }
.cta-band .pic { border-radius: 0; aspect-ratio: 16 / 10; }
@media (min-width: 720px) {
  .cta-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .cta-band__body { padding: 40px 32px; align-self: center; }
  .cta-band .pic { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .cta-band .pic picture { position: absolute; inset: 0; }
}
@media (min-width: 900px) { .cta-band__body { padding: 56px 52px; } .cta-band .pic { min-height: 380px; } }

/* ---------- footer ---------- */

.site-footer { background: var(--plum-950); color: #d9cbe6; padding: 52px 0 28px; margin-top: 0; position: relative; overflow: hidden; isolation: isolate; }
.site-footer::after { content: ''; position: absolute; z-index: -1; right: -40px; bottom: -50px; width: 340px; height: 325px; background: var(--arf-heart-white) center / contain no-repeat; opacity: 0.05; rotate: -12deg; pointer-events: none; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rainbow); }
.site-footer a:not(.btn) { color: #fff; }
.site-footer h2 { color: #fff; font-size: 1.1rem; margin-bottom: 0.8em; }
.footer-grid { display: grid; gap: 34px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; } .footer-grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; } .footer-grid > :last-child { grid-column: auto; } }
.footer-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; text-decoration: none; }
.footer-brand img { width: 64px; height: 64px; }
.footer-brand span { font-family: var(--font-head); font-weight: 600; font-size: 1.35rem; color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 20px; }
.footer-links li { break-inside: avoid; margin-bottom: 4px; }
.footer-links a { display: inline-block; padding-block: 3px; text-decoration: none; font-weight: 700; color: #eadff3; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.socials { display: flex; gap: 10px; margin: 14px 0; padding: 0; list-style: none; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; }
.socials a:hover { background: rgba(255, 255, 255, 0.2); }
.socials svg { width: 22px; height: 22px; }
.footer-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.88rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: #bfaecf; }

/* ---------- misc components ---------- */

.notice { background: var(--sun-100); border-radius: var(--radius); padding: 16px 20px; font-weight: 700; }
.notice--soft { background: var(--lav-100); }
.stat-row { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; }
.stat { background: #fff; border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-sm); min-width: 140px; flex: 1; }
.stat strong { display: block; font: 600 2.1rem/1 var(--font-head); color: var(--pink-600); margin-bottom: 4px; }
.stat:nth-child(6n + 2) strong { color: var(--teal-700); }
.stat:nth-child(6n + 3) strong { color: var(--violet-600); }
.stat:nth-child(6n + 4) strong { color: var(--orange-700); }
.stat:nth-child(6n + 5) strong { color: var(--green-700); }
.stat:nth-child(6n + 6) strong { color: var(--blue-700); }
.stat span { font-weight: 700; color: var(--ink-2); font-size: 0.92rem; }
.gallery-grid { columns: 2 160px; column-gap: 12px; }
@media (min-width: 900px) { .gallery-grid { columns: 4 220px; column-gap: 16px; } }
.gallery-grid figure { margin: 0 0 12px; break-inside: avoid; border-radius: var(--radius); overflow: hidden; background: var(--lav-100); position: relative; }
.gallery-grid img { width: 100%; height: auto; }
.nudge { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(360px, calc(100vw - 32px)); background: #fff; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(31, 18, 48, 0.28); padding: 20px 20px 18px; border-top: 6px solid var(--lav-400); animation: nudge-in 0.35s ease both; }
.nudge h2 { font-size: 1.3rem; margin: 0 0 0.3em; }
.nudge p { color: var(--ink-2); font-size: 0.97rem; }
.nudge__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--ink-3); font-size: 1.5rem; line-height: 1; }
.nudge__close:hover { background: var(--lav-100); }
@keyframes nudge-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.toast { position: fixed; left: 50%; bottom: 20px; translate: -50% 0; background: var(--plum-900); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 800; z-index: 70; box-shadow: var(--shadow); }
.err-page { text-align: center; padding-block: 48px 64px; }
.err-page .pic { width: min(320px, 80vw); margin: 0 auto 24px; aspect-ratio: 1; border-radius: 50%; }

/* ---------- finishing touches ---------- */

/* Hand-drawn touches: a doodled heart and sparkles by the big photo at the top
   of a page, sparkles after the Dog of the Day's name, stickers on the four
   ways to help, and doodles on the dark foster band. Decoration only. */
.hero__media::before { content: ''; position: absolute; z-index: 2; right: -6px; top: -16px; width: 52px; height: 50px; background: var(--doodle-heart) center / contain no-repeat; rotate: 12deg; pointer-events: none; }
.hero__media::after { content: ''; position: absolute; z-index: 2; left: -10px; top: 18px; width: 54px; height: 44px; background: var(--sparkles) center / contain no-repeat; pointer-events: none; }
@media (min-width: 720px) { .hero__media::before { right: -10px; top: -24px; width: 68px; height: 65px; } .hero__media::after { left: -30px; top: 28px; width: 66px; height: 53px; } }
.dotd__name::after { content: ''; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.18em; vertical-align: 0.42em; background: var(--sparkle) center / contain no-repeat; rotate: 12deg; }
.path .pic { position: relative; }
.sticker { position: absolute; z-index: 2; right: 8px; top: 8px; padding: 6px 11px 5px; border-radius: 12px; background: #fff; color: var(--c, var(--pink-600)); font: 600 0.9rem/1.1 var(--font-head); box-shadow: 0 2px 0 hsl(275 40% 20% / 0.08), 0 6px 14px hsl(275 40% 20% / 0.16); rotate: 5deg; pointer-events: none; white-space: nowrap; }
.path:nth-child(even) .sticker { rotate: -4deg; }
@media (min-width: 900px) { .sticker { right: 12px; top: 12px; font-size: 1rem; padding: 7px 13px 6px; } }
.cta-band__body { position: relative; }
.cta-band__body::after { content: ''; position: absolute; right: 14px; top: 14px; width: 110px; height: 82px; background: var(--doodles-white) center / contain no-repeat; opacity: 0.35; pointer-events: none; }
@media (max-width: 479.98px) { .cta-band__body::after { width: 80px; height: 60px; right: 8px; top: 8px; } }

/* Photos get a hairline inner edge so light shots don't bleed into the cream. */
.pic::after, .dog-card__photo::after, .dotd__photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px hsl(275 40% 15% / 0.08); pointer-events: none; }

/* Header settles onto the page with a soft shadow once you scroll. The shadow
   sits on its own layer and only its opacity animates, so scrolling never
   has to repaint the header. */
@supports (animation-timeline: scroll()) {
  .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: 0 8px 22px hsl(275 40% 20% / 0.08); opacity: 0; pointer-events: none; animation: header-settle linear both; animation-timeline: scroll(root); animation-range: 0 90px; }
  @keyframes header-settle { to { opacity: 1; } }
}

/* Dog photos come from Shelterluv and can take a moment: a soft shimmer holds
   the space, then the photo fades in. (.is-loaded is set by the <head> script;
   without JavaScript nothing is hidden.) */
.gallery__item { position: relative; }
.js :is(.dog-card__img, .dotd__img, .gallery__img, .gallery__thumb):not(.is-loaded) { opacity: 0; }
.dotd__img, .gallery__img, .gallery__thumb { transition: opacity 0.5s var(--ease-out); }
.dotd__photo, .gallery__item { overflow: hidden; }
@keyframes shimmer { from { translate: -100% 0; } to { translate: 100% 0; } }
.js :is(.dog-card__photo, .dotd__photo, .gallery__item):has(> img:not(.is-loaded, .img-failed))::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.6) 50%, rgb(255 255 255 / 0) 70%); animation: shimmer 1.6s ease-in-out infinite; }

/* On a mouse, resting on a card shows the dog's second photo. */
.dog-card__img--peek { position: absolute; inset: 0; }
.js .dog-card__img--peek.is-loaded { opacity: 0; }
.dog-card:is(:hover, :focus-within) .dog-card__img--peek.is-loaded { opacity: 1; }

/* Dog of the Day seal, after the rainbow ring in ARF's logo. */
.rosette { position: absolute; left: 14px; top: 20px; z-index: 2; width: 96px; height: 96px; rotate: -9deg; filter: drop-shadow(0 6px 12px hsl(275 45% 15% / 0.28)); pointer-events: none; }
.rosette__ring { font: 900 10.6px var(--font-body); letter-spacing: 0.04em; fill: var(--plum-900); }
.rosette__mon { font: 900 11px var(--font-body); letter-spacing: 0.16em; fill: var(--sun-400); }
.rosette__day { font: 600 28px var(--font-head); fill: #fff; letter-spacing: -0.02em; }
@media (min-width: 900px) { .rosette { width: 120px; height: 120px; left: 24px; top: 28px; } }

/* Photo gallery: arrows and a count over the photo. */
.gallery__stage { position: relative; }
.gallery__btn { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / 0.92); color: var(--plum-900); box-shadow: var(--shadow); cursor: pointer; transition: opacity 0.2s ease, transform 0.2s var(--ease-out), background-color 0.2s ease; }
.gallery__btn svg { width: 20px; height: 20px; }
.gallery__btn:hover { background: #fff; transform: scale(1.06); }
.gallery__btn:disabled { opacity: 0; pointer-events: none; }
.gallery__btn--prev { left: 12px; }
.gallery__btn--next { right: 12px; }
.gallery__count { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgb(31 18 48 / 0.72); color: #fff; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gallery__count:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gallery__btn { opacity: 0; }
  .gallery__stage:is(:hover, :focus-within) .gallery__btn:not(:disabled) { opacity: 1; }
}

/* Cards: links sit on the bottom line, and a dog card ends with a small arrow. */
.card:has(> .text-link:last-child) { display: flex; flex-direction: column; }
.card > .text-link:last-child { margin-top: auto; align-self: flex-start; }
.card:has(> .text-link:last-child) > p:last-of-type { margin-bottom: 14px; }
.dog-card__fee { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dog-card__fee::after { content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pink-100) center / 16px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2185b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); transition: background-color 0.25s ease, translate 0.3s var(--ease-out); }
.dog-card:hover .dog-card__fee::after { background-color: var(--pink-200); translate: 3px 0; }

/* Phones: Apply stays in reach once the main button scrolls away. */
.apply-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgb(255 252 248 / 0.95); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -10px 28px hsl(275 40% 20% / 0.1); animation: bar-in 0.3s var(--ease-out); }
.apply-bar[hidden] { display: none; }
.apply-bar__who { margin: 0; display: grid; line-height: 1.2; min-width: 0; }
.apply-bar__who strong { font: 600 1.08rem/1.15 var(--font-head); color: var(--plum-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apply-bar__who span { font-size: 0.86rem; font-weight: 700; color: var(--ink-3); }
.apply-bar .btn { min-height: 46px; flex: none; }
body.has-apply-bar { padding-bottom: 76px; }
body.has-apply-bar .toast { bottom: 92px; }
@keyframes bar-in { from { translate: 0 100%; } }
@media (min-width: 720px) { .apply-bar { display: none !important; } }

/* Dogs of ARF: the photo wall as a pinboard of prints. */
.gallery-grid { column-gap: 18px; }
.gallery-grid figure { background: #fff; padding: 8px 8px 30px; margin: 0 0 20px; border-radius: 4px; overflow: visible; box-shadow: var(--shadow-sm); rotate: -1.1deg; transition: rotate 0.35s var(--ease-out), translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.gallery-grid figure:nth-child(3n + 2) { rotate: 0.9deg; }
.gallery-grid figure:nth-child(3n) { rotate: -0.35deg; }
.gallery-grid figure:hover { rotate: 0deg; translate: 0 -4px; box-shadow: var(--shadow); }
.gallery-grid .pic { border-radius: 2px; }

/* Sections ease up into place as they scroll in (browsers that support
   scroll-driven animation; everyone else just sees them). Only with a mouse or
   trackpad: on a phone, content sliding against your finger mid-swipe reads
   as the page catching, and it cost frames on a throttled phone test. */
@keyframes rise { from { opacity: 0; translate: 0 26px; } }
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  @supports (animation-timeline: view()) {
    .section :is(.section__head, .cards > *, .paths > *, .give-grid > *, .steps > li, .trust > li, .event-list > *, .dog-grid > .dog-card, .faq > details, .stat-row > li, .photo-strip > *, .gallery-grid > figure, .dotd, .cta-band, .past-list, .split > *, .before-after > *) {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 150px;
    }
  }
}

/* Page to page: a quick cross-fade, the header stays put, and a dog's photo
   carries over from their card to their page (and back). The opt-in itself
   (@view-transition) is inline in the page head, so it's known before this
   file finishes loading. */
.site-header { view-transition-name: site-header; }
/* The header doesn't animate at all: the new one is simply there. Left to the
   default, Chrome grows and cross-fades the old header's snapshot, which showed
   as a stretched double header on every click (10 of 12 test frames). */
::view-transition-group(site-header), ::view-transition-new(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
::view-transition-group(dog-photo) { animation-duration: 0.45s; animation-timing-function: var(--ease-out); }
::view-transition-old(dog-photo), ::view-transition-new(dog-photo) { height: 100%; object-fit: cover; overflow: clip; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nudge, .apply-bar, .no-print { display: none !important; }
  body, .section--tint, .section--sun { background-image: none; }
  body { background: #fff; font-size: 12pt; }
  .section { padding-block: 12pt; }
  a { color: inherit; text-decoration: none; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}