/* The Considered Move — writing section.
   Shared by /writing/ and every essay page. Palette block is copied from the
   landing page so the two stay in the same register; !important is required
   because the design-system stylesheet is injected at runtime by ds-base.js. */

:root {
  --color-bg: #f2ede1 !important;
  --color-surface: #e9e1cd !important;
  --color-text: #24261f !important;
  --color-accent: #4a6636 !important;
  --color-accent-2: #4a6636 !important;
  --color-divider: color-mix(in srgb, #24261f 40%, transparent) !important;

  --color-neutral-100: #f7f3e7 !important;
  --color-neutral-200: #ece5d2 !important;
  --color-neutral-300: #ddd3b8 !important;
  --color-neutral-400: #c2b696 !important;
  --color-neutral-500: #9c9174 !important;
  --color-neutral-600: #756c56 !important;
  --color-neutral-700: #55503e !important;
  --color-neutral-800: #38352a !important;
  --color-neutral-900: #221f19 !important;

  --color-accent-100: #eaf0e4 !important;
  --color-accent-200: #d3e0c8 !important;
  --color-accent-300: #b0c99c !important;
  --color-accent-400: #85a869 !important;
  --color-accent-500: #5f7d47 !important;
  --color-accent-600: #4a6636 !important;
  --color-accent-700: #3a5129 !important;
  --color-accent-800: #2c3f1f !important;
  --color-accent-900: #1f2e16 !important;

  --leading: 30px;
  --half: 15px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 66ch;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.column { max-width: var(--measure); }

.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav a.nav-brand { white-space: normal; }
.nav a[aria-current='page'] { color: var(--color-accent); }
@media (max-width: 560px) { .nav a:not(.nav-keep) { display: none; } }

.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* ---------- article ---------- */

.post-head { padding: calc(3 * var(--leading)) 0 calc(1.5 * var(--leading)); }
.post-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.06; letter-spacing: -0.02em;
  margin: 0; margin-left: -0.05em;
  max-width: 22ch;
}
.post-dek {
  font-size: 19px; line-height: var(--leading); max-width: var(--measure);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: var(--leading) 0 0;
}
.post-meta {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin: calc(1.5 * var(--leading)) 0 0;
}

.prose { padding: calc(1.5 * var(--leading)) 0 calc(2 * var(--leading)); max-width: var(--measure); }
.prose p { font-size: 18px; line-height: var(--leading); margin: 0 0 var(--leading); }
.prose p.lede { font-size: 20px; }
.prose h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.16; letter-spacing: -0.015em;
  margin: calc(2 * var(--leading)) 0 var(--leading);
  max-width: 26ch;
}
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }
.prose a { color: var(--color-accent-700); text-underline-offset: 3px; }

.prose ol, .prose ul { margin: 0 0 var(--leading); padding-left: 0; list-style: none; }
.prose ol li, .prose ul li {
  font-size: 18px; line-height: var(--leading);
  padding: var(--half) 0 var(--half) 34px; position: relative;
}
.prose ol { counter-reset: item; }
.prose ol li::before {
  counter-increment: item; content: counter(item);
  position: absolute; left: 0; top: var(--half);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: var(--leading); color: var(--color-accent);
  font-feature-settings: "tnum" 1;
}
.prose ul li::before {
  content: ""; position: absolute; left: 2px; top: calc(var(--half) + 12px);
  width: 8px; height: 8px; background: var(--color-accent);
}
.prose ol li + li, .prose ul li + li { border-top: 2px solid var(--color-divider); }

.prose .swap { margin: 0 0 var(--leading); }
.prose .swap li { padding-left: 34px; }
.prose .swap li::before { top: calc(var(--half) + 12px); }

.prose hr { height: 2px; border: 0; background: var(--color-divider); margin: calc(2 * var(--leading)) 0; }

/* ---------- closing card ---------- */

.endnote {
  background: var(--color-surface);
  padding: calc(1.5 * var(--leading)) clamp(20px, 4vw, 48px);
  margin: calc(1.5 * var(--leading)) 0 calc(3 * var(--leading));
  max-width: var(--measure);
}
.endnote p { font-size: 17px; line-height: var(--leading); margin: 0 0 var(--leading); }
.endnote p:last-of-type { margin-bottom: 0; }
.endnote .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* ---------- index ---------- */

.index-head { padding: calc(3 * var(--leading)) 0 calc(1.5 * var(--leading)); }
.index-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.02em;
  margin: 0; margin-left: -0.05em;
}
.index-sub {
  font-size: 18px; line-height: var(--leading); max-width: var(--measure);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: var(--leading) 0 0;
}
.entries { padding: 0 0 calc(3 * var(--leading)); }
.entry {
  display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr);
  gap: var(--half) clamp(24px, 4vw, 64px); align-items: baseline;
  padding: calc(1.5 * var(--leading)) 0;
  border-top: 2px solid var(--color-divider);
}
.entry-date {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  font-feature-settings: "tnum" 1; margin: 0;
}
.entry-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.18; letter-spacing: -0.015em;
  margin: 0; max-width: 28ch;
}
.entry-title a { color: var(--color-text); text-decoration: none; }
.entry-title a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.entry-dek {
  font-size: 17px; line-height: var(--leading); max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
  margin: var(--half) 0 0;
}
@media (max-width: 720px) {
  .entry { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */

footer { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); border-top: 2px solid var(--color-divider); }
footer p { font-size: 13.5px; line-height: var(--half); margin: 0 0 var(--half); }
footer .legal {
  max-width: 88ch;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin-bottom: var(--leading);
}