/* writing/index.css -- the writing index's own rules, on top of the writing
   list in style.css. One page loads this file.

   A CONTENTS PAGE FROM 64rem, since 2026-10-30. Two layouts came before
   this one the same day: a pair of wide entries over three columns of one
   entry each, then the same with small drawings. Both set five essays in
   two shapes, so the eye had to relearn the page halfway down; the
   collections spent an icon, a label and a column on one article each; and
   every dek ran wider than the title over it, under a drawing it had
   nothing to do with.

   Now every essay is one row on one grid. The left column is the label --
   Start here, or the collection's mark and name -- and it is printed once,
   at the head of its group, the way a magazine's contents page names a
   section. The middle column is the title, the dek and the read time,
   stacked, so the dek is the title's width and no wider. The drawing sits
   at the right edge at one size for all five, a door's sign rather than its
   content. A hairline across the full frame opens each collection; Start
   here keeps its sage rule, since it opens the page.

   The label column is 10rem and the drawing 14rem to 80rem, then 14rem and
   18rem, so the words get about 500px at 1024 and the measure's 60ch from
   1280 on.

   Under 64rem nothing changes: the rows and their 768 breakpoint in
   style.css still hold. */
@media (max-width: 63.98rem) {
  .writing-collection + .writing-collection { margin-top: var(--space-3xl); }
}

@media (min-width: 64rem) {
  .writing-collections { max-width: var(--col-full); }

  /* A group: its label in the first column, its list in the second. The
     mark takes its own height and the name sits under it, so the list
     spans both rows and its extra height goes to the second. */
  .writing-start .container,
  .writing-collection {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-3xl);
    align-items: start;
  }
  .writing-start .container > * { max-width: none; }
  .writing-start .writing-list,
  .writing-collection > .writing-list { grid-column: 2; grid-row: 1 / span 2; }
  .writing-collection {
    border-top: 1px solid var(--color-tag-border);
    padding-top: var(--space-3xl);
  }
  /* The hairline is the gap between Start here and the collections: the
     last entry's 40 above it, the collection's 40 below. */
  .writing-start + .case-overview { padding-top: 0; }
  /* style.css zeroes this, but a later section rule puts --space-section
     back under it. */
  .case-section.writing-start { padding-bottom: 0; }

  /* A row: the words, then the drawing at the right edge. */
  .writing-list .writing-link {
    grid-template-columns: minmax(0, 1fr) 14rem;
    grid-template-areas: "text card";
    column-gap: var(--space-3xl);
    padding: 0 0 var(--space-3xl);
  }
  .writing-list .writing-item + .writing-item .writing-link { padding-top: var(--space-3xl); }
  .writing-list .writing-card { grid-area: card; }
  .writing-list .writing-text { grid-area: text; }
}

@media (min-width: 80rem) {
  .writing-start .container,
  .writing-collection { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--space-4xl); }
  .writing-list .writing-link { grid-template-columns: minmax(0, 1fr) 18rem; column-gap: var(--space-4xl); }
}