@font-face{font-family:"Space Grotesk";src:url("assets/fonts/space-grotesk.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/jetbrains-mono.woff2") format("woff2");font-weight:400 500;font-display:swap}

:root{
  --bg:#0f0c0a; --bg-2:#151110; --surface:#1a1412; --line:#332622; --line-2:#261d1a;
  --ink:#f5efe9; --ink-2:#cbb9ad; --muted:#9a8377; --accent:#ffb066; --accent-2:#ff8a3d;
  --accent-ink:#1c0f04;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1120px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:
    radial-gradient(880px 520px at 18% -12%, rgba(255,138,61,.13), transparent 62%),
    radial-gradient(700px 460px at 104% 8%, rgba(255,176,102,.06), transparent 58%),
    var(--bg);
  color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.025em; line-height:1.06}
p{margin:0}
code{font-family:var(--mono); font-size:.92em; color:var(--accent)}
::selection{background:rgba(255,176,102,.28); color:#fff}
.wrap{max-width:var(--max); margin:0 auto; padding:0 26px}

/* nav */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(12px); background:rgba(15,12,10,.76); border-bottom:1px solid var(--line-2)}
.nav-in{display:flex; align-items:center; gap:26px; height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:600}
.brand .sub{color:var(--muted); font-weight:400}
.brand .mark{width:27px; height:27px; display:block; flex:0 0 auto; image-rendering:auto}
.foot-brand{display:flex; align-items:center; gap:8px}
.foot .mark{width:16px; height:16px; display:block; opacity:.75; margin-right:-4px}
.nav-links{margin-left:auto; display:flex; gap:24px; align-items:center}
.nav-links a{text-decoration:none; color:var(--ink-2); font-family:var(--mono); font-size:13.5px; padding:6px 1px; border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--ink); border-bottom-color:var(--accent)}
@media (max-width:700px){ .nav-links a:not(.keep){display:none} }

/* hero */
.hero{padding:92px 0 72px}
.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:12px; margin-bottom:22px}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--accent); opacity:.7}
h1{font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:-.04em}
h1 em{font-style:normal; color:var(--accent)}
.lede{margin-top:26px; max-width:46ch; color:var(--ink-2); font-size:19px}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px; border-radius:9px;
  text-decoration:none; font-weight:500; font-size:15.5px; border:1px solid transparent}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:#ffc188}
.btn-ghost{border-color:var(--line); color:var(--ink-2)}
.btn-ghost:hover{border-color:rgba(255,176,102,.45); color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.hero-note{margin-top:20px; font-family:var(--mono); font-size:12.5px; color:var(--muted)}

/* section bits */
section{padding:70px 0; scroll-margin-top:80px}
.rule{height:1px; background:var(--line-2); border:0; margin:0}
.sec-head{display:flex; align-items:baseline; gap:18px; margin-bottom:38px; flex-wrap:wrap}
.sec-num{font-family:var(--mono); font-size:12.5px; color:var(--accent); letter-spacing:.12em}
h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.sec-sub{margin-left:auto; color:var(--muted); font-size:15px; max-width:44ch}

/* projects */
.projects{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
@media (max-width:820px){ .projects{grid-template-columns:minmax(0,1fr)} }
@media (min-width:821px){ .projects > .card:last-child:nth-child(odd){grid-column:1 / -1} }
.card{
  display:flex; flex-direction:column; gap:14px; padding:28px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,176,102,.05), rgba(255,176,102,.012)), var(--surface);
  border:1px solid var(--line); text-decoration:none; transition:transform .15s ease, border-color .15s;
}
.card:hover{transform:translateY(-2px); border-color:rgba(255,176,102,.42)}
.card .kicker{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.card h3{font-size:22px}
.card p{color:var(--ink-2); font-size:15.2px}
.card .go{margin-top:auto; font-family:var(--mono); font-size:12.5px; color:var(--accent); display:flex; align-items:center; gap:8px; padding-top:6px}
.card.coming{border-style:dashed; background:transparent; opacity:.85}

/* principles */
.principles{border-top:1px solid var(--line-2)}
.principle{display:grid; grid-template-columns:220px 1fr; gap:30px; padding:26px 0; border-bottom:1px solid var(--line-2)}
.principle dt{font-family:var(--mono); font-size:13px; color:var(--accent); padding-top:2px}
.principle dd{margin:0; color:var(--ink-2); font-size:15.6px; max-width:62ch}
.principle dd b{color:var(--ink); font-weight:500}
@media (max-width:760px){ .principle{grid-template-columns:1fr; gap:8px} }

/* about + contact */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
@media (max-width:820px){ .about{grid-template-columns:minmax(0,1fr); gap:20px} }
.about p{color:var(--ink-2); font-size:16.4px; max-width:58ch}
.about p+p{margin-top:14px}
.about .closer{color:var(--ink); font-weight:500}
.contact{margin-top:26px; font-family:var(--mono); font-size:14px; color:var(--muted)}
.contact a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(255,176,102,.35)}

footer{border-top:1px solid var(--line-2); padding:32px 0 46px}
.foot{display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.foot .spacer{margin-left:auto}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .card{transition:none} }
@media (max-width:560px){ .wrap{padding:0 18px} .hero{padding:56px 0 48px} }