/* Velvet Concrete — black set, shared base. Pages add their own composition CSS. */
:root{--bg:#000;--ink:#f1f1f1;--grey:#8c8c8c;--line:#1f1f1f;--red:#e2001a;--g:16px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:"Inter Tight",Helvetica,Arial,sans-serif;font-size:15px;line-height:1.45;overflow-x:clip;-webkit-font-smoothing:antialiased}
video{display:block;background:#000}
img.logo{mix-blend-mode:screen;height:auto;display:block}
.paint{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:none;mix-blend-mode:screen;z-index:5}
.paint.on{display:block}
main.vc{max-width:1180px;margin:0 auto;padding:9vh var(--g) 12vh}
.film video{width:100%;aspect-ratio:1280/695;cursor:pointer}
.film p{margin:8px 0 0;color:var(--grey);font-size:12px}
.sheet{margin-top:9vh;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:180px 1fr;gap:16px 32px;padding:22px 0;border-bottom:1px solid var(--line)}
.row b{font-weight:400;color:var(--grey);font-size:13px;padding-top:2px}
.row p{margin:0}
.poem{white-space:pre-line;font-size:17px;line-height:1.5}
.ph{color:var(--grey)}
[data-music]{cursor:pointer;border-bottom:1px solid var(--ink)}
[data-music].is-playing{border-bottom-style:dashed;color:var(--grey)}
dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 24px}
dt{color:var(--grey)}dd{margin:0}
footer.vc{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-top:12vh;color:var(--grey);font-size:12px}
footer.vc img{width:140px}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:6px}}
/* second film + tracks + platform strips */
.film2{margin-top:9vh}
.film2 h2{font:inherit;font-weight:500;margin:0 0 10px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.film2 h2 span{color:var(--grey);font-weight:400;font-size:13px}
.film2 .mark{width:64px;height:auto;filter:invert(1);mix-blend-mode:screen;display:inline-block;vertical-align:middle;margin-right:10px}
.tracks{display:grid;gap:18px}
.track{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center}
.track p{margin:0}
.track small{color:var(--grey);display:block;font-size:12px}
.platforms{display:flex;flex-wrap:wrap;gap:10px 14px;color:var(--ink)}
.platforms a{display:inline-flex;color:inherit;opacity:.9}
.platforms a:hover{opacity:1}
.platforms a.todo{opacity:.3;pointer-events:none}
@media (max-width:760px){.track{grid-template-columns:1fr}}