/* #contact: choices, composer, contact card, link cards, the headline band and the footer. */
/* ---------- 8. the last page: choose a next step, edit the message, send it; who to talk to ---------- */
.fin{min-height:100vh;display:flex;flex-direction:column;padding:0;margin-top:0;border-top:1px solid var(--line)}
.fin.wrap{padding-left:0;padding-right:0}
.fin-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hh) + clamp(14px,2.4vh,26px)) var(--m) clamp(12px,2vh,20px)}
.fin-h{font-size:clamp(28px,2.5vw,40px);max-width:16em}
.fin-g{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:clamp(36px,5.4vw,92px);margin-top:clamp(12px,2.2vh,24px);align-items:start}
.fin-k{margin:0 0 clamp(8px,1.4vh,14px);font:600 clamp(19px,1.5vw,24px)/1.2 var(--disp);letter-spacing:-.01em}
.fin-ch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,22px)}
.fch{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;row-gap:clamp(5px,.9vh,8px);padding:clamp(12px,1.8vh,18px) clamp(16px,1.4vw,22px) clamp(13px,1.9vh,20px);border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;transition:box-shadow .25s var(--e),transform .25s var(--e)}
.fch .ic{display:grid;place-items:center;width:34px;height:34px;margin:0;border-radius:50%;background:var(--soft);color:var(--ink);transition:background .25s,color .25s}
.fch b{font:600 clamp(17px,1.3vw,20px)/1.2 var(--disp);color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.fch .d{grid-column:1/-1;font:400 14px/1.45 var(--sans);color:var(--text)}
.fch:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.fch.on{box-shadow:inset 0 0 0 2px var(--red)}
.fch.on .ic{background:var(--red);color:#fff}
.fch:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.fin-box{margin-top:clamp(12px,1.9vh,22px)}
.fin-msg{display:flex;flex-direction:column;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line2),0 14px 34px rgba(20,22,26,.07);overflow:hidden}
.fin-row{display:flex;gap:14px;align-items:center;min-height:clamp(36px,4.6vh,44px);padding:0 22px;border-bottom:1px solid var(--line);font:400 14px/1.3 var(--sans);color:var(--grey)}
.fin-row label{flex:none;width:62px}
.fin-row b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--ink)}
.fin-from{all:unset;box-sizing:border-box;flex:1;min-width:0;height:34px;padding:0 10px;margin:0 -10px;border-radius:6px;font:500 14px/1 var(--sans);color:var(--ink);cursor:text;transition:background .2s,box-shadow .2s}
.fin-from::placeholder{color:var(--faint);font-weight:400}
.fin-from:hover{background:var(--soft)}
.fin-from:focus{background:#FFFEFC;box-shadow:inset 0 0 0 2px var(--hl)}
.fin-from[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--red)}
.fin-msg textarea{display:block;flex:1;width:100%;min-height:0;padding:12px 22px;border:0;border-radius:0;resize:none;outline:0;background:transparent;font:400 15px/1.5 var(--sans);color:var(--ink)}
@media (min-width:960px) and (max-height:820px){.fin-msg textarea{padding:8px 22px;font-size:14.5px;line-height:1.45}.fin-in{padding-top:calc(var(--hh) + 10px)}}
.fin-msg textarea:focus{background:#FFFEFC;box-shadow:inset 0 0 0 2px var(--hl)}
.fin-act{display:flex;align-items:center;gap:18px;padding:11px 16px 11px 22px;border-top:1px solid var(--line);background:#FAF9F6}
.fin-act .btn{height:44px;flex:none}
.fin-act .btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.fin-act small{font:400 13px/1.45 var(--sans);color:var(--grey)}
.fin-me{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:center;padding:clamp(16px,2.6vh,28px) 28px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.fin-me .mono{width:64px;height:64px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font:600 24px/1 var(--disp);letter-spacing:.02em}
.fin-who b{display:block;font:600 clamp(22px,1.9vw,27px)/1.15 var(--disp);color:var(--ink)}
.fin-who span{display:block;margin-top:3px;font:500 14px var(--sans);color:var(--grey)}
.fin-m,.fin-t{grid-column:1/-1;font:500 17px/1.4 var(--sans);color:var(--ink);text-decoration:none}
.fin-m{margin-top:10px}
.fin-m:hover,.fin-t:hover{color:var(--red)}
.fin-ad{grid-column:1/-1;margin:2px 0 0;font:400 13.5px/1.5 var(--sans);color:var(--grey)}
/* the two link cards: where it goes, in a line, and an arrow that says it is a link */
.fin-l{display:grid;gap:clamp(10px,1.5vh,16px);margin-top:clamp(12px,2.2vh,24px)}
.fin-c{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(16px,2.2vh,22px) 22px;background:#fff;box-shadow:0 0 0 1px var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:box-shadow .25s var(--e),transform .25s var(--e)}
.fin-ct{min-width:0}
.fin-c h3{margin:0;font:600 clamp(18px,1.5vw,22px)/1.2 var(--disp);letter-spacing:-.008em}
.fin-cd{display:block;margin-top:5px;font:400 14px/1.45 var(--sans);color:var(--grey)}
.fin-ca{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--soft);color:var(--ink);transition:background .25s var(--e),color .25s var(--e),transform .3s var(--e)}
.fin-c:hover{box-shadow:0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.fin-c:hover .fin-ca{background:var(--red);color:#fff;transform:translateX(3px)}
.fin-c:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.fin-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--soft);overflow:hidden;padding:clamp(8px,1.3vh,13px) 0}
.tk{display:flex;width:max-content;animation:tkScroll 150s linear infinite}
.tk-i{display:flex;flex:none}
.tk-i span{flex:none;padding-left:34px;font:italic 500 17px/1.3 var(--disp);color:var(--text);white-space:nowrap}
.tk-i span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:34px;vertical-align:middle;position:relative;top:-2px}
@keyframes tkScroll{to{transform:translateX(-50%)}}
.foot{padding:clamp(8px,1.4vh,14px) var(--m) calc(clamp(14px,2.4vh,28px) + env(safe-area-inset-bottom));display:flex;justify-content:space-between;font:500 13px var(--sans);color:var(--grey)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
@media (max-width:959px){
  .fin{min-height:0}
  .fin-in{padding:calc(var(--hh) + 14px) var(--m) 40px}
  .fin-g{grid-template-columns:minmax(0,1fr);gap:34px}
  .fin-n,.fin-r{min-width:0}
  .fin-ch{grid-template-columns:1fr}
  .fin-row{padding:8px 16px;align-items:flex-start}
  .fin-row b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .fin-msg textarea{padding:16px;min-height:200px}
  .fin-act{padding:14px 16px}
  .fin-c{padding:16px 18px}
  .fin-act{flex-wrap:wrap;gap:10px 16px}
  .fin-me .mono{width:54px;height:54px;font-size:20px}
  .foot{flex-direction:column;gap:4px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* touch (brief 7.2): the fields are 16px so a phone does not zoom on focus; the From field, the two contact links and the footer link are 44 tall with 8px between */
@media (pointer:coarse),(max-width:959px){
  .fin-from{font-size:16px}
  .fin-msg textarea{font-size:16px}
}
@media (pointer:coarse){
  .fin-from{height:44px;margin-top:-5px;margin-bottom:-5px}
  .fin-me{row-gap:8px}
  .fin-m,.fin-t{display:flex;align-items:center;min-height:44px}
  .foot a{display:inline-block;padding:15px 0;margin:-15px 0}
}
@media (min-width:960px){@supports (height:100dvh){.fin{min-height:100dvh}}}
/* a field the keyboard is in has a ring you can see, not only the faint tint */
.fin-from:focus-visible,.fin-msg textarea:focus-visible{box-shadow:inset 0 0 0 2px var(--red)}

/* touch on the desk layout (a tablet on its side): the From row has room for its 44px field, so the field does not reach into the subject buttons under it */
@media (pointer:coarse) and (min-width:960px){
  .fin-from{margin-top:0;margin-bottom:0}
  .fin-row,.em .fin-row{padding-top:4px;padding-bottom:4px}
}