:host{display:block;background:var(--mask-deep);color:var(--silk);font:400 1.02rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  --mask:#0e2d63; --mask-2:#153a7c; --mask-deep:#071a3d;
  --chip:#060b18; --chip-2:#0d1527; --chip-line:#20325a;
  --gold:#d8a94a; --gold-dim:#8f7035; --gold-hot:#ffd983;
  --silk:#eef3fb; --silk-dim:#b4c6e6; --silk-line:rgba(238,243,251,.22);
  --trace-off:#86672f;
  --led-off:#1c3a70; --led-g:#46e08a; --led-a:#ffb23d;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"B612 Mono",ui-monospace,monospace;
  --sx:44px;
  --pad:96px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
:host{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}
::selection{background:var(--gold);color:var(--chip)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-hot);outline-offset:3px;border-radius:2px}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}

/* ── board ───────────────────────────────────────── */
.board{position:relative;background:var(--mask);overflow:clip;
  background-image:radial-gradient(circle,rgba(238,243,251,.07) 1.4px,transparent 1.6px);background-size:30px 30px}
.traces{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.board>*:not(.traces){position:relative;z-index:1}
.hole{position:absolute!important;width:20px;height:20px;border-radius:50%;background:var(--mask-deep);
  border:3px solid var(--gold);z-index:2;box-shadow:0 0 0 3px var(--mask)}
.hole.tl{left:12px;top:92px}.hole.tr{right:12px;top:92px}
.hole.bl{left:12px;bottom:14px}.hole.br{right:12px;bottom:14px}

/* traces */
.t-base,.t-live,.t-flow{fill:none;stroke-linejoin:round;stroke-linecap:butt}
.t-base{stroke:var(--trace-off)}
.t-live{stroke:var(--gold-hot)}
.t-flow{stroke:#fffbe9;stroke-linecap:round;stroke-dasharray:2 40;opacity:0}
.trace.on .t-flow{opacity:.95;animation:flow 1.2s linear infinite}
.trace.hot .t-base{stroke:var(--gold)}
.trace.hot .t-live{stroke:#fff1c4}
@keyframes flow{to{stroke-dashoffset:-42}}

/* ── topbar ──────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:20!important;display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:64px;padding:0 var(--pad);background:var(--mask-deep);border-bottom:1px solid var(--silk-line)}
.brand{font:700 .82rem/1 var(--mono);letter-spacing:.14em;color:var(--silk);text-decoration:none;white-space:nowrap}
.brand small{color:var(--gold);font-weight:400;margin-left:10px}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font:400 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--silk-dim);text-decoration:none;
  padding:8px 0;background:linear-gradient(var(--gold),var(--gold)) left bottom/0 2px no-repeat;transition:background-size .3s var(--ease),color .2s}
.nav a:hover{color:var(--silk);background-size:100% 2px}
.vs{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;width:188px;flex:none;border:2px solid #46639a;border-radius:6px;background:var(--chip);padding:2px}
.vs .thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:3px;background:var(--gold);transition:transform .22s var(--ease)}
.vs[data-active=embedded] .thumb{transform:translateX(100%)}
.vs button{position:relative;z-index:1;border:0;background:transparent;font:400 .7rem/1 var(--mono);letter-spacing:.06em;padding:9px 0;border-radius:3px;color:var(--silk-dim);white-space:nowrap;transition:color .22s}
.vs button[aria-pressed=true]{color:var(--chip);font-weight:700}
.vs button[aria-pressed=false]:hover{color:var(--silk)}

/* ── hero ────────────────────────────────────────── */
.shell{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.hero{padding-top:34px;padding-bottom:40px}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:34px}
.note{font:400 .72rem/1.7 var(--mono);letter-spacing:.12em;color:var(--silk-dim);text-transform:uppercase}
.note b{color:var(--silk);font-weight:700}
.note .st{color:var(--gold)}
:host([data-powered=true]) .note .st{color:var(--led-g)}

.pwr{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pwr-label{font:700 .72rem/1 var(--mono);letter-spacing:.14em;color:var(--silk)}
.pwr-row{position:relative;display:flex;align-items:center;gap:12px}
.pwr-pad{position:absolute;left:-26px;top:50%;width:14px;height:14px;margin:-7px 0 0 0;border-radius:50%;background:var(--gold);border:3px solid var(--gold);box-shadow:inset 0 0 0 3px var(--mask-deep)}
:host([data-powered=true]) .pwr-pad{background:var(--gold-hot);border-color:var(--gold-hot)}
.sw{position:relative;width:152px;height:66px;background:var(--chip);border:2px solid #5a78b0;border-radius:6px;padding:0;display:block}
.sw::before{content:"";position:absolute;left:12px;right:12px;top:18px;bottom:18px;background:#03060f;border:1px solid #20325a;border-radius:3px}
.sw .tag{position:absolute;bottom:-20px;font:700 .7rem/1 var(--mono);letter-spacing:.14em;color:var(--silk-dim)}
.sw .tag.off{left:6px}.sw .tag.on{right:6px}
.sw[aria-checked=true] .tag.on{color:var(--led-g)}
.sw[aria-checked=false] .tag.off{color:var(--led-a)}
.knob{position:absolute;left:6px;top:9px;width:60px;height:46px;background:#070d1c;border:2px solid #8fa8d6;border-radius:4px;
  background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(238,243,251,.16) 6px 8px);
  transition:transform .22s var(--ease),border-color .2s}
.sw[aria-checked=true] .knob{transform:translateX(76px);border-color:var(--gold-hot)}
.sw:hover .knob{border-color:var(--silk)}
.sw:active .knob{filter:brightness(1.25)}
.pwr-status{display:flex;align-items:center;gap:10px;margin-top:14px;font:400 .72rem/1 var(--mono);letter-spacing:.1em;color:var(--silk-dim);text-transform:uppercase}
.hint{color:var(--gold)}
:host([data-powered=true]) .hint{display:none}
:host([data-powered=false]) .pwr .led{animation:blink 1.6s steps(1) infinite}
@keyframes blink{0%,60%{background:var(--led-a);box-shadow:0 1px 6px rgba(255,178,61,.7)}61%,100%{background:var(--led-off);box-shadow:none}}

.led{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--led-off);border:1px solid #4d6ea8;flex:none;transition:background .25s,box-shadow .25s}
:host([data-powered=true]) .pwr .led{background:var(--led-g);box-shadow:0 1px 7px rgba(70,224,138,.8);border-color:var(--led-g)}
.sec.live .h-led,[data-stagger].live .led.a{background:var(--led-a);box-shadow:0 1px 7px rgba(255,178,61,.75);border-color:var(--led-a)}

.hero-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:72px;align-items:stretch}
.chip{position:relative;background:var(--chip);border:1px solid var(--chip-line);border-radius:10px;box-shadow:0 14px 28px rgba(2,8,24,.5)}
.chip::before{content:"";position:absolute;left:14px;top:14px;width:9px;height:9px;border-radius:50%;background:#1a2a50}
.pins{position:absolute;display:flex;pointer-events:none}
.pins.l,.pins.r{top:26px;bottom:26px;flex-direction:column;justify-content:space-between}
.pins.l{left:-12px}.pins.r{right:-12px}
.pins.t,.pins.b{left:34px;right:34px;justify-content:space-between}
.pins.t{top:-12px}.pins.b{bottom:-12px}
.pin{display:block;background:var(--gold-dim);transition:background .3s}
.pins.l .pin,.pins.r .pin{width:12px;height:7px}
.pins.t .pin,.pins.b .pin{width:7px;height:12px}
.live .pin,.chip.live .pin{background:var(--gold)}
:host([data-powered=true]) #u1 .pin{background:var(--gold)}

.hero-chip{padding:46px 52px 34px 56px;display:flex;flex-direction:column;gap:22px}
.hero-name{font:900 clamp(3.4rem,7.4vw,6rem)/.88 var(--display);letter-spacing:.005em;text-transform:uppercase;color:var(--silk);text-wrap:balance}
.hero-role{font:700 .9rem/1.2 var(--mono);letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.hero-lede{max-width:56ch;color:var(--silk-dim);font-size:1.08rem}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:4px;font:700 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border:2px solid var(--gold);transition:transform .15s var(--ease),background .2s,color .2s}
.btn.primary{background:var(--gold);color:var(--chip)}
.btn.primary:hover{background:var(--gold-hot);border-color:var(--gold-hot)}
.btn.ghost{color:var(--gold)}
.btn.ghost:hover{background:rgba(216,169,74,.14)}
.btn:active{transform:translateY(1px)}
.viewhint{margin-top:2px;font:400 .72rem/1.4 var(--mono);letter-spacing:.06em;color:var(--silk-dim)}
.viewhint a{color:var(--gold);text-underline-offset:3px}
.chip-status{display:flex;align-items:center;gap:12px;margin-top:6px;padding-top:18px;border-top:1px solid var(--chip-line);font:400 .74rem/1 var(--mono);letter-spacing:.14em;color:#a6b9de;text-transform:uppercase}
.chip-status .led{background:var(--led-off)}
:host([data-powered=true]) .chip-status .led{background:var(--led-g);border-color:var(--led-g);box-shadow:0 1px 7px rgba(70,224,138,.8)}
:host([data-powered=true]) .chip-status{color:var(--led-g)}

.plate{align-self:end;background:var(--mask-2);border:1px solid var(--silk-line);padding:22px 22px 0;position:relative;display:flex;flex-direction:column}
.plate::before,.plate::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--silk);opacity:.6}
.plate::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.plate::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.plate img{width:100%;height:auto;aspect-ratio:525/475;object-fit:cover}
.plate figcaption{font:400 .72rem/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--silk-dim);padding:14px 0 18px}
.plate figcaption b{color:var(--silk);display:block}

.legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:46px;padding-top:14px;border-top:1px dashed var(--silk-line);font:400 .7rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--silk-dim)}
.legend span:not(.lg-note){color:var(--silk)}
.legend .lg-note{margin-left:auto}

/* ── sections ────────────────────────────────────── */
.sec{padding-top:84px;padding-bottom:20px}
.sec-head{display:flex;align-items:center;gap:18px;margin-bottom:52px}
.sec-head h2{font:800 clamp(2.4rem,4.4vw,3.6rem)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.h-led{margin-top:6px}

.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:84px;row-gap:64px}
.proj{position:relative}
.refdes{position:absolute;top:-26px;left:2px;font:700 .8rem/1 var(--mono);letter-spacing:.14em;color:var(--silk)}
.proj .chip{height:100%;display:flex;flex-direction:column;padding:26px 28px 24px;gap:14px;transition:border-color .4s}
.proj .chip.live{border-color:#3f5f9c}
.proj .chip .led{position:absolute;right:18px;top:16px}
.proj figure{position:relative;margin:12px 0 2px;border-radius:4px;overflow:hidden;background:#03060f;aspect-ratio:16/8;border:1px solid var(--chip-line)}
.proj figure img,.proj figure .sk{width:100%;height:100%;object-fit:cover;display:block}
.fig-note{position:absolute;right:8px;bottom:8px;font:400 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--silk-dim);background:rgba(3,6,15,.82);padding:5px 7px;border-radius:2px}
.proj-body{display:flex;flex-direction:column;gap:14px;flex:1}
.nolink{font:400 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--silk-dim)}
.proj.wide{grid-column:1/-1}
.proj.wide .chip{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:36px;align-items:center}
.proj.wide figure{margin:12px 0 0;aspect-ratio:16/7}
.proj h3{font:800 1.9rem/1 var(--display);text-transform:uppercase;letter-spacing:.015em}
.proj p{color:var(--silk-dim);font-size:.97rem;max-width:62ch}
.spec{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;padding:12px 0;border-top:1px dashed var(--chip-line);border-bottom:1px dashed var(--chip-line);font:400 .74rem/1.5 var(--mono);font-variant-numeric:tabular-nums}
.spec dt{color:var(--gold);letter-spacing:.1em}
.spec dd{color:var(--silk)}
.proj p.tags{font:400 .7rem/1.7 var(--mono);color:#a6b9de;letter-spacing:.04em}
.links{display:flex;gap:22px;margin-top:auto;padding-top:4px}
.links a{font:700 .76rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.links a:hover{color:var(--gold-hot)}

/* experience */
.revs{position:relative;margin-left:0}
.revs::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--silk-line)}
.rev{position:relative;display:grid;grid-template-columns:84px 190px minmax(0,1fr);gap:0 28px;padding:30px 0 32px 36px;border-top:1px solid var(--silk-line)}
.rev:first-child{border-top:0;padding-top:6px}
.rev-pad{position:absolute;left:-7px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--gold-dim);border:3px solid var(--gold-dim);box-shadow:inset 0 0 0 3px var(--mask);transition:background .3s,border-color .3s}
.rev:not(:first-child) .rev-pad{top:38px}
.rev.live .rev-pad{background:var(--gold-hot);border-color:var(--gold-hot)}
.rev-id{font:900 3rem/.9 var(--display);color:var(--gold)}
.rev-id small{display:block;font:400 .7rem/1.4 var(--mono);letter-spacing:.16em;color:var(--silk-dim);margin-top:6px}
.rev-date{font:400 .78rem/1.5 var(--mono);color:var(--silk-dim);letter-spacing:.06em;padding-top:8px;font-variant-numeric:tabular-nums}
.rev h3{font:600 1.18rem/1.35 var(--sans);margin-bottom:6px}
.rev h3 span{color:var(--gold)}
.rev p{color:var(--silk-dim);max-width:68ch}
.pts{list-style:none;padding:0;display:grid;gap:10px;max-width:70ch}
.pts li{position:relative;padding-left:20px;color:var(--silk-dim)}
.pts li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:2px;background:var(--gold)}
.rev .more{display:inline-block;margin-top:12px;font:700 .76rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;background:none;border:0;padding:0}
.rev.fold{opacity:.92}

/* skills */
.skills-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:96px;align-items:start}
.buses{position:relative}
.buses h3,.bom h3{font:700 .74rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--silk-dim);margin-bottom:10px}
.bus{position:relative;height:62px;display:flex;align-items:flex-start;padding:6px 0 0 30px;cursor:default}
.bus .name{font:700 1.05rem/1 var(--mono);letter-spacing:.08em;color:var(--silk)}
.bus .tp{position:absolute;right:26px;top:6px;font:400 .7rem/1 var(--mono);letter-spacing:.14em;color:var(--silk-dim)}
.bus .pad{position:absolute;bottom:10px;width:16px;height:16px;border-radius:50%;background:var(--gold-dim);border:3px solid var(--gold-dim);box-shadow:inset 0 0 0 3px var(--mask);transition:background .3s,border-color .3s}
.bus .pad.l{left:-8px}.bus .pad.r{right:-8px}
.bus.live .pad{background:var(--gold-hot);border-color:var(--gold-hot)}
.bom-row{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--silk-line)}
.bom-row:first-of-type{border-top:0;padding-top:6px}
.bom-row dt{font:700 .74rem/1.9 var(--mono);letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.bom-row dd{display:flex;flex-wrap:wrap;gap:8px}
.part{font:400 .82rem/1 var(--mono);padding:7px 11px;border:1px solid rgba(238,243,251,.4);border-radius:3px;letter-spacing:.03em;transition:background .2s,border-color .2s}
.part:hover{background:rgba(216,169,74,.16);border-color:var(--gold)}

/* contact */
.contact{padding-bottom:70px}
.j1{position:relative;background:var(--chip);border:1px solid var(--chip-line);border-radius:6px;max-width:980px}
.j1-row{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:18px;padding:22px 40px;border-top:1px solid #16264a}
.j1-row:first-child{border-top:0}
.j1-row .pin-l,.j1-row .pin-r{position:absolute;top:50%;margin-top:-4px;width:12px;height:8px;background:var(--gold-dim);transition:background .3s}
.j1-row .pin-l{left:-12px}.j1-row .pin-r{right:-12px}
.j1-row.live .pin-l,.j1-row.live .pin-r{background:var(--gold-hot)}
.j1-row .k{font:400 .74rem/1.4 var(--mono);letter-spacing:.14em;color:var(--silk-dim);text-transform:uppercase}
.j1-row .k b{color:var(--gold);display:block;font-weight:700}
.j1-row a{font:500 1.35rem/1.3 var(--sans);text-decoration:none;border-bottom:2px solid var(--gold-dim);width:fit-content;transition:border-color .2s,color .2s;overflow-wrap:anywhere}
.j1-row a:hover{border-color:var(--gold-hot);color:var(--gold-hot)}
.j1-row .loc{font:500 1.35rem/1.3 var(--sans)}
.contact .btns{margin-top:30px}

footer.foot{border-top:1px solid var(--silk-line);padding:26px var(--pad) 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font:400 .72rem/1.6 var(--mono);letter-spacing:.1em;color:var(--silk-dim);text-transform:uppercase}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{text-decoration:none}.foot a:hover{color:var(--gold-hot)}


/* ── responsive ──────────────────────────────────── */
@media (max-width:1180px){:host{--pad:72px}.skills-grid{gap:56px}.hero-main{gap:56px}}
@media (max-width:999px){
  :host{--pad:56px;--sx:30px}
  .chips{grid-template-columns:1fr;row-gap:60px}
  .proj.wide .chip{display:flex}
  .legend .lg-note{margin-left:0;flex-basis:100%}
  .hero-main{grid-template-columns:1fr;gap:48px}
  .plate{max-width:360px;align-self:start}
  .skills-grid{grid-template-columns:1fr;gap:48px}
  .nav{gap:18px}
  .rev{grid-template-columns:70px minmax(0,1fr);gap:4px 22px}
  .rev-date{grid-column:2;grid-row:1;padding-top:0}
  .rev .body{grid-column:2}
  .hole{display:none!important}
}
@media (max-width:700px){
  :host{--pad:26px;--sx:14px}
  .shell{padding-left:44px;padding-right:20px}
  .topbar{padding:0 14px 0 14px;gap:10px}
  .nav,.brand small{display:none}
  .vs{width:150px}
  .vs button{font-size:.62rem}
  .hero{padding-top:26px}
  .hero-top{flex-direction:column-reverse;align-items:stretch;gap:18px}
  .pwr{align-items:flex-start}
  .hero-chip{padding:38px 22px 26px 26px}
    .btn{padding:13px 16px;font-size:.72rem}
  .pins.t,.pins.b{left:22px;right:22px}
  .pins.l,.pins.r{top:18px;bottom:18px}
  .sec{padding-top:64px}
  .proj .chip{padding:22px 18px 20px}
  .proj .chip .led{right:12px;top:12px}
  .bom-row{grid-template-columns:1fr;gap:10px}
  .j1-row{grid-template-columns:1fr;gap:6px;padding:18px 20px}
  .j1-row a,.j1-row .loc{font-size:1.1rem}
  footer.foot{padding:22px 20px 34px 44px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
.proj.wide .chip{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.proj.tall figure{aspect-ratio:1096/1300;background:#2c2c2e}
.proj.tall figure img{object-fit:contain}
.proj.tall .proj-body{align-self:center}
.proj figure img{transition:transform .5s var(--ease)}
.sw:focus-visible{outline-offset:6px}
@media (max-width:999px){.proj.tall figure{aspect-ratio:1096/1300;max-width:420px}}

.proj.wide:not(.tall) figure{aspect-ratio:4/3}
.chip-status .refmark{margin-left:auto;color:#8ea2c9;letter-spacing:.18em}