/* RED EYES NYC — the theme (2026-09-28 redraft, built around the owner's original eyes + skyline logo).
   Black ground, red-lit skyline, smoke drifting in from the edges, white "sticker edge" outlines like the logo's cutout.
   Loaded after store.css. The fence + curb from the old "Block at Night" look stay, repainted. */
:root{
 /* grain as plain black specks (cheap: no blend modes) */
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1576 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --grain-curb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1261 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --fence:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 13L13 0L26 13L13 26Z' fill='none' stroke='%23a9a2a4' stroke-width='1.6' stroke-opacity='.5'/%3E%3C/svg%3E");
}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- the sky: black, a red city glow off the bottom, smoke
   Fixed layers behind main. The smoke is one pre-drawn image (tools/brand/original_web.py) and it holds still at one opacity:
   drifting it, or fading it as you scroll, cost 25-40 ms a frame on an Intel Mac (measured 2026-09-28). */
main{position:relative}
main:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(70% 38% at 50% 105%,rgba(196,0,29,.28),transparent 70%),radial-gradient(50% 40% at 50% 30%,rgba(125,4,20,.18),transparent 70%),linear-gradient(180deg,#0a0607,#050304 70%)}
.smoke{position:fixed;left:0;right:0;top:60px;height:calc(100vh - 20px);z-index:-1;pointer-events:none;background:url(/img/smoke.webp?v=1) center/cover no-repeat;opacity:.45}
main>section{position:relative}

/* ---------------------------------------------------------------- hero: the logo is the headline */
.hero{border-bottom:0;background:radial-gradient(45% 55% at 50% 42%,rgba(255,31,61,.2),transparent 70%)}
.hero:before{display:none}
.hero .sky{position:absolute;left:0;right:0;bottom:0;height:min(40%,260px);background:url(/img/skyline.svg?v=2) center bottom/auto 100% repeat-x;opacity:.9;pointer-events:none}
.hero .fence{position:absolute;left:0;right:0;bottom:0;height:80px;background-image:var(--fence);background-size:26px 26px;border-top:4px solid #6f686a;box-shadow:0 -2px 0 #231c1e;-webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,.5));mask:linear-gradient(180deg,#000,rgba(0,0,0,.5));pointer-events:none}
.hero-in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:14px 16px 112px}
.hero-art{order:-1;z-index:1;width:min(560px,96%);margin:0}
.hero-art img{position:relative;aspect-ratio:auto;filter:none;animation:float 8s ease-in-out infinite} /* no filter on the floating logo: a drop-shadow here re-blurred a 640 px image every frame (270 ms frames on an Intel Mac) */
.hero-art:before{content:"";position:absolute;inset:4% 6% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,31,61,.3),rgba(0,0,0,.55) 70%,transparent);pointer-events:none} /* the glow, painted once */
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.kicker{display:block;font:400 clamp(22px,5.4vw,34px)/1.05 var(--slab);letter-spacing:.5px;color:#fff;text-transform:uppercase;text-shadow:0 3px 0 #000}
.kicker b{color:var(--red);font-weight:400;-webkit-text-stroke:2px #fff;paint-order:stroke fill}
.hero h1{-webkit-text-stroke:3px #fff;paint-order:stroke fill;color:var(--red);text-shadow:0 5px 0 #000}
.hero h1 b{font-weight:400}
.hero p{margin:12px auto 20px;color:#ddd6d7;text-shadow:0 1px 8px #000}
.hero-cta{justify-content:center;width:100%;max-width:440px}
.hero .btn.line{background:rgba(0,0,0,.45)}
@media(min-width:860px){
 .hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);justify-items:start;text-align:left;gap:36px;padding:28px 32px 120px}
 .hero-art{order:0;width:100%;max-width:640px;justify-self:center}
 .hero-copy{align-items:flex-start}
 .hero p{margin-left:0}
 .hero-cta{justify-content:flex-start}
 .kicker{font-size:clamp(34px,3.6vw,52px)}
}

/* the curb: sidewalk slabs, then a red-painted curb edge (NYC's no-standing red) */
.curb{position:relative;height:26px;background-color:#5f5a5c;background-image:var(--grain),repeating-linear-gradient(90deg,transparent 0 158px,rgba(0,0,0,.45) 158px 160px);background-size:200px,auto;box-shadow:inset 0 2px 0 rgba(255,255,255,.1)}
.curb:after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(180deg,#ff2a44,#c4001d 70%,#6d0010);box-shadow:0 8px 12px rgba(0,0,0,.6);z-index:1}
.curb:before{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:var(--grain-curb);background-size:120px;z-index:2}

/* ---------------------------------------------------------------- how it works */
.how{background:transparent;border-bottom:0;padding-top:14px}
.stop .bul{box-shadow:0 0 0 4px #080506,0 0 0 6px #3a2e31}
.stop .b-eye{box-shadow:0 0 0 2px #fff,0 0 0 5px #080506,0 0 0 7px #3a2e31}

/* ---------------------------------------------------------------- section heads: slab title, red bar with a white hairline */
.row-h{border-top:0;padding-top:0;padding-bottom:14px;position:relative;align-items:flex-end}
.row-h:after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:linear-gradient(180deg,var(--red) 0 4px,transparent 4px 6px,rgba(255,255,255,.55) 6px 7px)}
.row-h .plate{border-top:0;padding-top:0;gap:0}
.row-h .plate .bul{display:none}
.row-h h2{font:400 clamp(26px,5vw,38px)/1.05 var(--slab);letter-spacing:.3px;text-transform:uppercase;text-shadow:0 3px 0 #000}
.row-h p{font-size:14.5px;color:var(--dim)}
.plate{border-top-color:var(--red)}
.plate h2{font-family:var(--slab);font-weight:400;letter-spacing:.3px}
.cat-head .plate.big h2{text-shadow:0 3px 0 #000}

/* ---------------------------------------------------------------- product cards: die-cut stickers (white edge, black body) */
.rail{padding-top:10px;padding-bottom:22px;gap:16px}
.grid{padding-top:10px;gap:16px}
.card{background:#0d0a0b;border:0;border-radius:16px;padding:6px;box-shadow:0 0 0 2px #f4f1f1,0 0 0 4px #000,0 14px 26px rgba(0,0,0,.6)}
.card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--red),0 18px 34px rgba(0,0,0,.7),0 0 34px rgba(255,31,61,.25)}
.pic{border-radius:11px}
.info{padding:10px 6px 4px}
.info .nm{color:#fff}
.price .now{color:var(--red)}
.card .btn{border-radius:10px}
.card .btn.red{box-shadow:none}
.card .btn.line{box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.card .btn[disabled]{background:#231c1e;color:var(--faint)}

/* ---------------------------------------------------------------- delivery area: the vinyl mascot sticker, kept small */
.area{background:linear-gradient(180deg,rgba(30,5,8,0),rgba(30,5,8,.85));border-top:0}
.area-art{border-radius:0;overflow:visible;box-shadow:none;width:min(220px,58%);filter:drop-shadow(0 20px 26px rgba(0,0,0,.7))}
@media(min-width:860px){.area-in{grid-template-columns:240px 1fr}.area-art{width:100%}}

/* ---------------------------------------------------------------- odds and ends */
.faq,.cat-head{position:relative}
.cart-empty img.cup{width:132px;height:auto;opacity:1;border-radius:12px;box-shadow:0 0 0 2px #fff,0 0 0 4px #000;transform:rotate(-3deg)}