/* The changelog on the 2026-07 identity: Redaction 20 for every heading,
   Plus Jakarta Sans for the copy, Space Mono for labels. Linked from
   /changelog/ and from every release page under it, after site.css, so the
   two font variables below move this one surface (header and footer
   included) without touching the other pages.

   Two shapes share this file. The index is a dated rail: a dashed line down
   the left, one row per release with its date on the line and the title,
   summary and picture beside it, each opening the release's own page. The
   release page reads like a note: title, a meta column, the sections with
   their pictures and steps, and the neighbouring releases at the foot. */

@font-face {
  font-family: 'Redaction 20';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/redaction-20-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Redaction 20';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/redaction-20-italic.woff2) format('woff2');
}

:root {
  --font-d: "Redaction 20", Georgia, serif;
  --font-b: "Plus Jakarta Sans", system-ui, sans-serif;
}
body { font-size: 16px; line-height: 1.6; }
h1, h2, h3, h4 { line-height: 1.08; }
/* The content lines up with the header: the same gutter, no centred column.
   site.css caps .wrap at 1240px, which floats the page in the middle of a
   wide window while the header and the rails stay at the edges. */
main .wrap { max-width: none; }

/* the one mono label style */
.mono {
  font-family: var(--font-m); font-size: 11px; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.mono.ink, .mono .ink { color: var(--ink); }
.mono .live, .live { color: var(--accent); }

.page-head { padding-block: clamp(44px, 8vh, 96px) clamp(28px, 4vh, 48px); }
.page-head h1 { font-size: clamp(40px, 6vw, 76px); max-width: 14ch; }
.page-head p { margin-top: 18px; color: var(--muted); font-size: 17px; max-width: 56ch; }

/* a picture or a preview loop in a hairline frame */
.frame { display: block; margin: 0; border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; background: var(--card-bg); }
.frame img, .frame video { display: block; width: 100%; height: auto; }
.frame-cap { font-family: var(--font-m); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 9px 12px; border-top: 1px dashed var(--hair); background: var(--paper); }

/* numbered steps: the numeral in its own column, so it never sits on the text */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 6px; align-items: baseline; color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0; padding: 0; max-width: none; }
.steps li::before { content: none; }
.steps li .n { font-family: var(--font-m); font-size: 11px; letter-spacing: .1em; color: var(--faint); padding-top: 2px; }

.load-error {
  padding-block: clamp(30px, 5vh, 56px);
  font-family: var(--font-m); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}

/* ---- the index: a dated rail -------------------------------------------
   The rows sit flush with the page heading. The dashed line runs in the left
   margin, just outside the text column, with a dot where each release meets
   it; the date reads above the title. */
.log { position: relative; padding-bottom: clamp(40px, 8vh, 96px); }
.log-line {
  position: absolute; top: 0; bottom: 0; width: 0;
  left: calc(var(--gut) - 24px);
  border-left: 1px dashed var(--hair);
}
.row {
  position: relative;
  padding-block: clamp(30px, 5vh, 56px);
  border-top: 1px dashed var(--hair);
  scroll-margin-top: 84px;
}
.row:first-of-type { border-top: 0; }
.when { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 10px; }
.when .month { width: 100%; margin-bottom: 6px; color: var(--muted); }
.when time { font-size: 12px; }
.when .clock { font-size: 10px; }
.when .dot {
  position: absolute; left: -27px; top: calc(clamp(30px, 5vh, 56px) + 6px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--faint);
  box-shadow: 0 0 0 4px var(--paper);
}
.row.newest .when .dot { background: var(--accent); }
.what { min-width: 0; }
.what .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.what h2 { font-size: clamp(26px, 2.8vw, 36px); max-width: 22ch; text-wrap: balance; margin: 0; padding: 0; border: 0; }
.what h2 a { color: var(--ink); text-decoration: none; }
.what h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
.what .summary { color: var(--muted); font-size: 17px; margin: 12px 0 0; max-width: 64ch; }
.what .thumb { margin-top: 22px; max-width: 960px; }
.what .thumb img { max-height: 540px; object-fit: cover; object-position: top; }
.what .more { display: inline-block; margin-top: 18px; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--hair); }
.what .more:hover { border-color: var(--accent); }
.origin { padding-top: clamp(28px, 4vh, 40px); border-top: 1px dashed var(--hair); display: flex; gap: 10px; align-items: center; }
.origin i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block; }

/* ---- a release page ----------------------------------------------------- */
.release-page { padding-block: clamp(28px, 5vh, 56px) clamp(60px, 10vh, 120px); }
.crumbs { display: flex; gap: 10px; align-items: center; margin-bottom: clamp(22px, 3vh, 34px); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.release-head { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(24px, 4vw, 64px); align-items: start; }
.release-head h1 { font-size: clamp(34px, 5vw, 64px); max-width: 18ch; text-wrap: balance; margin: 0; }
.release-meta { padding-top: 10px; }
.release-meta dl { margin: 0; display: grid; gap: 14px; padding-top: 16px; border-top: 1px dashed var(--hair); }
.release-meta dt { margin-bottom: 3px; }
.release-meta dd { margin: 0; font-size: 15px; color: var(--ink); }
.copy-link {
  margin-top: 18px; font-family: var(--font-m); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: none; border: 1px solid var(--hair); border-radius: var(--r); padding: 8px 12px; cursor: pointer;
}
.copy-link:hover { color: var(--ink); border-color: var(--ink); }
.release-body { max-width: 820px; margin-top: clamp(24px, 4vh, 40px); }
.release-body .intro { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 0; }
.release-body > .frame { margin-top: clamp(20px, 3vh, 32px); }
.section { margin-top: clamp(32px, 5vh, 56px); padding-top: clamp(20px, 3vh, 28px); border-top: 1px dashed var(--hair); scroll-margin-top: 84px; }
.section .meta { display: flex; gap: 14px; margin-bottom: 12px; }
.section h2 { font-size: clamp(24px, 2.6vw, 32px); max-width: 24ch; margin: 0; padding: 0; border: 0; }
.section .body { color: var(--muted); margin: 12px 0 0; font-size: 16.5px; max-width: 60ch; }
.section .pics { margin-top: 20px; display: grid; gap: 14px; }
.section .how { margin-top: 22px; }
.section .how .mono { margin-bottom: 10px; }
.section .good { margin: 16px 0 0; color: var(--muted); font-size: 15px; }
.section .good span { font-family: var(--font-m); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-right: 8px; }
.release-nav { margin-top: clamp(40px, 7vh, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.neighbour { display: grid; gap: 8px; align-content: start; padding: 18px 20px; border: 1px solid var(--hair); border-radius: var(--r); color: var(--ink); }
.neighbour:hover { background: var(--card-bg); }
.neighbour.empty { border: 0; }
.neighbour .t { font-family: var(--font-d); font-size: 20px; line-height: 1.2; }
.release-back { margin-top: 24px; }
.release-back a { color: var(--ink); border-bottom: 1px solid var(--hair); font-size: 14px; }
.release-back a:hover { border-color: var(--accent); }

@media (max-width: 860px) {
  .log-line, .when .dot { display: none; }
  .release-head { grid-template-columns: minmax(0, 1fr); }
  .release-meta dl { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .release-nav { grid-template-columns: minmax(0, 1fr); }
  .neighbour.empty { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .page-head h1 { font-size: clamp(36px, 11vw, 48px); }
  .what h2 { font-size: clamp(24px, 7vw, 30px); }
  .release-head h1 { font-size: clamp(30px, 9vw, 40px); }
  .section h2 { font-size: 23px; }
}