/* Steve Biondi — personal site
   Tokens
   paper    #FAF9F6  primary background
   surface  #FFFFFF  card / panel surface
   ink      #1C2B39  primary text, deep navy-charcoal
   navy     #223B57  headings, rules, primary accent
   brass    #93764A  secondary accent, used sparingly
   muted    #5C6773  secondary text
   line     #E1DFD9  hairline borders
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper: #FAF9F6;
  --surface: #FFFFFF;
  --ink: #1C2B39;
  --navy: #223B57;
  --brass: #93764A;
  --muted: #5C6773;
  --line: #E1DFD9;
  --max: 1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Ledger rule, the signature motif ---------- */
.ledger{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}
.ledger::before, .ledger::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}
.ledger .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--brass);
  flex:none;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--brass);
  white-space:nowrap;
}

/* ---------- Nav ---------- */
nav{
  padding:26px 0;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.wordmark{
  font-family:'Source Serif 4', serif;
  font-size:19px;
  font-weight:600;
  letter-spacing:0.005em;
  text-decoration:none;
  color:var(--navy);
}
.navlinks{
  display:flex;
  gap:28px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.navlinks a{
  text-decoration:none;
  color:var(--muted);
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:color .15s ease, border-color .15s ease;
}
.navlinks a:hover, .navlinks a.active{
  color:var(--navy);
  border-color:var(--brass);
}

/* ---------- Hero ---------- */
.hero{
  padding:84px 0 96px;
  border-bottom:1px solid var(--line);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.25fr 0.85fr;
  gap:56px;
  align-items:center;
}
h1{
  font-family:'Source Serif 4', serif;
  font-weight:600;
  font-size:clamp(40px, 6vw, 62px);
  line-height:1.06;
  margin:0 0 20px;
  letter-spacing:-0.005em;
  color:var(--navy);
}
.hero p.lead{
  font-size:19px;
  color:var(--muted);
  max-width:46ch;
  margin:0 0 32px;
}
.cta-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:2px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
  letter-spacing:0.03em;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-solid{
  background:var(--navy);
  color:var(--surface);
}
.btn-solid:hover{
  background:#152A40;
  transform:translateY(-1px);
}
.btn-ghost{
  border:1px solid var(--line);
  color:var(--ink);
}
.btn-ghost:hover{
  border-color:var(--brass);
  color:var(--brass);
}

.frame{
  position:relative;
  border:1px solid var(--line);
  background:var(--surface);
  padding:14px;
}
.frame img{
  display:block;
  width:100%;
  height:auto;
}
.frame .tick{
  position:absolute;
  width:16px;
  height:16px;
  border:1.5px solid var(--brass);
}
.frame .tick.tl{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.frame .tick.tr{top:-1px; right:-1px; border-left:none; border-bottom:none;}
.frame .tick.bl{bottom:-1px; left:-1px; border-right:none; border-top:none;}
.frame .tick.br{bottom:-1px; right:-1px; border-left:none; border-top:none;}
.frame-cap{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
  letter-spacing:0.02em;
}

/* ---------- Sections ---------- */
section{
  padding:88px 0;
  border-bottom:1px solid var(--line);
}
section.last{border-bottom:none;}
h2{
  font-family:'Source Serif 4', serif;
  font-weight:600;
  font-size:clamp(28px, 3.4vw, 36px);
  margin:0 0 44px;
  max-width:20ch;
  color:var(--navy);
}

.lanes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.lane{
  background:var(--surface);
  padding:38px 36px;
}
.lane .tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:14px;
}
.lane.pine .tag{color:var(--navy);}
.lane h3{
  font-family:'Source Serif 4', serif;
  font-size:23px;
  font-weight:600;
  margin:0 0 14px;
  color:var(--navy);
}
.lane p{
  color:var(--muted);
  margin:0 0 10px;
  font-size:16px;
}
.lane .meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:14px;
}

.bio{
  max-width:62ch;
}
.bio p{
  color:var(--muted);
  margin:0 0 18px;
  font-size:17px;
}
.bio strong{color:var(--ink); font-weight:600;}

.contact-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.contact-cta h2{margin-bottom:8px;}
.contact-cta p{color:var(--muted); margin:0; max-width:42ch;}

footer{
  padding:36px 0;
}
footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--muted);
}
footer a{text-decoration:none; color:var(--muted);}
footer a:hover{color:var(--brass);}

/* ---------- Contact page ---------- */
.contact-hero{
  padding:64px 0 56px;
  border-bottom:1px solid var(--line);
}
.contact-hero p.lead{color:var(--muted); max-width:52ch; font-size:18px; margin:0;}

form{
  max-width:640px;
}
.field{
  margin-bottom:26px;
}
label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
input, select, textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  padding:10px 2px;
  outline:none;
  transition:border-color .15s ease;
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6773' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 4px center;
}
select option{background:var(--surface); color:var(--ink);}
textarea{resize:vertical; min-height:120px; font-family:'Inter', sans-serif;}
input:focus, select:focus, textarea:focus{
  border-bottom-color:var(--brass);
}
input::placeholder, textarea::placeholder{color:#A7ADB3;}

.submit-row{
  margin-top:8px;
}
button.btn-solid{
  border:none;
  cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
}

.direct{
  margin-top:52px;
  padding-top:32px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:15px;
}
.direct a{color:var(--brass); text-decoration:none;}
.direct a:hover{text-decoration:underline;}

/* ---------- Thanks page ---------- */
.thanks{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.thanks h1{font-size:clamp(32px,5vw,48px);}
.thanks p{color:var(--muted); font-size:18px; max-width:46ch;}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr; gap:40px;}
  .hero{padding:56px 0 64px;}
  .lanes{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .navlinks{gap:18px;}
  .contact-cta{flex-direction:column; align-items:flex-start;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}