:root {
  --paper: #f0f0ea;
  --paper-2: #dfdfd7;
  --ink: #101116;
  --muted: #62646c;
  --line: rgba(16, 17, 22, 0.2);
  --signal: #175cff;
  --signal-contrast: #003fd1;
  --signal-dark: #003fd1;
  --signal-inverse: #6b96ff;
  --signal-soft: rgba(23, 92, 255, 0.14);
  --signal-ink: #f0f0ea;
  --inverse-bg: #101116;
  --inverse-fg: #f0f0ea;
  --inverse-muted: #b9bab3;
  --inverse-line: #404147;
  --grid-line-x: rgba(16, 17, 22, 0.08);
  --grid-line-y: rgba(16, 17, 22, 0.065);
  --max: 112rem;
  --gutter: clamp(1.25rem, 3.125vw, 4rem);
  --column: calc((100vw - 2 * var(--gutter)) / 12);
  --baseline: 0.5rem;
  --header-height: 5rem;
  --grid-row: 6rem;
  --section-space: 8rem;
  --leading-body: 1.5rem;
  --leading-hero: 8rem;
  --leading-display: 6rem;
  --leading-page: 8rem;
  --leading-title: 4rem;
  --leading-lead: 2.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html[data-accent="cobalt"] { --signal: #175cff; --signal-contrast: #003fd1; --signal-dark: #003fd1; --signal-inverse: #6b96ff; --signal-soft: rgba(23,92,255,.14); --signal-ink: #f0f0ea; }
html[data-accent="vermillion"] { --signal: #f04424; --signal-contrast: #a92812; --signal-dark: #c53216; --signal-inverse: #ff735c; --signal-soft: rgba(240,68,36,.14); --signal-ink: #101116; }
html[data-accent="citron"] { --signal: #d7ee3f; --signal-contrast: #596300; --signal-dark: #9aae13; --signal-inverse: #d7ee3f; --signal-soft: rgba(215,238,63,.18); --signal-ink: #101116; }
html[data-accent="violet"] { --signal: #6d4df5; --signal-contrast: #4b2eca; --signal-dark: #4b2eca; --signal-inverse: #a38cff; --signal-soft: rgba(109,77,245,.14); --signal-ink: #f0f0ea; }
html[data-accent="cyan"] { --signal: #00a8c6; --signal-contrast: #006578; --signal-dark: #007b91; --signal-inverse: #39c9e3; --signal-soft: rgba(0,168,198,.16); --signal-ink: #101116; }
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e0f13;
  --paper-2: #1c1d23;
  --ink: #ecece5;
  --muted: #a9abb4;
  --line: rgba(236, 236, 229, 0.22);
  --inverse-bg: #17181d;
  --inverse-fg: #f0f0ea;
  --inverse-muted: #b9bab3;
  --inverse-line: #4a4b52;
  --grid-line-x: rgba(236, 236, 229, 0.075);
  --grid-line-y: rgba(236, 236, 229, 0.055);
  --signal-dark: var(--signal);
  --signal-contrast: var(--signal);
  --signal-ink: #101116;
}
html[data-theme="dark"][data-accent="cobalt"] { --signal: #6b96ff; --signal-soft: rgba(107,150,255,.18); }
html[data-theme="dark"][data-accent="vermillion"] { --signal: #ff735c; --signal-soft: rgba(255,115,92,.18); }
html[data-theme="dark"][data-accent="citron"] { --signal: #d7ee3f; --signal-soft: rgba(215,238,63,.18); }
html[data-theme="dark"][data-accent="violet"] { --signal: #a38cff; --signal-soft: rgba(163,140,255,.18); }
html[data-theme="dark"][data-accent="cyan"] { --signal: #39c9e3; --signal-soft: rgba(57,201,227,.18); }

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
  font-weight: 400;
  line-height: var(--leading-body);
  overflow-x: hidden;
}
html[data-debug-baseline] body::before { content: ""; position: fixed; z-index: 999; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--baseline) - 1px), color-mix(in srgb, var(--signal) 26%, transparent) calc(var(--baseline) - 1px) var(--baseline)); }
body::selection { color: var(--paper); background: var(--signal); }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.mono, .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1rem;
}
.eyebrow { margin: 0; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: -4rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--paper);
  background: var(--ink);
}
.skip-link:focus { top: 0.75rem; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(1rem);
}
.brand { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 1rem; font-weight: 700; letter-spacing: -0.07em; text-transform: lowercase; }
.navigation { display: flex; align-items: center; gap: clamp(1rem, 1.65vw, 2rem); font-size: 0.82rem; font-weight: 550; }
.navigation > a:not(.nav-contact):hover, .navigation > a:not(.nav-contact):focus-visible { text-decoration: underline; text-decoration-thickness: 0.1rem; text-underline-offset: 0.4rem; }
.nav-contact { padding: 0.7rem 0.95rem; color: var(--paper); background: var(--ink); }
.nav-contact:hover, .nav-contact:focus-visible { color: var(--signal-ink); background: var(--signal); }
.language-menu { position: relative; font-family: var(--mono); font-size: 0.65rem; }
.language-menu summary { min-width: 5.5rem; padding: 0.5rem 1.4rem 0.5rem 0.5rem; border-left: 1px solid var(--line); cursor: pointer; list-style: none; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary::after { content: "↓"; position: absolute; right: 0.25rem; }
.language-menu[open] summary::after { content: "↑"; }
.language-menu > div { position: absolute; z-index: 70; top: calc(100% + 1.35rem); right: 0; display: flex; width: 12rem; flex-direction: column; border: 1px solid var(--ink); background: var(--paper); }
.language-menu a { display: block; padding: 0.8rem 0.9rem; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.language-menu a:last-child { border-bottom: 0; }
.language-menu a:hover, .language-menu a:focus-visible, .language-menu a[aria-current="page"] { color: var(--paper); background: var(--ink); }
.menu-toggle { display: none; border: 0; background: transparent; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; }
.theme-toggle { display: grid; width: 1.9rem; aspect-ratio: 1; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.theme-toggle::before { content: ""; width: 0.72rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 0 50%, transparent 50%); }
.theme-toggle[aria-pressed="true"]::before { background: linear-gradient(270deg, currentColor 0 50%, transparent 50%); }

.grid-field {
  background-image: linear-gradient(to right, transparent calc(100% - 1px), var(--grid-line-x) 1px), linear-gradient(to bottom, transparent calc(100% - 1px), var(--grid-line-y) 1px);
  background-position: var(--gutter) 0, 0 0;
  background-size: var(--column) 100%, 100% var(--grid-row);
}
.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: calc(100svh - var(--header-height));
  padding: var(--section-space) var(--gutter) calc(var(--baseline) * 8);
}
.hero-kicker { grid-column: 1 / 7; align-self: start; }
.hero h1 {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  align-self: center;
  margin: calc(var(--baseline) * 4) 0;
  font-size: clamp(3.05rem, 8vw, 9.5rem);
  max-width: 11ch;
  font-weight: 500;
  letter-spacing: -0.062em;
  line-height: var(--leading-hero);
  text-wrap: balance;
}
.hero h1 em { color: var(--signal); font-style: normal; }
.hero-bottom { z-index: 2; grid-column: 1 / -1; align-self: end; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.hero-description { grid-column: 1 / 6; max-width: 42rem; margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.45rem); line-height: 2rem; }
.text-link { display: inline-flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid currentColor; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; }
.text-link:hover, .text-link:focus-visible { color: var(--signal-dark); }

.signal-ledger { padding: 0 var(--gutter); border-block: 1px solid var(--ink); }
.signal-ledger ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.signal-ledger li { display: grid; min-height: calc(var(--baseline) * 12); grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: calc(var(--baseline) * 3) calc(var(--baseline) * 2); border-right: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; font-weight: 700; line-height: 1rem; }
.signal-ledger li:first-child { padding-left: 0; }
.signal-ledger li:last-child { padding-right: 0; border-right: 0; }
.signal-index { color: var(--signal-contrast); }

.section { padding: var(--section-space) var(--gutter); }
.section-heading { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: var(--section-space); }
.section-heading > .eyebrow { grid-column: 1 / 4; }
.section-heading > h2 { grid-column: 4 / 11; }
.section-heading h2 { margin: 0; font-size: clamp(2.6rem, 5.4vw, 6.5rem); font-weight: 500; letter-spacing: -0.052em; line-height: var(--leading-display); text-wrap: balance; }
.service-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.service-list li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: calc(var(--baseline) * 5) 0; border-bottom: 1px solid var(--line); }
.service-number { grid-column: 1 / 2; }.service-list h3 { grid-column: 3 / 6; }.service-list p { grid-column: 7 / 11; }.service-tag { grid-column: 11 / 13; }
.service-list h3 { margin: 0; font-size: clamp(2rem, 3.7vw, 4.2rem); font-weight: 500; letter-spacing: -0.05em; line-height: 4rem; }
.service-list p { max-width: 42rem; margin: 0; }
.service-tag { justify-self: end; padding: 0.35rem 0.5rem; border: 1px solid var(--line); }

.inverse { color: var(--inverse-fg); background: var(--inverse-bg); }
.operating-model { padding: var(--section-space) var(--gutter); }
.operating-model-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; }
.operating-model .section-heading { display: block; grid-column: 1 / 7; margin: 0; }
.operating-model .section-heading h2 { margin-top: calc(var(--baseline) * 4); }
.model-copy { grid-column: 8 / 13; max-width: 42rem; padding-top: calc(var(--baseline) * 8); }
.model-copy .lead { margin: 0 0 2rem; font-size: clamp(1.5rem, 2.35vw, 2.4rem); font-weight: 450; letter-spacing: -0.028em; line-height: var(--leading-lead); }
.model-copy > p:not(.lead) { max-width: 38rem; color: var(--inverse-muted); }
.button { display: inline-flex; justify-content: space-between; gap: 2rem; min-width: 15rem; margin-top: 2rem; padding: 1rem 1.25rem; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); font-family: var(--mono); font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.button:hover, .button:focus-visible { color: var(--signal-ink); background: var(--signal); }
.button.light { border-color: var(--inverse-fg); color: var(--inverse-bg); background: var(--inverse-fg); }
.button.light:hover, .button.light:focus-visible { color: var(--signal-ink); background: var(--signal); }
.model-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: calc(var(--baseline) * 18) 0 0; padding: 0; border-bottom: 1px solid var(--inverse-line); list-style: none; }
.model-step { display: grid; min-height: calc(var(--baseline) * 16); grid-template-columns: auto 1fr; gap: 1rem; padding: calc(var(--baseline) * 3) calc(var(--baseline) * 2); border-top: 1px solid var(--inverse-line); border-right: 1px solid var(--inverse-line); color: var(--inverse-fg); font-family: var(--mono); font-size: .68rem; font-weight: 650; line-height: 1rem; }
.model-step:first-child { padding-left: 0; }
.model-step:last-child { padding-right: 0; border-right: 0; }
.model-step span { color: var(--signal-inverse); }

.row-heading { grid-template-rows: auto auto; align-items: last baseline; }
.row-heading > .eyebrow { grid-column: 1 / 8; grid-row: 1; }
.row-heading > h2 { grid-column: 1 / 8; grid-row: 2; margin-top: calc(var(--baseline) * 3); }
.row-heading > p, .row-heading > .text-link { grid-column: 9 / 13; grid-row: 2; max-width: 36rem; margin: 0; align-self: last baseline; }
.work-feature { display: grid; grid-template-columns: 7fr 5fr; border: 1px solid var(--ink); }
.work-visual { min-height: 34rem; }
.work-meta { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2rem, 5vw, 5rem); border-left: 1px solid var(--ink); }
.work-meta h3 { margin: 2rem 0 1rem; font-size: clamp(2rem, 3.8vw, 4rem); font-weight: 500; letter-spacing: -0.046em; line-height: var(--leading-title); }
.work-meta .text-link { margin-top: 4rem; }
.testimonials { border-top: 1px solid var(--ink); }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.testimonial-card { display: flex; min-height: 30rem; flex-direction: column; justify-content: space-between; margin: 0; padding: calc(var(--baseline) * 8); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.testimonial-card > p { max-width: 24ch; margin: 0; font-size: clamp(1.75rem, 3vw, 3.5rem); font-weight: 450; letter-spacing: -.038em; line-height: var(--leading-title); }
.testimonial-card footer { display: grid; grid-template-columns: 1fr auto; gap: 0 2rem; padding-top: calc(var(--baseline) * 8); border-top: 1px solid var(--line); font-family: var(--mono); font-size: .68rem; line-height: 1rem; }
.testimonial-card cite { font-style: normal; font-weight: 700; }.testimonial-card footer span { grid-column: 1; color: var(--muted); }.testimonial-card footer a { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.latest-article { display: grid; grid-template-columns: 2fr 5fr 4fr 1fr; gap: 2rem; align-items: start; padding: 2.5rem 0; border-top: 1px solid var(--ink); }
.latest-article:last-of-type { border-bottom: 1px solid var(--ink); }
.latest-article h3 { margin: 0; font-size: clamp(1.75rem, 3vw, 3.5rem); font-weight: 500; letter-spacing: -0.042em; line-height: var(--leading-title); }
.latest-article p { margin: 0; }.latest-article > span { justify-self: end; font-size: 2rem; }

.page-hero { display: grid; grid-template-columns: repeat(12, 1fr); min-height: min(46rem, calc(100svh - var(--baseline))); padding: var(--section-space) var(--gutter) calc(var(--baseline) / 2); border-bottom: 1px solid var(--ink); }
.page-hero .eyebrow { grid-column: 1 / 4; }
.page-hero h1 { grid-column: 1 / 10; align-self: end; margin: var(--baseline) 0 0; font-size: clamp(4rem, 8.5vw, 9.5rem); font-weight: 500; letter-spacing: -0.06em; line-height: var(--leading-page); text-wrap: balance; }
.page-intro { grid-column: 1 / 6; align-self: end; max-width: 42rem; margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.5rem); line-height: 2rem; }
.capability-index article { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: var(--section-space) var(--gutter); border-bottom: 1px solid var(--ink); }
.capability-side { grid-column: 1 / 4; }.capability-index article > div:last-child { grid-column: 5 / 12; }
.capability-side { display: flex; flex-direction: column; justify-content: space-between; min-height: 28rem; }
.capability-index article > div:last-child { max-width: 62rem; }
.capability-index h2 { margin: 0 0 2rem; font-size: clamp(3rem, 6.5vw, 7.5rem); font-weight: 500; letter-spacing: -0.055em; line-height: var(--leading-page); }
.capability-index .lead { font-size: clamp(1.5rem, 2.4vw, 2.5rem); letter-spacing: -0.035em; line-height: var(--leading-lead); }
.capability-index h3 { margin-top: 3rem; font-family: var(--mono); font-size: 0.75rem; }
.capability-index ul, .work-copy ul { padding: 0; list-style: none; border-top: 1px solid var(--line); }
.capability-index li, .work-copy li { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }

.work-entry { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: var(--section-space) var(--gutter); border-bottom: 1px solid var(--ink); }
.work-code { grid-column: 1 / 2; }.work-entry .work-canvas { grid-column: 2 / 8; }.work-copy { grid-column: 9 / 13; }
.work-canvas { position: relative; display: grid; min-height: 30rem; place-items: center; overflow: hidden; border: 1px solid var(--ink); }
.work-canvas strong { position: relative; z-index: 2; max-width: 90%; font-size: clamp(2rem, 3.6vw, 4.2rem); font-weight: 500; letter-spacing: -0.05em; text-align: center; text-wrap: balance; }
.work-canvas span, .work-canvas::before, .work-canvas::after { content: ""; position: absolute; }
/* ---- Industry canvases: one abstract, token-driven vignette per sector ---- */
.work-canvas.orderbook { color: var(--signal-ink); background: var(--signal); }
.work-canvas.orderbook::before { inset: 0; background: repeating-linear-gradient(180deg, color-mix(in srgb, currentColor 26%, transparent) 0 1px, transparent 1px 2.4rem); }
.work-canvas.orderbook::after { left: 12%; right: 12%; bottom: 14%; height: 34%; background: linear-gradient(currentColor, currentColor) 0% 100% / 5% 28%, linear-gradient(currentColor, currentColor) 11% 100% / 5% 52%, linear-gradient(currentColor, currentColor) 22% 100% / 5% 38%, linear-gradient(currentColor, currentColor) 33% 100% / 5% 74%, linear-gradient(currentColor, currentColor) 44% 100% / 5% 60%, linear-gradient(currentColor, currentColor) 56% 100% / 5% 88%, linear-gradient(currentColor, currentColor) 67% 100% / 5% 46%, linear-gradient(currentColor, currentColor) 78% 100% / 5% 68%, linear-gradient(currentColor, currentColor) 89% 100% / 5% 34%, linear-gradient(currentColor, currentColor) 100% 100% / 5% 56%; background-repeat: no-repeat; opacity: 0.85; }
.work-canvas.specimen { color: var(--inverse-fg); background: var(--inverse-bg); }
.work-canvas.specimen::before { width: 74%; aspect-ratio: 1; border: 1px solid var(--inverse-line); border-radius: 50%; }
.work-canvas.specimen::after { width: 44%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; }
.work-canvas.specimen span { width: 0.9rem; aspect-ratio: 1; border-radius: 50%; background: var(--signal); transform: translate(4.5rem, -3.5rem); box-shadow: -8rem 6.5rem 0 color-mix(in srgb, var(--signal) 55%, transparent); }
.work-canvas.dossier { background: var(--paper-2); }
.work-canvas.dossier::before { inset: 16% 24%; border: 1px solid var(--ink); background: repeating-linear-gradient(180deg, transparent 0 1.6rem, var(--line) 1.6rem calc(1.6rem + 1px)); transform: rotate(-4deg); }
.work-canvas.dossier::after { inset: 16% 24%; border: 1px solid var(--ink); background: var(--paper); transform: translate(1.4rem, 1.1rem) rotate(3deg); box-shadow: 0 0 0 1px var(--paper); }
.work-canvas.dossier span { width: 3.2rem; height: 0.6rem; background: var(--signal); transform: translate(-1rem, -4.6rem) rotate(3deg); }
.work-canvas.waveform { color: var(--inverse-fg); background: var(--inverse-bg); }
.work-canvas.waveform::before { left: 10%; right: 10%; top: 50%; height: 1px; background: var(--inverse-line); }
.work-canvas.waveform::after { left: 14%; right: 14%; top: 30%; height: 40%; background: linear-gradient(currentColor, currentColor) 0% 50% / 2px 22%, linear-gradient(currentColor, currentColor) 9% 50% / 2px 58%, linear-gradient(currentColor, currentColor) 18% 50% / 2px 34%, linear-gradient(var(--signal), var(--signal)) 27% 50% / 2px 92%, linear-gradient(currentColor, currentColor) 36% 50% / 2px 64%, linear-gradient(currentColor, currentColor) 45% 50% / 2px 28%, linear-gradient(var(--signal), var(--signal)) 55% 50% / 2px 76%, linear-gradient(currentColor, currentColor) 64% 50% / 2px 44%, linear-gradient(currentColor, currentColor) 73% 50% / 2px 86%, linear-gradient(currentColor, currentColor) 82% 50% / 2px 30%, linear-gradient(var(--signal), var(--signal)) 91% 50% / 2px 52%, linear-gradient(currentColor, currentColor) 100% 50% / 2px 20%; background-repeat: no-repeat; }
.work-canvas.press { background: var(--paper-2); }
.work-canvas.press::before { inset: 14% 30%; border: 1px solid var(--ink); background: linear-gradient(var(--line), var(--line)) 50% 24% / 62% 1px, linear-gradient(var(--line), var(--line)) 50% 34% / 62% 1px, linear-gradient(var(--line), var(--line)) 50% 44% / 62% 1px, linear-gradient(var(--line), var(--line)) 50% 54% / 40% 1px, linear-gradient(var(--signal), var(--signal)) 50% 76% / 62% 0.5rem; background-repeat: no-repeat; }
.work-canvas.press::after { top: 14%; right: 30%; width: 2.6rem; aspect-ratio: 1; background: var(--ink); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.work-canvas.candles { color: var(--inverse-fg); background: var(--inverse-bg); }
.work-canvas.candles::before { left: 10%; right: 10%; top: 20%; bottom: 20%; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--inverse-line) calc(12.5% - 1px) 12.5%); opacity: 0.6; }
.work-canvas.candles::after { left: 16%; right: 16%; top: 24%; bottom: 24%; background: linear-gradient(currentColor, currentColor) 2% 78% / 0.9rem 26%, linear-gradient(currentColor, currentColor) 18% 60% / 0.9rem 34%, linear-gradient(var(--signal), var(--signal)) 34% 44% / 0.9rem 42%, linear-gradient(currentColor, currentColor) 50% 56% / 0.9rem 24%, linear-gradient(var(--signal), var(--signal)) 66% 30% / 0.9rem 48%, linear-gradient(currentColor, currentColor) 82% 22% / 0.9rem 30%, linear-gradient(var(--signal), var(--signal)) 98% 8% / 0.9rem 38%; background-repeat: no-repeat; }
.work-canvas.ruled { background: var(--paper-2); }
.work-canvas.ruled::before { inset: 0; background: repeating-linear-gradient(180deg, transparent 0 2.2rem, var(--line) 2.2rem calc(2.2rem + 1px)); }
.work-canvas.ruled::after { top: 0; bottom: 0; left: 22%; width: 1px; background: var(--signal); }
.work-canvas.ruled span { width: 1rem; aspect-ratio: 1; border-radius: 50%; background: var(--ink); transform: translate(-6rem, -4rem); box-shadow: 9rem 3rem 0 var(--signal), 3rem 7.5rem 0 var(--ink); }
/* the fintech label sits above its bars instead of biting into them */
.work-canvas.orderbook strong { transform: translateY(-5.5rem); }
/* ---- Home: the two runner-up references ---- */
.work-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.work-card { display: grid; gap: 0; border: 1px solid var(--ink); }
.work-card .work-canvas { min-height: 17rem; border: 0; border-bottom: 1px solid var(--ink); }
.work-card .work-canvas strong { font-size: clamp(1.8rem, 3vw, 3rem); }
.work-card > div { padding: 1.5rem; }
.work-card h3 { margin: 0.75rem 0 0; font-size: clamp(1.25rem, 1.8vw, 1.7rem); font-weight: 500; letter-spacing: -0.03em; line-height: 2rem; }
.work-copy { align-self: end; }.work-copy h2 { margin: 1.5rem 0; font-size: clamp(2.2rem, 4.2vw, 4.7rem); font-weight: 500; letter-spacing: -0.052em; line-height: var(--leading-title); }

.journal-hero { color: var(--inverse-fg); background-color: var(--inverse-bg); background-image: linear-gradient(to right, transparent calc(100% - 1px), var(--inverse-line) 1px); }
.article-index { padding: 0 var(--gutter) var(--space-24); }
.article-row { display: grid; grid-template-columns: 2fr 8fr 1fr; gap: 2rem; padding: 3rem 0; border-bottom: 1px solid var(--ink); }
.article-row h2 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 4.5rem); font-weight: 500; letter-spacing: -0.05em; line-height: var(--leading-title); }
.article-row p { max-width: 52rem; margin: 0 0 1.5rem; }.article-arrow { justify-self: end; font-size: 2rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-list span { padding: 0.3rem 0.5rem; border: 1px solid var(--line); font-family: var(--mono); font-size: 0.65rem; }
.article-header { display: grid; grid-template-columns: repeat(12, 1fr); padding: 3rem var(--gutter) 5rem; border-bottom: 1px solid var(--ink); }
.back-link { grid-column: 1 / 4; font-family: var(--mono); font-size: 0.7rem; }.article-meta { grid-column: 9 / -1; display: flex; justify-content: space-between; }
.article-header h1 { grid-column: 2 / 12; margin: 8rem 0 2rem; font-size: clamp(3.4rem, 8vw, 9rem); font-weight: 500; letter-spacing: -0.075em; line-height: var(--leading-page); }
.article-header > p { grid-column: 7 / 12; margin: 0 0 2rem; font-size: clamp(1.25rem, 2vw, 2rem); line-height: var(--leading-lead); }.article-header .tag-list { grid-column: 7 / 12; }
.article-layout { display: grid; grid-template-columns: 13rem 7fr 2fr; gap: 2rem; padding: 5rem var(--gutter) 10rem; }
.article-layout aside { max-width: 13rem; color: var(--muted); font-size: 0.85rem; }.prose { grid-column: 2; max-width: 52rem; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 2rem; }
.prose h1 { margin: 0 0 3rem; font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 500; letter-spacing: -0.06em; line-height: 5rem; }.prose h2 { margin: 4rem 0 1.5rem; font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 500; letter-spacing: -0.04em; line-height: 3rem; }.prose p { margin: 0 0 1.5rem; }.prose ol, .prose ul { padding-left: 1.5rem; }.prose li { margin-bottom: 1rem; }.prose blockquote { margin: 3rem 0; padding: 1rem 0 1rem 2rem; border-left: 0.3rem solid var(--signal); font-size: 1.35em; }

.contact-page { display: grid; grid-template-columns: 7fr 5fr; min-height: calc(100svh - 5rem); }
.contact-intro { display: flex; flex-direction: column; padding: clamp(4rem, 8vw, 8rem) var(--gutter); border-right: 1px solid var(--ink); }
.contact-intro h1 { margin: 5rem 0 2rem; font-size: clamp(4rem, 8vw, 9rem); font-weight: 500; letter-spacing: -0.068em; line-height: var(--leading-page); }.contact-intro > p:not(.eyebrow) { max-width: 40rem; font-size: 1.3rem; line-height: 2rem; }.contact-direct { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; padding-top: 5rem; }.contact-direct a { font-size: clamp(1.25rem, 2vw, 2rem); }
.contact-form { align-self: center; padding: clamp(3rem, 6vw, 6rem) var(--gutter); }
.field { position: relative; margin-bottom: 2rem; }.field label { display: block; margin-bottom: 0.6rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; }.field input, .field textarea { width: 100%; padding: 0.8rem 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: none; background: transparent; }.field textarea { padding: 1rem; border: 1px solid var(--ink); resize: vertical; }.field input:focus, .field textarea:focus { border-color: var(--signal-dark); box-shadow: 0 0.15rem 0 var(--signal-dark); }.field span { display: block; margin-top: 0.5rem; color: var(--muted); font-family: var(--mono); font-size: 0.65rem; }.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }.submit { width: 100%; border: 0; }.form-privacy { color: var(--muted); font-size: 0.75rem; }.form-error { margin-bottom: 2rem; padding: 1rem; border: 1px solid var(--signal-dark); color: var(--signal-dark); }
.status-page { display: flex; min-height: 75svh; flex-direction: column; align-items: flex-start; justify-content: center; padding: 5rem var(--gutter); }.status-mark { position: absolute; right: 8vw; color: var(--signal); font-size: min(40vw, 32rem); font-weight: 900; line-height: 0.7; opacity: 0.8; }.status-page h1 { position: relative; z-index: 2; margin: 2rem 0 1rem; font-size: clamp(4rem, 12vw, 13rem); font-weight: 500; letter-spacing: -0.068em; line-height: var(--leading-page); }.status-page p { position: relative; z-index: 2; max-width: 38rem; font-size: 1.25rem; line-height: 2rem; }.status-page .button { position: relative; z-index: 2; }

.site-footer { padding: clamp(5rem, 8vw, 9rem) var(--gutter) 2rem; color: var(--inverse-fg); background: var(--inverse-bg); }
.footer-callout { display: flex; flex-direction: column; padding-bottom: 7rem; border-bottom: 1px solid var(--inverse-line); }.footer-callout a { display: flex; justify-content: space-between; align-items: end; margin-top: 2rem; font-size: clamp(3.5rem, 9vw, 10rem); font-weight: 500; letter-spacing: -0.062em; line-height: var(--leading-page); }.footer-callout a span { color: var(--signal); font-size: 0.5em; }.footer-grid { display: grid; grid-template-columns: 6fr repeat(2, 3fr); gap: 2rem; padding: 4rem 0; }.footer-grid p { margin: 0.5rem 0; }.footer-label { color: var(--inverse-muted); font-family: var(--mono); font-size: 0.65rem; }.footer-brand { font-size: 1.5rem; }.footer-floor { display: flex; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--inverse-line); color: var(--inverse-muted); font-family: var(--mono); font-size: 0.65rem; }
.empty-state { padding: 5rem 0; color: var(--muted); }

:focus-visible { outline: 0.2rem solid var(--signal); outline-offset: 0.2rem; }

@media (max-width: 1600px) {
  :root { --leading-hero: 6.5rem; --leading-page: 6.5rem; }
}

@media (max-width: 1200px) {
  :root { --section-space: 6rem; --leading-hero: 5rem; --leading-display: 4.5rem; --leading-page: 5.5rem; --leading-title: 3.5rem; }
}

@media (max-width: 900px) {
  :root { --header-height: 4.5rem; --section-space: 5rem; --leading-hero: 4rem; --leading-display: 4rem; --leading-page: 4.5rem; --leading-title: 3.5rem; }
  .site-header { min-height: var(--header-height); }.menu-toggle { display: block; }
  .navigation { position: absolute; top: 100%; right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 0 var(--gutter) 1rem; border-bottom: 1px solid var(--ink); background: var(--paper); }.navigation[data-open] { display: flex; }.navigation > a { padding: 1rem 0; border-bottom: 1px solid var(--line); }.nav-contact { margin-top: 0.75rem; padding: 1rem; }.theme-toggle { margin: 0.75rem 0; }.language-menu { border-bottom: 1px solid var(--line); }.language-menu summary { padding: 1rem 1.5rem 1rem 0; border: 0; }.language-menu > div { position: static; display: grid; width: auto; grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; box-shadow: none; }.language-menu a { padding: 0.7rem; }
  .grid-field { background-size: calc((100vw - 2 * var(--gutter)) / 6) 100%, 100% 6rem; }
  .hero { min-height: calc(100svh - var(--header-height)); grid-template-columns: repeat(6, 1fr); }.hero h1 { align-self: center; }.hero-bottom { grid-template-columns: repeat(6, 1fr); }.hero-description { grid-column: 1 / 6; }
  .signal-ledger ol { grid-template-columns: 1fr 1fr; }.signal-ledger li:nth-child(2) { border-right: 0; }.signal-ledger li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section-heading, .row-heading { grid-template-columns: 1fr; }.section-heading > .eyebrow, .section-heading > h2, .row-heading > .eyebrow, .row-heading > h2, .row-heading > p, .row-heading > .text-link { grid-column: 1 / -1; }.section-heading .eyebrow { margin-bottom: 2rem; }.row-heading > .eyebrow { grid-row: 1; margin-bottom: 0; }.row-heading > h2 { grid-row: 2; }.row-heading > p, .row-heading > .text-link { grid-row: 3; align-self: start; margin-top: calc(var(--baseline) * 4); }
  .service-list li { grid-template-columns: 1fr 4fr; column-gap: 1rem; }.service-number { grid-column: 1; }.service-list h3, .service-list p, .service-tag, .station-points { grid-column: 2; }.service-tag { justify-self: start; }
  .operating-model-grid { grid-template-columns: 1fr; }.operating-model .section-heading, .model-copy, .model-steps { grid-column: 1; }.model-copy { padding-top: calc(var(--baseline) * 8); }.model-steps { margin-top: calc(var(--baseline) * 12); }
  .work-feature { grid-template-columns: 1fr; }.work-duo { grid-template-columns: 1fr; }.work-meta { min-height: 25rem; border: 0; border-top: 1px solid var(--ink); }.latest-article { grid-template-columns: 1fr 3fr auto; }.latest-article p { grid-column: 2; }
  .testimonial-grid { grid-template-columns: 1fr; }.testimonial-card { min-height: 24rem; }
  .page-hero { min-height: 38rem; grid-template-columns: repeat(6, 1fr); }.page-hero .eyebrow { grid-column: 1 / 4; }.page-hero h1 { grid-column: 1 / -1; }.page-intro { grid-column: 1 / -1; margin-top: 3rem; }
  .capability-index article { grid-template-columns: 1fr; }.capability-side, .capability-index article > div:last-child { grid-column: 1; }.capability-side { min-height: auto; flex-direction: row; }
  .work-entry { grid-template-columns: 1fr; gap: 2rem; }.work-code, .work-canvas, .work-copy { grid-column: 1; }.work-code { display: flex; justify-content: space-between; }.work-canvas { min-height: 24rem; }
  .article-header { grid-template-columns: repeat(6, 1fr); }.article-meta { grid-column: 4 / -1; }.article-header h1 { grid-column: 1 / -1; margin-top: 6rem; }.article-header > p, .article-header .tag-list { grid-column: 2 / -1; }.article-layout { grid-template-columns: 1fr; }.article-layout aside { display: none; }.prose { grid-column: 1; }
  .contact-page { grid-template-columns: 1fr; }.contact-intro { min-height: 45rem; border: 0; border-bottom: 1px solid var(--ink); }.contact-form { width: 100%; }
  .footer-grid { grid-template-columns: 2fr 1fr; }.footer-grid > div { min-height: 6rem; }
}

@media (max-width: 520px) {
  :root { --gutter: 1rem; --leading-hero: 3rem; --leading-display: 3rem; --leading-page: 3.5rem; --leading-title: 3rem; --leading-lead: 2rem; }
  .hero { padding-top: calc(var(--baseline) * 5); }.hero-kicker { grid-column: 1 / -1; }.hero h1 { max-width: 100%; font-size: clamp(2.65rem, 13vw, 4.4rem); }.hero-description { grid-column: 1 / -1; }
  .signal-ledger li { min-height: calc(var(--baseline) * 10); gap: 0.5rem; padding: calc(var(--baseline) * 2); font-size: 0.58rem; }
  .section { padding-block: 5rem; }.section-heading { margin-bottom: 4rem; }.section-heading h2 { font-size: 2.7rem; }
  .service-list li { gap: 1rem; padding: 2rem 0; }.service-list h3 { font-size: 2.4rem; }.model-steps { grid-template-columns: 1fr 1fr; }.model-step:nth-child(2) { border-right: 0; }.model-step:nth-child(-n+2) { border-bottom: 1px solid var(--inverse-line); }
  .work-visual { min-height: 24rem; }.work-meta { min-height: 22rem; padding: 2rem 1rem; }.latest-article { grid-template-columns: 1fr auto; gap: 1rem; }.latest-article h3, .latest-article p { grid-column: 1; }.latest-article > span { grid-column: 2; grid-row: 1; }
  .page-hero { min-height: 32rem; padding-top: 4rem; }.page-hero h1 { font-size: 3.7rem; }.page-intro { grid-column: 1 / -1; }
  .capability-index h2 { font-size: 3.3rem; }.capability-side { font-size: 0.75rem; }.work-canvas { min-height: 19rem; }
  .article-row { grid-template-columns: 1fr auto; gap: 1rem; }.article-row > div { grid-column: 1 / -1; }.article-header { padding-top: 2rem; }.back-link { grid-column: 1 / 3; }.article-meta { grid-column: 3 / -1; }.article-header h1 { font-size: 3.4rem; margin-top: 5rem; }.article-header > p, .article-header .tag-list { grid-column: 1 / -1; }.article-layout { padding-block: 4rem 6rem; }
  .contact-intro { min-height: 38rem; }.contact-intro h1 { font-size: 3.9rem; margin-top: 4rem; }.status-mark { opacity: 0.25; }.status-page h1 { font-size: 4rem; }
  .footer-callout { padding-bottom: 4rem; }.footer-callout a { font-size: 3.5rem; }.footer-grid { grid-template-columns: 1fr; }.footer-grid > div { min-height: auto; }.footer-floor { gap: 2rem; }.footer-brand { font-size: 1.4rem; }
}

/* ---- Motion spine: one wire down the page, one form riding it (static/motion.js) ---- */
body { position: relative; }
.stage { pointer-events: none; }
.hero { position: relative; }
.hero .stage { position: absolute; inset: 0 var(--gutter) 0 calc(var(--gutter) + var(--column) * 7); }
.services .section-heading > h2 { grid-column: 4 / 10; }
.station-list { border-top: 0; }
.station-list .station { grid-template-rows: auto auto auto auto 1fr; min-height: calc(var(--grid-row) * 9); padding: calc(var(--baseline) * 6) 0; border-top: 1px solid var(--line); border-bottom: 0; }
.station .service-number { grid-column: 1 / 2; grid-row: 1; }
.station h3 { grid-column: 2 / 6; grid-row: 1; }
.station p { grid-column: 2 / 6; grid-row: 2; max-width: 34rem; margin-top: calc(var(--baseline) * 3); }
.station .station-points { grid-column: 2 / 6; grid-row: 3; }
.station .service-tag { grid-column: 2 / 4; grid-row: 4; justify-self: start; align-self: start; margin-top: calc(var(--baseline) * 4); }
.station .stage { grid-column: 7 / 13; grid-row: 1 / 5; min-height: calc(var(--grid-row) * 7); }
.operating-model .section-heading { grid-column: 1 / 7; }
.operating-model .model-copy { grid-column: 1 / 6; grid-row: 2; padding-top: calc(var(--baseline) * 10); }
.operating-model .model-steps { grid-column: 8 / 13; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; margin: 0; border: 0; }
.operating-model .model-step { display: flex; align-items: center; gap: 1rem; min-height: calc(var(--R, 10rem) * 1.25); padding: 0 0 0 calc(var(--column) * 2 + 1.5rem); border: 0; white-space: nowrap; }
.selected-work .row-heading > h2 { grid-column: 1 / 9; }
.selected-work .row-heading > p:not(.eyebrow) { grid-column: 1 / 8; grid-row: 3; margin-top: calc(var(--baseline) * 4); }
.series-stage { min-height: calc(var(--column) * 4.5); }
.selected-work .work-feature { margin-top: calc(var(--baseline) * 8); }
.spine { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; pointer-events: none; overflow: visible; }
.spine text { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.035em; }
.spine .ink { stroke: var(--ink); }
.spine .paper { stroke: var(--inverse-fg); }
.spine .signal { stroke: var(--signal); }
.spine .signal-contrast { stroke: var(--signal-contrast); }
.spine .fill-signal { fill: var(--signal-contrast); }
.spine .fill-ink { fill: var(--ink); }
.spine [data-nodes] .fill-signal { fill: var(--signal-inverse); }
.spine .muted { fill: var(--muted); }
.spine .hatch-line { stroke: var(--ink); }
.model-step[data-lit] { color: var(--signal-inverse); }
.model-step[data-lit] span { color: var(--inverse-fg); }

@media (max-width: 900px) {
  .hero .stage { position: static; grid-column: 1 / -1; min-height: calc(var(--grid-row) * 5); }
  .station-list .station { min-height: 0; grid-template-rows: auto auto auto auto auto; }
  .station .service-number { grid-column: 1; grid-row: 1; }
  .station h3 { grid-column: 2 / -1; grid-row: 1; }
  .station p { grid-column: 2 / -1; grid-row: 2; }
  .station .station-points { grid-column: 2 / -1; grid-row: 3; max-width: 100%; }
  .station .service-tag { grid-column: 2 / -1; grid-row: 4; }
  .station .stage { grid-column: 1 / -1; grid-row: 5; min-height: calc(var(--R, 6rem) * 3.2); }
  .operating-model .section-heading, .operating-model .model-copy, .operating-model .model-steps { grid-column: 1; grid-row: auto; }
  .operating-model .model-copy { padding-top: calc(var(--baseline) * 6); }
  .operating-model .model-steps { display: flex; flex-direction: column; margin-top: calc(var(--baseline) * 8); border: 0; }
  .operating-model .model-step { display: flex; justify-content: flex-end; min-height: calc(var(--R, 6rem) * 1.25); padding: 0 calc(22% + 1.5rem) 0 0; border: 0; white-space: nowrap; }
  .selected-work .row-heading > h2, .selected-work .row-heading > p:not(.eyebrow) { grid-column: 1; }
  .series-stage { min-height: calc(var(--column) * 9); }
  /* the rail runs at 78 % of the width: copy stays left of it */
  .services .section-heading > h2, .station h3, .station p, .operating-model .section-heading, .operating-model .model-copy, .selected-work .row-heading > h2, .selected-work .row-heading > p:not(.eyebrow) { max-width: 66%; }
  .services .section-heading > h2 { grid-column: 1; }
  .signal-ledger ol { grid-template-columns: 1fr; }
  .signal-ledger li { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; }
  .signal-ledger li:last-child { border-bottom: 0; }
}
/* the three pillars carry their concrete deliverables as a quiet ledger */
.station-points { margin: 2rem 0 0; padding: 0; list-style: none; max-width: 30rem; }
.station-points li { display: block; padding: 0.85rem 0; border-top: 1px solid var(--line); font-size: 0.92rem; line-height: 1.5rem; }
.station-points li:last-child { border-bottom: 1px solid var(--line); }
.station-points li::before { content: "→  "; color: var(--signal-dark); font-family: var(--mono); }

/* ---- Work detail: canvas left, narrative right, article-like rhythm ---- */
.work-detail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; padding: var(--section-space) var(--gutter); }
.work-detail-canvas { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--header-height) + 2rem); min-height: 26rem; }
.work-detail-body { grid-column: 7 / 12; max-width: 44rem; }
.work-detail-body h2 { margin: 3rem 0 1rem; font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.035em; line-height: var(--leading-title); }
.work-detail-body h2:first-child { margin-top: 0; }
.work-detail-body p { margin: 0 0 1.5rem; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 2rem; }
.work-detail-body ul { margin: 3rem 0; padding: 0; list-style: none; }
.work-detail-body li { padding: 1rem 0; border-top: 1px solid var(--line); }
.work-detail-body li:last-child { border-bottom: 1px solid var(--line); }
.work-copy h2 a { color: inherit; text-decoration: none; }
.work-copy h2 a:hover { color: var(--signal-dark); }
@media (max-width: 900px) {
  .work-detail { grid-template-columns: 1fr; }
  .work-detail-canvas { grid-column: 1; position: static; min-height: 20rem; }
  .work-detail-body { grid-column: 1; }
}

/* ---- Live chat: a quiet pill that opens a small first-party panel ---- */
.chat[hidden], .chat [hidden] { display: none !important; }
.chat { position: fixed; right: calc(var(--gutter) / 2); bottom: calc(var(--gutter) / 2); z-index: 60; display: grid; justify-items: end; gap: 0.75rem; }
.chat-toggle { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 1rem; font-weight: 700; cursor: pointer; }
.chat-toggle:hover { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.chat-panel { display: grid; gap: 0.75rem; width: min(21rem, calc(100vw - var(--gutter))); padding: 1.25rem; border: 1px solid var(--ink); background: var(--paper); box-shadow: 0 1rem 3rem rgb(0 0 0 / 12%); }
.chat-panel header { display: flex; justify-content: space-between; align-items: baseline; }
.chat-panel header button { border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.chat-intro, .chat-hint { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.25rem; }
.chat-error { color: var(--signal-dark); }
.chat-log { display: grid; gap: 0.5rem; max-height: 14rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.chat-log li { max-width: 85%; padding: 0.5rem 0.75rem; font-size: 0.9rem; line-height: 1.35rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-log li.me { justify-self: end; background: var(--ink); color: var(--paper); }
.chat-log li.them { justify-self: start; border: 1px solid var(--line); background: var(--paper-2); }
.chat-panel form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: end; }
.chat-panel textarea { padding: 0.5rem; border: 1px solid var(--ink); border-radius: 0; background: transparent; font: inherit; font-size: 0.9rem; resize: none; }
.chat-panel form button { padding: 0.55rem 0.9rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.chat-panel form button:hover { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }

/* ---- Article figures: pre-rendered Mermaid diagrams styled with the design tokens (no inline styles, CSP-safe) ---- */
.prose .diagram { width: calc(100vw - 2 * var(--gutter)); margin: 3rem 0 3rem -15rem; } /* 13rem aside + 2rem gap: the figure spans the full content width */
.prose .diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; font-family: var(--sans); font-size: 18px; fill: var(--ink); }
.prose .diagram text, .prose .diagram tspan { fill: var(--ink); stroke: none; }
.prose .diagram .sequenceNumber { font-size: 13px; }
.prose .diagram .actor { fill: var(--paper-2); stroke: var(--line); }
.prose .diagram .actor-man line, .prose .diagram .actor-man circle { fill: var(--paper-2); stroke: var(--line); }
.prose .diagram .actor-line, .prose .diagram .loopLine, .prose .diagram .messageLine0, .prose .diagram .messageLine1, .prose .diagram .flowchart-link, .prose .diagram .transition { fill: none; stroke: var(--line); stroke-width: 1; }
.prose .diagram .messageLine1, .prose .diagram .loopLine { stroke-dasharray: 3 3; }
.prose .diagram .labelBox { fill: var(--paper-2); stroke: var(--line); }
.prose .diagram .activation0, .prose .diagram .activation1, .prose .diagram .activation2 { fill: var(--signal-soft); stroke: var(--signal-contrast); }
.prose .diagram .sequenceNumber { fill: var(--paper); }
.prose .diagram .messageText + .sequenceNumber, .prose .diagram circle.sequenceNumber { fill: var(--signal-contrast); }
.prose .diagram .note { fill: var(--paper); stroke: var(--line); }
.prose .diagram marker path, .prose .diagram .arrowMarkerPath, .prose .diagram .marker { fill: var(--line); stroke: var(--line); }
.prose .diagram .node rect, .prose .diagram .node circle, .prose .diagram .node ellipse, .prose .diagram .node polygon, .prose .diagram .node path, .prose .diagram .label-container { fill: var(--paper-2); stroke: var(--line); stroke-width: 1; }
.prose .diagram .cluster rect { fill: none; stroke: var(--line); stroke-dasharray: 2 4; }
.prose .diagram .edgeLabel .background, .prose .diagram .edgeLabel rect { fill: var(--paper); stroke: none; }
.prose .diagram .edgeLabel text { fill: var(--muted); }
.prose .diagram .state-start circle, .prose .diagram .state-end circle { fill: var(--ink); stroke: var(--ink); }
.prose .diagram .statediagram-state .divider { stroke: var(--line); }
.prose .diagram-source { margin: 3rem 0; padding: 1.5rem; overflow-x: auto; border: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 0.8rem; line-height: 1.25rem; }
.prose img { display: block; max-width: 100%; height: auto; margin: 3rem 0; }
@media (max-width: 900px) { .prose .diagram { width: 100%; margin-left: 0; } }