/* Big Guava Beat. Tropical Tampa Bay: guava pink, palm green, gulf turquoise and mango on warm sand.
   Paytone One for headlines, Pacifico for little script accents, VT323 for the car-stereo display, Lexend for reading. */
:root{--sand:#fff5ea;--sand2:#ffe9d3;--guava:#c4284f;--guava2:#e8436a;--guava3:#ffb3c4;--palm:#0d6b52;--palm2:#0a523f;--gulf:#14b3c4;--gulf2:#0b8796;--mango:#ffb238;--ink:#12302f;--mute:#5a6b6a;--line:#f1d9c3;
 --disp:'Paytone One','Arial Black',system-ui,sans-serif;--script:'Pacifico','Brush Script MT',cursive;--lcd:'VT323',ui-monospace,monospace;--sans:'Lexend','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
 --tile:conic-gradient(from 45deg at 50% 50%,rgba(255,255,255,.07) 0 25%,transparent 0 50%,rgba(255,255,255,.07) 0 75%,transparent 0) 0 0/44px 44px,radial-gradient(circle at 50% 50%,rgba(255,178,56,.22) 0 5px,transparent 6px) 0 0/44px 44px,radial-gradient(circle at 0 0,rgba(20,179,196,.25) 0 9px,transparent 10px) 0 0/44px 44px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font:400 18px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}a:hover{color:var(--guava)}
img{max-width:100%;display:block}h1,h2,h3{margin:0;overflow-wrap:anywhere}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--mango);outline-offset:2px}
.ph-img{display:block;width:100%;height:100%;background:linear-gradient(150deg,#ffb238 0%,#e8436a 45%,#14b3c4 100%)}
[id]{scroll-margin-top:100px}
.script{display:block;font:400 22px/1.2 var(--script);color:var(--guava)}

/* header */
.hd{position:sticky;top:0;z-index:20;background:var(--palm);color:#fff;background-image:var(--tile)}
.hd-in{display:flex;align-items:center;gap:22px;min-height:100px}
.brand-img{height:80px;width:auto;max-width:260px;object-fit:contain}
.brand .lg-txt{font:400 26px/1 var(--disp);color:#fff}
.nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav a{font:600 16px/1 var(--sans);padding:12px 16px;border-radius:14px;white-space:nowrap}
.nav a:hover{background:var(--palm2);color:#fff}.nav a.on{background:var(--guava);color:#fff;box-shadow:0 4px 0 #8e1b3b}

/* hero */
.hero{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:center;overflow:hidden;background:var(--guava)}
.hero-pic{position:absolute;inset:0 0 0 30%;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.hero-pic img,.hero-pic .ph-img{width:100%;height:100%;object-fit:cover;object-position:72% 35%}
.hero:before{content:"";position:absolute;inset:0 52% 0 0;background:var(--guava);background-image:var(--tile);clip-path:polygon(0 0,100% 0,82% 100%,0 100%);z-index:1}
.hero-in{position:relative;z-index:2;padding-top:50px;padding-bottom:50px}
.hero-card{max-width:600px;color:#fff}
.hi{color:#fff;font-size:30px;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.hero h1{font:400 clamp(60px,9vw,128px)/.92 var(--disp);margin-top:8px;text-shadow:0 6px 0 var(--guava),0 10px 24px rgba(0,0,0,.2)}
.hero-p{font:500 20px/1.5 var(--sans);max-width:500px;margin:14px 0 0;color:#fff}
.hero-logo{display:inline-block;margin:16px 0 0;background:#fff;border-radius:34px;padding:18px 26px;transform:rotate(-2.5deg);box-shadow:0 9px 0 var(--palm),0 22px 40px rgba(0,0,0,.22)}
.hero-logo .hl-img{display:block;width:min(430px,70vw);height:auto}
.hero-logo .lg-txt{font:400 clamp(48px,7vw,90px)/1 var(--disp);color:var(--guava)}
.tagl{font:400 clamp(34px,4.2vw,56px)/1 var(--disp);color:#fff;margin:30px 0 0;text-shadow:0 5px 0 var(--palm2)}
.lead{margin-top:26px;background:#fff;color:var(--ink);border-radius:22px;padding:18px 22px;max-width:540px;box-shadow:0 8px 0 var(--palm),0 18px 30px rgba(0,0,0,.18)}
.lead-tag{font:400 13px/1 var(--disp);text-transform:uppercase;letter-spacing:.06em;color:var(--palm)}
.lead h2{font:700 22px/1.3 var(--sans);margin-top:8px}

/* headings */
.th{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 18px;margin-bottom:26px}
.th .script{width:100%}
.th h2{font:400 clamp(36px,5vw,62px)/1.02 var(--disp);color:var(--palm)}
.th-m{margin-left:auto;font:600 15px/1 var(--sans);color:var(--guava);padding-bottom:8px}
.blk{padding-top:84px}
.src{display:block;font:500 14px/1.4 var(--sans);color:var(--mute);margin-top:6px}
.src b{color:var(--ink);font-weight:700}.src em{font-style:normal}.src em:before{content:"\00B7";margin:0 6px}

/* swipe strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,300px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;scrollbar-width:thin;scrollbar-color:var(--guava2) var(--sand2)}
.sd{scroll-snap-align:start;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 8px 0 var(--sand2);border:2px solid var(--line)}
.sd-pic{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand2)}
.sd-pic img{width:100%;height:100%;object-fit:cover}
.sd-t{padding:14px 18px 18px}.sd h3{font:700 19px/1.32 var(--sans)}
.swipe{font:600 14px/1 var(--sans);color:var(--guava);margin:6px 0 0}
.n-fb{background:#fff!important}
.bt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8%;background:#fff}
.bt img{width:100%!important;height:100%!important;object-fit:contain!important}
.bt b{font:400 22px/1.1 var(--disp);color:var(--palm);text-align:center}

/* ybor */
.ybor{margin-top:90px;padding:76px 0;background:var(--ink);background-image:var(--tile);color:#fff}
.ybor-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:46px;align-items:center}
.ybor .th h2{color:#fff}.ybor .script{color:var(--mango)}
.yl{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.yl li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.yl>li>b{font:400 40px/1 var(--disp);color:var(--guava3)}
.yl a{font:700 20px/1.3 var(--sans)}.yl a:hover{color:var(--mango)}
.ybor .src{color:#a9c2c0}.ybor .src b{color:#fff}
.ybor-pic{aspect-ratio:4/5;border-radius:30px 30px 160px 30px;overflow:hidden;background:var(--palm2);border:6px solid var(--mango)}
.ybor-pic img,.ybor-pic .ph-img{width:100%;height:100%;object-fit:cover}

/* cuban sandwich cards */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.cs{background:#fff;border-radius:22px;overflow:hidden;border:2px solid var(--line);box-shadow:0 10px 0 var(--sand2)}
.cs-pic{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sand2)}
.cs-pic img{width:100%;height:100%;object-fit:cover}
.cs-t{padding:18px 18px 20px;border-top:10px solid transparent;border-image:repeating-linear-gradient(90deg,#c7832f 0 22px,#9a5a1d 22px 28px) 10}
.cs h3{font:700 20px/1.3 var(--sans)}

/* car stereo */
.deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:22px;align-items:center;background:linear-gradient(180deg,#2b3a3a,#162222);border-radius:26px;padding:24px;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 16px 30px rgba(18,48,47,.3)}
.lcd{display:grid;gap:2px;background:#9fe3d0;color:#0c3b30;border-radius:14px;padding:16px 20px;box-shadow:inset 0 0 0 3px #0c3b30,inset 0 0 22px rgba(12,59,48,.35);font-family:var(--lcd)}
.lcd span{font-size:22px;line-height:1;text-transform:uppercase}
.lcd b{font-size:84px;line-height:.9;font-weight:400}
.lcd em{font-size:30px;line-height:1;font-style:normal;letter-spacing:.06em}
.pres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pre{display:grid;justify-items:center;gap:2px;background:linear-gradient(180deg,#4a5a5a,#2e3b3b);color:#e8f4f2;border-radius:12px;padding:14px 6px;box-shadow:0 5px 0 #0d1717;transition:transform .1s}
.pre small{font:600 12px/1 var(--sans);color:#9fb5b3}
.pre b{font:400 30px/1 var(--lcd)}
.pre:hover,.pre.on{color:#fff;background:linear-gradient(180deg,var(--guava2),var(--guava));transform:translateY(2px);box-shadow:0 3px 0 #6e1430}
.pre.on small{color:#ffd6e0}

/* gulf */
.gulf{position:relative;margin-top:90px;padding:360px 0 70px;overflow:hidden}
.gulf-pic{position:absolute;inset:0}.gulf-pic img,.gulf-pic .ph-img{width:100%;height:100%;object-fit:cover;object-position:50% 6%}
.gulf:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,135,150,0) 30%,rgba(11,135,150,.8) 80%)}
.gulf-in{position:relative;z-index:2}
.gulf .th h2{color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.3)}.gulf .script{color:#fff}
.gw{background:#fff;border-radius:22px;padding:20px 22px;border-bottom:8px solid var(--mango)}
.gw h3{font:700 20px/1.3 var(--sans)}

/* bay business */
.bz-pic{display:block;position:relative;aspect-ratio:1/1;border-radius:50% 50% 24px 24px;overflow:hidden;background:var(--sand2);border:5px solid var(--gulf)}
.bz-pic img{width:100%;height:100%;object-fit:cover}
.bz h3{font:700 20px/1.3 var(--sans);margin-top:14px}

/* releases */
.gg{margin-top:90px;padding:70px 0 80px;background:var(--guava3);background-image:radial-gradient(circle at 20px 20px,rgba(255,255,255,.35) 0 6px,transparent 7px);background-size:40px 40px}
.gg .th h2{color:var(--ink)}.gg .script{color:var(--palm)}.gg .th-m{color:var(--palm)}
.rc{background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 0 rgba(212,47,90,.35)}
.rc-pic{display:block;aspect-ratio:16/10;background:#fff;border-bottom:4px solid var(--gulf)}
.rc-t{padding:16px 18px 20px}.rc h3{font:700 20px/1.3 var(--sans);margin-top:9px}
.prt{display:inline-block;font:400 12px/1 var(--disp);text-transform:uppercase;letter-spacing:.05em;background:var(--palm);color:#fff;padding:7px 11px;border-radius:999px}
.rows{display:grid;gap:16px;margin-top:28px}
.rr{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:center;border-bottom:2px solid var(--line);padding-bottom:16px}
.rr-pic{display:block;aspect-ratio:16/10;background:#fff;border-radius:14px;overflow:hidden;border:2px solid var(--line)}
.rr h3{font:700 20px/1.3 var(--sans);margin-top:6px}
.fr{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#fff;overflow:hidden}
.fr-ph{padding:10px}.fr-ph img,.fr-lg .tile img{width:100%;height:100%;object-fit:contain!important}
.fr-lg .tile{display:flex;align-items:center;justify-content:center}.fr-dk{background:#1d1d1d}

/* page heads */
.pg-h{background:var(--palm);background-image:var(--tile);color:#fff;padding:70px 0 58px}
.pg-h .script{color:#ffd27a}
.pg-h h1{font:400 clamp(46px,7vw,96px)/.98 var(--disp);margin-top:6px;text-shadow:0 5px 0 var(--palm2)}
.pg-h p{font:500 20px/1.5 var(--sans);color:#dcefe8;max-width:720px;margin:16px 0 0}
.st-h .st-t{font-size:clamp(30px,4.2vw,54px);line-height:1.1;margin-top:16px;max-width:1050px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:600 14px/1 var(--sans);color:#bfe0d6;margin-bottom:20px}
.crumbs a:hover{color:var(--mango)}
.st-h .src{color:#bfe0d6}.st-h .src b{color:#fff}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0}
.tabs a{font:600 15px/1 var(--sans);padding:12px 16px;border-radius:14px;background:#fff;border:2px solid var(--line)}
.tabs a.on{background:var(--guava);border-color:var(--guava);color:#fff}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:40px 0}
.pager a,.pager span{font:700 16px/1 var(--sans);padding:12px 16px;border-radius:14px;background:#fff;border:2px solid var(--line)}
.pager .on{background:var(--palm);border-color:var(--palm);color:#fff}.pg-gap{border:0!important;background:none!important}
.empty{font:700 20px/1.4 var(--sans);padding:40px 0}
.doc{padding:44px 0 70px}

/* the dial page */
.genres{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 26px}
.genres button{font:600 15px/1 var(--sans);padding:13px 18px;border-radius:999px;border:2px solid var(--palm);background:#fff;color:var(--palm);cursor:pointer}
.genres button.on{background:var(--palm);color:#fff}
.jbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.jb{display:grid;grid-template-columns:172px minmax(0,1fr);gap:20px;align-items:center;background:#fff;border-radius:22px;padding:14px;border:2px solid var(--line);box-shadow:0 8px 0 var(--sand2);transition:transform .12s}
.jb:hover{transform:translateY(-3px);color:inherit}
.jb>b{display:flex;align-items:baseline;justify-content:center;gap:4px;background:#163030;color:#9fe3d0;border-radius:16px;padding:18px 8px;font:400 46px/1 var(--lcd);white-space:nowrap;overflow:hidden;box-shadow:inset 0 0 0 3px #0c1f1f}
.jb small{font-size:22px;color:#6fbfa9}
.jb span{display:block;font:400 24px/1 var(--disp);color:var(--palm)}
.jb em{display:block;font:600 16px/1.3 var(--sans);font-style:normal;color:var(--guava);margin-top:6px}
.jb i{display:block;font:500 13px/1.3 var(--sans);font-style:normal;color:var(--mute);margin-top:8px}
.note{font:500 15px/1.55 var(--sans);color:var(--mute);max-width:780px;margin:30px 0 0}

/* story */
.s-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding-top:40px}
.sfig{margin:0}.sfig .fr{aspect-ratio:16/9;border-radius:22px;border:4px solid var(--gulf)}
.sfig figcaption{font:500 13px/1.4 var(--sans);color:var(--mute);margin-top:8px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0}
.share span{font:400 14px/1 var(--disp);color:var(--palm)}
.share a,.share button{font:600 14px/1 var(--sans);background:var(--palm);color:#fff;border:0;padding:11px 14px;border-radius:12px;cursor:pointer}
.prose{font:400 18px/1.8 var(--sans);max-width:760px}
.prose p{margin:0 0 1.1em}.prose .lede{font-size:20px;font-weight:600}
.prose .dl{font:400 14px/1 var(--disp);text-transform:uppercase;color:var(--guava)}
.prose h2{font:400 30px/1.15 var(--disp);color:var(--palm);margin:1.4em 0 .5em}
.prose a{color:var(--guava);text-decoration:underline}
.prose blockquote,.pull{margin:1.4em 0;padding:18px 22px;background:#fff;border-left:6px solid var(--mango);border-radius:0 14px 14px 0;font-weight:600}
.in-fig{margin:1.4em auto;text-align:center}.in-fig img{margin:0 auto;max-height:560px;width:auto;border-radius:14px}
.about-co{margin:2em 0;padding:24px;background:#fff;border-radius:22px;border:2px solid var(--line)}
.about-co .lbl{font:400 13px/1 var(--disp);text-transform:uppercase;color:var(--guava)}
.about-co h3{font:700 22px/1.3 var(--sans);margin:8px 0 10px}
.disclose{font-size:15px!important;color:var(--mute);border-top:2px solid var(--line);padding-top:16px;margin-top:2em}
.btn{display:inline-block;background:var(--guava);color:#fff!important;text-decoration:none!important;font:400 16px/1 var(--disp);padding:15px 22px;border-radius:16px;box-shadow:0 5px 0 #8e1b3b}
.btn:hover{background:var(--palm);box-shadow:0 5px 0 var(--palm2)}
.side{display:grid;gap:26px;align-content:start}
.co,.side-l{background:#fff;border:2px solid var(--line);border-radius:22px;padding:20px}
.co h4,.side-l h4{font:400 20px/1 var(--disp);color:var(--palm);margin:0 0 14px}
.co .fr{aspect-ratio:4/3;border-radius:14px;border:2px solid var(--line);margin-bottom:14px}
.co>b{display:block;font:700 20px/1.3 var(--sans);overflow-wrap:anywhere}
.co dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:15px;margin:14px 0 18px}
.co dt{font-weight:700;color:var(--mute)}.co dd{margin:0;overflow-wrap:anywhere}
.co .btn{display:block;text-align:center}
.sl-i{padding:12px 0;border-bottom:2px solid var(--line)}.sl-i>a{font:600 17px/1.35 var(--sans)}

/* footer */
.ft{margin-top:90px;color:#fff}
.gg+.ft,main:has(.gg:last-child)+.ft{margin-top:0}
.gg+.ft .wave,main:has(.gg:last-child)+.ft .wave{background:var(--guava3)}
.wave{display:block;width:100%;height:50px;fill:var(--palm)}
.ft-body{background:var(--palm);background-image:var(--tile)}
.ft-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:40px;padding-top:30px}
.ft-img{height:68px;width:auto;max-width:250px;object-fit:contain}
.ft .lg-txt{font:400 26px/1 var(--disp)}
.ft-brand p{color:#d8ece6;max-width:420px}.ft-brand .script{color:#ffd27a;display:inline;font-size:20px}
.ft h4{font:400 17px/1 var(--disp);color:#ffd27a;margin:0 0 14px}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-weight:600}
.ft a:hover{color:var(--mango)}
.ft-fine{border-top:1px solid rgba(255,255,255,.18);margin-top:36px;padding-top:18px;padding-bottom:34px;font-size:14px;color:#bfe0d6}
.ft-fine p{margin:0 0 6px}

@media (max-width:1050px){
 .hd-in{flex-wrap:wrap;padding-top:10px}.nav{order:3;width:100%;margin:0 0 10px;flex-wrap:nowrap;overflow-x:auto}
 .hero{min-height:0;flex-direction:column;align-items:stretch}
 .hero-pic{position:relative;inset:auto;height:340px;clip-path:none;order:2;z-index:2}
 .hero:before{inset:0;clip-path:none}
 .ybor-in,.s-cols,.deck{grid-template-columns:minmax(0,1fr)}
 .ybor-pic{max-width:460px}
 .g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g3>*:nth-child(3n){grid-column:1/-1}
 .jbs{grid-template-columns:minmax(0,1fr)}
 .ft-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ft-brand{grid-column:1/-1}
}
@media (max-width:640px){
 body{font-size:17px}.hd-in{min-height:74px}.brand-img{height:58px;max-width:190px}
 .hero-in{padding-top:34px;padding-bottom:36px}.hero-pic{height:260px}
 .g3{grid-template-columns:minmax(0,1fr)}.g3>*:nth-child(3n){grid-column:auto}
 .strip{grid-auto-columns:78%}
 .pres{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.lcd b{font-size:64px}
 .gulf{padding-top:170px}
 .jb{grid-template-columns:118px minmax(0,1fr);gap:14px}.jb>b{font-size:32px}.jb small{font-size:16px}.jb span{font-size:20px}
 .rr{grid-template-columns:minmax(0,1fr)}
 .ft-in{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.pre,.jb{transition:none}}
.co,.side,.s-cols>*{min-width:0}
.co .fr,.sfig .fr{height:auto}
.fr img{max-width:100%;max-height:100%;min-width:0}
[hidden]{display:none!important}