/* MELTS Cruises, Coming Soon concept 02: the photograph fills the screen.
   Tokens follow homepage-concept/assets/brand/brand.css, copied here so this folder deploys on its own. */

/* Century Gothic (client requirement).
   1. Licence the webfont (Monotype; desktop and Office licences do not cover web embedding).
   2. Add the files to assets/fonts/ and uncomment the two @font-face rules below.
   3. Remove the Google Fonts lines in the page <head>. */
/*
@font-face { font-family: "Century Gothic Web"; src: url("../fonts/century-gothic-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Century Gothic Web"; src: url("../fonts/century-gothic-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
*/

:root {
  --navy: #003364;        /* exact: brochure heading colour */
  --sea: #052D54;         /* approximate: brochure navy panels */
  --turtle: #2880B9;      /* approximate: blue turtle in the brochure lockup */
  --sky: #8FC3E6;         /* turtle blue lightened for accents on navy */
  --mist: #B9CBDC;        /* secondary text on navy */
  --white: #FFFFFF;
  --shade: 0, 36, 72;     /* navy used for gradients over the photo */
  --deck: rgba(0, 51, 100, .9);  /* the navy surface shared by About and the contact strip */

  --font-brand: "Century Gothic Web", "Century Gothic", "CenturyGothic", "Jost", "Avenir Next", "Futura", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 96px);
  --ease: cubic-bezier(.22, .7, .12, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sea);
  color: var(--white);
  font-family: var(--font-brand);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2 { margin: 0; }
address { font-style: normal; }

.skip-link {
  position: fixed; top: 12px; left: 16px; z-index: 100; padding: 10px 18px; border-radius: 999px;
  background: var(--white); color: var(--navy); font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Small capitals for the contact labels */
.label {
  display: block; font-size: 12px; font-weight: 700; line-height: 1.3;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sky);
}

/* Brand: the turtle given real presence, with the homepage lockup */
.brand {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: calc(18px + env(safe-area-inset-top)) var(--pad) 0;
}
.lockup { display: inline-flex; align-items: center; gap: 14px; color: var(--white); text-decoration: none; }
.lockup img { width: 56px; height: 56px; flex: none; }
.lockup__name { display: grid; font-weight: 700; font-size: 20px; line-height: 1.02; letter-spacing: .01em; }

/* Stage, phones and squarer screens: the photo runs edge to edge at a crop that keeps the whole yacht,
   then its water fades into the brand's deep sea blue, where the words continue. */
.stage { position: relative; isolation: isolate; }
.stage__media { position: relative; height: clamp(380px, 118vw, 74svh); overflow: hidden; }
.stage__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 51% 50%;  /* Sir Simeon centred */
}
.stage__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--shade), .5) 0, rgba(var(--shade), 0) 26%),
    linear-gradient(180deg, rgba(5, 45, 84, 0) 86%, var(--sea) 100%);
}

.stage__copy { padding: 12px var(--pad) 0; }
h1 { display: grid; gap: 10px; font-weight: 400; }
.soon {
  font-size: clamp(2.125rem, 11vw, 4rem); font-weight: 700; line-height: .98;
  letter-spacing: .02em; text-transform: uppercase;
}
.tagline { font-size: clamp(1.1875rem, 4.8vw, 1.5rem); line-height: 1.3; }

/* Deck: About and the contact details share one navy surface that deepens to sea blue, under the turtle-blue edge.
   The homepage's quiet turtle sits behind the words and runs from About down into the contact details. */
.deck {
  isolation: isolate;
  overflow: hidden; overflow: clip;  /* hidden only where clip is not supported */
  margin-top: 36px;
  background: linear-gradient(180deg, var(--navy), var(--sea));
  border-top: 3px solid var(--turtle);
}
.about { position: relative; padding: 32px var(--pad) 36px; }
.about h2 {
  font-size: clamp(1.25rem, 5vw, 1.5rem); font-weight: 700; line-height: 1.1;
  letter-spacing: .03em; text-transform: uppercase;
}
.about p { margin-top: 14px; max-width: 40ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.about__mark {
  position: absolute; z-index: -1; right: -48px; bottom: -64px; width: 230px; height: auto;
  opacity: .07; pointer-events: none;
}

/* Contact: a list on phones, the lower arm of the deck on wide screens */
.contact {
  display: grid; gap: 22px;
  padding: 32px var(--pad) calc(32px + env(safe-area-inset-bottom));
}
.contact__values { display: flex; flex-wrap: wrap; column-gap: 24px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.contact__values > * { display: inline-flex; align-items: center; min-height: 44px; }
.contact a {
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 7px;
  font-variant-numeric: tabular-nums;
  transition: text-decoration-color .3s var(--ease), text-underline-offset .3s var(--ease);
}
.contact a:hover { text-decoration-color: var(--sky); text-underline-offset: 4px; }

/* Wide screens (13:9 and wider): one full-viewport photograph.
   Headline top left in the sky, the yacht centre left, and the deck along the bottom and up the right:
   the contact strip and the About panel share one navy surface. */
@media (min-width: 900px) and (min-aspect-ratio: 13/9) {
  :root { --deck-w: clamp(340px, 26vw, 600px); }

  .brand { padding-top: calc(clamp(20px, 3.5vh, 44px) + env(safe-area-inset-top)); }
  .lockup { gap: clamp(14px, 1.1vw, 22px); }
  .lockup img { width: clamp(60px, 4.4vw, 96px); height: clamp(60px, 4.4vw, 96px); }
  .lockup__name { font-size: clamp(21px, 1.5vw, 32px); }

  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--deck-w);
    grid-template-rows: 1fr auto auto;
    grid-template-areas: "copy copy" ". about" "contact contact";
    min-height: max(100svh, 620px);
    overflow: hidden; overflow: clip;  /* the turtle runs past the right edge */
  }
  .stage__media { position: absolute; inset: 0; z-index: -1; height: auto; }
  /* Narrower than 16:9 the photo is cropped at the sides: shift it so the yacht sits centre left, clear of the deck.
     Wider than 16:9 it is cropped top and bottom: keep the yacht above the contact strip. */
  .stage__media img { object-position: 62% 75%; }
  .stage__media::after {
    background:
      linear-gradient(104deg, rgba(var(--shade), .6) 0, rgba(var(--shade), .36) 28%, rgba(var(--shade), 0) 50%),
      linear-gradient(180deg, rgba(var(--shade), .38) 0, rgba(var(--shade), 0) 26%);
  }

  .stage__copy {
    grid-area: copy; align-self: start;
    padding: calc(clamp(20px, 3.5vh, 44px) + clamp(60px, 4.4vw, 96px) + clamp(20px, 9vh, 130px)) var(--pad) 32px;
    text-shadow: 0 1px 28px rgba(var(--shade), .35);
  }
  h1 { gap: clamp(10px, 1.6vh, 20px); }
  .soon { font-size: min(6vw, 10.5vh, 8rem); white-space: nowrap; }
  .tagline { font-size: clamp(1.25rem, min(1.8vw, 3.2vh), 2.25rem); }

  /* The deck's two arms sit on the grid separately and each carries the surface itself.
     About is stacked above the strip so the turtle shows where it runs down into it. */
  .deck { display: contents; }
  .about {
    grid-area: about; z-index: 1;
    padding: clamp(28px, 2.6vw, 56px) clamp(28px, 2.6vw, 56px) clamp(28px, 2.4vw, 48px);
    background: var(--deck);
    border-top: 3px solid var(--turtle);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .about h2 { font-size: clamp(1.375rem, 1.6vw, 2.25rem); }
  .about p { margin-top: clamp(12px, 1.2vw, 20px); font-size: clamp(1rem, 1.1vw, 1.3125rem); max-width: 34ch; }
  .about__mark { width: 62%; right: -16%; bottom: -26%; }

  .contact {
    grid-area: contact;
    grid-template-columns: repeat(3, auto); justify-content: start; align-items: end; column-gap: clamp(32px, 4.5vw, 96px);
    padding: clamp(16px, 2vh, 24px) var(--pad) calc(clamp(16px, 2vh, 24px) + env(safe-area-inset-bottom));
    background: var(--deck);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .contact__values { font-size: clamp(1rem, 1.1vw, 1.375rem); }
  .contact__values > * { min-height: 40px; }
}
/* Ultrawide (2:1 and wider): the photo is cropped hard top and bottom, so the town rises behind the headline.
   Crop a little more sky to keep the wake above the strip, and deepen the shade behind the words. */
@media (min-width: 900px) and (min-aspect-ratio: 2/1) {
  .stage__media img { object-position: 62% 82%; }
  .stage__media::after {
    background:
      linear-gradient(100deg, rgba(var(--shade), .7) 0, rgba(var(--shade), .45) 24%, rgba(var(--shade), 0) 42%),
      linear-gradient(180deg, rgba(var(--shade), .42) 0, rgba(var(--shade), 0) 30%);
  }
}

/* Arrival: the photo settles, the brand and words fade in, the deck follows. Nothing moves after that. */
@media (prefers-reduced-motion: no-preference) {
  .stage__media img { animation: settle 2.8s var(--ease) both; }
  .lockup { animation: fade 1.2s var(--ease) .3s both; }
  .soon { animation: rise 1.1s var(--ease) .45s both; }
  .tagline { animation: rise 1.1s var(--ease) .6s both; }
  .about { animation: rise 1.1s var(--ease) .85s both; }
  .contact { animation: fade 1.2s var(--ease) 1s both; }
  @keyframes settle { from { transform: scale(1.05); } to { transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}