:root{
  --text: rgba(255,255,255,.96);
  --line: rgba(255,255,255,.92);
  --overlay: rgba(72, 57, 68, .28);
  --overlay-mobile: rgba(72, 57, 68, .18);
  --modal-bg: rgba(255,255,255,.96);
  --modal-text: #1b1b1b;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
}

body{
  background:#20181d;
  color:var(--text);
  overflow:hidden;
}

body,
button,
a{
  -webkit-tap-highlight-color: transparent;
}

.page-overlay{
  position:fixed;
  inset:0;
  background:
    linear-gradient(var(--overlay),var(--overlay)),
    url("assets/background.jpg") center center / cover no-repeat;
  transform: scale(1.01);
}

.page{
  position:relative;
  min-height:100vh;
  isolation:isolate;
}

.hero{
  position:absolute;
  left:50%;
  top:17.5vh;
  transform:translateX(-50%);
  width:min(92vw, 760px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.logo{
  width:clamp(116px, 7.2vw, 156px);
  height:auto;
  margin:0 0 clamp(46px, 5vh, 74px);
  object-fit:contain;
  filter: drop-shadow(0 0 0 rgba(255,255,255,0));
}

h1{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(3.3rem, 4vw, 5.2rem);
  line-height:1;
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}

.instagram{
  margin-top:clamp(62px, 8vh, 86px);
  color:var(--line);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.instagram svg{
  width:clamp(38px, 2.4vw, 50px);
  height:clamp(38px, 2.4vw, 50px);
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mail{
  margin-top:clamp(150px, 16vh, 176px);
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--line);
  text-decoration:none;
  font-family:"Inter", Arial, sans-serif;
  font-size:clamp(14px, .82vw, 16px);
  font-weight:400;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}

.mail svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:translateY(.5px);
}

.legal-link{
  position:absolute;
  left:50%;
  bottom:4.7vh;
  transform:translateX(-50%);
  padding:0;
  border:0;
  background:none;
  color:var(--line);
  cursor:pointer;
  font-family:"Inter", Arial, sans-serif;
  font-size:clamp(12px, .95vw, 15px);
  line-height:1.3;
  text-decoration:underline;
  text-underline-offset:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}

.legal-link:hover,
.mail:hover,
.instagram:hover{
  opacity:.95;
}

.legal-modal{
  width:min(92vw, 720px);
  border:none;
  padding:0;
  border-radius:18px;
  background:var(--modal-bg);
  color:var(--modal-text);
  box-shadow:0 18px 70px rgba(0,0,0,.38);
}

.legal-modal::backdrop{
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
}

.legal-modal__inner{
  padding:28px 28px 22px;
  font-family:"Inter", Arial, sans-serif;
}

.legal-modal__inner h2{
  margin:0 0 14px;
  font-size:1.3rem;
}

.legal-modal__content{
  font-size:.97rem;
  line-height:1.55;
}

.close-button{
  margin-top:10px;
  border:0;
  border-radius:999px;
  background:#171717;
  color:#fff;
  padding:10px 16px;
  font:inherit;
  cursor:pointer;
}

@media (max-width: 900px){
  body{
    overflow:auto;
  }

  .page-overlay{
    background:
      linear-gradient(var(--overlay-mobile),var(--overlay-mobile)),
      url("assets/background.jpg") center center / cover no-repeat;
  }

  .hero{
    top:11svh;
    width:min(92vw, 540px);
  }

  h1{
    font-size:clamp(2.6rem, 10vw, 4rem);
  }

  .instagram{
    margin-top:48px;
  }

  .mail{
    margin-top:88px;
    font-size:14px;
  }

  .legal-link{
    bottom:4svh;
    font-size:13px;
  }
}

@media (max-width: 560px){
  .hero{
    top:8svh;
  }

  .logo{
    width:104px;
    margin-bottom:34px;
  }

  .instagram svg{
    width:34px;
    height:34px;
  }

  .mail{
    gap:9px;
    margin-top:72px;
    font-size:13px;
  }

  .mail svg{
    width:15px;
    height:15px;
  }
}