/* ====== FONT SETUP ====== */
@font-face {
  font-family: 'Hardanger';
  src: url('../fonts/Hardanger-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hardanger';
  src: url('../fonts/Hardanger-Italic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Hardanger';
  src: url('../fonts/Hardanger-Regularbroderie.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Wingman';
  src: url('../fonts/TAYWingman.woff') format('woff'),
       url('../fonts/TAYWingman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rosemary';
  src: url('../fonts/TAYRosemary.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ===== HEADER VARIABLES ===== */

:root{
  --header-h:100px;
  --header-offset:32px;
}


/* ===== GLOBAL BASE ===== */

body{
  margin:0;
  padding:0;
  font-family:'Wingman', sans-serif;
  color:#000;
  overflow-x:hidden;
  position:relative;
}


/* ===== ABOUT PAGE WRAP ===== */

body.about-page .about-wrap{
  max-width:900px;
  margin:0 auto;
  padding:calc(var(--header-h) + var(--header-offset)) 5% 80px;
}


/* ===== PEOPLE LINKS ===== */

.people a{
  color:#000;
  text-decoration:underline;
}

.people a:hover{
  color:#ea816c;
}


/* ===== HEADER ===== */

.site-header{
  background-color:#fff;
  border-bottom:1px solid #e9e9e9;
  width:100%;
  height:var(--header-h);
  padding:0 2rem;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  position:fixed;
  top:0;
  left:0;
  z-index:1001;
}

.header-link{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}

.header-logo{
  display:block;
  height:56px;
  width:auto;
}

.header-title{
  display:none;
}


/* ===== NAV ===== */

.site-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:2.25rem;
}

.nav-link{
  font-family:'Rosemary', sans-serif;
  font-size:1rem;
  color:#000;
  text-decoration:none;
  line-height:1;
}

.nav-link:hover{
  text-decoration:underline;
}

.site-header a,
.site-header a:visited{
  color:#000;
}

.site-header a:hover{
  color:#000;
}


/* ===== MOBILE NAV BUTTON ===== */

.nav-toggle{
  display:none;
  margin-left:auto;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}

.burger,
.burger::before,
.burger::after{
  display:block;
  width:24px;
  height:2px;
  background:#000;
  position:relative;
  content:'';
}

.burger::before{
  position:absolute;
  top:-7px;
  left:0;
}

.burger::after{
  position:absolute;
  top:7px;
  left:0;
}


/* ===== MOBILE ===== */

@media (max-width:768px){

:root{
  --header-h:48px;
  --header-offset:24px;
}

.site-header{
  padding:0 1rem;
}

.header-logo{
  height:30px;
}

.nav-toggle{
  display:block;
}

.site-nav{
  display:none;
  position:absolute;
  top:var(--header-h);
  left:0;
  right:0;
  background:#fff;
  border-bottom:1px solid #e9e9e9;
  padding:1rem;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
}

.site-nav.is-open{
  display:flex;
}

.nav-link{
  font-size:1rem;
}

}


/* ===== FLOATING LINKS ===== */

.insta-link,
.home-link{
  position:fixed;
  bottom:1rem;
  right:1rem;
  font-family:'Hardanger', sans-serif;
  font-size:0.9rem;
  color:#000;
  text-decoration:none;
  background:rgba(255,255,255,0.7);
  padding:0.3rem 0.5rem;
  border-radius:5px;
  z-index:10;
}

.insta-link:hover,
.home-link:hover{
  text-decoration:underline;
}


/* ===== GENERAL LINKS ===== */

a{
  color:#d77c82;
  text-decoration:underline;
}

a:hover{
  color:#d77c82;
  text-decoration:underline;
}