:root {
  --bg:#211f20;
  --text:#f3f1ef;
  --muted:#969092;
  --muted2:#6e696a;
  --max:1280px;
  --header-h:76px;
  --sticky-top:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Arial Narrow","Aptos Narrow","Helvetica Neue Condensed","HelveticaNeue-Condensed","Roboto Condensed","Helvetica Neue",Arial,sans-serif;font-stretch:condensed;
  line-height:1.42;letter-spacing:.006em;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(calc(100% - 64px),var(--max));margin:0 auto}

.site-header{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);
  background:var(--bg);
}
.header-inner{height:100%;display:flex;align-items:center;justify-content:flex-end}
.nav{
  display:flex;gap:32px;
  opacity:0;transform:translateY(5px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
  font-size:14px;text-transform:uppercase;letter-spacing:.11em;
}
.nav.visible{opacity:1;transform:none;pointer-events:auto}
.nav a{color:#c6c1c2} .nav a:hover{color:#fff}

#morphLogo{
  position:fixed;z-index:120;display:block;
  will-change:left,top,width;
}
#morphLogo img{display:block;width:100%;height:auto}

.hero{height:100svh;min-height:620px;position:relative}
.scroll-hint{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:#625e5f;transition:opacity .25s;
}
.scroll-hint.hidden{opacity:0}

.section{padding:0 0 122px;scroll-margin-top:var(--header-h)}
.sticky-title{
  position:sticky;top:var(--sticky-top);z-index:20;
  margin:0;
  background:var(--bg);
  padding:31px 0 28px;
  font-size:clamp(30px,3.1vw,43px);
  line-height:1;font-weight:500;
  letter-spacing:.018em;text-transform:uppercase;
}
.sticky-title::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:18px;
  background:linear-gradient(to bottom,var(--bg),rgba(33,31,32,0));
  transform:translateY(100%);
  pointer-events:none;
}

.work-content{padding-top:54px}
.work-list{max-width:1000px}
.work-item{
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:42px;padding:12px 0;align-items:center;
}
.work-name{font-size:20px;font-weight:500;letter-spacing:.015em}
.work-desc{
  max-width:640px;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.45;color:var(--muted);letter-spacing:0;
}

.portfolio-section{padding-bottom:0}
.portfolio-group{padding:0 0 106px}
.portfolio-group .sticky-title{font-size:clamp(25px,2.4vw,34px);padding-top:28px;padding-bottom:24px}
.portfolio-list{max-width:1140px;padding-top:42px}
.portfolio-row{
  display:grid;grid-template-columns:76px minmax(260px,1.15fr) minmax(300px,1fr);
  gap:30px;padding:7px 0;align-items:start;
}
.portfolio-row .year{font-size:14px;color:#777173}
.portfolio-row .title{font-size:17px;font-weight:500;color:#f0eeee}
.portfolio-row .meta{
  margin-top:2px;font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:12px;color:#777173;letter-spacing:0;
}
.portfolio-row .role{
  padding-top:2px;font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:12.5px;line-height:1.45;color:#969092;letter-spacing:0;
}

.contact-section{padding-bottom:120px}
.contact-content{padding-top:48px}
.contact-grid{max-width:820px;display:grid;gap:12px}
.contact-row{
  display:grid;grid-template-columns:105px minmax(0,1fr);
  gap:28px;font-size:17px;
}
.contact-label{
  color:#6f696b;text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;padding-top:4px;
}
.contact-row a:hover{text-decoration:underline;text-underline-offset:4px}

footer{
  padding:0 0 30px;color:#5f5a5c;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:10px;letter-spacing:.05em;
}
.footer-row{display:flex;justify-content:space-between;gap:20px}

@media(max-width:840px){
  :root{--header-h:66px;--sticky-top:66px}
  .wrap{width:min(calc(100% - 32px),var(--max))}
  .nav{gap:18px;font-size:11px}
  .section{padding-bottom:92px}
  .sticky-title{padding:24px 0 22px}
  .work-content{padding-top:36px}
  .work-item{grid-template-columns:1fr;gap:2px;padding:11px 0;align-items:start}
  .portfolio-group{padding-bottom:78px}
  .portfolio-list{padding-top:32px}
  .portfolio-row{grid-template-columns:56px 1fr;gap:15px;padding:7px 0}
  .portfolio-row .role{grid-column:2}
}
@media(max-width:560px){
  .nav{gap:13px} .nav a{font-size:10px}
  .portfolio-row .title{font-size:16px}
  .contact-row{grid-template-columns:80px 1fr;gap:14px;font-size:15px}
}

.portfolio-header{
  padding:42px 0 22px;
}
.portfolio-header-row{
  display:flex;
  align-items:baseline;
  gap:20px;
  flex-wrap:wrap;
}
.portfolio-header-title{
  margin:0;
  font-size:clamp(30px,3.1vw,43px);
  line-height:1;
  font-weight:500;
  letter-spacing:.018em;
  text-transform:uppercase;
}
.profile-links{
  display:flex;
  gap:10px;
  align-items:center;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:11px;
  letter-spacing:.04em;
}
.profile-links a{
  color:#8f898a;
  border:1px solid #4b4748;
  border-radius:999px;
  padding:4px 8px 5px;
  line-height:1;
}
.profile-links a:hover{
  color:#fff;
  border-color:#777173;
}

/* Software components */
.products{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px;
  align-items:start;
}

.product{min-width:0}

.screenshot{
  width:100%;
  aspect-ratio:16/10;
  background:#282627;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#5f5a5c;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:12px;
  letter-spacing:.03em;
  margin-bottom:28px;
  overflow:hidden;
}

.screenshot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  cursor:zoom-out;
}

.product h1{
  margin:0 0 8px;
  font-size:28px;
  font-weight:500;
  letter-spacing:.018em;
}

.release-meta{
  min-height:19px;
  margin-bottom:19px;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:12px;
  color:#716c6d;
}

.desc{
  min-height:68px;
  max-width:380px;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  color:#aaa5a6;
}

.release-notes{
  margin-top:17px;
  max-width:380px;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:12.5px;
  line-height:1.5;
  color:#8f898a;
}

.release-notes ul{margin:7px 0 0;padding-left:17px}

.release-notes li{margin:3px 0}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:27px;
}

.actions a,
.actions button{
  appearance:none;
  border:0;
  background:none;
  color:#e8e4e4;
  padding:0 0 3px;
  font:inherit;
  font-size:13px;
  border-bottom:1px solid #706b6c;
  cursor:pointer;
}

.actions a:hover,
.actions button:not(:disabled):hover{border-color:#fff}

.actions button:disabled{
  color:#666163;
  border-color:#4d484a;
  cursor:default;
}

.error{
  color:#b08e8e;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:12px;
}

.changelog-section{
  margin-top:78px;
  max-width:880px;
}

.changelog-toggle{
  appearance:none;
  border:0;
  background:none;
  color:#c8c3c4;
  padding:0 0 3px;
  border-bottom:1px solid #5d5859;
  cursor:pointer;
  font-size:13px;
}

.changelog{
  display:none;
  margin-top:34px;
  font-family:"Helvetica Neue",Arial,sans-serif;
  color:#aaa5a6;
  font-size:13px;
  line-height:1.6;
}

.changelog.open{display:block}

.changelog h1{display:none}

.changelog h2{
  font-family:"Arial Narrow","Aptos Narrow","Helvetica Neue Condensed","HelveticaNeue-Condensed","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  font-size:19px;
  color:#e6e2e2;
  font-weight:500;
  margin:35px 0 8px;
}

.changelog ul{padding-left:20px}

.product-shot-dialog{
  width:auto;
  max-width:94vw;
  max-height:94vh;
  padding:0;
  border:0;
  border-radius:10px;
  background:#171617;
  color:#fff;
  box-shadow:0 28px 90px rgba(0,0,0,.65);
  overflow:hidden;
}

.product-shot-dialog::backdrop{
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(3px);
}

.product-shot-dialog .dialog-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:94vw;
  max-height:94vh;
  background:#171617;
}

.product-shot-dialog img{
  display:block;
  width:auto;
  height:auto;
  max-width:94vw;
  max-height:88vh;
  object-fit:contain;
}

.product-shot-dialog .dialog-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:34px;
  height:34px;
  border:0;
  border-radius:17px;
  background:rgba(20,20,20,.72);
  color:#eee;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.product-shot-dialog .dialog-close:hover{
  background:rgba(20,20,20,.92);
}

/* Software page */
body.software-page main{padding:72px 0 118px}
body.software-page header{
  height:var(--header-h);
  position:sticky;top:0;z-index:50;background:var(--bg)
}
body.software-page .header{
  height:100%;display:flex;align-items:center;justify-content:space-between
}
body.software-page .logo{display:block;margin-left:-10px}
body.software-page .logo img{width:188px;display:block}
body.software-page nav{
  display:flex;gap:32px;font-size:14px;text-transform:uppercase;letter-spacing:.11em
}
body.software-page nav a{color:#c6c1c2}
body.software-page nav a:hover{color:#fff}
body.software-page footer{
  padding:0 0 30px;color:#5f5a5c;
  font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px
}
body.software-page .footer{display:flex;justify-content:space-between;gap:20px}

@media(max-width:960px){
  body.software-page .products{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  body.software-page .logo{margin-left:-10px}
  body.software-page .logo img{width:155px}
  body.software-page main{padding-top:42px}
}
@media(max-width:640px){
  body.software-page .products{grid-template-columns:1fr;gap:62px}
  body.software-page .desc{min-height:0}
  body.software-page .release-meta{min-height:0}
  body.software-page .screenshot{margin-bottom:22px}
}