/* ============================================================
   Aahan Bagga — portfolio
   Theme: engineering drafting sheet. Cream graph paper, cobalt
   line-work, rust for action, pencil for margin notes.
   Subject: silicon — floorplans, dataflow, memory.
   ============================================================ */

:root{
  /* paper + rules */
  --paper:      #EADFC9;
  --sheet:      #FEF9F1;
  --sheet-2:    #F5EEE0;
  --grid-fine:  rgba(154,133,96,0.20);
  --grid-bold:  rgba(154,133,96,0.34);
  --rule:       #C7B79A;
  --rule-firm:  #A9906A;

  /* ink */
  --ink:        #2E2E2B;
  --ink-2:      #5B5852;
  --ink-3:      #666155;

  /* accents */
  --cobalt:     #1B3BC7;
  --cobalt-ink: #16309F;
  --cobalt-wash:rgba(27,59,199,0.08);
  --rust:       #E76051;   /* solid fills only */
  --rust-ink:   #B33020;   /* rust used as text or line-work */

  /* block families: compute is cool + rust, memory is ochre, I/O is ink */
  --c-cpu:      #1B3BC7;
  --c-npu:      #B33020;
  --c-gpu:      #0E7C86;
  --c-mem:      #96682A;
  --c-io:       #55524A;

  /* type */
  --sans:   'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pencil: 'Architects Daughter', 'Comic Sans MS', cursive;

  --max-w: 1180px;
  --nav-h: 60px;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------- graph paper */
body{
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;

  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg,  var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, var(--grid-fine) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg,  var(--grid-bold) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(90deg, var(--grid-bold) 0 1px, transparent 1px 100px);
  background-attachment: fixed;
}

body::after{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

h1,h2,h3{ margin: 0; font-weight: 600; color: var(--ink); }
p{ margin: 0; }
ul,ol,dl{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--cobalt); color: #fff; padding: 10px 16px;
}
.skip-link:focus{ left: 0; }

:focus-visible{ outline: 2px solid var(--cobalt); outline-offset: 3px; }

/* --------------------------------------------------- registration marks */
.reg{
  position: fixed; width: 22px; height: 22px; z-index: 40;
  pointer-events: none; opacity: .5;
}
.reg::before,.reg::after{ content:""; position: absolute; background: var(--rule-firm); }
.reg::before{ width: 100%; height: 1px; top: 50%; }
.reg::after{ width: 1px; height: 100%; left: 50%; }
.reg-tl{ top: 14px;    left: 14px; }
.reg-tr{ top: 14px;    right: 14px; }
.reg-bl{ bottom: 14px; left: 14px; }
.reg-br{ bottom: 14px; right: 14px; }

/* ------------------------------------------------------- coordinate HUD */
.hud{
  position: fixed; top: 30px; left: 34px; z-index: 45;
  font-family: var(--mono); font-size: 10px; line-height: 1.5;
  color: var(--ink-3); letter-spacing: .04em;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.hud b{ font-weight: 400; color: var(--ink-2); }

.sheet-mail{
  position: fixed; top: 30px; right: 40px; z-index: 45;
  font-family: var(--pencil); font-size: 13px;
  color: var(--ink-2); letter-spacing: .03em;
  pointer-events: none;
}
@media (max-width: 1080px){ .hud, .sheet-mail{ display: none; } }

/* ================================================================== NAV */
.nav{
  position: fixed; z-index: 60;
  top: 16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 120px); max-width: 980px;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 8px 0 18px;
  background: var(--sheet);
  border: 1px solid var(--ink);
  transition: box-shadow .25s var(--ease);
}
.nav.scrolled{ box-shadow: 3px 3px 0 rgba(46,46,43,.16); }

.nav-brand{
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  flex: none;
}
.nav-mark{ width: 26px; height: 26px; }
.nav-mark .mark-pkg{ fill: var(--sheet-2); stroke: var(--ink); stroke-width: 1.5; }
.nav-mark .mark-die{ fill: var(--cobalt); }
.nav-mark .mark-pins path{ stroke: var(--ink); stroke-width: 1.4; fill: none; }

.nav-links{
  display: flex; align-items: center; gap: 20px;
  margin-left: auto; font-size: 13.5px;
}
.nav-links > a:not(.nav-cta){
  color: var(--ink-2); padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav-links > a:not(.nav-cta):hover{ color: var(--ink); border-bottom-color: var(--cobalt); }

.nav-cta{
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding-right: 16px; margin-left: 4px;
  background: var(--sheet-2);
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 12px;
  transition: background .18s;
}
.nav-cta:hover{ background: #EFE6D4; }
.nav-cta-tile{
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: var(--rust); color: #fff;
  border-right: 1px solid var(--ink);
}
.nav-cta-tile svg{ width: 16px; height: 16px; }

.nav-toggle{
  display: none; margin-left: auto;
  width: 42px; height: 42px;
  background: var(--sheet-2); border: 1px solid var(--ink);
  cursor: pointer;
  flex-direction: column; gap: 4px; align-items: center; justify-content: center;
}
.nav-toggle span{ width: 16px; height: 1.5px; background: var(--ink); }

/* ================================================================= HERO */
.hero{ position: relative; padding: calc(var(--nav-h) + 88px) 40px 64px; }
.hero-inner{
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr);
  gap: 52px; align-items: center;
}

.pencil{
  font-family: var(--pencil);
  font-size: 15px; color: var(--ink-2); letter-spacing: .02em;
}
.pencil-hero{
  display: inline-block;
  margin-bottom: 20px; padding-bottom: 3px;
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-.7deg);
}

.hero-title{
  font-size: clamp(2.9rem, 6.6vw, 5.1rem);
  font-variation-settings: 'wdth' 112;
  font-weight: 600; line-height: .92;
  letter-spacing: -.035em;
  margin-bottom: 22px;
}
.hero-role{
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.4; max-width: 32ch;
  margin-bottom: 20px; color: var(--ink);
}
.hero-sub{
  font-size: 15px; color: var(--ink-2);
  max-width: 58ch; margin-bottom: 28px;
}

.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }

.btn{
  display: inline-flex; align-items: center; gap: 12px;
  height: 46px; padding-right: 18px;
  border: 1px solid var(--ink);
  background: var(--sheet);
  font-family: var(--mono); font-size: 12.5px;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(46,46,43,.2); }
.btn:active{ transform: translate(0,0); box-shadow: none; }
.btn-tile{
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-right: 1px solid var(--ink);
}
.btn-tile svg{ width: 15px; height: 15px; }
.btn-primary .btn-tile{ background: var(--rust); color: #fff; }
.btn-ghost .btn-tile{ background: var(--sheet-2); color: var(--ink); }

.hero-links{
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  font-family: var(--mono); font-size: 12px;
}
.hero-links a, .link-copy{
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-2);
  background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.hero-links a:hover, .link-copy:hover{ color: var(--cobalt); border-bottom-color: var(--cobalt); }

/* ============================================== DIE FLOORPLAN (hero fig) */
.hero-fig{ margin: 0; }
.fig-hint{ margin-bottom: 6px; font-size: 14px; color: var(--ink-3); }
.die{ width: 100%; height: auto; display: block; overflow: visible; }

/* package + ball grid, under the die */
.pkg > rect{ fill: var(--sheet-2); stroke: var(--rule-firm); stroke-width: 1; }
.pkg .balls circle{ fill: none; stroke: var(--rule-firm); stroke-width: .9; }

.die-edge{ fill: var(--sheet); stroke: var(--ink); stroke-width: 1.8; }
.seal{ fill: none; stroke: var(--rule-firm); stroke-width: 1; stroke-dasharray: 4 3; }
.die-id{
  font-family: var(--mono); font-size: 9.5px;
  fill: var(--ink-3); letter-spacing: .06em;
}

/* network-on-chip */
.noc .noc-bus{
  fill: none; stroke: var(--cobalt);
  stroke-width: 3; opacity: .16;
}
.noc .routers rect{ fill: var(--sheet); stroke: var(--cobalt-ink); stroke-width: 1.3; }
.noc .pkt{ fill: var(--cobalt); }

/* blocks: light tint at rest, saturated when live */
.blk{ cursor: pointer; }
.blk .blk-bg{
  fill: color-mix(in srgb, var(--c) 9%, var(--sheet));
  stroke: var(--c); stroke-width: 1.5;
  transition: fill .18s var(--ease);
}
.blk .cell{
  fill: color-mix(in srgb, var(--c) 16%, var(--sheet));
  stroke: var(--c); stroke-width: .9;
  transition: fill .18s var(--ease);
}
.blk .cell-lines path{
  fill: none; stroke: var(--c); stroke-width: .8; opacity: .45;
}
.blk .blk-label{
  font-family: var(--mono); font-size: 11px;
  fill: var(--c); letter-spacing: .1em;
  text-transform: uppercase;
}
.blk[data-blk="cpu"]  { --c: var(--c-cpu); }
.blk[data-blk="npu"]  { --c: var(--c-npu); }
.blk[data-blk="gpu"]  { --c: var(--c-gpu); }
.blk[data-blk="l3"]   { --c: var(--c-mem); }
.blk[data-blk="sram"] { --c: var(--c-mem); }
.blk[data-blk="io"]   { --c: var(--c-io); }
.blk[data-blk="phy"]  { --c: var(--c-io); }

/* live: hovered, focused, or selected */
.blk.is-live .blk-bg{ fill: color-mix(in srgb, var(--c) 26%, var(--sheet)); }
.blk.is-live .cell{   fill: color-mix(in srgb, var(--c) 52%, var(--sheet)); }
.blk.is-live .blk-bg{ stroke-width: 2.4; }

/* everything else recedes while one block is live */
.die.has-live .blk:not(.is-live){ opacity: .38; }
.die.has-live .noc{ opacity: .5; }
.die .blk, .die .noc{ transition: opacity .2s var(--ease); }

.blk:focus{ outline: none; }
.blk:focus-visible .blk-bg{ stroke: var(--ink); stroke-width: 2.6; }

/* memory PHY pads */
.pads rect{ fill: var(--c-io); opacity: .55; }
.blk.is-live .pads rect{ opacity: 1; }

.die .dim line{ stroke: var(--cobalt-ink); stroke-width: 1; }
.die .dim .tick{ fill: none; stroke: var(--cobalt-ink); stroke-width: 1.2; }
.die .dim text{
  font-family: var(--mono); font-size: 10px;
  fill: var(--cobalt-ink); letter-spacing: .04em;
}

/* readout panel under the die */
.readout{
  margin-top: 14px;
  border: 1px solid var(--ink);
  background: var(--sheet);
  padding: 13px 16px 15px;
  min-height: 104px;
}
.readout-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}
.readout-head b{
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  font-variation-settings: 'wdth' 104;
  letter-spacing: -.01em;
  color: var(--ro-c, var(--ink));
}
.readout-head span{
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .04em;
}
.readout p{ font-size: 14px; color: var(--ink-2); }

/* ============================================================= SECTIONS */
.section, .hero, .contact{ scroll-margin-top: calc(var(--nav-h) + 40px); }
.section{ padding: 84px 40px; }
.section-inner{ max-width: var(--max-w); margin: 0 auto; }

.sheet-head{ display: flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
.sheet-head::after{
  content:""; flex: 1; height: 1px;
  background: var(--rule-firm); align-self: center;
}
.sheet-no{
  flex: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--sheet); background: var(--ink);
  padding: 4px 9px;
}
.section-title{
  flex: none;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-variation-settings: 'wdth' 108;
  letter-spacing: -.028em; line-height: 1.05;
}
.section-lede{
  max-width: 66ch; margin: 18px 0 0;
  font-size: 15.5px; color: var(--ink-2);
}
.section .pencil{ margin-top: 10px; }

/* ---------------------------------------------------------------- about */
.about-grid{
  margin-top: 34px;
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: 52px; align-items: start;
}
.about-copy p{ font-size: 16.5px; max-width: 62ch; }
.about-copy p + p{ margin-top: 16px; }

.spec{ border: 1px solid var(--ink); background: var(--sheet); }
.spec > div{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--rule);
}
.spec > div:last-child{ border-bottom: 0; }
.spec dt{ font-size: 13px; color: var(--ink-2); }
.spec dd{
  margin: 0; display: flex; align-items: baseline; gap: 2px;
  font-family: var(--mono); color: var(--cobalt-ink);
}
.spec dd b{ font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.spec dd i{ font-style: normal; font-size: 12px; color: var(--ink-3); }

/* ============================================ SYSTOLIC ARRAY (sheet 03) */
.array-rig{
  margin-top: 30px;
  display: grid; grid-template-columns: minmax(0,1fr) 320px;
  gap: 22px; align-items: start;
}

.array-stage{
  border: 1px solid var(--ink);
  background: var(--sheet);
  padding: 14px;
}
#sysCanvas{
  display: block; width: 100%; height: auto;
  /* the engine sets the backing store; this keeps layout stable pre-JS */
  aspect-ratio: 620 / 560;
}

.array-side{
  display: flex; flex-direction: column; gap: 18px;
  border: 1px solid var(--ink);
  background: var(--sheet);
  padding: 18px;
}

/* playback controls */
.ctl-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.ctl{
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding-right: 13px;
  border: 1px solid var(--ink);
  background: var(--sheet-2);
  font-family: var(--mono); font-size: 11.5px;
  cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.ctl:hover{ transform: translate(-1px,-1px); box-shadow: 2px 2px 0 rgba(46,46,43,.2); }
.ctl:active{ transform: none; box-shadow: none; }
.ctl-tile{
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: var(--sheet); color: var(--ink);
  border-right: 1px solid var(--ink);
}
.ctl-tile svg{ width: 13px; height: 13px; }
.ctl-play .ctl-tile{ background: var(--rust); color: #fff; }
.ctl-play[aria-pressed="true"] .ctl-tile{ background: var(--cobalt); }

/* knobs */
.knob{ display: flex; flex-direction: column; gap: 7px; }
.knob label, .knob-label{
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.knob label b, .knob-label b{
  font-size: 12.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--cobalt-ink);
}
.knob-note{ font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

/* segmented size picker */
.seg{ display: flex; border: 1px solid var(--ink); }
.seg-b{
  flex: 1; padding: 8px 0;
  background: var(--sheet-2);
  border: 0; border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-2); cursor: pointer;
  transition: background .16s, color .16s;
}
.seg-b:last-child{ border-right: 0; }
.seg-b:hover{ background: #EFE6D4; }
.seg-b.is-on{ background: var(--cobalt); color: #fff; }

/* range sliders, drawn like a drafting scale */
.knob input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 0;
  background: transparent; cursor: pointer;
}
.knob input[type="range"]::-webkit-slider-runnable-track{
  height: 3px; background: var(--rule-firm);
}
.knob input[type="range"]::-moz-range-track{
  height: 3px; background: var(--rule-firm);
}
.knob input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 18px; margin-top: -7.5px;
  background: var(--sheet);
  border: 1.5px solid var(--ink);
}
.knob input[type="range"]::-moz-range-thumb{
  width: 12px; height: 18px; border-radius: 0;
  background: var(--sheet);
  border: 1.5px solid var(--ink);
}
.knob input[type="range"]:focus-visible{ outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* gauges */
.gauges{
  border-top: 1px solid var(--rule);
  padding-top: 4px;
}
.gauges > div{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}
.gauges > div:last-child{ border-bottom: 0; }
.gauges dt{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.gauges dd{
  margin: 0; font-family: var(--mono); font-size: 12.5px;
  color: var(--cobalt-ink); font-weight: 500;
}
.gauge-bar dd{ display: flex; align-items: center; gap: 8px; }
.bar{
  display: block; width: 92px; height: 8px;
  background: var(--sheet-2);
  border: 1px solid var(--rule-firm);
}
.bar i{
  display: block; height: 100%; width: 0%;
  background: var(--cobalt);
  transition: width .12s linear;
}
.array-note{ margin-top: 2px; font-size: 14px; }

/* legend */
.array-legend{
  margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-2); letter-spacing: .03em;
}
.array-legend span{ display: inline-flex; align-items: center; gap: 7px; }
.sw{ width: 11px; height: 11px; border: 1px solid var(--ink); flex: none; }
.sw-idle{ background: var(--sheet-2); }
.sw-live{ background: var(--cobalt); }
.sw-edge{ background: var(--rust); }
.sw-act{  background: var(--c-mem); }
.sw-psum{ background: var(--c-gpu); }

/* ----------------------------------------------------------- experience */
/* a via chain down a metal layer */
.linkage{ margin-top: 34px; position: relative; padding-left: 34px; }
.linkage::before{
  content:""; position: absolute;
  left: 7px; top: 10px; bottom: 10px; width: 1px;
  background: var(--rule-firm);
}
.link-stop{ position: relative; }
.link-stop + .link-stop{ margin-top: 18px; }

/* the via */
.link-stop::before{
  content:""; position: absolute;
  left: -34px; top: 23px;
  width: 15px; height: 15px;
  background: var(--cobalt);
  border: 1.8px solid var(--ink);
  box-shadow: inset 0 0 0 3.5px var(--sheet);
}
.link-stop::after{
  content:""; position: absolute;
  left: -19px; top: 30px;
  width: 19px; height: 1px;
  background: var(--rule-firm);
}

.link-card{
  background: var(--sheet);
  border: 1px solid var(--ink);
  padding: 20px 22px 22px;
}
.link-head{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.link-head h3{
  font-size: 18.5px; letter-spacing: -.015em;
  font-variation-settings: 'wdth' 104;
}
.link-badge{
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: var(--cobalt-ink);
  border: 1px solid var(--cobalt);
  background: var(--cobalt-wash);
  padding: 2px 7px;
}
.link-meta{
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  margin-top: 5px;
}
.link-card ul{ margin-top: 14px; display: grid; gap: 9px; }
.link-card li{
  position: relative; padding-left: 18px;
  font-size: 15px; color: var(--ink-2); max-width: 84ch;
}
.link-card li::before{
  content:""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1.5px; background: var(--rust-ink);
}

/* --------------------------------------------------------------- builds */
.build-grid{
  margin-top: 34px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.build{
  display: flex; flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--ink);
}
.build-body{ padding: 20px 20px 18px; flex: 1; }
.build-body h3{
  font-size: 18px; letter-spacing: -.015em; margin-bottom: 9px;
  font-variation-settings: 'wdth' 104;
}
.build-body p{ font-size: 14.5px; color: var(--ink-2); }

.parts{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.parts li{
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  background: var(--sheet-2);
  padding: 3px 7px;
}

.build-block{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 20px;
  border-top: 1px solid var(--ink);
  background: var(--sheet-2);
  font-family: var(--mono); font-size: 11px;
}
.build-tag{ color: var(--cobalt-ink); font-weight: 500; }
.build-note{ color: var(--ink-3); font-size: 10.5px; }
.build-block a{
  color: var(--ink);
  border-bottom: 1px solid var(--rust-ink);
  padding-bottom: 1px;
}
.build-block a:hover{ color: var(--rust-ink); }

/* -------------------------------------------------------------- toolbox */
.bom{ margin-top: 34px; border: 1px solid var(--ink); background: var(--sheet); }
.bom-row{
  display: grid; grid-template-columns: 190px minmax(0,1fr);
  gap: 22px; align-items: start;
  padding: 17px 20px;
  border-bottom: 1px solid var(--rule);
}
.bom-row:last-child{ border-bottom: 0; }
.bom-row:last-child .bom-ref{ color: var(--rust-ink); }
.bom-ref{
  font-family: var(--mono); font-size: 12px;
  color: var(--cobalt-ink); padding-top: 2px;
}
.bom-row .parts{ margin-top: 0; }

/* ------------------------------------------------------------ education */
.edu{
  margin-top: 34px;
  background: var(--sheet); border: 1px solid var(--ink);
  padding: 24px;
}
.edu-head{
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.edu-head h3{ font-size: 21px; letter-spacing: -.02em; font-variation-settings: 'wdth' 106; }
.edu-year{ font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.edu-line{ margin-top: 14px; font-size: 15px; color: var(--ink-2); }

/* -------------------------------------------------------------- contact */
.contact{ padding: 84px 40px 56px; }
.contact-title{
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-variation-settings: 'wdth' 110;
  letter-spacing: -.032em; line-height: 1.04;
  max-width: 24ch;
}
.contact-sub{ margin-top: 18px; max-width: 58ch; font-size: 16px; color: var(--ink-2); }
.contact-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.titleblock{
  margin-top: 56px;
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1fr .7fr .6fr;
  border: 1px solid var(--ink);
  background: var(--sheet);
}
.tb-cell{
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.tb-cell:last-child{ border-right: 0; }
.tb-cell span{
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.tb-cell b{
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--ink); overflow-wrap: anywhere;
}
.tb-rev{ color: var(--rust-ink) !important; }

/* ---------------------------------------------------------------- toast */
.toast{
  position: fixed; z-index: 200;
  left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  background: var(--ink); color: var(--sheet);
  font-family: var(--mono); font-size: 12px;
  padding: 10px 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s var(--ease);
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ========================================================== RESPONSIVE */
@media (max-width: 1080px){
  .array-rig{ grid-template-columns: 1fr; }
  .array-side{ order: -1; }
  .ctl-group{ flex: 1; }
}

@media (max-width: 1000px){
  .hero-inner{ grid-template-columns: 1fr; gap: 40px; }
  .hero-fig{ max-width: 560px; }
  .about-grid{ grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 860px){
  .nav{ width: calc(100% - 32px); padding-right: 8px; }
  .nav-toggle{ display: flex; }
  .nav-links{
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--sheet);
    border: 1px solid var(--ink);
    padding: 8px;
    display: none;
  }
  .nav-links.open{ display: flex; }
  .nav-links > a:not(.nav-cta){ padding: 11px 10px; border-bottom: 1px solid var(--rule); }
  .nav-links > a:not(.nav-cta):last-of-type{ border-bottom: 0; }
  .nav-cta{ margin: 8px 0 0; }

  .hero{ padding: calc(var(--nav-h) + 60px) 22px 52px; }
  .section, .contact{ padding-left: 22px; padding-right: 22px; }
  .section{ padding-top: 64px; padding-bottom: 64px; }

  .sheet-head{ flex-wrap: wrap; gap: 12px; }
  .sheet-head::after{ display: none; }

  .titleblock{ grid-template-columns: 1fr 1fr; }
  .tb-cell{ border-bottom: 1px solid var(--rule); }
  .tb-cell:nth-child(odd){ border-right: 1px solid var(--rule); }
  .tb-cell:nth-child(even){ border-right: 0; }
  .tb-wide{ grid-column: 1 / -1; }
}

@media (max-width: 560px){
  .build-grid{ grid-template-columns: 1fr; }
  .bom-row{ grid-template-columns: 1fr; gap: 10px; }
  .linkage{ padding-left: 26px; }
  .link-stop::before{ left: -26px; width: 13px; height: 13px; }
  .link-stop::after{ left: -13px; width: 13px; }
  .hero-links{ gap: 14px; }
  .array-stage{ padding: 8px; }
  .array-side{ padding: 14px; }
  .seg-b{ font-size: 10px; }
}