/* 90s paper cup tip card */
.jazz-cup{width:190px;height:auto;filter:drop-shadow(0 10px 12px rgba(74,52,30,.18))}
.jazz-cup .straw{transform-origin:112px 52px;animation:strawWiggle 5s ease-in-out infinite}
@keyframes strawWiggle{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
html.calm .jazz-cup .straw{animation:none}
@media (prefers-reduced-motion:reduce){.jazz-cup .straw{animation:none}}
.tip90{padding:30px 18px 10px}
.tip90-card{max-width:880px;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr);gap:30px;align-items:center;background:#FFFDF7;border:4px solid #1E1B16;border-radius:22px;padding:28px 32px;box-shadow:8px 8px 0 #2CB5AE,8px 8px 0 4px #1E1B16;font-family:"DM Sans",system-ui,sans-serif;color:#2A2420}
.tip90-eye{margin:0 0 8px}
.tip90-eye span{display:inline-block;background:#5A2A8A;color:#fff;font-family:"Mountains of Christmas",cursive;font-weight:700;font-size:22px;padding:3px 14px 5px;border-radius:6px;transform:rotate(-3deg)}
.tip90-card h2{margin:0 0 8px;font-family:"Fraunces",serif;font-weight:900;font-size:clamp(30px,4vw,42px);line-height:1;color:#1F3B2E}
.tip90-card p{margin:0 0 12px;font-size:16.5px;line-height:1.55}
.tip90-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:6px 0 10px}
.tip90-btn{display:inline-block;padding:14px 26px;border-radius:12px;background:#2CB5AE;color:#fff;font-family:"Fraunces",serif;font-weight:900;font-size:19px;text-decoration:none;border:3px solid #1E1B16;box-shadow:5px 5px 0 #5A2A8A,5px 5px 0 3px #1E1B16}
.tip90-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #5A2A8A,2px 2px 0 3px #1E1B16}
.tip90-alt{font-weight:700;color:#5A2A8A}
.tip90-soft{font-size:14px!important;color:#6B5F55}
@media (max-width:700px){.tip90-card{grid-template-columns:minmax(0,1fr);text-align:center;padding:24px 20px}.tip90-card .jazz-cup{width:150px;margin:0 auto}.tip90-btns{justify-content:center}}
@media print{.tip90{display:none}}

/* cup: no straw, smaller, floats lower right so the text wraps around it, coins drop in quickly */
.jazz-cup.tip-float{float:right;width:118px!important;height:auto;margin:6px 0 10px 18px;shape-outside:margin-box}
.jazz-cup .coin{animation:coinDrop 1.5s cubic-bezier(.55,0,1,.45) infinite;opacity:0}
.jazz-cup .coin.c2{animation-delay:.5s}.jazz-cup .coin.c3{animation-delay:1s}
@keyframes coinDrop{0%{transform:translateY(0);opacity:0}8%{opacity:1}38%{transform:translateY(78px);opacity:1}39%,100%{transform:translateY(78px);opacity:0}}
html.calm .jazz-cup .coin{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){.jazz-cup .coin{animation:none;opacity:0}}
/* main page tip card: single column now that the cup sits inside the text */
.tip-card{grid-template-columns:minmax(0,1fr)!important}
.tip-copy{text-align:left}
.tip-copy::after{content:"";display:block;clear:both}
.tip90-card{grid-template-columns:minmax(0,1fr)!important;text-align:left!important}
.tip90-card::after{content:"";display:block;clear:both}
@media (max-width:700px){.jazz-cup.tip-float{width:92px!important;margin:4px 0 8px 12px}.tip-copy,.tip90-card{text-align:left!important}.tip90-btns{justify-content:flex-start!important}}

/* coins tossed in by hand: slower, uneven arcs, spins and gaps */
.jazz-cup .coin{transform-box:fill-box;transform-origin:center;animation:coinToss var(--dur) cubic-bezier(.3,.1,.7,1) infinite;animation-delay:var(--dl)}
.jazz-cup .coin.c1{--dur:3.8s;--dl:0s;--dx:-46px;--dy:-26px;--rot:280deg}
.jazz-cup .coin.c2{--dur:5.2s;--dl:1.3s;--dx:40px;--dy:-34px;--rot:-340deg}
.jazz-cup .coin.c3{--dur:4.4s;--dl:2.9s;--dx:-18px;--dy:-44px;--rot:200deg}
@keyframes coinToss{
  0%{transform:translate(var(--dx),var(--dy)) rotate(0);opacity:0}
  4%{opacity:1}
  16%{transform:translate(calc(var(--dx) * .45),calc(var(--dy) - 16px)) rotate(calc(var(--rot) * .4));opacity:1}
  30%{transform:translate(0,58px) rotate(var(--rot));opacity:1}
  33%{transform:translate(0,70px) rotate(var(--rot));opacity:0}
  100%{transform:translate(0,70px) rotate(var(--rot));opacity:0}}
.jazz-cup .coin.c1{animation-delay:0s}.jazz-cup .coin.c2{animation-delay:1.3s}.jazz-cup .coin.c3{animation-delay:2.9s}

/* "Leave a tip" layout: bouncy red letters, small a, cup with a tip label and rays */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lat{text-align:center;margin:0 auto 18px}
.lat-leave{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:clamp(52px,7vw,76px);line-height:.9;color:#9E1B1B;letter-spacing:.01em}
.lat-leave span{display:inline-block}
.lat-leave span:nth-child(1){transform:rotate(-10deg) translateY(4px)}
.lat-leave span:nth-child(2){transform:rotate(6deg) translateY(-6px)}
.lat-leave span:nth-child(3){transform:rotate(-4deg) translateY(6px)}
.lat-leave span:nth-child(4){transform:rotate(8deg) translateY(-2px)}
.lat-leave span:nth-child(5){transform:rotate(-6deg) translateY(-8px)}
.lat-a{margin:2px 0 0;font-family:"DM Sans",Arial,sans-serif;font-size:32px;line-height:1;color:#1E1B16}
.lat-cupwrap{position:relative;display:inline-block;padding:0 74px}
.lat-cupwrap .jazz-cup{display:block;width:150px!important;float:none!important;margin:0 auto!important}
.lat .ray{position:absolute;width:46px;height:12px;border-radius:3px;background:#3E7A8A;animation:rayPulse 2.4s ease-in-out infinite}
.lat .ray.l1{left:10px;top:34%;transform:rotate(22deg)}.lat .ray.l2{left:4px;top:52%}.lat .ray.l3{left:10px;top:70%;transform:rotate(-22deg)}
.lat .ray.r1{right:10px;top:34%;transform:rotate(-22deg)}.lat .ray.r2{right:4px;top:52%}.lat .ray.r3{right:10px;top:70%;transform:rotate(22deg)}
.lat .ray.l2,.lat .ray.r2{animation-delay:.4s}.lat .ray.l3,.lat .ray.r3{animation-delay:.8s}
@keyframes rayPulse{0%,100%{opacity:1}50%{opacity:.45}}
html.calm .lat .ray{animation:none}
@media (prefers-reduced-motion:reduce){.lat .ray{animation:none}}
.tip-copy h2{text-align:center}
@media (max-width:700px){.lat-cupwrap{padding:0 56px}.lat-cupwrap .jazz-cup{width:120px!important}.lat .ray{width:36px;height:10px}}
.lat p.lat-leave{font-family:"Fraunces",Georgia,serif!important;font-weight:900!important;font-size:clamp(56px,8vw,80px)!important;line-height:.9!important;color:#9E1B1B!important;margin:0!important;max-width:none!important;text-align:center!important}
.lat p.lat-a{font-family:"DM Sans",Arial,sans-serif!important;font-size:32px!important;line-height:1!important;color:#1E1B16!important;margin:4px 0 0!important;max-width:none!important;text-align:center!important}
.lat .ray{background:#2F7F8C!important}

/* the tip button finishes the sentence under the cup: Leave a [cup] tip */
.lat-cupwrap{padding:0!important}
.lat-btn{display:inline-block;margin:6px auto 0;padding:6px 44px 12px;border-radius:999px;background:#E9B23A;color:#1E1B16;text-decoration:none;
  font-family:"Mountains of Christmas",Georgia,cursive;font-weight:700;font-size:48px;line-height:1;border:3px solid #1E1B16;box-shadow:5px 5px 0 #9E1B1B,5px 5px 0 3px #1E1B16;transition:transform .15s}
@media (hover:hover){.lat-btn:hover{transform:translate(-2px,-2px) rotate(-2deg)}}
.lat-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #9E1B1B,2px 2px 0 3px #1E1B16}
.lat-btn:focus-visible{outline:3px solid #2F7F8C;outline-offset:4px}
@media (max-width:700px){.lat-btn{font-size:40px;padding:4px 36px 10px}}
.lat-cupwrap{display:block!important}.lat-btn{display:table!important;margin:10px auto 0!important}

/* one palette for the whole tip card: cranberry lettering, cup teal and purple, cream paper */
.lat p.lat-leave{color:#B23A3F!important}
.lat p.lat-a{font-family:"Fraunces",Georgia,serif!important;font-weight:900!important;font-size:clamp(38px,5vw,52px)!important;color:#B23A3F!important;line-height:.9!important;margin:2px 0 4px!important;transform:rotate(-6deg)}
.lat-btn{background:#2C9C96!important;color:#FFFDF6!important;border-color:#1E1B16!important;box-shadow:5px 5px 0 #5A2A8A,5px 5px 0 3px #1E1B16!important}
.lat-btn:active{box-shadow:2px 2px 0 #5A2A8A,2px 2px 0 3px #1E1B16!important}
.tip-first{font-size:17.5px}
.tip-hi{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:1.65em;line-height:1;color:#1F3B2E;margin-right:4px}
.tip-hi em{font-style:normal;color:#B23A3F}
.tip-sign{color:#B23A3F!important}
.tip-soft,.tip90-soft{color:#6B5F55!important}
.tip-card .share .sh-btn svg{color:#2C9C96}
.tip90-card{box-shadow:8px 8px 0 #2C9C96,8px 8px 0 4px #1E1B16!important}

/* Leave a sits big and skewed to the left of the cup, tip button under the cup */
.lat{display:grid!important;grid-template-columns:auto auto;grid-template-areas:"leave cup" "a cup" "a btn";justify-content:center;align-items:center;column-gap:22px;margin:0 auto 10px!important;text-align:center}
.lat p.lat-leave{grid-area:leave;align-self:end;font-size:clamp(76px,10vw,112px)!important;transform:rotate(-9deg) skewX(-6deg);margin:0 0 -6px!important}
.lat p.lat-a{grid-area:a;align-self:start;justify-self:end;margin:0 18px 0 0!important;font-size:clamp(48px,6vw,66px)!important;transform:rotate(-12deg)}
.lat-cupwrap{grid-area:cup;align-self:end}
.lat-btn{grid-area:btn;margin:6px auto 0!important}
.lat-cupwrap .jazz-cup{width:140px!important}
.tip-card{padding-top:26px!important;padding-bottom:26px!important}
.tipjar{padding-top:50px!important}
.tip90-card{padding-top:20px!important;padding-bottom:20px!important}
.tip-copy p{margin-top:0}
@media (max-width:700px){
  .lat{column-gap:10px}
  .lat p.lat-leave{font-size:clamp(58px,15vw,76px)!important}
  .lat p.lat-a{font-size:42px!important;margin-right:10px!important}
  .lat-cupwrap .jazz-cup{width:104px!important}
  .lat-btn{font-size:34px!important;padding:2px 26px 8px!important}
}

/* one tight unit: "Leave a" on one tilted line, a bigger cup, the tip button stuck across the cup like a label */
.lat{display:flex!important;align-items:flex-end;justify-content:center;gap:8px;margin:4px auto 18px!important;grid-template-areas:none!important}
.lat-words{display:inline-flex;align-items:baseline;gap:14px;transform:rotate(-7deg);margin:0 0 44px;white-space:nowrap}
.lat-words .lat-leave{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:clamp(66px,9vw,98px);line-height:1;color:#B23A3F}
.lat-words .lat-leave span{display:inline-block}
.lat-words .lat-a{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:clamp(46px,6vw,66px);line-height:1;color:#B23A3F}
.lat-cupwrap{position:relative!important;display:block!important}
.lat-cupwrap .jazz-cup{width:160px!important}
.lat-cupwrap .lat-btn{position:absolute;left:50%;bottom:30px;margin:0!important;transform:translateX(-50%) rotate(-6deg);display:inline-block!important;padding:2px 30px 8px!important;font-size:42px!important;white-space:nowrap}
@media (hover:hover){.lat-cupwrap .lat-btn:hover{transform:translateX(-50%) rotate(-2deg) translateY(-3px)}}
.lat-cupwrap .lat-btn:active{transform:translateX(-50%) rotate(-6deg) translate(2px,2px)}
@media (max-width:700px){
  .lat{gap:4px}
  .lat-words{gap:8px;margin-bottom:30px}
  .lat-words .lat-leave{font-size:clamp(46px,13vw,64px)}
  .lat-words .lat-a{font-size:clamp(34px,9vw,44px)}
  .lat-cupwrap .jazz-cup{width:112px!important}
  .lat-cupwrap .lat-btn{font-size:30px!important;padding:0 20px 6px!important;bottom:20px}
}
/* tip button sits under the cup so the cup design stays visible */
.lat-cupwrap .lat-btn{position:static!important;transform:rotate(-4deg)!important;display:table!important;margin:-14px auto 0!important}
@media (hover:hover){.lat-cupwrap .lat-btn:hover{transform:rotate(-1deg) translateY(-3px)!important}}
.lat-cupwrap .lat-btn:active{transform:rotate(-4deg) translate(2px,2px)!important}
.lat-words{margin-bottom:96px!important}
@media (max-width:700px){.lat-words{margin-bottom:70px!important}.lat-cupwrap .lat-btn{margin-top:-10px!important}}

/* Leave a with the tip button right under it on the left, the cup alone on the right */
.lat{align-items:center!important;gap:18px!important}
.lat-left{display:flex;flex-direction:column;align-items:center;gap:10px}
.lat-words{margin:0!important}
.lat-left .lat-btn{position:static!important;display:inline-block!important;margin:0!important;transform:rotate(-4deg)!important}
@media (hover:hover){.lat-left .lat-btn:hover{transform:rotate(-1deg) translateY(-3px)!important}}
.lat-left .lat-btn:active{transform:rotate(-4deg) translate(2px,2px)!important}
@media (max-width:700px){.lat{gap:8px!important}.lat-left{gap:6px}}
/* cup matches the height of the Leave a + tip column */
.lat{align-items:stretch!important}
.lat-left{justify-content:center}
.lat-cupwrap{display:flex!important;align-items:stretch}
.lat-cupwrap .jazz-cup{width:auto!important;height:100%!important;max-height:230px;min-height:120px}

/* follow me on Instagram, inside Kate's note */
.ig-follow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:9px 16px 9px 10px;min-height:44px;border-radius:999px;background:#FFFDF7;border:2px solid #E6D6BB;color:#2A2420;text-decoration:none;font-weight:700;font-size:15px;box-shadow:0 4px 10px rgba(74,52,30,.08)}
.ig-follow svg{width:26px;height:26px;flex:0 0 auto}
.ig-follow b{color:#B23A3F}
@media (hover:hover){.ig-follow:hover{border-color:#E1306C}}
@media (max-width:420px){.ig-follow{font-size:13.5px}.ig-follow span{display:flex;flex-direction:column;line-height:1.2}}
.ig-follow span{display:flex;flex-direction:column;line-height:1.25;text-align:left}.ig-follow{border-radius:20px;max-width:100%}

/* holiday Instagram icon size, and the Contact Kate button that sits under it */
.ig-follow svg{width:30px;height:30px;flex:none}
.kate-mail{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:9px 16px 9px 10px;min-height:44px;border-radius:999px;background:#FFFDF7;border:2px solid #E6D6BB;color:#2A2420;text-decoration:none;font-weight:700;font-size:13.5px;box-shadow:0 4px 10px rgba(74,52,30,.08)}
.kate-mail svg{width:30px;height:30px;flex:none}
.kate-mail b{color:#B23A3F}
@media (hover:hover){.kate-mail:hover{border-color:#B23A3F}}