/* kxco.ai redesign prototype. Built on kxco-tokens.css (KXCO-BRD-005). Review only.
   Spacing scale 4/8/12/16/24/32/48/64/88. Gutters 40px desktop, 24px tablet, 16px mobile. Breakpoints 1180/900/480. */
:root {
  --gutter: 40px;
  --side: 200px;
  --col-gap: 56px;
  --measure: 760px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;
  --sec-marketing: var(--s9);
  --sec-reading: var(--s8);
  --size-meta: 0.875rem;
  --size-label-sm: 0.75rem;
  --tap: 44px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--kx-ochre); color: var(--kx-ink);
  font-family: var(--kx-font-body); font-size: 1.0625rem; line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--kx-gold-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kx-gold-text); }
.g-navy a:hover, .site-footer a:hover { color: var(--kx-gold-light); }
:focus-visible { outline: 2px solid var(--kx-gold-line); outline-offset: 3px; }
.g-navy :focus-visible, .site-footer :focus-visible { outline-color: var(--kx-gold-light); }
main:focus { outline: none; }
.g-ochre { background: var(--kx-ochre); }
.g-cream { background: var(--kx-cream); }
.g-navy { background: var(--kx-navy); color: var(--kx-cream); }
.mark svg { display: block; width: 22px; height: 22px; flex: none; }
.kx-label { margin: 0; }
.g-navy .kx-label, .site-footer .kx-label { color: var(--kx-gold-light); }
h1, h2, h3, h4 { font-family: var(--kx-font-display); font-weight: 400; line-height: 1.12; text-wrap: balance; }
p, li, dd, td, th, figcaption { overflow-wrap: break-word; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 20; padding: var(--s3) var(--s4); background: var(--kx-ink); color: var(--kx-cream); text-decoration: none; }
.skip-link:focus { top: var(--s4); }


/* Header: masterbrand leads, the seven follow in House order */
.site-header { background: var(--kx-ochre); border-bottom: var(--kx-rule); position: relative; z-index: 5; }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); max-width: 1360px; margin: 0 auto; padding: 20px var(--gutter) var(--s4); }
.lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--kx-ink); }
.lockup:hover { color: var(--kx-ink); }
.emblem svg { display: block; width: 44px; height: 44px; }
.wordmark { font-family: var(--kx-font-display); font-weight: 500; font-size: 1.9rem; letter-spacing: 0.06em; line-height: 1; }
.endorse { white-space: nowrap; font-size: 0.8125rem; color: var(--kx-grey); padding-left: 14px; border-left: var(--kx-rule); line-height: 1.2; }
.utility { display: flex; gap: 28px; font-size: 0.9375rem; }
.utility a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; }
.utility a[aria-current="page"], .utility a:hover { border-bottom-color: var(--kx-gold-line); }
.house-nav { border-top: var(--kx-rule); }
.house-nav ul { display: flex; justify-content: space-between; gap: var(--s2); list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1360px; }
.house-nav a { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 4px; text-decoration: none; font-size: 0.9375rem; white-space: nowrap; border-bottom: 2px solid transparent; }
.house-nav a:hover { color: var(--kx-ink); border-bottom-color: var(--kx-gold-line); }
.house-nav a[aria-current="page"] { border-bottom-color: var(--kx-ink); font-weight: 600; }
.nav-tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kx-gold-text); }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 0 0 14px; font-size: 0.9375rem; font-weight: 600; border-left: var(--kx-rule); }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--kx-ochre); border-bottom: var(--kx-rule); padding: var(--s4) var(--gutter) var(--s5); }
.menu-products, .menu-links { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.menu-products a { display: flex; align-items: center; gap: var(--s3); min-height: 48px; border-bottom: var(--kx-rule); text-decoration: none; }
.menu-products .mark svg { width: 24px; height: 24px; }
.menu-links { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.menu-links a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Buttons: primary filled, secondary outline, tertiary text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 22px; border: 1px solid var(--kx-ink); border-radius: 2px; font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; text-align: center; }
.btn-primary { background: var(--kx-ink); color: var(--kx-cream); }
.btn-primary:hover { background: #2a2620; color: var(--kx-cream); }
.btn-secondary { background: transparent; color: var(--kx-ink); }
.btn-secondary:hover { background: rgba(11, 10, 8, 0.06); color: var(--kx-ink); }
.btn-tertiary { min-height: var(--tap); padding: 0; border: 0; text-decoration: underline; text-decoration-color: var(--kx-gold-line); text-underline-offset: 4px; }
.g-navy .btn-primary { background: var(--kx-cream); color: var(--kx-ink); border-color: var(--kx-cream); }
.g-navy .btn-primary:hover { background: var(--kx-ochre); color: var(--kx-ink); }
.g-navy .btn-secondary { color: var(--kx-cream); border-color: var(--kx-cream); }
.g-navy .btn-secondary:hover { background: rgba(246, 241, 230, 0.08); color: var(--kx-cream); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s6) 0 0; }

/* Home hero: navy, bridge fading in from the left */
.hero-home-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; max-width: 1360px; margin: 0 auto; padding-left: var(--gutter); }
.hero-text { padding: 72px 0; }
.crumb { margin: 0 0 var(--s4); font-size: var(--kx-size-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kx-gold-light); }
.hero-home h1 { margin: 0; font-size: clamp(2.75rem, 5vw, 4.75rem); line-height: 1.02; max-width: 15ch; }
.lede { margin: var(--s5) 0 0; max-width: 34rem; font-size: 1.25rem; line-height: 1.5; }
.g-navy .lede { color: rgba(246, 241, 230, 0.88); }
.bridge { display: block; width: 100%; }

/* Sections: one component, number and label beside (desktop) or above (below 900px) the body */
.sheets, .product-sheets, main { counter-reset: sec; }
.sec { counter-increment: sec; }
.rsec.counted { counter-increment: sec; }
.sec-grid { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); column-gap: var(--col-gap); }
.sec-grid > .sec-side { grid-column: 1; grid-row: 1; align-self: start; margin: 0; }
.sec-grid > .sec-body { grid-column: 2; grid-row: 1; min-width: 0; }
.sec-num { display: block; margin: 0 0 var(--s1); font-family: var(--kx-font-display); font-size: 2rem; line-height: 1; color: var(--kx-gold-text); }
.sec .sec-num:not(.sec-num-fixed)::before, .rsec.counted .sec-num:not(.sec-num-fixed)::before { content: counter(sec); }
.g-navy .sec-num { color: var(--kx-gold-light); }
.sec-side .kx-label { display: block; color: var(--kx-grey); }
.g-navy .sec-side .kx-label { color: rgba(246, 241, 230, 0.75); }
h2.sec-side { font-family: var(--kx-font-body); font-size: inherit; line-height: inherit; text-wrap: initial; }
.sheet .sec-grid { max-width: 1360px; margin: 0 auto; padding: var(--sec-marketing) var(--gutter); }
.sheet .sec-body { max-width: 980px; }
.sec-body > :first-child { margin-top: 0; }
.sheet h2 { margin: 0 0 var(--s5); font-size: var(--kx-size-h2); max-width: 24ch; }
.sheet h3 { margin: var(--s6) 0 var(--s2); font-size: 1.5rem; font-weight: 500; }
.intro { max-width: 60ch; font-size: 1.1875rem; line-height: 1.55; margin: 0 0 var(--s6); }
.g-navy .intro { color: rgba(246, 241, 230, 0.88); }

.questions { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin: var(--s6) 0 0; padding: 0; }
.questions li { border-top: 1px solid var(--kx-ink); padding-top: var(--s4); }
.questions .q { margin: 0 0 10px; font-family: var(--kx-font-display); font-size: 1.625rem; line-height: 1.15; }
.questions p { margin: 0; }

/* The House in elevation */
.house { margin: var(--s2) 0 0; max-width: 980px; }
.house-cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; text-decoration: none; color: var(--kx-ink); padding: 22px var(--s4) var(--s5); }
.house-cell:hover { color: var(--kx-ink); background: rgba(232, 220, 190, 0.55); }
.house-cell .mark svg { width: 40px; height: 40px; }
.hc-name { font-family: var(--kx-font-display); font-size: 1.45rem; font-weight: 500; line-height: 1.15; margin-top: 4px; }
.hc-role { font-size: var(--kx-size-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kx-gold-text); }
.hc-line { font-size: 0.9375rem; line-height: 1.45; max-width: 26ch; }
.hc-status { font-size: var(--size-meta); color: var(--kx-grey); margin-top: auto; padding-top: 6px; }
.hc-status .kx-label { font-size: 0.6875rem; letter-spacing: 0.14em; margin-right: 4px; }
.house-pediment { position: relative; }
.gable { display: block; width: 100%; height: 96px; color: var(--kx-ink); }
.entablature { border-top: 1px solid var(--kx-ink); border-bottom: 1px solid var(--kx-ink); display: flex; justify-content: center; }
.hc-title { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hc-centre { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: var(--s3) var(--s4) 14px; }
.hc-centre .hc-title { flex-direction: row; gap: 10px; }
.hc-centre .hc-title .mark svg { width: 30px; height: 30px; }
.hc-centre .hc-name { margin-top: 0; }
.hc-centre .hc-line { max-width: none; }
.hc-centre .hc-status { margin-top: 0; padding-top: 2px; }
.house-arcade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 22px 18px 0; }
.hc-arch { border: 1px solid var(--kx-ink); border-bottom: 0; border-radius: 50% 50% 0 0 / 70px 70px 0 0; padding-top: 44px; min-height: 300px; }
.hc-dev { border-style: dashed; }
.house-plinth { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--kx-ink); border-bottom: 1px solid var(--kx-ink); box-shadow: 0 5px 0 -4px var(--kx-ink); }
.hc-base + .hc-base { border-left: 1px solid var(--kx-ink); }
.house figcaption, .caption { margin-top: 22px; font-size: var(--size-meta); color: var(--kx-grey); max-width: 70ch; }
.house figcaption strong { color: var(--kx-ink); }

/* The crossing: four spans on navy */
.spans { display: block; width: 100%; height: auto; margin: var(--s2) 0 0; color: var(--kx-cream); }
.spans .node-core { fill: var(--kx-gold-light); }
.span-num text { fill: var(--kx-cream); font-family: var(--kx-font-display); font-size: 30px; stroke: none; }
.span-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); margin: 18px 0 0; padding: 0; }
.span-list p { margin: 0; font-size: 0.9375rem; color: rgba(246, 241, 230, 0.86); }
.span-list .span-title { font-family: var(--kx-font-display); font-size: 1.45rem; color: var(--kx-cream); line-height: 1.2; }
.span-list .span-product { margin: 4px 0 var(--s2); font-size: var(--kx-size-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kx-gold-light); }
.example { margin: var(--s7) 0 0; max-width: 70ch; color: rgba(246, 241, 230, 0.88); }

/* Commands with a copy control */
.code-block { position: relative; max-width: 40rem; margin: 0 0 var(--s5); }
.code-block pre { margin: 0; padding: 18px 96px 18px 22px; background: var(--kx-ink); color: var(--kx-ochre); border-radius: 2px; overflow-x: auto; }
.code-block code, pre code { font-family: var(--kx-font-mono); font-size: 0.9375rem; }
pre.command code::before { content: "$ "; color: var(--kx-gold-light); }
.copy-btn { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); min-height: var(--tap); min-width: 72px; padding: 0 var(--s3); font: 600 0.8125rem var(--kx-font-body); color: var(--kx-ochre); background: transparent; border: 1px solid rgba(232, 220, 190, 0.5); border-radius: 2px; cursor: pointer; }
.copy-btn:hover { background: rgba(232, 220, 190, 0.1); }
.copy-btn:focus-visible { outline-color: var(--kx-gold-light); }

.statements { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); margin-bottom: var(--s6); }
.statements p { margin: 0; padding-top: 18px; border-top: 1px solid var(--kx-ink); font-family: var(--kx-font-display); font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.2; }

.link-list { margin: 0; }
.link-list > div { padding: 18px 0; border-bottom: var(--kx-rule); }
.link-list > div:first-child { border-top: var(--kx-rule); }
.link-list dt { font-family: var(--kx-font-display); font-size: 1.5rem; line-height: 1.2; }
.link-list dt a { text-decoration: none; }
.link-list dt a:hover { text-decoration: underline; }
.link-list dd { margin: 4px 0 0; color: var(--kx-grey); max-width: 62ch; }

.closing { text-align: center; padding: var(--s9) var(--s5); }
.closing .actions { justify-content: center; margin-top: var(--s4); }
.brand-line { margin: 0; font-family: var(--kx-font-display); font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.1; }

/* Product pages */
.hero-product-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s7); max-width: 1360px; margin: 0 auto; padding: 56px var(--gutter); }
.plate { order: 2; display: block; width: 100%; max-width: 440px; justify-self: end; }
.product-lockup { display: flex; align-items: center; gap: 22px; margin: 0; }
.product-lockup .mark svg { width: 76px; height: 76px; }
.pl-text { display: flex; flex-direction: column; }
.pl-name { font-family: var(--kx-font-display); font-weight: 500; font-size: clamp(2.6rem, 4.8vw, 4rem); line-height: 1; }
.pl-endorse { font-family: var(--kx-font-body); font-size: 0.9375rem; color: rgba(246, 241, 230, 0.72); margin-top: 10px; }
.hero-status { margin: var(--s5) 0 0; font-size: 0.9375rem; }
.hero-status .kx-label { margin-right: var(--s2); }
.what { font-size: 1.1875rem; line-height: 1.6; max-width: 62ch; margin: 0 0 28px; }
.limit, .name-story { font-family: var(--kx-font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; max-width: 34ch; margin: 0; }
.name-story { font-size: clamp(1.35rem, 2vw, 1.7rem); max-width: 44ch; }
.note { font-size: var(--size-meta); color: var(--kx-grey); margin: 14px 0 0; }
.related { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3) 28px; margin: var(--s5) 0 0; padding: 0; }
.related a { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); text-decoration: none; font-family: var(--kx-font-display); font-size: 1.3rem; }
.related a:hover { text-decoration: underline; }
.evidence-pending h3 { margin-top: var(--s6); }
.evidence-fields, .evidence-record dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); margin: var(--s3) 0 0; font-size: var(--size-meta); }
.evidence-fields dt, .evidence-record dt { font-weight: 600; color: var(--kx-grey); }
.evidence-fields dd, .evidence-record dd { margin: 0; }
.pager-inner { display: flex; justify-content: space-between; gap: var(--s5); max-width: 1360px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s3); border-top: var(--kx-rule); }
.pager a { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; min-height: var(--tap); text-decoration: none; font-family: var(--kx-font-display); font-size: 1.5rem; }
.pager .kx-label { grid-column: 1 / -1; color: var(--kx-grey); margin-bottom: 6px; }
.pager-next { margin-left: auto; text-align: right; }
.former { max-width: 1360px; margin: 0 auto; padding: var(--s2) var(--gutter) var(--s7); font-size: 0.9375rem; }

/* Tables: intentional widths, row headers, local scrolling for wide tables, stacked pairs on phones */
table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.9375rem; }
th, td { text-align: left; vertical-align: top; padding: var(--s3) 18px var(--s3) 0; border-bottom: var(--kx-rule); hyphens: manual; }
thead th { font-size: var(--kx-size-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kx-gold-text); border-bottom: 1px solid var(--kx-ink); white-space: nowrap; }
tbody th { font-weight: 600; }
.table-wrap { margin: var(--s5) 0; overflow-x: auto; }
.table-wrap:focus-visible { outline-offset: 2px; }
.t-cols-2 > tbody > tr > th:first-child, .t-cols-2 > thead > tr > th:first-child { width: 32%; min-width: 9rem; }
.t-cols-3, .t-cols-4, .t-cols-5 { min-width: 600px; }
.t-cols-3 > * > tr > :first-child, .t-cols-4 > * > tr > :first-child { min-width: 9rem; }
.t-cols-3 > * > tr > :first-child { width: 24%; }
.t-cols-4 > * > tr > :first-child { width: 20%; }
table.modules tbody th { width: 34%; font-family: var(--kx-font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
table.kv th { width: 30%; font-weight: 600; color: var(--kx-grey); }
table.kv { max-width: 720px; }
td code, th code { white-space: nowrap; }

.unpublished { background: var(--kx-cream); border-bottom: var(--kx-rule); }
.unpublished .page-head-inner { padding-bottom: var(--s8); }
.unpublished .crumb { color: var(--kx-gold-text); }

/* Reading pages: page head, section nav, contents, sections */
.reading-head { border-bottom: var(--kx-rule); }
.page-head-inner { max-width: 1360px; margin: 0 auto; padding: var(--s7) var(--gutter) 40px; }
.reading-head .crumb { color: var(--kx-gold-text); margin-bottom: var(--s3); }
.reading-head h1, .unpublished h1 { margin: 0; font-size: var(--kx-size-h1); line-height: 1.08; max-width: 28ch; }
.reading-head h1.long-title { max-width: 36ch; }
.reading-head .lede, .unpublished .lede { color: var(--kx-ink); max-width: 46rem; margin-top: var(--s4); }
.reading-head .actions { margin-top: var(--s5); }
.handoff-note { margin: var(--s3) 0 0; font-size: var(--size-meta); color: var(--kx-grey); }
.reviewed, .post-meta { margin: var(--s4) 0 0; font-size: var(--size-meta); color: var(--kx-grey); }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: var(--s2) 0 0; padding: 0; font-size: var(--kx-size-label); font-weight: 600; letter-spacing: 0.06em; color: var(--kx-gold-text); }
.section-nav { background: var(--kx-cream); border-bottom: var(--kx-rule); }
.ground-ochre .section-nav { background: var(--kx-ochre); }
.section-nav-inner { display: flex; align-items: center; gap: 0 28px; flex-wrap: wrap; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.section-nav ul { display: flex; flex-wrap: wrap; gap: 0 22px; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.section-nav a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; border-bottom: 2px solid transparent; }
.section-nav a:hover { border-bottom-color: var(--kx-gold-line); color: var(--kx-ink); }
.section-nav a[aria-current="page"] { border-bottom-color: var(--kx-ink); font-weight: 600; }
.flow-wrap { padding: var(--s2) 0 var(--s9); }
.flow { max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.rsec { padding-top: var(--sec-reading); }
.rsec > .sec-side { padding-top: var(--s4); }
.rsec > .sec-body { max-width: var(--measure); }
.rsec-intro > .sec-body > :first-child, .rsec-panel > .sec-body > :first-child, .rsec-toc > .sec-body > :first-child { margin-top: 0; }
.rsec h2 { margin: 0 0 var(--s4); padding-top: var(--s4); border-top: var(--kx-rule); font-size: var(--kx-size-h2); }
.rsec h3 { margin: var(--s6) 0 var(--s2); font-size: var(--kx-size-h3); font-weight: 500; }
.rsec h4 { margin: var(--s5) 0 var(--s2); font-size: 1.25rem; font-weight: 500; }
.rsec .sec-body > p, .rsec .sec-body > ul:not(.terms), .rsec .sec-body > ol { max-width: 68ch; }
.rsec li { margin: 0.4em 0; }
.rsec li::marker, .article li::marker { color: var(--kx-gold-text); }
.rsec pre, .article pre { background: var(--kx-ink); color: var(--kx-ochre); padding: var(--s4) 20px; border-radius: 2px; overflow-x: auto; }
.rsec code, .article code { font-family: var(--kx-font-mono); font-size: 0.9em; }
.rsec details { margin: var(--s4) 0; }
details summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: var(--s2); font-weight: 600; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details:not(.menu) > summary::before { content: ""; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
details[open]:not(.menu) > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { details > summary::before { transition: none; } }
.local-toc { padding: var(--s4) 0; border-top: var(--kx-rule); border-bottom: var(--kx-rule); }
.local-toc ul { list-style: none; }
.local-toc ul, .local-toc ol { columns: 2; column-gap: var(--s6); margin: var(--s2) 0 0; padding-left: 1.4em; font-size: 0.9375rem; }
.local-toc li { break-inside: avoid; margin: 0; }
.local-toc a { display: inline-block; padding: 6px 0; }
.people-index { margin: var(--s4) 0 var(--s5); }
.people-index ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: var(--s2) 0 0; padding: 0; font-size: 0.9375rem; }
.people-index a { display: inline-flex; align-items: center; min-height: var(--tap); }
ul.terms { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); margin: var(--s5) 0; }
ul.terms > li { margin: 0; padding: var(--s4) 0 18px; border-top: var(--kx-rule); }
ul.terms > li > strong:first-child, ul.terms > li > .with-mark-inline:first-child { display: block; font-family: var(--kx-font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.2; margin-bottom: 4px; }
/* a credential badge sits beside the name, top right of the entry, and links to its issuer's record */
ul.terms > li:has(> .cred-badge) { position: relative; }
ul.terms > li:has(> .cred-badge) > strong:first-child { padding-right: 52px; min-height: 38px; }
ul.terms > li > .cred-badge { position: absolute; top: var(--s4); right: 0; line-height: 0; transition: opacity .2s ease; }
ul.terms > li > .cred-badge:hover { opacity: .82; }
ul.terms > li > .cred-badge img { width: 38px; height: 38px; display: block; }
.with-mark-inline { display: inline-flex !important; align-items: center; gap: 10px; }
.with-mark-inline .mark svg { width: 24px; height: 24px; }
.flow p.actions, .action-row { margin: var(--s5) 0; }
.enquiry-panel { padding: var(--s6); background: var(--kx-cream); border: 1px solid rgba(11, 10, 8, 0.18); border-radius: 2px; }
.ground-cream .enquiry-panel { background: #fbf8f1; }
.enquiry-panel h2 { margin: 0 0 var(--s3); padding: 0; border: 0; }
.enquiry-panel h3 { margin: var(--s5) 0 var(--s2); font-size: 1.25rem; }
.checklist { margin: var(--s3) 0 0; padding-left: 1.4em; }
.checklist li { margin: var(--s2) 0; }
ul.checklist-confirm { list-style: none; padding-left: 0; }
ul.checklist-confirm li { position: relative; padding-left: 1.6em; }
ul.checklist-confirm li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 0.95em; height: 0.95em; border: 1px solid var(--kx-ink); border-radius: 2px; }
.compose { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); margin-top: var(--s5); }
.compose label { flex: 1 0 100%; font-weight: 600; font-size: 0.9375rem; }
.compose select { flex: 1 1 260px; min-width: 0; width: 100%; max-width: 100%; min-height: 48px; padding: 0 var(--s3); font: inherit; color: var(--kx-ink); background: #fff; border: 1px solid rgba(11, 10, 8, 0.4); border-radius: 2px; }
.compose-note { margin: var(--s3) 0 0; font-size: var(--size-meta); color: var(--kx-grey); }
/* Forms: the contact form and the Guildhall Membership application. Errors use one deep red that keeps 7:1 on cream. */
.kx-form { --kx-err: #8A2A1A; display: grid; gap: var(--s4); margin-top: var(--s4); }
.kx-form .f-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.kx-form .field { display: grid; gap: var(--s2); min-width: 0; align-content: start; }
.kx-form .field[hidden], .form-err[hidden], .form-success[hidden], #cf-wrap[hidden], #af-wrap[hidden] { display: none; }
.kx-form label, .kx-form legend { font-weight: 600; font-size: 0.9375rem; }
.kx-form .req { color: var(--kx-gold-text); }
.kx-form input[type="text"], .kx-form input[type="email"], .kx-form select, .kx-form textarea { width: 100%; max-width: 100%; min-height: 48px; padding: var(--s2) var(--s3); font: inherit; color: var(--kx-ink); background: #fff; border: 1px solid rgba(11, 10, 8, 0.4); border-radius: 2px; }
.kx-form textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.kx-form .f-hint { margin: 0; font-size: var(--size-meta); color: var(--kx-grey); }
.kx-form .char { margin-left: var(--s2); white-space: nowrap; }
.kx-form .char.warn, .kx-form .f-err { color: var(--kx-err); }
.kx-form .f-err { display: none; margin: 0; font-size: var(--size-meta); font-weight: 600; }
.kx-form .err > .f-err, .kx-form .decl.err > .f-err { display: block; }
.kx-form .err > input, .kx-form .err > select, .kx-form .err > textarea { border: 2px solid var(--kx-err); }
.kx-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kx-form .decl { display: grid; gap: var(--s3); min-width: 0; margin: 0; padding: var(--s4); border: 1px solid rgba(11, 10, 8, 0.18); border-radius: 2px; }
.kx-form .decl.err { border: 2px solid var(--kx-err); }
.kx-form .decl legend { padding: 0 var(--s2); }
.kx-form .tick { display: flex; gap: var(--s3); align-items: flex-start; }
.kx-form .tick input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--kx-ink); }
.kx-form .tick label { font-weight: 400; }
.kx-form .actions { margin: 0; }
.kx-form .compose-note { margin: 0; }
.form-err { margin: 0; padding: var(--s3) var(--s4); border-left: 3px solid #8A2A1A; background: #FBEEE9; color: #5A1A10; }
.form-success { padding-top: var(--s2); }
.form-success:focus { outline: none; }
.form-ref { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; margin: var(--s4) 0 0; }
.form-ref dt { font-weight: 600; }
.form-ref dd { margin: 0; font-family: var(--kx-font-mono); font-size: 1.125rem; }
.form-alt { margin-top: var(--s5); }

/* Knowledge base and articles: cream reading pages with a contents rail */
.kb-content.g-cream { box-shadow: 0 0 0 100vmax var(--kx-cream); clip-path: inset(0 -100vmax); }
.kb-content { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; max-width: 1360px; margin: 0 auto; padding: 56px var(--gutter) var(--s9); }
.kb-content.no-toc { grid-template-columns: minmax(0, 1fr); }
.kb-content > .sidebar { grid-column: 1; grid-row: 1; }
.kb-content > .article { grid-column: 2; grid-row: 1; }
.kb-content.no-toc > .article { grid-column: 1; margin-left: calc(220px + 72px); }
.article { max-width: var(--measure); min-width: 0; }
.article-body > :first-child { margin-top: 0; }
.article p, .article li { max-width: 68ch; }
.article h2 { margin: 2em 0 0.6em; padding-top: 0.9em; border-top: var(--kx-rule); font-size: var(--kx-size-h2); font-weight: 500; }
.article-body > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0.3em; }
.article h3 { margin: 1.8em 0 0.4em; font-size: var(--kx-size-h3); font-weight: 600; }
.article h4 { margin: 1.6em 0 0.4em; font-size: 1.2rem; font-weight: 600; }
.article h2 + p > em:only-child, .article h3 + p > em:only-child { font-style: normal; font-size: var(--size-meta); color: var(--kx-grey); }
.article em { font-style: normal; }
.article ul, .article ol { padding-left: 1.2em; }
.article li { margin: 0.35em 0; }
.article .table-wrap { margin: 1.4em 0; }
.lead-cont { font-size: 1.1875rem; line-height: 1.55; margin: 0 0 var(--s6); }
.with-mark { display: flex; align-items: center; gap: 14px; }
.with-mark .mark svg { width: 36px; height: 36px; }
h3.with-mark .mark svg { width: 26px; height: 26px; }
.kb-group h2 { border-top: 0 !important; padding-top: 0 !important; margin-top: 1.8em; }
.kb-nav { position: sticky; top: var(--s5); font-size: 0.9375rem; max-height: calc(100vh - 48px); overflow-y: auto; }
.kb-nav-home { font-family: var(--kx-font-display); font-size: 1.35rem; text-decoration: none; }
.kb-nav-group { margin: 1.6em 0 0.5em !important; }
.kb-nav ul, .kb-nav ol { list-style: none; margin: 0; padding: 0; }
.kb-nav li a { display: block; padding: 0.35em 0 0.35em 0.85em; border-left: var(--kx-rule); text-decoration: none; line-height: 1.35; }
.kb-nav li a[aria-current="page"] { border-left: 2px solid var(--kx-ink); padding-left: calc(0.85em - 1px); font-weight: 600; }
.name-note { margin: 0 0 var(--s6); padding: var(--s3) var(--s4); background: var(--kx-ochre); border-left: 3px solid var(--kx-gold-line); font-size: var(--size-meta); }
.name-note p { margin: 0; }
.name-note .kx-label { margin-right: var(--s2); }
.callout { margin: 1.4em 0; padding: 14px 18px; border: 1px solid rgba(11, 10, 8, 0.18); background: rgba(232, 220, 190, 0.35); }
.callout-label { margin: 0 0 6px; font-size: var(--kx-size-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kx-gold-text); }
.refs { margin: 2.2em 0 0; padding-top: 14px; border-top: 1px solid var(--kx-ink); }
.anchor { display: block; height: 0; scroll-margin-top: var(--s5); }
.post .article-body figure { margin: var(--s6) 0; }
.post .article-body .frame { padding: var(--s4); background: var(--kx-ochre); border: var(--kx-rule); overflow-x: auto; }
.post .article-body .frame svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.post .article-body figcaption { margin-top: var(--s2); font-size: var(--size-meta); color: var(--kx-grey); }
.post .article-body img { display: block; margin: 1.4em 0; border: var(--kx-rule); }
.post-back { margin-top: 2.4em; font-weight: 600; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s5); padding: 18px 0; border-bottom: var(--kx-rule); }
.post-row:first-child { border-top: var(--kx-rule); }
.post-date { font-size: var(--size-meta); font-weight: 600; color: var(--kx-gold-text); padding-top: 4px; }
.post-title { margin: 0; padding: 0; border: 0 !important; font-size: 1.375rem; line-height: 1.25; }
.post-title a { text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
.post-excerpt { margin: 4px 0 0; color: var(--kx-grey); font-size: 0.9375rem; max-width: 64ch; }
h2, h3, h4, [id] { scroll-margin-top: var(--s5); }

/* Footer */
.site-footer { background: var(--kx-navy); color: var(--kx-cream); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 56px; max-width: 1360px; margin: 0 auto; padding: var(--s8) var(--gutter) var(--s7); }
.lockup-reversed, .lockup-reversed:hover { color: var(--kx-cream); }
.lockup-reversed .endorse { color: rgba(246, 241, 230, 0.72); border-left-color: rgba(246, 241, 230, 0.3); }
.footer-brand .boundary { margin: var(--s5) 0 var(--s3); font-family: var(--kx-font-display); font-size: 1.5rem; line-height: 1.3; max-width: 22ch; }
.footer-contact { margin: 0; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.footer-cols ul { list-style: none; margin: var(--s3) 0 0; padding: 0; font-size: 0.9375rem; }
.footer-cols li { margin: 0; }
.footer-cols a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.footer-products .mark svg { width: 20px; height: 20px; }
.legal { max-width: 1360px; margin: 0 auto; padding: 20px var(--gutter) var(--s6); border-top: 1px solid rgba(246, 241, 230, 0.16); font-size: 0.8125rem; color: rgba(246, 241, 230, 0.7); }

/* The Round Table ontology engraving (canvas, ink on ochre), with a readable legend beside it */
.onto { margin: 0; }
.onto-stage { position: relative; max-width: 620px; }
.onto-stage canvas { display: block; width: 100%; aspect-ratio: 1 / 1; touch-action: none; cursor: grab; }
.onto-stage canvas:active { cursor: grabbing; }
.onto-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) 18px; margin-top: var(--s2); max-width: 620px; }
.onto-play { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 var(--s4); font: 600 0.875rem var(--kx-font-body); color: var(--kx-ink); background: transparent; border: 1px solid var(--kx-ink); border-radius: 2px; cursor: pointer; }
.onto-play:hover { background: rgba(11, 10, 8, 0.06); }
.onto-play .tri { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.onto-play.playing .tri { width: 9px; height: 9px; border: 0; background: currentColor; }
.onto-cap { flex: 1 1 240px; margin: 0; font-size: 0.9375rem; color: var(--kx-grey); min-height: 2.9em; }
.onto-legend { max-width: 620px; margin-top: var(--s4); padding-top: var(--s3); border-top: var(--kx-rule); font-size: 0.9375rem; }
.onto-legend dl { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 6px var(--s4); margin: var(--s2) 0 0; }
.onto-legend dl > div { display: contents; }
.onto-legend dt { font-weight: 600; }
.onto-legend dd { margin: 0; }
.onto-legend details { margin-top: var(--s2); }
.onto-legend ol { margin: 0; padding-left: 1.4em; }
.onto figcaption { margin-top: var(--s4); font-size: var(--size-meta); color: var(--kx-grey); max-width: 62ch; }
.onto figcaption strong { color: var(--kx-ink); }
.onto-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
.onto-side p { margin: 0 0 20px; }
.mod-list { margin: 0 0 20px; }
.mod-list > div { padding: var(--s3) 0; border-top: var(--kx-rule); }
.mod-list dt { font-family: var(--kx-font-display); font-size: 1.3rem; }
.mod-list dd { margin: 2px 0 0; font-size: 0.9375rem; color: var(--kx-grey); }
.product-round-table .onto, .rsec-figure .onto { margin-top: var(--s3); }

/* 1180px: the product bar folds into the menu */
@media (max-width: 1180px) {
  .utility, .house-nav { display: none; }
  .menu { display: block; }
  .evidence-fields, .evidence-record dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 900px: one column everywhere; section number and label sit above their heading */
@media (max-width: 900px) {
  :root { --gutter: 24px; --col-gap: 0px; --sec-marketing: 56px; --sec-reading: 40px; }
  .header-bar { padding-top: 14px; padding-bottom: 14px; }
  .hero-home-inner { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .hero-text { padding: var(--s7) var(--gutter) var(--s2); }
  .bridge { margin-left: auto; width: 92%; }
  .sec-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
  .sec-grid > .sec-side, .sec-grid > .sec-body { grid-column: 1; grid-row: auto; }
  .sec-grid > .sec-side { display: flex; align-items: baseline; gap: var(--s3); padding-top: 0; }
  .sec-grid > .sec-side:empty, .sec-grid > .sec-side[aria-hidden="true"]:not(:has(*)) { display: none; }
  .sec-num { font-size: 1.5rem; margin: 0; }
  .rsec h2 { border-top: 0; padding-top: 0; }
  .rsec { border-top: var(--kx-rule); margin-top: var(--sec-reading); padding-top: var(--s5); }
  .rsec-intro, .rsec-panel, .rsec-toc, .rsec-figure, .flow > .rsec:first-child { border-top: 0; margin-top: var(--s5); padding-top: 0; }
  .questions, .span-list { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .onto-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .statements { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .house-arcade { grid-template-columns: 1fr 1fr; padding: 18px 0 0; gap: 14px; }
  .hc-arch { min-height: 0; border-radius: 50% 50% 0 0 / 46px 46px 0 0; padding: var(--s6) 10px 18px; }
  .house-cell { padding-left: 10px; padding-right: 10px; }
  .hc-name { font-size: 1.2rem; }
  .gable { height: 56px; }
  .hero-product-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s6) var(--gutter) var(--s7); }
  .plate { order: 0; justify-self: start; max-width: 200px; }
  .product-lockup { gap: 14px; }
  .product-lockup .mark svg { width: 52px; height: 52px; }
  .hero-product .hero-text { padding: var(--s2) 0 0; }
  .pager a { font-size: 1.2rem; }
  .page-head-inner { padding: var(--s6) var(--gutter) 28px; }
  .reading-head h1, .unpublished h1, .reading-head h1.long-title { font-size: clamp(2rem, 5.2vw, 2.25rem); max-width: none; }
  .kb-content { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px var(--gutter) var(--s8); }
  .kb-content > .sidebar, .kb-content > .article, .kb-content.no-toc > .article { grid-column: 1; grid-row: auto; margin-left: 0; }
  .kb-content > .sidebar { border-top: var(--kx-rule); padding-top: var(--s5); }
  .kb-content.post > .sidebar { grid-row: 1; border-top: 0; padding-top: 0; }
  .kb-content.post > .article { grid-row: 2; }
  .post .kb-nav { position: static; max-height: none; border: var(--kx-rule); padding: var(--s3) var(--s4); }
  .kb-nav { position: static; max-height: none; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: var(--s7) var(--gutter) var(--s6); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .local-toc ol, .local-toc ul { columns: 1; }
  ul.terms { grid-template-columns: minmax(0, 1fr); }
  table.modules tbody th { width: 40%; font-size: 1.15rem; }
  .post-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .evidence-fields, .evidence-record dl { grid-template-columns: 1fr 1fr; }
}
/* 480px: phones */
@media (max-width: 480px) {
  :root { --gutter: 16px; --sec-marketing: 44px; --sec-reading: 32px; }
  .emblem svg { width: 32px; height: 32px; }
  .wordmark { font-size: 1.4rem; }
  .lockup { gap: 10px; }
  .endorse { padding-left: 10px; font-size: 0.75rem; }
  .header-bar { gap: var(--s3); }
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .enquiry-panel { padding: var(--s5) var(--s4); }
  .btn { width: 100%; }
  .actions .btn-tertiary, .action-row .btn-tertiary { width: auto; }
  /* two-column tables stack into label and value pairs */
  table.modules thead, .t-cols-2 > thead { display: none; }
  table.modules tr, table.kv tr, .t-cols-2 > tbody > tr { display: block; padding: var(--s3) 0; border-bottom: var(--kx-rule); }
  table.modules th, table.modules td, table.kv th, table.kv td, .t-cols-2 > tbody > tr > th, .t-cols-2 > tbody > tr > td { display: block; width: auto !important; min-width: 0 !important; border: 0; padding: 0; }
  table.modules td, table.kv td, .t-cols-2 > tbody > tr > td { margin-top: 4px; }
  .copy-btn { min-width: 64px; }
  .code-block pre { padding-right: 84px; }
}