/* Contact tab. One composition resting on the room, after Unseen's: the serif
   greeting left of an axis, everything you can do right of it. */

.say,
.say-how {
  --u: max(1vw, 1.78vh);        /* 1% of the room as drawn, which covers the screen */
  /* The door's right jamb, in page x. The engine crops the room about its home point
     until the picture's edge meets the screen's, so the door slides as the window
     changes shape. The axis rides it: 46% at 1440x900, and at any other shape the
     headline still lands on the wall, not the jamb. */
  --jamb: max(calc(50vw - var(--u) * 24.2), calc(100vw - var(--u) * 68.2));
  --axis: calc(var(--jamb) + var(--u) * 19.84 - var(--gutter));
  --col: max(240px, calc(var(--u) * 18.7));   /* 300px at 1440x900, short of the lamp at any shape */
  min-height: calc(100 * var(--vh));
  display: grid;
  grid-template-columns: minmax(0, var(--axis)) minmax(0, 1fr);
  align-content: start;
  column-gap: clamp(16px, 1.3vw, 24px);
  color: var(--ink);
  font-family: var(--sans);
}
.say ::selection,
.say-how ::selection { background: rgba(255, 255, 255, .3); color: var(--ink); }

.say {
  row-gap: 14px;
  /* floats on the wall with air around it, and lifts only when the form needs the height */
  padding: calc(var(--u) * 19) var(--gutter) calc(var(--foot-h) + 20px);
  transition: padding-top .24s var(--ease);
}
.say:has(#say-quote:not([hidden])) { padding-top: calc(var(--u) * 12); }

.say-title {
  grid-area: 1 / 1;
  justify-self: end;
  font: italic 300 clamp(56px, min(calc(var(--u) * 4), 8.4vw), 120px) / .98 var(--serif);
  letter-spacing: -.035em;
  white-space: nowrap;
}

.say-note {
  grid-area: 2 / 1;
  padding-top: .9em;
  font-size: clamp(12px, calc(var(--u) * .81), 15px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.002em;
  text-align: right;
  text-transform: uppercase;
}

.say-pills {
  grid-area: 1 / 2;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.say-panels { grid-area: 2 / 2; min-width: 0; max-width: var(--col); }

/* The shell's pills. Filled is where you are; outlined is the other way to go. */
.say .pill[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--fog-ink); }
.say .pill:disabled { opacity: .72; cursor: default; }

/* ---------------------------------------------------------------- general -- */
.say-mail {
  display: inline-block;
  color: inherit;
  padding-block: 3px;
  font-size: clamp(26px, calc(var(--u) * 1.8), 44px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.032em;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .25s var(--ease);
}

.say-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px calc(var(--u) * 2.4);
  margin: 16px 0 0;
}
/* Unseen's small type at 1440: labels 11.5, values 14.4, both regular. */
.say-facts dt,
.say-when {
  font-size: clamp(12px, calc(var(--u) * .72), 14px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
.say-facts dd {
  margin: 6px 0 0;
  font-size: clamp(14px, calc(var(--u) * .9), 19px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
}
/* The padding is a thumb's worth of target; the line stays under the digits. */
.say-facts a {
  display: inline-block;
  margin-block: -11px;
  padding-block: 11px;
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size .25s var(--ease);
}
@media (hover: hover) {
  .say-mail:hover { background-size: 100% 1.5px; }
  .say-facts a:hover { background-size: 100% 1px; }
}

/* ------------------------------------------------------------ get a quote -- */
.say-quote { padding-top: 6px; }

.say-heading {
  font-size: clamp(20px, calc(var(--u) * 1.4), 30px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.022em;
}
.say-heading span { white-space: nowrap; }   /* so it breaks at the comma */

.say-lead {
  margin: 10px 0 0;
  max-width: 44ch;
  color: rgba(255, 255, 255, .84);   /* a little firmer than --ink-2: it can land on the lamp's glow */
  font-size: clamp(14px, calc(var(--u) * .9), 17px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.004em;
  text-wrap: pretty;
}

.say-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.say-field--wide { grid-column: 1 / -1; }

/* The fields are panes of the room's own air, not boxes. */
.say-field {
  position: relative;
  display: block;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 15px;
  background: rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  cursor: text;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.say-field:focus-within {
  border-color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .09);
}
@media (hover: hover) {
  .say-field:not(:focus-within):hover { border-color: rgba(255, 255, 255, .26); }
}

.say-field input,
.say-field textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 14px;
  outline: 0;
  background: transparent;
  color: var(--ink);
  caret-color: var(--ink);
  font: 500 17px / 1.3 var(--sans);
  letter-spacing: -.012em;
  padding: 25px 16px 9px;
  -webkit-appearance: none;
  appearance: none;
}
/* The words scroll below the label, never under it. */
.say-field textarea {
  min-height: 88px;
  max-height: 34vh;
  margin-top: 25px;
  padding-top: 0;
  resize: none;
  field-sizing: content;
}

/* The label sits where the words go, then tucks up out of their way. */
.say-field span {
  position: absolute;
  left: 16px;
  top: 17px;
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.008em;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform .18s var(--ease);
}
.say-field input:focus + span,
.say-field textarea:focus + span,
.say-field input:not(:placeholder-shown) + span,
.say-field textarea:not(:placeholder-shown) + span {
  transform: translateY(-8px) scale(.78);
}

/* Autofill keeps the glass rather than the browser's yellow. */
.say-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 99999s;
}
.say-field input:-webkit-autofill + span { transform: translateY(-8px) scale(.78); }

.say-send { margin-top: 14px; }

.say-error {
  grid-column: 1 / -1;
  margin: 2px 0 4px 2px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.008em;
}

.say-thanks {
  outline: 0;
  font: italic 300 clamp(28px, calc(var(--u) * 2.2), 50px) / 1.04 var(--serif);
  letter-spacing: -.025em;
}
.say-done .say-send { margin-top: 18px; }

/* ----------------------------------------------------------- how it works -- */
/* A second resting place a scroll below the greeting, on the same axis. The words
   stay on bare wall at every shape, past the jamb and short of the desk, so nothing
   in the room runs through them as they pass. */
.say-how { padding: calc(var(--u) * 12) var(--gutter) calc(var(--foot-h) + 20px); }

.say-how-head { justify-self: end; text-align: right; }
.say-how-head h2 {
  max-width: calc(var(--u) * 18);
  font: italic 300 clamp(28px, calc(var(--u) * 2.3), 52px) / 1.08 var(--serif);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.say-steps {
  max-width: max(220px, calc(var(--u) * 14.5));
  margin: 0;
  padding: 0;
  list-style: none;
}
.say-steps li + li { margin-top: 28px; }

.say-when { color: var(--ink-2); }
.say-when span {
  margin-right: .9em;
  font-variant-numeric: tabular-nums;
}
.say-steps h3 {
  margin-top: 8px;
  font-size: clamp(14px, calc(var(--u) * .9), 19px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
}
.say-steps .say-lead { margin-top: 2px; }

/* Room for the fixed bars when the keyboard moves focus down the page. */
.say-field,
.say .pill,
.say-panels a { scroll-margin: calc(var(--nav-h) + 16px) 0 calc(var(--foot-h) + 16px); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .say-field { background: rgba(7, 18, 56, .62); }
  .say-field:focus-within { background: rgba(7, 18, 56, .72); }
}

/* ---------------------------------------------------------------- arrival -- */
/* The same arrival as Projects: up out of the haze, with no script to wait for. */
@keyframes say-in {
  from { opacity: 0; filter: blur(14px); }
  to { opacity: 1; filter: none; }
}
.say-title { animation: say-in 1.1s var(--ease) both; }
.say-note,
.say-pills { animation: say-in 1.1s .08s var(--ease) both; }
.say-panels { animation: say-in 1.1s .16s var(--ease) both; }

/* Each block comes up as it clears the footer, so no line runs under the World link. */
@keyframes say-up {
  from { opacity: 0; }
}
@supports (animation-timeline: view()) {
  .say-how-head,
  .say-steps li {
    animation: say-up linear both;
    animation-timeline: view(block 0px var(--foot-h));
    animation-range: entry 0% entry 100%;
  }
}

/* ---------------------------------------------------------------- smaller -- */
/* Where the page runs past the fold the fixed bars would sit on the words: the
   top one scrolls away with the page, the bottom one steps aside for the form. */
@media (max-width: 860px), (max-height: 720px) {
  html[data-page="contact"] .nav { position: absolute; }
  body:has(#say-quote:not([hidden])) .foot { visibility: hidden; }
  .say:has(#say-quote:not([hidden])) { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}
@media (max-height: 720px) {
  .say,
  .say:has(#say-quote:not([hidden])) { padding-top: max(calc(var(--nav-h) + 16px), calc(var(--u) * 9)); }
  .say-field textarea { min-height: 64px; }
}

/* Phone: one centred column, as on the reference. */
@media (max-width: 860px) {
  .say,
  .say-how {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-bottom: calc(var(--foot-h) + 20px + env(safe-area-inset-bottom));
    text-align: center;
  }
  .say {
    row-gap: 0;
    padding-top: max(calc(var(--nav-h) + 32px), calc(21 * var(--vh)));
  }
  .say-title,
  .say-note,
  .say-pills,
  .say-panels { grid-area: auto; }
  .say-title { justify-self: center; font-size: min(19.5vw, 92px); }
  .say-note { padding-top: 16px; font-size: 12.5px; font-weight: 500; text-align: center; }
  .say-pills { justify-content: center; margin-top: 22px; }
  .say-panels { width: 100%; max-width: none; margin-top: 22px; }

  .say-mail {
    font-size: clamp(32px, min(calc(var(--u) * 2.6), 5.4vw), 60px);
    font-weight: 500;
  }
  .say-facts { justify-content: center; gap: 14px clamp(32px, 3.4vw, 52px); }
  .say-facts dt,
  .say-when { font-size: 12.5px; font-weight: 500; }
  .say-facts dd {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.38;
  }
  .say-quote { max-width: 480px; margin-inline: auto; }
  .say-heading { font-size: clamp(22px, calc(var(--u) * 1.6), 34px); font-weight: 500; }
  .say-lead { margin-inline: auto; font-size: 15.5px; line-height: 1.42; }
  .say-fields { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .say-thanks { font-size: clamp(34px, calc(var(--u) * 2.9), 64px); }

  /* The form is long for a phone, so the greeting moves up to make room for it. */
  .say:has(#say-quote:not([hidden])) { padding-top: calc(var(--nav-h) + 8px); }

  /* Below the first screen, so the greeting keeps it to itself. */
  .say-how { min-height: 0; padding-top: 0; }
  .say-how-head { justify-self: center; text-align: center; }
  .say-how-head h2 { max-width: 13em; font-size: clamp(30px, 8vw, 44px); }
  .say-steps { width: 100%; max-width: 480px; margin-top: 32px; }
  .say-steps h3 { margin-top: 8px; font-size: 16px; font-weight: 500; }
  .say-steps .say-lead { margin-top: 4px; }
}

/* The calm page has no flight, so the room simply stands still behind the words. */
html.calm .say::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/assets/flight/05.webp") 90% 55% / cover no-repeat;
}
@media (max-width: 860px) {
  html.calm .say::before { background-position: 58% 55%; }
}