/* Themes. Each release has its own colors, taken from its cover. The theme follows the
   release of the song that plays. Before a song plays, it follows the browser: dark mode
   gets the Wrong theme and light mode gets the Wave theme. main.js sets data-theme. */

/* The tokens are registered as colors, so that a theme change can fade between them. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #2d2d2d; }
@property --display { syntax: "<color>"; inherits: true; initial-value: #c45a9c; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #e58bc1; }
@property --text { syntax: "<color>"; inherits: true; initial-value: #dddbd6; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #9d9b96; }
@property --rule { syntax: "<color>"; inherits: true; initial-value: #4a4948; }
@property --scrim { syntax: "<color>"; inherits: true; initial-value: #000; }

/* Wrong: the stage gray of the photo and the pink of the lettering. This is also the theme without JS. */
:root,
[data-theme="wrong"] {
  --bg: #2d2d2d;
  --display: #c45a9c;
  --accent: #e58bc1;
  --text: #dddbd6;
  --muted: #9d9b96;
  --rule: #4a4948;
  --scrim: #000;
  color-scheme: dark;
}

/* Every Voice: the deep ultramarine and sky blue of the double exposure, with the cream of the clouds. */
[data-theme="every-voice"] {
  --bg: #0a1088;
  --display: #8dbde1;
  --accent: #b9d8ee;
  --text: #e7dfd7;
  --muted: #9aa3d6;
  --rule: #2a339a;
  --scrim: #050a5c;
  color-scheme: dark;
}

/* Wave: the washed white and slate of the collage. This is the light theme. */
[data-theme="wave"] {
  --bg: #f3f6f8;
  --display: #23282b;
  --accent: #3d6f8e;
  --text: #2f3437;
  --muted: #62676a;
  --rule: #c9d2d8;
  --scrim: #f3f6f8;
  color-scheme: light;
}

/* Wave in dark mode: the same washed white and slate, reversed onto a dark slate background.
   A dark-mode visitor who plays a Wave song keeps a dark site. main.js sets data-scheme. */
[data-theme="wave"][data-scheme="dark"] {
  --bg: #1f2528;
  --display: #e4ecf0;
  --accent: #b4c8d6;
  --text: #d6dde1;
  --muted: #93a0a8;
  --rule: #3a4449;
  --scrim: #1f2528;
  color-scheme: dark;
}

/* outro//goodbye: the dusty beige wall and plum shadows of the instant photos. */
[data-theme="outro"] {
  --bg: #c3afa7;
  --display: #4e3a52;
  --accent: #4e3a52;
  --text: #33282f;
  --muted: #5a4a52;
  --rule: #a8928a;
  --scrim: #c3afa7;
  color-scheme: light;
}

:root {
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--text);
  transition: --bg 0.8s ease, --display 0.8s ease, --accent 0.8s ease, --text 0.8s ease,
    --muted 0.8s ease, --rule 0.8s ease, --scrim 0.8s ease;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

/* Film grain, the same as in Milan's photos. It does not move. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* On a light theme, white grain does not show, so the grain is dark. */
[data-theme="wave"]:not([data-scheme="dark"]) body::after,
[data-theme="outro"] body::after { filter: invert(1); opacity: 0.07; }

img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--display); color: var(--bg); }

/* Small labels use the wide width of Archivo, in sentence case. They contrast with the condensed headings. */
.label {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

/* Frame: top */

.frame-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem var(--gutter);
}

.site-name {
  color: var(--text);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 0.9375rem;
  text-decoration: none;
}

.tabs { display: flex; gap: clamp(1rem, 3vw, 2rem); }

.tabs a {
  color: var(--text);
  font-stretch: 112%;
  font-size: 0.9375rem;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.tabs a:hover { border-bottom-color: var(--rule); }
.tabs a[aria-current="page"] { border-bottom-color: var(--display); }

/* The menu button shows only on phones (see Small screens). */
.menu-toggle {
  display: none;
  padding: 0;
  color: var(--text);
  background: none;
  border: 0;
  font-stretch: 112%;
  font-size: 0.9375rem;
  cursor: pointer;
}

/* Panels: without JS, all panels show in sequence. With JS, only the current tab shows. */

.panel { padding: 6rem var(--gutter) 4rem; }
#music { padding-top: 0; }
.js .panel:not(.is-current) { display: none; }

.listen { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; }

/* Hero: the stage photo fills the screen, and the name runs across the bottom. */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  margin: 0 calc(-1 * var(--gutter));
  overflow: hidden;
}

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

/* One hero photo for each release. Only the current one shows, and they cross-fade. */
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.stage img.is-current { opacity: 1; }

/* Each photo keeps its subject in view when the screen crops it. */
.stage img[data-hero="wave"] { object-position: 70% 55%; }
.stage img[data-hero="every-voice"] { object-position: 40% 20%; }
.stage img[data-hero="swyn"] { object-position: 50% 25%; }
.stage img[data-hero="outro"] { object-position: 50% 45%; }

/* On phones the Wrong hero is the red Whisky photo (see index.html). Its subject is right of center. */
@media (max-width: 760px) {
  .stage img[data-hero="stage"] { object-position: 62% 30%; }

  /* The red stage light is close to the pink of the name. A taller, darker shade puts the name
     on a near-black ground. Milan's face and the guitar neck, higher in the photo, stay clear. */
  [data-theme="wrong"] .stage::after {
    height: 62%;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--scrim) 94%, transparent) 0%,
      color-mix(in srgb, var(--scrim) 86%, transparent) 38%,
      color-mix(in srgb, var(--scrim) 45%, transparent) 70%,
      transparent 100%);
  }
}

/* The header sits over the top of the photo. A short shade in the theme's own color keeps it readable. */
.stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 9rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--scrim) 70%, transparent), transparent);
}

/* The name sits over the bottom of the photo. This shade, in the theme's own color,
   flattens the bottom of the photo so that the name stays readable. */
.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--scrim) 82%, transparent) 0%,
    color-mix(in srgb, var(--scrim) 55%, transparent) 45%,
    transparent 100%);
}

.hero-name {
  /* "Milan", the window and "Hunter" together are 5.23em wide. The divisor 5.3 fills the width
     and leaves room for browsers that count the scrollbar in 100vw. */
  --name-size: calc((100vw - 2 * var(--gutter)) / 5.3);
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  right: var(--gutter);
  /* High enough that the now-playing corner fits below the name. */
  bottom: 5.5rem;
  margin: 0;
  color: var(--display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: var(--name-size);
  line-height: 0.8;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The window is as tall as a capital letter (0.69em in Archivo). With overflow hidden,
   an inline block sits with its bottom edge on the baseline, the same as the letters. */
.name-window {
  display: inline-block;
  width: 0.69em;
  height: 0.69em;
  overflow: hidden;
  vertical-align: baseline;
  background: var(--bg);
}

.name-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.name-window img.is-changing { opacity: 0; }

/* Release index */

.index { padding-top: 4rem; }

.index .label { margin-bottom: 1rem; }

.entries { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }

.entry { border-top: 1px solid var(--rule); }

/* Each row: the cover, the title, the type, the year, and a marker that shows the row opens. */
.entry-head {
  display: grid;
  grid-template-columns: clamp(44px, 5vw, 72px) minmax(0, 1fr) minmax(0, 16rem) 4rem 1.5rem;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.1rem 0 1rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.entry-title {
  color: var(--display);
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.9;
  transition: color 0.2s ease;
}

.entry-head:hover .entry-title,
.entry-head[aria-expanded="true"] .entry-title { color: var(--accent); }

.entry-type,
.entry-year {
  color: var(--muted);
  font-weight: 500;
  font-stretch: 112%;
  font-size: 0.9375rem;
}

.entry-year { text-align: right; font-variant-numeric: tabular-nums; }

.entry-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* The marker: a plus that becomes a minus when the row is open. */
.entry-marker {
  position: relative;
  width: 1rem;
  height: 1rem;
  justify-self: end;
  color: var(--muted);
}

.entry-marker::before,
.entry-marker::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.entry-marker::after { transform: rotate(90deg); }

.entry-head:hover .entry-marker { color: var(--accent); }
.entry-head[aria-expanded="true"] .entry-marker { color: var(--display); }
.entry-head[aria-expanded="true"] .entry-marker::after { transform: rotate(90deg) scaleX(0); }

.entry-body {
  display: grid;
  grid-template-columns: clamp(140px, 22vw, 280px) minmax(0, 40rem);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
  padding: 0.5rem 0 2.5rem;
}

.entry-body[hidden] { display: none; }

.songs {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  counter-reset: song;
}

.songs li { counter-increment: song; border-bottom: 1px solid var(--rule); }
.songs li:first-child { border-top: 1px solid var(--rule); }

.songs button {
  display: grid;
  grid-template-columns: 2rem 0.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

/* The play icon on each song. It becomes a pause icon while that song plays (player.js sets is-playing). */
.song-icon {
  width: 0.6rem;
  height: 0.7rem;
  background: var(--muted);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.songs button:hover .song-icon,
.songs button.is-current .song-icon { background: var(--accent); }

.songs button.is-playing .song-icon {
  clip-path: none;
  background:
    linear-gradient(var(--accent), var(--accent)) left / 35% 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) right / 35% 100% no-repeat;
}

.songs button::before {
  content: counter(song);
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.songs button:hover .song-title { color: var(--accent); }

.song-time { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* The current song: pink, with small sound bars in place of its number. */
.songs button.is-current .song-title { color: var(--accent); font-weight: 700; }

.songs button.is-current::before {
  content: "";
  width: 12px;
  height: 10px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 100% / 2px 60% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 5px 100% / 2px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 10px 100% / 2px 40% no-repeat;
}

/* The cover that follows the pointer over the index. Only on screens with a mouse. */
.hover-cover {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hover-cover.is-visible { opacity: 1; }

@media (hover: none) {
  .hover-cover { display: none; }
}

/* Photos: one column of large photos in the center of the page. Each photo keeps its own shape,
   and none is taller than most of the screen. */

#photos > .label, #about > .label { margin-bottom: 1.5rem; }

.photo-list {
  display: grid;
  justify-items: center;
  gap: clamp(3rem, 12svh, 8rem);
  padding-top: clamp(1rem, 4svh, 3rem);
}

.photo { width: fit-content; max-width: min(100%, 1100px); margin: 0; }

.photo a { display: block; cursor: zoom-in; }

.photo img {
  width: auto;
  max-width: 100%;
  max-height: 85svh;
}

.photo figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  font-stretch: 112%;
  color: var(--muted);
}

.viewer {
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: var(--gutter);
  border: 0;
  background: var(--bg);
  color: var(--text);
}

.viewer[open] { display: grid; place-items: center; }
.viewer::backdrop { background: var(--bg); }

.viewer img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  object-fit: contain;
}

.viewer form { position: absolute; top: 1rem; right: var(--gutter); }

.viewer-close {
  font-size: 0.9375rem;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0.25rem 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* About */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* Then and now: the same pose, years apart. The child is smaller, and both photos stand on one
   baseline, so the eye compares the two poses. */
.then-now {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: end;
}

.then-now figure { margin: 0; }

.then-now img { width: 100%; }

.then-now figcaption {
  margin-top: 0.5rem;
  color: var(--display);
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1;
}

.about-text h3 { margin: 2rem 0 0.5rem; }

.about-text > p:first-child { margin-top: 0; }

.placeholder {
  color: var(--muted);
  border-left: 3px solid var(--rule);
  padding-left: 0.75rem;
}

/* Footer: room at the bottom so that the now-playing corner does not cover it. */

.site-footer {
  padding: 1.5rem var(--gutter) 6rem;
  font-size: 0.875rem;
  font-stretch: 112%;
  color: var(--muted);
}

.site-footer p { margin: 0; }

/* Frame: now playing, in the bottom-left corner */

.now-playing {
  position: fixed;
  z-index: 20;
  left: var(--gutter);
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-radius: 2px;
}

.np-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.np-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 18px;
  height: 16px;
}

/* Before a song plays, and while it is paused, the corner shows a play icon. The bars show only while a song plays. */
.np-play {
  width: 18px;
  height: 16px;
  background: var(--display);
  clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}

.now-playing.is-playing .np-play,
.now-playing:not(.is-playing) .np-bars { display: none; }

.np-bars i {
  flex: 1;
  height: 25%;
  background: var(--display);
  transform-origin: bottom;
}

.np-bars i:nth-child(2) { height: 55%; }
.np-bars i:nth-child(3) { height: 40%; }
.np-bars i:nth-child(4) { height: 70%; }

.np-text { display: grid; line-height: 1.15; }

.np-state {
  color: var(--muted);
  font-weight: 500;
  font-stretch: 112%;
  font-size: 0.75rem;
}

.np-title {
  max-width: 16rem;
  overflow: hidden;
  color: var(--accent);
  font-weight: 800;
  font-stretch: 70%;
  font-size: 1.125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-next {
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  font-stretch: 112%;
  font-size: 0.8125rem;
  cursor: pointer;
}

.np-next:hover { color: var(--text); }

.np-link { font-stretch: 112%; font-size: 0.8125rem; }

/* Before the first play, only the play control shows. */
.now-playing:not(.is-started) .np-next,
.now-playing:not(.is-started) .np-link { display: none; }

/* The bars move while a song plays. */
@keyframes bar {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1.35); }
}

.now-playing.is-playing .np-bars i { animation: bar 0.9s ease-in-out infinite; }
.now-playing.is-playing .np-bars i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.2s; }
.now-playing.is-playing .np-bars i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.5s; }
.now-playing.is-playing .np-bars i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.3s; }

/* Progress: a thin pink line along the bottom edge of the screen. It is a range input, so it can seek. */
.np-seek {
  --progress: 0%;
  position: fixed;
  z-index: 21;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 12px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(var(--display), var(--display)) 0 100% / var(--progress) 3px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 3px no-repeat;
  cursor: pointer;
}

.np-seek[hidden] { display: none; }
.np-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 12px; background: transparent; }
.np-seek::-moz-range-thumb { width: 1px; height: 12px; border: 0; background: transparent; }
.np-seek:focus-visible { outline: none; background-size: var(--progress) 6px, 100% 6px; }

/* Scroll motion. The hero's house lights go down as you scroll past it, and each photo develops
   as it comes into view. The motion follows the scroll in both directions. Browsers without
   scroll timelines, and readers with reduced motion, see still pages. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Each photo develops like a print: it starts dark, flat and without color,
       and comes to full exposure when the whole photo is on screen. */
    @keyframes develop {
      from { filter: brightness(0.12) contrast(1.6) grayscale(1); }
      60% { filter: brightness(0.7) contrast(1.15) grayscale(0.6); }
      to { filter: none; }
    }

    .photo img {
      animation: develop linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    @keyframes house-down {
      to { filter: brightness(0.15); transform: scale(1.08); }
    }

    @keyframes name-lift {
      to { transform: translateY(-18svh); }
    }

    /* Both hero animations follow the hero box as it leaves the screen. */
    .hero { view-timeline-name: --hero; }

    .stage img {
      transform-origin: 50% 20%;
      animation: house-down linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }

    .hero-name {
      animation: name-lift linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
  }
}

/* Tab changes cross-fade where the browser supports view transitions. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .now-playing.is-playing .np-bars i { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  /* Theme changes happen at once, without the fade. */
  html, .stage img { transition: none; }
}

/* Small screens */

@media (max-width: 760px) {
  /* The tabs move into a full-screen menu in the theme's colors. Without JS, the tabs stay in the header. */
  .js .menu-toggle { display: block; }

  .js .site-name,
  .js .menu-toggle { position: relative; z-index: 2; }

  .js .tabs {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 var(--gutter);
    background: var(--bg);
    visibility: hidden;
    opacity: 0;
    /* On close, the menu stays visible until the fade ends. */
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .js .tabs a {
    width: fit-content;
    padding: 0;
    color: var(--display);
    border: 0;
    font-weight: 800;
    font-stretch: 62%;
    font-size: clamp(4rem, 22vw, 7rem);
    line-height: 0.95;
  }

  .js .tabs a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.12em;
  }

  /* While the menu is open, the header comes above the now-playing bar and the page does not scroll. */
  .menu-open .frame-top { position: fixed; z-index: 40; }
  /* On open, the menu is visible at once, so that its first link can take focus. */
  .menu-open .tabs { visibility: visible; opacity: 1; transition: opacity 0.25s ease, visibility 0s; }
  html.menu-open { overflow: hidden; }

  /* The name breaks onto two lines: "Milan" with the window, then "Hunter".
     The first line is the wider line at 2.88em, so it sets the size. */
  .hero-name {
    bottom: 5rem;
    font-size: calc((100vw - 2 * var(--gutter)) / 2.95);
  }

  .hero-name .name-word:last-child { display: block; }


  /* The cover and the marker stay on the row. The type and year go on a second line under the title. */
  .entry-head {
    grid-template-columns: 52px minmax(0, 1fr) auto 1rem;
    grid-template-areas:
      "thumb title title marker"
      "thumb type year marker";
    gap: 0.2rem 0.9rem;
  }

  .entry-thumb { grid-area: thumb; }
  .entry-title { grid-area: title; }
  .entry-type { grid-area: type; }
  .entry-year { grid-area: year; }
  .entry-marker { grid-area: marker; }

  .entry-body { grid-template-columns: minmax(0, 1fr); }
  .entry-cover { width: 160px; }

  .about { grid-template-columns: minmax(0, 1fr); }

  /* The now-playing corner becomes a bar across the bottom. */
  .now-playing {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem var(--gutter) 0.9rem;
    border-radius: 0;
  }

  .np-title { max-width: 11rem; }
}