:root { color-scheme: light dark; --ink:#20252b; --paper:#f7f2e9; --card:#fffdf8; --accent:#9f2f22; --muted:#5e625f; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:var(--accent); } .wrap { width:min(1100px, calc(100% - 32px)); margin:auto; } header { padding:42px 0 28px; border-bottom:4px solid var(--accent); } h1 { margin:0; font-size:clamp(2rem,6vw,4.6rem); line-height:.95; letter-spacing:-.04em; } h2 { margin-top:42px; } .tag { margin:7px 0 0; color:var(--muted); } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:22px 0; } .card, .session { display:block; padding:18px; border:1px solid #d8d0c4; border-radius:14px; background:var(--card); color:inherit; text-decoration:none; box-shadow:0 1px 2px #0000000d; } .card:hover, .session:hover { border-color:var(--accent); } .session { margin:12px 0; } .meta { color:var(--muted); font-size:.92rem; } .tracks { list-style:none; padding:0; } .tracks li { margin:14px 0 24px; padding-bottom:18px; border-bottom:1px solid #ddd5c8; } audio { display:block; width:min(700px,100%); margin-top:7px; } footer { color:var(--muted); font-size:.9rem; padding:42px 0; } @media (prefers-color-scheme:dark) { :root { --ink:#ece8df; --paper:#1e211f; --card:#292d2a; --muted:#b9b7ae; } }