/* ---------------------------------------------------------------------------
   pages/contact.css: the reach strip and the form.

   This is the page people open when they need to reach the shop, so nothing
   on it reveals on scroll. The phone number, the email, the address and every
   form field are painted in their final state on the first frame. Hover and
   focus are the only motion.

   The form is the point of the page and it has the whole width. The three
   ways to reach the shop sit above it in a slim band, small enough not to
   compete and big enough to press. The hours are not here: they are in the
   footer, as they are on every page.
   --------------------------------------------------------------------------- */

/* ---- The reach strip ---------------------------------------------------- */
.reach-strip{background:var(--paper);border-bottom:2px solid var(--ink);padding:22px 0}
.reach{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reach-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;border:2px solid var(--ink);background:var(--cream);padding:14px 16px;min-height:66px;text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .12s var(--ease-settle),box-shadow .12s var(--ease-settle)}
.reach-card:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.reach-card:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.reach-card:focus-visible{outline:3px solid var(--mint2);outline-offset:3px}
.reach-label{grid-column:1;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#5b6166}
.reach-value{grid-column:1;grid-row:2;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:21px;line-height:1.05;letter-spacing:-.02em;margin-top:2px}
.reach-value.email{font-size:15px;overflow-wrap:anywhere}
.reach-card .stretch-arrow{grid-column:2;grid-row:1/3}
.reach-card:hover .stretch-arrow i{width:40px}

/* The arrow grows out of its own shaft rather than sliding along, which is
   why the shaft and the head are two elements. */
.stretch-arrow{display:inline-flex;align-items:center;height:13px}
.stretch-arrow i{display:block;height:3px;width:20px;background:currentColor;transition:width .28s var(--ease-settle)}
.stretch-arrow b{display:block;width:11px;height:11px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg);margin-left:-7px}

/* ---- The form ----------------------------------------------------------- */
.form{border:3px solid var(--ink);background:var(--paper);box-shadow:14px 14px 0 var(--mint);padding:48px}
.form h2{margin-bottom:10px}
.form-intro{max-width:70ch;color:#5b6166;margin-bottom:28px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.field .label-note{font-weight:400;text-transform:none;letter-spacing:0;color:#5b6166}

/* border-radius:0 is deliberate: every corner on this site is square, and a
   browser's own rounded input would be the one exception. 16px is the size
   below which iOS zooms the page on focus. */
.field input,.field textarea,.field select{width:100%;border:2px solid var(--ink);background:var(--cream);padding:13px 14px;border-radius:0;outline:none;font-size:16px;color:var(--ink)}

/* outline:none above removes the browser's focus ring, so this replaces it.
   It is a 4px mint halo and it is the only thing telling a keyboard visitor
   where they are. Do not remove it without putting something else there. */
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 4px rgba(143,207,196,.55)}
.field textarea{min-height:170px;resize:vertical}

.form-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.status{font-size:13px;margin:0;color:#5b6166}

@media(max-width:900px){
  .reach{grid-template-columns:1fr;gap:10px}
  .reach-card{min-height:58px;box-shadow:3px 3px 0 var(--ink)}
  .form{padding:26px 20px;box-shadow:8px 8px 0 var(--mint)}
}

@media(max-width:620px){
  .field-grid{grid-template-columns:1fr;gap:0}
  .form-actions .btn{width:100%}
}