/* Grove: natural browns and greens. */

@font-face {
  font-family: "Nunito";
  font-weight: 700 800;
  font-display: swap;
  src: url("/fonts/nunito.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/nunito-sans.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/nunito-sans-italic.woff2") format("woff2");
}

:root {
  --bg: #efe8da;
  --paper: #faf6ee;
  --ink: #2f2a22;
  --muted: #6f6556;
  --moss: #4d6a37;
  --fern: #7d9b52;
  --bark: #8b5e3c;
  --clay: #b8703f;
  --line: #ddd2bf;
  --measure: 41rem;
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3C9 3 4 9 4 16c0 1.7.4 3.3 1 4.6l1.7-1C8.7 13.3 12.5 9.8 17 8c-3.8 2.4-7 6-8.6 10.9C9.5 19.6 10.9 20 12.5 20 19 20 21 12 20 3z'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  padding: 0 1rem;
  background:
    radial-gradient(ellipse at 0% 0%, rgb(125 155 82 / 0.22), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgb(184 112 63 / 0.14), transparent 50%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 1.0625rem/1.75 "Nunito Sans", system-ui, sans-serif;
}

.site-header, .site-footer { max-width: var(--measure); margin-inline: auto; }
.site-header { padding-block: 2rem 2.5rem; }

main {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(1.25rem, 5vw, 3rem);
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgb(47 42 34 / 0.06), 0 12px 32px rgb(47 42 34 / 0.08);
}

.site-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: 800 1.3rem "Nunito", sans-serif;
  color: var(--moss);
  text-decoration: none;
}
.site-name::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: var(--fern);
  mask: var(--leaf) center / contain no-repeat;
}

h1, h2, h3 { font-family: "Nunito", sans-serif; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 800; margin: 0 0 0.75rem; }
h2 { font-size: 1.55rem; font-weight: 800; color: var(--moss); margin: 2.75rem 0 1rem; }
h3 { font-size: 1.2rem; font-weight: 700; color: var(--bark); margin: 2rem 0 0.5rem; }

a { color: var(--moss); text-decoration-color: rgb(125 155 82 / 0.5); text-decoration-thickness: 0.1em; text-underline-offset: 0.2em; }
a:hover { color: var(--bark); text-decoration-color: var(--clay); text-decoration-style: wavy; }

img, video, iframe { display: block; max-width: 100%; height: auto; border-radius: 12px; }
img[style*="max-height"] { width: auto; }
p:has(> picture) { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
p:has(> picture) img { max-height: 28rem; object-fit: contain; box-shadow: 0 4px 14px rgb(47 42 34 / 0.15); }
p:has(> picture) + p > em:only-child { display: block; margin-top: -0.5rem; font-size: 0.9rem; color: var(--muted); }

.meta { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--clay); }
.excerpt { font-size: 1.25rem; font-style: italic; color: var(--muted); margin: 0.5rem 0 2rem; }

article header .excerpt { margin-bottom: 0; }
article header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 4px solid var(--fern);
  border-radius: 0 12px 12px 0;
  background: rgb(125 155 82 / 0.1);
}

table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; border-radius: 10px; }
th, td { line-height: 1.45; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--moss); color: var(--paper); font-family: "Nunito", sans-serif; }

.intro h1 { font-size: clamp(2.5rem, 9vw, 3.75rem); }
.intro p { font-size: 1.2rem; }

.writing h2 { display: flex; align-items: center; gap: 0.75rem; }
.writing h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.article-list { list-style: none; margin: 0; padding: 0; }
.article-list li { padding: 1rem 0; border-bottom: 1px dotted var(--line); }
.article-list li:last-child { border-bottom: 0; }
.article-list a { display: block; font: 800 1.25rem/1.3 "Nunito", sans-serif; text-decoration: none; }
.article-list time { font-size: 0.85rem; color: var(--clay); font-weight: 600; }
.article-list p { margin: 0.25rem 0 0; color: var(--muted); }

.site-footer { padding-block: 2rem 3rem; text-align: center; color: var(--muted); }

::selection { background: rgb(125 155 82 / 0.35); }