:root {
  --yellow:#f4b51f;
  --yellow2:#ffc42d;
  --ink:#111;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#111}
body{overflow:hidden}
body::before{
  content:"";
  position:fixed;
  inset:-28px;
  background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)),url('/hero-landscape-v3.jpeg') center center/cover no-repeat;
  filter:blur(18px) saturate(.95);
  transform:scale(1.07);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.18));
  z-index:-1;
  pointer-events:none;
}
.page{
  width:100vw;
  height:100dvh;
  min-height:100dvh;
  display:block;
  padding:0;
  margin:0;
  overflow:hidden;
}
.hero{
  position:relative;
  width:100vw;
  height:100dvh;
  min-height:100dvh;
  aspect-ratio:auto;
  overflow:hidden;
  box-shadow:none;
  background:#1d1710;
}
.hero-image,
.hero-image-mobile{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.hero-image{object-fit:cover;object-position:center center}
.hero-image-mobile{display:none;object-fit:cover;object-position:center center}
.notify-form{
  position:absolute;
  left:var(--form-left,28%);
  top:var(--form-top,68.25%);
  width:var(--form-width,40.2%);
  z-index:3;
}
.input-wrap,
.mobile-input-wrap{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.16);
  box-shadow:0 4px 18px rgba(0,0,0,.14);
  overflow:hidden;
}
.input-wrap{height:var(--form-height,clamp(40px,5.1vw,78px))}
.mail-icon{font-size:clamp(15px,1.55vw,27px);margin-left:clamp(13px,1.6vw,28px);color:#111;transform:translateY(-1px)}
.notify-form input{min-width:0;width:100%;border:0;outline:0;background:transparent;padding:0 clamp(9px,1vw,16px);font-size:clamp(10px,1.25vw,20px);color:#555}
.notify-form input::placeholder{color:#777}
.notify-form button,
.mobile-image-form button{align-self:stretch;border:0;border-radius:999px;background:linear-gradient(180deg,#f8c73d,#edae17);color:var(--ink);font-weight:800;cursor:pointer}
.notify-form button{min-width:32%;padding:0 clamp(14px,2.2vw,34px);font-size:clamp(10px,1.35vw,20px)}
.notify-form button:hover,.mobile-image-form button:hover{filter:brightness(1.04)}
.notify-form button:disabled,.mobile-image-form button:disabled{opacity:.7;cursor:wait}
.form-message,
.mobile-form-message{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  margin:0;
  width:max-content;
  max-width:min(96vw,130%);
  min-height:0;
  padding:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,8px);
  text-align:center;
  line-height:1.25;
  color:#fff;
  text-shadow:none;
  border-radius:999px;
  transition:opacity .2s ease,transform .2s ease,padding .2s ease;
  z-index:6;
}
.form-message{font-size:clamp(10px,1vw,14px);font-weight:800}
.mobile-form-message{font-size:clamp(12px,3.35vw,15px);font-weight:800;max-width:min(92vw,110%)}
.form-message.is-visible,
.mobile-form-message.is-visible{
  opacity:1;
  transform:translate(-50%,0);
  padding:9px 14px;
  background:rgba(17,17,17,.92);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.form-message.is-success,.mobile-form-message.is-success{border-color:rgba(244,181,31,.7)}
.form-message.is-existing,.mobile-form-message.is-existing{border-color:rgba(255,255,255,.38)}
.form-message.is-error,.mobile-form-message.is-error{background:rgba(90,24,18,.94);border-color:rgba(255,208,198,.55)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mobile-image-form{display:none}

/* Phone portrait: use the supplied portrait artwork as a proper full-screen mobile version. */
@media (orientation:portrait) and (max-width:900px){
  html,body{width:100%;min-height:100%;margin:0;padding:0;background:#20140a}
  body{min-height:100dvh;overflow:hidden}
  body::before{
    background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.22)),url('/hero-mobile-v3.png') center center/cover no-repeat;
    filter:blur(20px) saturate(.96);
    transform:scale(1.09);
  }
  body::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.20))}
  .page{
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    margin:0;
    padding:0;
    display:block;
    overflow:hidden;
  }
  .hero{
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    margin:0;
    aspect-ratio:auto;
    box-shadow:none;
    background:#3a260f;
  }
  .hero-image{display:none}
  .hero-image-mobile{display:block;object-fit:cover;object-position:center center}
  .landscape-form{display:none}
  .mobile-image-form{
    display:block;
    position:absolute;
    left:7%;
    top:77.2%;
    width:86%;
    z-index:4;
  }
  .mobile-input-wrap{
    height:clamp(56px,13.8vw,74px);
    grid-template-columns:auto minmax(0,1fr) auto;
    border:1px solid rgba(255,255,255,.85);
    box-shadow:0 10px 30px rgba(0,0,0,.34);
  }
  .mobile-mail-icon{
    color:#111;
    font-size:clamp(18px,5vw,24px);
    margin-left:clamp(18px,4.6vw,24px);
    transform:translateY(-1px);
  }
  .mobile-image-form input{
    min-width:0;
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    padding:0 10px;
    font-size:clamp(14px,3.8vw,18px);
    color:#555;
    text-overflow:ellipsis;
  }
  .mobile-image-form input::placeholder{color:rgba(120,120,120,.92)}
  .mobile-image-form button{
    min-width:31%;
    padding:0 clamp(14px,4vw,24px);
    font-size:clamp(12px,3.4vw,17px);
    font-weight:900;
    white-space:nowrap;
  }
}




/* Full-bleed desktop + landscape: no black side borders. */
@media not all and (orientation:portrait) {
  body::before, body::after { display:none; }
  html, body { width:100%; height:100%; background:#1d1710; }
  .page { width:100vw; height:100dvh; min-height:100dvh; padding:0; }
  .hero { width:100vw; height:100dvh; min-height:100dvh; box-shadow:none; }
  .hero-image { width:100%; height:100%; object-fit:cover; object-position:center center; }
}

@media (orientation:landscape) {
  body::before, body::after { display:none; }
  .page { width:100vw; height:100dvh; min-height:100dvh; padding:0; display:block; overflow:hidden; }
  .hero { width:100vw; height:100dvh; min-height:100dvh; aspect-ratio:auto; box-shadow:none; }
  .hero-image { display:block; object-fit:cover; object-position:center center; }
  .hero-image-mobile { display:none; }
  .mobile-image-form { display:none; }
  .landscape-form { display:block; }
}


/* Landscape fix:
   Show the entire 3:2 artwork at full browser width.
   If the browser window is shorter than the artwork, allow vertical scrolling
   instead of cropping the top/bottom. */
@media (orientation:landscape) {
  html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #1d1710;
  }

  body {
    width: 100%;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #1d1710;
  }

  .page {
    width: 100vw;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding: 0;
    margin: 0;
  }

  .hero {
    position: relative;
    width: 100vw;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
    overflow: visible;
    margin: 0;
    box-shadow: none;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }
}


/* Clickable social icons. The artwork already contains the visible icons;
   these transparent hotspots make them functional without changing the design. */
.social-hotspots{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}
.social-hotspot{
  position:absolute;
  display:block;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.social-hotspot:focus-visible{
  outline:3px solid #ffc42d;
  outline-offset:3px;
}

/* Original 1536x1024 landscape artwork icon centers. */
.landscape-social-links .social-hotspot{
  top:84.18%;
  width:4.4%;
  aspect-ratio:1/1;
}
.landscape-social-links .social-facebook{left:41.67%}
.landscape-social-links .social-instagram{left:47.92%}
.landscape-social-links .social-email{left:54.10%}
.mobile-social-links{display:none}

/* Portrait artwork hotspots are positioned by app-v6.js so they stay aligned
   even when object-fit: cover crops a little from the sides on tall phones. */
@media (orientation:portrait) and (max-width:900px){
  .landscape-social-links{display:none}
  .mobile-social-links{display:block}
  .mobile-social-links .social-hotspot{
    width:var(--mobile-social-size,48px);
    height:var(--mobile-social-size,48px);
    top:var(--mobile-social-top,92.83%);
  }
  .mobile-social-links .social-facebook{left:var(--mobile-facebook-left,34.65%)}
  .mobile-social-links .social-instagram{left:var(--mobile-instagram-left,49.93%)}
  .mobile-social-links .social-email{left:var(--mobile-email-left,65.21%)}
}