@charset "UTF-8";
/* CSS Document */

:root{
  --bg:#efede5;
  --text:#0f191e;
  --hover:#7a2323;

  --font-brand:"Cormorant Garamond", serif;
  --font-body:"Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  --ease:cubic-bezier(.2,.8,.2,1);

  --frame-w:1200px;
  --frame-h:640px;

  --pad-x:44px;
  --pad-top:28px;

  --overlay:rgba(15,25,30,.10);
  --panel:rgba(239,237,229,.38);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.frame{
  position:relative;
  width:min(var(--frame-w), calc(100vw - 48px));
  height:min(var(--frame-h), calc(100vh - 48px));
  background:var(--bg);
  overflow:hidden;
}

.header{
  position:relative;
  z-index:5;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:var(--pad-top) var(--pad-x) 0 var(--pad-x);
  gap:24px;
}

.brand{
  max-width:70%;
}

.brand__title{
  margin:0;
  font-family:var(--font-brand);
  font-weight:300;
  font-size:40px;
  line-height:1.05;
  letter-spacing:.2px;
}

.brand__subtitle{
  margin:10px 0 0 0;
  font-weight:300;
  font-size:14px;
  line-height:1.35;
  letter-spacing:.2px;
  padding-left:18px;
}

.menu-dock{
  position:absolute;
  top:var(--pad-top);
  right:var(--pad-x);
  z-index:20;
}

.menu-trigger{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  line-height:0;
}

.menu-trigger__pixel{
  display:block;
  width:14px;
  height:14px;
  background:var(--text);
  transition:background .2s var(--ease), transform .35s var(--ease);
}

.menu-dock:hover .menu-trigger__pixel{
  background:var(--hover);
  transform:rotate(-6deg);
}

.menu-panel{
  position:absolute;
  top:52px;
  right:0;
  width:320px;
  padding:56px 44px;
  background:var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform:translateX(115%);
  transition:transform .45s var(--ease);
  pointer-events:none;
}

.menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:22px;
  align-items:flex-end;
}

.menu-link{
  text-decoration:none;
  color:var(--text);
  font-weight:300;
  font-size:15px;
  letter-spacing:2px;
  transition:color .2s var(--ease);
}

.menu-link:hover,
.menu-link:focus-visible{
  color:var(--hover);
  outline:none;
}

.overlay{
  position:absolute;
  inset:0;
  z-index:10;
  background:var(--overlay);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease);
}

.hero{
  position:absolute;
  left:0;
  right:0;
  bottom:44px;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}

.hero__img{
  display:block;
  width:851px;
  height:523px;
  max-width:851px;
  max-height:523px;
  transform:scale(1);
  filter:blur(0);
  transition:transform .45s var(--ease), filter .45s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .menu-dock:hover .menu-panel{
    transform:translateX(0);
    pointer-events:auto;
  }
  .menu-dock:hover ~ .overlay{
    opacity:1;
    pointer-events:auto;
  }
  .menu-dock:hover ~ .hero .hero__img{
    transform:scale(1.02);
    filter:blur(3px);
  }
}

.frame.menu-open .menu-panel{
  transform:translateX(0);
  pointer-events:auto;
}
.frame.menu-open .overlay{
  opacity:1;
  pointer-events:auto;
}
.frame.menu-open .hero__img{
  transform:scale(1.02);
  filter:blur(3px);
}

@media (max-width: 992px){
  :root{
    --pad-x:28px;
    --pad-top:24px;
  }
  .brand__title{ font-size:38px; }
  .brand__subtitle{ font-size:13.5px; padding-left:16px; }
  .menu-panel{ width:300px; padding:52px 38px; top:48px; }
  .hero{ bottom:32px; }
  .hero__img{
    width:min(851px, calc(100% - 2*var(--pad-x)));
    height:auto;
    max-height:523px;
  }
}

@media (max-width: 768px){
  body{
    align-items:flex-start;
    padding-top:22px;
  }
  .header{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .menu-dock{
    position:relative;
    top:auto;
    right:auto;
  }
  .menu-trigger__pixel{
    width:30px;
    height:20px;
    background:transparent;
    position:relative;
    transform:none;
  }
  .menu-trigger__pixel::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:3px;
    background:var(--text);
    box-shadow:0 8px 0 var(--text), 0 16px 0 var(--text);
    transition:background .2s var(--ease), box-shadow .2s var(--ease), transform .35s var(--ease);
  }
  .menu-dock:hover .menu-trigger__pixel::before{
    background:var(--hover);
    box-shadow:0 8px 0 var(--hover), 0 16px 0 var(--hover);
    transform:rotate(-2deg);
  }
  .menu-panel{
    position:absolute;
    top:44px;
    right:0;
    width:min(360px, 82vw);
    padding:44px 30px;
    transform:translateX(110%);
  }
  .hero{
    bottom:0;
    left:0;
    right:0;
    justify-content:center;
  }
  .hero__img{
    width:min(851px, 100%);
    height:auto;
  }
}