/* Chapter Select, the home page: the menu over Tristan's live-show photograph, and the
   stage that plays every chapter. Loads after site.css. Without .is-scrolly every chapter
   reads top to bottom; with it (home.js, wide screens, motion allowed) one pinned stage
   plays them. */

:root {
  --rail: 62px;
  --card-x: 57.6vw;
  --card-w: 36vw;
}

/* ---------- The backdrop: Tristan's live-show photograph ---------- */

.backdrop {
  --dim: 0;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
}
.backdrop::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 69.5vw;
  background:
    linear-gradient(rgba(12, 13, 15, 0.3), rgba(12, 13, 15, 0.3)),
    url("../img/story/backdrop-1400.jpg") 50% 30% / cover no-repeat;
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46vw 64vh at 77vw 54vh, rgba(12, 13, 15, 0.5) 0, rgba(12, 13, 15, 0.34) 55%, rgba(12, 13, 15, 0) 100%),
    linear-gradient(90deg, var(--bg) 0, var(--bg) 32.6vw, rgba(12, 13, 15, 0.9) 41.7vw, rgba(12, 13, 15, 0.58) 59.7vw, rgba(12, 13, 15, 0.66) 100%),
    linear-gradient(0deg, rgba(12, 13, 15, 0.92) 0, rgba(12, 13, 15, 0) 38%);
}
.backdrop .dim {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(12, 13, 15, 0.62);
  opacity: var(--dim);
}

/* ---------- Chapter select (the menu) ---------- */

.stage { position: relative; z-index: 1; }

.menu-screen {
  position: relative;
  min-height: 100svh;
  padding: 112px var(--gutter) 64px;
  display: grid;
  grid-template-columns: minmax(0, 470px) 1fr;
  align-content: start;
  column-gap: 4vw;
}
.menu { outline: 0; }
/* twelve chapters in five parts: the menu's rows are a step tighter than an index's, so all of them clear the prompts on a 640px-tall screen */
.menu .menu-title { font-size: clamp(20px, 3vh, 30px); padding-bottom: clamp(10px, 1.6vh, 16px); }
.menu .part { height: clamp(22px, 3.5vh, 36px); padding-bottom: 7px; }
.menu .row { min-height: clamp(25px, 3.65vh, 36px); padding-top: 2px; padding-bottom: 2px; font-size: clamp(16px, 2.25vh, 20px); }

.intro { grid-column: 2; align-self: center; max-width: 34em; margin-top: 140px; }
.intro-lede { font-size: 21px; line-height: 1.5; color: var(--ink-body); }
.intro-hint {
  margin-top: 22px;
  color: var(--mute);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.prompts, .progress { display: none; }

.prompt-set { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.prompt { display: inline-flex; align-items: center; gap: 10px; }

.credit {
  color: var(--mute);
  font-size: 12px;
  letter-spacing: 0.16em;
}
.menu-screen .credit {
  grid-column: 2;
  justify-self: end;
  align-self: end;
  margin-top: 48px;
}

/* ---------- Chapters, read top to bottom ---------- */

.chapter {
  position: relative;
  display: grid;
  gap: 48px;
  padding: clamp(72px, 10vw, 128px) var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.head { max-width: 560px; }

.credit-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 30px; font-size: 13px; letter-spacing: 0.22em; }
.credit-links a { color: var(--mute); text-decoration: none; }
.credit-links a:hover { color: var(--ink); }

/* ---------- Scenes ---------- */

.scene { container-type: inline-size; min-width: 0; }

/* the podcasts and the like: a name, a line about it, and a play button */
.mini { margin-top: 8px; }
.mini li {
  display: grid;
  grid-template-columns: 1fr 36px;
  align-items: center;
  column-gap: 18px;
  padding: 9px 0 8px;
  border-top: 1px solid var(--line);
}
.mini li:last-child { border-bottom: 1px solid var(--line); }
.mini--plain li { grid-template-columns: 1fr; }
.mini-name { font-size: 17px; font-weight: 500; line-height: 1.3; }
.mini-name small { display: block; color: var(--mute); font-size: 13px; font-weight: 400; }
.watch {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  font-size: 13px;
  transition: border-color 0.2s, color 0.2s;
}
.watch:hover { border-color: var(--brass); color: var(--brass); }
.scene > .links { margin-top: 18px; }

/* 01 viewport: the shows on their passes, a row of five once there's room, then the selected reviews
   and features side by side, then the podcasts */
.picks { display: grid; gap: 22px; margin-top: 24px; }
@container (min-width: 500px) {
  .scene--shows .passes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .scene--shows .pass { padding-left: 10px; padding-right: 10px; }
  .picks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5cqi; }
}
.pods { margin-top: 24px; }
.mini--covers li { grid-template-columns: 44px minmax(0, 1fr) 36px; }
.pod-cover { width: 44px; height: 44px; border-radius: 3px; }

/* 02 SUPERJUMP: the features and the season, each a menu with a cursor */
.sj { display: grid; gap: 30px; }
@container (min-width: 500px) {
  .sj { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5cqi; }
}
.titles--play .t { display: inline-flex; align-items: baseline; gap: 10px; }
.titles--play .ic { flex: none; font-size: 11px; color: var(--brass); translate: 0 1px; }

/* 03 the gamer profile: the hall of fame, then the peak ranks */
.scene--profile .peak-list { max-width: 420px; }

/* 04 Windsor Showdown: the editions, then the player select */
.ws-roster { margin-top: 26px; }

/* 05 Aegis: the leagues and Riot's subregionals in one list, then the broadcasts, side by side once there's room */
.scene--leagues .broadcasts { margin-top: 24px; }
@container (min-width: 500px) {
  .circuit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5cqi; align-items: start; }
  .scene--leagues .broadcasts { margin-top: 0; }
}

/* 06 freelance: four shows in two columns, then the LAN in photos */
.shows { display: grid; gap: 24px; }
.show h3 { margin-top: 6px; font-size: 22px; font-weight: 400; line-height: 1.2; }
.show h3 a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color 0.2s; }
.show h3 a:hover { color: var(--brass); }
.show h3 .ic { font-size: 13px; color: var(--mute); }
.show-role { margin-top: 6px; color: var(--brass); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; }
.show > p:not([class]),
.show > div > p:not([class]) { margin-top: 8px; color: var(--ink-body); font-size: 15px; line-height: 1.45; }
.show .links { margin-top: 14px; }
.show-logo { display: block; width: auto; height: 44px; max-width: 160px; margin-bottom: 10px; }
@container (min-width: 520px) {
  .shows { grid-template-columns: 1fr 1fr; column-gap: 0; }
  .show:nth-child(odd) { padding-right: 4cqi; }
  .show:nth-child(even) { padding-left: 4cqi; border-left: 1px solid var(--line); }
}

/* 07 Wayward Souls: L'orho in a commission and in game, then the best parses beside the magazine */
.fc-pair { margin-top: 10px; }
.is-scrolly .fc-pair .print { flex: none; }
.is-scrolly .fc-pair .print img { width: auto; height: clamp(160px, 27vh, 270px); }
.fc-pair + .credit { margin-top: 10px; }
.fc { display: grid; gap: 22px; margin-top: 24px; }
@container (min-width: 500px) {
  .fc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5cqi; align-items: start; }
}
.fc-note { margin-top: 10px; color: var(--ink-body); font-size: 15px; line-height: 1.45; }

/* 08 TASH: the yacht party, then the other events */

/* 09 Toronto TFT: the wall of events */
.events { margin-top: 10px; }

/* 10 GG Orchestra: the programme plays down, piece by piece, beside the night itself */
.gg { display: grid; gap: 26px; }
@container (min-width: 500px) {
  .gg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5cqi; align-items: start; }
}
.programme { --played: 99; margin-top: 10px; }
.programme li {
  margin: 0 -16px;
  padding: 7px 16px;
  font-size: 20px;
  line-height: 1.25;
  color: rgba(236, 232, 223, calc(0.36 + 0.52 * clamp(0, calc(var(--played) - var(--i) + 1), 1)));
  background: rgba(236, 232, 223, calc(0.12 * clamp(0, calc(1 - (var(--played) - var(--i))), 1) * clamp(0, calc(1 + (var(--played) - var(--i))), 1)));
}
.gg-photos { display: grid; gap: 10px; }
.gg-photos .print img { width: 100%; }
.gg-team { margin-top: 26px; }
.gg-team .strip { margin-top: 10px; }

/* 11 the album: the prints roll by */
.reel-window { overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.reel { display: flex; gap: 14px; width: max-content; }
.reel .print { flex: none; }
.reel .print img { width: auto; height: clamp(240px, 46vh, 420px); object-fit: cover; }
.scene--reel .links { margin-top: 22px; }

/* 13 the day job: three companies */
.steps li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.steps li:first-child { padding-top: 0; }
.steps b { display: block; font-size: 34px; font-weight: 300; line-height: 1.1; }
.steps span { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.steps--career { margin-top: 10px; }
.steps--career b { font-size: 30px; }

/* the end: the ways to get in touch */
.chapter--contact .title { font-size: clamp(44px, 5.4vw, 76px); }
.chapter--contact .result--action { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.chapter--contact .email-reveal { flex-basis: 100%; }
.contact-back { margin-top: 34px; }

/* ---------- Pinned: one stage plays every chapter ---------- */

.is-scrolly .top { position: fixed; }
.is-scrolly .backdrop { position: fixed; height: auto; bottom: 0; }

.is-scrolly .stage { height: calc(var(--len, 15) * 100svh); }
.is-scrolly .frame { position: sticky; top: 0; height: 100svh; overflow: hidden; }

.is-scrolly .menu-screen { position: absolute; inset: 0; display: block; min-height: 0; padding: 0; }
.is-scrolly .menu {
  --fold: 0;
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  top: 12.4vh;
  width: 32.6vw;
  max-width: 470px;
}
.is-scrolly .menu-title { opacity: clamp(0, calc(1 - var(--fold) * 1.7), 1); }
/* While a chapter plays, the list clips to its numbers (the rail). Pointing at the rail, or tabbing
   onto it, runs --peek to 1: the clip opens to --fly and the part labels and chapter names come back
   on a raised panel, a flyout that closes again once a chapter is picked from it or the pointer leaves. */
@property --peek { syntax: "<number>"; inherits: true; initial-value: 0; }
.is-scrolly .list {
  --fly: 232px;
  --shut: calc(var(--fold) * (1 - var(--peek)));
  position: relative;
  clip-path: inset(-14px calc(var(--fold) * ((1 - var(--peek)) * (100% - 30px) + var(--peek) * (100% - var(--fly))) - 16px) -14px -16px);
  transition: --peek 0.22s cubic-bezier(0.5, 0, 0.75, 0) 0.12s;
}
.is-scrolly .part,
.is-scrolly .row .nm { opacity: clamp(0, calc(1 - var(--shut) * 1.7), 1); }
.is-scrolly .list::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px calc(100% - var(--fly) - 16px) -14px -16px;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  opacity: var(--peek);
  pointer-events: none;
}
.is-scrolly .frame.is-playing:not(.is-railshut) .list:has(.row:focus-visible) {
  --peek: 1;
  transition: --peek 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .is-scrolly .frame.is-playing:not(.is-railshut) .list:hover {
    --peek: 1;
    pointer-events: auto;
    transition: --peek 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
  }
  .is-scrolly .frame.is-playing:not(.is-railshut) .list:hover::before { pointer-events: auto; }
}
.is-scrolly .intro { display: none; }
.is-scrolly .prompts { display: block; position: absolute; left: var(--gutter); bottom: 44px; color: var(--mute); font-size: 13px; letter-spacing: 0.16em; }
.is-scrolly .prompt-set--play,
.is-scrolly .prompt-set--end { display: none; }
.is-scrolly .frame.is-playing .prompt-set--menu { display: none; }
.is-scrolly .frame.is-playing:not(.is-end) .prompt-set--play { display: flex; }
.is-scrolly .frame.is-end .prompt-set--end { display: flex; }
.is-scrolly .menu-screen .credit { position: absolute; right: var(--gutter); bottom: 48px; margin: 0; }
@media (max-width: 1199px) {
  .is-scrolly .prompt:last-child { display: none; }
}

.is-scrolly .progress {
  position: absolute;
  z-index: 4;
  left: var(--card-x);
  width: var(--card-w);
  top: 86.9vh;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--mute);
  font-size: 13px;
  letter-spacing: 0.2em;
}
.progress b { font-weight: 400; }
.ticks { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.ticks i { height: 3px; background: rgba(236, 232, 223, 0.22); transition: background-color 0.25s; }
.ticks i.is-done { background: rgba(236, 232, 223, 0.7); }
.ticks i.is-now { background: var(--brass); }

.is-scrolly .chapter {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
}
.is-scrolly .chapter.is-open .head { pointer-events: auto; }
.is-scrolly .frame.is-playing .chapter.is-open .scene { pointer-events: auto; }
.is-scrolly .frame.is-playing .menu { pointer-events: none; }
.is-scrolly .frame.is-playing .row { pointer-events: auto; }
/* the card and the progress ticks end on the right margin, level with the top bar and the credit */
html.is-scrolly { --card-w: calc(100% - var(--card-x) - var(--gutter)); }
/* the description fills the card out to the right margin, its type growing a step on wide screens to keep the lines readable */
.is-scrolly .head .desc { max-width: none; font-size: clamp(17px, 1.18vw, 20px); }
/* the card sits on the photograph: its small labels get a step more light */
.is-scrolly .head .meta dt { color: #aeb0b4; }

.is-scrolly .head {
  position: absolute;
  left: var(--card-x);
  width: calc(var(--card-w) / var(--fit, 1));
  max-width: none;
  scale: var(--fit, 1);
  transform-origin: 0 100%;
  top: 15vh;
  bottom: 18.4vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.is-scrolly .scene {
  position: absolute;
  left: calc(var(--gutter) + var(--rail) + 44px);
  width: calc((var(--card-x) - var(--gutter) - var(--rail) - 44px - 4vw) / var(--fit, 1));
  scale: var(--fit, 1);
  transform-origin: 0 50%;
  /* centred where it always was, a step from the top bar and the prompts; a short screen takes it right up to them */
  top: max(80px, 14vh - 24px);
  bottom: max(80px, 15vh - 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* the end screen takes the whole stage beside the rail */
.is-scrolly .chapter--contact .head {
  left: calc(var(--gutter) + var(--rail) + 44px);
  width: calc((100vw - var(--gutter) * 2 - var(--rail) - 44px) / var(--fit, 1));
  max-width: 980px;
  top: 0;
  bottom: 6vh;
  justify-content: center;
  transform-origin: 0 50%;
}
.is-scrolly .frame.is-end .progress { opacity: 0.4; }
.is-scrolly .reel-window { overflow: visible; }
.is-scrolly .scene--reel { overflow: hidden; }
.is-scrolly .reel .print img { height: clamp(240px, 44vh, 400px); }

/* at the menu, the opening chapter's card shows until the climb to 01 begins (home.js tweens --menu) */
.is-scrolly .frame.is-menu:not(.is-choosing) .chapter[data-open] .head {
  opacity: var(--menu, 1) !important;
  transform: translateY(calc((var(--menu, 1) - 1) * 10px)) !important;
}

/* choosing at the menu: the card follows the cursor, whatever the stage last showed */
.is-scrolly .frame.is-choosing .chapter .head { opacity: 0 !important; transition: opacity 0.18s; }
.is-scrolly .frame.is-choosing .chapter.is-preview .head { opacity: 1 !important; transform: none !important; }

/* a jump cuts to a loading screen that names where it is going */
.veil { display: none; }
.is-scrolly .veil {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 0 var(--gutter);
  background: var(--bg);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s;
}
.veil-kick {
  color: var(--brass);
  font-size: 13px;
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.veil-title { color: var(--ink); font-size: clamp(44px, 5.4vw, 76px); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
/* the loading bar under the title */
.veil-title::after { content: ""; display: block; width: 72px; height: 2px; margin: 26px auto 0; background: var(--brass); transform-origin: 0 50%; }
.is-scrolly .frame.is-cutting .veil { opacity: 1; }
.is-scrolly .frame.is-cutting .veil-title::after { animation: veil-load 0.56s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
@keyframes veil-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the title screen: a tab's first visit opens on it, like a game's (the head script puts it up,
   home.js runs it). The name shows once its face has loaded and the bar fills while the stage
   loads; then the bar gives way to PRESS ANY KEY (TAP TO START on a touch screen), breathing, and
   the screen waits. A key, click, tap or scroll dissolves it into the chapter select as the
   photograph comes up behind the menu */
.title-screen { display: none; }
.is-booting .title-screen {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 0 var(--gutter);
  background: var(--bg);
  text-align: center;
  touch-action: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ts-name { color: var(--ink); font-size: clamp(48px, 7vw, 96px); font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
/* the four parts, as the top bar names them; they wrap two by two on a phone */
.ts-parts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  margin-top: 26px;
  color: var(--mute);
  font-size: 13px;
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: 0.3em;
  line-height: 1.5;
  text-transform: uppercase;
}
.ts-name,
.ts-parts { opacity: 0; transition: opacity 0.45s ease-out; }
.title-ready .ts-name,
.title-ready .ts-parts { opacity: 1; }
/* the bar and the prompt share one slot under the parts */
.ts-status { display: grid; place-items: center; height: 28px; margin-top: 26px; }
.ts-status > * { grid-area: 1 / 1; }
.ts-bar { width: 120px; height: 2px; background: var(--brass); transform-origin: 0 50%; animation: ts-load 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
.ts-press { color: var(--brass); font-size: 13px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0; }
.ts-tap { display: none; }
@media (hover: none) and (pointer: coarse) {
  .ts-key { display: none; }
  .ts-tap { display: inline; }
}
.title-loaded .ts-bar { opacity: 0; transition: opacity 0.25s 0.3s; animation: ts-done 0.3s ease-out both; }
.title-loaded .ts-press { opacity: 1; transition: opacity 0.5s 0.5s; }
.title-loaded .ts-press > * { animation: ts-breathe 2.4s ease-in-out 1.2s infinite; }
.is-booted .title-screen { opacity: 0; pointer-events: none; }
.is-booted .backdrop { animation: ts-photo 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards; }
@keyframes ts-load { from { transform: scaleX(0); } to { transform: scaleX(0.8); } }
@keyframes ts-done { from { transform: scaleX(0.8); } to { transform: scaleX(1); } }
@keyframes ts-photo { from { opacity: 0; } }
@keyframes ts-breathe { 50% { opacity: 0.35; } }
/* with reduced motion the title still asks for a key, but nothing moves: the bar is full, the
   prompt holds still and the screen goes in one short fade */
@media (prefers-reduced-motion: reduce) {
  .ts-bar { animation: none; }
  .title-loaded .ts-bar { animation: none; }
  .title-loaded .ts-press > * { animation: none; }
  .is-booted .backdrop { animation: none; }
  .is-booting .title-screen { transition-duration: 0.2s; }
}

/* before home.js takes over, show exactly its first frame */
.is-scrolly:not([data-story]) .chapter .head,
.is-scrolly:not([data-story]) .chapter .scene { opacity: 0; }
.is-scrolly:not([data-story]) .chapter[data-open] .head { opacity: 1; }

/* ---------- Narrower screens ---------- */

@media (min-width: 1024px) {
  .chapter:not(.chapter--contact) { grid-template-columns: minmax(0, 1fr) var(--card-w); column-gap: 4vw; align-items: center; }
  .chapter .head { grid-column: 2; grid-row: 1; }
  .chapter .scene { grid-column: 1; grid-row: 1; }
  .chapter--contact .head { max-width: 760px; }
}

@media (max-width: 1023px) {
  :root { --card-w: 100%; }
  .menu-screen { grid-template-columns: 1fr; }
  .intro { grid-column: 1; margin-top: 48px; }
  .menu-screen .credit { grid-column: 1; justify-self: start; margin-top: 40px; }
}

@media (max-width: 760px) {
  .backdrop { height: 64svh; }
  .backdrop::before { width: 100%; background-image: linear-gradient(rgba(12, 13, 15, 0.3), rgba(12, 13, 15, 0.3)), url("../img/story/backdrop-760.jpg"); background-position: 50% 24%; }
  .backdrop::after { background: linear-gradient(0deg, var(--bg) 4%, rgba(12, 13, 15, 0.55) 55%, rgba(12, 13, 15, 0.72) 100%); }
  .menu-screen { padding-top: 34svh; }
  .intro-lede { font-size: 18px; }
  .chapter { gap: 36px; padding: 64px var(--gutter); }
  .reel .print img { height: 260px; }
}

/* the cursor on the menu only marks the newest chapter while the stage drives it */
html:not(.is-scrolly) .row.is-current { background: none; color: var(--ink-soft); font-weight: 400; }
html:not(.is-scrolly) .row.is-current .no,
html:not(.is-scrolly) .row.is-current .yr { color: var(--mute); }
html:not(.is-scrolly) .row.is-current:hover { background: rgba(236, 232, 223, 0.07); color: var(--ink); }