:root {
      color-scheme: light;
      --bg: #fcfbf7;
      --text: #233129;
      --muted: #6d776f;
      --line: #e6e6df;
      --accent: #6b8c56;
      --accent-soft: #e7efe0;
      --link: #315b36;
      --link-hover: #244428;
      --sans: "Cabin", sans-serif;
      --serif: "Cabin", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 16px/1.68 var(--serif);
      -webkit-font-smoothing: antialiased;
    }

    .wrap {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 24px;
    }

    header {
      padding: 34px 0 10px;
    }

    .brand {
      text-decoration: none;
      color: var(--text);
      font: 700 clamp(28px, 6vw, 34px)/1 var(--sans);
      letter-spacing: -0.035em;
      display: inline-block;
      margin-bottom: 28px;
    }

    .brand .accent { color: var(--accent); }
    .brand .dot { color: var(--text); }

    main {
      padding-bottom: 90px;
    }

    .intro {
      max-width: 620px;
      margin-bottom: 34px;
    }

    p {
      margin: 0 0 16px;
    }

    .intro p {
      font-size: 16px;
      line-height: 1.62;
    }

    a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    a:hover {
      color: var(--link-hover);
    }

    .subscribe-box {
      margin: 0 0 46px;
      padding: 18px 18px 16px;
      background: var(--accent-soft);
      border: 1px solid #d7e1cf;
      border-radius: 8px;
    }

    .subscribe-label {
      font: 12px/1.3 var(--sans);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      font-weight: 700;
      margin: 0 0 8px;
    }

    .subscribe-copy {
      font-size: 16px;
      margin-bottom: 12px;
      color: #3d4a40;
    }

    .subscribe {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 0 0 8px;
    }

    input {
      min-width: 0;
      width: 280px;
      padding: 12px 13px;
      border: 1px solid #c3cec0;
      border-radius: 4px;
      background: #fff;
      color: var(--text);
      font: 15px var(--sans);
    }

    input:focus {
      outline: 2px solid #d2e0c9;
      outline-offset: 1px;
      border-color: var(--accent);
    }

    button {
      padding: 12px 16px;
      border: 1px solid var(--accent);
      border-radius: 4px;
      background: var(--accent);
      color: #fff;
      font: 15px var(--sans);
      cursor: pointer;
    }

    button:hover {
      background: #5f7d4d;
      border-color: #5f7d4d;
    }

    .small {
      font: 13px/1.6 var(--sans);
      color: var(--muted);
      margin: 0;
    }

    .section-title {
      font: 12px/1.3 var(--sans);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--muted);
      margin: 0 0 16px;
    }

    .post-list {
      list-style: none;
      margin: 0;
      padding: 0;
      border-top: 1px solid var(--line);
    }

    .post-list li {
      display: flex;
      gap: 22px;
      padding: 14px 0;
      align-items: baseline;
      border-bottom: 1px solid var(--line);
    }

    .date {
      width: 108px;
      flex: 0 0 108px;
      color: var(--muted);
      font: 13px var(--sans);
      white-space: nowrap;
    }

    .post-link {
      font-size: 16px;
      text-decoration: none;
      color: var(--text);
    }

    .post-link:hover {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    footer {
      padding-top: 20px;
      margin-top: 42px;
      font: 13px/1.6 var(--sans);
      color: var(--muted);
    }

    footer a {
      color: var(--muted);
    }

    @media (max-width: 560px) {
      body { font-size: 16px; }
      header { padding-top: 26px; }
      .brand { margin-bottom: 24px; }
      .intro p { font-size: 16px; }
      .subscribe { flex-wrap: wrap; }
      input { flex: 1 1 210px; width: 100%; }
      .post-list li {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
      }
      .date {
        width: auto;
        flex: auto;
      }
    }
  
/* Individual articles */
.back-link { font: 14px var(--sans); display: inline-block; margin: 14px 0 24px; }
.article-title { font: bold clamp(30px, 5vw, 43px)/1.2 var(--serif); letter-spacing: -.025em; margin: 0 0 8px; }
.article-date { font: 13px var(--sans); color: var(--muted); margin-bottom: 34px; }
.article-content { line-height: 1.78; }
.article-content h2 { font-size: 26px; line-height: 1.3; margin-top: 32px; }
.article-content img { display: block; max-width: min(100%, 420px); width: auto; height: auto; margin: 24px auto; }
.article-content blockquote { margin: 25px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--accent); }
.article-content pre { overflow-x: auto; padding: 14px; background: #f1f1eb; font-size: 14px; }
.article-content code { overflow-wrap: anywhere; }

/* Post descriptions and cover images */
.post-summary { min-width: 0; }
.post-subtitle { margin: 3px 0 0; font: 15px/1.5 var(--sans); color: var(--muted); }
.article-subtitle { font: 16px/1.5 var(--sans); color: var(--muted); margin: 0 0 12px; }
.featured-image { display: block; width: 100%; height: auto; margin: 0 0 30px; border-radius: 4px; }