/* Contact (Page 8): A Personal Note. This page's own stylesheet, linked by the Contact page alone.
   Every rule begins with the page's body class and names only classes found on this page.

   Wide windows: the opening and the graphite calling card on the left, the note on the right.
   Below 1024 px: one column, in reading order: the opening, the calling card, the note.
   Nothing is sticky and nothing moves except the site's own reveal. The note is drawn as stationery: labels in
   small capitals, one quiet rule under each field, a ruled message, no boxes. Without JavaScript its fields stay
   disabled (the markup's default), so the form is visibly unavailable and cannot be used. */

.page-contact .contact-note {
  padding-block: var(--space-5) var(--space-6);
}

.page-contact .contact-note__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--space-3);
  align-items: start;
}

/* ---------- The opening ---------- */

.page-contact .contact-opening {
  grid-column: 1 / 7;
  grid-row: 1;
}

.page-contact .contact-opening__title {
  max-width: 12ch;
  margin: 0;
}

.page-contact .contact-opening__rule {
  display: block;
  width: 2.5rem;
  margin-block: var(--space-4);
  border-top: 1px solid var(--gold);
}

.page-contact .contact-opening__line {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(1.3rem, 1.85vw, 1.75rem);
  text-wrap: pretty;
}

/* ---------- The calling card ---------- */

.page-contact .contact-card {
  grid-column: 1 / 6;
  grid-row: 2;
  align-self: end;
  margin-top: var(--space-5);
  padding: var(--space-4);
}

.page-contact .contact-card__lines {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A span today; the same class on a dial or mail link once a verified number or address is supplied. */
.page-contact .contact-card__line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: 3.5rem;
  color: inherit;
  text-decoration: none;
}

.page-contact .contact-card__label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-contact .contact-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1.2;
  color: var(--ivory);
  overflow-wrap: anywhere;
  transition: color var(--dur-ui) var(--ease-silk);
}

.page-contact .contact-card__value [data-placeholder] {
  font-size: 0.8125rem;
}

.page-contact a.contact-card__line:hover .contact-card__value,
.page-contact a.contact-card__line:focus-visible .contact-card__value {
  color: var(--gold);
}

/* ---------- Call Shirin: the second path ----------
   Refinement ruling of 2026-10-10 (next round): calling is a real alternative to the note, so it is no longer a
   small label. "Call Shirin" is set in the display face at Display M, the size of the page's own headline, with
   the number beneath it at its previous size; the whole lockup is the dial link once a number is supplied. The
   email line keeps its quieter form, so the card reads call first, write second.
   The one motion: once the card has arrived (it stands above the fold at every size, and its own reveal ends
   within about a second and a half), the words catch the light once, a soft halo of gold light that rises
   around the ivory letters and fades over five seconds, with no repeat. On hover or keyboard focus the words take the gold and hold it, as the
   number does. With reduced motion there is no animation; the hover colour changes at once. */

.page-contact .contact-card__item--call {
  padding-bottom: var(--space-2);
}

.page-contact .contact-call {
  gap: 0.85rem;
}

.page-contact .contact-call__words {
  margin: 0;
  color: var(--ivory);
  transition: color var(--dur-ui) var(--ease-silk);
  animation: contact-call-light 5000ms ease-in-out 1600ms 1 backwards;
}

.page-contact a.contact-call:hover .contact-call__words,
.page-contact a.contact-call:focus-visible .contact-call__words {
  color: var(--gold);
}

@keyframes contact-call-light {
  0% {
    color: var(--ivory);
    text-shadow: 0 0 0 rgb(200 169 107 / 0);
  }

  45% {
    color: var(--ivory);
    text-shadow: 0 0 0.45em rgb(200 169 107 / 0.55);
  }

  100% {
    color: var(--ivory);
    text-shadow: 0 0 0 rgb(200 169 107 / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-call__words {
    animation: none;
    transition: none;
  }
}

.page-contact .contact-card__credit {
  display: grid;
  gap: 0.35rem;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--ivory-16);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: var(--ivory-72);
}

/* ---------- The note ---------- */

.page-contact .contact-form {
  grid-column: 8 / 13;
  grid-row: 1 / 3;
  margin: 0;
}

.page-contact .contact-form__required {
  margin: 0 0 var(--space-2);
}

.page-contact .contact-form__body {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Without JavaScript: unavailable, and it looks it. */
.page-contact .contact-form__body:disabled {
  opacity: 0.42;
}

.page-contact .contact-form__body:disabled .contact-field__input,
.page-contact .contact-form__body:disabled .contact-choice__option,
.page-contact .contact-form__body:disabled .contact-form__send {
  cursor: not-allowed;
}

.page-contact .contact-field {
  display: grid;
  gap: 0.35rem;
}

.page-contact .contact-field__label,
.page-contact .contact-choice__legend {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-contact .contact-field__mark {
  margin-left: 0.35em;
  color: var(--aubergine);
}

.page-contact .contact-field__input {
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--graphite-72);
  border-radius: 0;
  background: transparent;
  color: var(--graphite);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

/* Browser autofill keeps the paper. */
.page-contact .contact-field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--graphite);
  box-shadow: inset 0 0 0 100px var(--ivory);
}

.page-contact .contact-field__input[aria-invalid="true"] {
  border-bottom-color: var(--aubergine);
  box-shadow: 0 1px 0 var(--aubergine);
}

.page-contact .contact-field__error {
  margin: 0.4rem 0 0;
}

/* The note's reserved wording may run long: let its tokens wrap inside the column rather than overflow it. */
.page-contact .contact-form [data-placeholder] {
  max-width: 100%;
  white-space: normal;
}

.page-contact .contact-field__error[hidden] {
  display: none;
}

/* The message: a short sentence for its label, and ruled lines to write on. */
.page-contact .contact-field__prompt {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-style: italic;
  /* Warm Ivory ruling, 2026-10-09, 10:31 PM: the optical size is pinned so the italic's hairlines hold; the weight
     stays 400 so the prompt stays below the page's headline, as the recognition panel's supporting line does. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11;
  line-height: 1.3;
  color: var(--graphite);
}

.page-contact .contact-field__note {
  min-height: 9rem;
  padding: 0;
  line-height: 2.25rem;
  resize: none;
  field-sizing: content;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.25rem - 1px), var(--graphite-16) calc(2.25rem - 1px), var(--graphite-16) 2.25rem);
  background-attachment: local;
}

/* The four choices: one question, one answer, always changeable. */
.page-contact .contact-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.page-contact .contact-choice__legend {
  margin-bottom: 0.6rem;
  padding: 0;
}

.page-contact .contact-choice__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}

.page-contact .contact-choice__option {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.3;
  cursor: pointer;
}

.page-contact .contact-choice__input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1px solid var(--graphite-72);
  border-radius: 50%;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: inherit;
}

.page-contact .contact-choice__input:checked {
  border-color: var(--aubergine);
  background: var(--aubergine);
  box-shadow: inset 0 0 0 3px var(--ivory);
}

/* Sending, and what is true about it today. */
.page-contact .contact-form__actions {
  padding-top: var(--space-1);
}

.page-contact .contact-form__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  margin: 0;
  padding: 0.25rem 2.25rem;
  border: 0;
  border-radius: 0;
  background: var(--graphite);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease-silk);
}

.page-contact .contact-form__send:hover,
.page-contact .contact-form__send:focus-visible {
  color: var(--gold);
}

.page-contact .contact-form__notice {
  margin: var(--space-3) 0 0;
}

/* After "Send to Shirin" with a valid note: the notice is the answer, so it is drawn firm. */
.page-contact .contact-form__notice[data-contact-checked] [data-placeholder] {
  --ph-edge: var(--aubergine);
  border-style: solid;
}

.page-contact .contact-form__privacy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin: var(--space-2) 0 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.page-contact .contact-form__privacy-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--graphite);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.page-contact .contact-form__privacy-link:hover {
  color: var(--aubergine);
}

@media (forced-colors: active) {
  .page-contact .contact-choice__input {
    -webkit-appearance: auto;
    appearance: auto;
  }
}

/* ---------- Tablets and narrow windows: one column ---------- */

@media (max-width: 1023px) {
  .page-contact .contact-note__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .page-contact .contact-opening,
  .page-contact .contact-card,
  .page-contact .contact-form {
    grid-column: 1;
    grid-row: auto;
  }

  .page-contact .contact-opening__title {
    font-size: clamp(2.75rem, 7vw, 4rem);
  }

  .page-contact .contact-opening__line {
    max-width: 30ch;
    font-size: clamp(1.3rem, 3vw, 1.6rem);
  }

  .page-contact .contact-card {
    align-self: start;
    width: 100%;
    max-width: 36rem;
  }

  .page-contact .contact-form {
    max-width: 36rem;
    margin-top: var(--space-6);
  }
}

/* ---------- Phones ---------- */

@media (max-width: 719px) {
  .page-contact .contact-opening__title {
    font-size: 2.5rem;
  }

  .page-contact .contact-card {
    margin-top: var(--space-4);
    padding: var(--space-3);
  }

  .page-contact .contact-form {
    margin-top: var(--space-5);
  }

  .page-contact .contact-choice__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-2);
  }

  .page-contact .contact-form__send {
    width: 100%;
  }
}