/* Zack Richardson — /writing. Loaded after site.css (tokens, font, topbar, footer).
   Long-form reading: a ~65ch measure, no scroll-linked anything, no JS at all.
   Pages are generated by build.py; ?v= on this file is its content hash, so no manual bump. */

.writing-page { --prose: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem); }
.writing-page ::selection { background: var(--sodium); color: var(--ink); }
.writing-page { min-height: 100svh; display: flex; flex-direction: column; }
.writing-page main { flex: 1; padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(64px, 10vw, 128px); }
nav a[aria-current="page"] { color: var(--sodium); }

/* ---------- A post ---------- */
.post { max-width: 46rem; margin: 0 auto; }
.post-head { margin-bottom: clamp(36px, 6vw, 64px); }
.post-meta {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 22px; max-width: none;
}
.post-meta a { color: var(--sodium); text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-title {
  font-size: clamp(2.3rem, 1.3rem + 4.4vw, 4.4rem);
  font-stretch: 118%; font-weight: 850; line-height: 0.98; letter-spacing: -0.025em;
  max-width: 16ch;
}
.post-dek {
  margin: 24px 0 0; max-width: 36em;
  font-size: var(--step-1); line-height: 1.45; color: var(--mute);
  padding-top: 22px; border-top: 4px solid var(--sodium); border-image: linear-gradient(90deg, var(--sodium) 72px, var(--line) 72px) 1;
}

.draft-banner {
  margin: 0 0 24px; padding: 10px 14px; max-width: none;
  border: 2px dashed var(--sodium); border-radius: 6px;
  font-size: var(--step--1); color: var(--fog);
}
.draft-banner b { color: var(--sodium); }

/* The measure: ch is relative to the prose size, so this stays ~65 characters per line. */
.prose { max-width: 65ch; font-size: var(--prose); line-height: 1.72; color: #d3dee1; }
.prose p { max-width: none; margin: 0 0 1.3em; hanging-punctuation: first; text-wrap: pretty; }
.prose > p:first-child { font-size: 1.12em; line-height: 1.62; color: var(--fog); }
.prose > :last-child::after {   /* end mark */
  content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-left: 0.45em;
  background: var(--sodium); border-radius: 1px;
}
.prose h2, .prose h3 { color: var(--fog); scroll-margin-top: calc(var(--bar) + 16px); }
.prose h2 {
  font-size: var(--step-2); font-stretch: 112%; font-weight: 800; line-height: 1.12;
  margin: 2.2em 0 0.75em;
}
.prose h2::before {
  content: ""; display: block; width: 40px; height: 4px; margin-bottom: 0.7em; background: var(--sodium);
}
.prose h3 { font-size: var(--step-1); font-weight: 800; line-height: 1.25; margin: 1.8em 0 0.5em; }
.prose em { font-style: italic; }
.prose strong { color: var(--fog); font-weight: 750; }
.prose a { color: var(--fog); text-decoration-color: var(--sodium); }
.prose a:hover { color: var(--sodium); }
.prose blockquote {
  margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 4px solid var(--sodium);
  font-size: 1.08em; color: var(--fog);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--sodium); }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--ink-2); padding: 0.1em 0.35em; border-radius: 4px; }
.prose pre { overflow-x: auto; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; line-height: 1.5; }
.prose pre code { background: none; padding: 0; font-size: 0.86em; }
.prose figure { margin: 2em 0; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.prose figcaption { margin-top: 0.6em; font-size: var(--step--1); color: var(--mute); }

.post-foot {
  max-width: 65ch; margin-top: clamp(48px, 7vw, 80px); padding-top: 24px;
  border-top: 1px solid var(--line); font-size: var(--step--1);
}
.post-sign { color: var(--mute); }
.post-links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 700; margin: 0; }
.post-links a { text-decoration-color: var(--sodium); }

/* ---------- The index ---------- */
.writing-index { max-width: 46rem; margin: 0 auto; }
.index-head { margin-bottom: clamp(32px, 6vw, 64px); }
.index-title { font-size: var(--step-4); font-stretch: 125%; font-weight: 850; line-height: 0.94; letter-spacing: -0.03em; }
.index-dek { margin: 20px 0 0; font-size: var(--step-1); color: var(--mute); }
.index-dek a { color: var(--fog); text-decoration-color: var(--sodium); }
.entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.entry a {
  display: grid; gap: 8px; padding: clamp(22px, 4vw, 32px) 0;
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.entry-meta { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.entry-title { font-size: var(--step-2); font-stretch: 112%; font-weight: 800; line-height: 1.1; text-wrap: balance; }
.entry-dek { color: #b9c8cd; max-width: 60ch; }
.entry a:hover .entry-title { text-decoration: underline; text-decoration-color: var(--sodium); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.entries-empty { color: var(--mute); padding-top: 24px; border-top: 1px solid var(--line); max-width: none; }

@media print {
  .topbar, .skip, .footer, .post-links, .draft-banner { display: none; }
  .writing-page, .writing-page main { background: #fff; color: #000; padding: 0; }
  .prose, .prose > p:first-child, .post-title, .prose h2 { color: #000; }
  .post-dek, .post-meta { color: #333; }
}