/* Gifts: the letter a friend opens (/gift/), the page a buyer fills in (/give/) and the card they print (/give/card/).
   On the kit (kit.css, then hub.css): a kraft envelope (kraft.webp, cut from the kit's kraft tag), the kit's stamp, ring
   stamp and tape, a typed letter, and the pet pass as a ticket. Paper pictures by full /kit/ URLs. */

.gift-page main { overflow-x: clip; }

/* ---------- the envelope ---------- */
.env-scene { min-height: calc(100svh - 66px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 16px 56px; text-align: center; }
.env-wrap { position: relative; width: min(600px, calc(100vw - 40px), calc((100svh - 320px) * 1.45)); min-width: min(300px, calc(100vw - 40px)); }
.env-wrap > .cutout { position: absolute; inset: 9% -5% -7% 6%; transform: rotate(3deg); }
.env { position: relative; display: block; width: 100%; aspect-ratio: 1.45; perspective: 1400px; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: inherit; transform: rotate(-2deg); transition: transform .25s; }
.env:hover { transform: rotate(-1deg) translateY(-3px); }
.env:focus-visible { outline: 3px solid var(--kp-ink); outline-offset: 8px; }
.env .back, .env .pocket > i, .env .flap > i { background: url(/gift/kraft.webp?v=8b3063df03) 0 0 / 260px repeat, #b8915f; }
.env .back { position: absolute; inset: 0; border-radius: 3px; box-shadow: 0 2px 0 rgba(39, 48, 79, .1), 0 22px 30px -18px rgba(40, 25, 10, .55); }
.env .back::after { content: ''; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(180deg, rgba(40, 20, 0, .18), rgba(40, 20, 0, 0) 45%); }
/* the letter waiting inside */
.env .inside { position: absolute; left: 6%; right: 6%; top: 6%; height: 84%; background: var(--kp-paper); box-shadow: 0 1px 3px rgba(40, 30, 20, .25);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1); display: grid; place-items: start center; padding-top: 7%; }
.env .inside span { font: 400 clamp(15px, 3.4vw, 20px)/1 var(--kp-hand); color: var(--kp-pen); opacity: .85; }
/* the pocket: side flaps and the bottom flap, each a clipped piece with its own shadow */
.env .pocket { position: absolute; inset: 0; pointer-events: none; }
.env .pocket > i { position: absolute; inset: 0; }
.env .pocket .l { clip-path: polygon(0 0, 52% 54%, 0 100%); filter: brightness(.96); }
.env .pocket .r { clip-path: polygon(100% 0, 48% 54%, 100% 100%); filter: brightness(.94); }
.env .pocket .b { clip-path: polygon(0 100%, 50% 44%, 100% 100%); filter: brightness(1.04); }
.env .pocket { filter: drop-shadow(0 -1px 1px rgba(40, 20, 0, .28)); }
/* the top flap, sealed with tape; it turns open like a real one */
.env .flap { position: absolute; inset: 0 0 auto; height: 60%; transform-origin: 50% 0; transition: transform .7s cubic-bezier(.4, .1, .3, 1); transform-style: preserve-3d;
  filter: drop-shadow(0 2px 2px rgba(40, 20, 0, .35)); z-index: 3; }
.env .flap > i { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 3px 3px 0 0; }
.env .flap > span { position: absolute; transition: opacity .25s; }
.env .flap > .seal { transition: opacity .25s, transform .4s; }
.env .seal { position: absolute; z-index: 4; left: 50%; top: 78%; width: 21%; aspect-ratio: 360 / 335; transform: translate(-50%, -50%) rotate(8deg);
  background: url(/kit/tape.webp?v=1e7edc5f0e) center / contain no-repeat; transition: opacity .3s, transform .4s; }
/* the stamp, the postmark and the cancellation lines */
.env .stamp { position: absolute; z-index: 5; right: 5%; top: 11.5%; width: 17%; aspect-ratio: 356 / 348; transform: rotate(4deg);
  background: url(/kit/stamp.webp?v=4d9bbff15d) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(40, 30, 20, .3)); }
/* their pets, not ours: a dog and a cat in silhouette with a question mark, since the friend's pets are not known yet */
.env .stamp .who, .gcard .stamp .who { position: absolute; left: 19%; top: 19%; width: 62%; height: 54%; }
.env .stamp .who::before, .env .stamp .who::after, .gcard .stamp .who::before, .gcard .stamp .who::after { content: ''; position: absolute; bottom: 0; height: 100%; }
.env .stamp .who::before, .gcard .stamp .who::before { right: 0; width: 66%; background: #5a6588;
  -webkit-mask: url(/assets/examples/maple-sit.webp?v=6cb271f7fe) right bottom / contain no-repeat; mask: url(/assets/examples/maple-sit.webp?v=6cb271f7fe) right bottom / contain no-repeat; }
.env .stamp .who::after, .gcard .stamp .who::after { left: 0; width: 56%; height: 86%; background: var(--kp-ink);
  -webkit-mask: url(/assets/examples/pepper-sit.webp?v=f0c658e28f) left bottom / contain no-repeat; mask: url(/assets/examples/pepper-sit.webp?v=f0c658e28f) left bottom / contain no-repeat; }
.env .stamp em, .gcard .stamp em { position: absolute; z-index: 1; left: 0; right: 0; top: 17%; text-align: center; font: 700 clamp(13px, 3vw, 24px)/1 var(--kp-serif); font-style: normal; color: #d8432c; text-shadow: 0 0 2px #fff; }
.env .stamp b { position: absolute; left: 0; right: 0; bottom: 15%; font: 400 clamp(6px, 1.3vw, 9px)/1 var(--kp-typed); color: var(--kp-ink); text-align: center; }
.env .postmark { position: absolute; z-index: 6; right: 15%; top: 20%; width: 19%; aspect-ratio: 1; transform: rotate(-14deg); opacity: .85;
  background: url(/kit/ring.webp?v=18cd2a3922) center / contain no-repeat; display: grid; place-items: center; text-align: center; }
.env .postmark span { font: 400 clamp(6.5px, 1.5vw, 10px)/1.25 var(--kp-typed); color: var(--kp-red-ink); }
.env .waves { position: absolute; z-index: 6; right: 32%; top: 25%; width: 20%; opacity: .7; }
.env .waves svg { display: block; width: 100%; }
.env .from { position: absolute; z-index: 5; left: 6%; top: 13%; transform: rotate(-4deg); font: 400 clamp(15px, 3.6vw, 22px)/1.1 var(--kp-hand); color: var(--kp-pen); text-align: left; }
.env .from small { display: block; font: 400 clamp(9px, 1.8vw, 12px)/1.2 var(--kp-typed); color: #4a3a22; }
.env .to { position: absolute; z-index: 5; left: 8%; right: 8%; bottom: 10%; transform: rotate(-2deg); font: 400 clamp(32px, 8.4vw, 58px)/1 var(--kp-hand); color: var(--kp-pen); overflow-wrap: anywhere; }
.env .to.long { font-size: clamp(22px, 5.4vw, 38px); }
.env .to svg { display: block; width: 62%; height: 12px; margin: 4px auto 0; color: var(--kp-pen); }
/* opening: tape off, flap up, letter out */
.env.opening .flap > span { opacity: 0; }
.env.opening .seal { transform: translate(-30%, -90%) rotate(30deg); }
.env.opening .flap { transform: rotateX(180deg); }
.env .inside { z-index: 1; } .env .pocket { z-index: 2; }
.env.flap-back .flap { z-index: 0; }
.env.rising .inside { transform: translateY(-58%); }
.env.opening, .env.opening:hover { transform: rotate(-2deg); cursor: default; }
.env-scene .lead { max-width: 30em; margin: 0; color: var(--kp-soft); }
.env-scene .lead b { color: var(--kp-ink); font-weight: 700; }
.env-scene .hand { margin: 0; font-size: 26px; transition: opacity .3s; }
.env-scene.opened .hand { opacity: 0; }
/* the envelope settles lower as it opens, so the letter rising out of it stays clear of the top bar */
.env-wrap { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.env-scene.opened .env-wrap { transform: translateY(26%); }
.env-scene .lead { margin-top: 24px; }
.env-scene.leaving { opacity: 0; transform: translateY(24px); transition: opacity .45s, transform .45s; }

/* ---------- the letter and the pass ---------- */
.letter-scene { max-width: 1080px; margin: 0 auto; padding: 44px 16px 40px; display: grid; gap: 34px; justify-items: center; }
.letter-scene.arriving > * { animation: gift-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.letter-scene.arriving > :nth-child(2) { animation-delay: .25s; } .letter-scene.arriving > :nth-child(3) { animation-delay: .45s; }
@keyframes gift-in { from { opacity: 0; transform: translateY(40px); } }
.letter { position: relative; width: min(560px, 100%); background: var(--kp-paper); padding: 46px 28px 34px; box-shadow: 0 2px 0 rgba(39, 48, 79, .08), 0 18px 30px -18px rgba(40, 30, 20, .45);
  transform: rotate(-1.2deg); }
.letter .kp-tape { width: 70px; height: 34px; aspect-ratio: auto; top: -15px; }
.letter .kp-tape.l { left: -16px; } .letter .kp-tape.r { right: -16px; }
.letter .date { position: absolute; right: 58px; top: 16px; margin: 0; font: 400 13px var(--kp-typed); color: var(--kp-faint); }
.letter .dear { margin: 6px 0 14px; font: 400 32px/1.1 var(--kp-hand); color: var(--kp-pen); overflow-wrap: anywhere; }
.letter .note { margin: 0; font: 400 18px/1.7 var(--kp-typed); color: var(--kp-ink); white-space: pre-line; overflow-wrap: anywhere; }
.letter .sign { margin: 22px 0 0; text-align: right; font: 400 32px/1.1 var(--kp-hand); color: var(--kp-pen); overflow-wrap: anywhere; }
.letter .sign small { display: block; font: 400 14px var(--kp-typed); color: var(--kp-soft); margin-bottom: 2px; }

.pass-wrap { position: relative; width: min(540px, 100%); transform: rotate(1.6deg); }
.pass-wrap > .cutout { position: absolute; inset: 10% -4% -8% 5%; transform: rotate(-3deg); }
.pass { position: relative; display: grid; grid-template-columns: 64px 1fr; background: var(--kp-paper); color: var(--kp-ink);
  box-shadow: 0 2px 0 rgba(39, 48, 79, .1), 0 16px 26px -16px rgba(40, 30, 20, .5);
  -webkit-mask: radial-gradient(circle 9px at 64px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 64px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 9px at 64px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 64px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.pass .stub { background: var(--kp-ink); color: #fbf7ee; display: grid; place-items: center; border-right: 2px dashed var(--kp-paper); padding: 14px 0; }
.pass .stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 15px/1 var(--kp-typed); letter-spacing: .14em; white-space: nowrap; }
.pass .main { padding: 22px 22px 20px 22px; border: 3px double var(--kp-ink); border-left: 0; min-width: 0; }
.pass .kicker { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font: 400 13px var(--kp-typed); color: var(--kp-soft); }
.pass h2 { font: 400 clamp(25px, 6vw, 33px)/1.08 var(--kp-serif); margin: 0 0 14px; }
.pass ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 16px; }
.pass li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.35; }
.pass li .kp-ink { margin-top: .22em; }
.pass .for { margin: 14px 0 0; font: 400 22px/1.15 var(--kp-hand); color: var(--kp-pen); overflow-wrap: anywhere; }
.pass-wrap .kp-tape { width: 18%; max-width: 92px; top: -7%; }
.pass-wrap .kp-tape.r { right: -5%; } .pass-wrap .kp-tape.l { left: -5%; }
.pass .kicker { padding-right: 14px; }
/* the postmark that lands on the pass when it is unwrapped */
.pass-wrap .done { position: absolute; z-index: 3; right: -5%; bottom: -15%; width: 30%; max-width: 150px; aspect-ratio: 1; background: url(/kit/ring.webp?v=18cd2a3922) center / contain no-repeat;
  display: grid; place-items: center; text-align: center; transform: rotate(-14deg); color: var(--kp-red-ink); font: 400 clamp(11px, 2.6vw, 15px)/1.2 var(--kp-typed); pointer-events: none; }
.pass-wrap .done b { display: block; font-size: 1.3em; letter-spacing: .06em; }
.pass-wrap .done.stamping { animation: gift-stamp .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes gift-stamp { from { opacity: 0; transform: rotate(-14deg) scale(1.9); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }

.unwrap { display: grid; justify-items: center; gap: 10px; text-align: center; max-width: 34em; }
.unwrap .kp-btn { min-width: 220px; min-height: 56px; font-size: 18px; }
.unwrap p { margin: 0; }
.unwrap .kp-error { margin-top: 4px; }
.yours h2 { font: 400 clamp(34px, 6vw, 48px)/1.05 var(--kp-serif); margin: 0 0 6px; }
.yours .row { justify-content: center; margin-top: 8px; }
.preview { width: min(560px, 100%); margin: 0; }

/* a paper note for a link that no longer works */
.lost { min-height: calc(100svh - 160px); display: grid; place-items: center; padding: 56px 16px; }
.lost .kp-strip { max-width: 460px; text-align: center; }
.lost h1 { font: 400 clamp(28px, 6vw, 38px)/1.1 var(--kp-serif); margin: 0 0 10px; }

@media (min-width: 980px) {
  .letter-scene { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 30px 0; padding-top: 64px; }
  .letter-scene .preview { grid-column: 1 / -1; }
  .letter-scene { gap: 30px 44px; }
  .letter { justify-self: end; z-index: 1; }
  .pass-wrap { justify-self: start; margin-top: 110px; z-index: 2; }
  .unwrap { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .letter { padding: 42px 20px 28px; } .letter .note { font-size: 17px; }
  .pass { grid-template-columns: 48px 1fr; -webkit-mask-position: top, bottom; }
  .pass { -webkit-mask: radial-gradient(circle 8px at 48px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 48px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle 8px at 48px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 48px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
  .pass .stub span { font-size: 13px; } .pass .main { padding: 18px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .env, .env .flap, .env .inside, .env .seal, .env-scene.leaving, .env-wrap { transition: none; }
  .env:hover { transform: rotate(-2deg); }
  .letter-scene.arriving > *, .pass-wrap .done.stamping { animation: none; }
}

/* ---------- /give/: the buyer's page ---------- */
.give { display: grid; gap: 40px; padding: 40px 0 0; }
.give-head h1 { font-size: clamp(38px, 6vw, 60px); margin: 0 0 10px; }
.give-head .lead { color: var(--kp-soft); max-width: 34em; margin: 0; font-size: 18px; }
.give-form { display: grid; gap: 18px; padding: 26px 22px; }
.give-form .two { display: grid; gap: 18px; }
.give-form .count { justify-self: end; font: 400 13px var(--kp-typed); color: var(--kp-faint); margin-top: -2px; }
.give-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.give-form legend { font: 700 15px/1.3 var(--kp-sans); margin-bottom: 8px; padding: 0; }
.give-form .way { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; align-items: start; padding: 14px 14px; background: var(--kp-paper); box-shadow: inset 0 0 0 2px var(--kp-rule); cursor: pointer; margin: 0; font-weight: 400; }
.give-form .way:has(input:checked) { box-shadow: inset 0 0 0 2px var(--kp-ink); background: #fff; }
.give-form .way input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--kp-ink); }
.give-form .way b { font-weight: 700; } .give-form .way span { grid-column: 2; color: var(--kp-soft); font-size: 15px; }
.give-form .when { display: grid; gap: 14px; padding: 4px 0 0; }
.give-form .pay { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 4px; }
.give-form .pay .kp-btn { min-width: 200px; }
.give-side { display: grid; justify-items: center; gap: 26px; align-content: start; }
.give-side .env-wrap { width: min(420px, 92%); min-width: 0; }
.give-side .env { cursor: default; } .give-side .env:hover { transform: rotate(-2deg); }
.give-side .pass-wrap { width: min(400px, 96%); }
.give-side .pass h2 { font-size: 24px; } .give-side .pass ul { font-size: 15px; }
.give-small { color: var(--kp-soft); font-size: 15px; margin: 0; }
.ready-card { display: grid; gap: 14px; padding: 26px 22px; }
.ready-card h2 { margin: 0; }
.ready-card .linkrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.ready-card .linkrow input { flex: 1 1 240px; min-width: 0; font: 400 14px var(--kp-typed); min-height: 46px; }
@media (min-width: 900px) {
  .give { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: 40px 56px; }
  .give-head { grid-column: 1 / -1; }
  .give-side { position: sticky; top: 24px; padding-top: 30px; }
  .give-form .two { grid-template-columns: 1fr 1fr; }
}

/* ---------- account: gifts you've sent, the code box ---------- */
.redeem { display: grid; gap: 10px; }
.redeem form { display: flex; gap: 10px; flex-wrap: wrap; }
.redeem input { flex: 1 1 220px; min-width: 0; font: 400 17px var(--kp-typed); letter-spacing: .06em; min-height: 48px; }
.passes-note { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: 22px; }
.passes-note .hand { font-size: 26px; margin: 0; }
.sent { display: grid; gap: 16px; margin-top: 14px; }
.sent .g { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; padding: 18px 18px; }
.sent .g .mini { width: 74px; aspect-ratio: 1.45; background: url(/gift/kraft.webp?v=8b3063df03) 0 0 / 160px, #b8915f; transform: rotate(-4deg); position: relative; box-shadow: 0 2px 4px rgba(40, 30, 20, .25); grid-row: span 3; }
.sent .g .mini::before { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 58%); background: rgba(255, 255, 255, .14); }
.sent .g .to { font: 400 26px/1.1 var(--kp-hand); color: var(--kp-pen); margin: 0; overflow-wrap: anywhere; }
.sent .g .st { margin: 0; color: var(--kp-soft); font-size: 15px; }
.sent .g .acts { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
@media (max-width: 520px) { .sent .g { grid-template-columns: 1fr; } .sent .g .mini { grid-row: auto; width: 64px; } }

/* home: give as a gift */
.give-home { margin-top: 88px; display: grid; gap: 28px 48px; align-items: center; }
.give-home .env-wrap { width: min(380px, 92%); min-width: 0; justify-self: center; }
.give-home .env { cursor: default; } .give-home .env:hover { transform: rotate(-2deg); }
@media (min-width: 900px) { .give-home { grid-template-columns: .9fr 1.1fr; } }
@media (max-width: 899px) { .give-home { margin-top: 64px; } }