:root {
  --headerHeight: 100px;
  --headerPadding: 12px;
  --headerTitleFontSize: calc(var(--headerHeight) * 0.9);

  --footerHeight: 100px;

  --cardWidth: 595;
  --cardHeight: 842;
  --cardAspectRatio: var(--cardWidth) / var(--cardHeight);

  --pageHeight: calc(100vh - var(--headerHeight) - var(--footerHeight));
  --newCardHeight: calc(var(--pageHeight) - 120px);
  --cardFlexBasis: calc(var(--cardWidth) * (var(--newCardHeight) / var(--cardHeight)));

  --pageArrow: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20lang=%22en-GB%22%20viewBox=%220%200%20313.69%20313.69%22%3E%3Cdefs%3E%3Cstyle%20type=%22text/css%22%3E%3C!%5BCDATA%5Bpath%7Bfill:rgb%28255,255,255%29;%7D%5D%5D%3E%3C/style%3E%3C/defs%3E%3Cpath%20d=%22m%20106.14085,231.81558%20-75.718313,-74.9705%2075.718313,-74.970504%2075.71831,-74.9705012%202.3662,-0.071756%202.3662,-0.071756%20V%2039.887326%2073.014088%20h%2045.97183%2045.97183%20v%2083.830992%2083.83099%20h%20-45.97183%20-45.97183%20v%2033.12676%2033.12676%20l%20-2.3662,-0.0718%20-2.3662,-0.0718%20z%22/%3E%3C/svg%3E');
  

  touch-action: manipulation;
  scroll-behavior: smooth;

  /* 544px */
}

body {
  margin: 0;
  color: rgb(31, 31, 31);
  background-color: rgb(255, 255, 255);
  overflow-x: hidden;
}

.space {
  display: inline-block;
  width: 12px;
  color: rgba(0, 0, 0, 0);
}

.main {
  height: var(--pageHeight);
  color: var(--themeColor02);
  background-color: rgb(255, 255, 255); 
}

.page {
  width: 100vw;
  padding-top: var(--headerHeight);
  padding-bottom: var(--footerHeight);
  background-color: rgb(255, 255, 255);
}

.page.noTargetPage {
  opacity: 0;
  animation: fadeUp 1.8s ease-out forwards;
}

@keyframes fadeUp {0%, 66.66% {opacity: 0;} 100% {opacity: 1;}}

:is(.page:target, .page.noTargetPage) {
  top: 0;
  display: block;  
}

.page:target ~ .page.noTargetPage {
  display: none;
}

.page.locationPage:target {
  display: flex;
  justify-content: center;
}

:is(.mainHeading, .mainHeadingTagline) {
  margin: 0;
  font-weight: 400;
  text-align: center;
}

.mainHeading {
  font-size: 10vw;
}

.mainHeadingTagline {
  font-size: 5vw;
}

.mainHeadingTagline a {
  display: block;
  padding-top: 5vw;
  color: rgb(191, 0, 0);
}

.locationHeading {
  position: absolute;
  top: var(--headerHeight);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 76px;
  font-weight: 400;
  text-align: center;
}

:is(.prevButton, .nextButton) {
  position: fixed;
  top: calc(50vh - 48px);
  z-index: 9;
  width: 48px;
  height: 96px;
  margin: 0;
  padding: 0;
  line-height: 96px;
  font-size: 42px;
  text-align: center;
  color: rgb(255, 255, 255);
  background-image: var(--pageArrow);
  background-position: 0 center;
  background-color: var(--themeColor02);
  background-size: 42px 42px;
  background-repeat: no-repeat;
  border: 2px solid var(--themeColor03);
  border-left: none;
  border-radius: 0 9px 9px 0;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0);
  opacity: 0.3;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.prevButton {
  left: 0;
}

.nextButton {
  right: 0;
  transform: rotate(180deg);
}

:is(.prevButton:hover, .nextButton:hover) {
  opacity: 1;
  box-shadow: 0 0 12px var(--themeColor01);
} 

.marshianArtsTrailCard {
  position: relative;
  z-index: 6;  
  display: block;
}

.marshianArtsTrailCard.info-1 {
  width: min(90vw, 1275px);
  aspect-ratio: 1275 / 1781;
  margin: 0 auto;
}

.marshianArtsTrailCard:is(.info-2, .info-3) {
  width: min(90vw, 1754px);
  aspect-ratio: 1754 / 1240;
  margin: 0 auto;
}

.locationPage .artistLink {
  position: relative;
  flex: 0 1 var(--cardFlexBasis);
  aspect-ratio: var(--cardAspectRatio);
  margin: 98px 12px 0 12px;
}

.locationPage .marshianArtsTrailCard {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

/* NUMBER OF CARDS: 5 OR 6 */
.locationPage:has(a.artistLink:nth-of-type(5)):target {
  flex-wrap: wrap;
  padding-bottom: calc(var(--footerHeight) + 24px);
}

.locationPage:has(a.artistLink:nth-of-type(5)) .artistLink {
  --cardFlexBasis: calc((100vw - (24px * 4)) / (4 - 1));
  --cardHeight: calc(var(--cardHeight) * (var(--cardFlexBasis) / var(--cardFlexBasis)));
}

.locationPage:has(a.artistLink:nth-of-type(5)) a.artistLink:nth-of-type(n + 4) {
  margin-top: 24px;
}
  
.locationPage:has(a.artistLink:nth-of-type(5)) a.artistLink:nth-of-type(4):nth-last-of-type(3),
.locationPage:has(a.artistLink:nth-of-type(5)) a.artistLink:nth-of-type(4):nth-last-of-type(4),
.locationPage:has(a.artistLink:nth-of-type(5)) a.artistLink:nth-of-type(5):nth-last-of-type(3) {
  transform: translateX(calc(6px - (100vw / 6)));
}

.artistPage .marshianArtsTrailCard {
  width: min(90vw, 595px);
  aspect-ratio: 595 / 842;
  margin: 0 auto;
}

.artistProfile {
  --artistProfileWidth: 640px;
  position: relative;
  display: grid;
  grid-template-rows: calc(0.199 * var(--artistProfileWidth)) calc(0.191 * var(--artistProfileWidth)) auto 0 calc(0.193 * var(--artistProfileWidth));
  grid-template-columns: calc(0.272 * var(--artistProfileWidth)) calc(0.226 * var(--artistProfileWidth)) calc(0.502 * var(--artistProfileWidth));
  grid-template-areas: 
    "profileHeaderLogo profileHeaderText1 profileHeaderText1"
    "profileHeaderLogo profileHeaderArrow profileHeaderText2"
    "profileBodyLeft profileBodyLeft profileBodyRight"
    "profileBodyBottom profileBodyBottom profileBodyBottom"
    "profileFooter profileFooter profileFooter";
  width: var(--artistProfileWidth);
  padding: calc(0.044 * var(--artistProfileWidth)) calc(0.044 * var(--artistProfileWidth)) calc(0.088 * var(--artistProfileWidth)) calc(0.044 * var(--artistProfileWidth));
  height: auto;
  margin: 27px auto calc(0.132 * var(--artistProfileWidth));
  font-family: verdana, arial, sans-serif;
  font-size: 12.6px;
  color: rgb(31, 31, 31);
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

#ann-wear .artistProfile {
  grid-template-rows: calc(0.199 * var(--artistProfileWidth)) calc(0.191 * var(--artistProfileWidth)) auto minmax(192px, auto) calc(0.193 * var(--artistProfileWidth));
}

.profileBodyLeft, 
.profileBodyRight,
.profileBodyBottom {
  position: relative;
  padding-right: calc(0.011 * var(--artistProfileWidth));
}

.profileBodyLeft {
  grid-area: profileBodyLeft;
  z-index: 6;
  padding-right: calc(0.011 * var(--artistProfileWidth));
}

.profileBodyRight {
  grid-area: profileBodyRight;
  z-index: 0;
  padding-left: calc(0.022 * var(--artistProfileWidth));
}

.profileBodyBottom {
  grid-area: profileBodyBottom;
} 

.artistName {
  height: 90px;
  padding: 0 0 0 calc(80px + min((6vw / 9), 6px));
  border-bottom: 9px solid var(--themeColor06);
}

#jessica-burnand-martin .artistName {
  height: 114px;
}

.artistNameHeading {
  margin: 0;
  padding: 0;
  line-height: 1;
  color: var(--themeColor06);
  font-size: min(calc(67.5vw / 9), 45.5px);
  font-weight: 400;
  text-shadow: 1px 1px 1px rgb(255, 255, 255), 1px -1px 1px rgb(255, 255, 255), -1px -1px 1px rgb(255, 255, 255), -1px 1px 1px rgb(255, 255, 255);
}

#jessica-burnand-martin .artistNameHeading {
  font-size: min(calc(56.25vw / 9), 37.92px);
}  

.artistImage {
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  aspect-ratio: 1/1;
}

.artistIntro {
  margin: 0;
  padding: calc(0.022 * var(--artistProfileWidth)) 0;
  border-bottom: 9px solid rgb(176, 36, 132);
}

.artistIntro:has(.socialLinksList) {
  padding-bottom: 0;
}

.profileParagraph {
  line-height: 1.5;
  font-size: 12px;
}

.artistContact .profileParagraph:has(+ .socialLinksList) {
  margin-bottom: 0;
}

.artistContact .profileParagraph:empty:has(+ .socialLinksList) {
  height: 0;
  line-height: 0;
  font-size: 0;
}

.artistIntro .profileParagraph {
  font-weight: 700;
}

.artImage + .profileParagraph {
  clear: both;
  padding: calc(0.01 * var(--artistProfileWidth)) 9px 0 0;
  text-align: right;
}

.paintingCaption.\--line1,
.paintingCaption.\--line2 {
  display: inline-block;
}

.paintingCaption.\--line3 {
  display: block;
}

.artistIntro p:first-of-type {
  margin-top: 0;
}

.artistIntro p:last-of-type {
  margin-bottom: 0;
}

.artistInfo {
  padding: calc(0.022 * var(--artistProfileWidth)) 0;
}

.artistInfo:not(.borderless) {
  border-bottom: 9px solid rgb(54, 189, 232);
}

.artistInfo p:first-of-type {
  margin-top: 0;
}

.artistInfo p:last-of-type {
  margin-bottom: 0;
}

.artImage {
  display: block;
  margin: calc(0.022 * var(--artistProfileWidth)) auto 0;  
}

.artistInfo.borderless + .artImage {
  margin: 0 auto;  
}

.artistContact {
  border-bottom: 9px solid rgb(39, 68, 149);
}

.socialLinksList {
  position: relative;
  z-index: 6;
  margin: 0;
  padding: calc(0.022 * var(--artistProfileWidth)) 0 calc(0.022 * var(--artistProfileWidth)) calc(0.011 * var(--artistProfileWidth));
  line-height: calc(0.052 * var(--artistProfileWidth));
  list-style-type: none;
  white-space: nowrap; 
}

.socialLinksList li::before {
  content: '';
  display: inline-block;
  width: calc(0.052 * var(--artistProfileWidth));
  height: calc(0.052 * var(--artistProfileWidth));
  margin-right: calc(0.011 * var(--artistProfileWidth));
  color: rgb(255, 255, 255);
  background-color: rgb(96, 36, 129);
  background-size: 73%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  vertical-align: middle;
}

.artistContact .socialLinksList {
  font-size: 12px;  
}

.artistContact .socialLinksList li + li {
  margin-top: calc(0.022 * var(--artistProfileWidth));
}

.socialLinksList li.sms::before {
  content: '…';
  line-height: calc(0.032 * var(--artistProfileWidth));
  font-size: calc(0.033 * var(--artistProfileWidth));
  text-align: center;
  font-weight: 700;
}

.socialLinksList li.email::before {
  content: '＠';
  font-size: calc(0.033 * var(--artistProfileWidth));
  text-align: center;
}

.socialLinksList li.bluesky::before {
  background-size: 60%;
  background-image: url('/images/icons/bluesky--icon.svg');
}

.socialLinksList li.facebook::before {
  background-image: url('/images/icons/facebook--icon.svg');
}

.socialLinksList li.instagram::before {
  background-image: url('/images/icons/instagram--icon.svg');
}

.socialLinksList li.mastodon::before {
  background-size: 60%;
  background-image: url('/images/icons/mastodon--icon.svg');
}

.socialLinksList li.threads::before {
  background-size: 60%;
  background-image: url('/images/icons/threads--icon.svg');
}

.socialLinksList li.tiktok::before {
  background-image: url('/images/icons/tiktok--icon.svg');
}

.socialLinksList li.youtube::before {
  background-image: url('/images/icons/youtube--icon.svg');
}

.socialLinksList li.phone::before {
  background-image: url('/images/icons/phone--icon.svg');
}

.socialLinksList li.tumblr::before {
  background-size: 90%;
  background-image: url('/images/icons/tumblr--icon.svg');
}

.socialLinksList li.twitter::before {
  background-size: 60%;
  background-image: url('/images/icons/x--icon.svg');
}

.socialLinksList li.web::before {
  background-image: url('/images/icons/web--icon.svg');
}

.socialLinksList li a {
  text-decoration: none;
  text-shadow: 1px 1px 1px rgb(255, 255, 255), 1px -1px 1px rgb(255, 255, 255), -1px -1px 1px rgb(255, 255, 255), -1px 1px 1px rgb(255, 255, 255);
}

:is(.artistInfo, .artistContact) .socialLinksList li a {
  color: rgb(31, 31, 31);
  font-weight: 700;
}

.socialLinksList li a:hover {
  color: rgb(96, 36, 129);
  text-decoration: underline;
}

.artImage {
  width: calc(100% - 6px);
  float: left;
}

.artImage.\--halfWidth {
  width: calc(50% - 3px - 7.5px);
}

.artImage.\--halfWidth + .artImage.\--halfWidth {
  margin-left: 15px;
}

.artImage.\--twoThirdsWidth {
  width: calc(66.66% - 4px);
} 

a:has(.marshianArtsTrailButton) {
  text-decoration: none;
}

.marshianArtsTrailButton {
  display: block;
  width: 84vw;
  height: 12vw;
  line-height: 2;
  margin: 96px 8vw;
  font-size: 6.5vw;
  color: rgb(255, 255, 255);
  background: var(--footerBackground) linear-gradient(var(--themeColor05) 0%, var(--themeColor01) 48%, var(--themeColor01) 52%, var(--themeColor05) 100%);
  border: 3px solid var(--themeColor05);
  border-radius: 4px;
  cursor: pointer;
}

.artistPage .marshianArtsTrailButton {
  width: min(calc(100vw - 36px), 890px);
  height: min(12vw, 112px);
  margin: 0 auto 12px;
  font-size: min(6vw, 56px);
}

.artistPageParagraph {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-size: 76px;
  font-weight: 400;
  text-align: center;
  transform: translateY(7.6px);
}

.qr-code {
  position: absolute;
  top: 45vw;
  z-index: 12;
  width: 10vw;
  height: 18vw;
  background-color: rgba(0, 0, 0, 0);    
}

.qr-code.\--facebook {
  right: 16.6vw;  
}

.qr-code.\--instagram {
  right: 5.3vw;   
}

@media only screen and (width <= 2660px) {.qr-code {top: 46vw;}}
@media only screen and (width <= 2560px) {.qr-code {top: 47vw;}}
@media only screen and (width <= 2460px) {.qr-code {top: 48vw;}}
@media only screen and (width <= 2360px) {.qr-code {top: 49vw;}}
@media only screen and (width <= 2260px) {.qr-code {top: 50vw;}}
@media only screen and (width <= 2160px) {.qr-code {top: 51vw;}}
@media only screen and (width <= 2060px) {.qr-code {top: 52vw;}}
@media only screen and (width <= 1960px) {.qr-code {top: 53vw;}}
@media only screen and (width <= 1860px) {.qr-code {top: 54vw;}}
@media only screen and (width <= 1760px) {.qr-code {top: 55vw;}}
@media only screen and (width <= 1660px) {.qr-code {top: 56vw;}}
@media only screen and (width <= 1560px) {.qr-code {top: 57vw;}}
@media only screen and (width <= 1460px) {.qr-code {top: 58vw;}}
@media only screen and (width <= 1360px) {.qr-code {top: 59vw;}}
@media only screen and (width <= 1260px) {.qr-code {top: 60vw;}}
@media only screen and (width <= 1160px) {.qr-code {top: 61vw;}}
@media only screen and (width <= 1060px) {.qr-code {top: 62vw;}}
@media only screen and (width <= 960px) {.qr-code {top: 63vw;}}
@media only screen and (width <= 860px) {.qr-code {top: 64vw;}}
@media only screen and (width <= 760px) {.qr-code {top: 65vw;}}

:is(.header, .footer) {
  position: fixed;
  left: 0;
  z-index: 12;
  display: block;
  width: 100vw;
  color: rgb(255, 255, 255);
  box-sizing: border-box; 
}

.header {
  top: 0;
  height: var(--headerHeight);
  background-color: var(--headerBackground);
  box-shadow: 0 9px 9px var(--headerShadow);
}

.headerTitle {
  height: var(--headerHeight);   
  margin: 0;
  padding: 0;
  line-height: var(--headerHeight);
  text-align: center;
  font-weight: 400;
  font-size: var(--headerTitleFontSize);
  transform: translateY(calc(var(--headerTitleFontSize) / 10));
}

.headerTitleLink {
  color: rgb(255, 255, 255);
  text-decoration: none;
}

:is(.appMenuButton, .mainMenuButton) {
  position: absolute;
  top: var(--headerPadding);
  display: block;
  padding: 0;
  width: calc(var(--headerHeight) - (var(--headerPadding) * 2));
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.appMenuButton {
  left: var(--headerPadding);
  /* background-image: url('/images/logos/marshian-arts-trail--logo.avif'); */
  background-image: url('/images/illumination/illumination.avif');
  /* background-size: cover; */
  background-size: 302px 114px;
  /* background-position: center; */
  background-position: top left;
  background-repeat: no-repeat;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 50%;
  box-sizing: border-box;
}


.mainMenuButton {
  right: var(--headerPadding);
  background-color: var(--themeColor01);
  background-size: cover;
  border: 2px solid var(--themeColor02);
  border-bottom: 2px solid var(--themeColor03);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.2), 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.mainMenuButtonText {
  display: block;
  font-size: 36px;
  color: rgb(255, 255, 255);
  text-align: center;
  transform: translateY(3.6px);
  pointer-events: none;
}

.footer {
  bottom: 0;
  height: var(--footerHeight);
  background-color: var(--footerBackground);
  box-shadow: 0 -9px 9px var(--footerShadow);
}

.footerMessage {  
  height: var(--footerHeight);   
  margin: 0;
  padding: 0;
  line-height: var(--footerHeight);
  text-align: center;
  font-size: clamp(32px, 5vw, calc(var(--footerHeight) * 0.98));
  transform: translateY(clamp(3.2px, 0.5vw, calc(var(--footerHeight) * 0.098)));
}

body:has(.mainMenuContainer.\--open, .appMenuContainer.\--open) :is(.header, .footer) {
  box-shadow: none;
}

:is(.appMenuContainer, .mainMenuContainer) {
  position: fixed;
  top: var(--headerHeight);
  z-index: 9;
  width: 408px;
  height: var(--pageHeight);
  margin: 0;
  background-color: rgb(18, 89, 16);
  box-sizing: border-box;
  transition: transform 0.4s linear;
}

.appMenuContainer {
  right: 100vw;
}

.appMenuContainer.\--open {
  transform: translateX(408px);
}

.mainMenuContainer {
  left: 100vw;
}

.mainMenuContainer.\--open {
  transform: translateX(-408px);
}

.menuHeader {
  position: relative;
  height: 70px;
}

.mainMenuContainer .menuHeader {
  height: 142px;
  background-color: var(--themeColor02);
  border-bottom: 3px solid rgb(34, 105, 32);
}

.menuHomeLink {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 70px;
  padding: 0 12px;
  line-height: 64px;
  border-top: 3px solid rgb(34, 105, 32);
  border-bottom: 3px solid rgb(34, 105, 32);
  box-sizing: border-box;
}

.mainMenuContainer .menuHomeLink {
  background-color: rgb(18, 89, 16);
  border-bottom: rgb(18, 89, 16);
}  

.menuHomeLink::before,
.menuHomeLink::after {
  content: '';
  position: absolute;
  top: 8px;
  display: block;
  width: 48px;
  height: 48px;
  background-size: 100%;
  box-sizing: border-box;
}

[data-keyboard-navigation="on"] .menuHomeLink:focus {
  border-top: 3px dashed rgba(255, 255, 0);
  border-bottom: 3px dashed rgba(255, 255, 0);
  outline: none;
}

.menuHomeLinkText {
  display: inline-block;
  font-size: 32px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  transform: translateY(3.2px);
}

.menuTypeButton {
  position: absolute;
  top: 78px;
  width: 190px;
  height: 36px;
  margin: 9px 0;
  line-height: 33px;
  background-color: var(--themeColor01);
  background-image: linear-gradient(var(--themeColor01), var(--themeColor02) 50%, var(--themeColor02) 51%, var(--themeColor03));
  background-size: cover;
  border: 2px solid rgba(0, 0, 0, 0.075);
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  cursor: pointer;
}

.menuTypeButton::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
}

.menuTypeButton.\--artists {
  left: 12px;
}

.menuTypeButton.\--locations {
  right: 12px;  
}

[data-keyboard-navigation="on"] .menuTypeButton:focus {
  opacity: 1;
  outline: 1px dashed rgb(255, 255, 0);
}

.menuTypeButton.\--active {
  opacity: 1;
  pointer-events: none;
}

.menuTypeButton.\--active {
  box-shadow: 0 0 3px 3px  rgba(255, 255, 255, 0.15);
}

.menuTypeButton:not(.\--active, :hover) {
  filter: brightness(0.84);
}
  
:is(.menuTypeButton:hover::after, .menuTypeButton.\--active::after) {
  background-color: rgba(255, 255, 255, 0.25);
}

.menuTypeButtonText {
  display: block;
  font-size: 26px;
  color: rgb(255, 255, 255);
  text-align: center;
  pointer-events: none;
}

.appMenuContainer li.menuListItem:nth-of-type(n + 1) {
  background-color: var(--themeColor01);
}

.appMenuContainer li.menuListItem:nth-of-type(n + 3) {
  background-color: var(--themeColor04);
}

.appMenuContainer li.menuListItem:nth-of-type(n + 5) {
  background-color: var(--themeColor02);
}

.appMenuContainer li.menuListItem:nth-of-type(n + 8) {
  background-color: var(--themeColor05);
}

:is(.appMenuContainer,.appMenuContainer).\--open .menuHomeLink::before {
  background-image: url('/images/logos/marshian-arts-trail--logo.avif');
  border: 2px solid rgb(255, 255, 255);
  border-radius: 50%;
}

:is(.appMenuContainer, .mainMenuContainer).\--open .menuHomeLink::after {
  background-image: url('/images/icons/back.png');
}

.mainMenuContainer .menuHomeLink {
  text-align: right;
}

.appMenuContainer .menuHomeLink::before {
  left: 226px;
}

.appMenuContainer .menuHomeLink::after {
  left: 172px;
  transform: scaleX(-1);
}

.mainMenuContainer .menuHomeLink::before {
  right: 226px;
}

.mainMenuContainer .menuHomeLink::after {
  right: 172px;
}

:is(.appMenu, .mainMenu) {
  overflow-x: hidden;
  overflow-y: scroll;
  direction: rtl;
}

.appMenu {
  height: calc(var(--pageHeight) - 70px);
}

.mainMenu {
  height: calc(var(--pageHeight) - 145px);
}

.appMenu .menuList,
.mainMenu .menuList.\--active {
  display: block;  
}

.mainMenu .menuListItem:last-of-type {
  padding-bottom: 54px;
}

.menuList {
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  direction: ltr;
}

.menuListItem {
  position: relative;
  height: 70px;
  padding: 2px 0 2px 12px;
  font-size: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.mainMenu .menuListItem {
  background-color: var(--themeColor04);
}

[data-keyboard-navigation="on"] .menuListItem:focus-within {
  padding: 0 0 0 12px;
  border-top: 3px dashed rgb(255, 255, 0);
  border-bottom: 3px dashed rgb(255, 255, 0);
  outline: none;
}

.menuListItem:first-of-type,
[data-keyboard-navigation="on"] .menuListItem:focus-within + .menuListItem {
  padding: 3px 0 2px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0);
}

.menuListItem:last-of-type,
[data-keyboard-navigation="on"] .menuListItem:has(+ .menuListItem:focus-within) {
  padding: 2px 0 3px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.menuLink {
  position: absolute;
  inset: 0;
  z-index: 12;
  padding: 0 0 0 12px;
  line-height: 76px;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0);
  text-decoration: none;
}

.menuLink:is(:hover, :focus) {
  background-color: rgba(0, 0, 0, 0.2);
}

.menuListItem.\--active .menuLink {
  background-color: rgba(0, 0, 0, 0.3);
}

.appMenuContainer .menuLink {
  padding: 0 0 0 72px;
}

.appMenuContainer .menuLink::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 6px;
  display: block;
  width: 48px;
  height: 48px;
  background-size: 100%;
  border: 2px solid var(--themeColor05);
  border-radius: 50%;
  box-sizing: border-box;
}
  
.appMenuContainer.\--open .menuLink.bluesky::before {
  background-image: url('/images/logos/bluesky--logo.png');
}
  
.appMenuContainer.\--open .menuLink.copy::before {
  background-image: url('/images/logos/copy--logo.png');
}
  
.appMenuContainer.\--open .menuLink.email::before {
  background-image: url('/images/logos/email--logo.png');
}
  
.appMenuContainer.\--open .menuLink.facebook::before {
  background-image: url('/images/logos/facebook--logo.png');
}
  
.appMenuContainer.\--open .menuLink.instagram::before {
  background-image: url('/images/logos/instagram--logo.png');
}
  
.appMenuContainer.\--open .menuLink.mastodon::before {
  background-image: url('/images/logos/mastodon--logo.png');
}
  
.appMenuContainer.\--open .menuLink.messenger::before {
  background-image: url('/images/logos/messenger--logo.png');
}
  
.appMenuContainer.\--open .menuLink.threads::before {
  background-image: url('/images/logos/threads--logo.png');
}

.appMenuContainer.\--open .menuLink.whatsapp::before {
  background-image: url('/images/logos/whatsapp--logo.png');
}
  
.appMenuContainer.\--open .menuLink.x::before {
  background-image: url('/images/logos/x--logo.png');
}

[data-keyboard-navigation="on"] .menuListItem:focus-within .menuLink {
  line-height: 72px;
}

[data-keyboard-navigation="on"] .menuListItem:focus-within .menuLink::before {
    top: 7px;
}

[data-keyboard-navigation="on"] .menuLink:focus {
  outline: 3px dashed rgba(255, 255, 0);
}

.mainMenu .locationIndex {
  display: inline-block;
  width: 62px;
  font-size: 32px;
}

:is(.appMenu, .mainMenu) .space {
  width: 6px;
}

@media only screen and (hover: hover) {
  .mainMenuButton::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
  }
    
  .mainMenuButton:hover::after {
    background-color: rgba(0, 0, 0, 0.15);
  }  
}

@media only screen and (width <= 1248px) {

  /* NUMBER OF CARDS: 3 OR 4 */
  .locationPage:has(a.artistLink:nth-of-type(3)):not(:has(a.artistLink:nth-of-type(5))):target {
    flex-wrap: wrap;
    padding-bottom: calc(var(--footerHeight) + 24px);
  }

  .locationPage:has(a.artistLink:nth-of-type(3)):not(:has(a.artistLink:nth-of-type(5))) .artistLink {
    --cardFlexBasis: calc((100vw - (24px * 3)) / (3 - 1));
    --cardHeight: calc(var(--cardHeight) * (var(--cardFlexBasis) / var(--cardFlexBasis)));
  }

  .locationPage:has(a.artistLink:nth-of-type(3)):not(:has(a.artistLink:nth-of-type(5))) a.artistLink:nth-of-type(n + 3) {
    margin-top: 24px;
  }

  .locationPage:has(a.artistLink:nth-of-type(3)):not(:has(a.artistLink:nth-of-type(5))) a.artistLink:nth-of-type(3):nth-last-of-type(3) {
    transform: translateX(calc(6px - (100vw / 4)));
  }
}

@media only screen and (width <= 864px) {
  :root {
    --newCardHeight: calc(var(--pageHeight) - 9.3vw - 32px);
  }

  .headerTitle {
    font-size: 9vw;
    transform: translateY(0.9vw);
  }

  .locationHeading {
    top: calc(var(--headerHeight) - 0.5vw);
    font-size: 8vw;
    transform: translateY(0.8vw);
  }

  .locationPage .artistLink {
    margin: calc(8vw + 22px) 9px 0 9px;
  }

  .locationPage:has(a.artistLink:nth-of-type(5)) a.artistLink:nth-of-type(n + 4) {
    margin-top: 18px;
  }

  .locationPage:has(a.artistLink:nth-of-type(5)) .artistLink {
    --cardFlexBasis: calc((100vw - (15px * 4)) / (4 - 1));
  }

  .locationPage:has(a.artistLink:nth-of-type(3)):not(:has(a.artistLink:nth-of-type(5))) .artistLink {
    --cardFlexBasis: calc((100vw - (15px * 3)) / (3 - 1));
  }

  .locationPage:has(a.artistLink:nth-of-type(3)):not(:has(a.artistLink:nth-of-type(5))) a.artistLink:nth-of-type(n + 3) {
    margin-top: 18px;
  }

  .locationPage .marshianArtsTrailCard {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  }

  .artistProfile {
    --artistProfileWidth: calc(100vw - 120px);
    margin: 24px auto calc(0.13 * var(--artistProfileWidth));
  }

  .artistPageParagraph {
    font-size: 8vw;
    transform: translateY(0.8vw);
  }
}

@media only screen and (width <= 816px) {
  :is(.appMenuContainer, .mainMenuContainer) {
    width: 100vw;
  }

  .appMenuContainer.\--open {
    transform: translateX(100vw);
  }

  .mainMenuContainer.\--open {
    transform: translateX(-100vw);
  }
  
  .menuTypeButton {
    width: calc(50vw - 3vw);
  }

  .menuTypeButton.\--artists {
    left: 2vw;
  }
  
  .menuTypeButton.\--locations {
    right: 2vw;  
  }

  .menuListItem,
  .mainMenu .locationIndex  {
    font-size: max(6vw, 36px);
  }

  .mainMenu .locationIndex  {
    width: max(12vw, 72px);
  }
}

@media only screen and (width <= 640px) {

  :is(#james-blamires, #judy-hinchliffe, #dominique-loncan, #gustavo-mainetti, #kim-pemberton) .artistNameHeading {
    font-size: min(calc(56.25vw / 9), 37.92px);
  }

  .space {
    width: 6px;
  }

  .appMenuContainer .menuHomeLink::before {
    left: 214px;
  }

  .appMenuContainer .menuHomeLink::after {
    left: 160px;
  }

  .mainMenuContainer .menuHomeLink::before {
    right: 214px;
  }

  .mainMenuContainer .menuHomeLink::after {
    right: 160px;
  }

  .marshianArtsTrailButton {
    height: 56px;
    font-size: 24px;
    line-height: calc(56 / 24 / 100 * 104);
    margin: 42px 8vw;
  }

  .artistPage .marshianArtsTrailButton {
    line-height: 2;
  }  
  
  .menuTypeButton {
    width: calc(50vw - 9px);
  }

  .menuTypeButton.\--artists {
    left: 6px;
  }
  
  .menuTypeButton.\--locations {
    right: 6px;  
  }

  .locationIndex {
    pointer-events: none;
  }
}

@media only screen and (width <= 640px),
       only screen and (height <= 708px) {

  :root {
    --headerHeight: 60px;
    --headerPadding: 6px;
    --footerHeight: 60px;
  }

  .locationHeading {
    top: calc(var(--headerHeight) + 0.5vw);
  }

  :root {
    --newCardHeight: max(350px, calc(var(--pageHeight) - 150px));
  }

  .appMenuButton {
    background-size: calc(302px / 76 * 48) calc(114px / 76 * 48);
  }

  .mainMenuButtonText {
    font-size: 20px;
    transform: translateY(2px);
  }

  .footerMessage {  
    font-size: 28px;
    transform: translateY(2.8px);
  }
}

@media only screen and (width <= 530px) {
  :is(#gustavo-mainetti) .hideOnNarrowViewport {
    display: none;  
  }
}

@media only screen and (width <= 480px) {

  .artistProfile {
    --artistProfileWidth: calc(100vw - 60px);
    margin: 14px auto 30px;
  }  

  .artistPage .marshianArtsTrailButton {
    width: 96vw;
    height: 68px;
    margin: 0 2vw 12px;
    font-size: 7vw;
  }
  .menuListItem,
  .mainMenu .locationIndex  {
    font-size: 7.8vw;
  }

  .mainMenu .locationIndex  {
    width: 15.6vw;
  }
}

@media only screen and (width <= 440px) {
  :is(#james-blamires) .artistNameHeading {
    font-size: min(calc(59.0625vw / 9), 39.816px);
  }

  :is(#judy-hinchliffe, #dominique-loncan, #gustavo-mainetti) .artistNameHeading {
    font-size: min(calc(57.65625vw / 9), 38.868px);
  }

  :is(#kim-pemberton) .artistNameHeading {
    font-size: min(calc(50.85vw / 9), 34.128px);
  }

  :is(#tony-burke, #ann-wear, #nigel-wood) .hideOnNarrowViewport {
    display: none;  
  }

  :is(.prevButton, .nextButton) {
    opacity: 0.2;
  }  
}