/* music.css: the song overview (music.html), on top of hero.css (tokens, the header fly-in, the top bar, the
   player, the menu, the video player). The catalogue is the line as a TIME AXIS: newest at the top, year and month
   ticks on the line, LL songs hang left and GW songs right as compact rungs (phones: every rung right of the edge
   spine), the album bracketed on the line, the line ends where it started. Cards keep their SIDE's material (LL
   paper, GW dark glass) whatever the world; the chrome follows the world. Two curves only: punch (LL), breath (GW).
   --lx = the spine (CSS px, set by js/pages/music.js). */

html[data-page="music"] {
  --m-arm: 34px;
  --m-card-w: min(23rem, calc(50vw - 34px - 24px));   /* the spine sits at the middle on wide screens */
  --m-cover: 60px;
  --m-gap: 10px;
  --m-overlap: 40px;             /* consecutive rungs on opposite sides interlock (the zipper) */
  --m-flip-d: 560ms;
  --m-flip-e: var(--punch);
  --m-ll-ground: #ece7dc;
  --m-gw-ground: #06080a;
}
html[data-page="music"][data-world="gw"] { --m-flip-d: 900ms; --m-flip-e: var(--breath); }

/* the ground before the canvas draws (and without WebGL): the inside of the head, paper or night */
html[data-page="music"], html[data-page="music"] body { background: var(--m-ll-ground); }
html[data-page="music"][data-world="gw"], html[data-page="music"][data-world="gw"] body { background: var(--m-gw-ground); }
html[data-page="music"] body { transition: background-color var(--d-mid) var(--breath); }
html[data-page="music"] .stage { opacity: 0; transition: opacity 320ms linear; }
html[data-page="music"][data-gl="1"] .stage { opacity: 1; }
.m-dom-line {
  position: fixed; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  left: calc(var(--lx) * 1px - 1px); width: 2px;
  background: var(--line); box-shadow: var(--line-glow);
  transition: opacity 320ms linear, background-color var(--d-mid) linear;
}
html[data-world="ll"] .m-dom-line { width: 3px; left: calc(var(--lx) * 1px - 1.5px); }
html[data-gl="1"] .m-dom-line { opacity: 0; }

/* reduced motion (and no WebGL): hovering a rung of the other side crossfades a hint of that world in from its edge */
.m-tint { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.m-tint i { position: absolute; top: 0; bottom: 0; width: 34vw; opacity: 0; transition: opacity 200ms linear; }
.m-tint-ll { left: 0; background: linear-gradient(90deg, rgba(240, 234, 222, 0.92), rgba(240, 234, 222, 0.5) 38%, rgba(240, 234, 222, 0)); }
.m-tint-gw { right: 0; background: linear-gradient(270deg, rgba(4, 7, 9, 0.9), rgba(4, 12, 16, 0.5) 38%, rgba(0, 229, 255, 0)); }
.m-tint-gw::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 3px); }
html[data-tint="ll"] .m-tint-ll, html[data-tint="gw"] .m-tint-gw { opacity: 1; }

/* the top stays slim: content only fades around the canvas-drawn corner mark (never a thick band across the top) */
html[data-page="music"] .scroller {
  -webkit-mask-image: radial-gradient(circle at calc(var(--gutter) + 22px) calc(max(18px, env(safe-area-inset-top)) + 22px), transparent 27px, #000 42px);
  mask-image: radial-gradient(circle at calc(var(--gutter) + 22px) calc(max(18px, env(safe-area-inset-top)) + 22px), transparent 27px, #000 42px);
}
html[data-page="music"] .sound { border-radius: 22px; padding: 0.55rem 0.8rem 0.55rem 0.85rem; transition: color var(--d-hit) linear, background-color var(--d-short) linear, opacity 200ms linear; }
html[data-page="music"][data-scrolled="1"] .sound { background: var(--bar-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-page="music"] .player { opacity: 1; transform: none; }
html[data-page="music"] .player .transport { padding-left: 0; }
.m-noscript { position: relative; z-index: 3; padding: 30vh 24px; font: 14px/1.6 var(--mono); }

/* ================================================================ the page */
.m-page { padding: 17vh 0 0; }
.m-head { margin-bottom: 4.6vh; }
.m-title-xl { font-size: clamp(4.8rem, 12.5vw, 13.5rem); }
.m-head .ch-count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the filters: side left of the line, release right
   of it; the line passes between the groups. Scrolled past, they dock in the top bar (the same grid, the same x). */
.m-filters-slot { position: relative; height: 46px; z-index: 3; }
.m-filters {
  display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: center;
  height: 46px;
}
.m-fgroup { display: flex; align-items: center; gap: 0; }
.m-fgroup .m-chip + .m-chip { margin-left: -1.5px; }
html[data-world="gw"] .m-fgroup .m-chip + .m-chip { margin-left: -1px; }
.m-chip[aria-pressed="true"] { z-index: 1; }
.m-fgroup--side { grid-column: 1; justify-self: end; margin-right: 22px; }
.m-fgroup--kind { grid-column: 2; justify-self: start; margin-left: 22px; }
.m-chip {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 34px; padding: 0 0.85rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  color: var(--fg);
  transition: transform var(--d-short) var(--ease), background-color var(--d-hit) linear, color var(--d-hit) linear,
              box-shadow var(--d-short) var(--ease), border-color var(--d-hit) linear, opacity var(--d-hit) linear;
}
.m-chip small { font-size: 0.54rem; letter-spacing: 0.08em; color: var(--dim); font-variant-numeric: tabular-nums; transition: color var(--d-hit) linear; }
.m-chip b { position: relative; z-index: 0; font-weight: 700; letter-spacing: 0.2em; }
.m-chip:focus-visible { outline-offset: 3px; }
/* LL world: paper chips with an ink keyline; the pressed one is inked with a paint shadow and slams */
html[data-world="ll"] .m-chip { background: #fbfaf5 var(--grain); background-size: auto, 160px 160px; border: 1.5px solid var(--ll-ink); }
html[data-world="ll"] .m-chip:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--p-yellow); }
html[data-world="ll"] .m-chip[aria-pressed="true"] { background: var(--ll-ink); color: #f6f3ec; box-shadow: 3px 3px 0 var(--p-magenta); transform: translate(-1px, -1px) rotate(-1deg); }
html[data-world="ll"] .m-chip[aria-pressed="true"] small { color: #c9c3b6; }
/* GW world: dark glass lit by the line; the pressed one glows */
html[data-world="gw"] .m-chip { background: rgba(4, 7, 9, 0.84); border: 1px solid rgba(0, 229, 255, 0.28); letter-spacing: 0.26em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* heat: docked, the chips sit on the band, which blurs the world already; their own blur (of the band) shows nothing */
html[data-world="gw"][data-dock="1"] .m-chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-world="gw"] .m-chip:hover { border-color: rgba(0, 229, 255, 0.7); box-shadow: 0 0 14px rgba(0, 229, 255, 0.22); }
html[data-world="gw"] .m-chip[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 229, 255, 0.14); text-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }
/* the side chips speak their own side whatever the world: LL a paint swash, GW a cyan light */
.m-chip--ll b { color: var(--ll-ink); padding: 0.16rem 0.36rem 0.12rem 0.44rem; }
.m-chip--ll b::before {
  content: ''; position: absolute; inset: -1px -3px; z-index: -1; background: var(--p-orange);
  clip-path: polygon(3% 12%, 30% 0, 62% 8%, 100% 2%, 96% 60%, 100% 96%, 58% 100%, 22% 92%, 0 100%, 4% 50%); transform: skewX(-12deg);
}
.m-chip--gw b { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.75); }
html[data-world="ll"] .m-chip--gw b { color: #007c8c; text-shadow: none; }
html[data-world="ll"] .m-chip--gw[aria-pressed="true"] b { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.75); }

/* docked: the same control rides in the top bar, still straddling the line */
html[data-dock="1"] .m-filters {
  position: fixed; left: 0; right: 0; top: max(18px, env(safe-area-inset-top)); height: 44px; z-index: 6;
  animation: mDockIn var(--ease-d) var(--ease) both;
}
@keyframes mDockIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
html[data-dock="1"] .m-chip-l { display: none; }
html[data-world="gw"][data-dock="1"] .m-chip { background: rgba(4, 7, 9, 0.95); }
html[data-dock="1"] .m-hint { opacity: 0 !important; transition: opacity 160ms linear; }
/* docked, the chips (and the month, on wide screens) ride on a strip of their world so the rungs never show through
   them, as on the video page: LL a torn paper strip with an ink shadow, GW a band of dark glass with a cyan hairline.
   js/pages/music.js measures the chips (--band-l/-t/-w/-h, in the filters' own box). */
html[data-dock="1"] .m-fgroup { position: relative; z-index: 1; }
html[data-dock="1"] .m-filters::before, html[data-dock="1"] .m-filters::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--band-l, 0px) - var(--band-px, 14px)); width: calc(var(--band-w, 100%) + 2 * var(--band-px, 14px));
  top: calc(var(--band-t, 0px) - var(--band-py, 7px)); height: calc(var(--band-h, 100%) + 2 * var(--band-py, 7px));
}
html[data-world="ll"][data-dock="1"] .m-filters::after {
  background: #fbfaf5 var(--grain); background-size: auto, 160px 160px;
  clip-path: polygon(0 9%, 4% 0, 12% 6%, 21% 1%, 31% 7%, 42% 0, 53% 5%, 64% 0, 75% 6%, 86% 1%, 94% 6%, 100% 2%, 99% 52%, 100% 93%, 90% 100%, 79% 94%, 67% 100%, 55% 95%, 43% 100%, 31% 94%, 19% 100%, 8% 95%, 0 100%, 1% 48%);
  rotate: -0.25deg;
}
html[data-world="ll"][data-dock="1"] .m-filters::before {
  background: var(--ll-ink); translate: 4px 4px; rotate: -0.25deg;
  clip-path: polygon(0 9%, 4% 0, 12% 6%, 21% 1%, 31% 7%, 42% 0, 53% 5%, 64% 0, 75% 6%, 86% 1%, 94% 6%, 100% 2%, 99% 52%, 100% 93%, 90% 100%, 79% 94%, 67% 100%, 55% 95%, 43% 100%, 31% 94%, 19% 100%, 8% 95%, 0 100%, 1% 48%);
}
html[data-world="gw"][data-dock="1"] .m-filters::after {
  border-radius: 6px; border: 1px solid rgba(0, 229, 255, 0.22);
  background: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.035) 0 1px, transparent 1px 3px), rgba(3, 6, 8, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(0, 229, 255, 0.1), inset 0 1px 0 rgba(0, 229, 255, 0.12);
}
html[data-world="gw"][data-dock="1"] .m-filters::before {
  z-index: 1; top: auto; height: 1px; bottom: calc(100% - var(--band-t, 0px) - var(--band-h, 100%) - var(--band-py, 7px));
  left: calc(var(--band-l, 0px) - var(--band-px, 14px) + 10px); width: calc(var(--band-w, 100%) + 2 * var(--band-px, 14px) - 20px);
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.85) 30%, rgba(0, 229, 255, 0.85) 70%, transparent);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}
/* docked on desktop: where on the line you are, read off the month at the top */
.m-when { display: none; }
@media (max-width: 1023.98px) { .m-chip-l { display: none; } }
@media (min-width: 1180px) {
  html[data-dock="1"] .m-when {
    display: flex; align-items: center; gap: 0.7rem; position: absolute; z-index: 1;
    top: 50%; right: calc(var(--gutter) + 150px); translate: 0 -50%;
    font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); white-space: nowrap;
  }
  html[data-dock="1"] .m-when b { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
  html[data-world="gw"][data-dock="1"] .m-when b { text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); }
  html[data-dock="1"] .m-when::before { content: ''; width: 18px; height: 2px; background: var(--line); box-shadow: var(--line-glow); }
}

.m-hint {
  display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); margin: 1.1rem 0 7vh;
  font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim);
}
.m-hint span:first-child { justify-self: end; margin-right: 22px; }
.m-hint span:last-child { margin-left: 22px; }

/* ================================================================ the line: rows */
.m-line-wrap { position: relative; }
.m-line { position: relative; padding-bottom: 2rem; }
/* until the songs are built the footer keeps a screen below the list, so it never shows in the first screen and then
   jumps down (CLS) */
.m-line-wrap:has(> .m-line:empty) + .m-foot { margin-top: 110vh; }
/* and the empty list's box stays unseen (nothing shows in it yet): the header's late web font would move it (CLS) */
.m-line-wrap:has(> .m-line:empty) { visibility: hidden; }
.m-line > li { position: relative; }
.m-line > li[hidden] { display: none; }
/* a row leaving on a filter change is lifted out of the flow at its old place while it folds into the line */
.m-line > li.is-leaving { position: absolute; left: 0; right: 0; margin: 0 !important; pointer-events: none; z-index: 0; }

/* ---------------------------------------------------------------- the ticks: years big beside the line, months small */
.m-tick { position: absolute; left: calc(var(--lx) * 1px); top: 50%; display: block; pointer-events: none; }
.m-year {
  display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: center;
  margin: 5.5rem 0 2.2rem;
}
.m-year:first-child { margin-top: 0.5rem; }
.m-year h2 { grid-column: 1; justify-self: end; margin-right: 30px; font-weight: 400; }
.m-year-n { display: block; font-family: var(--display); font-size: clamp(4.4rem, 7.6vw, 8rem); line-height: 0.8; letter-spacing: 0.01em; }
.m-year-c { grid-column: 2; margin-left: 30px; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }
.m-year .m-tick { width: 44px; height: 3px; margin: -1.5px 0 0 -22px; }
html[data-world="ll"] .m-year-n { color: var(--ll-ink); text-shadow: 0.05em 0.05em 0 var(--p-yellow); }
html[data-world="ll"] .m-year .m-tick { background: var(--ll-ink); }
html[data-world="gw"] .m-year-n { color: transparent; -webkit-text-stroke: 1.2px var(--cyan); letter-spacing: 0.04em; filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.45)); }
html[data-world="gw"] .m-year .m-tick { height: 2px; background: var(--cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.8); }

.m-month { display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: center; height: 3.2rem; margin-top: 1.6rem; }
.m-month h3 { grid-column: 1; justify-self: end; margin-right: 24px; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--fg); }
.m-month .m-tick { width: 16px; height: 2px; margin: -1px 0 0 -8px; background: var(--line); box-shadow: var(--line-glow); }
.m-month + .m-rung { margin-top: 0.4rem; }

/* ---------------------------------------------------------------- a rung: the card hangs off the line */
.m-rung { display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); margin-bottom: var(--m-gap); }
.m-rung.swap { margin-top: calc(var(--m-overlap) * -1); }
.m-card { position: relative; width: min(100%, var(--m-card-w)); }
.m-rung--ll .m-card { grid-column: 1; justify-self: end; margin-right: var(--m-arm); }
.m-rung--gw .m-card { grid-column: 2; justify-self: start; margin-left: var(--m-arm); }
.m-arm { position: absolute; top: 50%; width: var(--m-arm); height: 2px; margin-top: -1px; pointer-events: none; }
.m-rung--ll .m-arm { left: calc(var(--lx) * 1px - var(--m-arm)); transform-origin: 100% 50%; background: var(--ll-ink); }
.m-rung--gw .m-arm { left: calc(var(--lx) * 1px); transform-origin: 0 50%; height: 1px; margin-top: -0.5px; background: var(--cyan); box-shadow: 0 0 6px rgba(0, 229, 255, 0.7); }
html[data-world="gw"] .m-rung--ll .m-arm { background: #e8e4da; }
.m-node {
  position: absolute; left: calc(var(--lx) * 1px); top: 50%; z-index: 1; pointer-events: none;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
}
.m-rung--ll .m-node { background: var(--ll-ink); box-shadow: 0 0 0 2px var(--paint, var(--p-magenta)); }
html[data-world="gw"] .m-rung--ll .m-node { background: #e8e4da; }
.m-rung--gw .m-node { background: #dffcff; box-shadow: 0 0 0 2px var(--night), 0 0 8px 2px rgba(0, 229, 255, 0.8); }

/* the play button ON the line: a disc plays the song, a small screen plays its video in-world */
.m-play {
  position: absolute; left: calc(var(--lx) * 1px); top: 50%; z-index: 2;
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform var(--d-short) var(--ease), background-color var(--d-hit) linear, box-shadow var(--d-short) var(--ease), color var(--d-hit) linear;
}
.m-play svg.ic { grid-area: 1 / 1; width: 12px; height: 12px; fill: currentColor; position: relative; z-index: 1; }
.m-play .i-play { margin-left: 2px; }
.m-play .i-pause { display: none; }
.m-play[aria-pressed="true"] .i-play { display: none; }
.m-play[aria-pressed="true"] .i-pause { display: block; }
.m-play .ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.m-play .ring circle { fill: none; stroke-width: 2.4; stroke-dasharray: 125.66; stroke-dashoffset: 125.66; }
.m-rung--ll .m-play { background: var(--ll-card); color: var(--ll-ink); box-shadow: 0 0 0 2px var(--ll-ink), 3px 3px 0 2px var(--paint, var(--p-magenta)); }
.m-rung--ll .m-play .ring circle { stroke: var(--paint, var(--p-magenta)); }
.m-rung--ll .m-play:hover { transform: scale(1.1) rotate(-6deg); background: var(--paint, var(--p-magenta)); }
.m-rung--gw .m-play { background: #04070a; color: var(--cyan); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.7), 0 0 16px rgba(0, 229, 255, 0.35); }
.m-rung--gw .m-play .ring circle { stroke: var(--cyan); filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.9)); }
.m-rung--gw .m-play:hover { transform: scale(1.07); box-shadow: 0 0 0 1px var(--cyan), 0 0 26px rgba(0, 229, 255, 0.6); }
.m-play:focus-visible { outline-offset: 5px; border-radius: 50%; }
.m-play--video { width: 40px; height: 26px; margin: -13px 0 0 -20px; border-radius: 4px; }
.m-play--video:focus-visible { border-radius: 4px; }
.m-play--video svg.ic { width: 10px; height: 10px; }
.m-rung--ll .m-play--video { box-shadow: 0 0 0 2px var(--ll-ink), 3px 3px 0 2px var(--paint, var(--p-magenta)); }
.m-rung--gw .m-play--video { background: #04070a; box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.7), 0 0 14px rgba(0, 229, 255, 0.3), inset 0 0 8px rgba(0, 229, 255, 0.18); }
.m-rung--gw .m-play--video::after { content: ''; position: absolute; inset: 2px; border-radius: 2px; background: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.1) 0 1px, transparent 1px 3px); pointer-events: none; }

/* ---------------------------------------------------------------- card materials (the side's, whatever the world) */
.m-card-in { position: relative; display: grid; grid-template-columns: var(--m-cover) minmax(0, 1fr); gap: 0.85rem; align-items: center; padding: 0.6rem 0.9rem 0.6rem 0.6rem; }
.m-cover { position: relative; width: var(--m-cover); height: var(--m-cover); display: block; }
.m-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-body { min-width: 0; display: grid; gap: 0.28rem; }
.m-t { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 0.92; letter-spacing: 0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-top: 0.06em; }
.m-link { color: inherit; }
.m-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }   /* the whole card opens the song page */
.m-link:focus-visible { outline: none; }
.m-card:has(.m-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.m-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.75rem; font-size: 0.54rem; letter-spacing: 0.2em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.m-tag { position: relative; font-weight: 700; letter-spacing: 0.2em; }
.m-abs { font-family: var(--body); font-size: 0.82rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-vid {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.42rem 0.14rem 0.36rem;
  font: inherit; letter-spacing: inherit; text-transform: inherit; border-radius: 2px;
}
.m-vid svg { width: 8px; height: 8px; fill: currentColor; }
.m-kind { opacity: 0.85; }

.m-rung--ll .m-card-in {
  background: var(--ll-card) var(--grain); background-size: auto, 160px 160px; color: var(--ll-ink);
  border: 2px solid var(--ll-ink); box-shadow: 5px 5px 0 var(--paint, var(--p-magenta));
  rotate: var(--tilt, 0deg);
  transition: transform var(--d-short) var(--punch), box-shadow var(--d-short) var(--punch), rotate var(--d-short) var(--punch);
}
.m-rung--ll .m-card:hover .m-card-in, .m-rung--ll .m-card:focus-within .m-card-in { transform: translate(-3px, -3px); rotate: 0deg; box-shadow: 8px 8px 0 var(--paint, var(--p-magenta)); }
.m-rung--ll .m-cover img { border: 2px solid var(--ll-ink); rotate: -2.5deg; transition: rotate var(--d-short) var(--punch), scale var(--d-short) var(--punch); }
.m-rung--ll .m-card:hover .m-cover img { rotate: 1.5deg; scale: 1.05; }
.m-rung--ll .m-meta { color: var(--ll-dim); }
.m-rung--ll .m-abs { color: #3a3832; }
.m-rung--ll .m-tag { color: var(--ll-ink); padding: 0.14rem 0.36rem 0.1rem 0.42rem; z-index: 0; }
.m-rung--ll .m-tag::before {
  content: ''; position: absolute; inset: -1px -3px; z-index: -1; background: var(--paint, var(--p-magenta));
  clip-path: polygon(3% 12%, 30% 0, 62% 8%, 100% 2%, 96% 60%, 100% 96%, 58% 100%, 22% 92%, 0 100%, 4% 50%); transform: skewX(-12deg);
}
.m-rung--ll .m-vid { color: var(--ll-ink); box-shadow: inset 0 0 0 1.5px var(--ll-ink); }
.m-rung--ll .m-vid:hover { background: var(--ll-ink); color: #f6f3ec; }

.m-rung--gw .m-card-in {
  background: linear-gradient(180deg, #0c1115, var(--gw-card)); color: var(--gw-fg);
  border: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow: inset 2px 0 0 rgba(0, 229, 255, 0.55), -12px 0 26px -18px rgba(0, 229, 255, 0.55);
  overflow: hidden;
  transition: border-color var(--d-mid) var(--breath), box-shadow var(--d-mid) var(--breath), transform var(--d-long) var(--breath);
}
.m-rung--gw .m-card-in::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 3px); }
.m-rung--gw .m-card:hover .m-card-in, .m-rung--gw .m-card:focus-within .m-card-in {
  border-color: rgba(0, 229, 255, 0.6); transform: translateX(3px);
  box-shadow: inset 3px 0 0 var(--cyan), -16px 0 36px -14px rgba(0, 229, 255, 0.8), 0 0 0 1px rgba(0, 229, 255, 0.22);
}
.m-rung--gw .m-t { letter-spacing: 0.05em; }
.m-rung--gw .m-cover img { filter: grayscale(0.55) contrast(1.08) brightness(0.8); transition: filter var(--d-long) var(--breath); }
.m-rung--gw .m-card:hover .m-cover img { filter: none; }
.m-rung--gw .m-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 229, 255, 0.22), transparent 60%); mix-blend-mode: screen; pointer-events: none; }
.m-rung--gw .m-meta { color: var(--gw-dim); }
.m-rung--gw .m-abs { color: #a9bbbf; }
.m-rung--gw .m-tag { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }
.m-rung--gw .m-vid { color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.5); }
.m-rung--gw .m-vid:hover { box-shadow: inset 0 0 0 1px var(--cyan), 0 0 12px rgba(0, 229, 255, 0.45); }

/* inside the album: a tracklist rung, no cover (the album's cover is on its head), one line of meta and note */
.m-rung.is-album .m-card-in { grid-template-columns: minmax(0, 1fr); padding: 0.55rem 1rem 0.6rem; }
.m-rung.is-album .m-cover { display: none; }
.m-rung.is-album .m-t { font-size: 1.42rem; -webkit-line-clamp: 1; }
.m-rung.is-album { --m-rh: 64px; }
html[data-page="music"] .m-rung.is-album + .m-rung.is-album.swap { margin-top: -28px; }
.m-rung.is-skit .m-t { font-size: 1.2rem; }
.m-rung.is-skit .m-card-in { padding-top: 0.4rem; padding-bottom: 0.45rem; }

/* the playing song: its card keeps a little of the hover and its title is underlined by the line */
.m-rung.is-playing .m-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
.m-rung--gw.is-playing .m-t { text-decoration-color: var(--cyan); }
.m-rung--ll.is-playing .m-t { text-decoration-color: var(--paint, var(--p-magenta)); }

/* ---------------------------------------------------------------- the album: a block bracketed on the line */
.m-album { display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: center; padding: 1rem 0 2.6rem; }
.m-album-cover { grid-column: 1; justify-self: end; margin-right: 40px; width: clamp(150px, 13vw, 196px); aspect-ratio: 1; position: relative; }
.m-album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-album-info { grid-column: 2; margin-left: 40px; max-width: 24rem; }
.m-album-k { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
.m-album-t { margin: 0.55rem 0 0.7rem; font-family: var(--display); font-weight: 400; font-size: clamp(2.8rem, 4.4vw, 4.4rem); line-height: 0.84; letter-spacing: 0.01em; color: var(--fg); }
.m-album-m { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.m-split { display: grid; grid-template-columns: minmax(0, 12rem) auto; align-items: center; gap: 0.8rem; margin-top: 0.9rem; font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.m-split-bar { display: flex; height: 10px; overflow: hidden; }
.m-split-bar i { display: block; height: 100%; }
html[data-world="ll"] .m-album-cover img { border: 2px solid var(--ll-ink); rotate: -2deg; box-shadow: 8px 8px 0 var(--p-yellow); }
html[data-world="ll"] .m-album-t { color: var(--ll-ink); text-shadow: 3px 3px 0 var(--p-yellow); }
html[data-world="ll"] .m-split-bar { transform: skewX(-18deg); box-shadow: 0 0 0 2px var(--ll-ink); background: rgba(11, 11, 12, 0.1); }
html[data-world="ll"] .m-split-bar .b-ll { background: var(--p-orange); }
html[data-world="ll"] .m-split-bar .b-gw { background: var(--ll-ink); }
html[data-world="gw"] .m-album-cover img { box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.45), 0 0 40px -6px rgba(0, 229, 255, 0.45); filter: contrast(1.05) brightness(0.92); }
html[data-world="gw"] .m-album-t { letter-spacing: 0.05em; text-shadow: 0 0 22px rgba(0, 229, 255, 0.35); }
html[data-world="gw"] .m-split-bar { height: 3px; background: rgba(234, 247, 249, 0.12); }
html[data-world="gw"] .m-split-bar .b-ll { background: rgba(234, 247, 249, 0.55); }
html[data-world="gw"] .m-split-bar .b-gw { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
/* the bracket: a cap across the line under the head, a sleeve hugging the line down the album, a cap at its end */
.m-cap { position: absolute; left: calc(var(--lx) * 1px); width: 56px; height: 3px; margin-left: -28px; pointer-events: none; }
.m-album .m-cap { bottom: 0.9rem; }
.m-album-end { height: 2.4rem; }
.m-album-end .m-cap { top: 0.9rem; }
.m-album-end p { position: absolute; top: 0.2rem; left: calc(var(--lx) * 1px + 40px); font-size: 0.52rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
html[data-world="ll"] .m-cap { background: var(--ll-ink); }
html[data-world="gw"] .m-cap { height: 2px; background: var(--cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.85); }
.m-sleeve {
  position: absolute; left: calc(var(--lx) * 1px - 10px); width: 20px; top: 0; height: 0; pointer-events: none; z-index: 0;
  transition: top var(--m-flip-d) var(--m-flip-e), height var(--m-flip-d) var(--m-flip-e), opacity var(--d-mid) linear;
}
.m-sleeve::before, .m-sleeve::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; }
.m-sleeve::before { left: 0; }
.m-sleeve::after { right: 0; }
html[data-world="ll"] .m-sleeve::before, html[data-world="ll"] .m-sleeve::after { width: 2px; background: repeating-linear-gradient(180deg, var(--ll-ink) 0 10px, transparent 10px 16px); }
html[data-world="gw"] .m-sleeve::before, html[data-world="gw"] .m-sleeve::after { background: rgba(0, 229, 255, 0.55); box-shadow: 0 0 6px rgba(0, 229, 255, 0.55); }
.m-sleeve[hidden] { display: block; opacity: 0; }

/* ---------------------------------------------------------------- the end: the line stops where it started */
.m-end { display: grid; justify-items: center; text-align: center; padding: 3.5rem 0 0; }
/* the line's own end (worlds.js caps it at this point: LL an ink bead, GW the tube's glow); drawn here without WebGL */
.m-end-bead { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; margin-left: calc(var(--lx) * 2px - 100%); }
html[data-gl="1"] .m-end-bead { visibility: hidden; }
.m-end-in { width: min(30rem, calc(100vw - 2 * var(--gutter))); margin: 2rem 0 0 calc(var(--lx) * 2px - 100%); }
.m-end-k { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); }
.m-end-q { margin: 1rem 0 0.9rem; font-family: var(--display); font-size: clamp(2rem, 3.2vw, 3rem); line-height: 0.98; letter-spacing: 0.02em; color: var(--fg); text-wrap: balance; }
.m-end-from { font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.m-end-from a { color: var(--fg); background: linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat; padding-bottom: 0.2rem; transition: background-size var(--ease-d) var(--ease); }
.m-end-from a:hover, .m-end-from a:focus-visible { background-size: 100% 2px; }
.m-end .draft-tag { margin: 1.2rem 0 0; }
html[data-world="ll"] .m-end-bead { background: var(--ll-ink); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 4px 4px 0 var(--p-magenta); }
html[data-world="gw"] .m-end-bead { width: 10px; height: 10px; background: #e9feff; box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.4), 0 0 18px 4px rgba(0, 229, 255, 0.85); }
html[data-world="gw"] .m-end-q { letter-spacing: 0.05em; text-shadow: 0 0 22px rgba(0, 229, 255, 0.28); }

.m-foot { display: grid; justify-items: center; gap: 1.1rem; padding: 18vh var(--gutter) calc(96px + env(safe-area-inset-bottom)); }
.m-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 2rem; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; }
.m-foot-nav a { position: relative; padding: 0.4rem 0; color: var(--fg); }
.m-foot-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 1px; background: var(--line); box-shadow: var(--line-glow); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--ease-d) var(--ease); }
.m-foot-nav a:hover::after, .m-foot-nav a:focus-visible::after { transform: none; }
.m-foot-note { font-size: 0.52rem; letter-spacing: 0.28em; text-transform: uppercase; }
.m-foot-note a { color: var(--dim); }
.m-foot-note a:hover, .m-foot-note a:focus-visible { color: var(--fg); }

/* ================================================================ reveal: out of the line, in the world's language
   (the rows wait for the arrival: the head tears open, the header flies in, then the rungs hang themselves) */
.m-rung .m-card { opacity: 0; }
.m-rung .m-arm { transform: scaleX(0); }
.m-rung .m-play, .m-rung .m-node { transform: scale(0); }
.m-rung--ll .m-card { transform: translateX(30px) scaleX(0.82) rotate(1.6deg); transform-origin: 100% 50%; }
.m-rung--gw .m-card { transform: translateX(-18px); clip-path: inset(0 100% 0 0); transform-origin: 0 50%; }
.m-rung .m-card { transition: opacity 260ms linear, transform var(--d-mid) var(--punch), clip-path 0s; }
.m-rung--gw .m-card { transition: opacity var(--d-mid) var(--breath), transform var(--d-long) var(--breath), clip-path var(--d-long) var(--breath); }
.m-rung.is-in .m-card { opacity: 1; transform: none; clip-path: inset(0 -20px -20px -20px); }
.m-rung.is-in .m-arm { transform: none; transition: transform var(--d-short) var(--ease) 40ms; }
.m-rung.is-in .m-play, .m-rung.is-in .m-node { transform: none; transition: transform var(--d-mid) var(--punch); }
.m-rung .m-play:hover { transition: transform var(--d-short) var(--ease), background-color var(--d-hit) linear, box-shadow var(--d-short) var(--ease); }
.m-rung.is-in .m-play:hover { transform: scale(1.1) rotate(-6deg); }
.m-rung--gw.is-in .m-play:hover { transform: scale(1.07); }
.m-year, .m-month, .m-album, .m-album-end, .m-end, .m-hint { opacity: 0; transition: opacity var(--d-mid) linear, transform var(--d-mid) var(--ease); }
.m-year, .m-month { transform: translateY(12px); }
.m-year.is-in, .m-month.is-in, .m-album.is-in, .m-album-end.is-in, .m-end.is-in, html[data-arrived="1"] .m-hint { opacity: 1; transform: none; }
.m-album .m-album-cover { transform: translateX(26px) rotate(3deg) scale(0.9); opacity: 0; transition: transform var(--d-mid) var(--punch), opacity 260ms linear; }
.m-album .m-album-info { transform: translateX(-18px); opacity: 0; transition: transform var(--d-long) var(--breath), opacity var(--d-mid) linear; }
.m-album.is-in .m-album-cover, .m-album.is-in .m-album-info { transform: none; opacity: 1; }
.m-filters-slot { opacity: 0; transition: opacity var(--d-mid) linear; }
html[data-arrived="1"] .m-filters-slot { opacity: 1; }

/* ================================================================ phones: the spine at the left edge, everything right of it */
@media (max-width: 719.98px) {
  html[data-page="music"] { --m-arm: 16px; --m-cover: 52px; --m-gap: 8px; }
  .m-page { padding-top: 13vh; }
  .m-head { margin-bottom: 3.2vh; }
  .m-title-xl { font-size: clamp(4.4rem, 26vw, 7.4rem); }
  .m-filters-slot { height: auto; margin: 0 var(--gutter) 0 calc(var(--lx) * 1px + var(--m-arm)); }
  .m-filters { display: flex; flex-wrap: wrap; gap: 8px; height: auto; }
  .m-fgroup--side, .m-fgroup--kind { margin: 0; }
  .m-chip { min-height: 36px; padding: 0 0.8rem; }
  .m-chip-l { display: none; }
  html[data-dock="1"] .m-filters-slot { height: var(--slot-h, 80px); }
  html[data-dock="1"] .m-filters {
    left: calc(var(--gutter) + 44px + 10px); right: var(--gutter); flex-wrap: nowrap; gap: 6px; justify-content: flex-start;
  }
  html[data-dock="1"] .m-fgroup { gap: 4px; }
  html[data-dock="1"] .m-chip { padding: 0 0.4rem; min-height: 34px; letter-spacing: 0.06em; font-size: 0.54rem; }
  html[data-dock="1"] .m-chip b { letter-spacing: 0.06em; }   /* ARCHITECT and GHOSTWRITER in the docked row at 390 px */
  html[data-dock="1"] .m-chip--ll b { padding: 0.14rem 0.22rem 0.1rem 0.26rem; }
  html[data-dock="1"] .m-chip small { display: none; }
  html[data-dock="1"] .m-filters { --band-px: 8px; --band-py: 6px; }
  html[data-page="music"][data-dock="1"] .sound { opacity: 0; pointer-events: none; }
  .m-hint { display: flex; gap: 1.2rem; margin: 1rem var(--gutter) 5vh calc(var(--lx) * 1px + var(--m-arm)); }
  .m-hint span:first-child, .m-hint span:last-child { margin: 0; }

  .m-year { display: block; padding: 3.4rem var(--gutter) 1rem calc(var(--lx) * 1px + var(--m-arm) + 4px); }
  .m-year h2, .m-month h3 { margin: 0; justify-self: start; }   /* block boxes honour justify-self now */
  .m-year-n { font-size: 4.6rem; }
  .m-year-c { display: block; margin: 0.5rem 0 0; }
  .m-year .m-tick { top: 3.4rem; margin-top: 2.1rem; width: 22px; margin-left: -11px; }
  .m-month { display: block; height: auto; margin-top: 1.2rem; padding: 0.35rem 0 0.35rem calc(var(--lx) * 1px + var(--m-arm) + 4px); }
  .m-month .m-tick { width: 12px; margin-left: -6px; }

  .m-rung, .m-rung.swap, html[data-page="music"] .m-rung.is-album + .m-rung.is-album.swap { margin-top: 0; }
  .m-rung--ll .m-card, .m-rung--gw .m-card { grid-column: 2; justify-self: stretch; width: auto; margin: 0 var(--gutter) 0 var(--m-arm); }
  .m-rung--ll .m-arm { left: calc(var(--lx) * 1px); transform-origin: 0 50%; }
  .m-rung--ll .m-card { transform: translateX(-22px) scaleX(0.9) rotate(-1deg); transform-origin: 0 50%; }
  .m-card-in { gap: 0.7rem; padding: 0.5rem 0.7rem 0.5rem 0.5rem; }
  .m-rung--ll .m-card-in { box-shadow: 4px 4px 0 var(--paint, var(--p-magenta)); }
  .m-rung--gw .m-card-in { box-shadow: inset 2px 0 0 rgba(0, 229, 255, 0.55); }
  .m-t { font-size: 1.45rem; }
  .m-abs { display: none; }
  .m-play { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .m-play--video { width: 34px; height: 24px; margin: -12px 0 0 -17px; }

  .m-album { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 0.6rem var(--gutter) 2.2rem calc(var(--lx) * 1px + var(--m-arm) + 4px); }
  .m-album-cover { grid-column: 1; width: 104px; margin: 0; }
  .m-album-info { grid-column: 2; margin: 0; }
  .m-album-t { font-size: 2.35rem; margin: 0.35rem 0 0.5rem; }
  .m-split { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; letter-spacing: 0.1em; }   /* the side words on one line */
  .m-album .m-cap { width: 26px; margin-left: -13px; }
  .m-album-end p { left: calc(var(--lx) * 1px + var(--m-arm) + 4px); }
  .m-album-end .m-cap { width: 26px; margin-left: -13px; }
  .m-sleeve { width: 14px; left: calc(var(--lx) * 1px - 7px); }

  .m-end { justify-items: start; text-align: left; padding: 3rem var(--gutter) 0 0; }
  .m-end-bead { margin-left: calc(var(--lx) * 1px - 7px); }
  html[data-world="gw"] .m-end-bead { margin-left: calc(var(--lx) * 1px - 5px); }
  .m-end-in { width: auto; margin: 1.6rem 0 0 calc(var(--lx) * 1px + var(--m-arm) + 4px); }
  .m-end-q { font-size: 2rem; }
  .m-foot { justify-items: start; padding-left: calc(var(--lx) * 1px + var(--m-arm) + 4px); }
  .m-foot-nav { justify-content: flex-start; gap: 0.2rem 1.4rem; }
}

/* ================================================================ reduced motion: an art-directed still edition, crossfades only */
html[data-rm="1"] .m-rung .m-card, html[data-rm="1"] .m-rung .m-arm, html[data-rm="1"] .m-rung .m-play, html[data-rm="1"] .m-rung .m-node,
html[data-rm="1"] .m-year, html[data-rm="1"] .m-month, html[data-rm="1"] .m-album .m-album-cover, html[data-rm="1"] .m-album .m-album-info {
  transform: none; clip-path: none; transition: opacity 200ms linear !important;
}
html[data-rm="1"] .m-rung .m-arm, html[data-rm="1"] .m-rung .m-play, html[data-rm="1"] .m-rung .m-node { opacity: 0; }
html[data-rm="1"] .m-rung.is-in .m-arm, html[data-rm="1"] .m-rung.is-in .m-play, html[data-rm="1"] .m-rung.is-in .m-node { opacity: 1; }
html[data-rm="1"] .m-card-in, html[data-rm="1"] .m-chip, html[data-rm="1"] .m-cover img { transition-duration: 0s !important; }
html[data-rm="1"] .m-sleeve { transition: opacity 200ms linear; }
html[data-rm="1"][data-dock="1"] .m-filters { animation: mFade 200ms linear both; }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
html[data-rm="1"] .m-line.is-swapping { opacity: 0; }
.m-line { transition: opacity 200ms linear; }