/* SHAPE: Dated Index.
   A statement, then entries as full-width ruled rows where the date is
   the anchor. No other v2 page may use this shape.

   Fixes from the v1 writing page: at one post the page was 90% empty
   space with no close, so it read as unfinished rather than sparse. */

.wr-head { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0 clamp(var(--sp-6), 5vw, var(--sp-7)); }
.wr-head h1 { font-size: var(--fs-hero); max-width: 16ch; }
.wr-head .lead { margin-top: var(--sp-5); max-width: 62ch; }

.wr-index { list-style: none; border-top: 1px solid var(--line-strong); }
.wr-entry { border-bottom: 1px solid var(--line); }
.wr-entry a {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--sp-2) clamp(var(--sp-4), 3vw, var(--sp-6));
  padding: var(--sp-6) 0; text-decoration: none; color: inherit;
}
.wr-entry a:hover .wr-title { color: var(--clay-deep); }
.wr-date { grid-row: 1 / 3; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--faint); padding-top: 5px; }
.wr-title {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600;
  color: var(--ink); letter-spacing: var(--tr-display); line-height: 1.2;
  max-width: 24ch;
}
.wr-desc { color: var(--muted); font-size: var(--fs-small); max-width: 62ch; }

.wr-empty { padding: var(--sp-8) 0; color: var(--muted); }

.wr-close { padding: clamp(var(--sp-7), 6vw, var(--sp-8)) 0; margin-top: clamp(var(--sp-7), 6vw, var(--sp-9)); }
.wr-close h2 { max-width: 20ch; margin-bottom: var(--sp-6); }
.wr-close p { margin: var(--sp-4) 0 var(--sp-6); max-width: 46ch; }

@media (max-width: 620px) {
  .wr-entry a { grid-template-columns: 1fr; }
  .wr-date { grid-row: auto; padding-top: 0; }
}