/* Cognogin — shared stylesheet
   Institutional register: dense, precise, unadorned.
   Reads as engineering documentation, not marketing. */

:root{
  --paper:#FBFAF8;
  --paper-2:#F3F1EC;
  --paper-3:#E9E6DF;
  --ink:#15181A;
  --ink-2:#454C50;
  --ink-3:#767D82;
  --teal:#0F766E;
  --teal-deep:#0A5850;
  --teal-wash:#E8F2F0;
  --amber:#B4530A;
  --logo-gold:#E9B35A;
  --rule:rgba(21,24,26,.12);
  --rule-soft:rgba(21,24,26,.07);
  --measure:72rem;
  --text:68ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--measure);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3.5rem)}
.narrow{max-width:var(--text)}

h1,h2,h3,h4{font-family:'IBM Plex Serif',Georgia,serif;font-weight:400;line-height:1.16;letter-spacing:-.008em}
p+p{margin-top:1em}
a{color:var(--teal)}
strong{font-weight:600;color:var(--ink)}

/* ── eyebrow / mono labels ────────────── */
.label{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);font-weight:500;display:block;margin-bottom:1.1rem;
}
.label.muted{color:var(--ink-3)}
.label.amber{color:var(--amber)}

/* ── header ───────────────────────────── */
header{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:40}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
     flex-wrap:wrap;padding-block:1.05rem}
.brand{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.05rem;
  font-weight:850;
  letter-spacing:.3em;
  text-transform:lowercase;
  color:var(--logo-gold);
  text-decoration:none;
  white-space:nowrap;
}
.brand b{font-weight:inherit;color:var(--ink)}
nav{display:flex;gap:1.7rem;font-size:.86rem}
nav a{color:var(--ink-2);text-decoration:none;transition:color .18s;white-space:nowrap}
nav a:hover,nav a[aria-current]{color:var(--teal)}
@media(max-width:600px){nav{gap:1.1rem;font-size:.8rem}}

/* ── page head ────────────────────────── */
.pagehead{padding-block:clamp(3rem,6vw,5.5rem) clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--rule)}
h1{font-size:clamp(2.2rem,1.5rem + 3vw,3.9rem);max-width:20ch;margin-bottom:1.3rem}
.standfirst{font-size:clamp(1.08rem,1rem + .4vw,1.32rem);color:var(--ink-2);max-width:56ch;line-height:1.6}

/* ── sections ─────────────────────────── */
section{padding-block:clamp(2.8rem,5.5vw,5rem)}
.rule{border-top:1px solid var(--rule)}
.tint{background:var(--paper-2)}

h2{font-size:clamp(1.6rem,1.25rem + 1.7vw,2.5rem);max-width:24ch;margin-bottom:1.2rem}
h3{font-size:1.24rem;margin-bottom:.45rem}
h4{font-size:1.05rem;margin-bottom:.35rem}
.copy{color:var(--ink-2);max-width:var(--text)}

/* ── lineage timeline ─────────────────── */
.lineage{margin-top:2.6rem;position:relative;padding-left:2.6rem}
.lineage::before{
  content:'';position:absolute;left:.72rem;top:.6rem;bottom:1.4rem;
  width:1px;background:var(--rule);
}
.step{position:relative;padding-bottom:1.85rem}
.step::before{
  content:'';position:absolute;left:-2.24rem;top:.52rem;
  width:.6rem;height:.6rem;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--teal);
}
.step:last-child{padding-bottom:0}
.step .yr{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;
  color:var(--teal);font-weight:500;display:block;margin-bottom:.15rem;
}
.step h3{font-size:1.12rem;margin-bottom:.25rem}
.step p{color:var(--ink-2);font-size:.97rem;max-width:58ch}

/* ── figures ──────────────────────────── */
figure{margin:2.4rem 0 0}
figure img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
figure svg{display:block;width:100%;height:auto}
figcaption{
  margin-top:.75rem;font-size:.87rem;color:var(--ink-3);max-width:64ch;
  font-family:'IBM Plex Sans',sans-serif;
}
.figgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.4rem}
.figgrid figure{margin:0}
@media(max-width:760px){.figgrid{grid-template-columns:1fr}}

/* ── tables ───────────────────────────── */
table{width:100%;border-collapse:collapse;margin-top:1.9rem;font-size:.95rem}
caption{text-align:left;font-size:.87rem;color:var(--ink-3);margin-bottom:.7rem}
th,td{text-align:left;padding:.78rem .9rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
thead th{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);font-weight:500;
  border-bottom:1px solid var(--rule);
}
td:first-child{color:var(--ink);font-weight:500;white-space:nowrap;padding-right:1.6rem}
td.num{font-family:'IBM Plex Mono',monospace;font-size:.9rem;white-space:nowrap}
@media(max-width:620px){
  td:first-child{white-space:normal}
  th,td{padding:.62rem .5rem;font-size:.9rem}
}

/* ── spec strip ───────────────────────── */
.specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.4rem;
}
.spec{background:var(--paper);padding:1.4rem 1.3rem}
.spec .v{
  font-family:'IBM Plex Mono',monospace;font-size:1.5rem;line-height:1.1;
  color:var(--teal);display:block;margin-bottom:.4rem;font-weight:500;
}
.spec .k{font-size:.83rem;color:var(--ink-2);line-height:1.45}

/* ── callout ──────────────────────────── */
.callout{
  border-left:3px solid var(--teal);background:var(--teal-wash);
  padding:1.35rem 1.6rem;margin-top:2rem;border-radius:0;
}
.callout.amber{border-left-color:var(--amber);background:#FAF1E8}
.callout p{color:var(--ink-2);max-width:62ch}
.callout p:first-child{color:var(--ink)}

/* ── card list ────────────────────────── */
.cards{display:grid;gap:0;margin-top:2.2rem}
.card{
  padding-block:1.7rem;border-bottom:1px solid var(--rule-soft);
  display:grid;grid-template-columns:13rem 1fr;gap:2rem;align-items:start;
}
.card:first-child{border-top:1px solid var(--rule)}
.card .side{color:var(--ink-3);font-size:.87rem}
.card .side .st{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-top:.4rem;
}
.card .side .st.live{color:var(--teal)}
.card .side .st.hold{color:var(--amber)}
.card p{color:var(--ink-2);max-width:58ch}
@media(max-width:760px){
  .card{grid-template-columns:1fr;gap:.5rem}
}

ul.plain{list-style:none;margin-top:1rem}
ul.plain li{
  padding-left:1.1rem;position:relative;color:var(--ink-2);
  margin-bottom:.5rem;max-width:62ch;
}
ul.plain li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:.32rem;height:1px;background:var(--teal);
}

/* ── footer ───────────────────────────── */
footer{border-top:1px solid var(--rule);padding-block:2.6rem;font-size:.85rem;color:var(--ink-3);margin-top:2rem}
.fbar{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.fbar a{color:var(--ink-2);text-decoration:none}
.fbar a:hover{color:var(--teal)}
.flinks{display:flex;gap:1.5rem;flex-wrap:wrap}
.fine{margin-top:1.7rem;font-size:.79rem;line-height:1.6;max-width:66ch;color:var(--ink-3)}

.view-float{
  position:fixed;
  right:clamp(1rem,3vw,2.25rem);
  bottom:clamp(1rem,3vw,2rem);
  z-index:60;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:calc(100vw - 2rem);
  min-height:2.9rem;
  padding:.78rem 1rem;
  border:1px solid var(--teal);
  border-radius:0;
  background:var(--paper);
  color:var(--teal-deep);
  box-shadow:0 .9rem 2rem rgba(21,24,26,.13);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:0;
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
}
.view-float:hover{background:var(--teal);color:var(--paper)}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}