@charset "utf-8";
/* CHAPTER 01, SESSIONS AND PRODUCTION (main.ch): what 01.4, Yeah Man, adds. The chapter's other
   parts (cover, Listen, rates, records, sketches, contact) are in chapter.css. Every rule is scoped
   to .ch so it can join the index's document on a page turn without touching it. */

/* ---------- 01.3 records: the ink rises out of its foot into the room ---------- */
.ch .records { padding-bottom: calc(100vw / 24 * 3 + clamp(110px, 10vw, 170px)); }

/* ---------- 01.4 Yeah Man (dark room): back / dust / word / the flight / the cover / dust ----------
   The flight is a 16:9 plate on the right; the cover lies over its lower-left corner, nearer the
   lens (z .6). --wh is the word's height, set by the script once the word is fitted. */
.ch .ym { --pin: 70svh; }
.ch .ym .stage {
  background: #0a0c11;
  --pw: min(46cqw, 60cqh * 16 / 9); --ph: calc(var(--pw) * 9 / 16);
  --px: calc(100cqw - var(--m) - var(--pw) - 3cqw); --py: calc(var(--ttop) + var(--wh, 12cqh) * .62);
  --cs: calc(var(--pw) * .34); --cx: calc(var(--px) - var(--cs) * .42); --cy: calc(var(--py) + var(--ph) - var(--cs) * .58);
}
.ch .ym-back { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; display: block; filter: blur(30px) saturate(1.15); opacity: .42; pointer-events: none; }
.ch .ym .t {
  position: absolute; left: var(--tl, var(--m)); top: var(--ttop); margin: 0; white-space: nowrap; color: var(--bone);
  font-family: var(--f-display); font-weight: 800; font-stretch: 125%; text-transform: uppercase;
  font-size: 14.6cqw; line-height: .8; letter-spacing: -.035em; transform-origin: 5% 10%; opacity: .94;
}
.ch .ym .t .tw { display: inline-block; }
.ch .ym-plate { position: absolute; margin: 0; left: var(--px); top: var(--py); width: var(--pw); transform-origin: 50% 45%; }
.ch .ym-frame { position: relative; aspect-ratio: 16 / 9; background: #2f62c4; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); }
.ch .ym-frame img, .ch .ym-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ch .ym-frame video { opacity: 0; transition: opacity .4s; }
.ch .ym-frame.run video { opacity: 1; }
.ch .ym-cover { position: absolute; margin: 0; left: var(--cx); top: var(--cy); width: var(--cs); transform-origin: 50% 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 28px 56px -18px rgba(0, 0, 0, .8); }
.ch .ym-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
/* the stage's edges are ink, so the stairs above and the apron below meet it without a seam */
.ch .ym .scrim {
  background:
    linear-gradient(180deg, var(--ink) 0, rgba(17, 18, 20, .7) 4%, rgba(10, 12, 17, 0) 16%),
    linear-gradient(0deg, var(--ink) 0, rgba(17, 18, 20, .72) 10%, rgba(10, 12, 17, 0) 30%);
}
.ch .ym .reg { top: calc(var(--ttop) - 26px); z-index: 7; }
.ch .ym-panel { gap: 18px; width: min(44ch, 38cqw); }
.ch .ym-h { margin: 0; font-family: var(--f-text); font-weight: 400; font-size: clamp(30px, 2.7vw, 44px); line-height: 1.04; letter-spacing: -.015em; color: var(--bone); }
.ch .ym-panel .prose { color: rgba(232, 230, 225, .86); }
.ch .ym-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.ch .ym .ym-play { background: var(--bone); color: var(--ink); min-height: 40px; padding: 9px 17px 8px 14px; }
.ch .ym .ym-play:focus-visible { outline-color: var(--bone); }
.ch .ym .ym-now { display: inline-flex; flex-wrap: wrap; gap: 2px 14px; color: rgba(232, 230, 225, .66); }
.ch .ym .ym-tc { color: var(--bone); }
.ch .ym-go { margin: 0; }
.ch .ym-go a { color: var(--bone); text-decoration: none; border-bottom: 1px solid currentColor; }
.ch .ym-go a:hover { border-color: var(--accent); }
.ch .ym .hud button { pointer-events: auto; }
/* the strip takes the foot of the screen while it plays: the room's copy stands clear of it */
html.np-on .ch .ym-panel { bottom: calc(clamp(30px, 7cqh, 72px) + 40px); }
html.np-on:has(main.ch) { scroll-padding-bottom: 64px; }
.rm .ch .ym .stage { height: 100svh; }

/* ---------- 01.4a the album (paper) ---------- */
.ch .ym-in { align-items: start; margin-bottom: clamp(72px, 7.2vw, 118px); }
.ch .ym-txt { grid-column: 4 / 9; display: grid; gap: 1.05em; }
.ch .ym-txt p { margin: 0; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.42; text-wrap: pretty; }
.ch .ym-cr { grid-column: 10 / 13; margin: 0; border-top: 1px solid var(--ink); }
.ch .ym-cr > div { display: grid; gap: 2px; padding: 11px 0 10px; border-bottom: 1px solid var(--rule); }
.ch .ym-cr dt { color: var(--ink-soft); }
.ch .ym-cr dd { margin: 0; }

/* the songs: one row each, the whole row is the play control (the shell's player, full length) */
.ch .ym-th { padding-bottom: 12px; color: var(--ink-soft); }
.ch .ym-th-s { grid-column: 4 / 8; }
.ch .ym-th-p { grid-column: 8 / 10; }
.ch .ym-th-g { grid-column: 10 / 12; }
.ch .ym-th-d { grid-column: 12 / 13; justify-self: end; }
.ch .ym-tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ch .ym-tr { position: relative; border-bottom: 1px solid var(--rule); }
/* the song in the player is marked in the margin with the accent, as an open note is */
.ch .ym-tr::before { content: ""; position: absolute; left: calc(-1 * var(--m)); top: -1px; bottom: -1px; width: calc(var(--m) - 8px); background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease); }
.ch .ym-tr.cur::before { transform: scaleY(1); }
.ch .ym-row {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  position: relative; isolation: isolate; width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center;
  padding: clamp(13px, 1.25vw, 19px) 0 clamp(12px, 1.2vw, 18px); -webkit-tap-highlight-color: transparent;
}
.ch .ym-row::before { content: ""; position: absolute; left: -10px; right: -10px; top: -1px; bottom: -1px; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease); }
.ch .ym-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ch .ym-no { grid-column: 1 / 4; display: flex; align-items: center; gap: 16px; }
.ch .ym-no .n { min-width: 2ch; color: var(--ink-soft); transition: color .3s; }
.ch .ym-tr.cur .ym-no .n { color: var(--accent); }
.ch .ym-cap { pointer-events: none; }
.ch .ym-t { grid-column: 4 / 8; font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.02em; line-height: 1.05; transition: transform .5s var(--ease); }
.ch .ym-m { display: contents; }
.ch .ym-pt { grid-column: 8 / 10; color: var(--ink-soft); transition: color .3s; }
.ch .ym-g { grid-column: 10 / 12; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.3; }
.ch .ym-d { grid-column: 12 / 13; justify-self: end; white-space: nowrap; }
.ch .ym-row[aria-pressed="true"] .bars i { background: var(--accent); opacity: 1; animation: snd .62s ease-in-out infinite alternate; }
.ch .ym-row[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.21s; }
.ch .ym-row[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.44s; }
.ch .ym-row[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: -.33s; }
.rm .ch .ym-row .bars i { animation: none !important; }
@media (hover: hover) and (pointer: fine) {
  .ch .ym-row:hover::before { transform: scaleX(1); }
  .ch .ym-row:hover .ym-t { transform: translateX(10px); }
  .ch .ym-row:hover .ym-no .n, .ch .ym-row:hover .ym-pt { color: var(--ink); }
}
/* the rows are set in a stepped wipe as they arrive (the script adds .anim, then .in and .done) */
.ch .ym-lp.anim .ym-tr { clip-path: inset(0 100% 0 0); }
.ch .ym-lp.anim .ym-tr.in { clip-path: inset(0 0 0 0); transition: clip-path .56s steps(7, end); }
.ch .ym-lp.anim .ym-tr.done { clip-path: none; }
.ch .ym-after { margin-top: clamp(26px, 2.6vw, 40px); align-items: baseline; row-gap: 18px; }
.ch .ym-sum { grid-column: 4 / 8; margin: 0; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.42; color: var(--ink-soft); text-wrap: pretty; }
.ch .ym-links { grid-column: 8 / 13; justify-self: end; justify-content: flex-end; margin: 0; }
.ch .ym-links .e-link:hover i, .ch .ym-sub .e-link:hover i { transform: translate(3px, -3px); }

/* ---------- 01.4b the film and 01.4c the games ---------- */
.ch .ym-sub { margin-top: clamp(96px, 9.6vw, 156px); align-items: start; }
.ch .ym-sub > .lbl { grid-column: 1 / 4; grid-row: 1; padding-top: .6em; }
.ch .ym-h3 { grid-column: 4 / 13; grid-row: 1; margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3.3vw, 58px); line-height: .9; letter-spacing: -.04em; }
.ch .ym-p { grid-column: 4 / 10; grid-row: 2; margin: clamp(20px, 2vw, 32px) 0 clamp(32px, 3.2vw, 52px); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.42; text-wrap: pretty; }
.ch div.ym-p { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ch div.ym-p p { margin: 0; }
.ch .ym-film { grid-column: 4 / 9; grid-row: 3; }
.ch .ym-film .fac-box { overflow: hidden; }
.ch .ym-film-p { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the poster is darkened under the title; it and its shade go once the player has loaded */
.ch .ym-film .fac-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 12, 17, .8) 0, rgba(10, 12, 17, 0) 34%), rgba(10, 12, 17, .1); }
.ch .ym-film .fac-t { z-index: 1; text-shadow: 0 1px 3px rgba(10, 12, 17, .85); }
.ch .ym-film .fac-t .mono { color: var(--bone); }
.ch .ym-film .fac-go { position: relative; z-index: 1; box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
.ch .ym-film .fac-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--bone), 0 8px 26px rgba(0, 0, 0, .35); }
.ch .ym-film.loaded .fac-box::after, .ch .ym-film.loaded .ym-film-p { display: none; }
.ch .ym-fb .rec-q { grid-column: 9 / 13; grid-row: 3; }
.ch .ym-q .e-link { justify-self: start; margin-top: 16px; }
.ch .ym-gs { grid-column: 4 / 13; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3vw, 48px) var(--g); }
.ch .ym-gp .frame { aspect-ratio: 16 / 9; background: var(--paper); }
.ch .ym-gp .cap { margin-top: 10px; }
.ch .ym-note { margin-top: clamp(84px, 8.4vw, 136px); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  /* the room's label is longer than the first column: it stands above the word */
  .ch .ym .room-lbl { top: calc(var(--ttop) - 2.4em); }
  .ch .ym .reg { top: calc(var(--ttop) - 44px); }
  .ch .ym .stage { --cs: calc(var(--pw) * .3); --cx: calc(var(--px) - var(--cs) * .28); }
  .ch .ym-txt { grid-column: 4 / 10; }
  .ch .ym-t, .ch .ym-th-s { grid-column: 4 / 7; }
  .ch .ym-pt, .ch .ym-th-p { grid-column: 7 / 9; }
  .ch .ym-g, .ch .ym-th-g { grid-column: 9 / 12; }
}

/* ---------- phone and portrait: the room re-frames ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .ch .ym .stage {
    --pw: min(calc(100cqw - 2 * var(--m)), 54cqh); --px: calc((100cqw - var(--pw)) / 2); --py: calc(var(--ttop) + var(--wh, 13cqw) + 14px);
    --cs: min(30cqw, 18cqh); --cx: calc(var(--px) + var(--pw) - var(--cs) - 4cqw); --cy: calc(var(--py) + var(--ph) - var(--cs) * .4);
  }
  html.np-on .ch .ym-panel { bottom: calc(22px + 56px); }
  html.np-on:has(main.ch) { scroll-padding-bottom: 80px; }
  .ch .ym .scrim { background: linear-gradient(0deg, var(--ink) 0, rgba(13, 15, 19, .94) 34%, rgba(10, 12, 17, .55) 44%, rgba(10, 12, 17, 0) 56%), linear-gradient(180deg, var(--ink) 0, rgba(17, 18, 20, .5) 7%, rgba(10, 12, 17, 0) 16%); }
  .ch .ym .reg { top: calc(var(--ttop) - 40px); }
  .ch .ym-panel { width: auto; gap: 12px; }
}
/* a short phone has no room for the cover beside the flight: the room keeps its other layers,
   and the flight is a little smaller so the copy (raised by the strip while it plays) stays clear */
@media (max-width: 760px) and (max-height: 700px) {
  .ch .ym-cover { display: none; }
  .ch .ym .stage { --pw: min(calc(100cqw - 2 * var(--m)), 44cqh); }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .ch .records { padding-bottom: calc(100vw / 12 * 3 + 84px); }
  .ch .ym-h { font-size: 27px; }
  .ch .ym .prose { font-size: 16.5px; line-height: 1.38; }
  .ch .ym-in, .ch .ym-after, .ch .ym-sub { display: flex; flex-direction: column; }
  .ch .ym-in { gap: 32px; margin-bottom: 56px; }
  .ch .ym-txt p { font-size: 19px; }
  .ch .ym-cr { width: 100%; }
  .ch .ym-th { display: none; }
  /* a row: the play capsule, then the title and its length, then the number, the game's part and its game */
  .ch .ym-row { grid-template-columns: 32px auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 5px; align-items: baseline; padding: 15px 0 14px; }
  .ch .ym-no { display: contents; }
  .ch .ym-cap { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 32px; padding: 0; justify-content: center; }
  .ch .ym-cap .lbl-t { display: none; }
  .ch .ym-t { grid-column: 2 / 4; grid-row: 1; font-size: 20px; }
  .ch .ym-d { grid-column: 4; grid-row: 1; }
  .ch .ym-no .n { grid-column: 2; grid-row: 2; }
  .ch .ym-m { grid-column: 3 / 5; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .ch .ym-g { font-size: 16px; }
  .ch .ym-after { gap: 18px; margin-top: 24px; }
  .ch .ym-links { justify-content: flex-start; }
  .ch .ym-sub { margin-top: 84px; }
  .ch .ym-sub > .lbl { padding-top: 0; margin-bottom: 14px; }
  .ch .ym-h3 { font-size: 9.4vw; line-height: .92; }
  .ch .ym-p { margin: 18px 0 26px; font-size: 19px; }
  .ch .ym-film, .ch .ym-gs { width: 100%; }
  .ch .ym-fb .rec-q { margin-top: 30px; padding-left: 14px; }
  .ch .ym-gs { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ch .ym-note { margin-top: 64px; }
}

/* the bass feature (row 04) and the sample credits, closed until asked for */
.ch .ym-bf { display: inline-block; margin-left: .7em; padding: 5px 8px 4px; border: 1px solid currentColor; color: var(--accent); font-family: var(--f-mono); font-stretch: 100%; font-weight: 400; font-size: var(--fs-mono); letter-spacing: .07em; line-height: 1; vertical-align: .3em; white-space: nowrap; }
.ch .ym-row:hover .ym-bf, .ch .ym-tr.cur .ym-bf { color: var(--ink); }
.ch .ym-smp { margin-top: clamp(30px, 3vw, 46px); }
.ch .ym-smp details { grid-column: 4 / 13; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ch .ym-smp summary { cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: center; min-height: 48px; }
.ch .ym-smp summary::-webkit-details-marker { display: none; }
.ch .ym-smp summary::before { content: "+"; font-size: 15px; line-height: 1; color: var(--accent); transition: transform .35s var(--ease); }
.ch .ym-smp details[open] summary::before { transform: rotate(45deg); }
.ch .ym-smp summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ch .ym-smp-b { padding: 6px 0 26px; display: grid; gap: 18px; }
.ch .ym-smp-n { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.45; color: var(--ink-soft); }
.ch .ym-smp-l { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: 16px; }
.ch .ym-smp-l > div { display: grid; gap: 3px; align-content: start; }
.ch .ym-smp-l dt { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: clamp(16px, 1.2vw, 18px); letter-spacing: -.01em; line-height: 1.15; }
.ch .ym-smp-l dt .mono { color: var(--ink-soft); margin-right: .9em; letter-spacing: .07em; }
.ch .ym-smp-l dd { margin: 0; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.42; text-wrap: pretty; }
.ch .ym-q2 { margin-top: 14px; }
@media (max-width: 760px) {
  .ch .ym-smp { display: block; margin-top: 24px; }
  .ch .ym-smp-l { grid-template-columns: minmax(0, 1fr); }
  .ch .ym-bf { display: table; margin: 8px 0 2px; padding: 4px 6px 3px; }
}