/*
 * TuckTrail Draw — "scratch a stamp". Component styles for the /postcards/ module,
 * the popup and the rules page. Colour and type come from the theme's tokens with
 * fallbacks so the file also renders alone. Built from media/postcard-draw-20260905/.
 */
/* TuckTrail — free voucher draw ("scratch a stamp"). Prototype 2026-09-05.
   Colour tokens mirror storefront.css so the component drops into the theme
   unchanged. Fonts fall back to system faces: no web-font request anywhere. */

/* ------------------------------------------------------------ module */
.tt-draw{
  --stamp-bg:var(--tt-cream, #F8F4ED);
  position:relative;margin:0 0 56px;padding:32px;border-radius:20px;background:#fff;
  border:1px solid var(--tt-line, #E3DCCF);overflow:hidden;font-family:var(--font-body, "Inter",system-ui,sans-serif);color:var(--tt-ink, #292723);
}
.tt-draw__head{max-width:640px;margin-bottom:18px}
.tt-draw__kicker{margin:0 0 6px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tt-muted, #6B6A63)}
.tt-draw__title{font-family:var(--font-display, "Fraunces","Iowan Old Style",Georgia,serif);font-weight:500;font-size:clamp(28px,4vw,40px);line-height:1.08;margin:0 0 10px;color:var(--tt-pine, #2F4536)}
.tt-draw__lede{margin:0;font-size:16px;line-height:1.6}
.tt-draw__stage{position:relative;display:grid;grid-template-columns:320px minmax(0,1fr);gap:36px;align-items:center}
.tt-draw__stampwrap{position:relative;width:100%;padding:24px 12px 20px;background:var(--tt-cream, #F8F4ED);border-radius:14px;display:flex;justify-content:center;scroll-margin-top:16px}
.tt-draw__panel{min-width:0}
@media (max-width:720px){
  .tt-draw{padding:20px 16px 22px;border-radius:16px;margin-bottom:36px}
  .tt-draw__head{margin-bottom:12px}
  .tt-draw__title{font-size:30px}
  .tt-draw__lede{font-size:14.5px;line-height:1.5}
  .tt-draw__stage{grid-template-columns:1fr;gap:18px}
  .tt-draw__stampwrap{padding:16px 10px 14px}
  .tt-stamp{width:min(300px,100%)}
  .tt-draw__h{font-size:24px}
  .tt-draw__p{font-size:15px}
  .tt-draw__odds{margin-top:14px;font-size:11px}
  .tt-draw__h--big{font-size:40px}
  .tt-draw__panel{text-align:center}
  .tt-draw__form{justify-content:center;margin:0 auto}
  .tt-draw__row{justify-content:center}
}

/* ------------------------------------------------------------ stamp */
.tt-stamp{
  position:relative;width:280px;aspect-ratio:4/5;padding:9px;
  --hole:7px;--pitch:14px;
  background:
    radial-gradient(circle at calc(var(--pitch)/2) 0,var(--stamp-bg) calc(var(--hole)/2),transparent calc(var(--hole)/2 + .6px)) top left/var(--pitch) var(--hole) repeat-x,
    radial-gradient(circle at calc(var(--pitch)/2) 100%,var(--stamp-bg) calc(var(--hole)/2),transparent calc(var(--hole)/2 + .6px)) bottom left/var(--pitch) var(--hole) repeat-x,
    radial-gradient(circle at 0 calc(var(--pitch)/2),var(--stamp-bg) calc(var(--hole)/2),transparent calc(var(--hole)/2 + .6px)) top left/var(--hole) var(--pitch) repeat-y,
    radial-gradient(circle at 100% calc(var(--pitch)/2),var(--stamp-bg) calc(var(--hole)/2),transparent calc(var(--hole)/2 + .6px)) top right/var(--hole) var(--pitch) repeat-y,
    #fff;
  box-shadow:0 18px 40px -22px rgba(41,39,35,.45);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;
  will-change:transform;
}
.tt-stamp__inner{position:relative;height:100%;border:1.5px solid var(--tt-pine, #2F4536);padding:8px;display:flex;flex-direction:column;background:#fff;overflow:hidden}
.tt-stamp__window{position:relative;flex:1;overflow:hidden;background:var(--tt-cream, #F8F4ED);border:1px solid var(--tt-line, #E3DCCF)}
.tt-stamp__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--tt-cream, #F8F4ED)}
.tt-stamp__band{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:7px;padding:7px 10px 5px;background:var(--band,var(--tt-pine, #2F4536));color:#fff}
.tt-stamp__value{font-family:var(--font-display, "Fraunces","Iowan Old Style",Georgia,serif);font-weight:600;font-size:32px;line-height:1;letter-spacing:-.01em}
.tt-stamp__label{font-family:var(--font-head, "Outfit",system-ui,sans-serif);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.tt-stamp__series{padding:6px 2px 0;font-family:var(--font-head, "Outfit",system-ui,sans-serif);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--tt-muted, #6B6A63);display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
.tt-stamp__animal{color:var(--tt-pine, #2F4536);font-weight:600}
.tt-stamp__label:empty{display:none}
/* The band darkens up the percent ladder (10%–50%); the rarest two stamps get the gold. */
.tt-stamp[data-tier="10"]{--band:#6E8A75}
.tt-stamp[data-tier="15"]{--band:#4F6B57}
.tt-stamp[data-tier="20"]{--band:#2F4536}
.tt-stamp[data-tier="25"]{--band:#C08A5C}
.tt-stamp[data-tier="30"]{--band:#A55A35}
.tt-stamp[data-tier="35"]{--band:#7D4A2E}
.tt-stamp[data-tier="40"]{--band:#292723}
.tt-stamp[data-tier="45"],.tt-stamp[data-tier="50"]{--band:linear-gradient(135deg,#9E7420,#E9CF7A 45%,#B8892E)}
.tt-stamp[data-pool="gold"]{--band:linear-gradient(135deg,#9E7420,#E9CF7A 45%,#B8892E)}
.tt-stamp[data-tier="again"]{--band:#E7DCC7}
.tt-stamp[data-tier="again"] .tt-stamp__band{color:var(--tt-pine, #2F4536)}
.tt-stamp[data-tier="again"] .tt-stamp__value{font-size:19px;font-family:var(--font-head, "Outfit",system-ui,sans-serif);font-weight:700;letter-spacing:.06em}
/* gold pool: the same stamp with a foil frame and a tag */
.tt-stamp[data-pool="gold"] .tt-stamp__inner{border-color:var(--tt-gold, #B8892E);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px var(--tt-gold-light, #E9CF7A)}
.tt-stamp[data-pool="gold"]::after{content:"GOLD DRAW";position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,#9E7420,#E9CF7A 50%,#B8892E);color:#fff;font:700 9px/1.2 var(--font-head, "Outfit",system-ui,sans-serif);letter-spacing:.16em}
/* foil (scratch layer) covers the picture window and the band */
.tt-stamp__foilbox{position:absolute;inset:8px;z-index:2}
.tt-stamp__foil{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;display:block;opacity:1;transition:opacity .55s ease}
.tt-stamp__foil:active{cursor:grabbing}
.tt-stamp__foil.is-gone{opacity:0;pointer-events:none}
.tt-stamp__hint{position:absolute;left:50%;top:38%;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:3;pointer-events:none;background:#2F4536;opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='16' ry='13'/%3E%3Ccircle cx='14' cy='26' r='7'/%3E%3Ccircle cx='26' cy='15' r='7.5'/%3E%3Ccircle cx='38' cy='15' r='7.5'/%3E%3Ccircle cx='50' cy='26' r='7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='16' ry='13'/%3E%3Ccircle cx='14' cy='26' r='7'/%3E%3Ccircle cx='26' cy='15' r='7.5'/%3E%3Ccircle cx='38' cy='15' r='7.5'/%3E%3Ccircle cx='50' cy='26' r='7'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:tt-hint 1.8s ease-in-out infinite}
.tt-stamp__foilbox.is-touched .tt-stamp__hint,.tt-stamp__foil.is-gone+.tt-stamp__hint{display:none}
@keyframes tt-hint{0%{transform:translate(-46px,-34px) rotate(-20deg);opacity:0}15%{opacity:.85}50%{transform:translate(46px,30px) rotate(-20deg);opacity:.85}65%{opacity:0}100%{transform:translate(-46px,-34px) rotate(-20deg);opacity:0}}
/* idle wobble: the sealed stamp asks to be touched */
.tt-stamp:not(.is-revealed):not(.is-taken):not(.is-drop){animation:tt-wobble 4s ease-in-out infinite}
@keyframes tt-wobble{0%,100%{transform:rotate(0)}6%{transform:rotate(-1.4deg) scale(1.01)}12%{transform:rotate(1.2deg) scale(1.01)}18%{transform:rotate(0)}}
.tt-stamp__shine{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%);transform:translateX(-120%)}
.tt-stamp.is-revealed{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 34px 50px -26px rgba(41,39,35,.55)}
.tt-stamp.is-revealed .tt-stamp__shine{animation:tt-shine 1.1s ease-out .15s 1 both}
.tt-stamp.is-revealed .tt-stamp__art{animation:tt-bob 2.6s ease-in-out .5s 2}
@keyframes tt-shine{0%{opacity:0;transform:translateX(-120%)}20%{opacity:1}100%{opacity:0;transform:translateX(120%)}}
@keyframes tt-bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-1deg)}60%{transform:translateY(-2px) rotate(1deg)}}
/* postmark, tiers of $12 and up */
.tt-stamp__postmark{position:absolute;right:-22px;top:-20px;width:118px;height:118px;z-index:4;pointer-events:none;opacity:0;color:var(--tt-ink, #292723);mix-blend-mode:multiply;transform:scale(1.9) rotate(-20deg)}
.tt-stamp__postmark.is-in{animation:tt-postmark .55s cubic-bezier(.2,1.5,.35,1) both}
@keyframes tt-postmark{from{opacity:0;transform:scale(1.9) rotate(-20deg)}70%{opacity:.9;transform:scale(.95) rotate(-12deg)}to{opacity:.85;transform:scale(1) rotate(-12deg)}}
/* try-again: Trail takes the stamp away, a fresh one drops in */
.tt-stamp.is-taken{animation:tt-taken .8s cubic-bezier(.5,0,.8,.4) both}
@keyframes tt-taken{0%{transform:translateY(-8px) rotate(-1.5deg)}25%{transform:translate(10px,-4px) rotate(4deg)}100%{transform:translate(-460px,30px) rotate(-18deg);opacity:0}}
.tt-stamp.is-drop{animation:tt-drop .6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes tt-drop{from{transform:translateY(-70px) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
.tt-draw__trail{position:absolute;bottom:-4px;left:50%;width:150px;margin-left:-75px;z-index:7;pointer-events:none;opacity:0;transform:translateX(420px)}
.tt-draw__trail img{width:100%;display:block;filter:drop-shadow(0 8px 10px rgba(41,39,35,.25))}
.tt-draw__trail.is-snatch{animation:tt-snatch 1.6s cubic-bezier(.4,0,.6,1) both}
@keyframes tt-snatch{0%{opacity:1;transform:translateX(420px)}35%{transform:translateX(70px)}52%{transform:translateX(70px)}100%{opacity:1;transform:translateX(-560px)}}
.tt-draw__trail.is-run{animation:tt-trail-run 2.4s linear both}
@keyframes tt-trail-run{0%{opacity:1;transform:translateX(560px)}100%{opacity:1;transform:translateX(-640px)}}
.tt-draw__trail.is-snatch img,.tt-draw__trail.is-run img{animation:tt-trail-bob .26s ease-in-out infinite alternate}
@keyframes tt-trail-bob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-7px) rotate(3deg)}}
/* paw confetti */
.tt-paw{position:absolute;top:-30px;left:var(--x,50%);width:var(--size,22px);height:var(--size,22px);z-index:6;pointer-events:none;background:var(--paw,#CC7A4D);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='16' ry='13'/%3E%3Ccircle cx='14' cy='26' r='7'/%3E%3Ccircle cx='26' cy='15' r='7.5'/%3E%3Ccircle cx='38' cy='15' r='7.5'/%3E%3Ccircle cx='50' cy='26' r='7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='16' ry='13'/%3E%3Ccircle cx='14' cy='26' r='7'/%3E%3Ccircle cx='26' cy='15' r='7.5'/%3E%3Ccircle cx='38' cy='15' r='7.5'/%3E%3Ccircle cx='50' cy='26' r='7'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:tt-paw-fall var(--dur,2s) cubic-bezier(.3,.1,.6,1) var(--delay,0s) 1 both}
@keyframes tt-paw-fall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx,0px),var(--fall,460px)) rotate(var(--rot,360deg));opacity:0}}
.tt-draw__rain{position:fixed;inset:0;z-index:9500;pointer-events:none;overflow:hidden}
.tt-draw__rain .tt-paw{--fall:110vh}

/* ------------------------------------------------------------ panel */
.tt-draw__step{display:none}
.tt-draw__step.is-active{display:block;animation:tt-fade .35s ease both}
@keyframes tt-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tt-draw__h{font-family:var(--font-display, "Fraunces","Iowan Old Style",Georgia,serif);font-weight:500;font-size:clamp(24px,3vw,32px);line-height:1.1;margin:0 0 8px;color:var(--tt-pine, #2F4536)}
.tt-draw__h--big{font-size:clamp(34px,5vw,48px);margin-bottom:4px}
.tt-draw__hint{margin:0;font-size:15px;color:var(--tt-muted, #6B6A63);text-align:center}
.tt-draw__h em{font-style:normal;color:var(--tt-clay, #A55A35)}
.tt-draw__p{margin:0 0 16px;line-height:1.55}
.tt-draw__p--sub{color:var(--tt-muted, #6B6A63);font-size:14px}
/* The draw's buttons are scoped to the draw's own roots — the inline module
 * (.tt-draw), the popup (.tt-dm) and the verify sheet (.tt-verify). draw.css
 * loads on nearly every page (tucktrail_draw_popup_active), after the theme's
 * bundles and with nothing depending on it, so a bare .tt-btn rule here is a
 * site-wide redefinition of a shared primitive that wins on load order at equal
 * specificity. That is how the gear/journey hero's "Shop all gear" lost its
 * text: .tt-btn--ghost here repainted it pine on a dark hero photo, silently
 * beating brand-magazine's .tt-btn--ghost-light, and it only became readable on
 * hover because this file's :hover sets no colour. Never style .tt-btn from
 * here unscoped. */
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:999px;border:1px solid var(--tt-clay, #A55A35);background:var(--tt-clay, #A55A35);color:#fff;font:600 15px/1 var(--font-head, "Outfit",system-ui,sans-serif);cursor:pointer;text-decoration:none;transition:background .15s,transform .15s}
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn:hover{background:var(--tt-clay-dark, #8A4227)}
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn:active{transform:translateY(1px)}
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn[disabled]{opacity:.6;cursor:default}
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn--ghost{background:transparent;color:var(--tt-pine, #2F4536);border-color:var(--tt-line, #E3DCCF)}
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn--ghost:hover{background:var(--tt-cream, #F8F4ED)}
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn--sm{min-height:38px;padding:8px 16px;font-size:13px}
/* [hidden] is the UA sheet's display:none, which any author rule outranks — refreshNext()
 * hides [data-next-btn] by setting .hidden, and the rule above was quietly overriding it,
 * so "Scratch the next stamp" stayed on screen with no draws left. */
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn[hidden]{display:none}
.tt-draw__form{display:flex;gap:10px;flex-wrap:wrap;max-width:460px}
.tt-draw__input{flex:1 1 200px;min-width:0;min-height:48px;padding:12px 18px;border-radius:999px;border:1px solid var(--tt-line, #E3DCCF);background:#fff;color:var(--tt-ink, #292723);font:15px var(--font-body, "Inter",system-ui,sans-serif)}
.tt-draw__input:focus{outline:2px solid var(--tt-sage, #8AA08F);outline-offset:1px}
.tt-draw__input--short{flex:0 1 120px;text-align:center;font-size:18px}
.tt-draw__msg{margin:10px 0 0;font-size:14px;color:var(--tt-muted, #6B6A63);min-height:1.2em}
.tt-draw__msg--err{color:#B23A2E}
.tt-draw__meter{height:4px;max-width:200px;margin:12px auto 0;border-radius:999px;background:var(--tt-line, #E3DCCF);overflow:hidden}
.tt-draw__meter i{display:block;height:100%;width:0;background:var(--tt-pine, #2F4536);transition:width .15s linear}
/* The code box is printed with [hidden] and only shown for a known address holding a voucher; an author display outranks the UA sheet. */
.tt-draw__code[hidden]{display:none}
.tt-draw__code{display:inline-flex;align-items:center;gap:12px;margin:4px 0 12px;padding:10px 16px;border-radius:10px;border:1px dashed var(--tt-pine, #2F4536);background:var(--tt-cream, #F8F4ED);font:600 18px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--tt-pine, #2F4536)}
.tt-draw__code button{border:0;background:transparent;color:var(--tt-clay, #A55A35);font:600 12px var(--font-head, "Outfit",system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.tt-draw__fine{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--tt-muted, #6B6A63);max-width:460px}
.tt-draw__fine a{color:var(--tt-pine, #2F4536)}
.tt-draw__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.tt-draw__odds{margin:18px 0 0;font-size:11.5px;line-height:1.5;color:var(--tt-muted, #6B6A63);text-align:center;letter-spacing:.02em}
.tt-draw__more{margin:14px 0 0;border-top:1px solid var(--tt-line, #E3DCCF);font-size:14px;line-height:1.55;color:var(--tt-ink, #292723)}
.tt-draw__more summary{cursor:pointer;padding:12px 0;font:600 13px/1.2 var(--font-head, "Outfit",system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--tt-pine, #2F4536);list-style:none;display:flex;justify-content:space-between;align-items:center}
.tt-draw__more summary::-webkit-details-marker{display:none}
.tt-draw__more summary::after{content:"+";font-size:18px;line-height:1}
.tt-draw__more[open] summary::after{content:"−"}
.tt-draw__more ul{margin:0 0 14px;padding-left:18px}
.tt-draw__more li{margin:0 0 6px}
.tt-draw__more a{color:var(--tt-pine, #2F4536)}
.tt-draw__odds a{color:var(--tt-pine, #2F4536)}
.tt-draw__count{display:inline-block;margin-top:6px;padding:6px 12px;border-radius:8px;background:var(--tt-cream, #F8F4ED);font:600 14px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tt-pine, #2F4536);letter-spacing:.04em}
.tt-draw__question{font-family:var(--font-display, "Fraunces","Iowan Old Style",Georgia,serif);font-size:26px;color:var(--tt-ink, #292723);margin:0 0 14px}

/* (The popup, .tt-dm, left with the free draw on 2026-09-29; the shared button rules above keep their .tt-dm scope harmlessly.) */
@media (prefers-reduced-motion:reduce){
  .tt-stamp,.tt-stamp *,.tt-draw__trail,.tt-draw__trail img,.tt-paw,.tt-draw__step{animation:none!important;transition:none!important}
  .tt-paw{display:none}
}

/* ------------------------------------------------------------ rules sheet (a separate page in production) */
.tt-rules{position:fixed;inset:0;z-index:9700;background:var(--tt-cream, #F8F4ED);color:var(--tt-ink, #292723);overflow:auto;font-family:var(--font-body, "Inter",system-ui,sans-serif);font-size:15px;line-height:1.6}
.tt-rules[hidden]{display:none}
.tt-rules__in{width:min(100% - 40px,680px);margin:0 auto;padding:28px 0 60px}
.tt-rules__close{position:sticky;top:12px;float:right;width:40px;height:40px;border-radius:50%;border:1px solid var(--tt-line, #E3DCCF);background:#fff;color:var(--tt-pine, #2F4536);font-size:22px;line-height:1;cursor:pointer}
.tt-rules h2{font-family:var(--font-display, "Fraunces","Iowan Old Style",Georgia,serif);font-weight:500;font-size:30px;color:var(--tt-pine, #2F4536);margin:8px 0 4px;clear:none}
.tt-rules h3{font:600 12px var(--font-head, "Outfit",system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--tt-muted, #6B6A63);margin:24px 0 6px}
.tt-rules p,.tt-rules li{margin:0 0 8px}
.tt-rules ul{padding-left:20px}
.tt-rules table{border-collapse:collapse;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.tt-rules th,.tt-rules td{text-align:left;padding:5px 16px 5px 0;border-bottom:1px solid var(--tt-line, #E3DCCF)}
.tt-rules .updated{color:var(--tt-muted, #6B6A63);font-size:12px}

/* ------------------------------------------------------------ album: the series you are collecting */
.tt-album{margin:14px 0 0}
.tt-album__title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font:600 11px/1.2 var(--font-head, "Outfit",system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--tt-muted, #6B6A63)}
.tt-album__count{color:var(--tt-pine, #2F4536);font-variant-numeric:tabular-nums}
/* One column per stamp in the series: the script sets --tt-album-n from the pool; nine since 2026-09-29. */
.tt-album__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--tt-album-n,9),1fr);gap:6px}
.tt-album[data-pool="gold"] .tt-album__row{grid-template-columns:repeat(4,1fr);max-width:260px}
.tt-album__stamp{position:relative;text-align:center;font:600 10px/1.2 var(--font-head, "Outfit",system-ui,sans-serif);color:var(--tt-muted, #6B6A63);transition:transform .3s}
.tt-album__pic{display:block;aspect-ratio:4/5;background:#fff;border:1px solid var(--tt-line, #E3DCCF);padding:2px;
  --hole:3px;--pitch:6px;
  background:
    radial-gradient(circle at calc(var(--pitch)/2) 0,var(--stamp-bg) calc(var(--hole)/2),transparent calc(var(--hole)/2 + .4px)) top left/var(--pitch) var(--hole) repeat-x,
    radial-gradient(circle at calc(var(--pitch)/2) 100%,var(--stamp-bg) calc(var(--hole)/2),transparent calc(var(--hole)/2 + .4px)) bottom left/var(--pitch) var(--hole) repeat-x,
    radial-gradient(circle at 0 calc(var(--pitch)/2),var(--stamp-bg) calc(var(--hole)/2),transparent calc(var(--hole)/2 + .4px)) top left/var(--hole) var(--pitch) repeat-y,
    radial-gradient(circle at 100% calc(var(--pitch)/2),var(--stamp-bg) calc(var(--hole)/2),transparent calc(var(--hole)/2 + .4px)) top right/var(--hole) var(--pitch) repeat-y,#fff}
.tt-album__pic img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.6) brightness(1.25);opacity:.45;transition:filter .5s,opacity .5s}
.tt-album__val{display:block;margin-top:4px;color:var(--tt-muted, #6B6A63)}
.tt-album__odds{display:block;font-weight:500;font-size:9px;color:var(--tt-muted, #6B6A63);opacity:.8}
.tt-album__stamp.is-got .tt-album__pic img{filter:none;opacity:1}
.tt-album__stamp.is-got .tt-album__val{color:var(--tt-pine, #2F4536)}
.tt-album__stamp.is-got::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--tt-clay, #A55A35);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tt-album__stamp.is-new{animation:tt-album-pop .6s cubic-bezier(.2,1.6,.3,1) both}
.tt-album__stamp.is-again .tt-album__pic{box-shadow:0 0 0 2px var(--tt-clay, #A55A35)}
@keyframes tt-album-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.tt-draw{--stamp-bg:var(--tt-cream, #F8F4ED)}
.tt-album{--stamp-bg:#fff}
.tt-dm .tt-album{--stamp-bg:#2A2E28}
.tt-dm .tt-album__title,.tt-dm .tt-album__val,.tt-dm .tt-album__odds{color:#AFC0B2}
.tt-dm .tt-album__count,.tt-dm .tt-album__stamp.is-got .tt-album__val{color:#F8F4ED}
.tt-dm .tt-album__pic{border-color:#556054}
@media (max-width:720px){
  .tt-album__row{gap:4px}
  .tt-album__stamp{font-size:9.5px}
  .tt-album__odds{font-size:8.5px}
}

/* set complete → gold draw */
.tt-album.is-complete .tt-album__count{color:var(--tt-gold, #B8892E);font-weight:700}
.tt-draw__set{margin:14px auto 0;padding:14px 16px;max-width:460px;border-radius:14px;background:linear-gradient(135deg,#FBF3DD,#F5E6BC);border:1px solid #E4C46A;text-align:center}
.tt-draw__set-title{margin:0 0 4px;font:600 12px/1.2 var(--font-head, "Outfit",system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#9E7420}
.tt-draw__set .tt-draw__p{margin-bottom:10px}
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn--gold{background:linear-gradient(135deg,#9E7420,#C9A445 55%,#9E7420);border-color:#9E7420;color:#fff}
:is(.tt-draw,.tt-dm,.tt-verify) .tt-btn--gold:hover{background:#9E7420}
.tt-dm .tt-draw__set{background:#3A3420;border-color:#7D6A2A}
.tt-dm .tt-draw__set-title{color:#E9CF7A}

/* banked draws */
.tt-draw__pill{display:inline-block;margin:0 auto 8px;padding:4px 10px;border-radius:999px;background:var(--tt-sand, #E7DCC7);color:var(--tt-pine, #2F4536);font:600 11px/1.2 var(--font-head, "Outfit",system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase}
/* Same trap: the pill is printed with [hidden] and refreshNext() only clears it when a draw is
 * actually banked. Without this the popup opened on "0 more stamps waiting". */
.tt-draw__pill[hidden]{display:none}
.tt-draw__step[data-step="scratch"]{text-align:center}
.tt-draw__set--five{background:linear-gradient(135deg,#EEF3EE,#DCE7DE);border-color:var(--tt-sage, #8AA08F)}
.tt-draw__set--five .tt-draw__set-title{color:var(--tt-pine, #2F4536)}
.tt-dm .tt-draw__set--five{background:#2F3A31;border-color:#556054}
.tt-dm .tt-draw__set--five .tt-draw__set-title{color:#AFC0B2}

/* ------------------------------------------------------------ the module on /postcards/ */
.tt-draw{margin-bottom:48px}
/* ------------------------------------------------------------ verify sheet (prove an address) */
.tt-verify{position:fixed;inset:0;z-index:9600;display:none;align-items:flex-end;justify-content:center;padding:14px;font-family:var(--font-body, "Inter",system-ui,sans-serif)}
.tt-verify.is-open{display:flex}
.tt-verify__backdrop{position:absolute;inset:0;background:rgba(18,20,17,.6)}
.tt-verify__card{position:relative;z-index:1;width:100%;max-width:440px;background:#fff;border-radius:18px;padding:24px 22px 22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.tt-verify__card h3{font-family:var(--font-display, Georgia,serif);font-weight:500;font-size:24px;color:var(--tt-pine, #2F4536);margin:0 0 6px}
.tt-verify__card p{margin:0 0 14px;color:var(--tt-ink, #292723);line-height:1.5}
.tt-verify__close{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:var(--tt-cream, #F8F4ED);color:var(--tt-pine, #2F4536);font-size:20px;cursor:pointer}
@media (min-width:721px){.tt-verify{align-items:center}}
/* ------------------------------------------------------------ rules page */
.tt-rules-page{width:min(100% - 40px,680px);margin:0 auto;padding:40px 0 80px;font-family:var(--font-body, "Inter",system-ui,sans-serif);font-size:15px;line-height:1.6;color:var(--tt-ink, #292723)}
.tt-rules-page h1{font-family:var(--font-display, Georgia,serif);font-weight:500;font-size:clamp(30px,5vw,40px);color:var(--tt-pine, #2F4536);margin:0 0 4px;line-height:1.1}
.tt-rules-page h2{font:600 12px var(--font-head, system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--tt-muted, #6B6A63);margin:26px 0 6px}
.tt-rules-page p,.tt-rules-page li{margin:0 0 8px}
.tt-rules-page ul{padding-left:20px}
.tt-rules-page table{border-collapse:collapse;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.tt-rules-page th,.tt-rules-page td{text-align:left;padding:5px 16px 5px 0;border-bottom:1px solid var(--tt-line, #E3DCCF)}
.tt-rules-page .updated{color:var(--tt-muted, #6B6A63);font-size:12px;margin-bottom:18px}
.tt-rules-page a{color:var(--tt-pine, #2F4536)}
/* ------------------------------------------------------------ thank-you note */
.tt-draw-thanks{margin:22px 0;padding:16px 18px;border-radius:14px;background:var(--tt-cream, #F8F4ED);border:1px solid var(--tt-line, #E3DCCF);display:flex;gap:14px;align-items:center;font-family:var(--font-body, "Inter",system-ui,sans-serif)}
.tt-draw-thanks img{width:56px;height:70px;object-fit:cover;border:1px solid var(--tt-pine, #2F4536);padding:3px;background:#fff}
.tt-draw-thanks p{margin:0;line-height:1.45}
.tt-draw-thanks strong{display:block;font-family:var(--font-display, Georgia,serif);font-weight:500;font-size:20px;color:var(--tt-pine, #2F4536)}
.tt-draw-thanks a{color:var(--tt-clay, #A55A35);font-weight:600}

/* (The inline ticket — PDP, cart, paid landing — left with the free draw on 2026-09-29.) */

/* ------------------------------------------------------------ before the bell (launch countdown) */
.tt-draw--soon .tt-draw__soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 12px 16px;background:var(--tt-cream, #F8F4ED);border-radius:14px}
.tt-draw--soon .tt-draw__soon img{width:120px;height:150px;object-fit:cover;border-radius:8px;box-shadow:0 10px 26px rgba(41,39,35,.16)}
.tt-draw__soon-count{margin:0;font:600 30px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;color:var(--tt-pine, #2F4536);font-variant-numeric:tabular-nums}
.tt-draw__soon-note{margin:0;font-size:13px;line-height:1.5;color:var(--tt-muted, #6B6A63)}
.tt-draw__soon-note a{color:inherit}
@media (max-width:720px){ .tt-draw__soon-count{font-size:26px} }

/* ------------------------------------------------------------ cart wallet
   The stamps a shopper is holding, shown beside the cart total. Sits inside
   the block cart's sidebar, so it borrows that column's width and has to look
   like it belongs to the summary rather than to the draw page it came from. */
.tt-wallet{
  margin:0 0 24px;padding:18px 18px 16px;border-radius:14px;background:#fff;
  border:1px solid var(--tt-line, #E3DCCF);
  font-family:var(--font-body, "Inter", system-ui, sans-serif);color:var(--tt-ink, #292723);
}
.tt-wallet__head{margin:0 0 14px}
.tt-wallet__title{
  margin:0 0 4px;font-family:var(--font-body, "Inter", system-ui, sans-serif);
  font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--tt-muted, #6B6A63);
}
.tt-wallet__lede{margin:0;font-size:14px;line-height:1.45;color:var(--tt-ink, #292723)}
.tt-wallet__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tt-wallet__item{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:10px;border-radius:10px;background:var(--tt-cream, #F8F4ED);
  border:1px solid transparent;
}
.tt-wallet__item.is-on{background:#EEF3EC;border-color:#CBDCC5}
.tt-wallet__item.is-shut{background:transparent;border-color:var(--tt-line, #E3DCCF)}
.tt-wallet__item.is-shut .tt-wallet__stamp{opacity:.45}
.tt-wallet__stamp{
  width:40px;height:50px;object-fit:cover;border-radius:4px;display:block;
  background:#fff;box-shadow:0 1px 2px rgba(41,39,35,.12);
}
.tt-wallet__body{min-width:0}
.tt-wallet__amount{margin:0;font-size:15px;font-weight:600;line-height:1.2}
.tt-wallet__item.is-shut .tt-wallet__amount{color:var(--tt-muted, #6B6A63)}
.tt-wallet__note{margin:2px 0 0;font-size:12.5px;line-height:1.35;color:var(--tt-muted, #6B6A63)}
.tt-wallet__item.is-on .tt-wallet__note{color:#3B6B3B;font-weight:500}
.tt-wallet__btn{
  flex:none;appearance:none;border:1px solid var(--tt-pine, #2F4536);border-radius:999px;
  background:var(--tt-pine, #2F4536);color:#fff;
  font:inherit;font-size:13px;font-weight:600;line-height:1;padding:9px 14px;cursor:pointer;
  transition:opacity .15s ease, background-color .15s ease;
}
.tt-wallet__btn:hover:not(:disabled){opacity:.85}
.tt-wallet__btn:disabled{opacity:.35;cursor:default}
.tt-wallet__btn--drop{
  background:transparent;color:var(--tt-muted, #6B6A63);border-color:var(--tt-line, #E3DCCF);
  font-weight:500;
}
/* "Use instead": replaces what is on the order rather than adding to it, so it reads quieter than "Use it". */
.tt-wallet__btn--swap{background:transparent;color:var(--tt-pine, #2F4536)}
.tt-wallet__rule{
  margin:12px 0 0;padding-top:10px;border-top:1px solid var(--tt-line, #E3DCCF);
  font-size:11.5px;line-height:1.45;color:var(--tt-muted, #6B6A63);
}
.tt-wallet__error{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:#A4442F}
@media (max-width:480px){
  .tt-wallet{padding:16px 14px 14px}
  .tt-wallet__item{grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:9px}
  .tt-wallet__stamp{width:34px;height:43px}
  .tt-wallet__btn{padding:8px 12px;font-size:12.5px}
}