/* inkline — hand-drawn-ink brand theme.
   The whole page obeys the brand's "one pen" rule: everything is black ink
   on warm paper, plus one orange pen used sparingly. Orange has two values
   because WCAG does: --accent for decorative strokes (squiggle, borders),
   --accent-text (darker) wherever orange has to be read as text. */

:root {
  --paper: #f7f1e4;
  --ink: #211d17;
  --ink-soft: #4a443a;
  --muted: #6e6557;
  --accent: #d9731d;
  --accent-text: #a8500a;
  --accent-soft: rgba(217, 115, 29, 0.14);
  --border: rgba(33, 29, 23, 0.16);
  --code-bg: rgba(33, 29, 23, 0.055);
  /* Dark ink for text sitting on an orange fill (submit button); the orange
     is bright enough in both themes that this stays legible, so it is not
     overridden in dark mode. */
  --on-accent: #241f18;

  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: -apple-system, "Segoe UI", system-ui, sans-serif;

  --squiggle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='14' viewBox='0 0 34 14'><path d='M1 7 C 6 1, 11 13, 17 7 S 28 1, 33 7' fill='none' stroke='%23d9731d' stroke-width='2' stroke-linecap='round'/></svg>");
  --hero-shadow:
    0 0.5px 1px rgba(33, 29, 23, 0.18),
    0 2px 3px -1px rgba(33, 29, 23, 0.14),
    0 5px 9px -3px rgba(33, 29, 23, 0.13),
    0 12px 22px -6px rgba(33, 29, 23, 0.16),
    0 22px 40px -12px rgba(33, 29, 23, 0.14);
  --avatar-shadow: 0 3px 8px -2px rgba(33, 29, 23, 0.22), 0 1px 2px rgba(33, 29, 23, 0.12);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #221f1a;
    --ink: #f2ece0;
    --ink-soft: #cbc3b4;
    --muted: #9a9081;
    --accent: #e2853a;
    --accent-text: #e2853a;
    --accent-soft: rgba(226, 133, 58, 0.18);
    --border: rgba(242, 236, 224, 0.18);
    --code-bg: rgba(242, 236, 224, 0.07);
    --squiggle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='14' viewBox='0 0 34 14'><path d='M1 7 C 6 1, 11 13, 17 7 S 28 1, 33 7' fill='none' stroke='%23e2853a' stroke-width='2' stroke-linecap='round'/></svg>");
    --hero-shadow:
      0 0.5px 1px rgba(0, 0, 0, 0.4),
      0 2px 3px -1px rgba(0, 0, 0, 0.32),
      0 5px 9px -3px rgba(0, 0, 0, 0.3),
      0 12px 22px -6px rgba(0, 0, 0, 0.34),
      0 22px 40px -12px rgba(0, 0, 0, 0.3);
    --avatar-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Pushes the footer to the bottom on pages shorter than the viewport. */
main {
  flex: 1;
}

/* Paper grain — self-contained SVG noise, no external asset. Multiply
   darkens on light paper; screen lightens on dark paper. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

@media (prefers-color-scheme: dark) {
  body::before {
    mix-blend-mode: screen;
    opacity: 0.045;
  }
}

::selection {
  background: var(--accent-soft);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: color 0.12s ease;
}

a:hover {
  color: var(--accent-text);
  text-decoration-color: var(--accent);
  text-decoration-style: wavy;
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.wrap {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Header — no rule line; whitespace does the separating. */
.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 2.25rem;
}

.site-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.site-title .dot {
  color: var(--accent);
}

.site-nav a {
  margin-left: 1.4rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:first-child {
  margin-left: 0;
}

.site-nav a:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* The squiggle — one stroke of the orange pen, used as every divider. */
.squiggle {
  border: none;
  height: 14px;
  margin: 1rem 0 2rem;
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 34px 14px;
  background-image: var(--squiggle);
  opacity: 0.85;
}

.squiggle--sign {
  width: 110px;
  margin: 0 0 1.1rem;
}

main {
  padding: 1.5rem 0 4rem;
}

main h1 {
  font-size: 1.9rem;
  margin: 1.5rem 0 0.5rem;
}

/* Home intro — a small drawn portrait pinned beside the opening lines,
   in the same "photo on paper" language as the post heroes. */
.home-intro {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.home-avatar {
  flex: none;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: var(--avatar-shadow);
  background: var(--paper);
}

.home-intro-text > :first-child {
  margin-top: 0;
}

@media (max-width: 640px) {
  .home-intro {
    gap: 1.1rem;
  }

  .home-avatar {
    width: 88px;
    height: 88px;
  }
}

/* Post list — dates hang in the left margin like marginalia when the
   viewport allows; otherwise they sit above the title. */
.post-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.post-list li + li {
  margin-top: 2.4rem;
}

.post-date {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
}

.post-item-title {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 0.25rem;
}

.post-item-title a {
  text-decoration: none;
  color: var(--ink);
}

.post-item-title a:hover {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent);
}

.post-item-summary {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

@media (min-width: 1000px) {
  .post-list li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    column-gap: 1.25rem;
    margin-left: -7.75rem;
    align-items: baseline;
  }

  .post-date {
    text-align: right;
    white-space: nowrap;
  }
}

.all-posts {
  margin-top: 2.5rem;
  font-style: italic;
}

/* Single post */
/* Tilt comes per-post from single.html, hashed from the permalink, so each
   post's hero settles at its own angle between -0.7 and 0.7 degrees. */
.post-hero {
  width: 100%;
  display: block;
  margin: 0.75rem 0 2rem;
  transform: rotate(var(--tilt, -0.4deg));
  border-radius: 3px;
  border: 1px solid var(--border);
  box-shadow: var(--hero-shadow);
  background: var(--paper);
}

.post-title {
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 1.25rem 0 0.25rem;
}

.post-meta {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
}

.post-content h2 {
  font-size: 1.45rem;
  margin: 2.5rem 0 0.75rem;
}

.post-content h3 {
  font-size: 1.2rem;
  margin: 2rem 0 0.5rem;
}

.post-content blockquote {
  margin: 1.6rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--ink-soft);
}

.post-content img {
  max-width: 100%;
  border-radius: 10px 16px 8px 18px / 16px 8px 18px 10px;
}

.filed-under {
  margin-top: 3rem;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
}

.filed-under a {
  color: inherit;
}

/* Code — set in the same two pens as everything else: black ink for
   structure, the orange pen only for literals. See chroma rules below. */
code {
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}

:not(pre) > code {
  background: var(--code-bg);
  padding: 0.12em 0.38em;
  border-radius: 5px 8px 5px 9px / 8px 5px 9px 5px;
  font-size: 0.88em;
}

pre {
  background: var(--code-bg);
  border-radius: 8px 14px 8px 16px / 14px 8px 16px 8px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 1.5rem 0;
}

.highlight {
  margin: 1.5rem 0;
}

.highlight pre {
  margin: 0;
}

.chroma .c, .chroma .c1, .chroma .cm, .chroma .ch,
.chroma .cs, .chroma .cp, .chroma .cpf,
.chroma .gp {
  color: var(--muted);
  font-style: italic;
}

.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
.chroma .kp, .chroma .kr, .chroma .kt, .chroma .nt {
  color: var(--ink);
  font-weight: 600;
}

.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl,
.chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si,
.chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss,
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
.chroma .mi, .chroma .il, .chroma .mo {
  color: var(--accent-text);
}

.chroma .nf, .chroma .fm {
  color: var(--ink);
}

/* Tags index */
.term-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.term-list li + li {
  margin-top: 0.9rem;
}

.term-list a {
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--ink);
}

.term-list a:hover {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent);
}

.term-count {
  margin-left: 0.5rem;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Footer */
.site-footer {
  margin-top: 2rem;
  padding: 1rem 0 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--muted);
}

.site-footer p {
  margin: 0.3rem 0;
}

.site-footer a {
  color: inherit;
}

.social-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0.6rem 0 0.3rem;
  padding: 0;
  list-style: none;
}

.social-row a {
  display: inline-flex;
  color: var(--muted);
  transition: color 0.12s ease;
}

.social-row a:hover {
  color: var(--accent-text);
}

.social-row svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Contact form */
.contact-form {
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-form label span {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 6px 9px 6px 10px / 9px 6px 10px 6px;
  padding: 0.6rem 0.75rem;
  line-height: 1.5;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.contact-form button {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 7px 11px 7px 12px / 11px 7px 12px 7px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.contact-form button:hover {
  filter: brightness(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .contact-form button {
    transition: none;
  }
}