/* ════════════════════════════════════════════════════════════════════════════
   SIGNAL — the Singularity journal. Application-register reading surface.
   Pure monochrome in BOTH light & dark (semantic tokens flip via [data-theme]).
   Squared · hairline-caged · /// markers · Clash for long-form · Space Mono chrome.
   ════════════════════════════════════════════════════════════════════════════ */

/* reading inks (slightly off the contrast ceiling for long-form comfort) */
:root { --read: #E7E6E2; --read-soft: #B9B8B4; --scrim-1: rgba(8,8,10,0.0); --scrim-2: rgba(8,8,10,0.82); }
[data-theme="paper"] { --read: #23232A; --read-soft: #5E5E66; --scrim-1: rgba(244,243,240,0.0); --scrim-2: rgba(244,243,240,0.86); }
/* the deployed landing's framed architecture */
/* --pad-x is the ONE editorial content gutter: every section (hero · stream head ·
   rows · footer) shares it so their left/right rails align inside the chamfer cage. */
:root { --frame-inset: clamp(16px, 2vw, 34px); --nav-h: calc(31px + 2 * clamp(13px, 1.5vw, 20px));
  --fpad: clamp(18px, 2.4vw, 44px); --frame-line: rgba(244,243,240,0.16);
  --pad-x: clamp(28px, 4vw, 64px); }
[data-theme="paper"] { --frame-line: rgba(8,8,10,0.14); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color var(--dur-ui) var(--ease-settle), color var(--dur-ui) var(--ease-settle);
}
a { color: inherit; text-decoration: none; }
canvas { display: block; }
::selection { background: var(--ink); color: var(--bg); }

.mono { font-family: var(--font-mono); }
.measure { max-width: var(--measure); margin-inline: auto; }
/* label grading — every uppercase mono label on the tokens tracking scale:
   ≤0.7rem (--t-mono-sm) opens widest (--tr-label-wide); larger labels sit at --tr-label. */
.kicker { font-family: var(--font-mono); font-size: var(--t-mono-sm); letter-spacing: var(--tr-label-wide);
  text-transform: uppercase; color: var(--ink-mute); margin: 0; }
.section-kicker { font-family: var(--font-mono); font-size: var(--t-mono-sm); letter-spacing: var(--tr-label-wide);
  text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.byline { font-size: var(--t-mono-sm); letter-spacing: var(--tr-label-wide); text-transform: uppercase;
  color: var(--ink-mute); margin: 0; font-variant-numeric: tabular-nums; }
.byline .sep { opacity: 0.5; padding: 0 0.3em; }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--accretion); margin-right: 0.5em;
  vertical-align: 0.06em; box-shadow: 0 0 0 0 var(--accretion); animation: pulse 2.6s var(--ease-settle) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.32; } }

/* reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease-gravity), transform var(--dur-reveal) var(--ease-gravity); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* scroll progress — along the frame's top line */
.progress { position: fixed; top: var(--frame-inset); left: var(--frame-inset); right: var(--frame-inset); height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 55; transition: transform 80ms linear; }

/* ── Frame + Nav (the deployed landing's framed architecture) ──────────────── */
/* The outer page frame is the SAME chamfer cage as the landing's .frame / the nav:
   top-left + bottom-right cut at 45°, top-right + bottom-left softly rounded, a 1px
   hairline following the cut. Two-layer ::before/::after (a single border + clip-path
   can't round the un-cut pair). --c matches the nav's --cut so the docking nav corner
   and the frame corner share one geometry. */
.frame-edge { position: fixed; inset: var(--frame-inset); border: 0; pointer-events: none; z-index: 0;
  isolation: isolate; --c: var(--cut); }
.frame-edge::before, .frame-edge::after { content: ''; position: absolute; pointer-events: none;
  border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
/* ::after = the hairline chamfer (line colour); ::before = the bg chamfer 1px inside,
   stacked ABOVE so only the 1px ring survives (verbatim landing technique). */
.frame-edge::after { inset: 0; z-index: -2; background: var(--frame-line); }
.frame-edge::before { inset: 1px; z-index: -1; background: var(--bg);
  transition: background-color var(--dur-ui) var(--ease-settle); }
.nav { position: fixed; top: var(--frame-inset); left: var(--frame-inset); right: var(--frame-inset); height: var(--nav-h);
  z-index: 50; display: flex; align-items: center; gap: var(--space-06); padding: 0 clamp(18px, 2vw, 30px);
  background: var(--bg); border: 1px solid var(--frame-line);
  --line: var(--frame-line);   /* alias so the canonical system.css nav rules resolve on the blog */
  transition: background-color var(--dur-ui) var(--ease-settle); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-03); color: var(--ink); }
.nav__brand span { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 0.95rem; letter-spacing: var(--tr-caption); }
.brand__mark { width: 1.25em; height: 1.25em; flex: none; background: currentColor;
  -webkit-mask: url(../img/mark.svg) center/contain no-repeat; mask: url(../img/mark.svg) center/contain no-repeat; }
.nav__brand .brand__mark { width: 40px; height: 40px; }
.nav__links { display: flex; gap: clamp(18px, 2.2vw, 40px); }   /* right-alignment now via the canonical .nav__spacer */
.nav__links a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: var(--tr-label-wide); text-transform: uppercase;
  color: var(--ink-mute); transition: color var(--dur-micro); }
.nav__links a:hover, .nav__links a.is-current { color: var(--ink); }
/* Dark/Light toggle — complete-chamfer cage (1px hairline follows ALL edges incl.
   the two diagonal cuts), matching the chamfer language of the site nav. */
.nav__toggle { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.45em;
  background: transparent; border: 0; cursor: pointer; padding: 0.5em 0.75em; --c: var(--cut-btn);
  border-radius: 0 var(--round) 0 var(--round); font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: var(--tr-label-wide); color: var(--ink-mute); }
.nav__toggle::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--frame-line); border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color var(--dur-micro); }
.nav__toggle::before { content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: var(--bg); border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color var(--dur-micro); }
.nav__toggle:hover::after { background: var(--ink); }
.nav__toggle:hover::before { background: var(--bg-elev); }
.nav__toggle__lbl { transition: color var(--dur-micro); }
.nav__toggle__lbl.is-on { color: var(--ink); }
.nav__toggle__sep { opacity: 0.4; }

/* ── Shell — content within the frame ──────────────────────────────────────── */
/* lift the content above the chamfer cage so the frame's interior bg-fill (the inner
   ::before that carves the hairline) sits BEHIND the content, never over it. */
.shell { position: relative; z-index: 1;
  padding: calc(var(--frame-inset) + var(--nav-h)) var(--frame-inset) var(--frame-inset); }
.view[hidden] { display: none; }
.view { width: 100%; }

/* ── Hero — framed: text │ ASCII panel (the ASCII gets its own stage) ───────── */
/* gap:0 here — the viz panel carries its own --grout margin (system.css), so an
   extra grid gap would double the left gutter (12px vs 6px right). Single symmetric
   gutter = the viz margin only. */
.page-blog .land { gap: 0; }
.land { display: grid; grid-template-columns: 0.44fr 0.56fr; border-bottom: 1px solid var(--frame-line);
  min-height: clamp(340px, 46vh, 500px); overflow: hidden; }
.land__hero { display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--space-05); padding: clamp(32px, 3.6vw, 64px) var(--pad-x); }
.land__viz { position: relative; overflow: hidden; border-left: 1px solid var(--frame-line); }
.viz__field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__title { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  line-height: var(--lh-tight); letter-spacing: var(--tr-display); color: var(--ink); margin: var(--space-02) 0 0; text-wrap: balance; }
.rule { align-self: stretch; height: 1px; background: var(--frame-line); margin: var(--space-04) calc(-1 * var(--pad-x)); }
.hero__sub { font-family: var(--font-sans); font-weight: var(--w-light); font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5; color: var(--read); max-width: 42ch; margin: 0; }
.hero__cta { margin-top: var(--space-03); }

/* legibility scrim — still used by the featured + article ASCII bands (sanctioned) */
.hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 92%, var(--scrim-2), var(--scrim-1) 62%),
    linear-gradient(to top, var(--bg) 2%, color-mix(in srgb, var(--bg) 40%, transparent) 30%, transparent 64%); }

/* buttons — chamfer cut on the soft-corner geometry shared across the platform. */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 0.85em 1.3em; border: 0; color: var(--ink); --c: var(--cut-btn);
  border-radius: 0 var(--round) 0 var(--round);
  transition: color var(--dur-micro); }
.btn > * { position: relative; z-index: 1; }
/* FILLED primary — the fill IS the shape (chamfer clip on its own background). */
.btn--primary { background: var(--ink); color: var(--bg);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background var(--dur-micro), color var(--dur-micro); }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); }
/* GHOST — complete-chamfer cage: 1px hairline follows ALL edges incl. the cuts. */
.btn--ghost { background: transparent; }
.btn--ghost::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--line-strong); border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color var(--dur-micro); }
.btn--ghost::before { content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: var(--bg); border-radius: 0 var(--round) 0 var(--round);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color var(--dur-micro); }
.btn--ghost:hover::after { background: var(--ink); }
.btn--ghost:hover::before { background: var(--bg-elev); }

/* ── Featured ────────────────────────────────────────────────────────────── */
.featured { border-bottom: 1px solid var(--frame-line); }
.feat { display: grid; grid-template-columns: 1.05fr 1fr;
  transition: border-color var(--dur-ui) var(--ease-gravity); }
.feat:hover { border-color: var(--line-strong); }
.feat__media { position: relative; min-height: 300px; border-right: 1px solid var(--frame-line); overflow: hidden; }
.feat__field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.92; transition: opacity var(--dur-ui); }
.feat:hover .feat__field { opacity: 1; }
.feat__media .hero__scrim { background: linear-gradient(to top, var(--bg) 0%, transparent 70%); }
.feat__tag { position: absolute; left: var(--space-05); top: var(--space-05); font-size: var(--t-mono-sm);
  letter-spacing: var(--tr-label-wide); text-transform: uppercase; color: var(--ink); }
.feat__body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: var(--space-04); justify-content: center; }
.feat__title { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.4rem);
  line-height: var(--lh-snug); letter-spacing: var(--tr-title); color: var(--ink); margin: 0; text-wrap: balance; }
.feat__excerpt { font-size: var(--t-body); line-height: var(--lh-text); color: var(--read); margin: 0; }
.feat__cta { font-size: var(--t-mono-sm); letter-spacing: var(--tr-label-wide); text-transform: uppercase; color: var(--ink);
  margin-top: var(--space-02); }
.feat:hover .feat__cta { color: var(--accent); }

/* ── Stream — full-width editorial ROW list (composed with 1, 2 or many) ───── */
.stream__head, .more .stream__head { display: flex; align-items: baseline; justify-content: space-between;
  padding: clamp(24px, 2.8vw, 40px) var(--pad-x); margin: 0; border-bottom: 1px solid var(--frame-line); }
.stream__count { font-size: var(--t-mono-sm); letter-spacing: var(--tr-label-wide); text-transform: uppercase;
  color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* the list: each dispatch is a horizontal row, separated by the frame hairline.
   The whole list fills the width regardless of post count. */
.stream__list { display: flex; flex-direction: column; }
.empty { padding: clamp(28px, 4vw, 56px) var(--pad-x); font-size: var(--t-mono-sm);
  letter-spacing: var(--tr-mono); color: var(--ink-mute); }

.row { display: grid; grid-template-columns: clamp(220px, 24vw, 340px) 1fr auto; align-items: center;
  gap: clamp(24px, 3vw, 48px); padding: clamp(20px, 2.4vw, 32px) var(--pad-x);
  border-bottom: 1px solid var(--frame-line); transition: background var(--dur-ui) var(--ease-settle); }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--bg-elev); }
/* width fills the grid track; height is fixed so the media never inflates its
   column (aspect-ratio inverts width-from-height inside a center-aligned cell). */
.row__media { position: relative; width: 100%; height: clamp(120px, 11vw, 150px); overflow: hidden; }
.card__field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.78; transition: opacity var(--dur-ui); }
.row:hover .card__field { opacity: 1; }
.card__cat { position: absolute; left: var(--space-04); bottom: var(--space-04); font-size: var(--t-mono-sm);
  letter-spacing: var(--tr-label-wide); text-transform: uppercase; color: var(--ink); }
.row__body { display: flex; flex-direction: column; gap: var(--space-03); min-width: 0; }
.row__title { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink); margin: 0; text-wrap: balance; }
.row__excerpt { font-size: var(--t-body); line-height: var(--lh-text); color: var(--read-soft); margin: 0;
  max-width: 64ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .byline { margin-top: var(--space-02); }
.row__cta { align-self: center; white-space: nowrap; font-size: var(--t-mono-sm); letter-spacing: var(--tr-label-wide);
  text-transform: uppercase; color: var(--ink-mute); transition: color var(--dur-micro); }
.row:hover .row__cta { color: var(--ink); }

/* legacy compact card (kept for any grid use) */
.card { display: flex; flex-direction: column; transition: transform var(--dur-ui) var(--ease-gravity); }
.card:hover { transform: translateY(-3px); }
.card__media { position: relative; height: 150px; overflow: hidden; border: 1px solid var(--frame-line); }
.card:hover .card__field { opacity: 1; }
.card__body { padding: var(--space-05) 0 0; display: flex; flex-direction: column; gap: var(--space-04); flex: 1; }
.card__title { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink); margin: 0; }
.card__excerpt { font-size: var(--t-body-sm); line-height: var(--lh-text); color: var(--read-soft); margin: 0; flex: 1; }
.card .byline { margin-top: var(--space-02); }

/* ── Article ─────────────────────────────────────────────────────────────── */
.article { max-width: 980px; margin-inline: auto; padding-top: clamp(20px, 4vw, 48px); }
.article__back { display: inline-block; font-size: var(--t-mono-sm); letter-spacing: var(--tr-label-wide); text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: clamp(28px, 4vw, 48px); transition: color var(--dur-micro); }
.article__back:hover { color: var(--ink); }
.article__head { margin-bottom: clamp(28px, 4vw, 48px); }
.article__title { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--t-display);
  line-height: var(--lh-snug); letter-spacing: var(--tr-display); color: var(--ink); margin: var(--space-04) 0 0;
  max-width: 28ch; text-wrap: balance; }
.article__head .kicker { color: var(--ink-soft); }
.article__meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.amend { display: flex; flex-direction: column; gap: 6px; padding: var(--space-05) var(--space-06) var(--space-05) 0;
  margin-right: var(--space-06); border-right: 1px solid var(--line); }
.amend:last-child { border-right: none; margin-right: 0; }
.amend__k { font-size: var(--t-mono-sm); letter-spacing: var(--tr-label-wide); text-transform: uppercase; color: var(--ink-mute); }
.amend__v { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--t-body); color: var(--ink);
  font-variant-numeric: tabular-nums; }

.article__hero { position: relative; height: clamp(220px, 34vw, 380px);
  overflow: hidden; margin-bottom: clamp(32px, 5vw, 64px); }
.article__hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.article__hero .hero__scrim { background: radial-gradient(120% 120% at 50% 50%, var(--scrim-1), color-mix(in srgb, var(--bg) 36%, transparent) 78%); }

/* long-form body — reading measure (66ch via .measure), neutral tracking, --lh-text */
.article__body { font-size: var(--t-body-lg); line-height: var(--lh-text); letter-spacing: var(--tr-normal); color: var(--read); }
.article__body > * { margin: 0 0 var(--space-06); }
/* the lede — Clash Light lead, one optical step above body, tracked for its 20–24px band */
.article__body .lede { font-family: var(--font-sans); font-weight: var(--w-light);
  font-size: clamp(1.3rem, 1.16rem + 0.6vw, 1.5rem); line-height: 1.5; letter-spacing: var(--tr-tight);
  color: var(--ink); }
.article__body p { font-weight: var(--w-regular); }
.article__body em { font-style: italic; color: var(--ink); }
.article__body strong { font-weight: var(--w-semibold); color: var(--ink); }
.article__body h2 { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--t-h2);
  line-height: var(--lh-snug); letter-spacing: var(--tr-title); color: var(--ink);
  margin: clamp(40px, 5vw, 64px) 0 var(--space-05); padding-top: var(--space-05); border-top: 1px solid var(--line); }
.article__body h3 { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--t-h3);
  line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink);
  margin: var(--space-07) 0 var(--space-04); }
/* running-text links — real underlines (skip-ink, hairline, seated below the baseline) */
.article__body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--dur-micro); }
.article__body a:hover { text-decoration-color: var(--accent); }
.article__body ul, .article__body ol { padding-left: 0; list-style: none; }
.article__body li { position: relative; padding-left: 1.6em; margin-bottom: var(--space-04); }
.article__body ul li::before { content: '//'; position: absolute; left: 0; font-family: var(--font-mono);
  font-size: 0.78em; color: var(--ink-mute); top: 0.18em; letter-spacing: var(--tr-mono-num); }
.article__body ol { counter-reset: li; }
.article__body ol li::before { counter-increment: li; content: counter(li, decimal-leading-zero);
  position: absolute; left: 0; font-family: var(--font-mono); font-size: 0.74em; color: var(--ink-mute); top: 0.25em; }
/* pull-quote — Clash Light weight-contrast; the inset gives the hung opening
   quote (hanging-punctuation, system.css) room to breathe left of the text box */
.article__body blockquote { margin: var(--space-07) 0; padding: var(--space-02) 0 var(--space-02) var(--space-07);
  border-left: 2px solid var(--ink); font-family: var(--font-sans); font-weight: var(--w-light);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); line-height: 1.4; letter-spacing: var(--tr-tight); color: var(--ink); }
.article__body .code, .article__body pre.code { font-family: var(--font-mono); font-size: var(--t-mono); line-height: 1.6;
  letter-spacing: var(--tr-mono); background: var(--bg-elev); border: 1px solid var(--line);
  padding: var(--space-05) var(--space-06); overflow-x: auto; color: var(--read); }
.article__body code { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: var(--tr-mono); color: var(--ink);
  background: var(--bg-elev); border: 1px solid var(--line); padding: 0.08em 0.4em; }
.article__body pre.code code { background: none; border: none; padding: 0; }
.ascii-figure { border: 1px solid var(--line); background: var(--bg-elev); }
.ascii-figure pre { margin: 0; padding: var(--space-06); overflow-x: auto; font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1.4vw, 0.8rem); line-height: 1.2; color: var(--ink-soft); white-space: pre; }
.ascii-figure figcaption { font-size: var(--t-mono-sm); letter-spacing: var(--tr-mono); color: var(--ink-mute);
  padding: var(--space-04) var(--space-06); border-top: 1px solid var(--line); }

.article__sign { display: flex; align-items: center; gap: var(--space-05); max-width: var(--measure); margin: clamp(40px, 6vw, 72px) auto 0;
  padding-top: var(--space-07); border-top: 1px solid var(--line); }
.article__sign .brand__mark { width: 2.2em; height: 2.2em; opacity: 0.85; }
.article__sign p { font-size: var(--t-mono-sm); line-height: 1.7; letter-spacing: var(--tr-mono); color: var(--ink-mute); margin: 0; }

.more { max-width: var(--container-wide); margin: clamp(56px, 8vw, 110px) auto 0; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { margin: 0; padding: clamp(30px, 4vw, 56px) var(--pad-x); border-top: 1px solid var(--frame-line);
  display: flex; flex-direction: column; gap: var(--space-03); }
.foot__mark { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-sans);
  font-weight: var(--w-semibold); letter-spacing: var(--tr-label-wide); }
.foot__mark .brand__mark { width: 1em; height: 1em; }
.foot p { margin: 0; font-size: var(--t-mono-sm); letter-spacing: var(--tr-mono); color: var(--ink-mute); }
.foot__fine { color: var(--ink-faint); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .feat { grid-template-columns: 1fr; }
  .feat__media { border-right: none; border-bottom: 1px solid var(--frame-line); min-height: 220px; }
  /* drop the trailing CTA column — the whole row is the link; keep thumb │ body */
  .row { grid-template-columns: clamp(180px, 30vw, 260px) 1fr; }
  .row__cta { display: none; }
}
@media (max-width: 680px) {
  /* stack: chamfer thumb on top, body below (mirrors the featured) */
  .row { grid-template-columns: 1fr; gap: var(--space-05); }
  .row__media { width: 100%; height: clamp(170px, 46vw, 220px); }
  .row__excerpt { -webkit-line-clamp: 3; }
}
@media (max-width: 820px) {
  .land { grid-template-columns: 1fr; }
  .land__viz { border-left: none; border-top: 1px solid var(--frame-line); min-height: 220px; }
  .nav__links { gap: 14px; }
}
@media (max-width: 620px) {
  .article__meta { flex-direction: column; }
  .amend { border-right: none; margin-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .amend:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
  .nav { gap: var(--space-04); padding: 0 12px; }
  .nav__links { gap: 11px; }
  .nav__links a { font-size: 0.58rem; letter-spacing: var(--tr-label); }
  .nav__brand span { font-size: 0.9rem; }
  .nav__toggle { padding: 0.42em 0.5em; font-size: 0.54rem; }
}

/* The nav CTA (cage, hover inversion, white-space) is governed by the canonical
   system.css now — kept identical to every other page. The blog no longer hides it
   below 1100px; it collapses into the shared mobile drawer like the rest. */

/* portal content blocks — images between paragraphs, dividers */
.post-figure { margin: var(--space-07) 0; }
.post-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.post-figure figcaption { margin-top: var(--space-03); font-size: var(--t-mono-sm); letter-spacing: var(--tr-mono); color: var(--ink-mute); }
.post-rule { border: none; border-top: 1px solid var(--line-strong); width: 38%; margin: var(--space-08) auto; }

/* ── ASCII-treated social icons (under the article meta) ─────────────────────
   A restrained row: the mono "Also posted on" label + three squared hairline
   tiles whose canvases hold the platform logo rendered in the brand density ramp.
   Pure monochrome; works in both themes via tokens (icon ink follows --ink). */
.article__socials {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-04);
  margin-top: clamp(20px, 2.6vw, 30px);
}
.article__socials__lbl {
  font-size: var(--t-mono-sm); letter-spacing: var(--tr-label-wide); text-transform: uppercase;
  color: var(--ink-mute);
}
.article__socials__row {
  display: inline-flex; align-items: center; gap: 10px;
}
.soc {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 0;
  background: transparent;
  color: var(--ink);
  transition: border-color var(--dur-micro), transform var(--dur-micro), background var(--dur-micro);
}
.soc:hover, .soc:focus-visible {
  border-color: var(--ink);
  transform: translateY(-2px);
  outline: none;
}
.soc:focus-visible { box-shadow: 0 0 0 1px var(--ink); }
.soc:active { transform: translateY(0); }
.soc__ascii {
  display: block; pointer-events: none;
  /* the canvas sizes itself (JS sets width/height to its bitmap); center it */
  max-width: 38px; max-height: 38px;
  margin: auto;
}
@media (max-width: 620px) {
  .article__socials { gap: var(--space-03); }
  .soc { width: 42px; height: 42px; }
}