/* How it works: "Then the boat moves on." Copy and the season list on the left, the night globe on the right; stacks on phones. */
.rg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8) var(--s16);align-items:center}
.rg-copy{display:grid;gap:var(--s6);min-width:0}
.rg-copy>*{margin:0}

.rg-log{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.rg-log li{border-bottom:1px solid var(--border)}
.rg-log button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:120px 1fr;gap:4px var(--s4);padding:var(--s3) var(--s2) var(--s3) var(--s3);min-height:48px;align-items:baseline;border-left:3px solid transparent}
.rg-log button:hover .rg-where{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.rg-log button:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.rg-log button[aria-pressed="true"]{border-left-color:var(--gold);background:var(--white)}
.rg-when{grid-row:1/span 3;font-family:var(--body);font-style:italic;font-size:16px;color:var(--ocean)}
.rg-where{font-family:var(--display);font-weight:600;font-size:19px;color:var(--midnight)}
.rg-ports,.rg-race{grid-column:2;font-family:var(--display);font-size:15px;line-height:1.5;color:var(--ocean)}
.rg-race{display:none;color:var(--race-ink)}
.rg-log button[aria-pressed="true"] .rg-race{display:block}
html:not(.js) .rg-race{display:block}

.rg-stage{position:relative;min-width:0}
.rg-globe{position:relative;width:100%;max-width:640px;aspect-ratio:1;margin-inline:auto}
.rg-globe canvas{display:block;width:100%;height:100%;border-radius:50%;background:var(--midnight);box-shadow:0 0 0 1px rgba(13,28,43,.12),0 24px 60px -24px rgba(13,28,43,.45);cursor:grab;touch-action:pan-y}
.rg-globe canvas:active{cursor:grabbing}
.rg-globe canvas:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.rg-reset{position:absolute;top:0;right:0;font-family:var(--display);font-weight:600;font-size:14px;color:var(--chalk);background:var(--midnight);border:0;border-radius:9999px;padding:0 var(--s4);min-height:44px;cursor:pointer}
.rg-zoom{position:absolute;right:0;bottom:0;display:grid;border-radius:var(--r-lg);overflow:hidden;background:var(--midnight)}
.rg-zoom button{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;font-family:var(--display);font-size:22px;color:var(--chalk)}
.rg-zoom button+button{border-top:1px solid rgba(247,247,247,.16)}
.rg-zoom button:hover{background:var(--ocean)}
.rg-reset:focus-visible,.rg-zoom button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.rg-hint{margin:var(--s3) 0 0;text-align:center;font-family:var(--display);font-size:14px;color:var(--ocean)}
.rg-key{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);justify-content:center;margin-top:var(--s3);font-family:var(--display);font-size:14px;color:var(--midnight)}
.rg-key span{display:inline-flex;align-items:center;gap:var(--s2)}
/* Each swatch sits on a small night chip so it matches the globe exactly. */
.rg-key span::before{content:"";width:30px;height:16px;border-radius:4px;background-color:var(--midnight);background-repeat:no-repeat;background-position:center}
.rg-key .k-port::before{background-image:radial-gradient(circle,#F6B02C 0 4px,transparent 4.5px)}
.rg-key .k-passage::before{background-image:linear-gradient(#7DB8D4,#7DB8D4);background-size:20px 3px}
.rg-key .k-ocean::before{background-image:radial-gradient(circle,rgba(247,247,247,.9) 0 1.3px,transparent 1.6px);background-size:6px 16px;background-repeat:repeat-x}
.rg-key .k-race::before{background-image:linear-gradient(#D99A1E,#D99A1E);background-size:20px 3px}
/* No JS, no globe: the season list says it all. */
html:not(.js) .rg-stage{display:none}
.rg-stage:not(.is-ready) .rg-reset{display:none}

@media (max-width:860px){
  .rg{grid-template-columns:1fr;gap:var(--s6)}
  .rg-copy{display:contents}
  .rg-head{order:1}.rg-stage{order:2}.rg-log{order:3}.rg-note{order:4}.rg-cta{order:5}
  .rg-log button{grid-template-columns:96px 1fr}
}
.rg-key .k-next::before{background-image:radial-gradient(circle,rgba(125,184,212,.9) 0 1.3px,transparent 1.6px);background-size:7px 16px;background-repeat:repeat-x}