/* The written pages (public/composers/): the game's look, without the game's stylesheet. */
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2"); }
:root { --stage: #0a0717; --raised: #151030; --line: #2d2558; --ink: #f4eeff; --muted: #a99cd2; --glint: #c3a8ff; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--stage); color: var(--ink); }
body { font: 17px/1.6 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; }
/* The opening screen's portraits behind the page (backdrop.ts), the words on a dark sheet. */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 34%, #efdbff, #ff9cde 48%, #8fa8ff); }
.backdrop[hidden] { display: none; }
main { position: relative; z-index: 1; max-width: 720px; min-height: 100dvh; margin: 0 auto; padding: 24px 16px 48px; background: rgb(10 7 23 / .88); }
nav { font-size: 15px; color: var(--muted); }
a { color: var(--glint); }
h1 { margin: 16px 0; font: italic 800 clamp(38px, 8vw, 52px)/1.05 "Bodoni Moda", Didot, Georgia, serif; letter-spacing: -.02em; }
h2 { margin: 32px 0 8px; font-size: 20px; line-height: 1.3; }
img { display: block; width: min(240px, 60%); height: auto; margin: 16px 0; }
.play { display: inline-block; margin: 8px 0; padding: 14px 32px; color: #0a0717; font-weight: 700; text-decoration: none;
  background: linear-gradient(120deg, #5b8cff, #a06bff 50%, #ff6ec4); box-shadow: 0 0 0 1px #a06bff55, 0 12px 44px #a06bff66; }
.play:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
ul { padding-left: 20px; } li { margin: 4px 0; }
.list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.list a { display: block; padding: 12px; background: var(--raised); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.list small { display: block; color: var(--muted); }
.credit, footer { margin-top: 32px; font-size: 14px; color: var(--muted); }