/* light.css — the reading system.

   One law: the page is darkness and the content is the light in it. Every
   rule here is a consequence of it, and a rule that cannot be traced back
   to it does not belong in this file.

   What follows from the law:

   - Darkness is the material. The emptiness either side of the column is
     as much the design as the column is, so the measure stays narrow at
     every width instead of growing to fill a monitor.
   - Hierarchy is weight and luminance, never colour and never a box. A
     section heading is the body size; it is heavier and brighter, and that
     is the whole difference. There is no size between the body and the one
     display moment a page is allowed.
   - Air separates, not rules. A hairline appears exactly once, above the
     read-next row, where losing it would merge the article with its
     footer.
   - Nothing wraps a passage. No tinted panel, no left rule, no indent, no
     rounded surface around an example — an example is simply the next
     lines, set tighter and a shade brighter.
   - Colour belongs to glow, which is drawn by js/glow.js, never here.

   Chrome (nav, footer) is chrome.css; it is the same on every page
   including the home page, which is why it is not in this file. */

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

.read {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 28px;
}

/* The one large moment. Same axis and same measure as the body: a
   headline that starts further left than its own first paragraph reads as
   two different pages stapled together. */
.read h1 {
  font-size: var(--t-head);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--lum-1);
  margin: 0 0 40px;
  text-wrap: balance;
}

.read-top { padding-top: clamp(64px, 11vh, 104px); }
.read-end { padding-bottom: clamp(72px, 12vh, 112px); }

/* ------------------------------------------------------------------
   The body — one size, four luminances
   ------------------------------------------------------------------ */

.read p,
.read li {
  font-size: var(--t-text);
  line-height: 1.8;
  color: var(--lum-3);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.read .lead { color: var(--lum-2); }
.read .quiet { color: var(--lum-4); }

/* A heading, at the body's size. Weight and brightness carry it; the space
   above it carries the rest. */
.read h2,
.read h3,
.read .hd {
  font-size: var(--t-text);
  line-height: 1.8;
  font-weight: 600;
  color: var(--lum-1);
  margin: 56px 0 20px;
}

.read h2:first-child,
.read h3:first-child,
.read .hd:first-child { margin-top: 0; }

/* Raw lines. An example is not a thing in a frame — it is the text
   continuing, standing closer together because the lines belong to each
   other, and a shade brighter because they are the evidence. The kind of
   each line sits after an em dash, in the quietest luminance. */
.read .raw {
  color: var(--lum-e);
  margin-bottom: 4px;
}

.read .raw:last-of-type { margin-bottom: 20px; }
.read .raw .kind { color: var(--lum-4); }

.read ul,
.read ol {
  margin: 0 0 20px;
  padding-left: 1.1em;
}

.read strong { color: var(--lum-1); font-weight: 600; }

/* ------------------------------------------------------------------
   Links
   ------------------------------------------------------------------ */

.read a,
.next a {
  color: var(--lum-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: text-decoration-color 0.18s var(--ease-soft);
}

.read a:hover,
.next a:hover { text-decoration-color: var(--lum-1); }

/* ------------------------------------------------------------------
   Read next — one wrapping group, never two stacked navigations
   ------------------------------------------------------------------ */

.next {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  max-width: var(--measure);
  margin: 56px auto 0;
  padding: 36px 28px 0;
  border-top: 1px solid var(--hair);
}

.next a {
  font-size: var(--t-text);
  line-height: 1.8;
}

/* ------------------------------------------------------------------
   Cards — the one object allowed outside a product demonstration,
   because in a directory a card is what you aim at
   ------------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 28px;
  list-style: none;
}

.card {
  display: block;
  padding: 20px 20px 22px;
  border: 1px solid var(--card-line);
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.22s var(--ease-soft);
}

/* Nothing else happens on hover. The card is a contour; brightening the
   contour is the whole event. */
.card:hover,
.card:focus-visible { border-color: var(--card-line-hi); }

.card .name {
  display: block;
  font-size: var(--t-text);
  line-height: 1.6;
  font-weight: 600;
  color: var(--lum-1);
  margin-bottom: 7px;
}

.card .what {
  display: block;
  font-size: var(--t-text);
  line-height: 1.7;
  color: var(--lum-3);
}

/* ------------------------------------------------------------------
   Narrow screens. The column already fits; the grid stops trying to be
   a grid, and the side air shrinks to a thumb's width rather than
   disappearing.
   ------------------------------------------------------------------ */

@media (max-width: 480px) {
  .read,
  .next { padding-left: 20px; padding-right: 20px; }
  .cards { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .read a,
  .next a,
  .card { transition: none; }
}