/* -------- tokens -------- */
:root {
  --bg: #faf8f3;
  --ink: #1c1a17;
  --muted: #6b665d;
  --rule: #d9d3c4;
  --accent: #6b4a16;
  --accent-hover: #3f2b0a;
  --max: 40rem;
  --wide: 64rem;

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", "Palatino",
           Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
           "Liberation Mono", monospace;
}

/* -------- base -------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2em 0 0.5em;
}
h1 { font-size: 2.25rem; margin-top: 0; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p, ul, ol, blockquote, pre { margin: 0 0 1.1em; }

blockquote {
  border-left: 2px solid var(--rule);
  padding: 0 1em;
  color: var(--muted);
  font-style: italic;
}

code, pre, kbd, samp { font-family: var(--mono); font-size: 0.92em; }
code {
  background: rgba(107, 74, 22, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
pre {
  background: #1c1a17;
  color: #f5efe1;
  padding: 1em 1.1em;
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: transparent; padding: 0; color: inherit; }

/* Rouge (Jekyll) syntax highlighting — warm dark theme.
   Rouge wraps fenced blocks as <figure class="highlight"><pre><code>. */
figure.highlight { margin: 0 0 1.1em; }
figure.highlight pre { margin: 0; }
.highlight .c, .highlight .c1, .highlight .cm,
.highlight .cp, .highlight .cs { color: #8a7e6b; font-style: italic; } /* comment */
.highlight .k, .highlight .kd, .highlight .kv, .highlight .kr,
.highlight .kn { color: #d6a95e; }                                   /* keyword */
.highlight .kp                                     { color: #d6a95e; font-style: italic; } /* true/false/nil */
.highlight .s, .highlight .s1, .highlight .s2,
.highlight .sr, .highlight .sb, .highlight .sx,
.highlight .sd, .highlight .se                     { color: #a8c27a; } /* string */
.highlight .ss                                     { color: #e0b988; } /* symbol */
.highlight .mi, .highlight .mf, .highlight .mh,
.highlight .mo, .highlight .il                     { color: #d6a95e; } /* number */
.highlight .nc, .highlight .no                     { color: #eacf7c; } /* class / constant */
.highlight .nf, .highlight .fm                     { color: #e8dcc0; } /* method def / call */
.highlight .nb                                     { color: #d6a95e; } /* builtin */
.highlight .bp                                     { color: #d6a95e; font-style: italic; } /* self */
.highlight .vi, .highlight .vg, .highlight .vc     { color: #a8c6b4; } /* @var, @@var, $var */
.highlight .o, .highlight .ow                      { color: #d6a95e; } /* operator */
.highlight .p                                      { color: #cfc6b3; } /* punctuation */
.highlight .err                                    { color: #e07a6b; } /* lex error */

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2em 0;
}

img { max-width: 100%; height: auto; }

/* Block-level media (direct children of content sections) fills the
   containing block. Inline images inside a paragraph keep natural size. */
section > img, section > video,
section > p > img:only-child, section > p > video:only-child,
.article > img, .article > video,
.article > p > img:only-child, .article > p > video:only-child {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.5em 0;
}

/* Generic section rhythm: sections form a centered column capped at
   the content width; elements inside run tighter than the gap
   between sections. Specific classes (.hero, .intro, .aside) can
   still override individual properties. */
section {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.1em;
}
section > * {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
section > *:first-child { margin-top: 0; }
section > *:last-child  { margin-bottom: 0; }

/* -------- layout chrome -------- */
.site-header,
.site-main,
.site-footer {
  /* Inner content width lands at --max once the 1.5rem × 2 padding
     is deducted — chrome and content align in one centered column. */
  max-width: calc(var(--max) + 3rem);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}

.site-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

.site-nav a {
  margin-left: 1.25rem;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.92rem;
}
.site-nav a:first-child { margin-left: 0; }
.site-nav a:hover { color: var(--ink); }

.site-footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.88rem;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer .sep { margin: 0 0.5em; }

/* -------- home -------- */
.hero {
  max-width: var(--max);
  padding: 2rem 0 1rem;
}
.hero h1 {
  font-size: 3rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.hero .tagline {
  font-size: 1.25rem;
  color: var(--muted);
  margin: 0;
}
.hero .example {
  margin-top: 1.5rem;
}
.hero .example figure.highlight pre {
  font-size: 0.88rem;
}

.intro, .aside {
  max-width: var(--max);
  margin-top: 2rem;
}

.cta {
  margin-top: 1.5rem;
  font-family: var(--sans);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cta a {
  display: inline-block;
  padding: 0.55em 1em;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  background: transparent;
  text-decoration: none;
}
.cta a:hover {
  background: var(--accent);
  color: #faf8f3;
}
.cta a.primary {
  background: var(--accent);
  color: #faf8f3;
}
.cta a.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #faf8f3;
}

.aside {
  margin-top: 3rem;
}
.aside h2 { margin-top: 0; font-size: 1.1rem; color: var(--muted); font-weight: 500; }

/* -------- article -------- */
.article {
  max-width: var(--max);
  margin: 0 auto;
}
.article h1:first-child,
.article h2:first-child { margin-top: 0; }
.article p { hyphens: auto; }

/* -------- small screens -------- */
@media (max-width: 36rem) {
  body { font-size: 17px; }
  .hero h1 { font-size: 2.25rem; }
  .site-header { padding-top: 1.25rem; }
  .site-nav a { margin-left: 1rem; }
  .cta { flex-direction: column; align-items: stretch; }
  .cta a { text-align: center; }
}