@font-face{font-family:Inter;src:url(inter-latin.woff2) format("woff2");font-display:swap}@font-face{font-family:JetBrains Mono;src:url(jetbrains-mono-latin.woff2) format("woff2");font-display:swap}@font-face{font-family:Newsreader;src:url(newsreader-regular-latin.woff2) format("woff2");font-display:swap}@font-face{font-family:Newsreader;src:url(newsreader-italic-latin.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--paper:#faf9f7;--ink:#0f0f0f;--red:#c81e2d;--stone:#e5e3df;--slate:#9ca3a0;--muted:#555b58;--serif:Newsreader,Georgia,serif;--sans:Inter,Arial,sans-serif;--mono:"JetBrains Mono",monospace;--rule:1px solid var(--stone)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}.shell{width:min(1440px,calc(100vw - 96px));margin:auto}.skip{position:fixed;left:16px;top:-60px;z-index:10;padding:10px;background:var(--ink);color:white}.skip:focus{top:16px}.mast{padding:54px 0 68px;border-bottom:var(--rule)}.wordmark{font:500 30px var(--serif);letter-spacing:-.04em;text-decoration:none}.label{margin:42px 0 22px;color:var(--muted);font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase}.mast h1{max-width:900px;margin:0;font:500 clamp(58px,7vw,104px)/.9 var(--serif);letter-spacing:-.05em}.mast h1 em,h2 em{color:var(--red);font-weight:500}.mast>p:last-child{max-width:610px;margin:32px 0 0;color:var(--muted);font-size:18px}.concept{padding:68px 0 80px;border-bottom:var(--rule)}.concept>header{display:grid;grid-template-columns:1.15fr .85fr;gap:10vw;align-items:end;margin-bottom:48px}.concept .label{margin:0 0 24px}.concept h2{margin:0;font:500 clamp(42px,4.6vw,72px)/.95 var(--serif);letter-spacing:-.045em}.concept header>div:last-child{max-width:540px}.concept header p{margin:0;color:var(--muted)}.concept header p b{display:block;margin-bottom:12px;color:var(--ink);font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase}.replay{margin-top:22px;padding:10px 14px;border:1px solid var(--red);background:transparent;color:var(--red);font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.replay:hover{background:var(--red);color:white}.replay:focus-visible{outline:2px solid var(--red);outline-offset:4px}figure{margin:0;border-top:1px solid var(--ink)}svg{display:block;width:100%;height:auto;max-height:690px;border-bottom:var(--rule)}figcaption{padding:15px 0;color:var(--muted);font:400 9px var(--mono);letter-spacing:.09em;text-transform:uppercase;text-align:left}svg text{font:500 10px var(--mono);letter-spacing:.06em;text-anchor:middle}svg .sub{font-size:8px;fill:#626865}svg .note{font-size:8px;fill:#626865;text-anchor:start}.wire,.record-links path,.signal-lines path{fill:none;stroke:var(--slate);stroke-width:1;stroke-dasharray:4 5}.box rect,.state rect,.step rect,.event rect,.phase rect{fill:rgba(250,249,247,.96);stroke:var(--slate)}.box.red rect{stroke:var(--red)}.token,.record-token,.bus-token,.return-token{opacity:0}.token circle,.record-token circle,.bus-token rect{fill:var(--red)}.token.response circle,.return-token rect{fill:var(--ink)}.token text,.bus-token text,.return-token text{fill:var(--red);text-anchor:start;font-size:8px}.return-token text{fill:var(--ink)}.state{opacity:0}.state rect{stroke:var(--red)}.state text{font-size:8px}.source-frame rect,.source-frame path,.output rect{fill:none;stroke:var(--slate)}.source-frame text{font-size:8px}.scan{opacity:0}.scan rect{fill:var(--red);opacity:.13}.unverified path{stroke:var(--slate);fill:none}.unverified text{font-size:8px;fill:#747a77}.person circle,.person path,.agent circle{fill:none;stroke:var(--ink)}.form>rect{fill:var(--paper);stroke:var(--slate)}.form>rect:not(:first-child){fill:#fff}.form .changed{stroke:var(--red)}.fail,.recover{opacity:0}.fail path,.recover path{fill:none;stroke:var(--red);stroke-width:1.5}.fail text,.recover text{fill:var(--red);font-size:8px}.signals circle{fill:var(--slate)}.signals text{text-anchor:start}.filter path{fill:rgba(229,227,223,.25);stroke:var(--ink)}.filter line{stroke:var(--slate)}.blocked{opacity:0}.blocked path{stroke:var(--slate)}.blocked text{font-size:8px;fill:#666}.selected{fill:none;stroke:var(--red);stroke-width:1.5;stroke-dasharray:5 4}.device rect{fill:var(--paper);stroke:var(--ink)}.device .display{font:italic 500 24px var(--serif);letter-spacing:0}.device line{stroke:var(--red)}.record-links path{stroke-dasharray:none}.record circle,.record rect{fill:var(--paper);stroke:var(--slate)}.record.job circle,.record.assessment circle,.record.workflow circle{stroke:var(--red)}.event{opacity:0}.record-token circle:last-child{fill:var(--paper)}.grid{opacity:.45}.grid+path,.grid path{stroke:var(--stone);fill:none}.bus{fill:none;stroke:var(--ink);stroke-width:2}.chip rect,.chip path,.board>rect,.board>g rect{fill:var(--paper);stroke:var(--ink)}.board>rect{stroke-width:2}.phase{opacity:0}.phase rect{stroke:var(--ink)}.schematic svg{background:#f7f5f1}.is-motion [class~="token"],.is-motion .state,.is-motion .scan,.is-motion .fail,.is-motion .recover,.is-motion .blocked,.is-motion .event,.is-motion .phase,.is-motion .record-token,.is-motion .bus-token,.is-motion .return-token{will-change:transform,opacity}.is-complete [style*="will-change"]{will-change:auto!important}footer{display:flex;justify-content:space-between;padding:34px 0 50px;font:400 9px var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:800px){.shell{width:min(100% - 48px,760px)}.concept>header{grid-template-columns:1fr;gap:28px}.concept{padding:54px 0 66px}.mast{padding-top:40px}svg{max-height:none}.concept h2{font-size:clamp(40px,8vw,60px)}}
@media(max-width:520px){.shell{width:calc(100% - 28px)}.mast{padding:36px 0 48px}.wordmark{font-size:26px}.mast h1{font-size:52px}.mast>p:last-child{font-size:16px}.concept{padding:44px 0 58px}.concept h2{font-size:42px}.concept>header{margin-bottom:30px}figure{overflow:hidden}svg{width:130%;margin-left:-15%;min-height:330px}figcaption{line-height:1.5}footer{display:grid;gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.replay{display:none}.token,.scan,.record-token,.bus-token,.return-token{opacity:0!important}.state,.fail,.recover,.blocked,.event,.phase{opacity:1!important;transform:none!important;will-change:auto!important}}
.reduced .replay{display:none}.reduced .token,.reduced .scan,.reduced .record-token,.reduced .bus-token,.reduced .return-token{opacity:0!important}.reduced .state,.reduced .fail,.reduced .recover,.reduced .blocked,.reduced .event,.reduced .phase{opacity:1!important;transform:none!important}
.wordmark{color:inherit}#grid path{fill:none;stroke:var(--stone);stroke-width:1}
.site-header{height:92px;border-bottom:var(--rule)}.site-bar{height:100%;display:flex;align-items:center;justify-content:space-between}.site-bar nav{display:flex;align-items:center;gap:24px}.site-bar nav a{color:inherit;font:500 9px var(--mono);letter-spacing:.1em;text-decoration:none;text-transform:uppercase}.site-bar .contact-link{padding:11px 14px;border:1px solid var(--red);color:var(--red)}
@media(max-width:520px){.site-header{height:auto;padding:24px 0}.site-bar{display:grid;gap:24px}.site-bar nav{gap:15px;flex-wrap:wrap}.site-bar .contact-link{padding:8px 10px}}

/* Homepage integration: isolate the standalone portfolio styles and keep every
   project chapter in normal document flow. */
body{font:16px/1.55 var(--sans)}
.shell{width:var(--shell)}
.hero>figure{border-top:0}
.hero>figure svg{border-bottom:0}
body>footer{display:block;padding:0;font:inherit;letter-spacing:normal;text-transform:none}

.engineering-portfolio{padding-bottom:0}
.engineering-portfolio .portfolio-head{
  height:auto;
  margin:0;
  padding:76px 0 88px;
  position:static;
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(320px,1.65fr) minmax(360px,2.35fr);
  gap:48px;
  align-items:start;
  border:0;
}
.engineering-portfolio .portfolio-head>.label{margin:4px 0 0}
.engineering-portfolio .portfolio-head h2{margin:0;font:500 clamp(46px,4vw,68px)/.98 var(--serif);letter-spacing:-.045em}
.engineering-portfolio .portfolio-head>div{max-width:650px;color:#555a57}
.engineering-portfolio .portfolio-head>div p{margin:0}
.engineering-portfolio .portfolio-head>div p+p{margin-top:16px}

.engineering-portfolio .portfolio-project{
  display:grid;
  grid-template-columns:minmax(320px,2fr) minmax(0,3fr);
  min-height:0;
  border-top:1px solid var(--ink);
  scroll-margin-top:24px;
}
.engineering-portfolio .project-header{
  height:auto;
  min-width:0;
  margin:0;
  padding:64px clamp(34px,4vw,64px) 64px 0;
  position:static;
  display:block;
  border:0;
  border-right:var(--rule);
  z-index:auto;
}
.engineering-portfolio .project-kicker{margin:0 0 30px;color:#565c59;font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.engineering-portfolio .project-title{margin:0;font:500 clamp(42px,4vw,62px)/.98 var(--serif);letter-spacing:-.045em}
.engineering-portfolio .project-rule{width:100%;margin:30px 0 28px;border-top:var(--rule)}
.engineering-portfolio .project-summary{margin:0}
.engineering-portfolio .project-summary-copy{
  margin:0;
  display:grid;
  grid-template-columns:minmax(150px,180px) minmax(0,1fr);
  gap:24px;
  color:#555a57;
  font-size:15px;
  line-height:1.55;
}
.engineering-portfolio .summary-label{display:block;margin:2px 0 0;color:var(--ink);font:500 9px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.engineering-portfolio .summary-text{display:block;min-width:0}
.engineering-portfolio .project-meta{
  margin:30px 0 0;
  padding:22px 0 0;
  border-top:var(--rule);
  color:#5c625f;
  font:500 9px/1.75 var(--mono);
  letter-spacing:.075em;
  overflow-wrap:anywhere;
}
.engineering-portfolio .project-visual{
  min-width:0;
  margin:0;
  padding:44px 0 32px clamp(34px,4vw,64px);
  position:relative;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:visible;
  border-top:0;
}
.engineering-portfolio .project-visual>.replay{align-self:flex-start;margin:0 0 26px}
.engineering-portfolio .diagram-container{width:100%;min-width:0;overflow:hidden}
.engineering-portfolio .diagram-container svg{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0;
  overflow:visible;
  border-bottom:var(--rule);
}
.engineering-portfolio .project-visual figcaption{margin:0;padding:15px 0 0;border:0;text-align:left;word-spacing:normal}

.engineering-portfolio .portfolio-project.diagram-first{grid-template-columns:minmax(0,3fr) minmax(320px,2fr)}
.engineering-portfolio .portfolio-project.diagram-first>.project-visual{grid-column:1;grid-row:1;padding:44px clamp(34px,4vw,64px) 32px 0}
.engineering-portfolio .portfolio-project.diagram-first>.project-header{grid-column:2;grid-row:1;padding:64px 0 64px clamp(34px,4vw,64px);border-right:0;border-left:var(--rule)}

.engineering-portfolio .portfolio-secondary{grid-template-columns:minmax(320px,2fr) minmax(0,3fr);min-height:0}
.engineering-portfolio .portfolio-secondary .project-title{font-size:clamp(38px,3.2vw,52px)}
.engineering-portfolio .portfolio-secondary .project-header{padding-top:54px;padding-bottom:54px}
.engineering-portfolio .portfolio-secondary .project-visual{padding-top:36px;padding-bottom:28px}

@media(max-width:1100px){
  .engineering-portfolio .portfolio-head{grid-template-columns:minmax(120px,.7fr) minmax(280px,1.3fr) minmax(300px,2fr);gap:34px}
  .engineering-portfolio .portfolio-project,.engineering-portfolio .portfolio-project.diagram-first,.engineering-portfolio .portfolio-secondary{grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr)}
  .engineering-portfolio .project-summary-copy{grid-template-columns:1fr;gap:10px}
}

@media(max-width:820px){
  .engineering-portfolio .portfolio-head{display:block;padding:56px 0 66px}
  .engineering-portfolio .portfolio-head>.label{margin:0 0 28px}
  .engineering-portfolio .portfolio-head h2{margin-bottom:30px;font-size:clamp(42px,12vw,56px)}
  .engineering-portfolio .portfolio-project,.engineering-portfolio .portfolio-project.diagram-first,.engineering-portfolio .portfolio-secondary{display:flex;flex-direction:column;min-height:0}
  .engineering-portfolio .project-header,.engineering-portfolio .portfolio-project.diagram-first>.project-header{
    order:1;
    width:100%;
    padding:48px 0 40px;
    border:0;
  }
  .engineering-portfolio .project-kicker{margin-bottom:24px}
  .engineering-portfolio .project-title,.engineering-portfolio .portfolio-secondary .project-title{font-size:clamp(40px,11.5vw,52px)}
  .engineering-portfolio .project-rule{margin:26px 0 24px}
  .engineering-portfolio .project-summary-copy{display:block;font-size:15px}
  .engineering-portfolio .summary-label{margin:0 0 12px}
  .engineering-portfolio .project-meta{margin-top:26px;padding-top:18px}
  .engineering-portfolio .project-visual,.engineering-portfolio .portfolio-project.diagram-first>.project-visual{
    order:2;
    width:100%;
    padding:0 0 38px;
    border:0;
  }
  .engineering-portfolio .project-visual>.replay{margin-bottom:20px}
  .engineering-portfolio .diagram-container{overflow:hidden}
  .engineering-portfolio .diagram-container svg{width:100%;min-height:0;margin:0;overflow:visible}
  .engineering-portfolio .project-visual figcaption{padding-top:12px;font-size:7px;line-height:1.5}
}

@media(max-width:820px){
  body>header{height:74px}
  body>header .menu{display:block}
  body>header nav{display:none;position:absolute;top:74px;left:0;right:0;padding:20px 16px 28px;background:var(--paper);border-bottom:1px solid;flex-direction:column;align-items:stretch;gap:0}
  body>header nav.open{display:flex}
  body>header nav a{padding:17px 0;border-bottom:var(--rule)}
  body>header .nav-cta{text-align:center}
}