:root{
  --void:#001524; --deep:#00202F; --teal:#15616D;
  --cream:#FFECD1; --signal:#FF7D00; --rust:#78290F;
  --muted:#8FA6AE; --body:#D9CBB4; --grid:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  background-image:
    linear-gradient(to right, rgba(21,97,109,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,97,109,.14) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
  color:var(--cream);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",monospace}
.wrap{max-width:1140px; margin:0 auto; padding:0 28px}

/* ---------- GATE ---------- */
html.gate-skip #gate{display:none}
#gate{position:fixed; inset:0; z-index:100; background:var(--void); background-image:inherit;
  display:flex; align-items:center; justify-content:center; padding:24px}
#gate.dismiss{animation:sweep .55s cubic-bezier(.7,0,.2,1) forwards}
@keyframes sweep{to{clip-path:inset(0 0 100% 0)}}
.plate{width:100%; max-width:520px; border:1.5px solid var(--teal); background:var(--deep);
  box-shadow:0 0 0 1px rgba(255,125,0,.12), 0 24px 60px rgba(0,0,0,.5)}
.plate-head{display:flex; justify-content:space-between; border-bottom:1.5px solid var(--teal);
  padding:10px 16px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.plate-head span:last-child{color:var(--signal)}
.plate-body{padding:32px 24px 24px}
.plate-body h1{font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(28px,6vw,40px);
  line-height:1.05; letter-spacing:-.02em; text-transform:uppercase}
.plate-body h1 span{display:block; font-size:13px; font-weight:600; letter-spacing:.2em;
  color:var(--muted); margin-top:12px}
.field{margin-top:28px}
.field label{display:block; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.row{display:flex; border:1.5px solid var(--teal); background:var(--void)}
.row:focus-within{border-color:var(--signal)}
.row input{flex:1; border:0; background:transparent; outline:none; padding:14px;
  font-family:"IBM Plex Mono",monospace; font-size:16px; letter-spacing:.18em; color:var(--cream)}
.row input::placeholder{color:#40606B}
.row button{border:0; border-left:1.5px solid var(--teal); background:var(--signal); color:var(--void);
  font-family:Archivo,sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  font-size:13px; padding:0 22px; cursor:pointer; transition:background .15s}
.row button:hover{background:var(--cream)}
.err{margin-top:12px; min-height:18px; font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:var(--signal); opacity:0; transition:opacity .15s}
.err.on{opacity:1}
.plate.shake{animation:shake .28s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.plate-foot{border-top:1px solid rgba(21,97,109,.5); padding:10px 16px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted)}

/* ---------- NAV ---------- */
nav{position:sticky; top:0; z-index:20; background:rgba(0,21,36,.9); backdrop-filter:blur(8px);
  border-bottom:1.5px solid var(--teal)}
.nav-in{display:flex; justify-content:space-between; align-items:center; padding:14px 0}
.brand{font-family:Archivo,sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  text-decoration:none; color:inherit}
.nav-links{display:flex; gap:28px}
.nav-links a{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); text-decoration:none; padding-bottom:2px;
  border-bottom:1.5px solid transparent}
.nav-links a:hover{color:var(--cream); border-color:var(--signal)}

/* ---------- HERO ---------- */
header{padding:80px 0 0}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--teal); margin-bottom:22px}
.eyebrow b{color:var(--signal); font-weight:400}
h2.hero{font-family:Archivo,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(34px,5vw,54px); line-height:1; letter-spacing:-.03em}
.hi{color:var(--signal)}
.lede{margin-top:24px; max-width:46ch; font-size:18px; color:var(--body)}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.cta a{border:1.5px solid var(--teal); padding:12px 22px; text-decoration:none; color:var(--cream);
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; transition:.15s}
.cta a:hover{background:var(--signal); border-color:var(--signal); color:var(--void)}
.cta a.primary{background:var(--signal); border-color:var(--signal); color:var(--void); font-weight:500}
.cta a.primary:hover{background:var(--cream); border-color:var(--cream)}

.media{border:1.5px solid var(--teal); background:var(--deep); position:relative}
.media .frame{aspect-ratio:4/5; background:var(--void); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background-image:repeating-linear-gradient(45deg, rgba(21,97,109,.14) 0 1px, transparent 1px 11px);
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); text-align:center; padding:20px}
.media .frame img{width:100%; height:100%; object-fit:cover; display:block}
.media .cap{border-top:1.5px solid var(--teal); padding:9px 14px; display:flex;
  justify-content:space-between; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.media .cap b{color:var(--signal); font-weight:400}

/* full bleed band */
.band{margin-top:80px; border-top:1.5px solid var(--teal); border-bottom:1.5px solid var(--teal);
  height:clamp(220px,32vw,380px); background:var(--deep); overflow:hidden;
  display:flex; align-items:stretch; justify-content:center;
  background-image:repeating-linear-gradient(45deg, rgba(21,97,109,.12) 0 1px, transparent 1px 11px);
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal)}
.band img{flex:1 1 50%; width:50%; height:100%; object-fit:cover; display:block; min-width:0}
.band img:first-child{border-right:1.5px solid var(--teal)}

/* ---------- SECTIONS ---------- */
section{padding:88px 0; border-bottom:1px solid rgba(21,97,109,.45)}
.sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:44px}
.sec-head h3{font-family:Archivo,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:26px; letter-spacing:-.01em}
.sec-head .idx{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--signal); letter-spacing:.1em}
.sec-head .fill{flex:1; height:1.5px; background:var(--teal)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px}
.card{border:1.5px solid var(--teal); background:var(--deep); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; transition:border-color .2s, transform .2s}
.card:hover{border-color:var(--signal); transform:translateY(-3px)}
.card:hover .go{color:var(--signal)}
.card .fig{aspect-ratio:16/10; border-bottom:1.5px solid var(--teal); background:var(--void);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background-image:repeating-linear-gradient(45deg, rgba(21,97,109,.14) 0 1px, transparent 1px 11px);
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); text-align:center; padding:16px}
.card .fig img{width:100%; height:100%; object-fit:cover; display:block}
.card .txt{padding:22px; flex:1}
.card h4{font-family:Archivo,sans-serif; font-weight:800; font-size:19px;
  text-transform:uppercase; letter-spacing:-.01em}
.card p{margin-top:10px; font-size:15px; color:var(--body)}
.card .go{margin-top:16px; display:inline-block; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color .2s}
.titleblock{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--teal);
  border-top:1.5px solid var(--teal)}
.tb{background:var(--void); padding:9px 14px}
.tb dt{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.tb dd{font-family:"IBM Plex Mono",monospace; font-size:12px; margin-top:2px; color:var(--cream)}

/* ---------- ABOUT / EXPERIENCE ---------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:36px}
.note{border-left:2px solid var(--rust); padding-left:20px}
.note h5{font-family:Archivo,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:15px; color:var(--signal)}
.note p{margin-top:8px; font-size:16px; color:var(--body)}
.note-head{display:flex; align-items:center; gap:10px}
.note-head img{width:26px; height:26px; object-fit:contain; flex-shrink:0}

footer{padding:80px 0 100px}
.contact{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.contact a{border:1.5px solid var(--teal); padding:12px 22px; text-decoration:none; color:var(--cream);
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; transition:.15s}
.contact a:hover{background:var(--signal); border-color:var(--signal); color:var(--void)}

/* ---------- PROJECT SUBPAGE ---------- */
.project-hero{position:relative; min-height:78vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-bottom:1.5px solid var(--teal); background:var(--void)}
.project-hero .bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.24}
.project-hero .bg::after{content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 0%, var(--void) 82%)}
.project-box{position:relative; z-index:1; width:92%; max-width:720px; margin:48px 0;
  border:1.5px solid var(--teal); background:var(--deep);
  box-shadow:0 0 0 1px rgba(255,125,0,.08), 0 24px 60px rgba(0,0,0,.5); padding:40px 32px}
.project-box .eyebrow{margin-bottom:16px}
.project-box h1{font-family:Archivo,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,5vw,40px); line-height:1.05; letter-spacing:-.02em}
.project-box .status{display:inline-block; margin-top:14px; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--signal)}
.project-box .subtitle{margin-top:16px; font-size:17px; color:var(--body); max-width:54ch}

.spec-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--teal); margin-top:26px}
.spec-strip .sp{background:var(--void); padding:12px 14px}
.spec-strip .sp dt{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.spec-strip .sp dd{font-family:"IBM Plex Mono",monospace; font-size:12px; margin-top:3px; color:var(--cream)}
@media (min-width:640px){.spec-strip{grid-template-columns:repeat(3,1fr)}}

.back{margin-top:28px; display:inline-block; border:1.5px solid var(--teal); padding:12px 22px;
  text-decoration:none; color:var(--cream); font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; transition:.15s}
.back:hover{background:var(--signal); border-color:var(--signal); color:var(--void)}

.project-box .block{margin-top:32px}
.project-box .block h3{font-family:Archivo,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:13px; letter-spacing:.14em; color:var(--signal); margin-bottom:12px}
.project-box .block p{font-size:16px; line-height:1.75; color:var(--body)}
.project-box .block p + p{margin-top:14px}

@media (max-width:860px){
  .nav-links{display:none}
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .media .frame{aspect-ratio:4/3}
  .two{grid-template-columns:1fr}
  section{padding:60px 0}
  .band{flex-direction:column; height:auto}
  .band img{width:100%; height:220px}
  .band img:first-child{border-right:0; border-bottom:1.5px solid var(--teal)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}