/* RED EYEZ NYC — "Block at Night" theme (picked 2026-09-27 from mockups/urban-directions.html, direction D,
   with the sticker cards from direction B). Loaded after store.css; delete this file's <link> to go back. */
:root{
 --yel:var(--amber);
 --marker:'Permanent Marker','Comic Sans MS',cursive;
 /* grain as plain black specks. It used to be grey noise with mix-blend-mode:multiply (a full-page blend on every scroll
    frame). Multiplying by grey g at alpha a looks the same as black at alpha a*(1-g); the filter's .5 grey is linear-RGB,
    i.e. sRGB 188/255, so a = .6 x (1 - 188/255) = .1576, times the old layer opacity where there was one. */
 --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-asphalt: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 .1182 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* x .75 */
 --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"); /* x .8 */
 --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='%23a9b0ba' stroke-width='1.6' stroke-opacity='.55'/%3E%3C/svg%3E");
}

/* ticker: street-paint yellow */
.ticker{background:var(--yel);color:#111;border-bottom-color:#000}
.ticker-in span:after{background:#111;box-shadow:none}

/* ---------------------------------------------------------------- the block at night */
.hero{border-bottom:0;background:radial-gradient(50% 40% at 78% 16%,rgba(255,196,110,.22),transparent 70%),linear-gradient(180deg,#0d0b24 0%,#241036 45%,#4a0f22 78%,#12060a 100%)}
.hero:before{background-image:radial-gradient(1px 1px at 8% 12%,#fff,transparent),radial-gradient(1px 1px at 22% 30%,#ddd,transparent),radial-gradient(1px 1px at 34% 7%,#fff,transparent),radial-gradient(1.5px 1.5px at 51% 18%,#fff,transparent),radial-gradient(1px 1px at 63% 9%,#ccc,transparent),radial-gradient(1px 1px at 72% 26%,#fff,transparent),radial-gradient(1.5px 1.5px at 86% 6%,#fff,transparent),radial-gradient(1px 1px at 94% 22%,#ddd,transparent);background-size:auto;-webkit-mask-image:none;mask-image:none;opacity:.75}
.hero-glow{display:none}
.hero .sky{position:absolute;left:0;right:0;bottom:0;height:min(62%,380px);background:url(/img/skyline.svg) center bottom/auto 100% repeat-x;pointer-events:none}
.hero .fence{position:absolute;left:0;right:0;bottom:0;height:96px;background-image:var(--fence);background-size:26px 26px;border-top:4px solid #8e959f;box-shadow:0 -2px 0 #2c3036;-webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,.55));mask:linear-gradient(180deg,#000,rgba(0,0,0,.55));pointer-events:none}
.hero-in{padding-bottom:128px}
@media(min-width:860px){.hero-in{padding-bottom:150px}}
.kicker{font:400 20px/1 var(--marker);letter-spacing:.5px;color:var(--yel);text-transform:none;transform:rotate(-3deg);transform-origin:left}
.kicker .bul{display:none}
.hero h1{-webkit-text-stroke:0;color:#fff;text-shadow:0 0 34px rgba(255,31,61,.55),0 5px 0 #000}
.hero h1 b{color:var(--red);font-weight:400}
.hero .btn.line{box-shadow:inset 0 0 0 2px var(--yel);color:var(--yel);background:rgba(0,0,0,.25)}
.hero .btn.line:hover{background:rgba(255,204,0,.12)}
.hero-art{z-index:1}

/* the curb: sidewalk slabs, then a yellow-painted curb edge dropping to the asphalt */
.curb{position:relative;height:30px;background-color:#7d8086;background-image:var(--grain),repeating-linear-gradient(90deg,transparent 0 158px,rgba(0,0,0,.4) 158px 160px);background-size:200px,auto;box-shadow:inset 0 2px 0 rgba(255,255,255,.12)}
.curb:after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(180deg,#ffd41f,#d9ad00 70%,#8a6d00);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}

/* ---------------------------------------------------------------- asphalt under everything else */
main{background-color:#131219;background-image:var(--grain-asphalt),radial-gradient(1.5px 1.5px at 20% 30%,#393a3f,transparent),radial-gradient(1px 1px at 70% 60%,#2e2f33,transparent),radial-gradient(1.5px 1.5px at 45% 80%,#35363b,transparent);background-size:180px,23px 23px,17px 17px,31px 31px;position:relative}
main>section{position:relative}
.how{background:transparent;border-bottom:0;padding-top:12px}
.stop .bul{box-shadow:0 0 0 4px #131219,0 0 0 6px #34323d}
.how-in:before{display:none} /* the joining line ran through the middle step's text */
.area{background:linear-gradient(180deg,rgba(27,16,48,0),rgba(27,16,48,.9));border-top:0}
.faq,.cat-head{position:relative}

/* section heads: big title, marker line in yellow, double yellow line under */
.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:10px;background:linear-gradient(180deg,var(--yel) 0 3px,transparent 3px 7px,var(--yel) 7px 10px);opacity:.85}
.row-h .plate{border-top:0;padding-top:0;gap:0}
.row-h .plate .bul{display:none}
.row-h h2{font:400 clamp(30px,6vw,44px)/1 var(--disp);letter-spacing:1px;text-transform:uppercase}
.row-h p{font:400 17px/1.2 var(--marker);color:var(--yel);transform:rotate(-2deg);transform-origin:left;margin-top:6px}
.row-h .all{color:var(--yel)}
.row-h .all:hover{color:#fff}
.plate{border-top-color:var(--yel)}

/* ---------------------------------------------------------------- sticker cards (slapped up with tape) */
.rail{padding-top:22px;padding-bottom:22px;gap:16px}
.grid{padding-top:14px;gap:18px}
.card{background:var(--chalk);color:#111;border:0;border-radius:14px;padding:8px;overflow:visible;box-shadow:0 10px 20px rgba(0,0,0,.45);transition:transform .18s,box-shadow .18s}
.card:nth-child(4n+1){transform:rotate(-2.5deg)}
.card:nth-child(4n+2){transform:rotate(1.8deg) translateY(6px)}
.card:nth-child(4n+3){transform:rotate(-1deg)}
.card:nth-child(4n+4){transform:rotate(2.8deg) translateY(3px)}
.card:before{content:"";position:absolute;top:-10px;left:50%;width:68px;height:22px;margin-left:-34px;background:rgba(240,230,190,.82);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:2;pointer-events:none}
.card:nth-child(even):before{transform:rotate(3deg);margin-left:-28px}
.card:hover{transform:rotate(0) translateY(-4px) scale(1.02);box-shadow:0 18px 30px rgba(0,0,0,.55),0 0 0 3px var(--yel);border-color:transparent}
.pic{border-radius:9px;background:radial-gradient(70% 70% at 50% 40%,#26222f,#111016)}
.info{padding:10px 4px 4px}
.info .br{color:#777}
.info .nm{color:#111}
.info .thc{color:#555}
.price{color:#111}
.price .now{color:#c4001d}
.price s{color:#999}
.price small{color:#666}
.card .btn{font:400 16px/1 var(--marker);letter-spacing:.5px;border-radius:8px;padding:11px 8px 10px;text-transform:none}
.card .btn.red{background:#111;color:#fff;box-shadow:none}
.card .btn.red:hover{background:var(--red)}
.card .btn.line{background:#fff;color:#111;box-shadow:inset 0 0 0 2px #111}
.card .btn.line:hover{background:#111;color:#fff}
.card .btn[disabled]{background:#e6e6e6;color:#999;box-shadow:none}
.sold{opacity:.92}
.stamp{background:rgba(255,255,255,.1)}
@media(max-width:599px){.card:nth-child(n){transform:rotate(-1.5deg)}.card:nth-child(even){transform:rotate(1.5deg) translateY(4px)}.card .btn{font-size:14px}}
@media(prefers-reduced-motion:reduce){.card:hover{transform:none}}

/* 2026-09-27 brand kit: the mascot is a die-cut sticker now, so drop the card frame around it */
.area-art{border-radius:0;overflow:visible;box-shadow:none;filter:drop-shadow(0 26px 30px rgba(109,78,224,.45))}