/* ==========================================================================
   Phase — contact page
   The poster theme's sticker hero (css/home.css, js/home.js) with a red
   disc, which swells straight into the page the form sits on: "Get in
   touch." and the email on the left, the form in a paper card on the
   right with a couple of shapes peeking out from behind it. Form delivery
   is unchanged (js/web3forms.js).
   ========================================================================== */

body.contact-page{--hm-ground:var(--p-red)}

/* ==========================================================================
   HERO — shorter than the other pages: the form is the point
   ========================================================================== */
.js .contact-page .hm-hero{height:190vh}
.contact-page .hm-sun{--s:clamp(240px,26vw,440px);left:66%;top:50%}
.contact-page .hm-hero h1{font-size:clamp(3.8rem,12vw,12rem);letter-spacing:-.06em}
.contact-page .hm-hero__sub{max-width:30em;color:rgba(10,10,10,.82)}

/* ==========================================================================
   THE FORM — on the disc's red
   ========================================================================== */
/* it overlaps the hero by a hair, so no browser can show a seam where the
   swollen disc meets it */
.ct-main{
  position:relative;
  margin-top:-3px;
  padding:clamp(50px,7vw,100px) 0 clamp(110px,12vw,170px);
  background:var(--hm-ground);
  color:#0a0a0a;
  --fl-faint:rgba(10,10,10,.6);
  --fl-dim:rgba(10,10,10,.78);
}
/* the same scalloped hem as the manifesto pages */
.ct-main::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:calc(100% - 1px);
  height:29px;
  background:radial-gradient(circle at 50% 1px,var(--hm-ground) 27px,transparent 28px) 0 0/56px 29px repeat-x;
  pointer-events:none;
  z-index:1;
}
.ct-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,100px);align-items:start}
.ct-info{position:sticky;top:calc(var(--fl-nav) + 40px)}
.ct-info h2{font-size:clamp(2.6rem,5vw,4.6rem);font-weight:600;letter-spacing:-.045em;line-height:.95}
.ct-info p{margin-top:20px;max-width:28ch;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.55;color:var(--fl-dim)}
.ct-email{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:26px;
  padding:16px 24px;
  border-radius:var(--radius-pill);
  font-size:clamp(1.05rem,1.4vw,1.3rem);
  font-weight:600;
  color:#fff;
  background:#0a0a0a;
  transition:transform .35s var(--fl-ease);
}
.ct-email:hover{transform:translateY(-2px)}
.ct-email svg{width:20px;height:20px;flex:none;color:var(--p-yellow)}

/* the form card */
.ct-card{position:relative}
.ct-card__sticker{position:absolute;z-index:0;height:auto;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(60,10,0,.25))}
.ct-card__sticker--lips{right:-34px;top:-46px;width:clamp(110px,11vw,160px);transform:rotate(12deg)}
.ct-card__sticker--rainbow{left:-40px;bottom:-40px;width:clamp(90px,9vw,130px);transform:rotate(-10deg)}
form.ct-form{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 18px;
  padding:clamp(26px,3.4vw,44px);
  border-radius:28px;
  background:var(--fl-surface);
  box-shadow:0 50px 90px -50px rgba(60,10,0,.6),0 10px 24px -14px rgba(60,10,0,.3);
}
.ct-form .field{gap:8px}
.ct-form .field--wide{grid-column:1 / -1}
.ct-form .field label{
  font-family:var(--fl-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(10,10,10,.62);
}
.ct-form .field .optional{color:rgba(10,10,10,.4);text-transform:none;letter-spacing:.02em}
.ct-form .field input,
.ct-form .field textarea{
  padding:14px 16px;
  border:1.5px solid transparent;
  border-radius:14px;
  font-size:1rem;
  background:var(--fl-bg);
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.ct-form .field textarea{resize:vertical;min-height:110px}
.ct-form .field input:hover,
.ct-form .field textarea:hover{border-color:rgba(10,10,10,.12)}
.ct-form .field input:focus-visible,
.ct-form .field textarea:focus-visible{
  outline:none;
  border-color:#0a0a0a;
  background:#fff;
  box-shadow:0 0 0 4px rgba(247,208,0,.55);
}
.ct-form .field input::placeholder{color:rgba(10,10,10,.35)}
.ct-form .fl-btn{grid-column:1 / -1;height:58px;margin-top:6px;font-size:1.02rem}
.ct-form .fl-btn:disabled{opacity:.7;cursor:progress}
.ct-form .form-status{grid-column:1 / -1}
.ct-form .form-status:empty{display:none}

/* ==========================================================================
   JSB — jwb.gif (c. 1996), the original pixels on a small white card under
   the email, with a little heart for JSB
   ========================================================================== */
.ct-jsb{
  position:relative;
  width:clamp(160px,15vw,210px);
  margin:clamp(34px,4vw,54px) 0 0 6px;
  padding:10px;
  border:2px solid #0a0a0a;
  border-radius:16px;
  background:#fff;
  box-shadow:0 5px 0 #0a0a0a;
  rotate:-3deg;
}
.ct-jsb img{display:block;width:100%;height:auto;border-radius:6px}
.ct-jsb__heart{
  position:absolute;
  right:-20px;
  top:-22px;
  width:56px;
  height:auto;
  transform:rotate(12deg);
  overflow:visible;
  filter:drop-shadow(0 3px 0 #0a0a0a);
}
.ct-jsb__heart path{fill:#ff4d36;stroke:#0a0a0a;stroke-width:5;stroke-linejoin:round}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .ct-grid{grid-template-columns:1fr}
  .ct-info{position:relative;top:auto}
}
@media (max-width:600px){
  form.ct-form{grid-template-columns:1fr}
  .ct-card__sticker--lips{right:-12px;top:-40px;width:96px}
  .ct-card__sticker--rainbow{left:-14px;bottom:-34px;width:80px}
}
@media (prefers-reduced-motion:reduce){
  .js .contact-page .hm-hero{height:auto}
}