@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{--ark-black:#090b0c;--ark-yellow:#ffb800;--ark-white:#f2f1ed}
body{background:var(--ark-black);color:var(--ark-white)}
.navbar{
  height:102px;padding:0 0 0 30px;background:rgba(7,9,10,.98)!important;border-bottom:1px solid rgba(255,255,255,.22);
  font-family:"IBM Plex Mono",monospace
}
.navbar.scrolled{height:88px;background:rgba(7,9,10,.98)!important}
.nav-logo{min-width:350px;text-decoration:none;display:flex;align-items:center;gap:15px}
.build-mark{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--ark-yellow);flex:0 0 48px}
.build-mark svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ark-logo{font-family:"Barlow Condensed",sans-serif;font-size:3.65rem;font-weight:800;line-height:1;letter-spacing:-.04em;color:#fff}
.ark-logo i{color:var(--ark-yellow);font-style:normal}
.nav-links{height:100%;gap:0}
.nav-links li{height:100%;display:flex;align-items:center}
.nav-links a{
  height:100%;display:flex;align-items:center;padding:0 24px!important;color:#fff!important;font-family:"IBM Plex Mono",monospace;
  font-size:.77rem!important;font-weight:500;letter-spacing:.13em;text-transform:uppercase
}
.nav-links .btn-nav{
  min-width:330px;justify-content:space-between;margin:0 0 0 22px!important;padding:0 34px!important;border-radius:0!important;
  background:var(--ark-yellow)!important;color:#0b0c0c!important
}
.nav-links .btn-nav span{font-size:1.45rem}
.hero{height:calc(100vh - 150px);min-height:850px;padding:0!important;background:#151719;overflow:visible}
.hero::before{display:none}
.hero-bg-v4{
  position:absolute!important;inset:0 0 130px 150px!important;background:url('../images/hero-v3-brutalist.png') center 48%/cover no-repeat!important;
  filter:saturate(.65) contrast(1.06)!important;transform:none!important
}
.hero-bg-v4::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 44%),linear-gradient(0deg,rgba(0,0,0,.44),transparent 48%)}
.project-index{
  position:absolute;z-index:4;left:0;top:0;bottom:130px;width:150px;padding:42px 30px 26px;background:rgba(7,9,10,.97);
  border-right:1px solid rgba(255,255,255,.14);font-family:"IBM Plex Mono",monospace
}
.project-index>strong{color:var(--ark-yellow);font-size:.72rem;line-height:1.55}
.project-index ol{display:grid;gap:14px;margin:29px 0 0;padding:0;list-style:none;color:#bbb;font-size:.8rem}
.project-index li{position:relative;padding-left:30px}
.project-index li.active{color:var(--ark-yellow);font-weight:600}
.project-index li.active::before{content:"";position:absolute;left:0;top:50%;width:18px;height:2px;background:var(--ark-yellow)}
.project-index__meta{position:absolute;left:30px;right:14px;bottom:38px;display:grid;gap:8px;padding-top:20px;border-top:2px solid var(--ark-yellow)}
.project-index__meta b{color:var(--ark-yellow);font-size:.74rem;line-height:1.5}
.project-index__meta span{font-size:.63rem;letter-spacing:.07em}
.hero-inner{position:relative!important;z-index:3!important;min-height:0!important;height:calc(100% - 130px)!important;margin:0!important;padding:0!important}
.hero-content{position:absolute;left:190px;bottom:72px;max-width:530px!important}
.hero-content h1{
  margin:0;font-family:"Barlow Condensed",sans-serif!important;font-size:clamp(5rem,6.4vw,7.5rem)!important;font-weight:800!important;
  line-height:.72!important;letter-spacing:-.035em!important;color:#fff!important;text-transform:uppercase
}
.hero-content h1 span{color:var(--ark-yellow)}
.hero-content p{
  margin:30px 0 0!important;color:#f3f1eb!important;font-family:"Barlow Condensed",sans-serif!important;
  font-size:1.2rem!important;line-height:1.35!important;letter-spacing:.01em!important
}
.build-metrics{
  position:absolute;z-index:5;left:0;right:0;bottom:0;height:130px;display:grid;grid-template-columns:29% 32% 39%;
  background:rgba(7,9,10,.98);border-top:1px solid rgba(255,255,255,.28);font-family:"IBM Plex Mono",monospace
}
.build-metrics>div{display:flex;align-items:center;gap:36px;padding:24px 52px;border-right:1px solid rgba(255,255,255,.22)}
.build-metrics>div:last-child{border-right:4px solid var(--ark-yellow)}
.build-metrics strong{color:var(--ark-yellow);font-family:"Barlow Condensed",sans-serif;font-size:4rem;font-weight:500;line-height:1}
.build-metrics span{font-size:.78rem;line-height:1.9;letter-spacing:.11em}

@media(max-width:1120px){
  .nav-logo{min-width:auto}.nav-links a{padding-inline:13px!important}.nav-links .btn-nav{min-width:210px;margin-left:8px!important}
}
@media(max-width:800px){
  .navbar{height:76px;padding:0 18px}.build-mark{width:38px;height:38px;flex-basis:38px}.ark-logo{font-size:2.35rem}.hamburger{display:flex}
  .hero{min-height:890px;height:auto}.hero-bg-v4{inset:0 0 190px 0!important}
  .project-index{display:none}.hero-inner{height:700px!important}.hero-content{left:24px;bottom:44px;right:24px}
  .hero-content h1{font-size:5.2rem!important}.hero-content p{font-size:1.05rem!important}
  .build-metrics{height:190px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .build-metrics>div{gap:16px;padding:16px 20px}.build-metrics>div:last-child{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.22)}
  .build-metrics strong{font-size:2.5rem}.build-metrics span{font-size:.62rem}
}