/* /gift: the gift page's own object is the printable gift card that comes with every gift
   (App GiftPurchase.vue, .gift-card-print): who it's for, the plan and term, who it's from,
   the message, the redeem link and the code. White stock with the paper shadow, a degree off
   square like the site's cards; the code is the produced thing, so it carries the highlighter. */

.giftcard {
  background: var(--ground);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.25rem);
  text-align: center;
  transform: rotate(-1deg);
  max-width: 30rem;
  margin-inline: auto;
}
.giftcard p { margin: 0; }
.giftcard__logo { justify-content: center; margin-bottom: 1.25rem; }
.giftcard__logo .logo__mark { height: 24px; }
.giftcard__logo .logo__word { font-size: 1.6rem; }
.giftcard__for { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.giftcard__plan { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin-top: 0.5rem !important; color: var(--ink); }
.giftcard__from { color: var(--ink-2); margin-top: 0.25rem !important; }
.giftcard__msg { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.4; color: var(--ink-2); margin: 1rem auto 0 !important; max-width: 24ch; }
.giftcard__redeem { border-top: 1px dashed var(--rule); margin-top: 1.5rem; padding-top: 1.25rem; font-size: 0.875rem; color: var(--ink-3); }
.giftcard__url { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-2); overflow-wrap: anywhere; margin: 0.25rem 0 0.75rem !important; }
.giftcard__code { font-family: var(--font-mono); font-size: clamp(1rem, 0.85rem + 0.7vw, 1.25rem); letter-spacing: 0.04em; color: var(--ink); margin-top: 0.375rem !important; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) { .giftcard { transform: none; } }

/* The Black Friday line: in the HTML from the start, shown by gift.js only Nov 27 through Dec 2 (Eastern),
   the GIFT26 window in Admin. Without JavaScript it stays hidden, so it can never outlive the sale. */
.gift-sale { background: var(--yellow-100); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin: 0 0 1.5rem; max-width: 36rem; font-size: 0.9375rem; }
.gift-code { font-family: var(--font-mono); letter-spacing: 0.04em; }