@font-face{
  font-family: 'bourbon';
  src: url('fonts/BourbonGrotesque-Expert.eot');
  src: url('fonts/BourbonGrotesque-Expert.eot?#iefix') format('embedded-opentype'),
    url('fonts/BourbonGrotesque-Expert.woff2') format('woff2'),
    url('fonts/BourbonGrotesque-Expert.woff') format('woff'),
    url('fonts/BourbonGrotesque-Expert.ttf') format('truetype'),
    url('fonts/BourbonGrotesque-Expert.svg#BourbonGrotesque-Expert') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'brazos';
  src: url('fonts/BrazosWBW.eot');
  src: url('fonts/BrazosWBW.eot?#iefix') format('embedded-opentype'),
    url('fonts/BrazosWBW.woff2') format('woff2'),
    url('fonts/BrazosWBW.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* tiny css reset */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6,article,aside,details,figcaption,footer,header,hgroup,menu,nav,section{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}embed,iframe,object,video{height:auto;max-width:100%}audio{max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}img{display:block;max-width:100%;height:auto}

/* variables */
:root{
  --black:#23221f;
  --navy:#172c49;
  --royal:#315c99;
  --bourbon:bourbon, brandon-grotesque, sans-serif;
  --garamond:garamond-atf-text,serif;
}

/* css fade in */
.fade-in{
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-name: fadeInOpacity;
  animation-timing-function: cubic-bezier(0,0,0.58,1);
  opacity: 1;
}
@keyframes fadeInOpacity{ 0% {opacity:0;} 100% {opacity:1;} }

/* skip */
.skip-link{
  position: absolute;
   left: -999px;
   top: auto;
  overflow: hidden;
  width: 1px;
   height: 1px;
  z-index: 100;
}
.skip-link:focus{
  padding: 1.3rem 1.8rem;
  text-decoration: none;
  top: 16px;
   left: 16px;
  width: auto;
   height: auto;
}

a,a:hover,a:focus{text-decoration:none;transition:all 0.3s ease-in-out}
a{color:inherit}
img{margin:0 auto}

::selection{background:rgba(19, 75, 158, .5)}
::-moz-selection{background:rgba(19, 75, 158, .5)}
::-webkit-selection{background:rgba(19, 75, 158, .5)}

/* layout */
html{
  height: 100%;
  margin: 0;
  text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
#wrapper{
  display: flex;
  flex-direction: row;
  min-height: 100vh; /* ensures container is at least full viewport height */
}
aside{
  align-self: flex-start; /* ensures sticky works properly */
  background-color: var(--royal);
  color: #FFF;
  min-height: 100vh; /* ensures sidebar itself is at least full viewport height */
  overflow-y: auto; /* if content is taller than viewport */
  position: sticky;
  text-align: center;
  top: 0;
  width: 640px;
}
.img_grid{
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
}
.img_gird img{min-width:100%}
.grid_item.wide{grid-column:1 / 3}
.main-content{
  flex: 1;
  text-align: center;
}

/* spacing */
aside{padding:80px 70px 0}
.divider{margin:60px auto 55px}
h1{margin-bottom:/*135px*/10rem}
.button.shop{margin-top:3rem}
.img_grid{margin:150px -70px 0}
.social{padding:180px 0}
.main-content section{padding:135px 120px}
.main-content section:first-of-type{padding-top:110px}
img.blueopossum{margin-bottom:72px}
.vendors{margin:135px 0}
.vendors,.map{display:flex;flex-direction:column}
.vendors{gap:30px}
.map{gap:40px}
.button{margin-top:8px}
footer{padding:56px 0}

/* typography */
/** Set html to 62.5% so that all the REM measurements throughout are based on 10px sizing. ~1.5rem = 15px **/
html{font-size:62.5%}
body{
  background: #FFF;
  color: var(--black);
  font-family: var(--garamond);
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}
p{
  font-family: var(--garamond);
  font-feature-settings: 'kern', 'liga';
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: .0075em;
  line-height: 1.7;
}
section p a{
  color: var(--royal);
  font-weight: 600;
}
section p strong{
  color: var(--navy);
  font-family: var(--bourbon);
  font-size: 2.1rem;
  letter-spacing: .1em;
}
h1,h2,h3,.h3,.social{
  font-family: 'brazos', sans-serif;
  text-transform: uppercase;
}
h1{
  font-size: 4rem;
  letter-spacing: .2em;
  line-height: 1.3;
}
h2{
  font-size: 2.6rem;
  letter-spacing: .15em;
  line-height: 1.4;
}
aside h2{color:var(--navy)}
.main-content h2{color: var(--royal)}
h3,.h3,.social ul,footer p{
  font-family: var(--bourbon);
  font-size: 2.4rem;
  letter-spacing: .1em;
}
.main-content h3,.main-content .h3{color:var(--navy)}
.hours h2 + p{margin-top:1em}
section.map{background-color:var(--navy)}
section.map,.map h2,.map h3,.map .h3,.map p{color:#FFF}
section .h3 a{color:var(--royal)}section .h3 a:hover{color:var(--navy)}
.instagram svg{display:inline;vertical-align:sub}
.instagram a svg path{fill:var(--royal);transition:all 0.3s ease-in-out}
h2.instagram a:hover{color:var(--navy)}
.instagram a:hover svg path{fill:var(--navy)}
.button{
  background-color: var(--navy);
  color: #FFF;
  display: inline-block;
  font-family: var(--bourbon);
  font-size: 1.8rem;
  letter-spacing: .15em;
  padding: 14px 28px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}
.button:hover{background-color:var(--royal)}
.button.shop:hover{background-color:#FFF;color:var(--navy)}
.map .button{background-color:#5074a8}
.map .button:hover{background-color:#FFF;color:var(--navy)}
.social{background-color:var(--royal)}
.social h2{color:var(--navy)}
.social a{color:#FFF}
.social ul{
  display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 36px;
   justify-content: center;
  font-size: 1.6rem;
  margin-top: 2em;
}
.social ul a:hover{color:var(--navy)}
footer{
  background-color: var(--navy);
  color: #FFF;;
  display: flex;
   align-content: center;
   flex-direction: row;
   justify-content: space-evenly;
}
footer p{
  align-self: center;
  font-size: 1.3rem;
  letter-spacing: .075em;
  line-height: 1.6;
}
footer p a:hover{color:var(--royal);text-decoration:none}
.opossum{display:flex;align-items:center;justify-content:center}

/* responsive */
.hide_mobile{display:block}
.hide_desktop{display:none}
@media (max-width: 1600px){
  .main-content section{padding:135px 65px}
}
/* tablet and smaller screens */
@media (max-width: 1280px){
  #wrapper{flex-direction:column}
  aside{padding:40px 50px 80px}
  .main-content section{padding:150px 50px}
  aside{
    min-height: auto; /* reset for mobile stacking */
    position: relative; /* disable sticky if undesired on mobile */
    top: auto;
    width: 100%;
  }
  h1{margin-bottom:60px}
  .img_grid{margin:0}
  .hide_mobile{display:none}
  .hide_desktop{display:block}
}
@media (max-width: 920px){
  aside{padding:40px 30px 80px}
  .main-content section{padding:150px 30px}
  h1{font-size:3rem}
  h2{font-size:1.8rem}
  h3,.h3,footer p{font-size:2rem}
  .button{font-size:1.6rem}
  .instagram svg{width:25px;vertical-align:text-bottom}
  .social ul,footer p{font-size:1.25rem}
  footer{flex-direction:column;align-items:center;row-gap:26px}
}

/* 404 error */
.e404{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
aside.error{
  padding: 80px 70px;
}