/* artists.crowon.app (server/artists.mjs). Written for this site only. The look follows the music-for-artists sites
   (artists.spotify.com, artists.apple.com, measured 2026-11-10 at 1440px and 375px): photographs as large as the screen,
   bold left-aligned headings (64/700 hero, 48/700 sections; 40 and 32 on phones), 16px body, 48px round pill buttons,
   photo corners 0, 48px page margins (16px on phones), footer links in grey on 46px steps.
   Page background: #fff in light mode, #000 in dark. No decorative motion: only press feedback and the phone menu. */

:root {
  --bg: #fff;
  --ink: #000;
  --ink-2: #4d4d4d;
  --ink-3: #6a6a6a;
  --rule: #e5e5e5;
  --pill-bg: #000;
  --pill-ink: #fff;
  --hover: #f4f4f4;
  --gut: 48px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000; --ink: #fff; --ink-2: #b3b3b3; --ink-3: #939393; --rule: #2a2a2a; --pill-bg: #fff; --pill-ink: #000; --hover: #121212; }
}
@media (max-width: 760px) { :root { --gut: 16px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-padding-top: 96px; }
body.ca {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.nb { display: inline-block; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) .ca-sub { word-break: auto-phrase; }
.ca-wrap { width: min(100% - var(--gut) * 2, 1344px); margin-inline: auto; }
.ca-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--pill-bg); color: var(--pill-ink); padding: 8px 16px; border-radius: 999px; font-weight: 700; }
.ca-skip:focus { left: 8px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.ca-eyebrow { margin-bottom: 14px; font-size: 16px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.ca-sub { margin-top: 20px; max-width: 560px; font-size: 24px; font-weight: 700; line-height: 1.3; }
.ca-pill { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 9999px; background: var(--pill-bg); color: var(--pill-ink); font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ca-pill:active { transform: scale(.97); }
.ca-pill.sm { height: 32px; padding: 0 16px; font-size: 14px; }
.ca-pill.on-photo { background: #fff; color: #000; }
.ca-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.ca-more:hover { text-decoration: underline; }
.ca-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- header ---------- */
.ca-top { position: sticky; top: 0; z-index: 20; height: 72px; background: var(--bg); }
.ca-top-in { height: 100%; padding: 0 var(--gut); display: flex; align-items: center; gap: 48px; }
.ca-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; font-size: 18px; font-weight: 700; }
.ca-brand img { width: 26px; height: 26px; border-radius: 7px; }
.ca-nav ul { display: flex; gap: 40px; }
.ca-nav a, .ca-lang { font-size: 14px; font-weight: 700; text-decoration: none; }
.ca-nav a:hover, .ca-lang:hover { text-decoration: underline; }
.ca-nav a[aria-current] { color: var(--ink-3); }
.ca-top-end { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.ca-menu { display: none; }
.ca-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; margin-right: -10px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; }
.ca-menu summary::-webkit-details-marker { display: none; }
.ca-menu summary span { width: 20px; height: 2px; background: var(--ink); border-radius: 1px; }
.ca-menu[open] summary span:first-child { transform: translateY(4.5px) rotate(45deg); }
.ca-menu[open] summary span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.ca-menu-panel { position: fixed; inset: 72px 0 0; background: var(--bg); padding: 16px var(--gut); overflow: auto; }
.ca-menu-panel li a { display: block; padding: 12px 0; font-size: 32px; font-weight: 700; text-decoration: none; }
.ca-menu-end { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
@media (max-width: 1080px) { .ca-nav { display: none; } .ca-menu { display: block; } }
@media (max-width: 760px) {
  .ca-top { height: 64px; }
  .ca-menu-panel { inset-block-start: 64px; }
  .ca-top-end > .ca-pill, .ca-top-end > .ca-lang { display: none; }
}

/* ---------- home ---------- */
.ca-photo { width: 100%; object-fit: cover; background: #1a1a1a; }
/* 1. the stage photograph: most of the first screen, words on its lower left in white whatever the mode */
.ca-hero { position: relative; height: calc(100svh - 72px); min-height: 620px; max-height: 920px; color: #fff; display: flex; align-items: flex-end; overflow: hidden; }
.ca-hero-pic { position: absolute; inset: 0; height: 100%; object-position: 50% 30%; filter: brightness(.7); }
.ca-hero-t { position: relative; padding-bottom: 64px; }
.ca-hero h1 { max-width: 760px; font-size: 64px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
:lang(ja) .ca-hero h1 { letter-spacing: 0; line-height: 1.2; }
/* each written line of the headline is its own line; a long one still wraps on a phone */
.ca-hero h1 .nb { display: block; }
.ca-hero .ca-pill { margin-top: 32px; }

.ca-block { padding: 120px 0 0; }
.ca-block h2 { font-size: 48px; font-weight: 700; line-height: 1.12; letter-spacing: -.015em; }
:lang(ja) .ca-block h2 { letter-spacing: 0; line-height: 1.25; }
.ca-block p { font-size: 16px; line-height: 1.65; }
/* 2. one large photograph, words beside it */
.ca-split { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.ca-split-m .ca-photo { aspect-ratio: 4 / 3; }
.ca-split-t p { margin-top: 20px; }
.ca-split-t h2 + p { margin-top: 28px; }
.ca-split-t .ca-more { margin-top: 28px; }
/* 3. a photograph across the page, words under it */
.ca-wide .ca-photo { height: min(72vh, 760px); object-position: 50% 25%; }
.ca-under { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; padding-top: 48px; }
.ca-under p + p { margin-top: 16px; }
.ca-under .ca-more { margin-top: 24px; }
/* 4. where-to table */
.ca-head { max-width: 885px; margin-bottom: 48px; }
.ca-head p { margin-top: 12px; color: var(--ink-2); }
.ca-table { width: 100%; border-collapse: collapse; }
.ca-table th, .ca-table td { padding: 20px 24px 20px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.ca-table thead th { padding-top: 0; font-size: 14px; font-weight: 400; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.ca-table tbody th { width: 22%; font-size: 18px; font-weight: 700; }
.ca-loc { width: 30%; font-size: 16px; font-weight: 700; color: var(--ink-2); }
.ca-table td:last-child { font-size: 16px; line-height: 1.6; }
/* 5. further reading as a tracklist */
.ca-further { padding-bottom: 140px; }
.ca-reads { border-top: 1px solid var(--rule); }
.ca-read { display: grid; grid-template-columns: 48px 120px minmax(0, 1fr) 24px; align-items: center; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.ca-read:hover { background: var(--hover); }
.ca-read-n { font-size: 18px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ca-read .ca-photo { width: 120px; height: 120px; }
.ca-read b { display: block; font-size: 28px; font-weight: 700; line-height: 1.2; }
.ca-read small { display: block; margin-top: 6px; font-size: 16px; color: var(--ink-2); }
.ca-read .ca-arrow { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .ca-hero { height: calc(100svh - 64px); min-height: 560px; }
  .ca-hero-t { padding-bottom: 40px; }
  .ca-hero h1 { font-size: 40px; }
  .ca-sub { margin-top: 14px; font-size: 20px; }
  .ca-hero .ca-pill { margin-top: 24px; }
  .ca-block { padding-top: 72px; }
  .ca-block h2 { font-size: 32px; }
  .ca-split, .ca-under { grid-template-columns: 1fr; gap: 28px; }
  .ca-wide .ca-photo { height: auto; aspect-ratio: 4 / 3; }
  .ca-under { padding-top: 28px; gap: 16px; }
  .ca-head { margin-bottom: 28px; }
  .ca-table thead { display: none; }
  .ca-table, .ca-table tbody, .ca-table tr, .ca-table th, .ca-table td { display: block; width: auto; }
  .ca-table tr { padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .ca-table th, .ca-table td { padding: 0; border: 0; }
  .ca-table tbody th, .ca-loc { width: auto; }
  .ca-loc { margin-top: 4px; font-size: 14px; }
  .ca-table td:last-child { margin-top: 6px; font-size: 15px; }
  .ca-further { padding-bottom: 96px; }
  .ca-read { grid-template-columns: 72px minmax(0, 1fr) 20px; gap: 16px; padding: 14px 0; }
  .ca-read-n { display: none; }
  .ca-read .ca-photo { width: 72px; height: 72px; }
  .ca-read b { font-size: 20px; }
  .ca-read small { font-size: 14px; }
}

/* ---------- guide pages ---------- */
.ca-g-head { padding: 96px 0 72px; border-bottom: 1px solid var(--rule); }
.ca-g-head h1 { font-size: 64px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.ca-g-head .ca-pill { margin-top: 40px; }
.ca-g { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 96px; padding: 72px 0 140px; }
.ca-g-toc ol { position: sticky; top: 104px; counter-reset: t; }
.ca-g-toc li { counter-increment: t; }
.ca-g-toc a { display: grid; grid-template-columns: 28px 1fr; padding: 8px 0; font-size: 14px; font-weight: 700; line-height: 1.45; text-decoration: none; color: var(--ink-2); }
.ca-g-toc a::before { content: counter(t, decimal-leading-zero); color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.ca-g-toc a:hover { color: var(--ink); }
.ca-g-sec + .ca-g-sec { margin-top: 72px; }
.ca-g-sec h2 { font-size: 32px; font-weight: 700; line-height: 1.25; }
.ca-g-sec p { margin-top: 16px; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.ca-g-sec p b { color: var(--ink); }
.ca-g-fig { margin-top: 32px; border: 1px solid var(--rule); }
.ca-screen { width: 100%; }
.ca-g-list, .ca-g-cols { margin-top: 20px; border-top: 1px solid var(--rule); }
.ca-g-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.ca-g-list li, .ca-g-cols li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 18px; font-weight: 700; }
.ca-g-note { font-size: 15px !important; color: var(--ink-3) !important; }
.ca-g-next { margin-top: 80px !important; }
.ca-404 { border: 0; min-height: 70svh; }
@media (max-width: 900px) {
  .ca-g-head { padding: 48px 0 40px; }
  .ca-g-head h1 { font-size: 40px; }
  .ca-g { grid-template-columns: 1fr; gap: 40px; padding: 40px 0 96px; }
  .ca-g-toc ol { position: static; border-top: 1px solid var(--rule); }
  .ca-g-toc a { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
  .ca-g-sec + .ca-g-sec { margin-top: 56px; }
  .ca-g-sec h2 { font-size: 24px; }
  .ca-g-sec p { font-size: 16px; }
  .ca-g-list li, .ca-g-cols li { font-size: 16px; }
  .ca-g-next { margin-top: 56px !important; }
}

/* ---------- footer ---------- */
.ca-foot { padding: 96px 0 40px; border-top: 1px solid var(--rule); }
.ca-foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.ca-foot-grid > .ca-brand { align-self: start; }
.ca-foot h2 { margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ca-foot li a { display: block; padding: 11px 0; font-size: 16px; line-height: 24px; color: var(--ink-3); text-decoration: none; }
.ca-foot li a:hover { color: var(--ink); }
.ca-foot-bar { display: flex; justify-content: space-between; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); }
.ca-foot-bar a { font-weight: 700; text-decoration: none; }
@media (max-width: 900px) { .ca-foot-grid { grid-template-columns: 1fr 1fr; } .ca-foot-grid > .ca-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ca-foot { padding: 64px 0 32px; } .ca-foot-grid { grid-template-columns: 1fr; gap: 24px; } .ca-foot li a { padding: 8px 0; font-size: 14px; } }