/* "These deals are on fire" community page. Live-site palette and type.
   Motion: transform and opacity only, ease-out, all off under reduced motion. */
:root{
  --ink:#0d0e10; --ink-2:#151719; --navy:#16223f; --paper:#f3efe4; --paper-dim:#c9c4b6;
  --flame:#ff5a1f; --flame-2:#ff7a45; --brass:#c9a227; --text-dark:#171512; --text-dim:#5c564c;
  --display:'Big Shoulders Display','Oswald','Noto Sans Devanagari',Impact,system-ui,sans-serif; --text:'IBM Plex Sans','Noto Sans Devanagari',system-ui,sans-serif;
  --pad:clamp(16px,4vw,56px); --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font:400 clamp(1.0625rem,1rem + .25vw,1.1875rem)/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:4px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--flame-2);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--flame);color:#160a00;padding:12px 18px;font-weight:600;z-index:50}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;text-wrap:balance}
h2{font-size:clamp(2.4rem,1.2rem + 4.2vw,4.6rem);margin:.2em 0 .35em}
em.fl{font-style:normal;color:var(--flame)}
p{max-width:62ch}
.lead{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);line-height:1.45;color:var(--paper-dim)}
.lead.dark{color:var(--text-dim)}
.eyebrow{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--brass)}
.eyebrow.dark{color:#8a6d10}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(13,14,16,.86);backdrop-filter:blur(8px)}
.top-in{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.35rem;letter-spacing:.02em}
.brand b{color:var(--flame)}
.pill{text-decoration:none;font-weight:600;border:1px solid var(--flame);border-radius:999px;padding:10px 16px;font-size:.95rem;transition:transform .16s var(--ease)}
.pill:active{transform:scale(.97)}
@media (max-width:520px){.pill span{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;min-height:min(88svh,820px);display:grid;align-items:center;padding-block:72px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,14,16,.92) 0%,rgba(13,14,16,.55) 60%,rgba(13,14,16,.3) 100%)}
.hero-in{position:relative;z-index:2}
.hero h1{font-size:clamp(3.6rem,1.6rem + 9vw,9.5rem);margin:.15em 0 .3em}
.hero h1 .ln{display:block;animation:rise .7s var(--ease) both}
.hero h1 .ln+.ln{animation-delay:.12s}
.hero-mark{position:absolute;z-index:2;right:var(--pad);bottom:40px;width:clamp(110px,16vw,220px);height:auto;animation:flicker 2.6s ease-in-out infinite;transform-origin:50% 100%}
@media (max-width:700px){.hero-mark{opacity:.35;bottom:16px}}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600;border-radius:6px;padding:15px 22px;border:0;cursor:pointer;transition:transform .16s var(--ease),background-color .2s}
.btn:active{transform:scale(.97)}
.btn-fl{background:var(--flame);color:#160a00}
.btn-fl:hover{background:var(--flame-2)}
.btn-ghost{background:rgba(243,239,228,.14)}
.btn.wide{width:100%;margin-top:14px}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes flicker{0%,100%{transform:scale(1)}40%{transform:scale(1.03,.98)}70%{transform:scale(.99,1.03)}}

/* sections */
.sec{padding-block:clamp(64px,9vw,120px)}
.paper{background:var(--paper);color:var(--text-dark)}
.navy{background:var(--navy)}
.ink{background:var(--ink)}
.two{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:1.1fr .9fr;align-items:center}
@media (max-width:860px){.two{grid-template-columns:1fr}}

.steps{list-style:none;display:grid;gap:14px;margin:26px 0}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps b{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-size:1.2rem}
.status{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--text-dark);border-left:3px solid var(--flame);padding-left:12px}
.dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--flame);margin-top:8px;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(1.8)}}

.pick{background:#e8e2d3;border-radius:12px;padding:clamp(18px,3vw,30px)}
.choice{border:0;display:flex;flex-wrap:wrap;gap:8px}
.choice legend{font-weight:600;margin-bottom:10px;width:100%}
.choice label{cursor:pointer}
.choice input{position:absolute;opacity:0}
.choice span{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid currentColor;opacity:.75;transition:background-color .2s,color .2s,transform .16s var(--ease)}
.choice input:checked+span{background:var(--flame);border-color:var(--flame);color:#160a00;opacity:1}
.choice input:focus-visible+span{outline:3px solid var(--flame-2);outline-offset:2px}
.choice label:active span{transform:scale(.97)}
.gift-card{margin:20px 0 6px;background:var(--ink);color:var(--paper);border-radius:10px;padding:24px;min-height:190px;display:grid;align-content:center;gap:6px}
.gift-ico{width:56px;height:56px;color:var(--flame);transition:transform .25s var(--ease)}
.gift-card.swap .gift-ico{transform:scale(.85) rotate(-6deg)}
.gift-title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.9rem;line-height:1}
.gift-text{color:var(--paper-dim)}
.note{font-size:.88rem;color:var(--text-dim);margin-top:10px}
.ink .note,.navy .note{color:var(--paper-dim)}

/* why */
.why{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:center}
.why-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:10px}
.sig{margin-top:20px;font-weight:600;color:var(--brass)}
@media (max-width:760px){.why{grid-template-columns:1fr}.why-photo{max-width:380px}}

/* shops */
.shops{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:34px}
.shop{background:#1d2c50;border-radius:10px;padding:24px;display:grid;gap:8px;transition:transform .2s var(--ease),background-color .2s}
.shop:hover{transform:translateY(-3px);background:#24365f}
.shop h3{font-size:1.8rem}
.tag{font-size:.9rem;font-weight:600;color:var(--flame)}

/* window sign preview (1 x 2 proportions) */
.field{display:block;font-weight:600;margin:18px 0 6px}
.opt{font-weight:400;opacity:.7}
.input{width:100%;padding:14px;border-radius:6px;border:1px solid #cfc7b4;background:#fff;color:var(--text-dark)}
.ink .input{background:var(--ink-2);border-color:rgba(243,239,228,.25);color:var(--paper)}
.sign{justify-self:center;width:min(100%,340px);aspect-ratio:1/2;background:var(--ink);color:var(--paper);border:6px solid var(--flame);border-radius:6px;padding:28px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.sign-kick{letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;color:var(--brass);font-weight:600}
.sign-shop{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.9rem;line-height:1;overflow-wrap:anywhere}
.sign-big{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:3rem;line-height:.9;margin-top:auto}
.sign-big span{color:var(--flame);display:block}
.sign-sub{font-size:.9rem;color:var(--paper-dim)}
.sign-foot{margin-top:auto;font-weight:600;font-size:.9rem;color:var(--brass)}

/* form */
.form{background:var(--ink-2);border-radius:12px;padding:clamp(18px,3vw,30px)}
.contact{margin-top:20px;font-weight:600;line-height:1.9}
.contact a{color:var(--flame)}

/* footer */
.foot{background:var(--ink-2);padding-block:28px}
.foot-in p{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.foot .small{font-size:.85rem;color:var(--paper-dim);margin-top:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-bg{display:none}
  html{scroll-behavior:auto}
}
/* darker flame on the light paper sections for contrast */
.paper em.fl{color:#b8380b}

/* ---------- Thanksgiving edition ---------- */
.season{position:relative;overflow:hidden;background:linear-gradient(180deg,#1a1210 0%,#2a1a10 100%)}
.season .lead{color:#e3d6c2}
.season-list{list-style:none;display:grid;gap:14px;margin-top:24px}
.season-list li{display:grid;gap:2px;padding-left:18px;position:relative}
.season-list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50% 0;background:var(--flame);transform:rotate(45deg)}
.season-list b{font-weight:600}
.season-list span{color:#c9bba6}

/* the 3D turkey: three stacked layers at different depths, tilted by JS */
.turkey-stage{display:grid;justify-items:center;gap:10px;perspective:900px}
.turkey{position:relative;width:min(100%,380px);aspect-ratio:1;border:0;background:radial-gradient(closest-side,rgba(255,90,31,.22),transparent 72%);cursor:pointer;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);border-radius:50%}
.turkey:focus-visible{outline:3px solid var(--flame-2);outline-offset:6px}
.t-layer{position:absolute;inset:0;width:100%;height:100%}
.t-tail{transform:translateZ(-40px) scale(1.08)}
.t-body{transform:translateZ(0)}
.t-head{transform:translateZ(46px) scale(.94)}
.fan{transform-origin:150px 200px;animation:fan 3.2s ease-in-out infinite}
.head{transform-origin:150px 180px}
.wattle{transform-origin:150px 136px;animation:sway 2.4s ease-in-out infinite}
.wing{transform-box:fill-box;transform-origin:50% 0}
@keyframes fan{0%,100%{transform:scale(1)}50%{transform:scale(1.05,1.03)}}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* gobble: head bobs, wattle shakes, wings flap, bubble pops */
.turkey.gobbling .head{animation:bob .9s cubic-bezier(.3,1.4,.5,1)}
.turkey.gobbling .wattle{animation:shake .15s linear 6}
.turkey.gobbling .wl{animation:flapL .3s ease-in-out 3}
.turkey.gobbling .wr{animation:flapR .3s ease-in-out 3}
.turkey.gobbling .fan{animation:puff .9s var(--ease)}
@keyframes bob{0%{transform:none}20%{transform:translate(6px,-10px) rotate(10deg)}40%{transform:translate(-6px,4px) rotate(-12deg)}60%{transform:translate(5px,-6px) rotate(8deg)}80%{transform:translate(-3px,2px) rotate(-4deg)}100%{transform:none}}
@keyframes shake{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes flapL{50%{transform:rotate(-24deg)}}
@keyframes flapR{50%{transform:rotate(24deg)}}
@keyframes puff{40%{transform:scale(1.14,1.1)}100%{transform:scale(1)}}
.gobble{position:absolute;top:2%;right:4%;background:var(--paper);color:var(--text-dark);font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.4rem;padding:8px 14px;border-radius:14px 14px 14px 2px;opacity:0;transform:translateZ(60px) scale(.6);transition:opacity .2s,transform .3s var(--ease);pointer-events:none}
.turkey.gobbling .gobble{opacity:1;transform:translateZ(60px) scale(1)}
.turkey-hint{font-size:.9rem;color:#c9bba6}

/* falling leaves behind the band */
.leaves{position:absolute;inset:0;pointer-events:none}
.leaves i{position:absolute;top:-30px;width:16px;height:16px;border-radius:0 60% 0 60%;background:var(--flame);opacity:.7;animation:fall 11s linear infinite}
.leaves i:nth-child(2n){background:var(--brass);width:12px;height:12px}
.leaves i:nth-child(3n){background:#b8380b}
.leaves i:nth-child(1){left:6%;animation-delay:0s}
.leaves i:nth-child(2){left:20%;animation-delay:-3s;animation-duration:13s}
.leaves i:nth-child(3){left:38%;animation-delay:-6s}
.leaves i:nth-child(4){left:55%;animation-delay:-1.5s;animation-duration:14s}
.leaves i:nth-child(5){left:70%;animation-delay:-8s}
.leaves i:nth-child(6){left:84%;animation-delay:-4.5s;animation-duration:12s}
.leaves i:nth-child(7){left:94%;animation-delay:-10s}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(30px,50vh) rotate(180deg)}100%{transform:translate(-20px,110vh) rotate(360deg)}}
.season .wrap{position:relative;z-index:1}

/* Thanksgiving tag in the hero */
.edition{display:inline-flex;align-items:center;gap:8px;background:rgba(201,162,39,.16);color:#e9cf74;font-weight:600;font-size:.95rem;padding:7px 14px;border-radius:999px;margin-bottom:6px}
.edition::before{content:"";width:10px;height:10px;border-radius:0 60% 0 60%;background:var(--brass)}

@media (prefers-reduced-motion:reduce){.leaves{display:none}.turkey{transform:none}}


/* Grok's add-ons: garland across the top of the band, pumpkins and pie side by side below */
.garland-row{position:relative;z-index:1;margin-top:calc(-1 * clamp(64px,9vw,120px))}
.turkey-slot{color:#e3d6c2}
.fixings{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,4vw,56px);margin-top:clamp(40px,6vw,72px)}
.fixings figure{display:grid;gap:8px;justify-items:center}
.fixings figcaption{font-size:.9rem;color:#c9bba6}
@media (max-width:640px){.fixings{grid-template-columns:1fr}}
/* the old hand-drawn icon in the gift card is retired */
.gift-ico{display:none}

/* Thanksgiving decorations scattered through the page (Grok add-ons). Remove with their divs after the holiday. */
.sec{position:relative}
.sec > .g-top{position:absolute;top:0;left:0;right:0;z-index:2}
.hero-garland{position:absolute;top:0;left:0;right:0;z-index:3}
.hero-garland [data-aa-garland]+[data-aa-garland]{position:absolute;top:10px;left:4%;right:4%}
.hero .leaves{z-index:1}
.deco{display:grid;justify-items:center}
.deco-turkey{margin-top:clamp(36px,5vw,64px)}
.deco-turkey .aat-hint{color:var(--text-dim)}
.deco-pumpkins{margin-top:clamp(36px,5vw,56px)}
.deco-pumpkins .aap{width:min(100%,360px)}
.deco-pie{margin-top:28px;justify-items:start}
.deco-pie .aapie{width:min(100%,280px);margin:0}
@media (max-width:860px){.deco-pie{justify-items:center}.deco-pie .aapie{margin-inline:auto}}
/* Grok's turkey sits in the gift card where the old outline was */
.gift-turkey{width:min(100%,260px);margin:0 auto 6px}
.gift-turkey .aat-hint{color:var(--paper-dim)}

/* v2 photo add-ons from Ashley (turkey, pumpkins, pie, leaves). Remove with their divs and scripts after the holiday. */
.hero.aal-band{min-height:min(88svh,820px);align-items:center;padding-block:72px}
.hero.aal-band::after{display:none}
.hero.aal-band>.aal-in{position:static}
.deco-pumpkins{width:min(100% - 2*var(--pad),620px);margin-inline:auto}
.deco-pumpkins>figure,.deco-pie>figure{width:100%}
.deco-pie{width:min(100%,380px)}
.gift-turkey{width:100%;margin:0 0 8px}
.gift-turkey .aat-hint{color:var(--paper-dim)}

/* language switch: EN / ES / РУ / हिं */
.top-r{display:flex;align-items:center;gap:10px}
.lang{display:flex;background:rgba(243,239,228,.1);border-radius:999px;padding:3px}
.lang button{border:0;background:none;color:var(--paper-dim);font:600 .85rem var(--text);padding:7px 10px;border-radius:999px;cursor:pointer;min-width:36px;transition:background-color .2s,color .2s,transform .16s var(--ease)}
.lang button[aria-pressed="true"]{background:var(--flame);color:#160a00}
.lang button:active{transform:scale(.95)}
.top .pill b{font-weight:600}
@media (max-width:520px){.top .pill{padding:9px 12px}.lang button{padding:6px 8px;min-width:30px}.brand{font-size:1.1rem}.brand img{width:28px;height:28px}}
@media (max-width:520px){.top .pill b,.top .pill span{display:none}.top .pill::before{content:"\260E";font-size:1.05rem;line-height:1}.top .pill{padding:8px 12px}}
/* Devanagari needs room: no uppercase squeeze, looser line height */
:lang(hi) h1,:lang(hi) h2,:lang(hi) h3,:lang(hi) .sign-big,:lang(hi) .gift-title{line-height:1.25;letter-spacing:0}

/* Russian words run long: smaller hero headline so nothing spills off a phone */
:lang(ru) .hero h1{font-size:clamp(2.4rem,1rem + 6.2vw,8rem)}
:lang(ru) h2{font-size:clamp(2rem,1rem + 3.6vw,4.2rem)}
h1,h2,.sign-big{overflow-wrap:break-word}
.two>*{min-width:0}
:lang(ru) .sign-big,:lang(es) .sign-big{font-size:clamp(2rem,1.4rem + 2vw,2.8rem)}