/* r50 fold: first-screen tightening on phones so "This weekend" (heading + top of its cards) shows above the fold.
   Same hero, same features: only heights and spacing change. Desktop untouched. */
@media (max-width:760px){
  html .hero{height:clamp(390px,54svh,470px);min-height:0}
  html .hero .hero-in{bottom:80px}
  html .hero .hero-dots{bottom:58px}
  html #hero>.trust-line{bottom:34px}
  html .hero .hero-in .eyebrow{margin-bottom:8px}
  html .hero .hero-in h1{margin-bottom:6px}
  html .hero .hero-cta{margin-top:12px}
  html .sn-htabs{margin-bottom:8px}
  html .vibe-entry.ve-slim,html .rows>.vibe-entry.ve-slim{margin-top:0;margin-bottom:12px}
  html .wkd{margin-bottom:22px}
  html .wkd-in{padding-top:14px}
  html .wkd-head{gap:6px;margin-bottom:12px}
  html .wkd-stamp{padding:6px 10px;font-size:10px}
  html .wkd h2{font-size:clamp(28px,8vw,34px);line-height:1}
  html .wkd-intro{font-size:14px;line-height:1.35}
}
/* short phones (iPhone SE 375x667 and similar) */
@media (max-width:760px) and (max-height:720px){
  html .hero{height:338px}
  html .hero .hero-in{bottom:72px}
  html .hero .hero-dots{bottom:52px}
  html #hero>.trust-line{bottom:30px}
  html .hero .slide .hero-in h1{font-size:clamp(26px,7.6vw,30px)}
  html .hero .hero-cta .btn{height:40px}html .hero .hero-cta .btn.round{width:40px}
  html .hero .hero-cta .btn.night-go.night-pill{min-height:36px}
  html .wkd-in{padding-top:12px}
  html .wkd-intro{font-size:13px}
  html .wkd h2{font-size:25px;letter-spacing:-.03em}
  html .wkd-head{gap:5px;margin-bottom:10px}
}
/* short phones: the hero video credit sits beside the pause button so it never runs into the headline's eyebrow */
@media (max-width:760px) and (max-height:720px){html #hero .slide .hv-credit{top:76px;right:56px;max-width:42vw}}
/* ---------- r61 declutter (preview) ---------- */
/* 1) no accent rules between homepage sections: whitespace does the separating */
html.hs .rows>.row+.row::before,html.hs .rows>.row+.hs-more::before,html.hs .mx-ed::before,html.hs .mx-explore::before{content:none;display:none}
html.hs .rows>.row{padding-top:34px}
html .mx-ed-head{border-bottom:0!important}
#app>.cal-view{border-top:0}
/* 2) card dates once: v=a keeps only urgency badges, smaller and quieter; v=b has none (see home.js cardBadge/metaLine) */
html[data-cardv=a] :is(.card-top,.pin-top) .pill.hot.cv-b{font-size:9.5px;letter-spacing:.06em;padding:3px 7px;background:rgba(12,12,14,.62);color:#ffc4b5;border:1px solid rgba(255,138,110,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-cardv=a] :is(.card-pills,.kicker,.mf-pills) .pill.hot.cv-b{font-size:10px;padding:2px 7px}
.meta .mw-now{color:var(--reme,#d9b26f);font-weight:600}
.meta .mw-u{color:#ff9a85;font-weight:600}
/* 4) the area / Tonight row as a light in-feed strip: 'Where to? · All South Florida ▾ · Tonight ▾' */
html .sn-htabs.sn-wtrip{margin:6px var(--pad,24px) 26px;padding:12px 0;align-items:center}
.sn-wtrip .sn-wt{flex:none;font:500 italic 16px/1 var(--f-display,Fraunces),serif;color:var(--muted,#a9a39a);margin-right:2px;letter-spacing:-.01em}
html .sn-wtrip .sn-fy{height:34px;padding:0 12px;font-size:13px;background:rgba(255,255,255,.04)}
@media (max-width:760px){
  html .sn-htabs.sn-wtrip{margin:4px 0 22px;padding:10px 16px}
  /* the row no longer sits under the hero: This weekend tucks 16px under the hero bottom (rows overlap the hero by 30px), clear of the slide dashes */
  html .rows>#weekend:first-child{margin-top:14px}
  /* 3) taller hero on phones: +52px at 390x844, proportional (+38px) on short phones */
  html .hero{height:clamp(442px,calc(54svh + 52px),522px)}
}
@media (max-width:760px) and (max-height:720px){html .hero{height:376px}}
/* ---------- r63 lesstext (preview): fewer words on the hero ---------- */
/* 1) editor pick = a small round gold 'R' monogram instead of the worded pill (aria-label/title on the mark) */
html .hero .hero-in .eyebrow .hp-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#f6e3b4 0%,var(--reme,#d9b26f) 55%,#b98c43 100%);color:#2a1d06;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.35)}
html .hero .hero-in .eyebrow .hp-mark b{font:italic 700 13px/1 var(--f-display,Georgia,serif);transform:translateY(-.5px);letter-spacing:0}
@media (max-width:760px){html .hero .hero-in .eyebrow .hp-mark{width:19px;height:19px}html .hero .hero-in .eyebrow .hp-mark b{font-size:11.5px}}
/* 2) 'On now' leaves the eyebrow: a quiet dot chip at the end of the button row */
html .hero .hero-cta{align-items:center}
html .hero .hero-cta .hero-now{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:999px;font:600 11.5px/1 var(--f-body);
  letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap}
html .hero .hero-cta .hero-now i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.25);animation:hnow 2s ease-in-out infinite}
@keyframes hnow{50%{box-shadow:0 0 0 5px rgba(61,220,132,0)}}
@media (prefers-reduced-motion:reduce){html .hero .hero-cta .hero-now i{animation:none}}
/* 3) smaller Explore pill (and the heart beside it, so the row stays even) */
html .hero .hero-cta .btn.play{height:42px;padding:0 18px 0 16px;font-size:14.5px;gap:8px;border-radius:999px}
html .hero .hero-cta .btn.play svg{width:14px;height:14px}
html .hero .hero-cta .btn.round.save{width:42px;height:42px}
@media (max-width:760px){
  html .hero .hero-cta .btn.play{height:36px;padding:0 14px 0 12px;font-size:13.5px;gap:7px}
  html .hero .hero-cta .btn.play svg{width:12px;height:12px}
  html .hero .hero-cta .btn.round.save{width:36px;height:36px}
  html .hero .hero-cta{gap:8px}
}
/* 4) the kicker line moves under the buttons: one small muted line at the bottom of the hero */
html .hero .hero-in .hero-meta{margin:12px 0 0;font:500 13.5px/1.3 var(--f-body);color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html .hero.hero-early .hero-in .hero-meta{display:none}
@media (max-width:760px){html .hero .hero-in .hero-meta{margin-top:10px;font-size:12px}}
/* 5) no (i) video credit on the hero (credit lives in the slide's title text, the event page (i) and credits.html) */
html #hero .hv-credit{display:none!important}
/* r66 combo (editor pt452u): the region text left the hero eyebrow, so the old 'last span = region' rules must not hit the pills/mark */
html .hero .hero-in .eyebrow>.pill:last-child,html .hero .hero-in .eyebrow>.hp-mark:last-child{display:inline-flex!important}
@media (max-width:760px){html .hero .hero-in .eyebrow>.pill:last-child{font-size:9px;letter-spacing:.07em}}
/* urgent tag (Tonight / Ends soon / Last day): full pill first, then condenses to a pulsing dot (home.js hbCycle adds .hb-c after ~3.5s).
   Width-only change at the end of the eyebrow line: height is constant, nothing below or after it moves. */
html .hero .hero-in .eyebrow .hb-urg{display:inline-flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;vertical-align:middle;
  transition:background-color .45s ease,padding .5s ease,gap .5s ease,box-shadow .45s ease}
html .hero .hero-in .eyebrow .hb-urg .hb-dot{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;transition:background-color .45s ease,transform .45s ease}
html .hero .hero-in .eyebrow .hb-urg .hb-txt{display:inline-block;max-width:9em;overflow:hidden;transition:max-width .55s cubic-bezier(.4,0,.2,1),opacity .3s ease}
html .hero .hero-in .eyebrow .hb-urg.hb-c{background-color:transparent;background-image:none;box-shadow:none;padding-left:3px;padding-right:3px;gap:0}
html .hero .hero-in .eyebrow .hb-urg.hb-c .hb-txt{max-width:0;opacity:0}
html .hero .hero-in .eyebrow .hb-urg.hb-c .hb-dot{background:#ff5a4e;transform:scale(1.5);animation:hbpulse 1.8s ease-in-out .5s infinite}
@keyframes hbpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,78,.6)}60%{box-shadow:0 0 0 5px rgba(255,90,78,0)}}
@media (prefers-reduced-motion:reduce){html .hero .hero-in .eyebrow .hb-urg,html .hero .hero-in .eyebrow .hb-urg *{transition:none;animation:none}}
/* r67 combo2 (editor pt453u + steering): Tonight / Ends soon / Last day pill and the On now chip keep their look but sit inline at the
   start of the muted one-line subtext (.hero-meta). Chips never shrink or wrap; the subtext text ellipsizes instead. */
html .hero .hero-in .hero-meta.hm-row{display:flex;align-items:center;gap:8px;overflow:visible;text-overflow:clip}
html .hero .hero-in .hero-meta .hm-t{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .hero .hero-in .hero-meta .hm-t:empty{display:none}
html .hero .hero-in .hero-meta .pill.hb-urg{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:9.5px;padding:4px 7px;letter-spacing:.07em;border-radius:3px}
html .hero .hero-in .hero-meta .hb-urg .hb-dot{flex:none;width:5px;height:5px;border-radius:50%;background:#fff;animation:hbsoft 3.2s ease-in-out infinite}
@keyframes hbsoft{0%,100%{opacity:1}50%{opacity:.55}}
html .hero .hero-in .hero-meta .hero-now{flex:none;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:999px;font:600 11px/1 var(--f-body);
  letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap}
html .hero .hero-in .hero-meta .hero-now i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.25);animation:hnow 3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html .hero .hero-in .hero-meta .hb-urg .hb-dot,html .hero .hero-in .hero-meta .hero-now i{animation:none}}
/* ---------- r70.8 taller hero on phones (editor: "Make the hero taller on screen") ----------
   +~12vh at 390x844 (508px -> 609px, 60% -> 72% of the screen) and +80px on short phones (375x667: 376 -> 456px).
   This weekend's heading still peeks in above the tab bar. Fixed CSS heights (no JS), so the early hero paints at the final size: no layout shift.
   Desktop (>760px) is unchanged: it already fills ~92% of a 1440x900 screen. */
@media (max-width:760px){html .hero{height:clamp(520px,calc(66svh + 52px),620px)}}
@media (max-width:760px) and (max-height:720px){html .hero{height:456px}}
/* ---------- r83 herolead (editor): shorter phone hero, ~65% of the screen so 'This weekend' peeks in clearly ----------
   390x844: 609px (72%) -> 549px (65%); 375x667: 456px (68%) -> 434px (65%). Fixed CSS heights (no JS), so the early hero still
   paints at its final size: no layout shift. Desktop (>760px) unchanged. */
@media (max-width:760px){html .hero{height:clamp(470px,65svh,560px)}}
@media (max-width:760px) and (max-height:720px){html .hero{height:clamp(400px,65svh,440px)}}

/* r72.3.6 ipadfix (editor iPad review)
   1. 'Updated weekly' line: a soft pill scrim so it reads over bright photos. Phones hide this line (base.css r58), so they are unchanged.
   2. Tablet hero cap: iPad portrait/landscape (761 to 1366 wide, touch or portrait) gets min(70vh,720px) instead of min(92vh,880px).
      Phones (<=760) and desktop mouse windows keep their heights. */
#hero>.trust-line{padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.42);opacity:.92;text-shadow:0 1px 3px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (min-width:761px) and (max-width:1366px) and (pointer:coarse),(min-width:761px) and (max-width:1366px) and (orientation:portrait){
  html .hero{height:min(70vh,720px);min-height:520px}
}
#hero .bg img.hs-pos-fort-lauderdale-artwalk{object-position:10% 65%} /* r72.3.8 mural wall: keep the Marilyn mural + NEW ART wall in the phone crop */
#hero .bg img.hs-pos-fort-lauderdale-boat-show{object-position:60% 50%} /* r72.3.8 FLIBS superyachts: main yacht centred in the phone crop */