/* ============================================================
   imbros.ai — CCI manifesto pages (/articles/)
   Carried over from dilman.tech site.css on 2026-10-05 (build #117), when the
   manifesto moved here, so the pages render exactly as they did on dilman.tech.
   Only change: the brand dot is the imbros blue. The rest of imbros.ai keeps
   using /site.css.
   ============================================================ */

/* Self-hosted fonts — no third-party requests (privacy / GDPR).
   Inter (body) + JetBrains Mono (mono accents), latin subset, files in /fonts.
   Add the latin-ext subset here if/when a Turkish variant ships. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/inter-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrains-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* Themes: one foreground over one background, plus a dim tone. */
[data-theme="amber"] { --bg: #15130f; --fg: #c2924e; --dim: #6f5a37; }
[data-theme="green"] { --bg: #000000; --fg: #84b184; --dim: #4d684d; }
[data-theme="mono"]  { --bg: #000000; --fg: #cabfa8; --dim: #756f5f; }
[data-theme="light"] { --bg: #faf7f0; --fg: #2a2620; --dim: #8a8474; }
/* The imbros blue, ported here for the CCI section. CCI pages default to this
   skin (own cci_theme key) so the colour lands on arrival; the picker stays
   functional for low-vision readers. --dim is the AA-passing 4.88:1 tone. */
[data-theme="blue"]  { --bg: #06080d; --fg: #6f93b4; --dim: #66809a; }

:root {
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brand: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rule: color-mix(in oklab, var(--dim) 55%, transparent);
  --maxw: 64ch;
  /* Brand marks stay constant across themes (the original logo identity). */
  --brand-terra: #C66846;   /* the wordmark name */
  --brand-dot:   #1D7CD5;   /* imbros.ai dot is blue */
  --brand-blue:  #1D7CD5;   /* imbros.ai signature blue: imbros dot + CCI accent */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
a:hover { background: var(--fg); color: var(--bg); }

/* ── Sticky header: wordmark left, theme picker right ───────── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transition: background-color .2s ease;
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap;
  padding-top: 12px; padding-bottom: 12px;
}
.brand-row {
  display: flex; align-items: baseline;
  gap: clamp(14px, 2.6vw, 26px); flex-wrap: wrap;
}

/* Wordmark: the original logo style (Helvetica Neue 800, lowercase).
   Name + dot are constant brand colors; the TLD follows the theme. */
.brand {
  font-family: var(--brand); font-weight: 800; font-size: 23px;
  letter-spacing: -0.04em; line-height: 1; text-decoration: none;
  white-space: nowrap;
}
.brand:hover { background: none; }
.brand__name { color: var(--brand-terra); }
.brand__dot  { color: var(--brand-dot); }
.brand__tld  { color: var(--fg); }

.themes {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em;
  display: flex; align-items: center; gap: 0.9em; flex-wrap: wrap;
}
.themes .lbl { color: var(--dim); }
.theme-opt {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: var(--dim); cursor: pointer; text-decoration: none;
}
.theme-opt:hover { color: var(--fg); background: none; }
.theme-opt[aria-pressed="true"] {
  color: var(--fg); text-decoration: underline; text-underline-offset: 3px;
}

/* ── Main column ────────────────────────────────────────────── */
main { display: block; }
/* vertical only — keep the side padding from .wrap so the header and the
   body text share the same left edge */
.page { padding-top: clamp(16px, 3vh, 34px); padding-bottom: 14vh; line-height: 1.5; }

.page-title {
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.01em;
  margin: 0 0 1.2em;
}
p { margin: 0 0 1.1em; }
.tagline { margin-bottom: 1.1em; }

/* Section kicker (the build / signal) */
.section-label {
  font-family: var(--mono); font-size: 13px; color: var(--dim);
  letter-spacing: 0.22em; text-transform: uppercase; margin: 2.8em 0 0.8em;
  display: flex; align-items: center; gap: 0.6em;
}
/* Tiny section glyph: inherits the dim label color, recolors with theme,
   sized in em so it scales with the label on every screen. */
.section-label__icon {
  width: 1.05em; height: 1.05em; flex: none;
  opacity: 0.85; transform: translateY(-0.5px);
}
/* keep anchored sections clear of the sticky header */
[id] { scroll-margin-top: 84px; }

nav.links { margin: 1.8em 0 0; }
nav.links a { display: block; margin-bottom: 0.4em; text-decoration: underline; }
nav.links a::before { content: "> "; color: var(--dim); }

/* Highlighted platform entries (the build): title in brand terracotta,
   a little space, then the description. */
.platform { margin: 0 0 1.5em; }
.platform__name { color: var(--brand-terra); font-weight: 600; margin: 0 0 0.3em; }
.platform__desc { margin: 0; }

/* ── Footer ─────────────────────────────────────────────────── */
footer.foot { margin-top: 2.8em; color: var(--dim); font-size: 14px; }
footer.foot a { color: var(--dim); text-decoration: underline; }
footer.foot a:hover { background: var(--dim); color: var(--bg); }
footer.foot .social a { margin-right: 1.1em; white-space: nowrap; }
footer.foot .copy { margin-top: 1em; }

/* ── Article pages ──────────────────────────────────────────── */
.meta {
  font-family: var(--mono); font-size: 13px; color: var(--dim);
  letter-spacing: 0.04em; margin: 0 0 1.4em;
}
.article-title {
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}
.dek {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.4; color: var(--fg); opacity: 0.88;
  margin: 0 0 1.6em;
}
/* Guest byline (companion challenge pages): names the machine author so a reader
   arriving cold cannot mistake the piece for the host's own essay. */
.byline { font-size: 15px; line-height: 1.5; color: var(--dim); margin: 0 0 1.1em; }
.byline strong { color: var(--fg); font-weight: 600; }
/* Per-summary "read in full" link: a clear standalone call to action so each
   essay link reads as navigation, not as inline emphasis on a name. */
.readmore { margin: -0.2em 0 2.1em; font-size: 14.5px; line-height: 1.45; }
.readmore a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.readmore a:hover { border-bottom-color: var(--fg); }
.readmore .arr { color: var(--dim); }
.note {
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  line-height: 1.55; color: var(--dim);
  border-left: 2px solid var(--brand-terra);
  padding-left: 0.9em;
  margin: 0 0 2em;
  max-width: 60ch;
}

.act { margin: 2.8em 0 1.2em; }
.act__label {
  font-family: var(--mono); font-size: 13px; color: var(--dim);
  letter-spacing: 0.24em; text-transform: uppercase;
}
.act__title {
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 600; line-height: 1.15; margin: 0.3em 0 0;
}

.prose p { margin: 0 0 1.1em; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

/* Section headlines (character-sheet stats, build platforms): brand
   terracotta. A <br> after the title/tagline drops the body to its own line. */
.prose strong.stat-name { color: var(--brand-terra); }
/* Run-in property leads (CCI definition list): terracotta at the paragraph start. */
.prose strong.lead { color: var(--brand-terra); }
/* The italic tagline right after a stat title shares the terracotta, stays italic. */
.prose strong.stat-name + em { color: var(--brand-terra); }

.pull {
  border-left: 2px solid var(--dim);
  padding-left: 18px; margin: 1.7em 0;
  font-size: clamp(21px, 3.2vw, 28px);
  font-weight: 500; line-height: 1.28; letter-spacing: -0.01em;
}
.pull--terra { color: var(--brand-terra); border-left-color: var(--brand-terra); }
.prose .terra { color: var(--brand-terra); }
.pause {
  text-align: center; color: var(--brand-terra);
  font-size: clamp(17px, 2.4vw, 20px); line-height: 1.5;
  max-width: 34ch; margin: 2.8em auto;
}

/* A real typeset equation (native MathML, no third-party deps): centered
   display, no quote border, recolors with the theme via currentColor. */
.formula { border-left: 0; padding-left: 0; text-align: center; font-weight: 400; }
.formula math { color: inherit; font-size: clamp(22px, 5.5vw, 44px); }

/* Sources list (CCI articles): a clean scannable list, terracotta bullet only,
   plain-bold topic lead per item. Ported from the imbros Synapse Dispatch style. */
.sources { margin: 1.1em 0 0; }
.sources__note { color: var(--dim); font-size: 14px; font-style: italic; margin: 0 0 1.1em; }
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li {
  font-size: 15px; line-height: 1.55; margin-bottom: 0.9em;
  padding-left: 1.1em; text-indent: -1.1em; max-width: 66ch;
}
.sources li::before { content: "\2022  "; color: var(--brand-terra); }
.sources li strong { font-weight: 600; }

/* CCI bold, same color as body text; imbros.ai dot always blue in prose. */
.cci  { font-weight: 600; }
.idot { color: var(--brand-blue); }

/* The terminal "READY" prompt: mono, bold, stable white phosphor (it does NOT
   blink — the blinking .cursor placed right after it is what waits for input).
   Rendered monochrome (neutral, not the theme accent): near-black on the light
   mood, bright off-white on the dark moods. Mono's background is black, so READY
   stays bright there rather than vanishing. */
.prose .ready {
  font-family: var(--mono); font-weight: 600; letter-spacing: 0.04em;
  color: #e6e9ec;
}
[data-theme="light"] .prose .ready { color: #14110c; }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* The single themed "screen" visual per article. Recolors with theme. */
.screen {
  border: 1px solid var(--rule);
  padding: clamp(30px, 6vw, 56px) 24px;
  margin: 2.2em 0; text-align: center;
  font-family: var(--mono);
}
.screen__head {
  color: var(--dim); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.6em;
}
.screen__big {
  font-size: clamp(28px, 7vw, 54px);
  font-weight: 600; letter-spacing: 0.04em; line-height: 1.12;
}
.screen__sub { color: var(--dim); margin-top: 1.2em; font-size: 14px; line-height: 1.5; }

/* Bloom staircase (CCI Part 6) — pure CSS, recolors with the mood picker */
.bloom { border: 1px solid var(--rule); padding: 1.6em 1.5em 1.4em; margin: 2.4em 0; }
.bloom__head { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--dim); margin-bottom: 1.3em; }
.bloom__step { border-left: 3px solid var(--rule); padding: 0.4em 0 0.4em 0.95em; margin: 0 0 3px calc(var(--i) * clamp(6px, 3.5vw, 34px)); }
.bloom__step--up { border-left-color: var(--brand-terra); }
.bloom__verb { display: block; font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--dim); }
.bloom__step--up .bloom__verb { color: var(--fg); }
.bloom__subs { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; }
.bloom__legend { margin-top: 1.3em; font-size: 13px; color: var(--dim); display: flex; gap: 1.6em; flex-wrap: wrap; }
.bloom__legend .k::before { content: "\258D"; margin-right: 0.4em; }
.bloom__legend .k--up::before { color: var(--brand-terra); }
.bloom__legend .k--down::before { color: var(--dim); }

/* Closing transmission band (cross-link to imbros.ai) */
.transmission {
  border-top: 1px solid var(--rule);
  margin-top: 3.2em; padding-top: 2em;
}
.transmission .lbl {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.8em;
}
.transmission h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 600; margin: 0 0 0.6em; }

.cursor {
  display: inline-block; width: 0.55ch; height: 1.05em;
  background: var(--fg); vertical-align: -0.12em; margin-left: 0.1ch;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── The synaptic node network (CCI articles) ─────────────────
   Ported from imbros. Empty rings are minds; the glowing ones are
   active operators; CCI glows softly at the centre. Single-hue, so
   it recolors with the theme (blue in the CCI section). */
.mindmap { color: var(--fg); max-width: 440px; margin: 1.8em auto 0.6em; }
.mindmap svg { width: 100%; height: auto; display: block; }
.mindmap .spoke { stroke: currentColor; stroke-width: 0.9; opacity: 0.22; }
.mindmap .node {
  fill: var(--bg);
  stroke: color-mix(in oklab, var(--fg) 55%, transparent); stroke-width: 1;
}
.mindmap .node--on {
  fill: color-mix(in oklab, var(--fg) 78%, white);
  stroke: none;
  filter: drop-shadow(0 0 2.5px color-mix(in oklab, var(--fg) 50%, transparent));
}
.mindmap .cci-clear { fill: var(--bg); filter: blur(5px); }
.mindmap .cci-label {
  fill: color-mix(in oklab, var(--fg) 72%, white);
  font-family: var(--sans); font-size: 30px; font-weight: 500; letter-spacing: 0.06em;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--fg) 55%, transparent));
}
.mindmap__cap {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  text-align: center; letter-spacing: 0.04em; margin: 0.4em 0 0;
}

/* ── Comparison table (Part 1 §V: Digital AI vs CCI) ──────────
   Themed, borderless rows, mono header. Scrolls on narrow screens. */
.ctable-wrap { margin: 2em 0; overflow-x: auto; }
.ctable { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.ctable th, .ctable td {
  text-align: left; vertical-align: top;
  padding: 0.7em 1em 0.7em 0; border-bottom: 1px solid var(--rule);
}
.ctable thead th {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}
.ctable tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; }
.ctable td:last-child { color: var(--brand-terra); }

@media (max-width: 460px) {
  .themes { font-size: 11px; gap: 0.7em; }
  .brand { font-size: 20px; }
  .mindmap .cci-label { font-size: 27px; }
  .ctable { font-size: 13.5px; }
}

/* ── Signals (short-form stream) ──────────────────────────────
   A Signal is a lighter article and reuses .meta / .article-title /
   .dek / .prose / .screen / .pull / .transmission + the shared
   header and footer. These are the only Signal-specific additions:
   the list rows, a lighter closing line, and the interactive island. */

/* List page rows: number + date + dek (decision #2). */
.signal-list { margin: 1.8em 0 0; }
.signal-row {
  display: block; text-decoration: none;
  padding: 1.2em 0; border-bottom: 1px solid var(--rule);
}
.signal-row:hover { background: none; }
.signal-row:hover .signal-row__title { color: var(--brand-terra); }
.signal-row__meta {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.4em;
}
.signal-row__title { font-size: clamp(19px, 2.8vw, 24px); font-weight: 600; line-height: 1.2; color: var(--fg); }
.signal-row__dek { color: var(--dim); margin-top: 0.35em; font-size: 15.5px; line-height: 1.5; }
.signal-row--queued { opacity: 0.6; }
.signal-row--queued .signal-row__title { font-weight: 500; }

/* Homepage streams (hybrid A+C): the four labeled sections, but the
   header + row text follow the mood (amber by default), so the body
   stays one color, consistent with dilman.tech and the picker. The
   category color lives only in the filled pill tags. */
.stream .section-label { color: var(--fg); margin-top: 2em; }
.stream .feed { margin: 0.5em 0 0; }
.stream__all { display: inline-block; margin: 0.5em 0 0; font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: 0.04em; }

/* Visual tutorial: an example chain that draws itself word by word. */
.mg-demo { font-family: var(--mono); font-size: clamp(15px, 2.6vw, 19px); margin: 2em 0 0.3em; line-height: 2; }
.mg-demo__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15em 0.4em; }
.mg-demo__w, .mg-demo__a { opacity: 0; animation: mgfade 0.5s ease forwards; animation-delay: calc(var(--i) * 0.5s); }
.mg-demo__a { color: var(--dim); }
.mg-demo__w--end { color: var(--brand-terra); font-weight: 600; }
@keyframes mgfade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mg-demo__w, .mg-demo__a { animation: none; opacity: 1; } }
.mg-demo__cap { font-family: var(--mono); font-size: 12.5px; color: var(--dim); letter-spacing: 0.04em; margin: 0.2em 0 0; }

/* The mindmap game island. Self-contained, recolors with theme. */
.mapgame { position: relative; overflow: hidden; border: 1px solid var(--rule); padding: clamp(22px, 4vw, 34px); margin: 1.4em 0; font-family: var(--mono); }
.mg-panel { text-align: center; }
/* End-of-countdown flash (silent backup cue, replaces the beep). */
.mg-flashfx { position: absolute; inset: 0; background: var(--fg); opacity: 0; pointer-events: none; }
.mg-flashfx.go { animation: mgflashfx 0.5s ease-out; }
@keyframes mgflashfx { 0% { opacity: 0; } 12% { opacity: 0.92; } 100% { opacity: 0; } }
.mg-langrow { display: flex; align-items: center; justify-content: center; gap: 0.6em; margin-bottom: 1em; }
.mg-langlbl { font-size: 12px; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }
.mg-lang { appearance: none; background: transparent; color: var(--fg); font: inherit; font-size: 14px; border: 1px solid var(--rule); border-radius: 0; padding: 0.4em 0.7em; cursor: pointer; }
.mg-lang:focus { outline: none; border-color: var(--fg); }
.mg-modes { display: flex; justify-content: center; gap: 0.6em; margin-bottom: 1.3em; }
.mg-mode { appearance: none; background: transparent; color: var(--dim); font: inherit; font-size: 13px; border: 1px solid var(--rule); padding: 0.5em 1em; cursor: pointer; }
.mg-mode.is-on { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.mg-startrow { display: flex; gap: 0.6em; flex-wrap: wrap; justify-content: center; }
.mg-seed { flex: 1 1 16em; min-width: 0; appearance: none; background: transparent; color: var(--fg); font: inherit; font-size: 16px; border: 0; border-bottom: 1px solid var(--rule); padding: 0.5em 0; text-align: center; }
.mg-seed:focus { outline: none; border-bottom-color: var(--fg); }
.mg-seed::placeholder { color: var(--dim); }
.mg-btn { appearance: none; background: transparent; color: var(--fg); font: inherit; font-size: 13px; letter-spacing: 0.04em; border: 1px solid var(--rule); padding: 0.6em 1.2em; cursor: pointer; }
.mg-btn:hover { border-color: var(--fg); }
.mg-btn--go { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.mg-btn--go:hover { opacity: 0.88; border-color: var(--fg); }
.mg-word { font-size: clamp(34px, 9vw, 60px); font-weight: 600; letter-spacing: 0.01em; line-height: 1.05; color: var(--fg); }
.mg-count { font-size: clamp(40px, 11vw, 72px); font-weight: 600; color: var(--brand-terra); margin: 0.2em 0 0.1em; line-height: 1; }
.mg-count.is-done { color: var(--dim); }
.mg-hint { font-size: 13px; color: var(--dim); letter-spacing: 0.04em; }
.mg-who { font-size: 12px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.8em; }
.mg-chain { line-height: 2; word-spacing: 0.08em; min-height: 2em; margin-bottom: 1em; }
.mg-chain--static { margin: 0.2em 0 0; min-height: 0; }
.mg-w { color: var(--fg); }
.mg-w.is-start { color: var(--dim); }
.mg-w.is-end { color: var(--brand-terra); font-weight: 600; }
.mg-sep { color: var(--dim); margin: 0 0.4em; }
.mg-writeform { margin: 0 auto 0.8em; max-width: 22em; }
.mg-input { width: 100%; appearance: none; background: transparent; color: var(--fg); font: inherit; font-size: 16px; text-align: center; border: 0; border-bottom: 1px solid var(--rule); padding: 0.5em 0; }
.mg-input:focus { outline: none; border-bottom-color: var(--fg); }
.mg-input::placeholder { color: var(--dim); }
.mg-maps { display: flex; flex-direction: column; gap: 1.1em; text-align: left; }
.mg-maplabel { font-size: 11px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.3em; }
.mg-prompt { color: var(--brand-terra); font-size: 14px; margin: 1.4em 0 1.1em; }
.mg-revealbtns { display: flex; gap: 0.7em; justify-content: center; flex-wrap: wrap; }

/* ── Tagged feed (homepage option C) ──────────────────────────
   Rows clustered into groups, tight (no dividers, no airy spacing).
   Each row carries an OUTLINE pill tag (empty circle): the ring is
   the fixed stream color, the label stays neutral and bold. */
.feed { margin: 1.4em 0 0; }
.feed-group { margin-bottom: 1.15em; }
.feed-group:last-child { margin-bottom: 0; }
.feed-row { display: flex; align-items: baseline; gap: 0.8em; padding: 0.1em 0; text-decoration: none; }
.feed-row:hover { background: none; }
.feed-row:hover .feed-row__title { text-decoration: underline; text-underline-offset: 3px; }
.feed-row__title { flex: 1 1 auto; color: var(--fg); font-weight: 500; line-height: 1.35; }
.feed-row__meta { flex: none; font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: 0.04em; }
.feed-row--soon { opacity: 0.55; }
.feed-row--soon .feed-row__title { font-weight: 400; }
.tag {
  flex: none; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.24em 0.72em; border-radius: 999px; line-height: 1.5;
  min-width: 3.6em; text-align: center; border: 0;
}
.tag--signal { background: #c2924e; color: #15130f; }
.tag--twin   { background: #3fd0d6; color: #04181a; }  /* AI Twin: electric cyan (option D) */
.tag--wave { background: #84b184; color: #0a140a; }
.tag--cci  { background: #6f93b4; color: #06080d; }
.tag--voice { background: transparent; color: var(--dim); border: 1px solid var(--rule); }  /* AI-authored marker: a quiet ghost pill, deliberately not a filled brand colour */
[data-theme="light"] .tag--signal { background: #9c6b28; color: #faf7f0; }
[data-theme="light"] .tag--wave { background: #3f6b3f; color: #faf7f0; }
[data-theme="light"] .tag--cci  { background: #2c628f; color: #faf7f0; }
/* .tag--voice (AI marker) adapts via --dim/--rule; no light override needed */

/* ── Companion sub-feed (the challenge under a manifesto part) ───
   The five machine replies hang indented beneath their parent row,
   tied to it by a left rail and rendered one notch quieter. */
.feed-children {
  margin: 0.2em 0 0.55em 1.2em;
  padding-left: 1.05em;
  border-left: 1px solid var(--rule);
}
.feed-children__label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); margin: 0.15em 0 0.5em;
}
.feed-row--child { padding: 0.06em 0; }
.feed-row--child .feed-row__title { font-weight: 400; font-size: 0.95em; }
.feed-row__by { color: var(--dim); font-weight: 400; }

/* Short-wave photo figure: the one optional photographic visual. Two
   frames side by side on wide screens, stacked on narrow, with a mono
   caption. A thin themed border ties the photos to the terminal frame.
   Self-hosted only; EXIF/GPS stripped before they land here. */
.sw-figure { margin: 2.2em 0 0.6em; }
.sw-figure__row { display: flex; gap: 0.6em; flex-wrap: wrap; }
.sw-figure__row img {
  flex: 1 1 0; min-width: 0; width: 100%; height: auto; display: block;
  border: 1px solid var(--rule);
}
.sw-figure__cap {
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
  letter-spacing: 0.04em; margin: 0.55em 0 0;
}
@media (max-width: 560px) { .sw-figure__row { flex-direction: column; } }
/* A long short-wave title forced onto a single line (e.g. #002
   "i moved to Carmel, California."): shrink-to-fit, never wrap, mobile too. */
.article-title.article-title--oneline { font-size: clamp(16px, 5.2vw, 31px); letter-spacing: -0.01em; white-space: nowrap; }

/* ── The Collective Age: book splash (build #101, Sol handoff) ──
   Reproduced from the approved handoff package (reference.html +
   source/globals.css) verbatim, scoped under .book-splash so it is
   isolated from the site design system. EB Garamond self-hosted at
   the site root per the package. Shown once, remembered in
   localStorage exactly like the theme. */
@font-face {
  font-family: "EB Garamond";
  src: url("/EBGaramond-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/EBGaramond-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
.book-splash { display: none; }
html.splash-on { overflow: hidden; }
html.splash-on .book-splash,
.book-splash--page {
  --bs-navy: #08131f;
  --bs-cream: #f2ecdc;
  --bs-muted: #9eabb8;
  --bs-line: rgba(151, 170, 188, 0.16);
  --bs-terra: #d87745;
  --bs-terra-bright: #ed8751;
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: auto 1fr auto;
  overflow: auto; isolation: isolate;
  padding: clamp(24px, 4vw, 56px) clamp(22px, 6vw, 92px) 28px;
  color: var(--bs-cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5;
  background:
    radial-gradient(circle at 76% 46%, rgba(216, 119, 69, 0.08), transparent 24%),
    radial-gradient(circle at 21% 42%, rgba(46, 76, 105, 0.3), transparent 32%),
    linear-gradient(132deg, #0c1b2a 0%, var(--bs-navy) 46%, #060f19 100%);
}
html.splash-on .book-splash::before,
.book-splash--page::before {
  content: ""; position: absolute; inset: 0; z-index: -3; opacity: 0.18;
  background-image:
    radial-gradient(circle, rgba(202, 214, 224, 0.9) 0 1px, transparent 2px),
    linear-gradient(31deg, transparent 47%, var(--bs-line) 48% 49%, transparent 50%),
    linear-gradient(149deg, transparent 47%, var(--bs-line) 48% 49%, transparent 50%);
  background-size: 155px 122px, 230px 180px, 285px 215px;
  background-position: 12px 8px, 35px 0, 90px 35px;
}
.book-splash--page {
  position: relative; inset: auto; z-index: auto;
  min-height: 100svh; overflow: hidden;
}
.book-splash a { color: inherit; text-decoration: none; }
.book-splash a:hover { background: none; color: inherit; }
.book-splash .network {
  position: absolute; z-index: -2; width: 250px; height: 250px;
  border: 1px solid rgba(139, 156, 172, 0.12); transform: rotate(28deg);
}
.book-splash .network::before, .book-splash .network::after {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(162, 179, 194, 0.38);
  box-shadow: 110px 45px 0 rgba(162, 179, 194, 0.3), 28px 172px 0 rgba(162, 179, 194, 0.28), 204px 208px 0 rgba(162, 179, 194, 0.24);
}
.book-splash .networkOne { top: -110px; right: -60px; }
.book-splash .networkTwo { bottom: -154px; left: 35%; transform: rotate(68deg) scale(1.2); }
.book-splash .siteHeader {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  animation: bs-enter 650ms ease both;
}
.book-splash .siteHeader .brand__tld { color: var(--bs-cream); }
.book-splash .siteHeader p {
  margin: 0; color: var(--bs-muted);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.book-splash .hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.88fr) minmax(420px, 1.12fr);
  gap: clamp(48px, 6vw, 100px);
  align-items: stretch;
  width: min(1120px, 100%);
  margin: auto;
  padding: clamp(40px, 6vh, 72px) 0;
}
.book-splash .bookStage {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  perspective: 1500px;
  animation: bs-enterBook 900ms cubic-bezier(.2,.8,.2,1) 100ms both;
}
.book-splash .book {
  position: relative; width: min(440px, 37vw); aspect-ratio: 0.625;
  transform: rotateY(7deg) rotateX(1deg); transform-style: preserve-3d;
  filter: drop-shadow(0 30px 42px rgba(0, 0, 0, 0.48));
}
.book-splash .book img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 2px 6px 6px 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.book-splash .bookSpine {
  position: absolute; top: 5px; bottom: 5px; left: -13px; width: 15px;
  transform: rotateY(84deg); transform-origin: right center;
  background: linear-gradient(90deg, #050b11, #1b2d3d 52%, #07111b);
  border-radius: 3px 0 0 3px;
}
.book-splash .bookShadow {
  position: absolute; bottom: -24px; width: 82%; height: 20px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.5); filter: blur(14px);
}
.book-splash .content { max-width: 620px; animation: bs-enter 800ms ease 180ms both; }
.book-splash .eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px;
  color: var(--bs-terra-bright);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
}
.book-splash .eyebrow span { width: 30px; height: 2px; background: var(--bs-terra); }
.book-splash .bookTitle {
  max-width: 700px; margin: 0;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
}
.book-splash .titleThe {
  display: block; margin-bottom: 10px; color: #b9b2a2;
  font-size: 34px; font-weight: 400; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.book-splash .titleMain {
  display: block; color: #efe7d6;
  font-size: 88px; font-weight: 500; line-height: 0.92; letter-spacing: -0.005em;
}
.book-splash .subtitle {
  max-width: 510px; margin: 22px 0 0; color: #d7cdbb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 2vw, 27px); font-style: italic; line-height: 1.35;
}
.book-splash .description { max-width: 520px; margin: 28px 0 0; color: #b6c2cd; font-size: 17px; line-height: 1.65; }
.book-splash .availability {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px;
  color: #c2ccd5; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
}
.book-splash .availability i { width: 3px; height: 3px; border-radius: 50%; background: var(--bs-terra); }
.book-splash .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 38px; max-width: 560px; }
.book-splash .storeSection { margin-top: 25px; scroll-margin-top: 24px; }
.book-splash .storeHeading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.book-splash .storeHeading p, .book-splash .storeHeading span {
  margin: 0; color: #9aabba;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.book-splash .storeHeading span { color: #5f7182; }
.book-splash .storeGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.book-splash .storeLink {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 9px; min-width: 0; min-height: 64px; padding: 12px 10px;
  border: 1px solid rgba(226, 234, 240, 0.11); border-radius: 3px;
  background: rgba(255,255,255,0.018);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.book-splash .storeLink:hover, .book-splash .storeLink:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(237, 135, 81, 0.55);
  background: rgba(216, 119, 69, 0.07);
}
.book-splash .storeLink:focus-visible { outline: 2px solid var(--bs-cream); outline-offset: 2px; }
.book-splash .storeLinkPrimary { border-color: rgba(237, 135, 81, 0.35); background: rgba(216, 119, 69, 0.07); }
.book-splash .flag { font-size: 24px; line-height: 1; }
.book-splash .storeLink > span:nth-child(2) { min-width: 0; }
.book-splash .storeLink b, .book-splash .storeLink small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.book-splash .storeLink b { color: #e6ecf1; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.book-splash .storeLink small { margin-top: 3px; color: #97a9b8; font-size: 12.5px; }
.book-splash .storeLink i { position: absolute; top: 7px; right: 9px; color: #687b8c; font-size: 12px; font-style: normal; }
.book-splash .button {
  position: relative; display: flex; align-items: center; min-height: 74px;
  min-width: 0;
  padding: 14px 44px 16px 16px;
  border: 1px solid rgba(226, 234, 240, 0.18); border-radius: 3px;
  font: inherit; text-align: left; cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.book-splash .button > span { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.book-splash .button > span span { display: inline; font-size: inherit; }
.book-splash .button small {
  position: absolute; left: 16px; bottom: 10px; right: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.book-splash .button b { position: absolute; right: 14px; font-size: 20px; font-weight: 400; }
.book-splash .buttonPrimary { color: #101820; background: var(--bs-terra-bright); border-color: var(--bs-terra-bright); }
.book-splash .buttonPrimary span { transform: translateY(-7px); }
.book-splash .buttonPrimary small { color: rgba(16, 24, 32, 0.68); }
.book-splash .buttonSecondary { color: var(--bs-cream); background: rgba(255,255,255,0.025); }
.book-splash .button:hover, .book-splash .button:focus-visible { transform: translateY(-2px); }
.book-splash .buttonPrimary:hover, .book-splash .buttonPrimary:focus-visible { background: #f0925f; border-color: #f0925f; color: #101820; }
.book-splash .buttonSecondary:hover, .book-splash .buttonSecondary:focus-visible {
  border-color: rgba(237, 135, 81, 0.75); background: rgba(216, 119, 69, 0.08); color: var(--bs-cream);
}
.book-splash .button:focus-visible, .book-splash .brand:focus-visible { outline: 2px solid var(--bs-cream); outline-offset: 4px; }
.book-splash .turkiye { margin: 16px 0 0; color: #a8b6c2; font-size: 14.5px; line-height: 1.55; }
.book-splash .splashFoot {
  display: flex; align-items: center; gap: 12px;
  color: #7d90a1; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  animation: bs-enter 650ms ease 300ms both;
}
.book-splash .footerLine { width: 22px; height: 1px; background: #425364; }
@keyframes bs-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bs-enterBook {
  from { opacity: 0; transform: translateY(22px) rotate(-1deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
@media (max-width: 820px) {
  html.splash-on .book-splash { padding: 22px 20px 20px; }
  .book-splash .siteHeader p { display: none; }
  .book-splash .hero { grid-template-columns: 1fr; gap: 34px; align-items: center; padding: 38px 0 46px; }
  .book-splash .book { width: min(252px, 62vw); }
  .book-splash .bookShadow { width: 210px; bottom: -22px; }
  .book-splash .content { text-align: center; margin-left: auto; margin-right: auto; }
  .book-splash .eyebrow, .book-splash .availability { justify-content: center; }
  .book-splash .titleThe { margin-bottom: 8px; font-size: 27px; }
  .book-splash .titleMain { font-size: clamp(58px, 16vw, 74px); }
  .book-splash .subtitle, .book-splash .description { margin-left: auto; margin-right: auto; }
  .book-splash .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; margin-left: auto; margin-right: auto; }
  .book-splash .storeSection { max-width: 520px; margin-left: auto; margin-right: auto; }
  .book-splash .storeGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .book-splash .splashFoot { justify-content: center; }
}
@media (max-width: 420px) {
  .book-splash .description { font-size: 14px; }
  .book-splash .availability { gap: 8px; font-size: 9px; }
  .book-splash .actions { gap: 8px; }
  .book-splash .button { min-height: 64px; padding: 12px 30px 14px 12px; }
  .book-splash .button > span { font-size: 13.5px; }
  .book-splash .button small { left: 12px; right: 26px; font-size: 8.5px; }
  .book-splash .button b { right: 10px; font-size: 16px; }
  .book-splash .storeGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-splash .storeHeading span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .book-splash, .book-splash *, .book-splash *::before, .book-splash *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Buttons on the book pages. */
.btn {
  appearance: none; display: inline-block; background: transparent; color: var(--fg);
  font: inherit; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em;
  border: 1px solid var(--fg); padding: 0.7em 1.3em; cursor: pointer;
  text-decoration: none; line-height: 1.4;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn--buy { background: var(--brand-terra); border-color: var(--brand-terra); color: #160b07; font-weight: 600; }
.btn--buy:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* Book page. */
.book-cover {
  width: min(70vw, 300px); height: auto; display: block; margin: 0.4em 0 1.8em;
  border: 1px solid var(--rule);
}
.book-buy { margin: 0 0 1.2em; }
.book-buy .btn { margin-bottom: 1em; }
.stores {
  font-family: var(--mono); font-size: 13.5px; color: var(--dim);
  letter-spacing: 0.03em; line-height: 2; margin: 0;
}
.stores a { color: var(--fg); }

/* Book pill in the feeds: says cci like its siblings, terracotta so
   the book row reads as the printed thing it is (Ferhat, 2026-08-14). */
.tag--book { background: var(--brand-terra); color: #160b07; }
[data-theme="light"] .tag--book { background: #b0512f; color: #faf7f0; }