/* Aqua'Ora: immersive artwork-led landing screen, uncluttered on all devices.
   At wide/tablet sizes the approved picture fills the browser edge-to-edge.
   Preserve proportions: object-fit:cover may crop a little vertically on wide
   screens; this intentionally removes the former blurred sidebars. */

/* Home has no header at all; visitors enter through the sea portal.
   Every other section retains the navigation, branding and tagline. */
.masthead.on-hero {display:none !important;}

/* The header uses an extracted, transparent vector of the exact logo
   from the approved picture — INCLUDING BY ORLY, the gold heart and brush line.
   Do not substitute a handwriting font for the logotype. */
.masthead:not(.on-hero) .logo {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  line-height:1;
  text-decoration:none;
}
.masthead:not(.on-hero) .logo-image {
  display:block;
  width:clamp(178px,17vw,270px);
  height:auto;
  max-width:100%;
  max-height:82px;
  object-fit:contain;
}
.masthead:not(.on-hero) .header-whisper {
  display:block;
  font-family:'Water Brush','Caveat',cursive;
  font-size:clamp(23px,2.1vw,34px);
  font-weight:400;
  line-height:1;
  color:#173f70;
  white-space:nowrap;
}
.masthead:not(.on-hero) {
  background:linear-gradient(180deg,rgba(229,247,255,.97),rgba(227,246,255,.76) 75%,rgba(227,246,255,0));
}

/* The menu and the tagline both fit the desktop header. */
@media (min-width:851px) {
  .masthead:not(.on-hero) {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:clamp(10px,1.5vw,24px);
    justify-content:stretch;
    align-items:center;
  }
  .masthead:not(.on-hero) .primary-nav {
    justify-self:center;
    min-width:0;
    gap:clamp(8px,1.05vw,18px);
  }
  .masthead:not(.on-hero) .primary-nav a {
    font-size:clamp(9px,.72vw,12px);
  }
}

/* On tablets the header becomes the existing mobile navigation menu, but
   its brand and short tagline remain on the secondary pages. */
@media (max-width:850px) {
  .masthead:not(.on-hero) .header-whisper {
    display:block;
    margin-left:auto;
    font-size:clamp(18px,3.0vw,25px);
  }
  .masthead:not(.on-hero) .logo-image {
    width:clamp(165px,28vw,235px);
    max-height:72px;
  }
}
@media (max-width:700px) {
  .masthead:not(.on-hero) .logo-image {
    width:clamp(130px,39vw,182px);
    max-height:57px;
  }
  .masthead:not(.on-hero) .header-whisper {
    font-size:clamp(15px,4.2vw,22px);
  }
  .masthead:not(.on-hero) {gap:5px;}
  /* No invisible 75px header reservation above the mobile hero artwork. */
  #home .hero-stage {
    inset:calc(12px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));
  }
}

@media (min-width:701px) {
  #home.hero {
    position:relative;
    width:100%;
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    background:#8ccde9;
  }
  /* Eliminate BOTH blurred background side panels and their overlay. */
  #home.hero::before,
  #home.hero::after {content:none !important;display:none !important;}

  /* The artwork itself, rather than a blurred copy, fills the entire view. */
  #home .hero-stage {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
  }
  #home .hero-artwork {
    position:absolute;
    inset:0;
    top:0;
    left:0;
    transform:none;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    display:block;
    flex:none;
    pointer-events:none;
  }
  #home .hero-artwork .hero-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-height:none;
    display:block;
    object-fit:cover;
    object-position:center center;
  }
  /* Nothing competes with the title, woman, or Enter button. */
  #home .hero-circles,
  #home .scroll-cue {display:none !important;}

  #home .portal-enter {
    --button-size:clamp(102px,9.4vw,136px);
    top:56%;
    left:50%;
    color:#183f70;
    background:radial-gradient(circle at 33% 23%,
      rgba(252,255,255,.83) 0%,
      rgba(229,249,255,.72) 34%,
      rgba(159,229,245,.65) 68%,
      rgba(118,207,234,.70) 100%);
    border:1px solid rgba(255,255,255,.94);
    box-shadow:
      inset 0 2px 10px rgba(255,255,255,.72),
      inset 0 -5px 14px rgba(35,128,177,.12),
      0 0 0 5px rgba(235,255,255,.25),
      0 0 0 12px rgba(167,239,252,.14),
      0 10px 28px rgba(0,58,101,.18);
    backdrop-filter:blur(11px) saturate(1.45);
    -webkit-backdrop-filter:blur(11px) saturate(1.45);
  }
  #home .portal-enter-title {
    color:#183f70;
    font:400 clamp(23px,2.5vw,32px)/1.08 'Italiana',Georgia,serif;
    text-shadow:0 1px 3px rgba(246,254,255,.85);
  }
  #home .portal-enter:hover,
  #home .portal-enter:focus-visible {
    box-shadow:
      inset 0 2px 13px rgba(255,255,255,.80),
      0 0 0 7px rgba(235,255,255,.37),
      0 0 0 17px rgba(167,239,252,.19),
      0 12px 33px rgba(0,58,101,.23);
  }
}

/* A portrait tablet has a much taller aspect ratio than the hero artwork.
   Preserve all its printed lettering and the seated woman there, with a
   clean matching background above/below (never fuzzy side panels). */
@media (min-width:701px) and (max-width:1100px) and (orientation:portrait) {
  #home .hero-artwork {
    width:100%;
    height:auto;
    aspect-ratio:1672 / 941;
    inset:auto;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  #home .hero-artwork .hero-image {
    object-fit:contain;
  }
  #home.hero {background:linear-gradient(180deg,#c8e7f6,#8ccde9 56%,#87c6e3);}
  #home .portal-enter {--button-size:clamp(90px,13vw,124px);}
  #home .portal-enter-title {font-size:clamp(20px,3.5vw,29px);}
}