/* Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; height: auto; }

/* Tokens */
:root {
  --bg: #1b1b1b;
  --text: #e2e2e2;
  --muted: #8a8a8a;
  --accent: #cc0202;
  --container: 1000px;
  --fs-body: 16px;    /* ~12pt */
  --lh-body: 1.7;
  --fs-nav: 18px;     /* ~14pt */
  --fs-brand-max: 100px;  /* ~75pt */
  --fs-intro-h: 21px; /* ~16pt */
  --fs-postlink: 18px;/* ~14pt */
  --fs-meta: 14px;    /* ~11-12pt */
}

/* Base */
body {
  background: var(--bg);
  color: var(--text);
  font-family: Arial,Verdana;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Headings all in Caprasimo */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Caprasimo', serif;
  line-height: 1.2;
  margin: 0 0 8px;
}


/* Wrapper */
.site { width: 100%; padding: 28px 16px 64px; display: grid; place-items: start center; }

/* Header */
.site-header { text-align: center; margin-bottom: 60px; } /* extra whitespace under nav */
.brand {
  font-size: clamp(48px, 7vw, var(--fs-brand-max));
  color: var(--text);
  text-transform: lowercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.brand-dot { color: var(--accent); }

/* Nav (Sono Light, ~14pt) */
.nav ul { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: clamp(16px, 6vw, 28px); }
.nav-link { color: var(--text); text-decoration: none; font-size: var(--fs-nav); font-weight: 300; opacity: 0.9; }
.nav-link:hover, .nav-link.is-active { opacity: 1; }

/* Intro */
.intro { max-width: var(--container); text-align: center; margin: 0 auto; }
.intro-title { font-size: var(--fs-intro-h); }
.intro-copy  { font-size: var(--fs-body); color: var(--muted); margin: 0 auto 16px; max-width: 820px; }

/* Hero at natural size, centered */
.hero-figure { display: grid; place-items: center; margin: 16px auto 0; }
.hero-figure img {
  width: auto;              /* use intrinsic width */
  max-width: 100%;          /* but don't overflow small screens */
}

/* Posts */
.feed { max-width: var(--container); margin: 26px auto 0; }
.post { text-align: center; margin: 12px 0; }
.post-link {
  font-family: 'Caprasimo', serif;
  color: var(--accent);
  text-decoration: none;
  font-size: var(--fs-postlink);
  line-height: 1.22;
}
.post-link:hover { text-decoration: underline; }
.post-meta { font-size: var(--fs-meta); color: var(--muted); margin-top: 4px; }

/* Back to top (~11pt) */
.back-top { text-align: center; margin-top: 60px; font-size: 14px; font-weight: 300; }
.back-top a { color: var(--text); text-decoration: none; }
.back-top a:hover { text-decoration: underline; }

/* Footer */
.site-footer { margin-top: 18px; text-align: center; color: var(--muted); font-size: 14px; }