/* The map chapters. Column text holds still while the map does the moving, so every stretch of scroll shows a change next to words. */
.ch-hook { min-height: calc(100vh - var(--top)); display: flex; flex-direction: column; justify-content: center; padding: 36px 0 10vh; }
.ch-hook .lede { margin-top: 18px; }
.ch-hook .body { margin-top: 18px; }
.scrub { height: 104vh; }
.scrub--line { height: 72vh; }
.stick { position: sticky; top: calc(var(--top) + 15vh); margin-bottom: 12vh; }
.stick .lede + .lede, .stick .lede + .body { margin-top: 16px; }
.lede--big { font-size: clamp(22px, 2vw, 26px); line-height: 1.32; font-weight: 500; letter-spacing: -.01em; }

/* release day */
#release { scroll-margin-top: var(--top); }
.rl-intro { padding-top: 4vh; }
.rl-intro > .lede { margin-bottom: 8px; }
/* The calendar sticks while scrolling through this block plays the day. */
.rl-hold { height: 148vh; margin: 24px 0 0; }
.rl-hold .rl-cal { position: sticky; top: calc(var(--top) + 14px); }
.rl-cal { padding: 16px 20px 14px; background: var(--bg); border-radius: var(--r3); box-shadow: 0 6px 28px rgba(0,0,0,.13); border: 1px solid var(--line2); }
.rl-phase { text-align: center; font-size: 19px; font-weight: 750; letter-spacing: -.012em; margin-bottom: 10px; }
.rl-grid { display: grid; gap: 4px; }
.rl-row { display: grid; grid-template-columns: 68px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.rl-col { display: flex; align-items: flex-end; justify-content: center; font-size: 11.5px; font-weight: 600; line-height: 1.15; color: var(--ink2); text-align: center; padding-bottom: 5px; }
.rl-col em { font-style: normal; hyphens: none; }
.rl-eff { position: relative; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink2); transition: color .2s; }
.rl-mark { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background .2s, box-shadow .2s; }
.is-placed > .rl-eff { color: var(--ink); }
.is-placed .rl-mark { background: var(--ink); box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px rgba(0,0,0,.25); }
/* A cell moves through waiting, running and done, then goes live in its score's tone. js/sec-release.js gives each cell
   a tone and the ink that reads on it for both themes, and the theme picks its pair here. */
.rl-cell { --t: var(--tone); --ti: var(--tone-ink); }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rl-cell { --t: var(--tone-dark); --ti: var(--tone-dark-ink); } }
@media screen { :root[data-theme="dark"] .rl-cell { --t: var(--tone-dark); --ti: var(--tone-dark-ink); } }
.rl-cell { position: relative; display: block; height: 44px; min-width: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line2); background: var(--bg); overflow: hidden; transition: background .22s; }
.rl-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; display: none; background: repeating-linear-gradient(135deg, var(--run-a) 0 5px, var(--run-b) 5px 10px); background-size: 28px 28px; }
.rl-cell[data-st="run"] .rl-fill { display: block; }
.rl-cell[data-st="done"] .rl-fill { display: block; height: 100% !important; }
.rl-cell[data-st="live"] { background: var(--t); box-shadow: none; }
.rl-range { display: block; width: 100%; margin: 6px 0 0; }

/* seven weeks */
.rl-seven { padding-top: 10vh; min-height: 46vh; }
.rl-seven .seg { margin-top: 20px; }
/* the handover */
.rl-open { padding: 2vh 0 18vh; }
.open-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: auto; padding: 0 28px; height: 60px; border-radius: var(--r2); background: var(--ink); color: var(--on-ink); font-size: 21px; font-weight: 650; letter-spacing: -.01em; transition: transform .16s cubic-bezier(.2,.9,.3,1.2), background .15s; }
.open-btn:hover { background: var(--ink-press); transform: translateY(-2px); }
.open-btn:active { transform: scale(.985); }

/* On the way up the pill travels to the title at its own size, so neither is stretched. */
::view-transition-old(ls-title), ::view-transition-new(ls-title) { width: 100%; height: 100%; object-fit: none; object-position: 0 50%; animation-duration: .24s; }
::view-transition-new(ls-title) { animation-delay: .1s; }

/* The listing rises like a sheet over the map. The map stays put under it, so the shell runs one screen longer than its column and the sheet overlaps that extra screen. */
:root { --sheet-overlap: 100vh; }
.col { padding-bottom: var(--sheet-overlap); }
body > #listing { position: relative; z-index: 60; margin-top: calc(-1 * var(--sheet-overlap)); min-height: 100vh; background: var(--bg); border-radius: var(--r3) var(--r3) 0 0; }

@media (max-width: 979px) {
  .ch-hook { display: block; min-height: 0; padding: 24px 0 30px; }
  .scrub { height: 112svh; }
  .scrub--line { height: 52svh; }
  .stick { top: calc(var(--mh) + 14px); margin-bottom: 6svh; }
  #release { scroll-margin-top: var(--mh); }
  .rl-intro { padding-top: 0; }
  .rl-hold { height: 136svh; margin: 18px -6px 0; }
  .rl-hold .rl-cal { top: calc(var(--mh) + 6px); }
  .rl-cal { padding: 10px 10px 8px; border-radius: 20px; }
  .rl-phase { font-size: 17px; margin-bottom: 6px; }
  .rl-row { grid-template-columns: 62px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .rl-grid { gap: 3px; }
  .rl-col { padding-bottom: 3px; font-size: 9px; line-height: 1.12; }
  .rl-col em { hyphens: manual; }
  .rl-eff { font-size: 12.5px; gap: 5px; }
  .rl-mark { width: 8px; height: 8px; }
  .rl-cell { height: 34px; border-radius: 8px; }
  .rl-range { margin-top: 2px; }
  .rl-seven { padding-top: 8svh; min-height: 34svh; }
  .seg { display: flex; }
  .seg button { flex: 1 1 0; padding: 0 10px; }
  .rl-open { padding: 6px 0 10svh; }
  .open-btn { height: 56px; font-size: 17px; }
  :root { --sheet-overlap: 0px; }
}
/* A narrow desktop column can't fit the suite names either. */
/* With reduced motion the finished day sits in the page at its own height, and the sheet still rises over a map that holds still. */
@media (prefers-reduced-motion: reduce) { .rl-hold { height: auto; } .rl-hold .rl-cal { position: static; } }
/* On a short phone the calendar has to fit whole in the space under the map. */
.rl-v { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ti); opacity: 0; transition: opacity .25s; }
.rl-cell[data-st="live"] .rl-v { opacity: 1; }
@media (max-width: 979px) { .rl-v { font-size: 10.5px; } }
.rl-cell.is-joined { border-radius: 0; box-shadow: 0 4px 0 var(--t); }
.rl-cell.is-joined[data-join="top"] { border-radius: 10px 10px 0 0; }
.rl-cell.is-joined[data-join="bot"] { border-radius: 0 0 10px 10px; box-shadow: none; }
@media (max-width: 979px) { .rl-cell.is-joined { box-shadow: 0 3px 0 var(--t); } .rl-cell.is-joined[data-join="top"] { border-radius: 8px 8px 0 0; } .rl-cell.is-joined[data-join="bot"] { border-radius: 0 0 8px 8px; box-shadow: none; } }
/* The walk gets room, because the ratings change one after another. */
#walk .scrub { height: 168vh; }
@media (max-width: 979px) { #walk .scrub { height: 150svh; } }