/* Hand of Giving editorial system. Loaded after legacy page styles. */
:root {
  --hog-canvas: #fff8ec;
  --hog-paper: #fbf7ef;
  --hog-surface: #ffffff;
  --hog-ink: #08261e;
  --hog-green: #0b3d2e;
  --hog-green-mid: #2f5d50;
  --hog-muted: #56615c;
  --hog-border: #d8cdb8;
  --hog-orange: #ff5f00;
  --hog-orange-dark: #d94800;
  --hog-danger: #c1121f;
  --hog-success: #3a7d44;
  --hog-radius: 8px;
  --hog-shadow: 0 18px 45px rgba(8, 38, 30, 0.1);
  --hog-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  background: var(--hog-canvas);
  color-scheme: light;
  scroll-behavior: smooth;
}

html,
body,
button,
input,
select,
textarea {
  letter-spacing: 0 !important;
}

body {
  background: var(--hog-canvas) !important;
  color: var(--hog-ink) !important;
  overflow-x: clip;
}

.min-h-screen {
  min-height: 100dvh !important;
}

.h-screen {
  height: 100dvh !important;
}

img,
video,
canvas,
iframe {
  max-width: 100%;
}

main article img,
main figure img {
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
}

.grid > *,
.flex > * {
  min-width: 0;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  content: "";
  opacity: 0.035;
  background-image: url("/static/images/hog-impact-sketch-v2.38e2190212e2.jpg");
  background-size: 720px auto;
  mix-blend-mode: multiply;
}

::selection {
  color: #fff;
  background: var(--hog-orange);
}

:focus-visible {
  outline: 3px solid var(--hog-orange) !important;
  outline-offset: 3px !important;
}

/* Shape lock: cards 8px, controls 8px, compact statuses 6px. */
.rounded-3xl,
.rounded-2xl,
.rounded-xl,
.sm\:rounded-3xl,
.sm\:rounded-2xl {
  border-radius: var(--hog-radius) !important;
}

a,
button,
input,
select,
textarea {
  border-radius: var(--hog-radius) !important;
}

.rounded-full {
  border-radius: 999px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--hog-ink);
  letter-spacing: 0 !important;
}

p {
  text-wrap: pretty;
}

.text-gray-900,
.text-gray-800,
.text-slate-900,
.text-slate-800 {
  color: var(--hog-ink) !important;
}

.text-gray-700,
.text-gray-600,
.text-gray-500,
.text-slate-700,
.text-slate-600,
.text-slate-500 {
  color: var(--hog-muted) !important;
}

.text-purple-400,
.text-purple-500,
.text-purple-600,
.text-purple-700,
.text-pink-400,
.text-pink-500,
.text-pink-600,
.text-pink-700,
.text-rose-400,
.text-rose-500,
.text-rose-600,
.text-rose-700,
.text-teal-400,
.text-teal-500,
.text-teal-600,
.text-teal-700,
.text-cyan-400,
.text-cyan-500,
.text-cyan-600,
.text-cyan-700,
.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-indigo-400,
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-amber-500,
.text-amber-600,
.text-amber-700 {
  color: var(--hog-green) !important;
}

.bg-purple-50,
.bg-purple-100,
.bg-pink-50,
.bg-pink-100,
.bg-rose-50,
.bg-rose-100,
.bg-teal-50,
.bg-teal-100,
.bg-cyan-50,
.bg-cyan-100,
.bg-blue-50,
.bg-blue-100,
.bg-indigo-50,
.bg-indigo-100,
.bg-amber-50,
.bg-amber-100,
.bg-gray-50,
.bg-gray-100 {
  background-color: rgba(216, 205, 184, 0.32) !important;
}

.bg-white {
  background-color: var(--hog-paper) !important;
}

.border-gray-100,
.border-gray-200,
.border-green-100,
.border-green-200,
.border-teal-100,
.border-teal-200,
.border-rose-100,
.border-rose-200,
.border-purple-100,
.border-purple-200,
.ring-green-100,
.ring-green-200,
.ring-teal-100,
.ring-teal-200,
.ring-purple-100,
.ring-purple-200 {
  border-color: var(--hog-border) !important;
  --tw-ring-color: var(--hog-border) !important;
}

/* Navigation */
#main-header {
  height: 64px;
}

#main-header > .relative > .flex,
#main-header + div {
  height: 64px !important;
}

@media (min-width: 1024px) {
  #main-header,
  #main-header > .relative > .flex,
  #main-header + div {
    height: 72px !important;
  }
}

#main-header > .relative > div > a,
#mobile-menu-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

@media (min-width: 640px) {
  #main-header > .relative > div > a {
    width: auto;
  }
}

#main-header > .absolute {
  border-color: rgba(216, 205, 184, 0.72) !important;
  background: rgba(255, 248, 236, 0.94) !important;
  box-shadow: 0 8px 28px rgba(8, 38, 30, 0.06);
  backdrop-filter: blur(16px);
}

#main-header img {
  border-radius: 6px !important;
  box-shadow: none !important;
}

#main-header a h1 {
  color: var(--hog-green) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

#main-header .nav-link {
  position: relative;
  border-radius: 0 !important;
  color: var(--hog-muted) !important;
  background: transparent !important;
}

#main-header .nav-link::after {
  position: absolute;
  right: 1rem;
  bottom: 0.3rem;
  left: 1rem;
  height: 2px;
  content: "";
  background: var(--hog-orange);
  transform: scaleX(0);
  transform-origin: center;
  width: auto;
  transition: transform 220ms var(--hog-ease);
}

#main-header .nav-link:hover,
#main-header .nav-link:focus-visible {
  color: var(--hog-green) !important;
}

#main-header .nav-link:hover::after,
#main-header .nav-link:focus-visible::after {
  transform: scaleX(1);
}

#main-header .dropdown-menu > div,
#mobile-menu {
  border: 1px solid var(--hog-border) !important;
  border-radius: var(--hog-radius) !important;
  background: var(--hog-paper) !important;
  box-shadow: var(--hog-shadow) !important;
}

#main-header .dropdown-menu a:hover,
#mobile-menu a:hover {
  background: rgba(216, 205, 184, 0.35) !important;
}

/* Shared controls */
a.bg-green-500,
a.bg-green-600,
a.bg-green-700,
a.bg-emerald-500,
a.bg-emerald-600,
a.bg-teal-500,
a.bg-teal-600,
a.bg-rose-500,
a.bg-blue-500,
a.bg-blue-600,
a.bg-cta-500,
button.bg-green-500,
button.bg-green-600,
button.bg-green-700,
button.bg-emerald-500,
button.bg-emerald-600,
button.bg-teal-500,
button.bg-teal-600,
button.bg-rose-500,
button.bg-blue-500,
button.bg-blue-600,
button.bg-cta-500,
.auth-btn,
.sponsor-btn,
.payment-tab.active {
  color: var(--hog-ink) !important;
  border-color: var(--hog-orange) !important;
  background: var(--hog-orange) !important;
  background-image: none !important;
  box-shadow: 0 12px 28px rgba(255, 95, 0, 0.2) !important;
}

a.bg-green-500:hover,
a.bg-green-600:hover,
a.bg-green-700:hover,
a.bg-cta-500:hover,
button.bg-green-500:hover,
button.bg-green-600:hover,
button.bg-green-700:hover,
button.bg-cta-500:hover,
.auth-btn:hover,
.sponsor-btn:hover,
.payment-tab.active:hover {
  color: var(--hog-ink) !important;
  background: var(--hog-orange-dark) !important;
  transform: translateY(-1px);
}

button:active,
a[role="button"]:active,
a[class*="inline-flex"][class*="bg-"]:active,
a.ed-cta:active,
.site-editorial-hero__action:active {
  transform: scale(0.96) !important;
}

a[class*="transition"],
button[class*="transition"] {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity !important;
}

button,
a[role="button"],
.site-editorial-hero__action,
.program-collage-hero__actions a,
.ed-cta,
.auth-btn,
.sponsor-btn {
  white-space: nowrap;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  min-height: 44px;
  color: var(--hog-ink) !important;
  border: 1px solid var(--hog-border) !important;
  background: var(--hog-surface) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #69746f !important;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--hog-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 95, 0, 0.18) !important;
}

/* Full-viewport editorial heroes */
.site-editorial-hero {
  position: relative;
  display: grid;
  min-height: calc(100dvh - 72px);
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  background: var(--hog-green);
}

.site-editorial-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.site-editorial-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: rgba(8, 38, 30, 0.9);
}

html[dir="rtl"] .site-editorial-hero::after {
  background: rgba(8, 38, 30, 0.9);
}

.site-editorial-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  width: min(1400px, calc(100% - 2rem));
  margin: auto;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.site-editorial-hero__copy {
  max-width: 650px;
  color: var(--hog-canvas);
}

.site-editorial-hero__stamp {
  display: inline-block;
  margin-bottom: 1rem;
  color: #ffbf99;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.site-editorial-hero__title {
  max-width: 10ch;
  margin: 0;
  color: var(--hog-canvas) !important;
  font-size: clamp(2.6rem, 5.4vw, 5.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}

.site-editorial-hero__lede {
  max-width: 54ch;
  margin-top: 1.4rem;
  color: rgba(255, 248, 236, 0.86) !important;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.72;
}

.site-editorial-hero__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 1.8rem;
  padding: 0.8rem 1.4rem;
  color: white !important;
  font-weight: 800;
  white-space: nowrap;
  background: var(--hog-orange) !important;
  /* box-shadow: 0 14px 34px rgba(255, 95, 0, 0.24); */
  transition: transform 220ms var(--hog-ease), background-color 220ms ease;
}

.site-editorial-hero__action:hover {
  background: var(--hog-orange-dark) !important;
  transform: translateY(-2px);
}

.site-editorial-hero__action:active {
  transform: scale(0.96);
}

#hero .site-editorial-hero__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

#hero .site-editorial-hero__media {
  object-position: center;
}

#hero .site-editorial-hero__copy {
  grid-column: 1;
  justify-self: start;
  max-width: 34rem;
  text-align: start;
}

#hero .site-editorial-hero__lede {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

#hero::after {
  background: rgba(8, 38, 30, 0.04);
}

html[dir="rtl"] #hero .site-editorial-hero__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

html[dir="rtl"] #hero .site-editorial-hero__copy {
  grid-column: 1;
  justify-self: start;
  text-align: start;
}

html[dir="rtl"] #hero .site-editorial-hero__title {
  max-width: 11ch;
  font-size: clamp(2.6rem, 4.8vw, 5rem) !important;
  line-height: 1.12 !important;
}

html[dir="rtl"] #hero::after {
  background: rgba(8, 38, 30, 0.04);
}

/* Existing program hero implementation */
.program-collage-hero {
  min-height: 100dvh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.program-collage-hero__image {
  object-position: center !important;
}

/* .program-collage-hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: rgba(8, 38, 30, 0.88) !important;
}

html[dir="rtl"] .program-collage-hero::after {
  background: rgba(8, 38, 30, 0.88) !important;
} */

.program-collage-hero__content {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
  width: min(1400px, calc(100% - 2rem)) !important;
}

.program-collage-hero__copy {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.program-collage-hero__badge {
  padding: 0 !important;
  color: #ffbf99 !important;
  border: 0 !important;
  background: transparent !important;
  text-transform: uppercase;
}

.program-collage-hero__title {
  max-width: 18ch;
  color: var(--hog-canvas) !important;
  font-size: clamp(2.5rem, 4.5vw, 4.6rem) !important;
  line-height: 1.03 !important;
  text-transform: none !important;
}

.program-collage-hero__description {
  max-width: 54ch;
  color: rgba(255, 248, 236, 0.86) !important;
}

.program-collage-hero__side {
  display: none !important;
}

.program-collage-hero__secondary {
  display: none !important;
}

.impact-map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin-top: 1rem;
}

.impact-map-control {
  min-height: 40px;
  padding: .5rem .75rem;
  color: var(--hog-green);
  border: 1px solid var(--hog-border);
  border-radius: 6px !important;
  background: rgba(255, 248, 236, .88);
  font-size: .72rem;
  font-weight: 800;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms var(--hog-ease);
}

.impact-map-control:hover,
.impact-map-control.is-active {
  color: var(--hog-ink);
  border-color: var(--hog-orange);
  background: var(--hog-orange);
}

.impact-map-control:active {
  transform: translateY(1px);
}

.impact-map-live-status {
  margin-top: .55rem;
  color: var(--hog-muted);
  font-size: .76rem;
  text-align: center;
}

/* Open section rhythm */
/* main > div > section:not(.site-editorial-hero):not(.program-collage-hero) {
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
} */

.mission-card,
.impact-stat-card,
.campaign-card,
.family-card,
.auth-card,
.message-card,
article[class*="shadow"],
aside[class*="shadow"] {
  border: 1px solid var(--hog-border) !important;
  border-radius: var(--hog-radius) !important;
  background-color: var(--hog-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mission-card:hover,
.impact-stat-card:hover,
.campaign-card:hover,
.family-card:hover {
  border-color: rgba(47, 93, 80, 0.5) !important;
  box-shadow: var(--hog-shadow) !important;
  transform: translateY(-3px) !important;
}

@media (min-width: 768px) {
  #mission .mission-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  #mission .mission-card:nth-child(2) {
    transform: none !important;
  }
}

.ed-title,
.impact-title {
  color: var(--hog-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ed-eyebrow {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ed-eyebrow::before {
  background: var(--hog-orange) !important;
}

.home-program-copy {
  color: var(--hog-canvas) !important;
  text-shadow: none !important;
}

.prog-stack-card h2,
.prog-stack-card h3 {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.home-program-copy p {
  color: rgba(255, 248, 236, 0.88) !important;
  text-shadow: none !important;
}

.home-program-badge,
.home-program-chip {
  color: var(--hog-ink) !important;
  border-color: rgba(216, 205, 184, 0.78) !important;
  background: rgba(251, 247, 239, 0.92) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}

.priority-cases-section .inline-flex.items-center.justify-center.mb-6 {
  display: none !important;
}

/* Entity card system shared by families and orphans. */
.hog-entity-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hog-border);
  border-radius: var(--hog-radius);
  background: var(--hog-paper);
  transition: transform 260ms var(--hog-ease), box-shadow 260ms var(--hog-ease), border-color 260ms ease;
}

.hog-entity-card:hover {
  border-color: rgba(47, 93, 80, 0.55);
  box-shadow: var(--hog-shadow);
  transform: translateY(-4px);
}

.hog-entity-card__link {
  display: grid;
  height: 100%;
  color: inherit;
  text-decoration: none;
  grid-template-rows: 13rem 1fr;
}

.hog-entity-card__media {
  position: relative;
  overflow: hidden;
  background: var(--hog-green) url("/static/images/hog-aun-collage-v2.1df8aa5c95cd.jpg") center / cover;
}

.hog-entity-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--hog-ease);
}

.hog-entity-card:hover .hog-entity-card__media img {
  transform: scale(1.025);
}

.hog-entity-card__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--hog-canvas);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
}

.hog-entity-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.25rem;
}

.hog-entity-card__status-row,
.hog-entity-card__meta,
.hog-entity-card__progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.hog-entity-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.55rem;
  color: var(--hog-green);
  font-size: 0.74rem;
  font-weight: 800;
  border: 1px solid rgba(47, 93, 80, 0.25);
  border-radius: 6px;
  background: rgba(47, 93, 80, 0.08);
}

.hog-entity-card__status--complete {
  color: var(--hog-success);
}

.hog-entity-card__amount {
  color: var(--hog-orange-dark);
  font-size: 0.82rem;
  font-weight: 800;
}

.hog-entity-card__title {
  margin: 0;
  color: var(--hog-ink);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.22;
}

.hog-entity-card__meta,
.hog-entity-card__story,
.hog-entity-card__progress-row {
  color: var(--hog-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.hog-entity-card__story {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.hog-entity-card__progress {
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(47, 93, 80, 0.14);
}

.hog-entity-card__progress span {
  display: block;
  width: var(--entity-progress, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--hog-orange);
}

.hog-entity-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--hog-green);
  font-weight: 800;
  border-top: 1px solid var(--hog-border);
}

/* Functional surfaces */
.auth-card,
main form[class*="space-y"],
main article[class*="p-"],
main aside[class*="p-"] {
  color: var(--hog-ink);
}

body:has(.auth-card) main {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  background: var(--hog-green) url("/static/images/hog-home-collage-v2.3837c2a392fb.jpg") center / cover fixed;
}

body:has(.auth-card) main::before {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(8, 38, 30, 0.58);
}

body:has(.auth-card) main > div {
  position: relative;
}

.auth-card {
  max-width: 680px;
  margin-inline: auto;
  border-color: rgba(216, 205, 184, 0.78) !important;
  box-shadow: var(--hog-shadow) !important;
}

.checkout-template {
  position: relative;
  isolation: isolate;
}

.checkout-template::before {
  position: absolute;
  inset: -2rem;
  z-index: -1;
  content: "";
  opacity: 0.08;
  border-radius: var(--hog-radius);
  background: url("/static/images/hog-impact-sketch-v2.38e2190212e2.jpg") center / cover;
}

.checkout-template > article,
.checkout-template > aside {
  border-color: var(--hog-border) !important;
  background: rgba(251, 247, 239, 0.96) !important;
  box-shadow: var(--hog-shadow) !important;
}

.message-card,
main:has(.message-card) > div > div,
main:has(#compose-form) > div > div {
  border-color: var(--hog-border) !important;
  background-color: var(--hog-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.message-card:hover {
  border-color: rgba(47, 93, 80, 0.55) !important;
  box-shadow: var(--hog-shadow) !important;
}

.auth-card::before,
.auth-card > .absolute,
.impact-stat-card::before,
.mission-card::before {
  display: none !important;
}

.auth-icon,
.impact-stat-card [class*="h-14"][class*="w-14"],
.mission-card [class*="h-16"][class*="w-16"],
.family-profile-template [class*="h-10"][class*="w-10"] {
  color: var(--hog-canvas) !important;
  background: var(--hog-green) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Footer */
footer[role="contentinfo"] {
  color: var(--hog-canvas) !important;
  border-top: 1px solid rgba(255, 248, 236, 0.18);
  background: var(--hog-green) !important;
  background-image: none !important;
}

footer[role="contentinfo"] > .absolute {
  opacity: 0.2;
  background: url("/static/images/hog-impact-sketch-v2.38e2190212e2.jpg") center / cover !important;
  mix-blend-mode: soft-light;
}

footer[role="contentinfo"] h3,
footer[role="contentinfo"] h4,
footer[role="contentinfo"] p,
footer[role="contentinfo"] a,
footer[role="contentinfo"] span {
  color: inherit !important;
}

footer[role="contentinfo"] li > a > span:first-child {
  display: none;
}

footer[role="contentinfo"] input {
  color: var(--hog-ink) !important;
  background: var(--hog-canvas) !important;
}

footer[role="contentinfo"] a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

button[onclick^="togglePassword"],
button[onclick^="shareCampaign"] {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

a[class*="inline-flex"][class*="bg-"],
.program-collage-hero__actions a {
  min-height: 44px;
}

.auth-card a {
  position: relative;
}

.auth-card a::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 16px);
  min-width: 44px;
  height: 44px;
  content: "";
  transform: translate(-50%, -50%);
}

.prog-dot {
  position: relative;
  display: flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
  border-radius: var(--hog-radius) !important;
  background: transparent !important;
  opacity: 0.8;
  transition-property: opacity, transform;
  transition-duration: 180ms;
}

.prog-dot::before {
  width: 24px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  content: "";
  transform: scaleX(0.3333);
  transform-origin: right center;
  transition-property: background-color, transform;
  transition-duration: 180ms;
  transition-timing-function: var(--hog-ease);
}

.prog-dot.is-active {
  opacity: 1;
}

.prog-dot.is-active::before {
  background: var(--hog-orange);
  transform: scaleX(1);
}

.prog-dot.is-active:active::before {
  transform: scaleX(0.96) scaleY(0.96);
}

.prog-dot:not(.is-active):active::before {
  transform: scaleX(0.32) scaleY(0.96);
}

#donate button[hx-get],
.campaign-dot {
  min-width: 44px !important;
  min-height: 44px !important;
}

.campaign-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hog-radius) !important;
  background: transparent !important;
}

.campaign-dot::before {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(47, 93, 80, 0.42);
  content: "";
  transform: scaleX(1);
  transition-property: background-color, transform;
  transition-duration: 180ms;
  transform-origin: center;
}

.campaign-dot.active::before {
  background: var(--hog-orange);
  transform: scaleX(2.4);
}

@media (max-width: 767px) {
  body::before {
    opacity: 0.02;
  }

  .site-editorial-hero,
  .program-collage-hero {
    min-height: calc(100dvh - 64px) !important;
  }

  .site-editorial-hero__inner,
  .program-collage-hero__content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: end;
    width: min(100% - 2rem, 680px) !important;
    padding-block: 3rem !important;
  }

  .site-editorial-hero__title,
  .program-collage-hero__title {
    max-width: 12ch;
    font-size: clamp(2.35rem, 11vw, 4rem) !important;
  }

  .site-editorial-hero__lede,
  .program-collage-hero__description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  /* .site-editorial-hero::after,
  .program-collage-hero::after,
  html[dir="rtl"] .site-editorial-hero::after,
  html[dir="rtl"] .program-collage-hero::after {
    background: rgba(8, 38, 30, 0.74) !important;
  } */

  #hero .site-editorial-hero__inner,
  html[dir="rtl"] #hero .site-editorial-hero__inner {
    grid-template-columns: 1fr;
  }

  #hero .site-editorial-hero__copy,
  html[dir="rtl"] #hero .site-editorial-hero__copy {
    grid-column: 1;
    justify-self: start;
    width: min(78%, 30rem);
    max-width: none;
    text-align: start;
  }

  #hero .site-editorial-hero__media {
    object-position: 35% center;
  }

  html[dir="rtl"] #hero .site-editorial-hero__media {
    object-position: 65% center;
  }

  #hero::after {
    background: linear-gradient(90deg, rgba(8, 38, 30, 0.92) 0%, rgba(8, 38, 30, 0.76) 48%, rgba(8, 38, 30, 0.16) 82%);
  }

  html[dir="rtl"] #hero::after {
    background: linear-gradient(270deg, rgba(8, 38, 30, 0.92) 0%, rgba(8, 38, 30, 0.76) 48%, rgba(8, 38, 30, 0.16) 82%);
  }

  .hog-entity-card__link {
    grid-template-rows: 12rem 1fr;
  }

  .orphan-list-page .age-chip,
  .orphan-list-page #orphans-grid-container nav a {
    min-width: 44px;
    min-height: 44px;
  }
}

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