/* ============================================================
   CONTACT — Design 2 tinted icons + flex-start submit
============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start;}
.contact-info > p{margin-top:18px;color:var(--ink-dim);font-size:17px;max-width:420px;}
.contact-info h2{font-size:clamp(34px,4.5vw,52px);letter-spacing:-0.03em;font-weight:500;line-height:1.04;}
.contact-info h2 .accent{color:var(--purple);}
.contact-list{margin-top:36px;display:flex;flex-direction:column;gap:14px;}
.contact-item{
  display:flex;align-items:center;gap:14px;padding:18px 20px;
  border:1px solid var(--line);border-radius:18px;background:var(--bg-card);
  transition:border-color .3s ease, transform .3s ease;
}
.contact-item:hover{border-color:var(--line-strong);transform:translateY(-1px);}
.contact-item .ci-icon{ display:grid; place-items:center; font-size:22px; line-height:1; color:var(--ink); }
.contact-item h4{ font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.contact-item p{font-size:15px;color:var(--ink);margin-top:2px;}
.contact-item p.ci-note{font-size:13px;color:var(--ink-dim);margin-top:4px;}

.contact-form{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;
  background:var(--bg-card);display:flex;flex-direction:column;gap:14px;
}
.contact-form .field label{ display:block;margin-bottom:8px; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-dim); }
.contact-form input,.contact-form textarea{
  width:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;color:var(--ink);font:inherit;font-size:15px;font-family:var(--font-body);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(143,83,161,0.10);
  background:var(--bg-card);
}
.contact-form textarea{resize:vertical;min-height:130px;}
.contact-form button{align-self:flex-start;padding:13px 22px;}

@media (max-width: 980px){
  .contact-grid{grid-template-columns:1fr;gap:32px;}
}


/* ============================================================
   CONTACT — postcard layout (.contact-info.designed)
   The info column reads straight down: heading, then the photograph as
   a plain framed still, then the two contact rows side by side split by
   a single vertical rule.

   Those two-up rows are structural, not decorative. Stacked they cost
   ~134px; side by side ~82px. The 52px that frees takes the image from
   a 2.29:1 letterbox strip to a real 16:9, and brings the column to
   ~561px against the form's ~573px — close enough that the grid stops
   looking lopsided. Balancing those two heights is the entire reason
   this column carries a photograph at all, and it is the job the older
   poster card was doing by inflating itself to min-height:580px.

   Ratios at 1280: info column ~578px, photo 578x325 = 1.78:1.
   Contrast: photo frame --line 19 levels light / 22 dark;
   row divider --line-strong 33 light / 35 dark.
============================================================ */
.contact-grid.designed{
  align-items:start;
  gap:56px;
}

.contact-info.designed{
  display:flex;
  flex-direction:column;
  color:var(--ink);
}

/* Source order is img, heading, list. The heading is ordered above the
   photograph so the column opens on words rather than on an image. */
.contact-info.designed .heading-area{order:1;max-width:460px;}
.contact-info.designed h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(36px,4.4vw,52px);
  font-weight:500;letter-spacing:-0.03em;line-height:1.04;
}
.contact-info.designed .heading-area > p{
  margin:12px 0 0;
  color:var(--ink-dim);
  font-size:17px;line-height:1.55;max-width:400px;
}

/* box-sizing is border-box globally, so the 16:9 box includes the frame. */
.contact-info.designed > .bg-img{
  order:2;
  width:100%;height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:26% 40%;
  margin-top:34px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  filter:saturate(0.72) contrast(0.97) brightness(1.02);
}

/* ----- The address side: both rows on one line, split by a rule ----- */
.contact-info.designed .contact-list{
  order:3;
  margin-top:34px;
  flex-direction:row;
  align-items:stretch;
  gap:0;
}
.contact-info.designed .contact-item{
  align-items:flex-start;
  gap:14px;
  padding:4px 0;
  border:none;border-radius:0;background:none;
  transition:none;
}
.contact-info.designed .contact-item:hover{transform:none;}
.contact-info.designed .contact-item:first-child{
  flex:0 0 auto;
  padding-right:34px;
}
.contact-info.designed .contact-item:last-child{
  flex:1 1 0;min-width:0;
  border-left:1px solid var(--line-strong);
  padding-left:34px;
}
.contact-info.designed .contact-item .ci-icon{ flex-shrink:0; width:24px; font-size:22px; }
.contact-info.designed .contact-item > div{min-width:0;flex:1;}
.contact-info.designed .contact-item h4{
  margin:0 0 2px;
}
.contact-info.designed .contact-item p{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;letter-spacing:0;line-height:1.45;
}
.contact-info.designed .contact-item p.ci-note{
  margin-top:4px;font-size:13px;color:var(--ink-dim);
}

/* The photo is the only thing that needs retuning on dark paper — at the
   light values it reads as a lit panel floating on a dark page. The icon
   tints get a small bump for the same reason. */
:root[data-theme="dark"] .contact-info.designed > .bg-img{
  filter:saturate(0.62) contrast(0.98) brightness(0.84);
}

@media (max-width: 980px){
  .contact-grid.designed{gap:40px;}
}
@media (max-width: 760px){
  .contact-info.designed h2{font-size:34px;}
  .contact-info.designed > .bg-img{margin-top:26px;}
  .contact-info.designed .contact-list{margin-top:26px;}
  .contact-info.designed .contact-item{padding:2px 0;}
  .contact-info.designed .contact-item:first-child{padding-right:28px;}
  .contact-info.designed .contact-item:last-child{padding-left:28px;}
}
/* Below ~560px the two rows can no longer both hold their address lines,
   so the divider folds away and they stack. */
@media (max-width: 560px){
  .contact-info.designed .contact-list{flex-direction:column;gap:14px;}
  .contact-info.designed .contact-item:first-child{padding-right:0;}
  .contact-info.designed .contact-item:last-child{border-left:none;padding-left:0;}
}