/* Layout: neon sunset banner with Joe's portrait, sticky category chips, then picture-led cards grouped
   by category on a deep "South Beach at night" ground. One committed dark look, built for reading in a car. */
:root{
  --night:#170A2B; --night-2:#21103A; --card:#26143F; --card-2:#2F1A4D; --line:#41285F;
  --ink:#FFF4EA; --muted:#C9B6D9; --pink:#FF3D8B; --pink-soft:#FF8DB8; --teal:#2FE0D2; --sun:#FF7A45; --gold:#FFC857;
  --script:"Yellowtail","Brush Script MT",cursive;
  --display:"Archivo","Arial Black",Arial,sans-serif;
  --body:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}
body{margin:0;background:var(--night);color:var(--ink);font:16px/1.5 var(--body)}
a{color:inherit}
p{margin:0}
.wrap{max-width:600px;margin:0 auto;padding-inline:16px}

/* ---------- banner ---------- */
.hero{position:relative;overflow:hidden;padding-block:26px 0;
  background:linear-gradient(180deg,#1B0B33 0%,#3A0F55 34%,#8E1F6E 58%,#FF4F7B 78%,#FF8A4C 100%)}
.hero .wrap{position:relative;z-index:2;display:grid;gap:10px}
.sun{position:absolute;left:50%;bottom:-150px;width:320px;height:320px;transform:translateX(-50%);border-radius:50%;z-index:1;
  background:linear-gradient(180deg,#FFE27A 0%,#FFB04A 45%,#FF6A5B 100%);
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);
          mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);opacity:.9}
.palms{position:absolute;inset:auto 0 0 0;z-index:1;width:100%;height:150px;pointer-events:none}
.kicker{font:700 12px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.brand{font:400 clamp(64px,19vw,104px)/.9 var(--script);margin:0;color:#fff;transform:rotate(-4deg);transform-origin:left;
  text-shadow:0 0 6px #fff,0 0 18px var(--pink),0 0 38px var(--pink),0 0 70px #ff3d8b99;animation:flicker 2.4s ease-out 1}
@keyframes flicker{0%,8%,12%,20%{opacity:.25}10%,16%,100%{opacity:1}}
.tagline{font:800 clamp(20px,5.6vw,26px)/1.12 var(--display);text-wrap:balance;max-width:20ch;margin:4px 0 0}
.intro{color:#FFE6F0;max-width:34ch}
.joe{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:14px;margin-top:6px;padding-bottom:22px}
.joe img{width:128px;height:156px;object-fit:cover;object-position:50% 20%;border-radius:64px 64px 18px 18px;
  border:3px solid var(--teal);box-shadow:0 0 0 4px #170A2B66,0 0 26px #2FE0D2aa;background:#3A0F55}
.joe-note{display:grid;gap:6px;padding:10px 12px;margin-bottom:6px;background:#170A2Bd9;border:1px solid #ffffff26;border-radius:16px;backdrop-filter:blur(4px)}
.joe-note b{font:800 18px var(--display)}
.joe-note span{font-size:14px;color:#FFE6F0}
.btn-wa{justify-self:start;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:700 14px var(--body);
  background:#170A2Bcc;border:1.5px solid var(--teal);color:#fff;padding:8px 14px;border-radius:99px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lang{font:800 13px var(--body);letter-spacing:.06em;background:#170A2Bcc;color:#fff;border:1.5px solid #ffffff55;border-radius:99px;padding:6px 12px;cursor:pointer}
.lang:hover{border-color:var(--teal)}.lang:focus-visible,.btn-share:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-share{justify-self:start;display:inline-flex;align-items:center;gap:8px;font:700 14px var(--body);cursor:pointer;
  background:linear-gradient(90deg,var(--pink),#9B5CFF);border:0;color:#fff;padding:9px 15px;border-radius:99px;box-shadow:0 0 14px #ff3d8b66}
.btn-share:active{transform:scale(.97)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#170A2B;color:#fff;border:1px solid var(--teal);padding:10px 16px;border-radius:12px;font:600 14px var(--body);z-index:50}
.goout-sub{color:#FFE6F0;margin:-4px 0 12px}
.hook{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 16px}
.hook a{display:grid;gap:2px;text-decoration:none;color:#fff;padding:10px 12px;border-radius:14px;background:#170A2B;border:1.5px solid #ffffff22}
.hook a:hover{border-color:var(--teal)}.hook a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hook b{font:800 15px var(--display)}.hook span{font-size:12.5px;color:#FFC857}
.hook-h{font:800 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
.daypick,.catpick{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.daypick button,.catpick button{flex:0 0 auto;font:700 13px var(--body);color:#fff;background:#170A2Bcc;border:1.5px solid #ffffff33;border-radius:99px;padding:6px 12px;cursor:pointer}
.daypick button[aria-pressed=true]{background:var(--pink);border-color:var(--pink)}
.catpick button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#170A2B}
.daypick button:focus-visible,.catpick button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.vlist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.vcard{background:#170A2Bd9;border:1px solid #ffffff1f;border-radius:14px;padding:10px 12px;display:grid;gap:3px}
.vcard h3{margin:0;font:800 16px var(--display)}
.vcard .vmeta{font-size:13px;color:#FFE6F0}.vcard .vwhen{font-size:12.5px;color:#FFC857}
.vcard .vlinks{display:flex;gap:12px;font-size:13px}.vcard .vlinks a{color:var(--teal)}
.vhook{background:linear-gradient(90deg,#FF3D8B33,#9B5CFF33);border:1.5px solid var(--pink);border-radius:14px;padding:12px}
.vhook a{color:#fff;font-weight:800}
.vmore{margin-top:10px;font:700 14px var(--body);color:#fff;background:transparent;border:1.5px solid var(--teal);border-radius:99px;padding:8px 14px;cursor:pointer}
.spice{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;border-radius:16px;
  background:linear-gradient(100deg,#FF6A3D,#FF3D8B 55%,#9B5CFF);color:#fff;box-shadow:0 0 22px #ff3d8b55}
.spice[hidden]{display:none}
.spice b{display:block;font:800 17px var(--display)}.spice span{font-size:13px;color:#FFF4EA}
.spice a{font:800 14px var(--body);color:#170A2B;background:#FFE27A;border-radius:99px;padding:9px 13px;text-decoration:none;white-space:nowrap}
.spice a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.areapick{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.areapick button{flex:0 0 auto;font:700 13px var(--body);color:#fff;background:#170A2Bcc;border:1.5px solid #ffffff33;border-radius:99px;padding:6px 12px;cursor:pointer}
.areapick button[aria-pressed=true]{background:#FFE27A;border-color:#FFE27A;color:#170A2B}
.areapick button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.v21{font-size:12.5px;color:#FFC857;margin:2px 0 6px}
.tip{margin:22px 0;padding:16px;border-radius:18px;background:linear-gradient(135deg,#2A0F45,#170A2B);border:1.5px solid var(--gold);display:grid;gap:10px}
.tip h2{margin:0;font:800 20px var(--display);color:#FFE27A}
.tip p{margin:0;color:#FFE6F0}
.tip-btns{display:flex;flex-wrap:wrap;gap:8px}
.tip-btns a,.tip-btns button{font:800 15px var(--body);border-radius:99px;padding:10px 16px;text-decoration:none;cursor:pointer;border:0}
.tip-venmo{background:#3D95CE;color:#fff}
.tip-zelle{background:#6D1ED4;color:#fff}
.tip-btns a:focus-visible,.tip-btns button:focus-visible,.tip-link:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tip small{color:#C9B6D9}
.tip-link{justify-self:start;font:700 13px var(--body);color:#FFE27A}
.btn-wa:focus-visible,.go:focus-visible,.chips a:focus-visible,.feat a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- top picks + chips ---------- */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.feat a{display:grid;gap:3px;align-content:start;text-decoration:none;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:12px 10px;min-width:0}
.feat a:nth-child(1){border-color:var(--pink)} .feat a:nth-child(2){border-color:var(--teal)} .feat a:nth-child(3){border-color:var(--gold)}
.feat svg{width:34px;height:34px}
.feat b{font:800 15px/1.1 var(--display)}
.feat span{font-size:12.5px;color:var(--muted)}
.feat em{font-style:normal;font-weight:700;font-size:13px;color:var(--gold)}
@media (max-width:360px){.feat{grid-template-columns:1fr}}
.chips{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;display:flex;gap:8px;overflow-x:auto;padding:12px 16px;margin:16px -16px 0;
  background:linear-gradient(180deg,var(--night) 75%,transparent);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;text-decoration:none;font:600 14px var(--body);color:var(--ink);background:var(--card-2);border:1px solid var(--line);padding:7px 14px;border-radius:99px}

/* ---------- sections + cards ---------- */
main{display:grid;gap:30px;padding-block:14px 40px}
section{display:grid;gap:14px;scroll-margin-top:70px}
.sec{display:flex;align-items:center;gap:10px;margin:0;font:400 34px/1 var(--script);color:var(--pink-soft);text-shadow:0 0 14px #ff3d8b66}
.sec::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--pink),transparent)}
.pick{display:grid;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 10px 30px #0007}
.pick.top{border:2px solid var(--pink);box-shadow:0 0 0 1px #ff3d8b44,0 12px 34px #ff3d8b33}
.thumb{position:relative;height:118px;display:grid;place-items:center;overflow:hidden}
.thumb svg{width:96px;height:96px;filter:drop-shadow(0 6px 10px #0006)}
.thumb img{width:100%;height:100%;object-fit:cover}
.t-pink{background:radial-gradient(circle at 70% 30%,#FFB36B 0,transparent 45%),linear-gradient(135deg,#FF3D8B,#7A1F8F)}
.t-teal{background:radial-gradient(circle at 25% 25%,#B9FFF4 0,transparent 40%),linear-gradient(135deg,#0FB9C9,#1B4F9C)}
.t-sun{background:radial-gradient(circle at 50% 110%,#FFE27A 0,transparent 55%),linear-gradient(135deg,#FF7A45,#C2185B)}
.t-night{background:radial-gradient(circle at 80% 20%,#2FE0D2 0,transparent 35%),linear-gradient(135deg,#3B1166,#120624)}
.t-gold{background:radial-gradient(circle at 30% 30%,#FFF1B8 0,transparent 40%),linear-gradient(135deg,#FFC857,#FF6A5B)}
.t-sea{background:linear-gradient(180deg,#76E4F7,#1E88C7)}
.body{display:grid;gap:8px;padding:14px 16px 16px}
.tag{font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.pick h3{margin:0;font:800 22px/1.1 var(--display)}
.badge{justify-self:start;font:700 12.5px var(--body);background:var(--gold);color:#2A1300;padding:4px 10px;border-radius:99px}
.desc{color:#EADCF5}
.price{color:var(--muted);font-size:14px}
.go{justify-self:start;display:inline-block;text-decoration:none;font:800 15px var(--body);color:#fff;padding:11px 18px;border-radius:14px;
  background:linear-gradient(135deg,var(--pink),var(--sun));box-shadow:0 6px 18px #ff3d8b55;transition:transform .15s ease}
.go:hover{transform:translateY(-1px)}
.go:active{transform:translateY(1px)}
small{color:var(--muted);font-size:12.5px}

/* tonight / tomorrow */
.when{display:flex;gap:8px}
.when button{font:700 14px var(--body);border:1.5px solid var(--line);background:var(--card);color:var(--ink);padding:8px 16px;border-radius:99px;cursor:pointer}
.when button[aria-pressed="true"]{background:var(--teal);color:#06231F;border-color:var(--teal)}
.when button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ideas{margin:0;padding:14px 16px 14px 34px;display:grid;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.ideas a{color:var(--teal);font-weight:600}

.note{color:var(--muted);font-size:13px;border-left:3px solid var(--sun);padding-left:12px}
.panel{display:grid;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px}
.panel h2{margin:0;font:800 20px var(--display)}
.panel dl{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;margin:0}
.panel dt{color:var(--muted)} .panel dd{margin:0;font-weight:600}
.ghost{justify-self:start;display:inline-block;text-decoration:none;font:700 14px var(--body);border:1.5px solid var(--teal);color:var(--ink);padding:9px 15px;border-radius:12px}
footer{padding-block:0 32px;text-align:center;color:var(--muted);font-size:12.5px}
footer .sig{display:block;font:400 30px var(--script);color:var(--pink-soft)}
.tiers{display:grid;gap:8px;margin:2px 0 0}.tiers dt{font:800 14px var(--display);color:var(--teal)}.tiers dd{margin:0 0 4px;color:#EADCF5;font-size:14.5px}.tiers dd b{color:var(--gold)}
.svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.svc{display:grid;gap:4px;align-content:start;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;min-width:0}
.svc svg{width:40px;height:40px}
.svc b{font:800 16px/1.15 var(--display)}
.svc span{font-size:13px;color:var(--muted)}
.svc em{font-style:normal;font-weight:700;font-size:13px;color:var(--pink-soft);margin-top:2px}
.svc:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:340px){.svcs{grid-template-columns:1fr}}
.deal-cta{justify-self:start;display:inline-flex;gap:8px;align-items:center;text-decoration:none;font:800 16px var(--body);color:#2A1300;
  background:linear-gradient(135deg,var(--gold),#FFE27A);padding:12px 18px;border-radius:99px;box-shadow:0 0 0 3px #170A2B55,0 0 24px #FFC85799;margin-top:4px}
.deal-cta:focus-visible{outline:3px solid #fff;outline-offset:2px}
.deals-sub{color:var(--muted);font-size:14px;margin-top:-6px}
.deal{display:grid;grid-template-columns:96px 1fr;align-items:stretch;text-decoration:none;color:var(--ink);border-radius:20px;overflow:hidden;
  background:var(--card);border:2px dashed var(--gold);box-shadow:0 10px 30px #0007}
.deal:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.deal-amt{display:grid;place-content:center;text-align:center;font:800 13px/1.05 var(--display);letter-spacing:.06em;color:#2A1300;
  background:linear-gradient(160deg,var(--gold),var(--sun));padding:14px 6px}
.deal-amt b{font:900 34px/1 var(--display);letter-spacing:-.02em}
.deal-txt{display:grid;gap:4px;padding:14px 16px;align-content:center}
.deal-txt b{font:800 19px/1.15 var(--display)}
.deal-txt>span{font-size:14px;color:var(--muted)}
.deal-txt em{font-style:normal;font-weight:800;color:var(--pink-soft)}
.code{display:inline-block;background:#FFC85722;color:var(--gold);font-weight:700;padding:1px 6px;border-radius:6px}

/* ---------- multi-page additions ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.langsel select{font:700 13px var(--body);color:#fff;background:#170A2Bcc;border:1.5px solid #ffffff55;border-radius:99px;padding:6px 10px;cursor:pointer}
.langsel select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hero.slim{padding-block:14px 12px;background:linear-gradient(90deg,#3A0F55,#8E1F6E 60%,#FF4F7B)}
.brand-sm{font:400 34px/1 var(--script);color:#fff;text-decoration:none;text-shadow:0 0 10px var(--pink)}
.cta-row{display:flex;flex-wrap:wrap;gap:8px}
.deal-cta.alt{background:linear-gradient(135deg,#2FE0D2,#B9FFF4);color:#06231F}
.chips a[aria-current=page]{background:var(--pink);border-color:var(--pink);color:#fff}
.page-h{margin:4px 0 0;font:400 44px/1 var(--script);color:#fff;text-shadow:0 0 12px var(--pink)}
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cat{display:grid;justify-items:center;gap:4px;padding:12px 6px;text-align:center;text-decoration:none;color:#fff;background:var(--card);border:1.5px solid var(--line);border-radius:16px}
.cat span{font-size:24px}.cat b{font:800 13.5px/1.15 var(--display)}
.cat:hover{border-color:var(--teal)}.cat:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cat[href*="upscale"]{border-color:var(--gold);background:linear-gradient(160deg,#3a2a0a,#26143F)}
.searchbox input{width:100%;font:500 16px var(--body);color:#fff;background:#170A2B;border:1.5px solid var(--teal);border-radius:14px;padding:11px 14px}
.searchbox input::placeholder{color:#C9B6D9}
.searchbox input:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.fgroups{display:grid;gap:4px}
.fgroup{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;align-items:center}
.fgroup .glab{flex:0 0 auto;font:800 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-right:2px}
.fgroup button{flex:0 0 auto;font:700 13px var(--body);color:#fff;background:#170A2Bcc;border:1.5px solid #ffffff33;border-radius:99px;padding:6px 12px;cursor:pointer}
.fgroup button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#170A2B}
.fgroup button.goldf{border-color:var(--gold);color:#FFE27A}
.fgroup button.goldf[aria-pressed=true]{background:var(--gold);color:#2A1300}
.fgroup button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.vcount{margin:0;font-size:13px;color:var(--muted)}
.vcard .vline{font-size:14px;color:#EADCF5}
.vcard .vtags{display:flex;flex-wrap:wrap;gap:4px}.vcard .vtags span{font-size:11.5px;color:#EADCF5;background:#ffffff14;border-radius:99px;padding:2px 8px}
.vcard.up{border:1.5px solid var(--gold);background:linear-gradient(160deg,#3a2a0acc,#170A2Bd9 55%);box-shadow:0 0 18px #FFC85733}
.vcard.up h3{color:#FFE27A}
.modes{display:flex;gap:6px}.modes button{flex:1}.modes button[hidden]{display:none}
.modes button{font:800 13.5px/1.15 var(--body);color:#fff;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:10px 6px;cursor:pointer}
.modes button[aria-pressed=true]{background:linear-gradient(135deg,var(--pink),var(--sun));border-color:transparent}
.modes button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.vgroup{list-style:none;margin:8px 0 0;font:800 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid #2FE0D255;padding-bottom:4px}
.vcard .vsp{font:700 14px var(--body);color:#FFE27A}
.vcard .vev{font-size:13px;color:#FF8DB8}
.vcard.pick{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,201,77,.35)}.vcard .vpick{display:inline-block;margin:2px 0 4px;font:800 12px var(--body);color:#2A1300;background:var(--gold);border-radius:6px;padding:3px 9px}.vcard .vpickw{display:block;font-style:italic;margin-bottom:4px}
.vcard .upb{display:inline-block;margin-left:6px;font:800 11px var(--body);color:#2A1300;background:var(--gold);border-radius:99px;padding:2px 8px;vertical-align:middle}