/* ==========================================================================
   Saifi 311 — Coming soon
   Layout: the sunset photo fills the screen like a poster. It already carries
   the logo and "Coming soon", so the copy and two buttons sit in the sky
   directly beneath them, centred on the logo's axis. Everything on the photo
   is sized in container units of the photo itself (cqw), so it stays locked to
   the logo at any landscape size. Portrait screens switch to a portrait
   version of the photo (logo at the top) and use the same approach.
   ========================================================================== */

:root {
  --navy: #43486A;       /* logo, PANTONE 282 U */
  --navy-deep: #2F3352;
  --cream: #FBF3E6;
  --sky-warm: #F6E2C4;   /* the glow behind the clouds */
  --sky-glass: rgba(251, 243, 230, 0.78);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Jost", "Segoe UI", Helvetica, Arial, sans-serif;

  /* photo is 1672 x 941; these reproduce background-size: cover */
  --ratio: 1.7768;
  --sw: max(100vw, calc(100vh * var(--ratio)));
  --sh: max(100vh, calc(100vw / var(--ratio)));

  /* phone photo is 941 x 1672 */
  --m-ratio: 0.5628;
  --m-sw: max(100vw, calc(100vh * var(--m-ratio)));
  --m-sh: max(100vh, calc(100vw / var(--m-ratio)));

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--sky-warm);
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
}

/* read by search engines and screen readers, not shown on screen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scene: the photo, cropped like "cover" but kept toward its left side so
   the built-in logo and the building both stay on screen ------------------- */
.scene {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.stage {
  position: absolute;
  width: var(--sw);
  height: var(--sh);
  left: calc(-1 * min(var(--sw) * 0.04, var(--sw) - 100vw));
  top: calc(-0.3 * (var(--sh) - 100vh));
  container-type: inline-size;
  background: url("../assets/saifi311-sunset.webp") center / 100% 100% no-repeat;
}

/* Copy, centred under the photo's logo (logo centre = 23.7% across) */
.copy {
  position: absolute;
  left: 23.7%;
  top: 40%;
  width: 30cqw;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 0 1.4cqw rgba(153, 178, 223, 0.85);
}

/* a short rule ties the copy to "Coming soon" above it */
.copy::before {
  content: "";
  width: 3.2cqw;
  height: 1px;
  margin-bottom: 1.9cqw;
  background: var(--navy);
  opacity: 0.55;
}

.headline {
  max-width: 22cqw;
  margin: 0 0 1.3cqw;
  font-family: var(--serif);
  font-weight: 500;
  font-size: max(22px, 2.5cqw);
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--navy);
  text-wrap: balance;
}

.lead {
  max-width: 26cqw;
  margin: 0 0 1cqw;
  text-wrap: balance;
  font-size: max(14px, 1.06cqw);
  font-weight: 400;
  line-height: 1.6;
  color: var(--navy-deep);
}

.tagline {
  max-width: 22cqw;
  margin: 0 0 2cqw;
  line-height: 1.3;
  text-wrap: balance;
  font-family: var(--serif);
  font-style: italic;
  font-size: max(16px, 1.36cqw);
  color: var(--navy);
}

/* Buttons: letter-spaced caps, like "Coming soon" in the photo */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1cqw;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max(132px, 10.5cqw);
  padding: max(13px, 1cqw) max(22px, 1.9cqw);
  border: 1px solid var(--navy);
  font-size: max(11px, 0.78cqw);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-shadow: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}

.btn-solid {
  background: var(--navy);
  color: var(--cream);
}

.btn-solid:hover,
.btn-solid:focus-visible {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  transform: translateY(-2px);
}

.btn-line {
  background: var(--sky-glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--navy);
}

.btn-line:hover,
.btn-line:focus-visible {
  background: var(--navy);
  color: var(--cream);
  transform: translateY(-2px);
}

/* Gentle entrance; the copy is fully visible at rest */
.copy > * {
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.copy > :nth-child(2) { animation-delay: 0.1s; }
.copy > :nth-child(3) { animation-delay: 0.2s; }
.copy > :nth-child(4) { animation-delay: 0.3s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Narrow and portrait screens -----------------------------------------------
   A portrait version of the photo, with the logo and "Coming soon" at the top.
   It fills the screen like "cover", and the copy sits in the sky beneath the
   logo, sized in units of the photo (cqw) exactly like the desktop layout. */
@media (max-aspect-ratio: 1/1) {
  .stage {
    width: var(--m-sw);
    height: var(--m-sh);
    left: calc((100vw - var(--m-sw)) / 2);
    top: calc(-0.15 * (var(--m-sh) - 100vh));
    background: url("../assets/saifi311-sunset-mobile.webp") center / 100% 100% no-repeat;
  }

  /* logo centre is 50% across; "Coming soon" ends 27% down and the building
     starts 45% down, so the text fits in that band of sky. The copy box runs
     down to the bottom of the screen so the buttons can sit there. */
  .copy {
    left: 50%;
    top: 29%;
    bottom: calc(0.85 * (var(--m-sh) - 100vh) + max(32px, calc(20px + env(safe-area-inset-bottom, 0px))));
    width: 92cqw;
    text-shadow: 0 0 3cqw rgba(255, 246, 232, 0.9);
  }

  .copy::before {
    width: 7cqw;
    margin-bottom: 3cqw;
  }

  .headline {
    max-width: none;
    margin-bottom: 1.8cqw;
    font-size: max(22px, 6cqw);
    white-space: nowrap;
  }

  .lead {
    max-width: 76cqw;
    margin-bottom: 1.2cqw;
    font-size: max(13px, 3.2cqw);
    line-height: 1.5;
  }

  .tagline {
    max-width: none;
    margin-bottom: 0;
    font-size: max(14px, 3.4cqw);
    white-space: nowrap;
  }

  .actions {
    margin-top: auto;
    gap: 2.4cqw;
  }

  .btn {
    min-width: max(124px, 31cqw);
    padding: max(12px, 3.2cqw) max(18px, 4.8cqw);
    font-size: max(11px, 2.6cqw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .copy > * {
    animation: none;
  }

  .btn {
    transition: none;
  }
}