:root {
        --bg: #fbf9f4;
        --surface: #fffdf8;
        --panel: #f4efe4;
        --text: #18211b;
        --muted: #667067;
        --line: #ddd6c8;
        --accent: #176957;
        --accent-strong: #123f34;
        --button-text: #f9faf8;
        --footer: #123f34;
      }

      * {
        box-sizing: border-box;
      }

      html {
        color-scheme: light;
      }

      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        background:
          radial-gradient(circle at top right, rgba(216, 239, 119, 0.11), transparent 24%),
          radial-gradient(circle at top left, rgba(225, 238, 232, 0.68), transparent 24%),
          var(--bg);
        color: var(--text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        line-height: 1.55;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .topbar {
        border-bottom: 1px solid var(--line);
        background: rgba(251, 249, 244, 0.9);
        backdrop-filter: blur(18px);
      }

      .page {
        width: min(720px, calc(100% - 34px));
        margin: 0 auto;
        padding: 10px 0 20px;
      }

      main.page {
        flex: 1;
      }

      .header {
        display: flex;
        align-items: center;
        gap: 24px;
        min-height: 88px;
      }

      .wordmark,
      .wordmark-inline {
        display: inline-flex;
        align-items: baseline;
        gap: 0;
        white-space: nowrap;
        letter-spacing: -0.04em;
      }

      .wordmark {
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.01em;
      }

      .brand-lockup {
        display: inline-flex;
        align-items: center;
        gap: 0;
      }

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

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

      .header-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 26px;
        color: var(--muted);
        font-size: 15px;
        margin-left: auto;
      }

      .header-nav a:hover,
      .email-button:hover {
        opacity: 0.92;
      }

      h1,
      h2,
      h3,
      p,
      dd {
        margin: 0;
      }

      h1 {
        font-size: clamp(2.2rem, 6vw, 3.4rem);
        font-weight: 600;
        letter-spacing: -0.045em;
        line-height: 1.02;
      }

      h2 {
        margin-top: 28px;
        font-size: 1.45rem;
        font-weight: 650;
        letter-spacing: -0.03em;
      }

      .section-heading {
        max-width: none;
      }

      .intro {
        max-width: none;
        margin-top: 0;
        color: var(--muted);
        font-size: 1.03rem;
        line-height: 1.58;
        letter-spacing: -0.01em;
      }

      .intro-wrap h1 + .intro {
        margin-top: 16px;
      }

      .intro-wrap {
        padding: 4px 0 0;
      }

      .email-button {
        max-width: 100%;
        overflow-wrap: anywhere;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 18px;
        border-radius: 8px;
        background: var(--accent);
        color: var(--button-text);
        font-weight: 700;
      }

      .topics {
        margin-top: 12px;
      }

      .topic-row {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 0 20px;
        align-items: start;
        padding: 10px 0;
        border-top: 1px solid var(--line);
      }

      .topic-meta {
        display: grid;
        gap: 0;
        align-self: start;
      }

      .topic-title {
        font-size: 17px;
        font-weight: 700;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        letter-spacing: -0.02em;
        line-height: 1.12;
      }

      .topic-time {
        color: var(--muted);
        font-size: 13px;
        font-weight: 400;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        line-height: 1.2;
      }

      .topic-description {
        max-width: 60ch;
        color: var(--muted);
        align-self: start;
        font-size: 1.03rem;
        line-height: 1.58;
        letter-spacing: -0.01em;
      }

      .muted-panel {
        margin-top: 18px;
        padding: 14px 16px;
        border-radius: 10px;
        background: #dff3a3;
        border: 1px solid rgba(126, 153, 31, 0.34);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
      }

      .muted-panel p {
        color: #314025;
      }

      .footer {
        margin: 28px 0 0;
        padding: 32px 0;
        background: var(--footer);
        color: rgba(255, 255, 255, 0.92);
      }

      .footer-inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
      }

      .brand-lockup.brand-lockup-inverse .brand-ink {
        color: rgba(255, 255, 255, 0.92);
      }

      .brand-lockup.brand-lockup-inverse .brand-accent {
        color: #d7f04a;
      }

      .footer-copy {
        margin-top: 14px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.95rem;
      }

      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        justify-content: flex-end;
        color: rgba(255, 255, 255, 0.92);
      }

      .footer-links a:hover {
        color: #d7f04a;
      }

      @media (max-width: 640px) {
        .page {
          width: min(720px, calc(100% - 26px));
          padding-top: 8px;
          padding-bottom: 18px;
        }

        .header {
          align-items: flex-start;
          flex-direction: column;
          gap: 12px;
          min-height: auto;
          padding: 14px 0;
        }

        .intro {
          max-width: none;
        }

        .footer {
          padding: 28px 0;
        }

        .footer-inner {
          align-items: flex-start;
          flex-direction: column;
        }

        .footer-links {
          gap: 14px;
          justify-content: flex-start;
        }
      }

      @media (max-width: 640px) {
        .topic-row {
          grid-template-columns: 1fr;
          gap: 0;
        }

        .topic-description {
          margin-top: 6px;
        }
      }