/* Contrail Labs splash.
   Ported from the design handoff (design_handoff_contrail_splash/), which is
   high-fidelity: colours, type, sizes and positions are final. The only
   departures are the two scrims, retuned for the added address line — each
   is commented where it differs.

   The copy has to sit in the dark gap between the left spinnaker and the
   vertical rigging line at every viewport size, so it is positioned in the
   photo's coordinate space rather than the viewport's. See the README before
   moving anything. */

:root {
  --ink: #16130e;
  --cream: #f2e9d4;
  --gold: #e6c77e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); }
body { overflow: hidden; }

/* Photo is 1122x1164. --fw = rendered photo width at "cover", pinned top-center.
   --u  = 1 design px (the design was drawn on a 1440-wide artboard).
   Every overlay coordinate is a multiple of --u, offset by --fx, so the text
   stays locked to the gap between the sails at any viewport size. */
.stage {
  --fw: max(100vw, calc(100vh * 1122 / 1164));
  --fw: max(100vw, calc(100svh * 1122 / 1164));
  --fx: calc((100vw - var(--fw)) / 2);
  --u: calc(var(--fw) / 1440);
  position: fixed; inset: 0; overflow: hidden; background: var(--ink);
}
.photo {
  position: absolute; top: 0; left: var(--fx);
  width: var(--fw); height: calc(var(--fw) * 1164 / 1122);
}
/* <picture> is only a format switch; keep it out of the box tree so the
   <img> sizes against .photo exactly as it did in the handoff. */
.photo picture { display: contents; }
.photo img { display: block; width: 100%; height: 100%; }
/* Taller and lower than the handoff's (15.28% 17.4% at 59% 29.5%, no hold)
   to cover the added address line, whose extra height pushes the email down
   onto the brighter clouds. Full strength is held through the inner 40% so
   the whole block gets it, not just the centre. Width and peak strength are
   as designed. */
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 15.28% 22% at 59% 31.5%, rgba(14,11,7,.32) 40%, rgba(14,11,7,0));
}
.copy {
  position: absolute;
  left: calc(var(--fx) + 704 * var(--u));
  top: calc(300 * var(--u));
  width: calc(250 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(16 * var(--u));
  color: var(--cream);
  text-align: left;
}
.copy h1 {
  margin: 0;
  font-family: "League Gothic", "Oswald", sans-serif; font-weight: 400;
  font-size: calc(86 * var(--u)); line-height: .86;
  letter-spacing: .01em; text-transform: uppercase;
}
.copy p {
  margin: 0;
  font-family: "Libre Franklin", "Franklin Gothic", sans-serif; font-weight: 500;
  font-size: max(calc(16 * var(--u)), 13px); line-height: 1.4;
  text-wrap: pretty;
}
.copy a {
  font-family: "Libre Franklin", "Franklin Gothic", sans-serif; font-weight: 600;
  font-size: max(calc(15 * var(--u)), 13px); line-height: 1.4;
  letter-spacing: .02em; color: var(--gold); text-decoration: none;
}
.copy a:hover, .copy a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.copy a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Phones: the gap is too narrow for body text, so the block drops to the bottom-left over the water.
   The gradient stops are in px, not the handoff's % of screen height: the
   text block is a fixed ~290px tall, so on short phones a %-based fade ended
   below the name and left it over the bright sail. */
@media (max-width: 640px) {
  .stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(14,11,7,.78) 0, rgba(14,11,7,.45) 280px, rgba(14,11,7,0) 440px);
  }
  .copy {
    z-index: 1; top: auto; left: 24px; right: 24px; width: auto;
    bottom: max(32px, env(safe-area-inset-bottom));
    gap: 12px;
  }
  .copy h1 { font-size: 64px; }
  .copy p { font-size: 15px; max-width: 260px; }
  .copy a { font-size: 15px; }
}