/* Camera Commune — holding page.
   Header and wordmark rules copied from the MVP (globals.css, Header.module.css):
   Suisse Intl Bold 700, 22px, letter-spacing 0, #111111 on #ffffff,
   top-left in a header with 32px 48px padding (20px at <=900px).
   Hero rules copied from page.module.css. */

@font-face {
  font-family: "Suisse Intl";
  src: url("Fonts/SuisseIntl-Bold.woff2") format("woff2"),
       url("Fonts/SuisseIntl-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("Fonts/SuisseIntl-Light.woff2") format("woff2"),
       url("Fonts/SuisseIntl-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("Fonts/suisse-intl-regular.woff2") format("woff2"),
       url("Fonts/suisse-intl-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: #ffffff;
  color: #111111;
  font-family: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* Header sits tight to the top corners: 24px side insets, with the wordmark's
   cap-height ~19px from the top (optically level with the 24px side inset;
   line-height 1 puts caps ~0.1em below the line top, hence 17px). Fixed height keeps the hero exactly where it was. */
.header {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 97px;
  padding: 17px 24px 0;
}

.logo {
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Proportionate on laptops: 18px at 1280-1380px wide, easing up to 22px by ~1700px. */
@media (min-width: 901px) {
  .logo { font-size: clamp(18px, 1.3vw, 22px); }
}

/* Hero composition: the container is the positioning context. The photo scales
   with the viewport width (capped at 1600px), plus one height cap so photo +
   header + padding fit in the window (193px = header 97 + padding 48 + 48;
   2618/1180 = the photo's aspect ratio, so it never crops or distorts).
   The copy sits over the white area at the photo's bottom-left, left-aligned
   with the wordmark; the bottom-left of the photo is clear of the cameras. */
.hero {
  position: relative;
  padding: 48px 48px 48px;
}

.heroImageWrap {
  width: 100%;
  max-width: min(1600px, max(320px, calc((100vh - 193px) * 2618 / 1180)));
  max-width: min(1600px, max(320px, calc((100svh - 193px) * 2618 / 1180)));
  margin-inline: auto;
}

.heroImage {
  width: 100%;
  height: auto;
  display: block;
}

.intro {
  position: absolute;
  left: 48px;
  bottom: 37.5px; /* keeps the description where it was after adding the launch line */
  width: min(34em, calc((100vw - 96px) * 0.3));
  text-align: left;
}

.intro p { margin: 0; }

.intro .description {
  font-size: 17px;
  line-height: 1.45;
}

.intro .supporting {
  margin-top: 9.6px;
  color: #666666;
}

.intro .launch {
  margin-top: 4px;
}

/* Same treatment as the MVP's .utilityLink: Regular 400, 13.5px, 0.02em. */
.utilityLink {
  position: relative;
  top: -2px; /* optical: lifts the smaller Contact so it reads level with the wordmark */
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: #111111;
}

/* The wordmark is 22px on very large screens, so Contact needs 1px more lift. */
@media (min-width: 1700px) {
  .utilityLink { top: -3px; }
}

/* Tall desktops keep the spacious top margin. */
@media (min-width: 901px) and (min-height: 1100px) {
  .hero { padding-top: 112px; }
}

/* Narrow or short windows: the copy no longer fits over the white area without
   touching the cameras, so it stacks under the photo in normal flow. */
@media (max-width: 999px), (max-height: 599px) {
  .intro {
    position: static;
    width: auto;
    max-width: 34em;
    margin-top: 56px;
  }
}

@media (max-width: 900px) {
  .header { height: 73px; padding: 18px 20px 0; }
  .hero { padding: 40px 20px 40px; }
}