:root {
  --primary-text-color: #787677;
  --link-color: inherit;
  --link-color-hover: #b64d3e;
  --heading-color: #231f20;
  --highlight-color: #c89954;
  --background-color: #faf9f0;
  --trans-background-color: rgba(250, 249, 240, 0.85);
  --dark-background-color: #231f20;
  --serif: serif;
  --sans: proxima-nova, sans-serif;
  --side-padding: 24px;
  --letter-spacing: 0.15em;
  --line-height-narrow: 1.2;
  --line-height-wide: 1.8;
  --column-gap: 2rem;
  --small-text: 0.86rem;
  --text-max-width: 55rem;
  --image-max-width: 69rem;
  --slideshow-arrow-allowance: 2.5rem;
  --slideshow-max-width: calc(var(--image-max-width) + var(--slideshow-arrow-allowance) + var(--slideshow-arrow-allowance));
  --speed: 0.5s;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.ir, .mobile-header .toggle-mobile-menu {
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  background-color: var(--background-color);
  margin: 0;
  padding-bottom: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

#site-header {
  padding: var(--side-padding) var(--side-padding) 0;
}

#site-content {
  padding: 4rem var(--side-padding) 0;
}

#site-footer .wrapper {
  padding: var(--side-padding);
}

html {
  font-size: 14px;
  line-height: var(--line-height-wide);
  color: var(--primary-text-color);
  font-family: var(--sans);
}

a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-color-hover);
}

p, ul, ol, blockquote {
  margin: 0 0 1em;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: var(--sans);
  line-height: var(--line-height-narrow);
  margin: 0 0 2em;
}

h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
}

p {
  margin: 0 0 2em;
}

blockquote {
  font-size: 1.5rem;
  text-align: center;
  font-family: var(--serif);
  font-weight: 300;
  line-height: var(--line-height-narrow);
  margin: 0 0 4rem;
}
blockquote footer {
  font-size: 1rem;
  font-family: var(--sans);
  font-weight: normal;
  margin-top: 1.25em;
}
@media (min-width: 850px) {
  blockquote {
    font-size: 2.75rem;
  }
}

@media (min-width: 850px) {
  .desktop-break {
    display: block;
  }
}

@media (min-width: 850px) {
  .two-col {
    display: flex;
    margin: 0 calc(var(--column-gap) * -0.5);
    text-align: justify;
  }
  .two-col > div {
    padding: 0 calc(var(--column-gap) * 0.5);
    flex: 1;
  }
}

.narrow-col {
  max-width: 26em;
  text-align: justify;
  margin: 0 auto;
}

#site-header {
  text-transform: uppercase;
  font-size: var(--small-text);
  line-height: 1;
  letter-spacing: var(--letter-spacing);
}
#site-header ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
#site-header li {
  margin: 0;
}
#site-header li + li {
  margin-left: 2em;
}
#site-header a {
  text-decoration: none;
  color: var(--heading-color);
}
#site-header a:hover, #site-header a.active {
  color: var(--link-color);
}
#site-header img {
  margin-bottom: 2.75%;
}
@media (max-width: 849px) {
  #site-header nav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 100dvh;
    justify-content: center;
    align-items: center;
    background: var(--trans-background-color);
  }
  #site-header ul {
    flex-direction: column;
  }
  #site-header ul li {
    margin: 1em 0;
  }
  #site-header img {
    display: none;
  }
}

.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(var(--side-padding) * 0.75) var(--side-padding);
  background: var(--trans-background-color);
}
.mobile-header a {
  display: block;
}
.mobile-header .toggle-mobile-menu {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background: url(/img/mobile-menu-open.svg) no-repeat center;
  background-size: cover;
  position: relative;
}

@media (max-width: 849px) {
  body.mobile-menu-open {
    overflow: hidden;
  }
  body.mobile-menu-open #site-header nav {
    display: flex;
  }
}
body.mobile-menu-open .toggle-mobile-menu {
  background-image: url(/img/mobile-menu-close.svg);
}

#site-footer {
  position: relative;
  line-height: var(--line-height-narrow);
  text-align: center;
  font-size: var(--small-text);
}
#site-footer ul {
  margin: 5rem 0 1.5rem;
  padding: 0;
  list-style: none;
}
#site-footer li {
  margin: 0.5em 0;
}
#site-footer p {
  text-transform: uppercase;
  max-width: var(--text-max-width);
  margin: 0 auto 1.25em;
}
#site-footer a {
  font-weight: bold;
}
#site-footer img {
  width: 100%;
  min-height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}
#site-footer .leaf {
  width: 1.86rem;
  height: 1.86rem;
}
#site-footer .leaf path {
  fill: var(--primary-text-color);
}
#site-footer.with-image {
  background: var(--dark-background-color);
  color: #fff;
}
#site-footer.with-image .wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
#site-footer.with-image .leaf path {
  fill: #fff;
}
@media (min-width: 850px) {
  #site-footer ul {
    display: flex;
    justify-content: center;
  }
  #site-footer li {
    margin: 0;
  }
  #site-footer li + li {
    margin-left: 2em;
  }
}

.panel {
  margin: 2rem auto 8rem;
}
@media (min-width: 850px) {
  .panel {
    margin-bottom: 14rem;
  }
}

.panel-slideshow,
.panel-double-slideshow {
  line-height: var(--line-height-narrow);
}
.panel-slideshow .leaf-icon,
.panel-double-slideshow .leaf-icon {
  margin: -2rem auto 2rem;
  width: 26px;
}
@media (max-width: 849px) {
  .panel-slideshow header,
  .panel-double-slideshow header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 65vh;
  }
}
.panel-slideshow h2, .panel-slideshow p,
.panel-double-slideshow h2,
.panel-double-slideshow p {
  max-width: var(--text-max-width);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.panel-slideshow .slideshow,
.panel-double-slideshow .slideshow {
  max-width: var(--slideshow-max-width);
  margin: 0 auto;
  position: relative;
}
@media (max-width: 849px) {
  .panel-slideshow .slideshow,
  .panel-double-slideshow .slideshow {
    margin-left: calc(var(--side-padding) * -1);
    margin-right: calc(var(--side-padding) * -1);
  }
}
.panel-slideshow .slides,
.panel-double-slideshow .slides {
  position: relative;
}
.panel-slideshow .slide:not(.active),
.panel-double-slideshow .slide:not(.active) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity var(--speed);
}
.panel-slideshow img,
.panel-double-slideshow img {
  width: 100%;
}
.panel-slideshow .previous, .panel-slideshow .next,
.panel-double-slideshow .previous,
.panel-double-slideshow .next {
  position: absolute;
  top: 50%;
  margin-top: -23.5px;
  cursor: pointer;
}
.panel-slideshow .previous svg, .panel-slideshow .next svg,
.panel-double-slideshow .previous svg,
.panel-double-slideshow .next svg {
  height: 47px;
  width: 15px;
}
.panel-slideshow .previous svg path, .panel-slideshow .next svg path,
.panel-double-slideshow .previous svg path,
.panel-double-slideshow .next svg path {
  fill: #fff;
}
.panel-slideshow .previous,
.panel-double-slideshow .previous {
  left: 1em;
  transform: rotate(180deg);
}
.panel-slideshow .next,
.panel-double-slideshow .next {
  right: 1em;
}
.panel-slideshow .caption,
.panel-double-slideshow .caption {
  max-width: var(--image-max-width);
  margin: 1.5em auto 0;
  font-size: var(--small-text);
  font-style: italic;
  text-align: center;
}
@media (min-width: 850px) {
  .panel-slideshow .slideshow,
  .panel-double-slideshow .slideshow {
    padding: 0 var(--slideshow-arrow-allowance);
  }
  .panel-slideshow .previous svg path, .panel-slideshow .next svg path,
  .panel-double-slideshow .previous svg path,
  .panel-double-slideshow .next svg path {
    fill: var(--primary-text-color);
  }
  .panel-slideshow .previous:hover svg path, .panel-slideshow .next:hover svg path,
  .panel-double-slideshow .previous:hover svg path,
  .panel-double-slideshow .next:hover svg path {
    fill: var(--heading-color);
  }
  .panel-slideshow .previous,
  .panel-double-slideshow .previous {
    left: 0;
  }
  .panel-slideshow .next,
  .panel-double-slideshow .next {
    right: 0;
  }
}

.panel-double-slideshow .slideshow {
  max-width: calc(var(--slideshow-max-width) * 1.5);
}
.panel-double-slideshow .slide {
  display: flex;
}
.panel-double-slideshow .slide > :first-child {
  padding-right: calc(var(--column-gap) / 2);
}
.panel-double-slideshow .slide > :last-child {
  padding-left: calc(var(--column-gap) / 2);
}
@media (max-width: 849px) {
  .panel-double-slideshow .slide {
    flex-direction: column;
  }
  .panel-double-slideshow .slide > :first-child {
    padding-right: 0;
    padding-bottom: 1rem;
  }
  .panel-double-slideshow .slide > :last-child {
    padding-left: 0;
  }
}

.panel-text,
.panel-wine {
  max-width: var(--text-max-width);
}

.panel-wine h2 {
  text-align: center;
  margin-bottom: 6rem;
}
.panel-wine .notes {
  border: 2px solid var(--highlight-color);
  position: relative;
  text-align: center;
  margin-top: 4rem;
}
.panel-wine .notes h3 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--background-color);
  color: var(--highlight-color);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.5em;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
}
.panel-wine ul {
  margin: 0;
  padding: 1.5rem 1rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.panel-wine li {
  flex: 0 0 20%;
}
.panel-wine a {
  color: inherit;
  text-decoration: none;
}
.panel-wine a:hover {
  color: var(--link-color-hover);
}
.panel-wine img {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}
@media (max-width: 849px) {
  .panel-wine h2 {
    margin-bottom: 3rem;
  }
  .panel-wine img {
    margin-bottom: 2rem;
  }
  .panel-wine .notes {
    margin-top: 2rem;
  }
}

.fade-in {
  opacity: 0;
  transition: opacity 1s;
}
.fade-in.faded-in {
  opacity: 1;
}

.home-page {
  min-height: 100%;
  background: url("/img/home-background.jpg") var(--background-color) no-repeat center;
  background-size: cover;
}
.home-page #site-footer {
  display: none;
}
.home-page .mobile-header {
  background: none;
}

.contact-page .panel-text {
  text-align: center;
}

@media (min-width: 850px) {
  .small-only, .mobile-header {
    display: none;
  }
}

@media (max-width: 849px) {
  .large-only {
    display: none;
  }
}