/* The client one-sheet. US Letter at 96 dpi (816 x 1056), 48px margins, a 12-column grid with 24px gutters (a column is 38px). Spacing only uses
   4, 8, 16, 24, 32, 48, 64. The name is Anton in capitals, all small text is Libre Franklin, in normal case (Light bio, Bold titles). A black hero, hairline rules, soft stat cards, real buttons
   (Listen, Read, social links, Contact), no shadows or gradients. One accent: green marks what is verified (gold for the Black Card tier).
   Every number here matches wallet/sheet.py, which draws the PDF. */
@font-face { font-family: "Libre Franklin"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/LibreFranklin-Light.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/LibreFranklin-Regular.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/LibreFranklin-Bold.ttf") format("truetype"); }
@font-face { font-family: "Anton"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Anton-Regular.ttf") format("truetype"); }

.os-frame, .os-page { container-type: inline-size; }
.cs { --ink: #0e0e0f; --rule: #e5e5e5; --mute: #6b6b6b; --green: #67c200; --gold: #e2b13f; --gap: 24px;
  position: relative; width: 100%; max-width: 816px; min-height: 1056px; margin: 0 auto; display: flex; flex-direction: column; background: #fff; color: var(--ink);
  font: 400 13px/20px "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-align: left; }
.cs.g48 { --gap: 48px; } .cs.g32 { --gap: 32px; } .cs.g24 { --gap: 24px; }
.cs *, .cs *::before, .cs *::after { box-sizing: border-box; }
/* resets with no weight of their own, so the spacing rules below always win */
.cs :is(h1, h2, h3, p, dl, dd, ul, small, strong, b, i) { margin: 0; padding: 0; font-style: normal; letter-spacing: normal; }
.cs ul { list-style: none; }
.cs a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.cs a:hover, .cs a:focus-visible { text-decoration-color: currentColor; }
.cs .cs-mono { font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }  /* small labels: normal case */
.cs .cs-data { font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }  /* values only: PRO, publisher, email, dates */

/* provenance: solid green = from the verified card, outlined = added by the manager */
.cs .cs-d { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; flex: none; }
.cs .cs-d.is-card { background: var(--green); }
.cs .cs-d.is-added { box-shadow: inset 0 0 0 1px var(--mute); }
.cs .cs-hero .cs-d.is-added { box-shadow: inset 0 0 0 1px #8a8a8c; }
.cs .cs-label { font-size: 12px; line-height: 16px; color: var(--mute); margin-bottom: 8px; display: flex; align-items: center; }


/* hero: the photo on the left, the name set huge across its edge, the credit line under it */
.cs .cs-hero { --ps: min(286px, calc(var(--hh, 400px) - 80px)); position: relative; background: #0e0e0f; color: #fff; height: var(--hh, 400px); }
.cs .cs-photo { position: absolute; left: 48px; top: 48px; width: var(--ps); height: var(--ps); background: #161617; overflow: hidden; }
.cs .cs-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs .cs-ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Anton", Impact, sans-serif; font-size: 120px; line-height: 1; color: #2a2a2c; }
.cs .cs-ph.is-sample { font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 11px; color: #4a4a4c; }
.cs .cs-hero-top { position: absolute; left: 420px; right: 48px; top: 48px; }
.cs .cs-eyebrow { font-size: 12px; line-height: 16px; color: #8a8a8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cs-roles { margin-top: 8px; font-size: 12px; line-height: 16px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; }
.cs .cs-roles span { overflow: hidden; text-overflow: ellipsis; }
.cs .cs-hero-bottom { position: absolute; left: 420px; right: 48px; bottom: 32px; }
.cs .cs-name { font-family: "Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400; font-size: var(--ns, 96px); line-height: .9; text-transform: uppercase; letter-spacing: -.01em; color: #fff; margin-bottom: -.0265em; }
.cs .cs-name span { display: block; }
.cs .cs-name.n72 { --ns: 72px; } .cs .cs-name.n80 { --ns: 80px; } .cs .cs-name.n64 { --ns: 64px; } .cs .cs-name.n56 { --ns: 56px; } .cs .cs-name.n48 { --ns: 48px; } .cs .cs-name.n40 { --ns: 40px; } .cs .cs-name.n32 { --ns: 32px; }
.cs .cs-credits { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 16px; font-size: 12px; line-height: 16px; }
.cs .cs-credits .cr { display: inline-flex; align-items: baseline; height: 16px; }
.cs .cs-credits .cs-d { align-self: center; margin-right: 8px; }
.cs .cs-credits b { font-weight: 600; font-size: 12px; color: #8a8a8c; margin-right: 8px; }
.cs .cs-credits i { font-weight: 600; color: #fff; overflow-wrap: anywhere; }

/* body: sections a gap apart with a hairline in the middle of each gap, and a small number hanging in the left margin */
.cs .cs-body { flex: 1; display: flex; flex-direction: column; padding: 0 48px 48px; }
.cs .cs-sec { position: relative; margin-top: var(--gap); }
.cs .cs-sec + .cs-sec::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--gap) / -2); height: 1px; background: var(--rule); }
.cs .cs-body > .cs-sec:last-of-type { margin-bottom: var(--gap); }
.cs .cs-private { color: var(--mute); }

.cs .cs-about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.cs .cs-bio-col { grid-column: 1 / 13; }

.cs .cs-bio { font-size: 14px; line-height: 22px; font-weight: 300; color: #222; }
.cs .cs-bio + .cs-bio { margin-top: 16px; }
.cs .cs-ach-col { grid-column: 1 / 13; }
.cs .cs-bio-col + .cs-ach-col { margin-top: 24px; }
.cs .cs-about.is-compact .cs-bio-col { grid-column: 1 / 9; }
.cs .cs-about.is-compact .cs-ach-col { grid-column: 9 / 13; margin-top: 0; }
.cs .cs-about.is-compact .cs-ach { grid-template-columns: 1fr; row-gap: 8px; }
.cs .cs-ach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.cs .cs-ach small { display: block; font-size: 12px; line-height: 16px; color: var(--mute); }
.cs .cs-ach strong { font-weight: 600; }
.cs .cs-ach span { color: var(--mute); }

/* stat cards: a soft card for each number; the numbers share a baseline because every card has the same padding */
.cs .cs-stats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; }
.cs .st { min-width: 0; padding: 24px; border-radius: 12px; background: #f0f0ed; }
.cs .cs-stats.n3 .st:nth-child(1) { grid-column: 1 / 5; } .cs .cs-stats.n3 .st:nth-child(2) { grid-column: 5 / 9; } .cs .cs-stats.n3 .st:nth-child(3) { grid-column: 9 / 13; }
.cs .cs-stats.n2 .st:nth-child(1) { grid-column: 1 / 7; } .cs .cs-stats.n2 .st:nth-child(2) { grid-column: 7 / 13; }
.cs .cs-stats.n1 .st { grid-column: 1 / 13; }
.cs .cs-num { display: block; font: 400 56px/calc(8px + .847em) "Anton", Impact, sans-serif; letter-spacing: 0; white-space: nowrap; }
.cs .cs-num.sz72 { font-size: 72px; } .cs .cs-num.sz64 { font-size: 64px; } .cs .cs-num.sz56 { font-size: 56px; } .cs .cs-num.sz48 { font-size: 48px; } .cs .cs-num.sz40 { font-size: 40px; } .cs .cs-num.sz32 { font-size: 32px; }
.cs .cs-lab { display: flex; align-items: center; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--mute); }
.cs .cs-note { display: block; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--mute); }
.cs .cs-upd { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--mute); }

/* buttons: a pill with a quiet hover (dark for Contact, light on black, outlined for the rest) */
.cs .cs-btn { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink);
  font-size: 12px; line-height: 1; font-weight: 700; white-space: nowrap; text-decoration: none; flex: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.cs a.cs-btn:hover, .cs a.cs-btn:focus-visible, .cs a:hover > .cs-btn, .cs a:focus-visible > .cs-btn { background: var(--ink); color: #fff; }
.cs .cs-btn.is-dark { height: 32px; background: var(--ink); color: #fff; }
.cs a.cs-btn.is-dark:hover, .cs a.cs-btn.is-dark:focus-visible { background: #2a2a2c; }
.cs .cs-btn.is-light { height: 40px; padding: 0 20px; border-color: #fff; background: #fff; color: var(--ink); font-size: 13px; }
.cs a.cs-btn.is-light:hover, .cs a.cs-btn.is-light:focus-visible { background: #e6e6e6; border-color: #e6e6e6; color: var(--ink); }

/* three columns *//* three columns */
.cs .cs-lists { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.cs .cs-lists .col { grid-column: span 4; min-width: 0; }
.cs .cs-lists.n2 .col, .cs .cs-lists.n1 .col { grid-column: span 6; }
.cs .cs-items li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cs .cs-items li + li { margin-top: 4px; }

/* music: the Highlight (a black card), the Recent Releases (a card each) and the players, which only the web page has */
.cs .cs-hl { padding: 24px; border-radius: 12px; background: var(--ink); color: #fff; }
.cs .cs-hl-top { display: flex; align-items: center; gap: 16px; min-height: 48px; }
.cs .cs-cover { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; display: block; }
.cs .cs-hl-text { flex: 1; min-width: 0; }
.cs .cs-hl-text strong { display: block; font-size: 22px; line-height: 28px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cs-hl-text span { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: #8a8a8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cs-rel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: stretch; }
.cs .cs-rc { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; }
.cs .cs-rc strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 700; }
.cs .cs-rc > span { display: block; max-width: 100%; font-size: 12px; line-height: 16px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cs-rc .cs-btn { margin-top: auto; }
.cs .cs-rc > span + .cs-btn { margin-top: 12px; }
.cs .cs-player { align-self: stretch; margin-top: 12px; border-radius: 12px; overflow: hidden; }
.cs .cs-hl .cs-player { margin-top: 16px; }
.cs .cs-player iframe { display: block; width: 100%; border: 0; }
.cs .cs-player.is-sample { height: 80px; display: grid; place-items: center; border: 1px dashed #c8c8c8; font-size: 11px; color: var(--mute); }
.cs .cs-hl .cs-player.is-sample { border-color: #3a3a3c; color: #8a8a8c; }
.cs .cs-cat { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 12px; }
.cs .cs-cat strong { min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* press (a row for each article) beside the social links (a button for each) */
.cs .cs-connect { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.cs .cs-pressbox { grid-column: 1 / 13; min-width: 0; }
.cs .cs-connect.has-both .cs-pressbox { grid-column: 1 / 9; }
.cs .cs-socbox { grid-column: 1 / 13; min-width: 0; }
.cs .cs-connect.has-both .cs-socbox { grid-column: 9 / 13; }
.cs .cs-press li + li { margin-top: 8px; }
.cs .cs-prow { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; transition: border-color .2s ease; }
.cs .cs-prow:hover, .cs .cs-prow:focus-visible { border-color: var(--ink); }
.cs .cs-pt { flex: 1; min-width: 0; }
.cs .cs-pt strong, .cs .cs-pt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cs-pt strong { font-size: 14px; line-height: 20px; font-weight: 700; }
.cs .cs-pt span { font-size: 12px; line-height: 16px; color: var(--mute); }
.cs .cs-soc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; }
.cs .cs-connect.has-both .cs-soc { grid-template-columns: 1fr; }
.cs .cs-srow { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color .2s ease; }
.cs .cs-srow:hover, .cs .cs-srow:focus-visible { border-color: var(--ink); }
.cs .cs-srow span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cs-ico { width: 16px; height: 16px; flex: none; display: block; }

/* footer, pinned to the bottom margin: management and Contact on the left, the QR code with its caption directly under it from column 9 */
.cs .cs-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.cs .cs-mgmt { grid-column: 1 / 8; grid-row: 1; }
.cs .cs-mgmt strong { display: block; font-weight: 700; font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cs-mgmt .cs-data { display: block; margin-top: 8px; font-size: 12px; line-height: 16px; }
.cs .cs-mgmt .cs-btn { margin-top: 16px; }
.cs .cs-qrbox { grid-column: 9 / 13; grid-row: 1; }
.cs .cs-qr img { display: block; width: 80px; height: 80px; shape-rendering: crispEdges; }
.cs .cs-cap { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--mute); }
.cs .cs-meta { grid-column: 1 / 13; grid-row: 2; margin-top: 16px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; font-size: 12px; line-height: 16px; color: var(--mute); }
.cs .cs-meta .upd { grid-column: 1 / 5; white-space: nowrap; }
.cs .cs-meta .ver { grid-column: 5 / 9; display: flex; align-items: center; white-space: nowrap; }
.cs .cs-meta .ver.is-gold .cs-d { background: var(--gold); }
.cs .cs-qr-sample { width: 80px; height: 80px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--ink); font-size: 11px; color: var(--mute); }

/* web only: a quiet fade-in as the sections load */
@media (prefers-reduced-motion: no-preference) {
  .cs .cs-sec, .cs .cs-foot { animation: cs-in .5s ease both; }
  .cs .cs-sec:nth-of-type(2) { animation-delay: .06s; } .cs .cs-sec:nth-of-type(3) { animation-delay: .12s; } .cs .cs-sec:nth-of-type(4) { animation-delay: .18s; } .cs .cs-foot { animation-delay: .24s; }
}
@keyframes cs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* narrower than a sheet of paper (a phone, or a small window): the same sheet in one column */
@container (max-width: 815px) {
  .cs:not(.is-poster) { min-height: 0; }
  .cs:not(.is-poster) .cs-hero { height: auto; padding: 24px; display: flex; flex-direction: column; }
  .cs:not(.is-poster) .cs-photo, .cs:not(.is-poster) .cs-hero-top, .cs:not(.is-poster) .cs-hero-bottom { position: static; width: auto; }
  .cs:not(.is-poster) .cs-photo { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 480px; }
  .cs:not(.is-poster) .cs-hero-top { order: -1; margin-bottom: 16px; }
  .cs:not(.is-poster) .cs-hero-bottom { margin-top: 24px; }
  .cs:not(.is-poster) .cs-ach { grid-template-columns: 1fr; row-gap: 16px; }
  .cs:not(.is-poster) .cs-name { font-size: min(var(--ns), 18cqw); overflow-wrap: anywhere; }
  .cs:not(.is-poster) .cs-body { padding: 0 24px 32px; }
  .cs:not(.is-poster) .cs-sec { margin-top: 32px; }
  .cs:not(.is-poster) .cs-sec + .cs-sec::before { top: -16px; }
  .cs:not(.is-poster) :is(.cs-about, .cs-lists, .cs-stats, .cs-rel, .cs-connect, .cs-foot, .cs-meta) { display: block; }
  .cs:not(.is-poster) .cs-ach-col, .cs:not(.is-poster) .cs-lists .col + .col, .cs:not(.is-poster) .cs-stats .st + .st, .cs:not(.is-poster) .cs-rc + .cs-rc, .cs:not(.is-poster) .cs-socbox { margin-top: 16px; }
  .cs:not(.is-poster) .cs-lists .col + .col { margin-top: 24px; }
  .cs:not(.is-poster) .cs-connect.has-both .cs-soc, .cs:not(.is-poster) .cs-soc { grid-template-columns: 1fr; }
  .cs:not(.is-poster) .cs-hl { padding: 16px; }
  .cs:not(.is-poster) .cs-hl-top { flex-wrap: wrap; }
  .cs:not(.is-poster) .cs-hl-text { flex: 1 1 100%; }
  .cs:not(.is-poster) .cs-hl-text strong { white-space: normal; }
  .cs:not(.is-poster) .cs-num { font-size: min(56px, 14cqw); }
  .cs:not(.is-poster) .cs-foot { margin-top: 32px; }
  .cs:not(.is-poster) .cs-qrbox { margin-top: 24px; }
  .cs:not(.is-poster) .cs-meta .upd { display: block; margin-bottom: 8px; }
}

/* print and PDF: exact colours, no page chrome */
@media print {
  @page { size: 816px 1056px; margin: 0; }
  .cs { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; }
  .cs .cs-sec, .cs .cs-foot { animation: none; }
  .cs .cs-player { display: none; }  /* (a printed page can't play) */
}

/* hero heights come in steps of 8px so the page and the PDF match */
.cs .cs-hero.hh336 { --hh: 336px; }
.cs .cs-hero.hh344 { --hh: 344px; }
.cs .cs-hero.hh352 { --hh: 352px; }
.cs .cs-hero.hh360 { --hh: 360px; }
.cs .cs-hero.hh368 { --hh: 368px; }
.cs .cs-hero.hh376 { --hh: 376px; }
.cs .cs-hero.hh384 { --hh: 384px; }
.cs .cs-hero.hh392 { --hh: 392px; }
.cs .cs-hero.hh400 { --hh: 400px; }
.cs .cs-hero.hh408 { --hh: 408px; }
.cs .cs-hero.hh416 { --hh: 416px; }
.cs .cs-hero.hh424 { --hh: 424px; }
.cs .cs-hero.hh432 { --hh: 432px; }
.cs .cs-hero.hh440 { --hh: 440px; }
.cs .cs-hero.hh448 { --hh: 448px; }
.cs .cs-hero.hh456 { --hh: 456px; }
.cs .cs-hero.hh464 { --hh: 464px; }