/* SPDX-License-Identifier: Apache-2.0
   Copyright (c) 2026 UtopiaIA
   Elffuss Braid · braid.elffuss.com
   Static: no web fonts, no external requests. Dark by default, as on
   elffuss.com; light when the system asks for it. Terminals stay dark in
   both. */

:root {
  --ground: #090a11;
  --surface: rgb(22, 23, 38);
  --surface-soft: rgba(22, 23, 38, .62);
  --line: rgba(150, 146, 184, .14);
  --line-strong: rgba(150, 146, 184, .28);
  --text: #eae8f2;
  --text-dim: #b3afce;
  --muted: #7f7ca0;
  /* --muted is for strokes, dots and dashed borders; text that should look
     quieter than --text-dim uses this, which keeps 4.5:1 even where the
     aurora lightens the ground */
  --muted-text: #8e8bb0;
  /* strand colours: text and graphics are the same in the dark */
  --brass: #c8a06a;
  --teal: #54dcc6;
  --indigo: #8272ff;
  --magenta: #e779cf;
  --g-brass: #c8a06a;
  --g-teal: #54dcc6;
  --g-indigo: #8272ff;
  --g-magenta: #e779cf;
  --btn-bg: linear-gradient(135deg, #e6c294, #c8a06a);
  --btn-ink: #140f08;
  --focus: #c8a06a;
  --tint-x: rgba(231, 121, 207, .07);
  --tint-x-line: rgba(231, 121, 207, .38);
  --aurora-teal: rgba(84, 220, 198, .13);
  --aurora-indigo: rgba(130, 114, 255, .16);
  --aurora-brass: rgba(200, 160, 106, .08);
  /* terminals: the same in both themes */
  --term-bg: #0e0f18;
  --term-line: rgba(150, 146, 184, .2);
  --term-text: #eae8f2;
  --term-dim: #b3afce;
  --term-muted: #7f7ca0;
  --term-a: #c8a06a;
  --term-b: #54dcc6;
  --term-c: #8272ff;
  --term-x: #e779cf;
  --serif: "Iowan Old Style", Georgia, "Palatino Linotype", Palatino, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 16px;
  --r-sm: 10px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #f6f4ee;
    --surface: #fff;
    --surface-soft: rgba(255, 255, 255, .72);
    --line: rgba(21, 20, 31, .12);
    --line-strong: rgba(21, 20, 31, .22);
    --text: #15141f;
    --text-dim: #3f3c57;
    --muted: #5f5b7d;
    --muted-text: #5f5b7d;
    --brass: #7d5a1f;
    --teal: #0b6f61;
    --indigo: #4b3bd1;
    --magenta: #a2307f;
    --g-brass: #a77a3a;
    --g-teal: #13917f;
    --g-indigo: #5b4ae6;
    --g-magenta: #a2307f;
    --btn-bg: #7d5a1f;
    --btn-ink: #fff;
    --focus: #7d5a1f;
    --tint-x: rgba(162, 48, 127, .05);
    --tint-x-line: rgba(162, 48, 127, .34);
    --aurora-teal: rgba(19, 145, 127, .07);
    --aurora-indigo: rgba(91, 74, 230, .06);
    --aurora-brass: rgba(167, 122, 58, .05);
    color-scheme: light;
  }
}

/* ------------------------------------------------------------- language */
/* Both languages are in the page; the one that does not match html[lang]
   is not shown. Without JavaScript the page is English. */
html:not([lang="es"]) [data-l="es"],
html[lang="es"] [data-l="en"] {
  display: none !important;
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 44% at 10% 4%, var(--aurora-teal), transparent 70%),
    radial-gradient(44% 46% at 90% 2%, var(--aurora-indigo), transparent 72%),
    radial-gradient(56% 50% at 28% 104%, var(--aurora-brass), transparent 76%);
}
img, svg { max-width: 100%; }
p, ul, ol, dl, figure, h1, h2, h3, h4, pre { margin: 0; }
a { color: inherit; text-decoration-color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
p a, li a, dd a, td a, figcaption a { color: var(--text); }
code {
  font-family: var(--mono);
  font-size: .86em;
  padding: .08em .32em;
  border-radius: 6px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
}
@media (max-width: 640px) {
  code { white-space: normal; overflow-wrap: anywhere; }
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus { outline: none; }
::selection { background: rgba(130, 114, 255, .35); }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--text);
  color: var(--ground);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.narrow > * { max-width: 820px; }
.narrow-left { max-width: 820px; }

/* ------------------------------------------------------------- header */
.site-head { border-bottom: 1px solid var(--line); }
.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-block: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: .01em;
}
.brand .mark { width: 60px; height: auto; display: block; }
.mark .sa, .logo .sa { stroke: var(--g-brass); }
.mark .sb, .logo .sb { stroke: var(--g-teal); }
.mark .sc, .logo .sc { stroke: var(--g-indigo); }
.nav { order: 3; width: 100%; }
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 2px;
  list-style: none;
  padding: 0;
  margin: 0 -10px;
}
.nav a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: .9rem;
}
.nav a:hover { color: var(--text); background: var(--surface-soft); }
/* on a phone the section links keep to two rows in both languages: GitHub
   is already a button in the hero and a link in the footer */
@media (max-width: 539px) {
  .nav li:last-child { display: none; }
}
@media (max-width: 479px) {
  .nav ul { margin-inline: -6px; }
  .nav a { padding-inline: 6px; }
}
.lang {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.lang[hidden] { display: none; }
.head-row > .lang { margin-left: auto; }
.lang button {
  min-width: 40px;
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: 600 .74rem/1 var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
}
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] { background: var(--text); color: var(--ground); }
@media (forced-colors: active) {
  .lang button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

@media (min-width: 1180px) {
  .nav { order: 0; width: auto; margin-left: auto; }
  .nav ul { margin: 0; }
  .head-row > .lang { margin-left: 0; }
}

/* ------------------------------------------------------------- hero */
.hero { padding-top: clamp(28px, 6vw, 72px); }
.hero-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "logo" "copy" "card";
}
.hero-logo { grid-area: logo; }
.hero-copy { grid-area: copy; }
.hero-card { grid-area: card; }
.hero-logo .logo { display: block; width: 100%; max-width: 320px; height: auto; }
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: "copy logo" "copy card";
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 64px);
    row-gap: 22px;
    align-items: start;
  }
  .hero-logo .logo { max-width: 460px; margin-inline: auto; }
  .hero-copy { padding-top: 8px; }
}
.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}
h1 {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.nw { white-space: nowrap; }
.pitch {
  margin-top: 22px;
  max-width: 34ch;
  font-size: clamp(1.18rem, 2.2vw, 1.36rem);
  line-height: 1.45;
}
.sub { margin-top: 14px; max-width: 58ch; color: var(--text-dim); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 600;
  font-size: .96rem;
  text-decoration: none;
}
.btn:hover { border-color: var(--text-dim); }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; }
.btn-primary:hover { border-color: transparent; filter: brightness(1.06); }
.fine { margin-top: 18px; font-size: .9rem; color: var(--text-dim); }
.hero-card figcaption {
  margin-top: 10px;
  max-width: 60ch;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text-dim);
}

/* the strands of the hero logo draw in, once */
.logo .sa, .logo .sb, .logo .sc { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .logo .sa, .logo .sb, .logo .sc { animation: draw 1.5s cubic-bezier(.22, .61, .36, 1) both; }
  .logo .sb { animation-delay: .16s; }
  .logo .sc { animation-delay: .32s; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------- terminals */
.term {
  --agent: var(--term-line);
  position: relative;
  margin-block: 18px 22px;
  border: 1px solid var(--term-line);
  border-left: 3px solid var(--agent);
  border-radius: 12px;
  background: var(--term-bg);
  color: var(--term-dim);
  overflow: hidden;
  font-family: var(--mono);
}
.term.t-a { --agent: var(--term-a); }
.term.t-b { --agent: var(--term-b); }
.term.t-c { --agent: var(--term-c); }
.term.t-n { --agent: var(--term-muted); }
.term-hero {
  margin: 0;
  border-left-width: 1px;
  box-shadow: inset 2px 0 0 var(--term-a), inset 4px 0 0 var(--term-b), inset 6px 0 0 var(--term-c);
}
.term-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--term-line);
  color: var(--term-dim);
  font-size: .76rem;
  letter-spacing: .02em;
}
.term-bar > span:first-child { white-space: nowrap; }
.term-bar .bar-note { color: var(--term-dim); font-style: italic; text-align: right; text-wrap: balance; }
.term pre, .code pre {
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.62;
  white-space: pre;
  tab-size: 4;
}
.term code, .code code, .task code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
}
.term-hero pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; padding: 16px 18px 16px 22px; }
.term .pr { color: var(--term-muted); }
.term .cmd { color: var(--term-text); }
.term .id { color: var(--term-muted); }
.term .el { color: var(--term-muted); }
.term .ag-a { color: var(--term-a); }
.term .ag-b { color: var(--term-b); }
.term .ag-c { color: var(--term-c); }
.term .x, .term .x .id { color: var(--term-x); }
.term .ln-a, .term .ln-a .id { color: var(--term-a); }
.term .ln-b, .term .ln-b .id { color: var(--term-b); }
.term .ln-c, .term .ln-c .id { color: var(--term-c); }
.exit {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--term-x);
  border-radius: 999px;
  color: var(--term-x);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: 1px;
}
.story .term pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* blame is columns: it keeps its lines, like the copyable blocks below.
   On a phone it leaves the ids out, and its bar note says so, and on the
   narrowest its type is a little smaller, so that every line fits whole */
.story .term-cols pre { white-space: pre; overflow-wrap: normal; }
.bn-ids { display: none; }
@media (max-width: 480px) {
  .term-blame .bl-id { display: none; }
  .term-blame .bn-ids { display: inline; }
}
@media (max-width: 359px) {
  .story .term-blame pre { padding-inline: 12px; font-size: .76rem; }
}
/* the op log wraps an entry that does not fit under itself, past its
   number, so what each landing did stays in view. Its lines are inline
   blocks, not blocks, so its text reads and copies as braid prints it */
.term-oplog .ol { display: inline-block; width: 100%; padding-left: 4ch; text-indent: -4ch; }

/* copyable blocks and column transcripts keep their exact text and scroll
   in their own box; site.js marks one that is wider than its box, and the
   text fades at the edge that has more, so a phone shows that it scrolls */
.code pre.more-right, .term-cols pre.more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.code pre.more-left, .term-cols pre.more-left {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
  mask-image: linear-gradient(to right, transparent, #000 40px);
}
.code pre.more-left.more-right, .term-cols pre.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
}
.code pre:focus-visible, .term-cols pre:focus-visible { outline-offset: -2px; border-radius: 0 0 11px 11px; }
@supports selector(:has(*)) {
  .code:has(> pre:focus-visible), .term-cols:has(> pre:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .code > pre:focus-visible, .term-cols > pre:focus-visible { outline: none; }
}
.code {
  margin-block: 14px 22px;
  border: 1px solid var(--term-line);
  border-radius: 12px;
  background: var(--term-bg);
  color: var(--term-text);
  overflow: hidden;
}
.code-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
  padding: 4px 6px 4px 14px;
  border-bottom: 1px solid var(--term-line);
  color: var(--term-muted);
  font: .74rem/1 var(--mono);
  letter-spacing: .06em;
}
.copy {
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--term-line);
  border-radius: 8px;
  background: transparent;
  color: var(--term-dim);
  font: 600 .74rem/1 var(--sans);
  cursor: pointer;
}
.copy:hover { color: var(--term-text); border-color: var(--term-dim); }
.copy:focus-visible { outline-color: #c8a06a; }
.copy .c-done { display: none; }
.copy.copied .c-idle { display: none; }
.copy.copied .c-done { display: inline; }
.copy.copied { color: var(--term-b); border-color: var(--term-b); }

/* ------------------------------------------------------------- sections */
.sec { padding-top: clamp(64px, 9vw, 112px); }
.sec-head { margin-bottom: 22px; }
.sec-head .eyebrow { margin-bottom: 10px; }
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  text-wrap: balance;
}
.sec p + p, .sec p + .code, .sec .code + p { margin-top: 14px; }
.lead { max-width: 66ch; color: var(--text-dim); }
.note, .after, .licence, .run-note { color: var(--text-dim); font-size: .94rem; }

/* ------------------------------------------------------------- story */
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(36px, 5vw, 56px);
}
.ch-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--brass);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.ch-main { min-width: 0; max-width: 820px; }
.ch-main > p { max-width: 66ch; }
.ch-main > h3 + p { margin-top: 12px; }
.ch-main > p + p { margin-top: 14px; }
@media (min-width: 960px) {
  .chapter { grid-template-columns: 96px minmax(0, 1fr); }
  .ch-num { font-size: 2.6rem; margin: 0; padding-top: 2px; text-align: left; }
}
.ch-x {
  padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 30px) clamp(10px, 2vw, 20px);
  margin-inline: calc(-1 * clamp(16px, 3vw, 30px));
  border: 1px solid var(--tint-x-line);
  border-radius: var(--r);
  background: var(--tint-x);
}
@media (max-width: 640px) {
  .ch-x { margin-inline: -8px; padding-inline: 8px; }
}
.tasks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
.task {
  border: 1px solid var(--term-line);
  border-top: 3px solid var(--agent);
  border-radius: 10px;
  background: var(--term-bg);
  color: var(--term-dim);
  font-family: var(--mono);
  font-size: .8rem;
}
.task.t-a { --agent: var(--term-a); }
.task.t-b { --agent: var(--term-b); }
.task.t-c { --agent: var(--term-c); }
.task-who {
  display: block;
  padding: 7px 12px;
  border-bottom: 1px solid var(--term-line);
  color: var(--agent);
  font-size: .74rem;
}
.task pre { padding: 10px 12px; font-size: .8rem; line-height: 1.6; white-space: pre-wrap; }
.task .del, .task .ctx { color: var(--term-muted); }
.task .add { color: var(--agent); }
.loop-row { display: grid; gap: 12px; align-items: center; margin-top: 14px; }
.loop-row p + p { margin-top: 0; }
.loop-fig { max-width: 420px; justify-self: center; width: 100%; }
/* equal halves, so the figure keeps room for its labels next to the text */
@media (min-width: 1000px) {
  .loop-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}
.gitloop { display: block; width: 100%; height: auto; }
.gitloop .gl-path { fill: none; stroke: var(--text-dim); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.gitloop .gl-dot { fill: var(--text-dim); }
.gitloop .gl-dot-x { fill: var(--g-magenta); }
.gitloop .gl-t { fill: var(--text-dim); font: 17px var(--mono); }
.gitloop .gl-x { fill: var(--magenta); font: 600 17px var(--mono); }
.gitloop .gl-ar { fill: var(--text-dim); }
details.run {
  margin-top: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-soft);
}
details.run > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  list-style-position: inside;
}
details.run[open] > summary { border-bottom: 1px solid var(--line); }
details.run .code { margin: 12px; }

/* ------------------------------------------------------------- autosync */
.as-band {
  padding: clamp(20px, 4vw, 36px);
  border: 1.5px dashed var(--muted);
  border-radius: var(--r);
  background: var(--surface-soft);
}
.as-band h2 { margin-top: 12px; font-size: clamp(1.45rem, 3vw, 2rem); }
.as-band p:not(.pill) { margin-top: 14px; max-width: 66ch; color: var(--text-dim); }
.pill {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font: .72rem/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- diagram */
.diagram {
  margin-top: 6px;
  padding: clamp(10px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-soft);
}
.dgm { display: block; width: 100%; height: auto; }
.dgm-tall { display: none; max-width: 460px; margin-inline: auto; }
@media (max-width: 999px) {
  .dgm-wide { display: none; }
  .dgm-tall { display: block; }
}
@media (max-width: 479px) {
  .diagram { padding: 6px; }
}
.dgm .band { fill: var(--surface-soft); stroke: var(--line-strong); }
.dgm .card { fill: var(--surface); stroke: var(--line-strong); }
.dgm .acc-a { fill: var(--g-brass); }
.dgm .acc-b { fill: var(--g-teal); }
.dgm .acc-c { fill: var(--g-indigo); }
.dgm .lb { font-family: var(--sans); }
.dgm .mono { font-family: var(--mono); }
.dgm .hi { fill: var(--text); }
.dgm .dim { fill: var(--text-dim); }
.dgm .muted { fill: var(--muted-text); }
.dgm .strong { font-weight: 600; }
.dgm .t-a { fill: var(--brass); }
.dgm .t-b { fill: var(--teal); }
.dgm .t-c { fill: var(--indigo); }
.dgm .t-x { fill: var(--magenta); }
.dgm .strand { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dgm .st-a { stroke: var(--g-brass); }
.dgm .st-b { stroke: var(--g-teal); }
.dgm .st-c { stroke: var(--g-indigo); }
.dgm .post { fill: var(--muted); }
.dgm .knot { fill: none; stroke: var(--g-magenta); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.dgm .loop { fill: none; stroke: var(--g-teal); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.dgm .ar { fill: var(--text-dim); }
.dgm .ar-b { fill: var(--g-teal); }
.dgm .flow { fill: none; stroke: var(--text-dim); stroke-width: 2; }
.dgm .box { fill: var(--surface); stroke: var(--line-strong); }
.dgm .ghost { fill: none; stroke: var(--muted); stroke-dasharray: 6 6; }
.points {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding-left: 1.4em;
  max-width: 78ch;
}
.points li::marker { color: var(--brass); font-family: var(--serif); font-weight: 600; }
.points strong { font-weight: 650; }
.credit { margin-top: 24px; max-width: 72ch; color: var(--text-dim); font-size: .95rem; }

/* ------------------------------------------------------------- agents */
.grid-title { margin-top: 34px; }
.contract {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}
.contract > li {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.contract > li.wide { grid-column: 1 / -1; }
.contract h4 {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}
.contract p { font-size: .95rem; line-height: 1.55; color: var(--text-dim); }
.contract p code { color: var(--text); }
.contract .code { margin: 12px 0 2px; }

/* ------------------------------------------------------------- git */
.rows { margin-top: 22px; border-top: 1px solid var(--line); }
.row {
  display: grid;
  gap: 6px 28px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .row { grid-template-columns: 200px minmax(0, 1fr); }
}
.row dt { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.row dt code { display: block; width: max-content; margin-top: 6px; font-size: .74rem; color: var(--text-dim); }
.row dd { margin: 0; max-width: 70ch; }
.row dd ul { padding-left: 1.1em; display: grid; gap: 6px; }
.licence { margin-top: 6px; max-width: 72ch; }
.next-link { margin-top: 14px; }
.next-link a { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------- measured */
.method { display: grid; gap: 6px; max-width: 76ch; padding-left: 1.1em; color: var(--text-dim); }
.ratios-run { margin-top: 26px; }
.ratios-run > p { max-width: 72ch; }
.table-wrap { margin-block: 16px 18px; overflow-x: auto; }
.table-wrap:focus-visible { outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.5; }
th, td { padding: 11px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th {
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
tbody tr:hover { background: var(--surface-soft); }
.ratios td:nth-child(2) {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  min-width: 140px;
}
.ratios td:nth-child(3) code { white-space: nowrap; }
/* long commands in the first column break between tokens; flags stay whole */
.ratios td:first-child code { white-space: normal; }
.mk { display: block; position: relative; height: 10px; width: 120px; margin-top: 8px; }
.mk::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 2px; background: var(--line-strong); }
.mk-one { position: absolute; top: -1px; width: 2px; height: 12px; margin-left: -1px; background: var(--text-dim); }
.mk-bar { position: absolute; top: 3px; height: 4px; border-radius: 2px; background: var(--text-dim); opacity: .55; }
.mk-dot { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--text); }
.mk-legend { margin-top: 22px; font-size: .88rem; color: var(--text-dim); max-width: 72ch; }

.checks td:first-child { width: 42%; color: var(--text); }
.checks td:last-child { color: var(--text-dim); }

@media (max-width: 860px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tbody tr {
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
  }
  tbody tr:hover { background: var(--surface-soft); }
  td { padding: 3px 0; border: 0; }
  .checks td:first-child { width: auto; font-weight: 600; }
  .ratios td:nth-child(2) { padding-top: 8px; }
  .ratios td:nth-child(3) code { white-space: normal; }
  html:not([lang="es"]) .ratios td:nth-child(2)::before { content: "braid / git  "; }
  html[lang="es"] .ratios td:nth-child(2)::before { content: "braid / git  "; }
  .ratios td:nth-child(2)::before { font-size: .72rem; font-weight: 400; letter-spacing: .08em; color: var(--text-dim); }
  html:not([lang="es"]) .ratios td:nth-child(3)::before { content: "Reproduce: "; }
  html[lang="es"] .ratios td:nth-child(3)::before { content: "Para repetirlo: "; }
  html:not([lang="es"]) .checks td:last-child::before { content: "How it is checked: "; }
  html[lang="es"] .checks td:last-child::before { content: "Cómo se comprueba: "; }
  .ratios td:nth-child(3)::before, .checks td:last-child::before { color: var(--muted-text); font-size: .86rem; }
}

/* ------------------------------------------------------------- honest */
.honest { display: grid; gap: 8px; max-width: 78ch; padding-left: 1.1em; }
.honest li::marker { color: var(--brass); }
.scion, .credits { margin-top: 18px; max-width: 76ch; color: var(--text-dim); font-size: .95rem; }

/* ------------------------------------------------------------- elffuss */
.family {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
.family a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  text-decoration: none;
}
.family a:hover { border-color: var(--line-strong); }
.f-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--text); }
.f-desc { font-size: .94rem; color: var(--text-dim); line-height: 1.5; }
.repos-title { margin-top: 30px; font-size: 1.15rem; }
.repos { display: grid; gap: 8px; margin-top: 12px; padding: 0; list-style: none; color: var(--text-dim); font-size: .95rem; }
/* underlined like every other link, so the chip alone does not have to say it */
.repos a { margin-right: 6px; }
.repos a code { color: var(--text); text-decoration: inherit; text-decoration-color: var(--muted); text-underline-offset: .2em; }
.repos a:hover code { border-color: var(--line-strong); text-decoration-color: currentColor; }

/* ------------------------------------------------------------- footer */
.site-foot {
  margin-top: clamp(72px, 10vw, 120px);
  padding-block: 28px 40px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: .92rem;
}
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.foot-row a { color: var(--text); }
.foot-row .dot { color: var(--muted); }
/* the toggle is a control, not one more item: it keeps to the right, and
   it is what wraps first */
.foot-row .lang-foot { margin-left: auto; }
@media (max-width: 539px) {
  .foot-row { gap: 8px 18px; }
  .foot-row .dot { display: none; }
}
.foot-note { margin-top: 14px; max-width: 76ch; font-size: .86rem; }