/* ============================================================
   $ENGINEER — sections.css · concatenated per-section stylesheet
   DOC CSS-002 · REV C · SHT 1 OF 1

   Contents, in document order:
     00  token fallbacks (guarded; site.css is canonical)
     01  nav / index sheet / footer          (nav-social)
     02  DOC ENG-003/004 origin + lore       (origin-lore)
     03  scroll scenes, 360 orbit            (scroll-scenes)
     04  DOC spec sheet + measured values    (spec-stats)
     05  DOC ENG-006/007 gallery + forge     (gallery-forge)
     06  verification / certification        (trust-layer)
     07  acquisition panel                   (buy-panel)
     08  MOTION ARMATURE — data-motion / data-fx contract
     09  drafting craft — stamp, dimension, tension, datum, pluck
     10  reduced-motion master switch

   Conventions this file enforces:
   - No animation of layout properties. transform / opacity /
     clip-path / background-size / letter-spacing (short runs) only.
   - Cyan (--dew:#5AD1C4) appears ONLY on values that are live
     on-chain. The lock is semantic, not stylistic.
   - Motion arms only under a root .eng-js class (JS mounts it).
     No JS = fully static, fully readable document.
   - Completion class is .in everywhere. Stagger index is --i.
     JS reads data-stagger / data-delay (ms) and writes --stagger /
     --delay / --i as inline custom properties.
   ============================================================ */

/* ---- 00 · token fallbacks (site.css shadows these) --------- */
:root{
  --void:#0A0908; --panel:#121110; --raised:#1C1A18; --hairline:#2A2724;
  --orange:#E8622C; --orange-hi:#FF8A4C; --ember:#B33F14;
  --silk:#F2EDE4; --silk-dim:#8A837C; --dew:#5AD1C4;
  --down:#FF5A5A; --sky:#A8C6DA; --sol-p:#9945FF; --sol-t:#14F195;
  --display:"Bricolage",system-ui,sans-serif;
  --mono:"JBMono","SF Mono",ui-monospace,monospace;
  --serif:"InstrSerif",Georgia,serif;
}

/* ============================================================
   01 · NAV / INDEX SHEET / FOOTER
   ============================================================ */

/* skip link */
.eng-skip{
  position:fixed; top:-48px; left:12px; z-index:200;
  font:600 13px/1 var(--mono); letter-spacing:.04em;
  color:var(--void); background:var(--orange);
  padding:12px 16px; text-decoration:none;
  transition:top .15s ease;
}
.eng-skip:focus-visible{ top:12px; outline:2px solid var(--silk); outline-offset:2px; }

/* scroll progress — a drafting rule being drawn, not a loader */
.eng-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:transparent; pointer-events:none;
}
.eng-progress b{
  display:block; height:100%; width:100%;
  background:var(--orange);
  transform:scaleX(0); transform-origin:0 50%;
}

/* header */
.eng-header{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; gap:16px;
  padding:0 16px; height:56px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .2s ease, border-color .2s ease;
}
.eng-header.is-scrolled{
  background:var(--void);
  border-bottom-color:var(--hairline);
}
.eng-brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; min-height:44px;
}
.eng-brand-mark{ flex:0 0 auto; color:var(--orange); display:block; }
.eng-brand-name{
  font:800 17px/1 var(--display); letter-spacing:.02em; color:var(--silk);
}
.eng-brand-doc{
  font:400 11px/1 var(--mono); letter-spacing:.08em; color:var(--silk-dim);
  border-left:1px solid var(--hairline); padding-left:10px;
  display:none;
}

/* desktop nav — underline draws with a plotter overshoot, not a fade */
.eng-nav{ display:none; margin-left:auto; }
.eng-nav ol{
  list-style:none; margin:0; padding:0;
  display:flex; gap:4px;
}
.eng-nav a{
  position:relative; display:flex; align-items:center; gap:7px;
  padding:10px 10px; min-height:44px;
  font:400 12px/1 var(--mono); letter-spacing:.06em;
  color:var(--silk-dim); text-decoration:none;
  transition:color .18s ease;
}
.eng-nav a .n{ color:var(--silk-dim); font-size:10px; transition:color .18s ease; }
.eng-nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px;
  height:1px; background:var(--orange);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.15);
}
.eng-nav a:hover{ color:var(--silk); }
.eng-nav a:hover::after{ transform:scaleX(1); }
.eng-nav a:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; color:var(--silk); }
.eng-nav a[aria-current="true"]{ color:var(--silk); }
.eng-nav a[aria-current="true"] .n{ color:var(--orange); }
.eng-nav a[aria-current="true"]::after{ transform:scaleX(1); }

/* header social icon row (desktop) */
.eng-social{ display:none; align-items:center; gap:2px; }
.eng-icon-link{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; color:var(--silk-dim);
  transition:color .15s ease, transform .25s cubic-bezier(.2,.9,.3,1.4);
}
.eng-icon-link:hover{ color:var(--orange); transform:translateY(-1px); }
.eng-icon-link:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; color:var(--orange); }
.eng-icon-link svg{ display:block; }
.eng-icon-pending{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; color:var(--hairline); cursor:default;
}

/* INDEX button (mobile) — a document tab, not a hamburger */
.eng-index-btn{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  min-height:44px; padding:0 14px;
  font:600 12px/1 var(--mono); letter-spacing:.1em;
  color:var(--silk); background:var(--panel);
  border:1px solid var(--hairline); border-radius:0;
  cursor:pointer;
  transition:border-color .15s ease;
}
.eng-index-btn .c{ color:var(--orange); font-weight:400; }
.eng-index-btn:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.eng-index-btn[aria-expanded="true"]{ border-color:var(--orange); }

/* INDEX sheet — full-page table of contents */
.eng-sheet{
  position:fixed; inset:0; z-index:130;
  background:var(--void);
  display:none; flex-direction:column;
  padding:0 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.eng-sheet.is-open{ display:flex; }
.eng-sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  height:56px; flex:0 0 auto;
  border-bottom:1px solid var(--hairline);
}
.eng-sheet-title{
  font:400 11px/1 var(--mono); letter-spacing:.12em; color:var(--silk-dim);
}
.eng-sheet-close{
  min-height:44px; padding:0 12px;
  font:600 12px/1 var(--mono); letter-spacing:.1em;
  color:var(--silk); background:none;
  border:1px solid var(--hairline); cursor:pointer;
}
.eng-sheet-close:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.eng-sheet ol{ list-style:none; margin:0; padding:0; flex:1 0 auto; }
.eng-sheet ol a{
  display:flex; align-items:baseline; gap:14px;
  padding:18px 4px; min-height:44px;
  border-bottom:1px solid var(--hairline);
  text-decoration:none;
}
.eng-sheet ol a .n{
  font:400 12px/1 var(--mono); color:var(--orange); letter-spacing:.06em;
}
.eng-sheet ol a .t{
  font:800 clamp(22px,6vw,30px)/1.05 var(--display); color:var(--silk);
  letter-spacing:.01em;
  transition:color .15s ease;
}
.eng-sheet ol a:hover .t{ color:var(--orange-hi); }
.eng-sheet ol a[aria-current="true"] .t{ color:var(--orange-hi); }
.eng-sheet ol a[aria-current="true"]::after{
  content:"— you are here"; font:italic 400 13px/1 var(--serif); color:var(--silk-dim);
  margin-left:auto; align-self:center;
}
.eng-sheet ol a:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }
.eng-sheet-social{
  flex:0 0 auto; margin-top:24px;
  border-top:1px solid var(--hairline); padding-top:8px;
}
.eng-sheet-social-label{
  font:400 11px/1 var(--mono); letter-spacing:.12em; color:var(--silk-dim);
  margin:10px 0 2px;
}
.eng-sheet-social ul{ list-style:none; margin:0; padding:0; }
.eng-sheet-social li a,
.eng-sheet-social li .eng-chan-pending{
  display:flex; align-items:center; gap:12px;
  min-height:48px; padding:0 4px;
  font:400 13px/1 var(--mono); letter-spacing:.04em;
  text-decoration:none;
}
.eng-sheet-social li a{ color:var(--silk); }
.eng-sheet-social li a:hover{ color:var(--orange); }
.eng-sheet-social li a:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }
.eng-chan-pending{ color:var(--silk-dim); }
.eng-chan-pending .st{ margin-left:auto; font-size:11px; letter-spacing:.08em; }
.eng-sheet-ca{
  flex:0 0 auto; margin-top:16px; padding:14px 4px 0;
  border-top:1px solid var(--hairline);
  font:400 12px/1.6 var(--mono); color:var(--silk-dim); letter-spacing:.04em;
}
.eng-sheet-ca .live{ color:var(--dew); }

/* footer */
.eng-footer{
  background:var(--panel);
  border-top:1px solid var(--hairline);
  padding:56px 20px 32px;
}
.eng-foot-grid{
  display:grid; grid-template-columns:1fr; gap:40px;
  max-width:1200px; margin:0 auto;
}
.eng-foot-brand .eng-brand-name{ font-size:20px; }
.eng-foot-brand p{
  margin:14px 0 0; max-width:34ch;
  font:italic 400 15px/1.55 var(--serif); color:var(--silk-dim);
}
.eng-foot-col h3{
  margin:0 0 14px;
  font:400 11px/1 var(--mono); letter-spacing:.14em; color:var(--silk-dim);
  text-transform:uppercase;
}
.eng-foot-col ol, .eng-foot-col ul{ list-style:none; margin:0; padding:0; }
.eng-foot-col li{ margin:0; }
.eng-foot-index a{
  display:flex; align-items:baseline; gap:10px;
  min-height:40px; padding:8px 0;
  font:400 13px/1 var(--mono); letter-spacing:.05em;
  color:var(--silk); text-decoration:none;
}
.eng-foot-index a .n{ color:var(--orange); font-size:11px; }
.eng-foot-index a:hover{ color:var(--orange-hi); }
.eng-foot-index a:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.eng-foot-chan a,
.eng-foot-chan .eng-chan-pending{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:6px 0;
  font:400 13px/1 var(--mono); letter-spacing:.05em;
  text-decoration:none;
}
.eng-foot-chan a{ color:var(--silk); }
.eng-foot-chan a:hover{ color:var(--orange); }
.eng-foot-chan a:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.eng-foot-contract p{
  margin:0 0 10px;
  font:400 12px/1.7 var(--mono); color:var(--silk-dim); letter-spacing:.04em;
}
.eng-foot-contract .live{ color:var(--dew); }
.eng-foot-contract a{ color:var(--silk); text-decoration:underline; text-underline-offset:3px; }
.eng-foot-contract a:hover{ color:var(--orange); }

.eng-foot-legal{
  max-width:1200px; margin:48px auto 0;
  border-top:1px solid var(--hairline); padding-top:24px;
  display:flex; flex-direction:column; gap:20px;
}
.eng-sol-badge{
  display:inline-flex; align-items:center; gap:10px;
  align-self:flex-start;
  padding:10px 14px; border:1px solid var(--hairline);
  font:400 11px/1 var(--mono); letter-spacing:.12em; color:var(--silk);
  text-decoration:none;
  transition:border-color .15s ease;
}
.eng-sol-badge:hover{ border-color:var(--silk-dim); }
.eng-sol-badge:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.eng-disclaimer{
  margin:0; max-width:78ch;
  font:400 13px/1.7 var(--mono); color:var(--silk-dim); letter-spacing:.02em;
}
.eng-foot-line{
  margin:0; display:flex; flex-wrap:wrap; gap:6px 18px;
  font:400 11px/1.6 var(--mono); color:var(--silk-dim); letter-spacing:.06em;
}

@media (min-width:760px){
  .eng-header{ padding:0 28px; height:60px; }
  .eng-brand-doc{ display:inline; }
  .eng-nav{ display:block; }
  .eng-social{ display:flex; margin-left:4px; }
  .eng-index-btn{ display:none; }
  .eng-foot-grid{ grid-template-columns:1.2fr .8fr .8fr 1.2fr; }
  .eng-footer{ padding:72px 28px 40px; }
  .eng-foot-line{ margin-left:0; }
}

/* ============================================================
   02 · DOC ENG-003 ORIGIN + DOC ENG-004 LORE
   (module seam previously carried raw HTML comment fragments,
    which parsed as an invalid selector and dropped the entire
    shared scaffolding block below. Fragments removed. Fixed.)
   ============================================================ */

#origin, #lore {
  position: relative;
  background: var(--panel);
  color: var(--silk);
  overflow: hidden;
}
#origin .eng-wrap, #lore .eng-wrap {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem);
  z-index: 1;
}
#origin *, #lore *, #origin *::before, #lore *::before, #origin *::after, #lore *::after {
  box-sizing: border-box;
}
#origin img, #lore img { max-width: 100%; }

/* drawing-plate title block — one register for the whole dossier */
.eng-plate-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 0.6rem 0;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silk-dim);
}
.eng-plate-head b { color: var(--silk); font-weight: 400; }
.eng-plate-head span:last-child { text-align: right; }

.eng-kicker {
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-hi);
  margin: 0 0 0.75rem;
}
#origin h2, #lore h2 {
  font-family: var(--display), sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  color: var(--silk);
  text-wrap: balance;
}
.eng-serif {
  font-family: var(--serif), serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--silk-dim);
  margin: 0;
}

/* oversized ghost numerals — blueprint furniture, never content */
.eng-ghost {
  position: absolute;
  font-family: var(--display), sans-serif;
  font-weight: 800;
  font-size: clamp(9rem, 24vw, 20rem);
  line-height: 0.78;
  color: transparent;
  -webkit-text-stroke: 1px var(--hairline);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* corner ticks — 4 corners via layered gradients, one pseudo */
.eng-tickf { position: relative; }
.eng-tickf::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--silk-dim), var(--silk-dim)) 0 0 / 12px 1px,
    linear-gradient(var(--silk-dim), var(--silk-dim)) 0 0 / 1px 12px,
    linear-gradient(var(--silk-dim), var(--silk-dim)) 100% 0 / 12px 1px,
    linear-gradient(var(--silk-dim), var(--silk-dim)) 100% 0 / 1px 12px,
    linear-gradient(var(--silk-dim), var(--silk-dim)) 0 100% / 12px 1px,
    linear-gradient(var(--silk-dim), var(--silk-dim)) 0 100% / 1px 12px,
    linear-gradient(var(--silk-dim), var(--silk-dim)) 100% 100% / 12px 1px,
    linear-gradient(var(--silk-dim), var(--silk-dim)) 100% 100% / 1px 12px;
  background-repeat: no-repeat;
}

/* reveal choreography — armed only when JS mounts (.eng-js) */
.eng-js .rv {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.eng-js .rv.in { opacity: 1; transform: none; }
.eng-js .o-log .rv:nth-child(2) { transition-delay: 80ms; }
.eng-js .o-log .rv:nth-child(3) { transition-delay: 160ms; }

/* ---- DOC ENG-003 — ORIGIN ---- */
#origin .eng-ghost { top: clamp(1rem, 4vw, 3rem); right: clamp(0.5rem, 2vw, 2rem); }

.o-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem 1.5rem;
  align-items: start;
}
.o-head { grid-column: 1 / 5; grid-row: 1; }

.o-meta {
  margin-top: 1.75rem;
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--hairline);
}
.o-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--hairline);
}
.o-meta dt { color: var(--silk-dim); margin: 0; text-transform: uppercase; }
.o-meta dd { color: var(--silk); margin: 0; text-align: right; }

/* Exhibit A — the original recording, played, never scrubbed here */
.o-scrub {
  grid-column: 5 / 13;
  grid-row: 1 / 3;
  margin: 0;
  position: relative;
  z-index: 1;
}
.o-scrub video,
.o-scrub .o-still {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--raised);
}
.o-hud {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  display: flex;
  gap: 1.1rem;
  padding: 0.45rem 0.7rem;
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--silk);
  background: rgba(10, 9, 8, 0.62);
  border: 1px solid var(--hairline);
}
.o-hud .hud-phase { color: var(--orange-hi); }
.o-run {
  position: absolute;
  bottom: 0.9rem;
  left: 0.9rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 1.1rem;
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silk);
  background: var(--void);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.o-run:hover { border-color: var(--orange); color: var(--orange-hi); }
.o-run:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 2px; }
.o-caption {
  margin: 0.75rem 0 0;
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--silk-dim);
}

/* incident log — raised cards layered one column over the footage edge */
.o-log {
  grid-column: 1 / 6;
  grid-row: 2;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}
.o-log li {
  background: var(--raised);
  border: 1px solid var(--hairline);
  padding: 1rem 1.25rem;
  position: relative;
}
.o-log li + li { margin-top: 0.75rem; }
.o-log .log-ix {
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--orange-hi);
  letter-spacing: 0.08em;
}
.o-log .log-ts {
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--silk-dim);
  margin-left: 0.9rem;
}
.o-log p {
  margin: 0.5rem 0 0;
  font-family: var(--body, system-ui), system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--silk);
}

.o-clip {
  grid-column: 1 / 6;
  grid-row: 3;
  margin: 0;
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--silk-dim);
}
.o-clip a {
  color: var(--silk);
  text-decoration: underline;
  text-decoration-color: var(--silk-dim);
  text-underline-offset: 4px;
  padding: 0.5rem 0;
  display: inline-block;
}
.o-clip a:hover { color: var(--orange-hi); text-decoration-color: var(--orange); }
.o-clip a:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 2px; }

/* silk strand — physical connector between ENG-003 and ENG-004 */
.eng-strand {
  height: clamp(4rem, 10vh, 8rem);
  width: 24px;
  margin: 0 auto;
  background: url("img/strand.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.eng-strand-band { background: var(--panel); }

/* ---- DOC ENG-004 — LORE / DOCUMENTATION ---- */
/* one legible, directionally-masked texture pass */
#lore::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/tex-web.webp") right top / 900px auto no-repeat;
  opacity: 0.08;
  -webkit-mask-image: radial-gradient(110% 80% at 85% 0%, #000 25%, transparent 72%);
  mask-image: radial-gradient(110% 80% at 85% 0%, #000 25%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.lore-head { max-width: 52ch; }

.dossier {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6rem;
  row-gap: clamp(3rem, 6vw, 5.5rem);
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: 1rem 0 3rem;
  list-style: none;
}
/* the thread — 2px vertical rule the entries hang from */
.dossier::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--hairline);
  transform-origin: top;
}
.dossier-entry { position: relative; z-index: 1; }
.dossier-entry:nth-child(odd) { grid-column: 1; text-align: left; }
.dossier-entry:nth-child(even) { grid-column: 2; }
/* anchor node where each entry meets the thread — orange, never cyan;
   scroll position is not live data */
.dossier-entry::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.dossier-entry:nth-child(odd)::before { right: calc(-3rem - 3px); }
.dossier-entry:nth-child(even)::before { left: calc(-3rem - 4px); }

.dossier-entry .eng-ghost {
  position: absolute;
  top: -2.5rem;
  font-size: clamp(6rem, 12vw, 10rem);
  z-index: 0;
}
.dossier-entry:nth-child(odd) .eng-ghost { left: -0.5rem; }
.dossier-entry:nth-child(even) .eng-ghost { right: -0.5rem; }

.dossier-entry > * { position: relative; z-index: 1; }
.d-ix {
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--orange-hi);
  margin: 0 0 0.5rem;
}
.dossier-entry h3 {
  font-family: var(--display), sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
  color: var(--silk);
}
.dossier-entry figure { margin: 0 0 1rem; }
.dossier-entry figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--raised);
}
.d-line {
  font-family: var(--serif), serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--silk);
  margin: 0;
  max-width: 42ch;
}
.lore-mini { display: none; }

/* the specimen, seated at the section edge */
.lore-seat {
  position: absolute;
  right: max(-2vw, -40px);
  bottom: -1.5rem;
  width: clamp(220px, 26vw, 420px);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.lore-seat img { display: block; width: 100%; height: auto; }

/* scroll-driven passes — progressive enhancement only;
   default state is the finished drawing */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dossier::before {
      animation: eng-thread-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 70%;
    }
    .lore-seat img {
      animation: eng-seat-drift linear both;
      animation-timeline: view();
    }
  }
}
@keyframes eng-thread-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes eng-seat-drift { from { transform: translateY(24px); } to { transform: translateY(-24px); } }

@media (max-width: 719px) {
  .o-grid { display: block; }
  .o-head, .o-scrub, .o-log, .o-clip { margin: 0 0 1.75rem; }
  .o-hud { gap: 0.75rem; }
  .o-hud .hud-t { display: none; } /* frame counter only, per spec */
  #origin .eng-ghost { font-size: 7rem; top: 0.5rem; right: 0.25rem; }

  .dossier { grid-template-columns: 1fr; column-gap: 0; padding-left: 2rem; }
  .dossier::before { left: 8px; margin-left: 0; }
  .dossier-entry:nth-child(odd),
  .dossier-entry:nth-child(even) { grid-column: 1; }
  .dossier-entry:nth-child(odd)::before,
  .dossier-entry:nth-child(even)::before { left: calc(-2rem + 5px); right: auto; }
  .dossier-entry:nth-child(odd) .eng-ghost,
  .dossier-entry:nth-child(even) .eng-ghost { left: auto; right: 0; font-size: 5.5rem; }

  .lore-seat { display: none; }
  .lore-mini {
    display: block;
    width: 96px;
    height: auto;
    margin-top: 1rem;
  }
}

/* ============================================================
   03 · SCROLL SCENES — scoped under .eng-scenes
   ============================================================ */
.eng-scenes{
  background:var(--void,#0A0908);
  color:var(--silk,#F2EDE4);
}
.eng-scenes *,.eng-scenes *::before,.eng-scenes *::after{box-sizing:border-box}
.eng-scenes figure{margin:0}
.eng-scenes ol{list-style:none;margin:0;padding:0}
.eng-scenes h2,.eng-scenes h3,.eng-scenes p{margin:0}

/* base (no-JS / static): plain stacked document, no pinning */
.eng-scenes .scn{position:relative;border-top:1px solid var(--hairline,#2A2724)}
.eng-scenes .scn-pin{
  display:grid;grid-template-columns:1fr;gap:32px;
  max-width:1200px;margin:0 auto;
  padding:clamp(48px,8vw,96px) clamp(16px,4vw,48px);
}
.eng-scenes .scn-media{position:relative;background:var(--raised,#1C1A18);
  border:1px solid var(--hairline,#2A2724);overflow:hidden}
.eng-scenes .scn-media--wide{aspect-ratio:16/9}
.eng-scenes .scn-media--tall{aspect-ratio:9/16;max-height:80svh;justify-self:center;width:auto}
.eng-scenes .scn-media--full{aspect-ratio:16/9}
.eng-scenes .scn-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.eng-scenes .scn-still{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eng-scenes .scn-cap{
  position:absolute;left:0;right:0;bottom:0;
  font-family:var(--mono,"JBMono",ui-monospace,monospace);
  font-size:12px;letter-spacing:.04em;color:var(--silk,#F2EDE4);
  padding:24px 14px 10px;
  background:linear-gradient(to top,rgba(10,9,8,.88),rgba(10,9,8,0));
}
.eng-scenes .scn-hud{
  position:absolute;top:12px;left:12px;display:none;
  font-family:var(--mono,"JBMono",ui-monospace,monospace);
  font-size:13px;letter-spacing:.05em;
  background:rgba(10,9,8,.82);border:1px solid var(--hairline,#2A2724);
  padding:6px 10px;
}
.eng-scenes .scn-hud-label{color:var(--silk-dim,#8A837C);text-transform:uppercase;font-size:11px;margin-right:8px}
.eng-scenes .scn-hud-val{color:var(--orange-hi,#FF8A4C);font-variant-numeric:tabular-nums}

/* document panel */
.eng-scenes .scn-head{margin-bottom:28px}
.eng-scenes .scn-kicker{
  font-family:var(--mono,"JBMono",ui-monospace,monospace);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-hi,#FF8A4C);margin:0 0 12px;
}
.eng-scenes .scn-title{
  font-family:var(--display,"Bricolage",system-ui,sans-serif);
  font-weight:800;font-size:clamp(28px,4.4vw,52px);line-height:1.04;
  letter-spacing:-.01em;color:var(--silk,#F2EDE4);
}
.eng-scenes .scn-lede{
  font-family:var(--serif,"InstrSerif",Georgia,serif);font-style:italic;
  font-size:clamp(16px,1.6vw,19px);line-height:1.5;
  color:var(--silk-dim,#8A837C);margin-top:12px;max-width:44ch;
}
.eng-scenes .scn-log{display:grid;gap:0;border-top:1px solid var(--hairline,#2A2724)}
.eng-scenes .scn-entry{
  padding:16px 0 16px 16px;border-bottom:1px solid var(--hairline,#2A2724);
  border-left:2px solid var(--hairline,#2A2724);
}
.eng-scenes .scn-idx{
  font-family:var(--mono,"JBMono",ui-monospace,monospace);
  font-size:12px;letter-spacing:.1em;color:var(--silk-dim,#8A837C);
  display:block;margin-bottom:4px;
}
.eng-scenes .scn-ttl{
  font-family:var(--display,"Bricolage",system-ui,sans-serif);
  font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:uppercase;
  color:var(--silk,#F2EDE4);margin-bottom:6px;
}
.eng-scenes .scn-entry p,.eng-scenes .scn-co p{
  font-size:15px;line-height:1.55;color:var(--silk,#F2EDE4);max-width:52ch;
}

/* scrub mode (JS adds .is-scrub; per-scene .scn-fail opts back out) */
.eng-scenes.is-scrub .scn:not(.scn-fail){height:var(--scn-h,300svh)}
.eng-scenes.is-scrub .scn:not(.scn-fail) .scn-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  align-content:center;padding-top:0;padding-bottom:0;
}
.eng-scenes.is-scrub .scn:not(.scn-fail) .scn-hud{display:block}
.eng-scenes .scn--weave{--scn-h:300svh}
.eng-scenes .scn--descend{--scn-h:240svh}
.eng-scenes .scn--orbit{--scn-h:480svh}
@media (max-width:720px){
  .eng-scenes .scn--weave{--scn-h:240svh}
  .eng-scenes .scn--descend{--scn-h:220svh}
  .eng-scenes .scn--orbit{--scn-h:250svh}
}

/* entry state under scrub: unreached = dimmed but readable (never opacity) */
.eng-scenes.is-scrub .scn:not(.scn-fail) .scn-entry .scn-ttl,
.eng-scenes.is-scrub .scn:not(.scn-fail) .scn-entry p{color:var(--silk-dim,#8A837C)}
.eng-scenes.is-scrub .scn:not(.scn-fail) .scn-entry.is-set{border-left-color:var(--orange,#E8622C)}
.eng-scenes.is-scrub .scn:not(.scn-fail) .scn-entry.is-set .scn-ttl,
.eng-scenes.is-scrub .scn:not(.scn-fail) .scn-entry.is-set p{color:var(--silk,#F2EDE4)}
.eng-scenes.is-scrub .scn:not(.scn-fail) .scn-entry.is-set .scn-idx{color:var(--orange-hi,#FF8A4C)}
.eng-scenes .scn-entry,.eng-scenes .scn-co{transition:border-color .3s ease}
.eng-scenes .scn-ttl,.eng-scenes .scn-entry p,.eng-scenes .scn-co p{transition:color .3s ease}

/* desktop layouts */
@media (min-width:900px){
  .eng-scenes .scn--weave .scn-pin{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:48px}
  .eng-scenes .scn--descend .scn-pin{grid-template-columns:minmax(0,6fr) minmax(0,4fr);align-items:center;gap:48px}
  .eng-scenes .scn--descend .scn-media--tall{height:min(86svh,100%);aspect-ratio:9/16;justify-self:end}
}

/* orbit scene: full-bleed under scrub */
.eng-scenes .scn--orbit .scn-scrim{display:none}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-pin{max-width:none;padding:0;display:block}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-media--full{
  position:absolute;inset:0;aspect-ratio:auto;border:0}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-scrim{
  display:block;position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,9,8,.92) 0%,rgba(10,9,8,.35) 34%,rgba(10,9,8,0) 55%),
    linear-gradient(to bottom,rgba(10,9,8,.72) 0%,rgba(10,9,8,0) 26%);
}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .orbit-frame{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(16px,3vw,40px);
}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .orbit-head{margin-bottom:0;max-width:520px}
.eng-scenes .orbit-bearing{display:none}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .orbit-bearing{
  display:block;position:absolute;top:clamp(16px,3vw,40px);right:clamp(16px,3vw,40px);
  font-family:var(--mono,"JBMono",ui-monospace,monospace);
  background:rgba(10,9,8,.82);border:1px solid var(--hairline,#2A2724);
  padding:8px 12px;text-align:right;
}
.eng-scenes .orbit-deg{display:block;font-size:22px;line-height:1.1}
.eng-scenes .scn-callouts{display:grid;gap:12px}
.eng-scenes .scn-co{padding:12px 0 12px 14px;border-left:2px solid var(--hairline,#2A2724)}
.eng-scenes .co-deg{
  font-family:var(--mono,"JBMono",ui-monospace,monospace);
  font-size:12px;letter-spacing:.1em;color:var(--silk-dim,#8A837C);
  display:block;margin-bottom:4px;font-variant-numeric:tabular-nums;
}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-callouts{
  align-self:flex-end;width:min(420px,100%);margin-left:auto;gap:6px}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-co{
  background:rgba(10,9,8,.66);padding:10px 12px 10px 14px}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-co .scn-ttl,
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-co p{color:var(--silk-dim,#8A837C)}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-co.is-active{border-left-color:var(--orange,#E8622C)}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-co.is-active .scn-ttl,
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-co.is-active p{color:var(--silk,#F2EDE4)}
.eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-co.is-active .co-deg{color:var(--orange-hi,#FF8A4C)}
@media (max-width:899px){
  .eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .orbit-head .scn-lede{display:none}
  .eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-title{font-size:24px}
  .eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-callouts{width:100%}
  .eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-co{display:none}
  .eng-scenes.is-scrub .scn--orbit:not(.scn-fail) .scn-co.is-active{display:block}
}

/* failure state: video dead → still image + full static document */
.eng-scenes .scn.scn-fail video{display:none}
.eng-scenes .scn.scn-fail .scn-still{display:block}
.eng-scenes .scn.scn-fail .scn-hud{display:none}

/* ============================================================
   04 · SPEC SHEET + MEASURED VALUES
   ============================================================ */

/* plate frame (shared by both sheets) */
.eng-plate{
  background:var(--panel);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  color:var(--silk);
  padding:0 16px 56px;
  position:relative;
}
.eng-plate *,
.eng-plate *::before,
.eng-plate *::after{ box-sizing:border-box; }

.eng-plate .plate-inner{
  max-width:1240px;
  margin:0 auto;
  border-left:1px solid var(--hairline);
  border-right:1px solid var(--hairline);
}

/* title block — engineering drawing header, 3 cells */
.eng-plate .plate-head{
  display:grid;
  grid-template-columns:1fr;
  border-bottom:1px solid var(--hairline);
}
.eng-plate .plate-head > *{
  padding:12px 16px;
  border-bottom:1px solid var(--hairline);
}
.eng-plate .plate-head > *:last-child{ border-bottom:0; }
.eng-plate .head-doc,
.eng-plate .head-rev{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--silk-dim);
}
.eng-plate .head-title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(28px,6vw,44px);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--silk);
}
.eng-plate .head-title .head-sub{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:15px;
  letter-spacing:0;
  text-transform:none;
  color:var(--silk-dim);
  margin-top:6px;
}
@media (min-width:721px){
  .eng-plate .plate-head{
    grid-template-columns:180px 1fr 220px;
    align-items:stretch;
  }
  .eng-plate .plate-head > *{
    border-bottom:0;
    border-right:1px solid var(--hairline);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .eng-plate .plate-head > *:last-child{ border-right:0; }
  .eng-plate .head-rev{ text-align:right; align-items:flex-end; }
}

/* footer notes strip */
.eng-plate .plate-notes{
  border-top:1px solid var(--hairline);
  padding:14px 16px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.06em;
  color:var(--silk-dim);
  text-transform:uppercase;
}

/* ---- SHEET 1 — SPEC SHEET ---- */
#spec .plate-body{
  display:grid;
  grid-template-columns:1fr;
}

/* drawing figure */
#spec .plate-fig{
  margin:0;
  position:relative;
  aspect-ratio:1200/800;
  background:var(--raised);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
}
#spec .plate-fig img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
#spec .plate-fig .fig-cutout{
  opacity:.28;
  mix-blend-mode:screen;
  pointer-events:none;
}
#spec .plate-fig.img-failed img{ visibility:hidden; }
#spec .plate-fig.img-failed::after{
  content:"drawing unavailable. the spider is unaffected.";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:13px;
  color:var(--silk-dim);
}
/* corner ticks */
#spec .plate-fig::before{
  content:"";
  position:absolute; inset:10px;
  pointer-events:none;
  background:
    linear-gradient(var(--hairline),var(--hairline)) top left / 14px 1px,
    linear-gradient(var(--hairline),var(--hairline)) top left / 1px 14px,
    linear-gradient(var(--hairline),var(--hairline)) top right / 14px 1px,
    linear-gradient(var(--hairline),var(--hairline)) top right / 1px 14px,
    linear-gradient(var(--hairline),var(--hairline)) bottom left / 14px 1px,
    linear-gradient(var(--hairline),var(--hairline)) bottom left / 1px 14px,
    linear-gradient(var(--hairline),var(--hairline)) bottom right / 14px 1px,
    linear-gradient(var(--hairline),var(--hairline)) bottom right / 1px 14px;
  background-repeat:no-repeat;
  z-index:3;
}

/* leader-line SVG overlay */
#spec .leaders{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:2;
  pointer-events:none;
}
#spec .leader path{
  fill:none;
  stroke:var(--silk-dim);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
#spec .leader circle.anchor{
  fill:var(--orange-hi);
  opacity:0;
}
#spec .leader circle.node{
  fill:var(--panel);
  stroke:var(--silk-dim);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  opacity:0;
}
#spec .leader text{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.05em;
  fill:var(--silk);
  opacity:0;
}
/* drawn state — triggered by IntersectionObserver */
#spec .plate-fig.is-drawn .leader path{
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);
  transition-delay:var(--dl,0s);
  stroke-dashoffset:0;
}
#spec .plate-fig.is-drawn .leader circle,
#spec .plate-fig.is-drawn .leader text{
  transition:opacity .3s linear;
  transition-delay:calc(var(--dl,0s) + .55s);
  opacity:1;
}
/* callout↔leader highlight (hover on pointer, tap-toggled on touch) */
#spec .leader.is-hot path{ stroke:var(--orange-hi); stroke-width:1.5; }
#spec .leader.is-hot circle.node{ stroke:var(--orange-hi); }
#spec .leader.is-hot text{ fill:var(--orange-hi); }

/* callout cards */
#spec .callouts{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr;
}
#spec .callout{
  padding:18px 16px 20px;
  border-bottom:1px solid var(--hairline);
  cursor:default;
  transition:background .15s linear;
}
#spec .callout:last-child{ border-bottom:0; }
#spec .callout.is-hot{ background:var(--raised); }
#spec .callout b{
  display:block;
  font-family:var(--mono);
  font-weight:400;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange-hi);
  margin-bottom:8px;
}
#spec .callout h3{
  margin:0 0 6px;
  font-family:var(--display);
  font-weight:800;
  font-size:19px;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--silk);
}
#spec .callout p{
  margin:0;
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.65;
  color:var(--silk-dim);
}
/* reveal on scroll */
#spec .callout{ opacity:0; transform:translateY(12px); }
#spec .callouts.in .callout{
  opacity:1; transform:none;
  transition:opacity .45s ease, transform .45s ease;
  transition-delay:calc(var(--i) * 70ms);
}

@media (min-width:721px){
  #spec .plate-body{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  }
  #spec .plate-fig{
    border-bottom:0;
    border-right:1px solid var(--hairline);
    aspect-ratio:auto;
    min-height:640px;
  }
  #spec .callouts{ grid-template-columns:1fr; }
}
@media (min-width:1024px){
  #spec .callout{ padding:22px 24px; }
}

/* ---- SHEET 2 — MEASURED VALUES ---- */
#stats .stat-grid{
  display:grid;
  grid-template-columns:1fr;
}
#stats .stat{
  position:relative;
  padding:26px 16px 22px;
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;      /* labels register left; a wrapped label may never
                                  drop below its own value row */
  justify-content:flex-end;
  gap:6px;
}
#stats .stat:last-child{ border-bottom:0; }
#stats .stat > *{ width:100%; }
@media (min-width:721px){
  #stats .stat-grid{ grid-template-columns:1fr 1fr; }
  #stats .stat{ border-bottom:1px solid var(--hairline); }
  #stats .stat:nth-child(odd){ border-right:1px solid var(--hairline); }
  #stats .stat:nth-child(3),
  #stats .stat:nth-child(4){ border-bottom:0; }
}
@media (min-width:1024px){
  #stats .stat-grid{ grid-template-columns:repeat(4,1fr); }
  #stats .stat{ border-bottom:0; border-right:1px solid var(--hairline); }
  #stats .stat:last-child{ border-right:0; }
  #stats .stat{ min-height:190px; padding:30px 22px 26px; }
}

/* ghost numerals — sheet indices, never data */
#stats .ghost{
  position:absolute;
  top:-14px; right:6px;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(90px,14vw,150px);
  line-height:1;
  color:var(--raised);
  user-select:none;
  pointer-events:none;
  width:auto;
}

#stats .stat-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--silk);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#stats .stat-value{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(24px,5vw,32px);
  line-height:1.1;
  min-height:1.1em;
  color:var(--silk-dim);            /* pending default */
  position:relative;
  z-index:1;
}
#stats .stat-sub{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--silk-dim);
}
#stats .stat-src{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--silk-dim);
}

/* state skins — one attribute, five skins */
#stats[data-state="live"]  .stat-value{ color:var(--dew); }     /* cyan = live, only here */
#stats[data-state="stale"] .stat-value{ color:var(--silk); }    /* held, cyan removed */
#stats[data-state="offline"] .stat-value{
  color:var(--silk-dim);
  text-decoration:line-through;
  text-decoration-color:var(--hairline);
  text-decoration-thickness:1px;
}
#stats[data-state="loading"] .stat-value .odo{
  background:linear-gradient(90deg,var(--silk-dim) 30%,var(--silk) 50%,var(--silk-dim) 70%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:eng-shimmer 1.2s linear infinite;
}
@keyframes eng-shimmer{
  from{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}

/* odometer digits */
#stats .odo{ display:inline-block; white-space:nowrap; }
#stats .odo .ch{
  display:inline-block;
  height:1.1em;
  overflow:hidden;
  vertical-align:bottom;
}
#stats .odo .ch .col{
  display:block;
  transition:transform .38s cubic-bezier(.2,.9,.2,1);
}
#stats .odo .ch .col span{
  display:block;
  height:1.1em;
  line-height:1.1;
}
#stats .odo sub{
  font-size:.55em;
  vertical-align:baseline;
  position:relative; top:.25em;
}
#stats .odo.swap{ animation:eng-swap .3s ease; }
@keyframes eng-swap{ from{ opacity:.2; } to{ opacity:1; } }

/* state note — plain typeset line, not an instrument */
#stats .plate-notes .tele-note{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
  color:var(--silk-dim);
  display:block;
  margin-top:6px;
}
#stats[data-state="offline"] .plate-notes .tele-note{ color:var(--down); }

/* utility */
.eng-vh{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ============================================================
   05 · DOC ENG-006/007 — GALLERY + MEME FORGE
   (duplicate local color tokens removed; :root is canonical.
    the --gf-* font aliases remain — they are referenced below.)
   ============================================================ */
#gallery-forge{
  --gf-display:var(--display, "Bricolage", system-ui, sans-serif);
  --gf-mono:var(--mono, "JBMono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  --gf-serif:var(--serif, "InstrSerif", "Instrument Serif", Georgia, serif);

  background:var(--void);
  color:var(--silk);
  font-family:var(--gf-display);
  padding:clamp(3rem,8vw,7rem) clamp(1rem,5vw,4rem);
  display:grid;
  gap:clamp(4rem,10vw,8rem);
}
#gallery-forge *,
#gallery-forge *::before,
#gallery-forge *::after{ box-sizing:border-box; margin:0; }

#gallery-forge :focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

/* document plate chrome (shared) */
#gallery-forge .gf-doc{
  max-width:76rem;
  margin-inline:auto;
  width:100%;
  border:1px solid var(--hairline);
  background:var(--panel);
  position:relative;
}
#gallery-forge .gf-doc::before,
#gallery-forge .gf-doc::after{
  content:"";
  position:absolute;
  width:12px; height:12px;
  border:0 solid var(--orange);
  pointer-events:none;
}
#gallery-forge .gf-doc::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
#gallery-forge .gf-doc::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

#gallery-forge .gf-plate-head{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  align-items:baseline;
  justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--hairline);
  font-family:var(--gf-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--silk-dim);
  text-transform:uppercase;
}
#gallery-forge .gf-plate-head b{
  color:var(--orange);
  font-weight:400;
}
#gallery-forge .gf-title-row{
  padding:2rem 1.25rem .5rem;
}
#gallery-forge h2{
  font-family:var(--gf-display);
  font-weight:800;
  font-size:clamp(1.8rem,4.5vw,3rem);
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--silk);
}
#gallery-forge .gf-lede{
  font-family:var(--gf-serif);
  font-style:italic;
  font-size:clamp(1rem,2vw,1.2rem);
  color:var(--silk-dim);
  padding:.75rem 1.25rem 2rem;
  max-width:44rem;
}
#gallery-forge .gf-plate-notes{
  border-top:1px solid var(--hairline);
  padding:.9rem 1.25rem;
  font-family:var(--gf-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--silk-dim);
  text-transform:uppercase;
}

/* DOC ENG-006 · evidence gallery */
#gallery-forge .gf-hint{
  font-family:var(--gf-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--silk-dim);
  padding:0 1.25rem 1.5rem;
}
#gallery-forge .gf-hint span{ display:none; }
@media (hover:hover) and (pointer:fine){
  #gallery-forge .gf-hint .gf-hint-pointer{ display:inline; }
}
@media (hover:none), (pointer:coarse){
  #gallery-forge .gf-hint .gf-hint-touch{ display:inline; }
}

#gallery-forge .gf-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--hairline);
  border-top:1px solid var(--hairline);
}
@media (min-width:720px){
  #gallery-forge .gf-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1080px){
  #gallery-forge .gf-grid{ grid-template-columns:repeat(3,1fr); }
}

#gallery-forge .gf-exhibit-fig{
  background:var(--panel);
  display:flex;
  flex-direction:column;
}
#gallery-forge .gf-exhibit{
  /* the interactive frame: real button for touch + keyboard toggle */
  appearance:none;
  border:0;
  padding:0;
  background:var(--raised);
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  cursor:crosshair;
  touch-action:manipulation;
}
#gallery-forge .gf-exhibit img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* base layer: the dimmed archival print (only when JS is running —
   without JS the gallery stays full-exposure and fully readable) */
#gallery-forge.js .gf-base{
  filter:grayscale(.85) brightness(.6) contrast(1.05);
  transition:filter .3s ease;
}
/* full-exposure layer, revealed through the inspection circle */
#gallery-forge .gf-full{
  clip-path:circle(0px at 50% 50%);
  pointer-events:none;
}
#gallery-forge:not(.js) .gf-full{ display:none; }
#gallery-forge .gf-exhibit[aria-pressed="true"] .gf-full{
  clip-path:none !important;
  transition:clip-path .25s ease;
}
#gallery-forge .gf-exhibit[aria-pressed="true"] .gf-base{
  filter:none;
}
/* inspection ring — pointer devices only, purely decorative */
#gallery-forge .gf-ring{
  position:absolute;
  top:0; left:0;
  width:220px; height:220px;
  border:1px solid var(--silk);
  border-radius:50%;
  pointer-events:none;
  display:none;
  will-change:transform;
}
#gallery-forge .gf-ring::before,
#gallery-forge .gf-ring::after{
  content:"";
  position:absolute;
  background:var(--orange);
}
#gallery-forge .gf-ring::before{ /* crosshair v */
  left:50%; top:-7px; width:1px; height:14px; transform:translateX(-.5px);
  box-shadow:0 213px 0 0 var(--orange);
}
#gallery-forge .gf-ring::after{ /* crosshair h */
  top:50%; left:-7px; height:1px; width:14px; transform:translateY(-.5px);
  box-shadow:213px 0 0 0 var(--orange);
}
@media (hover:hover) and (pointer:fine){
  #gallery-forge .gf-exhibit.is-lens:not([aria-pressed="true"]) .gf-ring{ display:block; }
}
#gallery-forge .gf-exhibit[data-missing="true"]::after{
  content:"exhibit file not found in archive.";
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  font-family:var(--gf-mono);
  font-size:.72rem;
  color:var(--silk-dim);
  background:var(--raised);
}
#gallery-forge figcaption{
  padding:.9rem 1rem 1.1rem;
  border-top:1px solid var(--hairline);
  display:grid;
  gap:.35rem;
}
#gallery-forge .gf-idx{
  font-family:var(--gf-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--orange);
  text-transform:uppercase;
}
#gallery-forge .gf-cap{
  font-size:.86rem;
  line-height:1.45;
  color:var(--silk);
}

/* DOC ENG-007 · reproduction (meme forge) */
#gallery-forge .gf-forge-body{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--hairline);
  border-top:1px solid var(--hairline);
}
@media (min-width:900px){
  #gallery-forge .gf-forge-body{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
}
#gallery-forge .gf-controls{
  background:var(--panel);
  padding:1.5rem 1.25rem 2rem;
  display:grid;
  gap:1.75rem;
  align-content:start;
}
#gallery-forge .gf-field-label{
  font-family:var(--gf-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--silk-dim);
  display:block;
  margin-bottom:.7rem;
}
#gallery-forge .gf-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
#gallery-forge .gf-thumb{
  appearance:none;
  border:1px solid var(--hairline);
  background:var(--raised);
  padding:0;
  width:64px; height:64px;
  min-width:44px; min-height:44px;
  cursor:pointer;
  overflow:hidden;
  display:block;
}
#gallery-forge .gf-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(.6) brightness(.75);
  transition:filter .2s ease;
}
#gallery-forge .gf-thumb[aria-pressed="true"]{
  border-color:var(--orange);
}
#gallery-forge .gf-thumb[aria-pressed="true"] img{ filter:none; }
#gallery-forge .gf-presets{
  list-style:none;
  padding:0;
  display:grid;
  gap:.4rem;
}
#gallery-forge .gf-presets label{
  display:flex;
  gap:.65rem;
  align-items:baseline;
  padding:.55rem .7rem;
  min-height:44px;
  border:1px solid var(--hairline);
  background:var(--raised);
  font-family:var(--gf-mono);
  font-size:.78rem;
  line-height:1.4;
  color:var(--silk);
  cursor:pointer;
}
#gallery-forge .gf-presets input{ accent-color:var(--orange); flex:none; translate:0 1px; }
#gallery-forge .gf-presets label:has(input:checked){ border-color:var(--orange); }
#gallery-forge textarea.gf-custom{
  width:100%;
  min-height:70px;
  resize:vertical;
  background:var(--raised);
  border:1px solid var(--hairline);
  color:var(--silk);
  font-family:var(--gf-mono);
  font-size:.82rem;
  line-height:1.5;
  padding:.7rem;
}
#gallery-forge textarea.gf-custom::placeholder{ color:var(--silk-dim); }
#gallery-forge .gf-actions{
  display:grid;
  gap:.6rem;
}
#gallery-forge .gf-btn{
  appearance:none;
  border:1px solid var(--hairline);
  min-height:48px;
  padding:.75rem 1.1rem;
  font-family:var(--gf-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:var(--raised);
  color:var(--silk);
}
#gallery-forge .gf-btn-primary{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--void);
  font-weight:700;
}
@media (hover:hover){
  #gallery-forge .gf-btn:hover{ border-color:var(--orange); }
  #gallery-forge .gf-btn-primary:hover{ background:var(--orange-hi); border-color:var(--orange-hi); }
}
#gallery-forge .gf-fineprint{
  font-family:var(--gf-mono);
  font-size:.68rem;
  line-height:1.6;
  color:var(--silk-dim);
}
#gallery-forge .gf-status{
  font-family:var(--gf-mono);
  font-size:.72rem;
  color:var(--silk);
  min-height:1.2em;
}
#gallery-forge .gf-preview{
  background:var(--panel);
  padding:1.5rem 1.25rem 2rem;
  display:grid;
  gap:.8rem;
  align-content:start;
}
#gallery-forge canvas#gf-canvas{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--hairline);
  background:var(--void);
}
#gallery-forge .gf-preview-cap{
  font-family:var(--gf-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--silk-dim);
}
#gallery-forge .gf-noscript{
  padding:1.5rem 1.25rem;
  font-family:var(--gf-mono);
  font-size:.78rem;
  color:var(--silk-dim);
}

/* ============================================================
   06 · VERIFICATION / CERTIFICATION
   (duplicate local tokens removed; :root is canonical.)
   ============================================================ */
#verification {
  background:var(--panel);
  color:var(--silk);
  padding:clamp(48px,8vw,112px) clamp(16px,5vw,72px) 0;
  border-top:1px solid var(--hairline);
  position:relative;
  /* drafting-table ruled ground: visible, directional, no image dependency */
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 47px, rgba(42,39,36,.55) 47px 48px),
    linear-gradient(var(--panel),var(--panel));
}

/* title block */
#verification .cert-titleblock{
  border:1px solid var(--hairline);
  background:var(--void);
  margin-bottom:clamp(32px,4vw,56px);
}
#verification .tb-row{
  display:flex; flex-wrap:wrap;
  border-bottom:1px solid var(--hairline);
  font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  color:var(--silk-dim);
}
#verification .tb-bottom{ border-bottom:0; border-top:1px solid var(--hairline); }
#verification .tb-cell{
  padding:8px 14px; border-right:1px solid var(--hairline); white-space:nowrap;
}
#verification .tb-cell:last-child{ border-right:0; }
#verification .tb-doc{ color:var(--orange); }
#verification .tb-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(28px,5vw,56px); line-height:1.02;
  letter-spacing:-.01em; margin:0; padding:18px 14px 20px;
  color:var(--silk);
}

/* layout */
#verification .cert-layout{
  display:grid; grid-template-columns:minmax(300px,38%) 1fr;
  gap:clamp(20px,3vw,40px); align-items:start;
}

/* inspection plate */
#verification .cert-plate{ position:sticky; top:24px; }
#verification .plate-inner{
  background:var(--raised);
  border:1px solid var(--hairline);
  border-left:3px solid var(--orange);
  padding:clamp(18px,2.5vw,28px);
  display:flex; flex-direction:column; gap:14px;
  position:relative;
}
/* corner ticks */
#verification .plate-inner::before,
#verification .plate-inner::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
}
#verification .plate-inner::before{ top:-1px; right:-1px; border-top:1px solid var(--orange); border-right:1px solid var(--orange); }
#verification .plate-inner::after{ bottom:-1px; right:-1px; border-bottom:1px solid var(--orange); border-right:1px solid var(--orange); }

#verification .plate-kicker{
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  color:var(--silk-dim); margin:0;
}
#verification .ca-pending{
  font-family:var(--mono); font-size:17px; color:var(--silk-dim); margin:0;
}
#verification .ca-checksum{
  font-family:var(--mono); margin:0; font-size:17px; color:var(--silk);
  word-break:break-all;
}
#verification .ca-checksum .ck-end{
  font-size:1.5em; font-weight:700; color:var(--dew); /* live value = cyan, nowhere else */
}
#verification .ca-checksum .ck-mid{ color:var(--silk-dim); padding:0 .2em; }
#verification .ca-checksum-note{
  font-family:var(--mono); font-size:13px; color:var(--silk-dim); margin:0;
}

#verification .ca-actions{ display:flex; flex-wrap:wrap; gap:10px; }
#verification .plate-btn{
  font-family:var(--mono); font-size:14px; letter-spacing:.04em;
  background:var(--void); color:var(--silk);
  border:1px solid var(--hairline); padding:12px 16px;
  min-height:48px; cursor:pointer;
  transition:border-color 150ms, color 150ms;
}
#verification .plate-btn:hover,
#verification .plate-btn:focus-visible{ border-color:var(--orange); color:var(--orange-hi); outline-offset:2px; }
#verification .plate-btn[disabled]{
  cursor:not-allowed; color:var(--silk-dim); border-style:dashed;
}
#verification .plate-btn[disabled]:hover{ border-color:var(--hairline); color:var(--silk-dim); }

#verification .ca-full{
  font-family:var(--mono); font-size:14px; line-height:1.6;
  color:var(--silk); background:var(--void);
  border:1px dashed var(--hairline);
  padding:12px 14px; margin:0;
  white-space:pre-wrap; word-break:break-all;
  user-select:all; -webkit-user-select:all;
}
#verification .ca-confirm{
  font-family:var(--mono); font-size:13px; color:var(--silk);
  margin:0; min-height:1.2em;
}
#verification .plate-warning{
  font-family:var(--serif); font-style:italic;
  font-size:15px; line-height:1.55; color:var(--silk);
  border-left:2px solid var(--ember); padding-left:12px; margin:0;
}
#verification .plate-verify{ display:flex; flex-direction:column; gap:6px; }
#verification .plate-link{
  font-family:var(--mono); font-size:14px; color:var(--silk);
  text-decoration:underline; text-underline-offset:3px;
  width:fit-content; min-height:44px; display:inline-flex; align-items:center;
}
#verification .plate-link:hover{ color:var(--orange-hi); }
#verification .url-literal{
  font-family:var(--mono); font-size:13px; color:var(--silk-dim);
  word-break:break-all;
}
#verification .plate-verify-note,
#verification .plate-refresh{
  font-family:var(--mono); font-size:13px; line-height:1.5;
  color:var(--silk-dim); margin:0;
}
#verification .plate-refresh{ border-top:1px solid var(--hairline); padding-top:12px; }

/* cards */
#verification .cert-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.6vw,20px);
}
#verification .cert-card{
  background:var(--raised);
  border:1px solid var(--hairline);
  padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:10px;
  position:relative;
  transition:border-color 150ms, background-color 150ms,
             transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s ease;
}
#verification .cert-card:hover{ border-color:rgba(232,98,44,.4); }
@media (hover:hover){
  #verification .cert-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(0,0,0,.35);
  }
}
/* corner tick, drafting mark */
#verification .cert-card::after{
  content:""; position:absolute; top:-1px; left:-1px; width:8px; height:8px;
  border-top:1px solid var(--silk-dim); border-left:1px solid var(--silk-dim);
}
#verification .card-head{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em;
}
#verification .card-idx{ color:var(--orange); }
#verification .card-label{ color:var(--silk-dim); flex:1; }
#verification .card-status{
  display:inline-flex; align-items:center; gap:6px; color:var(--silk-dim);
  white-space:nowrap;
}
#verification .card-status .dot{
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--orange); background:transparent;
  flex:none;
}
#verification .card-value{
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,2.6vw,32px); line-height:1.05;
  margin:0; color:var(--silk); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
#verification .card-note{
  font-family:var(--serif); font-style:italic;
  font-size:15px; line-height:1.5; color:var(--silk); margin:0;
}
#verification .card-sub{
  font-family:var(--mono); font-size:13px; color:var(--silk-dim); margin:0;
}
#verification .card-verify{
  font-family:var(--mono); font-size:13px; color:var(--silk-dim);
  text-decoration:underline; text-underline-offset:3px;
  word-break:break-all; margin-top:auto;
  min-height:44px; display:inline-flex; align-items:center;
}
#verification .card-verify:hover{ color:var(--orange-hi); }

/* status skins: never color alone — text label always accompanies */
#verification .cert-card[data-status="pending"]{ border-style:dashed; }
#verification .cert-card[data-status="pending"] .card-value{ color:var(--silk-dim); }
#verification .cert-card[data-status="recorded"]{ border-style:solid; }
#verification .cert-card[data-status="recorded"] .card-status .dot{
  background:var(--dew); border-color:var(--dew); /* on-chain, live-verified only */
}
#verification .cert-card[data-status="recorded"] .card-status{ color:var(--silk); }

/* reveal choreography: a document being drafted, not a cockpit */
#verification .cert-card{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  #verification.cert-armed .cert-card{
    opacity:0; transform:translateY(12px);
    transition:opacity 450ms ease, transform 450ms ease, border-color 150ms, background-color 150ms;
  }
  #verification.cert-armed .cert-card.in{ opacity:1; transform:translateY(0); }
}

/* strand bridge into #buy */
#verification .strand-bridge{
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(32px,5vw,64px) 0 0; gap:12px;
}
#verification .strand-line{
  display:block; width:2px; height:clamp(64px,10vw,120px);
  background:
    linear-gradient(to bottom, var(--hairline), var(--silk-dim));
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000);
          mask-image:linear-gradient(to bottom, transparent, #000 12%, #000);
  transition:background-color 300ms;
}
#verification .strand-bridge.flash .strand-line{
  background:var(--orange-hi);
}
#verification .strand-label{
  font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  color:var(--silk-dim); text-decoration:none;
  padding:10px 0 28px; min-height:44px; display:inline-flex; align-items:center;
}
#verification .strand-label:hover,
#verification .strand-label:focus-visible{ color:var(--orange-hi); }

@media (max-width:719px){
  #verification{ padding-left:16px; padding-right:16px; }
  #verification .cert-layout{ grid-template-columns:1fr; }
  #verification .cert-plate{ position:static; }
  #verification .cert-grid{ grid-template-columns:1fr; }
  #verification .ca-full{ font-size:13px; }
  #verification .tb-cell{ border-right:0; width:100%; border-bottom:1px solid var(--hairline); }
  #verification .tb-row .tb-cell:last-child{ border-bottom:0; }
  #verification .tb-bottom .tb-cell:last-child{ border-bottom:0; }
}

/* ============================================================
   07 · ACQUISITION PANEL
   ============================================================ */
#buy{
  background:var(--panel);
  color:var(--silk);
  padding:clamp(3.5rem,8vw,7rem) clamp(1rem,5vw,4.5rem);
  border-top:1px solid var(--hairline);
  font-family:var(--body,"Bricolage",system-ui,sans-serif);
  line-height:1.55;
}
#buy .mono{font-family:var(--mono,"JBMono",ui-monospace,"SF Mono",Menlo,monospace);}
#buy .serif{font-family:var(--serif,"InstrSerif",Georgia,serif);font-style:italic;}

/* title block: drawing plate */
#buy .buy-plate-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:stretch;
  border:1px solid var(--hairline);
  margin:0 auto 3rem;
  max-width:72rem;
}
#buy .plate-cell{
  padding:.85rem 1.1rem;
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--silk-dim);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#buy .plate-cell + .plate-cell{border-left:1px solid var(--hairline);}
#buy .plate-rev{text-align:right;line-height:1.7;}
#buy .buy-kicker{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 .3rem;
}
#buy .buy-h2{
  font-family:var(--display,"Bricolage",system-ui,sans-serif);
  font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  letter-spacing:-.01em;
  color:var(--silk);
  margin:0;
  line-height:1.05;
}

/* grid */
#buy .buy-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  max-width:72rem;
  margin:0 auto;
  align-items:start;
}
#buy .buy-primary{
  background:var(--raised);
  border:1px solid var(--hairline);
  padding:clamp(1.5rem,3.5vw,2.75rem);
  position:relative;
}
/* corner registration ticks */
#buy .buy-primary::before,
#buy .buy-primary::after{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border-color:var(--silk-dim);
  border-style:solid;
  opacity:.6;
}
#buy .buy-primary::before{top:-1px;left:-1px;border-width:1px 0 0 1px;}
#buy .buy-primary::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}

/* state switching */
#buy[data-state="pending"] .live-only{display:none !important;}
#buy[data-state="live"]    .pend-only{display:none !important;}

/* CA block */
#buy .ca-label{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--silk-dim);
  margin:0 0 .8rem;
}
#buy .ca-none{
  display:inline-block;
  font-size:1.05rem;
  color:var(--silk-dim);          /* full opacity; pending is text, not fade */
  border:1px dashed var(--hairline);
  padding:.7rem 1.1rem;
  letter-spacing:.04em;
}
#buy .ca-subline{
  margin:.8rem 0 0;
  font-size:.85rem;
  color:var(--silk-dim);
  max-width:34rem;
}
#buy .ca-chip{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  background:var(--void);
  border:1px solid var(--hairline);
  color:var(--dew);               /* cyan = this value is live. only here. */
  font-size:1.05rem;
  letter-spacing:.04em;
  padding:.7rem 1.1rem;
  min-height:48px;
  cursor:pointer;
  transition:border-color .15s ease;
}
#buy .ca-chip:hover,#buy .ca-chip:focus-visible{border-color:var(--orange);outline:none;}
#buy .ca-chip:focus-visible{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--orange);}
#buy .ca-ends{font-size:1.15em;}   /* ends rendered larger: what humans compare */
#buy .ca-ico{width:15px;height:15px;color:var(--silk-dim);flex:none;}
#buy .ca-chip-hint{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--silk-dim);
}
#buy .ca-full{
  margin:.9rem 0 0;
  padding:.9rem 1rem;
  background:var(--void);
  border:1px solid var(--hairline);
  color:var(--silk);
  font-size:.85rem;
  letter-spacing:.05em;
  white-space:pre-wrap;
  word-break:break-all;
  user-select:all;
  -webkit-user-select:all;
  overflow-x:auto;
}
#buy .ca-status{
  margin:.7rem 0 0;
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--silk-dim);
  min-height:1.2em;
}
#buy .ca-status[data-ok]{color:var(--dew);}
#buy .ca-status[data-fail]{color:var(--down);}

/* warn block */
#buy .warn-block{
  border-left:2px solid var(--ember);
  padding:.9rem 0 .9rem 1.2rem;
  margin:2.2rem 0;
}
#buy .warn-block p{
  margin:0;
  font-size:.92rem;
  color:var(--silk);
  max-width:38rem;
}
#buy .warn-cache{
  margin-top:.7rem !important;
  color:var(--silk-dim) !important;
  font-size:.82rem !important;
}

/* CTAs — press resists, release snaps back with one overshoot.
   silk is critically damped; no wobble. */
#buy .cta-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  gap:.75rem;
  margin:0 0 2.4rem;
}
#buy .cta{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:.95rem 1.1rem;
  min-height:48px;
  border:1px solid var(--hairline);
  background:var(--void);
  text-decoration:none;
  color:var(--silk);
  transition:border-color .15s ease, background .15s ease,
             transform .3s cubic-bezier(.2,2.4,.3,1);
}
#buy a.cta:hover,#buy a.cta:focus-visible{
  border-color:var(--orange);
  background:var(--raised);
  outline:none;
}
#buy a.cta:active{ transform:translateY(1px); transition-duration:.06s; }
#buy a.cta:focus-visible{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--orange);}
#buy .cta-name{
  font-family:var(--display,"Bricolage",system-ui,sans-serif);
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.01em;
}
#buy .cta-sub{
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--silk-dim);
}
#buy .cta-pend{
  border-style:dashed;
  background:transparent;
  cursor:default;
}
#buy .cta-pend .cta-name{color:var(--silk-dim);} /* dimmed via token, not opacity */

/* how-to */
#buy .howto-label{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--silk-dim);
  margin:0 0 1rem;
}
#buy .howto{
  list-style:none;
  margin:0 0 2.2rem;
  padding:0;
}
#buy .howto li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.1rem;
  padding:.85rem 0;
  border-top:1px solid var(--hairline);
  align-items:baseline;
}
#buy .howto li:last-child{border-bottom:1px solid var(--hairline);}
#buy .step-i{
  font-size:.78rem;
  color:var(--orange);
  letter-spacing:.1em;
}
#buy .howto p{margin:0;font-size:.95rem;max-width:36rem;}

/* risk + pending footer */
#buy .risk-note{
  margin:0;
  font-size:.95rem;
  color:var(--silk-dim);
  max-width:34rem;
}
#buy .pend-footer{
  margin:1.6rem 0 0;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--silk-dim);
}

/* aside */
#buy .side-fig{margin:0 0 1.4rem;border:1px solid var(--hairline);position:relative;}
#buy .side-fig img{display:block;width:100%;height:auto;filter:saturate(.85);}
#buy .side-fig figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:1.6rem .8rem .55rem;
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--silk);
  background:linear-gradient(to top,rgba(10,9,8,.85),rgba(10,9,8,0)); /* scrim */
}
#buy .accept-list{margin:0;border-top:1px solid var(--hairline);}
#buy .accept-row{
  display:grid;
  grid-template-columns:minmax(7rem,auto) 1fr;
  gap:1rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--hairline);
}
#buy .accept-row dt{
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--silk-dim);
  padding-top:.15em;
}
#buy .accept-row dd{margin:0;font-size:.88rem;color:var(--silk);}
#buy .dash{color:var(--silk-dim);letter-spacing:.15em;}
#buy .accept-sub{
  display:block;
  font-size:.72rem;
  color:var(--silk-dim);
  margin-top:.25rem;
}
#buy .accept-row a{color:var(--silk);text-decoration:underline;text-underline-offset:3px;}
#buy .accept-row a:hover{color:var(--orange-hi);}

@media (max-width:720px){
  #buy .buy-grid{grid-template-columns:1fr;}
  #buy .buy-side{display:contents;}          /* reorder: accept list above CTAs */
  #buy .buy-side .side-fig{order:3;}
  #buy .buy-side .accept-list{order:1;margin-bottom:1.5rem;}
  #buy .buy-primary{order:2;padding:1.25rem;}
  #buy .buy-grid{display:flex;flex-direction:column;}
  #buy .cta-row{grid-template-columns:1fr;}
  #buy .ca-full{font-size:.75rem;}
  #buy .plate-rev{display:none;}
  #buy .buy-plate-head{grid-template-columns:auto 1fr;}
}

/* ============================================================
   08 · MOTION ARMATURE — the wiring the loaded libraries expect
   ------------------------------------------------------------
   Contract (site-wide, all sections):
   - JS mounts .eng-js on <html> (or <body>). Nothing below arms
     without it; no-JS renders the finished document.
   - JS splits text into .ln > span (lines) / .ch (chars) / .w
     (words), reads data-stagger + data-delay (ms) and writes
     --stagger / --delay, and sets --i per fragment. On entry the
     observer adds .in. That is the whole handshake.
   - Pointer-driven fx read --mx/--my (spotlight, % or px),
     --tx/--ty (magnetic, px), --rx/--ry (tilt, deg),
     --prox (vibration, 0..1). JS writes; CSS consumes.
   ============================================================ */

.eng-js [data-motion]{ --stagger:40ms; --delay:0ms; }

/* lines — line-mask reveal. each line rises out of its own clip. */
.eng-js [data-motion~="lines"] .ln{ display:block; overflow:hidden; }
.eng-js [data-motion~="lines"] .ln > span{
  display:block;
  transform:translateY(110%);
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--delay) + var(--i,0) * var(--stagger));
}
.eng-js [data-motion~="lines"].in .ln > span{ transform:none; }

/* chars — per-char blur stagger with a single-frame overshoot
   (the dragline drop: each character descends and takes up load) */
.eng-js [data-motion~="chars"] .ch{
  display:inline-block;
  opacity:0;
  filter:blur(6px);
  transform:translateY(-.35em);
  transition:opacity .5s ease, filter .5s ease,
             transform .55s cubic-bezier(.2,.9,.3,1.15);
  transition-delay:calc(var(--delay) + var(--i,0) * var(--stagger));
}
.eng-js [data-motion~="chars"].in .ch{ opacity:1; filter:none; transform:none; }

/* weight — variable-font morph, wght 300 → 800 = load taken up.
   short runs only (headings, numerals); never paragraphs. */
.eng-js [data-motion~="weight"]{
  font-variation-settings:"wght" 300;
  transition:font-variation-settings .9s cubic-bezier(.2,.9,.3,1);
  transition-delay:var(--delay);
}
.eng-js [data-motion~="weight"].in{ font-variation-settings:"wght" 800; }

/* highlight — orange rule sweeps in under the phrase */
.eng-js [data-motion~="highlight"]{
  background:linear-gradient(var(--orange),var(--orange)) 0 92% / 0% 2px no-repeat;
  transition:background-size .6s cubic-bezier(.4,0,.2,1);
  transition-delay:calc(var(--delay) + 180ms);
}
.eng-js [data-motion~="highlight"].in{ background-size:100% 2px; }

/* odometer — generic digit roll for elements outside #stats.
   markup contract identical to the stats odometer. */
[data-motion~="odometer"] .odo{ display:inline-block; white-space:nowrap; }
[data-motion~="odometer"] .odo .ch{
  display:inline-block; height:1.1em; overflow:hidden; vertical-align:bottom;
}
[data-motion~="odometer"] .odo .ch .col{
  display:block; transition:transform .38s cubic-bezier(.2,.9,.2,1);
}
[data-motion~="odometer"] .odo .ch .col span{
  display:block; height:1.1em; line-height:1.1;
}

/* ---- data-fx library ---------------------------------------- */

/* border-beam — a plotter head circling the plate edge */
@property --eng-beam{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
[data-fx~="border-beam"]{ position:relative; }
[data-fx~="border-beam"]::after{
  content:""; position:absolute; inset:-1px; padding:1px;
  pointer-events:none;
  background:conic-gradient(from var(--eng-beam),
    transparent 0deg 306deg, var(--orange-hi) 336deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:eng-beam 7s linear infinite;
}
@keyframes eng-beam{ to{ --eng-beam:360deg; } }

/* shine — one diagonal light pass on arrival, and again on hover */
[data-fx~="shine"]{ position:relative; overflow:hidden; }
[data-fx~="shine"]::before{
  content:""; position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg, transparent 30%,
    rgba(242,237,228,.07) 50%, transparent 70%);
  transform:translateX(-130%) skewX(-14deg);
}
.eng-js [data-fx~="shine"].in::before{
  transition:transform 1.1s cubic-bezier(.4,0,.2,1) .25s;
  transform:translateX(130%);
}
@media (hover:hover){
  [data-fx~="shine"]:hover::before{
    transition:transform .8s cubic-bezier(.4,0,.2,1);
    transform:translateX(130%);
  }
}

/* spotlight — inspection lamp follows the pointer (JS: --mx/--my) */
[data-fx~="spotlight"]{ position:relative; }
[data-fx~="spotlight"]::after{
  content:""; position:absolute; inset:0; z-index:1;
  pointer-events:none; opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(232,98,44,.08), transparent 70%);
  transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){
  [data-fx~="spotlight"]:hover::after{ opacity:1; }
}

/* magnetic — element leans toward the pointer (JS: --tx/--ty px),
   springs home with a single overshoot */
[data-fx~="magnetic"]{
  transform:translate3d(var(--tx,0px), var(--ty,0px), 0);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4);
  will-change:transform;
}

/* tilt — plate under glass (JS: --rx/--ry deg) */
[data-fx~="tilt"]{
  transform:perspective(700px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
  transform-style:preserve-3d;
  will-change:transform;
}

/* marquee / ticker — duplicated .fx-track content, seamless loop */
[data-fx~="marquee"], [data-fx~="ticker"]{ overflow:hidden; }
[data-fx~="marquee"] .fx-track,
[data-fx~="ticker"] .fx-track{
  display:flex; width:max-content; gap:2.5rem;
  animation:eng-marquee var(--marquee-dur,28s) linear infinite;
  will-change:transform;
}
@keyframes eng-marquee{ to{ transform:translateX(-50%); } }
@media (hover:hover){
  [data-fx~="marquee"]:hover .fx-track,
  [data-fx~="ticker"]:hover .fx-track{ animation-play-state:paused; }
}

/* dot-grid — drafting-table ground, zero assets, zero JS */
[data-fx~="dot-grid"]{
  background-image:radial-gradient(circle, var(--hairline) 1px, transparent 1.5px);
  background-size:22px 22px;
}

/* reveal-words — words brighten in sequence, ink taking to paper */
.eng-js [data-fx~="reveal-words"] .w{
  display:inline-block;
  opacity:.12;
  transition:opacity .4s linear;
  transition-delay:calc(var(--delay,0ms) + var(--i,0) * var(--stagger,60ms));
}
.eng-js [data-fx~="reveal-words"].in .w{ opacity:1; }

/* typewriter — JS types; CSS supplies the block caret */
[data-fx~="typewriter"].in::after{
  content:"\2588";
  color:var(--orange);
  margin-left:.08em;
  animation:eng-caret 1s step-end infinite;
}
@keyframes eng-caret{ 50%{ opacity:0; } }

/* scramble — JS cycles glyphs; CSS pins the box so nothing shifts */
[data-fx~="scramble"]{
  font-variant-numeric:tabular-nums;
  font-kerning:none;
}

/* meteors / particles / orbit — canvas or element layers owned by
   the fx library; CSS guarantees containment and stacking only */
[data-fx~="meteors"], [data-fx~="particles"], [data-fx~="orbit"]{
  position:relative; overflow:hidden;
}
[data-fx~="meteors"] > .fx-layer,
[data-fx~="particles"] > .fx-layer,
[data-fx~="orbit"] > .fx-layer{
  position:absolute; inset:0; pointer-events:none; z-index:0;
}

/* vibration sense — interactive elements feel the pointer approach
   (JS: --prox 0..1 from inverse distance). On contact: stillness. */
.eng-js [data-fx~="vibration"]{
  transform:translateY(calc(var(--prox,0) * -1.5px));
  transition:transform .12s linear;
}
@media (hover:hover){
  .eng-js [data-fx~="vibration"]:hover{ transform:none; }
}

/* ============================================================
   09 · DRAFTING CRAFT — inventor plates, CSS side
   ============================================================ */

/* stamp-in — title blocks arrive at 103%, snap to register, and the
   border flashes ember for one beat: a plate being certified.
   apply data-motion="stamp" to any plate-head / title block. */
.eng-js [data-motion~="stamp"]{ opacity:0; }
.eng-js [data-motion~="stamp"].in{
  animation:eng-stamp .38s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:var(--delay,0ms);
}
@keyframes eng-stamp{
  0%  { opacity:0; transform:scale(1.03); }
  45% { opacity:1; transform:scale(1); box-shadow:inset 0 0 0 1px var(--ember); }
  70% { box-shadow:inset 0 0 0 1px var(--ember); }
  100%{ opacity:1; transform:scale(1); box-shadow:none; }
}

/* tension-set — a numeric value arrives slack (wide tracking) and is
   tensioned to spec while an orange gauge tick travels to its stop.
   short digit strings only. apply data-motion="tension". */
.eng-js [data-motion~="tension"]{
  letter-spacing:.5em;
  background:linear-gradient(var(--orange),var(--orange)) 0 100% / 0% 1px no-repeat;
  transition:letter-spacing .8s cubic-bezier(.2,.9,.2,1),
             background-size .8s cubic-bezier(.2,.9,.2,1);
  transition-delay:var(--delay,0ms);
}
.eng-js [data-motion~="tension"].in{
  letter-spacing:normal;
  background-size:100% 1px;
}

/* dimension callout — hover measures the element: ticks extend, a
   hairline runs between them, a mono label reads the real width.
   JS writes offsetWidth into data-dim on load/resize. apply only to
   elements whose ::before/::after are free. pointer devices only. */
@media (hover:hover) and (pointer:fine){
  [data-dim]{ position:relative; }
  [data-dim]::before{
    content:""; position:absolute; left:0; right:0; top:-11px; height:7px;
    pointer-events:none; opacity:.85;
    background:
      linear-gradient(var(--silk-dim),var(--silk-dim)) 0 50% / 100% 1px,
      linear-gradient(var(--silk-dim),var(--silk-dim)) 0 0 / 1px 7px,
      linear-gradient(var(--silk-dim),var(--silk-dim)) 100% 0 / 1px 7px;
    background-repeat:no-repeat;
    transform:scaleX(0); transform-origin:0 50%;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  [data-dim]::after{
    content:"W " attr(data-dim); position:absolute; top:-27px; left:0;
    font:400 10px/1 var(--mono); letter-spacing:.08em; color:var(--silk-dim);
    opacity:0; transform:translateY(3px);
    transition:opacity .25s ease .12s, transform .25s ease .12s;
    pointer-events:none; white-space:nowrap;
  }
  [data-dim]:hover::before{ transform:scaleX(1); }
  [data-dim]:hover::after{ opacity:1; transform:none; }
}

/* station datum — sections carry a faint survey-strip marker at the
   top edge: STA 003.00, mono, quarter-strength. the drawing grid
   registers to the document, not the viewport. apply data-sta="003.00"
   to any section whose ::after is free. */
[data-sta]{ position:relative; }
[data-sta]::after{
  content:"STA " attr(data-sta);
  position:absolute; top:0; right:clamp(8px,3vw,32px);
  transform:translateY(-50%);
  padding:0 8px;
  font:400 10px/1.6 var(--mono); letter-spacing:.16em;
  color:var(--silk-dim); opacity:.45;
  background:inherit;
  pointer-events:none; user-select:none;
  z-index:2;
}

/* pluck — a structural label responds to hover like a strand being
   tested: one damped skew oscillation, then still. apply data-fx="pluck"
   to leader labels, index numerals, nav items. */
@media (hover:hover){
  [data-fx~="pluck"]:hover{
    animation:eng-pluck .45s cubic-bezier(.36,.07,.19,.97);
  }
}
@keyframes eng-pluck{
  0%  { transform:skewX(0); }
  20% { transform:skewX(3deg); }
  45% { transform:skewX(-2deg); }
  70% { transform:skewX(1deg); }
  100%{ transform:skewX(0); }
}

/* ============================================================
   10 · REDUCED MOTION — master switch
   every armed initial state resolves to the finished document.
   nothing moves; everything reads.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .eng-skip, .eng-header, .eng-nav a, .eng-nav a::after, .eng-icon-link{ transition:none; }

  .eng-js .rv{ opacity:1; transform:none; transition:none; }

  .eng-scenes.is-scrub .scn{height:auto !important}
  .eng-scenes.is-scrub .scn-pin{position:static !important;height:auto !important;overflow:visible !important;
    padding:clamp(48px,8vw,96px) clamp(16px,4vw,48px) !important;display:grid !important}
  .eng-scenes.is-scrub .scn-hud,.eng-scenes.is-scrub .orbit-bearing,.eng-scenes.is-scrub .scn-scrim{display:none !important}
  .eng-scenes.is-scrub video{display:none}
  .eng-scenes.is-scrub .scn-still{display:block;position:relative}
  .eng-scenes .scn-entry,.eng-scenes .scn-co,.eng-scenes .scn-ttl,
  .eng-scenes .scn-entry p,.eng-scenes .scn-co p{transition:none}

  #spec .leader path{ stroke-dashoffset:0!important; transition:none!important; }
  #spec .leader circle, #spec .leader text{ opacity:1!important; transition:none!important; }
  #spec .callout{ opacity:1!important; transform:none!important; transition:none!important; }
  #stats .odo .ch .col{ transition:none!important; }
  #stats .odo.swap{ animation:none!important; }
  #stats[data-state="loading"] .stat-value .odo{
    animation:none!important;
    -webkit-text-fill-color:currentColor; color:var(--silk-dim);
    background:none;
  }

  #gallery-forge .gf-base,
  #gallery-forge .gf-full,
  #gallery-forge .gf-thumb img{ transition:none !important; }

  #verification .cert-card{ transform:none !important; box-shadow:none !important; }

  #buy *,#buy *::before,#buy *::after{transition:none !important;}

  /* armature: resolve all armed states to visible, kill all loops */
  .eng-js [data-motion], .eng-js [data-motion] .ln > span,
  .eng-js [data-motion] .ch, .eng-js [data-fx~="reveal-words"] .w{
    opacity:1 !important; transform:none !important; filter:none !important;
    transition:none !important; animation:none !important;
  }
  .eng-js [data-motion~="weight"]{ font-variation-settings:"wght" 800; }
  .eng-js [data-motion~="highlight"]{ background-size:100% 2px; }
  .eng-js [data-motion~="tension"]{ letter-spacing:normal !important; background-size:100% 1px; }
  .eng-js [data-motion~="stamp"]{ opacity:1; animation:none !important; }
  [data-fx~="border-beam"]::after,
  [data-fx~="shine"]::before,
  [data-fx~="typewriter"].in::after,
  [data-fx~="marquee"] .fx-track,
  [data-fx~="ticker"] .fx-track,
  [data-fx~="pluck"]:hover{ animation:none !important; }
  [data-fx~="shine"]::before{ transform:translateX(-130%) !important; transition:none !important; }
  [data-fx~="magnetic"], [data-fx~="tilt"], .eng-js [data-fx~="vibration"]{
    transform:none !important; transition:none !important;
  }
  [data-fx~="spotlight"]::after{ opacity:0 !important; }
  [data-dim]::before, [data-dim]::after{ transition:none; }
}