/* Writing pages: the blog index, a blog entry, and any standing page in
   src/content/pages. The same shell as the legal pages — header band, a
   reading column of about seventy characters, ink footer band — and the same
   four type tiers. Rules, never boxes; no cards, no images, no ornament. */

.prose {
  /* About sixty-eight characters at the body tier, as on the legal pages. */
  --measure: 59ch;
  --trim-h1: calc((var(--lh-h1) - var(--fs-h1)) / 2 + var(--fs-h1) * var(--cap-gap));

  background: var(--ground);
  color: var(--ink);
}

.prose-shell {
  padding-block: calc(var(--cell) * 2.5) calc(var(--cell) * 4);
}

/* The column. Everything on a writing page stands in it, so every hairline
   starts and ends on the same two verticals. */
.prose-column {
  max-width: var(--measure);
}

/* The index carries a date beside each title, so it runs a little wider. */
.prose-column--wide {
  max-width: calc(var(--measure) + 12ch);
}

/* The head: the title, then one quiet line saying who wrote it and when,
   under a hairline. Nothing else stands between the reader and the text. */
.prose-head {
  padding-bottom: calc(var(--cell) * 1);
  margin-bottom: calc(var(--cell) * 1.5);
  border-bottom: 1px solid var(--rule);
}

.prose-head h1 {
  margin: calc(var(--trim-h1) * -1) 0 var(--trim-h1);
  max-width: 20ch;
  color: var(--ink);
  font-size: var(--fs-h1);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  line-height: var(--lh-h1);
}

/* Under the title: the author's name, and under that the date. Two quiet
   lines, the name a shade stronger. */
.prose-byline {
  margin: calc(var(--cell) * 0.5) 0 0;
  color: var(--ink-quiet);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: var(--lh-label);
}

.prose-byline__author,
.prose-byline__date {
  display: block;
}

.prose-byline__author {
  color: var(--ink);
}

.prose-byline__author + .prose-byline__date {
  margin-top: 4px;
}

.prose-lede {
  margin: calc(var(--cell) * 0.5) 0 0;
  color: var(--ink);
  font-size: var(--fs-ask);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: var(--lh-ask);
}

/* The reading column ---------------------------------------------------- */

.prose-content > :first-child {
  margin-top: 0;
}

.prose-content > :last-child {
  margin-bottom: 0;
}

.prose-content h2 {
  margin: calc(var(--cell) * 1.5) 0 calc(var(--cell) * 0.75);
  color: var(--ink);
  font-size: var(--fs-ask);
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: -0.018em;
  line-height: var(--lh-ask);
}

.prose-content h3 {
  margin: calc(var(--cell) * 1) 0 calc(var(--cell) * 0.25);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  font-stretch: 104%;
  line-height: var(--lh-body);
}

.prose-content p,
.prose-content li {
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose-content p {
  margin: 0 0 calc(var(--cell) * 0.75);
}

.prose-content ul,
.prose-content ol {
  margin: calc(var(--cell) * 0.5) 0 calc(var(--cell) * 0.75);
  padding-left: 22px;
}

.prose-content li + li {
  margin-top: calc(var(--cell) * 0.4);
}

.prose-content strong {
  font-weight: 600;
}

.prose-content blockquote {
  margin: calc(var(--cell) * 0.75) 0;
  padding-left: calc(var(--cell) * 0.6);
  border-left: 1px solid var(--ink);
}

.prose-content hr {
  height: 0;
  margin: calc(var(--cell) * 1.5) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.prose-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

.prose-content pre {
  overflow-x: auto;
  margin: calc(var(--cell) * 0.75) 0;
  padding: calc(var(--cell) * 0.6);
  background: var(--ground-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

/* The same link treatment the legal pages use: ink, ruled underline, warm the
   moment a hand or a keyboard is on it. */
.prose-page a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}

.prose-page a:is(:hover, :focus-visible) {
  color: var(--human-ink);
  text-decoration-color: var(--human-ink);
}

/* Calendar links use the same button treatment as the form's submit button. */
.prose-page a.cta {
  color: var(--on-human);
  text-decoration: none;
}

.prose-page a.cta:is(:hover, :focus-visible) {
  color: var(--on-human-hover);
}

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

.prose-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.prose-list li {
  padding-block: calc(var(--cell) * 0.75);
  border-top: 1px solid var(--rule);
}

.prose-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.prose-entry {
  display: grid;
  grid-template-columns: 11ch minmax(0, 1fr);
  gap: calc(var(--cell) * 0.5);
  align-items: baseline;
}

.prose-entry time {
  color: var(--ink-quiet);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: var(--lh-body);
}

.prose-entry :is(h2, h3) {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-ask);
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: -0.018em;
  line-height: var(--lh-ask);
}

/* A 44px target that does not push the title off its line. */
.prose-entry :is(h2, h3) a {
  display: inline-block;
  padding-block: 6px;
  margin-block: -6px;
}

.prose-entry p {
  margin: calc(var(--cell) * 0.1) 0 0;
  color: var(--ink-quiet);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose-empty {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose-feed {
  margin: calc(var(--cell) * 1.5) 0 0;
  padding-top: calc(var(--cell) * 0.75);
  border-top: 1px solid var(--rule);
  color: var(--ink-quiet);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  line-height: var(--lh-label);
}

/* A 44px target on a 20px line, taken out of the flow again so the line keeps
   its place: the same trick the footer's links use. */
.prose-feed a,
.prose-back a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

.prose-back {
  margin: calc(var(--cell) * 1.5) 0 0;
  padding-top: calc(var(--cell) * 0.5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  line-height: var(--lh-label);
}

/* A page that has not shipped yet, shown only on the dev server. */
.prose-draft {
  margin: 0 0 calc(var(--cell) * 1.5);
  padding-left: calc(var(--cell) * 0.6);
  border-left: 1px solid var(--human-ink);
  color: var(--ink-quiet);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  line-height: var(--lh-label);
}

@media (max-width: 560px) {
  .prose-head h1 {
    max-width: none;
  }

  .prose-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--cell) * 0.15);
  }
}

/* The author, closing every entry and page: the photo, the name, one line on
   what the practice does, and the one call to action, above a hairline that
   runs the column like the rest. The index does not carry it. */
.prose-author {
  display: flex;
  gap: calc(var(--cell) * 0.6);
  align-items: flex-start;
  margin-top: calc(var(--cell) * 2);
  padding-top: calc(var(--cell) * 1);
  border-top: 1px solid var(--rule);
}

.prose-author__photo {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: var(--ground-2);
}

.prose-author__text {
  min-width: 0;
}

.prose-author__name {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
}

.prose-author__line {
  margin: calc(var(--cell) * 0.15) 0 0;
  max-width: 52ch;
  color: var(--ink-quiet);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose-author__cta {
  margin: calc(var(--cell) * 0.4) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose-author__cta a {
  display: inline-block;
  min-height: 44px;
  padding-block: calc((44px - var(--lh-body)) / 2);
  margin-block: calc((44px - var(--lh-body)) / -2);
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}

.prose-author__cta a:is(:hover, :focus-visible) {
  color: var(--human-ink);
  text-decoration-color: var(--human-ink);
}

@media (max-width: 560px) {
  .prose-author {
    flex-direction: column;
  }
}