/* mikewu — spec-plate design system
   Palette: blueprint — ink #16233B / paper #F4F6FA / accent #2F6BE0 / status violet #7B3FE0
   (--brass / --green retained as token NAMES so inner pages retint automatically) */

/* ---------- self-hosted fonts (was Google CDN) ---------- */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:800 900;font-display:swap;
  src:url("fonts/archivo-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibmplexmono-400-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibmplexmono-500-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("fonts/sourceserif4-latin.woff2") format("woff2");
}

:root{
  --ink:#16233B;
  --paper:#F4F6FA;
  --plate:#FFFFFF;
  --brass:#2F6BE0;
  --green:#7B3FE0;
  --slate:#59647A;
  --line:#D3D9E4;
  --maxw:1060px;
  /* semantic aliases used by the homepage scene (kept in sync with index.html) */
  --accent:#2F6BE0;
  --status:#7B3FE0;
  --raw:#E9B949;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:1.05rem;
  line-height:1.65;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header{border-bottom:2px solid var(--ink);background:var(--paper)}
.nav{display:flex;align-items:baseline;justify-content:space-between;padding:20px 0;gap:16px;flex-wrap:wrap}
.wordmark{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.15rem;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.wordmark span{color:var(--brass)}
.nav ul{display:flex;gap:22px;list-style:none}
.nav a.navlink{font-family:"IBM Plex Mono",monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);text-decoration:none;padding-bottom:2px}
.nav a.navlink:hover,.nav a.navlink[aria-current]{color:var(--ink);border-bottom:2px solid var(--brass)}

/* ---------- hero ---------- */
.hero{padding:84px 0 64px}
.hero h1{
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.04;letter-spacing:-.015em;max-width:17ch;
}
.hero h1 em{font-style:normal;color:var(--brass)}
.hero .sub{margin-top:22px;font-size:1.2rem;max-width:52ch;color:var(--slate)}

/* ruler divider — the production line */
.ruler{height:14px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 12px);
  border-top:2px solid var(--ink);opacity:.85;margin:8px 0 0}

/* ---------- section headings ---------- */
.section{padding:56px 0 24px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--brass);display:block;margin-bottom:10px}
.section h2{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:-.01em}
.section .lede{margin-top:10px;color:var(--slate);max-width:60ch}

/* ---------- spec-plate grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;padding:30px 0 20px}
.plate{
  background:var(--plate);border:2px solid var(--ink);
  box-shadow:6px 6px 0 rgba(22,35,59,.12);
  padding:24px 22px 20px;display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:var(--ink);
  transition:transform .15s ease,box-shadow .15s ease;
}
.plate:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 rgba(22,35,59,.18)}
.plate:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.plate .status{font-family:"IBM Plex Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.dot.idle{background:var(--slate)}
.plate h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.01em}
.plate p{font-size:.98rem;color:var(--slate)}
.plate .go{margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}

/* ---------- article / product pages ---------- */
.article{padding:64px 0 40px;max-width:720px}
.article .status{font-family:"IBM Plex Mono",monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--slate);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.article h1{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(2rem,4.5vw,3rem);line-height:1.08;letter-spacing:-.015em}
.article .oneliner{margin-top:14px;font-size:1.25rem;color:var(--slate)}
.article h2{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.35rem;margin:44px 0 12px}
.article p{margin:0 0 16px}
.article ul{margin:0 0 16px 1.2rem}
.article li{margin-bottom:8px}
.article strong{font-weight:600}


/* screenshot placeholder frame */
.shot{border:2px dashed var(--slate);background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(92,102,117,.05) 14px 28px);padding:56px 20px;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--slate);letter-spacing:.06em;margin:20px 0}

/* spec table */
.spec{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.spec td{border-top:1px solid var(--line);padding:10px 6px;vertical-align:top}
.spec td:first-child{font-family:"IBM Plex Mono",monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);width:34%;padding-right:14px}

/* inline link style */
.article a,.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:2px;text-underline-offset:3px}
.article a:hover,.prose a:hover{color:var(--brass)}

/* ---------- footer ---------- */
footer{margin-top:72px;border-top:2px solid var(--ink)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 0 40px;font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.06em;color:var(--slate)}
.foot a{color:var(--slate)}
.foot a:hover{color:var(--brass)}

@media (max-width:640px){
  .hero{padding:56px 0 40px}
  .grid{grid-template-columns:1fr}
}

/* real screenshots */
.shotfig{margin:20px 0;border:2px solid var(--ink);box-shadow:6px 6px 0 rgba(22,35,59,.12)}
.shotfig img{display:block;width:100%;height:auto}
.shotfig figcaption{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding:8px 10px;border-top:1px solid var(--line);background:var(--plate)}