/*
  Contact page - unique layout only. Shared styles live in the global CSS files, and
  the object vocabulary (.spec, .spec-row) lives in components.css.

  One spread on the 12-column grid. Everything you need sits on the left: the line,
  the address, the facts. On the right, a sage card taped to the page turns the email
  into three small asks, each held by a character from Frankie's Identity Studies, so
  the page carries a piece of her work without a poster shouting over the address.

  There is deliberately no form. See the note in the markup.
*/

.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  padding-block: clamp(var(--space-7), 8vh, 96px) var(--space-10);
  align-items: start;
}

.contact__intro {
  grid-column: 1 / 8;
}

.contact__label {
  margin-block-end: var(--space-5);
}

.contact__title {
  font-size: clamp(2rem, 1.1rem + 2.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  max-width: 13em;
  /* Descenders (the y in "you're", the g in "dreaming") clip at this leading
     without a little reserve under the block. */
  padding-block-end: 0.1em;
  margin-block-end: var(--space-6);
}

.contact__lede {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 40ch;
  margin-block-end: var(--space-7);
}

/*
  The address is the point of the page, so it is set as display type rather than as
  a link in a paragraph. It wraps by character because a long address in a narrow
  column has nowhere else to break.
*/
.contact__address {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin-block-end: var(--space-8);
}

.contact__email {
  font-family: var(--font-family-display);
  font-size: clamp(1.125rem, 0.8rem + 1.4vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-accent);
  transition: color var(--duration-short) var(--ease-default);
}

.contact__email:hover,
.contact__email:focus-visible {
  color: var(--color-accent);
}

/* Shown by pages/contact.js only where the clipboard is available. */
.contact__copy {
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-family-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  transition: color var(--duration-short) var(--ease-default);
}

.contact__copy:hover,
.contact__copy:focus-visible {
  color: var(--color-accent);
}

/* Real facts, set as the catalogue hand. Columns rather than a separator character,
   for the same reason the object labels are. */
.contact__meta {
  gap: var(--space-5) var(--space-8);
  max-width: 40rem;
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.contact__meta .spec {
  display: block;
  max-width: 30ch;
}

/*
  The card: the same scanned paper in sage, taped down and a degree off square, like
  the working notes on the home page. It starts level with the headline so the two
  columns share a top line.
*/
.contact__card {
  grid-column: 9 / -1;
  position: relative;
  margin-block-start: var(--space-8);
  padding: var(--space-7) var(--space-6) var(--space-6);
  background-color: var(--color-sage);
  background-image: var(--texture-scan);
  background-size: var(--texture-scan-size);
  background-blend-mode: multiply;
  box-shadow:
    0 1px 2px rgb(40 40 36 / 0.12),
    0 22px 46px -26px rgb(40 40 36 / 0.45);
  transform: rotate(1.2deg);
}

/* A strip of tape across the top edge. */
.contact__card::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  width: 34%;
  height: 22px;
  margin-left: -17%;
  background: rgb(236 230 214 / 0.62);
  box-shadow: 0 1px 2px rgb(40 40 36 / 0.12);
  transform: rotate(-3deg);
  pointer-events: none;
}

.contact__card-label {
  margin-block-end: var(--space-5);
}

.contact__asks {
  list-style: none;
  padding: 0;
  margin: 0;
  border-block-start: 1px solid rgb(27 27 25 / 0.3);
}

.contact__asks li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-block-end: 1px solid rgb(27 27 25 / 0.3);
}

/* Each character stands in its own row, feet on the rule, and shifts its weight a
   little when you read its line. */
.contact__asks img {
  grid-row: 1 / span 3;
  justify-self: center;
  align-self: end;
  width: auto;
  height: 84px;
  transform-origin: 50% 100%;
  transition: transform var(--duration-medium) var(--ease-default);
}

.contact__asks li:hover img {
  transform: rotate(-4deg);
}

.contact__ask-n {
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.contact__ask-name {
  font-family: var(--font-family-display);
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.contact__ask-note {
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.contact__cast {
  display: inline-block;
  margin-block-start: var(--space-5);
  font-family: var(--font-family-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  transition: color var(--duration-short) var(--ease-default);
}

.contact__cast:hover,
.contact__cast:focus-visible {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .contact__asks img,
  .contact__asks li:hover img {
    transition: none;
    transform: none;
  }
}

@media (max-width: 1100px) {
  .contact__intro {
    grid-column: 1 / 8;
  }

  .contact__card {
    grid-column: 8 / -1;
  }
}

@media (max-width: 900px) {
  /* Stacked: the text runs full width and the card follows it, still taped on and
     a little off square, at a width that keeps its rows comfortable. */
  .contact {
    grid-template-columns: minmax(0, 1fr);
    padding-block-end: var(--space-9);
  }

  .contact__intro,
  .contact__card {
    grid-column: 1 / -1;
  }

  .contact__card {
    justify-self: start;
    width: min(100%, 30rem);
    margin-block-start: var(--space-4);
    transform: rotate(0.8deg);
  }
}