/* THE ENGINE LEDGER. Tokens from DESIGN.md and campaign.css restated locally so the block reads the same on the cream
   home page and the white systems page. Scoped to .eng. Chip colours follow site.css .t-status. */
.eng {
  --e-ink:#1D1430; --e-body:#3A2F50; --e-soft:#6B6386; --e-lav:#7A5FA6; --e-lav2:#563F82;
  --e-line:rgba(29,20,48,.14); --e-card:#fff; --e-gold:#FFC933; --e-green:oklch(0.9 0.06 150);
  --e-tint:oklch(0.955 0.02 300); --e-rust:#B4542A; --e-ease:cubic-bezier(.22,1,.36,1);
  font-family:var(--font-body, "Archivo", system-ui, sans-serif); color:var(--e-body);
  container-type:inline-size;
}
.eng * { box-sizing:border-box; }
.eng a { text-decoration:none; }
.eng .inner { max-width:var(--wrap,1200px); margin-inline:auto; padding-inline:var(--gutter,clamp(1.25rem,4vw,3rem)); }
.eng--page .inner { padding-block:clamp(1.6rem,3.5vw,2.6rem) clamp(1.2rem,2.5vw,1.8rem); }
.eng:focus-visible { outline:3px solid var(--e-lav); outline-offset:-3px; }

.eng__kick {
  font-family:var(--font-mono, "IBM Plex Mono", monospace); font-size:clamp(.5rem,1.1vw,.58rem); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--e-lav); margin:0 0 .35rem; display:flex; align-items:center; gap:10px;
}
.eng__kick::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(122,95,166,.4),rgba(122,95,166,0)); }
.eng .eng__note { font:600 clamp(.53rem,1.1vw,.6rem)/1.3 var(--font-body, sans-serif); letter-spacing:0; text-transform:none; color:var(--e-soft); }
.eng .eng__title { font-weight:900; font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.02; letter-spacing:-.035em; color:var(--e-ink); margin:0; text-wrap:balance; }
.eng .eng__title em { font-style:normal; color:var(--e-lav2); }
.eng .eng__lede { margin:.45rem 0 0; font-size:clamp(.82rem,1.1vw,.92rem); line-height:1.35; max-width:60ch; color:var(--e-body); }

.eng__bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.9rem 0 .6rem; }
.eng .eng__count { font-family:var(--font-mono, monospace); font-size:.64rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--e-lav2); margin:0; white-space:nowrap; }
.eng .eng__tally { font-family:var(--font-mono, monospace); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--e-soft); margin:0 auto 0 0; white-space:nowrap; }
.eng__ctl { display:flex; align-items:center; gap:.5rem; flex:none; }
.eng__btn {
  width:40px; height:40px; border-radius:50%; border:2px solid var(--e-ink); background:var(--e-card); color:var(--e-ink);
  cursor:pointer; display:grid; place-items:center; padding:0; transition:transform .18s var(--e-ease), background .18s var(--e-ease), color .18s;
}
.eng__btn:hover { background:var(--e-ink); color:#fff; transform:translateY(-1px); }
.eng__btn:focus-visible { outline:3px solid var(--e-lav); outline-offset:2px; }
.eng__btn svg { width:18px; height:18px; }

/* the stage */
.eng__stage { position:relative; min-height:300px; }
.eng .inner { position:relative; }
.eng__stage.is-in .eng__led { animation:eng-in .42s var(--e-ease) both; }
@keyframes eng-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.eng__led {
  position:relative; background:var(--e-card); border:2px solid var(--e-ink); border-radius:14px; box-shadow:6px 6px 0 0 var(--e-ink);
  padding:clamp(1.1rem,2.4vw,1.8rem) clamp(1.1rem,2.6vw,2rem); display:grid; grid-template-columns:minmax(0,1fr); gap:.85rem;
}
.eng__led--delivered { background:#FFFBEF; }
/* narrow */
.eng__side { display:contents; }
.eng__sidewho { display:none; }
.eng__stamp {
  position:absolute; top:1rem; right:1rem; transform:rotate(-6deg);
  font-family:var(--font-mono, monospace); font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; line-height:1;
  padding:.42rem .7rem .36rem; border:2.5px solid var(--e-ink); border-radius:8px; color:var(--e-ink); background:var(--e-card); white-space:nowrap;
  box-shadow:0 0 0 2px #fff inset;
}
.eng__stamp--running { background:var(--e-green); }
.eng__stamp--delivered { background:var(--e-gold); }
.eng__stamp--coming { background:var(--e-tint); color:var(--e-lav2); border-color:var(--e-lav2); }
.eng__ledhead { display:flex; align-items:center; gap:.8rem; padding-right:12rem; }
.eng__mark { width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--e-tint); color:var(--e-ink); }
.eng__mark svg { width:26px; height:26px; }
.eng__mark img { width:40px; height:40px; border-radius:8px; object-fit:cover; }
.eng .eng__name { font-weight:900; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.06; letter-spacing:-.035em; color:var(--e-ink); margin:0; text-wrap:balance; }
.eng .eng__bigproof { margin:0; font-weight:800; font-size:clamp(1.15rem,2.2vw,1.7rem); line-height:1.12; letter-spacing:-.03em; color:var(--e-ink); max-width:34ch; text-wrap:balance; }
.eng .eng__bigproof::before { content:"Proof"; display:block; font-family:var(--font-mono, monospace); font-size:.5rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--e-rust); margin-bottom:.35rem; }
.eng .eng__solve { margin:0; font-size:clamp(.84rem,1.05vw,.92rem); line-height:1.4; color:var(--e-body); max-width:64ch; }
.eng__ledfoot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--e-line); padding-top:.7rem; }
.eng .eng__client { margin:0; font-size:.8rem; color:var(--e-soft); }
.eng .eng__client b { color:var(--e-ink); font-weight:800; }
.eng .eng__door { font-family:var(--font-mono, monospace); font-size:clamp(.66rem,.95vw,.74rem); font-weight:600; color:var(--e-lav2); }
.eng .eng__door:hover { text-decoration:underline; }

/* the six-second line */
.eng__prog { height:2px; margin:.7rem .35rem 0; background:var(--e-line); border-radius:2px; overflow:hidden; }
.eng__prog i { display:block; height:100%; width:100%; background:var(--e-lav2); transform:scaleX(0); transform-origin:left; }
.eng__prog.is-run i { animation:eng-prog 6s linear both; }
.eng.is-held .eng__prog i { animation-play-state:paused; }
@keyframes eng-prog { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* the navigator */
.eng__nav { display:flex; gap:.45rem; margin-top:.8rem; overflow-x:auto; scrollbar-width:none; padding:.2rem .2rem .3rem; }
.eng__nav::-webkit-scrollbar { display:none; }
.eng__navmark {
  flex:none; width:40px; height:40px; border-radius:9px; border:2px solid var(--e-line); background:var(--e-card); color:var(--e-soft);
  padding:0; cursor:pointer; display:grid; place-items:center; transition:border-color .18s, color .18s, transform .18s var(--e-ease), background .18s;
}
.eng__navico { display:grid; place-items:center; }
.eng__navmark svg { width:20px; height:20px; }
.eng__navmark img { width:28px; height:28px; border-radius:6px; }
.eng__navmark:hover { border-color:var(--e-ink); color:var(--e-ink); transform:translateY(-1px); }
.eng__navmark.is-on { border-color:var(--e-ink); color:var(--e-ink); background:var(--e-tint); box-shadow:2px 2px 0 0 var(--e-ink); }
.eng__navmark--delivered.is-on { background:var(--e-gold); }
.eng__navmark--coming.is-on { background:#fff; border-style:dashed; }
.eng__navmark:focus-visible { outline:3px solid var(--e-lav); outline-offset:2px; }

/* wide */
@media (min-width:901px) {
  .eng__led { grid-template-columns:minmax(0,1fr) 15rem; grid-template-areas:"head side" "proof side" "solve side" "foot side"; column-gap:2rem; }
  .eng__side { display:flex; grid-area:side; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:1rem; border-left:1px solid var(--e-line); padding-left:1.6rem; }
  .eng__sidewho { display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; text-align:right; }
  .eng__stamp { position:static; transform:rotate(-4deg); margin:.15rem .3rem 0 0; }
  .eng__ledhead { grid-area:head; padding-right:0; }
  .eng .eng__bigproof { grid-area:proof; }
  .eng .eng__solve { grid-area:solve; }
  .eng__ledfoot { grid-area:foot; display:none; }
}
@media (max-width:900px) { .eng__ledhead { padding-right:11rem; } }
@media (max-width:560px) {
  .eng__bar { flex-wrap:wrap; }
  .eng .eng__tally { order:3; flex-basis:100%; margin-top:.2rem; }
  .eng__stage { min-height:350px; }
  .eng__stamp { position:static; transform:none; justify-self:start; width:max-content; margin-bottom:-.2rem; }
  .eng__ledhead { padding-right:0; }
  .eng .eng__bigproof { font-size:1.12rem; }
  .eng__navmark { width:36px; height:36px; }
  .eng__navmark svg { width:18px; height:18px; }
}
@media (prefers-reduced-motion: reduce) {
  .eng__stage.is-in .eng__led { animation:none; }
  .eng__prog { display:none; }
  .eng__btn, .eng__navmark { transition:none; }
}

/* the meter */
.eng__meter { position:absolute; left:var(--gutter,clamp(1.25rem,4vw,3rem)); visibility:hidden; pointer-events:none; height:0; overflow:visible; }
.eng__meter .eng__led { animation:none; }

/* on a white page (systems) the block sits among the page's own h2s, so the kicker */
.eng--page .eng__kick { font-size:.72rem; letter-spacing:.18em; }
.eng--page .eng__note { font-size:.72rem; }
.eng--page .eng__title { font-size:var(--size-h2, clamp(1.9rem,3.6vw,2.85rem)); letter-spacing:-.03em; margin-top:.2rem; }
.eng--page .eng__lede { font-size:1rem; max-width:62ch; margin-top:.7rem; }

/* on-order: the state the data actually carries for the bench rows (engines.json, 2026-09-19); the
   --coming rules above were written for a state no row has, so the stamp and the mark were unstyled */
.eng__stamp--on-order { background:var(--e-tint); color:var(--e-lav2); border-color:var(--e-lav2); }
.eng__navmark--on-order.is-on { background:#fff; border-style:dashed; }
/* the rail never scrolls the page: engines.js scrolls the rail itself (the landing fault, 2026-09-19) */
.eng__nav { scroll-behavior:smooth; overscroll-behavior-x:contain; }