:root{ /* charlesperforms.com palette: warm paper ground, dark ink, rust accent (per-section accents below) */ --bg:#f6f3ec; --panel:#efeadf; --ink:#1b1714; --ink-soft:#5b554d; --accent:#8a3324; --accent-soft:#a35240; --rule:#d8d2c5; --maxw:1100px; --disp:"Fraunces",Georgia,serif; --body:"Fraunces",Georgia,serif; --ui:"Inter",system-ui,-apple-system,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} h1,h2,h3{font-family:var(--disp);font-weight:340;letter-spacing:-.015em;line-height:1.12;margin:0} a{color:var(--accent);text-decoration:none} .site-nav{display:flex;align-items:center;justify-content:space-between; padding:18px 24px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(246,243,236,.92);backdrop-filter:blur(6px);z-index:10} .site-nav .brand{font-family:var(--disp);color:var(--ink);font-size:19px;font-weight:500;letter-spacing:.01em} .site-nav .brand b{color:var(--accent)} .site-nav{flex-wrap:wrap;gap:8px 18px} .nav-link{font-family:var(--ui);font-size:14px;letter-spacing:.04em;color:var(--ink-soft);transition:color .12s} .nav-link:hover{color:var(--ink)} .nav-link.is-active{color:var(--accent)} .hero{padding:96px 0 64px;border-bottom:1px solid var(--rule)} .hero h1{font-size:clamp(38px,7vw,76px)} .hero .lead{max-width:60ch;color:var(--ink-soft);font-size:20px;margin-top:24px} .kicker{font-family:var(--ui);font-weight:600;text-transform:uppercase;color:var(--accent);font-size:12px;letter-spacing:.18em;margin-bottom:16px} /* gallery */ .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;padding:56px 0} .drummer-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule);overflow:hidden;transition:transform .2s,border-color .2s} .drummer-card:hover{transform:translateY(-3px);border-color:var(--accent)} .dc-portrait{display:block;aspect-ratio:1/1;background-size:cover;background-position:center top;filter:contrast(1.03)} .drummer-card:hover .dc-portrait{filter:brightness(1.12) contrast(1.06)} .dc-body{padding:16px} .dc-name{display:block;font-family:var(--disp);font-weight:500;font-size:23px;color:var(--ink)} .dc-epithet{display:block;font-family:var(--ui);color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-top:4px} .dc-track{display:block;color:var(--ink-soft);font-size:14px;margin-top:10px} /* drummer hero */ .drummer-hero{display:grid;grid-template-columns:280px 1fr;gap:40px;padding:56px 0;border-bottom:1px solid var(--rule)} .dh-portrait{margin:0}.dh-portrait img{width:100%;display:block;filter:contrast(1.03)} .dh-kicker{font-family:var(--ui);font-weight:600;text-transform:uppercase;color:var(--accent);letter-spacing:.16em;font-size:12px;margin:0 0 10px} .dh-name{font-size:clamp(34px,6vw,60px)} .dh-tagline{font-size:21px;color:var(--ink);margin:16px 0} .dh-bio{grid-column:1/-1;max-width:70ch;color:var(--ink-soft);margin-top:8px;font-size:18px;line-height:1.7} .site-footer{padding:48px 0;border-top:1px solid var(--rule);color:var(--ink-soft);font-size:14px} @media(max-width:680px){.drummer-hero{grid-template-columns:1fr}.dh-portrait{max-width:240px}} /* ---- umbrella: per-section accent (on so the mixer reads it) ---- */ html[data-section="drums"]{--accent:#a61e2c;--accent-soft:#c44553} html[data-section="bass"]{--accent:#8a5f14;--accent-soft:#a87b2a} /* ---- umbrella top nav ---- */ .site-sections{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center} .nav-soon{opacity:.45;cursor:default} /* ---- landing ---- */ .landing{max-width:var(--maxw);margin:0 auto;padding:0 24px} .land-hero{padding:96px 0 40px} .land-hero h1{font-size:clamp(36px,6.5vw,72px);max-width:18ch} .land-hero .lead{color:var(--ink-soft);font-size:22px;margin-top:20px} .land-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:16px 0 96px} .land-card{display:flex;flex-direction:column;justify-content:flex-end;min-height:200px; background:var(--panel);border:1px solid var(--rule);padding:22px;transition:transform .2s,border-color .2s} .land-card:hover{transform:translateY(-3px);border-color:var(--accent)} .land-card[data-section="drums"]:hover{border-color:#a61e2c} .land-card[data-section="bass"]:hover{border-color:#8a5f14} .land-card.is-soon{opacity:.5} .lc-name{font-family:var(--disp);font-weight:500;font-size:32px;color:var(--ink)} .lc-count{color:var(--ink-soft);font-size:14px;text-transform:uppercase;letter-spacing:.1em;margin-top:6px} /* ---- era groups on roster pages ---- */ .roster{padding:16px 0 56px} .era-head{font-family:var(--ui);font-weight:600;text-transform:uppercase;color:var(--accent);font-size:13px;letter-spacing:.16em;margin:44px 0 0} .roster .gallery{padding:20px 0 8px} /* ---- player pages: blog-post column width ---- */ body[data-player] .wrap{max-width:720px;padding:0 32px} body[data-player] .drummer-hero{grid-template-columns:220px 1fr;gap:28px;padding:44px 0}