@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#f6f4ef;
  --text:#050505;
  --muted:#777;
  --blue:#1f57c8;
  --sand:#ead79a;
  --navy:#12295d;
  --green:#145a37;
  --terracotta:#cc7866;
  --black:#111;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:"Hanken Grotesk",Arial,sans-serif;
}

body{
  min-height:100svh;
}

.page{
  width:min(100%,960px);
  min-height:100svh;
  margin:0 auto;
  padding:clamp(42px,7vw,90px) clamp(22px,6vw,56px) 24px;
  display:flex;
  flex-direction:column;
}

.hero{
  text-align:center;
}

h1{
  margin:0;
  font-size:clamp(4rem,11vw,7.7rem);
  line-height:.83;
  letter-spacing:-.075em;
  font-weight:700;
}

.rule{
  width:clamp(48px,8vw,78px);
  height:2px;
  background:#111;
  margin:clamp(34px,5vw,56px) auto clamp(30px,4vw,44px);
}

.coming{
  margin:0;
  font-size:clamp(.82rem,2vw,1.02rem);
  line-height:1.75;
  letter-spacing:.32em;
  font-weight:500;
}

.meanwhile{
  margin:clamp(36px,5vw,52px) 0 10px;
  color:#5f5f5f;
  font-size:clamp(1rem,2.2vw,1.2rem);
}

.oyn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:var(--blue);
  font-size:clamp(1.05rem,2.6vw,1.35rem);
  letter-spacing:.08em;
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
}

.oyn:hover,
.oyn:focus-visible{
  text-decoration-thickness:2px;
}

.circles{
  position:relative;
  width:min(100%,760px);
  height:clamp(340px,49vw,470px);
  margin:clamp(34px,6vw,58px) auto 0;
}

.circle{
  position:absolute;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  padding:18px;
  font-size:clamp(.95rem,2vw,1.18rem);
  line-height:1.05;
  z-index:1;
  user-select:none;
}

.biography{
  width:clamp(126px,19vw,170px);
  aspect-ratio:1;
  left:0;
  top:28%;
  background:var(--sand);
  color:#17120a;
}

.music{
  width:clamp(138px,21vw,186px);
  aspect-ratio:1;
  left:20%;
  top:0;
  background:var(--navy);
  color:#35ff73;
}

.td{
  width:clamp(145px,22vw,195px);
  aspect-ratio:1;
  left:46%;
  top:8%;
  background:var(--green);
  color:#ff6128;
}

.contact{
  width:clamp(124px,19vw,166px);
  aspect-ratio:1;
  right:0;
  top:29%;
  background:var(--terracotta);
  color:#fff1a6;
}

.photography{
  width:clamp(132px,20vw,176px);
  aspect-ratio:1;
  left:37%;
  top:46%;
  background:var(--black);
  color:#fff;
}

footer{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-top:28px;
  font-size:.82rem;
  color:var(--muted);
}

footer a{
  color:inherit;
  text-decoration:none;
}

footer a:hover,
footer a:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:620px){
  .page{
    padding:44px 22px 18px;
  }

  h1{
    font-size:clamp(4.1rem,19vw,5.8rem);
  }

  .rule{
    margin-top:38px;
    margin-bottom:34px;
  }

  .coming{
    font-size:.8rem;
    letter-spacing:.29em;
  }

  .meanwhile{
    margin-top:34px;
  }

  .circles{
    height:350px;
    margin-top:34px;
  }

  .circle{
    font-size:.88rem;
    padding:14px;
  }

  .biography{
    width:122px;
    left:0;
    top:31%;
  }

  .music{
    width:128px;
    left:22%;
    top:0;
  }

  .td{
    width:138px;
    left:46%;
    top:12%;
  }

  .contact{
    width:112px;
    right:0;
    top:38%;
  }

  .photography{
    width:124px;
    left:38%;
    top:56%;
  }

  footer{
    font-size:.72rem;
    padding-top:18px;
  }
}

@media (max-width:390px){
  .page{
    padding-inline:18px;
  }

  .circles{
    transform:scale(.92);
    transform-origin:top center;
    margin-bottom:-22px;
  }

  footer{
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
  }
}