:root{
  --bg:#fff;
  --media-w:46vw;
  --media-max:700px;
  --brand-top:66%;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family:"Inter",system-ui,Arial,sans-serif;
  display:grid;
  place-items:center;
}

/* Scène */
.gate__stage{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Lien global */
.gate__link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

/* Image + titre */
.gate__image-wrap{
  position:relative;
  width:min(var(--media-w),var(--media-max));
}
.gate__image{
  display:block;
  width:100%;
  height:auto;
}

/* Titre centré + grand */
.brand{
  position:absolute;
  left:50%;
  top:var(--brand-top);
  transform:translate(-50%,-50%);
  white-space:nowrap;
  text-align:center;

  font-family:"greycliff-cf","Poppins",system-ui,Arial,sans-serif;
  font-weight:900;
  letter-spacing:.02em;
  font-size:clamp(3.5rem,11.5vw,10rem);
  line-height:1;
  color:#57A6FF;
  transition:opacity 0.25s ease;
}

/* Hover : légère atténuation pour signaler le clic */
.gate__link:hover .brand{
  opacity:0.75;
}

/* Légende */
.gate__caption{
  width:min(var(--media-w),var(--media-max));
  margin:1rem auto 0;
  font:400 .85rem/1.4 "Inter",system-ui,Arial,sans-serif;
  text-align:right;
}

@media (max-width:600px){
  :root{ --media-w:72vw; --media-max:1000px; }
  .brand{ font-size:clamp(2.7rem,12.5vw,7.5rem); }
}