/* Guide page (guide.html) + the small guide banners used on index.html and event.html */
html:not(.ready) #gd{opacity:0}#gd{transition:opacity .45s var(--ease)}
.g-hero{height:min(64vh,620px);min-height:440px}
.g-wrap{max-width:1400px;margin:0 auto;padding:56px var(--pad) 40px}
.g-intro{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(28px,5vw,72px);align-items:start;margin-bottom:44px}
.g-tips{border:1px solid var(--line);border-radius:6px;padding:22px 24px;background:var(--card)}
.g-tips h3{font:600 11.5px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.g-tips ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:14.5px}.g-tips li{padding-left:18px;position:relative}
.g-tips li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--hot)}
.g-bar{position:sticky;top:62px;z-index:20;background:var(--bg);padding:12px 0 10px;border-bottom:1px solid var(--line);margin-bottom:28px}
.g-days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}.g-days::-webkit-scrollbar{display:none}
.g-filters{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.g-areas{display:flex;overflow-x:auto;scrollbar-width:none;max-width:100%}.g-areas::-webkit-scrollbar{display:none}
.g-tog{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;cursor:pointer;padding:6px 12px;border:1px solid var(--line);border-radius:99px}
.g-tog input{accent-color:var(--hot);width:16px;height:16px;margin:0}.g-tog b{font-weight:600;color:var(--hot)}
.g-day{margin-bottom:56px;scroll-margin-top:170px}
.g-dh{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:12px}
.g-dh h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.02em}.t-editorial .g-dh h2{font-weight:400}
.g-dh p{color:var(--muted);font-size:15px}
.g-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.g-lane h3{display:flex;align-items:center;gap:8px;font:600 11.5px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.g-lane h3 span{font-weight:700;color:var(--fg);background:var(--line);border-radius:99px;padding:2px 8px;letter-spacing:0}
.g-lane-fairs h3::before,.g-lane-free h3::before,.g-lane-night h3::before{content:"";width:8px;height:8px;border-radius:50%}
.g-lane-fairs h3::before{background:var(--reme)}.g-lane-free h3::before{background:#3fb37f}.g-lane-night h3::before{background:var(--hot)}
.g-item{position:relative;border:1px solid var(--line);border-radius:6px;padding:16px 16px 14px;margin-bottom:12px;background:var(--card);transition:border-color .2s}
.g-item:hover{border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.g-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.g-time{font:700 13px Inter;letter-spacing:.02em;color:var(--fg)}
.save.g-save{position:static;flex:none;width:32px;height:32px;background:transparent;border:1px solid var(--line);color:var(--fg);backdrop-filter:none}
.save.g-save svg{width:16px;height:16px}.save.g-save.on{color:var(--hot);background:transparent;border-color:var(--hot)}
.g-item h4{font-size:18px;font-weight:700;line-height:1.2;margin-bottom:6px}.g-item h4 a:hover{text-decoration:underline}.t-editorial .g-item h4{font-weight:600}
.g-meta{font-size:13.5px;color:var(--muted)}.g-area{color:var(--fg);font-weight:600}
.g-price{font-size:13.5px;font-weight:600;margin-top:6px}
.g-freepill{display:inline-block;background:#3fb37f;color:#04150d;font:700 10.5px Inter;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:3px}
.g-note{font-size:14.5px;margin-top:8px;line-height:1.5}
.g-verify{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.g-flag{display:inline-block;font:700 10px Inter;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid currentColor;color:var(--reme);margin-right:4px}
.g-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.g-empty{font-size:13.5px;color:var(--muted);padding:10px 0}
.g-src{margin-top:20px}.g-src ul{margin:10px 0 0;padding-left:18px;columns:2;font-size:13px}.g-src a{text-decoration:underline}
@media (max-width:1000px){.g-intro{grid-template-columns:1fr}.g-lanes{grid-template-columns:1fr}.g-lane{margin-bottom:6px}}
@media (max-width:760px){.g-wrap{padding-top:36px}.g-bar{top:58px}.g-src ul{columns:1}.g-hero{min-height:420px}}

/* Banners linking to a guide (homepage + event page) */
.guide-cta{display:flex;align-items:center;gap:18px;max-width:1400px;margin:28px auto;padding:18px 22px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(110deg,color-mix(in srgb,var(--hot) 22%,var(--card,#17171a)),var(--card,#17171a) 70%);color:var(--fg);transition:transform .2s var(--ease),border-color .2s}
.guide-cta:hover{transform:translateY(-2px);border-color:var(--hot)}
.guide-cta .gc-k{font:700 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--hot)}
.guide-cta b{display:block;font:800 clamp(18px,2vw,24px)/1.15 var(--f-display);margin-top:4px}.guide-cta small{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.guide-cta .gc-go{margin-left:auto;flex:none;font-weight:600;font-size:14px;border:1px solid currentColor;border-radius:99px;padding:9px 16px;white-space:nowrap}
.guide-cta.in-home{margin:28px var(--pad)}
.e-guide{padding:0 var(--pad)}
@media (max-width:760px){.guide-cta{flex-wrap:wrap}.guide-cta .gc-go{margin-left:0}}
/* story guide banners (Boat Season etc.) */
.guide-cta.story-cta{background:linear-gradient(110deg,color-mix(in srgb,#0e6b8c 34%,var(--card,#17171a)),var(--card,#17171a) 72%)}
.guide-cta.story-cta:hover{border-color:#2f9cc4}.guide-cta.story-cta .gc-k{color:#3fa9d1}
.t-editorial .guide-cta.story-cta .gc-k{color:#0e6b8c}
/* r44b: Boat Season banner sailboat, whimsy pass. Decorative only (aria-hidden, pointer-events:none), lives in the bottom
   padding strip so it never crosses the text or button. Transform/opacity-only CSS keyframes (compositor, cheap on iPhone).
   One 30s cycle: sail in on a soft wave → r45b: a tiny Fort Lauderdale-style bascule drawbridge at ~57% opens (leaves tip up on
   their outer hinges, ~1s), the boat slips through, the leaves lower behind it (red light blinks while open; this replaced the
   mid-trip loop-de-loop) → tiny blue splash at the far end (~0.75s) → fade → pause.
   Layers: .sail-run = X (and the end fade) · .sail-wave = gentle up/down · .sail-boat = rock · .sail-bridge = piers + leaves.
   Static under prefers-reduced-motion. */
.guide-cta.story-cta.has-boat{position:relative;overflow:hidden;padding-bottom:40px}
.sail-lane{position:absolute;left:0;right:0;bottom:2px;height:36px;pointer-events:none;overflow:hidden;z-index:0;contain:layout paint}
.sail-lane::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:linear-gradient(90deg,transparent,rgba(63,169,209,.35) 20%,rgba(63,169,209,.35) 80%,transparent)}
.sail-lane *{pointer-events:none}
.sail-run{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateX(-30px);animation:sail-x 30s linear infinite;will-change:transform,opacity}
.sail-wave{position:absolute;left:0;bottom:4px;width:24px;height:12px;animation:sail-wave 4.6s ease-in-out infinite alternate;will-change:transform}
.sail-boat{position:absolute;left:0;bottom:0;display:block;transform-origin:50% 100%;animation:sail-bob 2.1s ease-in-out infinite alternate;will-change:transform}
@keyframes sail-x{
  0%{transform:translateX(-30px);opacity:0;animation-timing-function:ease-out}
  3%{opacity:1}
  32%{transform:translateX(calc(57% - 50px));animation-timing-function:linear}
  34%{transform:translateX(calc(57% - 46px));animation-timing-function:ease-in-out}
  40.5%{transform:translateX(calc(57% + 24px));animation-timing-function:linear}
  70%{transform:translateX(calc(100% - 58px));opacity:1}
  71.5%{transform:translateX(calc(100% - 55px));opacity:1}
  75%{transform:translateX(calc(100% - 54px));opacity:0}
  100%{transform:translateX(calc(100% - 54px));opacity:0}}
@keyframes sail-wave{0%{transform:translateY(1px)}100%{transform:translateY(-.5px)}}
/* r45b drawbridge: 44px wide, centred at 57% of the lane; leaves 18px, deck 8px above the waterline; open window 30%→44.3% */
.sail-bridge{position:absolute;left:calc(57% - 22px);bottom:5px;width:44px;height:30px;z-index:0}
.sail-bridge i{position:absolute;display:block}
.br-p{bottom:0;width:4px;height:9px;border-radius:1px 1px 0 0;background:rgba(244,239,228,.5)}
.br-pl{left:0}.br-pr{right:0}
.br-leaf{bottom:8px;width:18px;height:2px;border-radius:1px;background:#f4efe4;box-shadow:0 -2px 0 -1px rgba(215,208,194,.75);will-change:transform}
.br-ll{left:4px;transform-origin:0 50%;animation:br-up-l 30s linear infinite}
.br-lr{right:4px;transform-origin:100% 50%;animation:br-up-r 30s linear infinite}
.br-l{bottom:10px;width:3px;height:3px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 3px #ff4d4d;opacity:0;animation:br-blink 30s linear infinite}
.br-l1{left:.5px}.br-l2{right:.5px}
@keyframes br-up-l{0%,30%{transform:rotate(0);animation-timing-function:ease-in-out}33.3%,41%{transform:rotate(-76deg);animation-timing-function:ease-in-out}44.3%,100%{transform:rotate(0)}}
@keyframes br-up-r{0%,30%{transform:rotate(0);animation-timing-function:ease-in-out}33.3%,41%{transform:rotate(76deg);animation-timing-function:ease-in-out}44.3%,100%{transform:rotate(0)}}
@keyframes br-blink{0%,30%{opacity:0}30.2%{opacity:1}31.05%{opacity:.15}31.9%{opacity:1}32.75%{opacity:.15}33.6%{opacity:1}34.45%{opacity:.15}35.3%{opacity:1}36.15%{opacity:.15}37.0%{opacity:1}37.85%{opacity:.15}38.7%{opacity:1}39.55%{opacity:.15}40.4%{opacity:1}41.25%{opacity:.15}42.1%{opacity:1}42.95%{opacity:.15}44.3%,100%{opacity:0}}
@keyframes sail-bob{0%{transform:rotate(-1.5deg)}100%{transform:rotate(1.2deg)}}
.sail-splash{position:absolute;right:14px;bottom:5px;width:30px;height:30px;z-index:2}
.sail-splash i{position:absolute;left:50%;bottom:0;display:block;opacity:0;will-change:transform,opacity}
.sail-splash .sp-ring{box-sizing:border-box;width:24px;height:8px;margin-left:-12px;margin-bottom:-3px;border-radius:50%;border:2px solid #3fa9d1;transform:scale(.2);animation:sp-ring 30s linear infinite}
.sail-splash .sp-r2{animation-name:sp-ring2;border-color:#7cc7e3}
.sail-splash .sp-d{width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#3fa9d1;box-shadow:0 0 2px rgba(124,199,227,.6);animation:sp-d1 30s linear infinite}
.sail-splash .d2{animation-name:sp-d2;background:#7cc7e3}.sail-splash .d3{animation-name:sp-d3}.sail-splash .d4{animation-name:sp-d4;width:3.5px;height:3.5px;background:#a9dcef}
/* splash window: 70.4% → 72.9% of 30s ≈ 0.75s */
@keyframes sp-ring{0%,70.4%{opacity:0;transform:scale(.2)}70.8%{opacity:.95}72.9%{opacity:0;transform:scale(1.8,1.3)}100%{opacity:0;transform:scale(1.8,1.3)}}
@keyframes sp-ring2{0%,71%{opacity:0;transform:scale(.2)}71.4%{opacity:.8}73.2%{opacity:0;transform:scale(2,1.4)}100%{opacity:0}}
@keyframes sp-d1{0%,70.4%{opacity:0;transform:translate(0,0)}70.6%{opacity:1}71.5%{transform:translate(-10px,-16px)}72.7%{opacity:0;transform:translate(-16px,-3px)}100%{opacity:0}}
@keyframes sp-d2{0%,70.4%{opacity:0;transform:translate(0,0)}70.6%{opacity:1}71.6%{transform:translate(-3px,-21px)}72.8%{opacity:0;transform:translate(-4px,-6px)}100%{opacity:0}}
@keyframes sp-d3{0%,70.4%{opacity:0;transform:translate(0,0)}70.6%{opacity:1}71.5%{transform:translate(7px,-17px)}72.7%{opacity:0;transform:translate(13px,-4px)}100%{opacity:0}}
@keyframes sp-d4{0%,70.5%{opacity:0;transform:translate(0,0)}70.7%{opacity:1}71.4%{transform:translate(12px,-10px)}72.5%{opacity:0;transform:translate(17px,0)}100%{opacity:0}}

/* r46y: yacht A redrawn as a sleek Sunseeker-style superyacht: long low white hull with a raked bow, tapered dark hull-window dart,
   three swept decks with dark tinted glazing bands, hardtop + tiny red pennant. Same 24x12 box, so drawbridge/splash timing and fit are unchanged. */
/* r45y motor yacht (Fort Lauderdale Boat Show): pennant flutter + short white wake trailing left of the hull (moves with .sail-wave) */
.sail-boat.yt{overflow:visible}.yt-pen{transform-box:fill-box;transform-origin:0 50%;animation:yt-pen .8s ease-in-out infinite alternate}
@keyframes yt-pen{0%{transform:scaleX(.7) skewY(4deg)}100%{transform:scaleX(1) skewY(-3deg)}}
.yt-wake{position:absolute;display:block;left:-15px;bottom:1px;width:17px;height:1.6px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75));transform-origin:100% 50%;animation:yt-wake 1.3s ease-in-out infinite alternate}
.yt-wake.yt-w2{left:-9px;bottom:-.6px;width:10px;height:1.2px;opacity:.6;animation-duration:.9s;animation-delay:-.4s}
@keyframes yt-wake{0%{transform:scaleX(.8);opacity:.55}100%{transform:scaleX(1.05);opacity:.95}}
@media (prefers-reduced-motion:reduce){.sail-run,.sail-wave,.sail-boat,.sail-splash i,.sail-bridge i,.yt-pen,.yt-wake{animation:none}.sail-run{transform:translateX(72%);opacity:1}.sail-wave,.sail-boat,.br-leaf,.yt-pen,.yt-wake{transform:none}.sail-splash,.br-l{display:none}}

/* r71.2: reserve space while hood page renders (CLS fix) */
main#hd:empty{min-height:120vh}
/* r71.9 list guides (holidays) + bestFor chips */
.e-best{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.e-best span{display:inline-block;padding:5px 11px;border-radius:99px;font:600 12px Inter;letter-spacing:.01em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
.gl-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.gl-jump a{padding:7px 13px;border-radius:99px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);color:#fff;font:600 13px Inter}
.gl-intro{max-width:760px;margin:0 0 40px}.gl-intro p{font:400 17px/1.65 Inter;color:var(--fg);margin:0 0 14px}.gl-intro .gl-lede{font:400 21px/1.5 Fraunces,serif}
.gl-sec{margin:0 0 54px;scroll-margin-top:80px}.gl-sec header{margin-bottom:18px}.gl-sec h2{font:600 clamp(26px,4vw,38px)/1.1 Fraunces,serif;margin:4px 0 8px}.gl-sec header p{color:var(--muted);max-width:640px;margin:0}
.gl-k{font:700 11px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.gl-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.gl-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#111}.gl-img img{width:100%;height:100%;object-fit:cover;display:block}
.gl-tag{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font:700 11px Inter;letter-spacing:.04em}
.gl-txt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1}.gl-txt h3{font:600 19px/1.25 Fraunces,serif;margin:2px 0 4px}.gl-txt h3 a{color:inherit}
.gl-when,.gl-where,.gl-price{margin:0;font:400 14px/1.45 Inter;color:var(--muted)}.gl-when{color:var(--fg);font-weight:600}
.gl-acts{display:flex;align-items:center;gap:10px;margin:auto 0 0;padding-top:10px}.gl-btn{padding:8px 14px;border-radius:99px;border:1px solid var(--line);font:600 13px Inter;color:var(--fg)}
.gl-note{color:var(--muted);font:400 14px Inter;margin-top:10px}