:root{
  --ink:#0a1530;
  --ink-2:#152348;
  --graphite:#1a1d24;
  --bone:#f4f1ea;
  --paper:#ebe7dd;
  --grain:#d8d3c5;
  --rule:#2a2f3a;
  --accent:#3a4a8a;
  --warn:#7a3a2a;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Inter",-apple-system,system-ui,sans-serif;
  --maxw:980px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bone);
  color:var(--graphite);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(216,211,197,.6) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(216,211,197,.4) 0%, transparent 50%);
}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}

/* header */
.hdr{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:24px 24px 8px;
  border-bottom:1px solid var(--rule);
}
.hdr__brand{font-family:var(--mono);font-weight:700;font-size:15px;text-decoration:none;letter-spacing:-.02em}
.hdr__dot{color:var(--warn)}
.hdr__nav{display:flex;gap:18px;font-family:var(--mono);font-size:13px}
.hdr__nav a{text-decoration:none;color:var(--graphite)}
.hdr__nav a:hover{color:var(--ink);text-decoration:underline}

main{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* shared */
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  color:var(--ink);opacity:.7;margin:0 0 12px;text-transform:uppercase;
}
section{padding:64px 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:none}

/* hero */
.hero h1{
  font-family:var(--mono);font-weight:700;font-size:clamp(28px,5vw,46px);
  line-height:1.15;letter-spacing:-.02em;margin:0 0 18px;color:var(--ink);
}
.hero__sub{display:block;font-weight:400;color:var(--graphite);font-size:.7em;margin-top:8px}
.bio{font-family:var(--mono);font-size:13px;color:var(--ink);opacity:.85;margin:0 0 14px;letter-spacing:.01em}
.lede{max-width:62ch;font-size:17px;color:var(--graphite);margin:0 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-block;padding:11px 18px;font-family:var(--mono);font-size:13px;
  text-decoration:none;border:1px solid var(--ink);transition:transform .08s ease;
  cursor:pointer;background:transparent;color:var(--ink);
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{box-shadow:3px 3px 0 var(--graphite);color:var(--bone)}
.btn--ghost{background:transparent}

/* hire cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--paper);padding:24px;display:flex;flex-direction:column;gap:8px}
.card h3{font-family:var(--mono);font-size:15px;margin:0;color:var(--ink);letter-spacing:-.01em}
.card p{margin:0;font-size:14.5px}
.card__meta{font-family:var(--mono);font-size:12px;color:var(--graphite);opacity:.75;margin-top:auto;padding-top:8px;border-top:1px dashed var(--rule)}

/* work */
.work__list{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:14px}
.work__list li{
  display:grid;grid-template-columns:60px 1fr auto;gap:16px;
  padding:14px 0;border-bottom:1px dashed var(--rule);align-items:baseline;
}
.work__list li:last-child{border-bottom:none}
.work__yr{color:var(--warn);font-weight:500}
.work__t{color:var(--ink)}
.work__tag{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--graphite);opacity:.7}

/* art */
.art__lede{max-width:60ch;margin:0 0 20px}
.art__links{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:18px;font-family:var(--mono);font-size:14px}
.art__links a[data-soon]{color:var(--graphite);text-decoration:line-through;opacity:.55;cursor:not-allowed}
.art__note{font-family:var(--mono);font-size:12px;opacity:.7;margin:0}

/* form */
.contact h2{font-family:var(--mono);font-size:clamp(22px,3vw,30px);margin:0 0 8px;color:var(--ink);letter-spacing:-.02em}
.contact__lede{margin:0 0 24px;max-width:60ch}
.form{display:flex;flex-direction:column;gap:14px;max-width:560px}
.form label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink);text-transform:uppercase}
.form input,.form select,.form textarea{
  font-family:var(--sans);font-size:15px;padding:10px 12px;
  background:var(--paper);border:1px solid var(--rule);color:var(--graphite);
  border-radius:0;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.form textarea{resize:vertical;min-height:100px}
.form button{align-self:flex-start;margin-top:4px}
.form__status{font-family:var(--mono);font-size:13px;margin:0;min-height:20px}
.form__status.ok{color:var(--ink)}
.form__status.err{color:var(--warn)}
.form__alt{font-family:var(--mono);font-size:12px;opacity:.7;margin:0}

/* footer */
.ftr{
  max-width:var(--maxw);margin:0 auto;padding:32px 24px 48px;
  font-family:var(--mono);font-size:12px;color:var(--graphite);opacity:.7;
  border-top:1px solid var(--rule);
}
.ftr a{color:var(--ink)}

@media (max-width:520px){
  .hdr{flex-direction:column;gap:10px;align-items:flex-start}
  .hdr__nav{gap:12px}
  .work__list li{grid-template-columns:50px 1fr;row-gap:2px}
  .work__tag{grid-column:2}
}

/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}