/* ═══════════════════════════════════════════════════════════════
   page.css — editorial content pages: /about, /terms, /changelog.

   Load order: tokens.css → chrome.css → page.css.
   Declares no :root variables; everything comes from tokens.

   These pages all share one shape — hero, sticky table of contents,
   numbered sections — so they share one stylesheet rather than each
   carrying its own copy. That is what let about.html and the index
   drift apart in the first place.
═══════════════════════════════════════════════════════════════ */

/* ═══════════ brand texture ═══════════ */
/* Static remnant of the animated FASTQ canvas, matching the index. */
.seq-rule {
  font-family: var(--mono); font-size: 11px; letter-spacing: .42em;
  color: var(--dim); opacity: .08; user-select: none;
  white-space: nowrap; overflow: hidden; padding: 22px 0 0;
}

/* ═══════════ hero ═══════════ */
.page-hero { padding: 30px 0 34px; }

.page-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  padding: 5px 13px; margin-bottom: 22px;
  border: 1px solid var(--gold-edge); border-radius: 20px;
  background: var(--gold-soft);
}
.page-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px rgba(201,165,80,.6);
}
@media (prefers-reduced-motion: no-preference) {
  .page-eyebrow::before { animation: pip-pulse 2.4s ease-in-out infinite; }
}

.page-title {
  font-size: clamp(32px, 4vw, 46px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.035em; margin-bottom: 18px; max-width: 18ch;
}
.page-title span { color: var(--gold); }

.page-lede { font-size: 17px; line-height: 1.55; color: var(--dim); max-width: 58ch; }

.page-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: 11.5px; color: var(--dimmer);
}

/* ═══════════ layout ═══════════ */
.content-wrap {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 56px; align-items: start; padding-bottom: 80px;
}

/* ═══════════ table of contents ═══════════ */
/* Offset by the nav so a sticky heading never sits under it. */
.toc { position: sticky; top: calc(var(--nav-height) + 28px); }
.toc-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dimmer); margin-bottom: 12px;
}
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.toc-list a {
  display: block; padding: 7px 11px; font-size: 13px;
  color: var(--dim); text-decoration: none;
  border-left: 2px solid transparent; border-radius: 0 5px 5px 0;
  transition: color .15s, border-color .15s, background .15s;
}
.toc-list a:hover { color: var(--paper); border-left-color: var(--line); background: rgba(255,255,255,.025); }
.toc-list a.is-active { color: var(--gold); border-left-color: var(--gold); background: var(--gold-soft); }

/* ═══════════ sections ═══════════ */
.sections { display: flex; flex-direction: column; }
.doc-section { padding: 34px 0; border-bottom: 1px solid var(--hair); }
.doc-section:first-child { padding-top: 0; }
.doc-section:last-child { border-bottom: none; }

.doc-num {
  display: block; font-family: var(--mono); font-size: 12px;
  color: var(--gold); margin-bottom: 10px;
}
.doc-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 14px; }
.doc-body { font-size: 15px; line-height: 1.75; color: var(--dim); max-width: 68ch; }
.doc-body p + p { margin-top: 14px; }
.doc-body strong { color: var(--paper); font-weight: 600; }
.doc-body ul { margin: 14px 0 0 18px; }
.doc-body li + li { margin-top: 8px; }

/* ═══════════ callouts ═══════════ */
.callout {
  margin-top: 18px; padding: 14px 17px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.65;
  border: 1px solid var(--VUS-edge); background: rgba(122,184,232,.06); color: var(--dim);
}
.callout strong { color: var(--paper); }
.callout.is-gold { border-color: var(--gold-edge); background: var(--gold-soft); }
.callout.is-live { border-color: rgba(0,229,153,.24); background: rgba(0,229,153,.05); }

/* ═══════════ stats ═══════════ */
.stat-strip { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.stat-card {
  flex: 1; min-width: 130px; padding: 16px 18px;
  background: var(--slate); border: 1px solid var(--hair); border-radius: 11px;
}
.stat-val { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--gold); letter-spacing: -.02em; }
.stat-label { font-size: 12px; color: var(--dimmer); margin-top: 4px; }

/* ═══════════ link button ═══════════ */
.link-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  padding: 9px 16px; border-radius: 8px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--gold);
  border: 1px solid var(--gold-edge); background: var(--gold-soft);
  transition: background .15s, border-color .15s;
}
.link-btn:hover { background: rgba(201,165,80,.14); border-color: rgba(201,165,80,.55); }
.link-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* ═══════════ pipeline strip ═══════════ */
/* Mirrors the index's four-stage grid so the same idea reads the same
   way on both pages — one bordered block, internal dividers, numbered. */
.pipeline {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  margin-top: 22px; background: var(--hair);
  border: 1px solid var(--hair); border-radius: 12px; overflow: hidden;
}
.pipe-stage { background: var(--ink); padding: 18px 15px 20px; }
.pipe-n { display: block; font-family: var(--mono); font-size: 11px; color: var(--gold); margin-bottom: 10px; }
.pipe-icon { display: block; margin-bottom: 10px; }
.pipe-icon svg { width: 18px; height: 18px; stroke: var(--dim); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pipe-label { font-size: 13px; font-weight: 600; color: var(--paper); letter-spacing: -.01em; line-height: 1.3; }

/* ═══════════ responsive ═══════════ */
@media (max-width: 900px) {
  .content-wrap { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .pipeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .page-hero { padding: 24px 0 28px; }
  .seq-rule { display: none; }
  .pipeline { grid-template-columns: 1fr; }
  .stat-strip { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   CHANGELOG TIMELINE
   Lives here rather than in its own stylesheet: /changelog shares the
   hero, wrap and type scale with /about, and only the timeline below
   is specific to it. One less file to keep in step.
═══════════════════════════════════════════════════════════════ */

.timeline { position: relative; }

.cl-entry { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 26px; }

.cl-date-col { text-align: right; padding-top: 1px; }
.cl-date { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--dim); }
.cl-entry.is-latest .cl-date { color: var(--gold); }
.cl-build { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--dimmer); margin-top: 3px; }

.cl-content { position: relative; padding: 0 0 34px 28px; border-left: 1px solid var(--hair); }
.cl-entry:last-child .cl-content { border-left-color: transparent; padding-bottom: 0; }

.cl-node {
  position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--slate); border: 2px solid var(--line);
}
.cl-entry.is-latest .cl-node {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft), 0 0 10px rgba(201,165,80,.5);
}

/* Tag colours carry meaning: gold for new capability, green for a fix,
   neutral for data. Not decoration — do not add more. */
.cl-tag {
  display: inline-block; margin-bottom: 11px; padding: 3px 9px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dimmer); border: 1px solid var(--line); border-radius: 5px;
}
.cl-tag-data    { color: var(--dim); }
.cl-tag-feature { color: var(--gold); border-color: var(--gold-edge); background: var(--gold-soft); }
.cl-tag-fix     { color: var(--live); border-color: rgba(0,229,153,.3); background: rgba(0,229,153,.06); }

.cl-summary { font-size: 16.5px; font-weight: 600; line-height: 1.45; color: var(--paper); letter-spacing: -.01em; }
.cl-summary .cl-sym { color: var(--live); font-weight: 700; margin-right: 7px; }
.cl-summary b { color: var(--gold); font-weight: 700; }

.cl-detail { font-size: 14px; line-height: 1.75; color: var(--dim); margin-top: 12px; max-width: 62ch; }
.cl-items { list-style: none; margin: 10px 0 0; padding-left: 18px; max-width: 62ch; }
.cl-items li { position: relative; padding-left: 4px; font-size: 13.5px; line-height: 1.7; color: var(--dim); }
.cl-items li + li { margin-top: 5px; }
.cl-items li::before { content: '–'; position: absolute; left: -14px; color: var(--gold); }

.cl-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  color: var(--gold); text-decoration: none;
}
.cl-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.cl-empty { padding: 60px 0; text-align: center; font-size: 14px; color: var(--dimmer); }

/* Oversized engine name behind the header, as on the variant report.
   .page-holder is its anchor: .wrap is shared with the nav and footer, so
   it must not be made positioned globally. Without an anchor the watermark
   resolves against the viewport and drifts to the screen edge on a wide
   display instead of sitting behind the heading. */
.page-holder { position: relative; }

.page-watermark {
  position: absolute; top: 10px; right: -10px; z-index: 0;
  pointer-events: none; user-select: none;
  font-family: var(--mono); font-weight: 800; font-size: 150px; line-height: .8;
  letter-spacing: -.05em; color: rgba(255,255,255,.022);
}
.page-hero, .content-wrap, .timeline { position: relative; z-index: 1; }

@media (max-width: 640px) {
  .cl-entry { grid-template-columns: 1fr; gap: 6px; }
  .cl-date-col { text-align: left; }
  .cl-content { border-left: none; padding-left: 0; padding-bottom: 28px; margin-top: 4px; }
  .cl-node { display: none; }
  .page-watermark { display: none; }
}