/* ============================================================
   contact.css — Contact page: pure INK (no imagery). Standard
   background field + matter; the header (with the regular
   tagline) as on every page; the body holds one action (email
   hero), one whisper (meta cluster), two corner labels.
   ============================================================ */

/* One-viewport page; svh keeps the block optically centered in the
   visible viewport under mobile browser chrome — with the vh value
   as the fallback line above each.

   The min-height pair is not a duplicate of the height (14.09.2026,
   the same fix the index got): `body { min-height: 100vh }` in
   base.css is the taller LARGE-viewport measure on Android Chrome
   while the toolbar is showing, and min-height beats height, so the
   page came out one toolbar taller than the screen and `overflow:
   hidden` put the corner labels out of reach. Both properties have
   to name the small viewport. */
.page-contact {
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.page-contact main {
  display: flex;
}

/* the block sits at the optical center of the viewport — slightly
   above geometric: the in-flow footer already lifts the centering
   axis, the bottom padding adds the deliberate optical offset
   (lands ~45-46% of viewport height) */
.contact-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--edge-x) 2.5svh;
}

/* ---- centered block: action (email hero) over whisper (meta);
   explicit margins carry the rhythm, nothing evenly distributed ---- */
.contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---- email: the hero of the page body. Mailto + the plain-text
   copy affordance (contact.js). The h1 wrapper carries no styling
   of its own. ---- */
.contact-block__email-wrap {
  font-size: 0;
  line-height: 1;
}

.contact-block__email {
  font-family: var(--font-mono);
  font-weight: 400;
  /* 5vw reaches the 40px cap around 800px viewport width; the low
     bound keeps the address on one line on a 375px phone */
  font-size: clamp(18px, 5vw, 40px);
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--paper);
  text-decoration: none;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

.contact-block__email:hover,
.contact-block__email:focus-visible {
  text-decoration: underline;
}

/* copy slot beneath the address: plain mono text, no border, no
   background — "copy" and "copied" stack in one grid cell so the
   swap causes no layout shift */
.contact-block__copy-row {
  display: grid;
  justify-items: center;
  margin-top: calc(12 * var(--u));
}

.contact-block__copy,
.contact-block__copied {
  grid-area: 1 / 1;
  font-family: var(--font-mono);
  font-size: max(calc(9 * var(--u)), 8px);
  letter-spacing: 0.24em;
  color: var(--secondary);
  white-space: nowrap;
}

/* the control is a <button> for a11y; visually it is bare text */
.contact-block__copy {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.35s ease;
}

.contact-block__copy:hover,
.contact-block__copy:focus-visible {
  color: var(--paper);
}

.contact-block__copied {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* the swap: confirmation in, control out (class set on the block —
   the copy slot is a sibling of the email h1, not its child) */
.contact-block.is-copied .contact-block__copied {
  opacity: 1;
}

.contact-block.is-copied .contact-block__copy {
  visibility: hidden;
}

/* ---- meta cluster: the whisper — clock + instagram in one small
   dimmed block, tight internal spacing; the pause above it is
   smaller than statement → action, larger than the cluster's own
   line spacing ---- */
.contact-block__meta {
  display: grid;
  gap: calc(11 * var(--u));
  margin-top: calc(38 * var(--u));
}

.contact-block__live,
.contact-block__social {
  font-family: var(--font-mono);
  font-size: max(calc(10.5 * var(--u)), 9px);
  letter-spacing: 0.26em;
  color: var(--secondary);
  line-height: 1;
}

.contact-block__social {
  font-size: max(calc(10 * var(--u)), 9px);
  letter-spacing: 0.24em;
}

.contact-block__social a {
  transition: color 0.35s ease;
}

.contact-block__social a:hover,
.contact-block__social a:focus-visible {
  color: var(--paper);
}

/* ---- gallery label, bottom-left — same placement/size as the
   About label (about.css) ---- */
.contact-label {
  position: fixed;
  left: calc(40 * var(--u));
  bottom: calc(26 * var(--u));
  z-index: 2;
  font-family: var(--font-mono);
  font-size: max(calc(9.5 * var(--u)), 8.5px);
  letter-spacing: var(--meta-tracking);
  color: var(--numerals);
  pointer-events: none;
  white-space: nowrap;
}

/* ---- mobile: same stack, comfortable margins; the label shrinks
   slightly rather than wrap ---- */
@media (max-width: 768px) {
  .contact-block__copy-row {
    margin-top: 10px;
  }

  .contact-block__meta {
    gap: 9px;
    margin-top: 28px;
  }

  .contact-label {
    font-size: 8px;
    letter-spacing: 0.18em;
  }
}

@media (max-width: 380px) {
  .contact-label {
    font-size: 7px;
    letter-spacing: 0.16em;
  }
}