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

:root{
  --navy-deep:#102953;
  --navy-panel:#17356d;
  --navy-panel-2:#123069;
  --line:#28477E;
  --amber:#FFC300;
  --amber-dim:#A47C00;
  --copper:#E8433A;
  --text:#F1F5FA;
  --muted:#9CB1D6;
  --muted-2:#6C82AC;
  --danger:#E8433A;

  --display: 'Barlow Condensed', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy-deep);
  color:var(--text);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

/* ---------- utility ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--amber);
}
h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:.01em; text-transform:none;}
h1{font-size:clamp(40px,7vw,74px); line-height:.98; font-weight:800;}
h2{font-size:clamp(30px,4.5vw,46px); line-height:1.03; font-weight:700;}
h3{font-size:22px; font-weight:600;}
p{color:var(--muted);}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 24px;
  border:1px solid var(--amber);
  color:var(--amber);
  background:transparent;
  cursor:pointer;
  transition:.2s ease;
}
.btn:hover{background:var(--amber); color:var(--navy-deep);}
.btn.solid{background:var(--amber); color:var(--navy-deep);}
.btn.solid:hover{background:#ffc233;}
.btn.ghost{border-color:var(--line); color:var(--muted);}
.btn.ghost:hover{border-color:var(--amber); color:var(--amber); background:transparent;}

/* ---------- tag / signature element ---------- */
.tag{
  position:relative;
  background:var(--navy-panel);
  border:1px solid var(--line);
  padding:18px 20px 18px 34px;
}
.tag::before{
  content:"";
  position:absolute;
  left:14px; top:50%; transform:translateY(-50%);
  width:8px; height:8px;
  border-radius:50%;
  border:1.5px solid var(--muted-2);
  background:var(--navy-deep);
}
.tag::after{
  content:"";
  position:absolute;
  left:0; top:10px; bottom:10px;
  width:1px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px);
}

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,22,32,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  max-width:1120px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.01em;}
.brand .mark{
  width:34px; height:34px;
  background:var(--amber);
  color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:600; font-size:13px;
  clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);
}
.brand small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted); font-weight:400; text-transform:uppercase;}
nav.pages{display:flex; gap:4px;}
nav.pages a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:10px 14px; position:relative;
  display:inline-block;
}
nav.pages a:hover{color:var(--text);}
nav.pages a.active{color:var(--amber);}
nav.pages a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--amber);
}
.nav-cta{display:none;}
@media(min-width:720px){.nav-cta{display:inline-flex;}}
.burger{display:none; background:none; border:1px solid var(--line); color:var(--text); padding:8px 12px; font-family:var(--mono); font-size:12px;}
@media(max-width:900px){
  nav.pages{display:none; position:absolute; top:100%; left:0; right:0; background:var(--navy-panel); flex-direction:column; border-bottom:1px solid var(--line); padding:8px;}
  nav.pages.open{display:flex;}
  nav.pages a{text-align:left; padding:14px;}
  .burger{display:block;}
}

/* ---------- page sections ---------- */
section{padding:88px 0;}
section.tight{padding:64px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head p{font-size:17px;}

.divider{height:1px; background:var(--line); width:100%;}

/* ---------- shared grid / cell component (used on Home + About) ---------- */
.grid-3{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(min-width:720px){.grid-3{grid-template-columns:repeat(3,1fr);}}
.grid-2{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(min-width:720px){.grid-2{grid-template-columns:repeat(2,1fr);}}
.cell{background:var(--navy-panel); padding:30px 26px;}
.cell h3{margin-bottom:10px; color:var(--text);}
.cell .idx{font-family:var(--mono); color:var(--amber-dim); font-size:12px; margin-bottom:14px; display:block;}

/* ---------- shared license rows (used on About + Contact) ---------- */
.license-list{margin-top:8px;}
.license-row{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line);}
.license-row .k{font-size:14px; color:var(--muted);}
.license-row .v{font-family:var(--mono); font-size:13.5px; color:var(--amber); text-align:right;}

footer{border-top:1px solid var(--line); padding:36px 0; }
.foot-row{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; align-items:center; text-align:center;}
.foot-row p{font-size:12.5px; font-family:var(--mono); color:var(--muted-2); margin:0;}

::selection{background:var(--amber); color:var(--navy-deep);}