/* ============================================
   YES, DEAR — V6
   Cinemascope hero. Two sections. That's it.
   ============================================ */

@font-face { font-family:'Brockmann'; src:url('assets/fonts/brockmann-regular-webfont.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Brockmann'; src:url('assets/fonts/brockmann-medium-webfont.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:'Brockmann'; src:url('assets/fonts/brockmann-bold-webfont.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{
  background:#000;
  color:#fff;
  font-family:'Brockmann','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============================================
   HERO — Cinemascope
   Black bars top/bottom, full-width image between
   ============================================ */
.hero{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
}

/* Black bars */
.bar{
  background:#000;
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

.bar-top{
  height:clamp(80px, 12vh, 140px);
}

.bar-bottom{
  height:clamp(80px, 12vh, 140px);
  padding:0 calc(100vw / 9);
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.bar-logo{
  height:clamp(22px, 3.5vw, 56px);
  opacity:1;
}

/* Image frame */
.hero-frame{
  flex:1;
  position:relative;
  overflow:hidden;
}

.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
  filter:contrast(1.05) saturate(0.9);
}

/* Gradient overlay for text readability — left side */
.hero-frame::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 40%,
    transparent 65%
  );
  pointer-events:none;
}

/* Headline — mid-page left, within the left 60% */
.hero-hl{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:calc(100vw / 9);
  z-index:2;
  font-weight:700;
  font-size:clamp(28px, 4.5vw, 72px);
  text-transform:uppercase;
  letter-spacing:-0.03em;
  line-height:0.92;
  color:#fff;
  max-width:60%;
}

/* ============================================
   SIGNUP — Section 2
   Centered, clean, minimal
   ============================================ */
.signup{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:50vh;
  /* Golden Canon: 1/9 left margin, 2/9 right margin — content in left 6/9 */
  padding:calc(100vh / 9) calc(100vw * 2 / 9) calc(100vh * 2 / 9) calc(100vw / 9);
}

.signup-block{
  width:100%;
  max-width:420px;
}

.signup-label{
  font-weight:500;
  font-size:clamp(10px, 1.2vw, 13px);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#fff;
  line-height:1.8;
  margin-bottom:34px;
  text-align:left;
}

.signup-form{
  display:flex;
  width:100%;
}

.signup-input{
  flex:1;
  background:transparent;
  border:1px solid rgba(255,255,255,0.15);
  border-right:none;
  color:#fff;
  font-family:'Brockmann',sans-serif;
  font-weight:500;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:16px 18px;
  outline:none;
  transition:border-color 0.2s;
}

.signup-input:focus{border-color:rgba(255,255,255,0.4)}
.signup-input::placeholder{color:rgba(255,255,255,0.18)}

.signup-btn{
  background:#fff;
  border:1px solid #fff;
  padding:14px 24px;
  cursor:pointer;
  transition:all 0.25s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.btn-logo{
  height:12px;
  filter:invert(1);
  transition:filter 0.25s;
}

/* Polaroid Supercolor accent: neon green on hover */
.signup-btn:hover{
  background:#39FF14;
  border-color:#39FF14;
}

.signup-btn:hover .btn-logo{
  filter:invert(1);
}

/* ============================================
   FOOTER
   ============================================ */
.footer{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:55px clamp(20px, 3vw, 40px) 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:21px;
}

.footer-mark{
  height:24px;
  opacity:0.15;
}

.footer-links{
  display:flex;
  gap:21px;
}

.footer-links a{
  font-weight:500;
  font-size:10px;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  text-decoration:none;
  transition:color 0.2s;
}

.footer-links a:hover{color:#fff}

.footer-bottom span{
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.12);
}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:768px){
  .bar-top{height:60px}
  .bar-bottom{height:60px;padding:0 16px}
  .bar-logo{height:clamp(18px, 6vw, 28px)}

  .hero-hl{
    max-width:80%;
    bottom:20px;
    left:16px;
  }

  .signup{
    min-height:40vh;
    padding:34px 16px;
  }

  .signup-form{
    flex-direction:column;
    max-width:100%;
  }

  .signup-input{
    border-right:1px solid rgba(255,255,255,0.15);
    border-bottom:none;
  }

  .signup-btn{width:100%}
}