/* Happy Table Bingo: home page styles. Edit this file directly. */
.hero{display:grid;grid-template-columns:43% 57%;min-height:360px;padding-top:38px;padding-bottom:62px;position:relative}
.hero-copy{position:relative;z-index:1}
.hero h1{line-height:.87;letter-spacing:-.065em}
.hero h1 em{font-style:normal;color:var(--red);position:relative;display:inline-block;padding-bottom:17px}
.hero h1 em:after{content:'';position:absolute;bottom:0;left:16%;width:75%;height:7px;background:var(--yellow);border-radius:50%;transform:rotate(1deg)}
.hero-copy>p{font-size:25px;line-height:1.35;margin:20px 0 18px 5px}
.hero-art{position:relative;min-width:0;height:350px;margin-top:-8px}
.bingo-card{width:156px;height:215px;background:linear-gradient(125deg,#d8d8d6,#bdbfbe);padding:13px 12px 15px;border-radius:3px;border:1px solid #e2e2df;box-shadow:4px 9px 12px #21140b32;display:flex;flex-direction:column;color:#969895}
.sunburst{position:absolute;right:-2%;top:-5%;width:90px;height:90px;transform:rotate(-10deg)}
.sunburst i{position:absolute;left:0;top:0;width:9px;height:40px;background:#fbc653;border-radius:60%;transform-origin:5px 80px}
.sunburst i:nth-child(2){transform:rotate(24deg)}
.sunburst i:nth-child(3){transform:rotate(48deg)}
.sunburst i:nth-child(4){transform:rotate(72deg)}
.sunburst i:nth-child(5){transform:rotate(96deg)}
.explore{padding:44px 0 44px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px}
.eyebrow{display:block;font-size:14px;text-transform:uppercase;letter-spacing:3px;margin-bottom:6px}
.section-heading p{font-size:18px;margin-top:5px}
.theme-note{font-size:22px;transform:rotate(-9deg);position:relative;margin-left:auto;margin-right:20px}
.theme-note b{font-size:55px;font-weight:400;position:absolute;right:-30px;top:24px}
.theme-grid{display:grid;gap:20px}
.theme-card{background:var(--cream);border-radius:12px 5px 14px 7px;padding:11px 12px 16px;position:relative;transition:transform .2s;box-shadow:0 4px 5px #7d5a1610;background-image:url('../assets/grain.svg?v=2');transform:rotate(-1.5deg)}
.theme-card:nth-child(2){transform:rotate(1deg)}
.theme-card:nth-child(3){transform:rotate(-1deg)}
.theme-card:nth-child(4){transform:rotate(1.5deg)}
.theme-card:hover{transform:rotate(0deg) translateY(-6px)}
.theme-image{height:211px;position:relative;display:grid;place-items:center}
.paint-patch{position:absolute;inset:15px 0 25px;background:var(--sage);opacity:.9;clip-path:polygon(2% 2%,10% 4%,20% 0,35% 3%,50% 0,64% 3%,80% 1%,94% 4%,98% 17%,96% 40%,100% 60%,96% 86%,99% 96%,80% 99%,65% 95%,42% 100%,27% 96%,6% 98%,0 80%,3% 60%,0 40%);background-image:url('../assets/grain.svg?v=2')}
.peach .paint-patch{background:var(--peach)}
.sky .paint-patch{background:var(--sky)}
.theme-image .bingo-card{height:184px;width:135px;transform:rotate(-3deg);position:relative}
.theme-card:nth-child(2) .bingo-card{transform:rotate(-2deg)}
.theme-card:nth-child(3) .bingo-card{transform:rotate(3deg)}
.theme-card:nth-child(4) .bingo-card{transform:rotate(-1deg)}
.theme-card h3{text-align:center;letter-spacing:-.05em}
.theme-card h3 span{margin-left:6px;font-family:var(--sans)}
.included{padding:56px 0 48px;margin-top:0;z-index:2;scroll-margin-top:25px}
/* Keep masked paper edges above the preceding section, without negative paint layers. */
.included::before,.included::after{z-index:0;pointer-events:none}
.included>.wrap{position:relative;z-index:1}
.included-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;align-items:center;gap:30px}
.included h2{font-size:clamp(46px,5.8vw,70px);transform:rotate(-5deg);position:relative}
.small-rays{color:#ffd069;position:absolute;right:3%;top:-16px;font-size:85px;transform:rotate(15deg)}
.included-item{text-align:center}
.included-item h3{font:700 18px/1.2 var(--sans);letter-spacing:0;margin-top:9px}
.mini-stack{width:170px;height:128px;position:relative;margin:auto}
.mini-stack .bingo-card{position:absolute;width:91px;height:125px;top:0;left:40px;padding:5px 7px 9px}
.mini-stack .mini-back{left:13px;transform:rotate(-11deg)}
.mini-stack .mini-middle{left:62px;transform:rotate(6deg)}
.mini-stack .mini-front{transform:rotate(-2deg)}
.calling-cards{position:relative;height:128px;width:155px;margin:auto}
.calling-cards i{position:absolute;top:15px;left:20px;width:75px;height:79px;border:1px solid #eee;border-radius:5px;background:linear-gradient(125deg,#e0e0de,#bdbfbe);box-shadow:3px 5px 8px #34281a30;transform:rotate(-9deg)}
.calling-cards i:nth-child(2){left:44px;top:4px;transform:rotate(7deg)}
.calling-cards i:nth-child(3){left:62px;top:34px;transform:rotate(6deg)}
.tokens{position:relative;width:155px;height:128px;margin:auto}
.tokens i{position:absolute;width:55px;height:55px;border-radius:50%;border:1px solid #eee;background:linear-gradient(125deg,#ddd,#bcbebc);top:34px;left:6px;box-shadow:3px 5px 8px #34281a30}
.tokens i:nth-child(2){left:61px;top:8px}
.tokens i:nth-child(3){left:44px;top:69px}
.tokens i:nth-child(4){left:100px;top:59px}
.occasions{padding-top:64px;padding-bottom:51px}
.occasions .section-heading{align-items:end}
.occasions .section-heading>p{position:relative;margin-right:50px;font-size:17px}
.occasion-heart{font-family:var(--serif);font-size:58px;position:absolute;color:var(--red);right:-65px;top:-15px;transform:rotate(-9deg)}
.occasion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.occasion-card{position:relative;display:flex;align-items:center;gap:19px;min-height:151px;padding:20px 18px;background-image:url('../assets/grain.svg?v=2');border-radius:9px 5px 10px 7px;transition:transform .2s}
.occasion-card:hover{transform:translateY(-4px)}
.peach.occasion-card{background-color:var(--peach)}
.sky.occasion-card{background-color:var(--sky)}
.sage.occasion-card{background-color:var(--sage)}
.occasion-card h3{font-size:28px;white-space:nowrap}
.occasion-card p{margin-top:9px;line-height:1.35;font-size:16px}
.together{background-color:var(--red);color:var(--cream);text-align:center;padding:48px 0 45px;margin-top:8px;z-index:2}
.together .wrap{position:relative}
.together h2{font-size:clamp(36px,5vw,60px);transform:rotate(-2deg);line-height:1.1}
.together p{margin:12px 0 18px;font-size:17px}
.together .button{font-size:16px;padding:10px 35px}
.banner-star{font-family:var(--serif);font-size:95px;position:absolute;left:0;bottom:0;line-height:1;transform:rotate(-15deg)}
.banner-squiggle{font-family:var(--serif);font-size:80px;position:absolute;right:0;bottom:-10px;transform:rotate(15deg)}
@media(min-width:1450px){.hero{padding-top:46px;min-height:415px}}
@media(min-width:1450px){.hero-art{height:370px}}
@media(max-width:1050px){.hero{grid-template-columns:44% 56%}}
@media(max-width:1050px){.hero-art{height:325px}}
@media(max-width:1050px){.hero-copy>p{font-size:22px}}
@media(max-width:1050px){.theme-image{height:185px}}
@media(max-width:1050px){.theme-image .bingo-card{height:163px;width:120px}}
@media(max-width:1050px){.theme-card{padding:8px 8px 16px}}
@media(max-width:1050px){.theme-grid{gap:16px}}
@media(max-width:1050px){.theme-card h3{font-size:21px}}
@media(max-width:1050px){.occasion-card{gap:10px;padding:18px 12px;min-height:147px}}
@media(max-width:1050px){.occasion-card h3{font-size:24px}}
@media(max-width:1050px){.occasion-card p{font-size:14px}}
@media(max-width:1050px){.included-grid{gap:12px}}
@media(max-width:1050px){.included-item h3{font-size:16px}}
@media(max-width:1050px){.section-heading p{font-size:16px}}
@media(max-width:1050px){.theme-note{font-size:20px;margin-right:10px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:8px;padding-top:27px;padding-bottom:47px}}
@media(max-width:760px){.hero-copy>p{font-size:22px;max-width:330px}}
@media(max-width:760px){.hero-copy>p br{display:none}}
@media(max-width:760px){.hero-copy .button{margin-top:2px}}
@media(max-width:760px){.hero-art{height:360px;width:94%;max-width:540px;margin:20px auto 0}}
@media(max-width:760px){.sunburst{top:-2%;right:3%}}
@media(max-width:760px){.section-heading{flex-wrap:wrap;align-items:center;gap:15px;margin-bottom:28px}}
@media(max-width:760px){.section-heading h2{font-size:51px}}
@media(max-width:760px){.section-heading>div{flex:1 1 60%}}
@media(max-width:760px){.section-heading p{font-size:16px}}
@media(max-width:760px){.theme-note{display:none}}
@media(max-width:760px){.section-heading>.button{padding:10px 20px;font-size:14px}}
@media(max-width:760px){.theme-grid{gap:18px}}
@media(max-width:760px){.theme-image{height:215px}}
@media(max-width:760px){.theme-image .bingo-card{width:133px;height:185px}}
@media(max-width:760px){.explore{padding:42px 0}}
@media(max-width:760px){.included{padding:47px 0 40px}}
@media(max-width:760px){.included-grid{grid-template-columns:repeat(3,1fr);gap:25px 4px}}
@media(max-width:760px){.included h2{grid-column:1/-1;transform:rotate(-3deg);text-align:center;margin-bottom:5px}}
@media(max-width:760px){.included h2 br{display:none}}
@media(max-width:760px){.small-rays{right:8%;top:-5px;font-size:65px}}
@media(max-width:760px){.mini-stack{transform:scale(.82);transform-origin:center bottom;width:135px}}
@media(max-width:760px){.mini-stack .bingo-card{left:24px}}
@media(max-width:760px){.mini-stack .mini-back{left:2px}}
@media(max-width:760px){.mini-stack .mini-middle{left:44px}}
@media(max-width:760px){.calling-cards,.tokens{transform:scale(.82);transform-origin:center bottom;width:130px}}
@media(max-width:760px){.included-item h3{font-size:14px}}
@media(max-width:760px){.occasions{padding-top:55px;padding-bottom:46px}}
@media(max-width:760px){.occasions .section-heading>p{margin-right:45px}}
@media(max-width:760px){.occasions .section-heading h2{font-size:47px}}
@media(max-width:760px){.occasion-grid{grid-template-columns:1fr;gap:14px}}
@media(max-width:760px){.occasion-card{min-height:125px;padding:18px 25px;gap:25px}}
@media(max-width:760px){.occasion-card h3{font-size:29px}}
@media(max-width:760px){.occasion-card p{font-size:16px}}
@media(max-width:760px){.occasion-card p br{display:none}}
@media(max-width:760px){.occasion-card .round-arrow{right:24px;bottom:42px}}
@media(max-width:760px){.occasion-card>div{padding-right:35px}}
@media(max-width:760px){.together{padding:45px 0 42px}}
@media(max-width:760px){.together h2{font-size:43px;max-width:460px;margin:auto}}
@media(max-width:760px){.together p{font-size:16px;max-width:330px;margin:15px auto 18px}}
@media(max-width:760px){.banner-star{font-size:56px;left:-10px;bottom:8px}}
@media(max-width:760px){.banner-squiggle{font-size:52px;right:-8px;bottom:0}}
@media(max-width:420px){.hero{padding-top:24px}}
@media(max-width:420px){.hero-art{height:280px;margin-top:28px}}
@media(max-width:420px){.sunburst{transform:scale(.75);transform-origin:top right}}
@media(max-width:420px){.theme-image{height:183px}}
@media(max-width:420px){.theme-image .bingo-card{width:109px;height:153px;padding:10px 8px}}
@media(max-width:420px){.section-heading h2{font-size:46px}}
@media(max-width:420px){.section-heading>div{flex-basis:100%}}
@media(max-width:420px){.included-grid{gap:10px 0}}
@media(max-width:420px){.included h2{font-size:46px}}
@media(max-width:420px){.mini-stack,.calling-cards,.tokens{transform:scale(.7);width:108px;margin-left:-2px;height:110px}}
@media(max-width:420px){.included-item h3{font-size:12px}}
@media(max-width:420px){.small-rays{right:0}}
@media(max-width:420px){.occasions .section-heading h2{font-size:42px}}
@media(max-width:420px){.occasion-card{padding-left:17px}}
@media(max-width:420px){.occasion-card p{font-size:14px}}
@media(max-width:420px){.together h2{font-size:37px}}
@media(max-width:420px){.banner-star{font-size:44px;left:-8px;bottom:6px}}
@media(max-width:420px){.banner-squiggle{display:none}}
.hero h1{white-space:nowrap}
.theme-card h3{display:flex;justify-content:center;align-items:center;gap:5px;white-space:nowrap}
.theme-card h3 span{margin:0}
.theme-card h3{font-size:clamp(17px,2.05vw,25px)}
@media(max-width:760px){.theme-card h3{font-size:24px}}
.hero h1{font-size:clamp(56px,7.1vw,84px)}
@media(max-width:760px){.hero h1{font-size:clamp(62px,12vw,88px)}}
@media(max-width:420px){.hero h1{font-size:clamp(54px,12vw,62px)}}
.theme-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.theme-card{min-width:0}
@media(max-width:760px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.theme-card h3{font-size:17px;gap:4px}}
.bingo-card.illustrated-card,.theme-image .bingo-card.illustrated-card,.mini-stack .bingo-card.illustrated-card{padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.illustrated-card img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(3px 7px 5px #21140b38)}
.explore::after{content:none}
.hero-art.hero-portrait{--portrait-size:560px;--portrait-bottom:-66px;height:440px;margin-top:-8px;isolation:isolate}
.hero-person{display:block;position:absolute;left:50%;bottom:var(--portrait-bottom);transform:translateX(-50%);width:var(--portrait-size);max-width:none;height:var(--portrait-size);object-fit:contain}
.explore{z-index:1}
.hero-portrait .sunburst{left:calc(50% + var(--portrait-size)*.33);right:auto;top:auto;bottom:calc(var(--portrait-bottom) + var(--portrait-size)*.46);transform:rotate(-10deg) scale(.9);transform-origin:left bottom}
@media(min-width:761px) and (max-width:1050px){.hero-art.hero-portrait{--portrait-size:min(520px,calc(50.4vw + 48px))}}
@media(min-width:761px) and (max-width:1050px){.hero-portrait .sunburst{transform:rotate(-10deg) scale(.75)}}
@media(max-width:760px){.hero-art.hero-portrait{--portrait-size:min(calc(84.6vw + 48px),498px);--portrait-bottom:-51px;height:380px;max-width:450px;margin:20px auto 0}}
@media(max-width:760px){.hero-portrait .sunburst{transform:rotate(-10deg) scale(.65)}}
@media(max-width:420px){.hero-art.hero-portrait{height:340px}}
.jungle-card-fan img{position:absolute;top:0;left:40px;width:91px;height:125px;object-fit:contain;filter:drop-shadow(3px 5px 4px #34281a40)}
.jungle-card-fan .jungle-card-back{left:10px;transform:rotate(-13deg);z-index:1}
.jungle-card-fan .jungle-card-middle{left:69px;transform:rotate(10deg);z-index:2}
.jungle-card-fan .jungle-card-front{transform:rotate(-2deg);z-index:3}
.jungle-calling-cards img{position:absolute;width:75px;height:auto;border-radius:3px;box-shadow:3px 5px 8px #34281a30}
.jungle-calling-cards .calling-camera{left:16px;top:12px;transform:rotate(-12deg);z-index:1}
.jungle-calling-cards .calling-bamboo{left:43px;top:3px;transform:rotate(6deg);z-index:2}
.jungle-calling-cards .calling-crocodile{left:65px;top:34px;transform:rotate(6deg);z-index:3}
.jungle-tokens img{position:absolute;width:55px;height:55px;object-fit:cover;border-radius:50%;border:1px solid #fff9ed;box-shadow:3px 5px 8px #34281a30;top:34px;left:6px;transform:rotate(-12deg)}
.jungle-tokens img:nth-child(2){left:61px;top:8px;transform:rotate(8deg)}
.jungle-tokens img:nth-child(3){left:44px;top:69px;transform:rotate(-5deg)}
.jungle-tokens img:nth-child(4){left:100px;top:59px;transform:rotate(17deg)}
@media(max-width:760px){.jungle-card-fan .jungle-card-back{left:0}}
@media(max-width:760px){.jungle-card-fan .jungle-card-middle{left:51px}}
@media(max-width:760px){.jungle-card-fan .jungle-card-front{left:25px}}
.jungle-card-fan,.jungle-calling-cards,.jungle-tokens{transform:scale(1.18);transform-origin:center bottom;margin-top:22px;margin-bottom:12px}
@media(min-width:761px) and (max-width:1050px){.jungle-card-fan,.jungle-calling-cards,.jungle-tokens{transform:scale(1.08)}}
@media(max-width:760px){.included-item{min-width:0}}
@media(max-width:760px){.jungle-card-fan,.jungle-calling-cards,.jungle-tokens{left:50%;translate:-50% 0;transform:scale(.94);height:128px;margin-left:0;margin-right:0}}
@media(max-width:760px){.jungle-card-fan{width:146px}}
@media(max-width:760px){.jungle-calling-cards,.jungle-tokens{width:155px}}
@media(max-width:420px){.jungle-card-fan,.jungle-calling-cards,.jungle-tokens{transform:scale(.8)}}
@media(max-width:360px){.jungle-card-fan,.jungle-calling-cards,.jungle-tokens{transform:scale(.72)}}
.home-accent-word{position:relative;display:inline-block;white-space:nowrap}
.occasions h2{padding-right:.65em}
.included-title-line{white-space:nowrap}
.included .small-rays,.occasions .heading-rays{position:absolute;display:block;left:calc(100% + .12em);right:auto;top:.08em;width:.5em;height:.75em;background:url('../assets/heading-rays.svg') center/contain no-repeat;font:inherit;margin:0;transform:none}
@media(max-width:760px){.included h2{font-size:clamp(30px,9.6vw,52px);padding-inline:.65em}}
@media(max-width:420px){.occasion-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.occasion-card{min-width:0;gap:14px;padding:18px 14px}}
@media(max-width:420px){.occasion-card>div{min-width:0;flex:1;padding-right:30px}}
@media(max-width:420px){.occasion-card h3{white-space:normal;font-size:clamp(23px,6.8vw,27px)}}
@media(max-width:420px){.occasion-card .round-arrow{right:12px;top:50%;bottom:auto;transform:translateY(-50%);width:30px;height:30px}}
@media(max-width:360px){.hero-portrait .sunburst{left:calc(50% + var(--portrait-size)*.27);transform:rotate(-10deg) scale(.55)}}
@media(max-width:360px){.hero-art.hero-portrait{--portrait-size:calc(100vw - 16px)}}

/* Retain the current artwork and decoration; improve the information rhythm. */
.theme-card>.art-style-badge{display:table;margin:2px auto 9px;font-size:10px}
@media(max-width:600px){
 .included-grid{grid-template-columns:minmax(0,1fr);gap:32px}
 .included h2{grid-column:auto;text-align:center;justify-self:center;padding-inline:.65em;font-size:clamp(30px,9vw,40px);margin-bottom:0}
 .included-item{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:212px auto;align-items:center;justify-items:center;gap:12px;text-align:center;min-height:0}
 .included-item h3{font-size:20px;line-height:1.3;margin:0}
 .jungle-card-fan,.jungle-calling-cards,.jungle-tokens{left:auto;translate:none;transform:scale(1.5);transform-origin:center;margin:0;height:128px}
 .theme-card h3{font-size:19px;line-height:1.18;letter-spacing:-.035em}
}
@media(max-width:360px){.theme-card h3{font-size:17px}}


/* Keep card titles and their arrows inside the two-column phone grid. */
@media(max-width:760px){
 .theme-card{transform:none;padding:10px 10px 15px}
 .theme-card:nth-child(n){transform:none}
 .theme-card h3{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:5px;min-height:48px;text-align:left;white-space:normal;font-size:clamp(18px,4.5vw,24px);line-height:1.2;letter-spacing:-.035em}
 .theme-card h3 .theme-name{min-width:0;font:inherit;overflow-wrap:normal}
 .theme-card h3>span[aria-hidden]{justify-self:end;font-size:21px}
}
@media(max-width:360px){.theme-card{padding-inline:8px}.theme-card h3{font-size:18px;grid-template-columns:minmax(0,1fr) 17px;gap:3px}.theme-card h3>span[aria-hidden]{font-size:19px}}
.theme-card h3 .theme-name{font:inherit;letter-spacing:inherit;margin:0}

/* Fixed fade and clipping frame; only the ray layer rotates on the compositor. */
.hero{isolation:isolate}
.hero-rays{--hero-ray-x:calc(50% + min(240.8px,19.35vw));--hero-ray-size:max(1500px,calc(100vw + 680px));--hero-ray-y:62%;--hero-ray-duration:120s;--hero-ray-yellow:#f8d47770;--hero-ray-peach:#f3b88966;position:absolute;z-index:0;pointer-events:none;inset:0 calc(50% - 50vw);overflow:hidden;mask-image:linear-gradient(to right,transparent 19%,#0003 35%,#000 56%)}
.hero-rays::before{content:'';position:absolute;left:calc(var(--hero-ray-x) - var(--hero-ray-size) / 2);top:calc(var(--hero-ray-y) - var(--hero-ray-size) / 2);width:var(--hero-ray-size);height:var(--hero-ray-size);background:repeating-conic-gradient(from -8deg,var(--hero-ray-yellow) 0deg 11deg,transparent 11deg 29deg,var(--hero-ray-peach) 29deg 41deg,transparent 41deg 60deg);transform:rotate(0turn);animation:htb-hero-ray-turn var(--hero-ray-duration) linear infinite;animation-play-state:paused}
.hero-rays.is-active::before{animation-play-state:running}
.hero-art{z-index:1}
@keyframes htb-hero-ray-turn{from{transform:rotate(0turn)}to{transform:rotate(1turn)}}
@media(min-width:761px) and (max-width:1050px){.hero-rays{--hero-ray-x:69.8%}}
@media(max-width:760px){.hero-rays{--hero-ray-x:50%;--hero-ray-size:max(900px,145vw);--hero-ray-yellow:#f8d47766;--hero-ray-peach:#f3b88959;top:auto;height:450px;mask-image:linear-gradient(to bottom,transparent,#000 26%)}}
@media(max-width:420px){.hero-rays{height:410px}}
@media(prefers-reduced-motion:reduce){.hero-rays::before{animation:none}}

/* Uploaded Every occasion artwork: preserve each image's full silhouette. */
.occasion-card .occasion-icon{display:block;flex:0 0 76px;width:76px;height:94px;object-fit:contain}
.occasion-card .occasion-icon-hearts{flex-basis:84px;width:84px}
@media(max-width:1050px){.occasion-card .occasion-icon{flex-basis:52px;width:52px;height:80px}.occasion-card .occasion-icon-hearts{flex-basis:56px;width:56px}}
@media(max-width:760px){.occasion-card .occasion-icon{flex-basis:64px;width:64px;height:86px}.occasion-card .occasion-icon-hearts{flex-basis:68px;width:68px}}
@media(max-width:420px){.occasion-card .occasion-icon{flex-basis:58px;width:58px;height:80px}}