/* ================================================================
   OUR SISTER'S PLACE — Donate page skin (assets/css/pages/donate.css)
   Loaded AFTER assets/css/osp.css. Component skins only — all page
   layout columns are Bootstrap grid classes in Donate.html.
   Ported from the prototype's inline <style>; layout grids
   (grid-template-columns) were dropped in favor of Bootstrap rows.
================================================================ */

/* Supplementary tokens the prototype used that osp.css doesn't define.
   (JetBrains Mono isn't loaded by the shared head chunk, so the mono
   accents fall back to the system monospace stack.) */
:root {
  --osp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --osp-r-pill: 999px;
  --osp-sh-sm: 0 1px 3px rgba(46, 42, 53, .08);
  --osp-sh-lg: 0 12px 32px rgba(46, 42, 53, .14), 0 4px 12px rgba(46, 42, 53, .08);
}

body { background: var(--osp-cream); }

/* ---- Breadcrumb (skins Bootstrap's .breadcrumb component) ---- */
.dn-breadcrumb { padding-top: 16px; }
.dn-breadcrumb .breadcrumb { margin-bottom: 0; font-size: 13px; }
.dn-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--osp-line); }
.dn-breadcrumb a { color: var(--osp-plum-600); text-decoration: none; }
.dn-breadcrumb a:hover { text-decoration: underline; }
.dn-breadcrumb .breadcrumb-item.active { color: var(--osp-plum-700); }

/* ---- Donate hero ---- */
.dn-hero { padding: 40px 0 32px; }
.dn-hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--osp-plum-900);
  font-weight: 500;
  text-wrap: balance;
}
.dn-hero h1 em { font-style: italic; color: var(--osp-terra-700); }
.dn-hero .lede {
  margin-top: 20px;
  font-size: 19px;
  color: var(--osp-ink-soft);
  line-height: 1.55;
  text-wrap: pretty;
}
.dn-hero-photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--osp-r-lg);
  box-shadow: var(--osp-sh-lg);
  position: relative;
}
.dn-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dn-hero-photo .photo-cred {
  position: absolute; bottom: 10px; left: 14px;
  color: rgba(255, 255, 255, .85);
  font-family: var(--osp-font-mono);
  font-size: 10px; letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ---- Big number ribbon ---- */
.dn-ribbon {
  background: var(--osp-plum-900);
  color: #fff;
  margin-top: 24px;
  padding: 36px 0;
}
.dn-ribbon-stat .num {
  font-family: var(--osp-font-serif);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  font-weight: 500;
  color: #fff;
}
.dn-ribbon-stat .num em { color: var(--osp-terra-300); font-style: normal; }
.dn-ribbon-stat .lbl {
  margin-top: 8px;
  font-family: var(--osp-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* ---- Give form ---- */
.give-section { padding: 80px 0; }
.give-section .copy h2 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.08;
  color: var(--osp-plum-900);
  font-weight: 500;
}
.give-section .copy p {
  margin-top: 18px;
  font-size: 16.5px;
  color: var(--osp-ink-soft);
  line-height: 1.6;
}
.give-section .copy a { color: var(--osp-plum-700); font-weight: 600; }

.give-privacy {
  margin-top: 32px;
  padding: 20px;
  background: var(--osp-cream-2);
  border-radius: var(--osp-r-md);
  border-left: 3px solid var(--osp-plum-700);
}
.give-privacy-label {
  font-family: var(--osp-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--osp-plum-700);
  font-weight: 700;
  text-transform: uppercase;
}
.give-privacy p { margin-top: 8px; font-size: 14.5px; color: var(--osp-ink-soft); line-height: 1.5; }

.give-card {
  background: var(--osp-paper);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-lg);
  padding: 36px;
  box-shadow: var(--osp-sh-md);
}
@media (max-width: 575.98px) { .give-card { padding: 24px 20px; } }

/* Frequency toggle (Monthly / One-time) */
.freq-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr; /* component skin: 2-button pill switch */
  background: var(--osp-cream-2);
  padding: 4px;
  border-radius: var(--osp-r-pill);
  border: 1px solid var(--osp-line);
  margin-bottom: 28px;
}
.freq-toggle button {
  padding: 12px 16px;
  border: 0;
  background: transparent;
  border-radius: var(--osp-r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--osp-ink-soft);
  letter-spacing: 0.02em;
  transition: all .2s;
}
.freq-toggle button.active {
  background: var(--osp-plum-700);
  color: #fff;
  box-shadow: var(--osp-sh-sm);
}
.freq-toggle button .save {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--osp-terra-100);
  color: var(--osp-terra-700);
  border-radius: var(--osp-r-pill);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--osp-font-mono);
}
.freq-toggle button.active .save {
  background: rgba(255, 255, 255, .18);
  color: var(--osp-terra-300);
}

/* Amount cards (buttons inside a Bootstrap row-cols grid) */
.amt-card {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1.5px solid var(--osp-line);
  border-radius: var(--osp-r-md);
  padding: 16px 14px;
  text-align: left;
  transition: all .15s;
  cursor: pointer;
  position: relative;
}
.amt-card:hover { border-color: var(--osp-plum-300); transform: translateY(-1px); }
.amt-card.selected {
  border-color: var(--osp-plum-700);
  background: var(--osp-plum-50);
  box-shadow: 0 0 0 3px rgba(91, 58, 107, .12);
}
.amt-card .amt {
  font-family: var(--osp-font-serif);
  font-size: 26px;
  color: var(--osp-plum-900);
  font-weight: 500;
  line-height: 1;
}
.amt-card .amt .per {
  font-size: 14px;
  color: var(--osp-ink-mute);
  font-family: var(--osp-font-sans);
  font-weight: 400;
}
.amt-card .impact {
  margin-top: 8px;
  font-size: 12px;
  color: var(--osp-ink-mute);
  line-height: 1.4;
}
.amt-card .amt-badge {
  position: absolute;
  top: -8px; right: 10px;
  background: var(--osp-terra-600);
  color: #fff;
  font-size: 10px;
  font-family: var(--osp-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--osp-r-pill);
  font-weight: 700;
}

/* Custom amount input */
.amt-custom {
  margin-top: 12px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--osp-line);
  border-radius: var(--osp-r-md);
  padding: 0 16px;
}
.amt-custom .currency {
  font-family: var(--osp-font-serif);
  font-size: 22px;
  color: var(--osp-ink-mute);
  margin-right: 6px;
}
.amt-custom input {
  flex: 1;
  border: none;
  padding: 14px 0;
  font-family: var(--osp-font-serif);
  font-size: 22px;
  color: var(--osp-plum-900);
  outline: none;
  background: transparent;
  width: 100%;
}
.amt-custom .frequency-tag { color: var(--osp-ink-mute); font-size: 13px; font-family: var(--osp-font-sans); }

/* Live impact line */
.impact-line {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--osp-terra-50);
  border-left: 3px solid var(--osp-terra-600);
  border-radius: 0 var(--osp-r-md) var(--osp-r-md) 0;
  font-size: 14.5px;
  color: var(--osp-plum-900);
  line-height: 1.5;
}
.impact-line strong {
  font-family: var(--osp-font-serif);
  font-weight: 500;
  color: var(--osp-terra-700);
}

/* Give CTA */
.give-cta {
  margin-top: 24px;
  width: 100%;
  background: var(--osp-plum-700);
  color: #fff;
  border: 0;
  padding: 18px;
  border-radius: var(--osp-r-md);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all .2s;
}
.give-cta:hover {
  background: var(--osp-plum-800);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--osp-sh-md);
}

.other-ways-link {
  text-align: center;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--osp-ink-mute);
}
.other-ways-link a { color: var(--osp-plum-600); font-weight: 600; }

/* ---- Where it goes ---- */
.breakdown-section { padding: 80px 0; }
.bar-row .bar-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.bar-row .bar-name {
  font-family: var(--osp-font-serif);
  font-size: 18px;
  color: var(--osp-plum-900);
  font-weight: 500;
}
.bar-row .bar-pct {
  font-family: var(--osp-font-mono);
  font-size: 14px;
  color: var(--osp-terra-700);
  font-weight: 700;
}
.bar-row .bar-track {
  height: 12px;
  background: var(--osp-cream-2);
  border-radius: var(--osp-r-pill);
  overflow: hidden;
}
.bar-row .bar-fill {
  height: 100%;
  background: var(--osp-plum-600);
  border-radius: var(--osp-r-pill);
  transition: width 1.2s cubic-bezier(.2, .8, .2, 1);
}
.bar-row.terra .bar-fill { background: var(--osp-terra-600); }
.bar-row .bar-desc {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--osp-ink-mute);
  line-height: 1.45;
}

.efficiency-card {
  background: linear-gradient(155deg, var(--osp-terra-50), var(--osp-cream));
  border: 1px solid var(--osp-terra-100);
  border-radius: var(--osp-r-xl);
  padding: 36px;
}
.efficiency-card .big {
  font-family: var(--osp-font-serif);
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  color: var(--osp-terra-700);
  font-weight: 500;
}
.efficiency-card h3 {
  margin-top: 8px;
  font-size: 24px;
  color: var(--osp-plum-900);
  font-weight: 500;
}
.efficiency-card p {
  margin-top: 12px;
  font-size: 15px;
  color: var(--osp-ink-soft);
  line-height: 1.55;
}
.efficiency-card .eff-badge {
  background: #fff;
  border: 1px solid var(--osp-terra-100);
  color: var(--osp-plum-700);
  padding: 6px 12px;
  border-radius: var(--osp-r-pill);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--osp-font-mono);
  letter-spacing: 0.06em;
}
.efficiency-card .eff-link {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--osp-plum-700);
  font-size: 14px;
  font-weight: 600;
}

/* ---- Story strip ---- */
.story-strip {
  background: var(--osp-plum-900);
  color: #fff;
  padding: 80px 0;
}
.story-strip .story-photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--osp-r-lg);
}
.story-strip .story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-strip .quote {
  font-family: var(--osp-font-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.35;
  color: #fff;
  font-style: italic;
  text-wrap: pretty;
}
.story-strip .attr {
  margin-top: 24px;
  font-family: var(--osp-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--osp-terra-300);
  text-transform: uppercase;
  font-weight: 700;
}
.story-strip .attr-sub {
  margin-top: 4px;
  font-family: var(--osp-font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

/* ---- Other ways to give ---- */
.ways-section {
  background: var(--osp-paper);
  border-top: 1px solid var(--osp-line);
  border-bottom: 1px solid var(--osp-line);
  padding: 80px 0;
}
.way-card {
  background: var(--osp-cream);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-lg);
  padding: 28px;
  transition: all .2s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.way-card:hover {
  border-color: var(--osp-plum-300);
  transform: translateY(-2px);
  box-shadow: var(--osp-sh-md);
  text-decoration: none;
  color: inherit;
}
.way-card .ico {
  width: 44px; height: 44px;
  background: var(--osp-plum-50);
  color: var(--osp-plum-700);
  border-radius: var(--osp-r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.way-card h4 {
  font-size: 21px;
  font-weight: 500;
  color: var(--osp-plum-900);
  line-height: 1.2;
}
.way-card p {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--osp-ink-soft);
  line-height: 1.55;
  flex: 1;
}
.way-card .arrow {
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--osp-plum-700);
}

/* ---- FAQ (native <details> accordion — no JS needed) ---- */
.faq-section { padding: 80px 0; }
.faq-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq-item {
  border-bottom: 1px solid var(--osp-line);
  padding: 20px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-family: var(--osp-font-serif);
  font-size: 19px;
  color: var(--osp-plum-900);
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--osp-font-sans);
  font-size: 22px;
  color: var(--osp-terra-700);
  font-weight: 400;
  transition: transform .2s;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  margin-top: 14px;
  font-size: 15.5px;
  color: var(--osp-ink-soft);
  line-height: 1.6;
}

/* ---- Final CTA panel ---- */
.donate-cta-final {
  background: var(--osp-plum-700);
  color: #fff;
  border-radius: var(--osp-r-xl);
  padding: 56px;
  text-align: center;
}
.donate-cta-final h2 {
  font-size: clamp(28px, 4vw, 40px);
  color: #fff;
  font-weight: 500;
  line-height: 1.1;
}
.donate-cta-final p {
  margin: 16px auto 0;
  max-width: 50ch;
  font-size: 16.5px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.55;
}
.donate-cta-final .actions {
  margin-top: 28px;
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.donate-cta-final .actions a {
  background: #fff;
  color: var(--osp-plum-900);
  padding: 14px 26px;
  border-radius: var(--osp-r-pill);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
}
.donate-cta-final .actions a:hover { background: var(--osp-cream); transform: translateY(-1px); }
.donate-cta-final .actions a.alt {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
}
.donate-cta-final .actions a.alt:hover { background: rgba(255, 255, 255, .1); }

@media (max-width: 767.98px) {
  .give-section, .breakdown-section, .ways-section, .faq-section, .story-strip { padding: 56px 0; }
  .donate-cta-final { padding: 36px 24px; }
}