@charset "UTF-8";
/*
 * Web Fonts from colophon-foundry.org
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased from Colophon Foundry. The fonts are protected under domestic and international trademark and copyright law. You are prohibited from modifying, reverse engineering, duplicating, or distributing this font software.
 *
 * (c) 2017 Colophon Foundry
 *
 * Licenced to Mateusz Piekarski Gunter Piekarski Ltd
 */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

svg {
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0 none;
  border-radius: 0;
  background: none;
}

/* Reset headings for custom fonts */
h1, h2, h3, h4, h5 {
  font-weight: normal;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Remove _all_ animations and transitions for people that prefer not to see them */
.button-base {
  position: relative;
  display: inline-block;
  border: 1px solid var(--black);
  border-radius: 1.5rem;
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
}
.button-base:link, .button-base:visited {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .button-base:is(button) {
    cursor: pointer;
  }
}

.button {
  position: relative;
  display: inline-block;
  border: 1px solid var(--black);
  border-radius: 1.5rem;
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
  font-size: 0.625rem;
  letter-spacing: 1.2px;
  line-height: 1rem;
  --mb: $lh;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}
.button:link, .button:visited {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .button {
    font-size: 0.75rem;
    line-height: 1.125rem;
    --mb: $lh;
  }
}
.button--alt {
  background-color: var(--black);
  color: var(--white);
}
@media only screen and (min-width: 768px) {
  .button {
    padding: 0.875rem 1.5rem 0.6875rem;
  }
}

.button-small {
  position: relative;
  display: inline-block;
  border: 1px solid var(--black);
  border-radius: 1.5rem;
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
  font-size: 0.625rem;
  letter-spacing: 1.2px;
  line-height: 1rem;
  --mb: $lh;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
.button-small:link, .button-small:visited {
  text-decoration: none;
}

.button-large {
  position: relative;
  display: inline-block;
  border: 1px solid var(--black);
  border-radius: 1.5rem;
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  --mb: $lh;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}
.button-large:link, .button-large:visited {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .button-large {
    padding: 0.875rem 1.5rem 0.6875rem;
  }
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

:root {
  --black: #000000;
  --black_rgb: 0, 0, 0;
  --white: #FFFFFF;
  --white_rgb: 255, 255, 255;
  --blue: #A9D1DF;
  --blue_rgb: 169, 209, 223;
  --lightblue: #EFF3F7;
  --lightblue_rgb: 239, 243, 247;
  --grey: #ECECEC;
  --grey_rgb: 236, 236, 236;
  --dgrey: #979797;
  --dgrey_rgb: 151, 151, 151;
  --red: #AB2A09;
  --red_rgb: 171, 42, 9;
  --offwhite: #F2F2F2;
  --offwhite_rgb: 242, 242, 242;
}

html {
  height: 100%;
}

body {
  background-color: var(--grey);
  font-size: 1rem;
  letter-spacing: 0.25px;
  line-height: 1.125rem;
  --mb: $lh;
  min-height: 100%;
  padding: 5.5rem 0 1rem;
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 1.125rem;
    line-height: 1.375rem;
    --mb: $lh;
  }
}
body.homepage {
  background-color: var(--black);
  color: var(--white);
  padding: 8rem 0 1rem;
}

.colour {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--ic);
  border: 1px solid var(--grey);
  border-radius: 50%;
}

.modules {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 3rem;
  padding-bottom: 3rem;
}
@media only screen and (min-width: 768px) {
  .modules {
    row-gap: 6rem;
    padding-bottom: 6rem;
  }
}
.modules + .modules {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .modules + .modules {
    margin-top: 6rem;
  }
}

.ratio-box {
  padding-bottom: var(--pad);
  position: relative;
}
.ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:link,
:visited {
  color: currentColor;
  text-decoration: none;
}

.homepage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: calc(100 * var(--vh));
  background-color: var(--blue);
}
.homepage:before {
  content: "";
  display: block;
}

.home {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(32, 1fr);
  grid-auto-rows: min-content;
  column-gap: 0.3125rem;
  width: 100%;
}
.home.active li {
  opacity: 1;
  transform: translateY(0);
}
.home li {
  grid-column: 6/span 22;
  text-transform: uppercase;
  font-size: 1.125rem;
  letter-spacing: 0.25px;
  line-height: 1.25rem;
  --mb: $lh;
  padding: 1.5rem 0 1.2rem;
  border-bottom: 1px solid var(--grey);
  display: grid;
  grid-template-columns: repeat(22, 1fr);
  column-gap: 0.3125rem;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 1s ease var(--delay);
}
@media only screen and (min-width: 768px) {
  .home li {
    font-size: 1.5625rem;
    letter-spacing: 2px;
  }
}
.home__text-link {
  grid-column: 6/span 17;
}
.home__text-link span {
  display: block;
}
.home__text-link span:first-child {
  margin-bottom: 0.625rem;
}
.home__text-link span:last-child {
  font-size: 0.875rem;
  letter-spacing: 0.2px;
  line-height: 1.25rem;
  --mb: $lh;
  text-transform: none;
}
@media only screen and (min-width: 768px) {
  .home__text-link span:last-child {
    font-size: 1rem;
  }
}
.home__icon-link {
  grid-column: span 3;
  display: flex;
  justify-content: center;
  color: var(--ic, inherit);
}
.home__icon-link path {
  fill: var(--ic, currentColor);
}

.winelist {
  padding: 0 1.25rem 1.5rem;
  background-color: inherit;
}
.winelist header.h1 {
  border-top: 1px solid var(--dgrey);
  border-bottom: 1px solid var(--dgrey);
  background-color: inherit;
  position: sticky;
  top: 5.5rem;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 1rem;
  align-items: center;
}
.winelist header.h1 > a {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 1.375rem;
  --mb: $lh;
  margin-left: 1rem;
}
.winelist h1 {
  text-transform: uppercase;
  font-size: 1.125rem;
  letter-spacing: 0.25px;
  line-height: 1.25rem;
  --mb: $lh;
  padding: 0.625rem 1rem;
  grid-column: 2/span 6;
  justify-self: center;
  width: 100%;
  text-align: center;
  border-left: 1px solid var(--dgrey);
}
@media only screen and (min-width: 768px) {
  .winelist h1 {
    font-size: 1.5625rem;
    letter-spacing: 2px;
  }
}
.winelist h1 svg, .winelist h1 span {
  display: inline-block;
  margin-right: 1rem;
}
.winelist nav {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 1.375rem;
  --mb: $lh;
  border-top: 1px solid var(--dgrey);
  padding: 0.75rem 0 0.625rem;
  color: #A6A6A6;
  grid-column: span 8;
  grid-row: 2;
}
.winelist nav :link, .winelist nav :visited {
  color: #A6A6A6;
  transition: color 0.3s ease;
}
.winelist nav :link.active, .winelist nav :visited.active {
  color: var(--black);
}
.winelist__location {
  opacity: 0;
  transition: opacity 1s ease;
}
.winelist__location.active {
  opacity: 1;
}
.winelist__location header.h2 {
  padding: 2.5rem 0 1.25rem;
  border-bottom: 1px solid #D8D8D8;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 1rem;
  row-gap: 1.25rem;
}
.winelist__location header.h2 p {
  font-size: 0.875rem;
  letter-spacing: 0.2px;
  line-height: 1.25rem;
  --mb: $lh;
  grid-row: 2;
  grid-column: span 7;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .winelist__location header.h2 p {
    font-size: 1rem;
  }
}
.winelist__location header.h2 .vol {
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.25px;
  line-height: 0.875rem;
  --mb: $lh;
  text-transform: none;
  grid-column: 7/span 2;
  justify-self: end;
  display: flex;
  justify-content: end;
  width: 100%;
}
.winelist__location header.h2 .vol span {
  width: 50%;
  text-align: right;
}
.winelist__location h2 {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
  --mb: $lh;
  grid-column: 1/span 6;
}
@media only screen and (min-width: 768px) {
  .winelist__location h2 {
    font-size: 1.25rem;
  }
}
.winelist__variety {
  margin-bottom: 2.5rem;
}
.winelist__variety header.h3 p {
  font-size: 0.875rem;
  letter-spacing: 0.2px;
  line-height: 1.25rem;
  --mb: $lh;
  margin-bottom: 1.25rem;
}
@media only screen and (min-width: 768px) {
  .winelist__variety header.h3 p {
    font-size: 1rem;
  }
}
.winelist__variety h3 {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
  --mb: $lh;
  margin-bottom: 1.25rem;
}
@media only screen and (min-width: 768px) {
  .winelist__variety h3 {
    font-size: 1.25rem;
  }
}
.winelist__wine {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  align-items: baseline;
}
.winelist__wine .d {
  font-size: 1rem;
  letter-spacing: 0.22px;
  line-height: 1.375rem;
  --mb: $lh;
  grid-column: 1/span 5;
}
.winelist__wine .dt {
  grid-column: span 7;
}
.winelist__description {
  font-size: 0.875rem;
  letter-spacing: 0.2px;
  line-height: 1.25rem;
  --mb: $lh;
  grid-column: span 7;
  margin: 0.5rem 0 2.5rem;
}
@media only screen and (min-width: 768px) {
  .winelist__description {
    font-size: 1rem;
  }
}
.winelist__price {
  font-size: 0.875rem;
  letter-spacing: 0.25px;
  line-height: 0.875rem;
  --mb: $lh;
  grid-column: 7/span 2;
  justify-self: end;
  width: 100%;
  display: flex;
  justify-content: end;
}
.winelist__price span {
  display: block;
  width: 50%;
  text-align: right;
}
.winelist__dp {
  font-size: 0.875rem;
  letter-spacing: 0.25px;
  line-height: 0.875rem;
  --mb: $lh;
  justify-self: end;
}
.winelist__flight p:first-child {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
  --mb: $lh;
}
@media only screen and (min-width: 768px) {
  .winelist__flight p:first-child {
    font-size: 1.25rem;
  }
}
.winelist__flightwine {
  font-size: 0.875rem;
  letter-spacing: 0.2px;
  line-height: 1.25rem;
  --mb: $lh;
  display: grid;
  grid-template-columns: 2fr 5fr 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .winelist__flightwine {
    font-size: 1rem;
  }
}
.winelist__flightwine p:nth-child(3n) {
  justify-self: end;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  min-height: 3.75rem;
  padding: 1.75rem 1.125rem;
  background-color: inherit;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 1rem;
  z-index: 99;
}
.homepage .header {
  background-color: transparent;
}
.header a {
  grid-column: 1/span 6;
  justify-self: start;
}
.homepage .header a {
  grid-column: 2/span 6;
  justify-self: center;
}
.header button {
  grid-column: 8;
  justify-self: end;
  align-self: start;
  color: inherit;
}

.footer {
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.25px;
  line-height: 0.875rem;
  --mb: $lh;
  width: 100%;
  padding: 1.125rem 1.125rem 0;
  display: flex;
  justify-content: space-around;
  z-index: 99;
  text-transform: uppercase;
}

.modal {
  position: absolute;
  z-index: 99;
}
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--offwhite);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__close {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  background: transparent;
  border: 0;
  z-index: 99;
}
.modal__close:before {
  content: "✕";
}
.modal__container {
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  color: var(--black);
}
.modal__content {
  width: 100%;
  padding: 5rem 0;
}
.modal__content input {
  position: sticky;
  top: 0;
  background-color: var(--offwhite);
  color: var(--black);
  width: 100%;
  padding: 0.5rem 1.25rem;
}
.modal__content input:focus, .modal__content input:not(:focus) {
  outline: none;
  border-bottom: 1px solid var(--grey);
}
.modal__content input ::placeholder {
  color: var(--gray);
}
.modal__results {
  padding: 1.125rem;
}

.searching {
  display: none;
}
.loading .searching {
  display: block;
}

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.slide {
  display: none;
}
.slide.is-open {
  display: block;
}
.slide[aria-hidden=false] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.slide[aria-hidden=false] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.slide[aria-hidden=true] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.slide[aria-hidden=true] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.slide .modal__container,
.slide .modal__overlay {
  will-change: transform;
}