/* chrome.css — structural rules for the classes acta's chrome renderer emits.

   ────────────────────────────────────────────────────────────────────────────
    PLACEHOLDER. This is plumbing, not a design. Its whole job is to make the
    tokens in theme.toml do something, so that scrubbing one `:root` value in
    Safari's inspector visibly restyles the site. Replace it wholesale when the
    real stylesheet exists.

    Two rules it keeps to, which the replacement should keep to as well:

      1. Every value is a `var(--token)`. There is no literal colour, size,
         face or measure below — grep for `#` and for `px` and the only hits
         are `--hairline`'s consumers. A literal here is a value that cannot be
         tuned in the inspector, which is the loop this file exists to serve.
      2. Hairlines only. DESIGN.md §6 Layout and D23: no fills, no shadows, no
         rounded corners, tabular figures throughout.

    Selectors correspond to DESIGN.md §2's component inventory by name —
    `item-card`, `post-card`, `orphan-card`, `kind-tag`, `datestamp`,
    `archive-notice`, `provenance-stamp`, `tape-counter`, `skip-link`. That
    correspondence is the contract between the renderer and any stylesheet
    written against the inventory.
   ──────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--size-body);
  line-height: var(--leading);
  font-variant-numeric: tabular-nums;
}

body {
  margin: 0;
  padding: 0 var(--rhythm) calc(var(--rhythm) * 2);
}

a { color: var(--phosphor); }
a:hover { color: var(--safety); }

/* Landmarks. Not optional — DESIGN.md §2 Layer 0. */
.skip-link {
  position: absolute;
  left: -100vw;
}
.skip-link:focus {
  position: static;
  display: inline-block;
  padding: var(--rhythm);
}

.measure {
  max-width: var(--measure);
  margin: 0 auto;
}

.site-header,
.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--rhythm) 0;
}
.site-header { border-bottom: var(--hairline) solid var(--rule); }
.site-footer { border-top: var(--hairline) solid var(--rule); }

.site-title,
.site-title-full {
  font-family: var(--face-display);
  font-size: var(--size-display);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.site-title-full { margin: var(--rhythm) 0; }

.feed-links { display: flex; gap: var(--rhythm); }

/* ---------------------------------------------------------------- the river */

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

.river-item {
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
  gap: 0 var(--rhythm);
  padding: var(--rhythm) 0;
  border-bottom: var(--hairline) solid var(--rule);
}

/* The gutter reads as a tape index: kind tag over datestamp, both dim. */
.river-item > .kind-tag,
.river-item > .datestamp {
  grid-column: 1;
  color: var(--ink-dim);
  font-size: var(--size-small);
}
.river-item > .permalink,
.river-item > .abstract,
.river-item > .post-text { grid-column: 2; }

.river-item > .permalink {
  text-decoration: none;
  font-size: var(--size-title);
}
.river-item > .abstract {
  margin: calc(var(--rhythm) / 2) 0 0;
  color: var(--ink-dim);
}

/* OrphanCard: published, producer retired. Differs by one line and is not an
   error state — the permalink is a promise that outlived the tool. */
.orphan-card > .permalink { border-left: var(--hairline) solid var(--rule); padding-left: var(--rhythm); }

.tape-counter {
  color: var(--ink-dim);
  font-size: var(--size-small);
  letter-spacing: var(--display-tracking);
}

/* -------------------------------------------------------------- an article */

.article,
.post {
  background: var(--paper);
  padding: var(--rhythm);
}

.article-header { border-bottom: var(--hairline) solid var(--rule); }
.article-header .kind-tag,
.article-header .datestamp,
.post-header .kind-tag,
.post-header .datestamp {
  display: inline-block;
  margin-right: var(--rhythm);
  color: var(--ink-dim);
  font-size: var(--size-small);
}

.title {
  font-family: var(--face-display);
  font-size: var(--size-display);
  letter-spacing: var(--display-tracking);
}
.byline { color: var(--ink-dim); font-size: var(--size-small); }

/* The frozen bodies bring their own `<h1>` and `.metadata` from Verso, so the
   chrome emits no header of its own for them and these two rules match both. */
.article-body h1,
.article-body h2,
.article-body h3 { font-family: var(--face-display); letter-spacing: var(--display-tracking); }
.article-body .metadata { color: var(--ink-dim); font-size: var(--size-small); }
.article-body img { max-width: 100%; height: auto; }
.article-body blockquote {
  margin: var(--rhythm) 0;
  padding-left: var(--rhythm);
  border-left: var(--hairline) solid var(--rule);
  color: var(--ink-dim);
}
.article-body pre,
.article-body .hl.lean {
  overflow-x: auto;
  font-family: var(--face-code);
  font-size: var(--size-small);
}

.provenance-stamp,
.archive-notice {
  color: var(--ink-dim);
  font-size: var(--size-small);
  border-top: var(--hairline) solid var(--rule);
  padding-top: calc(var(--rhythm) / 2);
}
.provenance-stamp .checkmark { color: var(--phosphor); }

.record-identity {
  color: var(--ink-dim);
  font-size: var(--size-small);
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}