/* Reusable components. Tokens only — no literals (1px/2px hairlines + ms + breakpoints allowed). */

/* nav */
.site-nav{position:sticky;top:0;z-index:100;height:var(--nav-height);
  background:var(--surface-bg);border-bottom:1px solid var(--border-color);}
.site-nav__inner{display:flex;align-items:center;justify-content:space-between;height:100%;}
.site-nav__brand{font-family:var(--font-main);font-size:var(--h-md);
  font-weight:700;color:var(--primary);display:flex;align-items:center;gap:var(--space-2);}
.site-nav__brand:hover{text-decoration:none;}
.site-nav__menu{display:flex;gap:var(--space-8);list-style:none;margin:0;padding:0;}
.site-nav__menu a{font-family:var(--font-mono);font-size:var(--label);
  text-transform:uppercase;letter-spacing:.02em;color:var(--text-muted);padding-bottom:var(--space-1);}
.site-nav__menu a:hover,.site-nav__menu .current-menu-item a{color:var(--primary);
  border-bottom:2px solid var(--primary);text-decoration:none;}
.menu-toggle{display:none;background:none;border:1px solid var(--border-color);
  border-radius:var(--radius);padding:var(--space-2);color:var(--text-muted);cursor:pointer;}
@media(max-width:767px){
  .site-nav__menu{display:none;}
  .site-nav__menu.is-open{display:flex;flex-direction:column;position:absolute;
    top:var(--nav-height);left:0;right:0;background:var(--surface-card);
    border-bottom:1px solid var(--border-color);padding:var(--space-4);gap:var(--space-4);}
  .menu-toggle{display:inline-flex;}
}

/* footer */
.site-footer{background:var(--surface-low);border-top:1px solid var(--border-color);}
.site-footer__inner{display:grid;grid-template-columns:1fr;gap:var(--gutter);padding-block:var(--space-12);}
@media(min-width:768px){.site-footer__inner{grid-template-columns:1fr 1fr;}}
.site-footer__links{display:flex;flex-wrap:wrap;gap:var(--space-6);list-style:none;margin:0;padding:0;}
@media(min-width:768px){.site-footer__links{justify-content:flex-end;}}
.site-footer__links a{font-family:var(--font-mono);font-size:var(--label);
  text-transform:uppercase;letter-spacing:.02em;color:var(--text-muted);}
.site-footer__links a:hover{color:var(--primary);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--primary);color:var(--on-primary);font-family:var(--font-main);
  font-size:var(--text-sm);font-weight:500;padding:var(--space-2) var(--space-6);
  border:1px solid var(--primary);border-radius:var(--radius);cursor:pointer;
  box-shadow:var(--shadow-sm);transition:transform 150ms,opacity 150ms;}
.btn:hover{opacity:.92;text-decoration:none;color:var(--on-primary);}
.btn:active{transform:scale(.98);}
.btn--ghost{background:transparent;color:var(--primary);border-color:var(--border-color);box-shadow:none;}
.btn--ghost:hover{background:var(--surface-low);color:var(--primary);}

/* card */
.card{background:var(--surface-card);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);padding:var(--space-6);}

/* badge + tag */
.badge,.tag{display:inline-block;font-family:var(--font-mono);font-size:var(--label);
  text-transform:uppercase;letter-spacing:.02em;padding:var(--space-1) var(--space-2);
  border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-muted);}
.badge{background:var(--surface-card);}
.tag{background:var(--surface-low);}

/* form field */
.field{display:flex;flex-direction:column;gap:var(--space-2);}
.field label{font-family:var(--font-mono);font-size:var(--label);
  text-transform:uppercase;letter-spacing:.02em;color:var(--text-muted);}
.field input,.field textarea{background:var(--surface-card);
  border:1px solid var(--border-color);border-radius:var(--radius);
  padding:var(--space-3);font-family:var(--font-main);font-size:var(--text-sm);color:var(--text-main);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 2px var(--surface-low);}

/* content-visibility for off-screen grids (perf) */
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 600px;}

/* 404 — centered error STATE (hero-like), not body content — center allowed here. */
.error-404{padding-block:var(--space-16);text-align:center;max-width:42rem;margin-inline:auto;}
.e404__msg{margin-bottom:var(--space-8);}
.e404__dot{background:var(--text-muted);}
.e404__code{font-family:var(--font-mono);font-weight:700;font-size:calc(var(--h-lg) * 3);line-height:1;color:var(--text-main);}
.e404__title{color:var(--text-muted);margin-top:var(--space-4);}
.e404__text{color:var(--text-muted);max-width:28rem;margin:var(--space-4) auto var(--space-12);}
.e404__btns{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;}
.e404__chips{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;
  margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border-color);}
.e404__chips .tag{opacity:.6;}

/* ---- shared page primitives (page-completion) ---- */

/* icon + sprite */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;}
.icon-sprite{position:absolute;}

/* eyebrow */
.eyebrow{font-family:var(--font-mono);font-size:var(--label);text-transform:uppercase;
  letter-spacing:.04em;color:var(--primary);display:inline-flex;align-items:center;gap:var(--space-2);}
.eyebrow__dot{width:8px;height:8px;border-radius:50%;background:var(--primary);}

/* page-head */
.page-head{border-bottom:1px solid var(--border-color);padding-block:var(--space-8);margin-bottom:var(--space-8);}
.page-head h1{margin:var(--space-2) 0 0;}
.page-head__lead{color:var(--text-muted);max-width:48rem;margin-top:var(--space-2);}

/* panel (header bar + body) */
.panel{border:1px solid var(--border-color);border-radius:var(--radius-lg);
  background:var(--surface-card);overflow:hidden;}
.panel__head{font-family:var(--font-mono);font-size:var(--label);text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-muted);padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border-color);background:var(--surface-low);
  display:flex;justify-content:space-between;align-items:center;}
.panel__body{padding:var(--space-4);}

/* stat row */
.stat{display:flex;justify-content:space-between;align-items:center;padding-block:var(--space-2);
  border-bottom:1px solid var(--border-color);font-family:var(--font-mono);font-size:var(--label);}
.stat:last-child{border-bottom:0;}
.stat__k{color:var(--text-muted);} .stat__v{color:var(--text-main);}

/* checklist (panel item list) */
.checklist{list-style:none;margin:0;padding:0;}
.checklist li{display:flex;justify-content:space-between;align-items:center;padding-block:var(--space-2);
  border-bottom:1px solid var(--border-color);font-family:var(--font-mono);font-size:var(--label);color:var(--text-muted);}
.checklist li:last-child{border-bottom:0;}
.checklist .icon{color:var(--primary);}

/* filter bar */
.filterbar{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4);}
.filterbar .tag{cursor:pointer;background:none;}
.filterbar .tag[aria-pressed="true"]{border-color:var(--primary);color:var(--primary);}

/* rich project card (2-part metric card) */
.pcard{border:1px solid var(--border-color);border-radius:var(--radius-lg);
  background:var(--surface-card);overflow:hidden;transition:border-color 150ms;display:flex;flex-direction:column;}
.pcard:hover{border-color:var(--primary);}
.pcard__head{padding:var(--space-4);border-bottom:1px solid var(--border-color);}
.pcard__meta{display:flex;justify-content:space-between;align-items:center;}
.pcard__id{font-family:var(--font-mono);font-size:var(--label);color:var(--text-muted);}
.pcard__title{margin:var(--space-2) 0 var(--space-1);}
.pcard__title a{color:inherit;} .pcard:hover .pcard__title a{color:var(--primary);}
.pcard__desc{color:var(--text-muted);font-size:var(--text-sm);}
.pcard__metrics{padding:var(--space-4);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:auto;}
.metric{display:flex;flex-direction:column;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--label);}
.metric__k{color:var(--text-muted);} .metric__v{color:var(--text-main);}

/* blog/search card body */
.bcard{display:flex;flex-direction:column;}
.bcard__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);}
.bcard__desc{color:var(--text-muted);flex-grow:1;}
.bcard__foot{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:var(--label);color:var(--text-muted);margin-top:var(--space-6);
  padding-top:var(--space-4);border-top:1px solid var(--border-color);}

/* callout (left-border quote) */
.callout{border-left:2px solid var(--primary);padding:var(--space-2) var(--space-6);margin-block:var(--space-6);}
.callout__label{font-family:var(--font-mono);font-size:var(--label);color:var(--primary);text-transform:uppercase;}

/* engineering note */
.note{border:1px solid var(--border-color);border-radius:var(--radius);background:var(--surface-low);
  padding:var(--space-4);margin-block:var(--space-6);}
.note__label{font-family:var(--font-mono);font-size:var(--label);color:var(--primary);text-transform:uppercase;}

/* code block */
.codeblock{font-family:var(--font-mono);font-size:var(--text-sm);background:var(--surface-low);
  border:1px solid var(--border-color);border-radius:var(--radius);padding:var(--space-4);
  overflow-x:auto;line-height:1.6;white-space:pre;}

/* timeline */
.timeline{border-left:1px solid var(--border-color);padding-left:var(--space-8);
  margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-12);max-width:48rem;}
.timeline__item{position:relative;}
.timeline__item::before{content:"";position:absolute;left:-37px;top:4px;width:10px;height:10px;
  border-radius:50%;background:var(--primary);}
.timeline__period{font-family:var(--font-mono);font-size:var(--label);color:var(--primary);text-transform:uppercase;}

/* pager */
.pager{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-12);
  padding-top:var(--space-8);border-top:1px solid var(--border-color);}

/* status chip */
.chip-status{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);
  font-size:var(--label);border:1px solid var(--border-color);border-radius:var(--radius);
  padding:var(--space-1) var(--space-2);}
.chip-status__dot{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block;}

/* link tiles (connect) */
.tiles{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border-color);
  border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;}
@media(min-width:640px){.tiles{grid-template-columns:repeat(3,1fr);}}
.tile{background:var(--surface-card);padding:var(--space-6);display:flex;flex-direction:column;
  align-items:center;gap:var(--space-3);text-align:center;transition:background 150ms;}
.tile:hover{background:var(--surface-low);text-decoration:none;}
.tile__ico{width:3rem;height:3rem;border-radius:50%;border:1px solid var(--border-color);
  background:var(--surface-low);display:flex;align-items:center;justify-content:center;}

/* search form */
.searchform{display:flex;gap:var(--space-2);margin-top:var(--space-4);max-width:32rem;}
.searchform__input{flex:1;background:var(--surface-card);border:1px solid var(--border-color);
  border-radius:var(--radius);padding:var(--space-3);font-family:var(--font-main);
  font-size:var(--text-sm);color:var(--text-main);}
.searchform__input:focus{outline:none;border-color:var(--primary);}
.searchform__count{margin-top:var(--space-4);color:var(--text-muted);}

/* ---- image box (fixed-ratio media well; placeholder until real image) ---- */
.imgbox{position:relative;aspect-ratio:16/9;border:1px solid var(--border-color);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-low);
  display:flex;align-items:center;justify-content:center;}
.imgbox__img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);transform:scale(1.04);transition:filter 500ms,transform 500ms;}
.imgbox--empty{
  background-image:radial-gradient(var(--border-color) 1px,transparent 1px);
  background-size:var(--space-4) var(--space-4);}
.imgbox__label{font-family:var(--font-mono);font-size:var(--label);letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-muted);opacity:.7;}

/* project card: image-box top + tags + CTA (rich, matches mockup) */
.pcard__imgwrap{position:relative;}
.pcard__status{position:absolute;top:var(--space-2);right:var(--space-2);
  font-family:var(--font-mono);font-size:var(--label);letter-spacing:.04em;
  background:var(--surface-card);color:var(--primary);
  border:1px solid var(--border-color);border-radius:var(--radius);
  padding:var(--space-1) var(--space-2);}
.pcard__tags{display:flex;gap:var(--space-2);}
.pcard__cta{display:inline-flex;align-items:center;gap:var(--space-1);
  font-family:var(--font-mono);font-size:var(--label);letter-spacing:.04em;
  text-transform:uppercase;color:var(--primary);margin-top:var(--space-2);}
.pcard__cta .icon{transition:transform 150ms;}
.pcard:hover .pcard__cta .icon,.pcard:focus-within .pcard__cta .icon{transform:translateX(var(--space-1));}
.pcard:hover .imgbox__img,.pcard:focus-within .imgbox__img,
.bcard:hover .imgbox__img,.bcard:focus-within .imgbox__img{filter:grayscale(0);transform:scale(1);}

/* blog card image-box top */
.bcard__imgwrap{margin-bottom:var(--space-4);}

/* version chip (Technical Core head) */
.vchip{font-family:var(--font-mono);font-size:var(--label);letter-spacing:.04em;
  color:var(--primary);background:var(--surface-low);
  border:1px solid var(--border-color);border-radius:var(--radius);
  padding:var(--space-1) var(--space-2);}

/* eyebrow pulse dot */
.eyebrow__dot{animation:tenstack-pulse 2000ms ease-in-out infinite;}
@keyframes tenstack-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* scroll-reveal target — hidden ONLY when JS is confirmed present (.js on <html>).
   No .js class (script absent/failed/disabled) → never hidden. JS adds .is-visible. */
.js [data-reveal]{opacity:0;transform:translateY(var(--space-4));
  transition:opacity 500ms ease-out,transform 500ms ease-out;}
.js [data-reveal].is-visible{opacity:1;transform:none;}