/* Say hello: the headline on the start side, the form on the end side, stacked on narrow screens. Once sent, a
   "Message sent" box takes the form's place, as tall as the form was. The state comes from hello.js as data-state on the section, or with JavaScript off
   from the address: contact.php redirects to #sent or #error. */

/* The top line: the heading over a rule, as Story's */
.hl-top {
  display: flex;
  align-items: center;
  min-block-size: var(--tap);
  border-block-end: 1px solid var(--line);
}

.hl-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8) var(--space-18);
  align-items: start;
  padding-block-start: var(--space-fluid-xl);
}
.hl-lede h3 {
  margin: 0;
  max-inline-size: 14ch;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.hl-lede p { margin: var(--space-5) 0 0; max-inline-size: 38ch; color: var(--muted); font-size: var(--text-lead); }

/* The form, one field under another */
.hl-form, .hl-sent { grid-column: 2; grid-row: 1; }
.hl-form { display: flex; flex-direction: column; gap: var(--space-5); }
.hl-field { display: flex; flex-direction: column; gap: var(--space-2); }
.hl-field label { font-size: var(--text-md); font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.hl-field :is(input, textarea) {
  display: block;
  inline-size: 100%;
  min-block-size: var(--tap);
  margin: 0;
  padding: var(--space-2-5) var(--space-3-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  line-height: var(--leading-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.hl-field textarea { resize: block; }
.hl-field :is(input, textarea):focus { border-color: var(--accent); }
.hl-field [aria-invalid="true"] { border-color: var(--bad-text); }
.hl-err { margin: 0; color: var(--bad-text); font-size: var(--text-sm); line-height: var(--leading-snug); }

/* The honeypot: people never see it, bots fill it in */
.hl-trap { display: none; }

/* A failure no field owns, above the button: an error, or being offline */
.hl-msg { display: none; margin: 0; color: var(--bad-text); font-size: var(--text-md); }
.hl-msg:target, .hello[data-state="error"] .hl-msg { display: block; }
.hello[data-state="offline"] .hl-msg { display: block; color: var(--text); }

.hl-send {
  align-self: flex-start;
  min-block-size: var(--tap);
  margin: 0;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.hl-send:hover { background: var(--accent-text); }
.hl-send:disabled { background: var(--muted); cursor: progress; }

/* Sent: a box in the form's place. hello.js holds it at the form's height, so nothing under it moves, and fills in
   who it thanks, the address the reply goes to and what they wrote. With JavaScript off it says the reply goes to
   the email they gave. */
.hl-sent {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  scroll-margin-block-start: var(--space-fluid-xl);
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.hl-sent:target, .hello[data-state="sent"] .hl-sent { display: flex; }
/* It takes focus so screen readers read it out, but it is no control, so it shows no focus ring */
.hl-sent:focus-visible { outline: none; }
.hl-sent:target ~ .hl-form, .hello[data-state="sent"] .hl-form { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hello[data-state="sent"] .hl-sent { animation: hl-in var(--dur-base) var(--ease) both; }
}
@keyframes hl-in { from { opacity: 0; transform: translateY(var(--space-1-5)); } }
.hl-sent-mark {
  display: grid;
  place-items: center;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: var(--r-round);
  background: var(--accent-text);
  color: var(--bg);
}
.hl-sent-mark svg { inline-size: var(--space-5); block-size: var(--space-5); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hl-sent p { margin: 0; }
.hl-sent-h {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.hl-sent .hl-sent-to { margin-block-start: var(--space-2); color: var(--muted); font-size: var(--text-lead); }
.hl-sent-to b { color: var(--text); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
/* What they wrote, under a rule: its first four lines */
.hl-sent-q { margin: 0; padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.hl-sent-q figcaption {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.hl-sent-q blockquote {
  display: -webkit-box;
  margin: var(--space-2) 0 0;
  overflow: hidden;
  font-size: var(--text-md);
  white-space: pre-line;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.hl-again {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-block-size: var(--tap);
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-decoration-color: var(--line);
  text-underline-offset: var(--space-1);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.hl-again:hover { text-decoration-color: currentColor; }

@media (width < 760px) {
  .hl-body { grid-template-columns: minmax(0, 1fr); }
  .hl-form, .hl-sent { grid-column: 1; grid-row: auto; }
  .hl-sent { padding: var(--space-6); }
}