/* Groovie static pages — shared design system (matches the homepage) */
:root {
  --cream: #f5f1e9; --cream-2: #ece4d5; --ink: #2b2a27; --ink-soft: #4c483f;
  --muted: #746d5f; --orange: #fc552d; --line: rgba(43,42,39,0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.display { font-family: 'Archivo', 'Arial Narrow', sans-serif; font-weight: 900; letter-spacing: -0.022em; line-height: 1.05; }

/* Top bar */
header { position: sticky; top: 0; z-index: 30; background: rgba(245,241,233,0.84);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 23px; letter-spacing: -0.01em; }
.brand i { color: var(--orange); font-style: normal; }
.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.nav-links a:hover { color: var(--orange); }
@media (max-width: 680px) { .nav-links { display: none; } }

/* Article */
main { padding: 56px 0 72px; }
article { max-width: 720px; margin: 0 auto; }
article .eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
article h1 { font-size: clamp(30px, 5.4vw, 46px); margin-bottom: 8px; }
article .draftline { color: var(--muted); font-style: italic; font-size: 14.5px; margin: 6px 0 26px; }
article .lead { font-size: 18px; color: var(--ink-soft); margin: 18px 0; line-height: 1.7; }
article p { font-size: 16px; line-height: 1.75; margin: 16px 0; color: var(--ink-soft); }
article h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.01em;
  margin: 30px 0 8px; color: var(--ink); }
article ul { margin: 12px 0 16px 2px; padding: 0; list-style: none; }
article li { position: relative; padding-left: 20px; margin: 8px 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
article li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); }
article a[href] { color: var(--orange); font-weight: 600; }
article a[href]:hover { text-decoration: underline; }
article .sig { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
article strong { color: var(--ink); font-weight: 700; }

/* Footer */
footer { padding: 40px 0 56px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
.foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a:hover { color: var(--orange); }