/*
Theme Name: Siliconwhiz Substrate
Theme URI: https://siliconwhiz.com/
Author: Siliconwhiz
Author URI: https://siliconwhiz.com/
Description: SUBSTRATE v2.0 — the Siliconwhiz design system as a WordPress theme. Layered obsidian, one voltage signal, a cold plasma atmosphere, and motion that only ever means something. Ships a customizable homepage, Projects and Services post types, a living style guide, and a demo-content importer.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: siliconwhiz
Tags: dark, one-column, custom-colors, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, editor-style, translation-ready, portfolio, business
*/

/* ══════════════════════════════════════════════════════════════════════
   SILICONWHIZ · SUBSTRATE · v2.0
   Three-layer tokens:  PRIMITIVE -> SEMANTIC -> COMPONENT
   Never reference a primitive directly inside a component.
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────  LAYER 1 · PRIMITIVE  ───────────────── */
:root{
  /* Obsidian ladder — never pure #000 (OLED smear + no elevation headroom) */
  --void-950:#06070A; --void-900:#0A0B0D; --void-800:#111318;
  --void-700:#191C22; --void-600:#222630;

  /* Neutral ramp */
  --slate-500:#666D7A;   /* interactive boundaries — 3.28:1 */
  --slate-400:#7E8592;   /* dimmest legible text — 4.60:1  */
  --slate-300:#8C93A0;
  --slate-200:#BDC2CB;
  --slate-050:#F4F5F7;

  /* Voltage — the signal. The one hot colour. */
  --volt-400:#C8FF3D; --volt-500:#B3E82F; --volt-600:#8FBF20;
  --volt-a18:rgba(200,255,61,.18); --volt-a08:rgba(200,255,61,.08);

  /* Plasma — ATMOSPHERE ONLY. 2.87:1 — never text, never a fill. */
  --plasma-500:#4A2BFF; --plasma-a22:rgba(74,43,255,.22); --plasma-a10:rgba(74,43,255,.10);

  /* Status. Success is CYAN, not green — the accent is a yellow-green, and a
     green "passed" would read as the same family at chip size. 103 deg apart. */
  --cyan-400:#3DE0E0; --amber-400:#FFB443; --red-400:#FF4D4D;

  /* Alpha whites */
  --w-04:rgba(255,255,255,.04); --w-06:rgba(255,255,255,.06);
  --w-08:rgba(255,255,255,.07); --w-12:rgba(255,255,255,.12);

  /* Type */
  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Motion — expo.out. One curve for the whole product. */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in:cubic-bezier(.7,0,.84,0);
  --e-std:cubic-bezier(.4,0,.2,1);
  --t-1:140ms; --t-2:240ms; --t-3:420ms; --t-4:680ms;

  /* Space — 4pt rhythm */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:140px;

  /* Form — near zero. The wordmark has flat terminals and hard corners. */
  --r-sm:2px; --r-md:3px; --r-lg:3px; --r-xl:4px; --r-full:3px;

  /* Shell */
  --wrap:1240px; --wrap-pad:32px; --header-h:76px;
}

/* ─────────────────  LAYER 2 · SEMANTIC  ───────────────── */
:root{
  --bg-void:var(--void-950);
  --bg-base:var(--void-900);
  --bg-raised:var(--void-800);
  --bg-overlay:var(--void-700);
  --bg-glass:var(--w-04);

  --fg:var(--slate-050);
  --fg-muted:var(--slate-200);
  --fg-subtle:var(--slate-300);
  --fg-dim:var(--slate-400);

  --accent:var(--volt-400);
  --accent-hover:var(--volt-500);
  --accent-press:var(--volt-600);
  --accent-fg:var(--void-950);        /* ink ON voltage — 17.09:1 */
  --accent-wash:var(--volt-a08);
  --accent-glow:var(--volt-a18);

  --ambient:var(--plasma-500);        /* glow / gradient only */
  --ambient-glow:var(--plasma-a22);

  --border-hair:var(--w-08);
  --border:var(--w-12);
  --border-strong:var(--slate-500);   /* the ONLY border allowed to define a control */

  --success:var(--cyan-400);
  --warn:var(--amber-400);
  --danger:var(--red-400);
  --ring:var(--volt-400);

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 8px 32px rgba(0,0,0,.6);
  --shadow-3:0 24px 80px rgba(0,0,0,.75);
}

/* ─────────────────  LAYER 3 · COMPONENT  ───────────────── */
:root{
  --btn-h:48px; --btn-h-sm:38px; --btn-h-lg:56px;
  --btn-px:24px; --btn-radius:var(--r-full);
  --btn-primary-bg:var(--accent);
  --btn-primary-fg:var(--accent-fg);
  --btn-primary-bg-hover:var(--accent-hover);
  --btn-ghost-fg:var(--fg);
  --btn-ghost-border:var(--border-strong);

  --card-bg:var(--bg-raised);
  --card-border:var(--border-hair);
  --card-radius:var(--r-lg);
  --card-pad:30px;
  --card-border-hover:var(--border);

  --input-h:48px;
  --input-bg:var(--bg-void);
  --input-border:var(--border-strong);
  --input-border-focus:var(--accent);

  --chip-bg:var(--w-06);
  --chip-fg:var(--fg-subtle);
}

/* ═══════════════════  BASE  ═══════════════════ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg-base);color:var(--fg);
  font-family:var(--f-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Ambient plasma field — fixed, non-interactive, decorative. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1000px 700px at 8% -8%, var(--plasma-a10), transparent 62%),
    radial-gradient(800px 600px at 96% 4%, var(--volt-a08), transparent 55%),
    radial-gradient(900px 800px at 50% 108%, var(--plasma-a10), transparent 62%);
}
body.no-atmosphere::before{display:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0}
img,svg,video,canvas{max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
address{font-style:normal}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:var(--r-sm)}
main:focus{outline:none}
b,strong{font-weight:600}
hr{border:0;height:1px;background:var(--border-hair);margin:var(--s-7) 0}
::selection{background:var(--accent);color:var(--accent-fg)}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--wrap-pad);position:relative;z-index:1}
.wrap--narrow{max-width:820px}

/* Accessibility helpers — WordPress conventions */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--accent);color:var(--accent-fg);clip:auto!important;
  clip-path:none;display:block;font-size:14px;font-weight:600;height:auto;left:16px;line-height:normal;
  padding:12px 20px;text-decoration:none;top:16px;width:auto;z-index:200;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px;background:var(--accent);color:var(--accent-fg);
  padding:12px 20px;z-index:200;font-weight:600;border-radius:var(--r-sm)}
.skip:focus{left:16px;top:16px}

/* ═══════════════════  KICKER  ═══════════════════ */
.kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:'';width:22px;height:1px;background:var(--accent);flex:none}
.kicker--dim{color:var(--fg-dim)}
.kicker--dim::before{background:var(--fg-dim)}
.kicker--center{justify-content:center}

/* ═══════════════════  BUTTON  ═══════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--btn-h);
  padding:0 var(--btn-px);border-radius:var(--btn-radius);font-family:var(--f-body);font-size:15px;
  font-weight:600;letter-spacing:-.01em;border:1px solid transparent;cursor:pointer;
  white-space:nowrap;text-align:center;
  transition:background var(--t-1) var(--e-out),border-color var(--t-1) var(--e-out),
             color var(--t-1) var(--e-out),transform var(--t-1) var(--e-out),
             box-shadow var(--t-2) var(--e-out)}
.btn:active{transform:scale(.97)}
.btn--p{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.btn--p:hover{background:var(--btn-primary-bg-hover);box-shadow:0 8px 40px var(--accent-glow)}
.btn--p:active{background:var(--accent-press)}
.btn--g{background:transparent;color:var(--btn-ghost-fg);border-color:var(--btn-ghost-border)}
.btn--g:hover{border-color:var(--fg);background:var(--w-04)}
.btn--quiet{background:transparent;color:var(--fg-subtle);padding:0 12px}
.btn--quiet:hover{color:var(--accent)}
.btn--lg{height:var(--btn-h-lg);font-size:16px;padding:0 30px}
.btn--sm{height:var(--btn-h-sm);font-size:13.5px;padding:0 16px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.4;pointer-events:none}
.ar{transition:transform var(--t-1) var(--e-out)}
.btn:hover .ar,.tl:hover .ar,.vcs:hover .ar{transform:translateX(3px)}
.tl{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--accent);padding:10px 0;transition:color var(--t-1) var(--e-out)}
.tl:hover{color:var(--accent-hover)}

/* ═══════════════════  CHIP  ═══════════════════ */
.chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;
  border-radius:var(--r-full);background:var(--chip-bg);color:var(--chip-fg);
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.04em;white-space:nowrap}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip--live{background:var(--accent-wash);color:var(--accent)}
.chip--ok{background:rgba(61,224,224,.12);color:var(--success)}
.chip--warn{background:rgba(255,180,67,.12);color:var(--warn)}
.chip--bad{background:rgba(255,77,77,.12);color:var(--danger)}
.chip--live::before{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══════════════════  HEADER / NAV  ═══════════════════ */
.site-header{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;
  transition:background var(--t-3) var(--e-out),border-color var(--t-3) var(--e-out)}
/* derived from the token — hardcoding rgba() silently desyncs when --bg-base changes */
.site-header.stuck{background:color-mix(in srgb, var(--bg-base) 74%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--border-hair)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h)}
/* WORDMARK — live type, not a raster. Archivo 900 @ 85% width matches the logo's
   weight and condensation: crisp at any size, inverts cleanly, themeable. */
.logo{font-family:var(--f-display);font-weight:900;font-stretch:85%;font-size:21px;
  letter-spacing:.015em;text-transform:uppercase;line-height:1;color:var(--fg);
  white-space:nowrap;display:inline-flex;align-items:center}
/* NO flex gap here: the text node "Silicon" and the <span>whiz</span> become two
   flex items, and any gap splits the wordmark into two words. */
.logo .z{color:var(--accent);transition:color var(--t-2) var(--e-out)}
.logo-img{height:22px;width:auto;display:block}
.logo-img.is-mono{filter:brightness(0) invert(1)}
.site-footer .logo-img{height:26px}
/* the footer logo sits inside .f-col, so it opts out of the column's link styling */
.site-footer .logo{font-size:25px;color:var(--fg);padding:0;display:inline-flex}
.site-footer .logo:hover{color:var(--fg)}
.site-footer .custom-logo-link{padding:0}
.nav-menu{display:flex;gap:32px;list-style:none;align-items:center;padding:0;margin:0}
.nav-menu li{position:relative}
.nav-menu a{font-size:14.5px;font-weight:500;color:var(--fg-subtle);position:relative;
  display:inline-block;padding:8px 0;transition:color var(--t-1) var(--e-out)}
.nav-menu a::after{content:'';position:absolute;left:0;bottom:2px;width:0;height:1px;
  background:var(--accent);transition:width var(--t-2) var(--e-out)}
.nav-menu a:hover{color:var(--fg)}
.nav-menu a:hover::after{width:100%}
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.nav-menu .current-menu-ancestor > a{color:var(--fg)}
.nav-menu .current-menu-item > a::after,
.nav-menu .current_page_item > a::after{width:100%}
/* one level of dropdown, obsidian panel */
.nav-menu .sub-menu{position:absolute;top:100%;left:-16px;min-width:230px;list-style:none;
  margin:0;padding:8px;background:var(--bg-overlay);border:1px solid var(--border-hair);
  border-radius:var(--r-md);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity var(--t-2) var(--e-out),
  transform var(--t-2) var(--e-out),visibility var(--t-2)}
.nav-menu li:hover > .sub-menu,.nav-menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.nav-menu .sub-menu a{display:block;padding:9px 12px;width:100%}
.nav-menu .sub-menu a::after{display:none}
.nav-menu .sub-menu a:hover{background:var(--w-04);border-radius:var(--r-sm)}
.nav-r{display:flex;gap:12px;align-items:center}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  color:var(--fg);font-size:20px;line-height:1;border-radius:var(--r-sm)}
.mob{display:none;background:color-mix(in srgb, var(--bg-base) 96%, transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border-hair)}
.mob[data-open="true"]{display:block}
/* open the burger at 375, resize to 1200 -> both navs would show */
@media(min-width:901px){.mob{display:none!important}}
.mob ul{list-style:none;padding:12px 0 0;margin:0}
.mob ul.mob-cta{padding:0 0 24px}
.mob .sub-menu{padding:0 0 8px 16px}
.mob li{border-bottom:1px solid var(--w-04)}
.mob .mob-cta li{border:0;padding-top:20px}
.mob .sub-menu li{border:0}
.mob a{display:block;padding:16px 0;font-size:16px;font-weight:500}
.mob .sub-menu a{padding:10px 0;font-size:14.5px;color:var(--fg-subtle)}
.mob .btn{width:100%}

/* ═══════════════════  SECTION  ═══════════════════ */
.section{padding:130px 0;position:relative;z-index:1}
.section--void{background:var(--bg-void);border-top:1px solid var(--border-hair);
  border-bottom:1px solid var(--border-hair)}
.section--tight{padding-top:0}
.s-head{max-width:64ch;margin-bottom:56px}
.s-head h1,.s-head h2{font-family:var(--f-display);font-weight:900;font-stretch:85%;
  font-size:clamp(30px,4.1vw,50px);line-height:1.02;letter-spacing:-.024em;margin:18px 0}
.s-head h2 em,.s-head h1 em{font-style:normal;color:var(--accent)}
.s-head p{color:var(--fg-muted);font-size:18px;line-height:1.65;max-width:58ch}
.s-head--center{margin-left:auto;margin-right:auto;text-align:center}
.s-head--center p{margin-left:auto;margin-right:auto}

/* ═══════════════════  01 · HERO  ═══════════════════ */
.hero{padding:0;min-height:min(94vh,880px);display:flex;align-items:center;
  position:relative;overflow:hidden}
/* The lattice is masked OUT of the copy column. A lime node at rgba(...,.70)
   behind 12px body text is 1.01:1 — the fade is not decoration, it is the
   difference between passing 1.4.3 and failing it. Falloff is baked into the
   canvas (destination-in) so we never force a masked composite every frame. */
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* Belt-and-braces scrim: guarantees the text column is legible even mid-resize,
   before the canvas has re-baked its gradient. */
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--bg-base) 0%, var(--bg-base) 30%,
    color-mix(in srgb, var(--bg-base) 84%, transparent) 48%,
    transparent 74%)}
.hero .wrap{z-index:2}
.hero-in{max-width:820px;padding:120px 0 90px}
.hero h1{font-family:var(--f-display);font-weight:900;font-stretch:85%;
  font-size:clamp(40px,5.9vw,78px);line-height:.94;letter-spacing:-.022em;
  text-transform:uppercase;margin:26px 0 0;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--accent);text-shadow:0 0 80px var(--accent-glow)}
/* Char stagger — hand-rolled. NOTE: opacity stays 1. Chromium excludes
   opacity:0 nodes from LCP and the h1 IS the LCP element, so we reveal with
   clip-path + transform instead and the paint lands immediately. */
.ch{display:inline-block;transform:translateY(26px) rotateX(-42deg);
  transform-origin:50% 100%;clip-path:inset(0 0 100% 0);
  transition:transform var(--t-4) var(--e-out),clip-path var(--t-4) var(--e-out)}
.ch.in{transform:none;clip-path:inset(0 0 -25% 0)}
.hero .lede{font-size:20px;line-height:1.62;color:var(--fg-muted);max-width:52ch;margin:30px 0 38px}
.hero .lede b{color:var(--fg);font-weight:600}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{margin-top:34px;display:flex;gap:26px;flex-wrap:wrap;list-style:none;padding:0;
  font-family:var(--f-mono);font-size:12px;color:var(--fg-dim);letter-spacing:.05em}
.hero-meta li{display:inline-flex;align-items:center;gap:8px}
.hero-meta i{width:4px;height:4px;border-radius:50%;background:var(--accent);display:block;flex:none}

/* ═══════════════════  02 · PROOF  ═══════════════════ */
.proof{padding:0 0 120px}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border-hair);border:1px solid var(--border-hair);
  border-radius:var(--r-lg);overflow:hidden}
.pc{background:var(--bg-base);padding:34px 30px;transition:background var(--t-2) var(--e-out)}
.pc:hover{background:var(--bg-raised)}
.pc .v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:38px;
  font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--fg)}
.pc .v em{font-style:normal;color:var(--accent)}
.pc .k{max-width:8.5em;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:600;margin-top:12px;line-height:1.6}

/* ═══════════════════  03 · DUAL LINE  ═══════════════════ */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border-hair);
  border:1px solid var(--border-hair);border-radius:var(--r-lg);overflow:hidden}
.line{background:var(--bg-raised);padding:48px 44px;position:relative;overflow:hidden;
  transition:background var(--t-3) var(--e-out)}
.line:hover{background:var(--bg-overlay)}
.line::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent 70%);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-4) var(--e-out)}
.line:hover::before{transform:scaleX(1)}
.line .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:600}
.line h3{font-family:var(--f-display);font-size:clamp(22px,2.2vw,28px);font-weight:800;
  font-stretch:85%;letter-spacing:-.028em;line-height:1.12;margin:18px 0 14px}
.line > p{font-size:16px;color:var(--fg-muted);line-height:1.68;max-width:42ch}
.line ul{list-style:none;margin-top:28px;padding:24px 0 0;border-top:1px solid var(--border-hair)}
.line li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:14.5px;color:var(--fg-subtle)}
.line li::before{content:'';width:5px;height:5px;border-radius:1px;background:var(--accent);
  margin-top:8px;flex:none;box-shadow:0 0 8px var(--accent-glow)}
.line .go{margin-top:30px}

/* ═══════════════════════════════════════════════════════════════════════
   04 · THE BUILD — zig-zag circuit
   A signal traverses a boustrophedon trace with 45 deg chamfers; stages
   ignite as it reaches them.
   1. Never a scroll hijack — the signal plays on its own timeline on view.
   2. It is the ONLY animated pinned-feel section on the page.
   3. The base state is a plain stacked list. The circuit is an ENHANCEMENT
      layered on by JS (.is-live) only at >=900px with reduced-motion off.
   ═══════════════════════════════════════════════════════════════════════ */
.build{background:var(--bg-void);border-top:1px solid var(--border-hair);
  border-bottom:1px solid var(--border-hair)}
.zwrap{padding-top:8px}

/* ── FALLBACK (default): a plain stacked list. This is the base state. ── */
.zsvg{display:none}
.zsteps{position:relative;padding-left:0}
.zstep{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:24px 0;align-items:start;
  border-top:1px solid var(--border-hair)}
.zstep:first-child{border-top:0}
.zstep .zn{width:56px;height:56px;border-radius:var(--r-md);background:var(--bg-raised);
  border:1px solid var(--border-hair);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--accent)}
.zstep h3{font-family:var(--f-display);font-weight:800;font-stretch:85%;font-size:22px;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:8px;color:var(--fg)}
.zstep p{font-size:15.5px;color:var(--fg-muted);line-height:1.65;max-width:52ch}
.zstep .art{margin-top:14px;font-family:var(--f-mono);font-size:12.5px;color:var(--fg-dim);
  background:var(--bg-base);border:1px solid var(--border-hair);border-radius:var(--r-sm);
  padding:11px 13px;display:inline-block;letter-spacing:.02em}
.zstep .art b{color:var(--accent);font-weight:500}
.zhud{display:none}

/* ── LIVE (JS enables): on-view circuit in NORMAL FLOW — no pin, no runway. ── */
.is-live .zwrap{padding-top:0}
.is-live .zstage{position:relative;overflow:hidden}
.is-live .zinner{position:relative;width:100%;height:min(70vh,580px);min-height:500px;margin-top:32px}
.is-live .zsvg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.is-live .zsteps{position:absolute;inset:0;padding:0}
/* Cards are components MOUNTED ON the board: solid surface, so the trace runs
   behind them and disappears under them — what a trace does on a real PCB.
   Width and vertical position are computed in JS from the measured gap between
   the node columns; hand-tuned breakpoints fail between them. */
.is-live .zstep{display:block;position:absolute;padding:16px 18px;
  background:var(--bg-raised);border:1px solid var(--border-hair);
  border-radius:var(--r-md);box-shadow:var(--shadow-2);
  transform:translateY(-50%) translateX(var(--zx,0));
  opacity:0;pointer-events:none;
  transition:opacity 520ms var(--e-out),transform 520ms var(--e-out),border-color 320ms var(--e-out)}
.is-live .zstep[data-side="left"]{--zx:-30px}
.is-live .zstep[data-side="right"]{--zx:30px}
.is-live .zstep.on{opacity:1;--zx:0px;pointer-events:auto;border-color:var(--accent)}
.is-live .zstep .zn{display:none}          /* the SVG node IS the marker now */
.is-live .zstep h3{font-size:clamp(17px,1.35vw,21px);margin-bottom:6px}
.is-live .zstep p{font-size:13.5px;line-height:1.5;max-width:none;color:var(--fg-subtle)}
.is-live .zstep .art{margin-top:10px;font-size:11px;padding:7px 9px}

/* ── the trace ── */
.ztrace{fill:none;stroke:var(--w-08);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zhot{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px var(--accent-glow))}
/* the comet — a single bright dash that rides at the head */
.zcomet{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(200,255,61,.55))}

/* ── nodes ── */
.znode .hit{fill:var(--bg-void);stroke:var(--w-12);stroke-width:1.5}
.znode .core{fill:var(--fg-dim);transition:fill 320ms var(--e-out)}
.znode .lbl{font-family:var(--f-mono);font-size:12px;font-weight:600;fill:var(--fg-dim);
  transition:fill 320ms var(--e-out)}
.znode.lit .hit{stroke:var(--accent)}
.znode.lit .core{fill:var(--accent)}
.znode.lit .lbl{fill:var(--accent)}
.znode .ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:center}
.znode.lit .ring{animation:zring 900ms var(--e-out) forwards}
@keyframes zring{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(3.4)}}

/* the signal head */
.zhead{filter:drop-shadow(0 0 14px rgba(200,255,61,.9))}
.zhead .h1{fill:var(--accent)}
.zhead .h2{fill:var(--accent);opacity:.22}

/* ── HUD ── */
.is-live .zhud{display:flex;align-items:center;gap:18px;position:absolute;left:0;right:0;bottom:-34px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:600}
.zhud .stg{color:var(--accent);white-space:nowrap}
.zhud .nm{color:var(--fg);white-space:nowrap}
.zhud .track{flex:1;height:2px;background:var(--w-08);position:relative;overflow:hidden;min-width:60px}
.zhud .track i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);
  transform-origin:left;box-shadow:0 0 12px var(--accent-glow)}
.zhud .pct{font-variant-numeric:tabular-nums;color:var(--fg-subtle);min-width:42px;text-align:right}

/* ═══════════════════  05 · CAPABILITIES  ═══════════════════ */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.caps--4{grid-template-columns:repeat(4,1fr)}
.cap{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);
  padding:var(--card-pad);position:relative;overflow:hidden;
  transition:border-color var(--t-2) var(--e-out),transform var(--t-2) var(--e-out),
             box-shadow var(--t-2) var(--e-out)}
/* the top-edge specular — a Modern-Dark-Cinema signature */
.cap::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,var(--w-12),transparent);
  opacity:0;transition:opacity var(--t-3) var(--e-out)}
.cap:hover{border-color:var(--card-border-hover);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.cap:hover::before{opacity:1}
.cap .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-wash);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.cap .ic svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cap h3{font-family:var(--f-display);font-size:17.5px;font-weight:800;font-stretch:85%;
  letter-spacing:-.016em;margin-bottom:8px;line-height:1.28}
.cap p{font-size:14.5px;color:var(--fg-subtle);line-height:1.6}
.cap .kx{font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--accent);
  letter-spacing:.08em;margin-bottom:14px;display:block}
.cap .tl{margin-top:14px}

/* ═══════════════════  06 · WORK  ═══════════════════
   Six tracks, so the homepage can set hierarchy: a card spans 2 (threes),
   --half spans 3, --lead and --wide take the row. Archives use plain cards,
   three to a row. */
.work-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.case{grid-column:span 2;position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);
  transition:border-color var(--t-2) var(--e-out),transform var(--t-2) var(--e-out),
             box-shadow var(--t-2) var(--e-out)}
.case--half{grid-column:span 3}
.case--lead,.case--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.case--wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* the signal line — sweeps the top edge when the card goes live */
.case::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),transparent 75%);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-4) var(--e-out)}
.case.is-linked:hover,.case.is-linked:focus-within{border-color:var(--card-border-hover);
  transform:translateY(-3px);box-shadow:var(--shadow-2)}
.case.is-linked:hover::before,.case.is-linked:focus-within::before{transform:scaleX(1)}

/* the board — recessed, with a breath of plasma in the corner */
.case .vis{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border-hair);
  background:radial-gradient(120% 90% at 100% 0%,var(--plasma-a10),transparent 60%),var(--bg-void)}
.case--half .vis{aspect-ratio:16/8}
.case--lead .vis,.case--wide .vis{aspect-ratio:auto;min-height:300px;border-bottom:0;
  border-right:1px solid var(--border-hair)}
.case--lead .vis{min-height:400px}
.case .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-4) var(--e-out)}
.case.is-linked:hover .vis img{transform:scale(1.03)}
.vis-bar{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:14px 16px}
.vis-bar .idx{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--fg-dim)}
.vis-bar .cat{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-subtle);padding:5px 9px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--bg-void) 72%,transparent);border:1px solid var(--border-hair)}

/* the signature — a trace that runs into what was built */
.sig{position:absolute;inset:0;width:100%;height:100%;display:block}
.sig-grid{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1.6;stroke-linecap:round}
.sig-trace{fill:none;stroke:var(--w-12);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
/* dashoffset is paint-only on a 2 KB SVG — the process circuit drives the same property */
.sig-hot{fill:none;stroke:var(--accent);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1 1;stroke-dashoffset:.72;filter:drop-shadow(0 0 5px var(--accent-glow));
  transition:stroke-dashoffset var(--t-4) var(--e-out)}
.sig-dev{fill:none;stroke:var(--slate-500);stroke-width:1.5;stroke-linecap:round;transition:stroke var(--t-3) var(--e-out)}
.sig-dev rect{fill:var(--bg-raised)}
.sig-dev circle{fill:var(--slate-500);stroke:none;transition:fill var(--t-3) var(--e-out)}
.sig-node{fill:var(--fg-dim);transition:fill var(--t-3) var(--e-out)}
.sig-ring{fill:none;stroke:var(--accent);stroke-width:1.25;opacity:.6}
.sig-via{fill:var(--bg-void);stroke:var(--slate-500);stroke-width:1.25}
.case.is-linked:hover .sig-hot,.case.is-linked:focus-within .sig-hot{stroke-dashoffset:0}
.case.is-linked:hover .sig-dev,.case.is-linked:focus-within .sig-dev{stroke:var(--accent)}
.case.is-linked:hover .sig-dev circle,.case.is-linked:focus-within .sig-dev circle,
.case.is-linked:hover .sig-node,.case.is-linked:focus-within .sig-node{fill:var(--accent)}

/* the nameplate */
.case .body{display:flex;flex-direction:column;gap:12px;flex:1;padding:24px 26px 22px}
.case--lead .body,.case--wide .body{justify-content:center;padding:44px 48px}
.case h3{font-family:var(--f-display);font-size:22px;font-weight:800;font-stretch:85%;text-transform:uppercase;
  line-height:1.05;letter-spacing:-.005em;margin:0}
.case--lead h3{font-size:clamp(32px,3.4vw,48px);font-weight:900;letter-spacing:-.015em}
.case--wide h3{font-size:clamp(26px,2.6vw,34px)}
.case-link{color:inherit}
/* the title link covers the card: one tab stop, one link */
.case-link::after{content:'';position:absolute;inset:0;z-index:4}
@supports selector(:has(*)){
  .case-link:focus-visible{outline:none}
  .case:has(.case-link:focus-visible){outline:2px solid var(--ring);outline-offset:3px}
}
.case .metric{font-family:var(--f-mono);font-size:13px;color:var(--fg-subtle);margin:0}
.case .metric b{font-size:26px;font-weight:600;color:var(--accent);letter-spacing:-.03em;margin-right:6px;
  font-variant-numeric:tabular-nums}
.case .brief{font-size:14.5px;color:var(--fg-subtle);line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.case--lead .brief,.case--wide .brief{font-size:16.5px;color:var(--fg-muted);-webkit-line-clamp:5;max-width:44ch}
.case .stk{display:flex;gap:7px;flex-wrap:wrap;list-style:none;margin:4px 0 0;padding:0}
/* fg-dim on w-04 over raised composites to 4.43:1 — just under AA.
   The tint lifts the backdrop, so the text has to lift with it. */
.tag{font-family:var(--f-mono);font-size:10.5px;padding:4px 9px;border-radius:5px;
  background:var(--w-04);color:var(--fg-subtle);letter-spacing:.04em}
.case .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--border-hair)}
.case .meta{font-family:var(--f-mono);font-size:11.5px;color:var(--fg-dim);letter-spacing:.04em}
.case .vcs{margin-left:auto;font-size:13px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:7px}
.case.is-linked:hover .vcs .ar{transform:translateX(3px)}
@media(max-width:1080px){
  .case,.case--half{grid-column:span 1}
  .case--lead .body,.case--wide .body{padding:32px}
}
@media(max-width:900px){
  .case--lead,.case--wide{display:flex}
  .case--lead .vis,.case--wide .vis{aspect-ratio:16/10;min-height:0;border-right:0;border-bottom:1px solid var(--border-hair)}
}

/* ═══════════════════  07 · SPLIT / TERMINAL  ═══════════════════ */
.ims{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
.ims h2{font-family:var(--f-display);font-size:clamp(28px,3.4vw,42px);font-weight:900;
  font-stretch:85%;line-height:1.04;letter-spacing:-.024em;margin:18px 0 20px}
.ims h2 em{font-style:normal;color:var(--accent)}
.ims p{color:var(--fg-muted);font-size:17px;line-height:1.7;max-width:44ch;margin-bottom:18px}
.term{background:var(--bg-void);border:1px solid var(--border-hair);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-3)}
.term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;
  border-bottom:1px solid var(--border-hair);background:var(--bg-raised)}
.term-bar i{width:9px;height:9px;border-radius:50%;background:var(--w-12);display:block}
.term-bar .t{font-family:var(--f-mono);font-size:11.5px;color:var(--fg-dim);margin-left:12px;letter-spacing:.04em}
.term-bar .chip{margin-left:auto}
.term-body{padding:22px;font-family:var(--f-mono);font-size:12.5px;line-height:2.1;color:var(--fg-subtle)}
.term-body .l{display:flex;gap:14px}
.term-body .p{color:var(--accent);flex:none}
.term-body .v{color:var(--fg);margin-left:auto;font-variant-numeric:tabular-nums}
.term-body .ok{color:var(--success)}
.term-body .dim{color:var(--fg-dim)}
.term-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-hair);
  border-top:1px solid var(--border-hair)}
.tm{background:var(--bg-void);padding:16px 18px}
.tm .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:600}
.tm .v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;
  color:var(--fg);margin-top:7px;letter-spacing:-.02em}
.tm .v.g{color:var(--success)}

/* ═══════════════════  08 · CTA  ═══════════════════ */
.cta{position:relative;overflow:hidden;background:var(--bg-void);border-top:1px solid var(--border-hair)}
.cta::after{content:'';position:absolute;left:50%;bottom:-40%;width:900px;height:900px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--volt-a08),transparent 62%)}
.cta-in{text-align:center;max-width:760px;margin:0 auto;position:relative;z-index:2}
.cta h2{font-family:var(--f-display);font-size:clamp(34px,5vw,64px);font-weight:900;font-stretch:85%;
  line-height:1;letter-spacing:-.026em;text-transform:uppercase;margin:22px 0}
.cta h2 em{font-style:normal;color:var(--accent);text-shadow:0 0 70px var(--accent-glow)}
.cta p{color:var(--fg-muted);font-size:19px;line-height:1.6;max-width:48ch;margin:0 auto 40px}
.cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta .fine{margin-top:30px;font-family:var(--f-mono);font-size:12px;color:var(--fg-dim);letter-spacing:.05em}

/* ═══════════════════  FOOTER  ═══════════════════ */
.site-footer{border-top:1px solid var(--border-hair);padding:80px 0 44px;position:relative;z-index:1}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:48px}
.f-about p{font-size:14.5px;color:var(--fg-subtle);max-width:32ch;margin:18px 0 22px;line-height:1.65}
.f-addr{font-family:var(--f-mono);font-size:12px;color:var(--fg-dim);line-height:2;letter-spacing:.03em}
.f-addr a{color:var(--accent)}
.f-col h2,.f-col h3{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:600;margin-bottom:20px}
.f-col ul{list-style:none;padding:0}
.f-col li{margin-bottom:2px}
/* 24px inline links are below the touch floor — pad to 44px */
.f-col a{font-size:14.5px;color:var(--fg-subtle);display:inline-block;padding:10px 0;
  transition:color var(--t-1) var(--e-out)}
.f-col a:hover{color:var(--accent)}
.f-bot{margin-top:68px;padding-top:26px;border-top:1px solid var(--border-hair);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:var(--f-mono);font-size:11.5px;color:var(--fg-dim);letter-spacing:.05em}
.f-bot ul{display:flex;gap:24px;list-style:none;padding:0;flex-wrap:wrap}
.f-bot a:hover{color:var(--accent)}

/* ═══════════════════  REVEAL  ═══════════════════ */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity var(--t-3) var(--e-out),transform var(--t-3) var(--e-out)}
.rv.in{opacity:1;transform:none}

/* ═══════════════════  PAGE / POST  ═══════════════════ */
.page-hero{padding:calc(var(--header-h) + 60px) 0 56px;position:relative;z-index:1;
  border-bottom:1px solid var(--border-hair)}
.page-hero h1{font-family:var(--f-display);font-weight:900;font-stretch:85%;
  font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.024em;margin:18px 0 0}
.page-hero h1 em{font-style:normal;color:var(--accent)}
.page-hero .lede{color:var(--fg-muted);font-size:19px;line-height:1.6;max-width:60ch;margin-top:22px}
.page-hero .meta{margin-top:24px;display:flex;gap:20px;flex-wrap:wrap;font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.page-body{padding:72px 0 120px}
.entry-thumb{margin-bottom:48px;border:1px solid var(--border-hair);border-radius:var(--r-lg);overflow:hidden}
.entry-thumb img{display:block;width:100%}

/* long-form content — 66ch measure, everything Gutenberg can emit */
.prose{max-width:74ch;color:var(--fg-muted);font-size:17px;line-height:1.75}
.prose > * + *{margin-top:1.4em}
.prose h2{font-family:var(--f-display);font-weight:900;font-stretch:85%;color:var(--fg);
  font-size:clamp(26px,3.2vw,36px);line-height:1.1;letter-spacing:-.022em;margin-top:2em}
.prose h3{font-family:var(--f-display);font-weight:800;font-stretch:85%;color:var(--fg);
  font-size:22px;line-height:1.25;letter-spacing:-.015em;margin-top:1.8em}
.prose h4{font-family:var(--f-display);font-weight:700;font-stretch:85%;color:var(--fg);font-size:18px;margin-top:1.6em}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:.5em 0}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{content:'';position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:1px;
  background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.prose ol{padding-left:24px}
.prose ol li::marker{color:var(--accent);font-family:var(--f-mono);font-size:.85em}
.prose blockquote{border-left:2px solid var(--accent);padding:4px 0 4px 24px;margin-left:0;
  color:var(--fg);font-size:19px;line-height:1.6}
.prose blockquote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--f-mono);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.prose code,.prose kbd{font-family:var(--f-mono);font-size:.86em;background:var(--w-06);
  color:var(--accent);padding:2px 6px;border-radius:5px}
.prose pre{font-family:var(--f-mono);font-size:13px;line-height:1.8;background:var(--bg-void);
  border:1px solid var(--border-hair);border-radius:var(--r-md);padding:24px;overflow-x:auto;
  color:var(--fg-subtle)}
.prose pre code{background:none;padding:0;color:inherit}
.prose img,.prose figure{border-radius:var(--r-md)}
.prose figcaption,.wp-element-caption{font-family:var(--f-mono);font-size:11.5px;color:var(--fg-dim);
  margin-top:10px;letter-spacing:.04em}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px}
.prose th{text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-dim);font-weight:600;padding:0 18px 12px 0;
  border-bottom:1px solid var(--border)}
.prose td{padding:14px 18px 14px 0;border-bottom:1px solid var(--border-hair);color:var(--fg-subtle);
  vertical-align:top}
.prose td:first-child{color:var(--fg);font-weight:500}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--accent-glow);transition:text-decoration-color var(--t-1) var(--e-out)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose a.btn,.prose .wp-block-button__link{text-decoration:none}
.prose hr{margin:2.4em 0}

/* Gutenberg alignment + common blocks */
.prose .alignwide{max-width:min(1100px,calc(100vw - 2*var(--wrap-pad)));
  margin-left:calc((74ch - min(1100px,100%))/2)}
.prose .alignfull{max-width:none}
.alignleft{float:left;margin:0 24px 20px 0}
.alignright{float:right;margin:0 0 20px 24px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.wp-block-button__link{display:inline-flex;align-items:center;height:var(--btn-h);padding:0 var(--btn-px);
  background:var(--accent);color:var(--accent-fg);border-radius:var(--btn-radius);font-weight:600;
  font-size:15px;text-decoration:none}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--fg);
  border:1px solid var(--border-strong)}
.wp-block-separator{border:0;height:1px;background:var(--border-hair)}
.wp-block-pullquote,.wp-block-quote{border-left:2px solid var(--accent)}
.wp-block-code{background:var(--bg-void);border:1px solid var(--border-hair);border-radius:var(--r-md);padding:24px}
.wp-block-table td,.wp-block-table th{border-color:var(--border-hair)}

/* ═══════════════════  ARCHIVE / LIST  ═══════════════════ */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--t-2) var(--e-out),transform var(--t-2) var(--e-out),
             box-shadow var(--t-2) var(--e-out)}
.post-card:hover{border-color:var(--card-border-hover);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.post-card .thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.post-card .body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.post-card .cat{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:600}
.post-card h2,.post-card h3{font-family:var(--f-display);font-size:20px;font-weight:800;font-stretch:85%;
  line-height:1.35;letter-spacing:-.012em;margin:12px 0 10px}
.post-card h2 a:hover,.post-card h3 a:hover{color:var(--accent)}
.post-card p{font-size:14.5px;color:var(--fg-subtle);line-height:1.6;flex:1}
.post-card .date{margin-top:20px;font-family:var(--f-mono);font-size:11px;color:var(--fg-dim);letter-spacing:.06em}
.pagination{margin-top:64px;display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  height:44px;padding:0 12px;border:1px solid var(--border-hair);border-radius:var(--r-md);
  font-family:var(--f-mono);font-size:13px;color:var(--fg-subtle);
  transition:border-color var(--t-1) var(--e-out),color var(--t-1) var(--e-out)}
.pagination .page-numbers:hover{border-color:var(--border-strong);color:var(--fg)}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}
.post-nav{margin-top:80px;padding-top:32px;border-top:1px solid var(--border-hair);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14.5px}
.post-nav .lbl{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim);margin-bottom:6px}
.post-nav a:hover{color:var(--accent)}

/* filters (project archive) */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px}
.filters a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:var(--r-md);
  border:1px solid var(--border-hair);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-subtle);
  transition:border-color var(--t-1) var(--e-out),color var(--t-1) var(--e-out)}
.filters a:hover{border-color:var(--border-strong);color:var(--fg)}
.filters a.is-on{background:var(--accent-wash);border-color:var(--accent);color:var(--accent)}

/* ═══════════════════  FORM / INPUT  ═══════════════════ */
.field{display:flex;flex-direction:column;gap:8px}
.field label,.comment-form label{font-size:13.5px;font-weight:600;color:var(--fg)}
.field .hint{font-size:12.5px;color:var(--fg-dim)}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=search],
input[type=password],input[type=number],textarea,select{
  width:100%;min-height:var(--input-h);padding:12px 16px;border-radius:var(--r-md);
  background:var(--input-bg);border:1px solid var(--input-border);color:var(--fg);
  font-family:var(--f-body);font-size:15px;line-height:1.5;
  transition:border-color var(--t-1) var(--e-out),box-shadow var(--t-1) var(--e-out)}
textarea{min-height:150px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--fg-dim)}
input:hover,textarea:hover,select:hover{border-color:var(--fg-dim)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--input-border-focus);
  box-shadow:0 0 0 3px var(--accent-wash)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
.err{font-size:12.5px;color:var(--danger);font-weight:500}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form-grid .full{grid-column:1/-1}
.notice{padding:16px 18px;border-radius:var(--r-md);font-size:14.5px;margin-bottom:28px;
  border:1px solid var(--border-hair);background:var(--bg-raised)}
.notice--ok{border-color:rgba(61,224,224,.4);color:var(--success);background:rgba(61,224,224,.06)}
.notice--bad{border-color:rgba(255,77,77,.4);color:var(--danger);background:rgba(255,77,77,.06)}
.hp-field{position:absolute;left:-9999px;opacity:0}
.req{color:var(--accent);margin-left:3px}
.field .err{display:block}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:28px}
.form-foot .fine{font-size:12.5px;color:var(--fg-dim);max-width:38ch;margin:0}
.form-done{background:var(--bg-raised);border:1px solid var(--border-hair);border-left:2px solid var(--success);
  border-radius:var(--r-md);padding:34px 32px}
.form-done:focus{outline:none}
.form-done h2{font-family:var(--f-display);font-weight:800;font-stretch:85%;font-size:28px;letter-spacing:-.012em;margin:16px 0 10px}
.form-done p{color:var(--fg-muted);margin:0 0 22px;max-width:46ch}
/* the contact page's left column when the page itself has no copy */
.next-steps{list-style:none;margin:8px 0 0;padding:0;counter-reset:ns}
.next-steps li{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:20px 0;border-top:1px solid var(--border-hair)}
.next-steps li::before{counter-increment:ns;content:"0" counter(ns);grid-row:span 2;font-family:var(--f-mono);
  font-size:12px;font-weight:600;color:var(--accent);padding-top:4px}
.next-steps b{font-family:var(--f-display);font-stretch:85%;font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--fg)}
.next-steps span{font-size:14.5px;color:var(--fg-subtle);line-height:1.6}

/* comments */
.comments{margin-top:80px;padding-top:48px;border-top:1px solid var(--border-hair)}
.comments h2{font-family:var(--f-display);font-size:24px;font-weight:800;font-stretch:85%;margin-bottom:28px}
.comment-list{list-style:none;padding:0}
.comment-list ol{list-style:none;padding-left:28px}
.comment-body{padding:22px 0;border-bottom:1px solid var(--border-hair)}
.comment-meta{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13.5px}
.comment-meta img{border-radius:var(--r-sm)}
.comment-metadata{font-family:var(--f-mono);font-size:11px;color:var(--fg-dim)}
.comment-content{font-size:15px;color:var(--fg-muted)}
.comment-respond{margin-top:36px}
.comment-form p{margin-bottom:18px}
.comment-form .submit,.wpcf7-submit,input[type=submit],button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);padding:0 var(--btn-px);
  background:var(--accent);color:var(--accent-fg);border:0;border-radius:var(--btn-radius);
  font-family:var(--f-body);font-size:15px;font-weight:600;cursor:pointer;
  transition:background var(--t-1) var(--e-out),box-shadow var(--t-2) var(--e-out)}
.comment-form .submit:hover,input[type=submit]:hover,button[type=submit]:hover{
  background:var(--accent-hover);box-shadow:0 8px 40px var(--accent-glow)}

/* search form */
.search-form{display:flex;gap:10px;max-width:520px}
.search-form input[type=search]{flex:1}

/* 404 */
.e404{text-align:center;padding:160px 0}
.e404 .code{font-family:var(--f-mono);font-size:clamp(72px,14vw,180px);font-weight:600;line-height:1;
  color:var(--accent);letter-spacing:-.05em;text-shadow:0 0 90px var(--accent-glow)}
.e404 h1{font-family:var(--f-display);font-size:clamp(26px,3.4vw,40px);font-weight:900;font-stretch:85%;
  margin:24px 0 16px;text-transform:uppercase;letter-spacing:-.02em}
.e404 p{color:var(--fg-muted);max-width:48ch;margin:0 auto 34px}
.e404 .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ═══════════════════  RESPONSIVE  ═══════════════════ */
@media(max-width:1080px){
  .dual,.ims{grid-template-columns:1fr;gap:1px}
  .ims{gap:56px}
  .caps,.work-grid,.post-grid,.caps--4{grid-template-columns:repeat(2,1fr)}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:900px){
  .nav > .primary-nav,.nav-r .btn{display:none}
  .burger{display:block}
}
@media(max-width:720px){
  .section{padding:88px 0}
  .wrap{--wrap-pad:20px}
  .hero-in{padding:80px 0 60px}
  /* one column at 375 — the copy occupies the full width, so the lattice
     drops back and the scrim goes vertical instead of horizontal */
  .hero__canvas{opacity:.42}
  .hero::after{background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg-base) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg-base) 80%, transparent) 62%,
    transparent 100%)}
  .caps,.caps--4,.work-grid,.post-grid,.proof-grid,.form-grid{grid-template-columns:1fr}
  .line{padding:36px 26px}
  /* The circuit never engages below 900px — this is the list it falls back to. */
  .zstep{grid-template-columns:44px 1fr;gap:16px}
  .zstep .zn{width:44px;height:44px}
  .term-mods{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr;gap:36px}
  .f-bot{flex-direction:column;align-items:flex-start}
  .page-body{padding:56px 0 88px}
  .prose .alignwide{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv,.ch{opacity:1!important;transform:none!important;clip-path:none!important}
  /* Reduced motion: no pin, no runway, no signal. The stacked list, fully lit. */
  .zstep{opacity:1!important;transform:none!important}
  .znode .core,.znode .lbl{fill:var(--accent)}
  .zhot{stroke-dashoffset:0!important}
}

/* sw-card-grid-fix (2026-09-12): uniform service cards + centered trailing row */
.caps,.caps--4{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.caps > .cap{flex:0 1 calc((100% - 32px)/3)}
.caps--4 > .cap{flex:0 1 calc((100% - 48px)/4)}
@media(max-width:1080px){.caps > .cap,.caps--4 > .cap{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:600px){.caps > .cap,.caps--4 > .cap{flex-basis:100%}}