:root{
  --ground:#0D1B2A;
  --ground-2:#101F30;
  --panel:#12233A;
  --hairline:#22374F;
  --ink:#E6EDF5;
  --ink-soft:#8FA3BA;
  --ink-faint:#54677E;
  --signal:#5B8DEF;
  --signal-dim:rgba(91,141,239,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:300;
  line-height:1.7;
}
::selection{background:var(--signal-dim)}
.mono{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:400;
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:500}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
img{max-width:100%;height:auto;display:block}

/* top bar */
header{
  position:fixed;top:0;left:0;right:0;
  z-index:10;
  background:rgba(13,27,42,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.bar{
  max-width:1060px;margin:0 auto;
  padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:15px;
  letter-spacing:.04em;
  color:var(--ink);text-decoration:none;
}
nav{display:flex;gap:30px}
nav a{
  color:var(--ink-soft);text-decoration:none;
  font-size:.86rem;font-weight:400;
  transition:color .3s ease;
}
nav a:hover, nav a.here{color:var(--ink)}

/* menu toggle (mobile) */
.navtoggle{
  display:none;
  width:44px;height:44px;
  margin-right:-10px;
  align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  flex-direction:column;gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.navtoggle span{
  display:block;width:22px;height:1.5px;
  background:var(--ink);
  transition:transform .3s ease, opacity .25s ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:760px){
  .navtoggle{display:flex}
  nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--ground-2);
    border-bottom:1px solid var(--hairline);
    max-height:calc(100svh - 100%);
    overflow-y:auto;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  nav.open{opacity:1;transform:none;pointer-events:auto}
  nav a{
    padding:17px 28px;
    border-top:1px solid var(--hairline);
    font-size:1rem;
    color:var(--ink-soft);
  }
  nav a.here{color:var(--signal)}
}


/* page head for subpages */
.page-head{
  padding-top:170px;
  padding-bottom:80px;
}
.page-head .mono{margin-bottom:24px}
.page-head h1{
  font-size:clamp(2rem, 4.6vw, 3.2rem);
  line-height:1.14;
  letter-spacing:-.01em;
  max-width:20ch;
}
.page-head h1 em{font-style:normal;color:var(--signal)}
.page-head .lede{margin-top:26px}

/* hero (home) */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;
  justify-content:center;
  padding-top:70px;
}
.hero .mono{margin-bottom:26px}
.hero h1{
  font-size:clamp(2.1rem, 5vw, 3.7rem);
  line-height:1.12;
  letter-spacing:-.01em;
  max-width:17ch;
}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero p{
  margin-top:28px;
  max-width:56ch;
  color:var(--ink-soft);
  font-size:1.02rem;
}

/* instrument */
.instrument{
  margin-top:56px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg, var(--ground-2), var(--ground));
  padding:26px 26px 22px;
}
.inst-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin-bottom:8px;
}
#stateLabel{transition:color .5s ease}
#stateLabel.calibrated{color:var(--signal)}
canvas{display:block;width:100%;height:130px}
.inst-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin-top:14px;
}
.inst-foot .hint{font-size:.82rem;color:var(--ink-faint)}
#pressureBtn{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--hairline);
  padding:13px 26px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  transition:border-color .3s ease, background .3s ease;
}
#pressureBtn:hover{border-color:var(--signal-dim)}
#pressureBtn.active{
  border-color:var(--signal);
  background:rgba(91,141,239,.08);
}

/* sections */
section{padding:110px 0;border-top:1px solid var(--hairline)}
.eyebrow{margin-bottom:22px}
h2{
  font-size:clamp(1.6rem, 3.4vw, 2.3rem);
  line-height:1.2;
  max-width:24ch;
  margin-bottom:26px;
}
h3{font-size:1.15rem;margin-bottom:14px}
.lede{
  color:var(--ink-soft);
  max-width:62ch;
  margin-bottom:16px;
}
.link{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--signal-dim);
  padding-bottom:2px;
  transition:border-color .3s ease;
}
.link:hover{border-color:var(--signal)}

/* founder / split layouts */
.founder{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:56px;
  align-items:start;
}
.portrait{
  border:1px solid var(--hairline);
  background:var(--ground-2);
  margin-top:7px; /* optically aligns image top with the first text line */
}
.portrait img{width:100%}
@media (max-width:760px){
  .founder{grid-template-columns:1fr;gap:34px}
  .portrait{max-width:300px;margin-left:auto;margin-right:auto}
}

/* stage band */
.stage{
  border:1px solid var(--hairline);
  background:var(--ground-2);
}
.stage img{width:100%}
.stage .cap{
  padding:16px 22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* doors */
.doors{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
}
.door{
  background:var(--ground);
  padding:38px 30px 34px;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:background .4s ease;
}
.door:hover{background:var(--ground-2)}
.door .mono{margin-bottom:18px}
.door p{color:var(--ink-soft);font-size:.93rem;flex:1;margin-bottom:22px}
.door .use{font-size:.82rem;color:var(--ink-faint);margin-bottom:22px}
.door .go{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--signal)}
@media (max-width:860px){ .doors{grid-template-columns:1fr} }

/* panel blocks */
.panelbox{
  border:1px solid var(--hairline);
  background:var(--ground-2);
  padding:52px 48px;
}
@media (max-width:760px){ .panelbox{padding:38px 28px} }

/* item rows (subpage lists) */
.rows{border-top:1px solid var(--hairline)}
.row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:34px;
  padding:34px 0;
  border-bottom:1px solid var(--hairline);
}
.row p{color:var(--ink-soft);max-width:58ch}
@media (max-width:640px){ .row{grid-template-columns:1fr;gap:10px} }

/* essay */
.essay blockquote{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.4rem, 3vw, 2rem);
  line-height:1.3;
  max-width:26ch;
  margin-bottom:26px;
}

/* closing + cta */
.closing{text-align:center}
.closing h2{margin:0 auto 30px}
.cta{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--hairline);
  padding:18px 44px;
  transition:border-color .4s ease, background .4s ease;
}
.cta:hover{
  border-color:var(--signal);
  background:rgba(91,141,239,.08);
}

footer{
  border-top:1px solid var(--hairline);
  padding:60px 0 56px;
}
.foot{
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  color:var(--ink-faint);font-size:.84rem;line-height:2;
}
.foot a{color:var(--ink-soft);text-decoration:none}
.foot a:hover{color:var(--ink)}
.boundary{max-width:34ch}


/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.form .full{grid-column:1 / -1}
.field label{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--ground-2);
  border:1px solid var(--hairline);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:300;
  font-size:.95rem;
  padding:14px 16px;
  outline:none;
  transition:border-color .3s ease;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
}
.field select{
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px;
  background-repeat:no-repeat;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--signal)}
.form button{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--hairline);
  padding:18px 44px;
  cursor:pointer;
  transition:border-color .4s ease, background .4s ease;
}
.form button:hover{border-color:var(--signal);background:rgba(91,141,239,.08)}
.form button:disabled{opacity:.5;cursor:default}
.form-note{grid-column:1 / -1;font-size:.84rem;color:var(--ink-faint)}
.form-result{grid-column:1 / -1;font-size:.95rem;color:var(--ink);display:none}
.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:640px){ .form{grid-template-columns:1fr} }

/* back link (subpages) */
.backnav{padding:0 0 70px}
.back{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:color .3s ease, border-color .3s ease;
}
.back:hover{color:var(--ink);border-color:var(--signal-dim)}

/* mobile rhythm */
@media (max-width:760px){
  .wrap{padding:0 22px}
  .bar{padding:16px 22px}
  nav a{padding-left:22px;padding-right:22px}
  .page-head{padding-top:132px;padding-bottom:54px}
  section{padding:72px 0}
  .hero{padding-top:104px;min-height:auto;padding-bottom:24px}
  .instrument{margin-top:40px;padding:20px 18px 18px}
  .inst-foot{gap:14px}
  #pressureBtn{width:100%;text-align:center}
  .panelbox{padding:32px 22px}
  .backnav{padding-bottom:56px}
  footer{padding:44px 0 40px}
}