/* =============================================================
   Notes — editorial archive
   Inherits the Carbon dark substrate from the index.
   No fluid background here; the archive reads first.
   ============================================================= */

:root {
  --t-11:  0.6875rem;
  --t-13:  0.8125rem;
  --t-14:  0.875rem;
  --t-17:  1.0625rem;
  --t-19:  1.1875rem;
  --t-22:  1.375rem;
  --t-28:  1.7777rem;
  --t-38:  2.369rem;
  --t-50:  3.157rem;
  --t-72:  4.5rem;
  --t-112: 7rem;

  --ff-sans:    "IBM Plex Sans", system-ui, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --ff-serif:   "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --ff-display: "Instrument Serif", "Source Serif 4", Georgia, serif;

  --bg:        #ffffff;
  --ink:       oklch(0.16 0.008 250);
  --ink-2:     oklch(0.34 0.008 250);
  --ink-3:     oklch(0.55 0.008 250);
  --rule:      oklch(0.86 0.006 248);
  --rule-2:    oklch(0.93 0.005 248);
  --accent:    oklch(0.50 0.17 254);
  --accent-bright: oklch(0.44 0.19 254);
  --accent-tint: oklch(0.78 0.14 254 / 0.30);

  --bg-veil:    rgba(255, 255, 255, 0.82);
  --row-hover:  oklch(0.96 0.005 250 / 0.7);
  --shadow-corner: 0 0 12px rgba(255,255,255,0.75);
  --error:      oklch(0.52 0.20 25);

  --col:      720px;
  --col-wide: 920px;
  --col-full: 1240px;
}

[data-theme="dark"] {
  --bg:        #000000;
  --ink:       oklch(0.97 0.004 248);
  --ink-2:     oklch(0.72 0.006 250);
  --ink-3:     oklch(0.45 0.008 250);
  --rule:      oklch(0.24 0.006 248);
  --rule-2:    oklch(0.18 0.005 248);
  --accent:    oklch(0.78 0.18 254);
  --accent-bright: oklch(0.86 0.15 254);
  --accent-tint: oklch(0.55 0.16 254 / 0.28);

  --bg-veil:    rgba(0, 0, 0, 0.82);
  --row-hover:  oklch(0.10 0.005 250 / 0.6);
  --shadow-corner: 0 0 12px rgba(0,0,0,0.6);
  --error:      oklch(0.72 0.18 25);
}

html, body { transition: background-color 240ms ease, color 240ms ease; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: var(--t-17);
  line-height: 1.55;
  font-feature-settings: "ss01","kern","liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0 0 160px;
  min-height: 100vh;
}
[id] { scroll-margin-top: 96px; }
::selection { background: var(--accent-tint); color: var(--ink); }

a { color: inherit; text-decoration: none; }

/* ── Corner markers ───────────────────────────────────────── */
.corner {
  position: fixed; z-index: 45;
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3); pointer-events: none; line-height: 1.4;
  text-shadow: var(--shadow-corner);
  opacity: 0; transition: opacity 600ms ease;
}
.corner.is-visible { opacity: 1; }
.corner b { color: var(--ink); font-weight: 500; }
.corner--tl { top: 24px; left: 32px; }
.corner--tr { top: 24px; right: 32px; text-align: right; }
.corner--bl { bottom: 24px; left: 32px; }
.corner--br { bottom: 24px; right: 32px; text-align: right; }
@media (max-width: 900px) { .corner { display: none; } }

/* ── Reading progress ─────────────────────────────────────── */
.read-progress {
  position: fixed; inset: 0 0 auto 0; height: 1px;
  z-index: 60; pointer-events: none;
  opacity: 0; transition: opacity 600ms ease;
}
.read-progress.is-visible { opacity: 1; }
.read-progress__bar { height: 100%; background: var(--accent); width: 0%; transition: width 80ms linear; }

/* ── Masthead ─────────────────────────────────────────────── */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 48px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--rule-2);
  opacity: 0; transform: translateY(-100%);
  transition: opacity 500ms ease, transform 500ms ease;
}
.masthead.is-visible { opacity: 1; transform: translateY(0); }
.masthead__name {
  font-family: var(--ff-mono); font-size: var(--t-13);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  font-weight: 500;
  transition: color 200ms ease;
}
.masthead__name:hover { color: var(--accent-bright, var(--accent)); }
.masthead__name .sep { color: var(--ink-3); padding: 0 8px; }
.masthead__name .crumb { color: var(--ink); }
.masthead__ext { display: flex; gap: 24px; align-items: center; }
.masthead__toggle {
  background: transparent;
  border: none;
  border-right: 1px solid var(--rule);
  padding: 4px 14px 4px 4px;
  margin: 0 -4px 0 -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  transition: color 200ms ease, transform 240ms ease;
}
.masthead__toggle:hover { color: var(--accent-bright, var(--accent)); }
.masthead__toggle:active { transform: rotate(-22deg); }
.masthead__toggle .icon-sun { display: none; }
.masthead__toggle .icon-moon { display: inline; }
[data-theme="dark"] .masthead__toggle .icon-sun { display: inline; }
[data-theme="dark"] .masthead__toggle .icon-moon { display: none; }
.masthead__ext a {
  display: inline-flex;
  color: var(--ink);
  transition: color 200ms ease;
}
.masthead__ext a:hover { color: var(--accent-bright, var(--accent)); }
.masthead__link {
  font-family: var(--ff-mono);
  font-size: var(--t-13);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--ink);
  padding: 4px 14px 4px 0;
  border-right: 1px solid var(--rule);
  margin-right: -4px;
  transition: color 200ms ease;
}
.masthead__link:hover { color: var(--accent-bright, var(--accent)); }
@media (max-width: 760px) {
  .masthead { padding: 14px 20px; }
  .masthead__ext { gap: 16px; }
  .masthead__link { display: none; }
}

/* ── Hero (masthead block on first scroll page) ───────────── */
.banner {
  max-width: var(--col-full);
  margin: 0 auto;
  padding: 140px 48px 0;
}
.banner__series {
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
}
.banner__series b { color: var(--ink); font-weight: 500; }
.banner__series .spacer { flex: 1; height: 1px; }

.hero {
  max-width: var(--col-full);
  margin: 0 auto;
  padding: clamp(80px, 8vw, 120px) 48px clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.hero__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--ink-2);
}
.hero__meta {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-3);
}
.hero__meta > div { display: flex; flex-direction: column; gap: 6px; }
.hero__meta .label { color: var(--ink-3); }
.hero__meta .value { color: var(--ink); font-weight: 500; letter-spacing: 0.06em; }
.hero__lede {
  font-family: var(--ff-serif);
  font-size: var(--t-22);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  max-width: none;
  margin: 0;
  text-wrap: pretty;
}
.hero__lede em { color: var(--ink-2); font-style: italic; }

@media (max-width: 760px) {
  .banner, .hero { padding-left: 20px; padding-right: 20px; }
}

/* ── Index header (column labels above stream) ────────────── */
.index-head {
  max-width: var(--col-full);
  margin: 0 auto;
  padding: 20px 48px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 48px 64px 1fr 72px;
  gap: 28px;
  align-items: baseline;
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
}
.index-head > span { color: var(--ink); font-weight: 500; }
.index-head > span.col-no { color: var(--accent); }
.index-head .col-no { font-size: var(--t-14); letter-spacing: 0.06em; line-height: 1; }
@media (max-width: 1000px) { .index-head { grid-template-columns: 48px 1fr 60px; }
  .index-head .col-date, .index-head .col-tag { display: none; } }
@media (max-width: 760px) { .index-head { padding-left: 20px; padding-right: 20px; } }

/* ── Post stream ──────────────────────────────────────────── */
.stream {
  --stream-gutter: 48px;
  max-width: var(--col-full);
  margin: 0 auto;
  padding: 0 var(--stream-gutter);
  list-style: none;
}
.stream__item {
  display: grid;
  grid-template-columns: 48px 64px 260px 1fr 72px;
  gap: 28px;
  margin-inline: calc(-1 * var(--stream-gutter));
  padding: clamp(36px, 5vw, 56px) var(--stream-gutter);
  border-bottom: 1px solid var(--rule-2);
  align-items: start;
  transition: background-color 240ms ease;
  position: relative;
}
.stream__item:hover {
  background: var(--row-hover);
}
.stream__item:hover .stream__title { color: var(--accent); }
.stream__item:hover .stream__no { color: var(--accent); }

.stream__no {
  font-family: var(--ff-mono);
  font-size: var(--t-22);
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  line-height: 1;
  padding-top: 6px;
  transition: color 200ms ease;
}
.stream__date {
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-2);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}
.stream__date .y {
  color: var(--ink-3);
  font-size: var(--t-11);
  letter-spacing: 0.10em;
}
.stream__date .md {
  color: var(--ink);
  font-weight: 500;
  font-size: var(--t-13);
  letter-spacing: 0.08em;
}
.stream__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stream__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  transition: color 200ms ease;
}
.stream__dek {
  font-family: var(--ff-serif);
  font-size: var(--t-17);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
  max-width: 60ch;
}
.stream__tags {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 6px;
}
.stream__tag {
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-3);
}
.stream__tag::before { content: "·"; padding-right: 12px; color: var(--ink-3); }
.stream__tag:first-child::before { content: ""; padding-right: 0; }

.stream__thumb {
  aspect-ratio: 3 / 2;
  width: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 13px,
      var(--rule-2) 13px 14px
    );
  border: 1px solid var(--rule-2);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  align-self: start;
}
.stream__thumb.has-image {
  background: none;
  border-color: transparent;
}
.stream__thumb.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 400ms ease;
}
.stream__item:hover .stream__thumb.has-image img {
  transform: scale(1.03);
}
.stream__thumb-label {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-3);
  line-height: 1.4;
}
.stream__thumb-label b { color: var(--ink-2); font-weight: 500; }
/* placeholder marks */
.stream__thumb svg { width: 80%; height: 72%; opacity: 0.6; margin-bottom: 18px; }
.stream__thumb-mark {
  position: absolute;
  top: 10px; left: 12px;
  font-family: var(--ff-mono); font-size: var(--t-11);
  letter-spacing: 0.14em;
  color: var(--accent);
}

.stream__read {
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-2);
  text-align: right;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.stream__read .arrow {
  display: inline-block;
  transition: transform 220ms ease, color 220ms ease;
  color: var(--ink-3);
}
.stream__item:hover .stream__read .arrow {
  transform: translateX(6px);
  color: var(--accent);
}
.stream__min { color: var(--ink); font-weight: 500; }

/* No-image rows: span the body across the thumb column */
.stream__item.no-thumb { grid-template-columns: 48px 64px 1fr 72px; }
.stream__item.no-thumb .stream__body { max-width: 760px; }
.stream__item.no-thumb .stream__dek { font-size: var(--t-19); max-width: 64ch; }

/* Image rows: image left, №/date stacked above title, image taller */
.stream__item:has(.stream__thumb.has-image) {
  grid-template-columns: 360px 1fr 72px;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
}
.stream__item:has(.stream__thumb.has-image) .stream__thumb {
  grid-column: 1; grid-row: 1 / 5;
  aspect-ratio: 4 / 3;
  align-self: start;
  min-height: unset;
}
.stream__item:has(.stream__thumb.has-image) .stream__no {
  grid-column: 2; grid-row: 1;
  font-size: var(--t-11);
  letter-spacing: 0.14em;
  color: var(--ink-3);
  padding-top: clamp(28px, 4vw, 44px);
}
.stream__item:has(.stream__thumb.has-image) .stream__date {
  grid-column: 2; grid-row: 2;
  flex-direction: row; gap: 8px; align-items: baseline;
  padding-top: 4px;
}
.stream__item:has(.stream__thumb.has-image) .stream__body {
  grid-column: 2; grid-row: 3;
}
.stream__item:has(.stream__thumb.has-image) .stream__read {
  grid-column: 3; grid-row: 1;
  padding-top: clamp(28px, 4vw, 44px);
}
.stream__item:has(.stream__thumb.has-image) .stream__title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  margin-top: 14px;
}
.stream__item:has(.stream__thumb.has-image) .stream__body { padding-bottom: clamp(28px, 4vw, 44px); }

/* Featured (lead) — full-bleed image above title block */
.featured {
  --stream-gutter: 48px;
  max-width: var(--col-full);
  margin: 0 auto;
  padding: 64px var(--stream-gutter) 0;
}
.featured__item {
  display: block;
  margin-inline: calc(-1 * var(--stream-gutter));
  padding: 0 0 clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--rule-2);
  text-decoration: none;
  color: inherit;
  transition: background-color 240ms ease;
}
.featured__item:hover {
  background: var(--row-hover);
}
.featured__mark {
  display: flex; align-items: baseline; gap: 18px;
  margin-inline: calc(-1 * var(--stream-gutter));
  padding: 0 var(--stream-gutter) 14px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
}
.featured__mark b { color: var(--ink); font-weight: 500; }
.featured__mark .accent { color: var(--accent); }
.featured__mark .spacer { flex: 1; height: 1px; }

.featured__art {
  aspect-ratio: 21 / 9;
  width: 100%;
  margin: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      var(--rule-2) 14px 15px
    );
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.featured__art.has-image {
  aspect-ratio: auto;
  background: none;
  overflow: hidden;
}
.featured__art.has-image img {
  display: block;
  width: 100%;
  height: auto;
}
.featured__art-mark {
  position: absolute;
  top: 16px; left: 20px;
  font-family: var(--ff-mono); font-size: var(--t-11);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.featured__art-label {
  position: absolute;
  bottom: 16px; left: 20px;
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-2);
}
.featured__art-label b { color: var(--ink); font-weight: 500; }
.featured__art-cap {
  position: absolute;
  bottom: 16px; right: 20px;
  font-family: var(--ff-mono); font-size: var(--t-11);
  letter-spacing: 0.10em;
  color: var(--ink-3);
}

.featured__row {
  display: grid;
  grid-template-columns: 96px 1fr 240px;
  gap: 32px;
  padding: 28px var(--stream-gutter) 8px;
}
.featured__row .stream__date { padding-top: 4px; }
.featured__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
  transition: color 200ms ease;
}
.featured__item:hover .featured__title { color: var(--accent); }
.featured__item:hover .stream__date .md { color: var(--accent); }
.featured__dek {
  font-family: var(--ff-serif);
  font-size: var(--t-22);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 64ch;
  text-wrap: pretty;
}
.featured__tags { display: flex; gap: 12px; flex-wrap: wrap; }
.featured__read {
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-2);
  text-align: right;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.featured__read .min { color: var(--ink); font-weight: 500; font-size: var(--t-17); letter-spacing: 0.04em; }
.featured__read .arrow { transition: transform 220ms ease, color 220ms ease; color: var(--ink-3); }
.featured__item:hover .featured__read .arrow { transform: translateX(6px); color: var(--accent); }

@media (max-width: 1000px) {
  .featured { --stream-gutter: 24px; }
  .stream { --stream-gutter: 24px; }
  .stream__item.no-thumb { grid-template-columns: 48px 1fr 60px; gap: 20px; }
  .stream__item .stream__date { display: none; }
  .index-head { grid-template-columns: 48px 1fr 60px; }
  .index-head .col-date { display: none; }
}

@media (max-width: 680px) {
  /* ── Hero ── */
  .hero { padding: 60px 20px 36px; gap: 28px; }
  .hero__title { font-size: clamp(3rem, 13vw, 5rem); line-height: 0.9; }
  .hero__lede { font-size: var(--t-17); }
  .hero__meta { padding-top: 14px; }
  .banner, .hero { padding-left: 20px; padding-right: 20px; }

  /* ── Featured ── */
  .featured { --stream-gutter: 20px; padding-top: 0; }
  .featured__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 20px 24px;
  }
  .featured__read { flex-direction: row; align-items: center; gap: 16px; text-align: left; }
  .featured__title { font-size: clamp(1.6rem, 6vw, 2.4rem); margin-bottom: 10px; }
  .featured__dek { font-size: var(--t-17); margin-bottom: 12px; }

  /* ── Stream index-head ── */
  .index-head { display: none; }

  /* ── Stream items: fully stacked ── */
  .stream { --stream-gutter: 20px; }
  .stream__item,
  .stream__item.no-thumb {
    display: block;
    padding: 24px 0;
  }
  .stream__no {
    display: inline;
    font-size: var(--t-11);
    color: var(--ink-3);
    margin-right: 10px;
  }
  .stream__date {
    display: inline-flex !important;
    flex-direction: row;
    gap: 6px;
    font-size: var(--t-11);
    color: var(--ink-3);
    margin-bottom: 10px;
  }
  .stream__date .y { display: none; }
  .stream__body { display: flex; flex-direction: column; gap: 8px; }
  .stream__title { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .stream__dek { font-size: var(--t-17); }
  .stream__read {
    display: block;
    margin-top: 12px;
    font-size: var(--t-11);
  }
  .stream__min { display: none; }

  /* ── Subscribe / footer ── */
  .subscribe { flex-direction: column; gap: 12px; padding: 28px 20px; }
  .colophon { padding: 28px 20px; }
}

/* ── Topic index (footer-ish) ─────────────────────────────── */
.topics {
  max-width: var(--col-full);
  margin: clamp(64px, 9vw, 120px) auto 0;
  padding: 32px 48px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
.topics__lbl {
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent);
}
.topics__lbl-sub {
  display: block;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: var(--t-11);
  letter-spacing: 0.10em;
}
.topics__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 32px;
  list-style: none;
  padding: 0; margin: 0;
}
.topics__list li {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--ff-sans);
  font-size: var(--t-14);
  color: var(--ink);
}
.topics__list .count {
  font-family: var(--ff-mono); font-size: var(--t-11);
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
@media (max-width: 760px) {
  .topics { padding: 24px 20px; grid-template-columns: 1fr; gap: 24px; }
}

/* ── Footer ───────────────────────────────────────────────── */
.subscribe {
  max-width: var(--col-full);
  margin: clamp(64px, 9vw, 120px) auto 0;
  padding: 40px 48px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
.subscribe__lbl {
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 8px;
}
.subscribe__lbl-sub {
  display: block;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: var(--t-11);
  letter-spacing: 0.10em;
  line-height: 1.5;
  max-width: 200px;
}
.subscribe__form {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 24px;
  align-items: end;
  max-width: 640px;
}
.subscribe__form .field { display: flex; flex-direction: column; gap: 8px; }
.subscribe__form .field__lbl {
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-2);
}
.subscribe__form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--ff-serif);
  font-size: var(--t-22);
  padding: 6px 0 8px;
  outline: none;
  border-radius: 0;
  width: 100%;
  transition: border-color 220ms ease;
}
.subscribe__form input::placeholder { color: var(--ink-3); font-style: italic; }
.subscribe__form input:focus { border-bottom-color: var(--accent); }
.subscribe__submit {
  align-self: end;
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 8px 0 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--accent);
  transition: color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}
.subscribe__submit:hover:not(:disabled) {
  color: var(--accent-bright, var(--accent));
  border-bottom-color: var(--accent-bright, var(--accent));
  transform: translateX(4px);
}
.subscribe__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.subscribe__msg {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-2);
}
.subscribe__msg.is-error { color: var(--error); }
.subscribe__note {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-3);
  line-height: 1.6;
}
.subscribe__note a { color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.subscribe__note a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.subscribe.follow {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.follow__cta {
  margin: 0;
  justify-self: end;
}
.follow__cta .carbon-link {
  font-family: var(--ff-mono);
  font-size: var(--t-14);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.follow__cta .arrow {
  color: var(--ink-3);
  transition: transform 220ms ease, color 220ms ease;
}
.follow__cta .carbon-link:hover .arrow {
  transform: translateX(4px);
  color: var(--accent-bright, var(--accent));
}
@media (max-width: 760px) {
  .subscribe { padding: 28px 20px; grid-template-columns: 1fr; gap: 20px; }
  .subscribe.follow { align-items: start; }
  .follow__cta { justify-self: start; }
  .subscribe__form { grid-template-columns: 1fr; gap: 18px; }
  .subscribe__submit { justify-self: start; }
}

.colophon {
  max-width: var(--col-full);
  margin: clamp(60px, 8vw, 96px) auto 0;
  padding: 28px 48px;
  font-family: var(--ff-mono); font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-3);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
  line-height: 1.7;
}
.colophon b { color: var(--ink); font-weight: 500; }
.colophon__aside {
  text-align: right;
  max-width: 36ch;
}
.colophon__heading {
  margin-bottom: 10px;
}
.colophon__heading b {
  color: var(--accent);
  font-weight: 500;
}
.colophon__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.colophon a { color: var(--ink-2); border-bottom: 1px solid var(--rule); transition: color 200ms ease, border-color 200ms ease; }
.colophon a:hover {
  color: var(--accent-bright, var(--accent));
  border-bottom-color: var(--accent-bright, var(--accent));
}
@media (max-width: 760px) {
  .colophon { padding: 24px 20px; grid-template-columns: 1fr; gap: 16px; }
  .colophon__aside { text-align: left; max-width: none; }
}

/* Accent-forward links in prose blocks */
.carbon-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.carbon-link:hover {
  color: var(--accent-bright, var(--accent));
  border-bottom-color: var(--accent-bright, var(--accent));
}

[data-theme="dark"] .hero__title em { color: var(--accent); }
[data-theme="dark"] .stream__item:hover .stream__title,
[data-theme="dark"] .stream__item:hover .stream__no,
[data-theme="dark"] .featured__item:hover .featured__title,
[data-theme="dark"] .featured__item:hover .stream__date .md,
[data-theme="dark"] .featured__item:hover .featured__read .arrow {
  color: var(--accent-bright, var(--accent));
}