/* Typography & Theme */
:root {
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #6b7280;
  --border: #e5e7eb;

  --maxw: 1100px;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
}

img { max-width: 100%; height: auto; display: block; }

.container { width: min(92%, var(--maxw)); margin: 0 auto; }

/* Header / Nav */
.site-header { position: sticky; top: 0; background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); z-index: 10; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.brand {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none;
  color: inherit;
}
.nav-links a { margin-left: 20px; text-decoration: none; color: inherit; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-color: currentColor; }

/* Hero */
.hero { padding: 64px 0 40px; }
.display { font-family: var(--font-serif); font-size: clamp(40px, 9vw, 92px); line-height: 0.95; margin: 0 0 16px; letter-spacing: -0.5px; }
.lead { font-size: 18px; max-width: 70ch; }
.actions { margin-top: 20px; display: flex; gap: 12px; }

.button { display: inline-block; padding: 10px 16px; border: 1px solid var(--fg); color: var(--bg); background: var(--fg); text-decoration: none; transition: 0.15s ease-in-out; }
.button:hover { opacity: 0.9; }
.button-ghost { background: transparent; color: var(--fg); }

/* Content */
.content { padding: 32px 0 72px; }
.page-header { padding: 48px 0 8px; }

.grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }

h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.1; }
h2 { font-size: clamp(24px, 3.2vw, 40px); margin: 36px 0 12px; }
h3 { font-size: clamp(20px, 2.4vw, 28px); margin: 24px 0 8px; }
h4 { font-size: 18px; margin: 16px 0 6px; }

ul { padding-left: 20px; }
li { margin: 6px 0; }

hr { border: 0; height: 1px; background: var(--border); margin: 36px 0; }

blockquote { border-left: 3px solid var(--fg); padding: 8px 16px; margin: 20px 0; font-style: italic; }
.muted { color: var(--muted); }

a { color: inherit; }
a:hover { opacity: 0.9; }

.site-footer { border-top: 1px solid var(--border); padding: 24px 0; text-align: center; color: var(--muted); font-size: 14px; }

/* Song article */
.song header { margin-bottom: 8px; }