@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Quicksand:wght@300;400;500&display=swap');

:root{
  --bg:#eee6e4;
  --red:#da3d34;
  --text:#191514;
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:"Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight:400;
}

.coming-soon{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.panel{
  order:1;
  background:var(--bg);
  padding:32px 22px 42px;
}

.panel-inner{
  width:min(100%,420px);
  margin:0 auto;
  text-align:left;
}

.logo{
  display:block;
  width:min(270px,74vw);
  height:auto;
  margin:0 auto 34px;
}

.copy{
  font-size:16px;
  line-height:1.42;
  letter-spacing:-.02em;
}

.copy p{margin:0 0 22px}
.copy .eyebrow{margin-bottom:26px}

h1{
  margin:42px 0 30px;
  color:var(--red);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(44px,13vw,62px);
  line-height:.9;
  font-weight:300;
  letter-spacing:-.055em;
}

.instagram{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  color:var(--red);
  text-decoration:none;
  font-size:20px;
  line-height:1.2;
}
.instagram small{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
}
.instagram svg{
  width:24px;
  height:24px;
  fill:currentColor;
}

/* Real masonry-style gallery for mobile/tablet */
.gallery{
  order:2;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:8px;
  gap:2px;
  padding:0 2px 2px;
}

.photo{
  margin:0;
  overflow:hidden;
  background:#ddd;
}
.photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.photo-a{grid-row:span 42}
.photo-b{grid-row:span 28}
.photo-c{grid-row:span 48}
.photo-d{grid-row:span 34}
.photo-e{grid-row:span 30}
.photo-f{grid-row:span 44}
.photo-g{grid-row:span 30}

@media (hover:hover){
  .photo:hover img{transform:scale(1.035)}
}

@media (max-width:420px){
  .gallery{grid-auto-rows:7px}
  .photo-a{grid-row:span 42}
  .photo-b{grid-row:span 27}
  .photo-c{grid-row:span 47}
  .photo-d{grid-row:span 33}
  .photo-e{grid-row:span 29}
  .photo-f{grid-row:span 43}
  .photo-g{grid-row:span 29}
}

@media (min-width:760px){
  .panel{padding:54px 40px 58px}
  .panel-inner{width:min(100%,460px)}
  .gallery{
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:9px;
    padding:0 2px 2px;
  }
  .photo-a{grid-row:span 48}
  .photo-b{grid-row:span 32}
  .photo-c{grid-row:span 52}
  .photo-d{grid-row:span 36}
  .photo-e{grid-row:span 34}
  .photo-f{grid-row:span 50}
  .photo-g{grid-row:span 34}
}

/* Desktop: custom collage matching the maketa */
@media (min-width:1100px){
  body{overflow-x:hidden}
  .coming-soon{
    min-height:100vh;
    display:grid;
    grid-template-columns:22.2vw 20.8vw 31vw 26vw;
    grid-template-rows:39.8vh 28vh 32.2vh;
    gap:2px;
    grid-template-areas:
      "a b panel f"
      "c d panel f"
      "c e panel g";
  }

  .panel{
    grid-area:panel;
    order:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4vh 5vw 6vh;
  }

  .panel-inner{
    width:min(100%,370px);
    margin:0;
  }

  .logo{
    width:min(100%,374px);
    margin-bottom:6.7vh;
  }

  .copy{
    font-size:clamp(15px,1.02vw,18px);
    line-height:1.42;
  }
  .copy p{margin-bottom:3vh}
  .copy .eyebrow{margin-bottom:3.7vh}

  h1{
    margin:4.6vh 0 5.4vh;
    font-size:clamp(48px,3.25vw,70px);
  }
  .instagram{font-size:clamp(18px,1.25vw,24px)}
  .instagram small{font-size:clamp(13px,1vw,17px)}

  .gallery{
    display:contents;
    padding:0;
  }
  .photo{margin:0;min-height:0}
  .photo img{height:100%;object-fit:cover}
  .photo-a{grid-area:a}
  .photo-b{grid-area:b}
  .photo-c{grid-area:c}
  .photo-d{grid-area:d}
  .photo-e{grid-area:e}
  .photo-f{grid-area:f}
  .photo-g{grid-area:g}
}