/* Shared styles for the content pages (discography, live, pokka, book, what do you expect?, thoughts). */
:root{--paper:#fff;--ink:#20282b;--muted:#8a9296;--rule:#d8dddf;--light-rule:#eef0f1;--red:#f51b3e;--blue:#234bff;--green:#00ad58;--yellow:#ffdc00;--accent:var(--red);--sans:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;--serif:'Instrument Serif',Georgia,serif}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;min-height:100dvh;color:var(--ink);background:var(--paper);font:16px/1.6 var(--sans);display:flex;flex-direction:column;overflow-x:hidden}
body::before{content:'';position:fixed;inset:-50%;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--light-rule) 1px,transparent 1px),linear-gradient(90deg,var(--light-rule) 1px,transparent 1px);background-size:56px 56px;transform:rotate(45deg)}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#fff}
img{max-width:100%;display:block}

/* header + navigation */
.site-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 32px;border-bottom:1px solid var(--ink);margin:0 0 0;background:var(--paper)}
.home{display:flex;align-items:center;gap:14px;text-decoration:none}
.home .mark{font-size:28px;line-height:1}
.home b{font:500 12px var(--mono);letter-spacing:1.1px;display:block}
.home small{font:9px var(--mono);letter-spacing:.6px;color:var(--muted)}
.site-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px}
.site-nav a{text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap}
.site-nav a[aria-current=page]{border-bottom-color:var(--accent);color:var(--ink)}

/* page body */
main{flex:1;width:100%;max-width:920px;margin:0 auto;padding:56px 32px 80px}
.kicker{font:10px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0 0 18px}
.kicker::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
h1{font:400 clamp(44px,8vw,84px)/1 var(--serif);letter-spacing:-1px;margin:0 0 22px}
h1 em{font-style:italic}
.lede{font-size:19px;line-height:1.55;max-width:640px;margin:0 0 48px}
h2{font:500 11px var(--mono);letter-spacing:1px;text-transform:uppercase;margin:56px 0 0;padding-bottom:10px;border-bottom:1px solid var(--ink)}
p{max-width:640px}

/* lists of entries (releases, performances, works, notes) */
.entries{list-style:none;margin:0;padding:0}
.entry{display:grid;grid-template-columns:90px 1fr;gap:6px 24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.entry time,.entry .year{font:12px var(--mono);color:var(--muted);padding-top:4px}
.entry h3{font:400 28px/1.15 var(--serif);margin:0}
.entry .meta{font:11px var(--mono);color:var(--muted);letter-spacing:.3px;margin:4px 0 8px}
.entry p{margin:6px 0 0}
.entry .source{font:11px var(--mono);display:inline-block;margin-top:10px}
.entry.with-image{grid-template-columns:90px 1fr 240px}
.entry.with-image figure{margin:0}
.entry.with-image figcaption,.credit{font:10px var(--mono);color:var(--muted);margin-top:6px}

/* hero image */
.hero{margin:0 0 48px}
.hero img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* clearly marked spots for content still to be written */
.todo{border:1px dashed var(--muted);padding:18px 20px;margin:22px 0;font:12px/1.7 var(--mono);color:var(--muted);max-width:640px}
.todo b{color:var(--ink);font-weight:500}

/* simple link list */
.links{display:flex;flex-wrap:wrap;gap:10px 24px;font:12px var(--mono);margin:18px 0 0;padding:0;list-style:none}

/* footer */
.site-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 32px;border-top:1px solid var(--rule);font:10px var(--mono);color:var(--muted);background:var(--paper)}
.site-foot a{text-decoration:none}

@media(max-width:760px){
  .site-head{padding:16px;gap:14px}
  .site-nav{margin-left:0;width:100%;gap:2px 14px;font-size:12px}
  main{padding:36px 16px 56px}
  .lede{font-size:17px}
  .entry,.entry.with-image{grid-template-columns:1fr;gap:4px}
  .entry.with-image figure{margin-top:12px}
  .site-foot{padding:16px}
}