/* Personal festive notes, shared by the gallery, opened cards and previews. */
.postcard{--ink:#402379;--paper:#fff5e5;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-height:300px;padding:22px 26px 21px;border:1px solid #e7d2a3;border-radius:15px;background:linear-gradient(125deg,#fff9eb,#f5e6ef 72%,#f9efda);color:var(--ink);box-shadow:0 12px 28px #17082d38,inset 0 1px 0 #fff9;text-align:center;overflow:hidden;font-family:'Gill Sans','Gill Sans MT',Calibri,Arial,sans-serif;transition:transform .25s,box-shadow .25s;cursor:default}
button.postcard{cursor:pointer}
.postcard::before{content:'';display:block;position:absolute;inset:0;z-index:0;pointer-events:none;background:url('assets/campaign/pattern-background.webp') center/650px auto;mix-blend-mode:multiply;opacity:.045}
.postcard-purple{--ink:#fff7e7;--paper:#502788;background:radial-gradient(ellipse at 15% 100%,#72429f,transparent 65%),linear-gradient(130deg,#462276,#5c2b91);border-color:#9575b2}
.postcard-purple::before{mix-blend-mode:screen;opacity:.17}
.postcard-gold{--paper:#ebc56d;background:linear-gradient(120deg,#e4b854 0%,#f8e2a5 46%,#d8ad4f 72%,#f2d485);border-color:#e7c372}
.postcard-top,.postcard-copy,.postcard-signature{position:relative;z-index:1}
.postcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:35px}
.postcard .nomination-tag{align-self:flex-start;border-radius:20px;background:#402379;color:#f6d67d;padding:6px 10px;font-size:10px;font-weight:700;letter-spacing:.12em;line-height:1.2;white-space:nowrap}
.postcard-purple .nomination-tag{background:#f1cf7c;color:#402379}
.postcard-logo{margin-left:auto;display:block;align-self:flex-start;width:80px;height:auto;padding:5px 7px;background:#502587;border-radius:5px;filter:none;rotate:3deg}
.postmark{display:block;position:absolute;right:117px;top:29px;width:45px;height:19px;color:var(--ink);opacity:.28;rotate:-5deg;pointer-events:none}
.postmark path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.postcard-seal{display:grid;place-items:center;position:absolute;right:21px;top:51px;width:31px;height:31px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#a16aca,#673099 64%,#431e70);color:#f9d675;box-shadow:0 2px 5px #260b443d,inset 0 0 0 2px #bc93d88a;pointer-events:none}
.postcard-purple .postcard-seal{background:radial-gradient(circle at 30% 25%,#a16aca,#673099 64%,#431e70)}
.postcard-seal svg{width:23px;height:23px;fill:currentColor;stroke:#fff6da;stroke-width:.8}
.postcard-copy{display:block;margin:auto 10px;padding:27px 8px 25px;min-width:0}
.postcard .recipient{display:block;margin-bottom:11px;font-family:'Appetite Contrast',Georgia,serif;font-weight:400;font-style:normal;font-size:34px;letter-spacing:0;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:clip}
.postcard .message{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:17px;line-height:1.45;font-weight:400;overflow-wrap:anywhere}
.postcard-signature{display:flex;flex-direction:column;gap:4px;align-self:center;width:fit-content;max-width:82%;min-width:160px;margin-top:4px;padding:10px 20px;border:0;border-radius:5px;background:#fffdf7;color:#402379;box-shadow:0 3px 7px #32145124;rotate:0deg;font-size:10px;font-weight:700;letter-spacing:.075em;line-height:1.25}
.postcard-signature span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.postcard-signature span:last-child{min-height:1.25em;font-size:9px;font-weight:500;letter-spacing:.13em}
.card-flourish{display:block;position:absolute;left:17px;bottom:21px;width:27px;height:27px;color:#7954a2;rotate:-11deg;pointer-events:none;filter:drop-shadow(0 2px 1px #16072925)}
.card-flourish path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.postcard-cream .card-flourish{color:#fff;filter:drop-shadow(0 1px 2px #59357270)}
.postcard-purple .card-flourish{color:#f5d47f}
.postcard-photo{float:left;width:82px;height:94px;margin:2px 16px 8px 0;object-fit:cover;border:5px solid #fff8e9;box-shadow:0 3px 7px #230d4329;rotate:-5deg}
.postcard-copy.with-photo{display:flow-root;text-align:left}
.with-photo .recipient{font-size:30px}
.with-photo .message{font-size:16px}
.postcard-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;max-width:1100px;margin:30px auto 0;padding:5px 7px}
.postcard-gallery .postcard{min-height:320px;padding:22px 26px;rotate:-1.2deg}
.postcard-gallery .postcard:nth-child(even){rotate:1.2deg}
.postcard-gallery .postcard:nth-child(3n){rotate:.5deg}
.postcard-gallery .recipient{font-size:36px}
.postcard-gallery .postcard:hover{transform:translateY(-4px) rotate(0);box-shadow:0 18px 35px #17082d50}
button.postcard:focus-visible{outline:3px solid #f5d281;outline-offset:5px}
dialog:has(.postcard-detail){width:min(680px,calc(100% - 28px));padding:48px 30px 24px;border-radius:17px;background:#311353}
.postcard-detail{min-height:355px;margin-bottom:25px;padding:25px 30px;rotate:-.65deg}
.postcard-detail .postcard-copy{padding:35px 16px 30px}
.postcard-detail .recipient{font-size:44px}
.postcard-detail .message{display:block;-webkit-line-clamp:unset;font-size:19px;line-height:1.5}
.postcard-detail .postcard-signature{font-size:11px;margin-top:8px}
.postcard-detail .postcard-photo{width:115px;height:130px}
.detail-actions{justify-content:center;gap:16px}
.detail-actions .button{flex:1;min-width:0;padding:16px 12px;font-size:13px;letter-spacing:1px}
.nomination-card-preview{max-width:420px;rotate:-2deg}
.nomination-card-preview .postcard{min-height:300px}
@media(max-width:720px){
 .postcard-gallery{grid-template-columns:1fr;gap:27px;padding:4px;max-width:450px}
 .postcard-gallery .postcard{min-height:305px;padding:20px}
 .postcard-gallery .recipient{font-size:33px}
 .postcard-copy{margin:auto 0;padding:27px 5px 23px}
 .postcard .message{font-size:17px}
 .postmark{right:104px;top:26px;width:35px}
 .postcard-logo{width:74px}
 .postcard-seal{right:16px;top:47px;width:28px;height:28px}
 .postcard .nomination-tag{font-size:9px;padding:6px 8px}
 .postcard-signature{max-width:80%;padding:10px 13px;min-width:150px}
 .card-flourish{left:12px;bottom:22px;width:23px;height:23px}
 dialog:has(.postcard-detail){padding:45px 15px 22px}
 .postcard-detail{min-height:325px;padding:20px 18px;rotate:0deg}
 .postcard-detail .postcard-copy{padding:30px 3px 26px}
 .postcard-detail .recipient{font-size:35px}
 .postcard-detail .message{font-size:17px}
 .postcard-detail .postcard-photo{width:85px;height:100px;margin-right:12px}
 .detail-actions{gap:10px}
 .detail-actions .button{font-size:11px;letter-spacing:.7px;min-height:55px;padding:13px 7px}
}
@media(prefers-reduced-motion:reduce){.postcard{transition:none}.postcard-gallery .postcard:hover{transform:none}}

/* The hanging cards use the same artwork, at a miniature scale. */
.postcard.tree-tag{position:absolute;width:160px;height:auto;aspect-ratio:1.45;min-height:0;padding:8px 10px;border-radius:7px;transform:translate(-50%,0) rotate(var(--tag-angle,-3deg)) scale(var(--tag-scale,1));transform-origin:50% 0;transition:box-shadow .18s}
.postcard.tree-tag::before{inset:0;border:0;background-size:280px auto}
.tree-tag .postcard-top{min-height:16px;gap:4px;flex-shrink:0}
.tree-tag .postcard-logo{width:32px;padding:2px 3px;border-radius:2px}
.tree-tag .postmark{right:47px;top:11px;width:20px;height:8px}
.tree-tag .postcard-copy{flex:1;min-height:0;margin:0;padding:5px 1px 4px}
.postcard.tree-tag .recipient{font-size:16px;line-height:1.12;margin-bottom:4px}
.postcard.tree-tag .message{font-size:7px;line-height:1.3;-webkit-line-clamp:3}
.tree-tag .postcard-signature{width:70%;min-width:0;max-width:80%;margin-top:0;flex-shrink:0;padding:4px 5px;gap:2px;border-radius:2px;font-size:4.7px;letter-spacing:.075em}
.tree-tag .postcard-signature span:last-child{font-size:4.2px}
.tree-tag .postcard-photo{width:25px;height:28px;border-width:2px;margin:1px 5px 3px 0}
.postcard.tree-tag .with-photo .recipient{font-size:13px}
.postcard.tree-tag .with-photo .message{font-size:6px}
@media(max-width:720px){
 .postcard.tree-tag{width:140px;padding:7px 9px}
 .tree-tag .postcard-top{min-height:13px}.tree-tag .postcard-logo{width:28px}
 .tree-tag .postmark{right:41px;top:10px;width:17px}
 .postcard.tree-tag .recipient{font-size:14px;margin-bottom:3px}
 .postcard.tree-tag .message{font-size:6px}
 .tree-tag .postcard-signature{font-size:4.2px;padding:3px 5px;gap:1px}
 .tree-tag .postcard-signature span:last-child{font-size:3.8px}
 .tree-tag .postcard-photo{width:22px;height:25px}
 .postcard.tree-tag .with-photo .recipient{font-size:11px}
 .postcard.tree-tag .with-photo .message{font-size:5.5px}
}