/* Riverlife — theme for The River Life. Tokens from the Organic design system. */
:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5; --color-neutral-500: #a19786; --color-neutral-600: #82796a;
  --color-neutral-700: #645c50; --color-neutral-800: #474238; --color-neutral-900: #2e2b25;

  --color-accent-200: #ffe1d0; --color-accent-600: #b2622d; --color-accent-700: #8c491a; --color-accent-900: #402310;
  --color-accent-2-100: #f0fae1; --color-accent-2-200: #e1eecc; --color-accent-2-300: #ccdbb2;
  --color-accent-2-500: #8fa073; --color-accent-2-600: #728157; --color-accent-2-700: #56633f; --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.washed { filter: saturate(0.6) contrast(0.85) brightness(1.05); }

/* header */
.site-head { padding: 44px 0 24px; }
.site-head-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.brand-avatar { flex: none; }
.brand-avatar img { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; box-shadow: var(--shadow-md); filter: saturate(0.75) contrast(0.9); }
.site-head-compact { padding: 24px 0 20px; border-bottom: 1px solid var(--color-divider); }
.site-head-compact .brand-avatar img { width: 46px; height: 46px; box-shadow: none; }
.site-head-compact .brand-title { font-size: 24px; }
.site-head-compact .brand-tagline { display: none; }
.brand-text { flex: 1 1 300px; min-width: 0; }
.brand-title { font-family: var(--font-heading); font-size: 40px; line-height: 1.05; color: var(--color-text); text-decoration: none; display: block; }
.brand-title:hover { color: var(--color-accent-700); }
.brand-tagline { margin: 6px 0 0; font-size: 16px; color: var(--color-neutral-700); }
.site-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* pills */
.pill {
  font-family: var(--font-heading); font-size: 14px; text-decoration: none;
  color: var(--color-neutral-800); padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--color-divider); display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
}
.pill:hover { background: var(--color-neutral-200); color: var(--color-neutral-900); }
.pill:active { background: var(--color-neutral-300); }
.pill-active, .pill-accent { background: var(--color-accent); border-color: transparent; color: var(--color-bg); }
.pill-active:hover, .pill-accent:hover { background: var(--color-accent-600); color: var(--color-bg); }
.pill-active:active, .pill-accent:active { background: var(--color-accent-700); }
.pill-onDark { color: var(--color-accent-2-100); border-color: var(--color-accent-2-500); }
.pill-onDark:hover { background: var(--color-accent-2-600); color: #fff; }
.pill-count { font-family: var(--font-body); font-size: 12px; color: var(--color-neutral-600); }
.tag {
  font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent-900); background: var(--color-accent-200); padding: 5px 14px; border-radius: 999px; text-decoration: none;
}
.tag:hover { background: #ffc6a5; color: var(--color-accent-900); }
.tag-latest {
  font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-bg); background: var(--color-accent-2-600); padding: 5px 14px; border-radius: 999px;
}

.meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--color-neutral-700); margin-bottom: 10px; }
.meta-dot { opacity: 0.6; }

/* lead */
.lead {
  display: block; text-decoration: none; color: inherit; background: var(--color-surface);
  max-width: var(--wrap); margin: 12px auto 0; border-radius: var(--radius-lg); overflow: hidden;
}
.lead:hover { box-shadow: var(--shadow-md); }
.lead-photo { height: 380px; background: var(--color-neutral-300) center/cover no-repeat; }
.lead-body { padding: 28px 32px 32px; }
.lead-title { font-size: 38px; margin: 0 0 12px; max-width: 24ch; }
.lead-excerpt { margin: 0; font-size: 17px; color: var(--color-neutral-800); max-width: 62ch; text-wrap: pretty; }

.section-head { display: flex; align-items: baseline; gap: 16px; margin: 48px auto 12px; }
.section-head h3 { font-size: 24px; margin: 0; }
.rule { flex: 1; height: 1px; background: var(--color-divider); }

/* post list */
.post-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; }
.card-post {
  display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center;
  text-decoration: none; color: inherit; padding: 18px; border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
}
.card-post:hover { background: var(--color-surface); }
.card-post-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--color-neutral-300) center/cover no-repeat; }
.card-post-photo-empty { background: var(--color-neutral-200); }
.card-post-title { font-size: 25px; margin: 0 0 8px; }
.card-post-excerpt { margin: 0; font-size: 15.5px; color: var(--color-neutral-800); max-width: 58ch; text-wrap: pretty; }

.pager { display: flex; gap: 12px; align-items: center; margin-bottom: 56px; }
.pager-count { font-size: 13px; color: var(--color-neutral-700); }

/* pages + posts */
.page-head { margin: 32px auto 8px; }
.page-head h1 { font-size: 42px; }
.page-head-sub { color: var(--color-neutral-700); margin: 0; }
.post { max-width: 820px; padding-top: 40px; }
.post-title { font-size: 48px; margin: 0 0 28px; max-width: 26ch; }
.prose { font-size: 18px; line-height: 1.68; color: var(--color-neutral-900); }
.prose > * { max-width: 68ch; }
.prose p { margin: 0 0 var(--space-6); text-wrap: pretty; }
.prose h2 { font-size: 30px; margin: 40px 0 12px; }
.prose h3 { font-size: 24px; margin: 32px 0 10px; }
.prose blockquote {
  margin: 32px 0; padding: 20px 26px; border: 0; border-radius: var(--radius-lg);
  background: var(--color-accent-2-100); color: var(--color-accent-2-900);
}
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 var(--space-6); }
.prose li { margin-bottom: 6px; }
.prose code { background: var(--color-neutral-200); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 0.9em; }
.prose pre { background: var(--color-neutral-900); color: var(--color-neutral-100); padding: 20px; border-radius: var(--radius-md); overflow: auto; max-width: 100%; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; height: 1px; background: var(--color-divider); margin: 40px 0; }

.fig { margin: 0 0 var(--space-8); max-width: 100%; }
.fig img { border-radius: var(--radius-lg); width: 100%; }
.fig figcaption { font-size: 13px; color: var(--color-neutral-700); margin-top: 10px; }
.fig.pull-left, .fig.pull-right { max-width: 100%; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0 0 var(--space-8); max-width: 100%; }
.gallery-item { display: block; }
.gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--radius-md); }
.gallery-item:hover img { filter: saturate(0.8) contrast(0.95) brightness(1.05); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px auto 64px; max-width: 820px; }
.post-nav-link {
  text-decoration: none; color: inherit; padding: 20px 24px; border-radius: var(--radius-lg);
  background: var(--color-neutral-100); border: 1px solid var(--color-divider); display: block;
}
.post-nav-link:hover { background: var(--color-surface); }
.post-nav-next { text-align: right; }
.post-nav-label { display: block; font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 6px; }
.post-nav-title { font-family: var(--font-heading); font-size: 18px; line-height: 1.2; }

.tag-cloud { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 64px; }

/* footer */
.site-foot { background: var(--color-accent-2-700); color: var(--color-accent-2-100); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 44px 0 28px; margin-top: 40px; }
.site-foot-inner { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.site-foot-id { flex: 1 1 300px; }
.site-foot-title { font-family: var(--font-heading); font-size: 24px; }
.site-foot-note { font-size: 14px; opacity: 0.85; margin-top: 4px; }
.site-foot-links { display: flex; gap: 10px; flex-wrap: wrap; }
.site-foot-legal { font-size: 12.5px; opacity: 0.7; margin-top: 28px; }

@media (max-width: 760px) {
  .brand-title { font-size: 32px; }
  .lead-photo { height: 240px; }
  .lead-title { font-size: 28px; }
  .post-title { font-size: 34px; }
  .page-head h1 { font-size: 32px; }
  .card-post { grid-template-columns: 1fr; gap: 16px; }
  .card-post-title { font-size: 22px; }
  .prose { font-size: 17px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; }
}