/* ==========================================================================
   contact.css — the whole page is just a title + subtitle over a
   footer that's visible by default (no scroll). Reuses the same
   hero-title/subtitle pattern as about.css/doodles.css/ai-playground.css
   (H1 full-width, subtitle grid-column 6/13, max-width 26rem) for
   consistency, and overrides the site's usual position:fixed
   scroll-revealed footer down to a plain, static, always-visible one —
   see the .contact-page overrides at the bottom of this file.
   ========================================================================== */

.contact-hero {
  padding-inline: var(--margin);
  padding-top: 10.25rem; /* same as .about-hero/.pg-hero/.doodles-hero */
  padding-bottom: 7rem;
}

.contact-hero__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

.contact-hero__title {
  grid-column: 1 / 13;
  font-size: 8.75rem; /* 140px, trying a layout experiment per direct request (matching AI Playground) — was 5rem/80px */
  font-weight: 500; /* medium — reverted back from 600 semibold per direct request */

  line-height: 1.25; /* was 1.1 — bumped to fix Satoshi descender clipping; see DESIGN note in ai-playground.css's .pg-hero__title for the metric reasoning */
  letter-spacing: -0.01em;
}

.contact-hero__subtitle {
  grid-column: 8 / 13; /* trying a layout experiment per direct request (matching AI Playground) — was 5/12 */
  font-size: 1rem; /* 16px, per direct request — was 1.125rem/18px, the site's new standard body text size */
  font-weight: 500;
  color: #bababa; /* per direct request — was inheriting the default (near-white) text color */
  line-height: 1.3; /* per direct request — was 1.22 */
  max-width: 26rem;
  margin-top: 1rem; /* 16px, trying a layout experiment per direct request (matching AI Playground) — was 1.5rem/24px */
}

/* ---------- footer override: fixed to the bottom, no scroll ----------
   The site's normal footer is position:fixed at a fixed 30rem height and
   only becomes visible once .page's own opaque box (with its
   padding-bottom gap) has scrolled past — see the "footer" section in
   style.css. This page keeps position:fixed (so the footer is always
   glued to the true bottom edge of the viewport, immune to content
   height, window size, or font-load timing) but drops the fixed
   --footer-height in favor of height:auto sized to its own content,
   since there's no .footer-spacer/scroll-reveal choreography to match
   here. (An earlier flex "sticky footer" version of this override
   looked right in testing but broke on shorter windows: once the hero
   + footer's combined natural height exceeded the viewport, the flex
   column just overflowed like a normal page and the last few pixels of
   the footer/logo fell below the fold — cropped, not actually flush
   with the bottom. True position:fixed doesn't have that failure mode.)
   Scoped to body.contact-page so every other page's footer is
   completely unaffected. */
body.contact-page .page {
  padding-bottom: 0;
}

body.contact-page .site-footer {
  position: fixed;
  left: 0;
  bottom: var(--gutter); /* 24px — matches every other page's footer
    padding-bottom (var(--gutter), see .site-footer in style.css), so
    the gap to the true viewport bottom edge is the same everywhere.
    Was var(--margin)/40px, which read as extra bottom padding
    compared to the rest of the site — deliberately done via `bottom`
    offset rather than padding-bottom: adding padding-bottom here
    previously overflowed the box past the real viewport edge in
    testing (see the git history of this rule); shifting the whole
    fixed box up by `bottom` instead sidesteps that entirely. */
  width: 100%;
  height: auto;
  padding-bottom: 0;
  z-index: 1;
}

body.contact-page .footer__links {
  margin-top: 0;
  /* On desktop this page still has no visible .footer__bottom-row (see
     the display:none override below), so the base 40px margin-bottom
     meant to gap it from that row would just be dead space at the very
     end of this fixed-height:auto box — reset to 0 to keep it tight
     against the box's own `bottom: var(--margin)` offset, same as
     before this footer redesign. Mobile restores a gap once the
     bottom-row becomes visible again — see the mobile breakpoint below. */
  margin-bottom: 0;
}

/* Bottom row (tagline + reaction pills, no "Back to top" — see the
   markup comment in contact.html for why) is mobile-only, matching
   every other page's footer there. Desktop keeps this page's
   deliberately stripped-down footer exactly as it's always been. */
body.contact-page .footer__bottom-row {
  display: none;
}

/* ---------- keep this page's own footer exactly as it always was ----------
   The orange background / CTA headline / logo-color strips / footer
   watermark logo introduced site-wide (see the "footer" section in
   style.css) are explicitly excluded here, per direct request ("All
   these footer changes shouldn't affect contact page"). This page
   already had its own fully custom footer (fixed height:auto, no
   bottom-row on desktop, physics shapes resting on top of it — see
   above) before any of that existed, and keeps it exactly as-is.
   .footer__headline itself was never added to this page's markup in
   the first place, so there's nothing to hide/override for that one. */
body.contact-page .site-footer {
  background: var(--black);
}

body.contact-page .site-footer::after,
body.contact-page .footer__logo {
  display: none;
}

body.contact-page .footer__links a {
  color: var(--white);
  transition: opacity 0.4s var(--ease-out);
}

/* Restores this page's original dim-on-hover — the shared rule now
   flips black text to white on hover (see .footer__links a:hover in
   style.css), but this page's links are already white at rest, so
   there's nothing to flip TO; fading instead is the only affordance
   that still makes sense here. */
body.contact-page .footer__links a:hover {
  opacity: 0.55;
  color: var(--white);
}

body.contact-page .footer__bottom-row,
body.contact-page .footer__bottom-row p,
body.contact-page .footer__bottom-row a {
  color: #383838;
}

body.contact-page .footer__reaction {
  border-color: #383838;
  color: var(--gray);
  mix-blend-mode: difference;
}

body.contact-page .footer__reaction:hover {
  border-color: var(--gray);
}

/* ---------- physics shapes canvas ----------
   Fixed full-viewport overlay so the three shapes can drop in from above
   the fold and land near the footer links (see js/contact-shapes.js).
   z-index sits above .page (2) and .site-footer (1) so a shape resting
   over a link visibly covers it, but stays well below the header (500)
   so nav stays interactive. pointer-events:none — the script hit-tests
   shapes itself on window-level mouse events and only pre-empts a click
   when it actually lands on a shape, so every other click (links, nav,
   theme toggle) passes straight through untouched. */
#shapes-canvas {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

/* ---------- secret message ----------
   Hidden until js/contact-shapes.js adds .is-visible (see that file's
   revealSecret()) once you throw an already-smallest-size piece and it
   lands again. Plain opacity fade only — no slide/scale —
   matching the site's established reveal language elsewhere. left/top
   are left unset here on purpose: positionSecret() in contact-shapes.js
   sets both inline, computed off the live hero paragraph's own
   bounding rect, so "24px below the main paragraph" holds at any
   viewport size rather than being approximated with a fixed rem value
   (was anchored 80px above the footer email link — moved under the
   paragraph per direct request). z-index sits above the shapes canvas
   (50) so a shape that happens to be resting nearby never covers it. */
.contact-secret {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s var(--ease-out); /* was 1s — slower fade, per direct request */
}

.contact-secret.is-visible {
  opacity: 1;
}

.contact-secret__mark {
  width: 3.1875rem; /* 51px, matches assets/logo tiny.svg's own natural width (51x16) */
  height: auto;
  display: block;
  margin-bottom: 0.5rem; /* 8px to the title below — per direct request, was a uniform 12px flex gap across all three children */
}

/* Both lines same size (16px, the site's standard body size — was
   20px/16px) and set close together via margin rather than the
   container's own flex gap, so this pair can sit tighter than the
   8px gap above without affecting that gap too. */
.contact-secret__title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
}

.contact-secret__subtitle {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: #BABABA; /* the site's standard muted grey */
  margin-top: 0.25rem; /* 4px — closer together, per direct request, was 12px via the old uniform flex gap */
}

/* ==========================================================================
   mobile breakpoint (<=768px) — see style.css's "mobile breakpoint"
   comment for the shared root-font-freeze this all builds on. Hero
   follows the exact same title/subtitle pattern as every other page's
   mobile hero (40px title, full-width left-aligned 16px subtitle).
   ========================================================================== */
@media (max-width: 768px) {
  .contact-hero {
    padding-inline: 1.5rem; /* 24px, per direct spec — was var(--margin)/40px */
    padding-top: 7.5rem; /* 120px — matches every other page's mobile hero clearance */
  }

  .contact-hero__title {
    font-size: 2.5rem; /* 40px — was 80px, matches every other page's mobile hero-text scale */
  }

  .contact-hero__subtitle {
    /* Was grid-column:5/12 — a deliberate desktop-only indent under the
       title, same pattern as every other page's hero subtitle. */
    grid-column: 1 / 13;
    max-width: none;
  }

  /* Re-enables the bottom row hidden above (desktop-only) — see that
     rule's own comment. Just tagline + reactions in a plain two-item
     row now that "Back to top" isn't part of it: no need for the rest
     of the site's stacked/grid corner treatment (see .footer__bottom-row
     in style.css's own mobile block), which exists specifically to fit
     three items into two corners. */
  body.contact-page .footer__bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 1.5rem;
  }

  body.contact-page .footer__links {
    margin-bottom: 1.5rem; /* 24px, links -> bottom row — was 0, dead space with no bottom row to gap from */
  }
}