:root{
  --stone:#E7E9E2;
  --stone-deep:#D8DBD1;
  --loam:#33302A;
  --loam-soft:#6B665C;
  --hedge:#2E5B39;
  --tan:#9C9078;
  --sap:#7FB434;
  --white:#FAFBF7;
  --rule:#C6CABD;
  --display:"Bricolage Grotesque",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--stone);
  color:var(--loam);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--hedge)}
:focus-visible{outline:2px solid var(--hedge);outline-offset:3px}

.wrap{max-width:640px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.topbar{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:22px 0 20px;border-bottom:1px solid var(--rule);
}
.wordmark{
  font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:-.015em;margin:0;line-height:1.2;
  color:var(--loam);text-decoration:none;
}
.whoami{font-size:13px;color:var(--loam-soft);white-space:nowrap}

.hero{padding:44px 0 40px;border-bottom:1px solid var(--rule)}
.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,8.5vw,52px);line-height:1.02;
  letter-spacing:-.03em;margin:0 0 16px;max-width:11ch;
}
.hero p{margin:0;max-width:44ch;color:var(--loam-soft);font-size:17px}
.hero .phone{
  display:inline-block;margin:20px 0 0;font-family:var(--display);
  font-weight:700;font-size:22px;letter-spacing:-.02em;
  color:var(--hedge);text-decoration:none;
}

/* ---------- buttons + forms ---------- */
button{font:inherit;cursor:pointer}
.btn{
  display:inline-block;font-family:var(--display);font-weight:500;font-size:14px;
  background:var(--loam);color:var(--white);
  border:1px solid var(--loam);border-radius:3px;
  padding:9px 15px;line-height:1.2;text-decoration:none;
}
.btn:hover{background:#26241F;border-color:#26241F;color:var(--white)}
.btn-quiet{background:transparent;color:var(--loam);border-color:var(--rule)}
.btn-quiet:hover{background:var(--stone-deep);border-color:var(--tan);color:var(--loam)}
.btn-go{background:var(--hedge);border-color:var(--hedge);color:var(--white)}
.btn-go:hover{background:#25492D;border-color:#25492D}
.btn-link{
  background:none;border:0;padding:0;color:var(--loam-soft);
  font-size:13px;text-decoration:underline;text-underline-offset:3px;
  font-family:var(--body);
}
.btn-link:hover{color:var(--loam)}

.panel{
  border:1px solid var(--rule);border-radius:4px;background:var(--white);
  padding:20px;margin:28px 0;
}
.panel h2{
  font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:-.015em;margin:0 0 4px;
}
.panel .sub{margin:0 0 16px;font-size:14px;color:var(--loam-soft);max-width:48ch}

label{display:block;font-size:13px;font-weight:500;margin:0 0 5px}
input[type=text],input[type=password],input[type=file],textarea{
  width:100%;font:inherit;font-size:16px;color:var(--loam);
  background:var(--stone);border:1px solid var(--rule);border-radius:3px;
  padding:10px 11px;margin:0 0 14px;
}
textarea{resize:vertical;min-height:64px;line-height:1.45}
input:focus,textarea:focus{border-color:var(--hedge);background:var(--white)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hint{font-size:12.5px;color:var(--loam-soft);margin:12px 0 0;max-width:52ch}

.msg{font-size:14px;margin:0 0 22px;padding:11px 13px;border-radius:3px}
.msg-bad{background:#F6E3DC;color:#7A3520;border:1px solid #E2BFB2}
.msg-ok{background:#E4EFD9;color:#33591B;border:1px solid #C3DDAC}

/* ---------- jobs ---------- */
.board{padding:32px 0 72px}
.board-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 0 22px;
}
.board-head h2{
  font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.01em;margin:0;
}
.count{font-size:13px;color:var(--loam-soft)}

.job{margin:0 0 40px}
.job-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.job-head h3{
  font-family:var(--display);font-weight:700;font-size:21px;
  letter-spacing:-.02em;margin:0;line-height:1.15;
}
.job-date{font-size:13px;color:var(--loam-soft);white-space:nowrap}

.pair{border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--stone-deep)}
.shot{position:relative;margin:0;background:var(--stone-deep)}
.shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.shot + .shot{border-top:3px solid var(--sap)}
.tag{
  position:absolute;top:0;left:0;
  font-family:var(--display);font-weight:500;font-size:12.5px;
  padding:5px 11px 6px;color:var(--white);
}
.tag-before{background:var(--tan)}
.tag-after{background:var(--sap);color:#20330B}

.awaiting{
  border-top:3px solid var(--sap);
  aspect-ratio:4/3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;
  background:repeating-linear-gradient(-45deg,var(--stone-deep) 0 11px,#CFD3C7 11px 22px);
}
.awaiting p{margin:0;font-size:14px;color:var(--loam-soft);max-width:26ch}
.awaiting form{margin:0}

.job-note{margin:11px 0 0;font-size:15px;color:var(--loam-soft);max-width:58ch}
.job-tools{margin:10px 0 0;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.job-tools form{margin:0}

.empty{border:1px dashed var(--tan);border-radius:4px;padding:36px 22px;text-align:center}
.empty p{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:18px}
.empty span{font-size:14px;color:var(--loam-soft)}

.foot{
  border-top:1px solid var(--rule);padding:20px 0 40px;
  font-size:13px;color:var(--loam-soft);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.foot a{color:var(--loam-soft)}

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