/* ============================================================
   Contact / Book page — scoped styles.
   Built on the global tokens in styles.css. Reuses .section,
   .container, .eyebrow, .btn, reveal-*, media-placeholder,
   footer, nav, cta-section. The page is LIGHT; the adaptive
   (luminance-driven) nav flips itself — no overrides here.
   ============================================================ */

/* ---- HERO — light, editorial, two-column (text left / portrait right).
   Swiss-structural: a flat single-tone field, a column grid shared with the
   section below, and structural 96/64 vertical rhythm. ---- */
.contact-hero {
  /* Flat cream field (no gradient) so the hero and the section below read as
     one continuous surface — one poster, not two bands. Solid color also
     satisfies the adaptive nav's luminance probe. */
  background-color: var(--cream);
  color: var(--ink);
  padding: 96px 0 64px;
}

/* Shared grid — the hero (text | portrait) and the split below (list | panel)
   use the SAME columns and gutter, so every element snaps to the same two
   vertical axes: text/list flush-left, portrait/panel flush-right. */
.contact-hero-grid,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 64px;
  align-items: start;
}
.contact-hero-content .eyebrow { display: block; margin-bottom: var(--eyebrow-gap); }

/* Right: portrait media frame + name/role caption.
   Fills the right column (capped) and aligns to the column's LEFT edge, so
   Sarah's portrait and caption share the same left axis as the booking block
   directly below them; the cap keeps the hero compact on wide screens. */
.contact-hero-media {
  width: 100%;
  max-width: 520px;
  margin: 0;
}
.contact-hero-media__frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule-on-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(11, 11, 12, 0.05);
}
.contact-hero-media__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-hero-media__cap {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-hero-media__name {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--ink);
}
.contact-hero-media__role {
  font-size: var(--text-body-sm);
  color: var(--ink-muted-on-light);
}
.contact-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  /* clamp matches the POV display ramp — accepted deviation from the
     discrete heading ramps in DESIGN.md, mirroring point-of-view.css. */
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 16ch;
}
.contact-hero-cta { margin-top: 32px; }

.contact-lead {
  margin: 24px 0 0;
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--ink-muted-on-light);
  /* Tighter measure — a controlled text block, not a wide airy line. */
  max-width: 38ch;
}

/* ---- SPLIT — what to expect / booking panel.
   Continues the hero's cream field at the top (seamless), then fades to
   white at the bottom so it meets the CTA section's white top edge without
   a seam. ---- */
.contact-split {
  background: linear-gradient(to bottom, var(--cream) 0%, var(--cream) 35%, var(--white) 100%);
  padding: 64px 0 96px;
}

/* One enclosed composition: a full-width top + bottom rule houses both
   columns. The label row (What to expect | Schedule directly) sits on the
   same line under the top rule; the numbered table (left) and the booking
   block (right) read as one field, not "section + sidebar card". */
.contact-grid {
  border-top: 1px solid var(--rule-on-light);
  border-bottom: 1px solid var(--rule-on-light);
  padding: 40px 0 56px;
}

/* Left: numbered hairline list — layout comes from .hairline-list
   (styles.css); this class sets the item typography and a lighter
   divider via the list's --hairline-rule override hook. */
.contact-list { --hairline-rule: rgba(11, 11, 12, 0.08); }
/* Table rhythm — uniform row height so the list reads as a typographic
   table. The enclosing section rule closes the table, so the last row drops
   its own bottom border. */
.contact-list .hairline-list__item { min-height: 68px; align-items: center; }
.contact-list .hairline-list__item:last-child { border-bottom: none; }
.contact-expect .eyebrow { display: block; margin: 0 0 var(--eyebrow-gap); }
.contact-list h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 44ch;
}

/* Right: booking block — the action panel. No box: it's a flush right-column
   content block inside the shared enclosing frame, so its eyebrow sits on the
   same line as "What to expect" and its heading aligns with row 01. The maroon
   button (flush-left in the column) carries the action, not a container. */
.contact-panel { padding: 0; }
.contact-panel .eyebrow { display: block; }
.contact-panel__h2 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.contact-panel__body {
  margin: 16px 0 0;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-muted-on-light);
  max-width: 40ch;
}
.contact-panel__ctas { margin-top: 32px; }
.contact-panel__alt {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-on-light);
}
.contact-panel__alt .eyebrow { margin-bottom: 12px; }
.contact-panel__email {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}
.contact-panel__email:hover { opacity: 0.62; }

/* Shared CTA section (page-scoped via this stylesheet): give the two
   actions breathing room instead of letting them sit edge-to-edge. */
.cta-ctas { gap: 16px; }

/* Widen the CTA lead so it sets on two balanced lines instead of three with
   a lone "a deck." on the last line. */
.cta-section .lead { max-width: 46ch; text-wrap: balance; }

/* Orphan control — let the browser avoid a lone short word on the last line
   of these text blocks (e.g. a dangling "so."). Degrades to normal wrapping
   where unsupported. */
.contact-lead,
.contact-list h3,
.contact-panel__body { text-wrap: pretty; }

/* ---- Breakpoints ---- */
@media (max-width: 1024px) {
  .contact-hero { padding: 84px 0 56px; }
  .contact-hero-grid,
  .contact-grid { gap: 48px; }
  .contact-split { padding: 56px 0 80px; }
}
@media (max-width: 860px) {
  /* Stack to one column; the portrait no longer fills a column, so cap it.
     The booking block gains top space so it doesn't crowd the last row. */
  .contact-hero-grid,
  .contact-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .contact-hero-media { max-width: 340px; margin-left: 0; }
}
@media (max-width: 768px) {
  .contact-hero { padding: 72px 0 48px; }
  .contact-h1 { font-size: 34px; letter-spacing: -0.02em; }
  .contact-hero-media { max-width: 300px; }
  .contact-split { padding: 48px 0 64px; }
  .contact-list h3 { font-size: 18px; }
  .contact-list .hairline-list__item { min-height: 0; }
}