/* Shared campaign layout; brand tokens and buttons come from styles.css. */
.campaign-header, .campaign-layout, .campaign-footer { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }
.campaign-header { padding-inline: 0; }
.campaign-header > a:last-child { font-size: .8rem; }
.campaign-layout { display: grid; gap: 1.5rem; }
.campaign-artwork { overflow: hidden; background: var(--pink-soft); }
.campaign-artwork > img { width: 100%; height: 13rem; object-fit: cover; object-position: center top; }
.campaign-offer { padding-block: .5rem 1rem; }
.campaign-offer .kicker { letter-spacing: .12em; font-size: .65rem; }
.campaign-offer h1 { margin: .75rem 0 1rem; font-family: var(--display); font-size: clamp(3rem, 8vw, 5rem); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.campaign-offer h1 em, .campaign-checkout h2 em { color: var(--berry); }
.campaign-intro { font-size: 1rem; max-width: 37ch; }
.campaign-price { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.campaign-price strong { font-size: 2.75rem; line-height: 1.2; letter-spacing: -.05em; }
.campaign-price span { font-size: .8rem; line-height: 1.6; }
.campaign-fine { font-size: .75rem; color: var(--muted); }
.campaign-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding-block: 1.25rem; border-block: 1px solid var(--rule); font-size: .85rem; }
.campaign-facts dt { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--berry); }
.campaign-facts dd { margin: .2rem 0 0; }
.campaign-jump { width: 100%; }
.campaign-checkout { display: grid; gap: 1.5rem; padding-block: 2rem; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.campaign-checkout h2 { margin-block: .75rem; font: 500 2.5rem/1.1 var(--display); letter-spacing: -.04em; }
.campaign-checkout-intro > p:not(.kicker):not(.campaign-fine) { max-width: 35ch; font-size: .9rem; }
.campaign-checkout-intro > a { font-size: .8rem; }
.campaign-checkout-panel { background: var(--paper); padding: 1rem; }
.campaign-checkout-panel [data-checkout-message] { margin: 0 0 1rem; font-size: .8rem; }
.campaign-checkout-panel [data-checkout-fallback] p { font-size: .8rem; }
.campaign-checkout-panel .checkout { margin: 0; }
.campaign-footer { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-block: 2rem 7rem; font-size: .75rem; }
.campaign-buybar { display: flex; position: fixed; inset: auto 0 0; z-index: 50; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); }
.campaign-buybar strong, .campaign-buybar small { display: block; }
.campaign-buybar small { font-size: .65rem; }
.campaign-buybar .btn { font-size: .65rem; min-height: 3rem; padding: .75rem 1rem; }
@media (min-width: 48rem) {
  .campaign-layout { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .campaign-artwork { grid-column: 1; grid-row: 1; align-self: stretch; }
  .campaign-offer { grid-column: 2; grid-row: 1; }
  .campaign-artwork > img { height: 100%; object-position: center; }
  .campaign-checkout { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 3rem; padding-block: 3rem; }
  .campaign-checkout-panel { padding: 1.5rem; }
  .campaign-buybar { display: none; }
  .campaign-footer { padding-bottom: 2rem; }
}

/* A single blended portrait composition; campaign layout stays reusable. */
.heroes-day-page {
  --cream: #f7e9db;
  --ink: #291b24;
  --berry: #a0366b;
  --muted: #6a5661;
  --rule: rgba(110, 49, 78, .2);
}
.heroes-tribute {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem 1rem 1.25rem;
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 42%, #ffe3e9 5%, #f3b5cd 62%, #e995b8 100%);
  text-align: center;
  isolation: isolate;
}
.heroes-eyebrow { margin: 0; color: #214735; font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.heroes-tribute h2 { margin: .85rem 0 0; font: 500 clamp(2.4rem, 6vw, 4rem)/1.03 var(--display); letter-spacing: -.045em; }
.heroes-tribute h2 em { color: var(--berry); font-weight: 500; }
.heroes-portraits { position: relative; width: calc(100% + 2rem); margin: .5rem -1rem 0; aspect-ratio: 1.25; mix-blend-mode: multiply; }
.heroes-portrait { position: absolute; margin: 0; width: 32%; mix-blend-mode: multiply; }
.heroes-portrait img {
  width: 100%; height: auto; aspect-ratio: 700 / 711; object-fit: contain;
  /* White paper blends into the shared pink ground; soften only the outer edge. */
  mask-image: radial-gradient(ellipse 49% 49% at 50% 50%, #000 65%, transparent 100%);
}
/* Match the portrait scale, allowing for the extra paper around Nanny and Samuel. */
.heroes-portrait:nth-child(1) { top: 30%; left: 34%; z-index: 1; transform: scale(1.12); }
.heroes-portrait:nth-child(2) { top: 30%; left: 69%; transform: rotate(5deg) scale(1.05); }
.heroes-portrait:nth-child(3) { top: 0; left: 12%; transform: rotate(-3deg); }
.heroes-portrait:nth-child(4) { top: 0; left: 56%; transform: rotate(3deg); }
.heroes-portrait:nth-child(5) { top: 30%; left: -1%; transform: rotate(-5deg); }
.heroes-portrait:nth-child(6) { top: 60%; left: 12%; transform: rotate(-3deg); }
.heroes-portrait:nth-child(7) { top: 60%; left: 56%; transform: rotate(3deg); }
.heroes-portrait figcaption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.heroes-names { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .35rem; margin: .25rem auto .75rem; width: 100%; max-width: 48ch; font-size: .65rem; line-height: 1.8; text-wrap: balance; }
.heroes-names span { display: inline; white-space: nowrap; }
.heroes-names span { margin-inline: .2rem; }
.heroes-caption { margin: 0 0 .5rem; font: 500 1.1rem/1.4 var(--display); }
.heroes-credit { font-size: .6rem; color: #654052; line-height: 1.6; }
.heroes-day-page .campaign-offer .kicker { border-left: 3px solid #d8719e; padding-left: .65rem; }
.heroes-day-page .campaign-checkout { border-top: 2px solid #d8719e; }
.heroes-day-page .btn--ink { background: var(--berry); }
.heroes-day-page .btn--ink:hover { background: #7f2753; }
@media (min-width: 48rem) {
  .heroes-tribute { padding: 2rem 1.5rem 1.5rem; }
  .heroes-portraits { width: calc(100% + 3rem); margin-inline: -1.5rem; }
  .heroes-names { font-size: .7rem; }
}

/* Keep the saving and deadline beside the purchase action. */
.campaign-offer h1 { font-size: clamp(3rem, 13vw, 5.25rem); margin-bottom: 1rem; }
.campaign-offer h1 em { font-weight: 600; }
.campaign-intro { line-height: 1.6; margin-bottom: 1rem; }
.campaign-price { margin-top: 1rem; gap: .75rem; }
.campaign-price strong { font-size: clamp(2.25rem, 10vw, 2.75rem); white-space: nowrap; }
.campaign-saving { display: inline-block; margin: .6rem 0 1.25rem; padding: .25rem .6rem; background: #f4c6d8; color: #72234a; font-size: .85rem; font-weight: 600; }
.campaign-urgency { border-top: 1px solid var(--rule); padding-top: 1rem; margin-bottom: 1rem; }
.campaign-countdown { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.campaign-countdown[hidden], .campaign-countdown-values[hidden] { display: none; }
.campaign-countdown > p { font-size: .8rem; margin: 0; line-height: 1.4; }
.campaign-countdown-values { display: flex; gap: .4rem; }
.campaign-countdown-values > span { min-width: 3.5rem; text-align: center; background: var(--paper); border: 1px solid #d9adb8; padding: .35rem .5rem; }
.campaign-countdown-values strong { display: block; font-size: 1.8rem; line-height: 1.2; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--berry); }
.campaign-countdown-values small { display: block; font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }
.campaign-countdown[data-state="ended"] > p { max-width: none; font-size: 1.2rem; font-weight: 600; }
.campaign-deadline { font-size: .7rem; margin: .6rem 0 0; color: var(--muted); }
.campaign-facts { margin-bottom: 0; border-bottom: 0; gap: 1rem; }
.campaign-facts > div:last-child { grid-column: 1 / -1; }
.campaign-buybar .btn { letter-spacing: .06em; }
@media (min-width: 48rem) {
  .campaign-facts { grid-template-columns: 1fr 1fr; }
  .campaign-countdown-values > span { min-width: 4rem; }
}