:root{
  --myblack:#252525;
}

html,
body{
  width:100%;
  min-height:100%;
  font-size:100%;
  font-family:"Playfair Display", serif;
}

body{
  overflow-x:hidden;
}

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

button{
  font:inherit;
}

/* ---------------- TOP background ---------------- */

.body-top{
  position:relative;
  min-height:120svh;
  -webkit-touch-callout:none;
  user-select:none;
  transition:opacity .4s ease;
}

.body-top::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url(../img/IMG_5966.JPG);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:1;
  transition:opacity .4s ease;
  pointer-events:none;
  z-index:0;
}

.body-top.is-leaving-latest{
  opacity:0;
}

.body-top.is-leaving-latest::before{
  opacity:0;
}

.body-single.is-entering-latest{
  opacity:0;
}

.body-single.is-entered-latest{
  opacity:1;
  transition:opacity .4s ease;
}

.body-top .main-top,
.body-top .hero-top{
  position:relative;
  z-index:1;
  min-height:100svh;
}

/* ---------------- header ---------------- */

header{
  width:95%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-top:20px;
  position:relative;
  z-index:3000;
}

.body-top header{
  position:fixed;
  top:0;
  left:2.5%;
}

/* ---------------- site title ---------------- */

.site-title a{
  font-family:"Julius Sans One", sans-serif;
  font-size:18px;
  letter-spacing:.15em;
  color:var(--myblack);
}

/* ---------------- nav ---------------- */

.nav{
  position:fixed;
  top:0;
  right:-260px;
  width:fit-content;
  min-width:130px;
  max-width:260px;
  height:100svh;
  box-sizing:border-box;
  background:rgba(255,255,255,0.4);
  backdrop-filter:blur(8px);
  transition:right .35s ease;
  z-index:2000;
  padding:50px 2.5vw 50px 18px;
  display:flex;
  flex-direction:column;
}

.nav.open{
  right:0;
}

.body-single .nav{
  background:none;
  backdrop-filter:none;
}

/* ---------------- menu button ---------------- */

#menu-btn,
#menu-single,
.nav-close{
  border:none;
  background:none;
  padding:0;
  font-size:16px;
  font-family:"Playfair Display", serif;
  letter-spacing:.1em;
  color:var(--myblack);
  z-index:3000;
}

#menu-btn,
.nav-close{
  cursor:pointer;
  transition:opacity .2s ease, visibility .2s ease;
}

.body-top #menu-btn.is-open{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.nav-close{
  position:absolute;
  top:20px;
  right:2.5vw;
  font-size:24px;
  line-height:1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.nav.open .nav-close,
.nav.is-open .nav-close{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.body-single .nav.open{
  right:0;
}

.body-single .nav.open .nav-close{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@media screen and (min-width:1000px){
  .body-single .nav{
    right:0;
  }
}

/* ---------------- menu list ---------------- */

.submenu-single{
  list-style:none;
  padding:0;
  margin-top:24px;
  text-align:right;
  max-width:100%;
}

.submenu-single li{
  margin-bottom:10px;
}

.submenu-single a{
  display:block;
  font-size:16px;
  line-height:1.35;
  letter-spacing:.05em;
  color:var(--myblack);
  overflow-wrap:anywhere;
}

.submenu-single a.is-number-title{
  font-size:20px;
  line-height:normal;
}

.submenu-single a:hover{
  color:#ffffff;
}

.nav-page-links{
  display:none;
}

@media screen and (min-width:1000px){
  .nav-page-links{
    display:flex;
    position:absolute;
    right:2.5vw;
    bottom:50px;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    font-size:18px;
    letter-spacing:.08em;
    text-align:right;
  }
}

.submenu-single a[aria-current="page"],
.body-single .submenu-single a:hover{
  color:#797979;
}

/* ---------------- TOP hero ---------------- */

.hero-top{
  min-height:100svh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 24px;
  box-sizing:border-box;
}

.title{
  font-family:"Julius Sans One",sans-serif;
  font-size:25px;
  letter-spacing:.15em;
  color:white;
  text-align:center;
  line-height:1.4;
}

/* ---------------- SINGLE page header ---------------- */

.main-title-single{
  width:95%;
  margin:0 auto;
}

.hero-single{
  padding:0 15px;
}

.title-single{
  display:inline-block;
  line-height:1.2;
}

.title-single::after{
  content:"";
  display:block;
  width:80vw;
  height:1px;
  background:#797979;
  margin-top:4px;
}

.title-single a{
  font-family:"Julius Sans One",sans-serif;
  font-size:18px;
  letter-spacing:.15em;
  color:var(--myblack);
}

/* ---------------- slider ---------------- */

.slider{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:80svh;
  padding:30px 50px;
  box-sizing:border-box;
  cursor:pointer;
}

.slider img{
  max-width:80%;
  max-height:calc(80svh - 60px);
  object-fit:contain;
  -webkit-user-drag:none;
  user-select:none;
}

.mobile-gallery{
  display:none;
}

/* ---------------- copyright ---------------- */

.copyright{
  position:fixed;
  right:20px;
  bottom:20px;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--myblack);
  opacity:.6;
}

.copy-link{
  color:var(--myblack);
}

.copy-link:hover{
  color:#1E7307;
}

.copyright-page-links{
  display:none;
}

/* ---------------- CV ---------------- */

#cv{
  color:var(--myblack);
  padding-top:2rem;
  margin:2rem 2rem 2rem 5rem;
}

#cv h1{
  font-size:1.5rem;
  font-weight:bold;
  letter-spacing:2px;
  margin-bottom:1rem;
}

.cv-name{
  display:flex;
  align-items:flex-end;
}

.cv-name h2{
  font-size:1.75rem;
}

.cv-name a{
  font-size:1rem;
  letter-spacing:.125rem;
}

.history{
  padding:30px 0;
  letter-spacing:1px;
  line-height:1.25rem;
}

.history p{
  margin:0;
}

.main-cv{
  width:95%;
  margin:0 auto;
  display:flex;
  align-items:flex-end;
}

/* ---------------- contact ---------------- */

.contact-name{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.contact-name h2{
  font-size:1.75rem;
}

.contact-name a{
  font-size:1rem;
  letter-spacing:.125rem;
}

.contact-history{
  padding-top:5rem;
  padding-bottom:1rem;
  letter-spacing:1px;
  line-height:1.25rem;
  font-size:14px;
  text-align:center;
}

.contact-email{
  letter-spacing:1px;
  line-height:1.25rem;
  padding:25px 50px;
  font-size:16px;
  text-align:center;
  border:1px solid #efefef;
}

.main-contact{
  width:40%;
  margin:0 auto;
  opacity:1;
}

@media screen and (min-width:1000px){
  .body-single{
    width:100%;
    height:100svh;
    overflow:hidden;
  }

  .admin-bar.body-single{
    position:static;
    height:calc(100svh - 32px);
  }

  .body-single main{
    box-sizing:border-box;
  }

  .slider{
    height:calc(100svh - 86px);
    min-height:0;
    padding:30px 150px 54px 50px;
  }

  .slider img{
    max-height:calc(100svh - 170px);
  }

  .main-cv{
    height:calc(100svh - 70px);
    overflow:hidden;
  }
}

@media screen and (max-width:999px){
  body.admin-bar #wpadminbar{
    position:fixed !important;
    top:0 !important;
    right:0;
    left:0;
  }

  header{
    width:calc(100% - 32px);
    padding-top:16px;
  }

  .body-top header{
    justify-content:flex-end;
  }

  .body-top #menu-btn{
    position:fixed;
    top:16px;
    right:16px;
  }

  .admin-bar.body-top header{
    top:46px;
  }

  .admin-bar.body-top #menu-btn{
    top:62px;
  }

  .body-top #menu-btn.is-open,
  .body-single #menu-single.is-open{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .nav-close{
    top:16px;
    right:16px;
  }

  .nav{
    top:0;
    left:auto;
    right:-100vw;
    width:100vw;
    min-width:100vw;
    max-width:none;
    height:100svh;
    box-sizing:border-box;
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(8px);
    padding:52px 16px 24px;
    text-align:center;
    transform:none;
    transition:right .35s ease;
  }

  .body-single .nav{
    right:-100vw;
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(8px);
  }

  .nav.open{
    right:0;
    transform:none;
  }

  .body-single .nav.open{
    right:-100vw;
    transform:none;
  }

  .body-single .nav.open .nav-close{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .body-single .nav.open.is-open{
    right:0;
    transform:none;
  }

  .body-single .nav.open.is-open .nav-close{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  #menu-btn,
  #menu-single{
    font-size:14px;
  }

  #menu-single{
    cursor:pointer;
  }

  .submenu-single{
    margin-top:18px;
    text-align:center;
    overflow-y:auto;
  }

  .submenu-single li{
    margin-bottom:12px;
  }

  .submenu-single a{
    font-size:18px;
  }

  .submenu-single a.is-number-title{
    font-size:22px;
  }

  .nav-page-links{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-top:28px;
    font-size:18px;
    letter-spacing:.08em;
  }

  .hero-top{
    min-height:100svh;
    align-items:center;
  }

  .title{
    font-size:22px;
    letter-spacing:.12em;
  }

  .main-title-single{
    width:auto;
    min-width:0;
    flex:1;
  }

  .hero-single{
    padding:0;
  }

  .title-single a{
    display:block;
    font-size:16px;
    letter-spacing:.12em;
    white-space:nowrap;
  }

  .title-single::after{
    width:calc(100vw - 124px);
  }

  .slider{
    min-height:calc(100svh - 140px);
    padding:24px 16px 96px;
    cursor:auto;
  }

  #sliderImage{
    display:none;
  }

  .mobile-gallery{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
  }

  .mobile-gallery img{
    width:100%;
    max-width:520px;
    max-height:none;
    object-fit:contain;
    -webkit-touch-callout:none;
    -webkit-user-drag:none;
    user-select:none;
  }

  .copyright{
    position:static;
    margin:0 16px 24px;
    font-size:11px;
    line-height:1.5;
    text-align:right;
  }

  .body-cv .copyright,
  .body-contact .copyright{
    display:none;
  }

  #cv{
    padding-top:2.5rem;
    margin:0 24px;
  }

  #cv h1{
    font-size:1.25rem;
  }

  .main-cv{
    width:100%;
    display:block;
  }

  .cv-name,
  .contact-name{
    display:block;
    text-align:center;
  }

  .body-contact .contact-name{
    display:none;
  }

  .cv-name h2,
  .contact-name h2{
    font-size:1.35rem;
    line-height:1.4;
  }

  .cv-name a,
  .contact-name a{
    display:block;
    margin-top:6px;
    font-size:.9rem;
    line-height:1.4;
  }

  .history{
    padding:24px 0 88px;
    font-size:14px;
    line-height:1.7;
  }

  .main-contact{
    width:auto;
    margin:0 24px 96px;
  }

  .contact-history{
    padding-top:3rem;
    font-size:13px;
    line-height:1.7;
  }

  .contact-email{
    padding:20px 16px;
    font-size:14px;
    overflow-wrap:anywhere;
  }
}

@media screen and (max-width:374px){
  .title{
    font-size:18px;
  }

  .title-single a{
    font-size:13px;
    letter-spacing:.08em;
  }

  .title-single::after{
    width:calc(100vw - 112px);
  }
}