/* ==========================================================================
   Multi-Hyphenate — CONTACT.

   Ported from mocks/console.html?state=contact. One page inside the fixed
   frame (see css/frame.css): the headline, a real form, and the ways out.

   The mock shipped a bug this file exists partly to prevent: its success
   block carried `hidden`, but a CSS rule set display:grid on the same
   element and beat the UA rule, so the form and the "Sent." state rendered
   at the same time. `[hidden] { display: none !important }` is therefore the
   first rule here and every display rule below is written to lose to it.
   ========================================================================== */

/* Hidden means hidden. Non-negotiable — see the note above. */
body.page-contact [hidden] { display: none !important; }

/* base.css pins .noscript-nav with `inset: 0 0 auto` and chrome.css re-anchors
   it to the bottom without ever releasing `top`, so top:0 and bottom:0 are both
   in force: with JavaScript off the nav stretches the full viewport and eats
   every click — including Send. Released here, because chrome.css is not this
   page's to edit. */
body.page-contact .noscript-nav { top: auto; }

/* --------------------------------------------------------------- the frame */

body.page-contact .mh-frame {
  /* THE TYPE SCALE. Every page title on the site shares --fs-display. */
  --fs-display: clamp(2.1rem, 4.5cqw, 3.4rem);
  --fs-sub: 1.35rem;
  --fs-lead: 1rem;
  --fs-body: 0.9rem;
  --fs-meta: 0.8rem;
  --fs-micro: 0.75rem;

  /* one measure for every prose block: 62–68 characters */
  --measure: 34rem;

  --accent: var(--coral, #e87945);
  --accent-hot: var(--mh-nav-accent, #ef5c32);
}

body.page-contact .mh-frame-content {
  display: grid;
  grid-template-rows: min-content minmax(0, 1fr);
  gap: clamp(0.75rem, 2.4svh, 1.5rem);
  align-content: stretch;
}

.mh-page-mark {
  display: block;
  width: clamp(6.6rem, 9cqw, 9rem);
  line-height: 0;
}

.mh-page-mark img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------------------- type */

.mh-page-title {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 680;
  font-stretch: 92%;
  font-variation-settings: "wdth" 92, "wght" 680;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.mh-page-title span { display: block; }

.mh-dek {
  max-width: 42ch;
  margin: 0;
  color: var(--paper-dim);
  font-size: var(--fs-lead);
  line-height: 1.45;
  text-wrap: pretty;
}

.mh-head {
  display: grid;
  gap: 0.42rem;
  align-content: start;
}

/* --------------------------------------------------------------- the page */

/* Three rows: the headline, the form OR the receipt, the ways out. Exactly
   one of the middle pair is ever in the flow, so whichever survives takes
   the single flexible row. */
.mh-contact {
  display: grid;
  grid-template-rows: min-content minmax(0, 1fr) min-content;
  gap: clamp(0.7rem, 2.2svh, 1.4rem);
  align-content: stretch;
  min-height: 0;
}

/* Below the two-column threshold the aperture is dropped entirely rather than
   stacked: on a phone the form should be the whole page, and a decorative
   plane would only push the Send button toward the rail. */
.mh-contact-plane { display: none; }

@media (min-width: 900px) {
  .mh-contact {
    grid-template-columns: minmax(0, 44rem) minmax(0, 1fr);
    column-gap: clamp(1.6rem, 4.5cqw, 4rem);
  }

  .mh-head { grid-column: 1; grid-row: 1; }
  /* Only one of these is ever in the flow; both claim the same cell. */
  .mh-form,
  .mh-sent { grid-column: 1; grid-row: 2; }
  .mh-foot { grid-column: 1 / -1; grid-row: 3; }

  .mh-contact-plane {
    display: block;
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    align-self: stretch;
    margin: 0;
    overflow: hidden;
    /* A leaning slab: the tall aperture tips its top edge up to the right.
       Every plane on the site is cut from the landing's angular language,
       but no two of them are cut the SAME way -- three identical diamonds
       read as a template rather than a system. */
    clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%);
  }

  .mh-contact-plane img,
  .mh-contact-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The 0.82 knock-down was tuned against a bright clip. This one is a
       low-key night interior that arrives dark already, so holding it back
       that hard crushed the mic beat at the end into mud. */
    filter: contrast(1.04) saturate(0.94) brightness(1.02);
  }

  .mh-contact-video { z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-contact-video { display: none; }
}

/* ------------------------------------------------------------------- form */

.mh-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content minmax(6rem, 1fr) min-content min-content;
  gap: 0.7rem 1rem;
  align-content: start;
  max-width: 44rem;
  min-height: 0;
}

/* Netlify's honeypot: a real field that a human never sees and a bot fills. */
.mh-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mh-field {
  display: grid;
  gap: 0.3rem;
  min-height: 0;
}

.mh-field--wide {
  grid-column: 1 / -1;
  grid-template-rows: min-content minmax(0, 1fr);
}

.mh-field label {
  color: rgb(244 236 223 / 0.72);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mh-field input,
.mh-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.8rem;
  color: var(--paper);
  background: rgb(4 6 5 / 0.7);
  border: 1px solid rgb(244 236 223 / 0.28);
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: var(--fs-lead);
}

/* A resizable textarea can be dragged straight through the rail. */
.mh-field textarea {
  height: 100%;
  min-height: 5.5rem;
  resize: none;
}

.mh-field input:hover,
.mh-field textarea:hover { border-color: rgb(244 236 223 / 0.45); }

.mh-field input:focus-visible,
.mh-field textarea:focus-visible,
.mh-field input:focus,
.mh-field textarea:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.mh-send {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0.62rem 1.4rem;
  color: #080b0a;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 160ms linear;
}

.mh-send:hover { background: var(--accent-hot); }

.mh-send:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 2px;
}

.mh-form-note {
  grid-column: 1 / -1;
  margin: 0;
  color: rgb(244 236 223 / 0.6);
  font-size: var(--fs-body);
}

/* ----------------------------------------------------------- the receipt */

.mh-sent {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.mh-sent-mark {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 680;
  font-stretch: 92%;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.mh-sent-note {
  max-width: var(--measure);
  margin: 0;
  color: #d8d2c6;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.mh-sent-again {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mh-sent-again a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentcolor;
}

.mh-sent-again a:hover { color: #fff3e2; }

/* ------------------------------------------------------------- ways out */

.mh-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem clamp(1rem, 3cqw, 1.6rem);
  padding-top: 0.5rem;
  border-top: 1px solid rgb(244 236 223 / 0.12);
}

.mh-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-left: auto;
}

.mh-social a,
.mh-colophon-line a {
  color: rgb(244 236 223 / 0.75);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mh-social a:hover,
.mh-colophon-line a:hover {
  color: var(--paper);
  border-bottom-color: var(--accent);
}

.mh-colophon-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  margin: 0;
  color: rgb(244 236 223 / 0.5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 700px) {
  .mh-form {
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content minmax(5rem, 1fr) min-content min-content;
  }

  .mh-foot { align-items: flex-start; }
  .mh-social { margin-left: 0; gap: 0.4rem 1rem; }
}

@media (max-height: 30rem) {
  /* The frame has released; the form no longer needs to fill a flexible row. */
  .mh-contact { grid-template-rows: min-content min-content min-content; }
  .mh-field textarea { height: auto; }
}