/* ==========================================================================
   Jonshan Safari: contact
   Loaded only on /contact/. The composer, the two places, the map.
   ========================================================================== */

/* ---------- the composer ----------
   Opens on --sand. The homepage and /about/ open on the painted dunes and
   /packages/ opens on the night, so this is the one ground left that is still
   unmistakably this site and has not already been used to start a page. */
.ct-hero{
  position:relative;
  padding:clamp(122px,13vw,160px) 0 clamp(54px,7vw,86px);
  background:var(--sand);
}
.ct-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.06;
}
.ct-hero > .wrap{position:relative;z-index:1}

.ct-hero__in{display:grid;gap:clamp(34px,4.5vw,58px);align-items:start}
@media (min-width:900px){
  .ct-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,405px);gap:clamp(48px,6vw,86px)}
}

.ct-ask .h1{max-width:11ch}
.ct-lede{
  margin-top:20px;max-width:47ch;
  font-size:clamp(17.5px,1.5vw,20px);line-height:1.58;color:var(--bark-2);
}

/* ---------- the four fields ----------
   Hairline-ruled rows rather than boxed inputs. Every other list of facts on
   this site sits on hairlines (the About page's, the homepage's "Where we
   are", the .facts list), and a form is a list of facts the visitor supplies,
   so it is set the same way. It also keeps the page to one bordered object,
   which is the message itself. */
.ct-form{margin-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--gold);max-width:35rem}
.ct-row{
  display:grid;gap:6px;
  padding:15px 0;border-bottom:1px solid var(--rule);
  border-width:0 0 1px;margin:0;min-width:0;   /* fieldset reset */
}
.ct-row > label,.ct-row > legend{
  padding:0;font:500 14px/1.4 var(--body);color:var(--muted);
}
.ct-row input[type="date"],
.ct-row input[type="number"],
.ct-row input[type="text"]{
  width:100%;
  background:transparent;border:0;padding:2px 0;
  font:400 17.5px/1.5 var(--body);color:var(--ink);
  border-radius:0;   /* iOS rounds bare inputs otherwise */
  -webkit-appearance:none;appearance:none;
}
.ct-row input::placeholder{color:#A8977E;opacity:1}
.ct-row input:focus{outline:0}
/* The row carries the focus ring, not the input: with a borderless field the
   ring has to describe the whole row or it looks like a stray underline. */
.ct-row:focus-within{border-bottom-color:var(--gold-dk)}
.ct-row:focus-within > label,
.ct-row:focus-within > legend{color:var(--gold-dk)}

/* the three beds */
.ct-beds{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ct-bed{position:relative}
.ct-bed input{position:absolute;opacity:0;width:0;height:0}
.ct-bed span{
  display:block;padding:9px 15px;
  border:1.5px solid var(--rule);border-radius:999px;
  font:500 14.5px/1 var(--body);color:var(--muted);
  cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;
}
.ct-bed input:checked + span{background:var(--bark);border-color:var(--bark);color:var(--cream)}
.ct-bed input:focus-visible + span{outline:2.5px solid var(--sun);outline-offset:3px}
.ct-bed span:hover{border-color:var(--gold)}
.ct-bed input:checked + span:hover{background:var(--bark-3);border-color:var(--bark-3)}
@media (prefers-reduced-motion:reduce){.ct-bed span{transition:none}}

/* ---------- the message ----------
   The page's only card, and the only border and lift spent anywhere on it. */
.ct-note{
  position:relative;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:var(--lift);
}
@media (min-width:900px){.ct-note{position:sticky;top:96px}}

/* There was a cusped crown across the top of this card, cut from the same
   nine-foil path the photographs use. It came off: the path is drawn for a tall
   frame, and squashed into a 26px strip its cusps flatten into a gold smear
   that reads as a rendering fault rather than as the motif. The arch stays a
   picture frame, which is what it is good at. */
.ct-note__body{padding:24px 24px 26px}
.ct-note__h{
  font-family:var(--display);font-weight:400;font-size:18px;
  letter-spacing:-.008em;color:var(--muted);
  font-variation-settings:'opsz' 24,'SOFT' 22,'WONK' 0;
}
/* Deliberately not a monospace face. This is a message a person sends, not a
   payload, and setting it in mono would make it look like a config file. */
.ct-note__msg{
  /* Holds its height as the message grows, so the button does not walk down the
     page while somebody is typing into the fields beside it. */
  margin-top:12px;min-height:8.6em;
  font-size:16.5px;line-height:1.62;color:var(--ink);
}
.ct-note .btn{margin-top:18px}
.ct-note__how{
  margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center;
}
.ct-note__alt{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:14.5px;line-height:1.5;color:var(--muted);text-align:center;
}

/* ---------- the two places ---------- */
.ct-places{display:grid;gap:clamp(30px,4vw,52px);margin-bottom:clamp(34px,4.4vw,52px)}
@media (min-width:820px){.ct-places{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px)}}

.ct-place__h{
  font-family:var(--display);font-weight:400;font-size:clamp(21px,2.1vw,25px);
  letter-spacing:-.014em;color:var(--bark);
  font-variation-settings:'opsz' 32,'SOFT' 28,'WONK' 0;
  padding-bottom:14px;border-bottom:1px solid var(--gold);
}
.ct-place__addr{
  margin-top:18px;font-style:normal;
  font-size:17px;line-height:1.62;color:var(--ink);max-width:34ch;
}
.ct-place__p{margin-top:16px;font-size:16.5px;line-height:1.65;color:var(--muted);max-width:46ch}
.ct-place__p + .ct-place__p{margin-top:14px}
.ct-place .btns{margin-top:22px}

.ct-meta{margin-top:18px}
.ct-meta > div{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:16px}
.ct-meta > div:first-child{border-top:1px solid var(--rule)}
.ct-meta dt{flex:none;width:104px;color:var(--muted)}
.ct-meta dd{margin:0;font-weight:500}
.ct-meta__why{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:2px}

/* ---------- the map ---------- */
.ct-map{border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--sand)}
.ct-map iframe{display:block;width:100%;height:clamp(260px,38vw,400px);border:0}
.ct-map__cap{
  padding:12px 16px;border-top:1px solid var(--rule);
  background:var(--paper);font-size:14px;color:var(--muted);
}

.ct-more{margin-top:26px;font-size:16px;line-height:1.65;color:var(--muted);max-width:56ch}