/*
	Legacy support
	Only browsers with >0.1% market share are noted (IE11 is also not noted)

	Newer features with fallback mechanisms implemented (and browsers with no support):
		-webkit-text-stroke is supported by all browsers (except IE11), but specifically with the -webkit- vendor prefix even for non-webkit browsers
			the workaround works quite well, potentially for accessibility reasons, so is kept around for now
		mask-image is supported by all browsers (except IE11)
			the workaround is kept around until maintenance becomes necessary

	Deprecated features still being used, alongside newer mechanisms:
		@media max-device-width, max-device-height
*/
/* Set to true for debugging */
/* Colours */
/* Has to be the same as $nav-color unless the greynav-menu margin quirk is fixed */
/* Colours for touch devices */
/* $nav-offset + $border-width */
/* $static-width - $menu-box-width */
/*
	Media queries for touchscreens

	Improve visibility on suspicion of touchscreen

	Here, old means before and up to Dec 2015

	Most newer desktops and laptops and almost all newer phones and tablets should support any-hover
	Older phones should have small screen, most likely small enough to fit device-width and width
	Older tablets have larger screen, and need to be included
	Older desktops and laptops need to be avoided
	Hence, critical dimensions should cater to old devices, but err in favour of phones
	But also avoid half-width of larger desktop dimensions

	>50% tablets are iPad Mini: 768x1024 (should support any-hover)
	Followed by 800x1280 or 1280x800, and by 600x1024 or 1024x600
	There is also a 601x962
	Consider all below 802x602 to be tablets - includes most tablets except the largest ones (e.g. 1280x800) in landscape
	Old 800x600 desktop/laptops are compromised

	For old desktops and laptops, 1366x768, 1024x768, 1280x800, 1280x1024, following ones increase in size
	For newer desktops and laptops, 1366x768, 1920x1080, 1440x900, 1600x900, then as older laptops
	Take 1280 as the smallest width that can meaningfully be halved
	Take 1024 as the smallest height that can meaningfully be halved
	For horizontal devices, consider all below 602x482 to be tablets - includes most tablets except large ones
	For vertical devices, consider all below 602x802 to be tablets - includes most tablets
	Old desktops/laptops are compromised in halved screen modes
	Old desktops/laptops with vertical displays are compromised

	(min-aspect-ratio: 1/1) and (max-width: 602px), (min-aspect-ratio: 1/1) and (max-height: 482px),
	(max-aspect-ratio: 1/1) and (max-width: 602px), (max-aspect-ratio: 1/1) and (max-height: 802px)
	equiv
	(max-width: 602px),
	(min-aspect-ratio: 1/1) and (max-height: 482px),
	(max-aspect-ratio: 1/1) and (max-height: 802px)
*/
/*
	Remove hover effects on confirmation of no hover support
	This is necessary because hover state can be sticky in mobile browers after a touch interaction, which causes the element to stay stuck in its onhover state

	Focus-within effects are still enabled
	Reiterate focus-within effects for menu icon, so that it does not get overriden by the following when it is stuck in the onhover state
*/
/*
	Media queries and feature queries for different screen sizes
*/
/* Vertical viewport */
/* Small tablet-sized viewport */
/* This breakpoint occurs when Gargoyle's var(--g-main-margin-h) == 0.0833333vw impinges on the greynav menu */
/* Greynav menu width is $nav-icon-size + $min-width - $nav-offset == 2.2rem + 0.5rem - 6px */
/* Add another 0.5rem * 2 for additional padding, e.g. from Gargoyles's <pre><code>, or to account for scroll bars */
/* Solve for 0.0833333 * w == (2.2 + 0.5 * 2 + 0.5) * 20 - 6; w == 816 */
/* Phone-sized viewport */
/*
	Feature queries
*/
/*
	Main side bar
*/
body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 0; /* IE 11 requires this for some reason, or else the top section gets masked off from mouse events */
}

#greynav {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

#greynav-box {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 25vw;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ece0e0;
  transition: width 500ms ease;
}
@supports (-webkit-text-stroke-color: #520000) {
  #greynav-box {
    background-color: #ece0e0;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  #greynav-box {
    background-color: #e0d8d8;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    #greynav-box {
      background-color: #ece0e0;
    }
  }
}
@media (max-aspect-ratio: 1/1) {
  #greynav-box {
    width: 16.6667vw;
  }
}
@media (max-width: 816px) {
  #greynav-box {
    width: 12.5vw;
  }
}
@media (max-width: 482px) {
  #greynav-box {
    width: 4.16667vw;
  }
}

:root {
  --g-main-margin-h: 8.33333vw;
  --g-main-width: calc(100vw - 2 * var(--g-main-margin-h));
  --g-figure-wide-max-width: var(--g-main-width);
}

/*
	Main content mask
*/
main {
  transition: opacity 200ms ease;
}

.greynav-mainmask {
  opacity: 0.04;
  user-select: none;
  pointer-events: none;
}

/*
	Navigation menu items
*/
.greynav-label {
  visibility: visible;
  position: relative;
  z-index: -1;
  white-space: nowrap;
  transition: margin 500ms ease;
  margin: 0;
  margin-left: calc(25vw - 6px);
  padding: 0;
  user-select: none;
}
@media (max-aspect-ratio: 1/1) {
  .greynav-label {
    margin-left: calc(16.6667vw - 6px);
  }
}
@media (max-width: 816px) {
  .greynav-label {
    margin-left: calc(12.5vw - 6px);
  }
}
@media (max-width: 482px) {
  .greynav-label {
    margin-left: calc(4.16667vw - 6px);
  }
}

.greynav-short {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 1.5rem;
  transition: margin 500ms ease;
  margin: 0;
  margin-left: calc(25vw - 6px);
  padding: 0;
  user-select: none;
}
@media (max-aspect-ratio: 1/1) {
  .greynav-short {
    margin-left: calc(16.6667vw - 6px);
  }
}
@media (max-width: 816px) {
  .greynav-short {
    margin-left: calc(12.5vw - 6px);
  }
}
@media (max-width: 482px) {
  .greynav-short {
    margin-left: calc(4.16667vw - 6px);
  }
}

.greynav-a {
  color: #ece0e0;
  text-decoration: none;
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-a {
    color: #ece0e0;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-a {
    color: #e0d8d8;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-a {
      color: #ece0e0;
      -webkit-text-stroke-width: thin;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #cac0c0;
    }
  }
}

.greynav-a:hover {
  text-decoration: none;
}
.greynav-a:focus {
  text-decoration: none;
}
.greynav-a:visited {
  color: #ece0e0;
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-a:visited {
    color: #ece0e0;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-a:visited {
    color: #e0d8d8;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-a:visited {
      color: #ece0e0;
    }
  }
}

.greynav-mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 7px;
  overflow: hidden;
  margin: 0;
  margin-left: calc(25vw - 7px);
  padding: 0;
  font-size: 2.7rem;
  color: #ece0e0;
  user-select: none;
  visibility: hidden;
  transition: margin 500ms ease;
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-mask {
    color: #ece0e0;
  }
}
@media (max-aspect-ratio: 1/1) {
  .greynav-mask {
    margin-left: calc(16.6667vw - 7px);
  }
}
@media (max-width: 816px) {
  .greynav-mask {
    margin-left: calc(12.5vw - 7px);
  }
}
@media (max-width: 482px) {
  .greynav-mask {
    margin-left: calc(4.16667vw - 7px);
  }
}

.greynav-i {
  position: relative;
  width: 0;
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 2.7rem;
  line-height: 3rem;
  transition: width 500ms ease;
}

.greynav-i:hover > .greynav-label, .greynav-i:focus-within > .greynav-label {
  z-index: 1;
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-i:hover > .greynav-label, .greynav-i:focus-within > .greynav-label {
    z-index: -1;
  }
}
.greynav-i:hover .greynav-a, .greynav-i:focus-within .greynav-a {
  /* Set solid text colour by default, to be unset if text stroke is supported */
  color: #740000;
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-i:hover .greynav-a, .greynav-i:focus-within .greynav-a {
    /* Unset text fill colour and set stroke colour instead. */
    /* Use a darker highlight colour to maintain visibility. */
    color: #ece0e0;
    -webkit-text-stroke-width: thin;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #520000;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-i:hover .greynav-a, .greynav-i:focus-within .greynav-a {
    color: #740000;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-i:hover .greynav-a, .greynav-i:focus-within .greynav-a {
      color: #ece0e0;
      -webkit-text-stroke-width: thin;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #520000;
    }
  }
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-i:hover > .greynav-mask, .greynav-i:focus-within > .greynav-mask {
    visibility: visible;
  }
}
.greynav-i:hover::after, .greynav-i:focus-within::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: calc(25vw - 1px);
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #ece0e0;
  border-right: 1px solid #740000;
  transition: width 500ms ease;
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-i:hover::after, .greynav-i:focus-within::after {
    border-color: #520000;
    background-color: #ece0e0;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-i:hover::after, .greynav-i:focus-within::after {
    border-color: #740000;
    background-color: #ece0e0;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-i:hover::after, .greynav-i:focus-within::after {
      border-color: #520000;
      background-color: #ece0e0;
    }
  }
}
@media (max-aspect-ratio: 1/1) {
  .greynav-i:hover::after, .greynav-i:focus-within::after {
    width: calc(16.6667vw - 1px);
  }
}
@media (max-width: 816px) {
  .greynav-i:hover::after, .greynav-i:focus-within::after {
    width: calc(12.5vw - 1px);
  }
}
@media (max-width: 482px) {
  .greynav-i:hover::after, .greynav-i:focus-within::after {
    width: calc(4.16667vw - 1px);
  }
}

@media (any-hover: none) {
  .greynav-i:hover > .greynav-label {
    z-index: -1;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-i:hover > .greynav-label {
      z-index: -1;
    }
  }
  .greynav-i:hover .greynav-a {
    color: #e0d8d8;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-i:hover .greynav-a {
      color: #ece0e0;
      -webkit-text-stroke-width: thin;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #cac0c0;
    }
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-i:hover > .greynav-mask {
      visibility: hidden;
    }
  }
  .greynav-i:hover::after {
    display: none;
  }
}
/*
	Navigation item for current page
*/
.greynav-current .greynav-a {
  color: #dae2e2;
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-current .greynav-a {
    color: #dae2e2;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-current .greynav-a {
    color: #c6dada;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-current .greynav-a {
      color: #dae2e2;
      -webkit-text-stroke-width: thin;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #bec3c3;
    }
  }
}
.greynav-current .greynav-mask {
  /* Use a lighter colour when in focus (in non-compat mode with a highlighted stroke) */
  color: #e3e5e5;
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-current .greynav-mask {
    color: #e3e5e5;
  }
}

.greynav-current:hover .greynav-a, .greynav-current:focus-within .greynav-a {
  color: darkslategrey;
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-current:hover .greynav-a, .greynav-current:focus-within .greynav-a {
    /* Use a lighter colour when in focus with a highlighted stroke */
    color: #e3e5e5;
    -webkit-text-stroke-width: thin;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #002525;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-current:hover .greynav-a, .greynav-current:focus-within .greynav-a {
    color: darkslategrey;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-current:hover .greynav-a, .greynav-current:focus-within .greynav-a {
      color: #e3e5e5;
      -webkit-text-stroke-width: thin;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #002525;
    }
  }
}
.greynav-current:hover::after, .greynav-current:focus-within::after {
  border-color: darkslategrey;
  background-color: #e3e5e5;
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-current:hover::after, .greynav-current:focus-within::after {
    border-color: #002525;
    background-color: #e3e5e5;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-current:hover::after, .greynav-current:focus-within::after {
    border-color: darkslategrey;
    background-color: #e3e5e5;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-current:hover::after, .greynav-current:focus-within::after {
      border-color: #002525;
      background-color: #e3e5e5;
    }
  }
}

@media (any-hover: none) {
  .greynav-current:hover .greynav-a {
    color: #c6dada;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-current:hover .greynav-a {
      color: #dae2e2;
      -webkit-text-stroke-width: thin;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #bec3c3;
    }
  }
  .greynav-current:hover::after {
    display: none;
  }
}
/*
	Navigation menu button

	This button should never be .nav-current
*/
.greynav-iconpath {
  fill: #ece0e0;
  stroke: #ece0e0;
  stroke-width: 1.2px;
  stroke-linejoin: round;
}
@supports (-webkit-text-stroke-color: #520000) {
  .greynav-iconpath {
    fill: #ece0e0;
    stroke: #ece0e0;
    stroke-width: 1.2px;
    stroke-linejoin: round;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-iconpath {
    fill: #e0d8d8;
    stroke: #e0d8d8;
    stroke-width: 1.2px;
    stroke-linejoin: round;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    .greynav-iconpath {
      fill: #ece0e0;
      stroke: #cac0c0;
      stroke-width: 1.2px;
      stroke-linejoin: round;
    }
  }
}

@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  .greynav-mask .greynav-iconpath {
    stroke: #ece0e0;
    stroke-width: 1.2px;
    stroke-linejoin: round;
  }
}

.greynav-icon {
  height: 2.2rem;
  width: 2.2rem; /* Necessary for IE11 */
  margin: 0;
  padding: 0;
  margin-top: 0.6rem;
}

#greynav-menu {
  height: 3rem;
  margin: 0;
  margin-bottom: 3rem;
  padding: 0;
}

#greynav-menu:hover > .greynav-label .greynav-iconpath, #greynav-menu:hover > .greynav-short .greynav-iconpath, #greynav-menu:focus-within > .greynav-label .greynav-iconpath, #greynav-menu:focus-within > .greynav-short .greynav-iconpath {
  /* Set solid fill colour by default, to be unset only if text stroke is supported. */
  /* The fill should be solid if only svg stroke is supported, for consistency with the text. */
  fill: #740000;
  stroke: #740000;
}
@supports (-webkit-text-stroke-color: #520000) {
  #greynav-menu:hover > .greynav-label .greynav-iconpath, #greynav-menu:hover > .greynav-short .greynav-iconpath, #greynav-menu:focus-within > .greynav-label .greynav-iconpath, #greynav-menu:focus-within > .greynav-short .greynav-iconpath {
    /* Unset svg fill colour and set stroke colour instead. */
    /* Use a darker highlight colour to maintain visibility. */
    fill: #ece0e0;
    stroke: #520000;
  }
}
@media only screen and (hover: none), only screen and (max-device-width: 802px), only screen and (max-device-height: 602px), only screen and (max-width: 602px), only screen and (min-aspect-ratio: 1/1) and (max-height: 482px), only screen and (max-aspect-ratio: 1/1) and (max-height: 802px) {
  #greynav-menu:hover > .greynav-label .greynav-iconpath, #greynav-menu:hover > .greynav-short .greynav-iconpath, #greynav-menu:focus-within > .greynav-label .greynav-iconpath, #greynav-menu:focus-within > .greynav-short .greynav-iconpath {
    fill: #740000;
    stroke: #740000;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    #greynav-menu:hover > .greynav-label .greynav-iconpath, #greynav-menu:hover > .greynav-short .greynav-iconpath, #greynav-menu:focus-within > .greynav-label .greynav-iconpath, #greynav-menu:focus-within > .greynav-short .greynav-iconpath {
      fill: #ece0e0;
      stroke: #520000;
    }
  }
}

@media (any-hover: none) {
  #greynav-menu:hover > .greynav-label .greynav-iconpath, #greynav-menu:hover > .greynav-short .greynav-iconpath {
    fill: #e0d8d8;
    stroke: #e0d8d8;
  }
  @supports (-webkit-text-stroke-color: #520000) {
    #greynav-menu:hover > .greynav-label .greynav-iconpath, #greynav-menu:hover > .greynav-short .greynav-iconpath {
      fill: #ece0e0;
      stroke: #cac0c0;
      stroke-width: 1.2px;
      stroke-linejoin: round;
    }
  }
}
#greynav-menu.greynav-i:hover::after, #greynav-menu.greynav-i:focus-within::after {
  /* Maintain the same width when expanding and minimising the sidebar, and change margin-left instead */
  margin-left: calc(25vw - 0.5rem - 1px);
  width: 0.5rem;
  transition: margin-left 500ms ease;
}
@media (max-aspect-ratio: 1/1) {
  #greynav-menu.greynav-i:hover::after, #greynav-menu.greynav-i:focus-within::after {
    margin-left: calc(16.6667vw - 0.5rem - 1px);
  }
}
@media (max-width: 816px) {
  #greynav-menu.greynav-i:hover::after, #greynav-menu.greynav-i:focus-within::after {
    margin-left: calc(12.5vw - 0.5rem - 1px);
  }
}
@media (max-width: 482px) {
  #greynav-menu.greynav-i:hover::after, #greynav-menu.greynav-i:focus-within::after {
    margin-left: calc(4.16667vw - 0.5rem - 1px);
  }
}

@media (any-hover: none) {
  #greynav-menu.greynav-i:hover::after {
    display: none;
  }
}
/*
	Navigation preview
*/
.greynav-preview {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -2;
  width: 50%;
  height: 100%;
  vertical-align: middle;
  overflow: hidden;
  /* Fade out to the left */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), black);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), black);
  pointer-events: none;
}
.greynav-preview > img {
  display: block;
  position: absolute;
  right: 0;
  max-height: 100%;
}
.greynav-preview::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Fade to grey to the right */
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 75%, #ece0e0ff);
}
.greynav-preview.greynav-random > img {
  display: none;
}

@supports (mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), black)) or (-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), black)) {
  /* Styles for .greynav-preview are defined above but not displayed unless mask-image is supported. */
  .greynav-i:hover > .greynav-preview, .greynav-i:focus-within > .greynav-preview {
    display: block;
  }
}
@media (any-hover: none) {
  .greynav-i:hover > .greynav-preview {
    display: none;
  }
}
/*
	Minimised side bar
*/
.greynav-min #greynav-box {
  width: 0.5rem;
}
.greynav-min .greynav-label {
  margin-left: calc(0.5rem - 6px);
  visibility: hidden;
}
.greynav-min .greynav-short {
  margin-left: calc(0.5rem - 6px);
  visibility: visible;
}
.greynav-min .greynav-mask {
  margin-left: calc(0.5rem - 7px);
}
.greynav-min .greynav-i:hover > .greynav-label, .greynav-min .greynav-i:focus-within > .greynav-label {
  visibility: visible;
}
.greynav-min .greynav-i:hover > .greynav-short, .greynav-min .greynav-i:focus-within > .greynav-short {
  visibility: hidden;
}
.greynav-min .greynav-i:hover::after, .greynav-min .greynav-i:focus-within::after {
  width: calc(0.5rem - 1px);
}
@media (any-hover: none) {
  .greynav-min .greynav-i:hover > .greynav-label {
    visibility: hidden;
  }
  .greynav-min .greynav-i:hover > .greynav-short {
    visibility: visible;
  }
}
.greynav-min #greynav-menu.greynav-i:hover::after, .greynav-min #greynav-menu.greynav-i:focus-within::after {
  margin-left: calc(0rem - 1px);
}
.greynav-min .greynav-i:hover > .greynav-preview, .greynav-min .greynav-i:focus-within > .greynav-preview {
  display: none;
}

/*
	Hide menu button on home page
*/
.greynav-home > #greynav-menu > .greynav-label {
  visibility: hidden;
  margin-left: calc(-2.2rem - 6px);
}
.greynav-home > #greynav-menu > .greynav-short {
  visibility: hidden;
  margin-left: calc(-2.2rem - 6px);
}
.greynav-home > #greynav-menu > .greynav-mask {
  visibility: hidden;
  margin-left: calc(-2.2rem - 7px);
}

/*
	Tweaks for small viewports (small tablets and phones)
*/
@media (max-width: 816px) {
  /* Includes media-phone */
  .greynav-min {
    /* Hide navigation items when minimised except menu */
  }
  .greynav-min .greynav-i * {
    visibility: hidden;
  }
  .greynav-min #greynav-menu * {
    visibility: visible;
  }
  :root {
    /* Expand column slightly to be like stylesheets without greynav */
    --g-main-margin-h: 1.5rem;
    --g-main-width: calc(100vw - 2 * var(--g-main-margin-h));
  }
  main {
    /* Move main down to avoid collision with menu */
    margin-top: 3rem;
  }
}

/*# sourceMappingURL=greynav.css.map */