/* robcaljouw.com - warm and personal. Cream paper, warm charcoal ink,
   a terracotta accent from the sunset header, and serif type throughout. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900; font-style: italic; font-display: swap;
}

:root {
  --bg: #faf6f0;
  --surface: #fffdf9;
  --surface-2: #f3ece2;
  --text: #2b2420;
  --muted: #6f6259;
  --border: #e8dfd2;
  --accent: #b4532a;
  --accent-ink: #fffaf5;
  --link: #a54a23;
  --focus: #d9772f;

  --header-bg: rgba(250, 246, 240, .92);
  --hero-bg: #2b2420;
  --hero-text: #fffaf3;
  --footer-bg: #f3ece2;
  --footer-text: #6f6259;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: var(--font-serif);
  --font-heading: var(--font-serif);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --heading-weight: 650;
  --heading-tracking: -0.01em;
  --step-0: 1.125rem;
  --radius: 4px;
  --radius-sm: 3px;
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1714;
    --surface: #231e1a;
    --surface-2: #2c2621;
    --text: #efe7dd;
    --muted: #b3a597;
    --border: #3a322b;
    --accent: #e3895a;
    --accent-ink: #1b1714;
    --link: #eb9b6f;
    --header-bg: rgba(27, 23, 20, .92);
    --hero-bg: #120f0d;
    --footer-bg: #231e1a;
    --footer-text: #b3a597;
  }
}

body { line-height: 1.7; }
.site-header { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.brand { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.01em; }

/* Interface bits in a quiet sans, writing in serif */
.site-nav a, .meta, .tag, .button, .pagination, .sidebar__title, .eyebrow, .site-footer, .entry__nav a span, .contact__field, .contact__privacy { font-family: var(--font-ui); }
.site-nav a { font-size: .95rem; }
.meta { letter-spacing: .02em; }
.tag { background: transparent; border-color: var(--border); }

/* Photo header */
.hero--image { min-height: clamp(260px, 42vw, 460px); display: flex; align-items: flex-end; }
.hero--image::after { background: linear-gradient(180deg, rgba(20, 14, 10, 0) 25%, rgba(20, 14, 10, .65) 100%); }
.hero__inner { padding-block: clamp(2rem, 6vw, 3.5rem); }
.hero__heading { font-weight: 650; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.hero__text { font-style: italic; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }

/* Reading */
.prose { font-size: 1.15rem; }
.prose blockquote { border-left-color: var(--accent); font-style: italic; }
.prose img { border-radius: var(--radius); }
.entry__title { font-weight: 700; }
.post-card__title { font-size: 1.4rem; font-weight: 650; }
.post-card__excerpt { font-size: 1.05rem; }
.section__head h2, .page-head h1 { font-style: italic; font-weight: 600; }

.button { border-radius: 999px; }
.site-footer { border-top-color: var(--border); }