/* Johnny’s Burritos — brand layer (v1.0.0): header wordmark, retro hero (sunburst, neon OPEN sign, badge),
   "order before the rush" band, mobile-first fixes. Loaded last. */
.section-kicker,.hero .script{font-size:1.35rem;color:var(--clay)}
.section-title{font-family:var(--font-display);letter-spacing:.01em}
.brand{gap:10px}
.brand-logo{width:52px;height:52px;flex:none;filter:drop-shadow(0 3px 6px rgba(31,42,68,.25))}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text strong{font-family:var(--font-display);font-weight:400;font-size:1.12rem;color:var(--clay)}
.brand-text small{font-family:"Pacifico",cursive;color:var(--ink);font-size:.82rem}
header.site{border-bottom-color:var(--gold)}

/* hero */
.hero-jb{background:radial-gradient(ellipse 80% 70% at 75% 45%,#fff7df 0,#fbecc8 45%,#f6d99a 100%);padding:84px 0 70px;text-align:left;border-bottom:6px solid var(--clay)}
.hero-jb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(90deg,var(--clay) 0 24px,var(--paper) 24px 48px);opacity:.9}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;position:relative;z-index:2}
.hero-jb h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,5.6vw,4rem);line-height:1.08;color:var(--ink);margin:0 0 16px;max-width:none}
.hero-jb .sub{margin:0 0 24px;max-width:520px}
.hero-jb .hero-ctas{justify-content:flex-start}
.sunburst{position:absolute;right:-30%;top:-40%;width:130%;aspect-ratio:1;z-index:0;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(242,177,52,.55) 0 7.5deg,transparent 7.5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0 35%,transparent 62%);mask:radial-gradient(circle,#000 0 35%,transparent 62%)}
.jb-motion2 .sunburst{animation:jb-spin 80s linear infinite}
@keyframes jb-spin{to{transform:rotate(360deg)}}
.hero-art{position:relative;aspect-ratio:1;max-width:420px;justify-self:center;width:100%}
.hero-badge{position:absolute;inset:6%;width:88%;height:88%;filter:drop-shadow(0 18px 30px rgba(31,42,68,.3))}
.hero-burrito{position:absolute;right:-6%;bottom:-4%;width:62%;border-radius:18px;border:5px solid #fff;box-shadow:0 18px 40px rgba(31,42,68,.3);transform:rotate(8deg)}
.jb-motion2 .hero-badge{animation:jb-float 6s ease-in-out infinite}
.jb-motion2 .hero-burrito{animation:jb-float2 5s ease-in-out infinite}
@keyframes jb-float{50%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes jb-float2{0%,100%{transform:rotate(8deg)}50%{transform:rotate(3deg) translateY(-10px)}}

/* neon OPEN sign */
.neon{display:inline-block;margin:0 0 10px;padding:4px 14px;border:3px solid #ff5a4e;border-radius:10px;font:400 1.05rem/1.2 var(--font-display);letter-spacing:.18em;color:#fff;background:#2a1612;
  box-shadow:0 0 8px #ff5a4e,inset 0 0 8px #ff5a4e;text-shadow:0 0 6px #ff8a7e,0 0 14px #ff3b2f}
.jb-motion2 .neon{animation:jb-neon 4s steps(1,end) infinite}
@keyframes jb-neon{0%,19%,23%,60%,100%{opacity:1}20%,22%,61%{opacity:.35}}

/* rush band */
.rush-band{background:linear-gradient(160deg,var(--ink),#2f3d63)!important;position:relative;overflow:hidden}
.rush-band h2{font-family:var(--font-display);font-weight:400;letter-spacing:.02em}
.rush-band cite{display:block;margin-top:12px;opacity:.75}
.rush-clock{width:70px;height:70px;margin:0 auto 12px;border-radius:50%;border:5px solid var(--gold);position:relative;background:#fff8e6}
.rush-clock .hand{position:absolute;left:50%;bottom:50%;width:4px;margin-left:-2px;background:var(--ink);border-radius:2px;transform-origin:50% 100%}
.rush-clock .h{height:18px;transform:rotate(30deg)}.rush-clock .m{height:26px;background:var(--clay)}
.jb-motion2 .rush-clock .m{animation:jb-spin 4s linear infinite}
.jb-motion2 .rush-clock .h{animation:jb-spin 48s linear infinite}

/* stats years */
.stat-n{color:var(--clay)}
.stat-box{border-bottom-color:var(--clay)}
.marquee{background:var(--ink);border-top-color:var(--gold);border-bottom-color:var(--clay)}
.marquee-track{font-family:var(--font-display);font-style:normal;font-weight:400}

/* order page: Toast alternative per store */
.toast-alt{text-align:center;margin:-4px 0 14px;font-family:"DM Sans",sans-serif;font-size:.9rem}
.toast-alt a{color:var(--clay-deep);text-decoration:underline}

/* drawn menu art: no "AI" note, keep tiles crisp */
.photo-frame img[src*="/assets/art/"]{object-fit:cover}

/* footer badge */
.foot-logo{height:96px}

/* phones */
@media(max-width:860px){
  .hero-jb{text-align:center;padding:30px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:6px}
  .hero-art{order:-1;max-width:240px}
  .hero-jb .hero-ctas{justify-content:center}
  .hero-jb .sub{margin:0 auto 22px}
  .sunburst{right:-60%;top:-20%;width:220%}
}
@media(max-width:420px){
  .brand-text strong{font-size:.98rem}
  .brand-logo{width:44px;height:44px}
  .hero-jb h1{font-size:2rem}
}
@media (prefers-reduced-motion: reduce){.sunburst,.hero-badge,.hero-burrito,.neon,.rush-clock .hand{animation:none!important}}
.about-badge{text-align:center;margin:0 auto 18px}.about-badge img{width:200px;height:200px}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:var(--gold);color:var(--ink)}
.neon.off{border-color:#7d6a66;box-shadow:none;color:#d9cfcc;text-shadow:none;animation:none!important;background:#3a2e2c}

/* ---- real logo (Oct 21): wide header logo, animated mascot + wordmark in the hero ---- */
.brand-logo-wide{height:52px;width:auto;display:block;filter:drop-shadow(0 2px 3px rgba(11,42,120,.18))}
header.site.scrolled .brand-logo-wide{height:44px}
.brand-text,.brand-logo{display:none}
.hero-art{aspect-ratio:666/400;max-width:520px}
.logo-stage{position:absolute;left:0;right:0;top:0;aspect-ratio:666/256;filter:drop-shadow(0 14px 22px rgba(11,42,120,.25))}
.ls-mascot{position:absolute;left:0;top:3.5%;width:30.8%;transform-origin:45% 96%}
.ls-word{position:absolute;left:28.1%;top:0;width:71.8%;transform-origin:50% 60%}
.jb-motion2 .ls-mascot{animation:jb-dance 2.6s ease-in-out infinite}
.jb-motion2 .ls-word{animation:jb-word 5s ease-in-out infinite}
@keyframes jb-dance{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg) translateY(-6px)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg) translateY(-4px)}80%{transform:rotate(3deg)}}
@keyframes jb-word{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(1deg) scale(1.04)}}
.hero-plate{position:absolute;right:2%;bottom:0;width:44%;border-radius:16px;overflow:hidden;border:5px solid #fff;box-shadow:0 16px 34px rgba(11,42,120,.28);transform:rotate(6deg)}
.hero-plate img{display:block;width:100%}
.jb-motion2 .hero-plate{animation:jb-float2 5s ease-in-out infinite}
.hero-jb h1{color:var(--ink)}
.foot-logo-link{display:inline-block;background:#fffaf0;border-radius:18px;padding:10px 16px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.foot-logo{height:74px;width:auto}
.about-badge img{width:min(420px,90%);height:auto}
.site-footer{background:#0b1f57}
.maloremi-credit{border-top-color:rgba(255,255,255,.12)}
@media(max-width:860px){.hero-art{max-width:340px}.hero-plate{width:38%;right:4%}}
@media(max-width:420px){.brand-logo-wide{height:42px}}
@media (prefers-reduced-motion: reduce){.ls-mascot,.ls-word,.hero-plate{animation:none!important}}
.hero-art{aspect-ratio:666/290;max-width:600px}
@media(max-width:860px){.hero-art{max-width:380px;margin-bottom:6px}}
.claim-icon{width:30px;height:auto;flex:none;margin-right:6px}

/* ---- round logo EST. 1963 (Oct 21) ---- */
.brand-logo-round{height:60px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(10,63,140,.25));transition:height .3s ease}
header.site.scrolled .brand-logo-round{height:48px}
.brand-logo-wide{display:none}
.hero-art{aspect-ratio:763/710;max-width:470px}
.logo-round-stage{position:absolute;inset:0;filter:drop-shadow(0 18px 28px rgba(10,63,140,.3))}
.lr-logo{width:100%;height:auto;display:block;transform-origin:50% 60%}
.jb-motion2 .lr-logo{animation:jb-bounce 3.2s cubic-bezier(.45,0,.3,1) infinite}
@keyframes jb-bounce{0%,100%{transform:rotate(-3deg) scale(1)}25%{transform:rotate(2deg) translateY(-12px) scale(1.02)}50%{transform:rotate(-1deg)}75%{transform:rotate(3deg) translateY(-6px)}}
.foot-logo{height:110px}
.about-badge img{width:min(300px,80%)}
.claim-icon{width:34px}
.neon{border-color:#ff4a3a}
@media(max-width:860px){.hero-art{max-width:300px}}
@media(max-width:420px){.brand-logo-round{height:50px}.hero-art{max-width:250px}}
@media (prefers-reduced-motion: reduce){.lr-logo{animation:none!important}}

/* ---- own palette (Oct 21): blue + yellow from the logo, red only as a small accent.
   Different from Mis Pollos (red/fire/cream) and Ten-Go (red/turquoise/charcoal). ---- */
body{background:var(--cream)}
header.site{background:#fff;border-bottom:4px solid var(--gold)}
.hero-jb{background:radial-gradient(ellipse 80% 75% at 72% 45%,#ffffff 0,#e3eeff 50%,#c9dcff 100%);border-bottom:6px solid var(--clay)}
.hero-jb::after{background:repeating-linear-gradient(90deg,var(--clay) 0 24px,var(--gold) 24px 48px);opacity:1}
.sunburst{background:repeating-conic-gradient(from 0deg,rgba(245,211,0,.6) 0 7.5deg,transparent 7.5deg 15deg);opacity:.55}
.hero-jb h1{color:var(--clay)}
.hero-jb h1 .clay-word{background:linear-gradient(100deg,#d9230f 0%,#d9230f 40%,#ff7a5c 50%,#d9230f 60%,#d9230f 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-kicker,.hero .script{color:#d9230f}
.section-title{color:var(--clay)}
.btn-clay,.cart-btn,.full-btn,.foot-btn{background:var(--clay)!important;color:#fff!important}
.btn-clay:hover,.cart-btn:hover,.full-btn:hover,.foot-btn:hover{background:var(--gold)!important;color:var(--clay)!important}
.btn-ghost{color:var(--clay);border-color:var(--clay)}
.cart-count{background:var(--gold);color:var(--clay)}
.lang-toggle button.active{background:var(--clay)}
.section-peach{background:linear-gradient(180deg,#eef4ff 0%,#dce9ff 100%)!important}
.clay-board{background:#fffbe6!important;border-color:rgba(245,211,0,.5)!important}
.loc-card,.item-card,.feat-card,.step-card{border-top-color:var(--gold)!important}
.step-num{background:var(--clay)!important;color:var(--gold)!important}
.price{background:var(--gold)!important;color:var(--clay)!important}
.add-btn,.mini-btn{border-color:var(--clay)!important;color:var(--clay)!important;background:#fff!important}
.add-btn:hover,.mini-btn:hover{background:var(--clay)!important;color:#fff!important}
.tab.active{background:var(--clay)!important;border-color:var(--clay)!important;color:#fff!important}
.tab{border-color:var(--clay)!important;color:var(--clay)}
.marquee{background:var(--gold)!important;color:var(--clay)!important;border-top-color:var(--clay)!important;border-bottom-color:var(--clay)!important}
.marquee-track i{color:#d9230f!important}
.stat-n{color:var(--clay)}
.stat-box{border-bottom-color:var(--gold);background:linear-gradient(180deg,#fff,#eef4ff)}
.rush-band{background:linear-gradient(160deg,#0a4a9c,#06336d)!important}
.rush-clock{border-color:var(--gold)}
.pickup-strip{background:var(--clay)!important}
.pickup-strip .btn{background:var(--gold)!important;color:var(--clay)!important}
.cater-band-in{background:repeating-linear-gradient(135deg,rgba(245,211,0,.16) 0 14px,transparent 14px 28px),#fffbe6;border-color:rgba(10,74,156,.4)}
.hours-badge{border-color:rgba(10,74,156,.4);color:var(--clay);background:#fff}
.hours-badge.closed-now{color:#a8190a;border-color:rgba(217,35,15,.4);background:#fff}
.site-footer{background:#06336d!important}
.foot-thanks{color:var(--gold)}
.foot-store .foot-tel,.maloremi-credit a{color:var(--gold)}
.foot-btn.ghost{border-color:var(--gold)!important;color:var(--gold)!important;background:transparent!important}
.fs-progress,.jb-progress{background:linear-gradient(90deg,var(--gold),var(--clay))}
.loc-hours,.loc-status{color:var(--clay)!important}