/* Contact: one small type size over a full-bleed work montage with film grain.
   The layout hangs on a single line across the middle of the screen; everything else sits at the bottom. */
body.contact-page{background:#2b2b2b;color:#fff4ea;min-height:100vh}
.contact-page ::selection{color:#2b2b2b;background:#fff4ea}

.ct-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#2b2b2b;pointer-events:none}
.ct-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ct-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.18) 32%,rgba(0,0,0,.24) 60%,rgba(0,0,0,.58))}
.ct-grain{position:absolute;left:-50%;top:-50%;width:200%;height:200%;opacity:.12;mix-blend-mode:soft-light;animation:ct-grain .9s steps(6) infinite}
@keyframes ct-grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}34%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}84%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}}

/* The nav sits on the video: cream type, and a dark fade in place of the lilac one. */
.contact-page .below-nav .nav-bar{color:#fff4ea}
.contact-page .below-nav .nav-bar::before{background:linear-gradient(180deg,rgba(0,0,0,.28) 20%,rgba(0,0,0,0))}
.contact-page .below-nav .nav-name:hover{color:#c1bcdd}

.ct-main{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box;font-size:14px;font-weight:350;line-height:1.2;letter-spacing:.004em;text-shadow:0 0 18px rgba(43,43,43,.35)}
.ct-space{flex:1 1 0;min-height:220px}
.ct-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-inline:28px}
.ct-row>*{min-width:0;margin:0}
.ct-line{align-items:baseline}
.ct-foot{flex:1 1 0;min-height:260px;align-content:end;padding-bottom:32px}
.ct-title{grid-column:1/3;font:inherit}
.ct-ask{grid-column:3/7}
.ct-mail{grid-column:8/11;justify-self:start}
.ct-time{grid-column:11/13;justify-self:end;font-variant-numeric:tabular-nums}
.ct-links{grid-column:1/3;align-self:end;list-style:none;padding:0;display:flex;flex-direction:column;gap:3px}
.ct-copy{grid-column:3/7;align-self:end;max-width:46ch}
.ct-talk{grid-column:8/11;align-self:end;max-width:30ch}
.ct-end{grid-column:11/13;justify-self:end;align-self:end;display:flex;align-items:baseline;gap:14px}
.ct-trail{font-size:26px;font-weight:400;letter-spacing:-.06em;line-height:.6}

.ct-link,.ct-motion{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1px;background-position:0 calc(100% - 12px);transition:background-size .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.ct-link{display:inline-block;padding:13px 0;margin:-13px 0;color:inherit}
.ct-inline{display:inline;padding:0;margin:0;background-position:0 100%}
.ct-motion{appearance:none;border:0;background-color:transparent;color:inherit;font:inherit;padding:13px 0;margin:-13px 0;cursor:pointer;opacity:.8}
.ct-motion:hover,.ct-motion:focus-visible{opacity:1}
.ct-link:hover,.ct-link:focus-visible,.ct-motion:hover,.ct-motion:focus-visible{background-size:100% 1px;text-decoration:none}
.ct-link:focus-visible,.ct-motion:focus-visible{outline:1px solid currentColor;outline-offset:4px}

@media (max-width:760px){
  .ct-row{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:16px;padding-inline:20px;row-gap:22px}
  .ct-title{grid-column:1/3}
  .ct-ask{grid-column:3/7}
  .ct-mail{grid-column:1/4}
  .ct-time{grid-column:4/7}
  .ct-links{grid-column:1/3;order:2}
  .ct-copy{grid-column:1/7;order:1}
  .ct-talk{grid-column:3/7;order:3;align-self:start}
  .ct-end{grid-column:1/7;order:4;justify-self:start}
}
@media (prefers-reduced-motion:reduce){.ct-grain{animation:none}.ct-link,.ct-motion{transition:none}}

/* Contact opens a small form under the middle line. Without JavaScript the form is simply shown. */
.ct-open{appearance:none;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-shadow:inherit;padding:13px 0;margin:-13px 0;cursor:pointer;display:inline-flex;align-items:baseline;gap:.45em;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1px;background-position:0 calc(100% - 12px);transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.ct-open:hover,.ct-open:focus-visible,.ct-open[aria-expanded=true]{background-size:100% 1px}
.ct-open:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.ct-open-plus{display:inline-block;font-size:17px;font-weight:300;line-height:0;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.ct-open:hover .ct-open-plus{transform:rotate(90deg)}
.ct-open[aria-expanded=true] .ct-open-plus{transform:rotate(45deg)}

.ct-form-row{align-items:start}
.ct-form-wrap{grid-column:3/7;display:grid;grid-template-rows:1fr}
.js .ct-form-wrap{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),opacity .4s,visibility 0s .6s}
.js .ct-form-wrap.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),opacity .5s .1s,visibility 0s}
.ct-form{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding-top:30px;max-width:46ch}
.ct-field{display:grid;grid-template-columns:5.5em minmax(0,1fr);align-items:baseline;column-gap:12px}
.ct-field label{opacity:.72}
.ct-field input,.ct-field textarea{appearance:none;width:100%;box-sizing:border-box;margin:0;padding:8px 0 7px;border:0;border-bottom:1px solid rgba(255,244,234,.38);border-radius:0;background:transparent;color:#fff4ea;font:inherit;letter-spacing:inherit;line-height:1.3;text-shadow:inherit;outline:0;transition:border-color .3s}
.ct-field textarea{resize:none;overflow:hidden;min-height:2.3em}
.ct-field input:focus,.ct-field textarea:focus{border-bottom-color:#fff4ea}
.ct-field input[aria-invalid=true],.ct-field textarea[aria-invalid=true]{border-bottom-color:#ffb4a8}
.ct-field input:-webkit-autofill{-webkit-text-fill-color:#fff4ea;-webkit-box-shadow:0 0 0 40px rgba(43,43,43,.01) inset;transition:background-color 9999s}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-send-row{display:flex;align-items:baseline;gap:18px;padding-left:calc(5.5em + 12px);margin-top:4px}
.ct-send{appearance:none;border:0;background-color:transparent;font:inherit;letter-spacing:inherit;text-shadow:inherit;cursor:pointer}
.ct-send[disabled]{opacity:.55;cursor:default}
.ct-status{margin:0;opacity:.85}

@media (max-width:760px){
  .ct-form-row{order:0}
  .ct-form-wrap{grid-column:1/7}
  .ct-field{grid-template-columns:4.6em minmax(0,1fr)}
  .ct-send-row{padding-left:calc(4.6em + 12px)}
}
@media (prefers-reduced-motion:reduce){.js .ct-form-wrap,.js .ct-form-wrap.is-open,.ct-open,.ct-open-plus{transition:none}}