/* Archiveris site styles. Values come from tokens.css (design system 0.3.0-draft). */
/* ---------------------------------------------------------------
   Fonts — self-hosted, per the brand brief (never Google Fonts).
   --------------------------------------------------------------- */
@font-face { font-family: Jost; src: url(fonts/Jost-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/Inter-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono-Variable.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ---------------------------------------------------------------
   Base — every value below comes from assets/tokens.css
   (copied verbatim from the design system, tokens 0.3.0-draft).
   --------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-canvas); color: var(--color-ink);
  font: var(--type-body); letter-spacing: var(--type-body-tracking);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
code, .mono { font: var(--type-code); font-feature-settings: var(--type-code-features); }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(var(--space-4), 5vw, var(--space-8)); }
.icon { width: var(--icon-size-md); height: var(--icon-size-md); flex: none; }
.icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); flex: none; }

.overline { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; }
.display { font: var(--type-display); letter-spacing: var(--type-display-tracking); }
.title-1 { font: var(--type-title-1); letter-spacing: var(--type-title-1-tracking); }
.title-2 { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); }
.heading { font: var(--type-heading); letter-spacing: var(--type-heading-tracking); }
.small { font: var(--type-small); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--color-ink-muted); }
.secondary { color: var(--color-ink-secondary); }
.bronze { color: var(--color-bronze); }

/* Buttons — md radius, 44px control height. Bronze is the only accent on the page. */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--layout-control-height-lg); padding-inline: var(--space-5);
  border-radius: var(--radius-md); font: var(--type-body-strong); white-space: nowrap;
  transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.btn-primary { background: var(--product-accent); color: var(--product-on-accent); }
.btn-primary:hover { background: var(--product-accent-strong); }
.btn-secondary { border: var(--border-hairline) solid var(--color-line-strong); color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-surface-sunken); }
.btn-sm { height: var(--layout-control-height-md); padding-inline: var(--space-4); }

.text-link { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-body-strong); color: var(--color-ink); border-bottom: var(--border-hairline) solid var(--color-line-strong); padding-bottom: 2px; }
.text-link:hover { border-color: var(--color-ink); }
.text-link .icon-sm { transition: transform var(--motion-fast) var(--motion-ease); }
.text-link:hover .icon-sm { transform: translateX(2px); }

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-hairline) solid var(--color-line);
}
.site-header .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand img { width: 32px; height: 32px; }
/* The wordmark is a logo, set in Jost and tracked like the brand board. */
.brand span { font: 500 17px/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-links > a, .nav-menu > summary { font: var(--type-body); color: var(--color-ink-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.nav-links > a:hover, .nav-menu > summary:hover, .nav-menu[open] > summary { color: var(--color-ink); }
.nav-menu { position: relative; }
.nav-menu summary .icon-sm { transition: transform var(--motion-base) var(--motion-ease); }
.nav-menu[open] summary .icon-sm { transform: rotate(180deg); }
.menu-panel {
  position: absolute; top: calc(100% + var(--space-4)); left: calc(-1 * var(--space-4)); width: 400px;
  padding: var(--space-2); background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
}
.menu-panel .overline { display: block; padding: var(--space-3) var(--space-3) var(--space-2); color: var(--color-ink-muted); }
.menu-item { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); }
.menu-item:hover { background: var(--color-surface-sunken); }
.menu-item img { width: 40px; height: 40px; }
.menu-item strong { display: block; font: var(--type-body-strong); }
.menu-item span { display: block; font: var(--type-small); color: var(--color-ink-muted); }

/* ---------------------------------------------------------------
   Hero — follows the brand board: company lines either side,
   the mark and wordmark in the centre, the three products below.
   --------------------------------------------------------------- */
.hero { padding-block: var(--space-9) var(--space-7); }
.hero-grid { display: grid; grid-template-columns: 1fr minmax(auto, 560px) 1fr; gap: var(--space-6); align-items: start; }
.hero-left p:first-child { color: var(--color-ink-secondary); max-width: 20ch; }
.stack { margin-top: var(--space-5); display: grid; gap: var(--space-3); color: var(--color-ink-muted); }
.hero-right { justify-self: end; display: flex; gap: var(--space-5); }
.hero-right .rule { width: var(--border-hairline); background: var(--color-line-strong); }
.hero-right .stack { margin-top: 0; }
.hero-right .stack::before { content: ""; width: var(--space-7); height: var(--border-hairline); background: var(--color-line-strong); margin-bottom: var(--space-2); }

.hero-centre { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-centre > img { width: clamp(120px, 14vw, 176px); height: auto; }
/* Hero wordmark: a logo lockup, so it sits outside the text type scale. */
.hero-centre h1 { margin-top: var(--space-4); font: 400 clamp(40px, 5.4vw, 64px)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; padding-left: .2em; }
.hero-centre .overline { margin-top: var(--space-4); color: var(--color-ink-secondary); }
.hero-centre .lede { margin-top: var(--space-6); color: var(--color-ink-secondary); max-width: 46ch; }
.hero-actions { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* Joinery: the hairline bracket from the parent to its three products. */
.bracket { position: relative; height: var(--space-7); margin: var(--space-8) calc(100% / 6) 0; border: var(--border-hairline) solid var(--color-line-strong); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.bracket::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--space-6)); height: var(--space-6); width: var(--border-hairline); background: var(--color-line-strong); }

/* ---------------------------------------------------------------
   Products
   --------------------------------------------------------------- */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding-top: var(--space-5); }
.product { display: flex; flex-direction: column; }
.product-head { display: flex; align-items: center; gap: var(--space-4); }
.product-head img { width: 88px; height: 88px; flex: none; }
/* Product wordmark — the lockup name in Jost at title-1, tracked like the board. */
.product-head h3 { font: var(--type-title-1); letter-spacing: .16em; text-transform: uppercase; }
.product-head .overline { margin-top: var(--space-2); color: var(--color-ink-muted); }
.product .tagline { margin-top: var(--space-5); font: var(--type-heading); letter-spacing: var(--type-heading-tracking); }
.product .desc { margin-top: var(--space-3); color: var(--color-ink-secondary); }
.product ul { margin-top: var(--space-5); border-top: var(--border-hairline) solid var(--color-line); }
.product li { display: flex; gap: var(--space-3); align-items: baseline; padding-block: var(--space-3); border-bottom: var(--border-hairline) solid var(--color-line); font: var(--type-small); color: var(--color-ink-secondary); }
.product li::before { content: ""; flex: none; width: var(--space-2); height: var(--border-hairline); background: var(--color-line-strong); transform: translateY(-4px); }
.product .text-link { margin-top: auto; align-self: flex-start; }
.product ul { margin-bottom: var(--space-5); }

/* ---------------------------------------------------------------
   Photography band + closing line (brand board, lower half)
   --------------------------------------------------------------- */
.photo-band { margin-top: var(--space-9); display: grid; grid-template-columns: repeat(3, 1fr); }
.photo-band img { width: 100%; aspect-ratio: 514 / 316; object-fit: cover; object-position: left center; }
/* A fixed dark strip in both themes: the dark-theme surface-sunken and ink-muted values. */
.statement { background: #0D0E10; color: #9D9A93; }
.statement .wrap { min-height: 96px; display: flex; align-items: center; justify-content: center; position: relative; padding-block: var(--space-6); }
.statement p { text-align: center; }
.statement img { position: absolute; right: clamp(var(--space-4), 5vw, var(--space-8)); width: 40px; height: 40px; }

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
.section { padding-block: var(--space-7); }
/* A tinted band separates itself, so it can afford more room inside. */
.section.spotlight, .section.two-ways { padding-block: var(--space-8); }
/* A section that continues the one above it sits closer to it. */
.section.is-tight { padding-top: var(--space-4); }
.section + .section { border-top: var(--border-hairline) solid var(--color-line); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: end; margin-bottom: var(--space-6); }
.section-head .overline { color: var(--color-bronze); margin-bottom: var(--space-4); }
.section-head p { color: var(--color-ink-secondary); max-width: 52ch; }

/* How the three fit together — a worked example from the sample data. */
.flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; }
.flow-arrow { display: flex; align-items: center; justify-content: center; width: var(--space-7); color: var(--color-line-strong); }
.step { background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.step-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline) solid var(--color-line); }
.step-head img { width: 32px; height: 32px; }
.step-head .overline { color: var(--color-ink-muted); }
.step-head strong { display: block; font: var(--type-body-strong); }
.step-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.step-body > p { color: var(--color-ink-secondary); font: var(--type-small); }
.kv { background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-1) var(--space-4); font-variant-numeric: tabular-nums; margin-top: auto; }
.kv dt { font: var(--type-code); font-feature-settings: var(--type-code-features); color: var(--color-ink-muted); }
.kv dd { font: var(--type-code); font-feature-settings: var(--type-code-features); color: var(--color-ink); text-align: right; overflow-wrap: anywhere; }
.afford { margin-top: auto; border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.afford-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font: var(--type-small); font-weight: 500; }
.tag-evidence { background: var(--color-afford-evidence-soft); color: var(--color-afford-evidence); }
.afford .reason { font: var(--type-small); color: var(--color-ink-secondary); }
.code-chip { justify-self: start; max-width: 100%; overflow-wrap: anywhere; background: var(--color-code-bg); border-radius: var(--radius-sm); padding: 0 var(--space-2); }
.flow-note { margin-top: var(--space-5); font: var(--type-small); color: var(--color-ink-muted); }

/* Professional services */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--border-hairline) solid var(--color-line-strong); }
.services-grid article { padding: var(--space-5) var(--space-5) 0 0; }
.services-grid article + article { padding-left: var(--space-5); border-left: var(--border-hairline) solid var(--color-line); }
.services-grid .mono { color: var(--color-ink-muted); }
.services-grid h3 { margin-top: var(--space-6); }
.services-grid p { margin-top: var(--space-3); color: var(--color-ink-secondary); }
.services-cta { margin-top: var(--space-7); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-5) var(--space-6); background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); }

/* Company */
.company { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.company-head .overline { color: var(--color-bronze); margin-bottom: var(--space-4); }
.company h2 .muted { display: block; }
.company-copy { display: grid; gap: var(--space-4); color: var(--color-ink-secondary); }
.company-copy > p:first-child { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--color-ink); }
.belief { margin-top: var(--space-4); padding-top: var(--space-5); border-top: var(--border-hairline) solid var(--color-line); display: grid; grid-template-columns: 128px 1fr; gap: var(--space-5); }
.belief .overline { color: var(--color-bronze); padding-top: 3px; }
.belief strong { font: var(--type-body-strong); color: var(--color-ink); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
footer { border-top: var(--border-hairline) solid var(--color-line); background: var(--color-surface); }
.footer-grid { padding-block: var(--space-8) var(--space-7); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); }
.footer-brand p { margin-top: var(--space-5); color: var(--color-ink-muted); }
.footer-col h2 { color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.footer-col ul { display: grid; gap: var(--space-3); }
.footer-col a { color: var(--color-ink-secondary); }
.footer-col a:hover { color: var(--color-ink); }
.footer-base { border-top: var(--border-hairline) solid var(--color-line); padding-block: var(--space-5); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font: var(--type-small); color: var(--color-ink-muted); }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-left, .hero-right { display: none; }
  .flow { grid-template-columns: minmax(0,1fr); }
  .flow-arrow { width: auto; height: var(--space-7); }
  .flow-arrow svg { transform: rotate(90deg); }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .services-grid article:nth-child(3) { padding-left: 0; border-left: 0; }
  .services-grid article:nth-child(n+3) { margin-top: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .bracket { display: none; }
  .hero { padding-block: var(--space-8) var(--space-6); }
  .products { grid-template-columns: 1fr; gap: var(--space-7); padding-top: var(--space-7); }
  .photo-band { grid-template-columns: 1fr; }
  .statement img { display: none; }
  .section { padding-block: var(--space-7); }
/* A tinted band separates itself, so it can afford more room inside. */
.section.spotlight, .section.two-ways { padding-block: var(--space-8); }
/* A section that continues the one above it sits closer to it. */
.section.is-tight { padding-top: var(--space-4); }
  .section-head, .company { grid-template-columns: 1fr; gap: var(--space-5); }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid article, .services-grid article + article { padding: var(--space-5) 0; border-left: 0; margin-top: 0; border-bottom: var(--border-hairline) solid var(--color-line); }
  .services-grid h3 { margin-top: var(--space-3); }
}
@media (max-width: 560px) {
  .brand span { letter-spacing: .16em; }
  .belief { grid-template-columns: 1fr; gap: var(--space-2); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition: none !important; }
}

/* ===============================================================
   Product pages (kebiki/, and later jiwari/ and teban/).
   The page sets data-product on <html>, so --product-accent is the
   product's own accent: the product theme wins on its own page.
   =============================================================== */

html[data-product] { scroll-padding-top: 144px; }

/* Sticky product bar under the site header. */
.product-bar { position: sticky; top: 72px; z-index: 15; background: var(--color-surface); border-bottom: var(--border-hairline) solid var(--color-line); }
.product-bar .wrap { height: 56px; display: flex; align-items: center; gap: var(--space-6); }
.product-bar .brand img { width: 24px; height: 24px; }
.product-bar .brand span { font-size: 15px; letter-spacing: .2em; }
.product-bar nav { display: flex; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; flex: 1; padding-block: var(--space-1); }
.product-bar nav a { font: var(--type-small); color: var(--color-ink-secondary); white-space: nowrap; }
.product-bar nav a:hover { color: var(--color-ink); }

/* Product hero */
.p-hero { padding-block: var(--space-8) var(--space-7); }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-8); align-items: center; }
.lockup { display: flex; align-items: center; gap: var(--space-4); }
.lockup img { width: 64px; height: 64px; }
.lockup-name { font: 400 28px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; }
.lockup .overline { margin-top: var(--space-2); color: var(--color-ink-muted); }
.p-hero h1 { margin-top: var(--space-7); }
.p-hero .lede { margin-top: var(--space-4); color: var(--color-ink-secondary); max-width: 52ch; }
.p-hero .hero-actions { justify-content: flex-start; }
.trust { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font: var(--type-small); color: var(--color-ink-muted); }
.trust span { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Code panels: request, response, trace, BDL. */
.code-card { background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.code-card + .code-card { margin-top: var(--space-4); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: var(--border-hairline) solid var(--color-line); font: var(--type-small); color: var(--color-ink-muted); }
.code-head code { color: var(--color-ink-secondary); overflow-wrap: anywhere; }
.code-card pre { margin: 0; padding: var(--space-4); overflow-x: auto; background: var(--color-code-bg); font: var(--type-code); font-feature-settings: var(--type-code-features); color: var(--color-ink); }
.code-card pre .k { color: var(--product-accent-ink); }
.code-card pre .c { color: var(--color-ink-muted); }
.code-caption { margin-top: var(--space-4); font: var(--type-small); color: var(--color-ink-muted); max-width: 72ch; }

/* Cards and grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.card { background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); }
.card h3 { font: var(--type-heading); letter-spacing: var(--type-heading-tracking); }
.card p { margin-top: var(--space-2); color: var(--color-ink-secondary); }
.card .icon { color: var(--product-accent-ink); margin-bottom: var(--space-4); }
.card ul { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.card li { display: flex; gap: var(--space-2); font: var(--type-small); color: var(--color-ink-secondary); }
.card li .icon-sm { margin-top: 2px; color: var(--color-ink-muted); }

/* Split sections: copy on one side, evidence on the other. */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; }
.split .overline { color: var(--product-accent-ink); margin-bottom: var(--space-4); }
.split .body { margin-top: var(--space-4); display: grid; gap: var(--space-4); color: var(--color-ink-secondary); }
.p-section .section-head .overline { color: var(--product-accent-ink); }

/* Phases of the build/run/change loop. */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--border-hairline) solid var(--color-line-strong); }
.phase { padding: var(--space-5) var(--space-5) 0 0; }
.phase + .phase { padding-left: var(--space-5); border-left: var(--border-hairline) solid var(--color-line); }
.phase .overline { color: var(--product-accent-ink); }
.phase h3 { margin-top: var(--space-3); }
.phase ol { margin-top: var(--space-5); list-style: none; counter-reset: step; display: grid; gap: var(--space-4); }
.phase li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-2); }
.phase li::before { content: counter(step, decimal-leading-zero); font: var(--type-code); color: var(--color-ink-muted); padding-top: 1px; }
.phase li strong { display: block; font: var(--type-body-strong); }
.phase li span { display: block; font: var(--type-small); color: var(--color-ink-secondary); margin-top: var(--space-1); }
.split-rule { margin-top: var(--space-7); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--product-accent-soft); display: flex; gap: var(--space-4); align-items: flex-start; }
.split-rule .icon { color: var(--product-accent-ink); margin-top: 2px; }
.split-rule p { color: var(--color-ink-secondary); }
.split-rule strong { color: var(--color-ink); }

/* Statuses: always icon + label, colour only as reinforcement. */
.statuses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.status { border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); background: var(--color-surface); }
.status-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font: var(--type-small); font-weight: 500; }
.status-tag code { font-weight: 500; }
.st-ok { background: var(--color-success-soft); color: var(--color-success); }
.st-halted { background: var(--color-warning-soft); color: var(--color-warning); }
.st-failed { background: var(--color-danger-soft); color: var(--color-danger); }
.st-invalid { background: var(--color-info-soft); color: var(--color-info); }
.status p { margin-top: var(--space-3); font: var(--type-small); color: var(--color-ink-secondary); }
.status p + p { color: var(--color-ink-muted); }

/* Tables */
.table-wrap { overflow-x: auto; border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
table { width: 100%; border-collapse: collapse; font: var(--type-small); }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline) solid var(--color-line); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--color-ink-muted); background: var(--color-surface-sunken); white-space: nowrap; }
tbody th { font-weight: 600; color: var(--color-ink); min-width: 160px; }
td { color: var(--color-ink-secondary); min-width: 200px; }
td.us { color: var(--color-ink); }
td .text-link, .body p .text-link, .answer p .text-link { display: inline; font: inherit; font-weight: 600; padding-bottom: 0; }
td code, th code { font: var(--type-code); font-feature-settings: var(--type-code-features); }

/* Use cases and industries */
.link-card { display: flex; flex-direction: column; transition: border-color var(--motion-fast) var(--motion-ease); }
.link-card:hover { border-color: var(--color-line-strong); }
.link-card .meta { margin-top: auto; padding-top: var(--space-4); font: var(--type-small); color: var(--color-ink-muted); }
.industries { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border-hairline) solid var(--color-line); }
.industries article { padding: var(--space-5) var(--space-5) 0 0; }
.industries article + article { padding-left: var(--space-5); border-left: var(--border-hairline) solid var(--color-line); }
.industries p { margin-top: var(--space-2); font: var(--type-small); color: var(--color-ink-secondary); }

/* FAQ */
.faq { border-top: var(--border-hairline) solid var(--color-line); }
.faq details { border-bottom: var(--border-hairline) solid var(--color-line); }
.faq summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font: var(--type-heading); letter-spacing: var(--type-heading-tracking); }
.faq summary .icon { flex: none; color: var(--color-ink-muted); transition: transform var(--motion-base) var(--motion-ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding-bottom: var(--space-5); max-width: 72ch; display: grid; gap: var(--space-3); color: var(--color-ink-secondary); }

/* Closing call to action */
.p-cta { text-align: center; display: flex; flex-direction: column; align-items: center; }
.p-cta p { margin-top: var(--space-4); color: var(--color-ink-secondary); max-width: 56ch; }
.p-cta .hero-actions { justify-content: center; }

@media (max-width: 1080px) {
  .p-hero-grid, .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .statuses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industries article:nth-child(3) { padding-left: 0; border-left: 0; }
  .industries article:nth-child(n+3) { margin-top: var(--space-5); }
}
@media (max-width: 860px) {
  .product-bar { top: 72px; }
  .product-bar .brand span { display: none; }
  .p-hero { padding-block: var(--space-7) var(--space-6); }
  .grid-3, .grid-2, .phases { grid-template-columns: minmax(0, 1fr); }
  .phase, .phase + .phase { padding: var(--space-5) 0; border-left: 0; border-bottom: var(--border-hairline) solid var(--color-line); }
}
@media (max-width: 560px) {
  .statuses, .industries { grid-template-columns: minmax(0, 1fr); }
  .industries article, .industries article + article { padding: var(--space-4) 0; border-left: 0; margin-top: 0; border-bottom: var(--border-hairline) solid var(--color-line); }
  .lockup img { width: 48px; height: 48px; }
  .lockup-name { font-size: 22px; }
}

/* ---------------------------------------------------------------
   Model figures: entities, schema projections, accumulation.
   Shared entities carry a link icon and the word "shared" in the
   legend, so the mark never relies on colour alone.
   --------------------------------------------------------------- */
.figure { background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); }
.figure-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.figure-head .overline { color: var(--color-ink-muted); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: var(--type-small); color: var(--color-ink-muted); margin-top: var(--space-4); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2); }

.entities { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.entity { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border: var(--border-hairline) solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface-raised); font: var(--type-small); color: var(--color-ink); white-space: nowrap; }
.entity .icon-sm { color: var(--product-accent-ink); }
.entity.shared { background: var(--product-accent-soft); border-color: var(--product-accent); color: var(--product-accent-ink); font-weight: 500; }
.entity.reused { background: var(--color-surface-sunken); border-color: var(--color-line); color: var(--color-ink-muted); }
.entity.new { border-color: var(--product-accent); }

.projections { display: grid; gap: var(--space-3); }
.projection { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--color-line); }
.projection:first-child { border-top: 0; padding-top: 0; }
.projection-name { font: var(--type-body-strong); padding-top: 2px; }
.projection-name span { display: block; font: var(--type-small); font-weight: 400; color: var(--color-ink-muted); }
.world-base { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-sunken); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font: var(--type-small); color: var(--color-ink-secondary); }
.world-base strong { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--color-ink); }

.accrual { display: grid; gap: 0; }
.accrual-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--color-line); }
.accrual-row:first-child { border-top: 0; }
.accrual-row .mono { color: var(--color-ink-muted); display: block; }
.accrual-row strong { font: var(--type-body-strong); }
.accrual-row .small { display: block; }

/* Two-column contrast, e.g. discover/reuse/extend against guess/duplicate/integrate. */
.contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.contrast > div { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); border: var(--border-hairline) solid var(--color-line); }
.contrast .overline { color: var(--color-ink-muted); }
.contrast p.title-2 { margin-top: var(--space-2); }
.contrast .us { background: var(--product-accent-soft); border-color: transparent; }
.contrast .us .overline, .contrast .us .title-2 { color: var(--product-accent-ink); }

/* Stack diagram: application on top, product in the middle, agents below. */
.stack-diagram { display: grid; gap: var(--space-2); text-align: center; }
.stack-diagram .layer { border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); font: var(--type-body-strong); }
.stack-diagram .layer span { display: block; font: var(--type-small); font-weight: 400; color: var(--color-ink-muted); }
.stack-diagram .core { background: var(--product-accent-soft); border-color: var(--product-accent); padding: var(--space-5); }
.stack-diagram .core .lockup-name { font-size: 22px; color: var(--product-accent-ink); }
.stack-diagram .core .entities { justify-content: center; margin-top: var(--space-4); }
.stack-diagram .joint { font: var(--type-code); color: var(--color-ink-muted); display: flex; justify-content: center; align-items: center; gap: var(--space-2); }

.checklist { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.checklist li { display: flex; gap: var(--space-2); color: var(--color-ink-secondary); }
.checklist li .icon-sm { margin-top: 3px; color: var(--product-accent-ink); flex: none; }
.pull { margin-top: var(--space-5); font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--product-accent-ink); }

@media (max-width: 860px) {
  .contrast { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .projection, .accrual-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

/* ---------------------------------------------------------------
   Affordances: an action menu with four states. Each state is an
   icon plus its label; the colour only reinforces it (brief §4.4).
   --------------------------------------------------------------- */
.afford-list { display: grid; }
.afford-row { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: var(--border-hairline) solid var(--color-line); }
.afford-row:first-child { border-top: 0; padding-top: 0; }
.afford-row:last-child { padding-bottom: 0; }
.afford-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.afford-top code { font: var(--type-code); font-feature-settings: var(--type-code-features); font-weight: 500; }
.afford-reason { font: var(--type-small); color: var(--color-ink-secondary); }
.afford-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font: var(--type-small); color: var(--color-ink-muted); }
.afford-meta code, .code-inline { font: var(--type-code); font-feature-settings: var(--type-code-features); background: var(--color-code-bg); border-radius: var(--radius-sm); padding: 0 var(--space-2); color: var(--color-ink); overflow-wrap: anywhere; }
.state { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font: var(--type-small); font-weight: 500; white-space: nowrap; }
.state-open { background: var(--color-afford-open-soft); color: var(--color-afford-open); }
.state-policy { background: var(--color-afford-policy-soft); color: var(--color-afford-policy); }
.state-evidence { background: var(--color-afford-evidence-soft); color: var(--color-afford-evidence); }
.state-review { background: var(--color-afford-review-soft); color: var(--color-afford-review); }
.context-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: var(--border-hairline) solid var(--color-line); }
.more-note { margin-top: var(--space-4); font: var(--type-small); color: var(--color-ink-muted); }

/* Change highlight: differs from the committed state (brief §4.5).
   An info-soft band, a Changed tag and "Was" with the previous value. */
.changed { background: var(--color-info-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-inline: calc(-1 * var(--space-4)); }
.changed-tag { display: inline-flex; align-items: center; padding: 0 var(--space-2); border: var(--border-hairline) solid var(--color-info); border-radius: var(--radius-sm); font: var(--type-small); font-weight: 500; color: var(--color-info); }
.was { font: var(--type-small); color: var(--color-ink-muted); }

/* A sentence from the source document, quoted exactly. */
.source-quote { border-left: var(--border-strong) solid var(--product-accent); padding: var(--space-1) 0 var(--space-1) var(--space-4); }
.source-quote p { color: var(--color-ink); }
.source-quote cite { display: block; margin-top: var(--space-2); font: var(--type-small); font-style: normal; color: var(--color-ink-muted); }
.lineage { display: grid; gap: var(--space-4); }
.lineage-step .overline { color: var(--color-ink-muted); margin-bottom: var(--space-2); }
.lineage-joint { display: flex; align-items: center; gap: var(--space-2); font: var(--type-small); color: var(--color-ink-muted); padding-left: var(--space-4); }

/* ---------------------------------------------------------------
   Policy Engineering: the book and the discipline behind Kebiki and
   Teban. A typographic book card, not an image of a cover.
   --------------------------------------------------------------- */
.book-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.book-spine { aspect-ratio: 2 / 3; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-canvas); padding: var(--space-3); display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-raised); }
.book-spine strong { font: 500 12px/1.25 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.book-spine span { font: 400 10px/1.3 var(--font-text); opacity: .75; }
.book-card h3 { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); }
.book-card .sub { margin-top: var(--space-1); color: var(--color-ink-secondary); }
.book-card .by { margin-top: var(--space-3); font: var(--type-small); color: var(--color-ink-muted); }
.book-links { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.pe-table { margin-top: var(--space-6); }
.pe-table td:first-of-type { min-width: 240px; }

/* ===============================================================
   Home page, second cut: proposition-led hero, product cards,
   two demonstrations, inspectable evidence.
   =============================================================== */
.hero-2 { padding-block: var(--space-9) var(--space-7); }
.hero-2 .promise { color: var(--color-bronze); }
.hero-2 h1 { margin-top: var(--space-4); max-width: 18ch; }
.hero-2 .lede { margin-top: var(--space-5); font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--color-ink-secondary); max-width: 46ch; }
.hero-2 .hero-actions { justify-content: flex-start; }

/* Product cards */
.product-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.p-product { display: flex; flex-direction: column; background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--motion-fast) var(--motion-ease); }
.p-product:hover { border-color: var(--color-line-strong); }
.p-product > img { width: 100%; height: auto; aspect-ratio: 3.2 / 1; object-fit: cover; }
.p-product .body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.p-product .name-row { display: flex; align-items: center; gap: var(--space-3); }
.p-product .name-row img { width: 40px; height: 40px; flex: none; }
.p-product .name { font: 400 22px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.p-product .descriptor { display: block; margin-top: var(--space-1); font: var(--type-small); color: var(--color-ink-muted); }
.p-product h3 { margin-top: var(--space-5); font: var(--type-heading); letter-spacing: var(--type-heading-tracking); }
.p-product p { margin-top: var(--space-2); color: var(--color-ink-secondary); }
.caps { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--color-line); display: flex; flex-wrap: wrap; gap: var(--space-2); font: var(--type-small); color: var(--color-ink-secondary); }
.caps span { display: inline-flex; align-items: center; padding: 1px var(--space-2); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-sunken); }
.p-product .text-link { margin-top: var(--space-5); align-self: flex-start; }

/* Demonstrations */
.demo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: start; }
.demo.flip > :first-child { order: 2; }
.demo .body { margin-top: var(--space-4); display: grid; gap: var(--space-4); color: var(--color-ink-secondary); }
.demo .overline { color: var(--color-bronze); margin-bottom: var(--space-4); }
.demo-note { margin-top: var(--space-4); font: var(--type-small); color: var(--color-ink-muted); }
.prompt { background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font: var(--type-body); color: var(--color-ink); }
.prompt span { display: block; font: var(--type-small); color: var(--color-ink-muted); margin-bottom: var(--space-1); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.two-col h4 { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-3); }
.outcome { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--color-line); font: var(--type-body-strong); }

/* Facts panel for the expense scenario */
.facts { display: grid; gap: var(--space-2); }
.fact { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); border-bottom: var(--border-hairline) solid var(--color-line); font: var(--type-small); }
.fact:last-child { border-bottom: 0; }
.fact dt { color: var(--color-ink-muted); }
.fact dd { color: var(--color-ink); font-variant-numeric: tabular-nums; text-align: right; }

/* Segmented control: switch the scenario without animation */
.segmented { display: inline-flex; border: var(--border-hairline) solid var(--color-line-strong); border-radius: var(--radius-md); overflow: hidden; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: var(--space-2) var(--space-4); font: var(--type-small); font-weight: 500; color: var(--color-ink-secondary); cursor: pointer; }
.segmented label + label span { border-left: var(--border-hairline) solid var(--color-line-strong); }
.segmented input:checked ~ span { background: var(--product-accent); color: var(--product-on-accent); }
.segmented input:focus-visible ~ span { outline: var(--border-focus) solid var(--color-focus); outline-offset: -2px; }

/* Contribution rows: which product supplies what */
.contribs { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.contrib { display: grid; grid-template-columns: 28px 104px minmax(0, 1fr); gap: var(--space-3); align-items: start; font: var(--type-small); }
.contrib img { width: 28px; height: 28px; }
.contrib strong { font: var(--type-body-strong); }
.contrib p { color: var(--color-ink-secondary); }

/* The decision record */
.record { display: grid; gap: 0; }
.record-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--color-line); font: var(--type-small); }
.record-row:first-child { border-top: 0; }
.record-row dt { color: var(--color-ink-muted); }
.record-row dd { color: var(--color-ink); overflow-wrap: anywhere; }
.record-row dd code { font: var(--type-code); font-feature-settings: var(--type-code-features); }

@media (max-width: 1080px) {
  .product-cards { grid-template-columns: minmax(0, 1fr); }
  .demo { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .demo.flip > :first-child { order: 0; }
}
@media (max-width: 560px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .contrib { grid-template-columns: 28px minmax(0, 1fr); }
  .contrib p { grid-column: 2; }
  .record-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .segmented { width: 100%; }
  .segmented label { flex: 1; }
  .segmented span { text-align: center; }
}

/* Skip link: first tab stop on every page. */
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 40; padding: var(--space-2) var(--space-4); background: var(--color-surface-raised); border: var(--border-hairline) solid var(--color-line-strong); border-radius: var(--radius-md); font: var(--type-body-strong); box-shadow: var(--shadow-overlay); }
.skip-link:focus { top: var(--space-4); }

/* Contact routes */
.routes { display: grid; gap: var(--space-4); }
.route { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-5); background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); transition: border-color var(--motion-fast) var(--motion-ease); }
.route:hover { border-color: var(--color-line-strong); }
.route img { width: 40px; height: 40px; }
.route strong { display: block; font: var(--type-heading); letter-spacing: var(--type-heading-tracking); }
.route span { display: block; margin-top: var(--space-1); font: var(--type-small); color: var(--color-ink-secondary); }
.route .icon { color: var(--color-ink-muted); }
@media (max-width: 560px) { .route { grid-template-columns: 40px minmax(0, 1fr); } .route .icon { display: none; } }

/* Sign in: outside .nav-links, so it survives the mobile breakpoint. */
.signin { font: var(--type-body); color: var(--color-ink-secondary); white-space: nowrap; }
.signin:hover { color: var(--color-ink); }
@media (max-width: 420px) { .site-header .brand span { display: none; } }

/* ===============================================================
   Articles: the index, and the reading page. Generated from
   content/articles/*.md by tools/build_articles.py.
   =============================================================== */
.article { padding-block: var(--space-7) var(--space-8); }
.article-back { margin-bottom: var(--space-6); }
.article-back .icon-sm { transition: transform var(--motion-fast) var(--motion-ease); }
.article-back a:hover .icon-sm { transform: translateX(-2px); }
.article-head { max-width: var(--layout-content-max-reading); }
.article-head h1 { margin-top: var(--space-4); }
.article-dek { margin-top: var(--space-4); font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--color-ink-secondary); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font: var(--type-small); color: var(--color-ink-muted); }
.tag-product { display: inline-flex; align-items: center; padding: 1px var(--space-2); border: var(--border-hairline) solid var(--color-line-strong); border-radius: var(--radius-sm); font-weight: 500; color: var(--color-ink-secondary); }
a.tag-product:hover { border-color: var(--color-ink); color: var(--color-ink); }

/* Prose: one measure, the type scale, nothing decorative. */
.prose { max-width: var(--layout-content-max-reading); margin-top: var(--space-8); }
.prose p, .prose ul { margin-bottom: var(--space-5); color: var(--color-ink-secondary); }
.prose h2 { margin: var(--space-8) 0 var(--space-4); font: var(--type-title-1); letter-spacing: var(--type-title-1-tracking); color: var(--color-ink); }
.prose h3 { margin: var(--space-6) 0 var(--space-3); font: var(--type-heading); letter-spacing: var(--type-heading-tracking); color: var(--color-ink); }
.prose strong { color: var(--color-ink); font-weight: 600; }
.prose a { color: var(--color-ink); border-bottom: var(--border-hairline) solid var(--color-line-strong); }
.prose a:hover { border-color: var(--color-ink); }
.prose ul { display: grid; gap: var(--space-2); padding-left: var(--space-5); }
.prose li { list-style: disc; }
.prose li::marker { color: var(--color-line-strong); }
.prose code { font: var(--type-code); font-feature-settings: var(--type-code-features); background: var(--color-code-bg); border-radius: var(--radius-sm); padding: 0 var(--space-1); color: var(--color-ink); }
.prose pre { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); overflow-x: auto; background: var(--color-code-bg); border-radius: var(--radius-md); font: var(--type-code); font-feature-settings: var(--type-code-features); color: var(--color-ink); }
.prose .table-wrap { margin-bottom: var(--space-5); }
.prose .pull-quote { margin: var(--space-6) 0; padding-left: var(--space-5); border-left: var(--border-strong) solid var(--product-accent); }
.prose .pull-quote p { margin: 0; font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--color-ink); }

.article-related { max-width: var(--layout-content-max-reading); margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--color-line); }
.article-related .overline { color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.article-related .card { max-width: 320px; }
.article-cta { max-width: var(--layout-content-max-reading); margin-top: var(--space-7); padding: var(--space-5) var(--space-6); background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }

/* Index */
.article-list { display: grid; gap: 0; border-top: var(--border-hairline) solid var(--color-line); }
.article-card { padding-block: var(--space-6); border-bottom: var(--border-hairline) solid var(--color-line); max-width: 880px; }
.article-card h2 { margin-top: var(--space-3); font: var(--type-title-1); letter-spacing: var(--type-title-1-tracking); }
.article-card h2 a:hover { color: var(--color-bronze); }
.article-card .dek { margin-top: var(--space-3); color: var(--color-ink-secondary); max-width: 72ch; }
.article-card-foot { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-4); }

/* ===============================================================
   Home page: the business runtime story.
   =============================================================== */

/* Hero over photography. The scrim keeps the text at full contrast
   in both themes; the photo sits behind it, never under body text. */
.hero-photo { position: relative; isolation: isolate; background: var(--color-canvas); }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: url(photos/hero-cabin.jpg); background-size: cover; background-position: 62% center; }
/* The scrim covers the text column and then gets out of the way: solid to
   the end of the longest line, clear well before the right edge, so the
   photo keeps its contrast instead of fading into the page. The stops are
   in px, capped by percentages, because the text column is a fixed measure
   while the window is not. */
/* Readability without erasing the picture: a single translucent layer
   that both tints and blurs what is behind it, faded out by its own mask
   so the right of the frame is untouched. The photo still reads under the
   text as soft depth of field rather than disappearing into the page.
   The mask is offset by the centred wrap's gutter, because the text column
   is a fixed measure while the window is not. */
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  --hero-gutter: max(0px, (100% - 1280px) / 2);
  background: color-mix(in srgb, var(--color-canvas) var(--hero-wash, 72%), transparent);
  -webkit-backdrop-filter: blur(14px) saturate(.9);
  backdrop-filter: blur(14px) saturate(.9);
  -webkit-mask-image: linear-gradient(100deg, #000 0, #000 min(calc(var(--hero-gutter) + 600px), 62%), rgba(0,0,0,.45) min(calc(var(--hero-gutter) + 800px), 82%), transparent min(calc(var(--hero-gutter) + 940px), 100%));
  mask-image: linear-gradient(100deg, #000 0, #000 min(calc(var(--hero-gutter) + 600px), 62%), rgba(0,0,0,.45) min(calc(var(--hero-gutter) + 800px), 82%), transparent min(calc(var(--hero-gutter) + 940px), 100%));
}
/* The photograph does not get darker when the theme does, so the dark
   scrim has to work harder to hold the same contrast. This is the only
   theme-conditional rule in the stylesheet, and that is why. */
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .hero-photo { --hero-wash: 80%; } }
:root[data-theme=dark] .hero-photo { --hero-wash: 80%; }
.hero-photo .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); align-items: center; min-height: 520px; padding-block: var(--space-8); }
/* A touch deeper than the brand bronze: over photography, even blurred,
   12px uppercase needs the full 4.5:1 and the flat token lands just under. */
.hero-photo .promise { color: color-mix(in srgb, var(--color-bronze) 86%, var(--color-ink)); }
.hero-photo h1 { margin-top: var(--space-4); max-width: 13ch; }
.hero-photo .lede { margin-top: var(--space-5); font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--color-ink-secondary); max-width: 42ch; }
.hero-photo .hero-actions { justify-content: flex-start; }
.pillars { display: grid; gap: var(--space-5); justify-self: end; max-width: 210px; }
.pillars p { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--color-ink); padding-top: var(--space-3); border-top: var(--border-hairline) solid var(--color-line-strong); }

/* Four building blocks */
.product-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.product-cards.four .p-product .body { padding: var(--space-4); }
.product-cards.four .name { font-size: 19px; }
.product-cards.four .caps { margin-top: auto; }
.product-cards.four .p-product .text-link, .product-cards.four .p-product .small { margin-top: var(--space-4); }
.section-lead { max-width: 74ch; margin: var(--space-3) auto 0; text-align: center; color: var(--color-ink-secondary); font: var(--type-small); }
.section-centre { text-align: center; }
/* One line at desktop, as the comp has it; it wraps on its own below ~880px. */
.section-centre h2 { max-width: none; font-size: clamp(24px, 3.1vw, 36px); }

/* The runtime figure: who calls it, what it holds, what comes out. */
.runtime { display: grid; gap: var(--space-3); }
.runtime-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.runtime-box { background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.runtime-box .icon { margin: 0 auto var(--space-2); color: var(--color-ink-muted); }
.runtime-box strong { display: block; font: var(--type-body-strong); }
.runtime-box span { display: block; font: var(--type-small); color: var(--color-ink-muted); margin-top: 2px; }
.runtime-core { background: var(--product-accent-soft); border: var(--border-hairline) solid var(--product-accent); border-radius: var(--radius-lg); padding: var(--space-5); }
.runtime-core .overline { text-align: center; color: var(--product-accent-ink); margin-bottom: var(--space-4); }
.runtime-core .runtime-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.runtime-part { text-align: center; }
.runtime-part img { width: 28px; height: 28px; margin: 0 auto var(--space-2); }
.runtime-part strong { display: block; font: 400 15px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.runtime-part span { display: block; font: var(--type-small); color: var(--color-ink-secondary); margin-top: var(--space-2); }
.runtime-arrow { display: flex; justify-content: center; color: var(--color-line-strong); }

/* Two ways to create value */
.two-ways { background: var(--color-surface-sunken); }
.two-ways .grid-2 { margin-top: var(--space-6); }
.way { background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; }
.way-head { display: flex; align-items: center; gap: var(--space-3); }
.way-head .icon { color: var(--product-accent-ink); }
.way h3 { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); }
.way .sub { margin-top: var(--space-1); color: var(--color-ink-muted); font: var(--type-small); }
.way p.body-text { margin-top: var(--space-4); color: var(--color-ink-secondary); }
.way .text-link { margin-top: var(--space-5); align-self: flex-start; }

@media (max-width: 1180px) {
  .product-cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runtime-core .runtime-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (max-width: 900px) {
  .hero-photo::after { background: linear-gradient(180deg, color-mix(in srgb, var(--color-canvas) 92%, transparent) 0%, color-mix(in srgb, var(--color-canvas) 86%, transparent) 60%, color-mix(in srgb, var(--color-canvas) 94%, transparent) 100%); }
  .hero-photo .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pillars { justify-self: start; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); max-width: none; }
  .pillars p { border-top: 0; padding-top: 0; }
  .runtime-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .product-cards.four { grid-template-columns: minmax(0, 1fr); }
}

/* ===============================================================
   Composable business runtime: operations, patterns, the layered
   architecture and the industries row.
   =============================================================== */

/* Three small compositions, side by side: the point is that they differ. */
.patterns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pattern { background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; }
.pattern-head { text-align: center; padding-bottom: var(--space-3); border-bottom: var(--border-hairline) solid var(--color-line); }
.pattern-head strong { display: block; font: var(--type-body-strong); }
.pattern-head span { display: block; font: var(--type-small); color: var(--color-ink-muted); margin-top: 2px; }
.pattern-flow { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.step-box { border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); text-align: center; background: var(--color-surface-raised); }
.step-box strong { display: block; font: var(--type-small); font-weight: 600; }
.step-box span { display: block; font: var(--type-small); color: var(--color-ink-muted); }
.step-box.is-primitive { display: flex; align-items: center; gap: var(--space-2); text-align: left; }
.step-box.is-primitive img { width: 20px; height: 20px; flex: none; }
.step-box.is-result { background: var(--product-accent-soft); border-color: var(--product-accent); }
.step-tick { display: flex; justify-content: center; color: var(--color-line-strong); }
.step-tick svg { width: 16px; height: 16px; }

/* The layered architecture, in our own type and tokens. */
.layers { display: grid; gap: var(--space-2); }
.layer-band { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-4); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
.layer-band.is-ours { background: var(--product-accent-soft); border-color: var(--product-accent); }
.layer-band.is-outside { background: var(--color-surface-sunken); }
.layer-label strong { display: block; font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; }
.layer-label span { display: block; font: var(--type-small); color: var(--color-ink-muted); margin-top: var(--space-1); }
.layer-items { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.layer-band.is-ours .layer-label strong { color: var(--product-accent-ink); }
.layer-tick { display: flex; justify-content: center; color: var(--color-line-strong); font: var(--type-small); }

/* The thesis, five lines. */
.thesis { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.thesis p { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--color-ink-muted); }
.thesis p strong { color: var(--color-ink); font-weight: 400; }
.thesis p.is-ours strong { color: var(--product-accent-ink); }

/* Operations by industry */
.industry-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); border-top: var(--border-hairline) solid var(--color-line); padding-top: var(--space-5); }
.industry-grid h3 { font: var(--type-heading); letter-spacing: var(--type-heading-tracking); }
.industry-grid .icon { color: var(--product-accent-ink); margin-bottom: var(--space-3); }
.industry-grid ul { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.industry-grid li { font: var(--type-small); color: var(--color-ink-secondary); }

@media (max-width: 1080px) {
  .patterns { grid-template-columns: minmax(0, 1fr); }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
}
@media (max-width: 760px) {
  .layer-band { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .industry-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Menu rows without a mark (Business Operations, Solutions). */
.menu-item.is-text { grid-template-columns: minmax(0, 1fr); }
.menu-panel .overline + .menu-item { margin-top: 0; }
.menu-panel .menu-item + .overline { margin-top: var(--space-2); border-top: var(--border-hairline) solid var(--color-line); }

/* Hero proof points, under the supporting sentence. */
.proof-line { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: var(--type-body-strong); color: var(--color-ink); }
.proof-line span { display: inline-flex; align-items: center; gap: var(--space-4); }
.proof-line span + span::before { content: "·"; color: var(--color-line-strong); font-weight: 400; }

/* The three universal benefits. */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.benefit h3 { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); }
.benefit p { margin-top: var(--space-3); color: var(--color-ink-secondary); }
.benefit .icon { color: var(--product-accent-ink); margin-bottom: var(--space-4); }

/* Self-selection: what are you trying to accomplish? */
.objectives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.objective { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-6); background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); transition: border-color var(--motion-fast) var(--motion-ease); }
.objective:hover { border-color: var(--product-accent); }
.objective strong { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); }
.objective p { color: var(--color-ink-secondary); }
.objective .go { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-body-strong); color: var(--product-accent-ink); }
.objective:hover .go .icon-sm { transform: translateX(2px); }
.objective .go .icon-sm { transition: transform var(--motion-fast) var(--motion-ease); }

@media (max-width: 900px) {
  .benefits, .objectives { grid-template-columns: minmax(0, 1fr); }
}
.section-head p + p { margin-top: var(--space-4); }

/* ===============================================================
   Flagship moment: one product gets its own gravity on the home
   page, above the row where all three appear as primitives.
   =============================================================== */
.spotlight { background: var(--color-surface-sunken); }
.spotlight .wrap { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--space-8); align-items: center; }
.spotlight .lockup img { width: 48px; height: 48px; }
.spotlight h2 { margin-top: var(--space-5); }
.spotlight .lede { margin-top: var(--space-4); color: var(--color-ink-secondary); max-width: 46ch; }
.spotlight .uses { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.spotlight .uses span { padding: 1px var(--space-2); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); font: var(--type-small); color: var(--color-ink-secondary); }

/* A decision, run. */
.decision { background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.decision-head { padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline) solid var(--color-line); }
.decision-head strong { display: block; font: var(--type-heading); letter-spacing: var(--type-heading-tracking); }
.decision-body { padding: var(--space-5); display: grid; gap: var(--space-4); }
.decision-io { display: grid; gap: var(--space-2); }
.decision-io .label { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--color-ink-muted); }
.decision-verdict { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-success-soft); color: var(--color-success); }
.decision-verdict strong { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); }
.decision-reasons { display: grid; gap: var(--space-2); }
.decision-reasons li { display: flex; gap: var(--space-2); font: var(--type-small); color: var(--color-ink-secondary); }
.decision-reasons .icon-sm { color: var(--color-success); flex: none; margin-top: 2px; }
.decision-foot { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: var(--border-hairline) solid var(--color-line); background: var(--color-surface-sunken); }

/* Use what you need: the adoption ladder. */
.combos { display: grid; gap: 0; border-top: var(--border-hairline) solid var(--color-line); }
.combo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-5); align-items: baseline; padding: var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--color-line); }
.combo-names { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--type-body-strong); }
.combo-names img { width: 20px; height: 20px; }
.combo-names .plus { color: var(--color-line-strong); font-weight: 400; }
.combo p { color: var(--color-ink-secondary); }

@media (max-width: 1000px) {
  .spotlight .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .combo { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}


/* Vertical rhythm: one value per breakpoint, so sections cannot drift apart. */
@media (max-width: 860px) {
  .section, .section.spotlight, .section.two-ways { padding-block: var(--space-6); }
  .section.is-tight { padding-top: var(--space-3); }
  .section-head { margin-bottom: var(--space-5); }
}

/* Provenance, read at platform level: one column per governed asset the
   operation composed, so the account of trust is not only Kebiki's. */
.prov { margin-top: var(--space-6); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.prov-head { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline) solid var(--color-line); background: var(--color-surface-sunken); }
.prov-head .overline { margin: 0; }
.prov-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prov-card { padding: var(--space-5); border-left: var(--border-hairline) solid var(--color-line); }
.prov-card:first-child { border-left: 0; }
.prov-card.is-ours { background: var(--color-bronze-soft); }
.prov-card h3 { margin: var(--space-3) 0 var(--space-2); font: var(--type-heading); letter-spacing: var(--type-heading-tracking); }
.prov-card p { margin: 0; }
.prov-card .small.muted { margin-top: var(--space-3); }
.prov-name { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--type-body-strong); letter-spacing: var(--type-body-strong-tracking); }
.prov-name img { flex: none; }

.trace-foot { margin-top: var(--space-4); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; }
.trace-foot .demo-note { margin: 0; }

/* Reuse: three plain columns, no card chrome — the claim carries it. */
.reuse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.reuse > div { padding-top: var(--space-4); border-top: var(--border-strong) solid var(--color-line-strong); }
.reuse p + p { margin-top: var(--space-3); color: var(--color-ink-secondary); }
.reuse-close { margin-top: var(--space-6); max-width: 46ch; font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); }

@media (max-width: 900px) {
  .prov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prov-card:nth-child(odd) { border-left: 0; }
  .prov-card:nth-child(n+3) { border-top: var(--border-hairline) solid var(--color-line); }
  .reuse { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 560px) {
  .prov-grid { grid-template-columns: minmax(0, 1fr); }
  .prov-card { border-left: 0; }
  .prov-card + .prov-card { border-top: var(--border-hairline) solid var(--color-line); }
}