/* Contact page — reproduces the authoritative Figma node
   "contact-page-desktop"
   (figma.com/design/dPEwHpA7yKLWbsfZWv7juN, node 1:3, confirmed 1440x1024
   reference frame) per BUILD-ROADMAP.md Phase 8.

   Two zones, on purpose:
   1. .cv2-header — a real crop of the Figma frame's own top ~305px band
      (background textures, rotated ticket logo, moon/disco decoration,
      paper-tab nav), using the same aspect-ratio + percentage technique
      established in css/journal.css. Percentages below are the same
      source pixel values Figma gives, just divided by 305 instead of
      1024 (a crop, not a rescale) — see the header comment in
      contact.html.
   2. .contact-content — the form + social columns, built as normal
      accessible flow markup (CSS grid, real <input>/<select>/<textarea>)
      instead of pixel-pinned absolute boxes. A contact form's field
      order, focus flow, and text reflow (different real font metrics,
      corrected copy, browser zoom) matter more here than exact-pixel
      fidelity, unlike Journal's fixed-dimension card grid — so this
      section trades a small amount of positional precision for
      something that stays usable/keyboard-navigable/responsive.

   Typography stays inside the established Sarahtonin Sounds system
   (PROJECT-SPEC.md §5) rather than Figma's generated fonts (Crimson
   Text / Caveat / Caveat Brush): Perandory Semi-Condensed for the
   "Contact" heading, IM Fell English for all readable/instructional
   copy, Sue Ellen Francisco only for the short "say hi!" / "Find me
   around" / "Thank you for visiting" annotations. Figma set the whole
   intro paragraph in a handwritten face (Caveat Brush) — that's
   overridden to the readable body face here because essential
   instructions must never rely on handwritten typography
   (CLAUDE.md non-negotiables, PROJECT-SPEC.md §13).

   Colors use the established design tokens (--color-crimson,
   --color-near-black, --color-cream) rather than Figma's own literal
   hex values, matching the same substitution journal.css already made. */

.page-contact {
  background-color: var(--color-paper);
  background-image: url('/assets/Foreground%20Paper.png');
  background-repeat: repeat;
}

.page-contact main.contact-page {
  max-width: none;
  padding: 0;
}

/* ── Desktop header band ── */
.cv2-header {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 305;
  overflow: hidden;
  background-color: var(--color-cream);
}

.cv2-bg-stripe {
  position: absolute;
  left: -12.0139%;
  top: -188.5246%;
  width: 128.8889%;
  height: 368.8525%;
  max-width: none;
  object-fit: cover;
  z-index: 1;
}

.cv2-bg-foreground {
  position: absolute;
  left: -34.1667%;
  top: 43.9344%;
  width: 173.125%;
  height: 514.7541%;
  max-width: none;
  object-fit: cover;
  z-index: 2;
}

.cv2-logo {
  position: absolute;
  left: -1.5972%;
  top: -8.3311%;
  width: 24.9158%;
  height: 86.741%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* home-logo.png has transparent padding around the visible ticket
   artwork — sized so the visible content matches Figma's ~332x137
   target, same technique/ratio as .jv2-logo in css/journal.css. */
.cv2-logo > a {
  display: block;
  width: 92.56%;
  height: 51.72%;
  max-width: none;
  object-fit: cover;
  transform: rotate(-25.02deg);
}

.cv2-deco {
  position: absolute;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
}

/* clip-path trims this box right where .cv2-bg-foreground's own
   cream-textured zone begins (top: 43.9344% of .cv2-header), so no
   part of the moon/star cluster reads as spilling into the cream
   section below — even though the box's own bottom edge (top 3.5% +
   height 78.3016% = 81.8% of the header) already sits fully inside
   .cv2-header's clip boundary (295.7px of 305px), a trailing star
   still lands past 43.9344% into the cream zone since that boundary
   cuts through the middle of this box, not at its edge.

   The clip-path polygon is defined in this element's own LOCAL,
   pre-rotation coordinate space (CSS clips before applying transform,
   then rotates the already-clipped shape) — a straight horizontal cut
   in the FINAL, rotated header space becomes a straight but tilted
   line back here, found by inverse-rotating the target boundary by
   -36.05° around this box's own center. Concretely: at the
   1440×305 reference frame, this box occupies x:[439.91,674.80]
   / y:[10.68,249.50] (from left/top/width/height above) with center
   (557.35, 130.08); solving sin(36.05°)·x + cos(36.05°)·y = (target Y
   133.94, i.e. 43.9344% of 305) expressed in this box's own local
   coordinates gives a line crossing the box's left edge at 87.8223%
   of its own height and its right edge at 16.2328% — i.e. the
   percentages below. Re-derive with the same method if left/top/
   width/height/rotation ever change; this shape does not update
   itself. */
.cv2-deco--moon {
  left: 30.5493%;
  top: 3.5%;
  width: 16.3117%;
  height: 78.3016%;
  transform: rotate(36.05deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 16.2328%, 0% 87.8223%);
}

.cv2-deco--disco {
  left: 85.6083%;
  top: 47.8689%;
  width: 9.3822%;
  height: 49.1672%;
}

.cv2-nav {
  position: absolute;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cv2-nav ul {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cv2-nav__tab {
  position: absolute;
  pointer-events: auto;
  top: 7.0492%;
  width: 9.8611%;
  height: 18.6885%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/assets/images/shared/nav-paper-tab.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.1vw, 1.05rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--color-near-black);
}

.cv2-nav__tab--home { left: 42.9167%; }
.cv2-nav__tab--about { left: 54.4444%; }
.cv2-nav__tab--listen { left: 65.9722%; }
.cv2-nav__tab--journal { left: 77.5%; }
.cv2-nav__tab--contact { left: 89.0278%; }

.cv2-nav__tab[aria-current="page"] {
  color: var(--color-crimson);
  text-decoration: underline;
  text-decoration-color: var(--color-crimson);
  text-underline-offset: 3px;
}

.cv2-nav__tab:hover {
  text-decoration: underline;
}

/* ── Mobile header — hidden above the mobile breakpoint ── */
.cv2m-header {
  display: none;
}

/* ── Content ── */
.contact-content {
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-8);
}

.contact-columns {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 680fr) minmax(0, 400fr);
  gap: var(--space-6) clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ── Left column: title + intro + form ── */
.contact-title h1 {
  font-size: clamp(2.25rem, 5.2vw, 4.6rem);
  text-transform: uppercase;
  margin: 0;
}

.contact-title__rule {
  width: min(23rem, 54%);
  height: 2px;
  margin: 0.6em 0 0;
  border: 0;
  background-color: var(--color-crimson);
}

.contact-title__tag {
  font-family: var(--font-marginalia);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  color: var(--color-crimson);
  margin: 0.3em 0 0;
}

.contact-intro {
  margin-top: var(--space-5);
  max-width: 34rem;
}

.contact-intro p:first-child {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-near-black);
}

.contact-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-crimson);
  background: rgba(158, 27, 50, 0.06);
  border: 1px solid var(--color-crimson);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0;
}

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

.contact-field {
  margin-bottom: var(--space-5);
}

.contact-field label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}

.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-near-black);
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid var(--color-near-black);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--color-near-black);
  opacity: 0.7;
}

.contact-field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.contact-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: 9.5rem;
  height: 3.3rem;
  padding: 0 var(--space-5);
  border: 0;
  background-image: url('/assets/images/shared/nav-paper-tab.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: var(--font-body);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--color-crimson);
}

.contact-form__alt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-near-black);
  margin: 0;
}

.contact-form__alt a {
  color: var(--color-crimson);
  text-decoration-thickness: 1px;
}

.contact-form__status {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-lg);
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status[data-state="success"] {
  color: #2f5d34;
}

.contact-form__status[data-state="error"] {
  color: var(--color-crimson);
}

/* ── Right column: social ── */
/* padding-top clears .contact-note (the rotated pink label below),
   which is position:absolute and visually extends well past its own
   top:-1rem thanks to its rotation — at 1440px it was measured
   (getBoundingClientRect) to reach 30.4px past where 8rem placed
   .contact-social-intro, a real overlap, not just tight spacing.
   11rem leaves ~18px of clear gap instead (verified empirically, not
   just computed from the note's nominal height) — see the comment on
   .contact-note below for why its own top/width/rotation are tuned
   separately and shouldn't be adjusted to compensate here instead. */
.contact-col--social {
  position: relative;
  padding-top: 11rem;
}

/* Sized/structured the same reliable way as .contact-tape below (a
   normal-flow image establishes the real box size; the label overlays
   it with inset:0) rather than a flex box with no intrinsic height,
   which was rendering the paper scrap too thin to read as a label. */
.contact-note {
  position: absolute;
  top: -1rem;
  right: 0.5rem;
  width: 12rem;
  transform: rotate(-9deg);
  pointer-events: none;
}

.contact-note img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-note span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  transform: rotate(-7deg);
  font-family: var(--font-marginalia);
  font-size: 1.4rem;
  text-align: center;
  color: var(--color-near-black);
}

.contact-social-intro {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-near-black);
  margin: 0 0 var(--space-5);
}

.contact-social-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-social-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--color-near-black);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-near-black);
  background: rgba(255, 255, 255, 0.6);
}

.contact-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
}

.contact-social-icon svg {
  width: 100%;
  height: 100%;
}

.contact-social-label {
  font-family: var(--font-body);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.contact-social-link:hover {
  border-color: var(--color-crimson);
}


/* Small paper-scrap sign-off, reusing the established shared/tape
   library rather than Figma's own purple washi tape asset (no matching
   color currently in the visual library — see css/contact.css header
   comment). */
.contact-tape {
  position: relative;
  width: 18rem;
  margin: var(--space-7) 0 0 auto;
  transform: rotate(4deg);
  pointer-events: none;
}

.contact-tape img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-tape span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.75rem;
  font-family: var(--font-marginalia);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color-near-black);
}

/* The flower hangs past the column edge by design; on narrower desktop
   widths that pushed past the viewport and caused sideways scroll. */
.contact-page {
  overflow-x: clip;
}

.contact-flower {
  position: absolute;
  right: -1.5rem;
  bottom: -2.75rem;
  width: 5.5rem;
  height: auto;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   Mobile (< 900px) — hand-built stacked flow. No mobile Figma frame was
   supplied for Contact (unlike Journal's confirmed mobile reference),
   so this follows the same structural pattern (logo + wrapped paper-tab
   nav, single content column) rather than inventing pixel-exact values
   to claim as Figma-derived. ══════════════════════════════════════ */
@media (max-width: 900px) {
  .cv2-header {
    display: none;
  }

  /* Shared mobile paper and red-stripe band (css/layout.css). */
  .page-contact {
    background: var(--m-paper);
  }

  .cv2m-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4) var(--space-5);
    background: var(--m-band);
  }

  .cv2m-logo {
    display: block;
    width: 220px;
    max-width: 70%;
    height: auto;
    aspect-ratio: 280 / 115;
    object-fit: cover;
    transform: rotate(-2deg);
  }

  .cv2m-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .cv2m-nav__row {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
  }

  .cv2m-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 2.75rem;
    background-image: url('/assets/images/shared/nav-paper-tab.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--color-near-black);
  }

  .cv2m-tab[aria-current="page"] {
    color: var(--color-crimson);
    text-decoration: underline;
    text-decoration-color: var(--color-crimson);
    text-underline-offset: 3px;
  }

  .contact-content {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  .contact-columns {
    grid-template-columns: 1fr;
  }

  .contact-col--social {
    padding-top: var(--space-4);
  }

  /* Ambient decoration only — drop it on small screens rather than
     risk it overlapping/obscuring form fields or social links
     (PROJECT-SPEC.md §13). */
  .contact-note,
  .contact-tape,
  .contact-flower {
    display: none;
  }
}