/* view: person */
/*
 * The person (4b), dark (main.js sets body[data-tone="dark"] here). Every
 * colour is a listen.css token; the only literals are the canvas's hero
 * shade (a gradient into --night) and the scrims behind the pills on the
 * still. Phone first at 390px; at 900px and wider the page is two columns,
 * the person held in view beside their work (Claude Design, "Badge One
 * Cover" turn 2, 2026-10-17) — the block at the end of this file.
 */

.person {
  display: block;
}

/* ---- what the site is, to someone who opened this page first -------- */

.person-about {
  padding: 12px var(--gutter);
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--night-muted);
  border-bottom: 1px solid var(--line);
}

/* ---- the hero: one of four layouts, chosen per person ----------------- */
/*
 * notes/sylqi/presentation.md. portrait: their avatar at full width, square,
 * its foot dissolving into the night. wall: their stills, three across, the
 * last row dissolving. badge: their avatar as a 150px round. type: their name
 * alone. The way back sits in the flow above the picture in every layout, so
 * it never sits on a face.
 */

.person-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px var(--gutter) 0;
  background: var(--night);
}

.person-hero.is-type {
  padding-top: 28px;
}

/* The full-bleed pictures run past the gutter to the column's edges. */
.person-portrait,
.person-wall {
  position: relative;
  margin: 0 calc(-1 * var(--gutter));
}

.person-portrait {
  aspect-ratio: 1;
  background: var(--still-bg);
}

/* A YouTube avatar is square: `cover` on a square box crops nothing. */
.person-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-portrait::after,
.person-wall::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 72px;
  background: linear-gradient(180deg, rgb(16 15 12 / 0%) 0%, var(--night) 100%);
  pointer-events: none;
}

.person-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

/* hqdefault is 4:3 with the video letterboxed in it: a 16:9 box with
   `cover` takes the bars off and nothing else. */
.person-wall-still {
  aspect-ratio: 16 / 9;
  background: var(--still-bg) center / cover no-repeat;
}

.person-wall-avatar {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  bottom: -20px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--night-line);
  background: var(--still-bg) center / cover no-repeat;
}

.person-wall:has(.person-wall-avatar) + .person-id {
  padding-top: 28px;
}

/* A badge is a logo, a drawing or a photo with no clear face: held small,
   square with soft corners, the shape they uploaded and not a circle cut
   from it (Claude Design, "Badge One Cover", 2026-10-17: "a logo is not a
   face; it shouldn't be held like one"). */
.person-badge {
  display: block;
  width: 56px;
  height: 56px;
  margin: 22px 0 18px;
  border-radius: 8px;
  background: var(--still-bg) center / cover no-repeat;
}

.person-back {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--night-card);
  color: var(--night-ink);
  font: 600 var(--t-meta) / 1.25 var(--sans);
  overflow-wrap: anywhere;
}

.person-id {
  position: relative;
  padding-top: 8px;
}

/*
 * The name: the largest type on the site, its size set by the model from its
 * longest word (person.js `nameSize`), so no word is ever broken inside —
 * keep-all holds Hangul and kana words whole, and no break opportunity is
 * added inside a Latin one.
 */
.person-name {
  margin: 0;
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--night-ink);
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: manual;
  text-wrap: balance;
}

/* A name in kana or Han breaks between characters, by the strict rules
   (keep-all would hold a whole unspaced Japanese name as one word). */
.person-name.is-cjk {
  word-break: normal;
  line-break: strict;
}

/* A piece too long even at the least size: the one case it may wrap anywhere. */
.person-name.is-long {
  overflow-wrap: anywhere;
}

/* One line of facts, 12px under the name and well clear of the verbs. */
.person-facts {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--night-muted);
}

.person-facts a {
  color: var(--night-teal);
  font-weight: 600;
  /* a tap tall without moving the line */
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}

/* ---- their own links: a row of icons under the facts (2026-10-17) ----
   One icon per whitelisted platform (corpus/links.ts), each a 44px way out.
   Two or fewer show their names; three or more fold to icons and the ▾
   unfolds each name with what it lets a listener do. The glyphs are drawn
   for this page, not the platforms' own marks: a mask, so they take the
   text colour in light and dark, and the name is always one press away. */

.person-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 6px 0 0 -10px;
}

.person-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.person-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  color: var(--night-teal);
  text-decoration: none;
}

.person-link:focus-visible,
.person-links-toggle:focus-visible {
  outline: 2px solid var(--night-teal);
  outline-offset: -2px;
}

.person-link-icon {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.person-link-text {
  display: none;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.person-link-name {
  font-size: 13px;
  font-weight: 600;
}

.person-link-kind {
  font-size: 11px;
  color: var(--night-muted);
}

.person-links[data-open="true"] .person-link {
  justify-content: flex-start;
  padding: 0 12px 0 10px;
}

.person-links[data-open="true"] .person-link-text {
  display: inline-flex;
}

.person-links-toggle {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--night-teal);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.person-links[data-open="true"] .person-links-toggle {
  transform: rotate(180deg);
}

.person-link.is-spotify .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 9.6c3.5-1.2 7.4-.9 10.4.8M7.7 12.9c2.9-.9 6-.6 8.5.7M8.4 16c2.2-.6 4.4-.4 6.4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.person-link.is-apple-music .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V6.2l10-2.2v11.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6.6' cy='18' r='2.6' fill='black'/%3E%3Ccircle cx='16.6' cy='15.8' r='2.6' fill='black'/%3E%3C/svg%3E");
}

.person-link.is-soundcloud .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18h8.3a3.6 3.6 0 0 0 .4-7.2A5 5 0 0 0 9.6 9.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.8 18v-3M5.2 18v-5M7.6 18v-6.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.person-link.is-bandcamp .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 18 8.2 6H22l-6.2 12z' fill='black'/%3E%3C/svg%3E");
}

.person-link.is-patreon .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='14.6' cy='9.6' r='6.6' fill='black'/%3E%3Crect x='3' y='3' width='3.6' height='18' rx='.6' fill='black'/%3E%3C/svg%3E");
}

.person-link.is-ko-fi .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h12v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 10h1.4a2.5 2.5 0 0 1 0 5H16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 15.6s-3-1.8-3-3.6a1.5 1.5 0 0 1 3-.5 1.5 1.5 0 0 1 3 .5c0 1.8-3 3.6-3 3.6z' fill='black'/%3E%3C/svg%3E");
}

.person-link.is-buymeacoffee .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.2 9.5h11.6l-1.5 10a2 2 0 0 1-2 1.7H9.7a2 2 0 0 1-2-1.7z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.8 9.5h14.4M9.5 3.5c0 1.3 1 1.3 1 2.6M13.5 3.5c0 1.3 1 1.3 1 2.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.person-link.is-instagram .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3' fill='black'/%3E%3C/svg%3E");
}

.person-link.is-tiktok .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v11.6a3.6 3.6 0 1 1-3.6-3.6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M14 3c.4 2.7 2.2 4.5 5 4.7' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.person-link.is-x .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 4.5l15 15M19.5 4.5l-15 15' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.person-link.is-linktree .person-link-icon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5v19M4 9.5h16M6.4 4.6l11.2 9.8M17.6 4.6 6.4 14.4' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- the acts: Subscribe on YouTube, then Save and Play their covers ---- */

/* Subscribe takes the whole row; Save and Play share the next, and wrap
   rather than clip at 390 (cold review 2026-10-09: "◇ Keep" crushed). */
.person-acts-wrap {
  padding: 32px var(--gutter) 0;
}

.person-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Their count, said once, as a sentence under the verbs (Claude Design
   "Desktop" turn 2, 2a): the counts brighter, not bolder; the door to their
   star after it, in the sentence's type. */
.person-tally {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--night-ink) 85%, transparent);
  text-wrap: pretty;
}

.person-tally strong {
  font-weight: 400;
  color: var(--night-ink);
}

/* In the sentence the door is words, a tap tall without moving the line. */
.person-tally .person-star {
  display: inline-block;
  min-height: 0;
  margin: -11px 0;
  padding: 11px 0;
  font: inherit;
}

/* The door to the universe: their star, one link under the acts. */
.person-star {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 4px;
  font: 600 var(--t-meta) / 1.2 var(--sans);
  color: var(--night-teal);
}

.person-subscribe,
.person-keep,
.person-play-all {
  min-height: 48px;
  padding: 8px 14px;
  text-align: center;
  font: 700 var(--t-body) / 1.2 var(--sans);
}

.person-subscribe {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--youtube-red);
  color: var(--on-red);
}

.person-subscribe:hover {
  text-decoration: none;
}

/* Save and Play share the row and wrap inside themselves, so a press (the
   longer "Saved — press again to remove") never moves the row. */
.person-keep,
.person-play-all {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
}

.person-keep {
  border-color: var(--night-teal);
}

.person-play-all {
  border-color: var(--night-line);
}

.person-play-all[aria-pressed="true"] {
  color: var(--night-muted);
}

/* Their covers as one YouTube playlist: a link line under the acts, the
   tap floor tall, as the song page's (room.css .room-youtube). */
.person-youtube {
  margin: 4px 0 0;
  font: 600 var(--t-meta) / 1.35 var(--sans);
}

.person-youtube a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--night-teal);
}

.person-acts-wrap .said {
  margin-top: 8px;
}

/* The hint's ×: a tap wide, apart from the words it closes. */
.person-acts-wrap .said-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-round);
  height: var(--tap-round);
  margin-left: 6px;
  vertical-align: middle;
  font-size: 18px;
  color: var(--fg-muted);
}

/* ---- you came from ---------------------------------------------------- */

.person-from {
  margin: 18px var(--gutter) 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-radius: var(--r-card);
  background: var(--night-card);
  border: 1px solid var(--line);
}

.person-from-text {
  min-width: 0;
}

.person-from-label {
  display: block;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.person-from-title {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  color: var(--fg);
  overflow-wrap: anywhere;
  min-height: 24px;
}

/* A still that plays is a tap target: never under the floor in height.
   The column is 80px, so 16:9 is 45px tall; the floor holds it anyway. */
.person-from-still,
.person-row-still,
.person-crow-still {
  width: 100%;
  min-height: var(--tap);
  border-radius: 6px;
}

.still.is-playing {
  box-shadow: 0 0 0 2px var(--accent);
}

/* ---- one cover: the song lifted into the head ------------------------- */
/* Claude Design, "Badge One Cover" 1a: the label, one card (the still that
   plays, the song, who first sang it), then the way on to the others who
   sing it. The video's own title and day, and the others' faces, are the
   wide screen's (the block at the end). */

.person-one {
  padding: 30px var(--gutter) 0;
}

.person-one-label {
  margin: 0 0 12px;
  font: 400 var(--t-small) / 1.3 var(--sans);
  color: var(--night-muted);
}

.person-one-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 18px;
  overflow: hidden;
  background: var(--night-card);
  border: 1px solid var(--line);
}

/* The card clips the still to its own corners. */
.person-one .person-one-still {
  width: 100%;
  border-radius: 0;
}

.person-one .person-one-still::after {
  width: 48px;
  height: 48px;
  font-size: 16px;
}

.person-one-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px 16px;
}

.person-one-title {
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--night-ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.person-one-origin,
.person-one-video {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.35;
  color: var(--night-muted);
}

.person-one-video {
  display: none;
  margin-top: 6px;
  font-size: var(--t-meta);
  overflow-wrap: anywhere;
}

.person-one-text > .person-memory {
  margin: 4px 0 0;
}

.person-one-count,
.person-one-people,
.person-one-go-wide {
  display: none;
}

.person-one-go {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  margin-top: 12px;
  font: 600 13px / 1.3 var(--sans);
  color: var(--night-teal);
}

/* ---- everything they sing here --------------------------------------- */

.person-songs {
  padding: 20px var(--gutter) 0;
}

.person-rows,
.person-crows {
  margin-top: 8px;
}

/* A devoted list's two groups: the songwriter's songs, then the rest. */
.person-group {
  margin: 18px 0 0;
  font: 600 var(--t-meta) / 1.3 var(--sans);
  color: var(--night-ink);
}

.person-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  grid-template-areas:
    "still text queue"
    "still memory queue";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  min-height: var(--row-min);
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.person-row > .person-row-still {
  grid-area: still;
}

.person-row > .person-row-text {
  grid-area: text;
}

.person-row > .person-memory {
  grid-area: memory;
}

.person-row > .person-queue {
  grid-area: queue;
}

.person-row-text,
.person-crow-text {
  min-width: 0;
}

/* Names and titles wrap; nothing on this page truncates a name. */
.person-row-title {
  display: block;
  font-size: var(--t-row);
  line-height: 1.15;
  color: var(--fg);
  overflow-wrap: anywhere;
  /* the room's link: a tap tall without moving the row — the hit area
     reaches over the meta line, which is not pressed */
  position: relative;
  padding-block: 13px;
  margin-block: -13px;
}

.person-arrow {
  color: var(--accent);
}

.person-row-meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--fg-muted);
}

/* A medley's or a mashup's row: its songs under its label, each a door to
   its room (ledger 390). */
.person-row-songs {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

/* Who first sang it: the wide screen's (the block at the end). */
.person-row-origin {
  display: none;
}

.person-memory {
  font: 600 11px / 1.2 var(--sans);
  color: var(--accent);
  white-space: nowrap;
}

.person-queue {
  background: transparent;
}

/* ---- here and on their channel --------------------------------------- */

.person-tier {
  padding: 22px var(--gutter) 0;
}

.person-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.person-tile {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  background: var(--night-card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.person-tile:hover,
.person-tile:focus-visible {
  border-color: var(--accent);
}

.person-tile-value {
  display: block;
  font-size: var(--t-head);
  line-height: 1;
}

.person-tile-what {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--fg-muted);
}

.person-coverage {
  margin-top: 10px;
}

/* A tile's press lands somewhere: the rows it opened light their heading
   once, so the click is answered, not just scrolled (Terran, 2026-10-08). */
.person-arrived > .label {
  animation: person-arrived 1.6s ease-out;
}

@keyframes person-arrived {
  0%,
  40% {
    color: var(--accent);
  }
}

.person-section {
  margin-top: 18px;
}

.person-section > .meta {
  margin-top: 4px;
}

.person-crow {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.person-crow-main {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) var(--tap-round);
  gap: 12px;
  align-items: center;
}

.person-crow-title {
  display: block;
  font-size: var(--t-body);
  line-height: 1.25;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.person-open {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font: 600 var(--t-meta) / 1.2 var(--sans);
}

.person-crow-more {
  background: transparent;
  font-size: 18px;
}

.person-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-left: 92px; /* the still column (80) and the gap (12) */
}

.person-moves .pill {
  background: transparent;
  border-color: var(--night-line);
}

.person-moves .pill[aria-pressed="true"] {
  background: var(--night-ink);
  border-color: var(--night-ink);
  color: var(--night);
}

.person-undo {
  flex-basis: 100%;
  font-size: var(--t-meta);
  color: var(--fg-muted);
}

.person-undo-btn {
  min-height: var(--tap);
  padding: 0 4px;
  font-weight: 700;
  color: var(--accent);
}

.person-file {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-left: 92px; /* the still column (80) and the gap (12) */
}

.person-field {
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--r-tile);
  border: 1px solid var(--night-line);
  background: var(--night-card);
  color: var(--fg);
  font-size: 16px; /* under 16px a phone zooms the page on focus */
}

.person-file .pill {
  justify-self: start;
}

.person-crow > .said {
  margin-top: 6px;
  padding-left: 92px; /* the still column (80) and the gap (12) */
}

/* ---- something wrong? -------------------------------------------------- */

/* One quiet press at the end of the page; what it opens is the cover's own
   words (Suggest a cover · paste a link, I'm the performer). */
.person-wrong {
  padding: 22px var(--gutter) 24px;
}

.person-wrong-toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font: 600 var(--t-meta) / 1.2 var(--sans);
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.person-wrong-toggle[aria-expanded="true"] {
  color: var(--fg);
}

.person-wrong-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.person-wrong-body > .meta {
  flex-basis: 100%;
}

.person-wrong-body .pill {
  background: transparent;
  border-color: var(--night-line);
  white-space: normal;
  text-align: center;
}

.person-wrong-form {
  flex-basis: 100%;
  padding-left: 0;
}

.person-wrong > .said {
  margin-top: 8px;
}

/* ---- a wide screen: two columns -------------------------------------- */
/*
 * Claude Design, "Badge One Cover" turn 2 (2026-10-17): "the person stays,
 * the work scrolls." Content at most 1200 (listen.css widens #view and the
 * top line for this page), 40px each side; a 400px person column and the
 * work beside it, 80px apart. The person column is held in view while the
 * work scrolls: from its top when it fits the window, else from its foot
 * (person.js `holdTop` writes --hold-top), so its verbs never leave the
 * screen. The picture stays in the column, its own corners, no bleed.
 */
@media (min-width: 900px) {
  .person {
    --gutter: 0px;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 80px;
    align-items: start;
    padding: 32px 40px 60px;
  }

  .person-about {
    grid-column: 1 / -1;
    margin-bottom: 24px;
  }

  .person-side {
    position: sticky;
    top: var(--hold-top, 24px);
  }

  .person-hero {
    padding-top: 0;
  }

  .person-portrait,
  .person-wall {
    border-radius: 12px;
    overflow: hidden;
  }

  .person-wall-avatar {
    left: 12px;
  }

  .person-badge {
    width: 72px;
    height: 72px;
    margin-top: 0;
    border-radius: 10px;
  }

  .person-name {
    font-size: var(--name-wide) !important;
  }

  .person-facts {
    font-size: 13.5px;
  }

  .person-acts-wrap {
    padding-top: 22px;
  }

  .person-acts,
  .person-tally {
    max-width: 360px;
  }

  .person-work > :first-child {
    padding-top: 6px;
    margin-top: 0;
  }

  /* One cover: the still and the words side by side, the others four across. */
  .person-one-label {
    font-size: 13px;
  }

  .person-one-card {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .person-one .person-one-still::after {
    width: 56px;
    height: 56px;
    font-size: 18px;
  }

  .person-one-text {
    justify-content: center;
    gap: 8px;
    padding: 24px 24px 24px 26px;
  }

  .person-one-title {
    font-size: 32px;
    letter-spacing: -0.02em;
  }

  .person-one-origin {
    font-size: 13.5px;
  }

  .person-one-video {
    display: block;
  }

  .person-one-others {
    margin-top: 24px;
  }

  .person-one-count {
    display: block;
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--night-muted);
  }

  .person-one-people {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .person-one-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--tap);
    color: var(--night-ink);
  }

  /* A person in a list is a round face, as on every other page; the
     square badge is their own page's mark, not a list's. */
  .person-one-face {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--still-bg) center / cover no-repeat;
  }

  .person-one-name {
    min-width: 0;
    font-size: var(--t-small);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .person-one-go {
    justify-content: flex-start;
    gap: 8px;
    margin-top: 6px;
  }

  .person-one-go-phone {
    display: none;
  }

  .person-one-go-wide {
    display: inline;
  }

  /* The rows: a wider still, a larger title, and who first sang it. */
  .person-row {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    column-gap: 18px;
    min-height: 84px;
  }

  .person-row-title {
    font-size: 22px;
    line-height: 1.1;
  }

  .person-row-origin {
    display: inline;
    font-size: var(--t-small);
    color: var(--night-muted);
  }

  .person-row-origin + .person-row-meta {
    display: inline;
    font-size: var(--t-small);
  }

  .person-row-origin + .person-row-meta::before {
    content: " · ";
  }

  .person-crow-main {
    grid-template-columns: 112px minmax(0, 1fr) var(--tap-round);
    column-gap: 18px;
  }

  .person-moves,
  .person-file,
  .person-crow > .said {
    padding-left: 130px; /* the still column (112) and the gap (18) */
  }
}