/* ============================================================
   CONTACT PAGE
   Page specific styles, prefixed .ct- so they cannot collide
   with the shared components in site.css.

   Direction: the Serena contact layout. A centred title, then a
   decorated photograph on one side and a short stack of bordered
   detail rows on the other, then a message form opened by a
   centred heading with a hairline rule either side. The form
   itself reuses the .pgf__ field styles the private group page
   already ships, so there is one set of input styles on the site.
   ============================================================ */

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.ct-head{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;max-width:46rem;margin-inline:auto;
}
.ct-head h1{
  font-size:clamp(2.8rem,6vw,4.6rem);
  line-height:1.05;letter-spacing:-.015em;color:var(--green);
}

/* ------------------------------------------------------------
   PANEL
   One sand card holding the whole block: the botanical study on
   the left, the details on the right. The card clips, so the
   illustration can run off its bottom edge instead of sitting
   politely inside a box.
   ------------------------------------------------------------ */
.ct-panel{
  --ct-panel-pad-block:clamp(36px,4.5vw,64px);
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  background:var(--sand);
  border-radius:clamp(28px,4vw,48px);
  padding:var(--ct-panel-pad-block) clamp(24px,4vw,72px);
  overflow:hidden;
}

/* ------------------------------------------------------------
   FIGURE
   The study stands on the floor of the card. Around it: an arc of
   type curving over the top, a sprig behind one side, and three
   sparks at three sizes so they read as one scatter.
   ------------------------------------------------------------ */
.ct-figure{
  position:relative;
  align-self:end;
  /* Cancels the card's bottom padding so the stems reach the edge. */
  margin-block-end:calc(-1 * var(--ct-panel-pad-block));
  padding-block-start:clamp(56px,7vw,96px);
  isolation:isolate;
}
.ct-figure__subject{
  position:relative;z-index:2;
  display:block;margin-inline:auto;
  width:100%;max-width:clamp(200px,26vw,330px);height:auto;
  /* The illustration carries an empty band under the stems. Pulling it
     down by roughly that much stands the plants on the card's floor. */
  margin-block-end:clamp(-30px,-2vw,-14px);
}

/* Arc of type over the top of the study. */
.ct-arc{
  position:absolute;z-index:3;pointer-events:none;
  top:0;left:50%;transform:translateX(-54%);
  width:clamp(220px,28vw,350px);height:auto;
}
.ct-arc text{
  font-family:var(--serif);
  font-size:17px;font-weight:600;letter-spacing:.11em;
  fill:var(--green);
  text-transform:uppercase;
}

/* Sprig behind the study, bottom left. */
.ct-figure__sprig{
  position:absolute;z-index:1;pointer-events:none;
  left:clamp(-40px,-2vw,0px);bottom:0;
  width:clamp(120px,16vw,200px);
  /* The markup carries intrinsic width/height attributes, which win
     over `auto` once a CSS width is set. Without this the sprig
     renders at its full 1536px height. */
  height:auto;
  opacity:.34;
  transform:rotate(-10deg);
}

/* Sparks. */
.ct-spark{
  position:absolute;z-index:4;pointer-events:none;
  color:var(--green-soft);
}
.ct-spark--a{top:34%;right:6%;width:clamp(18px,2.4vw,30px)}
.ct-spark--b{top:52%;right:18%;width:clamp(11px,1.5vw,18px)}
.ct-spark--c{top:44%;left:8%;width:clamp(13px,1.8vw,22px)}
@media (prefers-reduced-motion:no-preference){
  .ct-spark{animation:ct-twinkle 4.5s var(--ease) infinite}
  .ct-spark--b{animation-delay:1.4s}
  .ct-spark--c{animation-delay:2.7s}
}
@keyframes ct-twinkle{
  0%,100%{opacity:.45;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.06)}
}

/* ------------------------------------------------------------
   DETAILS
   Rows, not cards: an icon, a line of text, and a rule under each.
   ------------------------------------------------------------ */
.ct-info{display:flex;flex-direction:column;gap:clamp(24px,3vw,34px)}
.ct-info__head{display:flex;flex-direction:column;gap:10px}
.ct-info__head h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.2;color:var(--green)}
.ct-info__head p{font-size:clamp(1rem,1.5vw,1.06rem);line-height:1.7;color:var(--ink-soft);max-width:46ch}

.ct-rows{list-style:none;margin:0;padding:0}
.ct-row{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);
  padding-block:clamp(14px,1.7vw,20px);
  border-bottom:1px solid var(--green-soft);
}
.ct-row__icon{flex:none;display:block;width:22px;height:22px;color:var(--green)}
.ct-row p{font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
/* a{color:inherit} in site.css strips the affordance from inline links */
.ct-row a{
  color:var(--green-deep);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.ct-row a:hover{color:var(--terracotta-deep)}

/* ------------------------------------------------------------
   FORM
   A sand panel so the inputs, which are white, have something to
   sit on. The heading is flanked by two hairlines; the second is
   dropped on narrow screens where there is no room for both.
   ------------------------------------------------------------ */
.ct-form{
  background:var(--sand);
  border-radius:clamp(28px,4vw,48px);
  padding:clamp(40px,6vw,88px) clamp(20px,4vw,72px);
}
.ct-form__head{
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,32px);
  margin-bottom:clamp(32px,4.5vw,56px);
}
.ct-form__rule{
  flex:1 1 0;min-width:0;max-width:205px;height:1.5px;
  background:var(--green-soft);border-radius:2px;
}
.ct-form__head h2{
  flex:none;text-align:center;
  font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.2;color:var(--green);
}
.ct-form__shell{max-width:760px;margin-inline:auto}
.ct-form__actions{display:flex;flex-direction:column;gap:14px;margin-top:clamp(20px,2.6vw,28px)}
/* Full width, the way the template's submit spans its column. */
.ct-form__submit{width:100%;justify-content:center}
.ct-form__foot{font-size:.78rem;line-height:1.6;color:var(--ink-soft);max-width:60ch}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:1099px){
  .ct-panel{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  /* Stacked, the study leads and the details follow. */
  .ct-figure{order:-1;align-self:center;margin-block-end:0;padding-block-start:clamp(48px,10vw,72px)}
  .ct-figure__subject{max-width:clamp(190px,42vw,280px)}
  .ct-arc{width:clamp(220px,50vw,330px)}
}
@media (max-width:809px){
  /* One rule reads as a deliberate flourish at this width; two
     squeeze the heading into a column two words wide. */
  .ct-form__rule--b{display:none}
  .ct-figure__sprig{width:clamp(96px,24vw,140px)}
}