/* CONTACT — the front desk. One photograph pinned to the left
   for the whole scroll, the business handled on the right.
   Addresses are set as headlines, not buried in a card. */

.desk{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:start;
}

/* ---------- the pinned picture ---------- */

.desk__photo{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:var(--ink-2);
}
.desk__photo img{
  width:100%; height:100%; object-fit:cover;
  object-position:44% 30%;
  animation:deskSettle 2.2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes deskSettle{ from{ transform:scale(1.08); } to{ transform:none; } }
.desk__photo::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,rgba(11,10,10,.62),rgba(11,10,10,0) 28%),
    linear-gradient(to right,rgba(11,10,10,.34),rgba(11,10,10,0) 42%,rgba(11,10,10,.55));
}
.desk__stamp{
  position:absolute; z-index:2;
  left:clamp(16px,2.4vw,34px); bottom:clamp(16px,2.4vw,34px);
  right:clamp(16px,2.4vw,34px);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(239,233,227,.82);
  text-shadow:0 1px 14px rgba(0,0,0,.8);
}

/* ---------- the working side ---------- */

.desk__body{
  padding-inline:clamp(20px,4.4vw,88px);
  padding-block:calc(var(--nav-h) + clamp(34px,6vw,84px)) clamp(52px,8vw,120px);
  max-width:860px;
}
.desk__title{
  font-variation-settings:"wdth" 62,"wght" 870;
  text-transform:uppercase;
  font-size:clamp(3rem,8.6vw,7.4rem);
  line-height:.83;
  letter-spacing:-.02em;
  margin:.16em 0 0;
}
.desk__now{
  margin:clamp(20px,3vw,32px) 0 0;
  font-family:var(--serif);
  font-size:clamp(1.2rem,2.3vw,1.75rem);
  line-height:1.4;
  color:var(--bone);
  max-width:34ch;
}
.desk__now strong{ color:var(--blood); font-weight:400; }

.jobs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:clamp(20px,3vw,30px) 0 0;
  padding:0; list-style:none;
}
.jobs li{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 620;
  color:#C9C1BA;
  border:1px solid var(--ink-3);
  padding:.55em .85em;
}

/* ---------- addresses set as headlines ---------- */

.mails{ list-style:none; margin:clamp(34px,5vw,60px) 0 0; padding:0; }
.mails li{ border-top:1px solid var(--ink-3); }
.mails li:last-child{ border-bottom:1px solid var(--ink-3); }
.mailrow{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px;
  justify-content:space-between;
  padding-block:clamp(18px,2.6vw,28px);
}
.mailrow__role{
  flex:none;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blood);
  font-variation-settings:"wdth" 100,"wght" 700;
  width:100%;
}
.mailrow__addr{
  font-variation-settings:"wdth" 82,"wght" 720;
  font-size:clamp(1.05rem,2.7vw,2.05rem);
  line-height:1.05;
  text-decoration:none;
  word-break:break-word;
  transition:color .25s ease;
}
.mailrow__addr:hover{ color:var(--ember); }
.copy{
  flex:none;
  background:transparent;
  border:1px solid var(--ash-2);
  color:var(--bone);
  font:inherit;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 650;
  padding:.5em .8em;
  cursor:pointer;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.copy:hover{ border-color:var(--bone); background:rgba(239,233,227,.07); }

/* ---------- the form ---------- */

.bform{ margin-top:clamp(40px,6vw,76px); }
.bform__grid{
  margin-top:clamp(20px,3vw,30px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field label{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ash);
  font-variation-settings:"wdth" 100,"wght" 650;
}
.field input,
.field select,
.field textarea{
  font:inherit;
  font-size:1rem;
  color:var(--bone);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ash-2);
  padding:.7em 0;
  border-radius:0;
  transition:border-color .25s ease;
  width:100%;
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:26px;
}
.field select option{ background:var(--ink-2); color:var(--bone); }
.field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:0; border-bottom-color:var(--blood); }
.field input::placeholder,.field textarea::placeholder{ color:var(--ash-2); }

.bform__acts{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
  margin-top:clamp(22px,3vw,32px);
}
.bform__note{
  margin:14px 0 0;
  font-size:.75rem; line-height:1.7; color:var(--ash);
  max-width:52ch;
}
.bform__status{
  margin:12px 0 0;
  font-size:.78rem; letter-spacing:.06em;
  color:var(--ember);
  min-height:1.3em;
}

/* ---------- closing blocks ---------- */

.aside{
  margin-top:clamp(44px,6vw,84px);
  border-top:1px solid var(--ink-3);
  padding-top:clamp(24px,3.4vw,40px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
}
.aside h3{
  font-variation-settings:"wdth" 82,"wght" 760;
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.02em;
  margin:0 0 10px;
}
.aside p{ margin:0 0 12px; font-size:.92rem; line-height:1.7; color:#C9C1BA; }
.aside figure{ margin:0 0 14px; }
.aside img{ width:100%; }

@media (max-width:1000px){
  .desk{ grid-template-columns:1fr; }
  .desk__photo{ position:relative; height:clamp(320px,56svh,560px); }
  .desk__photo::after{ background:linear-gradient(to top,rgba(11,10,10,.7),rgba(11,10,10,.1) 60%,rgba(11,10,10,.5)); }
  .desk__body{ padding-block:clamp(34px,6vw,64px) clamp(52px,8vw,110px); max-width:none; }
}
@media (max-width:620px){
  .bform__grid{ grid-template-columns:1fr; }
  .aside{ grid-template-columns:1fr; }
  .mailrow{ justify-content:flex-start; }
}