/*
Indie Guitar: tiny, readable, responsive, no JS, no external fonts
Color scheme: paper white, charcoal text, gentle link color, subtle borders
*/
:root {
--bg: #fff;
--ink: #222;
--muted: #666;
--line: #e5e5e5;
--link: #0a66c2; /* calm blue */
--accent: #1a73e8;
--maxw: 64rem; /* ~1024px */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--bg); color: var(--ink);
font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}


/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 1rem; }
header.site-header { border-bottom: 1px solid var(--line); background: #fafafa; }
header .brand { display: flex; align-items: baseline; gap: .5rem; }
header .brand a { text-decoration: none; color: var(--ink); }
header .brand .title { font-weight: 700; letter-spacing: .2px; }
header .brand .tagline { color: var(--muted); font-size: .95rem; }


nav.primary { margin-top: .5rem; }
nav.primary ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
nav.primary a { text-decoration: none; color: var(--link); padding: .25rem .25rem; border-radius: .25rem; }
nav.primary a[aria-current="page"] { font-weight: 600; border-bottom: 2px solid var(--accent); }


main { padding-block: 1.25rem 2.5rem; }
section { margin-block: 1.75rem; }


/* Typography */
h1, h2, h3 { line-height: 1.2; margin: .2em 0 .4em; }
h1 { font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); }
h2 { font-size: clamp(1.3rem, 1.5vw + .9rem, 1.6rem); }
h3 { font-size: 1.125rem; }
p, li { color: var(--ink); }
.lead { color: var(--muted); max-width: 60ch; }
small, .meta { color: var(--muted); }

/* Active nav via body[data-page] — robust version */
body[data-page="home"]   nav.primary li:nth-child(1) a { font-weight:600; border-bottom:2px solid var(--accent); }

body[data-page="music"]  nav.primary a[href$="music.html"]  { font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="videos"] nav.primary a[href$="videos.html"] { font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="lessons"] nav.primary a[href$="lessons.html"]{ font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="license"]   nav.primary a[href$="license.html"]   { font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="gear"]   nav.primary a[href$="gear.html"]   { font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="bio"]    nav.primary a[href$="bio.html"]    { font-weight:600; border-bottom:2px solid var(--accent); }

/* Optional: future-proof if you ever switch to pretty URLs like /music/ */
body[data-page="music"]  nav.primary a[href$="music/"]  { font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="videos"] nav.primary a[href$="videos/"] { font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="lessons"] nav.primary a[href$="lessons/"]{ font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="license"] nav.primary a[href$="license/"]   { font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="gear"]   nav.primary a[href$="gear/"]   { font-weight:600; border-bottom:2px solid var(--accent); }
body[data-page="bio"]    nav.primary a[href$="bio/"]    { font-weight:600; border-bottom:2px solid var(--accent); }

/* Cards / lists */
.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.card { border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; background: #fff; }
.card h3 { margin-top: 0; }


/* Media players */
audio, video { width: 100%; height: auto; margin-top: .5rem; border: 1px solid var(--line); border-radius: .375rem; }
figure { margin: 0; }
figcaption { margin-top: .5rem; color: var(--muted); font-size: .95rem; }


/* Links & buttons */
a { color: var(--link); }
a:hover, a:focus { text-decoration: underline; }
.button { display: inline-block; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .375rem; text-decoration: none; }
.button:hover { border-color: var(--accent); }


/* Footer */
footer.site-footer { border-top: 1px solid var(--line); background: #fafafa; padding-block: 1.25rem; }
footer .credits { color: var(--muted); }


/* Utilities */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
.stack > * + * { margin-top: .75rem; }
.center { text-align: center; }
.muted { color: var(--muted); }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .95em; }


/* Accessibility */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: .5rem; top: .5rem; background: #000; color:#fff; padding:.5rem; border-radius:.25rem; }