/* ============================================================
   VietTGo — new Vietnamese & Thai takeout, 4600 Chippewa St
   Poster / collage style. Brush headlines echo the logo.
   Palette from the brand board: black, red, white, basil green.
   ============================================================ */
:root{
  --ink:#0b0b0b;
  --ink-2:#151515;
  --paper:#fbf6ec;
  --paper-2:#f1e9d8;
  --red:#e8141c;
  --red-deep:#a90d12;
  --green:#6cc24a;
  --white:#fff;
  --muted:#b5afa6;
  --muted-dark:#6f685f;
  --hand:"Caveat Brush","Marker Felt",cursive;
  --sans:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --max:1180px;
  --r:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* paper grain over everything */
body::before{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.hand{font-family:var(--hand);font-weight:400;line-height:.95}
.label{font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}
.red{color:var(--red)}
.green{color:var(--green)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-weight:800;font-size:.95rem;letter-spacing:.02em;
  padding:.95em 1.5em;border-radius:999px;text-decoration:none;border:2px solid transparent;
  transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:var(--white);box-shadow:0 10px 30px rgba(232,20,28,.35)}
.btn-red:hover{background:#ff2a32}
.btn-ghost{border-color:rgba(255,255,255,.3);color:var(--white)}
.btn-ghost:hover{border-color:var(--white)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn svg{width:1.15em;height:1.15em;flex:none}

/* Stickers */
.sticker{
  display:inline-block;font-family:var(--hand);font-size:1.35rem;line-height:1;
  padding:.35em .8em .3em;border-radius:999px;transform:rotate(-2deg);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.sticker.green{background:var(--green);color:var(--ink)}
.sticker.red{background:var(--red);color:var(--white)}
.sticker.paper{background:var(--paper);color:var(--ink)}
.sticker.ink{background:var(--ink);color:var(--white)}

/* Brush divider */
.brush{display:block;width:100%;height:auto;margin:-1px 0}

/* ---------- Top bar ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(11,11,11,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top .wrap{display:flex;align-items:center;gap:1rem;min-height:70px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--hand);font-size:1.75rem;line-height:1}
.brand img{width:46px;height:46px}
.brand .t{color:var(--red)}
.nav{margin-left:auto;display:flex;gap:1.5rem;font-weight:600;font-size:.9rem}
.nav a{text-decoration:none;opacity:.8}
.nav a:hover{opacity:1;color:var(--red)}
.top .btn{font-size:.85rem;padding:.75em 1.25em}
@media (max-width:820px){.nav{display:none}.top .btn{margin-left:auto}}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(2rem,6vw,5rem) 0 clamp(3rem,7vw,6rem)}
.hero .glow{
  position:absolute;z-index:-2;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;
  right:-20vw;top:-10vw;background:radial-gradient(closest-side,rgba(232,20,28,.35),transparent 70%);
  pointer-events:none;
}
.hero .ring{position:absolute;z-index:-1;right:-14vw;top:-8vw;width:min(78vw,760px);opacity:.5;pointer-events:none}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero .grid>*{min-width:0}
.hero .stickers{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.4rem}
.hero .stickers .sticker:nth-child(2){transform:rotate(2deg)}
.hero h1{font-family:var(--hand);font-size:clamp(3.6rem,9.5vw,7.8rem);line-height:.9;letter-spacing:-.01em}
.hero h1 .w{display:block}
.hero h1 .w2{color:var(--red);padding-left:.25em}
.hero h1 .w3{padding-left:.08em}
.hero p.lead{font-size:clamp(1rem,1.5vw,1.2rem);max-width:36ch;color:var(--muted);margin:1.3rem 0 1.7rem}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.cta .sub{font-size:.85rem;color:var(--muted)}
.cta .sub a{text-decoration:underline;text-underline-offset:3px}
.hero .art{position:relative;width:min(100%,540px);margin-inline:auto}
.hero .logo{width:100%;height:auto;filter:drop-shadow(0 24px 50px rgba(232,20,28,.3));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(.7deg)}}
.steam{position:absolute;left:50%;top:9%;width:26%;transform:translateX(-50%);pointer-events:none}
.steam path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:5;stroke-linecap:round;animation:rise 3.2s ease-in-out infinite;opacity:0}
.steam path:nth-child(2){animation-delay:.9s}
.steam path:nth-child(3){animation-delay:1.8s}
@keyframes rise{0%{opacity:0;transform:translateY(16px)}25%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
@media (prefers-reduced-motion:reduce){.hero .logo,.steam path{animation:none}.steam path{opacity:.5}}
.hero .takeout{position:absolute;right:-2%;bottom:6%;transform:rotate(8deg)}
@media (max-width:880px){
  .hero .grid{grid-template-columns:1fr}
  .hero .art{width:min(72%,360px);order:-1;margin-bottom:1rem}
  .hero .takeout{display:none}
}

/* ---------- Ticker ---------- */
.ticker{
  background:var(--red);color:var(--white);overflow:hidden;
  font-family:var(--hand);font-size:clamp(1.4rem,2.8vw,2.1rem);
  padding:.45em 0;position:relative;z-index:2;
}
.ticker .track{display:flex;width:max-content;animation:scroll 36s linear infinite}
.ticker span{padding-inline:1em;white-space:nowrap}
.ticker span::after{content:"✦";margin-left:2em;color:var(--ink);font-size:.7em;vertical-align:middle}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none;flex-wrap:wrap;width:auto}}

/* ---------- Section basics ---------- */
section{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.h2{font-family:var(--hand);font-size:clamp(2.8rem,6.5vw,5.4rem);line-height:.95}
.lede{color:var(--muted);max-width:56ch;margin-top:1rem;font-size:1.02rem}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--green);margin-bottom:.7rem}

/* ---------- The spot (collage) ---------- */
.spot .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.collage{position:relative;min-height:500px}
.polaroid{
  position:absolute;background:var(--paper);padding:10px 10px 38px;border-radius:6px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);width:min(46%,250px);
  transition:transform .25s ease;
}
.polaroid img{width:100%;height:auto;border-radius:3px}
.polaroid .cap{position:absolute;left:12px;right:12px;bottom:8px;font-family:var(--hand);font-size:1.3rem;color:var(--ink);line-height:1;text-align:center}
.polaroid::before{
  content:"";position:absolute;left:50%;top:-12px;width:80px;height:24px;transform:translateX(-50%) rotate(-2deg);
  background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.08);
}
.polaroid.p1{left:0;top:0;transform:rotate(-3.2deg);z-index:3;width:min(58%,300px)}
.polaroid.p2{right:0;top:4%;transform:rotate(3.2deg);z-index:1;width:min(42%,220px)}
.polaroid.p3{right:5%;bottom:0;transform:rotate(-2deg);z-index:4;width:min(44%,230px)}
.polaroid.p4{left:10%;bottom:-3%;transform:rotate(2.6deg);z-index:2;width:min(34%,180px)}
.polaroid:hover{transform:rotate(0) scale(1.06);z-index:5}
.spot .addr{margin-top:1.6rem;display:flex;align-items:flex-start;gap:.8rem;font-size:1.05rem}
.spot .addr svg{width:26px;height:26px;color:var(--red);flex:none;margin-top:.15em}
.spot .addr b{display:block;font-weight:800}
@media (max-width:860px){
  .spot .grid{grid-template-columns:1fr}
  .collage{min-height:380px;margin-top:1rem}
  .polaroid{width:min(48%,220px)}
}

/* ---------- What's cooking (horizontal strip) ---------- */
.cook{background:var(--paper);color:var(--ink);clip-path:polygon(0 2%,100% 0,100% 98%,0 100%);padding-block:clamp(5rem,9vw,8rem)}
.cook .eyebrow{color:var(--red)}
.cook .lede{color:var(--muted-dark)}
.cook-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem}
.strip{
  display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:2.5rem var(--gutter) 2rem;
  margin:0 calc(-1 * var(--gutter));scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.card{
  flex:0 0 min(78vw,300px);scroll-snap-align:start;border-radius:var(--r);padding:1.5rem 1.4rem 1.6rem;
  box-shadow:0 18px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:.5rem;min-height:300px;
  transition:transform .2s ease;
}
.card:hover{transform:translateY(-6px) rotate(0)!important}
.card:nth-child(odd){transform:rotate(-1deg)}
.card:nth-child(even){transform:rotate(.8deg)}
.card.ink{background:var(--ink);color:var(--white)}
.card.red{background:var(--red);color:var(--white)}
.card.white{background:var(--white);color:var(--ink)}
.card.green{background:var(--green);color:var(--ink)}
.card .k{font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;opacity:.75}
.card h3{font-family:var(--hand);font-size:2.4rem;line-height:.95;margin:.1rem 0 .3rem}
.card p{font-size:.93rem;opacity:.85;flex:1}
.card ul{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.card li{font-family:var(--hand);font-size:1.15rem;line-height:1;padding:.35em .7em .3em;border-radius:999px;background:rgba(0,0,0,.12)}
.card.ink li{background:rgba(255,255,255,.12)}
.card.red li{background:rgba(0,0,0,.2)}
.card.more{justify-content:center;align-items:flex-start;background:transparent;border:2px dashed rgba(0,0,0,.25);box-shadow:none;color:var(--ink)}
.card.more h3{font-size:2rem}
.heat{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:.5rem}
.heat .hl{font-family:var(--hand);font-size:1.6rem;color:var(--red);line-height:1}
.heat ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.heat li{font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.55em .95em;border-radius:999px;background:var(--paper-2)}
.heat li:nth-child(2){background:#ffe3b3}.heat li:nth-child(3){background:#ffbd80}.heat li:nth-child(4){background:#ff7d5c;color:var(--white)}
.heat li.thai{background:var(--red);color:var(--white)}
.cook .note{margin-top:2rem;font-size:.9rem;color:var(--muted-dark);max-width:60ch}
.hint{font-family:var(--hand);color:var(--muted-dark);font-size:1.2rem;display:flex;align-items:center;gap:.4rem}
.hint svg{width:30px;height:16px}

/* ---------- How it goes ---------- */
.how{overflow:hidden}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.steps .path{position:absolute;left:12%;right:12%;top:38px;height:40px;pointer-events:none}
.steps .path path{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:10 12;stroke-linecap:round}
.step{text-align:center;padding:0 .5rem}
.step .n{
  width:80px;height:80px;border-radius:50%;margin:0 auto 1.2rem;display:grid;place-items:center;
  font-family:var(--hand);font-size:2.6rem;line-height:1;background:var(--red);color:var(--white);
  box-shadow:0 12px 30px rgba(232,20,28,.4);position:relative;z-index:1;transform:rotate(-4deg);
}
.step:nth-child(3) .n{transform:rotate(2.5deg);background:var(--paper);color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.step:nth-child(4) .n{transform:rotate(-2deg);background:var(--green);color:var(--ink);box-shadow:0 12px 30px rgba(108,194,74,.35)}
.step h3{font-family:var(--hand);font-size:2rem;line-height:1;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.95rem;max-width:30ch;margin-inline:auto}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:2.2rem}.steps .path{display:none}}

/* ---------- Good food good mood ---------- */
.mood{background:var(--red);color:var(--white);clip-path:polygon(0 0,100% 2.5%,100% 100%,0 97.5%);padding-block:clamp(5rem,9vw,8rem)}
.mood .big{font-family:var(--hand);font-size:clamp(3.4rem,11vw,9.5rem);line-height:.9}
.mood .big em{font-style:normal;color:var(--ink)}
.promises{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
@media (max-width:900px){.promises{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.promises{grid-template-columns:1fr}}
.promise{
  background:var(--paper);color:var(--ink);border-radius:18px;padding:1.1rem 1.2rem;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
}
.promise:nth-child(1){transform:rotate(-1.3deg)}
.promise:nth-child(2){transform:rotate(1deg)}
.promise:nth-child(3){transform:rotate(-.7deg)}
.promise:nth-child(4){transform:rotate(1.3deg);background:var(--ink);color:var(--white)}
.promise b{font-family:var(--hand);font-size:1.6rem;line-height:1;display:block;margin-bottom:.3rem}
.promise p{font-size:.9rem;opacity:.85}

/* ---------- Hours & location ---------- */
.find .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.5rem;align-items:start}
.map{border-radius:var(--r);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5);aspect-ratio:4/3;background:var(--ink-2);transform:rotate(-.6deg)}
.map iframe{width:100%;height:100%;border:0;filter:saturate(.85) contrast(1.05)}
.panel{background:var(--ink-2);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);border:1px solid rgba(255,255,255,.08)}
.panel h3{font-family:var(--hand);font-size:2rem;line-height:1;margin-bottom:1rem}
.panel .addr{font-size:1.1rem;line-height:1.45;margin-bottom:1.2rem}
.panel .addr b{display:block;font-weight:800}
.panel .phone{font-family:var(--hand);font-size:2.4rem;line-height:1;text-decoration:none;display:inline-block;margin:.2rem 0 1rem}
.panel .phone:hover{color:var(--green)}
.hours{width:100%;border-collapse:collapse;margin-top:1.2rem}
.hours td{padding:.5rem 0;border-bottom:1px dashed rgba(255,255,255,.14);font-size:.95rem}
.hours td:last-child{text-align:right;font-weight:800}
.hours tr.today td{color:var(--green)}
.panel .btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
@media (max-width:860px){.find .grid{grid-template-columns:1fr}.map{transform:none}}

/* ---------- Footer ---------- */
footer{padding:3rem 0 6.5rem;color:var(--muted);font-size:.9rem}
footer .row{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
footer img{width:110px}
footer .links{margin-left:auto;display:flex;gap:1.2rem}
footer a{text-decoration:none}
footer a:hover{color:var(--white)}
@media (min-width:821px){footer{padding-bottom:3rem}}

/* ---------- Mobile sticky bar ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:.6rem;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(11,11,11,.9);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.1);
}
.bar .btn{flex:1;justify-content:center}
.bar .call{flex:0 0 auto;padding-inline:1.1em}
@media (max-width:820px){.bar{display:flex}}

/* ============================================================
   Rewards + online ordering (added with the Frontcall wiring)
   ============================================================ */
[hidden]{display:none!important}
.btn.full{width:100%;justify-content:center}
button.btn{font-family:inherit;cursor:pointer}
.btn-ghost-ink{border-color:rgba(0,0,0,.25);color:var(--ink);background:transparent}
.btn-ghost-ink:hover{border-color:var(--ink)}

/* ---------- Top bar: sign in / points chip ---------- */
.signin{
  font-weight:800;font-size:.85rem;text-decoration:none;white-space:nowrap;
  padding:.68em 1.15em;border-radius:999px;border:2px solid rgba(255,255,255,.3);
  transition:border-color .15s ease,color .15s ease;
}
.signin:hover{border-color:var(--white)}
.signin.rewards-points-chip{
  display:inline-flex;align-items:baseline;gap:.35em;background:var(--green);border-color:var(--green);color:var(--ink);
  transform:rotate(-1.2deg);
}
.signin.rewards-points-chip span{font-family:var(--hand);font-size:1.35rem;line-height:.8}
.signin.rewards-points-chip small{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}
@media (max-width:820px){
  .top .btn{margin-left:0}
  .top .signin{margin-left:auto}
  .top .top-order{display:none}
}

/* ---------- Hero: grand opening ticket ---------- */
.hero .grid{grid-template-areas:"text art" "text ticket";row-gap:0}
.hero .text{grid-area:text}
.hero .art{grid-area:art;width:min(100%,330px)}
.ticket{
  grid-area:ticket;position:relative;justify-self:center;width:min(100%,430px);margin-top:-1.2rem;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));z-index:2;
  --notch:112px;
}
.ticket .tape{
  position:absolute;left:50%;top:-12px;width:96px;height:26px;transform:translateX(-50%) rotate(-1.5deg);z-index:2;
  background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.08);
}
.ticket .ticket-tag{position:absolute;right:-12px;top:-16px;z-index:3;transform:rotate(4deg);font-size:1.5rem}
.ticket-in{
  background:var(--paper);color:var(--ink);border-radius:20px;overflow:hidden;
  -webkit-mask:
    radial-gradient(circle 12px at 0 var(--notch),transparent 11.5px,#000 12px) left/51% 100% no-repeat,
    radial-gradient(circle 12px at 100% var(--notch),transparent 11.5px,#000 12px) right/51% 100% no-repeat;
          mask:
    radial-gradient(circle 12px at 0 var(--notch),transparent 11.5px,#000 12px) left/51% 100% no-repeat,
    radial-gradient(circle 12px at 100% var(--notch),transparent 11.5px,#000 12px) right/51% 100% no-repeat;
}
.ticket-top{
  height:var(--notch);background:var(--red);color:var(--white);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;padding:.6rem 1rem 0;
  background-image:radial-gradient(circle at 20% 0,rgba(255,255,255,.18),transparent 55%);
}
.ticket-top .label{font-size:.62rem;opacity:.9}
.ticket-top h2{font-size:clamp(2.5rem,5vw,3.3rem);line-height:.9}
.ticket-body{padding:1.2rem 1.4rem 1.3rem;border-top:2px dashed rgba(0,0,0,.28);text-align:center}
.ticket-join{font-size:.95rem;line-height:1.4;max-width:30ch;margin-inline:auto}
.stubs{display:grid;grid-template-columns:1fr 1fr;margin:1rem 0 1.1rem}
.stub{padding:.2rem .5rem}
.stub+.stub{border-left:2px dashed rgba(0,0,0,.22)}
.stub .amt{display:flex;align-items:baseline;justify-content:center;gap:.25rem;font-family:var(--hand);line-height:.85}
.stub .amt b{font-weight:400;font-size:clamp(3.6rem,7vw,4.6rem);color:var(--red)}
.stub .amt i{font-style:normal;font-size:1.9rem}
.stub .label{display:block;margin-top:.45rem;font-size:.64rem;line-height:1.35;color:var(--muted-dark)}
.ticket .fine{margin-top:.8rem;font-size:.68rem;color:var(--muted-dark);letter-spacing:.02em}
@media (max-width:880px){
  .hero .grid{grid-template-areas:"art" "text" "ticket"}
  .hero .art{width:min(64%,300px);order:0}
  .ticket{margin-top:2.2rem}
}

/* ---------- Rewards section (home) ---------- */
.club .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.club .grid>*{min-width:0}
.perks{list-style:none;margin:1.6rem 0 1.8rem;padding:0;display:grid;gap:1rem}
.perks li{display:flex;gap:1rem;align-items:flex-start;color:var(--muted);font-size:.97rem}
.perks b{display:block;color:var(--white);font-family:var(--hand);font-weight:400;font-size:1.5rem;line-height:1.05;margin-bottom:.15rem}
.perks .n{
  flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--hand);font-size:1.5rem;line-height:1;background:var(--green);color:var(--ink);transform:rotate(-4deg);
}
.perks li:nth-child(2) .n{background:var(--red);color:var(--white);transform:rotate(3deg)}
.perks li:nth-child(3) .n{background:var(--paper);transform:rotate(-2deg)}
.member{position:relative;padding:2rem 1rem}
.member-card{
  position:relative;aspect-ratio:1.586;width:min(100%,420px);margin-inline:auto;border-radius:24px;padding:1.4rem 1.5rem;
  background:
    radial-gradient(circle at 85% 15%,rgba(232,20,28,.55),transparent 55%),
    linear-gradient(135deg,#232323,#050505);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.6);
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
}
.member-card::after{
  content:"";position:absolute;right:-18%;bottom:-55%;width:80%;aspect-ratio:1;border-radius:50%;
  border:22px solid rgba(232,20,28,.5);border-left-color:transparent;transform:rotate(-30deg);pointer-events:none;
}
.member-card img{width:72px;height:72px}
.member-card .name{align-self:center;font-size:clamp(1.9rem,3.6vw,2.6rem);position:relative;z-index:1}
.member-card .who{position:relative;z-index:1;font-size:.7rem;color:var(--white)}
.member-card .who b{font-family:var(--hand);font-weight:400;font-size:1.8rem;letter-spacing:0;text-transform:none;margin-right:.2em}
.member-card .since{position:absolute;right:1.5rem;top:1.6rem;font-size:.58rem;color:var(--muted)}
.member .s1{position:absolute;left:0;bottom:.4rem;transform:rotate(-3.5deg);font-size:1.5rem}
.member .s2{position:absolute;right:0;top:.2rem;transform:rotate(3deg);font-size:1.3rem}
@media (max-width:860px){.club .grid{grid-template-columns:1fr}}

.panel-note{margin-top:1rem;font-size:.88rem;color:var(--muted)}
.panel-note a{color:var(--green);font-weight:800;text-underline-offset:3px}
footer .legal a{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Sub-pages: rewards sign-in, account, policies
   ============================================================ */
.page{padding-block:clamp(2.5rem,6vw,5rem) clamp(4rem,8vw,7rem);min-height:70vh;position:relative;overflow:hidden}
.page .glow{position:absolute;z-index:0;width:70vw;height:70vw;max-width:800px;max-height:800px;border-radius:50%;right:-25vw;top:-20vw;background:radial-gradient(closest-side,rgba(232,20,28,.28),transparent 70%);pointer-events:none}
.page .wrap{position:relative;z-index:1}
.h1{font-family:var(--hand);font-size:clamp(3rem,7.5vw,5.6rem);line-height:.92}

/* ---------- Rewards sign-in ---------- */
.join{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.join>*{min-width:0}
.join .mini-stubs{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 .4rem}
.join .mini-stubs .sticker{font-size:1.6rem}
.join .mini-stubs .sticker:nth-child(2){transform:rotate(3deg)}
.sheet{
  position:relative;background:var(--paper);color:var(--ink);border-radius:22px;padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:0 30px 60px rgba(0,0,0,.55);transform:rotate(.6deg);
}
.sheet::before{
  content:"";position:absolute;left:50%;top:-12px;width:96px;height:26px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.08);
}
.sheet .eyebrow{color:var(--red)}
.sheet h2{font-family:var(--hand);font-size:2.3rem;line-height:1;margin-bottom:.4rem}
.sheet p{color:var(--muted-dark);font-size:.93rem}
.rewards-form{display:none;gap:1.1rem}
.rewards-form.active{display:grid}
.field-group{display:grid;gap:.4rem}
.field-group label,.settings-field span{font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}
.field-group input,.settings-field input{
  font:inherit;font-size:1.15rem;font-weight:600;padding:.85em 1em;border-radius:14px;border:2px solid rgba(0,0,0,.16);
  background:var(--white);color:var(--ink);width:100%;
}
.field-group input:focus,.settings-field input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(232,20,28,.15)}
#rewards-code{letter-spacing:.35em;font-size:1.5rem;text-align:center}
.rewards-status,.account-status,.settings-status{border-radius:14px;padding:.8rem 1rem;font-weight:600;font-size:.92rem;margin-bottom:1rem;background:var(--paper-2);color:var(--ink)}
.rewards-status[data-tone="success"],.account-status[data-tone="success"],.settings-status[data-tone="success"]{background:#dff3d4;color:#1f5a0c}
.rewards-status[data-tone="error"],.account-status[data-tone="error"],.settings-status[data-tone="error"]{background:#ffe1e0;color:var(--red-deep)}
.marketing-consent{display:grid;gap:.5rem;margin-bottom:.4rem}
.settings-check{display:flex;align-items:flex-start;gap:.65rem;font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer}
.settings-check input{flex:none;width:20px;height:20px;margin-top:.15em;accent-color:var(--red)}
.settings-fine{font-size:.66rem!important;line-height:1.45;color:#8a837a!important}
.settings-fine a{text-decoration:underline}
.rewards-success{display:grid;gap:1rem}
.points-panel{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;background:var(--ink);color:var(--white);border-radius:16px;padding:1rem 1.3rem}
.points-panel span{font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.points-panel strong{font-family:var(--hand);font-weight:400;font-size:3rem;line-height:.9;color:var(--green)}
.cluster{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.rewards-toast{
  position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px) rotate(-1.2deg);z-index:80;opacity:0;
  background:var(--green);color:var(--ink);font-family:var(--hand);font-size:1.4rem;line-height:1.1;padding:.6em 1.1em;border-radius:999px;
  box-shadow:0 14px 34px rgba(0,0,0,.4);transition:opacity .25s,transform .25s;max-width:90vw;text-align:center;
}
.rewards-toast.show{opacity:1;transform:translate(-50%,0) rotate(-1.2deg)}
@media (max-width:860px){.join{grid-template-columns:1fr}.sheet{transform:none}}

/* ---------- Account ---------- */
.account-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem;margin-bottom:1.6rem}
.account-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:.4rem}
.account-stat{background:var(--paper);color:var(--ink);border-radius:18px;padding:1rem 1.2rem;box-shadow:0 14px 30px rgba(0,0,0,.35);min-width:0}
.account-stat:nth-child(1){transform:rotate(-1.5deg);background:var(--red);color:var(--white)}
.account-stat:nth-child(2){transform:rotate(1deg)}
.account-stat:nth-child(3){transform:rotate(-.8deg)}
.account-stat:nth-child(4){transform:rotate(1.2deg);background:var(--ink-2);color:var(--white);border:1px solid rgba(255,255,255,.1)}
.account-stat span{display:block;font-weight:800;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;opacity:.75}
.account-stat strong{display:block;font-family:var(--hand);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1;margin-top:.3rem;overflow-wrap:anywhere}
@media (max-width:820px){.account-summary{grid-template-columns:repeat(2,1fr)}}
.account-content{margin-top:2.5rem}
.account-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.account-tab{
  font:inherit;font-weight:800;font-size:.88rem;padding:.7em 1.2em;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.25);
}
.account-tab.active{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.account-panel-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.account-panel-head h2{font-family:var(--hand);font-size:2.6rem;line-height:1}
.account-list{display:grid;gap:.8rem}
.account-loading,.account-error,.account-empty{background:var(--ink-2);border:1px dashed rgba(255,255,255,.2);border-radius:18px;padding:1.4rem;color:var(--muted);display:grid;gap:.6rem;justify-items:start}
.account-error{color:#ff8f8f}
.account-empty strong{font-family:var(--hand);font-weight:400;font-size:1.7rem;line-height:1;color:var(--white)}
.account-order,.account-ledger-event{background:var(--ink-2);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1.1rem 1.3rem}
.account-order{cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.account-order:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.account-order-main{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.account-order-main span,.account-ledger-event p{font-size:.78rem;color:var(--muted)}
.account-order-main h3,.account-ledger-event h3{font-size:1.05rem;font-weight:800;margin:.15rem 0}
.account-order-main p{font-size:.8rem;color:var(--muted)}
.account-order-main strong{font-family:var(--hand);font-weight:400;font-size:1.7rem;line-height:1}
.account-order-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;margin-top:.9rem}
.account-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.75rem;color:var(--muted)}
.account-row>span{padding:.3em .7em;border-radius:999px;background:rgba(255,255,255,.08);font-weight:600;text-transform:capitalize}
.chip-points.positive{background:rgba(108,194,74,.2)!important;color:var(--green)}
.chip-points.negative{background:rgba(232,20,28,.2)!important;color:#ff8f8f}
.account-reorder-btn,.modal-item-reorder,.reward-redeem{
  font:inherit;font-weight:800;font-size:.8rem;padding:.6em 1.1em;border-radius:999px;border:0;cursor:pointer;
  background:var(--red);color:var(--white);
}
.account-reorder-btn:hover,.modal-item-reorder:hover,.reward-redeem:not(:disabled):hover{background:#ff2a32}
.account-ledger-event{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center}
.ledger-delta{font-family:var(--hand);font-size:2rem;line-height:1;min-width:3.2ch;text-align:center}
.ledger-delta.positive{color:var(--green)}
.ledger-delta.negative{color:#ff8f8f}
.account-load-more{margin-top:1rem}
/* milestone bar */
.reward-milestone{background:var(--ink-2);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1.2rem 1.3rem 2.2rem;margin-bottom:1.2rem}
.reward-milestone-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.8rem;margin-bottom:1rem}
.reward-milestone-label{display:block;font-weight:800;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.reward-milestone-points{font-family:var(--hand);font-weight:400;font-size:2.6rem;line-height:1;color:var(--green)}
.reward-milestone-next{font-size:.88rem;color:var(--muted)}
.reward-milestone-bar{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.1)}
.reward-milestone-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),#b6f08f);transition:width .6s ease}
.reward-milestone-ticks{position:absolute;inset:0}
.reward-milestone-tick{position:absolute;top:-3px;width:4px;height:20px;border-radius:2px;background:rgba(255,255,255,.35);transform:translateX(-50%)}
.reward-milestone-tick.reached{background:var(--white)}
.reward-milestone-tick span{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:.66rem;font-weight:800;color:var(--muted);white-space:nowrap}
.reward-milestone-tick:last-child span{left:auto;right:0;transform:none}
/* reward catalog */
.reward-catalog{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem}
.reward-card{background:var(--paper);color:var(--ink);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.reward-card:nth-child(odd){transform:rotate(-.8deg)}
.reward-card:nth-child(even){transform:rotate(.7deg)}
.reward-card.locked{opacity:.78}
.reward-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.reward-card-media img{position:absolute;inset:0;width:100%;height:100%}
.reward-card-media-blur{object-fit:cover;filter:blur(18px) brightness(.7);transform:scale(1.2)}
.reward-card-media-photo{object-fit:contain}
.reward-card-media--empty{display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#ff5a60,var(--red) 60%,var(--red-deep));color:rgba(255,255,255,.9)}
.reward-card-media--empty svg{width:54px;height:54px}
.reward-card-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.reward-card-name{font-family:var(--hand);font-size:1.6rem;line-height:1}
.reward-card-desc{font-size:.85rem;color:var(--muted-dark);flex:1}
.reward-card-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.6rem}
.reward-card-cost{font-weight:800;font-size:.95rem}
.reward-card-cost small{display:block;font-weight:600;font-size:.7rem;color:var(--muted-dark)}
.reward-redeem:disabled{background:var(--paper-2);color:var(--muted-dark);cursor:default}
/* modals */
body.modal-open{overflow:hidden}
.account-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem}
.account-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.account-modal-card{position:relative;background:var(--paper);color:var(--ink);border-radius:22px;padding:clamp(1.3rem,3vw,2rem);width:min(100%,540px);max-height:88vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.account-modal-card .eyebrow{color:var(--red)}
.account-modal-card h2{font-family:var(--hand);font-size:2.2rem;line-height:1;margin-bottom:.6rem}
.account-modal-card .account-row{color:var(--muted-dark)}
.account-modal-card .account-row>span{background:rgba(0,0,0,.08)}
.account-modal-card .account-loading,.account-modal-card .account-error,.account-modal-card .account-empty{background:var(--paper-2);border-color:rgba(0,0,0,.2);color:var(--muted-dark)}
.account-modal-close{position:absolute;right:.8rem;top:.6rem;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.08);font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.modal-items{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.7rem}
.modal-item{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:start;padding-bottom:.7rem;border-bottom:1px dashed rgba(0,0,0,.18)}
.modal-item-qty{font-family:var(--hand);font-size:1.3rem;line-height:1.1;color:var(--red)}
.modal-item small{display:block;font-size:.8rem;color:var(--muted-dark)}
.modal-item-end{display:grid;gap:.4rem;justify-items:end}
.modal-item-price{font-weight:800}
.modal-item-reorder{font-size:.7rem;padding:.45em .9em;background:var(--ink)}
.modal-totals{margin:0 0 1rem;display:grid;gap:.3rem}
.modal-totals>div{display:flex;justify-content:space-between;font-size:.92rem}
.modal-totals dd{margin:0;font-weight:600}
.modal-totals .discount{color:#2c7a12}
.modal-totals .grand{font-weight:800;font-size:1.1rem;border-top:2px solid var(--ink);padding-top:.5rem;margin-top:.3rem}
.modal-notes{background:var(--paper-2);border-radius:12px;padding:.7rem .9rem;font-size:.88rem;margin-bottom:1rem}
.settings-title{margin-bottom:.2rem!important}
.settings-lead{color:var(--muted-dark);font-size:.93rem;margin-bottom:1rem}
.settings-form{display:grid;gap:.9rem}
.settings-field{display:grid;gap:.35rem}
.settings-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.4rem}

/* ---------- Policy pages ---------- */
.policy{max-width:760px}
.policy .updated{color:var(--muted);font-size:.85rem;margin:.6rem 0 2rem}
.policy h2{font-family:var(--hand);font-size:2rem;line-height:1;margin:2.2rem 0 .7rem;color:var(--white)}
.policy p,.policy li{color:#d6d1c9;margin-bottom:.9rem}
.policy ul{padding-left:1.2rem}
.policy a{color:var(--green);text-underline-offset:3px}
.policy blockquote{margin:1rem 0;padding:1rem 1.2rem;border-left:4px solid var(--red);background:var(--ink-2);border-radius:0 14px 14px 0;color:#d6d1c9;font-size:.95rem}

/* hero art + ticket spacing */
.hero .art{width:min(100%,300px)}
.ticket{margin-top:.9rem}
.hero .takeout{right:auto;left:-14%;bottom:16%;transform:rotate(-5deg)}
@media (max-width:880px){
  .hero .art{width:min(64%,300px)}
  .ticket{margin-top:2.2rem}
}

/* sub-page fixes: nested <section>s must not inherit the home page's section rhythm,
   and <button> ghosts need an explicit transparent fill */
.page section:not(.sheet){padding-block:0}
button.btn-ghost,button.btn-ghost-ink{background:transparent}
.account-summary{margin-top:1rem}

/* rewards page: heading, form, perks (form sits right under the heading on phones) */
.join{grid-template-areas:"head sheet" "perks sheet";row-gap:0}
.join-head{grid-area:head}
.join-perks{grid-area:perks}
.join .sheet{grid-area:sheet}
@media (max-width:860px){
  .join{grid-template-columns:1fr;grid-template-areas:"head" "sheet" "perks"}
  .join .sheet{margin-top:2rem}
}
/* phone-only hero sticker that jumps to the grand opening ticket */
.sticker.deal{display:none;text-decoration:none;color:var(--white)}
.ticket{scroll-margin-top:90px}
@media (max-width:880px){.sticker.deal{display:inline-block;transform:rotate(-2deg)}}
@media (max-width:520px){.account-stat strong{font-size:1.45rem;white-space:nowrap}}

/* ---------- Straightened (Earl, 2026-11-13) ----------
   Level: rows of stickers, the rewards pages, the grand opening ticket, the scrolling
   banner and the member card. Tilt stays, kept gentle (about 4deg at most), on small
   one-off pieces: polaroids, food cards, number badges, single stickers. */
.hero .stickers .sticker:nth-child(n){transform:none}
.join .mini-stubs .sticker:nth-child(n){transform:none}
.join .sheet{transform:none}
.join .sheet::before{transform:translateX(-50%)}
.join .perks li:nth-child(n) .n{transform:none}
.account-page .account-stat:nth-child(n){transform:none}
.account-page .reward-card:nth-child(n){transform:none}

/* hours: same every day, so one line instead of a 7-row table */
.open-daily{margin-top:1.4rem;padding-top:1.2rem;border-top:1px dashed rgba(255,255,255,.16);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1rem}
.open-daily .label{color:var(--green)}
.open-daily .time{font-size:2.2rem}