/* Contact page (/contact) only. Shared components and tokens come from /styles.css. */

/* ---------- hello ---------- */
.ct-hero{padding:clamp(36px,5vw,72px) 0 clamp(24px,4vw,40px);}
.ct-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,6vw,80px);align-items:center;}
.ct-hero-copy .hi{font-size:clamp(1.8rem,1.4rem + 1.2vw,2.4rem);}
.ct-hero-copy h1{margin:8px 0 14px;font-size:clamp(3rem,1.8rem + 4.4vw,5.4rem);line-height:1;letter-spacing:-.035em;}
.ct-lede{margin:0 0 28px;font-size:var(--text-lg);color:var(--color-ink-soft);}
.ct-email{min-height:58px;padding:.7em 1.6em;font-size:1.06rem;gap:.6em;}
.ct-mail{flex:none;width:22px;height:22px;}
.ct-email span{overflow-wrap:anywhere;}

/* the three numbers, each on its own burst sticker */
.ct-stats{display:flex;flex-wrap:wrap;gap:22px 30px;margin-top:38px;}
.ct-stat{display:grid;justify-items:center;width:118px;font-size:.86rem;line-height:1.3;text-align:center;color:var(--color-ink-soft);}
.ct-stat b{
  display:grid;place-items:center;width:104px;height:104px;margin-bottom:8px;
  font:1.4rem/1 var(--font-display);color:var(--color-ink);
  background:center/contain no-repeat;filter:var(--sticker-shadow);
}
.ct-stat:nth-child(1) b{background-image:url("../../assets/stickers/burst-butter.svg");transform:rotate(-8deg);}
.ct-stat:nth-child(2) b{background-image:url("../../assets/stickers/burst-mint.svg");transform:rotate(6deg);}
.ct-stat:nth-child(3) b{background-image:url("../../assets/stickers/burst-sky.svg");transform:rotate(-4deg);}

.ct-photo{position:relative;justify-self:center;width:min(100%,300px);padding:20px 10px;}
.ct-polaroid{max-width:none;padding:13px 13px 52px;transform:rotate(3deg);--tape-col:var(--tape-accent);}
.ct-polaroid img{aspect-ratio:3/4;object-fit:cover;}
.ct-deco-heart{--size:64px;--tilt:-14deg;top:2px;left:-22px;}
.ct-deco-sparkle{--size:40px;right:-18px;bottom:22%;}

/* ---------- what to write about ---------- */
.ct-main{padding:clamp(28px,4vw,48px) 0 clamp(50px,7vw,90px);}
.ct-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"title ." "cards envelope";
  column-gap:clamp(26px,4vw,48px);align-items:start;
}
.ct-title{grid-area:title;margin:0 0 22px;font-size:var(--text-2xl);}
.ct-cards{grid-area:cards;display:grid;gap:22px;}
.ct-card{
  position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;
  padding:26px 26px 24px;background:var(--color-card);
  border:1px solid var(--color-line);border-radius:var(--radius-xs);box-shadow:var(--shadow-paper);
  --tape-tilt:-4deg;--tape-col:var(--tape-butter);
}
.ct-card.taped::before{left:70px;}
.ct-emoji{display:grid;place-items:center;width:56px;height:56px;font-size:1.6rem;line-height:1;background:var(--color-page);border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--color-line);}
.ct-card h3{margin:4px 0 8px;font-size:1.3rem;}
.ct-card p{margin:0;color:var(--color-ink-soft);}
.ct-card .btn{margin-top:18px;}

/* "come find me": a kraft envelope with a sealed flap */
.ct-envelope{
  grid-area:envelope;position:relative;overflow:hidden;
  padding:136px clamp(22px,3.4vw,34px) 34px;text-align:center;
  background:var(--color-paper-2);border-radius:6px;box-shadow:var(--shadow-lift);
}
.ct-flap{
  position:absolute;top:0;left:0;right:0;height:112px;
  background:#E5D6BC;clip-path:polygon(0 0,100% 0,50% 100%);
}
.ct-flap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.04));}
.ct-seal{position:absolute;top:70px;left:50%;width:54px;height:54px;transform:translateX(-50%) rotate(-8deg);filter:var(--sticker-shadow);}
.ct-envelope h2{margin:0 0 10px;font-size:1.6rem;}
.ct-envelope p{margin:0 0 22px;color:var(--color-text);}
.ct-socials{justify-content:center;}

/* ---------- phones ---------- */
@media (max-width:760px){
  .ct-hero{padding-top:26px;}
  .ct-hero-grid{grid-template-columns:minmax(0,1fr);gap:18px;}
  /* centred hello on phones (Cindy, 29 Oct) */
  .ct-hero-copy{text-align:center;}
  .ct-hero-copy h1{font-size:clamp(2.8rem,14vw,3.6rem);}
  .ct-email{width:100%;}
  .ct-stats{justify-content:center;gap:16px 10px;}
  .ct-stat{width:92px;font-size:.8rem;}
  .ct-stat b{width:86px;height:86px;font-size:1.2rem;}
  .ct-photo{width:min(64%,220px);padding-top:10px;}
  .ct-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "cards" "envelope";row-gap:0;}
  .ct-envelope{margin-top:30px;}
  .ct-card{grid-template-columns:minmax(0,1fr);gap:10px;padding:26px 20px 22px;}
}