/* Guest-rating ribbon (assets/rating-ribbon.js): "Night swim · Stacked", owner's pick 30 Oct 2026.
   Cormorant for the numbers, Jost for the words. The motion is transform/opacity only and stops for
   prefers-reduced-motion. --rr-h sets the height; the sizes below set the width. */
.rr{--rr-h:44px;position:relative;isolation:isolate;display:flex;align-items:stretch;height:var(--rr-h);border-radius:10px;overflow:hidden;
  color:#fff;text-decoration:none;background:linear-gradient(110deg,#0F2124,var(--sea,#1B5F6B));box-shadow:inset 0 0 0 1px rgba(250,247,241,.14)}
.rr-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.rr-fx i{position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.16) 50%,transparent 80%);
  transform:translateX(-120%);animation:rr-glint 9s cubic-bezier(.45,0,.25,1) infinite}
.rr-fx b{position:absolute;left:-36px;top:50%;width:150px;height:150px;margin-top:-75px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,169,166,.35),transparent 65%);animation:rr-breathe 7s ease-in-out infinite alternate}
.rr-lead{flex:none;display:flex;align-items:center;gap:7px;padding-left:12px}
.rr-num{font:italic 300 1.85rem/1 'Cormorant Garamond',Georgia,serif;color:var(--brass,#2FA9A6)}
.rr-t{font:500 .5rem/1.5 'Jost',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.rr-track{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.rr-run{display:flex;width:max-content;animation:rr-glide 30s linear infinite}
.rr:hover .rr-run,.rr:hover .rr-fx *{animation-play-state:paused}
.rr-run ul{list-style:none;margin:0;padding:0 18px 0 0;display:flex;gap:18px}
.rr-run li{display:flex;align-items:center;gap:6px;font:italic 400 1.05rem/1 'Cormorant Garamond',Georgia,serif;white-space:nowrap}
.rr-run small{font:400 .55rem 'Jost',system-ui,sans-serif;font-style:normal;opacity:.7;margin-left:-3px}
.rr-disc{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff}
.rr-disc img{display:block;width:12px;height:12px}
@keyframes rr-glide{to{transform:translateX(-50%)}}
@keyframes rr-glint{0%{transform:translateX(-120%)}45%,100%{transform:translateX(260%)}}
@keyframes rr-breathe{from{opacity:.45;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.rr *{animation:none!important}}

/* homepage hero, on the film where the island bar sat (home-motion.css places it); the placeholder holds the
   space until the script fills it */
.rr--hero,[data-rating-ribbon="hero"]{display:flex;width:100%;height:58px}
.rr--hero{--rr-h:58px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(250,247,241,.18),0 20px 40px -24px rgba(0,0,0,.6)}
.rr--hero:hover{box-shadow:inset 0 0 0 1px rgba(250,247,241,.34),0 20px 40px -24px rgba(0,0,0,.6)}
.rr--hero:focus-visible{outline:2px solid var(--brass,#2FA9A6);outline-offset:3px}
.rr--hero .rr-lead{gap:9px;padding-left:18px}
.rr--hero .rr-num{font-size:2.4rem}
.rr--hero .rr-t{font-size:.56rem}
.rr--hero .rr-run li{font-size:1.25rem}
.rr--hero .rr-disc{width:26px;height:26px}
.rr--hero .rr-disc img{width:14px;height:14px}