/* Daily Dose Donate 1.2.1. All presentation is confined to this component. */
.dds-donate-placement {
  box-sizing: border-box;
  width: min(1200px, calc(100% - 48px));
  max-width: none;
  margin: 48px auto;
  clear: both;
}
@media (max-width: 580px) {
  .dds-donate-placement { width: calc(100% - 32px); margin-block: 32px; }
}
.dds-donate {
  --ddd-navy: #27486a;
  --ddd-ink: #253e4d;
  --ddd-paper: #f6f1e6;
  --ddd-heading: var(--dds-heading, Ubuntu, Helvetica, Arial, sans-serif);
  --ddd-serif: var(--dds-body-font, "Crete Round", Georgia, serif);
  container: dds-donate / inline-size;
  width: 100%;
  min-width: 0;
  isolation: isolate;
  color-scheme: light;
  text-align: left;
}
.dds-donate *, .dds-donate *::before, .dds-donate *::after { box-sizing: border-box; }
.dds-donate .dds-donate__panel {
  position: relative;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr) 176px;
  align-items: center;
  gap: 30px;
  min-height: 228px;
  padding: 25px 38px 25px 24px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 24px;
  margin: 0;
  background: var(--ddd-paper);
  color: var(--ddd-ink);
  font-family: var(--ddd-heading);
  font-size: 16px;
  line-height: 1.5;
}
.dds-donate .dds-donate__art {
  position: relative;
  width: 210px;
  max-width: none;
  height: 176px;
  justify-self: center;
  align-self: center;
  pointer-events: auto;
}
.dds-donate .dds-donate__art > svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.dds-donate .dds-donate__copy, .dds-donate .dds-donate__action { position: relative; z-index: 1; min-width: 0; }
.dds-donate .dds-donate__eyebrow {
  margin: 0 0 11px;
  color: #6f674c;
  font: 700 10px/1.4 var(--ddd-heading);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dds-donate .dds-donate__title {
  max-width: 25ch;
  margin: 0;
  padding: 0;
  color: inherit;
  font: 700 32px/1.13 var(--ddd-heading);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.dds-donate .dds-donate__description {
  max-width: 64ch;
  margin: 12px 0 0;
  color: #5b6567;
  font: 400 15px/1.6 var(--ddd-serif);
  letter-spacing: 0;
  text-wrap: pretty;
}
.dds-donate .dds-donate__action { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
/* WordPress Shortcode blocks can add an empty paragraph after the inline SVG link. */
.dds-donate .dds-donate__action > p:empty { display: none; }
.dds-donate .dds-donate__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 52px;
  min-width: 44px;
  width: 100%;
  padding: 13px 20px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--ddd-navy);
  color: #fffaf0;
  box-shadow: 0 3px 0 rgba(14, 38, 53, .1);
  font: 700 15px/1.4 var(--ddd-heading);
  letter-spacing: 0;
  text-decoration: none;
  white-space: normal;
  scroll-margin-bottom: calc(var(--dds-newsletter-dock-height, 0px) + 24px);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.dds-donate .dds-donate__button > span { min-width: 0; overflow-wrap: anywhere; }
.dds-donate .dds-donate__arrow { display: block; flex: 0 0 22px; transition: transform 180ms ease; }
.dds-donate .dds-donate__button:visited { color: #fffaf0; }
.dds-donate .dds-donate__button:hover, .dds-donate .dds-donate__button:focus-visible {
  background: #1d394f;
  color: #fffaf0;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(14, 38, 53, .16);
  text-decoration: none;
}
.dds-donate .dds-donate__button:hover .dds-donate__arrow, .dds-donate .dds-donate__button:focus-visible .dds-donate__arrow { transform: translateX(3px); }
.dds-donate .dds-donate__button:focus-visible { outline: 3px solid #986c25; outline-offset: 4px; }
.dds-donate .dds-donate__button:active { transform: translateY(0); }
.dds-donate .dds-donate__giving { margin: 0; color: #606969; text-align: center; font: 400 11px/1.5 var(--ddd-heading); letter-spacing: .005em; text-wrap: balance; }

/* A World in the Word */
.dds-donate--navy .dds-donate__panel {
  background: linear-gradient(112deg, #2c4e69 0%, #233f56 53%, #1e384e 100%);
  border-color: #36566d;
  color: #fff9eb;
  box-shadow: 0 12px 32px -20px rgba(17, 41, 59, .5), inset 0 1px 0 rgba(255,255,255,.06);
}
.dds-donate--navy .dds-donate__panel::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(231,214,177,.1); border-radius: 17px; pointer-events: none; }
.dds-donate--navy .dds-donate__eyebrow { color: #e0c894; }
.dds-donate--navy .dds-donate__description { color: #d0dae0; }
.dds-donate--navy .dds-donate__button, .dds-donate--navy .dds-donate__button:visited { background: #f7edda; color: #213e55; box-shadow: 0 4px 14px rgba(5,24,38,.15), inset 0 1px 0 #fff9eb; }
.dds-donate--navy .dds-donate__button:hover, .dds-donate--navy .dds-donate__button:focus-visible { background: #fff8e9; color: #213e55; box-shadow: 0 7px 24px rgba(5,24,38,.25); }
.dds-donate--navy .dds-donate__button:focus-visible { outline-color: #ebca86; }
.dds-donate--navy .dds-donate__giving { color: #c1cdd3; }

/* An Open Invitation: editorial copy first, with the illustration at the edge. */
.dds-donate--light .dds-donate__panel {
  grid-template-columns: minmax(0, 1fr) 176px 188px;
  padding: 25px 22px 25px 40px;
  border-color: #e2dac9;
  background: #f7f3e9;
  box-shadow: 0 4px 0 -1px #fffdf8, 0 5px 0 0 #e8e0d0;
}
.dds-donate--light .dds-donate__art { grid-area: 1 / 3; }
.dds-donate--light .dds-donate__copy { grid-area: 1 / 1; }
.dds-donate--light .dds-donate__action { grid-area: 1 / 2; }
.dds-donate--light .dds-donate__title { max-width: 27ch; font-family: var(--ddd-serif); font-size: 34px; font-weight: 400; line-height: 1.12; letter-spacing: -.025em; }
.dds-donate--light .dds-donate__eyebrow { display: flex; align-items: center; gap: 10px; color: #5d684f; }
.dds-donate--light .dds-donate__eyebrow::before { content: ""; flex: 0 0 21px; height: 1px; background: #8c9678; }
.dds-donate--light .dds-donate__description { color: #64675d; }

/* Five Languages. Shared Purpose. */
.dds-donate--colorful .dds-donate__panel { background: #f3f5f0; border-color: #dce1d5; color: #263f4a; }
.dds-donate--colorful .dds-donate__art { width: 218px; height: 186px; }
.dds-donate--colorful .dds-donate__eyebrow { color: #52644c; }
.dds-donate--colorful .dds-donate__panel::before { content: ""; position: absolute; height: 4px; bottom: 0; left: 30px; right: 30px; background: linear-gradient(to right, #4577b3 0% 20%, #7c3d37 20% 40%, #c3b46f 40% 60%, #596b49 60% 80%, #27486a 80%); opacity: .85; border-radius: 4px 4px 0 0; }
.dds-donate--colorful .dds-donate__title { max-width: 34ch; }
.dds-donate--colorful .dds-donate__phrase { display: inline-block; max-width: 100%; vertical-align: top; overflow-wrap: anywhere; }
.dds-donate--colorful .dds-donate__phrase--3 { color: #52644c; }
.dds-donate--colorful .dds-donate__description { color: #5a665e; }

/* The container, not the viewport, determines how a placed section adapts. */
@container dds-donate (max-width: 1000px) {
  .dds-donate .dds-donate__panel { grid-template-columns: 144px minmax(0,1fr) 160px; gap: 22px; padding: 24px; }
  .dds-donate .dds-donate__art { width: 178px; height: 164px; }
  .dds-donate .dds-donate__title { font-size: 29px; }
  .dds-donate .dds-donate__button { padding-inline: 14px; gap: 12px; }
  .dds-donate--light .dds-donate__panel { grid-template-columns: minmax(0,1fr) 160px 144px; padding-left: 30px; }
  .dds-donate--light .dds-donate__title { font-size: 31px; }
}
@container dds-donate (max-width: 820px) {
  .dds-donate .dds-donate__panel { grid-template-columns: 154px minmax(0,1fr); gap: 18px 24px; padding: 28px; }
  .dds-donate .dds-donate__art { grid-area: 1 / 1 / 3 / 2; width: 188px; height: 182px; }
  .dds-donate .dds-donate__copy { grid-area: 1 / 2; }
  .dds-donate .dds-donate__action { grid-area: 2 / 2; flex-direction: row; align-items: center; gap: 16px; }
  .dds-donate .dds-donate__button { width: auto; flex: 0 0 auto; min-height: 48px; padding: 11px 18px; }
  .dds-donate .dds-donate__giving { max-width: 160px; text-align: left; }
  .dds-donate .dds-donate__title { font-size: 30px; }
  .dds-donate--light .dds-donate__title { font-size: 32px; }
}
@container dds-donate (max-width: 580px) {
  .dds-donate .dds-donate__panel { grid-template-columns: minmax(0,1fr); gap: 0; padding: 26px 26px 24px; min-height: 0; border-radius: 20px; }
  .dds-donate .dds-donate__art { position: absolute; grid-area: auto; top: 9px; right: 17px; width: 98px; height: 84px; margin: 0; }
  .dds-donate .dds-donate__copy { grid-area: 1 / 1; }
  .dds-donate .dds-donate__eyebrow { max-width: calc(100% - 82px); min-height: 26px; margin-bottom: 33px; padding-top: 5px; font-size: 9px; letter-spacing: .14em; }
  .dds-donate .dds-donate__title { max-width: 24ch; font-size: 29px; line-height: 1.12; }
  .dds-donate--light .dds-donate__title { font-size: 31px; }
  .dds-donate--colorful .dds-donate__title { font-size: 28px; }
  .dds-donate .dds-donate__description { margin-top: 12px; font-size: 14px; line-height: 1.6; }
  .dds-donate .dds-donate__action { grid-area: 2 / 1; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 21px; }
  .dds-donate .dds-donate__button { width: 100%; min-height: 50px; }
  .dds-donate .dds-donate__giving { max-width: none; text-align: center; font-size: 10px; }
  .dds-donate--navy .dds-donate__panel::after { inset: 6px; border-radius: 14px; }
}
@container dds-donate (max-width: 330px) {
  .dds-donate .dds-donate__panel { padding: 22px 20px; }
  .dds-donate .dds-donate__title { font-size: 26px; }
  .dds-donate--light .dds-donate__title { font-size: 28px; }
}

/* Motion is an enhancement. Every SVG is complete without these classes. */
.dds-donate [data-dds-motion="paused"] *, .dds-donate[data-dds-motion="paused"] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: no-preference) {
  /* Text remains opaque throughout: movement draws attention without hiding the invitation. */
  .dds-donate--colorful.is-entering .dds-donate__eyebrow { animation: ddd-label-arrive 950ms cubic-bezier(.2,.75,.2,1) both; }
  .dds-donate--colorful.is-entering .dds-donate__phrase { animation: ddd-phrase-arrive 1300ms var(--ddd-copy-delay, .12s) cubic-bezier(.2,.75,.2,1) both; transform-origin: left center; }
  .dds-donate--colorful .dds-donate__phrase--2 { --ddd-copy-delay: .32s; }
  .dds-donate--colorful .dds-donate__phrase--3 { --ddd-copy-delay: .54s; }
  .dds-donate--colorful.is-entering .dds-donate__description { animation: ddd-description-arrive 1250ms 650ms cubic-bezier(.2,.75,.2,1) both; }
  .dds-donate--colorful.is-entering .dds-donate__panel::before { animation: ddd-color-line 1700ms 850ms cubic-bezier(.2,.75,.2,1) both; transform-origin: left; }
  .dds-donate.is-entering .dds-donate__globe { animation: ddd-globe 1500ms cubic-bezier(.22,.68,.2,1) both; transform-origin: 130px 154px; }
  .dds-donate.is-entering .dds-donate__grid > * { stroke-dasharray: 1; animation: ddd-draw 1600ms 250ms cubic-bezier(.33,.1,.3,1) both; }
  .dds-donate.is-entering .dds-donate__orbit { stroke-dasharray: 1; animation: ddd-draw 1800ms 600ms ease both; }
  .dds-donate.is-entering .dds-donate__open-book { animation: ddd-open 1400ms cubic-bezier(.2,.7,.25,1) both; transform-origin: 130px 198px; }
  .dds-donate.is-entering .dds-donate__beacon { animation: ddd-beacon 1100ms var(--ddd-delay, 1.1s) ease both; transform-box: fill-box; transform-origin: center; }
  .dds-donate__beacon--2 { --ddd-delay: 1.65s; }
  .dds-donate__beacon--3 { --ddd-delay: 2.2s; }
  .dds-donate.is-entering .dds-donate__ring { animation: ddd-ring 1200ms var(--ddd-delay, 1.1s) ease-out both; transform-box: fill-box; transform-origin: center; }
  .dds-donate.is-entering .dds-donate__spark { animation: ddd-spark 1100ms 2400ms cubic-bezier(.2,.8,.2,1) both; transform-box: fill-box; transform-origin: center; }
  .dds-donate.is-entering .dds-donate__embrace { stroke-dasharray: 1; animation: ddd-draw 2400ms 250ms ease both; }
  .dds-donate.is-entering .dds-donate__page--left { animation: ddd-left-page 1800ms cubic-bezier(.2,.7,.25,1) both; transform-origin: 130px 184px; }
  .dds-donate.is-entering .dds-donate__page--right { animation: ddd-right-page 1800ms 180ms cubic-bezier(.2,.7,.25,1) both; transform-origin: 130px 184px; }
  .dds-donate.is-entering .dds-donate__sprig { animation: ddd-sprig 2100ms 300ms cubic-bezier(.2,.7,.25,1) both; transform-origin: 72px 160px; }
  .dds-donate.is-entering .dds-donate__ribbon { animation: ddd-ribbon 1300ms 1100ms ease both; transform-origin: 164px 99px; }
  .dds-donate.is-entering .dds-donate__volume { animation: ddd-volume 1400ms var(--ddd-delay, 0s) cubic-bezier(.2,.85,.23,1.16) both; }
  .dds-donate__volume--2 { --ddd-delay: .14s; }
  .dds-donate__volume--3 { --ddd-delay: .28s; }
  .dds-donate__volume--4 { --ddd-delay: .42s; }
  .dds-donate__volume--5 { --ddd-delay: .56s; }
  .dds-donate.is-entering .dds-donate__shared-book { animation: ddd-open 1600ms 650ms ease both; transform-origin: 130px 205px; }
  .dds-donate.is-entering .dds-donate__connection { animation: ddd-connection 2000ms 300ms ease both; }
  .dds-donate.is-art-active:not(.is-entering) .dds-donate__volume { animation: ddd-volume-greet 1050ms var(--ddd-delay,0s) ease both; }
  .dds-donate.is-art-active:not(.is-entering) .dds-donate__open-book,
  .dds-donate.is-art-active:not(.is-entering) .dds-donate__paper-stack { animation: ddd-book-greet 1100ms ease both; transform-origin: 130px 184px; }
}
@keyframes ddd-label-arrive { from { transform: translateX(-14px); } to { transform: none; } }
@keyframes ddd-phrase-arrive { 0% { transform: translateY(18px) rotate(.6deg); } 74% { transform: translateY(-2px) rotate(0); } 100% { transform: none; } }
@keyframes ddd-description-arrive { from { transform: translateY(12px); } to { transform: none; } }
@keyframes ddd-color-line { from { transform: scaleX(.15); } to { transform: none; } }
@keyframes ddd-globe { from { transform: translateY(12px) scale(.92); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes ddd-draw { from { stroke-dashoffset: 1; opacity: .1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ddd-open { from { transform: scaleX(.88) scaleY(.75) translateY(7px); } to { transform: none; } }
@keyframes ddd-beacon { 0% { opacity: 0; transform: scale(.45); } 50% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ddd-ring { 0% { transform: scale(.35); opacity: 1; } 75% { transform: scale(1.45); opacity: .15; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ddd-spark { 0% { opacity: 0; transform: scale(.6); } 65% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes ddd-left-page { from { transform: skewY(12deg) scaleX(.84); } to { transform: none; } }
@keyframes ddd-right-page { from { transform: skewY(-13deg) scaleX(.86); } to { transform: none; } }
@keyframes ddd-sprig { from { transform: rotate(12deg); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes ddd-ribbon { from { transform: scaleY(.6); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes ddd-volume { from { transform: translateY(24px); opacity: .1; } to { transform: none; opacity: 1; } }
@keyframes ddd-connection { from { opacity: 0; stroke-dashoffset: 18; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes ddd-volume-greet { 0%,100% { transform: none; } 38% { transform: translateY(-7px); } }
@keyframes ddd-book-greet { 0%,100% { transform: none; } 40% { transform: translateY(-3px) rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) {
  .dds-donate *, .dds-donate *::before, .dds-donate *::after { animation: none !important; transition: none !important; }
  .dds-donate .dds-donate__button:hover, .dds-donate .dds-donate__button:focus-visible, .dds-donate .dds-donate__arrow { transform: none !important; }
}
