/* Explore preview: shared landing artwork; optional background-only inversion. */
body.homepage.explore-open .landing,
body.homepage.explore-open #exploreScreen {
  background: transparent !important;
}
body.homepage.explore-open #exploreScreen {
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(40px, 6vw, 110px) !important;
  padding: 100px 13vw 60px 17vw !important;
}
body.homepage.explore-open #exploreScreen::before {
  content: "";
  display: block !important;
  position: fixed;
  inset: 0;
  width: auto !important;
  height: auto !important;
  z-index: -1;
  pointer-events: none;
  background: url("../assets/backgrounds/tablab-landing.png") 53% center / 102% 100% no-repeat;
}
body.homepage.explore-open #exploreScreen::after {
  display: none !important;
}
body.homepage.explore-open .explore-boardroom h2 {
  color: #35211b !important;
  text-shadow: none !important;
  font-size: clamp(42px, 4.5vw, 78px) !important;
  line-height: .98 !important;
}
body.homepage.explore-open .explore-boardroom p {
  color: #513f39 !important;
  text-shadow: none !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 1.3vw, 23px) !important;
  line-height: 1.5 !important;
}
body.homepage.explore-open .explore-kicker {
  color: #70452f !important;
}
body.homepage.explore-open .explore-kicker::after {
  background: #aa8068 !important;
}
body.homepage.explore-open .explore-kicker::before {
  background: #8c614b !important;
}
html[data-explore-invert] body.homepage.explore-open #exploreScreen::before {
  filter: invert(1);
}
html[data-explore-invert] body.homepage.explore-open .explore-boardroom h2,
html[data-explore-invert] body.homepage.explore-open .explore-boardroom p {
  color: #fff4e8 !important;
}
html[data-explore-invert] body.homepage.explore-open .explore-kicker {
  color: #e8bd8c !important;
}
@media (max-width: 800px) and (orientation: portrait) {
  body.homepage.explore-open #exploreScreen {
    grid-template-columns: 1fr !important;
    padding: 90px 32px 30px max(60px, 15vw) !important;
    gap: 24px !important;
  }
  body.homepage.explore-open #exploreScreen::before {
    background-size: 106% 100%;
    background-position: 56% center;
  }
  body.homepage.explore-open .explore-boardroom h2 {font-size: clamp(40px, 10vw, 57px) !important;}
  body.homepage.explore-open .explore-boardroom p {font-size: 18px !important;}
  body.homepage.explore-open .explore-anvil-rule {display:none !important;}
}
@media (max-width: 1100px) and (max-height: 700px) and (orientation: landscape) {
  body.homepage.explore-open #exploreScreen {
    padding: 70px 6vw 22px 13vw !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: 5vw !important;
  }
  body.homepage.explore-open .explore-boardroom h2 {font-size: clamp(34px, 5vw, 52px) !important;}
  body.homepage.explore-open .explore-boardroom p {font-size:16px !important;}
}

/* Approved option 9: Espresso Edge navigation cards. */
body.homepage.explore-open #exploreScreen .explore-choice {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 28px !important;
  column-gap: 20px !important;
  align-items: center !important;
  min-height: 76px !important;
  padding: 12px 24px 12px 22px !important;
  box-sizing: border-box;
  clip-path: none !important;
  border: 1px solid #dfcdc0 !important;
  border-left: 12px solid #3c2b24 !important;
  border-bottom: 3px solid #32231d !important;
  border-radius: 12px 12px 6px 6px !important;
  background: linear-gradient(110deg, #fffaf4, #f8eee5) !important;
  color: #261a14 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(12px, 1.08vw, 18px) !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 #fff, 0 8px 14px rgba(91,58,40,.12) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
body.homepage.explore-open #exploreScreen .explore-choice:first-child {
  background: linear-gradient(110deg, #e8b99b, #d6a28a) !important;
  border-top-color: #e8bd9e !important;
  border-right-color: #c99a80 !important;
  margin-bottom: 0 !important;
}
body.homepage.explore-open #exploreScreen .explore-choice::before {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 62% !important;
  padding-right: 15px !important;
  border-right: 1px solid #725346 !important;
  color: #35241c !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}
body.homepage.explore-open #exploreScreen .explore-choice::after {
  width: 28px !important;
  height: 20px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M1 11H28M19 2L28 11 19 20' fill='none' stroke='%2335241c' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  justify-self: end;
}
body.homepage.explore-open #exploreScreen .explore-choices::before,
body.homepage.explore-open #exploreScreen .explore-choices::after {
  display: none !important;
}
body.homepage.explore-open #exploreScreen .explore-choice:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, 0 10px 18px rgba(91,58,40,.18) !important;
}
body.homepage.explore-open #exploreScreen .explore-choice:focus-visible {
  outline: 3px solid #684839;
  outline-offset: 4px;
}
@media (max-width: 1100px) {
  body.homepage.explore-open #exploreScreen .explore-choice {
    grid-template-columns: 42px minmax(0, 1fr) 22px !important;
    gap: 12px !important;
    padding: 10px 16px 10px 15px !important;
    min-height: 58px !important;
    border-left-width: 9px !important;
    font-size: 12px !important;
    letter-spacing: .055em !important;
  }
  body.homepage.explore-open #exploreScreen .explore-choice::before {
    font-size: 25px !important;
    padding-right: 10px !important;
  }
  body.homepage.explore-open #exploreScreen .explore-choice::after {
    width: 22px !important;
  }
}

/* Boardroom colour sampled from the darkest red area of the monitor artwork. */
body.homepage.explore-open #exploreScreen .explore-choice:first-child {
  background: #8d3624 !important;
  color: #fff7ef !important;
  border-top-color: #aa5743 !important;
  border-right-color: #713021 !important;
}
body.homepage.explore-open #exploreScreen .explore-choice:first-child::before {
  color: #fff7ef !important;
  border-right-color: #d5a99b !important;
}
body.homepage.explore-open #exploreScreen .explore-choice:first-child::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M1 11H28M19 2L28 11 19 20' fill='none' stroke='%23fff7ef' stroke-width='1.5'/%3E%3C/svg%3E") !important;
}

body.homepage.explore-open #exploreScreen .explore-choice:first-child { font-weight: 700 !important; }
