/* Shared by every page under /webdesign.
   Charcoal and black, one loud lime accent, JetBrains Mono for everything
   structural and Inter for the prose that has to stay readable. */
:root{
  --bg:#0B0C0E; --bg-2:#131519; --line:#24282E; --line-2:#1B1F24;
  --tx:#E9ECEF;          /* 16.5:1 on bg */
  --tx-2:#A8B0B8;        /* 8.9:1 */
  --tx-3:#767E87;        /* 4.8:1, labels only */
  --lime:#C8FF00;        /* 16.5:1 */
  --lime-glow:rgba(200,255,0,.16);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --r:14px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg)}
body{
  font-family:var(--sans); background:var(--bg); color:var(--tx); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overflow-x:clip;
}
a{text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent}
::selection{background:var(--lime); color:#000}

/* ---------- subpage chrome ---------- */
.wrap{max-width:880px; margin:0 auto; padding:0 clamp(20px,5vw,32px) 90px}
.top{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; padding:26px 0 0;
}
.back{
  font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--tx-3); display:inline-flex; align-items:center; gap:9px;
}
.back::before{content:"\2190"; color:var(--lime)}
.back:hover{color:var(--lime)}
.mini{display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:12px}
.mini a{color:var(--tx-3)}
.mini a:hover{color:var(--lime)}
.mini a[aria-current]{color:var(--lime)}

h1{
  font-family:var(--mono); font-size:clamp(34px,9vw,62px); font-weight:800;
  letter-spacing:-.05em; line-height:1.02; margin:clamp(34px,8vh,62px) 0 0;
}
h1 .q{color:var(--lime)}
.lede{margin-top:16px; font-size:16px; color:var(--tx-2); max-width:52ch}

h2{font-family:var(--mono); font-size:clamp(19px,3.4vw,24px); font-weight:800;
   letter-spacing:-.04em; margin-top:clamp(44px,7vh,66px)}

footer{
  margin-top:clamp(56px,9vh,84px); padding-top:26px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:12px; color:var(--tx-3);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
footer a:hover{color:var(--lime)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:-.01em;
  padding:14px 26px; border-radius:999px; border:1px solid var(--lime);
  background:var(--lime); color:#0B0C0E; display:inline-block;
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:hover{background:#DBFF3D; box-shadow:0 0 34px var(--lime-glow); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--tx); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--lime); color:var(--lime); box-shadow:none}

/* ---------- work cards ---------- */
.work{display:grid; gap:14px; margin-top:34px}
@media(min-width:720px){ .work{grid-template-columns:1fr 1fr} }
.proj{
  display:block; background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--r); padding:24px; position:relative; overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.proj::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);
  opacity:0; transition:opacity .22s ease;
}
@media(hover:hover){
  .proj:hover{border-color:var(--line); transform:translateY(-3px)}
  .proj:hover::before{opacity:1}
}
.proj .kind{font-family:var(--mono); font-size:10px; font-weight:700;
            letter-spacing:.16em; text-transform:uppercase; color:var(--lime)}
.proj h3{font-family:var(--mono); margin:12px 0 8px; font-size:19px; font-weight:700;
         letter-spacing:-.03em}
.proj p{font-size:14px; color:var(--tx-2)}
.proj .go{font-family:var(--mono); display:inline-block; margin-top:16px;
          font-size:12.5px; font-weight:700; color:var(--lime)}
.proj .go::after{content:" \2192"}

/* Small print, under a block it qualifies. */
.fine{margin-top:22px; font-size:12.5px; color:var(--tx-3); max-width:54ch}

/* ---------- the form ---------- */
.eq{margin-top:34px; display:grid; gap:15px}
@media(min-width:640px){
  .eq{grid-template-columns:1fr 1fr}
  .eq .wide{grid-column:1/-1}
}
.f label{
  font-family:var(--mono); display:block; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tx-3); margin-bottom:8px;
}
.f label .opt{letter-spacing:.04em; text-transform:none; font-weight:400}
.f input,.f select,.f textarea{
  width:100%; padding:14px 15px; font-size:16px; font-family:var(--mono);
  color:var(--tx); background:var(--bg-2); border:1px solid var(--line);
  border-radius:10px; outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.f textarea{min-height:140px; resize:vertical; line-height:1.6; font-family:var(--sans)}
.f input::placeholder,.f textarea::placeholder{color:#5A626B}
.f input:focus,.f select:focus,.f textarea:focus{
  border-color:var(--lime); box-shadow:0 0 0 3px rgba(200,255,0,.13);
}
.f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8FF00' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  background-size:11px; padding-right:40px;
}
.f select option{background:var(--bg-2); color:var(--tx)}
/* Honeypot. Off screen rather than display:none, because some bots skip
   anything that is actually hidden, and out of the tab order and the
   accessibility tree so nobody using the page can reach it. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.send{
  font-family:var(--mono); display:inline-block; padding:16px 34px; border:0;
  border-radius:999px; background:var(--lime); color:#0B0C0E;
  font-size:15px; font-weight:800; letter-spacing:-.01em; cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.send:hover{background:#DBFF3D; box-shadow:0 0 36px var(--lime-glow); transform:translateY(-1px)}

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